@vectojs/core 0.2.6 → 0.2.8

package/dist/{chunk-SSOP3F5F.mjs → chunk-FNXOS7IA.mjs}

@@ -32,6 +32,13 @@ function computeLineSegments(top, bottom, maxWidth, exclusions) {
 }
 var LayoutEngine = class {
   maxWidth;
+  /**
+   * 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.
+   */
+  textAlign = "left";
   maxHeight;
   preserveLeadingSpaces = false;
   wordSegmenter;
@@ -50,6 +57,22 @@ var LayoutEngine = class {
   richParagraphCache = /* @__PURE__ */ new Map();
   lastAtlas = null;
   measurer;
+  _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) {
     this.maxWidth = maxWidth;
     this.maxHeight = maxHeight;
@@ -157,7 +180,13 @@ var LayoutEngine = 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 {
           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 {
       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 {
         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 {
           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 {
     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 {
           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 {
       }
       return false;
     };
+    const justifyTarget = this.textAlign === "justify" && !hasEx ? this.maxWidth : void 0;
+    const hyphenWidth = prepared.hyphenWidth ?? fontSize * 0.3;
     for (const paragraph of prepared.paragraphs) {
       if (paragraph.isEmpty) {
         commitLine();
@@ -411,16 +508,65 @@ var LayoutEngine = 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 {
                 si++;
                 currentX = segs[si].x0;
               } else {
-                commitLine();
+                commitLine(justifyTarget);
                 currentY += lineHeight;
                 if (!startLine(lineHeight)) break;
               }

package/dist/{chunk-SL654OMF.mjs → chunk-G6GQO7W2.mjs}

@@ -434,6 +434,7 @@ var Entity = class {
       startTime: -1,
       startProps: {}
     });
+    this.scene?.markDirty();
     return this;
   }
   /** Write a driver-computed value to a backing field without re-triggering the setter. */
@@ -892,6 +893,19 @@ var Entity = class {
   getBatchRect() {
     return null;
   }
+  /**
+   * Opt into DOM content projection for entities that render static text.
+   * The {@link Scene} mirrors the returned text as a transparent DOM node
+   * positioned over the drawn glyphs, making canvas text findable (Ctrl+F),
+   * readable by screen readers and crawlers, translatable, and — when
+   * `selectable` is set — natively selectable. Returns `null` by default.
+   * Read on the a11y sync cadence, so text changes propagate automatically.
+   *
+   * @returns The projection descriptor, or `null` to project nothing.
+   */
+  getContentProjection() {
+    return null;
+  }
   /**
    * Whether this entity still has a queued/running tween animation, or an
    * active {@link setTransition}/{@link animateTo}/{@link springTo} property
@@ -1067,6 +1081,18 @@ var MSDFTextEntity = class extends Entity {
       }
     });
   }
+  /**
+   * Mirror the rendered text into the DOM content layer: find-in-page, screen
+   * readers, crawlers, and translation see the same string the canvas draws.
+   */
+  getContentProjection() {
+    if (!this.text) return null;
+    return {
+      text: this.text,
+      font: `${this.fontSize}px ${this.fallbackFont}`,
+      lineHeight: this.lineHeight
+    };
+  }
   isPointInside(globalX, globalY) {
     if (!this.layoutResult) return false;
     const local = this.worldToLocal(globalX, globalY);

package/dist/{chunk-GADBN53Z.js → chunk-XB3ZY5MF.js}

@@ -34,6 +34,10 @@ var CanvasRenderer = (_class = class _CanvasRenderer {
     this.height = _nullishCoalesce(_optionalChain([size, 'optionalAccess', _2 => _2.height]), () => ( (typeof window !== "undefined" ? window.innerHeight : canvas.height || 0)));
     canvas.width = this.width * dpr;
     canvas.height = this.height * dpr;
+    if (canvas.style) {
+      canvas.style.width = `${this.width}px`;
+      canvas.style.height = `${this.height}px`;
+    }
     const ctx = canvas.getContext("2d");
     this.ctx = ctx;
     if (ctx) ctx.scale(dpr, dpr);
@@ -821,6 +825,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;
@@ -887,7 +904,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");
@@ -947,6 +966,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;
@@ -961,10 +994,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;
@@ -997,6 +1036,7 @@ function createWebGLPointRenderer(canvas) {
       rectCount = 0;
       spriteCount = 0;
       glyphCount = 0;
+      circleQuadCount = 0;
       gl.clearColor(0, 0, 0, 0);
       gl.clear(gl.COLOR_BUFFER_BIT);
     },
@@ -1104,6 +1144,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;
@@ -1167,6 +1236,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);
@@ -1189,14 +1267,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);
     }