@formicoidea/labre-framework-wardley 0.23.0 → 0.23.1

package/{src/node/consts.ts → dist/node/consts.js}

@@ -7,33 +7,29 @@
  * pre-formatted defaults at creation. The person glyph (anchor) is expressed as
  * ratios of the circle radius R so it stays proportional at any size.
  */
-
 /** Default node diameter (= the map label font size, 18). White fill, thin border. */
 export const NODE_SIZE = 18;
 export const NODE_FILL = '#ffffff';
 export const NODE_STROKE = '#1f2328';
 /** Thin border, matching the link / silhouette line weight. */
 export const NODE_STROKE_WIDTH = 1;
-
 /**
  * Person glyph (`kind: 'anchor'`) ratios of R, mirroring the validated icon
  * ANCH-B (circle r6 → head r1.8 at cy-2.6 ; shoulders cubic touching the
  * border at ±(4.6, 3.9) with controls at ±(3.8, 0.1)).
  */
 export const ANCHOR = {
-  headR: 0.3,
-  headCY: -0.433,
-  shoulderEndX: 0.767,
-  shoulderEndY: 0.65,
-  shoulderCtrlX: 0.633,
-  shoulderCtrlY: 0.017,
+    headR: 0.3,
+    headCY: -0.433,
+    shoulderEndX: 0.767,
+    shoulderEndY: 0.65,
+    shoulderCtrlX: 0.633,
+    shoulderCtrlY: 0.017,
 };
-
 /** Native text label, same family as the axis labels, size 18. */
 export const LABEL_FONT_SIZE = 18;
 export const LABEL_GAP = 8;
 export const LABEL_DEFAULT = { component: 'Component', anchor: 'Anchor' };
-
 /**
  * Pipeline defaults. The body is a wide, thin native rect (≈ 1.4× the node
  * diameter tall) with a white slightly-transparent fill and a node-weight
@@ -48,14 +44,12 @@ export const PIPELINE_FILL = '#ffffff99';
 /** Handle square = node diameter. */
 export const HANDLE_SIZE = NODE_SIZE;
 export const PIPELINE_LABEL = 'Pipeline';
-
 /**
  * Connector line width. Connectors are constrained to the LineWidth enum
  * {2,4,6,8,10,12}, so the thinnest available (2) is used — as close as possible
  * to the 1px node border.
  */
 export const LINK_STROKE_WIDTH = 2;
-
 /** Wardley red ("future"/evolution) — matches the validated arrow icon. */
 export const WARDLEY_RED = '#d6455d';
 /** Dependency link grey. */
@@ -63,7 +57,6 @@ export const LINK_GREY = '#666666';
 /** Inertia bar color + size. */
 export const INERTIA_COLOR = '#1f2328';
 export const INERTIA_SIZE = { w: 8, h: 44 };
-
 /**
  * Market node (composite): a large thin-bordered circle containing 3 small
  * thick-bordered component nodes wired into a triangle by native connectors.
@@ -78,7 +71,6 @@ export const MARKET_DOT_STROKE_WIDTH = 2;
 export const MARKET_LINK_WIDTH = 1;
 export const MARKET_LINK_COLOR = NODE_STROKE;
 export const MARKET_LABEL = 'Market';
-
 /**
  * Ecosystem node: a single connectable circle drawn as a GLYPH — a double border
  * at the rim (outer circle + a 2nd inscribed circle with a thin blank band
@@ -88,13 +80,12 @@ export const MARKET_LABEL = 'Market';
  */
 export const ECOSYSTEM_SIZE = 40;
 export const ECOSYSTEM = {
-  secondBorderRatio: 0.88, // 2nd (inscribed) border
-  centerRatio: 0.43, // central hollow circle
-  hatchOuterRatio: 0.86, // hatch stays just inside the 2nd border
-  hatchSpacingRatio: 0.15, // gap between hatch lines
+    secondBorderRatio: 0.88, // 2nd (inscribed) border
+    centerRatio: 0.43, // central hollow circle
+    hatchOuterRatio: 0.86, // hatch stays just inside the 2nd border
+    hatchSpacingRatio: 0.15, // gap between hatch lines
 };
 export const ECOSYSTEM_LABEL = 'Ecosystem';
-
 /**
  * Method node: a component inscribed in a slightly larger outer circle whose
  * FILL color encodes the chosen method (editable via the toolbar). Glyph = the
@@ -104,6 +95,7 @@ export const ECOSYSTEM_LABEL = 'Ecosystem';
 export const METHOD_SIZE = 35;
 export const METHOD_FILL = '#d9d9d9';
 export const METHOD = {
-  centerRatio: 0.5, // inner white component radius / R
+    centerRatio: 0.5, // inner white component radius / R
 };
 export const METHOD_LABEL = 'Component';
+//# sourceMappingURL=consts.js.map

package/dist/node/label-editor.d.ts

@@ -0,0 +1,28 @@
+import { WardleyNodeElementModel } from '@blocksuite/affine-model';
+import type { RichText } from '@blocksuite/affine-rich-text';
+import { type BlockComponent, type BlockStdScope, ShadowlessElement } from '@blocksuite/std';
+import { nothing } from 'lit';
+/**
+ * Mount an inline editor over a Wardley node's label. A trimmed clone of
+ * `EdgelessShapeTextEditor`, bound to {@link WardleyNodeElementModel.text} and
+ * positioned at the label spot (right of the circle + `labelOffset`).
+ */
+export declare function mountWardleyNodeLabelEditor(node: WardleyNodeElementModel, edgeless: BlockComponent): void;
+declare const EdgelessWardleyNodeLabelEditor_base: typeof ShadowlessElement & import("@blocksuite/global/utils").Constructor<import("@blocksuite/global/lit").DisposableClass>;
+export declare class EdgelessWardleyNodeLabelEditor extends EdgelessWardleyNodeLabelEditor_base {
+    get inlineEditor(): import("@blocksuite/affine-shared/types").AffineInlineEditor | null;
+    get crud(): import("@blocksuite/affine-block-surface").EdgelessCRUDExtension;
+    get gfx(): import("@blocksuite/std/gfx").GfxController;
+    get selection(): import("@blocksuite/std/gfx").GfxSelectionManager;
+    get inlineEditorContainer(): import("@blocksuite/std/inline").InlineRootElement<import("@blocksuite/affine-shared/types").AffineTextAttributes> | null | undefined;
+    private _unmount;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    getUpdateComplete(): Promise<boolean>;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+    accessor element: WardleyNodeElementModel;
+    accessor std: BlockStdScope;
+    accessor richText: RichText;
+}
+export {};
+//# sourceMappingURL=label-editor.d.ts.map

package/dist/node/label-editor.js

@@ -0,0 +1,216 @@
+var __esDecorate = function(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+  function accept(f) {
+    if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected");
+    return f;
+  }
+  var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+  var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+  var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+  var _, done = false;
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    var context = {};
+    for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+    for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+    context.addInitializer = function(f) {
+      if (done) throw new TypeError("Cannot add initializers after decoration has completed");
+      extraInitializers.push(accept(f || null));
+    };
+    var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+    if (kind === "accessor") {
+      if (result === void 0) continue;
+      if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+      if (_ = accept(result.get)) descriptor.get = _;
+      if (_ = accept(result.set)) descriptor.set = _;
+      if (_ = accept(result.init)) initializers.unshift(_);
+    } else if (_ = accept(result)) {
+      if (kind === "field") initializers.unshift(_);
+      else descriptor[key] = _;
+    }
+  }
+  if (target) Object.defineProperty(target, contextIn.name, descriptor);
+  done = true;
+};
+var __runInitializers = function(thisArg, initializers, value) {
+  var useValue = arguments.length > 2;
+  for (var i = 0; i < initializers.length; i++) {
+    value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+  }
+  return useValue ? value : void 0;
+};
+import { DefaultTool, EdgelessCRUDIdentifier, TextUtils } from "@blocksuite/affine-block-surface";
+import { WardleyNodeElementModel } from "@blocksuite/affine-model";
+import { BlockSuiteError, ErrorCode } from "@blocksuite/global/exceptions";
+import { WithDisposable } from "@blocksuite/global/lit";
+import { ShadowlessElement, stdContext } from "@blocksuite/std";
+import { GfxControllerIdentifier } from "@blocksuite/std/gfx";
+import { RANGE_SYNC_EXCLUDE_ATTR } from "@blocksuite/std/inline";
+import { consume } from "@lit/context";
+import { html, nothing } from "lit";
+import { property, query } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+import * as Y from "yjs";
+import { LABEL } from "./consts";
+export function mountWardleyNodeLabelEditor(node, edgeless) {
+  const mountElm = edgeless.querySelector(".edgeless-mount-point");
+  if (!mountElm) {
+    throw new BlockSuiteError(ErrorCode.ValueNotExists, "edgeless block's mount point does not exist");
+  }
+  const gfx = edgeless.std.get(GfxControllerIdentifier);
+  const crud = edgeless.std.get(EdgelessCRUDIdentifier);
+  const updated = crud.getElementById(node.id);
+  if (!(updated instanceof WardleyNodeElementModel)) {
+    console.error("Cannot mount label editor on a non-wardley-node element");
+    return;
+  }
+  gfx.tool.setTool(DefaultTool);
+  gfx.selection.set({ elements: [node.id], editing: true });
+  if (!node.text) {
+    crud.updateElement(node.id, { text: new Y.Text() });
+  }
+  const editor = new EdgelessWardleyNodeLabelEditor();
+  editor.element = crud.getElementById(node.id);
+  mountElm.append(editor);
+}
+let EdgelessWardleyNodeLabelEditor = (() => {
+  let _classSuper = WithDisposable(ShadowlessElement);
+  let _element_decorators;
+  let _element_initializers = [];
+  let _element_extraInitializers = [];
+  let _std_decorators;
+  let _std_initializers = [];
+  let _std_extraInitializers = [];
+  let _richText_decorators;
+  let _richText_initializers = [];
+  let _richText_extraInitializers = [];
+  return class EdgelessWardleyNodeLabelEditor extends _classSuper {
+    static {
+      const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+      _element_decorators = [property({ attribute: false })];
+      _std_decorators = [consume({ context: stdContext })];
+      _richText_decorators = [query("rich-text")];
+      __esDecorate(this, null, _element_decorators, { kind: "accessor", name: "element", static: false, private: false, access: { has: (obj) => "element" in obj, get: (obj) => obj.element, set: (obj, value) => {
+        obj.element = value;
+      } }, metadata: _metadata }, _element_initializers, _element_extraInitializers);
+      __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: (obj) => "std" in obj, get: (obj) => obj.std, set: (obj, value) => {
+        obj.std = value;
+      } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
+      __esDecorate(this, null, _richText_decorators, { kind: "accessor", name: "richText", static: false, private: false, access: { has: (obj) => "richText" in obj, get: (obj) => obj.richText, set: (obj, value) => {
+        obj.richText = value;
+      } }, metadata: _metadata }, _richText_initializers, _richText_extraInitializers);
+      if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+    }
+    get inlineEditor() {
+      return this.richText.inlineEditor;
+    }
+    get crud() {
+      return this.std.get(EdgelessCRUDIdentifier);
+    }
+    get gfx() {
+      return this.std.get(GfxControllerIdentifier);
+    }
+    get selection() {
+      return this.gfx.selection;
+    }
+    get inlineEditorContainer() {
+      return this.inlineEditor?.rootElement;
+    }
+    _unmount() {
+      if (this.element.text) {
+        const text = this.element.text.toString();
+        const trimmed = text.trim();
+        if (trimmed.length === 0) {
+          this.crud.updateElement(this.element.id, { text: void 0 });
+        } else if (trimmed.length < text.length) {
+          this.crud.updateElement(this.element.id, {
+            text: new Y.Text(trimmed)
+          });
+        }
+      }
+      this.remove();
+      this.selection.set({ elements: [], editing: false });
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this.setAttribute(RANGE_SYNC_EXCLUDE_ATTR, "true");
+    }
+    firstUpdated() {
+      this.disposables.add(this.gfx.viewport.viewportUpdated.subscribe(() => this.requestUpdate()));
+      this.updateComplete.then(() => {
+        if (!this.inlineEditor)
+          return;
+        this.inlineEditor.focusEnd();
+        if (!this.inlineEditorContainer)
+          return;
+        this.disposables.addFromEvent(this.inlineEditorContainer, "blur", () => this._unmount());
+      }).catch(console.error);
+      this.disposables.addFromEvent(this, "keydown", (evt) => {
+        if (evt.key === "Escape") {
+          this.ownerDocument.activeElement?.blur();
+        }
+      });
+    }
+    async getUpdateComplete() {
+      const result = await super.getUpdateComplete();
+      await this.richText?.updateComplete;
+      return result;
+    }
+    render() {
+      if (!this.element.text)
+        return nothing;
+      const [, , w, h] = this.element.deserializedXYWH;
+      const R = Math.min(w, h) / 2;
+      const [ox, oy] = this.element.labelOffset ?? [0, 0];
+      const modelX = this.element.x + w / 2 + R + LABEL.gap + ox;
+      const modelY = this.element.y + h / 2 + oy - LABEL.font / 2;
+      const [x, y] = this.gfx.viewport.toViewCoord(modelX, modelY);
+      const zoom = this.gfx.viewport.zoom;
+      const style = styleMap({
+        position: "absolute",
+        left: `${x}px`,
+        top: `${y}px`,
+        minWidth: "8px",
+        fontSize: `${LABEL.font}px`,
+        fontFamily: TextUtils.wrapFontFamily(LABEL.family),
+        lineHeight: "normal",
+        color: LABEL.color,
+        outline: "none",
+        whiteSpace: "nowrap",
+        transform: `scale(${zoom}, ${zoom})`,
+        transformOrigin: "top left",
+        zIndex: "1"
+      });
+      return html`<rich-text
+      .yText=${this.element.text}
+      .enableFormat=${false}
+      .enableAutoScrollHorizontally=${false}
+      style=${style}
+    ></rich-text>`;
+    }
+    #element = __runInitializers(this, _element_initializers, void 0);
+    get element() {
+      return this.#element;
+    }
+    set element(_) {
+      this.#element = _;
+    }
+    #std = (__runInitializers(this, _element_extraInitializers), __runInitializers(this, _std_initializers, void 0));
+    get std() {
+      return this.#std;
+    }
+    set std(_) {
+      this.#std = _;
+    }
+    #richText = (__runInitializers(this, _std_extraInitializers), __runInitializers(this, _richText_initializers, void 0));
+    get richText() {
+      return this.#richText;
+    }
+    set richText(_) {
+      this.#richText = _;
+    }
+    constructor() {
+      super(...arguments);
+      __runInitializers(this, _richText_extraInitializers);
+    }
+  };
+})();
+export { EdgelessWardleyNodeLabelEditor };

package/dist/node/node-renderer.d.ts

@@ -0,0 +1,17 @@
+import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
+import { type WardleyNodeElementModel } from '@formicoidea/labre-core/model';
+/**
+ * Renderer for a Wardley node. The circle is drawn by REUSING the native shape
+ * renderer (so stroke width, colors and theme behave exactly like a native
+ * ellipse). On top of it, a glyph is drawn for two kinds:
+ *  - `anchor`    → an inscribed person (head + shoulders), clipped to the circle.
+ *  - `ecosystem` → a double border at the rim + diagonal hatching confined to the
+ *                  inner donut + a hollow central circle.
+ * All glyph strokes use the model's (editable) stroke color; the white band and
+ * the hollow center come from the base fill, so colors stay editable.
+ */
+export declare const wardleyNode: ElementRenderer<WardleyNodeElementModel>;
+export declare const WardleyNodeRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
+    identifier: import("@formicoidea/labre-core/global/di").ServiceIdentifier<ElementRenderer<WardleyNodeElementModel>>;
+};
+//# sourceMappingURL=node-renderer.d.ts.map

package/dist/node/node-renderer.js

@@ -0,0 +1,106 @@
+import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { shape as shapeRenderer } from '@formicoidea/labre-core/gfx/shape';
+import { DefaultTheme } from '@formicoidea/labre-core/model';
+import { ANCHOR, ECOSYSTEM, METHOD, NODE_FILL } from './consts';
+/**
+ * Renderer for a Wardley node. The circle is drawn by REUSING the native shape
+ * renderer (so stroke width, colors and theme behave exactly like a native
+ * ellipse). On top of it, a glyph is drawn for two kinds:
+ *  - `anchor`    → an inscribed person (head + shoulders), clipped to the circle.
+ *  - `ecosystem` → a double border at the rim + diagonal hatching confined to the
+ *                  inner donut + a hollow central circle.
+ * All glyph strokes use the model's (editable) stroke color; the white band and
+ * the hollow center come from the base fill, so colors stay editable.
+ */
+export const wardleyNode = (model, ctx, matrix, renderer, rc, bound) => {
+    const [, , w, h] = model.deserializedXYWH;
+    const cx = w / 2;
+    const cy = h / 2;
+    // Capture the element-local transform BEFORE the shape renderer mutates the
+    // matrix, so the glyph can be drawn in the same space afterwards.
+    const glyphMatrix = DOMMatrix.fromMatrix(matrix)
+        .translateSelf(cx, cy)
+        .rotateSelf(model.rotate)
+        .translateSelf(-cx, -cy);
+    // Native ellipse (fill / stroke / theme handled natively).
+    shapeRenderer(model, ctx, matrix, renderer, rc, bound);
+    if (model.kind !== 'anchor' &&
+        model.kind !== 'ecosystem' &&
+        model.kind !== 'method')
+        return;
+    const strokeWidth = model.strokeWidth || 1;
+    const R = Math.min(w, h) / 2 - strokeWidth / 2;
+    const color = renderer.getColorValue(model.strokeColor, DefaultTheme.shapeStrokeColor, true);
+    ctx.setTransform(glyphMatrix);
+    // ── Anchor: person glyph (clipped to the circle) ────────────────────
+    if (model.kind === 'anchor') {
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(cx, cy, R - strokeWidth / 2, 0, Math.PI * 2);
+        ctx.clip();
+        ctx.lineWidth = strokeWidth;
+        ctx.strokeStyle = color;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        // head
+        ctx.beginPath();
+        ctx.arc(cx, cy + ANCHOR.headCY * R, ANCHOR.headR * R, 0, Math.PI * 2);
+        ctx.stroke();
+        // rounded shoulders (extremities sit on the circle border)
+        const sx = ANCHOR.shoulderEndX * R;
+        const sy = ANCHOR.shoulderEndY * R;
+        const kx = ANCHOR.shoulderCtrlX * R;
+        const ky = ANCHOR.shoulderCtrlY * R;
+        ctx.beginPath();
+        ctx.moveTo(cx - sx, cy + sy);
+        ctx.bezierCurveTo(cx - kx, cy + ky, cx + kx, cy + ky, cx + sx, cy + sy);
+        ctx.stroke();
+        ctx.restore();
+        return;
+    }
+    // ── Method: a white component inscribed in the colored outer circle ──
+    if (model.kind === 'method') {
+        const rInner = R * METHOD.centerRatio;
+        ctx.fillStyle = NODE_FILL;
+        ctx.lineWidth = strokeWidth;
+        ctx.strokeStyle = color;
+        ctx.beginPath();
+        ctx.arc(cx, cy, rInner, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+        return;
+    }
+    // ── Ecosystem: double border + hatched inner donut + hollow center ──
+    const rBorder2 = R * ECOSYSTEM.secondBorderRatio;
+    const rCenter = R * ECOSYSTEM.centerRatio;
+    const rHatch = R * ECOSYSTEM.hatchOuterRatio;
+    // Hatch confined to the donut [rCenter, rHatch] (even-odd clip = annulus).
+    ctx.save();
+    ctx.beginPath();
+    ctx.arc(cx, cy, rHatch, 0, Math.PI * 2);
+    ctx.moveTo(cx + rCenter, cy);
+    ctx.arc(cx, cy, rCenter, 0, Math.PI * 2);
+    ctx.clip('evenodd');
+    ctx.lineWidth = Math.max(0.5, strokeWidth * 0.6);
+    ctx.strokeStyle = color;
+    const step = R * ECOSYSTEM.hatchSpacingRatio;
+    for (let d = -2 * R; d <= 2 * R; d += step) {
+        ctx.beginPath();
+        ctx.moveTo(cx - R, cy - R + d);
+        ctx.lineTo(cx + R, cy + R + d);
+        ctx.stroke();
+    }
+    ctx.restore();
+    // Double border (2nd inscribed circle) + central hole border. No fill: the
+    // white band and hollow center come from the base ellipse fill.
+    ctx.lineWidth = strokeWidth;
+    ctx.strokeStyle = color;
+    ctx.beginPath();
+    ctx.arc(cx, cy, rBorder2, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(cx, cy, rCenter, 0, Math.PI * 2);
+    ctx.stroke();
+};
+export const WardleyNodeRendererExtension = ElementRendererExtension('wardleyNode', wardleyNode);
+//# sourceMappingURL=node-renderer.js.map

package/{src/node/node-view.ts → dist/node/node-view.d.ts}

@@ -1,11 +1,11 @@
 import type { WardleyNodeElementModel } from '@formicoidea/labre-core/model';
 import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
-
 /**
  * View for a Wardley node. Registering it ensures `gfx.view.get(model)` returns
  * a view (required so move / select / connector interactions work). The label
  * is a separate native text element, so no custom editing is needed here.
  */
-export class WardleyNodeView extends GfxElementModelView<WardleyNodeElementModel> {
-  static override type: string = 'wardleyNode';
+export declare class WardleyNodeView extends GfxElementModelView<WardleyNodeElementModel> {
+    static type: string;
 }
+//# sourceMappingURL=node-view.d.ts.map

package/dist/node/node-view.js

@@ -0,0 +1,10 @@
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+/**
+ * View for a Wardley node. Registering it ensures `gfx.view.get(model)` returns
+ * a view (required so move / select / connector interactions work). The label
+ * is a separate native text element, so no custom editing is needed here.
+ */
+export class WardleyNodeView extends GfxElementModelView {
+    static { this.type = 'wardleyNode'; }
+}
+//# sourceMappingURL=node-view.js.map

package/dist/templates/index.d.ts

@@ -0,0 +1,3 @@
+import { type TemplateCategory } from '@formicoidea/labre-core/gfx/template';
+export declare const wardleyTemplateCategory: TemplateCategory;
+//# sourceMappingURL=index.d.ts.map