+ Opacity
+
+ // Live preview while dragging: applies to the scene
+ // only (no store/history write) so the element fades
+ // in real time. The release (handleOnChange) commits.
+ handle('opacity', { preview: true })(arr[0])
+ }
+ handleOnChange={(arr) => handle('opacity')(arr[0])}
+ />
+
+ )}
+
+ {showReorder && }
+
+ )
+}
+
+export default ElementPropertiesToolbar
diff --git a/src/components/sidebar/elementProperties.tsx b/src/components/sidebar/elementProperties.tsx
index 4497456..1757b6b 100644
--- a/src/components/sidebar/elementProperties.tsx
+++ b/src/components/sidebar/elementProperties.tsx
@@ -4,9 +4,31 @@ import { useBoardContext } from '../../views/Board/boardContext'
import { useMediaQueryUtils } from '../../constants/exportHooks'
import ColorPicker from '../utils/colorPicker'
import OpacitySlider from '../utils/opacitySlider'
+import Tooltip from '../common/tooltip'
import { TEXT_SIZES_ARRAY, fillEssentialShades } from '../../utils/constants'
import { MIXED, inspectGroupValues } from '../../utils/groupInspect'
import { isStandaloneTextType } from '../../constants/misc'
+import type { ReorderOp } from '../canvasContextMenu'
+import BringToFrontIcon from '../../assets/bring-to-front.svg?react'
+import BringForwardIcon from '../../assets/bring-forward.svg?react'
+import SendBackwardIcon from '../../assets/send-backward.svg?react'
+import SendToBackIcon from '../../assets/send-to-back.svg?react'
+
+// Reorder icon tone — matches the toolbar's ink-mid text. The source SVGs
+// hardcode a blue stroke; SVGR spreads props after the original attrs so this
+// override wins (same trick as canvasContextMenu).
+const REORDER_ICON_STROKE = '#8C7E6A'
+
+const REORDER_BUTTONS: {
+ op: ReorderOp
+ label: string
+ Icon: React.FunctionComponent>
+}[] = [
+ { op: 'front', label: 'Bring to Front', Icon: BringToFrontIcon },
+ { op: 'forward', label: 'Bring Forward', Icon: BringForwardIcon },
+ { op: 'backward', label: 'Send Backward', Icon: SendBackwardIcon },
+ { op: 'back', label: 'Send to Back', Icon: SendToBackIcon },
+]
const STROKE_TYPES = [
{ label: '—', value: 'solid' },
@@ -14,11 +36,16 @@ const STROKE_TYPES = [
{ label: '...', value: 'dotted' },
]
+// `inner` is the diameter (px) of the inner circle that visually nudges
+// the actual stroke width inside a constant outer ring. `0` renders the
+// "no stroke" state (a diagonal slash) instead of an inner circle.
const STROKE_WIDTHS = [
- { label: '0', value: 0, strokeHeight: '0px' },
- { label: '2', value: 2, strokeHeight: '2px' },
- { label: '4', value: 4, strokeHeight: '4px' },
- { label: '6', value: 6, strokeHeight: '6px' },
+ { label: '0', value: 0, inner: 0 },
+ { label: '1', value: 1, inner: 4 },
+ { label: '2', value: 2, inner: 6 },
+ { label: '4', value: 4, inner: 9 },
+ { label: '6', value: 6, inner: 12 },
+ { label: '8', value: 8, inner: 15 },
]
// What sections each "set" should render, in display order.
@@ -241,6 +268,34 @@ const SectionLabel = ({ children }: { children: React.ReactNode }) => (
)
+const ReorderRow = ({ onReorder }: { onReorder: (op: ReorderOp) => void }) => (
+
+
+ )
+}
+
+export default SettingsModal
diff --git a/src/components/sidebar/shapesToolbar.tsx b/src/components/sidebar/shapesToolbar.tsx
index 93c2bf6..7fc6294 100644
--- a/src/components/sidebar/shapesToolbar.tsx
+++ b/src/components/sidebar/shapesToolbar.tsx
@@ -102,17 +102,6 @@ const ShapesToolbar = ({ addElement }: ShapesToolbarProps): ReactElement => {
const list = (
isMobile ? allElementsRaw : flattenShapesForDesktop(allElementsRaw)
)
- .filter((el) => {
- // Pan is normally mobile-only; surface it on desktop too when
- // geo objects are enabled so the default tool is reachable.
- if (el.mobileOnly) {
- return (
- isMobile ||
- (geoObjectsEnabled && el.elementName === 'pan')
- )
- }
- return true
- })
// Whiteboard shape tools are hidden in geo mode in favour of the
// geo toolset (point/area/route/geoText).
.filter(
diff --git a/src/components/utils/colorPicker.tsx b/src/components/utils/colorPicker.tsx
index 06fa0f6..472d4ac 100644
--- a/src/components/utils/colorPicker.tsx
+++ b/src/components/utils/colorPicker.tsx
@@ -135,7 +135,7 @@ const ColorPicker = ({
{title && (
-
+
{title}
)}
diff --git a/src/constants/misc.ts b/src/constants/misc.ts
index 27f0546..39a0a7a 100644
--- a/src/constants/misc.ts
+++ b/src/constants/misc.ts
@@ -1,5 +1,13 @@
export const offsetHeight = 0
export const GROUP_COMPONENT = 'groupobject'
+
+// Default canvas text font (single source of truth). Kept in sync with the
+// `--font-sketch` / `--font-caveat-brush` vars in App.css, the Tailwind
+// `sketch` token, and the Google Fonts in index.html. Every canvas-text
+// fallback (`family || DEFAULT_TEXT_FONT_FAMILY`) references this so the default
+// lives in exactly one place. Only the Regular 400 weight is loaded/used.
+export const DEFAULT_TEXT_FONT_FAMILY = 'Caveat Brush'
+
export const RUBBER_MODE_KEY = 'rubberMode'
export const VIEWPORT_KEY_PREFIX = 'craftbase_viewport_'
export const MOBILE_VIEWPORT_KEY_PREFIX = 'craftbase_mobile_viewport_'
@@ -191,6 +199,11 @@ export const STORAGE_QUOTA_ERROR_NAME = 'QuotaExceededError'
// never seed again for this browser profile.
export const WELCOME_DISMISSED_KEY = 'craftbase_welcome_dismissed'
+// Feature-flag preference: connectable arrows / shape edge ports. User-toggled
+// in the Settings modal, persisted in localStorage, read live (see
+// `src/utils/featureFlags.ts`). Defaults to enabled.
+export const CONNECTORS_ENABLED_KEY = 'craftbase_connectors_enabled'
+
// Canvas rendering constants
export const HOVER_THRESHOLD = 15
export const HOVER_COLOR = 'rgba(196, 144, 26, 0.7)'
diff --git a/src/elementModules.ts b/src/elementModules.ts
new file mode 100644
index 0000000..922a41e
--- /dev/null
+++ b/src/elementModules.ts
@@ -0,0 +1,29 @@
+// Single source of truth for the lazily-loaded whiteboard element components.
+//
+// Each file under components/elements/*.tsx is its own dynamic chunk — Vite
+// code-splits non-eager `import.meta.glob` — and is mounted via React.lazy in
+// newCanvas.tsx. On a fresh page the FIRST draw of a given shape type pays a
+// network fetch + parse of that chunk before React can mount it; that is the
+// "freshly drawn shape sits dimmed for a couple seconds" cost on prod.
+//
+// Lives at the src root so the glob path (and therefore the produced keys,
+// e.g. './components/elements/circle.tsx') matches newCanvas's original glob
+// verbatim — newCanvas keys into this map with that exact string.
+
+export const elementModules = import.meta.glob('./components/elements/*.tsx')
+
+// Idempotent prefetch: kicks off (and caches) the dynamic import for a shape
+// type so its chunk is warm before React.lazy needs it. Calling it repeatedly
+// reuses the in-flight/resolved promise, and the browser dedupes the import,
+// so the real mount path (React.lazy) resolves instantly once warmed.
+const inFlight = new Map>()
+
+export function prefetchElementModule(componentType: string): void {
+ const key = `./components/elements/${componentType}.tsx`
+ const loader = elementModules[key]
+ if (!loader) return
+ if (inFlight.has(key)) return
+ // Best-effort warm-up — the real load path surfaces genuine failures via
+ // its own Suspense/error boundary, so swallow here.
+ inFlight.set(key, loader().catch(() => undefined))
+}
diff --git a/src/factory/newText.ts b/src/factory/newText.ts
index 4e23566..58fba0a 100644
--- a/src/factory/newText.ts
+++ b/src/factory/newText.ts
@@ -1,4 +1,5 @@
import Main from './main'
+import { DEFAULT_TEXT_FONT_FAMILY } from '../constants/misc'
export interface NewTextMetadata {
content?: string
@@ -23,7 +24,7 @@ export default class NewTextFactory extends Main {
const {
content = '',
fontSize = 36,
- textFontFamily = 'Caveat',
+ textFontFamily = DEFAULT_TEXT_FONT_FAMILY,
} = this.properties?.metadata ?? {}
// Use native Two.js text instead of a foreignObject wrapper
diff --git a/src/hooks/useCanvasClipboard.ts b/src/hooks/useCanvasClipboard.ts
index f2a82d4..7a19748 100644
--- a/src/hooks/useCanvasClipboard.ts
+++ b/src/hooks/useCanvasClipboard.ts
@@ -2,8 +2,13 @@ import { useEffect, useRef } from 'react'
import type { MutableRefObject } from 'react'
import { GROUP_COMPONENT, isStandaloneTextType } from '../constants/misc'
import { generateUUID } from '../utils/misc'
-import { cloneElementData, getShapeTextNodes } from '../utils/canvasUtils'
+import {
+ cloneElementData,
+ getShapeTextNodes,
+ pollUntilElement,
+} from '../utils/canvasUtils'
import type { ComponentRecord } from '../types/board'
+import type { HistoryEntry } from './useComponentHistory'
// Two.js scene objects are typed loosely here; canvas-side typing converges
// in Stages 7–9.
@@ -41,8 +46,10 @@ export interface CanvasClipboardOptions {
addToLocalComponentStore: (
id: string,
componentType: string,
- record: ComponentRecord
+ record: ComponentRecord,
+ skipHistory?: boolean
) => void
+ recordBatchToHistoryLog: (entries: HistoryEntry[]) => void
renderGroupRef: MutableRefObject<
((groups: ComponentRecord[]) => void) | null
>
@@ -58,6 +65,7 @@ export function useCanvasClipboard({
zuiInstanceRef,
boardId,
addToLocalComponentStore,
+ recordBatchToHistoryLog,
renderGroupRef,
}: CanvasClipboardOptions): CanvasClipboardApi {
const clipboardRef = useRef(null)
@@ -256,6 +264,97 @@ export function useCanvasClipboard({
cloned.relativeY = rY
return cloned
})
+
+ // Persist the pasted members to the store IMMEDIATELY, at
+ // absolute coords (paste origin + each child's relative offset).
+ // Previously the children were only written on the group's
+ // blur-materialize (groupobject's foundOriginalCount===0 path),
+ // which meant a reload while the pasted group was still selected
+ // lost them — they lived only as transient overlay copies, never
+ // in componentStore / the localStorage draft. Persisting here
+ // makes paste reload-safe and lets the overlay below be a pure
+ // selection over real standalones (see membersToHide), so blur
+ // takes the restore-opacity path instead of re-materialising —
+ // killing the teardown→async-rebuild flicker too.
+ const memberIds: string[] = []
+ // Record all member adds as ONE batch so a single undo removes
+ // the whole pasted group (not one shape per press). We pass
+ // skipHistory to addToLocalComponentStore and push an ADD entry
+ // per child, then commit them together via recordBatchToHistoryLog.
+ const pasteBatchEntries: HistoryEntry[] = []
+ newChildren.forEach((child: ComponentRecord) => {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const c = child as any
+ const absX = px + (c.relativeX ?? 0)
+ const absY = py + (c.relativeY ?? 0)
+
+ // pencil / geo area / route keep their geometry as an
+ // absolute {x,y} vertex array in metadata — not in x/y. The
+ // group child stored it in the group's relative space, so
+ // rebase the whole array to the standalone's absolute origin
+ // (mirrors groupobject's blur-materialize). Without this the
+ // pasted stroke renders near the origin instead of under the
+ // group — i.e. "the pencil strokes disappear".
+ let memberMetadata = c.metadata
+ if (
+ (c.componentType === 'pencil' ||
+ c.componentType === 'area' ||
+ c.componentType === 'route') &&
+ Array.isArray(c.metadata)
+ ) {
+ const meta = c.metadata as Array<{
+ x: number
+ y: number
+ lw?: number
+ }>
+ const m0 = meta[0] ?? { x: 0, y: 0 }
+ memberMetadata = meta.map((vert, index) => {
+ const lwProp =
+ vert.lw !== undefined ? { lw: vert.lw } : {}
+ if (index === 0) {
+ return { x: absX, y: absY, ...lwProp }
+ }
+ return {
+ x: absX + Math.trunc(vert.x - m0.x),
+ y: absY + Math.trunc(vert.y - m0.y),
+ ...lwProp,
+ }
+ })
+ }
+
+ const memberData = {
+ ...c,
+ x: absX,
+ y: absY,
+ metadata: memberMetadata,
+ }
+ memberIds.push(c.id)
+ addToLocalComponentStore(
+ c.id,
+ c.componentType,
+ memberData,
+ true
+ )
+ // The history entry's componentInfo must mirror the stored
+ // row: addToLocalComponentStore strips the transient
+ // relativeX/relativeY (not DB columns), so strip them here
+ // too — otherwise a redo in persisted mode would insert
+ // those non-schema fields and fail.
+ const {
+ relativeX: _rx,
+ relativeY: _ry,
+ ...storedShape
+ } = memberData
+ pasteBatchEntries.push({
+ action: 'ADD',
+ id: c.id,
+ componentInfo: storedShape as ComponentRecord,
+ })
+ })
+ if (pasteBatchEntries.length > 0) {
+ recordBatchToHistoryLog(pasteBatchEntries)
+ }
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const newGroup: any = {
id: generateUUID(),
@@ -268,8 +367,28 @@ export function useCanvasClipboard({
fill: null,
stroke: null,
children: newChildren,
+ // Hide the just-persisted standalones beneath the overlay in
+ // the same update that paints the group's copies (atomic
+ // swap — see groupobject.tsx). Because the standalones now
+ // exist in the scene, the group's blur handler takes the
+ // restore-opacity path (foundOriginalCount > 0) rather than
+ // re-materialising them: no double-write, no flicker.
+ membersToHide: memberIds,
+ }
+
+ // Standalones mount asynchronously (React.lazy). Wait until the
+ // last one is in the scene before rendering the overlay so the
+ // group's atomic hide finds them — no brief double-paint of a
+ // standalone plus its overlay copy. Falls back to immediate
+ // render if there's nothing to wait on.
+ const lastId = memberIds[memberIds.length - 1]
+ if (lastId && twoJSInstance) {
+ pollUntilElement(twoJSInstance, lastId, () => {
+ renderGroupRef.current?.([newGroup])
+ })
+ } else {
+ renderGroupRef.current?.([newGroup])
}
- renderGroupRef.current?.([newGroup])
}
}
window.addEventListener('keydown', onPasteEvent)
diff --git a/src/hooks/useComponentHistory.ts b/src/hooks/useComponentHistory.ts
index 20724f0..3996282 100644
--- a/src/hooks/useComponentHistory.ts
+++ b/src/hooks/useComponentHistory.ts
@@ -174,9 +174,18 @@ function applyPropertyToTwoJSGroup(
Object.entries(value as Record).forEach(
([k, v]) => {
if (k === 'opacity') {
- // Opacity lives on the leaf shape (children[0]) by
- // codebase convention; matches applyGroupProperty.
- shape.opacity = v
+ // Opacity is applied at the GROUP level (see
+ // applyProperty and the *-with-text components) so
+ // the shape + text dim uniformly and repaint
+ // reliably. Reset the leaf/text so they don't
+ // compound with the group's opacity.
+ group.opacity = v
+ shape.opacity = 1
+ if (textNodes.length > 0) {
+ textNodes.forEach(
+ (n: ShapeLike) => (n.opacity = 1)
+ )
+ }
} else if (
k === 'textFontSize' ||
k === 'fontSize'
@@ -471,6 +480,26 @@ export function useComponentHistory({
reapplyTextFromMeta(group, props.metadata)
}
+ // Connector port bindings have no Two.js geometry of their own, so
+ // applyPropertyToTwoJSGroup skips them. Mirror them onto elementData
+ // here so undo/redo of a detach restores (or re-clears) the binding
+ // that port re-anchoring reads.
+ if (group.elementData) {
+ const bindingKeys = [
+ 'tailShapeId',
+ 'tailEdge',
+ 'headShapeId',
+ 'headEdge',
+ ] as const
+ bindingKeys.forEach((k) => {
+ if (k in props) {
+ group.elementData[k] = (
+ props as Record
+ )[k]
+ }
+ })
+ }
+
two?.update()
if (props.width !== undefined || props.height !== undefined) {
@@ -760,6 +789,18 @@ export function useComponentHistory({
// Only UPDATE_VERTICES and UPDATE_BULK need extra capture — for
// ADD/DELETE/BATCH the original entry already contains everything redo needs.
const captureNextState = (entry: HistoryEntry): HistoryEntry => {
+ if (entry.action === 'ADD') {
+ // The ADD entry's componentInfo is snapshotted at create time. For
+ // arrows (and any element whose post-create geometry is applied with
+ // skipHistory), that snapshot is stale — e.g. an arrow is pre-created
+ // off-screen at -9999 with zero-length vertices, then drawn later.
+ // Re-read the live store here (still present, since undo's
+ // applyRemove runs after this) so redo re-inserts the final geometry.
+ const current = stateRefForComponentStore.current[entry.id]
+ return current
+ ? { ...entry, componentInfo: { ...current } }
+ : entry
+ }
if (entry.action === 'UPDATE_VERTICES') {
const current = stateRefForComponentStore.current[entry.id]
return {
@@ -811,6 +852,12 @@ export function useComponentHistory({
const updatedBucket = [...bucketLogRef.current, enrichedForRedo]
writeBucket(updatedBucket)
+
+ // An active group overlay shows static copies of its members, so it
+ // can't reflect an undo that moved/removed them underneath. Signal it to
+ // dismiss (reveal the now-updated real members + drop the overlay). Sent
+ // after applyBatch so members are already at their reverted state.
+ window.dispatchEvent(new CustomEvent('historyApplied'))
}
const redoLastAction = (): void => {
@@ -851,6 +898,10 @@ export function useComponentHistory({
delete cleanEntry.nextProps
const updatedLog = [...historyLogRef.current, cleanEntry as HistoryEntry]
writeHistory(updatedLog)
+
+ // See undoLastAction: dismiss any active group overlay so it can't show
+ // stale copies of members a redo just moved/re-added.
+ window.dispatchEvent(new CustomEvent('historyApplied'))
}
const clearHistory = (
diff --git a/src/hooks/useConnectorsEnabled.ts b/src/hooks/useConnectorsEnabled.ts
new file mode 100644
index 0000000..d7ca47f
--- /dev/null
+++ b/src/hooks/useConnectorsEnabled.ts
@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react'
+import {
+ getConnectorsEnabled,
+ setConnectorsEnabled,
+ subscribeConnectorsEnabled,
+} from '../utils/featureFlags'
+
+// React binding for the live connectors feature flag. Returns the current value
+// and a setter; re-renders when the flag changes from anywhere (other tabs of
+// the same component, the Settings modal, etc.).
+export function useConnectorsEnabled(): [boolean, (enabled: boolean) => void] {
+ const [enabled, setEnabled] = useState(getConnectorsEnabled)
+
+ useEffect(() => subscribeConnectorsEnabled(setEnabled), [])
+
+ return [enabled, setConnectorsEnabled]
+}
diff --git a/src/hooks/useElementDefaults.ts b/src/hooks/useElementDefaults.ts
index 10bf788..516fd22 100644
--- a/src/hooks/useElementDefaults.ts
+++ b/src/hooks/useElementDefaults.ts
@@ -1,5 +1,6 @@
import { useEffect, useRef, useState } from 'react'
import type { Dispatch, SetStateAction } from 'react'
+import { DEFAULT_TEXT_FONT_FAMILY } from '../constants/misc'
const STORAGE_KEY = 'craftbase:elementDefaults'
@@ -26,7 +27,7 @@ const INITIAL_DEFAULTS: ElementDefaultsState = {
defaultOpacity: 1,
defaultTextColor: '#1A1612',
defaultTextSize: 'M',
- defaultTextFontFamily: 'Caveat',
+ defaultTextFontFamily: DEFAULT_TEXT_FONT_FAMILY,
}
function loadFromStorage(): ElementDefaultsState {
@@ -59,6 +60,9 @@ export interface ElementDefaultsApi extends ElementDefaultsState {
setDefaultTextColorInBoard: (val: string) => void
setDefaultTextSizeInBoard: (val: TextSizeLabel) => void
setDefaultTextFontFamilyInBoard: (val: string) => void
+ // Restore every default to its factory value (used by "clear canvas" so a
+ // leaked default like linewidth:0 doesn't carry over to the next drawing).
+ resetDefaults: () => void
}
export function useElementDefaults(): ElementDefaultsApi {
@@ -137,6 +141,19 @@ export function useElementDefaults(): ElementDefaultsApi {
const setDefaultTextFontFamilyInBoard = (val: string): void =>
setDefaultTextFontFamily(val)
+ // Reset all defaults to INITIAL_DEFAULTS. The persistence effect above then
+ // rewrites localStorage to the factory values on the resulting state change.
+ const resetDefaults = (): void => {
+ setDefaultFill(INITIAL_DEFAULTS.defaultFill)
+ setDefaultStrokeColor(INITIAL_DEFAULTS.defaultStrokeColor)
+ setDefaultLinewidth(INITIAL_DEFAULTS.defaultLinewidth)
+ setDefaultStrokeType(INITIAL_DEFAULTS.defaultStrokeType)
+ setDefaultOpacity(INITIAL_DEFAULTS.defaultOpacity)
+ setDefaultTextColor(INITIAL_DEFAULTS.defaultTextColor)
+ setDefaultTextSize(INITIAL_DEFAULTS.defaultTextSize)
+ setDefaultTextFontFamily(INITIAL_DEFAULTS.defaultTextFontFamily)
+ }
+
return {
defaultFill,
defaultStrokeColor,
@@ -162,5 +179,6 @@ export function useElementDefaults(): ElementDefaultsApi {
setDefaultTextColorInBoard,
setDefaultTextSizeInBoard,
setDefaultTextFontFamilyInBoard,
+ resetDefaults,
}
}
diff --git a/src/newCanvas.tsx b/src/newCanvas.tsx
index 20866c1..54b79b3 100644
--- a/src/newCanvas.tsx
+++ b/src/newCanvas.tsx
@@ -12,6 +12,7 @@ import React, {
useEffect,
useState,
useRef,
+ useCallback,
Suspense,
type MutableRefObject,
type ReactNode,
@@ -49,15 +50,32 @@ import {
GEO_DRAW_PROPS_KEY,
GEO_POINT_PLACE_MODE_KEY,
GEO_MIN_VERTICES,
+ DEFAULT_TEXT_FONT_FAMILY,
} from './constants/misc'
import Spinner from './components/common/spinner'
-const elementModules = import.meta.glob('./components/elements/*.tsx')
+// Shared lazy-element glob (single source of truth) so the chunk warmed by
+// prefetchElementModule is the exact one React.lazy mounts here.
+import { elementModules } from './elementModules'
import Loader from './components/utils/loader'
-import SelectionController from './canvas/selectionController'
+import SelectionController, {
+ PORT_GAP,
+ PORT_RADAR_RADIUS,
+ SELECTION_PADDING,
+} from './canvas/selectionController'
import { updateX1Y1Vertices, updateX2Y2Vertices } from './utils/updateVertices'
+import {
+ getShapePortPoint,
+ findNearestPort,
+ getStackedPortPoint,
+ PORT_TAIL_STACK_GAP,
+} from './utils/shapePorts'
import { generateUUID } from './utils/misc'
+import {
+ getConnectorsEnabled,
+ subscribeConnectorsEnabled,
+} from './utils/featureFlags'
import {
velocityToLinewidth,
smoothLinewidth,
@@ -78,6 +96,9 @@ import { growShapeToFitText, usableTextWidth } from './utils/shapeTextFit'
import { isSelectPanMode, isPanMode } from './utils/drawModeUtils'
import { createDiamondPath } from './factory/diamond'
import { useCanvasClipboard } from './hooks/useCanvasClipboard'
+import type { HistoryEntry } from './hooks/useComponentHistory'
+import { exportSelectionAsSvg } from './utils/exportSelectionAsSvg'
+import CanvasContextMenu from './components/canvasContextMenu'
import {
ElementRenderWrapper,
GroupRenderWrapper,
@@ -104,6 +125,12 @@ interface CanvasProps {
defaultTextSize: number
onCameraChange?: (event: CameraChangeEvent) => void
renderBackground?: () => ReactNode
+ // Bridge: Canvas owns reorderSelected (needs reconcileZOrder + live zui
+ // selection); it publishes the function here so board.tsx can expose a
+ // stable wrapper through BoardContext for the properties toolbar.
+ reorderSelectedRef?: MutableRefObject<
+ ((op: 'front' | 'forward' | 'backward' | 'back') => void) | null
+ >
}
// Shape of the handle addZUI returns and Canvas stores in state. The
@@ -155,6 +182,40 @@ let defaultStrokeColorValue: string = PENCIL_DEFAULT_COLOR
// (same stale-closure escape hatch as defaultLinewidthValue).
let defaultTextSizeValue: number = DEFAULT_TEXT_SIZE
+// --- z-order reconcile helpers ------------------------------------------
+//
+// The persistable element groups inside `two.scene.children` are the ones we
+// reorder. Everything else (selection-box overlay, preview dots/lines, the
+// transient `groupobject` group) must be left untouched. An element group is
+// identified by carrying `elementData.id` that maps to a live store record and
+// is not the transient GROUP_COMPONENT. The selection overlay is a plain group
+// with no `elementData`, so it's excluded automatically.
+const isReorderableElementChild = (
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ child: any,
+ store: ComponentStore
+): boolean => {
+ const id = child?.elementData?.id
+ if (!id) return false
+ if (child.elementData.componentType === GROUP_COMPONENT) return false
+ return Object.prototype.hasOwnProperty.call(store, id)
+}
+
+// Stable ordering key for a record: position asc (back→front), tie-broken by
+// createdAt then id so legacy/duplicate positions still sort deterministically
+// (and neighbour-swap stays meaningful). Used by both the reconcile comparator
+// and the reorder handlers so they agree on "the element above/below".
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const compareByZOrder = (a: any, b: any): number => {
+ const pa = Number.isFinite(a?.position) ? a.position : 0
+ const pb = Number.isFinite(b?.position) ? b.position : 0
+ if (pa !== pb) return pa - pb
+ const ca = Number.isFinite(a?.createdAt) ? a.createdAt : 0
+ const cb = Number.isFinite(b?.createdAt) ? b.createdAt : 0
+ if (ca !== cb) return ca - cb
+ return String(a?.id ?? '').localeCompare(String(b?.id ?? ''))
+}
+
function addZUI(
props: CanvasProps,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -262,6 +323,30 @@ function addZUI(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let arrowDrawElement: any = null
+ // Source shape of a port-pulled connector, so the radar excludes its own
+ // ports (a connector can't dock back onto the shape it departed). Null for
+ // free arrows drawn from the toolbar.
+ let arrowDrawTailShapeId: string | null = null
+ // Stacking state for a port-pulled connector: the source port anchor, its
+ // edge, and this connector's slot among the arrows already leaving that port
+ // (0 = first, no fan). The tail is re-fanned every mousemove so its offset
+ // direction tracks whichever quadrant the head is dragged into.
+ let arrowDrawTailPort: {
+ anchor: { x: number; y: number }
+ edge: string
+ index: number
+ } | null = null
+ // Phase-2 magnetic snap: while an arrow endpoint is being dragged and the
+ // radar has it magnetically docked on a port, this holds the would-be
+ // binding. It's recomputed every mousemove frame (null when not docked) and
+ // committed on release — so if the user pulls away before letting go, no
+ // connection is made.
+ let pendingPortConnection: {
+ arrowId: string
+ endpoint: 'head' | 'tail'
+ edge: string
+ shapeId: string
+ } | null = null
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let textDrawElement: any = null
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -470,6 +555,15 @@ function addZUI(
},
commit: (id, patch) => {
updateComponentBulkPropertiesInLocalStore(id, patch)
+ // Resize ended — persist any connectors whose ports tracked the
+ // shape so their new tail/head survive a reload.
+ const g = selectionController.currentGroup
+ if (g) persistBoundArrows(g)
+ },
+ onTransform: (group) => {
+ // Live-follow during scale/rotate: drag bound connectors with the
+ // shape's edges.
+ reanchorArrowsForShape(group)
},
onDelete: (group) => {
const id = group?.elementData?.id
@@ -501,6 +595,15 @@ function addZUI(
activeGroupRef.current = null
})
+ // Connectors flag is live-toggleable from Settings. When it flips, re-sync
+ // the current selection box so its edge ports appear/disappear immediately
+ // (rather than waiting for the next transform). If the flag goes off mid
+ // arrow-drag, clear any lingering radar glow too.
+ subscribeConnectorsEnabled((enabled) => {
+ if (!enabled) selectionController.hidePortGlow()
+ selectionController.resync()
+ })
+
function dblclick(e: MouseEvent) {
// In a multi-click geo draw, a double-click finishes it. Drop the
// duplicate vertex the second mousedown added.
@@ -601,16 +704,18 @@ function addZUI(
// Two.js renders text at `fontSize * sceneScale` screen pixels.
// Match the textarea/measureSpan to that so visuals stay in sync
// and the surface-unit math (measuredW / zoom) remains correct.
+ // Camera-dependent geometry — reassigned by recomputeGeometry() on
+ // every two.update (pan/zoom) so the editor stays glued to the shape.
const sceneScale = two?.scene?.scale || 1
- const cssFontSize = fontSize * sceneScale
+ let cssFontSize = fontSize * sceneScale
// Use a generous line-height so ascenders/descenders are
// never clipped. A LINE_HEIGHT_MULTIPLIER× covers most font metrics.
- const lineH = Math.ceil(cssFontSize * LINE_HEIGHT_MULTIPLIER)
+ let lineH = Math.ceil(cssFontSize * LINE_HEIGHT_MULTIPLIER)
// Vertical padding inside the textarea prevents the top of
// tall glyphs (H, d, l …) from being cut off by the element
// boundary. Half the difference between lineH and cssFontSize
// approximates the ascender headroom the browser needs.
- const vertPad = Math.ceil((lineH - cssFontSize) / 2) + 4
+ let vertPad = Math.ceil((lineH - cssFontSize) / 2) + 4
const input = document.createElement('textarea')
const randomId = Math.floor(Math.random() * 90 + 10)
@@ -627,7 +732,8 @@ function addZUI(
input.style.padding = `${vertPad}px 8px`
input.style.color = textStyle.fill || '#3A342C'
input.style.fontSize = `${cssFontSize}px`
- input.style.fontFamily = textStyle.family || 'Caveat'
+ input.style.fontFamily =
+ textStyle.family || DEFAULT_TEXT_FONT_FAMILY
input.style.fontWeight = String(textStyle.weight ?? 'normal')
input.style.lineHeight = `${lineH}px`
input.style.letterSpacing = '0px'
@@ -643,16 +749,18 @@ function addZUI(
input.style.boxSizing = 'border-box'
input.className = 'temp-input-area'
- // Anchor point: the SVG text element's screen-space center
- const centerX = screenRect.left + screenRect.width / 2
- const centerY = screenRect.top + screenRect.height / 2
+ // Anchor point: the SVG shape's screen-space center. The shape stays
+ // VISIBLE during edit (only the text layer is hidden), so its rect is
+ // live — recomputeGeometry() re-reads it each frame to follow pan/zoom.
+ let centerX = screenRect.left + screenRect.width / 2
+ let centerY = screenRect.top + screenRect.height / 2
// px-per-surface-unit derived from the shape's current screen
// size; converts the textarea's pixel measurement back into
// Two.js surface units before growing the shape.
const rectScreen =
rectChild?._renderer?.elem?.getBoundingClientRect()
- const zoom =
+ let zoom =
rectChild && rectScreen && rectChild.width
? rectScreen.width / rectChild.width
: 1
@@ -668,7 +776,7 @@ function addZUI(
// (screen px), so wrapping mirrors the committed render and the
// box never spills outside the shape horizontally.
const surfaceW = rectChild?.width || screenRect.width / zoom
- const usableScreenW = Math.max(
+ let usableScreenW = Math.max(
Math.round(usableTextWidth(shapeKind, surfaceW) * zoom),
Math.ceil(cssFontSize) // never below ~1 glyph
)
@@ -682,7 +790,8 @@ function addZUI(
measureSpan.style.overflowWrap = 'anywhere'
measureSpan.style.width = `${usableScreenW}px`
measureSpan.style.fontSize = `${cssFontSize}px`
- measureSpan.style.fontFamily = textStyle.family || 'Caveat'
+ measureSpan.style.fontFamily =
+ textStyle.family || DEFAULT_TEXT_FONT_FAMILY
measureSpan.style.fontWeight = String(textStyle.weight ?? 'normal')
measureSpan.style.lineHeight = `${lineH}px`
measureSpan.style.letterSpacing = '0px'
@@ -690,8 +799,43 @@ function addZUI(
measureSpan.style.boxSizing = 'content-box'
document.body.appendChild(measureSpan)
- const autoSizeAndCenter = () => {
- // Measure wrapped height at the fixed usable width.
+ // Pull anchor + font from the LIVE shape rect + camera. Called on
+ // every two.update so the editor pans/zooms with the shape.
+ const recomputeGeometry = () => {
+ const scale = two?.scene?.scale || 1
+ cssFontSize = fontSize * scale
+ lineH = Math.ceil(cssFontSize * LINE_HEIGHT_MULTIPLIER)
+ vertPad = Math.ceil((lineH - cssFontSize) / 2) + 4
+ const liveRect = (
+ rectChild?._renderer?.elem ?? groupDomElem
+ )?.getBoundingClientRect()
+ if (liveRect) {
+ centerX = liveRect.left + liveRect.width / 2
+ centerY = liveRect.top + liveRect.height / 2
+ }
+ const rs = rectChild?._renderer?.elem?.getBoundingClientRect()
+ zoom =
+ rectChild && rs && rectChild.width
+ ? rs.width / rectChild.width
+ : 1
+ const sw =
+ rectChild?.width ||
+ (liveRect ? liveRect.width / zoom : surfaceW)
+ usableScreenW = Math.max(
+ Math.round(usableTextWidth(shapeKind, sw) * zoom),
+ Math.ceil(cssFontSize)
+ )
+ input.style.fontSize = `${cssFontSize}px`
+ input.style.lineHeight = `${lineH}px`
+ input.style.padding = `${vertPad}px 8px`
+ measureSpan.style.fontSize = `${cssFontSize}px`
+ measureSpan.style.lineHeight = `${lineH}px`
+ measureSpan.style.width = `${usableScreenW}px`
+ }
+
+ // Pure DOM: size + centre the textarea over the shape midpoint.
+ // No shape-grow / two.update — safe to call from the update handler.
+ const placeEditor = () => {
const val = input.value || 'M'
measureSpan.textContent = val
const measuredH = measureSpan.offsetHeight
@@ -704,36 +848,48 @@ function addZUI(
input.style.width = `${contentWidth}px`
input.style.height = `${contentHeight}px`
-
- // Centre over the shape midpoint. Width is fixed to the
- // shape's usable width, so the box stays inside the shape;
- // only the height grows as lines are added.
input.style.left = `${centerX - contentWidth / 2}px`
input.style.top = `${centerY - contentHeight / 2}px`
+ }
- // Grow ONLY the shape height to fit the wrapped lines
- // (width is user-driven). Symmetric growth keeps the centre
- // fixed, so centerX/centerY stay valid.
- if (rectChild) {
- const textSurfaceH = measuredH / zoom
- const { h: nextH } = growShapeToFitText(
- shapeKind,
- rectChild.width,
- rectChild.height,
- 0,
- textSurfaceH
- )
- if (rectChild.height < nextH) {
- rectChild.height = nextH
- two.update()
- }
+ // Grow ONLY the shape height to fit the wrapped lines (width is
+ // user-driven). Symmetric growth keeps the centre fixed. Only on
+ // typing — NOT from the update handler (it calls two.update).
+ const growShapeToFit = () => {
+ if (!rectChild) return
+ const val = input.value || 'M'
+ measureSpan.textContent = val
+ const measuredH = measureSpan.offsetHeight
+ const textSurfaceH = measuredH / zoom
+ const { h: nextH } = growShapeToFitText(
+ shapeKind,
+ rectChild.width,
+ rectChild.height,
+ 0,
+ textSurfaceH
+ )
+ if (rectChild.height < nextH) {
+ rectChild.height = nextH
+ two.update()
}
}
- autoSizeAndCenter()
+ // Re-glue the editor to the shape after any render (pan/zoom).
+ const repositionEditor = () => {
+ recomputeGeometry()
+ placeEditor()
+ }
+
+ const onTextInput = () => {
+ growShapeToFit() // may two.update → 'update' → repositionEditor
+ placeEditor()
+ }
+
+ repositionEditor()
+ two.bind('update', repositionEditor)
// Re-measure on every keystroke so the box grows with the text
- input.addEventListener('input', autoSizeAndCenter)
+ input.addEventListener('input', onTextInput)
input.focus()
@@ -756,8 +912,9 @@ function addZUI(
})
input.addEventListener('blur', () => {
- // Clean up the input listener and measurement span
- input.removeEventListener('input', autoSizeAndCenter)
+ // Clean up the camera tracker, input listener and measure span
+ two.unbind('update', repositionEditor)
+ input.removeEventListener('input', onTextInput)
if (measureSpan.parentNode) {
measureSpan.parentNode.removeChild(measureSpan)
}
@@ -941,6 +1098,499 @@ function addZUI(
lastHoveredCircleGroup = found ?? null
}
+ // Outward offset (surface units) from a shape's edge to its floated
+ // selection port, matching where selectionController draws the port dot:
+ // the box padding plus the screen-constant port gap divided out by zoom.
+ const portGapSurface = (): number =>
+ SELECTION_PADDING + PORT_GAP / (zui.scale || 1)
+
+ // Surface-space step between stacked connector tails (screen-constant, so it
+ // matches the port-dot spacing at the current zoom).
+ const portTailStackGapSurface = (): number =>
+ PORT_TAIL_STACK_GAP / (zui.scale || 1)
+
+ // How many connectors already leave `shapeId`'s `edge` port (tail bound
+ // there). A fresh pull-out takes the next slot, so it fans out beyond them.
+ function countPortConnectors(
+ shapeId: string | undefined,
+ edge: string
+ ): number {
+ if (!shapeId) return 0
+ let n = 0
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ two.scene.children.forEach((c: any) => {
+ const ed = c?.elementData
+ if (
+ ed?.componentType === 'arrowLine' &&
+ ed.tailShapeId === shapeId &&
+ ed.tailEdge === edge
+ ) {
+ n++
+ }
+ })
+ return n
+ }
+
+ // Re-fan a port-bound endpoint (tail = vertex[0], head = vertex[1]): place
+ // it at the stacked offset for this connector's slot, fanning toward the
+ // side its OTHER endpoint currently sits on. `port` is the live port anchor;
+ // the far endpoint is read off the line so the fan direction follows the
+ // drag (or the bound far end after a shape move).
+ function applyStackedEndpoint(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ arrowGroup: any,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ line: any,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ circle: any,
+ edge: string,
+ port: { x: number; y: number },
+ index: number,
+ endpoint: 'tail' | 'head'
+ ) {
+ const farIdx = endpoint === 'tail' ? 1 : 0
+ const far = {
+ x: arrowGroup.position.x + line.vertices[farIdx].x,
+ y: arrowGroup.position.y + line.vertices[farIdx].y,
+ }
+ const pt = getStackedPortPoint(
+ edge,
+ port,
+ far,
+ index,
+ portTailStackGapSurface()
+ )
+ const relX = pt.x - arrowGroup.position.x
+ const relY = pt.y - arrowGroup.position.y
+ if (endpoint === 'tail') {
+ updateX1Y1Vertices(Two, line, relX, relY, circle, two)
+ } else {
+ updateX2Y2Vertices(Two, line, relX, relY, circle, two)
+ }
+ }
+
+ // Which arrow endpoint a drag is moving — context for the magnetic snap.
+ type PortDragContext = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ arrowGroup: any
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ line: any
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ circle: any
+ endpoint: 'head' | 'tail'
+ }
+
+ // Radar: while an arrow endpoint is dragging at `probeSurface` (the cursor),
+ // glow + outline the nearest landable port. When `dragContext` is supplied
+ // and a port is in range, also do the one-off magnetic pull — snap that
+ // endpoint onto the port and remember the would-be binding in
+ // `pendingPortConnection` (committed on release). The probe is the cursor,
+ // not the snapped point, so pulling past the threshold releases the magnet
+ // and clears the pending binding — the user is never forced to connect.
+ function updatePortRadar(
+ probeSurface: { x: number; y: number },
+ dragContext: PortDragContext | null = null,
+ excludeShapeId: string | null = arrowDrawTailShapeId
+ ) {
+ // No port snapping/glow while connectors are disabled (live flag).
+ if (!getConnectorsEnabled()) return
+ const threshold = PORT_RADAR_RADIUS / (zui.scale || 1)
+ const nearest = findNearestPort(
+ two.scene.children,
+ probeSurface,
+ threshold,
+ portGapSurface(),
+ excludeShapeId
+ )
+ if (nearest) {
+ // Pass the candidate group so the controller also outlines the
+ // shape the connector would attach to.
+ selectionController.showPortGlow(nearest.point, nearest.group)
+ if (dragContext && nearest.shapeId) {
+ snapEndpointToPort(dragContext, nearest.point)
+ pendingPortConnection = {
+ arrowId: dragContext.arrowGroup?.elementData?.id,
+ endpoint: dragContext.endpoint,
+ edge: nearest.edge,
+ shapeId: nearest.shapeId,
+ }
+ }
+ } else {
+ selectionController.hidePortGlow()
+ // Just undocked: the magnet overwrote the endpoint with the port's
+ // absolute position, but the endpoint-drag path advances the vertex
+ // incrementally — so re-place it exactly under the cursor, else it
+ // keeps the dock offset after release. (Harmless for the pull-out
+ // path, which already recomputes the head from the cursor.)
+ if (pendingPortConnection && dragContext) {
+ snapEndpointToPort(dragContext, probeSurface)
+ }
+ pendingPortConnection = null
+ }
+ }
+
+ // Magnetic pull: glue the dragged endpoint to the floated port anchor by
+ // rewriting its line vertex (and endpoint circle) to that surface point.
+ function snapEndpointToPort(
+ ctx: PortDragContext,
+ point: { x: number; y: number }
+ ) {
+ const relX = point.x - ctx.arrowGroup.translation.x
+ const relY = point.y - ctx.arrowGroup.translation.y
+ if (ctx.endpoint === 'head') {
+ updateX2Y2Vertices(Two, ctx.line, relX, relY, ctx.circle, two)
+ } else {
+ updateX1Y1Vertices(Two, ctx.line, relX, relY, ctx.circle, two)
+ }
+ }
+
+ // Commit a magnetic snap that was still active at release: write the
+ // tail/head binding onto the arrow (live + store) so the endpoint stays
+ // glued to the port and re-anchors when that shape later moves. Used by the
+ // pull-out path; the endpoint-drag path folds the same write into its own
+ // bulk update so detach/connect share a single undo step.
+ function applyPendingPortConnection() {
+ const pc = pendingPortConnection
+ if (!pc || !pc.arrowId || !pc.shapeId) return
+ const arrowGroup = two.scene.children.find(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (c: any) => c?.elementData?.id === pc.arrowId
+ )
+ const ed = arrowGroup?.elementData
+ if (!ed) return
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const patch: Record = {}
+ if (pc.endpoint === 'head') {
+ ed.headShapeId = pc.shapeId
+ ed.headEdge = pc.edge
+ patch.headShapeId = pc.shapeId
+ patch.headEdge = pc.edge
+ } else {
+ ed.tailShapeId = pc.shapeId
+ ed.tailEdge = pc.edge
+ patch.tailShapeId = pc.shapeId
+ patch.tailEdge = pc.edge
+ }
+ updateComponentBulkPropertiesInLocalStore(pc.arrowId, patch)
+ }
+
+ // Pull a connector arrow out of a selection port. Mirrors the toolbar's
+ // arrow-create flow (off-screen arrowLine in the store, then drive it via
+ // SCENARIO_ARROW_DRAW), except the tail is pinned to the port's surface
+ // anchor instead of the next mousedown's cursor, and the drag starts
+ // immediately so the user only has to drop the head. The tail's binding
+ // (tailShapeId/tailEdge) is recorded so it re-anchors when the shape moves.
+ function startPortConnector(
+ anchor: { x: number; y: number },
+ tailShapeId: string | undefined,
+ tailEdge: string
+ ) {
+ const arrowId = generateUUID()
+ const userId = localStorage.getItem('userId')
+ // Slot among the connectors already leaving this port — drives the fan
+ // so this new tail doesn't bunch onto the existing ones.
+ const tailPortIndex = countPortConnectors(tailShapeId, tailEdge)
+ const arrowData = {
+ id: arrowId,
+ componentType: 'arrowLine',
+ linewidth: defaultLinewidthValue,
+ strokeType: defaultStrokeTypeValue,
+ stroke: defaultStrokeColorValue ?? '#3A342C',
+ children: {},
+ x: -9999,
+ y: -9999,
+ x1: 0,
+ x2: 0,
+ y1: 0,
+ y2: 0,
+ boardId: props.boardId,
+ boardName: null,
+ radius: null,
+ iconStroke: null,
+ isDummy: null,
+ createdAt: null,
+ metadata: { opacity: 1 },
+ width: 100,
+ height: 0,
+ fill: 'transparent',
+ textColor: null,
+ updatedBy: userId,
+ // Connection binding — tail pinned to the source shape's edge port.
+ tailShapeId: tailShapeId ?? null,
+ tailEdge,
+ tailPortIndex,
+ headShapeId: null,
+ headEdge: null,
+ }
+ addToLocalComponentStore(
+ arrowId,
+ 'arrowLine',
+ arrowData as unknown as ComponentRecord
+ )
+
+ // Remember the source so the radar won't glow this shape's own ports.
+ arrowDrawTailShapeId = tailShapeId ?? null
+ // Remember the port so each mousemove can re-fan the tail (direction
+ // follows the head's quadrant; magnitude is this connector's slot).
+ arrowDrawTailPort = {
+ anchor: { x: anchor.x, y: anchor.y },
+ edge: tailEdge,
+ index: tailPortIndex,
+ }
+ // Fresh drag — no magnetic dock yet.
+ pendingPortConnection = null
+
+ // Drop the source shape's selection box so it doesn't linger over the
+ // new connector while dragging.
+ selectionController.detach()
+
+ scenario = SCENARIO_ARROW_DRAW
+ domElement.addEventListener('mousemove', mousemove, false)
+ domElement.addEventListener('mouseup', mouseup, false)
+ setRootCursor('crosshair')
+
+ // The arrowLine React element mounts lazily — poll until it appears,
+ // then pin the tail to the port anchor and collapse the head onto it so
+ // the upcoming mousemove stretches it from the port.
+ pollUntilElement(
+ two,
+ arrowId,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (el: any) => {
+ arrowDrawElement = el
+ arrowDrawElement.position.x = anchor.x
+ arrowDrawElement.position.y = anchor.y
+
+ const line = arrowDrawElement.children[0]
+ const pointCircle1Group = arrowDrawElement.children[1]
+ const pointCircle2Group = arrowDrawElement.children[2]
+
+ updateX1Y1Vertices(Two, line, 0, 0, pointCircle1Group, two)
+ updateX2Y2Vertices(Two, line, 0, 0, pointCircle2Group, two)
+ two.update()
+ },
+ { maxRetries: 30 }
+ )
+ }
+
+ // Re-anchor every connector bound to `group`: recompute its tail (and/or
+ // head) so the bound endpoint stays glued to the shape's edge port. Called
+ // live during a shape drag so the connector follows in real time. The arrow
+ // group's own position stays put — only the bound vertex moves, which keeps
+ // the free endpoint fixed in surface space.
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ function reanchorArrowsForShape(group: any) {
+ // Bound arrows only track their shape while connectors are enabled. When
+ // off, existing bindings lie dormant (the arrow stays put) rather than
+ // being stripped — flip the flag back on to resume gluing.
+ if (!getConnectorsEnabled()) return
+ const shapeId = group?.elementData?.id
+ if (!shapeId) return
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ two.scene.children.forEach((child: any) => {
+ if (child?.elementData?.componentType !== 'arrowLine') return
+ const ed = child.elementData
+ const line = child.children?.[0]
+ if (!line) return
+ if (ed.tailShapeId === shapeId && ed.tailEdge) {
+ const p = getShapePortPoint(group, ed.tailEdge, portGapSurface())
+ if (ed.tailPortIndex > 0) {
+ // Keep the fan offset (direction follows the bound head).
+ applyStackedEndpoint(
+ child,
+ line,
+ child.children[1],
+ ed.tailEdge,
+ p,
+ ed.tailPortIndex,
+ 'tail'
+ )
+ } else {
+ updateX1Y1Vertices(
+ Two,
+ line,
+ p.x - child.position.x,
+ p.y - child.position.y,
+ child.children[1],
+ two
+ )
+ }
+ }
+ if (ed.headShapeId === shapeId && ed.headEdge) {
+ const p = getShapePortPoint(group, ed.headEdge, portGapSurface())
+ if (ed.headPortIndex > 0) {
+ // Keep the fan offset (direction follows the bound tail).
+ applyStackedEndpoint(
+ child,
+ line,
+ child.children[2],
+ ed.headEdge,
+ p,
+ ed.headPortIndex,
+ 'head'
+ )
+ } else {
+ updateX2Y2Vertices(
+ Two,
+ line,
+ p.x - child.position.x,
+ p.y - child.position.y,
+ child.children[2],
+ two
+ )
+ }
+ }
+ })
+ }
+
+ // Persist the (already re-anchored) vertices of connectors bound to `group`
+ // so the new tail/head survive a reload. Mirrors the arrow-draw commit:
+ // prevX === position.x means the x,y branch is a no-op (the arrow group never
+ // moves), and isLineCircle drives the x1/y1/x2/y2 write.
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ function persistBoundArrows(group: any) {
+ if (!getConnectorsEnabled()) return
+ const shapeId = group?.elementData?.id
+ if (!shapeId) return
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ two.scene.children.forEach((child: any) => {
+ if (child?.elementData?.componentType !== 'arrowLine') return
+ const ed = child.elementData
+ if (ed.tailShapeId !== shapeId && ed.headShapeId !== shapeId) return
+ const line = child.children?.[0]
+ if (!line) return
+ updateToGlobalState(
+ {
+ id: ed.id,
+ prevX: parseInt(child.position.x),
+ prevY: parseInt(child.position.y),
+ isLineCircle: true,
+ parentData: child,
+ data: {
+ x: parseInt(child.position.x),
+ y: parseInt(child.position.y),
+ x1: parseInt(line.vertices[0].x),
+ y1: parseInt(line.vertices[0].y),
+ x2: parseInt(line.vertices[1].x),
+ y2: parseInt(line.vertices[1].y),
+ },
+ },
+ {}
+ )
+ })
+ }
+
+ // After a connector endpoint settles on a port, re-sort EVERY endpoint
+ // docked at that port (tails pulled out of it AND heads dropped onto it) so
+ // their order matches their far endpoints' order: for side edges (e/w) by
+ // the far end's y, for top/bottom edges (n/s) by its x. Without this the
+ // slot index is frozen when the binding is made, so a later connector whose
+ // far end lands between two earlier ones still stacks past them. The
+ // endpoint whose far end is closest to the port-normal axis keeps the bare
+ // port point (index 0); the rest fan out by side in far-end order.
+ // Re-applies the fan and persists the new vertices + index so a reload
+ // (local mode) keeps the layout.
+ function restackPortConnectors(shapeId: string | undefined, edge: string) {
+ if (!shapeId) return
+ const group = two.scene.children.find(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (c: any) => c?.elementData?.id === shapeId
+ )
+ if (!group) return
+ const port = getShapePortPoint(group, edge, portGapSurface())
+ const sideEdge = edge === 'e-resize' || edge === 'w-resize'
+ const center = sideEdge ? port.y : port.x
+
+ type Entry = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ child: any
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ line: any
+ endpoint: 'tail' | 'head'
+ coord: number
+ dist: number
+ }
+ const entries: Entry[] = []
+ // Far endpoint vertex index for ordering: a tail bound here is ordered
+ // by its head (vertex[1]); a head bound here by its tail (vertex[0]).
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const pushEntry = (child: any, line: any, endpoint: 'tail' | 'head') => {
+ const farIdx = endpoint === 'tail' ? 1 : 0
+ const coord = sideEdge
+ ? child.position.y + line.vertices[farIdx].y
+ : child.position.x + line.vertices[farIdx].x
+ entries.push({
+ child,
+ line,
+ endpoint,
+ coord,
+ dist: Math.abs(coord - center),
+ })
+ }
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ two.scene.children.forEach((child: any) => {
+ const ed = child?.elementData
+ if (ed?.componentType !== 'arrowLine') return
+ const line = child.children?.[0]
+ if (!line) return
+ if (ed.tailShapeId === shapeId && ed.tailEdge === edge)
+ pushEntry(child, line, 'tail')
+ if (ed.headShapeId === shapeId && ed.headEdge === edge)
+ pushEntry(child, line, 'head')
+ })
+ if (entries.length === 0) return
+
+ // Closest-to-center first: the nearest takes the bare port (index 0),
+ // the rest fan outward per side, increasing with distance — which keeps
+ // endpoint order aligned with far-end order within each side.
+ entries.sort((a, b) => a.dist - b.dist)
+ let beforeCount = 0
+ let afterCount = 0
+ entries.forEach((entry, i) => {
+ const index =
+ i === 0
+ ? 0
+ : entry.coord < center
+ ? ++beforeCount
+ : ++afterCount
+ const circle =
+ entry.endpoint === 'tail'
+ ? entry.child.children[1]
+ : entry.child.children[2]
+ if (entry.endpoint === 'tail')
+ entry.child.elementData.tailPortIndex = index
+ else entry.child.elementData.headPortIndex = index
+ applyStackedEndpoint(
+ entry.child,
+ entry.line,
+ circle,
+ edge,
+ port,
+ index,
+ entry.endpoint
+ )
+ const patch =
+ entry.endpoint === 'tail'
+ ? {
+ x1: parseInt(entry.line.vertices[0].x),
+ y1: parseInt(entry.line.vertices[0].y),
+ tailPortIndex: index,
+ }
+ : {
+ x2: parseInt(entry.line.vertices[1].x),
+ y2: parseInt(entry.line.vertices[1].y),
+ headPortIndex: index,
+ }
+ updateComponentBulkPropertiesInLocalStore(
+ entry.child.elementData.id,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ patch as any,
+ // Cosmetic re-layout — don't spawn an undo step per moved arrow.
+ true
+ )
+ })
+ }
+
function mousedown(e: MouseEvent) {
// Pan-mode (desktop): grab-and-drag translates the surface instead of
// selecting/drawing. Runs before everything else so a click on a shape
@@ -990,6 +1640,27 @@ function addZUI(
}
})
} else if (selectionController.currentGroup) {
+ // Port check first: a click on a connection port pulls out a
+ // connector arrow (tail pinned to the port) instead of selecting or
+ // resizing. Ports sit outside the box, so they never overlap the
+ // resize handles below.
+ const portHit = selectionController.hitTestPort(
+ e.clientX,
+ e.clientY
+ )
+ if (portHit) {
+ const sourceGroup = selectionController.currentGroup
+ const tailShapeId = sourceGroup?.elementData?.id
+ // Pin the tail to the floated selection port (edge + padding +
+ // port gap) so the connector visually starts at the port dot.
+ const anchor = getShapePortPoint(
+ sourceGroup,
+ portHit.edge,
+ portGapSurface()
+ )
+ startPortConnector(anchor, tailShapeId, portHit.edge)
+ return
+ }
// Controller handle check — runs before the bare-canvas clearSelector
// dispatch and the DOM path walk. Corner handles can extend slightly
// beyond the element's SVG bounds, so relying on path-walking would
@@ -1507,6 +2178,23 @@ function addZUI(
? shape.elementData.lineData
: shape.children[0]
+ // Keep a selected arrow's endpoint handles visible. The
+ // mousedown above hides ALL endpoints (line ~1632); the
+ // pull-out auto-select and the hover fallback re-show them,
+ // but a plain body-click never did — leaving the handles
+ // at opacity 0. Since opacity-0 circles don't fire pointer
+ // events, a follow-up grab of an endpoint would miss the
+ // circle, fall through to the null→parent-arrow fallback,
+ // and become a whole-arrow BODY drag — which detaches the
+ // arrow's port bindings. Re-showing them here keeps the next
+ // endpoint grab an endpoint drag, so bindings survive.
+ if (
+ groupForToolbar?.elementData?.componentType ===
+ 'arrowLine'
+ ) {
+ setArrowEndpointsVisible(groupForToolbar, true)
+ }
+
// First line node of the text layer (or a legacy direct
// text child) — gives the toolbar a representative text
// node for shape-with-text enablement.
@@ -1605,6 +2293,34 @@ function addZUI(
pointCircle2Group,
two
)
+
+ // Fan the tail off the port so stacked connectors don't
+ // overlap — direction follows the quadrant the head is in.
+ if (arrowDrawTailPort && arrowDrawTailPort.index > 0) {
+ applyStackedEndpoint(
+ arrowDrawElement,
+ line,
+ arrowDrawElement.children[1],
+ arrowDrawTailPort.edge,
+ arrowDrawTailPort.anchor,
+ arrowDrawTailPort.index,
+ 'tail'
+ )
+ }
+
+ // Radar sweep + magnetic snap for the head being pulled out.
+ updatePortRadar(
+ {
+ x: arrowDrawElement.position.x + relX,
+ y: arrowDrawElement.position.y + relY,
+ },
+ {
+ arrowGroup: arrowDrawElement,
+ line,
+ circle: pointCircle2Group,
+ endpoint: 'head',
+ }
+ )
}
break
case SCENARIO_DRAW_SHAPE: {
@@ -1848,11 +2564,33 @@ function addZUI(
)
}
}
+
+ // Radar + magnetic snap for the endpoint being
+ // re-dragged (tail or head, per `direction`). Works
+ // every time, not just at creation. No source
+ // exclusion here — an existing arrow's end may dock
+ // onto any shape in range.
+ updatePortRadar(
+ toSurface(e),
+ {
+ arrowGroup: shape.lineData?.parent,
+ line: shape.lineData,
+ circle: shape,
+ endpoint:
+ shape.direction === 'left'
+ ? 'tail'
+ : 'head',
+ },
+ null
+ )
}
// code block condition to handle normal component's dragging
else {
shape.position.x += dx / zui.scale
shape.position.y += dy / zui.scale
+ // Drag any connector tails/heads pinned to this
+ // shape's ports along with it.
+ reanchorArrowsForShape(shape)
}
} else if (shape.elementData.isGroupSelector) {
// this blocks falls for the case when user has clicked and
@@ -1925,6 +2663,11 @@ function addZUI(
updateToGlobalState(newShapeData, {})
+ // If the head was magnetically docked on a port at release,
+ // commit the head→shape binding (the vertices were already
+ // snapped during the drag).
+ applyPendingPortConnection()
+
// Auto-select the freshly drawn arrow so its endpoint
// handles and the edit toolbar appear immediately — a
// visual cue that the arrow is editable. Arrows aren't in
@@ -1953,6 +2696,31 @@ function addZUI(
setSelectedComponentInBoard(null)
}
+ // Radar is a draw-time affordance only — clear it on drop.
+ selectionController.hidePortGlow()
+ // Now the endpoints are firmly placed, re-sort every connector on
+ // each touched port so their order matches their far ends' order
+ // (fixes a later connector whose far end lands between earlier
+ // ones from stacking past them). Two ports may be involved: the
+ // source port a tail was pulled from, and the port a head docked
+ // onto (the latter also covers a plain toolbar arrow whose head
+ // lands on a port — no tail source).
+ if (arrowDrawTailShapeId && arrowDrawTailPort) {
+ restackPortConnectors(
+ arrowDrawTailShapeId,
+ arrowDrawTailPort.edge
+ )
+ }
+ const drawnEd = arrowDrawElement?.elementData
+ if (drawnEd?.headShapeId && drawnEd?.headEdge) {
+ restackPortConnectors(
+ drawnEd.headShapeId,
+ drawnEd.headEdge
+ )
+ }
+ arrowDrawTailShapeId = null
+ arrowDrawTailPort = null
+
arrowDrawElement = null
setArrowDrawModeOff()
setPointerElement('pointer')
@@ -2181,61 +2949,243 @@ function addZUI(
}
setSelectedComponentInBoard(null)
} else if (shape?.elementData) {
- if (
- shape.elementData.x !== shape.translation.x ||
- shape.elementData.y !== shape.translation.y
- ) {
+ // Did the element actually move since mousedown? Compare the
+ // rounded translation against `prevX`/`prevY` captured at
+ // mousedown (line ~1721, also `parseInt(translation)`).
+ //
+ // The old guard compared `elementData.x` against
+ // `translation.x` directly, but `elementData.x` is stored as
+ // a parseInt'd integer while `translation.x` keeps the float.
+ // For a port-pulled connector the position is a fractional
+ // port anchor, so the two always differed — making a plain
+ // CLICK on the arrow body read as a "move" and fall into the
+ // body branch below, which detaches both port bindings.
+ // Gating on real movement makes a click a no-op.
+ const prevX = shape.elementData.prevX
+ const prevY = shape.elementData.prevY
+ const movedX =
+ prevX === undefined
+ ? shape.elementData.x !== shape.translation.x
+ : parseInt(shape.translation.x) !== prevX
+ const movedY =
+ prevY === undefined
+ ? shape.elementData.y !== shape.translation.y
+ : parseInt(shape.translation.y) !== prevY
+ if (movedX || movedY) {
if (shape?.elementData?.isLineCircle === true) {
shape.opacity = 0
shape.siblingCircle.opacity = 0
- oldShapeData = { ...shape.elementData }
+ const vertexObj = {
+ x1: parseInt(shape.lineData.vertices[0].x),
+ y1: parseInt(shape.lineData.vertices[0].y),
+ x2: parseInt(shape.lineData.vertices[1].x),
+ y2: parseInt(shape.lineData.vertices[1].y),
+ }
- newShapeData = Object.assign(
- {},
- shape.elementData,
- {
- data: {
- x1: parseInt(
- shape.lineData.vertices[0].x
- ),
- y1: parseInt(
- shape.lineData.vertices[0].y
- ),
- x2: parseInt(
- shape.lineData.vertices[1].x
- ),
- y2: parseInt(
- shape.lineData.vertices[1].y
- ),
- },
+ // Releasing this endpoint either CONNECTS it (still
+ // magnetically docked on a port at release) or
+ // DETACHES it (manual move ending off every port).
+ // Either way fold the binding write into the SAME
+ // bulk update as the vertices so one undo reverts
+ // both position and binding.
+ const arrowGroup = shape.lineData?.parent
+ const ed = arrowGroup?.elementData
+ const draggedEndpoint =
+ shape.direction === 'left' ? 'tail' : 'head'
+ // Ports this release touches — the one the dragged
+ // endpoint was on (it may detach or hop off) plus the
+ // one it docks onto — re-sorted once the binding is
+ // settled so the remaining fans stay ordered.
+ const portsToRestack: {
+ shapeId: string
+ edge: string
+ }[] = []
+ const recordPort = (
+ shapeId?: string | null,
+ edge?: string | null
+ ) => {
+ if (
+ shapeId &&
+ edge &&
+ !portsToRestack.some(
+ (p) =>
+ p.shapeId === shapeId &&
+ p.edge === edge
+ )
+ )
+ portsToRestack.push({ shapeId, edge })
+ }
+ if (ed && draggedEndpoint === 'tail')
+ recordPort(ed.tailShapeId, ed.tailEdge)
+ else if (ed && draggedEndpoint === 'head')
+ recordPort(ed.headShapeId, ed.headEdge)
+ const connectHere =
+ !!pendingPortConnection &&
+ pendingPortConnection.endpoint ===
+ draggedEndpoint &&
+ !!pendingPortConnection.shapeId &&
+ !!ed &&
+ pendingPortConnection.arrowId === ed.id
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const bindObj: Record = {}
+ if (connectHere && pendingPortConnection) {
+ if (draggedEndpoint === 'tail') {
+ bindObj.tailShapeId =
+ pendingPortConnection.shapeId
+ bindObj.tailEdge =
+ pendingPortConnection.edge
+ } else {
+ bindObj.headShapeId =
+ pendingPortConnection.shapeId
+ bindObj.headEdge =
+ pendingPortConnection.edge
}
- )
+ if (ed) Object.assign(ed, bindObj)
+ } else if (
+ draggedEndpoint === 'tail' &&
+ ed &&
+ (ed.tailShapeId || ed.tailEdge)
+ ) {
+ bindObj.tailShapeId = null
+ bindObj.tailEdge = null
+ bindObj.tailPortIndex = 0
+ ed.tailShapeId = null
+ ed.tailEdge = null
+ ed.tailPortIndex = 0
+ } else if (
+ draggedEndpoint === 'head' &&
+ ed &&
+ (ed.headShapeId || ed.headEdge)
+ ) {
+ bindObj.headShapeId = null
+ bindObj.headEdge = null
+ bindObj.headPortIndex = 0
+ ed.headShapeId = null
+ ed.headEdge = null
+ ed.headPortIndex = 0
+ }
- updateToGlobalState(newShapeData, oldShapeData)
+ if (ed?.id && Object.keys(bindObj).length > 0) {
+ // One UPDATE_BULK carries vertices + binding so
+ // undo reverts the whole connect/detach in a
+ // single step.
+ updateComponentBulkPropertiesInLocalStore(
+ ed.id,
+ { ...vertexObj, ...bindObj }
+ )
+ } else {
+ oldShapeData = { ...shape.elementData }
+ newShapeData = Object.assign(
+ {},
+ shape.elementData,
+ { data: vertexObj }
+ )
+ updateToGlobalState(newShapeData, oldShapeData)
+ }
+
+ // Re-sort the fans on every port this release touched
+ // (the port just docked onto + any port the endpoint
+ // left), now the endpoint is firmly placed.
+ if (connectHere && pendingPortConnection)
+ recordPort(
+ pendingPortConnection.shapeId,
+ pendingPortConnection.edge
+ )
+ portsToRestack.forEach((p) =>
+ restackPortConnectors(p.shapeId, p.edge)
+ )
} else {
shape.elementData.x = shape.translation.x
shape.elementData.y = shape.translation.y
- oldShapeData = { ...shape.elementData }
+ // Dragging a connector's BODY moves both endpoints
+ // off their ports, so it detaches any bindings —
+ // otherwise a later shape move would snap the tail
+ // back. Clear them live and fold into the same
+ // position update so one undo reverts the whole move.
+ const ed = shape.elementData
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const arrowDetach: Record = {}
+ // Ports the body-drag pulled this connector off of,
+ // re-sorted afterwards so the remaining fans close up.
+ const bodyDetachPorts: {
+ shapeId: string
+ edge: string
+ }[] = []
+ if (ed.componentType === 'arrowLine') {
+ if (ed.tailShapeId || ed.tailEdge) {
+ if (ed.tailShapeId && ed.tailEdge)
+ bodyDetachPorts.push({
+ shapeId: ed.tailShapeId,
+ edge: ed.tailEdge,
+ })
+ arrowDetach.tailShapeId = null
+ arrowDetach.tailEdge = null
+ arrowDetach.tailPortIndex = 0
+ ed.tailShapeId = null
+ ed.tailEdge = null
+ ed.tailPortIndex = 0
+ }
+ if (ed.headShapeId || ed.headEdge) {
+ if (ed.headShapeId && ed.headEdge)
+ bodyDetachPorts.push({
+ shapeId: ed.headShapeId,
+ edge: ed.headEdge,
+ })
+ arrowDetach.headShapeId = null
+ arrowDetach.headEdge = null
+ arrowDetach.headPortIndex = 0
+ ed.headShapeId = null
+ ed.headEdge = null
+ ed.headPortIndex = 0
+ }
+ }
- newShapeData = Object.assign(
- {},
- shape.elementData,
- {
- data: {
+ if (Object.keys(arrowDetach).length > 0) {
+ // One UPDATE_BULK: position + binding clear.
+ updateComponentBulkPropertiesInLocalStore(
+ ed.id,
+ {
x: parseInt(shape.translation.x),
y: parseInt(shape.translation.y),
- },
+ ...arrowDetach,
+ }
+ )
+ } else {
+ oldShapeData = { ...shape.elementData }
+
+ newShapeData = Object.assign(
+ {},
+ shape.elementData,
+ {
+ data: {
+ x: parseInt(shape.translation.x),
+ y: parseInt(shape.translation.y),
+ },
+ }
+ )
+
+ if (
+ shape.elementData.componentType !==
+ 'groupobject'
+ ) {
+ updateToGlobalState(
+ newShapeData,
+ oldShapeData
+ )
}
- )
-
- if (
- shape.elementData.componentType !==
- 'groupobject'
- ) {
- updateToGlobalState(newShapeData, oldShapeData)
}
+
+ // Save the connectors that followed this shape so
+ // their new tail/head positions survive a reload.
+ persistBoundArrows(shape)
+
+ // Re-close the fans on any port this connector was
+ // just dragged off of.
+ bodyDetachPorts.forEach((p) =>
+ restackPortConnectors(p.shapeId, p.edge)
+ )
}
}
}
@@ -2248,6 +3198,12 @@ function addZUI(
el.style.pointerEvents = ''
})
+ // Radar is a drag-time affordance only — clear the glow on any release
+ // (covers the endpoint-drag path; the arrow-draw case clears it too).
+ // The pending snap was already consumed by the case handlers above.
+ selectionController.hidePortGlow()
+ pendingPortConnection = null
+
shape = {}
scenario = null
@@ -2276,9 +3232,10 @@ function addZUI(
}
function mousewheel(e: WheelEvent) {
- // Pan mode treats a plain wheel/scroll as zoom (no modifier needed);
- // otherwise the wheel pans the surface and shift/meta zooms.
- if (e.shiftKey === true || e.metaKey === true || isPanMode()) {
+ // Wheel/scroll zooms only with a modifier held — cmd (macOS), ctrl
+ // (Windows; also what trackpad pinch-zoom emits), or shift. A plain
+ // wheel/scroll always pans the surface, in pan mode and otherwise.
+ if (e.shiftKey === true || e.metaKey === true || e.ctrlKey === true) {
let dy =
((e as WheelEvent & { wheelDeltaY?: number }).wheelDeltaY ||
-e.deltaY) / 1000
@@ -2339,7 +3296,19 @@ function addZUI(
lastTouch.clientY
)
- if (!handleHit) {
+ // A multi-element group uses the older objectSelector path (not
+ // selectionController), so handleHit is false for it. Without this,
+ // the clearSelector below hides the group's dashed box the instant
+ // the drag begins on mobile. Skip the clear when the finger lands on
+ // the group object so its selector stays visible through the drag.
+ const groupHit = (
+ document.elementFromPoint(
+ lastTouch.clientX,
+ lastTouch.clientY
+ ) as Element | null
+ )?.closest('[data-label="groupobject_coord"]')
+
+ if (!handleHit && !groupHit) {
// Clear any previous selection before processing the new tap.
// On desktop this happens via focus/blur, but synthetic mouse events
// don't transfer browser focus on mobile, so we do it explicitly here
@@ -2631,6 +3600,8 @@ function addZUI(
selectionController.currentGroup ||
activeGroupRef.current ||
lastSelectedShape,
+ bringSelectionToFront: () =>
+ selectionController.bringSelectionToFront(),
}
}
@@ -2652,6 +3623,7 @@ const Canvas: React.FC = (props) => {
geoObjectsEnabled,
undoLastAction,
redoLastAction,
+ recordBatchToHistoryLog,
enableTextDrawMode,
createTextAtSurface,
} = useBoardContext()
@@ -2685,6 +3657,10 @@ const Canvas: React.FC = (props) => {
const [zuiInstance, setZuiInstance] = useState(null)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [onGroup, setOnGroup] = useState(null)
+ // Right-click / two-finger context menu position (null = closed).
+ const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number } | null>(
+ null
+ )
const [componentsToRender, setComponentsToRender] = useState<
React.ComponentType[]
>([])
@@ -2723,6 +3699,7 @@ const Canvas: React.FC = (props) => {
zuiInstanceRef,
boardId: props.boardId,
addToLocalComponentStore,
+ recordBatchToHistoryLog,
renderGroupRef,
})
@@ -2842,6 +3819,130 @@ const Canvas: React.FC = (props) => {
}
}, [])
+ // Handle for an in-flight z-order reconcile poll so a new store change can
+ // cancel a stale one instead of stacking rAF loops.
+ const zOrderPollRef = useRef(null)
+
+ // Deterministically re-sort the element groups inside two.scene.children by
+ // their store `position` (back→front). Element mounting is async (React.lazy
+ // + Suspense), so groups land in the scene in unpredictable order — this is
+ // the single source of truth that fixes the post-refresh z-order. Reads live
+ // state from refs (stale-closure rule); idempotent and safe to re-run.
+ const reconcileZOrder = useCallback(() => {
+ const two = twoJSInstance
+ const store = stateRefForComponentStore.current
+ if (!two?.scene || !store) return
+ const scene = two.scene
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const children = scene.children as any[]
+
+ // Skip while a transient group selection (marquee selector or the
+ // mounted groupobject) is active. Such a group is NOT reorderable
+ // (isReorderableElementChild excludes GROUP_COMPONENT) and its grouped
+ // originals are hidden (opacity 0) beneath it, so there is nothing
+ // useful to reorder. More importantly, the groupobject mounts its child
+ // elements asynchronously: sorting + two.update() mid-mount can detach
+ // the just-built group node (the scene.subtractions pitfall in
+ // CLAUDE.md), silently destroying the selection. The componentStore
+ // effect re-runs this poll once the group is dismissed and the
+ // originals re-render, so deterministic z-order is still restored then.
+ const hasActiveGroupSelection = children.some(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (c: any) =>
+ c?.elementData?.isGroupSelector === true ||
+ c?.elementData?.componentType === GROUP_COMPONENT
+ )
+ if (hasActiveGroupSelection) return
+
+ // Build the desired final order: element groups sorted by their store
+ // position (back→front) dropped back into the index slots they already
+ // occupy, while non-element children (selection box, previews) keep
+ // their slots. A rank map gives a *total* order — returning 0 for
+ // mixed pairs would break sort's transitivity contract and could
+ // mis-order elements separated by an overlay.
+ const sortedEls = children
+ .filter((c) => isReorderableElementChild(c, store))
+ .sort((a, b) =>
+ compareByZOrder(
+ store[a.elementData.id],
+ store[b.elementData.id]
+ )
+ )
+ let e = 0
+ const desired = children.map((c) =>
+ isReorderableElementChild(c, store) ? sortedEls[e++] : c
+ )
+ const rank = new Map()
+ desired.forEach((c, i) => rank.set(c, i))
+
+ // Collection.sort fires the 'order' event that flags the SVG renderer
+ // to physically reorder the nodes — a bare splice would NOT.
+ children.sort((a, b) => (rank.get(a) ?? 0) - (rank.get(b) ?? 0))
+
+ // The just-sorted elements may have buried the selection overlay — lift
+ // it back on top so the active selection box stays visible.
+ zuiInstanceRef.current?.bringSelectionToFront?.()
+
+ try {
+ two.update()
+ } catch (err) {
+ // A concurrent mount/cleanup could leave a stale subtraction queued;
+ // clear it so future updates don't keep retrying the broken op (see
+ // the scene.subtractions pitfall in CLAUDE.md).
+ console.warn('reconcileZOrder two.update failed', err)
+ scene.subtractions.length = 0
+ scene._flagSubtractions = false
+ }
+ }, [twoJSInstance])
+
+ // Element groups appear in the scene over several frames as their lazy
+ // chunks resolve. Poll a few frames, reconciling each tick, until every
+ // expected element group is present (or a frame cap as a safety stop).
+ const startZOrderReconcilePoll = useCallback(() => {
+ if (zOrderPollRef.current !== null) {
+ cancelAnimationFrame(zOrderPollRef.current)
+ zOrderPollRef.current = null
+ }
+ const two = twoJSInstance
+ const store = stateRefForComponentStore.current
+ if (!two?.scene || !store) return
+
+ // Expected = store records that are reorderable AND map to a known
+ // element module (others are skipped by handleSetComponentsToRender).
+ const expected = Object.values(store).filter(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ (r: any) =>
+ r?.componentType !== GROUP_COMPONENT &&
+ !!elementModules[
+ `./components/elements/${r?.componentType}.tsx`
+ ]
+ ).length
+
+ let frame = 0
+ const MAX_FRAMES = 90
+ const tick = (): void => {
+ zOrderPollRef.current = null
+ reconcileZOrder()
+ const present = (two.scene.children as unknown[]).filter((c) =>
+ isReorderableElementChild(c, store)
+ ).length
+ frame += 1
+ if (present < expected && frame < MAX_FRAMES) {
+ zOrderPollRef.current = requestAnimationFrame(tick)
+ }
+ }
+ zOrderPollRef.current = requestAnimationFrame(tick)
+ }, [twoJSInstance, reconcileZOrder])
+
+ useEffect(
+ () => () => {
+ if (zOrderPollRef.current !== null) {
+ cancelAnimationFrame(zOrderPollRef.current)
+ }
+ },
+ []
+ )
+
useEffect(() => {
stateRefForComponentStore.current = props.componentStore
if (twoJSInstance !== null && zuiInstance !== null) {
@@ -2858,6 +3959,9 @@ const Canvas: React.FC = (props) => {
if (Object.values(props.componentStore).length > 0 && twoJSInstance) {
handleSetComponentsToRender(Object.values(props.componentStore))
+ // Re-assert deterministic z-order once the (async) element mounts
+ // settle — this is what fixes the post-refresh ordering bug.
+ startZOrderReconcilePoll()
}
}, [props.componentStore])
@@ -2904,6 +4008,16 @@ const Canvas: React.FC = (props) => {
// on group select use effect hook
useEffect(() => {
if (onGroup) {
+ // Cancel any in-flight z-order reconcile poll started by an earlier
+ // store change. The groupobject mounts its children asynchronously;
+ // a reconcile tick that fires in the gap *before* the group node is
+ // in the scene (so reconcileZOrder's group guard can't see it yet)
+ // would sort + two.update() mid-mount and detach the just-built
+ // group (scene.subtractions pitfall), dropping the selection.
+ if (zOrderPollRef.current !== null) {
+ cancelAnimationFrame(zOrderPollRef.current)
+ zOrderPollRef.current = null
+ }
let e = onGroup
let x1Coord = e.left
let x2Coord = e.right
@@ -2919,8 +4033,15 @@ const Canvas: React.FC = (props) => {
const newChildren: any[] = []
const selectedComponentArr: string[] = []
+ // Iterate in global z-order (position asc = back→front) so the
+ // group's internal child order mirrors the canvas stacking. The
+ // group adds children in array order (groupobject.tsx) where
+ // index 0 is the backmost, so feeding them sorted keeps grouped
+ // elements visually consistent with their ungrouped positions.
const allComponentCoords = stateRefForComponentStore.current
- ? Object.values(stateRefForComponentStore.current)
+ ? Object.values(stateRefForComponentStore.current).sort(
+ compareByZOrder
+ )
: []
allComponentCoords.forEach((item) => {
if (
@@ -3008,12 +4129,14 @@ const Canvas: React.FC = (props) => {
newGroup.children = newChildren
- twoJSInstance.scene.children.forEach((child: any) => {
- if (selectedComponentArr.includes(child?.elementData?.id)) {
- child.opacity = 0
- twoJSInstance.update()
- }
- })
+ // Defer hiding the originals to the group's own assembly so the
+ // swap is atomic — the group hides exactly these ids in the SAME
+ // two.update() that paints its member copies, so there is never a
+ // blank frame between "originals hidden" and "group copies drawn"
+ // (the residual group-select flicker). Only the group-SELECT path
+ // sets this; paste leaves it unset (its clones have no on-canvas
+ // originals to hide).
+ newGroup.membersToHide = [...selectedComponentArr]
handleSetComponentsToRender([newGroup])
}
@@ -3067,6 +4190,175 @@ const Canvas: React.FC = (props) => {
}
}, [undoLastAction, redoLastAction, enableTextDrawMode])
+ // Export the active selection (marquee group or single element) as a
+ // standalone .svg. getSelectedGroup() unifies both selection mechanisms.
+ const exportActiveSelection = useCallback(async () => {
+ const group = zuiInstanceRef.current?.getSelectedGroup?.()
+ if (!group) return
+ try {
+ await exportSelectionAsSvg(group)
+ } catch (err) {
+ console.warn('Export selection as SVG failed', err)
+ }
+ }, [])
+
+ // Change the z-order of the currently-selected element. We move by *index*
+ // in the deterministic sorted order, then renumber every row to a dense,
+ // distinct position (0..n-1). The old approach swapped position *values*,
+ // which silently no-ops whenever neighbours tie — and most legacy rows share
+ // position 0 (position is only assigned to newly-created elements), so once a
+ // shape stepped into the 0-block it could never come back. Renumbering
+ // self-heals that degeneracy; only rows whose position actually changes are
+ // written, so steady-state single-step moves touch just the couple that
+ // shifted. The whole renumber is recorded as one BATCH = one undo step.
+ const reorderSelected = useCallback(
+ (op: 'front' | 'forward' | 'backward' | 'back') => {
+ const store = stateRefForComponentStore.current
+ if (!store) return
+ const id =
+ zuiInstanceRef.current?.getSelectedGroup?.()?.elementData?.id
+ if (!id || !store[id]) return
+
+ const sorted = Object.values(store)
+ .filter((r) => r.componentType !== GROUP_COMPONENT)
+ .sort(compareByZOrder)
+ const n = sorted.length
+ if (n === 0) return
+ const idx = sorted.findIndex((r) => r.id === id)
+ if (idx === -1) return
+
+ // Target slot for the selected element in the final back→front order.
+ const target =
+ op === 'front'
+ ? n - 1
+ : op === 'back'
+ ? 0
+ : op === 'forward'
+ ? idx + 1
+ : idx - 1 // backward
+ if (target < 0 || target > n - 1 || target === idx) return // at edge
+
+ // Rebuild the order with the selected element moved to `target`.
+ const newOrder = sorted.slice()
+ const [moved] = newOrder.splice(idx, 1)
+ if (!moved) return
+ newOrder.splice(target, 0, moved)
+
+ // Assign dense distinct positions; write + record only what changed.
+ const batch: HistoryEntry[] = []
+ newOrder.forEach((r, i) => {
+ const prev = Number.isFinite(r.position)
+ ? (r.position as number)
+ : 0
+ if (prev === i) return
+ updateComponentBulkPropertiesInLocalStore(
+ r.id,
+ { position: i },
+ true
+ )
+ batch.push({
+ action: 'UPDATE_BULK',
+ id: r.id,
+ prevProps: { position: prev },
+ bulkObj: { position: i },
+ })
+ })
+ if (batch.length > 0) recordBatchToHistoryLog(batch)
+
+ reconcileZOrder()
+ },
+ [
+ updateComponentBulkPropertiesInLocalStore,
+ recordBatchToHistoryLog,
+ reconcileZOrder,
+ ]
+ )
+
+ // Publish reorderSelected up to board.tsx so the properties toolbar can
+ // trigger it through BoardContext (see the reorderSelectedRef bridge).
+ useEffect(() => {
+ const ref = props.reorderSelectedRef
+ if (ref) ref.current = reorderSelected
+ return () => {
+ if (ref) ref.current = null
+ }
+ }, [props.reorderSelectedRef, reorderSelected])
+
+ // Right-click (mouse) and two-finger trackpad tap both fire the native
+ // 'contextmenu' event. Suppress the OS menu; if something is selected, open
+ // our menu at the cursor. Cmd/Ctrl+Shift+D triggers the same export.
+ useEffect(() => {
+ const root = document.getElementById('main-two-root')
+ if (!root) return
+
+ const onContextMenu = (evt: MouseEvent) => {
+ evt.preventDefault()
+ const group = zuiInstanceRef.current?.getSelectedGroup?.()
+ if (group) {
+ setCtxMenu({ x: evt.clientX, y: evt.clientY })
+ } else {
+ setCtxMenu(null)
+ }
+ }
+
+ const onExportKeyDown = (evt: KeyboardEvent) => {
+ if (
+ evt.key.toLowerCase() !== 'd' ||
+ !(evt.ctrlKey || evt.metaKey) ||
+ !evt.shiftKey
+ )
+ return
+ const tag = document.activeElement?.tagName
+ if (tag === 'INPUT' || tag === 'TEXTAREA') return
+ evt.preventDefault()
+ void exportActiveSelection()
+ }
+
+ // Reorder shortcuts:
+ // [ / ] → backward / forward (one step)
+ // ⌘[ / ⌘] → to back / to front
+ // We deliberately avoid ⌘⇧[/⌘⇧] here: on macOS Chrome those are the
+ // reserved "switch tab" accelerators (native app-menu key equivalents)
+ // and preventDefault() can't cancel them — the page never wins. Detect
+ // brackets via code OR key so non-US layouts resolve too. Only hijack
+ // the key when a shape is actually selected, so bare [ /] stay inert and
+ // ⌘[ /⌘] keep their browser history-nav behaviour on an empty selection.
+ const onReorderKeyDown = (evt: KeyboardEvent) => {
+ if (evt.shiftKey || evt.altKey) return
+ const isRight =
+ evt.code === 'BracketRight' ||
+ evt.key === ']' ||
+ evt.key === '}'
+ const isLeft =
+ evt.code === 'BracketLeft' || evt.key === '[' || evt.key === '{'
+ if (!isRight && !isLeft) return
+ const el = document.activeElement as HTMLElement | null
+ const tag = el?.tagName
+ if (tag === 'INPUT' || tag === 'TEXTAREA' || el?.isContentEditable)
+ return
+ if (!zuiInstanceRef.current?.getSelectedGroup?.()) return
+ evt.preventDefault()
+ const withCmd = evt.metaKey || evt.ctrlKey
+ const op: 'front' | 'forward' | 'backward' | 'back' = isRight
+ ? withCmd
+ ? 'front'
+ : 'forward'
+ : withCmd
+ ? 'back'
+ : 'backward'
+ reorderSelected(op)
+ }
+
+ root.addEventListener('contextmenu', onContextMenu)
+ window.addEventListener('keydown', onExportKeyDown)
+ window.addEventListener('keydown', onReorderKeyDown)
+ return () => {
+ root.removeEventListener('contextmenu', onContextMenu)
+ window.removeEventListener('keydown', onExportKeyDown)
+ window.removeEventListener('keydown', onReorderKeyDown)
+ }
+ }, [exportActiveSelection, reorderSelected])
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const setOnGroupHandler = (obj: any) => {
setOnGroup(obj)
@@ -3229,6 +4521,21 @@ const Canvas: React.FC = (props) => {
))}
+ {ctxMenu && (
+ setCtxMenu(null)}
+ onExportSvg={() => {
+ setCtxMenu(null)
+ void exportActiveSelection()
+ }}
+ onReorder={(op) => {
+ setCtxMenu(null)
+ reorderSelected(op)
+ }}
+ />
+ )}
)
}
diff --git a/src/routes.ts b/src/routes.ts
index cfe2acb..0dee2fd 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -5,4 +5,5 @@ export default {
about: '/about',
support: '/support',
privacy: '/privacy',
+ embeddable: '/embeddable-whiteboard',
}
diff --git a/src/schema/queries/index.ts b/src/schema/queries/index.ts
index 963657f..c495df4 100644
--- a/src/schema/queries/index.ts
+++ b/src/schema/queries/index.ts
@@ -49,6 +49,7 @@ export const GET_COMPONENTS_FOR_BOARD_QUERY: TypedDocumentNode<
query getComponentsForBoard($boardId: uuid = "") {
components: components_component(
where: { boardId: { _eq: $boardId } }
+ order_by: { position: asc }
) {
id
componentType
@@ -69,6 +70,7 @@ export const GET_COMPONENTS_FOR_BOARD_QUERY: TypedDocumentNode<
linewidth
strokeType
textColor
+ position
}
}
`
diff --git a/src/types/board.ts b/src/types/board.ts
index 4b0715a..4974741 100644
--- a/src/types/board.ts
+++ b/src/types/board.ts
@@ -46,6 +46,24 @@ export interface ComponentRecord {
isDummy: boolean | null
updatedBy: string | null
createdAt: number | null
+ /**
+ * Z-order key (back→front). Lower draws first (behind), higher draws on
+ * top — matching Two.js `scene.children` where index 0 is the back. New
+ * elements get `max(position)+1` (assigned in addToLocalComponentStore).
+ * Optional/nullable: legacy DB rows and directly-seeded records (e.g. the
+ * welcome sketch) may omit it; the z-order reconcile treats absent as 0.
+ */
+ position?: number | null
+ /**
+ * Connector binding (arrowLine only): the arrow's tail/head is pinned to a
+ * shape's edge port and re-anchors when that shape moves/resizes. Stores the
+ * bound shape's id and the edge (`n/e/s/w-resize`). Null/absent = free
+ * endpoint; cleared when the user manually drags that endpoint off.
+ */
+ tailShapeId?: string | null
+ tailEdge?: string | null
+ headShapeId?: string | null
+ headEdge?: string | null
}
export type ComponentStore = Record
@@ -205,8 +223,21 @@ export interface BoardContextValue {
stateRefForComponentStore: MutableRefObject
// Property application
- applyProperty: (name: string, value: unknown) => void
- applyGroupProperty: (name: string, value: unknown) => void
+ applyProperty: (
+ name: string,
+ value: unknown,
+ opts?: { preview?: boolean }
+ ) => void
+ applyGroupProperty: (
+ name: string,
+ value: unknown,
+ opts?: { preview?: boolean }
+ ) => void
+
+ // Z-order of the currently-selected element. Bridged up from newCanvas via
+ // a ref (the implementation lives there alongside reconcileZOrder); a no-op
+ // until Canvas has mounted and populated it.
+ reorderSelected: (op: 'front' | 'forward' | 'backward' | 'back') => void
// Element defaults (read sites: ElementPropertiesToolbar, primary sidebar, factories)
defaultFill: string
diff --git a/src/utils/applyGroupProperty.ts b/src/utils/applyGroupProperty.ts
index 6269728..797eefe 100644
--- a/src/utils/applyGroupProperty.ts
+++ b/src/utils/applyGroupProperty.ts
@@ -62,14 +62,10 @@ export interface ApplyGroupPropertyDeps {
}
const ACCEPTS: Record> = {
- fill: new Set([
- 'rectangle',
- 'circle',
- 'diamond',
- 'frame',
- 'newText',
- 'geoText',
- ]),
+ // Standalone text (newText/geoText) has no background-fill concept — its
+ // color is `textColor`. Excluded so a group fill leaves text untouched and
+ // never stamps a spurious `fill` onto a text row.
+ fill: new Set(['rectangle', 'circle', 'diamond', 'frame']),
stroke: new Set([
'rectangle',
'circle',
@@ -205,7 +201,11 @@ export function createApplyGroupProperty(deps: ApplyGroupPropertyDeps) {
return function applyGroupProperty(
propertyKey: GroupPropertyKey | string,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- value: any
+ value: any,
+ // `preview` applies the change to the live Two.js scene only, skipping
+ // the store/history writes — used for continuous slider drags. The final
+ // value commits normally (no preview) on release.
+ opts?: { preview?: boolean }
): void {
const {
selectedGroup,
@@ -323,11 +323,20 @@ export function createApplyGroupProperty(deps: ApplyGroupPropertyDeps) {
if (propertyKey === 'opacity') {
const sceneLeaf = sceneEl?.children?.[0]
if (sceneLeaf) sceneLeaf.opacity = value
+ // Dim embedded text alongside the shape leaf (rect/diamond/
+ // circle-with-text keep text in a separate text-layer node).
+ findTextNodesInside(sceneEl).forEach((t) => (t.opacity = value))
if (coreObj) {
coreObj.opacity = 1
const coreLeaf = coreObj?.children?.[0]
if (coreLeaf) coreLeaf.opacity = value
+ findTextNodesInside(coreObj).forEach(
+ (t) => (t.opacity = value)
+ )
}
+ // Live drag preview: scene only, defer the store/history write
+ // to the commit on release.
+ if (opts?.preview) return
const existingMeta = sceneEl?.elementData?.metadata
const safeMeta =
existingMeta && !Array.isArray(existingMeta)
diff --git a/src/utils/applyProperty.ts b/src/utils/applyProperty.ts
index 3772075..49d8c2f 100644
--- a/src/utils/applyProperty.ts
+++ b/src/utils/applyProperty.ts
@@ -73,7 +73,12 @@ export function createApplyProperty(deps: ApplyPropertyDeps) {
return function applyProperty(
propertyKey: PropertyKey | string,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
- value: any
+ value: any,
+ // `preview` applies the change to the live Two.js scene only, skipping
+ // the store/history/default writes — used for continuous slider drags so
+ // the element updates in real time without spamming the undo stack. The
+ // final value is committed normally (no preview) on release.
+ opts?: { preview?: boolean }
): void {
const {
selectedComponent,
@@ -88,23 +93,26 @@ export function createApplyProperty(deps: ApplyPropertyDeps) {
setDefaultStrokeColor,
setDefaultLinewidth,
setDefaultStrokeType,
- setDefaultOpacity,
setDefaultTextColor,
setDefaultTextSize,
setDefaultTextFontFamily,
} = deps
- // 1. Update the matching default.
- if (propertyKey === 'fill') setDefaultFill(value)
- else if (propertyKey === 'stroke') setDefaultStrokeColor(value)
- else if (propertyKey === 'linewidth') setDefaultLinewidth(value)
- else if (propertyKey === 'strokeType')
- setDefaultStrokeType(value === 'solid' ? null : value)
- else if (propertyKey === 'opacity') setDefaultOpacity(value)
- else if (propertyKey === 'textColor') setDefaultTextColor(value)
- else if (propertyKey === 'textSize') setDefaultTextSize(value)
- else if (propertyKey === 'textFontFamily')
- setDefaultTextFontFamily(value)
+ // 1. Update the matching default. Opacity is deliberately excluded — it
+ // is a per-element property only and must never persist as a default,
+ // otherwise drawing a new shape after dimming one (e.g. to 0%) would
+ // produce an invisible shape. Skipped entirely in preview mode.
+ if (!opts?.preview) {
+ if (propertyKey === 'fill') setDefaultFill(value)
+ else if (propertyKey === 'stroke') setDefaultStrokeColor(value)
+ else if (propertyKey === 'linewidth') setDefaultLinewidth(value)
+ else if (propertyKey === 'strokeType')
+ setDefaultStrokeType(value === 'solid' ? null : value)
+ else if (propertyKey === 'textColor') setDefaultTextColor(value)
+ else if (propertyKey === 'textSize') setDefaultTextSize(value)
+ else if (propertyKey === 'textFontFamily')
+ setDefaultTextFontFamily(value)
+ }
// 2. If nothing is selected, we're done.
if (!selectedComponent) return
@@ -232,13 +240,32 @@ export function createApplyProperty(deps: ApplyPropertyDeps) {
strokeType: dbValue,
})
} else if (propertyKey === 'opacity') {
- if (shapeData) shapeData.opacity = value
- const existingMeta = elementData?.metadata ?? {}
- const updatedMeta = { ...existingMeta, opacity: value }
- if (elementData) elementData.metadata = updatedMeta
- updateComponentBulkPropertiesInLocalStore(id, {
- metadata: updatedMeta,
- })
+ // Apply opacity at the GROUP level, not the shape leaf. The leaf
+ // path is double-referenced in group.children (the *-with-text
+ // components unshift the factory's already-added shape), which
+ // leaves leaf-level opacity flags unprocessed on render — so a leaf
+ // write only appears after the next full repaint (e.g. on deselect).
+ // The group's own opacity always repaints, and it uniformly dims the
+ // shape plus any embedded text-layer nodes in one shot.
+ const groupObj = selectedComponent?.group?.data
+ if (groupObj) groupObj.opacity = value
+ // Neutralize any leaf/text opacity so it doesn't compound with the
+ // group's (e.g. shapes mounted before this change carried leaf-level
+ // opacity).
+ if (shapeData) shapeData.opacity = 1
+ getShapeTextNodes(selectedComponent?.group?.data).forEach(
+ (n) => (n.opacity = 1)
+ )
+ // Preview = live drag: mutate the scene only, defer the
+ // store/history write to the commit on release.
+ if (!opts?.preview) {
+ const existingMeta = elementData?.metadata ?? {}
+ const updatedMeta = { ...existingMeta, opacity: value }
+ if (elementData) elementData.metadata = updatedMeta
+ updateComponentBulkPropertiesInLocalStore(id, {
+ metadata: updatedMeta,
+ })
+ }
}
twoJSInstance?.update()
diff --git a/src/utils/canvasUtils.ts b/src/utils/canvasUtils.ts
index 5c5d6cf..b24b95e 100644
--- a/src/utils/canvasUtils.ts
+++ b/src/utils/canvasUtils.ts
@@ -1,4 +1,7 @@
-import { SHAPE_DEFAULT_STROKE } from '../constants/misc'
+import {
+ SHAPE_DEFAULT_STROKE,
+ DEFAULT_TEXT_FONT_FAMILY,
+} from '../constants/misc'
import { generateUUID } from './misc'
import { lineHeightFor, measureTextWidth, type FontSpec } from './textLayout'
import { reflowTextForShape } from './shapeTextFit'
@@ -276,11 +279,125 @@ export function getShapeTextNodes(group: ShapeLike): ShapeLike[] {
const layer = findShapeTextLayer(group)
const source = layer ? layer.children : group?.children
if (!source) return []
- return source.filter(
+ // `source` is a Two.js `Children` collection (a custom Array subclass with
+ // no Symbol.species). Calling `.filter` on it directly routes through
+ // `ArraySpeciesCreate(new Children(0))`, whose constructor mishandles the
+ // numeric length and seeds the result with a spurious `0`. When there are
+ // no text nodes that `0` survives, so the filter returns `[0]` instead of
+ // `[]` — and any caller dereferencing the result (`n.opacity`, `n.fill`)
+ // throws `Cannot create property … on number '0'`. Copy to a plain array
+ // first so the filter is well-behaved and returns `[]` for text-less shapes.
+ return Array.from(source as ArrayLike).filter(
(c: ShapeLike) => typeof c?.value === 'string'
)
}
+/**
+ * Keep a transparent, full-block hit-area rectangle inside a STANDALONE text
+ * group, sized to the rendered multiline block (anchored left/middle at the
+ * group origin, matching the text layout).
+ *
+ * Why this exists: an SVG `` only catches pointer events on the glyphs
+ * themselves. For multiline text rendered as stacked `` nodes, the blank
+ * gaps between lines (and the padding around them) belong to no element, so a
+ * click there misses the group `` entirely and `resolveShapeFromPath` reads
+ * it as "empty canvas" — the text can't be selected as a whole. A
+ * transparent-but-painted (`rgba(0,0,0,0)`) rect spanning the block restores a
+ * solid hit target across the whole block. (This is what the old per-element
+ * `ObjectSelector.area` path used to provide before selection moved to the
+ * generic SelectionController.)
+ *
+ * Idempotent: creates the rect on first call (tagged via `_isTextHitArea`),
+ * resizes it on later calls. Added AFTER line 1 so `group.children[0]` stays
+ * the text node the SelectionController attaches to, and excluded from
+ * `getShapeTextNodes` (no string `value`).
+ */
+export function syncTextHitRect(two: TwoLike, group: ShapeLike): void {
+ const nodes = getShapeTextNodes(group)
+ if (!nodes.length) return
+ const size = nodes[0]?.size || 36
+ const lineH = lineHeightFor(size)
+ let maxW = 20
+ nodes.forEach((nd) => {
+ const w = measureTextWidth(nd?.value || '', {
+ family: nd?.family || DEFAULT_TEXT_FONT_FAMILY,
+ size: nd?.size || size,
+ weight: nd?.weight,
+ })
+ maxW = Math.max(maxW, w)
+ })
+ const blockH = Math.max(nodes.length * lineH, size)
+
+ let rect = Array.from(group.children as ArrayLike).find(
+ (c: ShapeLike) => c?._isTextHitArea
+ )
+ if (!rect) {
+ rect = two.makeRectangle(0, 0, maxW, blockH)
+ rect.fill = 'rgba(0,0,0,0)'
+ rect.noStroke()
+ rect._isTextHitArea = true
+ group.add(rect)
+ }
+ rect.width = maxW
+ rect.height = blockH
+ // Text is left-aligned at the group origin (extends right) and vertically
+ // centered on it, so center the rect at (width/2, 0).
+ rect.translation.set(maxW / 2, 0)
+}
+
+/**
+ * Lay out STANDALONE text (the `newText` kind) as a vertical stack of one
+ * Two.Text per hard-newline line, centered on the group origin. An SVG
+ * collapses `\n`, so multiline standalone text must be rendered as stacked
+ * nodes — newText's component does this internally, but the same layout is
+ * needed whenever the text is re-materialised outside that component (e.g. as a
+ * cloned member of a group selection). Reuses any existing line nodes (line 1 is
+ * the factory's text node), adds nodes for new lines, removes surplus ones.
+ *
+ * Keep in sync with newText.tsx's `syncMultilineLayout`.
+ */
+export function layoutStandaloneText(
+ two: TwoLike,
+ group: ShapeLike,
+ content: string,
+ size: number
+): void {
+ const nodes = getShapeTextNodes(group)
+ const first = nodes[0]
+ if (!first) return
+ const lines = (content || '').split('\n')
+ const n = lines.length
+ const lineH = lineHeightFor(size)
+
+ first.value = lines[0] ?? ''
+ first.size = size
+ first.leading = size
+ first.translation.set(0, (0 - (n - 1) / 2) * lineH)
+
+ const extra = nodes.slice(1)
+ for (let i = 1; i < n; i++) {
+ let node = extra[i - 1]
+ if (!node) {
+ node = two.makeText(lines[i] ?? '', 0, 0)
+ group.add(node)
+ }
+ node.value = lines[i] ?? ''
+ node.fill = first.fill
+ node.size = size
+ node.leading = size
+ node.family = first.family
+ node.alignment = first.alignment
+ node.baseline = first.baseline
+ node.opacity = first.opacity
+ node.translation.set(0, (i - (n - 1) / 2) * lineH)
+ }
+
+ if (extra.length > n - 1) {
+ const surplus = extra.slice(n - 1)
+ if (surplus.length) group.remove(surplus)
+ }
+}
+
/**
* Render `lines` as a vertical stack of Two.Text nodes inside `group`'s text
* layer, creating the layer on first use. Existing line nodes are reused
@@ -360,7 +477,8 @@ export function shapeTextStyleFromMeta(meta: ShapeLike): {
style: ShapeTextStyle
font: FontSpec
} {
- const family = meta?.textFontFamily || meta?.textFamily || 'Caveat'
+ const family =
+ meta?.textFontFamily || meta?.textFamily || DEFAULT_TEXT_FONT_FAMILY
const size = meta?.textFontSize || 24
const weight = meta?.textWeight || 'normal'
return {
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index da16106..7969917 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -88,6 +88,14 @@ export const allColorShades: string[] = [
'#C0B6F2',
'#EAE6FF',
+ // Brown — 6 shades, light → dark.
+ '#EAD9C5',
+ '#D2B089',
+ '#B5824E',
+ '#8C5A2B',
+ '#5E3A1A',
+ '#3D2410',
+
'#172B4D',
'#253858',
'#42526E',
@@ -109,15 +117,15 @@ export const essentialShades: string[] = [
'#0065FF',
]
-// Fill picker only — transparent ("no fill") first, replacing the green that
-// the shared essentialShades keeps for stroke/text.
+// Fill picker only — transparent ("no fill") and white kept, followed by light
+// pastel shades suited to fills (vs. the saturated stroke/text essentialShades).
export const fillEssentialShades: string[] = [
TRANSPARENT_FILL,
'#FFFFFF',
- '#000000',
- '#FF5630',
- '#FFAB00',
- '#0065FF',
+ '#FFBDAD',
+ '#FFF0B3',
+ '#ABF5D1',
+ '#B3D4FF',
]
export interface DrawerElement {
@@ -133,7 +141,6 @@ export interface PrimaryElement {
hasDrawer: boolean
noAction: boolean
drawerData: DrawerElement[]
- mobileOnly?: boolean
}
export interface PrimarySection {
@@ -160,7 +167,6 @@ export const staticPrimaryElementData: PrimarySection[] = [
hasDrawer: false,
noAction: true,
drawerData: [],
- mobileOnly: true,
},
{
elementName: 'shapes',
diff --git a/src/utils/exportSelectionAsSvg.ts b/src/utils/exportSelectionAsSvg.ts
new file mode 100644
index 0000000..5f8e49e
--- /dev/null
+++ b/src/utils/exportSelectionAsSvg.ts
@@ -0,0 +1,103 @@
+// Export the currently-selected element(s) as a standalone, tightly-cropped
+// .svg file with a transparent background and no watermark.
+//
+// Two.js runs the SVG renderer, so the selected group already has a live
+// rendered node at group._renderer.elem. We clone that , drop it inside a
+// fresh