@formicoidea/labre-framework-edgy 0.40.0 → 0.42.0

package/dist/element-view.js

@@ -1,40 +1,31 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
-import { rotatePoint } from '@formicoidea/labre-core/global/gfx';
-import { GfxElementModelView, GfxViewInteractionExtension, } from '@formicoidea/labre-core/std/gfx';
+import { FrameworkBackgroundView } from '@formicoidea/labre-core/blocks/surface';
+import { GfxViewInteractionExtension } from '@formicoidea/labre-core/std/gfx';
 import { cropLabeledScale, refScale } from './consts.js';
-import { getEdgyLabelHits, hitTestEdgyLabel, } from './label-layout.js';
-export class EdgyView extends GfxElementModelView {
-    constructor() {
-        super(...arguments);
-        /** The in-place `<input>` used to edit a label, or null when idle. */
-        this._labelEditor = null;
-    }
+import { getEdgyLabelHits, hitTestEdgyLabel } from './label-layout.js';
+/**
+ * The EDGY facets diagram's view: the shared background gesture, aimed by this
+ * framework's own label layout.
+ *
+ * The three facet names are NOT declared in a `FrameworkBackgroundDef` — the
+ * diagram is a Venn figure fitted into a reference space, and its labels hang
+ * off the circles rather than off a plot — so the hit test stays here, mapped
+ * with the SAME fit the renderer used. Everything above it (where a
+ * double-click is allowed to land, the in-place `<input>`, the commit that
+ * refuses to write an untouched value) comes from
+ * {@link FrameworkBackgroundView}, which is where this diagram's own copy of it
+ * went — see issue #355.
+ */
+export class EdgyView extends FrameworkBackgroundView {
     static { this.type = 'edgy'; }
-    onCreated() {
-        super.onCreated();
-        this.on('dblclick', e => this._onDblClick(e));
-    }
-    onDestroyed() {
-        this._closeLabelEditor();
-        super.onDestroyed();
-    }
-    /** The editable facet label under a MODEL-space point, or null. */
-    _labelAt(mx, my) {
+    /**
+     * A diagram is SELECTED by its border (`EdgyFacetsElementModel`), and the
+     * three facet labels widen that for the pointer — the base class' doing; this
+     * method only says where they are.
+     */
+    labelAt(lx, ly, w, h) {
         // No labels shown → nothing to edit (and the cropped mapping differs).
         if (!this.model.showLabels)
             return null;
-        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;
-        }
         // Map element-local coords into the fixed reference space the labels live
         // in — with the SAME fit the renderer used (cropped or letterboxed).
         const { s, ox, oy } = this.model.cropToCircles
@@ -42,91 +33,11 @@ export class EdgyView extends GfxElementModelView {
             : refScale(w, h);
         const rx = (lx - ox) / s;
         const ry = (ly - oy) / s;
-        return hitTestEdgyLabel(getEdgyLabelHits(this.model), rx, ry);
-    }
-    /**
-     * The diagram is SELECTED by its border (`EdgyFacetsElementModel`), but its
-     * three facet labels must still receive the double-click that renames them.
-     *
-     * Same seam Wardley uses, for the same reason: the pointer router asks the
-     * VIEW, so a framework declares its own gesture zones next to the code that
-     * draws them, and the model layer keeps a hit test that only says what a
-     * click SELECTS.
-     */
-    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);
+        const hit = hitTestEdgyLabel(getEdgyLabelHits(this.model), rx, ry);
         if (!hit)
-            return;
-        this._openLabelEditor(hit.field, e);
-    }
-    _openLabelEditor(field, e) {
-        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 = () => {
-            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);
-    }
-    _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 });
-        }
+            return null;
+        // The facet names carry a hard default, so the drawn words ARE the prop.
+        return { prop: hit.field, text: String(this.model[hit.field] ?? '') };
     }
 }
 /**

package/dist/metamodel.d.ts

@@ -87,6 +87,26 @@ export type EdgyElementName = 'content' | 'purpose' | 'organisation' | 'process'
  * prints as a row label or a section title. One expression, one wording.
  */
 export declare const edgyElementLabel: (name: EdgyElementName | EdgyZone) => string;
+/**
+ * The i18n key {@link edgyElementLabel} is the English default of — one key
+ * per lowercase name, shared by every surface that writes the word: the "EDGY
+ * dynamic" template (`templates/dynamic.ts`), the Facets overview,
+ * Organisation chart and Customer journey scenes (`templates/index.ts`), and
+ * the facets background's own creation site (`actions.ts`, `EdgyFacetsProps`).
+ * `organisation`, `brand` and `product` are BOTH an element name and an
+ * intersection zone id — one word, one key, exactly the "un mot partagé = une
+ * clé" rule.
+ */
+export declare const edgyElementLabelKey: (name: EdgyElementName | EdgyZone) => string;
+/**
+ * The i18n key one of the metamodel's 24 canonical VERBS is the English
+ * default of — drawn raw as a connector label wherever the "EDGY dynamic"
+ * template or a hand-composed scene uses it (`surfaceText(verb)`), sharing one
+ * key per distinct verb string across every surface that writes it.
+ */
+export declare const edgyVerbSeedKey: (verb: string) => string;
+/** Every distinct verb {@link EDGY_DYNAMIC_RELATIONS} carries, in table order. */
+export declare const EDGY_DYNAMIC_VERBS: readonly string[];
 export declare const EDGY_DYNAMIC_NODES: Record<EdgyElementName, {
     kind: 'outcome' | 'object' | 'activity';
     cx: number;

package/dist/metamodel.js

@@ -100,6 +100,28 @@ export const EDGY_DYNAMIC_RELATIONS = [
  * prints as a row label or a section title. One expression, one wording.
  */
 export const edgyElementLabel = (name) => name.charAt(0).toUpperCase() + name.slice(1);
+/**
+ * The i18n key {@link edgyElementLabel} is the English default of — one key
+ * per lowercase name, shared by every surface that writes the word: the "EDGY
+ * dynamic" template (`templates/dynamic.ts`), the Facets overview,
+ * Organisation chart and Customer journey scenes (`templates/index.ts`), and
+ * the facets background's own creation site (`actions.ts`, `EdgyFacetsProps`).
+ * `organisation`, `brand` and `product` are BOTH an element name and an
+ * intersection zone id — one word, one key, exactly the "un mot partagé = une
+ * clé" rule.
+ */
+export const edgyElementLabelKey = (name) => `com.labre.edgy.seed.${name}`;
+/**
+ * The i18n key one of the metamodel's 24 canonical VERBS is the English
+ * default of — drawn raw as a connector label wherever the "EDGY dynamic"
+ * template or a hand-composed scene uses it (`surfaceText(verb)`), sharing one
+ * key per distinct verb string across every surface that writes it.
+ */
+export const edgyVerbSeedKey = (verb) => `com.labre.edgy.seed.verb-${verb.replace(/\s+/g, '-')}`;
+/** Every distinct verb {@link EDGY_DYNAMIC_RELATIONS} carries, in table order. */
+export const EDGY_DYNAMIC_VERBS = [
+    ...new Set(EDGY_DYNAMIC_RELATIONS.map(([, , verb]) => verb)),
+];
 export const EDGY_DYNAMIC_NODES = {
     content: { kind: 'object', cx: 237.5, cy: 100, zone: 'identity' },
     purpose: { kind: 'outcome', cx: 282.5, cy: 100, zone: 'identity' },

package/dist/node/node-renderer.js

@@ -1,4 +1,4 @@
-import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
+import { ElementRendererExtension, taggedPath2D, } from '@formicoidea/labre-core/blocks/surface';
 import { shape as shapeRenderer } from '@formicoidea/labre-core/gfx/shape';
 import { DefaultTheme } from '@formicoidea/labre-core/model';
 import { PERSON_GLYPH_PATHS, PERSON_GLYPH_VIEWBOX } from './consts.js';
@@ -33,7 +33,7 @@ export const edgyNode = (model, ctx, matrix, renderer, rc, bound) => {
     ctx.translate(-PERSON_GLYPH_VIEWBOX / 2, -PERSON_GLYPH_VIEWBOX / 2);
     ctx.fillStyle = color;
     for (const d of PERSON_GLYPH_PATHS) {
-        ctx.fill(new Path2D(d));
+        ctx.fill(taggedPath2D(d));
     }
 };
 export const EdgyNodeRendererExtension = ElementRendererExtension('edgyNode', edgyNode);

package/dist/templates/dynamic.js

@@ -1,7 +1,8 @@
 import { makeTemplateSnapshot, surfaceText, } from '@formicoidea/labre-core/gfx/template';
 import { ConnectorMode, PointStyle, StrokeStyle } from '@formicoidea/labre-core/model';
+import { translateKey } from '@formicoidea/labre-core/shared/services';
 import { CROP } from '../consts.js';
-import { EDGY_DYNAMIC_NODES, EDGY_DYNAMIC_RELATIONS, EDGY_ZONE_FILL, edgyElementLabel, } from '../metamodel.js';
+import { EDGY_DYNAMIC_NODES, EDGY_DYNAMIC_RELATIONS, EDGY_ZONE_FILL, edgyElementLabel, edgyElementLabelKey, edgyVerbSeedKey, } from '../metamodel.js';
 import { NODE_SIZE, NODE_STROKE } from '../node/consts.js';
 import { edgyNodeProps, edgyNodeTextProps } from '../presets.js';
 import { EDGY_RELATION_LABEL_DISTANCE, edgyVerbLabelXYWH } from '../relation.js';
@@ -31,7 +32,15 @@ export const DYN_SCALE = 4.8;
 export function dynToModel(refX, refY) {
     return [(refX - CROP.x) * DYN_SCALE, (refY - CROP.y) * DYN_SCALE];
 }
-function dynamic() {
+/**
+ * One label's resolved text — the host's catalogue when `std` is a real
+ * inserting editor, the English fallback when building the module's own
+ * `content` (no editor exists yet at that point).
+ */
+function seedText(std, key, fallback) {
+    return std ? translateKey(std, key, fallback) : fallback;
+}
+function dynamic(std) {
     const out = {
         bg: {
             type: 'edgy',
@@ -48,7 +57,7 @@ function dynamic() {
         const nw = w ?? NODE_SIZE[kind].w;
         const nh = NODE_SIZE[kind].h;
         const [mx, my] = dynToModel(cx, cy);
-        const name = edgyElementLabel(key);
+        const name = seedText(std, edgyElementLabelKey(key), edgyElementLabel(key));
         out[key] = {
             // What an EDGY node IS — the same description the toolbox draws from.
             ...edgyNodeProps(kind, {
@@ -65,6 +74,7 @@ function dynamic() {
         };
     }
     EDGY_DYNAMIC_RELATIONS.forEach(([src, dst, verb, t], i) => {
+        const verbText = seedText(std, edgyVerbSeedKey(verb), verb);
         out[`rel${i}`] = {
             type: 'connector',
             mode: ConnectorMode.Straight,
@@ -84,7 +94,12 @@ function dynamic() {
             // re-centred on the path at the first layout, but the w/h ARE the label
             // box — size it to the verb so the text lays out on one line. The
             // distance slides the verb along the link like the reference diagram.
-            text: surfaceText(verb),
+            //
+            // The BOX (`edgyVerbLabelXYWH`) is still measured off the ENGLISH verb:
+            // it is layout, sized once from the table this template already reads,
+            // and a translated word longer than its English original wraps inside
+            // that box like any other native text rather than resizing it.
+            text: surfaceText(verbText),
             labelXYWH: edgyVerbLabelXYWH(verb),
             labelOffset: { distance: t ?? EDGY_RELATION_LABEL_DISTANCE },
         };
@@ -103,4 +118,5 @@ export const edgyDynamicTemplate = {
     // and fails the day the command is renamed.
     commandId: 'edgy.insertDynamic',
     content: makeTemplateSnapshot(dynamic(), NAME),
+    localize: std => makeTemplateSnapshot(dynamic(std), NAME),
 };

package/dist/templates/index.d.ts

@@ -1,4 +1,132 @@
 import { type TemplateCategory } from '@formicoidea/labre-core/gfx/template';
+import { type ChromeWording } from '@formicoidea/labre-core/shared/services';
+/**
+ * The four hand-composed scenes' own tile names — chrome, not seeds: a
+ * `Template.nameKey`, re-resolved every time the panel opens, never written
+ * into a document. None of the four derives from a command.
+ */
+export declare const EDGY_TEMPLATE_NAME_FACETS_OVERVIEW: ChromeWording;
+export declare const EDGY_TEMPLATE_NAME_CUSTOMER_JOURNEY: ChromeWording;
+export declare const EDGY_TEMPLATE_NAME_SERVICE_BLUEPRINT: ChromeWording;
+export declare const EDGY_TEMPLATE_NAME_ORGANISATION_CHART: ChromeWording;
+export declare const EDGY_TEMPLATE_SEED: {
+    readonly facetsTitle: {
+        key: string;
+        fallback: string;
+    };
+    readonly intersectionsTitle: {
+        key: string;
+        fallback: string;
+    };
+    readonly journeyStep: {
+        key: string;
+        fallback: string;
+    };
+    readonly channel: {
+        key: string;
+        fallback: string;
+    };
+    readonly taskN: {
+        key: string;
+        fallback: string;
+    };
+    readonly customer: {
+        key: string;
+        fallback: string;
+    };
+    readonly laneEvidence: {
+        key: string;
+        fallback: string;
+    };
+    readonly laneCustomerActions: {
+        key: string;
+        fallback: string;
+    };
+    readonly laneOnstage: {
+        key: string;
+        fallback: string;
+    };
+    readonly laneBackstage: {
+        key: string;
+        fallback: string;
+    };
+    readonly laneSupportProcesses: {
+        key: string;
+        fallback: string;
+    };
+    readonly laneSupportSystems: {
+        key: string;
+        fallback: string;
+    };
+    readonly admissionForm: {
+        key: string;
+        fallback: string;
+    };
+    readonly confirmation: {
+        key: string;
+        fallback: string;
+    };
+    readonly sendForm: {
+        key: string;
+        fallback: string;
+    };
+    readonly followStatus: {
+        key: string;
+        fallback: string;
+    };
+    readonly receiveDecision: {
+        key: string;
+        fallback: string;
+    };
+    readonly formHandling: {
+        key: string;
+        fallback: string;
+    };
+    readonly customerSupport: {
+        key: string;
+        fallback: string;
+    };
+    readonly contact: {
+        key: string;
+        fallback: string;
+    };
+    readonly customerService: {
+        key: string;
+        fallback: string;
+    };
+    readonly customerFollowUp: {
+        key: string;
+        fallback: string;
+    };
+    readonly processForm: {
+        key: string;
+        fallback: string;
+    };
+    readonly decisionAcceptReject: {
+        key: string;
+        fallback: string;
+    };
+    readonly crmApplication: {
+        key: string;
+        fallback: string;
+    };
+    readonly caseManagement: {
+        key: string;
+        fallback: string;
+    };
+    readonly paymentsSystem: {
+        key: string;
+        fallback: string;
+    };
+    readonly businessUnit: {
+        key: string;
+        fallback: string;
+    };
+    readonly group: {
+        key: string;
+        fallback: string;
+    };
+};
 /**
  * The metamodel itself — the 12 elements and the 24 relations — lives in
  * `../metamodel.ts`, and the template that draws it in `./dynamic.ts`.