@grafloria/element 0.3.18 → 0.3.20

package/src/libs/renderer/src/ssr/render-to-static.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderToStaticSVG = renderToStaticSVG;
+const engine_1 = require("@grafloria/engine");
+const svg_renderer_1 = require("../svg/svg-renderer");
+const viewport_controller_1 = require("../viewport/viewport-controller");
+const model_input_1 = require("../instance/model-input");
+const layers_1 = require("../instance/layers");
+const vnode_serializer_1 = require("../export/vnode-serializer");
+function renderToStaticSVG(options = {}) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    const width = (_a = options.width) !== null && _a !== void 0 ? _a : 800;
+    const height = (_b = options.height) !== null && _b !== void 0 ? _b : 600;
+    const instanceId = (_c = options.instanceId) !== null && _c !== void 0 ? _c : 'grafloria-ssr';
+    const engine = new engine_1.DiagramEngine();
+    const model = engine.createDiagram('grafloria-ssr');
+    (0, model_input_1.applyNodes)(model, (_d = options.nodes) !== null && _d !== void 0 ? _d : []);
+    (0, model_input_1.applyEdges)(model, (_e = options.edges) !== null && _e !== void 0 ? _e : []);
+    const viewport = new viewport_controller_1.ViewportController({
+        viewport: {
+            x: (_g = (_f = options.viewport) === null || _f === void 0 ? void 0 : _f.x) !== null && _g !== void 0 ? _g : 0,
+            y: (_j = (_h = options.viewport) === null || _h === void 0 ? void 0 : _h.y) !== null && _j !== void 0 ? _j : 0,
+            width,
+            height,
+        },
+        zoom: (_k = options.zoom) !== null && _k !== void 0 ? _k : 1,
+    });
+    if (options.fitView) {
+        const bounds = contentBoundsOf(model);
+        if (bounds)
+            viewport.fitToBounds(bounds, (_l = options.fitPadding) !== null && _l !== void 0 ? _l : 40);
+    }
+    // `useCSSMode` stays ON: the renderer's document access is now guarded
+    // (see SVGRenderer.injectThemeCSS), so the VNode tree the server produces is
+    // the SAME tree the browser produces — which is the whole point.
+    const renderer = new svg_renderer_1.SVGRenderer(engine, { instanceId }, options.theme);
+    const vnode = renderer.render(viewport.getRenderViewport(), viewport.getZoom());
+    // A static artifact must SIZE ITSELF: the live path leaves width/height to the
+    // host's CSS, but an email, a README or a bare <img> cannot add CSS — without
+    // these the svg renders 0×0 (the audit's "blank page with a stray dot").
+    vnode.props = Object.assign(Object.assign({}, vnode.props), { width: (_m = options.width) !== null && _m !== void 0 ? _m : 800, height: (_o = options.height) !== null && _o !== void 0 ? _o : 600 });
+    // ONE serializer, in DOM fidelity: the snapshot must describe exactly the DOM the
+    // client's VNodePatcher would build, or hydration rebuilds the tree and flashes.
+    // (The same function in 'file' fidelity is what `export/` uses for standalone SVG.)
+    const svg = (0, vnode_serializer_1.serializeVNode)(vnode, { fidelity: 'dom', standalone: options.standalone });
+    const css = renderer.getStyleSheet();
+    renderer.dispose();
+    engine.destroy();
+    const snapshot = {
+        instanceId,
+        width,
+        height,
+        zoom: viewport.getZoom(),
+        viewport: { x: viewport.getViewport().x, y: viewport.getViewport().y },
+    };
+    return { html: wrapInLayers(svg, instanceId), svg, css, snapshot };
+}
+/** The markup `createDiagram()`'s `ensureLayers()` builds — as a string. */
+function wrapInLayers(svg, instanceId) {
+    return (`<div class="${layers_1.ROOT_CLASS}" style="${layers_1.ROOT_STYLE}" data-grafloria-instance="${instanceId}">` +
+        `<div class="${layers_1.SVG_LAYER_CLASS}" style="${layers_1.SVG_LAYER_STYLE}">${svg}</div>` +
+        `<div class="${layers_1.HTML_LAYER_CLASS}" style="${(0, layers_1.htmlLayerStyle)('translate(0px, 0px) scale(1)')}"></div>` +
+        `</div>`);
+}
+function contentBoundsOf(model) {
+    const nodes = model.getNodes();
+    if (nodes.length === 0)
+        return null;
+    let left = Infinity;
+    let top = Infinity;
+    let right = -Infinity;
+    let bottom = -Infinity;
+    for (const node of nodes) {
+        left = Math.min(left, node.position.x);
+        top = Math.min(top, node.position.y);
+        right = Math.max(right, node.position.x + node.size.width);
+        bottom = Math.max(bottom, node.position.y + node.size.height);
+    }
+    return { x: left, y: top, width: right - left, height: bottom - top };
+}
+//# sourceMappingURL=render-to-static.js.map

package/src/libs/renderer/src/svg/ArrowRenderer.d.ts

@@ -0,0 +1,159 @@
+import type { ArrowStyle } from '@grafloria/engine';
+import type { VNode } from '../types/vnode.types';
+/**
+ * ArrowRenderer generates SVG VNodes for different arrow types.
+ *
+ * Supports:
+ * - Basic arrows (arrow, circle, square, diamond)
+ * - ERD arrows (crow-foot, one, zero-or-one, zero-or-many, one-or-many)
+ * - UML arrows (hollow-diamond, filled-diamond, generalization, open-arrow, double-arrow)
+ * - Additional arrows (cross, bar, dot, oval)
+ * - Half-arrowheads (Mermaid 11.13) — `half-arrow-left` / `half-arrow-right`
+ * - AUTHOR-DEFINED markers (Wave 4, Card 5): a raw SVG `path`, or anything
+ *   registered with `registerMarker` — the catalogue is no longer a closed enum.
+ *
+ * @example
+ * ```typescript
+ * const renderer = new ArrowRenderer();
+ * const arrowVNode = renderer.renderArrow({
+ *   type: 'crow-foot',
+ *   size: 10,
+ *   filled: false,
+ *   color: '#000'
+ * }, 'translate(100, 50) rotate(45)');
+ * ```
+ *
+ * @example A custom marker
+ * ```typescript
+ * registerMarker('feather', {
+ *   tipOffset: style => style.size,
+ *   render: ctx => ({ type: 'path', props: { d: `M0,0 L${ctx.size},0`, stroke: ctx.color, transform: ctx.transform } }),
+ * });
+ * link.updateStyle({ arrowHead: { type: 'feather', size: 12, filled: true } });
+ * ```
+ */
+export declare class ArrowRenderer {
+    private readonly defaultColor;
+    private readonly defaultStrokeWidth;
+    /**
+     * Distance from the marker's local origin to its forward-most point (its
+     * visual tip), in the +x direction the marker is rotated toward.
+     *
+     * The renderer positions markers by pulling the transform origin back from
+     * the path endpoint by exactly this amount so every tip lands ON the port —
+     * a uniform offset only fits the triangle family and left circles/diamonds
+     * floating off the node.
+     *
+     * Wave 4 (Card 5): a custom marker declares its own. Precedence is
+     * `style.tipOffset` (explicit) > the registered marker's > 0 (a raw `path`
+     * marker is assumed to be drawn with its tip at the origin).
+     */
+    getTipOffset(style: ArrowStyle): number;
+    /**
+     * Render an arrow based on the provided style and transform
+     *
+     * @param style Arrow style configuration
+     * @param transform SVG transform string
+     * @param backgroundColor Fill for hollow (unfilled) markers — pass the theme
+     *   background so hollow arrows don't glare white on dark themes
+     * @returns VNode representing the arrow, or null if type is 'none'
+     */
+    renderArrow(style: ArrowStyle, transform: string, backgroundColor?: string, end?: 'source' | 'target'): VNode | null;
+    /**
+     * The registered marker this style refers to, if any.
+     *
+     * Two ways to name one, because both read naturally:
+     *   { type: 'custom', marker: 'feather' }   — explicit
+     *   { type: 'feather' }                     — the registered name AS the type
+     *
+     * A registered name never shadows a built-in accidentally: the built-in switch
+     * only runs when nothing is registered under that name.
+     */
+    private resolveMarker;
+    /**
+     * A marker from raw SVG path data (`{ type: 'custom', path: 'M0,0 …' }`).
+     * Drawn in the marker's local frame — origin at the anchor, +x forward.
+     */
+    private renderCustomPath;
+    /**
+     * Half-arrowhead (Mermaid 11.13): one barb of the triangle, on the given side
+     * of the direction of travel. `side` is +1 for the RIGHT barb (screen-down
+     * when travelling right) and -1 for the LEFT one.
+     *
+     * The shaft point (size, 0) is the tip, exactly as for the full triangle, so a
+     * half arrow anchors on the port identically.
+     */
+    private renderHalfArrow;
+    /**
+     * Basic triangle arrow (standard arrowhead)
+     */
+    private renderTriangleArrow;
+    /**
+     * Circle arrow
+     */
+    private renderCircleArrow;
+    /**
+     * Square arrow
+     */
+    private renderSquareArrow;
+    /**
+     * Diamond arrow
+     */
+    private renderDiamondArrow;
+    /**
+     * ERD crow-foot arrow (one-to-many relationship)
+     */
+    private renderCrowFootArrow;
+    /**
+     * ERD one arrow (exactly one - vertical bar)
+     */
+    private renderOneArrow;
+    /**
+     * ERD zero-or-one arrow (circle + bar)
+     */
+    private renderZeroOrOneArrow;
+    /**
+     * ERD zero-or-many arrow (circle + crow-foot)
+     */
+    private renderZeroOrManyArrow;
+    /**
+     * ERD one-or-many arrow (bar + crow-foot)
+     */
+    private renderOneOrManyArrow;
+    /**
+     * UML hollow diamond arrow (aggregation)
+     */
+    private renderHollowDiamondArrow;
+    /**
+     * UML filled diamond arrow (composition)
+     */
+    private renderFilledDiamondArrow;
+    /**
+     * UML generalization arrow (inheritance - hollow triangle)
+     */
+    private renderGeneralizationArrow;
+    /**
+     * UML open arrow (dependency - open triangle)
+     */
+    private renderOpenArrow;
+    /**
+     * UML double arrow (bidirectional)
+     */
+    private renderDoubleArrow;
+    /**
+     * Cross arrow (X mark)
+     */
+    private renderCrossArrow;
+    /**
+     * Bar arrow (perpendicular line)
+     */
+    private renderBarArrow;
+    /**
+     * Dot arrow (simple dot)
+     */
+    private renderDotArrow;
+    /**
+     * Oval arrow
+     */
+    private renderOvalArrow;
+}