@volter/world-console 3.0.17 → 3.0.19

package/dist/client/console.css

@@ -624,6 +624,8 @@ main.app.home { max-width: none; }
 .section-tag button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 0; border-radius: 4px; background: var(--surface-2); color: var(--ink); font: 600 12px/1.4 var(--sans); }
 .section-tag button.on { background: var(--accent); color: var(--surface); }
 .section-tag .mark { width: 14px; height: 14px; }
+.frame-name { display: inline-flex; align-items: center; gap: 7px; cursor: grab; touch-action: none; }
+.section-tag button { cursor: grab; touch-action: none; }
 .name-field { font: 600 12px/1.4 var(--sans); padding: 2px 8px; border: 1px solid var(--accent); border-radius: 4px; background: var(--surface); color: var(--ink); outline: none; }
 .board-tabs .name-field { border-radius: 999px; font-weight: 400; font-size: 12.5px; }
 /* a section's edges are grabbed as wide on screen at every zoom (xyflow scales only its corner handles); the selected

package/dist/client/console.tsx

@@ -1706,9 +1706,9 @@ const frameUrl = (name: string, f: BoardFrame): string | null => (f.at && 'site'
 const shownOn = (b: SavedBoard, all: BoardFrame[]): BoardFrame[] => b.include
   ? all.filter((f) => b.include!.includes(frameKey(f)) || sectionKeys(f).some((k) => b.include!.includes(k)))
   : all.filter((f) => !(b.hidden ?? []).includes(frameKey(f)));
-type Screen = { world: string; frame: BoardFrame; url: string | null; active: boolean; picked: boolean; boards: SavedBoard[]; addTo: (board: string, key: string) => void; remove: { label: string; act: (key: string) => void } | null; compare: (key: string) => void };
+type Screen = { world: string; frame: BoardFrame; url: string | null; active: boolean; picked: boolean; boards: SavedBoard[]; addTo: (board: string, key: string) => void; remove: { label: string; act: (key: string) => void } | null; compare: (key: string) => void; /** its name moves it, as a canvas app's frame name does */ grab: (e: React.PointerEvent) => void };
 function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
-  const { frame, url, active, picked, boards, addTo, remove, compare } = data;
+  const { frame, url, active, picked, boards, addTo, remove, compare, grab } = data;
   const key = frameKey(frame);
   const others = boards.filter((b) => b.include && !b.include.includes(key) && !sectionKeys(frame).some((k) => b.include!.includes(k)));
   // its name is drawn the same size at every zoom while the head above it shrinks: zoomed out past the point the name fits
@@ -1718,7 +1718,7 @@ function ScreenFrame({ data }: NodeProps<Node<Screen>>): React.JSX.Element {
     <>
       {/* its name, as a canvas app labels its frames; what can be done to it once it is selected */}
       <NodeToolbar isVisible={roomy || picked || active} position={Position.Top} align="start" className="frame-label">
-        <Mark vendor={frame.vendor} /><span>{frame.title}</span>
+        <span className="frame-name" onPointerDown={grab}><Mark vendor={frame.vendor} /><span>{frame.title}</span></span>
         {frame.changes ? <button type="button" className="frame-changed nodrag" onClick={() => compare(key)} title={`${counted(frame.changes, 'change')} here, not in a changeset: compare before and now`}><Icon name="square-dot" size={14} />{frame.changes}</button>
           : picked ? <button type="button" className="ghost nodrag" onClick={() => compare(key)} title="Compare with a branch of this World" aria-label={`Compare ${frame.title} with a branch`}><Icon name="file-diff" size={14} /></button> : null}
         {picked && others.length ? <select className="nodrag frame-add" value="" aria-label={`Add ${frame.title} to a board`} onChange={(e) => { if (e.target.value) addTo(e.target.value, key); }}><option value="">Add to board…</option>{others.map((b) => <option key={b.id} value={b.id}>{b.name}</option>)}</select> : null}
@@ -1749,7 +1749,7 @@ function NameField({ name, label, done }: { name: string; label: string; done: (
 }
 /** A section, as a canvas app's: a region of the board with a name, holding whatever frames sit in it. Its name stays the
  *  same size at every zoom; selected, it can be resized from its edges, renamed (double-click the name) or removed. */
-type SectionData = { key: string; name: string; vendor: string | null; /** renamed by someone, so its name is kept */ named: boolean; picked: boolean; editable: boolean; renaming: boolean; pick: (key: string) => void; rename: (key: string) => void; renamed: (key: string, next: string | null) => void; remove: (key: string) => void; resized: () => void };
+type SectionData = { key: string; name: string; vendor: string | null; /** renamed by someone, so its name is kept */ named: boolean; picked: boolean; editable: boolean; renaming: boolean; pick: (key: string) => void; rename: (key: string) => void; renamed: (key: string, next: string | null) => void; remove: (key: string) => void; resized: () => void; /** its name moves it, with what it holds */ grab: (e: React.PointerEvent) => void };
 function SectionBox({ data }: NodeProps<Node<SectionData>>): React.JSX.Element {
   return (
     <>
@@ -1757,7 +1757,7 @@ function SectionBox({ data }: NodeProps<Node<SectionData>>): React.JSX.Element {
       {/* inside its top-left corner, as a canvas app names a section: it never reaches a neighbouring section at any zoom */}
       <NodeToolbar isVisible position={Position.Top} align="start" offset={-30} className="section-tag">
         {data.renaming ? <NameField name={data.name} label="Name this section" done={(next) => data.renamed(data.key, next)} />
-          : <button type="button" className={data.picked ? 'nodrag on' : 'nodrag'} onClick={() => data.pick(data.key)} onDoubleClick={() => { if (data.editable) data.rename(data.key); }} title={data.editable ? 'Double-click to rename' : undefined}>
+          : <button type="button" className={data.picked ? 'nodrag on' : 'nodrag'} onPointerDown={data.grab} onClick={() => data.pick(data.key)} onDoubleClick={() => { if (data.editable) data.rename(data.key); }} title={data.editable ? 'Double-click to rename' : undefined}>
             {data.vendor ? <Mark vendor={data.vendor} /> : null}<span>{data.name}</span>
           </button>}
         {data.picked && data.editable && !data.renaming ? <button type="button" className="ghost nodrag" onClick={() => data.remove(data.key)} aria-label={`Remove the section ${data.name}`} title="Remove the section (its frames stay)">✕</button> : null}
@@ -2130,10 +2130,34 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
     setPicked(`sec:${key}`);
     change(board.id, (b) => ({ ...b, sections: { ...(b.sections ?? {}), [key]: { x: Math.round(r.x), y: Math.round(r.y), w: Math.round(r.w), h: Math.round(r.h), name: `Section ${count}` } } }));
   };
+  /** A node moved by its name, which sits outside it (the canvas takes no drag there): the same drag as the node's own,
+   *  carrying what a section holds and kept when it ends; a press that does not move is a click. */
+  const grab = (id: string) => (e: React.PointerEvent): void => {
+    if (!editable || e.button !== 0) return;
+    const node = flow.getNode(id); if (!node) return;
+    const el = e.currentTarget as HTMLElement; el.setPointerCapture(e.pointerId);
+    const sx = e.clientX; const sy = e.clientY; const from = { ...node.position };
+    let moved = false;
+    const at = (ev: PointerEvent): Node => { const z = flow.getZoom(); return { ...node, position: { x: from.x + (ev.clientX - sx) / z, y: from.y + (ev.clientY - sy) / z } }; };
+    const move = (ev: PointerEvent): void => {
+      if (!moved && Math.hypot(ev.clientX - sx, ev.clientY - sy) < 4) return;
+      if (!moved) { moved = true; onDragStart(null, node); }
+      const n = at(ev);
+      setNodes((ns) => ns.map((x) => (x.id === id ? { ...x, position: n.position } : x)));
+      onDrag(null, n);
+    };
+    const up = (ev: PointerEvent): void => {
+      el.removeEventListener('pointermove', move); el.removeEventListener('pointerup', up); el.removeEventListener('pointercancel', up);
+      // a drag is not also a click on the name (which would select or open what it names)
+      if (moved) { onDragStop(null, at(ev)); el.addEventListener('click', (c) => { c.stopPropagation(); c.preventDefault(); }, { capture: true, once: true }); }
+      else if (node.type === 'screen') setPicked(id);
+    };
+    el.addEventListener('pointermove', move); el.addEventListener('pointerup', up); el.addEventListener('pointercancel', up);
+  };
   // what each node shows: in use, selected, and what can be done to it
   const shownNodes = nodes.map((n) => (n.type === 'section'
-    ? { ...n, data: { ...n.data, picked: picked === n.id, editable, renaming: editable && renaming === (n.data as { key: string }).key, pick: (k: string) => setPicked(`sec:${k}`), rename: renameSection, renamed: renamedSection, remove: removeSection, resized: () => requestAnimationFrame(() => { const k = (n.data as { key: string }).key; keep(groupFrames(k), [k]); }) } }
-    : { ...n, data: { ...n.data, active: active === n.id, picked: picked === n.id, boards: editable ? others : [], addTo, remove: !editable || (board.include && !board.include.includes(n.id)) ? null : removeFrame, compare: (k: string) => { setPicked(k); setComparing(k); } } }));
+    ? { ...n, data: { ...n.data, grab: grab(n.id), picked: picked === n.id, editable, renaming: editable && renaming === (n.data as { key: string }).key, pick: (k: string) => setPicked(`sec:${k}`), rename: renameSection, renamed: renamedSection, remove: removeSection, resized: () => requestAnimationFrame(() => { const k = (n.data as { key: string }).key; keep(groupFrames(k), [k]); }) } }
+    : { ...n, data: { ...n.data, grab: grab(n.id), active: active === n.id, picked: picked === n.id, boards: editable ? others : [], addTo, remove: !editable || (board.include && !board.include.includes(n.id)) ? null : removeFrame, compare: (k: string) => { setPicked(k); setComparing(k); } } }));
   // the keys a canvas app answers: Esc leaves a frame, then the selection; Delete removes what is selected; ⇧S draws a section
   useEffect(() => {
     const on = (e: KeyboardEvent): void => {
@@ -2179,7 +2203,9 @@ function CanvasSurface({ name, token, session, retry, snapshot, back, canWrite }
         onPaneClick={() => { setActive(null); setPicked(null); }}
         minZoom={0.03} maxZoom={1.5} nodesConnectable={false} elementsSelectable={false}
         panOnScroll zoomOnPinch zoomOnScroll={false} zoomOnDoubleClick={false} colorMode={dark ? 'dark' : 'light'} proOptions={{ hideAttribution: true }}>
-        <Background variant={BackgroundVariant.Dots} gap={28} size={1.4} />
+        {/* dots the same size on screen at every zoom, their spacing doubling as the board zooms out (as a canvas app's
+            grid steps), so the board shows where it is and how far it moved at any zoom */}
+        <Background variant={BackgroundVariant.Dots} gap={28 * 2 ** Math.max(0, Math.ceil(Math.log2(16 / (28 * zoom))))} size={2 / zoom} />
         <Panel position="top-left" className="float layers">
           <div className="float-head">
             <button type="button" className="back" onClick={back} aria-label={`Back to ${name}`}>←</button>