@pixerate/editor-svelte 0.82.0 → 0.84.0

package/dist/vector/VectorTextPanel.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+  import {
+    VECTOR_FONT_WEIGHTS,
+    VECTOR_TEXT_ALIGN_OPTIONS,
+    applyVectorParagraphStyle,
+    applyVectorTextStyle,
+    getVectorTextPanel,
+    type VectorEditorController,
+    type VectorTextAlign
+  } from '@pixerate/editor/vector';
+  import { vectorStateOf } from './subscribe.svelte.js';
+
+  /**
+   * Character and paragraph style of text: family, weight, size, italic, underline, strike-through,
+   * tracking, leading, alignment and point / area text. It edits the selected characters while text
+   * is being edited, else the selected text, else the defaults for new text. Type on a Path turns a
+   * selected path into path text, and Create Outlines turns text into paths (with an outline
+   * shaper). Each change is one undo step.
+   */
+  interface Props {
+    controller: VectorEditorController;
+    class?: string;
+  }
+
+  let { controller, class: className = '' }: Props = $props();
+
+  const listId = `vector-fonts-${Math.random().toString(36).slice(2, 10)}`;
+  const store = vectorStateOf(() => controller);
+  const view = $derived(store.current);
+  const panel = $derived(getVectorTextPanel(view));
+  const f = $derived(panel?.font);
+  const where = $derived(panel?.target === 'range' ? 'Selected characters' : panel?.target === 'nodes' ? 'Selected text' : 'New text');
+
+  const style = (patch: Record<string, unknown>, merge?: string) => applyVectorTextStyle(controller, patch, merge ? { merge } : {});
+  const num = (v: string) => {
+    const n = parseFloat(v);
+    return Number.isFinite(n) ? n : null;
+  };
+  function onFamily(e: Event) {
+    const v = (e.currentTarget as HTMLInputElement).value.trim();
+    if (v && v !== f?.fontFamily) style({ fontFamily: v });
+  }
+  function typeOnPath() {
+    if (!panel?.pathId) return;
+    const r = controller.typeOnPath(panel.pathId, { text: 'Text on a path' });
+    if (r.ok && r.id) controller.editText(r.id, { anchor: 0, focus: 'Text on a path'.length });
+  }
+
+  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 inputClass = 'h-7 min-w-0 flex-1 rounded border border-border bg-background px-1 text-xs';
+  const labelClass = 'w-16 text-[11px] font-medium uppercase tracking-wide text-muted-foreground';
+</script>
+
+{#if panel && f}
+  <div class="space-y-2 {className}" data-vector-text-panel={panel.target} aria-label="Text">
+    <div class="flex items-center gap-1">
+      <span class={labelClass}>Text</span>
+      <span class="text-[11px] text-muted-foreground">{where}</span>
+    </div>
+    <div class="flex items-center gap-1">
+      {#key f.fontFamily}
+        <input
+          aria-label="Font family"
+          class={inputClass}
+          list={listId}
+          placeholder="Mixed"
+          value={f.fontFamily ?? ''}
+          onkeydown={(e) => {
+            if (e.key === 'Enter') (e.currentTarget as HTMLInputElement).blur();
+          }}
+          onblur={onFamily}
+        />
+      {/key}
+      <datalist id={listId}>
+        {#each panel.families as fam (fam)}
+          <option value={fam}></option>
+        {/each}
+      </datalist>
+    </div>
+    <div class="flex items-center gap-1">
+      <select aria-label="Font weight" class={inputClass} value={f.fontWeight ?? ''} onchange={(e) => style({ fontWeight: Number((e.currentTarget as HTMLSelectElement).value) })}>
+        {#if f.fontWeight === null}<option value="">Mixed</option>{/if}
+        {#each VECTOR_FONT_WEIGHTS as w (w.value)}
+          <option value={w.value}>{w.label}</option>
+        {/each}
+        {#if f.fontWeight !== null && !VECTOR_FONT_WEIGHTS.some((w) => w.value === f.fontWeight)}<option value={f.fontWeight}>{f.fontWeight}</option>{/if}
+      </select>
+      <input
+        type="number"
+        aria-label="Font size"
+        title="Font size"
+        class="{inputClass} w-14 flex-none"
+        min="0.5"
+        step="1"
+        placeholder="—"
+        value={f.fontSize === null ? '' : Math.round(f.fontSize * 100) / 100}
+        oninput={(e) => {
+          const v = num((e.currentTarget as HTMLInputElement).value);
+          if (v !== null && v >= 0.5) style({ fontSize: v }, 'text-size');
+        }}
+        onblur={() => controller.endMergedEdit()}
+      />
+    </div>
+    <div class="flex flex-wrap items-center gap-1">
+      <button type="button" class={buttonClass} aria-label="Bold" aria-pressed={(f.fontWeight ?? 0) >= 600} onclick={() => style({ fontWeight: (f.fontWeight ?? 400) >= 600 ? 400 : 700 })}><b>B</b></button>
+      <button type="button" class={buttonClass} aria-label="Italic" aria-pressed={f.italic === true} onclick={() => style({ italic: !f.italic })}><i>I</i></button>
+      <button type="button" class={buttonClass} aria-label="Underline" aria-pressed={f.underline === true} onclick={() => style({ underline: !f.underline })}><u>U</u></button>
+      <button type="button" class={buttonClass} aria-label="Strike through" aria-pressed={f.strikethrough === true} onclick={() => style({ strikethrough: !f.strikethrough })}><s>S</s></button>
+    </div>
+    <div class="flex items-center gap-1">
+      <label class="flex flex-1 items-center gap-1 text-xs text-foreground" title="Tracking (1/1000 em)">
+        <span class="text-[11px] text-muted-foreground">VA</span>
+        <input
+          type="number"
+          aria-label="Tracking"
+          class={inputClass}
+          step="10"
+          placeholder="—"
+          value={f.tracking ?? ''}
+          oninput={(e) => style({ tracking: num((e.currentTarget as HTMLInputElement).value) ?? 0 }, 'text-tracking')}
+          onblur={() => controller.endMergedEdit()}
+        />
+      </label>
+      <label class="flex flex-1 items-center gap-1 text-xs text-foreground" title="Leading (empty: auto)">
+        <span class="text-[11px] text-muted-foreground">↕</span>
+        <input
+          type="number"
+          aria-label="Leading"
+          class={inputClass}
+          min="0"
+          step="1"
+          placeholder="Auto"
+          value={f.leading ?? ''}
+          oninput={(e) => style({ leading: num((e.currentTarget as HTMLInputElement).value) }, 'text-leading')}
+          onblur={() => controller.endMergedEdit()}
+        />
+      </label>
+    </div>
+    <div class="flex flex-wrap items-center gap-1" role="group" aria-label="Alignment">
+      {#each VECTOR_TEXT_ALIGN_OPTIONS as o (o.value)}
+        <button type="button" class={buttonClass} aria-label="Align {o.label}" aria-pressed={panel.align === o.value} onclick={() => applyVectorParagraphStyle(controller, { align: o.value as VectorTextAlign })}>{o.label}</button>
+      {/each}
+    </div>
+    {#if panel.target !== 'defaults' && panel.ids.length === 1}
+      <div class="flex flex-wrap items-center gap-1">
+        <button type="button" class={buttonClass} aria-pressed={panel.frame === 'point'} title="Point text: no wrapping" onclick={() => controller.setTextFrame(panel.ids[0], { kind: 'point' })}>Point</button>
+        <button type="button" class={buttonClass} aria-pressed={panel.frame === 'area'} title="Area text: wraps in a box" onclick={() => controller.setTextFrame(panel.ids[0], { kind: 'area' })}>Area</button>
+      </div>
+    {/if}
+    <div class="flex flex-wrap items-center gap-1">
+      <button
+        type="button"
+        class={buttonClass}
+        data-vector-text-action="type-on-path"
+        disabled={!panel.pathId}
+        title={panel.pathId ? 'Type on a Path: set text along the selected path' : 'Select a path to set text along it'}
+        onclick={typeOnPath}>Type on path</button
+      >
+      <button
+        type="button"
+        class={buttonClass}
+        data-vector-text-action="create-outlines"
+        disabled={panel.target !== 'nodes' || !panel.outlines}
+        title={panel.outlines ? 'Create Outlines: turn the text into paths' : 'Create Outlines needs a font with outlines (load one)'}
+        onclick={() => controller.createOutlines({ ids: panel.ids })}>Create outlines</button
+      >
+    </div>
+  </div>
+{/if}

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

@@ -0,0 +1,16 @@
+import { type VectorEditorController } from '@pixerate/editor/vector';
+/**
+ * Character and paragraph style of text: family, weight, size, italic, underline, strike-through,
+ * tracking, leading, alignment and point / area text. It edits the selected characters while text
+ * is being edited, else the selected text, else the defaults for new text. Type on a Path turns a
+ * selected path into path text, and Create Outlines turns text into paths (with an outline
+ * shaper). Each change is one undo step.
+ */
+interface Props {
+    controller: VectorEditorController;
+    class?: string;
+}
+declare const VectorTextPanel: import("svelte").Component<Props, {}, "">;
+type VectorTextPanel = ReturnType<typeof VectorTextPanel>;
+export default VectorTextPanel;
+//# sourceMappingURL=VectorTextPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VectorTextPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorTextPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAMH,KAAK,sBAAsB,EAE5B,MAAM,yBAAyB,CAAC;AAIjC;;;;;;GAMG;AACH,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuGH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/vector/VectorToolbar.svelte

@@ -9,6 +9,8 @@
     VECTOR_FILL_GAP,
     vectorToolLabel,
     isVectorMaskGroup,
+    vectorPolarAngles,
+    vectorPolarIncrementOf,
     type VectorEditorController,
     type VectorTool
   } from '@pixerate/editor/vector';
@@ -130,6 +132,17 @@
       >
         Snap
       </button>
+      <select
+        data-vector-polar=""
+        aria-label="Polar tracking increment"
+        title="Polar tracking: the angles drawn points snap to from where they leave"
+        class="h-8 rounded-md border border-border bg-background px-1 text-xs"
+        value={String(vectorPolarIncrementOf(view.snap.angles) ?? '')}
+        onchange={(e) => controller.setSnap({ angles: vectorPolarAngles(Number(e.currentTarget.value)) })}
+      >
+        {#if vectorPolarIncrementOf(view.snap.angles) === null}<option value="">Custom</option>{/if}
+        {#each [90, 45, 30, 15] as n (n)}<option value={String(n)}>{n}°</option>{/each}
+      </select>
     </div>
   {/if}
   {#if showPathEdit}

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

@@ -1 +1 @@
-{"version":3,"file":"VectorToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAUH,KAAK,sBAAsB,EAC3B,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAMjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoJH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"VectorToolbar.svelte.d.ts","sourceRoot":"","sources":["../../src/vector/VectorToolbar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAYH,KAAK,sBAAsB,EAC3B,KAAK,UAAU,EAChB,MAAM,yBAAyB,CAAC;AAMjC,UAAU,KAAK;IACb,UAAU,EAAE,sBAAsB,CAAC;IACnC,oCAAoC;IACpC,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwJH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/vector/index.d.ts

@@ -9,6 +9,12 @@ export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
 export { default as VectorEffectsPanel } from "./VectorEffectsPanel.svelte";
 export { default as VectorEnvelopePanel } from "./VectorEnvelopePanel.svelte";
 export { default as VectorMaskPanel } from "./VectorMaskPanel.svelte";
+export { default as VectorTextPanel } from "./VectorTextPanel.svelte";
+export { default as VectorSymbolsPanel } from "./VectorSymbolsPanel.svelte";
+export { default as VectorConstraintsPanel } from "./VectorConstraintsPanel.svelte";
+export { default as VectorFramePanel } from "./VectorFramePanel.svelte";
+export { default as VectorConnectorPanel } from "./VectorConnectorPanel.svelte";
+export { default as VectorTextElement } from "./VectorTextElement.svelte";
 export { default as VectorMaskedNodes } from "./VectorMaskedNodes.svelte";
 export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";
 export { default as VectorGradientDefs } from "./VectorGradientDefs.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,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,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,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,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

@@ -6,6 +6,12 @@ export { default as VectorStylePanel } from "./VectorStylePanel.svelte";
 export { default as VectorEffectsPanel } from "./VectorEffectsPanel.svelte";
 export { default as VectorEnvelopePanel } from "./VectorEnvelopePanel.svelte";
 export { default as VectorMaskPanel } from "./VectorMaskPanel.svelte";
+export { default as VectorTextPanel } from "./VectorTextPanel.svelte";
+export { default as VectorSymbolsPanel } from "./VectorSymbolsPanel.svelte";
+export { default as VectorConstraintsPanel } from "./VectorConstraintsPanel.svelte";
+export { default as VectorFramePanel } from "./VectorFramePanel.svelte";
+export { default as VectorConnectorPanel } from "./VectorConnectorPanel.svelte";
+export { default as VectorTextElement } from "./VectorTextElement.svelte";
 export { default as VectorMaskedNodes } from "./VectorMaskedNodes.svelte";
 export { default as VectorSceneNodes } from "./VectorSceneNodes.svelte";
 export { default as VectorGradientDefs } from "./VectorGradientDefs.svelte";

package/package.json

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