@formicoidea/labre-framework-wardley 0.23.1 → 0.23.2

package/package.json

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

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

@@ -1,63 +1,72 @@
-/**
- * Visual constants for the Wardley map background.
- *
- * Mirrors the relevant subset of
- * `../wardley-map-renderer/src/blocks/wardley-map/wardley-map-consts.ts`
- * and the validated mockup `../wardley-mockups/C-edgeless.html`.
- *
- * IMPORTANT: every size below is in **model units and FIXED** — fonts, margins,
- * offsets and stroke widths do NOT scale with the element size. Only the plot
- * interior (axis/divider positions, band rects) scales with the element's
- * width/height. This keeps the labels readable at a constant size (18) no
- * matter how large the background is enlarged.
- */
-/** Reference / fallback element width (16:9 — the height is derived). */
-export const REF_WIDTH = 1600;
-/** Fixed inner margins (sized to hold the fixed-size labels). */
-export const MARGIN = { left: 40, right: 30, top: 30, bottom: 38 };
-/** Fixed font sizes (the prominent labels are 18). */
-export const FONTS = { phase: 18, axis: 18, direction: 13, visibility: 16 };
-/** Fixed label offsets relative to the plot edges. */
-export const OFFSETS = {
-    phaseBaseline: 22, // phase labels & "Evolution" baseline below the X axis
-    phasePad: 6, // gap from each zone start
-    yHug: 9, // rotated Y labels gap (matches the X labels' visual gap)
-    directionTop: 20, // Uncharted/Industrialized baseline below the top
-    directionPadLeft: 14,
-    directionPadRight: 6,
-    evolutionPadRight: 16,
-    visibleTop: 56, // "Visible" y below the top
-    invisibleBottom: 44, // "Invisible" y above the bottom
-};
-/** Fixed stroke widths + decorations. */
-export const LINE = { axis: 2, divider: 1.2, card: 1.5 };
-export const ARROW = 11;
-export const CARD_RADIUS = 10;
-/** Evolution phase boundary ratios (interior dividers). */
-export const EVOLUTION_BOUNDARIES = [0.175, 0.4, 0.7];
-/** Ordered phases: [label, startRatio]. */
-export const EVOLUTION_PHASES = [
-    ['Genesis', 0],
-    ['Custom-Built', 0.175],
-    ['Product (+Rental)', 0.4],
-    ['Commodity (+Utility)', 0.7],
-];
-export const AXIS_LABELS = {
-    xAxis: 'Evolution',
-    yAxis: 'Value Chain',
-    evolutionStart: 'Uncharted',
-    evolutionEnd: 'Industrialized',
-    visibilityHigh: 'Visible',
-    visibilityLow: 'Invisible',
-};
-/** Colors (light theme, faithful to the reference renderer / mockup C). */
-export const COLORS = {
-    card: '#ffffff',
-    cardBorder: '#e3e2e4',
-    axis: '#3b3d42',
-    divider: '#9aa0a6',
-    label: '#6b7280',
-    band: ['#f7faff', '#eef4fb', '#e6eef8', '#dde8f4'],
-};
-export const FONT_FAMILY = 'Inter, sans-serif';
-//# sourceMappingURL=consts.js.map
+/**
+ * Visual constants for the Wardley map background.
+ *
+ * Mirrors the relevant subset of
+ * `../wardley-map-renderer/src/blocks/wardley-map/wardley-map-consts.ts`
+ * and the validated mockup `../wardley-mockups/C-edgeless.html`.
+ *
+ * IMPORTANT: every size below is in **model units and FIXED** — fonts, margins,
+ * offsets and stroke widths do NOT scale with the element size. Only the plot
+ * interior (axis/divider positions, band rects) scales with the element's
+ * width/height. This keeps the labels readable at a constant size (18) no
+ * matter how large the background is enlarged.
+ */
+
+/** Reference / fallback element width (16:9 — the height is derived). */
+export const REF_WIDTH = 1600;
+
+/** Fixed inner margins (sized to hold the fixed-size labels). */
+export const MARGIN = { left: 40, right: 30, top: 30, bottom: 38 };
+
+/** Fixed font sizes (the prominent labels are 18). */
+export const FONTS = { phase: 18, axis: 18, direction: 13, visibility: 16 };
+
+/** Fixed label offsets relative to the plot edges. */
+export const OFFSETS = {
+  phaseBaseline: 22, // phase labels & "Evolution" baseline below the X axis
+  phasePad: 6, // gap from each zone start
+  yHug: 9, // rotated Y labels gap (matches the X labels' visual gap)
+  directionTop: 20, // Uncharted/Industrialized baseline below the top
+  directionPadLeft: 14,
+  directionPadRight: 6,
+  evolutionPadRight: 16,
+  visibleTop: 56, // "Visible" y below the top
+  invisibleBottom: 44, // "Invisible" y above the bottom
+};
+
+/** Fixed stroke widths + decorations. */
+export const LINE = { axis: 2, divider: 1.2, card: 1.5 };
+export const ARROW = 11;
+export const CARD_RADIUS = 10;
+
+/** Evolution phase boundary ratios (interior dividers). */
+export const EVOLUTION_BOUNDARIES = [0.175, 0.4, 0.7] as const;
+
+/** Ordered phases: [label, startRatio]. */
+export const EVOLUTION_PHASES: ReadonlyArray<readonly [string, number]> = [
+  ['Genesis', 0],
+  ['Custom-Built', 0.175],
+  ['Product (+Rental)', 0.4],
+  ['Commodity (+Utility)', 0.7],
+];
+
+export const AXIS_LABELS = {
+  xAxis: 'Evolution',
+  yAxis: 'Value Chain',
+  evolutionStart: 'Uncharted',
+  evolutionEnd: 'Industrialized',
+  visibilityHigh: 'Visible',
+  visibilityLow: 'Invisible',
+};
+
+/** Colors (light theme, faithful to the reference renderer / mockup C). */
+export const COLORS = {
+  card: '#ffffff',
+  cardBorder: '#e3e2e4',
+  axis: '#3b3d42',
+  divider: '#9aa0a6',
+  label: '#6b7280',
+  band: ['#f7faff', '#eef4fb', '#e6eef8', '#dde8f4'] as const,
+};
+
+export const FONT_FAMILY = 'Inter, sans-serif';

package/{dist/descriptor.js → src/descriptor.ts}

@@ -5,4 +5,4 @@ export const wardleyFramework = {
   flag: 'wardley',
   telemetry: 'wardley',
   viewExtension: WardleyViewExtension,
-};
+} as const;

package/src/effects.ts

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,242 @@
+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

@@ -0,0 +1,143 @@
+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: [] });
+          }
+        },
+      };
+    },
+  }
+);