improved a lot of things
This commit is contained in:
SinachPat
@@ -1,9 +1,10 @@
|
||||
'use client';
|
||||
|
||||
import { useRef, useEffect, useCallback } from 'react';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useViewport } from '@/store/viewport';
|
||||
import { useCanvas } from '@/store/canvas';
|
||||
import { useArtboards } from '@/hooks/useArtboards';
|
||||
import { useArtboards, createArtboardMutation } from '@/hooks/useArtboards';
|
||||
import { Artboard } from './Artboard';
|
||||
|
||||
export function Canvas() {
|
||||
@@ -11,8 +12,9 @@ export function Canvas() {
|
||||
const panX = useViewport((s) => s.panX);
|
||||
const panY = useViewport((s) => s.panY);
|
||||
const zoom = useViewport((s) => s.zoom);
|
||||
const { activeTool, selectArtboard, workspaceId } = useCanvas();
|
||||
const { artboards } = useArtboards(workspaceId ?? undefined);
|
||||
const { activeTool, setActiveTool, selectArtboard, workspaceId, projectId } = useCanvas();
|
||||
const { artboards } = useArtboards(workspaceId ?? undefined, projectId ?? undefined);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const isPanning = useRef(false);
|
||||
const lastPos = useRef({ x: 0, y: 0 });
|
||||
@@ -47,14 +49,43 @@ export function Canvas() {
|
||||
|
||||
const onMouseDown = useCallback((e: React.MouseEvent) => {
|
||||
const startPan = e.button === 1 || spaceDown.current || activeTool === 'pan';
|
||||
|
||||
if (startPan) {
|
||||
e.preventDefault();
|
||||
isPanning.current = true;
|
||||
lastPos.current = { x: e.clientX, y: e.clientY };
|
||||
} else if (e.target === e.currentTarget) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Artboard creation tool: click on canvas to place a new artboard
|
||||
if (activeTool === 'artboard' && e.target === e.currentTarget && workspaceId) {
|
||||
const rect = containerRef.current!.getBoundingClientRect();
|
||||
// Convert screen → canvas space (invert matrix(zoom,0,0,zoom,panX,panY))
|
||||
const { panX, panY, zoom } = useViewport.getState();
|
||||
const canvasX = Math.round((e.clientX - rect.left - panX) / zoom);
|
||||
const canvasY = Math.round((e.clientY - rect.top - panY) / zoom);
|
||||
|
||||
const label = `Artboard ${Date.now().toString(36).slice(-4).toUpperCase()}`;
|
||||
createArtboardMutation({
|
||||
workspace_id: workspaceId,
|
||||
project_id: projectId ?? null,
|
||||
name: label,
|
||||
origin_id: null,
|
||||
parent_artboard_id: null,
|
||||
metadata_jsonb: { x: canvasX, y: canvasY, width: 360, height: 240 },
|
||||
}).then(() => {
|
||||
queryClient.invalidateQueries({ queryKey: ['artboards', workspaceId, projectId ?? undefined] });
|
||||
setActiveTool('select');
|
||||
}).catch((err: unknown) => {
|
||||
console.error('[Canvas] Failed to create artboard', err);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.target === e.currentTarget) {
|
||||
selectArtboard(null);
|
||||
}
|
||||
}, [activeTool, selectArtboard]);
|
||||
}, [activeTool, setActiveTool, selectArtboard, workspaceId, projectId, queryClient]);
|
||||
|
||||
const onMouseMove = useCallback((e: React.MouseEvent) => {
|
||||
if (!isPanning.current) return;
|
||||
@@ -69,7 +100,10 @@ export function Canvas() {
|
||||
|
||||
// Dot grid that shifts with pan and scales with zoom
|
||||
const gridSpacing = Math.max(6, 20 * zoom);
|
||||
const cursor = activeTool === 'pan' || isPanning.current ? 'grab' : 'default';
|
||||
const cursor =
|
||||
activeTool === 'pan' || isPanning.current ? 'grab' :
|
||||
activeTool === 'artboard' ? 'crosshair' :
|
||||
'default';
|
||||
|
||||
return (
|
||||
<div
|
||||
|
||||
@@ -8,7 +8,7 @@ import { ArtboardNavigator } from '../navigator/ArtboardNavigator';
|
||||
import { Canvas } from '../canvas/Canvas';
|
||||
import { Inspector } from '../inspector/Inspector';
|
||||
import { useHistory } from '@/store/history';
|
||||
import { useCanvas } from '@/store/canvas';
|
||||
import { useCanvas, type Tool } from '@/store/canvas';
|
||||
|
||||
interface AppChromeProps {
|
||||
workspaceId?: string;
|
||||
@@ -19,7 +19,8 @@ interface AppChromeProps {
|
||||
|
||||
export function AppChrome({ workspaceId, projectId, workspaceName, projectName }: AppChromeProps) {
|
||||
const selectedArtboardId = useCanvas((s) => s.selectedArtboardId);
|
||||
const setContext = useCanvas((s) => s.setContext);
|
||||
const setContext = useCanvas((s) => s.setContext);
|
||||
const setActiveTool = useCanvas((s) => s.setActiveTool);
|
||||
|
||||
// Push workspace/project IDs into the store so Canvas and Navigator can read them.
|
||||
useEffect(() => {
|
||||
@@ -28,6 +29,26 @@ export function AppChrome({ workspaceId, projectId, workspaceName, projectName }
|
||||
|
||||
useEffect(() => {
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
// Skip if user is typing in an input
|
||||
if ((e.target as HTMLElement).matches('input, textarea, [contenteditable]')) return;
|
||||
|
||||
// Tool shortcuts (no modifier)
|
||||
if (!e.metaKey && !e.ctrlKey) {
|
||||
const toolKeys: Record<string, Tool> = { v: 'select', h: 'pan', a: 'artboard', z: 'zone' };
|
||||
const mapped = toolKeys[e.key.toLowerCase()];
|
||||
if (mapped !== undefined) {
|
||||
e.preventDefault();
|
||||
setActiveTool(mapped);
|
||||
return;
|
||||
}
|
||||
// Escape cancels active tool back to select
|
||||
if (e.key === 'Escape') {
|
||||
setActiveTool('select');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Undo/Redo require a selected artboard
|
||||
if (!(e.metaKey || e.ctrlKey)) return;
|
||||
if (!selectedArtboardId) return;
|
||||
|
||||
@@ -42,7 +63,7 @@ export function AppChrome({ workspaceId, projectId, workspaceName, projectName }
|
||||
|
||||
window.addEventListener('keydown', onKeyDown);
|
||||
return () => window.removeEventListener('keydown', onKeyDown);
|
||||
}, [selectedArtboardId]);
|
||||
}, [selectedArtboardId, setActiveTool]);
|
||||
|
||||
const showBreadcrumb = Boolean(workspaceId && projectId);
|
||||
|
||||
|
||||
@@ -2,17 +2,11 @@
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useCanvas } from '@/store/canvas';
|
||||
import { useArtboards } from '@/hooks/useArtboards';
|
||||
import { useDiff } from '@/hooks/useDiff';
|
||||
import { ARTBOARD_SNAPSHOTS } from '@/data/artboard-snapshots';
|
||||
import type { DiffResult, PropChange } from '@originmain/diff-engine';
|
||||
|
||||
const PROPS = [
|
||||
{ key: 'title', val: '"Revenue Overview"', type: 's' },
|
||||
{ key: 'value', val: '"$12,450"', type: 's' },
|
||||
{ key: 'delta', val: '+2.4', type: 'n' },
|
||||
{ key: 'period', val: '"monthly"', type: 's' },
|
||||
{ key: 'loading', val: 'false', type: 'b' },
|
||||
];
|
||||
import type { Artboard } from '@originmain/origin-graph';
|
||||
|
||||
const TYPE_COLORS: Record<string, string> = {
|
||||
s: '#7DD3A8',
|
||||
@@ -36,9 +30,11 @@ const T = {
|
||||
};
|
||||
|
||||
export function Inspector() {
|
||||
const { selectedArtboardId } = useCanvas();
|
||||
const { selectedArtboardId, workspaceId, projectId } = useCanvas();
|
||||
const [tab, setTab] = useState<TabId>('props');
|
||||
const diffResult = useDiff(selectedArtboardId);
|
||||
const { rawArtboards } = useArtboards(workspaceId ?? undefined, projectId ?? undefined);
|
||||
const selectedArtboard = rawArtboards.find((ab) => ab.id === selectedArtboardId) ?? null;
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -113,19 +109,8 @@ export function Inspector() {
|
||||
</span>
|
||||
</div>
|
||||
) : tab === 'props' ? (
|
||||
<>
|
||||
<Section label="Component Props">
|
||||
{PROPS.map(({ key, val, type }) => (
|
||||
<PropRow key={key} label={key} value={val} color={TYPE_COLORS[type] ?? T.key} />
|
||||
))}
|
||||
</Section>
|
||||
<HSep />
|
||||
<Section label="Render Target">
|
||||
<PropRow label="file" value="dashboard.tsx:42" color="#7EB8FF" />
|
||||
<PropRow label="status" value="connected" color="#7DD3A8" />
|
||||
<PropRow label="agent" value="claude-code" color="#7DD3A8" />
|
||||
</Section>
|
||||
</>
|
||||
<PropsTab artboard={selectedArtboard} />
|
||||
|
||||
) : tab === 'diff' ? (
|
||||
<DiffTab artboardId={selectedArtboardId} diffResult={diffResult} />
|
||||
) : (
|
||||
@@ -164,13 +149,74 @@ export function Inspector() {
|
||||
Live render connected
|
||||
</span>
|
||||
<span style={{ marginLeft: 'auto', fontFamily: "'JetBrains Mono', ui-monospace, monospace", fontSize: '0.5625rem', color: 'rgba(255,255,255,0.22)' }}>
|
||||
284 nodes
|
||||
{selectedArtboard
|
||||
? `${selectedArtboard.metadata_jsonb['width'] ?? '?'} × ${selectedArtboard.metadata_jsonb['height'] ?? '?'}`
|
||||
: '—'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Props tab ────────────────────────────────────────────── */
|
||||
function PropsTab({ artboard }: { artboard: Artboard | null }) {
|
||||
if (!artboard) return null;
|
||||
|
||||
const meta = artboard.metadata_jsonb;
|
||||
|
||||
const N = TYPE_COLORS['n']!;
|
||||
const B = TYPE_COLORS['b']!;
|
||||
const S = TYPE_COLORS['s']!;
|
||||
|
||||
// Extract canvas geometry
|
||||
const canvasProps: Array<{ key: string; val: string; color: string }> = [
|
||||
{ key: 'x', val: String(meta['x'] ?? 0), color: N },
|
||||
{ key: 'y', val: String(meta['y'] ?? 0), color: N },
|
||||
{ key: 'width', val: String(meta['width'] ?? 0), color: N },
|
||||
{ key: 'height', val: String(meta['height'] ?? 0), color: N },
|
||||
];
|
||||
|
||||
// Any extra metadata keys beyond the canvas geometry
|
||||
const reservedKeys = new Set(['x', 'y', 'width', 'height', 'renderUrl']);
|
||||
const extraProps = Object.entries(meta)
|
||||
.filter(([k]) => !reservedKeys.has(k))
|
||||
.map(([k, v]) => {
|
||||
const t = typeof v;
|
||||
const color = t === 'number' ? N : t === 'boolean' ? B : S;
|
||||
const val = t === 'string' ? `"${v}"` : String(v);
|
||||
return { key: k, val, color };
|
||||
});
|
||||
|
||||
const renderUrl = typeof meta['renderUrl'] === 'string' ? meta['renderUrl'] as string : null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{extraProps.length > 0 && (
|
||||
<>
|
||||
<Section label="Component Props">
|
||||
{extraProps.map(({ key, val, color }) => (
|
||||
<PropRow key={key} label={key} value={val} color={color} />
|
||||
))}
|
||||
</Section>
|
||||
<HSep />
|
||||
</>
|
||||
)}
|
||||
<Section label="Canvas">
|
||||
{canvasProps.map(({ key, val, color }) => (
|
||||
<PropRow key={key} label={key} value={val} color={color} />
|
||||
))}
|
||||
</Section>
|
||||
<HSep />
|
||||
<Section label="Render Target">
|
||||
<PropRow label="name" value={artboard.name} color="#7EB8FF" />
|
||||
<PropRow label="status" value={renderUrl ? 'connected' : 'none'} color={renderUrl ? '#7DD3A8' : 'rgba(255,255,255,0.28)'} />
|
||||
{renderUrl && <PropRow label="url" value={renderUrl} color="#7DD3A8" />}
|
||||
<PropRow label="id" value={artboard.id.slice(0, 8) + '…'} color="rgba(255,255,255,0.28)" />
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({ label, children }: { label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div style={{ padding: '12px 14px' }}>
|
||||
|
||||
@@ -7,18 +7,6 @@ import { SquareRegular } from '@fluentui/react-icons';
|
||||
import { useCanvas } from '@/store/canvas';
|
||||
import { useArtboards } from '@/hooks/useArtboards';
|
||||
|
||||
const FILE_PATHS = [
|
||||
'src/components/DashboardCard.tsx',
|
||||
'src/components/UserProfile.tsx',
|
||||
'src/components/NavSidebar.tsx',
|
||||
'src/components/DataTable.tsx',
|
||||
'src/components/StatsCard.tsx',
|
||||
'src/app/canvas/page.tsx',
|
||||
'src/app/layout.tsx',
|
||||
'src/store/canvas.ts',
|
||||
'src/store/viewport.ts',
|
||||
];
|
||||
|
||||
const T = {
|
||||
bg: '#111115',
|
||||
border: 'rgba(255,255,255,0.055)',
|
||||
@@ -47,11 +35,16 @@ const treeThemeStyles = themeToTreeStyles({
|
||||
});
|
||||
|
||||
export function ArtboardNavigator() {
|
||||
const { selectedArtboardId, selectArtboard, workspaceId } = useCanvas();
|
||||
const { artboards } = useArtboards(workspaceId ?? undefined);
|
||||
const { selectedArtboardId, selectArtboard, workspaceId, projectId } = useCanvas();
|
||||
const { artboards, rawArtboards } = useArtboards(workspaceId ?? undefined, projectId ?? undefined);
|
||||
|
||||
// Build file tree paths from artboard names (strip .tsx suffix if present, else use name as path)
|
||||
const filePaths = rawArtboards.length > 0
|
||||
? rawArtboards.map((ab) => `artboards/${ab.name}`)
|
||||
: ['artboards/(no artboards yet)'];
|
||||
|
||||
const { model } = useFileTree({
|
||||
paths: FILE_PATHS,
|
||||
paths: filePaths,
|
||||
initialExpansion: 2,
|
||||
density: 'compact',
|
||||
icons: 'minimal',
|
||||
@@ -115,9 +108,9 @@ export function ArtboardNavigator() {
|
||||
{/* ── Graph stats ── */}
|
||||
<SectionLabel>Graph</SectionLabel>
|
||||
<div style={{ padding: '4px 14px 14px', display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
|
||||
<GraphStat label="nodes" value="284" color={T.accent} />
|
||||
<GraphStat label="components" value="47" color="rgba(255,255,255,0.45)" />
|
||||
<GraphStat label="tokens" value="112" color="rgba(255,255,255,0.45)" />
|
||||
<GraphStat label="artboards" value={String(rawArtboards.length || artboards.length)} color={T.accent} />
|
||||
<GraphStat label="components" value="—" color="rgba(255,255,255,0.45)" />
|
||||
<GraphStat label="tokens" value="—" color="rgba(255,255,255,0.45)" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,179 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef } from 'react';
|
||||
import type { DesignLanguageFile } from '@originmain/origin-graph';
|
||||
|
||||
interface Props {
|
||||
workspaceId: string;
|
||||
current: DesignLanguageFile | null;
|
||||
}
|
||||
|
||||
export function DesignLanguageUpload({ workspaceId, current }: Props) {
|
||||
const [status, setStatus] = useState<'idle' | 'uploading' | 'success' | 'error'>('idle');
|
||||
const [errorMsg, setErrorMsg] = useState('');
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
async function handleFile(file: File) {
|
||||
setStatus('uploading');
|
||||
setErrorMsg('');
|
||||
try {
|
||||
const text = await file.text();
|
||||
let parsed: Record<string, unknown>;
|
||||
try {
|
||||
parsed = JSON.parse(text) as Record<string, unknown>;
|
||||
} catch {
|
||||
throw new Error('File must be valid JSON.');
|
||||
}
|
||||
|
||||
const res = await fetch('/api/design-language', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
workspace_id: workspaceId,
|
||||
name: file.name.replace(/\.[^/.]+$/, ''),
|
||||
schema_jsonb: parsed,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) {
|
||||
const err = await res.json().catch(() => ({})) as { error?: string };
|
||||
throw new Error(err.error ?? `Upload failed: ${res.status}`);
|
||||
}
|
||||
setStatus('success');
|
||||
} catch (e) {
|
||||
setErrorMsg(e instanceof Error ? e.message : 'Unknown error');
|
||||
setStatus('error');
|
||||
}
|
||||
}
|
||||
|
||||
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) void handleFile(file);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: '#FFFFFF',
|
||||
border: '1px solid #E4E4E7',
|
||||
borderRadius: 12,
|
||||
padding: '24px 28px',
|
||||
marginTop: 32,
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16 }}>
|
||||
<div>
|
||||
<h2 style={{ fontSize: '0.9375rem', fontWeight: 700, color: '#0A0A0A', margin: '0 0 4px', letterSpacing: '-0.02em' }}>
|
||||
Design Language
|
||||
</h2>
|
||||
<p style={{ fontSize: '0.8125rem', color: '#71717A', margin: 0, lineHeight: 1.6 }}>
|
||||
Upload a JSON schema describing your workspace’s design tokens and component rules.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Upload button */}
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="file"
|
||||
accept=".json,application/json"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<button
|
||||
onClick={() => inputRef.current?.click()}
|
||||
disabled={status === 'uploading'}
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
padding: '8px 18px',
|
||||
borderRadius: 8,
|
||||
fontSize: '0.8125rem',
|
||||
fontWeight: 600,
|
||||
background: status === 'uploading' ? '#E4E4E7' : '#0A0A0A',
|
||||
color: status === 'uploading' ? '#71717A' : '#FFFFFF',
|
||||
border: 'none',
|
||||
cursor: status === 'uploading' ? 'default' : 'pointer',
|
||||
fontFamily: 'inherit',
|
||||
transition: 'background 0.12s',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{status === 'uploading' ? 'Uploading…' : current ? 'Update' : 'Upload JSON'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Current file info */}
|
||||
{current && status !== 'success' && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: 16,
|
||||
padding: '10px 14px',
|
||||
background: '#F4F4F5',
|
||||
borderRadius: 8,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: '0.8125rem', color: '#3F3F46', fontWeight: 500 }}>
|
||||
{current.name}
|
||||
</span>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '0.6875rem',
|
||||
padding: '2px 7px',
|
||||
background: '#E4E4E7',
|
||||
borderRadius: 4,
|
||||
color: '#71717A',
|
||||
fontFamily: "'JetBrains Mono', ui-monospace, monospace",
|
||||
}}
|
||||
>
|
||||
v{current.version}
|
||||
</span>
|
||||
<span style={{ marginLeft: 'auto', fontSize: '0.75rem', color: '#A1A1AA' }}>
|
||||
Active
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Success state */}
|
||||
{status === 'success' && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: 12,
|
||||
padding: '10px 14px',
|
||||
background: 'rgba(16,185,129,0.06)',
|
||||
border: '1px solid rgba(16,185,129,0.2)',
|
||||
borderRadius: 8,
|
||||
fontSize: '0.8125rem',
|
||||
color: '#059669',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
✓ Design language uploaded successfully.{' '}
|
||||
<button
|
||||
onClick={() => setStatus('idle')}
|
||||
style={{ background: 'none', border: 'none', color: '#059669', cursor: 'pointer', padding: 0, fontSize: 'inherit', textDecoration: 'underline' }}
|
||||
>
|
||||
Dismiss
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error state */}
|
||||
{status === 'error' && (
|
||||
<div
|
||||
style={{
|
||||
marginTop: 12,
|
||||
padding: '10px 14px',
|
||||
background: 'rgba(220,38,38,0.05)',
|
||||
border: '1px solid rgba(220,38,38,0.15)',
|
||||
borderRadius: 8,
|
||||
fontSize: '0.8125rem',
|
||||
color: '#DC2626',
|
||||
}}
|
||||
>
|
||||
{errorMsg}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user