@formicoidea/labre-framework-wardley 0.23.0 → 0.23.1

package/dist/toolbar/wardley-tool-button.js

@@ -0,0 +1,123 @@
+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 { Bound } from "@blocksuite/global/gfx";
+import { css, html, LitElement } from "lit";
+import { property } from "lit/decorators.js";
+import { REF_WIDTH } from "../consts";
+const WardleyIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M5 4v15h15" />
+  <path d="M10 9l6 5" stroke-width="1.1" />
+  <circle cx="10" cy="9" r="1.4" fill="currentColor" stroke="none" />
+  <circle cx="16" cy="14" r="1.4" fill="currentColor" stroke="none" />
+</svg>`;
+let EdgelessWardleyToolButton = (() => {
+  let _classSuper = LitElement;
+  let _gfx_decorators;
+  let _gfx_initializers = [];
+  let _gfx_extraInitializers = [];
+  return class EdgelessWardleyToolButton extends _classSuper {
+    static {
+      const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+      _gfx_decorators = [property({ attribute: false })];
+      __esDecorate(this, null, _gfx_decorators, { kind: "accessor", name: "gfx", static: false, private: false, access: { has: (obj) => "gfx" in obj, get: (obj) => obj.gfx, set: (obj, value) => {
+        obj.gfx = value;
+      } }, metadata: _metadata }, _gfx_initializers, _gfx_extraInitializers);
+      if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+    }
+    static {
+      this.styles = css`
+    :host {
+      display: flex;
+    }
+  `;
+    }
+    _addWardley() {
+      const { gfx } = this;
+      if (!gfx?.surface)
+        return;
+      let width = REF_WIDTH;
+      for (const el of gfx.surface.getElementsByType("wardley")) {
+        const [, , ew, eh] = el.deserializedXYWH;
+        const effWidth = Math.max(ew, eh * 16 / 9);
+        if (effWidth > width)
+          width = effWidth;
+      }
+      const height = width * 9 / 16;
+      const { centerX, centerY } = gfx.viewport;
+      const id = gfx.surface.addElement({
+        type: "wardley",
+        xywh: new Bound(centerX - width / 2, centerY - height / 2, width, height).serialize()
+      });
+      gfx.doc.captureSync();
+      gfx.selection.set({ elements: [id], editing: false });
+    }
+    render() {
+      return html`<edgeless-tool-icon-button
+      .tooltip=${"Wardley map"}
+      .iconContainerPadding=${6}
+      .iconSize=${"24px"}
+      @click=${() => this._addWardley()}
+    >
+      ${WardleyIcon}
+    </edgeless-tool-icon-button>`;
+    }
+    #gfx = __runInitializers(this, _gfx_initializers, void 0);
+    get gfx() {
+      return this.#gfx;
+    }
+    set gfx(_) {
+      this.#gfx = _;
+    }
+    constructor() {
+      super(...arguments);
+      __runInitializers(this, _gfx_extraInitializers);
+    }
+  };
+})();
+export { EdgelessWardleyToolButton };

package/dist/view.d.ts

@@ -0,0 +1,7 @@
+import { type ViewExtensionContext, ViewExtensionProvider } from '@formicoidea/labre-core/ext-loader';
+export declare class WardleyViewExtension extends ViewExtensionProvider {
+    name: string;
+    effect(): void;
+    setup(context: ViewExtensionContext): void;
+}
+//# sourceMappingURL=view.d.ts.map

package/dist/view.js

@@ -0,0 +1,36 @@
+import { ViewExtensionProvider, } from '@formicoidea/labre-core/ext-loader';
+import { extendTemplateCategory } from '@formicoidea/labre-core/gfx/template';
+import { effects } from './effects';
+import { wardleyTemplateCategory } from './templates';
+import { WardleyElementRendererExtension } from './element-renderer';
+import { WardleyInteraction, WardleyView } from './element-view';
+import { WardleyNodeRendererExtension } from './node/node-renderer';
+import { WardleyNodeView } from './node/node-view';
+import { wardleyNodeToolbarExtension } from './toolbar/node-config';
+import { wardleyToolbarExtension } from './toolbar/config';
+import { wardleySeniorTool } from './toolbar/senior-tool';
+export class WardleyViewExtension extends ViewExtensionProvider {
+    constructor() {
+        super(...arguments);
+        this.name = 'affine-wardley-gfx';
+    }
+    effect() {
+        super.effect();
+        effects();
+        extendTemplateCategory(wardleyTemplateCategory);
+    }
+    setup(context) {
+        super.setup(context);
+        context.register(WardleyView);
+        context.register(WardleyElementRendererExtension);
+        context.register(WardleyNodeView);
+        context.register(WardleyNodeRendererExtension);
+        if (this.isEdgeless(context.scope)) {
+            context.register(WardleyInteraction);
+            context.register(wardleySeniorTool);
+            context.register(wardleyToolbarExtension);
+            context.register(wardleyNodeToolbarExtension);
+        }
+    }
+}
+//# sourceMappingURL=view.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-wardley",
   "description": "Labre wardley framework for @formicoidea/labre-core.",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -10,15 +10,24 @@
   ],
   "license": "MPL-2.0",
   "exports": {
-    ".": "./src/index.ts",
-    "./view": "./src/view.ts",
-    "./descriptor": "./src/descriptor.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./view": {
+      "types": "./dist/view.d.ts",
+      "import": "./dist/view.js"
+    },
+    "./descriptor": {
+      "types": "./dist/descriptor.d.ts",
+      "import": "./dist/descriptor.js"
+    }
   },
   "files": [
-    "src"
+    "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.23.0",
+    "@formicoidea/labre-core": "0.23.1",
     "lit": "^3.2.0"
   }
 }

package/src/effects.ts

@@ -1,17 +0,0 @@
-import { EdgelessWardleyMenu } from './toolbar/wardley-menu';
-import { EdgelessWardleySeniorButton } from './toolbar/wardley-senior-button';
-
-export function effects() {
-  customElements.define('edgeless-wardley-menu', EdgelessWardleyMenu);
-  customElements.define(
-    'edgeless-wardley-senior-button',
-    EdgelessWardleySeniorButton
-  );
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'edgeless-wardley-menu': EdgelessWardleyMenu;
-    'edgeless-wardley-senior-button': EdgelessWardleySeniorButton;
-  }
-}

package/src/element-renderer.ts

@@ -1,242 +0,0 @@
-import {
-  type ElementRenderer,
-  ElementRendererExtension,
-} from '@formicoidea/labre-core/blocks/surface';
-import type { WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
-
-import {
-  ARROW,
-  CARD_RADIUS,
-  COLORS,
-  EVOLUTION_BOUNDARIES,
-  FONT_FAMILY,
-  FONTS,
-  LINE,
-  MARGIN,
-  OFFSETS,
-} from './consts';
-import { BENEFIT_ZERO_FRAC, paintGradientBackground } from './gradient';
-
-function roundRectPath(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  r: number
-) {
-  const rr = Math.min(r, w / 2, h / 2);
-  ctx.beginPath();
-  ctx.moveTo(x + rr, y);
-  ctx.arcTo(x + w, y, x + w, y + h, rr);
-  ctx.arcTo(x + w, y + h, x, y + h, rr);
-  ctx.arcTo(x, y + h, x, y, rr);
-  ctx.arcTo(x, y, x + w, y, rr);
-  ctx.closePath();
-}
-
-/**
- * Canvas renderer for the Wardley map background — reproduces mockup C:
- * an L-shaped axes frame (no top/right border), dashed evolution dividers and
- * the symmetric axis labels.
- *
- * All sizes (fonts, margins, offsets, strokes) are FIXED model units — they do
- * not scale with the element size. Only the plot interior scales.
- */
-export const wardley: ElementRenderer<WardleyBackgroundElementModel> = (
-  model,
-  ctx,
-  matrix
-) => {
-  const [, , w, h] = model.deserializedXYWH;
-  const cx = w / 2;
-  const cy = h / 2;
-  ctx.setTransform(
-    matrix.translateSelf(cx, cy).rotateSelf(model.rotate).translateSelf(-cx, -cy)
-  );
-
-  const px0 = MARGIN.left;
-  const px1 = w - MARGIN.right;
-  const py0 = MARGIN.top;
-  const py1 = h - MARGIN.bottom;
-  const pw = px1 - px0;
-  const ph = py1 - py0;
-  const ex = (r: number) => px0 + r * pw;
-
-  const line = (x1: number, y1: number, x2: number, y2: number) => {
-    ctx.beginPath();
-    ctx.moveTo(x1, y1);
-    ctx.lineTo(x2, y2);
-    ctx.stroke();
-  };
-  const vtext = (
-    text: string,
-    x: number,
-    y: number,
-    fontSize: number,
-    color: string
-  ) => {
-    ctx.save();
-    ctx.translate(x, y);
-    ctx.rotate(-Math.PI / 2);
-    ctx.font = `${fontSize}px ${FONT_FAMILY}`;
-    ctx.fillStyle = color;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'alphabetic';
-    ctx.fillText(text, 0, 0);
-    ctx.restore();
-  };
-
-  // ── Card (element bounds) ───────────────────────────────────────────
-  const inset = LINE.card / 2;
-  roundRectPath(ctx, inset, inset, w - inset * 2, h - inset * 2, CARD_RADIUS);
-  ctx.fillStyle = COLORS.card;
-  ctx.fill();
-  ctx.strokeStyle = COLORS.cardBorder;
-  ctx.lineWidth = LINE.card;
-  ctx.stroke();
-
-  // ── Curve-driven gradient variants (inscribed in the frame) ─────────
-  // Hidden when `showGradient` is false → plain white background.
-  if (model.variant !== 'classic' && model.showGradient) {
-    paintGradientBackground(ctx, model.variant, px0, px1, py0, py1);
-    if (model.variant === 'benefit') {
-      const zy = py1 - BENEFIT_ZERO_FRAC * ph;
-      ctx.strokeStyle = COLORS.axis;
-      ctx.lineWidth = 1.2;
-      ctx.beginPath();
-      ctx.moveTo(px0, zy);
-      ctx.lineTo(px1, zy);
-      ctx.stroke();
-    }
-  }
-
-  // ── Optional evolution band tints ───────────────────────────────────
-  if (model.banded) {
-    const starts = [0, 0.175, 0.4, 0.7];
-    const ends = [0.175, 0.4, 0.7, 1];
-    for (let i = 0; i < 4; i++) {
-      ctx.fillStyle = COLORS.band[i];
-      ctx.fillRect(ex(starts[i]), py0, ex(ends[i]) - ex(starts[i]), ph);
-    }
-  }
-
-  // ── Evolution phase dividers (dashed) ───────────────────────────────
-  if (model.showColumnDividers) {
-    ctx.strokeStyle = COLORS.divider;
-    ctx.lineWidth = LINE.divider;
-    ctx.setLineDash([5, 5]);
-    for (const r of EVOLUTION_BOUNDARIES) {
-      line(ex(r), py0, ex(r), py1);
-    }
-    ctx.setLineDash([]);
-  }
-
-  // ── Axes (L shape) + arrowheads ─────────────────────────────────────
-  // X and Y axes are independently toggleable. Each line stops at the base of
-  // its arrowhead (1px overlap, hidden under the triangle) so the line never
-  // pokes past the tip on zoom.
-  ctx.strokeStyle = COLORS.axis;
-  ctx.lineWidth = LINE.axis;
-  ctx.fillStyle = COLORS.axis;
-  if (model.showXAxis) {
-    line(px0, py1, px1 - ARROW + 1, py1); // X axis (arrow tip at px1)
-    ctx.beginPath(); // X arrow (points right)
-    ctx.moveTo(px1, py1);
-    ctx.lineTo(px1 - ARROW, py1 - ARROW / 2);
-    ctx.lineTo(px1 - ARROW, py1 + ARROW / 2);
-    ctx.closePath();
-    ctx.fill();
-  }
-  if (model.showYAxis) {
-    line(px0, py1, px0, py0 + ARROW - 1); // Y axis (arrow tip at py0)
-    ctx.beginPath(); // Y arrow (points up)
-    ctx.moveTo(px0, py0);
-    ctx.lineTo(px0 - ARROW / 2, py0 + ARROW);
-    ctx.lineTo(px0 + ARROW / 2, py0 + ARROW);
-    ctx.closePath();
-    ctx.fill();
-  }
-
-  // ── Horizontal labels ───────────────────────────────────────────────
-  ctx.textBaseline = 'alphabetic';
-  // Phase (column) labels (left-aligned at each zone start)
-  if (model.showColumnLabels) {
-    ctx.font = `${FONTS.phase}px ${FONT_FAMILY}`;
-    ctx.fillStyle = COLORS.label;
-    ctx.textAlign = 'left';
-    const phases: Array<[string, number]> = [
-      [model.phase0, 0],
-      [model.phase1, 0.175],
-      [model.phase2, 0.4],
-      [model.phase3, 0.7],
-    ];
-    for (const [label, start] of phases) {
-      ctx.fillText(
-        label,
-        ex(start) + OFFSETS.phasePad,
-        py1 + OFFSETS.phaseBaseline
-      );
-    }
-  }
-  // "Evolution" title near the X arrow (tied to the X axis)
-  if (model.showXAxis) {
-    ctx.font = `${FONTS.axis}px ${FONT_FAMILY}`;
-    ctx.fillStyle = COLORS.axis;
-    ctx.textAlign = 'right';
-    ctx.fillText(
-      model.xAxisTitle,
-      px1 - OFFSETS.evolutionPadRight,
-      py1 + OFFSETS.phaseBaseline
-    );
-  }
-  // Direction indicators (Uncharted / Industrialized, top corners)
-  if (model.showCornerLabels) {
-    ctx.font = `${FONTS.direction}px ${FONT_FAMILY}`;
-    ctx.fillStyle = COLORS.label;
-    ctx.textAlign = 'left';
-    ctx.fillText(
-      model.evolutionStart,
-      px0 + OFFSETS.directionPadLeft,
-      py0 + OFFSETS.directionTop
-    );
-    ctx.textAlign = 'right';
-    ctx.fillText(
-      model.evolutionEnd,
-      px1 - OFFSETS.directionPadRight,
-      py0 + OFFSETS.directionTop
-    );
-  }
-
-  // ── Rotated Y labels (hugging the axis, symmetric with the X labels) ─
-  if (model.showYAxis) {
-    vtext(
-      model.yAxisTitle,
-      px0 - OFFSETS.yHug,
-      (py0 + py1) / 2,
-      FONTS.axis,
-      COLORS.axis
-    );
-  }
-  if (model.showVisibilityLabels) {
-    vtext(
-      model.visibilityHigh,
-      px0 - OFFSETS.yHug,
-      py0 + OFFSETS.visibleTop,
-      FONTS.visibility,
-      COLORS.label
-    );
-    vtext(
-      model.visibilityLow,
-      px0 - OFFSETS.yHug,
-      py1 - OFFSETS.invisibleBottom,
-      FONTS.visibility,
-      COLORS.label
-    );
-  }
-};
-
-export const WardleyElementRendererExtension = ElementRendererExtension(
-  'wardley',
-  wardley
-);

package/src/element-view.ts

@@ -1,143 +0,0 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
-import type { WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
-import { rotatePoint } from '@formicoidea/labre-core/global/gfx';
-import type { PointerEventState } from '@formicoidea/labre-core/std';
-import {
-  GfxElementModelView,
-  GfxViewInteractionExtension,
-} from '@formicoidea/labre-core/std/gfx';
-
-import {
-  getWardleyLabelHits,
-  hitTestWardleyLabel,
-  type WardleyLabelField,
-} from './label-layout';
-
-export class WardleyView extends GfxElementModelView<WardleyBackgroundElementModel> {
-  static override type: string = 'wardley';
-
-  /** The in-place `<input>` used to edit a label, or null when idle. */
-  private _labelEditor: HTMLInputElement | null = null;
-
-  override onCreated(): void {
-    super.onCreated();
-    this.on('dblclick', e => this._onDblClick(e));
-  }
-
-  override onDestroyed(): void {
-    this._closeLabelEditor();
-    super.onDestroyed();
-  }
-
-  /** Double-click on a label → edit its text in place. */
-  private _onDblClick(e: PointerEventState): void {
-    if (this.model.isLocked()) return;
-
-    const [mx, my] = this.gfx.viewport.toModelCoord(e.x, e.y);
-    const [bx, by, w, h] = this.model.deserializedXYWH;
-
-    // Convert the model-space point into element-local coordinates, undoing the
-    // element rotation around its center.
-    let lx = mx - bx;
-    let ly = my - by;
-    const rot = this.model.rotate ?? 0;
-    if (rot) {
-      const center: [number, number] = [bx + w / 2, by + h / 2];
-      const [ux, uy] = rotatePoint([mx, my], center, -rot);
-      lx = ux - bx;
-      ly = uy - by;
-    }
-
-    const hit = hitTestWardleyLabel(getWardleyLabelHits(this.model, w, h), lx, ly);
-    if (!hit) return;
-
-    this._openLabelEditor(hit.field, e);
-  }
-
-  private _openLabelEditor(field: WardleyLabelField, e: PointerEventState): void {
-    this._closeLabelEditor();
-
-    const input = document.createElement('input');
-    input.value = String(this.model[field] ?? '');
-    Object.assign(input.style, {
-      position: 'fixed',
-      left: `${e.raw.clientX}px`,
-      top: `${e.raw.clientY}px`,
-      transform: 'translate(-50%, -50%)',
-      zIndex: '10000',
-      minWidth: '140px',
-      padding: '3px 8px',
-      font: '14px Inter, sans-serif',
-      color: 'var(--affine-text-primary-color, #1f2328)',
-      background: 'var(--affine-background-overlay-panel-color, #ffffff)',
-      border: '1px solid var(--affine-primary-color, #1e96eb)',
-      borderRadius: '6px',
-      boxShadow: 'var(--affine-shadow-2, 0 2px 8px rgba(0,0,0,0.18))',
-      outline: 'none',
-    });
-    document.body.append(input);
-    this._labelEditor = input;
-
-    // Mark the element as "editing" so the global edgeless key handlers
-    // (delete, escape, etc.) don't act on it while the user types.
-    this.gfx.selection.set({ elements: [this.model.id], editing: true });
-
-    input.focus();
-    input.select();
-
-    const commit = () => {
-      // Guard against re-entrancy: removing the input fires `blur`, which would
-      // otherwise call `commit` a second time.
-      if (this._labelEditor !== input) return;
-      const value = input.value;
-      this._closeLabelEditor();
-      this.gfx.std.store.captureSync();
-      this.gfx.std
-        .get(EdgelessCRUDIdentifier)
-        .updateElement(this.model.id, { [field]: value });
-    };
-
-    input.addEventListener('keydown', ev => {
-      ev.stopPropagation();
-      if (ev.key === 'Enter') {
-        ev.preventDefault();
-        commit();
-      } else if (ev.key === 'Escape') {
-        ev.preventDefault();
-        this._closeLabelEditor();
-      }
-    });
-    input.addEventListener('blur', commit);
-  }
-
-  private _closeLabelEditor(): void {
-    if (!this._labelEditor) return;
-    const input = this._labelEditor;
-    this._labelEditor = null;
-    input.remove();
-    if (this.isConnected) {
-      this.gfx.selection.set({ elements: [this.model.id], editing: false });
-    }
-  }
-}
-
-/**
- * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
- * true. `beforeResize` is re-evaluated every time the allowed handles are
- * computed (manager.ts), so toggling the field from the toolbar updates the
- * handles reactively. Moving/selecting stays available throughout.
- */
-export const WardleyInteraction = GfxViewInteractionExtension<WardleyView>(
-  WardleyView.type,
-  {
-    handleResize({ model }) {
-      return {
-        beforeResize({ set }) {
-          if (!model.resizeEnabled) {
-            set({ allowedHandlers: [] });
-          }
-        },
-      };
-    },
-  }
-);