@formicoidea/labre-framework-wardley 0.41.0 → 0.42.0

package/dist/element-view.js

@@ -1,147 +1,31 @@
-import { backgroundLabelHits, EdgelessCRUDIdentifier, FrameworkBackgroundInteractionExtension, hitTestBackgroundLabel, } from '@formicoidea/labre-core/blocks/surface';
-import { TranslationProvider } from '@formicoidea/labre-core/shared/services';
-import { rotatePoint } from '@formicoidea/labre-core/global/gfx';
-import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
-import { isWardleyLabelProp, WARDLEY_BACKGROUND, } from './background.js';
-export class WardleyView extends GfxElementModelView {
-    constructor() {
-        super(...arguments);
-        /** The in-place `<input>` used to edit a label, or null when idle. */
-        this._labelEditor = null;
-    }
+import { DeclaredBackgroundView, FrameworkBackgroundInteractionExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { isWardleyLabelProp, WARDLEY_BACKGROUND } from './background.js';
+/**
+ * The Wardley map's view: the shared background gesture, aimed by the
+ * `WARDLEY_BACKGROUND` declaration.
+ *
+ * The in-place rename shipped here first and has moved to
+ * `DeclaredBackgroundView` (`@labre/affine-block-surface`) so that every
+ * framework background gets it rather than the two that got round to copying
+ * it — see issue #355. Nothing about the map's behaviour changed: the hit test
+ * reads the same declaration, through the same catalogue, and the guard below
+ * is the one thing this framework adds to it.
+ */
+export class WardleyView extends DeclaredBackgroundView {
     static { this.type = 'wardley'; }
-    onCreated() {
-        super.onCreated();
-        this.on('dblclick', e => this._onDblClick(e));
-    }
-    onDestroyed() {
-        this._closeLabelEditor();
-        super.onDestroyed();
+    get def() {
+        return WARDLEY_BACKGROUND;
     }
     /**
-     * The editable label under a MODEL-space point, or null.
+     * The declaration names the prop; this decides whether it may be WRITTEN.
      *
-     * Which labels exist, where they sit, what they SAY and which are editable
-     * all come from the declaration the renderer paints — one source, resolved
-     * through the same catalogue, so a label can never be drawn in one place
-     * and clicked in another, nor read one thing and open on another.
+     * A closed list, because since #73 an element preserves keys it does not
+     * declare: a typo in the declaration would otherwise persist a junk key onto
+     * every map it was double-clicked on.
      */
-    _labelAt(mx, my) {
-        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 = [bx + w / 2, by + h / 2];
-            const [ux, uy] = rotatePoint([mx, my], center, -rot);
-            lx = ux - bx;
-            ly = uy - by;
-        }
-        const hit = hitTestBackgroundLabel(backgroundLabelHits(WARDLEY_BACKGROUND, this.model, w, h, this.gfx.std.getOptional(TranslationProvider)), lx, ly);
-        // The declaration names the prop; this decides whether it may be written.
-        if (!hit || !isWardleyLabelProp(hit.prop))
-            return null;
-        return { prop: hit.prop, text: hit.text };
-    }
-    /**
-     * The map is SELECTED by its border (`WardleyBackgroundElementModel`), but
-     * its axis labels must still receive the double-click that renames them.
-     *
-     * So the two areas differ, and this is where they are allowed to: the pointer
-     * router asks the VIEW (`GfxViewEventManager`), and the view adds the zones
-     * the declaration draws its labels in. Picking is unaffected —
-     * `getElementByPoint` still asks the model, so a click in the middle of the
-     * map still goes to whatever the user put there.
-     */
-    includesPoint(x, y, options, host) {
-        if (super.includesPoint(x, y, options, host))
-            return true;
-        return this._labelAt(x, y) !== null;
-    }
-    /** Double-click on a label → edit its text in place. */
-    _onDblClick(e) {
-        if (this.model.isLocked())
-            return;
-        const [mx, my] = this.gfx.viewport.toModelCoord(e.x, e.y);
-        const hit = this._labelAt(mx, my);
-        if (!hit)
-            return;
-        this._openLabelEditor(hit.prop, hit.text, e);
-    }
-    /**
-     * @param current the words currently DRAWN — which is the vocabulary, not
-     * `model[field]`, for a label the user has never renamed. Opening on the raw
-     * prop would show an empty box for a label that plainly reads "Evolution".
-     */
-    _openLabelEditor(field, current, e) {
-        this._closeLabelEditor();
-        const input = document.createElement('input');
-        input.value = current;
-        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();
-            // Opening an editor is not renaming. Writing back an untouched value
-            // would persist the resolved VOCABULARY as the user's own text, freezing
-            // the label in whatever language it was read in and putting it beyond
-            // any catalogue for good — and it would push an empty entry onto undo.
-            if (value === current)
-                return;
-            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);
-    }
-    _closeLabelEditor() {
-        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 });
-        }
+    labelAt(lx, ly, w, h) {
+        const hit = super.labelAt(lx, ly, w, h);
+        return hit && isWardleyLabelProp(hit.prop) ? hit : null;
     }
 }
 /**

package/dist/index.d.ts

@@ -27,4 +27,5 @@ export { WARDLEY_BACKGROUND } from './background.js';
  */
 export { exportWardleyOwm, exportWardleyOwmWithWarnings, OWM_SCOPE, type OwmPlot, owmCoordsOf, owmPlotOf, owmPointOf, WARDLEY_OWM_FORMAT_ID, type WardleyExportBoard, wardleyBoardFrom, wardleySafeFilename, } from './export.js';
 export { importWardleyOwm } from './import.js';
+export { wardleyBoardOf, wardleyExportElementsOf, wardleyMapsSelected, } from './actions.js';
 export { WARDLEY_INTERCHANGE, WARDLEY_OWM_EXPORT, WARDLEY_OWM_EXTENSION, WARDLEY_OWM_FORMAT, WARDLEY_OWM_IMPORT, WARDLEY_OWM_MIME, WARDLEY_SVG_FORMAT, WARDLEY_SVG_IMPORT, } from './interchange.js';

package/dist/index.js

@@ -39,6 +39,10 @@ export { WARDLEY_BACKGROUND } from './background.js';
  */
 export { exportWardleyOwm, exportWardleyOwmWithWarnings, OWM_SCOPE, owmCoordsOf, owmPlotOf, owmPointOf, WARDLEY_OWM_FORMAT_ID, wardleyBoardFrom, wardleySafeFilename, } from './export.js';
 export { importWardleyOwm } from './import.js';
+// The half of the export that needs an editor, kept apart from the half that
+// does not — the same split C4's and BPMN's indexes make for the same reason:
+// what the selection scopes the file to lives here, the serializer next door.
+export { wardleyBoardOf, wardleyExportElementsOf, wardleyMapsSelected, } from './actions.js';
 // Wardley's entries in the interchange registry (`docs/adr/0012`) — the OWM
 // DSL both ways, and the visual-tier SVG fallback. Exported whole so a host can
 // ask what Wardley can read and write without mounting an editor, and call it

package/dist/legend.d.ts

@@ -1,12 +1,93 @@
-import { type WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
 import { type ChromeWording } from '@formicoidea/labre-core/shared/services';
-import type { BlockStdScope } from '@formicoidea/labre-core/std';
+import type { BlockStdScope, CommandLegendBox, CommandLegendEntry, CommandLegendRow, CommandLegendSurface } from '@formicoidea/labre-core/std';
+/** The legend box's own title. */
+export declare const WARDLEY_LEGEND_TITLE: ChromeWording;
+/**
+ * The market: a circle, three neutral dots and the triangle wiring them.
+ *
+ * A `custom` swatch and not a `glyph`, for the reason the pipeline and the
+ * porter below give: the drawing is SEVERAL elements, and the three connectors
+ * are anchored by id so the triangle follows its dots.
+ */
+declare function drawMarket(surface: CommandLegendSurface, box: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}): string[];
+/** The pipeline: the body, and the handle astride its top edge. */
+declare function drawPipeline(surface: CommandLegendSurface, box: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}): string[];
+/**
+ * The Porter rose at the row's scale: the circle, the four DERIVED arrows and
+ * the notation letter.
+ *
+ * Radius 6 and not the 8 the other circles get, because this glyph is the only
+ * one wider than its own circle: arrows included it spans
+ * `2 * (R + (gap + length) * R / 30)`, which at 8 would overrun a 30-unit row.
+ * It is a RATIO, so the PO's doubling of the map glyph left this row where it
+ * was.
+ *
+ * The letter is a SEPARATE text and not the circle's inner text (recette v2): a
+ * shape lays its text out inside a padding larger than this 12-unit box, so at
+ * font size 8 the character was pushed out under the circle.
+ */
+declare function drawPorter(surface: CommandLegendSurface, box: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}, std: BlockStdScope): string[];
+/**
+ * The swatch each of the thirteen rows is pictured by, keyed by the ROLE it
+ * stands for — eight real artefacts at their notation size, and five samples
+ * the framework draws itself: the two typed connectors, at the endpoints that
+ * tell them apart, and the three composites that are several elements.
+ */
+export declare const WARDLEY_LEGEND_ROWS: {
+    "wardley:component": CommandLegendRow;
+    "wardley:anchor": CommandLegendRow;
+    "wardley:market": {
+        swatch: "custom";
+        color: string;
+        draw: typeof drawMarket;
+    };
+    "wardley:ecosystem": CommandLegendRow;
+    "wardley:method": CommandLegendRow;
+    "wardley:pipeline": {
+        swatch: "custom";
+        color: string;
+        draw: typeof drawPipeline;
+    };
+    "wardley:dependency": CommandLegendRow;
+    "wardley:change-arrow": CommandLegendRow;
+    "wardley:inertia": CommandLegendRow;
+    "wardley:porter": {
+        swatch: "custom";
+        color: string;
+        draw: typeof drawPorter;
+    };
+    "wardley:accelerator": CommandLegendRow;
+    "wardley:decelerator": CommandLegendRow;
+    "wardley:area": CommandLegendRow;
+};
+/** A role Wardley pictures in its legend. */
+export type WardleyLegendRole = keyof typeof WARDLEY_LEGEND_ROWS;
 /** Every {@link LEGEND_DESC} wording, for `translations.ts`'s manifest. */
 export declare const WARDLEY_LEGEND_DESC_WORDINGS: readonly ChromeWording[];
+/**
+ * The legend line one command subscribes — the swatch of the role it stamps,
+ * and the sentence that explains it. Its sub-title comes from the command's own
+ * catalogue category (Nodes, Connectors, Areas), so a section is declared by
+ * filing a command rather than by a second list.
+ */
+export declare function wardleyLegendEntry(role: WardleyLegendRole): CommandLegendEntry;
 /** Every {@link LEGEND_GRADIENT} caption, for `translations.ts`'s manifest. */
 export declare const WARDLEY_LEGEND_GRADIENT_WORDINGS: readonly ChromeWording[];
-/** The legend box's own title. */
-export declare const WARDLEY_LEGEND_TITLE: ChromeWording;
 /** The five-forces panel's own title. */
 export declare const WARDLEY_LEGEND_PORTER_TITLE: ChromeWording;
 /** Every {@link PORTER_FORCES} wording, plus the caption, for the manifest. */
@@ -36,20 +117,16 @@ interface PorterPanelLayout {
  */
 export declare function porterPanelLayout(w: number): PorterPanelLayout;
 /**
- * Every wording this file writes onto the canvas, for `translations.ts`'s
- * manifest contribution — the auto-legend's own title, its rows' captions,
- * the gradient blocks and the Porter panel, all as `seed` (written into the
- * document once, at the moment a legend is generated).
+ * How a Wardley map's legend box is laid out, and the two blocks it adds under
+ * the rows. Declared on the FIRST background command (`commands.ts`), which is
+ * the sheet the legend is drawn on.
  */
-export declare const WARDLEY_LEGEND_WORDINGS: readonly ChromeWording[];
+export declare const WARDLEY_LEGEND_BOX: CommandLegendBox;
 /**
- * Build a "Legend" group from real, editable elements (white rect frame +
- * "Legend" text + one row of [real component glyph + description text] per
- * Wardley component TYPE present inside the background's perimeter + a
- * gradient-meaning block when the background is a gradient variant + the
- * five-forces panel when a Porter's-forces glyph is on the map). A snapshot
- * is created on each call; everything is grouped so it can be moved / resized /
- * edited and is dropped bottom-left of the background.
+ * Every wording this file writes onto the canvas, for `translations.ts`'s
+ * manifest contribution — the box's own title, its rows' captions, the gradient
+ * blocks and the Porter panel, all as `seed` (written into the document once,
+ * at the moment a legend is generated).
  */
-export declare function createWardleyLegend(std: BlockStdScope, bg: WardleyBackgroundElementModel): void;
+export declare const WARDLEY_LEGEND_WORDINGS: readonly ChromeWording[];
 export {};