@weasel-js/core 1.10.1 → 1.11.0

package/dist/features/modes/modeLayers.js

@@ -1,113 +1,139 @@
-import { viewToTransform as e } from "../../core/viewport/view.js";
-import { worldToScreen as t } from "../../core/viewport/viewTransform.js";
+import { viewToTransform } from "../../core/viewport/view.js";
+import { worldToScreen } from "../../core/viewport/viewTransform.js";
+
 //#region src/features/modes/modeLayers.ts
-var n = .12;
-function r(r) {
-	let { registry: i } = r;
+var DEFAULT_INTENSITY = .12;
+/**
+* A screen-space layer painting the active mode's `WorkspaceVisual`: nothing in
+* a mode without a tint, otherwise a wash at the mode's intensity, bottom-up or
+* top-down when the mode names a gradient. It subscribes to the registry, so a
+* mode switch repaints it.
+*/
+function workspaceTintLayer(opts) {
+	const { registry } = opts;
 	return {
-		id: r.id ?? "mode-tint",
-		label: r.label ?? "Mode tint",
+		id: opts.id ?? "mode-tint",
+		label: opts.label ?? "Mode tint",
 		space: "screen",
-		subscribe: i.subscribe,
-		draw: (a, o, s) => {
-			let c = i.current().workspace, l = c?.tint;
-			if (!l || l === "transparent") return [];
-			let u = r.intensity ?? c.intensity ?? n, { width: d, height: f } = s, p = (e, t, n, r, i, a) => ({
+		subscribe: registry.subscribe,
+		draw: (_data, view, dims) => {
+			const ws = registry.current().workspace;
+			const tint = ws?.tint;
+			if (!tint || tint === "transparent") return [];
+			const opacity = opts.intensity ?? ws.intensity ?? DEFAULT_INTENSITY;
+			const { width: W, height: H } = dims;
+			const strip = (x, y, width, height, from, to) => ({
 				kind: "path",
 				path: {
 					kind: "rect",
-					x: e,
-					y: t,
-					width: n,
-					height: r
+					x,
+					y,
+					width,
+					height
 				},
-				fill: { paint: c.gradient ? {
+				fill: { paint: ws.gradient ? {
 					kind: "linear-gradient",
-					from: i,
-					to: a,
+					from,
+					to,
 					stops: [{
 						offset: 0,
-						color: l
+						color: tint
 					}, {
 						offset: 1,
 						color: "transparent"
 					}],
-					opacity: u
+					opacity
 				} : {
 					kind: "solid",
-					color: l,
-					opacity: u
+					color: tint,
+					opacity
 				} }
-			}), m = () => [c.gradient === "top-down" ? p(0, 0, d, f, {
+			});
+			const whole = () => [ws.gradient === "top-down" ? strip(0, 0, W, H, {
 				x: 0,
 				y: 0
 			}, {
 				x: 0,
-				y: f
-			}) : p(0, 0, d, f, {
+				y: H
+			}) : strip(0, 0, W, H, {
 				x: 0,
-				y: f
+				y: H
 			}, {
 				x: 0,
 				y: 0
-			})], h = r.page?.();
-			if (!h) return m();
-			let g = e(o), [_, v] = t(h.x, h.y, g), [y, b] = t(h.x + h.width, h.y + h.height, g), x = Math.max(0, Math.min(_, y)), S = Math.max(0, Math.min(v, b)), C = Math.min(d, Math.max(_, y)), w = Math.min(f, Math.max(v, b));
-			if (C <= x || w <= S) return [{
+			})];
+			const page = opts.page?.();
+			if (!page) return whole();
+			const t = viewToTransform(view);
+			const [sx0, sy0] = worldToScreen(page.x, page.y, t);
+			const [sx1, sy1] = worldToScreen(page.x + page.width, page.y + page.height, t);
+			const pl = Math.max(0, Math.min(sx0, sx1));
+			const pt = Math.max(0, Math.min(sy0, sy1));
+			const pr = Math.min(W, Math.max(sx0, sx1));
+			const pb = Math.min(H, Math.max(sy0, sy1));
+			if (pr <= pl || pb <= pt) return [{
 				kind: "path",
 				path: {
 					kind: "rect",
 					x: 0,
 					y: 0,
-					width: d,
-					height: f
+					width: W,
+					height: H
 				},
 				fill: { paint: {
 					kind: "solid",
-					color: l,
-					opacity: u
+					color: tint,
+					opacity
 				} }
 			}];
-			let T = [], E = (e, t, n, r, i, a) => {
-				n > 0 && r > 0 && T.push(p(e, t, n, r, i, a));
+			const cmds = [];
+			const push = (x, y, w, h, from, to) => {
+				if (w > 0 && h > 0) cmds.push(strip(x, y, w, h, from, to));
 			};
-			return E(0, 0, d, S, {
+			push(0, 0, W, pt, {
 				x: 0,
 				y: 0
 			}, {
 				x: 0,
-				y: S
-			}), E(0, w, d, f - w, {
+				y: pt
+			});
+			push(0, pb, W, H - pb, {
 				x: 0,
-				y: f
+				y: H
 			}, {
 				x: 0,
-				y: w
-			}), E(0, S, x, w - S, {
+				y: pb
+			});
+			push(0, pt, pl, pb - pt, {
 				x: 0,
 				y: 0
 			}, {
-				x,
+				x: pl,
 				y: 0
-			}), E(C, S, d - C, w - S, {
-				x: d,
+			});
+			push(pr, pt, W - pr, pb - pt, {
+				x: W,
 				y: 0
 			}, {
-				x: C,
+				x: pr,
 				y: 0
-			}), T;
+			});
+			return cmds;
 		}
 	};
 }
-function i(e, t = {}) {
+/** A world-space layer drawing a `ModeDecorations`' active painter. It
+*  subscribes to the decorations, so a mode switch or a new painter repaints
+*  it. */
+function modeDecorationLayer(decorations, opts = {}) {
 	return {
-		id: t.id ?? "mode-decorations",
-		label: t.label ?? "Mode decorations",
-		subscribe: e.subscribe,
-		draw: () => e.paint()
+		id: opts.id ?? "mode-decorations",
+		label: opts.label ?? "Mode decorations",
+		subscribe: decorations.subscribe,
+		draw: () => decorations.paint()
 	};
 }
-//#endregion
-export { i as modeDecorationLayer, r as workspaceTintLayer };
 
+//#endregion
+export { modeDecorationLayer, workspaceTintLayer };
 //# sourceMappingURL=modeLayers.js.map

package/dist/features/modes/modeLayers.js.map

@@ -1 +1 @@
-{"version":3,"file":"modeLayers.js","names":["DEFAULT_INTENSITY","workspaceTintLayer","opts","registry","ws","tint","opacity","W","H","dims","strip","whole","page","t","viewToTransform","view","sx0","sy0","worldToScreen","sx1","sy1","pl","pt","pr","pb","cmds","push","w","h","x","y","from","to","modeDecorationLayer","decorations"],"sources":["../../../src/features/modes/modeLayers.ts"],"sourcesContent":["import type { Rect } from '@weasel-js/geom';\nimport type { ModeDecorations, ModeRegistry } from '@weasel-js/modes';\nimport type { DrawCommand } from '@weasel-js/renderer';\nimport type { RenderLayer } from 'core/layers/render';\nimport { viewToTransform } from 'core/viewport/view';\nimport { worldToScreen } from 'core/viewport/viewTransform';\n\n/** Options for {@link workspaceTintLayer}. */\nexport interface WorkspaceTintLayerOptions {\n  registry: ModeRegistry;\n  /** The page, in world coordinates. When given, the tint covers only the\n   *  workspace around it, each strip fading toward the page edge if the mode\n   *  names a gradient. Without it the tint covers the whole canvas. */\n  page?: () => Rect | null;\n  /** Opacity for every mode's tint, in place of its `workspace.intensity`. */\n  intensity?: number;\n  id?: string;\n  label?: string;\n}\n\nconst DEFAULT_INTENSITY = 0.12;\n\n/**\n * A screen-space layer painting the active mode's `WorkspaceVisual`: nothing in\n * a mode without a tint, otherwise a wash at the mode's intensity, bottom-up or\n * top-down when the mode names a gradient. It subscribes to the registry, so a\n * mode switch repaints it.\n */\nexport function workspaceTintLayer(opts: WorkspaceTintLayerOptions): RenderLayer<unknown> {\n  const { registry } = opts;\n  return {\n    id: opts.id ?? 'mode-tint',\n    label: opts.label ?? 'Mode tint',\n    space: 'screen',\n    subscribe: registry.subscribe,\n    draw: (_data, view, dims) => {\n      const ws = registry.current().workspace;\n      const tint = ws?.tint;\n      if (!tint || tint === 'transparent') return [];\n      const opacity = opts.intensity ?? ws.intensity ?? DEFAULT_INTENSITY;\n      const { width: W, height: H } = dims;\n\n      const strip = (\n        x: number, y: number, width: number, height: number,\n        from: { x: number; y: number }, to: { x: number; y: number },\n      ): DrawCommand => ({\n        kind: 'path',\n        path: { kind: 'rect', x, y, width, height },\n        fill: { paint: ws.gradient\n          ? { kind: 'linear-gradient', from, to, stops: [{ offset: 0, color: tint }, { offset: 1, color: 'transparent' }], opacity }\n          : { kind: 'solid', color: tint, opacity } },\n      });\n\n      const whole = (): DrawCommand[] => [\n        ws.gradient === 'top-down'\n          ? strip(0, 0, W, H, { x: 0, y: 0 }, { x: 0, y: H })\n          : strip(0, 0, W, H, { x: 0, y: H }, { x: 0, y: 0 }),\n      ];\n\n      const page = opts.page?.();\n      if (!page) return whole();\n\n      const t = viewToTransform(view);\n      const [sx0, sy0] = worldToScreen(page.x, page.y, t);\n      const [sx1, sy1] = worldToScreen(page.x + page.width, page.y + page.height, t);\n      const pl = Math.max(0, Math.min(sx0, sx1));\n      const pt = Math.max(0, Math.min(sy0, sy1));\n      const pr = Math.min(W, Math.max(sx0, sx1));\n      const pb = Math.min(H, Math.max(sy0, sy1));\n      if (pr <= pl || pb <= pt) {\n        return [{ kind: 'path', path: { kind: 'rect', x: 0, y: 0, width: W, height: H }, fill: { paint: { kind: 'solid', color: tint, opacity } } }];\n      }\n\n      const cmds: DrawCommand[] = [];\n      const push = (\n        x: number, y: number, w: number, h: number,\n        from: { x: number; y: number }, to: { x: number; y: number },\n      ): void => { if (w > 0 && h > 0) cmds.push(strip(x, y, w, h, from, to)); };\n      push(0, 0, W, pt, { x: 0, y: 0 }, { x: 0, y: pt });\n      push(0, pb, W, H - pb, { x: 0, y: H }, { x: 0, y: pb });\n      push(0, pt, pl, pb - pt, { x: 0, y: 0 }, { x: pl, y: 0 });\n      push(pr, pt, W - pr, pb - pt, { x: W, y: 0 }, { x: pr, y: 0 });\n      return cmds;\n    },\n  };\n}\n\n/** A world-space layer drawing a `ModeDecorations`' active painter. It\n *  subscribes to the decorations, so a mode switch or a new painter repaints\n *  it. */\nexport function modeDecorationLayer(\n  decorations: ModeDecorations,\n  opts: { id?: string; label?: string } = {},\n): RenderLayer<unknown> {\n  return {\n    id: opts.id ?? 'mode-decorations',\n    label: opts.label ?? 'Mode decorations',\n    subscribe: decorations.subscribe,\n    draw: () => decorations.paint() as DrawCommand[],\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"modeLayers.js","names":[],"sources":["../../../src/features/modes/modeLayers.ts"],"sourcesContent":["import type { Rect } from '@weasel-js/geom';\nimport type { ModeDecorations, ModeRegistry } from '@weasel-js/modes';\nimport type { DrawCommand } from '@weasel-js/renderer';\nimport type { RenderLayer } from 'core/layers/render';\nimport { viewToTransform } from 'core/viewport/view';\nimport { worldToScreen } from 'core/viewport/viewTransform';\n\n/** Options for {@link workspaceTintLayer}. */\nexport interface WorkspaceTintLayerOptions {\n  registry: ModeRegistry;\n  /** The page, in world coordinates. When given, the tint covers only the\n   *  workspace around it, each strip fading toward the page edge if the mode\n   *  names a gradient. Without it the tint covers the whole canvas. */\n  page?: () => Rect | null;\n  /** Opacity for every mode's tint, in place of its `workspace.intensity`. */\n  intensity?: number;\n  id?: string;\n  label?: string;\n}\n\nconst DEFAULT_INTENSITY = 0.12;\n\n/**\n * A screen-space layer painting the active mode's `WorkspaceVisual`: nothing in\n * a mode without a tint, otherwise a wash at the mode's intensity, bottom-up or\n * top-down when the mode names a gradient. It subscribes to the registry, so a\n * mode switch repaints it.\n */\nexport function workspaceTintLayer(opts: WorkspaceTintLayerOptions): RenderLayer<unknown> {\n  const { registry } = opts;\n  return {\n    id: opts.id ?? 'mode-tint',\n    label: opts.label ?? 'Mode tint',\n    space: 'screen',\n    subscribe: registry.subscribe,\n    draw: (_data, view, dims) => {\n      const ws = registry.current().workspace;\n      const tint = ws?.tint;\n      if (!tint || tint === 'transparent') return [];\n      const opacity = opts.intensity ?? ws.intensity ?? DEFAULT_INTENSITY;\n      const { width: W, height: H } = dims;\n\n      const strip = (\n        x: number, y: number, width: number, height: number,\n        from: { x: number; y: number }, to: { x: number; y: number },\n      ): DrawCommand => ({\n        kind: 'path',\n        path: { kind: 'rect', x, y, width, height },\n        fill: { paint: ws.gradient\n          ? { kind: 'linear-gradient', from, to, stops: [{ offset: 0, color: tint }, { offset: 1, color: 'transparent' }], opacity }\n          : { kind: 'solid', color: tint, opacity } },\n      });\n\n      const whole = (): DrawCommand[] => [\n        ws.gradient === 'top-down'\n          ? strip(0, 0, W, H, { x: 0, y: 0 }, { x: 0, y: H })\n          : strip(0, 0, W, H, { x: 0, y: H }, { x: 0, y: 0 }),\n      ];\n\n      const page = opts.page?.();\n      if (!page) return whole();\n\n      const t = viewToTransform(view);\n      const [sx0, sy0] = worldToScreen(page.x, page.y, t);\n      const [sx1, sy1] = worldToScreen(page.x + page.width, page.y + page.height, t);\n      const pl = Math.max(0, Math.min(sx0, sx1));\n      const pt = Math.max(0, Math.min(sy0, sy1));\n      const pr = Math.min(W, Math.max(sx0, sx1));\n      const pb = Math.min(H, Math.max(sy0, sy1));\n      if (pr <= pl || pb <= pt) {\n        return [{ kind: 'path', path: { kind: 'rect', x: 0, y: 0, width: W, height: H }, fill: { paint: { kind: 'solid', color: tint, opacity } } }];\n      }\n\n      const cmds: DrawCommand[] = [];\n      const push = (\n        x: number, y: number, w: number, h: number,\n        from: { x: number; y: number }, to: { x: number; y: number },\n      ): void => { if (w > 0 && h > 0) cmds.push(strip(x, y, w, h, from, to)); };\n      push(0, 0, W, pt, { x: 0, y: 0 }, { x: 0, y: pt });\n      push(0, pb, W, H - pb, { x: 0, y: H }, { x: 0, y: pb });\n      push(0, pt, pl, pb - pt, { x: 0, y: 0 }, { x: pl, y: 0 });\n      push(pr, pt, W - pr, pb - pt, { x: W, y: 0 }, { x: pr, y: 0 });\n      return cmds;\n    },\n  };\n}\n\n/** A world-space layer drawing a `ModeDecorations`' active painter. It\n *  subscribes to the decorations, so a mode switch or a new painter repaints\n *  it. */\nexport function modeDecorationLayer(\n  decorations: ModeDecorations,\n  opts: { id?: string; label?: string } = {},\n): RenderLayer<unknown> {\n  return {\n    id: opts.id ?? 'mode-decorations',\n    label: opts.label ?? 'Mode decorations',\n    subscribe: decorations.subscribe,\n    draw: () => decorations.paint() as DrawCommand[],\n  };\n}\n"],"mappings":"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"}

package/dist/features/modes/modeTriggers.js

@@ -0,0 +1,66 @@
+import { ActionDisabledReason } from "@weasel-js/routing";
+import { modeLabel } from "@weasel-js/modes";
+
+//#region src/features/modes/modeTriggers.ts
+/**
+* The registry's double-click entries as an always-on contribution: for each mode whose
+* `entry.trigger` is `'double-click-target'`, one action bound to a double-click on each routing
+* kind its `entry.targets` names, entering the mode on the node double-clicked. Install it with
+* `<SceneCanvas ambient>`, beside `modeShortcuts`.
+*
+* The target is the node the dispatcher classified the double-click on (the `hitAt` dep's
+* `doubleClick`, else its hit), the one the binding's `kind:` target matched: a double-click on
+* a grouped member names its outermost group inside `<SceneCanvas isolatedGroup>`. The action is live in every mode, the target mode
+* included, so a double-click on another node moves a mode onto it; `canEnter` and `enter`
+* decide what a switch from the current mode means.
+*
+* The bindings ride the ambient tier: a tool that claims the double-click itself, the pen
+* finishing a stroke, keeps it.
+*/
+function modeTriggers(registry, handlers) {
+	const actions = [];
+	const { enter } = handlers;
+	if (enter) for (const mode of registry.list()) {
+		const targets = mode.entry?.trigger === "double-click-target" ? mode.entry.targets ?? [] : [];
+		if (targets.length > 0) actions.push(triggerAction(mode, targets, enter, handlers.canEnter));
+	}
+	return {
+		id: "modes.triggers",
+		eligibility: { always: true },
+		actions
+	};
+}
+function triggerAction(mode, targets, enter, canEnter) {
+	const targetAt = (deps, at) => {
+		if (!at) return null;
+		const hit = deps?.hitAt?.(at);
+		const id = (hit?.doubleClick ?? hit)?.id;
+		if (id === void 0) return null;
+		return canEnter?.(mode.id, id) === false ? null : id;
+	};
+	return {
+		id: `mode.${mode.id}.trigger`,
+		label: `Enter ${modeLabel(mode)}`,
+		defaultBinding: targets.map((kind) => ({
+			kind: "doubleClick",
+			target: `kind:${kind}`
+		})),
+		requires: ["hitAt"],
+		enabled: (deps, at) => targetAt(deps, at) !== null ? true : ActionDisabledReason.NotApplicable,
+		invoker: {
+			timing: "immediate",
+			run: (deps, params) => {
+				const x = params?.worldX, y = params?.worldY;
+				const id = typeof x === "number" && typeof y === "number" ? targetAt(deps, {
+					x,
+					y
+				}) : null;
+				if (id !== null) enter(mode.id, id);
+			}
+		}
+	};
+}
+
+//#endregion
+export { modeTriggers };
+//# sourceMappingURL=modeTriggers.js.map

package/dist/features/modes/modeTriggers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modeTriggers.js","names":[],"sources":["../../../src/features/modes/modeTriggers.ts"],"sourcesContent":["import { modeLabel, type ModeDefinition, type ModeRegistry } from '@weasel-js/modes';\nimport { ActionDisabledReason, type Action, type ActionDeps, type Contribution } from '@weasel-js/routing';\n\n/** What a mode's double-click trigger does. */\nexport interface ModeTriggerHandlers {\n  /** Enter mode `id` on the node `targetId`. Without it nothing is bound. */\n  enter?: (id: string, targetId: string) => void;\n  /**\n   * Whether mode `id` can be entered on `targetId` now. Where it says no the double-click falls\n   * through to the next binding on it, so a canvas action that already enters the mode on some\n   * of those nodes keeps them: `enterPathEdit` on a path with anchors, say. Default yes.\n   */\n  canEnter?: (id: string, targetId: string) => boolean;\n}\n\n/**\n * The registry's double-click entries as an always-on contribution: for each mode whose\n * `entry.trigger` is `'double-click-target'`, one action bound to a double-click on each routing\n * kind its `entry.targets` names, entering the mode on the node double-clicked. Install it with\n * `<SceneCanvas ambient>`, beside `modeShortcuts`.\n *\n * The target is the node the dispatcher classified the double-click on (the `hitAt` dep's\n * `doubleClick`, else its hit), the one the binding's `kind:` target matched: a double-click on\n * a grouped member names its outermost group inside `<SceneCanvas isolatedGroup>`. The action is live in every mode, the target mode\n * included, so a double-click on another node moves a mode onto it; `canEnter` and `enter`\n * decide what a switch from the current mode means.\n *\n * The bindings ride the ambient tier: a tool that claims the double-click itself, the pen\n * finishing a stroke, keeps it.\n */\nexport function modeTriggers(registry: ModeRegistry, handlers: ModeTriggerHandlers): Contribution<never> {\n  const actions: Action[] = [];\n  const { enter } = handlers;\n  if (enter) {\n    for (const mode of registry.list()) {\n      const targets = mode.entry?.trigger === 'double-click-target' ? mode.entry.targets ?? [] : [];\n      if (targets.length > 0) actions.push(triggerAction(mode, targets, enter, handlers.canEnter));\n    }\n  }\n  return { id: 'modes.triggers', eligibility: { always: true }, actions };\n}\n\nfunction triggerAction(\n  mode: ModeDefinition,\n  targets: readonly string[],\n  enter: (id: string, targetId: string) => void,\n  canEnter: ModeTriggerHandlers['canEnter'],\n): Action {\n  const targetAt = (deps: ActionDeps | undefined, at: { x: number; y: number } | undefined): string | null => {\n    if (!at) return null;\n    const hit = deps?.hitAt?.(at);\n    const id = (hit?.doubleClick ?? hit)?.id;\n    if (id === undefined) return null;\n    return canEnter?.(mode.id, id) === false ? null : id;\n  };\n  return {\n    id: `mode.${mode.id}.trigger`,\n    label: `Enter ${modeLabel(mode)}`,\n    defaultBinding: targets.map((kind) => ({ kind: 'doubleClick' as const, target: `kind:${kind}` as const })),\n    requires: ['hitAt'],\n    enabled: (deps, at) => (targetAt(deps, at) !== null ? true : ActionDisabledReason.NotApplicable),\n    invoker: {\n      timing: 'immediate',\n      run: (deps, params) => {\n        const x = params?.worldX, y = params?.worldY;\n        const id = typeof x === 'number' && typeof y === 'number' ? targetAt(deps, { x, y }) : null;\n        if (id !== null) enter(mode.id, id);\n      },\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,aAAa,UAAwB,UAAoD;CACvG,MAAM,UAAoB,CAAC;CAC3B,MAAM,EAAE,UAAU;CAClB,IAAI,OACF,KAAK,MAAM,QAAQ,SAAS,KAAK,GAAG;EAClC,MAAM,UAAU,KAAK,OAAO,YAAY,wBAAwB,KAAK,MAAM,WAAW,CAAC,IAAI,CAAC;EAC5F,IAAI,QAAQ,SAAS,GAAG,QAAQ,KAAK,cAAc,MAAM,SAAS,OAAO,SAAS,QAAQ,CAAC;CAC7F;CAEF,OAAO;EAAE,IAAI;EAAkB,aAAa,EAAE,QAAQ,KAAK;EAAG;CAAQ;AACxE;AAEA,SAAS,cACP,MACA,SACA,OACA,UACQ;CACR,MAAM,YAAY,MAA8B,OAA4D;EAC1G,IAAI,CAAC,IAAI,OAAO;EAChB,MAAM,MAAM,MAAM,QAAQ,EAAE;EAC5B,MAAM,MAAM,KAAK,eAAe,IAAA,EAAM;EACtC,IAAI,OAAO,QAAW,OAAO;EAC7B,OAAO,WAAW,KAAK,IAAI,EAAE,MAAM,QAAQ,OAAO;CACpD;CACA,OAAO;EACL,IAAI,QAAQ,KAAK,GAAG;EACpB,OAAO,SAAS,UAAU,IAAI;EAC9B,gBAAgB,QAAQ,KAAK,UAAU;GAAE,MAAM;GAAwB,QAAQ,QAAQ;EAAgB,EAAE;EACzG,UAAU,CAAC,OAAO;EAClB,UAAU,MAAM,OAAQ,SAAS,MAAM,EAAE,MAAM,OAAO,OAAO,qBAAqB;EAClF,SAAS;GACP,QAAQ;GACR,MAAM,MAAM,WAAW;IACrB,MAAM,IAAI,QAAQ,QAAQ,IAAI,QAAQ;IACtC,MAAM,KAAK,OAAO,MAAM,YAAY,OAAO,MAAM,WAAW,SAAS,MAAM;KAAE;KAAG;IAAE,CAAC,IAAI;IACvF,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,EAAE;GACpC;EACF;CACF;AACF"}

package/dist/features/pathEffects/index.js

@@ -0,0 +1,35 @@
+import { PATH_EFFECT, createPathEffectDerivations } from "../../core/scene/pathEffects/derive.js";
+import { readEffectSource } from "./readSource.js";
+
+//#region src/features/pathEffects/index.ts
+/**
+* The kit's path effects, wired to its painters: the derivations a scene
+* holding blends, bends and repeats registers, and the registry helper that
+* registers them.
+*/
+/** The kit's path-effect derivations, reading sources through the painter
+*  registry. One pair for every scene, so a saved node finds them by key. */
+var PATH_EFFECT_DERIVATIONS = createPathEffectDerivations(readEffectSource);
+/**
+* `registry` with the path-effect derivations under `kit:pathEffect`, for
+* `createScene({ registry })` or `sceneFromJSON(json, { registry })`. A scene
+* built without them cannot hold a path effect: the actions that make one are
+* disabled there, and a saved one does not load.
+*/
+function withPathEffectsRegistry(registry = {}) {
+	return {
+		...registry,
+		derivePath: {
+			[PATH_EFFECT]: PATH_EFFECT_DERIVATIONS.derivePath,
+			...registry.derivePath
+		},
+		derivePose: {
+			[PATH_EFFECT]: PATH_EFFECT_DERIVATIONS.derivePose,
+			...registry.derivePose
+		}
+	};
+}
+
+//#endregion
+export { PATH_EFFECT_DERIVATIONS, readEffectSource, withPathEffectsRegistry };
+//# sourceMappingURL=index.js.map

package/dist/features/pathEffects/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/features/pathEffects/index.ts"],"sourcesContent":["/**\n * The kit's path effects, wired to its painters: the derivations a scene\n * holding blends, bends and repeats registers, and the registry helper that\n * registers them.\n */\nimport {\n  createPathEffectDerivations, PATH_EFFECT, type PathEffectDerivations,\n} from 'core/scene/pathEffects/derive';\nimport type { SceneRegistry } from 'core/scene/types';\nimport { readEffectSource } from './readSource';\n\nexport { readEffectSource };\n\n/** The kit's path-effect derivations, reading sources through the painter\n *  registry. One pair for every scene, so a saved node finds them by key. */\nexport const PATH_EFFECT_DERIVATIONS: PathEffectDerivations = createPathEffectDerivations(readEffectSource);\n\n/**\n * `registry` with the path-effect derivations under `kit:pathEffect`, for\n * `createScene({ registry })` or `sceneFromJSON(json, { registry })`. A scene\n * built without them cannot hold a path effect: the actions that make one are\n * disabled there, and a saved one does not load.\n */\nexport function withPathEffectsRegistry<TPose, TData = unknown, TLayer extends string = string>(\n  registry: SceneRegistry<TPose, TData, TLayer> = {},\n): SceneRegistry<TPose, TData, TLayer> {\n  type Fns<K extends 'derivePath' | 'derivePose'> = NonNullable<SceneRegistry<TPose, TData, TLayer>[K]>[string];\n  return {\n    ...registry,\n    derivePath: { [PATH_EFFECT]: PATH_EFFECT_DERIVATIONS.derivePath as unknown as Fns<'derivePath'>, ...registry.derivePath },\n    derivePose: { [PATH_EFFECT]: PATH_EFFECT_DERIVATIONS.derivePose as unknown as Fns<'derivePose'>, ...registry.derivePose },\n  };\n}\n"],"mappings":";;;;;;;;;;;AAeA,IAAa,0BAAiD,4BAA4B,gBAAgB;;;;;;;AAQ1G,SAAgB,wBACd,WAAgD,CAAC,GACZ;CAErC,OAAO;EACL,GAAG;EACH,YAAY;IAAG,cAAc,wBAAwB;GAA4C,GAAG,SAAS;EAAW;EACxH,YAAY;IAAG,cAAc,wBAAwB;GAA4C,GAAG,SAAS;EAAW;CAC1H;AACF"}

package/dist/features/pathEffects/readSource.js

@@ -0,0 +1,46 @@
+import { isRectPose } from "../../core/geometry/autoPoseDescriptor.js";
+import { pathPaintOf } from "../../canvas/nodeShapes/nodePaint.js";
+import { findNodeShape } from "../../canvas/NodeShape.js";
+import { pathThroughPoseFrame, poseLinearOf } from "@weasel-js/geom";
+
+//#region src/features/pathEffects/readSource.ts
+/**
+* How the kit's path effects read a source node: its outline from its
+* painter's silhouette, its paint as `kit:path` resolves it.
+*/
+/** `dep` as a path effect's source, or `null` when it has no outline. */
+function readEffectSource(dep) {
+	const data = dep.node.data ?? {};
+	const { fill, stroke } = pathPaintOf(data);
+	const paint = {
+		fill,
+		stroke: stroke ?? null
+	};
+	const shown = dep.path;
+	if (shown !== null) return {
+		world: shown,
+		...paint
+	};
+	const local = findNodeShape(dep.node)?.silhouette?.(dep.node, dep.pose) ?? null;
+	if (local === null) return null;
+	const world = pathThroughPoseFrame(local, dep.pose);
+	const pose = dep.pose;
+	if (!isRectPose(pose) || poseLinearOf(pose) !== null) return {
+		world,
+		...paint
+	};
+	return {
+		world,
+		framed: {
+			path: local,
+			cx: pose.x + pose.width / 2,
+			cy: pose.y + pose.height / 2,
+			rotation: pose.rotation ?? 0
+		},
+		...paint
+	};
+}
+
+//#endregion
+export { readEffectSource };
+//# sourceMappingURL=readSource.js.map

package/dist/features/pathEffects/readSource.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readSource.js","names":[],"sources":["../../../src/features/pathEffects/readSource.ts"],"sourcesContent":["/**\n * How the kit's path effects read a source node: its outline from its\n * painter's silhouette, its paint as `kit:path` resolves it.\n */\nimport { pathThroughPoseFrame, poseLinearOf } from '@weasel-js/geom';\nimport type { Fill, Stroke } from '@weasel-js/paint';\nimport { findNodeShape } from 'canvas/NodeShape';\nimport { isRectPose } from 'core/geometry/autoPoseDescriptor';\nimport type { EffectSource } from 'core/scene/pathEffects/source';\nimport type { DerivedDep } from 'core/scene/types';\nimport { pathPaintOf } from 'canvas/nodeShapes/nodePaint';\n\n/** `dep` as a path effect's source, or `null` when it has no outline. */\nexport function readEffectSource(dep: DerivedDep<unknown>): EffectSource | null {\n  const data = (dep.node.data ?? {}) as { fill?: Fill | null; stroke?: Stroke | null };\n  const { fill, stroke } = pathPaintOf(data);\n  const paint = { fill, stroke: stroke ?? null };\n  const shown = dep.path;\n  if (shown !== null) return { world: shown, ...paint };\n  const local = findNodeShape(dep.node)?.silhouette?.(dep.node, dep.pose) ?? null;\n  if (local === null) return null;\n  const world = pathThroughPoseFrame(local, dep.pose);\n  const pose = dep.pose;\n  if (!isRectPose(pose) || poseLinearOf(pose) !== null) return { world, ...paint };\n  return {\n    world,\n    framed: { path: local, cx: pose.x + pose.width / 2, cy: pose.y + pose.height / 2, rotation: pose.rotation ?? 0 },\n    ...paint,\n  };\n}\n"],"mappings":";;;;;;;;;;;AAaA,SAAgB,iBAAiB,KAA+C;CAC9E,MAAM,OAAQ,IAAI,KAAK,QAAQ,CAAC;CAChC,MAAM,EAAE,MAAM,WAAW,YAAY,IAAI;CACzC,MAAM,QAAQ;EAAE;EAAM,QAAQ,UAAU;CAAK;CAC7C,MAAM,QAAQ,IAAI;CAClB,IAAI,UAAU,MAAM,OAAO;EAAE,OAAO;EAAO,GAAG;CAAM;CACpD,MAAM,QAAQ,cAAc,IAAI,IAAI,CAAC,EAAE,aAAa,IAAI,MAAM,IAAI,IAAI,KAAK;CAC3E,IAAI,UAAU,MAAM,OAAO;CAC3B,MAAM,QAAQ,qBAAqB,OAAO,IAAI,IAAI;CAClD,MAAM,OAAO,IAAI;CACjB,IAAI,CAAC,WAAW,IAAI,KAAK,aAAa,IAAI,MAAM,MAAM,OAAO;EAAE;EAAO,GAAG;CAAM;CAC/E,OAAO;EACL;EACA,QAAQ;GAAE,MAAM;GAAO,IAAI,KAAK,IAAI,KAAK,QAAQ;GAAG,IAAI,KAAK,IAAI,KAAK,SAAS;GAAG,UAAU,KAAK,YAAY;EAAE;EAC/G,GAAG;CACL;AACF"}

package/dist/features/paths/anchorData.js

@@ -0,0 +1,65 @@
+import { remapSkin } from "../../animation/rig/skinBinding.js";
+import { anchorOriginsOf, remapAnchorValues } from "@weasel-js/geom";
+import { vertexHalfWidths, vertexWidthFromSides } from "@weasel-js/paint";
+
+//#region src/features/paths/anchorData.ts
+/**
+* What a node keeps per anchor or per point of its path beside the geometry,
+* carried through an anchor edit: a skin's weights, the fill's and the
+* stroke's vertex colors, and the stroke's widths. The edit says where each
+* new point came from (`editAnchorSetTracked`); everything here follows it.
+*/
+/** Channels per anchor in a `vertexColors` array. */
+var COLOR_STRIDE = 4;
+var swapped = (w) => typeof w === "number" ? w : {
+	left: w.right,
+	right: w.left
+};
+/**
+* A stroke's `vertexWidths` through an edit. A kept anchor keeps its entry,
+* its sides traded where its subpath now runs the other way; a made one
+* blends the sides of the two it came between, an unset side reading the
+* stroke's own `width`; a deleted one's entry goes. Unset stays `NaN`.
+*/
+function carryWidths(widths, width, { before, after, origins }) {
+	const fallback = typeof width === "number" ? width : NaN;
+	return anchorOriginsOf(before, after, origins).map((o) => {
+		if (!o) return NaN;
+		let entry = widths[o.a] ?? NaN;
+		if (o.t !== 0 && o.b !== o.a) {
+			const a = vertexHalfWidths(widths[o.a], fallback);
+			const b = vertexHalfWidths(widths[o.b], fallback);
+			entry = vertexWidthFromSides(a.left + (b.left - a.left) * o.t, a.right + (b.right - a.right) * o.t);
+		}
+		return o.reversed ? swapped(entry) : entry;
+	});
+}
+/**
+* The per-anchor fields of `data`, renumbered for the edit from `before` to
+* `after`, to lay over it; empty when it holds none. Only what `data`
+* already has is written.
+*/
+function anchorDataPatch(data, before, after, origins) {
+	if (!data || typeof data !== "object") return {};
+	const d = data;
+	const edit = {
+		before,
+		after,
+		origins
+	};
+	const colors = (values) => remapAnchorValues(values, COLOR_STRIDE, before, after, origins);
+	const patch = {};
+	if (d.skin) patch.skin = remapSkin(d.skin, origins);
+	if (d.vertexColors) patch.vertexColors = colors(d.vertexColors);
+	const stroke = d.stroke;
+	if (stroke?.vertexColors || stroke?.vertexWidths) patch.stroke = {
+		...stroke,
+		...stroke.vertexColors ? { vertexColors: colors(stroke.vertexColors) } : {},
+		...stroke.vertexWidths ? { vertexWidths: carryWidths(stroke.vertexWidths, stroke.width, edit) } : {}
+	};
+	return patch;
+}
+
+//#endregion
+export { anchorDataPatch };
+//# sourceMappingURL=anchorData.js.map

package/dist/features/paths/anchorData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchorData.js","names":[],"sources":["../../../src/features/paths/anchorData.ts"],"sourcesContent":["/**\n * What a node keeps per anchor or per point of its path beside the geometry,\n * carried through an anchor edit: a skin's weights, the fill's and the\n * stroke's vertex colors, and the stroke's widths. The edit says where each\n * new point came from (`editAnchorSetTracked`); everything here follows it.\n */\nimport {\n  anchorOriginsOf, remapAnchorValues, type PointOrigin, type PolygonPath,\n} from '@weasel-js/geom';\nimport { vertexHalfWidths, vertexWidthFromSides, type VertexWidth } from '@weasel-js/paint';\nimport type { Skin } from '@weasel-js/animator';\nimport { remapSkin } from '../../animation/rig/skinBinding';\n\n/** Channels per anchor in a `vertexColors` array. */\nconst COLOR_STRIDE = 4;\n\ninterface AnchorDataCarrier {\n  skin?: Skin;\n  vertexColors?: number[];\n  stroke?: { vertexColors?: number[]; vertexWidths?: VertexWidth[]; width?: unknown } | null;\n}\n\ntype Edit = { before: PolygonPath; after: PolygonPath; origins: readonly (PointOrigin | null)[] };\n\nconst swapped = (w: VertexWidth): VertexWidth => (typeof w === 'number' ? w : { left: w.right, right: w.left });\n\n/**\n * A stroke's `vertexWidths` through an edit. A kept anchor keeps its entry,\n * its sides traded where its subpath now runs the other way; a made one\n * blends the sides of the two it came between, an unset side reading the\n * stroke's own `width`; a deleted one's entry goes. Unset stays `NaN`.\n */\nfunction carryWidths(widths: readonly VertexWidth[], width: unknown, { before, after, origins }: Edit): VertexWidth[] {\n  const fallback = typeof width === 'number' ? width : Number.NaN;\n  return anchorOriginsOf(before, after, origins).map((o) => {\n    if (!o) return Number.NaN;\n    let entry: VertexWidth = widths[o.a] ?? Number.NaN;\n    if (o.t !== 0 && o.b !== o.a) {\n      const a = vertexHalfWidths(widths[o.a], fallback);\n      const b = vertexHalfWidths(widths[o.b], fallback);\n      entry = vertexWidthFromSides(a.left + (b.left - a.left) * o.t, a.right + (b.right - a.right) * o.t);\n    }\n    return o.reversed ? swapped(entry) : entry;\n  });\n}\n\n/**\n * The per-anchor fields of `data`, renumbered for the edit from `before` to\n * `after`, to lay over it; empty when it holds none. Only what `data`\n * already has is written.\n */\nexport function anchorDataPatch(\n  data: unknown,\n  before: PolygonPath,\n  after: PolygonPath,\n  origins: readonly (PointOrigin | null)[],\n): Record<string, unknown> {\n  if (!data || typeof data !== 'object') return {};\n  const d = data as AnchorDataCarrier;\n  const edit = { before, after, origins };\n  const colors = (values: number[]) => remapAnchorValues(values, COLOR_STRIDE, before, after, origins);\n  const patch: AnchorDataCarrier = {};\n  if (d.skin) patch.skin = remapSkin(d.skin, origins);\n  if (d.vertexColors) patch.vertexColors = colors(d.vertexColors);\n  const stroke = d.stroke;\n  if (stroke?.vertexColors || stroke?.vertexWidths) {\n    patch.stroke = {\n      ...stroke,\n      ...(stroke.vertexColors ? { vertexColors: colors(stroke.vertexColors) } : {}),\n      ...(stroke.vertexWidths ? { vertexWidths: carryWidths(stroke.vertexWidths, stroke.width, edit) } : {}),\n    };\n  }\n  return patch as Record<string, unknown>;\n}\n"],"mappings":";;;;;;;;;;;;AAcA,IAAM,eAAe;AAUrB,IAAM,WAAW,MAAiC,OAAO,MAAM,WAAW,IAAI;CAAE,MAAM,EAAE;CAAO,OAAO,EAAE;AAAK;;;;;;;AAQ7G,SAAS,YAAY,QAAgC,OAAgB,EAAE,QAAQ,OAAO,WAAgC;CACpH,MAAM,WAAW,OAAO,UAAU,WAAW,QAAQ;CACrD,OAAO,gBAAgB,QAAQ,OAAO,OAAO,CAAC,CAAC,KAAK,MAAM;EACxD,IAAI,CAAC,GAAG,OAAO;EACf,IAAI,QAAqB,OAAO,EAAE,MAAM;EACxC,IAAI,EAAE,MAAM,KAAK,EAAE,MAAM,EAAE,GAAG;GAC5B,MAAM,IAAI,iBAAiB,OAAO,EAAE,IAAI,QAAQ;GAChD,MAAM,IAAI,iBAAiB,OAAO,EAAE,IAAI,QAAQ;GAChD,QAAQ,qBAAqB,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;EACpG;EACA,OAAO,EAAE,WAAW,QAAQ,KAAK,IAAI;CACvC,CAAC;AACH;;;;;;AAOA,SAAgB,gBACd,MACA,QACA,OACA,SACyB;CACzB,IAAI,CAAC,QAAQ,OAAO,SAAS,UAAU,OAAO,CAAC;CAC/C,MAAM,IAAI;CACV,MAAM,OAAO;EAAE;EAAQ;EAAO;CAAQ;CACtC,MAAM,UAAU,WAAqB,kBAAkB,QAAQ,cAAc,QAAQ,OAAO,OAAO;CACnG,MAAM,QAA2B,CAAC;CAClC,IAAI,EAAE,MAAM,MAAM,OAAO,UAAU,EAAE,MAAM,OAAO;CAClD,IAAI,EAAE,cAAc,MAAM,eAAe,OAAO,EAAE,YAAY;CAC9D,MAAM,SAAS,EAAE;CACjB,IAAI,QAAQ,gBAAgB,QAAQ,cAClC,MAAM,SAAS;EACb,GAAG;EACH,GAAI,OAAO,eAAe,EAAE,cAAc,OAAO,OAAO,YAAY,EAAE,IAAI,CAAC;EAC3E,GAAI,OAAO,eAAe,EAAE,cAAc,YAAY,OAAO,cAAc,OAAO,OAAO,IAAI,EAAE,IAAI,CAAC;CACtG;CAEF,OAAO;AACT"}

package/dist/features/paths/anchorMarkers.js

@@ -0,0 +1,137 @@
+import { circlePath, linePath, pathToAnchors, resolveCorners, squarePath } from "@weasel-js/geom";
+
+//#region src/features/paths/anchorMarkers.ts
+/** The path-edit overlay's look where a {@link PathEditingOverlayStyle} leaves a field out. */
+var DEFAULT_OVERLAY_STYLE = {
+	anchorSizePx: 8,
+	handleDotRadiusPx: 5,
+	anchorFill: "#ffffff",
+	anchorStroke: "#3478f6",
+	handleStroke: "#7da7e8",
+	handleDotFill: "rgba(125, 167, 232, 0.5)",
+	anchorFillSelected: "#3478f6",
+	outlineStroke: "#3478f6",
+	outlineWidthPx: 1,
+	denseDotRadiusPx: 1.5,
+	marqueeStroke: "#3478f6",
+	marqueeFill: "rgba(52, 120, 246, 0.08)"
+};
+function worldToScreen(p, view) {
+	return {
+		x: (p.x - view.x) * view.scale.x,
+		y: (p.y - view.y) * view.scale.y
+	};
+}
+/** `path`, its corners expanded, with every coordinate carried to screen
+*  through `view`: a radius left on it would stay in world units. */
+function onScreen(path, view) {
+	path = resolveCorners(path);
+	const coords = new Float32Array(path.coords.length);
+	for (let i = 0; i < coords.length; i += 2) {
+		coords[i] = (path.coords[i] - view.x) * view.scale.x;
+		coords[i + 1] = (path.coords[i + 1] - view.y) * view.scale.y;
+	}
+	return {
+		...path,
+		coords
+	};
+}
+/** Whether `sub[i]` sits closer to a neighbor along its subpath than `px` on screen. */
+function crowded(sub, closed, i, px) {
+	const n = sub.length;
+	const near = (j) => {
+		if (!closed && (j < 0 || j >= n)) return false;
+		const q = sub[(j + n) % n];
+		return q !== sub[i] && Math.hypot(q.x - sub[i].x, q.y - sub[i].y) < px;
+	};
+	return near(i - 1) || near(i + 1);
+}
+/** The on-screen neighbors of `sub[i]` along its subpath, null past an open end. */
+function neighbors(sub, closed, i) {
+	const n = sub.length;
+	return [i > 0 || closed ? sub[(i - 1 + n) % n] : null, i < n - 1 || closed ? sub[(i + 1) % n] : null];
+}
+function handleCommands(a, handle, style) {
+	return [{
+		kind: "path",
+		path: linePath(a, handle),
+		stroke: {
+			paint: {
+				kind: "solid",
+				color: style.handleStroke
+			},
+			width: 1
+		}
+	}, {
+		kind: "path",
+		path: circlePath(handle.x, handle.y, style.handleDotRadiusPx),
+		fill: { paint: {
+			kind: "solid",
+			color: style.handleDotFill
+		} }
+	}];
+}
+/**
+* The open path's outline, then its anchors in walk order — each anchor's
+* handles under its marker. A selected anchor's marker is filled, an
+* unselected one's hollow, or a dot where its neighbors crowd it. The marker
+* is a square, or the shape `markers` gives the anchor's flat index. Flat
+* indices count the way `enumerateAnchors` does, as the selection does.
+*/
+function anchorMarkerCommands(path, view, selected, style, markers = null) {
+	const out = [{
+		kind: "path",
+		path: onScreen(path, view),
+		stroke: {
+			paint: {
+				kind: "solid",
+				color: style.outlineStroke
+			},
+			width: style.outlineWidthPx
+		}
+	}];
+	const { anchors, closed } = pathToAnchors(path);
+	let flat = 0;
+	anchors.forEach((sub, s) => {
+		const screen = sub.map((a) => worldToScreen(a, view));
+		const isClosed = closed[s];
+		sub.forEach((a, i) => {
+			const shape = markers?.[flat] ?? null;
+			const isSelected = selected.has(flat++);
+			const at = screen[i];
+			if (a.inHandle) out.push(...handleCommands(at, worldToScreen(a.inHandle, view), style));
+			if (a.outHandle) out.push(...handleCommands(at, worldToScreen(a.outHandle, view), style));
+			if (!isSelected && crowded(screen, closed[s], i, style.anchorSizePx)) {
+				out.push({
+					kind: "path",
+					path: circlePath(at.x, at.y, style.denseDotRadiusPx),
+					fill: { paint: {
+						kind: "solid",
+						color: style.anchorStroke
+					} }
+				});
+				return;
+			}
+			out.push({
+				kind: "path",
+				path: shape ? shape(at, style.anchorSizePx, ...neighbors(screen, isClosed, i)) : squarePath(at.x, at.y, style.anchorSizePx),
+				fill: { paint: {
+					kind: "solid",
+					color: isSelected ? style.anchorFillSelected : style.anchorFill
+				} },
+				stroke: {
+					paint: {
+						kind: "solid",
+						color: style.anchorStroke
+					},
+					width: 1
+				}
+			});
+		});
+	});
+	return out;
+}
+
+//#endregion
+export { DEFAULT_OVERLAY_STYLE, anchorMarkerCommands, worldToScreen };
+//# sourceMappingURL=anchorMarkers.js.map

package/dist/features/paths/anchorMarkers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchorMarkers.js","names":[],"sources":["../../../src/features/paths/anchorMarkers.ts"],"sourcesContent":["/**\n * The draw commands path edit paints for the open path, in screen space: its\n * outline, then each anchor's handles and marker.\n */\nimport type { DrawCommand } from '@weasel-js/renderer';\nimport {\n  circlePath, linePath, pathToAnchors, resolveCorners, squarePath, type PenAnchor, type PolygonPath, type View,\n} from '@weasel-js/geom';\nimport type { AnchorMarkerShape } from './pathRepresentation';\n\n/** Appearance of the outline and of the anchor and handle markers. */\nexport interface PathEditingOverlayStyle {\n  anchorSizePx?: number;\n  handleDotRadiusPx?: number;\n  anchorFill?: string;\n  anchorStroke?: string;\n  handleStroke?: string;\n  /** Fill of the control-point circle. Defaults to the handleStroke color\n   *  at 50% alpha. */\n  handleDotFill?: string;\n  /** Fill of a selected anchor square. Defaults to the anchor stroke color. */\n  anchorFillSelected?: string;\n  /** The open path's outline, drawn over its own fill and stroke so the path\n   *  shows however its paint and its markers cover it. */\n  outlineStroke?: string;\n  outlineWidthPx?: number;\n  /** Radius of the dot an unselected anchor shrinks to where anchors sit\n   *  closer together on screen than a marker is wide. */\n  denseDotRadiusPx?: number;\n  /** Stroke of the marquee rubber band. */\n  marqueeStroke?: string;\n  /** Fill of the marquee rubber band. */\n  marqueeFill?: string;\n}\n\n/** The path-edit overlay's look where a {@link PathEditingOverlayStyle} leaves a field out. */\nexport const DEFAULT_OVERLAY_STYLE: Required<PathEditingOverlayStyle> = {\n  anchorSizePx: 8,\n  handleDotRadiusPx: 5,\n  anchorFill: '#ffffff',\n  anchorStroke: '#3478f6',\n  handleStroke: '#7da7e8',\n  // 50%-opacity handle-stroke color. #7da7e8 → rgba(125, 167, 232, 0.5).\n  handleDotFill: 'rgba(125, 167, 232, 0.5)',\n  anchorFillSelected: '#3478f6',\n  outlineStroke: '#3478f6',\n  outlineWidthPx: 1,\n  denseDotRadiusPx: 1.5,\n  marqueeStroke: '#3478f6',\n  marqueeFill: 'rgba(52, 120, 246, 0.08)',\n};\n\ntype Point = { x: number; y: number };\n\nexport function worldToScreen(p: Point, view: View): Point {\n  return { x: (p.x - view.x) * view.scale.x, y: (p.y - view.y) * view.scale.y };\n}\n\n/** `path`, its corners expanded, with every coordinate carried to screen\n *  through `view`: a radius left on it would stay in world units. */\nfunction onScreen(path: PolygonPath, view: View): PolygonPath {\n  path = resolveCorners(path);\n  const coords = new Float32Array(path.coords.length);\n  for (let i = 0; i < coords.length; i += 2) {\n    coords[i] = (path.coords[i] - view.x) * view.scale.x;\n    coords[i + 1] = (path.coords[i + 1] - view.y) * view.scale.y;\n  }\n  return { ...path, coords };\n}\n\n/** Whether `sub[i]` sits closer to a neighbor along its subpath than `px` on screen. */\nfunction crowded(sub: readonly Point[], closed: boolean, i: number, px: number): boolean {\n  const n = sub.length;\n  const near = (j: number): boolean => {\n    if (!closed && (j < 0 || j >= n)) return false;\n    const q = sub[(j + n) % n];\n    return q !== sub[i] && Math.hypot(q.x - sub[i].x, q.y - sub[i].y) < px;\n  };\n  return near(i - 1) || near(i + 1);\n}\n\n/** The on-screen neighbors of `sub[i]` along its subpath, null past an open end. */\nfunction neighbors(sub: readonly Point[], closed: boolean, i: number): [Point | null, Point | null] {\n  const n = sub.length;\n  const prev = i > 0 || closed ? sub[(i - 1 + n) % n] : null;\n  const next = i < n - 1 || closed ? sub[(i + 1) % n] : null;\n  return [prev, next];\n}\n\nfunction handleCommands(a: Point, handle: Point, style: Required<PathEditingOverlayStyle>): DrawCommand[] {\n  return [\n    { kind: 'path', path: linePath(a, handle), stroke: { paint: { kind: 'solid', color: style.handleStroke }, width: 1 } },\n    {\n      kind: 'path',\n      path: circlePath(handle.x, handle.y, style.handleDotRadiusPx),\n      fill: { paint: { kind: 'solid', color: style.handleDotFill } },\n    },\n  ];\n}\n\n/**\n * The open path's outline, then its anchors in walk order — each anchor's\n * handles under its marker. A selected anchor's marker is filled, an\n * unselected one's hollow, or a dot where its neighbors crowd it. The marker\n * is a square, or the shape `markers` gives the anchor's flat index. Flat\n * indices count the way `enumerateAnchors` does, as the selection does.\n */\nexport function anchorMarkerCommands(\n  path: PolygonPath,\n  view: View,\n  selected: ReadonlySet<number>,\n  style: Required<PathEditingOverlayStyle>,\n  markers: readonly (AnchorMarkerShape | null)[] | null = null,\n): DrawCommand[] {\n  const out: DrawCommand[] = [{\n    kind: 'path',\n    path: onScreen(path, view),\n    stroke: { paint: { kind: 'solid', color: style.outlineStroke }, width: style.outlineWidthPx },\n  }];\n  const { anchors, closed } = pathToAnchors(path);\n  let flat = 0;\n  anchors.forEach((sub: PenAnchor[], s) => {\n    const screen = sub.map((a) => worldToScreen(a, view));\n    const isClosed = closed[s];\n    sub.forEach((a, i) => {\n      const shape = markers?.[flat] ?? null;\n      const isSelected = selected.has(flat++);\n      const at = screen[i];\n      if (a.inHandle) out.push(...handleCommands(at, worldToScreen(a.inHandle, view), style));\n      if (a.outHandle) out.push(...handleCommands(at, worldToScreen(a.outHandle, view), style));\n      if (!isSelected && crowded(screen, closed[s], i, style.anchorSizePx)) {\n        out.push({\n          kind: 'path',\n          path: circlePath(at.x, at.y, style.denseDotRadiusPx),\n          fill: { paint: { kind: 'solid', color: style.anchorStroke } },\n        });\n        return;\n      }\n      out.push({\n        kind: 'path',\n        path: shape ? shape(at, style.anchorSizePx, ...neighbors(screen, isClosed, i)) : squarePath(at.x, at.y, style.anchorSizePx),\n        fill: { paint: { kind: 'solid', color: isSelected ? style.anchorFillSelected : style.anchorFill } },\n        stroke: { paint: { kind: 'solid', color: style.anchorStroke }, width: 1 },\n      });\n    });\n  });\n  return out;\n}\n"],"mappings":"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"}