@pixerate/editor-svelte 0.36.0 → 0.37.0

package/dist/vector/VectorCanvas.svelte

@@ -17,6 +17,7 @@
   } from '@pixerate/editor/vector';
   import VectorGradientDefs from './VectorGradientDefs.svelte';
   import VectorSceneNodes from './VectorSceneNodes.svelte';
+  import VectorWidthPointEditor from './VectorWidthPointEditor.svelte';
   import { vectorStateOf } from './subscribe.svelte.js';
 
   interface Props {
@@ -54,6 +55,8 @@
   const scene = $derived(getVectorSceneRenderData(view, { idPrefix }));
   const overlay = $derived(getVectorOverlayRenderData(view));
   const box = $derived(overlay.selectionBox);
+  const edit = $derived(view.widthPointEdit);
+  const editAt = $derived(edit ? { x: edit.point.x * view.viewport.zoom + view.viewport.x, y: edit.point.y * view.viewport.zoom + view.viewport.y } : null);
   const closing = $derived(view.tool === 'pen' ? overlay.anchors.find((a) => a.closes && a.hovered) : undefined);
   const hs = THEME.transformHandleSize;
   const as = THEME.anchorSize;
@@ -337,4 +340,12 @@
       <text data-vector-status="" x="8" y="100%" dy="-8" font-size="11" fill={accentColor} style="font-family:system-ui,sans-serif">{overlay.status}</text>
     {/if}
   </g>
+  {#if edit && editAt}
+    <!-- Width Point Edit (double-click with the width tool), beside the point. -->
+    <foreignObject data-vector-width-point-edit="" x={editAt.x + 12} y={editAt.y + 12} width="180" height="140" style="overflow:visible">
+      {#key `${edit.nodeId}:${edit.index}:${edit.t}`}
+        <VectorWidthPointEditor {controller} {edit} {accentColor} />
+      {/key}
+    </foreignObject>
+  {/if}
 </svg>

package/dist/vector/VectorCanvas.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VectorCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorCanvas.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAQH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAMjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAuOH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"VectorCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorCanvas.svelte.ts"],"names":[],"mappings":"AAQA,OAAO,EAQH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AAOjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,mFAAmF;IACnF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAkPH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/vector/VectorWidthPointEditor.svelte

@@ -0,0 +1,99 @@
+<!--
+  Width Point Edit: the position (percent along the path) and the left / right side widths
+  (document units) of the width point a width-tool double-click opened. Apply (or Enter) sets
+  them with `commitWidthPointEdit`; Cancel or Escape closes it. `<VectorCanvas>` shows it next
+  to the point; use it on its own to place it elsewhere.
+-->
+<script lang="ts">
+  import { VECTOR_OVERLAY_THEME as THEME, type VectorEditorController, type VectorWidthPointEdit } from '@pixerate/editor/vector';
+
+  interface Props {
+    controller: VectorEditorController;
+    /** The point being edited (`state.widthPointEdit`). */
+    edit: VectorWidthPointEdit;
+    /** Accent colour of the Apply button (default sky blue). */
+    accentColor?: string;
+    class?: string;
+    style?: string;
+  }
+
+  let { controller, edit, accentColor = THEME.accent, class: className = '', style = '' }: Props = $props();
+
+  const round = (v: number, digits: number) => String(Math.round(v * 10 ** digits) / 10 ** digits);
+  // The fields start from the point; the canvas re-keys the editor when it opens on another one.
+  // svelte-ignore state_referenced_locally
+  let position = $state<string | number | null>(round(edit.t * 100, 2));
+  // svelte-ignore state_referenced_locally
+  let left = $state<string | number | null>(round(edit.left, 3));
+  // svelte-ignore state_referenced_locally
+  let right = $state<string | number | null>(round(edit.right, 3));
+  let form: HTMLFormElement | undefined = $state();
+
+  const num = (v: unknown) => (String(v ?? '').trim() !== '' && Number.isFinite(Number(v)) ? Number(v) : undefined);
+
+  // Hand the keyboard back to the canvas around it.
+  function refocus() {
+    (form?.closest('svg') as SVGSVGElement | null)?.focus?.({ preventScroll: true });
+  }
+
+  function close() {
+    refocus();
+    controller.closeWidthPointEdit();
+  }
+
+  function apply(e: SubmitEvent) {
+    e.preventDefault();
+    const t = num(position);
+    refocus();
+    controller.commitWidthPointEdit({ t: t === undefined ? undefined : Math.min(Math.max(t, 0), 100) / 100, left: num(left), right: num(right) });
+  }
+
+  function onKeyDown(e: KeyboardEvent) {
+    e.stopPropagation();
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      close();
+    }
+  }
+
+  const stop = (e: Event) => e.stopPropagation();
+  const fieldStyle = 'display:flex;align-items:center;justify-content:space-between;gap:6px';
+  const inputStyle = 'width:72px;font:inherit;padding:1px 4px';
+</script>
+
+<!-- Keep the canvas from treating clicks, keys and clipboard use in here as editing gestures. -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<form
+  bind:this={form}
+  data-vector-width-point-editor=""
+  aria-label="Width point"
+  class={className}
+  style="display:grid;gap:4px;padding:8px;background:#ffffff;border:1px solid rgba(0,0,0,0.15);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.15);font:12px system-ui,sans-serif;color:#18181b;{style}"
+  onpointerdown={stop}
+  onpointermove={stop}
+  onpointerup={stop}
+  ondblclick={stop}
+  oncopy={stop}
+  oncut={stop}
+  onpaste={stop}
+  onkeydown={onKeyDown}
+  onsubmit={apply}
+>
+  <label style={fieldStyle}>
+    Position %
+    <!-- svelte-ignore a11y_autofocus -->
+    <input aria-label="Width point position" type="number" min="0" max="100" step="any" bind:value={position} style={inputStyle} autofocus />
+  </label>
+  <label style={fieldStyle}>
+    Left
+    <input aria-label="Width point left side" type="number" min="0" step="any" bind:value={left} style={inputStyle} />
+  </label>
+  <label style={fieldStyle}>
+    Right
+    <input aria-label="Width point right side" type="number" min="0" step="any" bind:value={right} style={inputStyle} />
+  </label>
+  <div style="display:flex;justify-content:flex-end;gap:4px;margin-top:2px">
+    <button type="button" onclick={close}>Cancel</button>
+    <button type="submit" style="background:{accentColor};color:#ffffff;border:none;border-radius:4px;padding:2px 8px">{edit.index === null ? 'Add' : 'Apply'}</button>
+  </div>
+</form>

package/dist/vector/VectorWidthPointEditor.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type VectorEditorController, type VectorWidthPointEdit } from '@pixerate/editor/vector';
+interface Props {
+    controller: VectorEditorController;
+    /** The point being edited (`state.widthPointEdit`). */
+    edit: VectorWidthPointEdit;
+    /** Accent colour of the Apply button (default sky blue). */
+    accentColor?: string;
+    class?: string;
+    style?: string;
+}
+declare const VectorWidthPointEditor: import("svelte").Component<Props, {}, "">;
+type VectorWidthPointEditor = ReturnType<typeof VectorWidthPointEditor>;
+export default VectorWidthPointEditor;
+//# sourceMappingURL=VectorWidthPointEditor.svelte.d.ts.map

package/dist/vector/VectorWidthPointEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VectorWidthPointEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorWidthPointEditor.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiC,KAAK,sBAAsB,EAAE,KAAK,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAG9H,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,uDAAuD;IACvD,IAAI,EAAE,oBAAoB,CAAC;IAC3B,4DAA4D;IAC5D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0EH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/vector/index.d.ts

@@ -3,6 +3,7 @@ import type VectorCanvasComponent from "./VectorCanvas.svelte";
 import type VectorEditorComponent from "./VectorEditor.svelte";
 export { default as VectorEditor } from "./VectorEditor.svelte";
 export { default as VectorCanvas } from "./VectorCanvas.svelte";
+export { default as VectorWidthPointEditor } from "./VectorWidthPointEditor.svelte";
 export { default as VectorToolbar } from "./VectorToolbar.svelte";
 export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
 export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";

package/dist/vector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vector/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vector/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAE/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,cAAc,gCAAgC,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,cAAc,aAAa,CAAC;AAE5B,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/vector/index.js

@@ -1,5 +1,6 @@
 export { default as VectorEditor } from "./VectorEditor.svelte";
 export { default as VectorCanvas } from "./VectorCanvas.svelte";
+export { default as VectorWidthPointEditor } from "./VectorWidthPointEditor.svelte";
 export { default as VectorToolbar } from "./VectorToolbar.svelte";
 export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
 export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -107,7 +107,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.39.0"
+    "@pixerate/editor": "0.40.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",