@vectojs/core 0.2.7 → 0.2.9

package/dist/{chunk-HVJHXIKW.mjs → chunk-WT2XZHJQ.mjs}

@@ -701,6 +701,7 @@ var SVGRenderer = class {
 };
 
 // src/renderer/colorParse.ts
+var CACHE_MAX = 1e3;
 var cache = /* @__PURE__ */ new Map();
 var fallbackCtx;
 function fromHex(hex) {
@@ -744,10 +745,17 @@ function fromCanvas(css) {
 }
 function parseColorToRGBA(css) {
   const hit = cache.get(css);
-  if (hit) return hit;
+  if (hit) {
+    cache.delete(css);
+    cache.set(css, hit);
+    return hit;
+  }
   const trimmed = css.trim();
   const rgba = (trimmed[0] === "#" ? fromHex(trimmed) : null) ?? fromRgbFunc(trimmed) ?? fromCanvas(trimmed) ?? [0, 0, 0, 1];
   cache.set(css, rgba);
+  if (cache.size > CACHE_MAX) {
+    cache.delete(cache.keys().next().value);
+  }
   return rgba;
 }
 
@@ -825,6 +833,19 @@ void main() {
   vec4 t = texture(u_tex, v_uv);
   outColor = vec4(t.rgb * v_tint.rgb, t.a * v_tint.a);
 }`;
+var CIRCLE_QUAD_FRAG = `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+in vec4 v_tint;
+out vec4 outColor;
+void main() {
+  vec2 c = v_uv - 0.5;
+  float d = length(c);
+  float aa = fwidth(d);
+  float alpha = 1.0 - smoothstep(0.5 - aa, 0.5, d);
+  if (alpha <= 0.0) discard;
+  outColor = vec4(v_tint.rgb, v_tint.a * alpha);
+}`;
 var MSDF_FRAG = `#version 300 es
 precision mediump float;
 uniform sampler2D u_tex;
@@ -891,7 +912,9 @@ function createWebGLPointRenderer(canvas) {
   const rectProgram = link(gl, RECT_VERT, RECT_FRAG);
   const spriteProgram = link(gl, SPRITE_VERT, SPRITE_FRAG);
   const msdfProgram = link(gl, SPRITE_VERT, MSDF_FRAG);
-  if (!pointProgram || !rectProgram || !spriteProgram || !msdfProgram) return null;
+  const circleQuadProgram = link(gl, SPRITE_VERT, CIRCLE_QUAD_FRAG);
+  if (!pointProgram || !rectProgram || !spriteProgram || !msdfProgram || !circleQuadProgram)
+    return null;
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
   const pAPos = gl.getAttribLocation(pointProgram, "a_pos");
@@ -951,6 +974,20 @@ function createWebGLPointRenderer(canvas) {
   gl.vertexAttribPointer(gAUv, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 8);
   gl.enableVertexAttribArray(gATint);
   gl.vertexAttribPointer(gATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
+  const cAPos = gl.getAttribLocation(circleQuadProgram, "a_pos");
+  const cAUv = gl.getAttribLocation(circleQuadProgram, "a_uv");
+  const cATint = gl.getAttribLocation(circleQuadProgram, "a_tint");
+  const cURes = gl.getUniformLocation(circleQuadProgram, "u_resolution");
+  const circleQuadBuffer = gl.createBuffer();
+  const circleQuadVAO = gl.createVertexArray();
+  gl.bindVertexArray(circleQuadVAO);
+  gl.bindBuffer(gl.ARRAY_BUFFER, circleQuadBuffer);
+  gl.enableVertexAttribArray(cAPos);
+  gl.vertexAttribPointer(cAPos, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 0);
+  gl.enableVertexAttribArray(cAUv);
+  gl.vertexAttribPointer(cAUv, 2, gl.FLOAT, false, SPRITE_VERT_STRIDE, 8);
+  gl.enableVertexAttribArray(cATint);
+  gl.vertexAttribPointer(cATint, 4, gl.FLOAT, false, SPRITE_VERT_STRIDE, 16);
   gl.bindVertexArray(null);
   let texture = null;
   let textureSource = null;
@@ -965,10 +1002,16 @@ function createWebGLPointRenderer(canvas) {
   let spriteCount = 0;
   let glyphData = new Float32Array(FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE * 1024);
   let glyphCount = 0;
+  let circleQuadData = new Float32Array(
+    FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE * 64
+  );
+  let circleQuadCount = 0;
   let logicalW = 0;
   let logicalH = 0;
   let dpr = 1;
   let destroyed = false;
+  const pointSizeRange = typeof gl.getParameter === "function" ? gl.getParameter(gl.ALIASED_POINT_SIZE_RANGE) : null;
+  const maxPointSize = pointSizeRange ? pointSizeRange[1] : Infinity;
   const drawGlyphs = () => {
     if (glyphCount === 0 || !msdfTexture) return;
     const floats = glyphCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
@@ -1001,6 +1044,7 @@ function createWebGLPointRenderer(canvas) {
       rectCount = 0;
       spriteCount = 0;
       glyphCount = 0;
+      circleQuadCount = 0;
       gl.clearColor(0, 0, 0, 0);
       gl.clear(gl.COLOR_BUFFER_BIT);
     },
@@ -1108,6 +1152,35 @@ function createWebGLPointRenderer(canvas) {
       glyphCount++;
     },
     addCircle(x, y, radius, color, alpha = 1) {
+      const needsQuad = logicalW > 0 && (x < radius || y < radius || x > logicalW - radius || y > logicalH - radius) || radius * 2 * dpr > maxPointSize;
+      if (needsQuad) {
+        const stride = FLOATS_PER_SPRITE_VERT * VERTS_PER_SPRITE;
+        circleQuadData = grow(circleQuadData, (circleQuadCount + 1) * stride);
+        const [qr, qg, qb, qa] = parseColorToRGBA(color);
+        const al = qa * alpha;
+        const quad = [
+          [x - radius, y - radius, 0, 0],
+          [x + radius, y - radius, 1, 0],
+          [x + radius, y + radius, 1, 1],
+          [x - radius, y + radius, 0, 1]
+        ];
+        const order = [0, 1, 2, 0, 2, 3];
+        let o2 = circleQuadCount * stride;
+        for (const i of order) {
+          const [vx, vy, vu, vv] = quad[i];
+          circleQuadData[o2] = vx;
+          circleQuadData[o2 + 1] = vy;
+          circleQuadData[o2 + 2] = vu;
+          circleQuadData[o2 + 3] = vv;
+          circleQuadData[o2 + 4] = qr;
+          circleQuadData[o2 + 5] = qg;
+          circleQuadData[o2 + 6] = qb;
+          circleQuadData[o2 + 7] = al;
+          o2 += FLOATS_PER_SPRITE_VERT;
+        }
+        circleQuadCount++;
+        return;
+      }
       pointData = grow(pointData, (pointCount + 1) * FLOATS_PER_POINT);
       const [r, g, b, a] = parseColorToRGBA(color);
       const o = pointCount * FLOATS_PER_POINT;
@@ -1171,6 +1244,15 @@ function createWebGLPointRenderer(canvas) {
         gl.uniform1f(pUDpr, dpr);
         gl.drawArrays(gl.POINTS, 0, pointCount);
       }
+      if (circleQuadCount > 0) {
+        const floats = circleQuadCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
+        gl.useProgram(circleQuadProgram);
+        gl.bindVertexArray(circleQuadVAO);
+        gl.bindBuffer(gl.ARRAY_BUFFER, circleQuadBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, circleQuadData.subarray(0, floats), gl.DYNAMIC_DRAW);
+        gl.uniform2f(cURes, logicalW, logicalH);
+        gl.drawArrays(gl.TRIANGLES, 0, circleQuadCount * VERTS_PER_SPRITE);
+      }
       if (spriteCount > 0 && texture) {
         const floats = spriteCount * VERTS_PER_SPRITE * FLOATS_PER_SPRITE_VERT;
         gl.useProgram(spriteProgram);
@@ -1193,14 +1275,17 @@ function createWebGLPointRenderer(canvas) {
       gl.deleteBuffer(rectBuffer);
       gl.deleteBuffer(spriteBuffer);
       gl.deleteBuffer(glyphBuffer);
+      gl.deleteBuffer(circleQuadBuffer);
       gl.deleteVertexArray(pointVAO);
       gl.deleteVertexArray(rectVAO);
       gl.deleteVertexArray(spriteVAO);
       gl.deleteVertexArray(glyphVAO);
+      gl.deleteVertexArray(circleQuadVAO);
       gl.deleteProgram(pointProgram);
       gl.deleteProgram(rectProgram);
       gl.deleteProgram(spriteProgram);
       gl.deleteProgram(msdfProgram);
+      gl.deleteProgram(circleQuadProgram);
       if (texture) gl.deleteTexture(texture);
       if (msdfTexture) gl.deleteTexture(msdfTexture);
     }

package/dist/{chunk-BWLNEJJW.js → chunk-XLZDOFSB.js}

@@ -32,25 +32,48 @@ function computeLineSegments(top, bottom, maxWidth, exclusions) {
 }
 var LayoutEngine = (_class = class {
   
+  /**
+   * Horizontal alignment. `'justify'` stretches inter-word spaces (or, for
+   * space-less CJK lines, inter-character gaps) so wrapped lines end flush at
+   * `maxWidth`; the last line of each paragraph stays ragged. Only applies to
+   * the object layout path without exclusion shapes.
+   */
+  __init() {this.textAlign = "left"}
   
-  __init() {this.preserveLeadingSpaces = false}
+  __init2() {this.preserveLeadingSpaces = false}
   
   
-  __init2() {this.wordCache = /* @__PURE__ */ new Map()}
-  __init3() {this.graphemeCache = /* @__PURE__ */ new Map()}
+  __init3() {this.wordCache = /* @__PURE__ */ new Map()}
+  __init4() {this.graphemeCache = /* @__PURE__ */ new Map()}
   // Paragraph-level memo so re-`prepare()` of mostly-unchanged text (streaming
   // append, live logs) reuses untouched paragraphs by reference instead of
   // re-segmenting/re-measuring the whole document — turning per-token cost from
   // O(document) into O(changed paragraph). Keyed by fontSize + text; invalidated
   // when the font atlas (which drives glyph widths) changes.
-  __init4() {this.paragraphCache = /* @__PURE__ */ new Map()}
+  __init5() {this.paragraphCache = /* @__PURE__ */ new Map()}
   // Same memo for the rich path ({@link prepareRich}); keyed by fontSize + text +
   // a per-paragraph *value* signature of the inline styles, so a streaming
   // typewriter that appends styled runs reuses its untouched paragraphs.
-  __init5() {this.richParagraphCache = /* @__PURE__ */ new Map()}
-  __init6() {this.lastAtlas = null}
+  __init6() {this.richParagraphCache = /* @__PURE__ */ new Map()}
+  __init7() {this.lastAtlas = null}
   
-  constructor(maxWidth, maxHeight, measurer) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);_class.prototype.__init5.call(this);_class.prototype.__init6.call(this);
+  __init8() {this._hyphenate = null}
+  /**
+   * Optional hyphenator: given a word, return its break parts (e.g.
+   * `['hyphen', 'ation']`). Used at wrap time when a word doesn't fit; a
+   * visible '-' is drawn at the chosen break. Soft hyphens (U+00AD) in the
+   * source work without any hyphenator. Setting this clears the prepared
+   * caches (break opportunities are baked in during prepare()).
+   */
+  get hyphenate() {
+    return this._hyphenate;
+  }
+  set hyphenate(fn) {
+    this._hyphenate = fn;
+    this.paragraphCache.clear();
+    this.richParagraphCache.clear();
+  }
+  constructor(maxWidth, maxHeight, measurer) {;_class.prototype.__init.call(this);_class.prototype.__init2.call(this);_class.prototype.__init3.call(this);_class.prototype.__init4.call(this);_class.prototype.__init5.call(this);_class.prototype.__init6.call(this);_class.prototype.__init7.call(this);_class.prototype.__init8.call(this);
     this.maxWidth = maxWidth;
     this.maxHeight = maxHeight;
     this.measurer = _nullishCoalesce(measurer, () => ( null));
@@ -157,7 +180,13 @@ var LayoutEngine = (_class = class {
         const word = segment.segment;
         const glyphs = [];
         let width = 0;
+        let breakPoints;
         for (const char of this.getGraphemes(word)) {
+          if (char === "\xAD") {
+            (breakPoints ??= []).push(glyphs.length);
+            shapedCharIdx += char.length;
+            continue;
+          }
           const visualStart = shapedCharIdx;
           const visualEnd = shapedCharIdx + char.length;
           const rawStart = indexMap[visualStart];
@@ -182,11 +211,23 @@ var LayoutEngine = (_class = class {
           width += w;
           shapedCharIdx += char.length;
         }
+        if (!breakPoints && this._hyphenate && segment.isWordLike && glyphs.length > 3) {
+          const parts = this._hyphenate(word);
+          if (parts.length > 1) {
+            breakPoints = [];
+            let count = 0;
+            for (let pi = 0; pi < parts.length - 1; pi++) {
+              for (const _g of this.getGraphemes(parts[pi])) count++;
+              breakPoints.push(count);
+            }
+          }
+        }
         words.push({
           glyphs,
           width,
           isWordLike: segment.isWordLike,
-          isWhitespace: word.trim().length === 0
+          isWhitespace: word.trim().length === 0,
+          breakPoints
         });
       }
       const prepared = {
@@ -200,7 +241,12 @@ var LayoutEngine = (_class = class {
       paragraphs.push(prepared);
       offset += paragraph.length + 1;
     }
-    return { paragraphs, fontSize, fallbackToCanvas: fallbackToCanvas || void 0 };
+    return {
+      paragraphs,
+      fontSize,
+      fallbackToCanvas: fallbackToCanvas || void 0,
+      hyphenWidth: this.glyphWidth(this.glyphKeyFor("-", fontAtlas), fontAtlas, fontSize)
+    };
   }
   /**
    * **Cold pass for rich text.** Like {@link prepare}, but takes an array of
@@ -274,7 +320,13 @@ var LayoutEngine = (_class = class {
         const word = segment.segment;
         const glyphs = [];
         let width = 0;
+        let breakPoints;
         for (const char of this.getGraphemes(word)) {
+          if (char === "\xAD") {
+            (breakPoints ??= []).push(glyphs.length);
+            shapedCharIdx += char.length;
+            continue;
+          }
           const visualStart = shapedCharIdx;
           const visualEnd = shapedCharIdx + char.length;
           const rawStart = indexMap[visualStart];
@@ -302,11 +354,23 @@ var LayoutEngine = (_class = class {
           width += w;
           shapedCharIdx += char.length;
         }
+        if (!breakPoints && this._hyphenate && segment.isWordLike && glyphs.length > 3) {
+          const parts = this._hyphenate(word);
+          if (parts.length > 1) {
+            breakPoints = [];
+            let count = 0;
+            for (let pi = 0; pi < parts.length - 1; pi++) {
+              for (const _g of this.getGraphemes(parts[pi])) count++;
+              breakPoints.push(count);
+            }
+          }
+        }
         words.push({
           glyphs,
           width,
           isWordLike: segment.isWordLike,
-          isWhitespace: word.trim().length === 0
+          isWhitespace: word.trim().length === 0,
+          breakPoints
         });
       }
       const prepared = {
@@ -350,7 +414,7 @@ var LayoutEngine = (_class = class {
     let si = 0;
     let currentLineNodes = [];
     let paragraphBaseLevel = 0;
-    const commitLine = () => {
+    const commitLine = (justifyTo) => {
       if (currentLineNodes.length === 0) return;
       const runs = [];
       let currentRun = [];
@@ -375,6 +439,37 @@ var LayoutEngine = (_class = class {
           node.isRTL = node.level % 2 === 1;
           x += node.width;
         }
+        if (justifyTo !== void 0 && runs.length === 1) {
+          let lastContent = run.length - 1;
+          while (lastContent >= 0 && run[lastContent].char.trim() === "") lastContent--;
+          if (lastContent > 0) {
+            const contentEnd = run[lastContent].x + run[lastContent].width;
+            const slack = justifyTo - contentEnd;
+            if (slack > 0 && slack <= (justifyTo - runStartX) * 0.5) {
+              const spaceIdx = [];
+              for (let k = 1; k < lastContent; k++) {
+                if (run[k].char.trim() === "") spaceIdx.push(k);
+              }
+              if (spaceIdx.length > 0) {
+                const extra = slack / spaceIdx.length;
+                let shift = 0;
+                let nextSpace = 0;
+                for (let k = 0; k <= lastContent; k++) {
+                  run[k].x += shift;
+                  if (nextSpace < spaceIdx.length && k === spaceIdx[nextSpace]) {
+                    run[k].width += extra;
+                    shift += extra;
+                    nextSpace++;
+                  }
+                }
+              } else {
+                const extra = slack / lastContent;
+                for (let k = 1; k <= lastContent; k++) run[k].x += extra * k;
+              }
+              if (justifyTo > maxLineWidth) maxLineWidth = justifyTo;
+            }
+          }
+        }
         for (const node of run) {
           layoutNodes.push(node);
         }
@@ -394,6 +489,8 @@ var LayoutEngine = (_class = class {
       }
       return false;
     };
+    const justifyTarget = this.textAlign === "justify" && !hasEx ? this.maxWidth : void 0;
+    const hyphenWidth = _nullishCoalesce(prepared.hyphenWidth, () => ( fontSize * 0.3));
     for (const paragraph of prepared.paragraphs) {
       if (paragraph.isEmpty) {
         commitLine();
@@ -411,16 +508,65 @@ var LayoutEngine = (_class = class {
       }
       const lineHeight = pMax * 1.5;
       if (!startLine(lineHeight)) break;
-      for (const word of paragraph.words) {
-        if (currentX + word.width > segs[si].x1 && currentX > segs[si].x0) {
-          if (word.isWordLike === false && word.isWhitespace) continue;
-          if (si < segs.length - 1) {
-            si++;
-            currentX = segs[si].x0;
-          } else {
-            commitLine();
-            currentY += lineHeight;
-            if (!startLine(lineHeight)) break;
+      const wordQueue = paragraph.words.slice();
+      for (let qi = 0; qi < wordQueue.length; qi++) {
+        const word = wordQueue[qi];
+        if (currentX + word.width > segs[si].x1) {
+          if (!hasEx && word.breakPoints && word.breakPoints.length > 0) {
+            const avail = segs[si].x1 - currentX;
+            let chosen = -1;
+            let prefixWidth = 0;
+            let acc = 0;
+            let bpIdx = 0;
+            for (let g = 0; g < word.glyphs.length && bpIdx < word.breakPoints.length; g++) {
+              acc += word.glyphs[g].width;
+              if (g + 1 === word.breakPoints[bpIdx]) {
+                if (acc + hyphenWidth <= avail) {
+                  chosen = word.breakPoints[bpIdx];
+                  prefixWidth = acc;
+                }
+                bpIdx++;
+              }
+            }
+            if (chosen > 0) {
+              const anchorGlyph = word.glyphs[chosen - 1];
+              const prefix = {
+                glyphs: [
+                  ...word.glyphs.slice(0, chosen),
+                  {
+                    char: "-",
+                    width: hyphenWidth,
+                    level: anchorGlyph.level,
+                    sourceIndex: anchorGlyph.sourceIndex,
+                    sourceLength: 0
+                  }
+                ],
+                width: prefixWidth + hyphenWidth,
+                isWordLike: true,
+                isWhitespace: false
+              };
+              const rest = {
+                glyphs: word.glyphs.slice(chosen),
+                width: word.width - prefixWidth,
+                isWordLike: true,
+                isWhitespace: false,
+                breakPoints: word.breakPoints.filter((bp) => bp > chosen).map((bp) => bp - chosen)
+              };
+              wordQueue.splice(qi, 1, prefix, rest);
+              qi--;
+              continue;
+            }
+          }
+          if (currentX > segs[si].x0) {
+            if (word.isWordLike === false && word.isWhitespace) continue;
+            if (si < segs.length - 1) {
+              si++;
+              currentX = segs[si].x0;
+            } else {
+              commitLine(justifyTarget);
+              currentY += lineHeight;
+              if (!startLine(lineHeight)) break;
+            }
           }
         }
         for (const glyph of word.glyphs) {
@@ -433,7 +579,7 @@ var LayoutEngine = (_class = class {
                 si++;
                 currentX = segs[si].x0;
               } else {
-                commitLine();
+                commitLine(justifyTarget);
                 currentY += lineHeight;
                 if (!startLine(lineHeight)) break;
               }
@@ -549,20 +695,20 @@ var LayoutEngine = (_class = class {
     }
   }
 }, _class);
-var LayoutResultBuffer = (_class2 = class _LayoutResultBuffer {constructor() { _class2.prototype.__init7.call(this);_class2.prototype.__init8.call(this);_class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this); }
+var LayoutResultBuffer = (_class2 = class _LayoutResultBuffer {constructor() { _class2.prototype.__init9.call(this);_class2.prototype.__init10.call(this);_class2.prototype.__init11.call(this);_class2.prototype.__init12.call(this);_class2.prototype.__init13.call(this);_class2.prototype.__init14.call(this); }
   static __initStatic() {this.CAPACITY = 16384}
   /** X positions of each glyph. */
-  __init7() {this.xs = new Float32Array(_LayoutResultBuffer.CAPACITY)}
+  __init9() {this.xs = new Float32Array(_LayoutResultBuffer.CAPACITY)}
   /** Y positions of each glyph. */
-  __init8() {this.ys = new Float32Array(_LayoutResultBuffer.CAPACITY)}
+  __init10() {this.ys = new Float32Array(_LayoutResultBuffer.CAPACITY)}
   /** Widths of each glyph. */
-  __init9() {this.ws = new Float32Array(_LayoutResultBuffer.CAPACITY)}
+  __init11() {this.ws = new Float32Array(_LayoutResultBuffer.CAPACITY)}
   /** Heights of each glyph. */
-  __init10() {this.hs = new Float32Array(_LayoutResultBuffer.CAPACITY)}
+  __init12() {this.hs = new Float32Array(_LayoutResultBuffer.CAPACITY)}
   /** Character for each glyph slot. */
-  __init11() {this.chars = Array.from({ length: _LayoutResultBuffer.CAPACITY })}
+  __init13() {this.chars = Array.from({ length: _LayoutResultBuffer.CAPACITY })}
   /** Number of valid glyphs written in this buffer. */
-  __init12() {this.count = 0}
+  __init14() {this.count = 0}
   /** Reset the buffer for reuse. Does NOT free memory. */
   reset() {
     this.count = 0;

package/dist/components/TextEntity.d.ts

@@ -33,6 +33,17 @@ export declare class TextEntity extends Entity {
      * @returns `this` for chaining.
      */
     setMaxWidth(maxWidth: number): this;
+    /**
+     * Set horizontal alignment (`'justify'` stretches wrapped lines flush to
+     * the wrap width; the last line stays ragged) and reflow.
+     */
+    setTextAlign(align: 'left' | 'justify'): this;
+    /**
+     * Plug a hyphenator (word → parts). Break opportunities are baked in during
+     * the cold pass, so this re-prepares the current text. Soft hyphens
+     * (U+00AD) in the text work without one.
+     */
+    setHyphenator(fn: ((word: string) => string[]) | null): this;
     /** Hot pass: place the cached {@link PreparedText} and refresh the a11y box. */
     private applyLayout;
     isPointInside(globalX: number, globalY: number): boolean;