@pixerate/editor-svelte 0.140.0 → 0.142.0

package/dist/image-editor/SelectionOptionsBar.svelte

@@ -203,6 +203,46 @@
   {#if options.tool === 'polygon'}
     <p class="text-muted-foreground">Click to add corners (Shift for 45°), drag for a free-hand stretch; double-click, Enter or a click on the first corner closes it, Backspace removes a corner, Escape cancels.</p>
   {/if}
+  {#if options.tool === 'type' || options.tool === 'type-vertical'}
+    <div data-testid="type-mask-options" class="flex flex-col gap-2">
+      <p class="text-muted-foreground">
+        {options.tool === 'type-vertical' ? 'Click where the column starts: the letters are stacked down from there, centred on the click.' : 'Click where the text starts (its baseline).'} Shift-click adds, Alt-click subtracts.
+      </p>
+      <label class="flex items-center gap-1 text-muted-foreground">
+        Text
+        <input
+          type="text"
+          aria-label="Type mask text"
+          value={options.typeText ?? 'Type'}
+          oninput={(e) => set({ typeText: (e.currentTarget as HTMLInputElement).value })}
+          class="min-w-0 flex-1 bg-background border border-border rounded px-1 py-0.5 text-foreground"
+        />
+      </label>
+      <label class="flex items-center gap-1 text-muted-foreground">
+        Size
+        <input
+          type="number"
+          min="1"
+          step="1"
+          aria-label="Type mask size"
+          value={options.typeSize ?? 72}
+          oninput={(e) => set({ typeSize: Math.max(1, Number((e.currentTarget as HTMLInputElement).value) || 1) })}
+          class={numberInput}
+        />
+        px
+      </label>
+      <label class="flex items-center gap-1 text-muted-foreground">
+        Font
+        <input
+          type="text"
+          aria-label="Type mask font"
+          value={options.typeFamily ?? 'sans-serif'}
+          oninput={(e) => set({ typeFamily: (e.currentTarget as HTMLInputElement).value })}
+          class="min-w-0 flex-1 bg-background border border-border rounded px-1 py-0.5 text-foreground"
+        />
+      </label>
+    </div>
+  {/if}
   {#if options.tool === 'range'}
     <div data-testid="color-range-options" class="flex flex-col gap-2">
       <p class="text-muted-foreground">Click a colour to select it; Shift-click adds a colour, Alt-click removes one.</p>

package/dist/image-editor/TypeOptionsBar.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
   import ImageColor from './controls/ImageColor.svelte';
   import { imageChipClass } from './styles.js';
-  import type { ImageEditorController, TextAlign, TextEditSession, TextStyle, TypeToolOptions } from '@pixerate/editor/image-editor';
-  import { TEXT_ALIGNS } from '@pixerate/editor/image-editor';
+  import type { ImageEditorController, TextAlign, TextEditSession, TextOrientation, TextStyle, TypeToolOptions } from '@pixerate/editor/image-editor';
+  import { TEXT_ALIGNS, TEXT_ORIENTATIONS } from '@pixerate/editor/image-editor';
   import { untrack } from 'svelte';
 
   /**
-   * The type tool's options: font family (from the editor's fonts), size, bold, italic, colour and
-   * alignment. While text is being edited they style the selection (or the whole text); with a
+   * The type tool's options: font family (from the editor's fonts), size, bold, italic, colour,
+   * alignment and orientation (horizontal or vertical type, with upright Latin in vertical text). While text is being edited they style the selection (or the whole text); with a
    * type layer active they style all of it; otherwise they set what the next text uses.
    */
   interface Props {
@@ -32,6 +32,7 @@
     return untrack(() => s.subscribe(() => tick++));
   });
   const ALIGN_LABELS: Record<TextAlign, string> = { left: 'Left', center: 'Centre', right: 'Right', justify: 'Justify' };
+  const ORIENTATION_LABELS: Record<TextOrientation, string> = { horizontal: 'Horizontal', vertical: 'Vertical' };
   
 
   const view = $derived.by(() => {
@@ -45,9 +46,18 @@
       ...(here.fontWeight ? { fontWeight: here.fontWeight } : {}),
       ...(session?.alive ? { italic: Boolean(here.italic), color: here.color ?? options.color } : {}),
     };
+    const typeId = !session && active?.type === 'type' ? active.id : null;
+    // The orientation of the text being edited or the active type layer, else the tool's.
+    const editedId = session?.alive ? session.layerId : typeId;
+    const edited = editedId ? controller.getLayer(editedId) : null;
+    const orientation: TextOrientation = edited?.type === 'type' ? (edited.orientation ?? 'horizontal') : (options.orientation ?? 'horizontal');
+    const upright = Boolean(session?.alive ? here.upright : edited?.type === 'type' && edited.runs[0]?.style.upright);
     return {
       shown,
-      typeId: !session && active?.type === 'type' ? active.id : null,
+      editedId,
+      orientation,
+      upright,
+      typeId,
       missing: active?.type === 'type' ? (active.missingFonts ?? []) : [],
       fonts: controller.listFonts(),
     };
@@ -73,6 +83,24 @@
       error = e instanceof Error ? e.message : String(e);
     }
   }
+  function orient(next: TextOrientation) {
+    onchange({ ...options, orientation: next });
+    try {
+      error = null;
+      if (view.editedId) controller.setTextOrientation(view.editedId, next);
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    }
+  }
+  function toggleUpright() {
+    try {
+      error = null;
+      if (session?.alive) session.setStyle({ upright: !view.upright });
+      else if (view.typeId) controller.setTextStyle(view.typeId, { upright: !view.upright });
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e);
+    }
+  }
   const value = (e: Event) => (e.target as HTMLInputElement).value;
 </script>
 
@@ -108,7 +136,15 @@
       <button type="button" aria-pressed={options.align === a} class={imageChipClass(options.align === a)} onclick={() => style({ align: a })}>{ALIGN_LABELS[a]}</button>
     {/each}
   </div>
-  <p class="text-[10px] text-muted-foreground">Click to type point text, drag for a paragraph box, click text to edit it. Esc finishes.</p>
+  <div class="flex gap-1" role="toolbar" aria-label="Orientation">
+    {#each TEXT_ORIENTATIONS as o (o)}
+      <button type="button" aria-pressed={view.orientation === o} class={imageChipClass(view.orientation === o)} onclick={() => orient(o)}>{ORIENTATION_LABELS[o]}</button>
+    {/each}
+    {#if view.orientation === 'vertical' && view.editedId}
+      <button type="button" aria-pressed={view.upright} class={imageChipClass(view.upright)} title="Set Latin upright, one letter under the other (else turned sideways)" onclick={toggleUpright}>Upright Latin</button>
+    {/if}
+  </div>
+  <p class="text-[10px] text-muted-foreground">Click to type point text (vertical: a column down from the click), drag for a paragraph box, click text to edit it. Esc finishes.</p>
   {#if view.missing.length > 0}
     <p role="status" class="text-amber-600" data-testid="type-missing-fonts">Missing {view.missing.length === 1 ? 'font' : 'fonts'}: {view.missing.join(', ')}</p>
   {/if}

package/dist/image-editor/TypeOptionsBar.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { ImageEditorController, TextEditSession, TypeToolOptions } from '@pixerate/editor/image-editor';
 /**
- * The type tool's options: font family (from the editor's fonts), size, bold, italic, colour and
- * alignment. While text is being edited they style the selection (or the whole text); with a
+ * The type tool's options: font family (from the editor's fonts), size, bold, italic, colour,
+ * alignment and orientation (horizontal or vertical type, with upright Latin in vertical text). While text is being edited they style the selection (or the whole text); with a
  * type layer active they style all of it; otherwise they set what the next text uses.
  */
 interface Props {

package/dist/vector/VectorTextPanel.svelte

@@ -3,6 +3,7 @@
     VECTOR_FONT_WEIGHTS,
     VECTOR_TEXT_ALIGN_OPTIONS,
     applyVectorParagraphStyle,
+    applyVectorTextOrientation,
     applyVectorTextStyle,
     getVectorTextPanel,
     type VectorEditorController,
@@ -12,7 +13,8 @@
 
   /**
    * 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
+   * tracking, leading, alignment, horizontal / vertical orientation (with upright Latin in vertical
+   * text) 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.
@@ -108,6 +110,22 @@
       <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>
+    {#if panel.target !== 'defaults'}
+      <div class="flex flex-wrap items-center gap-1" role="group" aria-label="Orientation">
+        <button type="button" class={buttonClass} aria-pressed={panel.orientation === 'horizontal'} title="Horizontal text: lines left to right" onclick={() => applyVectorTextOrientation(controller, 'horizontal')}>Horizontal</button>
+        <button
+          type="button"
+          class={buttonClass}
+          aria-pressed={panel.orientation === 'vertical'}
+          disabled={!panel.canOrient}
+          title={panel.canOrient ? 'Vertical text: columns top to bottom, right to left' : 'Text on a path cannot be vertical'}
+          onclick={() => applyVectorTextOrientation(controller, 'vertical')}>Vertical</button
+        >
+        {#if panel.orientation === 'vertical'}
+          <button type="button" class={buttonClass} aria-pressed={f.upright === true} title="Set Latin upright, one letter under the other (else turned sideways)" onclick={() => style({ upright: !f.upright })}>Upright Latin</button>
+        {/if}
+      </div>
+    {/if}
     <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>

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

@@ -1,7 +1,8 @@
 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
+ * tracking, leading, alignment, horizontal / vertical orientation (with upright Latin in vertical
+ * text) 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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.140.0",
+  "version": "0.142.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -165,7 +165,7 @@
     "**/*.css"
   ],
   "dependencies": {
-    "@pixerate/editor": "0.191.0"
+    "@pixerate/editor": "0.193.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",