@formicoidea/labre-framework-uml 0.42.0

package/dist/frame-tag.js

@@ -0,0 +1,78 @@
+import { backgroundLabelText, createFrameworkBackgroundRenderer, } from '@formicoidea/labre-core/blocks/surface';
+/**
+ * The tag's box, in ELEMENT-LOCAL model units — everything but the corner bite.
+ *
+ * Split out and exported so the geometry can be asserted without a canvas, and
+ * so a future gesture (aim at the tag, not at the band) has one place to ask.
+ * `null` when there is nothing to draw: a frame dragged to nothing, or a heading
+ * of no words at all.
+ */
+export function umlFrameTagRect(width, height, textWidth, opts) {
+    if (!(width > 0) || !(height > 0))
+        return null;
+    if (!(textWidth > 0))
+        return null;
+    const inset = opts.lineWidth / 2;
+    // Clamped to the element on both axes: a frame dragged shorter than its own
+    // heading keeps a tag, cut down to what there is, exactly as the band is.
+    const w = Math.min(textWidth + opts.padding * 2, width - inset * 2);
+    const h = Math.min(opts.bandHeight - opts.foot, height - inset * 2);
+    if (!(w > 0) || !(h > 0))
+        return null;
+    return { x: inset, y: inset, w, h };
+}
+/**
+ * Wrap a frame declaration's renderer so the heading is drawn inside Annex A's
+ * pentagon.
+ *
+ * Stroke only, in the frame's own ink: the tag is an outline pinned to the
+ * sheet's corner, and filling it would hide the card behind the words — which
+ * matters the moment a user drags an element under the heading.
+ */
+export function withUmlFrameTag(def, opts) {
+    const base = createFrameworkBackgroundRenderer(def);
+    const family = def.chrome?.fontFamily ?? 'Inter, sans-serif';
+    const label = def.chrome?.sideBands?.find(band => band.label?.prop === opts.prop)?.label;
+    return (model, ctx, matrix, renderer, rc, bound) => {
+        const [, , w, h] = model.deserializedXYWH;
+        const cx = w / 2;
+        const cy = h / 2;
+        // BEFORE the base renderer — see the note at the top of this file.
+        const tagMatrix = DOMMatrix.fromMatrix(matrix)
+            .translateSelf(cx, cy)
+            .rotateSelf(model.rotate)
+            .translateSelf(-cx, -cy);
+        base(model, ctx, matrix, renderer, rc, bound);
+        if (!label)
+            return;
+        const words = backgroundLabelText(label, model);
+        if (!words)
+            return;
+        ctx.setTransform(tagMatrix);
+        // The declaration's own font, so the box fits the glyphs that were painted
+        // rather than the glyphs this file would have chosen.
+        const weight = label.style.weight ? `${label.style.weight} ` : '';
+        ctx.font = `${weight}${label.style.size}px ${label.style.family ?? family}`;
+        const textWidth = ctx.measureText(words).width;
+        const rect = umlFrameTagRect(w, h, textWidth, opts);
+        if (!rect)
+            return;
+        const { x, y } = rect;
+        const right = x + rect.w;
+        const bottom = y + rect.h;
+        // The bite can be no larger than the box it is taken out of — a tag squeezed
+        // by a short heading or a squashed frame degrades to a triangle rather than
+        // folding back on itself.
+        const cut = Math.max(0, Math.min(opts.cut, rect.w, rect.h));
+        ctx.strokeStyle = opts.stroke;
+        ctx.lineWidth = opts.lineWidth;
+        ctx.beginPath();
+        ctx.moveTo(x, y);
+        ctx.lineTo(right, y);
+        ctx.lineTo(right, bottom - cut);
+        ctx.lineTo(right - cut, bottom);
+        ctx.lineTo(x, bottom);
+        ctx.closePath();
+        ctx.stroke();
+    };
+}