@pixerate/editor-svelte 0.93.0 → 0.94.0

package/dist/vector/VectorCanvas.svelte

@@ -490,6 +490,17 @@
         {/each}
       </g>
     {/each}
+    {#if overlay.perspective}
+      <g data-vector-perspective-grid="" fill="none" pointer-events="none">
+        {#each overlay.perspective.planes as pl (pl.plane)}
+          <path data-vector-perspective-plane={pl.plane} data-active={pl.active || undefined} d={pl.d} stroke={pl.active ? accentColor : guideColor} stroke-width={pl.active ? 1 : 0.75} opacity={pl.active ? 0.55 : 0.25} />
+        {/each}
+        {#each overlay.perspective.vanishingPoints as v, i (i)}
+          <circle data-vector-vanishing-point={i} cx={v.x} cy={v.y} r="4" stroke={accentColor} stroke-width="1.5" />
+        {/each}
+        <circle data-vector-perspective-origin="" cx={overlay.perspective.origin.x} cy={overlay.perspective.origin.y} r="3" fill={accentColor} />
+      </g>
+    {/if}
     {#each overlay.symmetry as sy (sy.nodeId)}
       <g data-vector-symmetry-axes={sy.nodeId} stroke={accentColor} stroke-dasharray={sy.drawing ? undefined : '6 4'} opacity={sy.drawing ? 0.9 : 0.6}>
         {#each sy.lines as l, i (i)}<line x1={l.x1} y1={l.y1} x2={l.x2} y2={l.y2} />{/each}

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,EASH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AASjC,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;AAgcH,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,EASH,KAAK,sBAAsB,EAC5B,MAAM,yBAAyB,CAAC;AASjC,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;AA2cH,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/vector/VectorPerspectivePanel.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { vectorPerspectivePlanes, vectorPerspectivePreset, type VectorEditorController, type VectorPerspectivePlane } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  /**
+   * Perspective drawing: add a 1-, 2- or 3-point grid, pick the plane new shapes are drawn on, lay
+   * the selection onto it, show or hide the grid, or remove it. Grid changes and attaching are one
+   * undo step each.
+   */
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  const store = vectorStateOf(() => controller);
+  const view = $derived(store.current);
+  const grid = $derived(view.document.perspective ?? null);
+  const planes = $derived(grid ? vectorPerspectivePlanes(grid) : []);
+  let attachTo = $state<VectorPerspectivePlane | ''>('');
+  const target = $derived((view.perspectivePlane ?? attachTo) || planes[0]);
+  const PLANE_LABELS: Record<VectorPerspectivePlane, string> = { floor: 'Floor', left: 'Left wall', right: 'Right wall', side: 'Side wall', front: 'Front' };
+  const add = (n: 1 | 2 | 3) => controller.setPerspective(vectorPerspectivePreset(n, view.document.width, view.document.height));
+
+  const buttonClass =
+    'inline-flex h-7 min-w-7 items-center justify-center rounded-md border border-border bg-background px-1.5 text-xs font-medium text-foreground hover:bg-muted disabled:cursor-not-allowed disabled:opacity-40 aria-pressed:bg-primary aria-pressed:text-primary-foreground';
+  const selectClass = 'h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs';
+</script>
+
+<div class="space-y-2 {className}" data-vector-perspective-panel="" aria-label="Perspective">
+  <div class="flex flex-wrap items-center gap-1">
+    <span class="w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Perspective</span>
+    {#each [1, 2, 3] as const as n (n)}
+      <button type="button" class={buttonClass} aria-pressed={grid?.vanishingPoints.length === n} data-vector-perspective-preset={n} title={`A ${n}-point perspective grid for the page`} onclick={() => add(n)}>{n}-pt</button>
+    {/each}
+  </div>
+  {#if grid}
+    <div class="flex flex-wrap items-center gap-1">
+      <span class="w-16"></span>
+      <select aria-label="Draw on plane" title="New rectangles, ellipses, polygons and stars are drawn on this plane" class={selectClass} value={view.perspectivePlane ?? ''} onchange={(e) => controller.setPerspectivePlane((e.currentTarget.value || null) as VectorPerspectivePlane | null)}>
+        <option value="">Draw flat</option>
+        {#each planes as p (p)}<option value={p}>Draw on {PLANE_LABELS[p].toLowerCase()}</option>{/each}
+      </select>
+    </div>
+    <div class="flex flex-wrap items-center gap-1">
+      <span class="w-16"></span>
+      {#if !view.perspectivePlane}
+        <select aria-label="Attach to plane" class="h-7 w-24 rounded border border-border bg-background px-1 text-xs" value={attachTo || planes[0]} onchange={(e) => (attachTo = e.currentTarget.value as VectorPerspectivePlane)}>
+          {#each planes as p (p)}<option value={p}>{PLANE_LABELS[p]}</option>{/each}
+        </select>
+      {/if}
+      <button type="button" class={buttonClass} disabled={!view.selection.length} title="Lay the selection onto the plane (read flat from the grid's origin)" onclick={() => controller.attachToPerspective(target)}>Attach</button>
+      <label class="flex items-center gap-1 text-xs text-foreground" title="Show the grid on the canvas">
+        <input type="checkbox" aria-label="Show perspective grid" checked={grid.visible !== false} onchange={(e) => grid && controller.setPerspective({ ...grid, visible: e.currentTarget.checked })} />
+        Show
+      </label>
+      <button type="button" class={buttonClass} title="Remove the grid (art on it stays)" onclick={() => controller.setPerspective(null)}>Remove</button>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,14 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+/**
+ * Perspective drawing: add a 1-, 2- or 3-point grid, pick the plane new shapes are drawn on, lay
+ * the selection onto it, show or hide the grid, or remove it. Grid changes and attaching are one
+ * undo step each.
+ */
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorPerspectivePanel: import("svelte").Component<Props, {}, "">;
+type VectorPerspectivePanel = ReturnType<typeof VectorPerspectivePanel>;
+export default VectorPerspectivePanel;
+//# sourceMappingURL=VectorPerspectivePanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorPerspectivePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorPerspectivePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoD,KAAK,sBAAsB,EAA+B,MAAM,yBAAyB,CAAC;AAInJ;;;;GAIG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwDH,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/vector/VectorStylePanel.svelte

@@ -29,6 +29,7 @@
   import VectorShadingPanel from './VectorShadingPanel.svelte';
   import VectorTracePanel from './VectorTracePanel.svelte';
   import VectorSymmetryPanel from './VectorSymmetryPanel.svelte';
+  import VectorPerspectivePanel from './VectorPerspectivePanel.svelte';
   import VectorLensPanel from './VectorLensPanel.svelte';
   import VectorGradientEditor from './VectorGradientEditor.svelte';
 
@@ -259,6 +260,7 @@
   <VectorConnectorPanel {controller} />
   <VectorShadingPanel {controller} />
   <VectorSymmetryPanel {controller} />
+  <VectorPerspectivePanel {controller} />
   <VectorLensPanel {controller} />
   <VectorTracePanel {controller} />
   <VectorConstraintsPanel {controller} />

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

@@ -1 +1 @@
-{"version":3,"file":"VectorStylePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorStylePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAYH,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AAmBjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4LH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"VectorStylePanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorStylePanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAYH,KAAK,sBAAsB,EAG5B,MAAM,yBAAyB,CAAC;AAoBjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA8LH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/vector/index.d.ts

@@ -17,6 +17,7 @@ export { default as VectorConnectorPanel } from "./VectorConnectorPanel.svelte";
 export { default as VectorShadingPanel } from "./VectorShadingPanel.svelte";
 export { default as VectorTracePanel } from "./VectorTracePanel.svelte";
 export { default as VectorSymmetryPanel } from "./VectorSymmetryPanel.svelte";
+export { default as VectorPerspectivePanel } from "./VectorPerspectivePanel.svelte";
 export { default as VectorLensPanel } from "./VectorLensPanel.svelte";
 export { default as VectorTextElement } from "./VectorTextElement.svelte";
 export { default as VectorMaskedNodes } from "./VectorMaskedNodes.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,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,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AAC5F,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,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,qCAAqC,CAAC;AAC5F,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

@@ -14,6 +14,7 @@ export { default as VectorConnectorPanel } from "./VectorConnectorPanel.svelte";
 export { default as VectorShadingPanel } from "./VectorShadingPanel.svelte";
 export { default as VectorTracePanel } from "./VectorTracePanel.svelte";
 export { default as VectorSymmetryPanel } from "./VectorSymmetryPanel.svelte";
+export { default as VectorPerspectivePanel } from "./VectorPerspectivePanel.svelte";
 export { default as VectorLensPanel } from "./VectorLensPanel.svelte";
 export { default as VectorTextElement } from "./VectorTextElement.svelte";
 export { default as VectorMaskedNodes } from "./VectorMaskedNodes.svelte";

package/package.json

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