@pixerate/editor 0.192.0 → 0.193.0

package/dist/{chunk-TXYXF32N.js → chunk-ZIDUPSP4.js}

@@ -61,6 +61,7 @@ import {
   WARP_STYLES,
   applyMatrix,
   bezierToSubpaths,
+  drawTextFragment,
   ellipseSubpath,
   evalWarpMesh,
   expandVectorCorners,
@@ -70,7 +71,6 @@ import {
   identityWarpMesh,
   invertMatrix,
   isIdentityMatrix,
-  isTextSpace,
   isValidWarpMesh,
   layoutText,
   mapWarpMeshPoints,
@@ -87,9 +87,10 @@ import {
   textDecorations,
   textFragmentOutline,
   textRectPath,
+  transformTextRect,
   translateMatrix,
   warpPresetMesh
-} from "./chunk-LPIKXPBM.js";
+} from "./chunk-GHCXLQ47.js";
 import {
   bezierPathBounds,
   outlineStroke,
@@ -2923,6 +2924,7 @@ function combineCoverage(a, b, op, n) {
 }
 
 // src/text/types.ts
+var TEXT_ORIENTATIONS = ["horizontal", "vertical"];
 var TEXT_ALIGNS = ["left", "center", "right", "justify"];
 
 // src/image-editor/layers/model.ts
@@ -4301,9 +4303,9 @@ function inkBounds(layout) {
   let b = null;
   for (const l of layout.lines) {
     for (const f of l.fragments) {
-      const pad = f.style.fontSize * 0.5;
+      const pad = f.style.fontSize * (l.matrix ? 1 : 0.5);
       const w = f.carets[f.carets.length - 1];
-      const r = { x: f.x - pad, y: f.y - l.ascent - pad, width: w + 2 * pad, height: l.ascent + l.descent + 2 * pad };
+      const r = transformTextRect(l.matrix, { x: f.x - pad, y: l.baseline - l.ascent - pad + Math.min(0, f.y - l.baseline), width: w + 2 * pad, height: l.ascent + l.descent + 2 * pad + Math.abs(f.y - l.baseline) });
       if (!b) b = r;
       else {
         const x0 = Math.min(b.x, r.x);
@@ -4389,9 +4391,7 @@ function renderOnCanvas(layer, shaper, region, env) {
       const [r, g, b] = rgbOf(f.style.color);
       ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
       ctx.globalAlpha = f.style.opacity ?? 1;
-      const s = layer.text.slice(f.start, f.end);
-      if (!f.spaced) shaper.draw(ctx, s, f.font, f.x, f.y);
-      else for (let k = 0; k < s.length; k++) if (!isTextSpace(s[k])) shaper.draw(ctx, s[k], f.font, f.x + f.carets[k], f.y);
+      drawTextFragment(ctx, shaper, layer.text, f);
       for (const d of textDecorations(f, l)) ctx.fillRect(d.x, d.y, d.width, d.height);
     }
   }
@@ -4426,7 +4426,7 @@ function num(v, path, min, max) {
   if (!isNum2(v) || v < min || v > max) fail3(`${path} must be a number from ${min} to ${max}, got ${JSON.stringify(v)}.`);
   return v;
 }
-var TEXT_STYLE_FIELDS = ["fontFamily", "fontWeight", "italic", "fontSize", "color", "opacity", "tracking", "leading", "baselineShift", "underline", "strikethrough", "postScriptName"];
+var TEXT_STYLE_FIELDS = ["fontFamily", "fontWeight", "italic", "fontSize", "color", "opacity", "tracking", "leading", "baselineShift", "underline", "strikethrough", "upright", "postScriptName"];
 function patchTextStyle(base, patch, path = "style") {
   const out = { ...base };
   const o = out;
@@ -4452,6 +4452,7 @@ function patchTextStyle(base, patch, path = "style") {
       case "italic":
       case "underline":
       case "strikethrough":
+      case "upright":
         if (typeof v !== "boolean" && v !== null) fail3(`${path}.${k} must be true or false.`);
         if (v) o[k] = true;
         else delete o[k];
@@ -4530,6 +4531,10 @@ function typeLayerName(text3) {
   const line = text3.split("\n").find((l) => l.trim()) ?? "";
   return line.trim().slice(0, 32) || "Text";
 }
+function textOrientation(v, path = "orientation") {
+  if (!TEXT_ORIENTATIONS.includes(v)) fail3(`${path} must be ${TEXT_ORIENTATIONS.join(" or ")}, got ${JSON.stringify(v)}.`);
+  return v;
+}
 function createTypeLayer(init, env, id = newLayerId(), lenient = false) {
   const text3 = normalizeText(init.text);
   const layer = {
@@ -4543,6 +4548,7 @@ function createTypeLayer(init, env, id = newLayerId(), lenient = false) {
     runs: fitRuns(init.runs, text3.length, DEFAULT_TEXT_STYLE),
     paragraphs: fitParagraphRuns(init.paragraphs ?? [{ length: text3.length, style: {} }], text3),
     frame: init.frame,
+    ...init.orientation === "vertical" ? { orientation: "vertical" } : {},
     surface: emptySurface(4),
     offset: { x: 0, y: 0 }
   };
@@ -4557,6 +4563,7 @@ function updateTypeLayer(layers, id, change, env, action = "edit it") {
   const patch = change(current);
   const next = { ...current, ...patch };
   if (!("annotation" in patch)) delete next.annotation;
+  if (next.orientation !== "vertical") delete next.orientation;
   if ("text" in patch || "runs" in patch) next.runs = fitRuns(next.runs, next.text.length, current.runs[0]?.style ?? DEFAULT_TEXT_STYLE);
   if (!next.runs.length) next.runs = [{ length: 0, style: styleAt(current.runs, 0, DEFAULT_TEXT_STYLE) }];
   if ("text" in patch || "paragraphs" in patch) next.paragraphs = fitParagraphRuns(next.paragraphs, next.text);
@@ -4586,7 +4593,7 @@ function typeFrame(layer, shaper) {
   return { x: b.x, y: b.y, width: Math.max(b.width, 1), height: Math.max(b.height, 1) };
 }
 function typeAsPixelLayer(layer) {
-  const { text: _t, runs: _r, paragraphs: _p, frame: _f, transform: _m, antiAlias: _a, rendering: _g, missingFonts: _mf, annotation: _an, psd: _psd, type: _ty, ...rest } = layer;
+  const { text: _t, runs: _r, paragraphs: _p, frame: _f, orientation: _o, transform: _m, antiAlias: _a, rendering: _g, missingFonts: _mf, annotation: _an, psd: _psd, type: _ty, ...rest } = layer;
   return { ...rest, type: "pixel", surface: layer.surface, offset: { x: 0, y: 0 } };
 }
 function toTextSpace(layer, p) {
@@ -5952,6 +5959,7 @@ function serializeType(layer, base, ctx) {
     paragraphs: JSON.parse(JSON.stringify(layer.paragraphs)),
     frame: { ...layer.frame }
   };
+  if (layer.orientation === "vertical") out.orientation = "vertical";
   if (layer.transform) out.transform = [...layer.transform];
   if (layer.antiAlias === false) out.antiAlias = false;
   if (layer.fillOpacity !== void 0 && layer.fillOpacity !== 1) out.fillOpacity = layer.fillOpacity;
@@ -5998,6 +6006,7 @@ function readType(r, base, ctx) {
     };
     if (!layer.runs.length) layer.runs = [{ length: 0, style: runs[0]?.style ?? DEFAULT_TEXT_STYLE }];
     if (m) layer.transform = m;
+    if (r.orientation === "vertical") layer.orientation = "vertical";
     if (r.antiAlias === false) layer.antiAlias = false;
     if (typeof r.fillOpacity === "number" && r.fillOpacity !== 1) layer.fillOpacity = num2(r.fillOpacity, 0, 1, 1);
     if (Array.isArray(r.missingFonts)) layer.missingFonts = r.missingFonts.filter((x) => typeof x === "string");
@@ -8444,7 +8453,7 @@ function merged(levels) {
   }
   return E.dict(items);
 }
-function charStyle(d, fonts, notes) {
+function charStyle(d, fonts, notes, vertical = false) {
   const n = (k) => eNum(eGet(d, k));
   const flag = (k) => eBool(eGet(d, k));
   const s = { ...DEFAULT_TEXT_STYLE };
@@ -8469,6 +8478,8 @@ function charStyle(d, fonts, notes) {
   if (shift) s.baselineShift = shift;
   if (flag("Underline")) s.underline = true;
   if (flag("Strikethrough")) s.strikethrough = true;
+  if (vertical && n("BaselineDirection") === 1) s.upright = true;
+  if (vertical && n("BaselineDirection") === 3) notes.add("tate-chu-yoko (horizontal-in-vertical) text is set as the rest of the column");
   if (flag("FauxBold")) notes.add("faux bold is drawn as the regular weight");
   if (flag("FauxItalic")) notes.add("faux italic is drawn upright");
   if ((n("HorizontalScale") ?? 1) !== 1 || (n("VerticalScale") ?? 1) !== 1) notes.add("horizontal and vertical character scaling is drawn at 100 %");
@@ -8523,7 +8534,7 @@ function typeFromTySh(data, notes) {
   const anti = descGet(t.text, "AntA");
   const antiAlias = !(anti?.type === "enum" && (anti.value === "Anno" || anti.value === "antiAliasNone"));
   const ornt = descGet(t.text, "Ornt");
-  if (ornt?.type === "enum" && ornt.value === "Vrtc") notes.add("vertical type is laid out horizontally");
+  const vertical = ornt?.type === "enum" && ornt.value === "Vrtc";
   if (t.warp) {
     const style = descGet(t.warp, "warpStyle");
     if (style?.type === "enum" && style.value !== "warpNone") notes.add("warped text is drawn without its warp when edited");
@@ -8578,7 +8589,7 @@ function typeFromTySh(data, notes) {
         const paraDefault = paraBases[paraAt(at)]?.charDefault;
         at += slens[i] ?? 0;
         const d = merged([eGet(sheet, "StyleSheetData"), eGet(own, "StyleSheetData"), eGet(paraDefault, "StyleSheetData"), eGet(normalStyle, "StyleSheetData")]);
-        return { length: slens[i] ?? 0, style: charStyle(d, fonts, notes) };
+        return { length: slens[i] ?? 0, style: charStyle(d, fonts, notes, vertical) };
       });
     }
     const shape = eArray(ePath(engine, ["EngineDict", "Rendered", "Shapes", "Children"]))[0];
@@ -8595,15 +8606,16 @@ function typeFromTySh(data, notes) {
     runs: fitRuns(runs, text3.length, DEFAULT_TEXT_STYLE),
     paragraphs: fitParagraphRuns(paragraphs, text3),
     frame,
+    orientation: vertical ? "vertical" : "horizontal",
     transform,
     antiAlias,
     fonts: [...new Set(fonts.filter(Boolean))]
   };
 }
 function typeSignature(layer) {
-  return JSON.stringify([layer.text, layer.runs, layer.paragraphs, layer.frame, layer.transform ?? null, layer.antiAlias ?? true]);
+  return JSON.stringify([layer.text, layer.runs, layer.paragraphs, layer.frame, layer.transform ?? null, layer.antiAlias ?? true, ...layer.orientation === "vertical" ? ["vertical"] : []]);
 }
-function styleSheetData(s, font) {
+function styleSheetData(s, font, vertical = false) {
   const [r, g, b] = [1, 3, 5].map((i) => parseInt(s.color.slice(i, i + 2), 16) / 255);
   return E.dict([
     ["Font", E.int(font)],
@@ -8621,6 +8633,7 @@ function styleSheetData(s, font) {
     ["FontCaps", E.int(0)],
     ["Underline", E.bool(Boolean(s.underline))],
     ["Strikethrough", E.bool(Boolean(s.strikethrough))],
+    ["BaselineDirection", E.int(vertical && s.upright ? 1 : 2)],
     ["Ligatures", E.bool(true)],
     ["DLigatures", E.bool(false)],
     ["FillFlag", E.bool(true)],
@@ -8668,10 +8681,11 @@ function buildEngineData(layer, template) {
     return fonts.length - 1;
   };
   const runs = fitRuns(layer.runs, layer.text.length, DEFAULT_TEXT_STYLE);
+  const vertical = layer.orientation === "vertical";
   const sruns = [];
   const slens = [];
   runs.forEach((r, i) => {
-    sruns.push(E.dict([["StyleSheet", E.dict([["StyleSheetData", styleSheetData(r.style, fontIndex(postScriptFor(r.style)))]])]]));
+    sruns.push(E.dict([["StyleSheet", E.dict([["StyleSheetData", styleSheetData(r.style, fontIndex(postScriptFor(r.style)), vertical)]])]]));
     slens.push(E.int(r.length + (i === runs.length - 1 ? 1 : 0)));
   });
   if (!runs.length) {
@@ -8718,10 +8732,10 @@ function buildEngineData(layer, template) {
   const child = E.dict([
     ["ShapeType", E.int(shapeType)],
     ["Procession", E.int(0)],
-    ["Lines", E.dict([["WritingDirection", E.int(0)], ["Children", E.array([])]])],
+    ["Lines", E.dict([["WritingDirection", E.int(vertical ? 2 : 0)], ["Children", E.array([])]])],
     ["Cookie", E.dict([["Photoshop", photoshop]])]
   ]);
-  eSet(dict, "Rendered", E.dict([["Version", E.int(1)], ["Shapes", E.dict([["WritingDirection", E.int(0)], ["Children", E.array([child])]])]]));
+  eSet(dict, "Rendered", E.dict([["Version", E.int(1)], ["Shapes", E.dict([["WritingDirection", E.int(vertical ? 2 : 0)], ["Children", E.array([child])]])]]));
   const fontSet = E.array(fonts.map(fontEntry));
   for (const key of ["ResourceDict", "DocumentResources"]) {
     let rd = eGet(e, key);
@@ -8776,7 +8790,7 @@ function tyShForLayer(layer) {
   };
   set("Txt ", { type: "TEXT", value: layer.text.replace(/\n/g, "\r") });
   if (!descGet(text3, "textGridding")) set("textGridding", { type: "enum", typeId: "textGridding", value: "None" });
-  set("Ornt", { type: "enum", typeId: "Ornt", value: "Hrzn" });
+  set("Ornt", { type: "enum", typeId: "Ornt", value: layer.orientation === "vertical" ? "Vrtc" : "Hrzn" });
   set("AntA", { type: "enum", typeId: "Annt", value: layer.antiAlias === false ? "Anno" : "AnSm" });
   const [l, t, r, b] = inkBounds2(layer);
   const rect = (cls) => ({
@@ -10594,6 +10608,7 @@ function importType(ctx, rec, name, notes, props) {
     rendering: "stored"
   };
   if (!data.antiAlias) layer.antiAlias = false;
+  if (data.orientation === "vertical") layer.orientation = "vertical";
   layer.psd = { tySh: block.data.slice(), signature: typeSignature(layer) };
   const fill = u8Block(rec, "iOpa");
   if (fill !== void 0 && fill < 255) layer.fillOpacity = percent(fill);
@@ -12141,6 +12156,7 @@ export {
   removeAlpha,
   flattenPath,
   rasterizeCoverage,
+  TEXT_ORIENTATIONS,
   TEXT_ALIGNS,
   MAX_EFFECT_ANIMATION_MS,
   SHAPE_OPERATIONS,
@@ -12246,6 +12262,7 @@ export {
   requireTypeLayer,
   normalizeText,
   typeLayerName,
+  textOrientation,
   createTypeLayer,
   updateTypeLayer,
   replaceTextRange,

package/dist/image-editor/controller.d.cts

@@ -12,7 +12,7 @@ import { type RefineEdgeParams } from './selection/refine.cjs';
 import { type LayerMaskProps } from './selection/layer-mask.cjs';
 import { type AlphaChannel } from './selection/channels.cjs';
 import type { AdjustmentLayerMask } from './types.cjs';
-import { type LayerBlendMode, type ImageLayer, type LayerFilter, type LayerTarget, type PixelLayer, type RasterMask, type SmartContents, type SmartFilter, type SmartPlacement, type LiveShape, type ShapeFillRule, type VectorMask, type ShapeOperation, type ShapePaint, type ShapeStroke, type ParagraphStyle, type TextStyle, type TypeLayer, type ImageEffectAnimation } from './layers/model.cjs';
+import { type LayerBlendMode, type ImageLayer, type LayerFilter, type LayerTarget, type PixelLayer, type RasterMask, type SmartContents, type SmartFilter, type SmartPlacement, type LiveShape, type ShapeFillRule, type VectorMask, type ShapeOperation, type ShapePaint, type ShapeStroke, type ParagraphStyle, type TextStyle, type TextOrientation, type TypeLayer, type ImageEffectAnimation } from './layers/model.cjs';
 import { type TextLayout, type TextShaper } from './layers/text.cjs';
 import type { VectorSubpath } from '../vector/types.cjs';
 import { EffectsSlot } from '../effects/helpers.cjs';
@@ -282,8 +282,6 @@ export interface ShapeLayerInfo {
 /** A new type layer: its text, where it goes, and its character and paragraph style. */
 /** A Type Mask: text laid out like `TextLayerInit` (no layer is made), selected by `mode`. */
 export interface TypeMaskInit extends Omit<TextLayerInit, keyof LayerPlacement | 'name' | 'opacity' | 'blend'> {
-    /** Horizontal (default) or vertical: the characters stacked top to bottom, centred on `x`. */
-    orientation?: 'horizontal' | 'vertical';
     mode?: SelectionMode;
     /** Feather radius in px (default 0). */
     feather?: number;
@@ -304,6 +302,11 @@ export interface TextLayerInit extends LayerPlacement {
         width: number;
         height: number;
     };
+    /**
+     * Default `horizontal`. `vertical`: columns running down, right to left (Photoshop's Vertical Type
+     * tool); (`x`, `y`) is then the top of the first column's centre line, or the box's top-left.
+     */
+    orientation?: TextOrientation;
     /** Character style of the whole text (default 24 px sans-serif, the foreground colour). */
     style?: Partial<TextStyle>;
     paragraph?: ParagraphStyle;
@@ -329,9 +332,10 @@ export interface TypeLayerInfo {
         style: ParagraphStyle;
     }>;
     frame: TypeLayer['frame'];
+    orientation: TextOrientation;
     /** Text space → document. */
     transform: AffineMatrix;
-    /** Laid-out lines: text range, baseline (text space) and width; empty without a shaper. */
+    /** Laid-out lines (vertical text: columns): text range, baseline (line space: the column's centre for vertical text) and length; empty without a shaper. */
     lines: Array<{
         start: number;
         end: number;
@@ -1817,8 +1821,8 @@ export declare class ImageEditorController {
     /**
      * Type Mask (horizontal or vertical): a selection in the shape of `text`, laid out and drawn as
      * `addTextLayer` would place it (font, size, tracking, box, rotation), combined with the current
-     * selection by `mode`. Vertical type stacks the characters top to bottom, centred on `x`. No
-     * layer is added. One undo step. Returns whether anything is selected.
+     * selection by `mode`. Vertical type is laid out as vertical type layers are: columns down from
+     * (`x`, `y`), right to left, CJK upright and Latin turned. No layer is added. One undo step. Returns whether anything is selected.
      */
     selectTextShape(init: TypeMaskInit): boolean;
     /** A type layer laid out and drawn from `init` (not added): the shared part of `addTextLayer` and the type masks. */
@@ -1853,6 +1857,12 @@ export declare class ImageEditorController {
         width: number;
         height: number;
     }, commitToHistory?: boolean): TypeLayerInfo;
+    /**
+     * Horizontal ↔ vertical type (Type › Orientation): the text, styles, frame and origin stay; the
+     * lines become columns running down, stacked right to left, or back. One undo step. Returns the
+     * layer.
+     */
+    setTextOrientation(id: string, orientation: TextOrientation, commitToHistory?: boolean): TypeLayerInfo;
     /**
      * Convert to Shape: the text's glyph outlines become a shape layer with the same id, name and
      * layer properties (needs a shaper that gives outlines). The fill is the first run's colour;

package/dist/image-editor/controller.d.ts

@@ -12,7 +12,7 @@ import { type RefineEdgeParams } from './selection/refine.js';
 import { type LayerMaskProps } from './selection/layer-mask.js';
 import { type AlphaChannel } from './selection/channels.js';
 import type { AdjustmentLayerMask } from './types.js';
-import { type LayerBlendMode, type ImageLayer, type LayerFilter, type LayerTarget, type PixelLayer, type RasterMask, type SmartContents, type SmartFilter, type SmartPlacement, type LiveShape, type ShapeFillRule, type VectorMask, type ShapeOperation, type ShapePaint, type ShapeStroke, type ParagraphStyle, type TextStyle, type TypeLayer, type ImageEffectAnimation } from './layers/model.js';
+import { type LayerBlendMode, type ImageLayer, type LayerFilter, type LayerTarget, type PixelLayer, type RasterMask, type SmartContents, type SmartFilter, type SmartPlacement, type LiveShape, type ShapeFillRule, type VectorMask, type ShapeOperation, type ShapePaint, type ShapeStroke, type ParagraphStyle, type TextStyle, type TextOrientation, type TypeLayer, type ImageEffectAnimation } from './layers/model.js';
 import { type TextLayout, type TextShaper } from './layers/text.js';
 import type { VectorSubpath } from '../vector/types.js';
 import { EffectsSlot } from '../effects/helpers.js';
@@ -282,8 +282,6 @@ export interface ShapeLayerInfo {
 /** A new type layer: its text, where it goes, and its character and paragraph style. */
 /** A Type Mask: text laid out like `TextLayerInit` (no layer is made), selected by `mode`. */
 export interface TypeMaskInit extends Omit<TextLayerInit, keyof LayerPlacement | 'name' | 'opacity' | 'blend'> {
-    /** Horizontal (default) or vertical: the characters stacked top to bottom, centred on `x`. */
-    orientation?: 'horizontal' | 'vertical';
     mode?: SelectionMode;
     /** Feather radius in px (default 0). */
     feather?: number;
@@ -304,6 +302,11 @@ export interface TextLayerInit extends LayerPlacement {
         width: number;
         height: number;
     };
+    /**
+     * Default `horizontal`. `vertical`: columns running down, right to left (Photoshop's Vertical Type
+     * tool); (`x`, `y`) is then the top of the first column's centre line, or the box's top-left.
+     */
+    orientation?: TextOrientation;
     /** Character style of the whole text (default 24 px sans-serif, the foreground colour). */
     style?: Partial<TextStyle>;
     paragraph?: ParagraphStyle;
@@ -329,9 +332,10 @@ export interface TypeLayerInfo {
         style: ParagraphStyle;
     }>;
     frame: TypeLayer['frame'];
+    orientation: TextOrientation;
     /** Text space → document. */
     transform: AffineMatrix;
-    /** Laid-out lines: text range, baseline (text space) and width; empty without a shaper. */
+    /** Laid-out lines (vertical text: columns): text range, baseline (line space: the column's centre for vertical text) and length; empty without a shaper. */
     lines: Array<{
         start: number;
         end: number;
@@ -1817,8 +1821,8 @@ export declare class ImageEditorController {
     /**
      * Type Mask (horizontal or vertical): a selection in the shape of `text`, laid out and drawn as
      * `addTextLayer` would place it (font, size, tracking, box, rotation), combined with the current
-     * selection by `mode`. Vertical type stacks the characters top to bottom, centred on `x`. No
-     * layer is added. One undo step. Returns whether anything is selected.
+     * selection by `mode`. Vertical type is laid out as vertical type layers are: columns down from
+     * (`x`, `y`), right to left, CJK upright and Latin turned. No layer is added. One undo step. Returns whether anything is selected.
      */
     selectTextShape(init: TypeMaskInit): boolean;
     /** A type layer laid out and drawn from `init` (not added): the shared part of `addTextLayer` and the type masks. */
@@ -1853,6 +1857,12 @@ export declare class ImageEditorController {
         width: number;
         height: number;
     }, commitToHistory?: boolean): TypeLayerInfo;
+    /**
+     * Horizontal ↔ vertical type (Type › Orientation): the text, styles, frame and origin stay; the
+     * lines become columns running down, stacked right to left, or back. One undo step. Returns the
+     * layer.
+     */
+    setTextOrientation(id: string, orientation: TextOrientation, commitToHistory?: boolean): TypeLayerInfo;
     /**
      * Convert to Shape: the text's glyph outlines become a shape layer with the same id, name and
      * layer properties (needs a shaper that gives outlines). The fill is the first run's colour;