@formicoidea/labre-framework-edgy 0.23.1 → 0.23.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-edgy",
   "description": "Labre edgy 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,46 +1,50 @@
-/**
- * Visual constants for the EDGY "Enterprise Design Facets" diagram.
- *
- * The whole diagram is authored in a FIXED reference coordinate space
- * (`REF_W × REF_H`, matching the validated mockup) and the renderer scales it
- * uniformly to the element bounds — so the three circles always stay circular
- * and the pictos/labels keep their relative proportions at any size.
- */
-/** Reference design size (the validated mockup canvas). */
-export const REF_W = 680;
-export const REF_H = 400;
-/** Circle geometry in reference coords. */
-export const VENN = {
-    cx: REF_W / 2,
-    cy: 176,
-    /** Circle radius. */
-    R: 95,
-    /** Distance of each circle centre from the diagram centre. */
-    r0: 56,
-};
-/** Saturated facet + intersection colours (faithful to the official icons). */
-export const COLORS = {
-    identity: '#00ea4e',
-    architecture: '#034cee',
-    experience: '#ff0056',
-    organisation: '#00caf4',
-    brand: '#ffa500',
-    product: '#cf00ff',
-    center: '#ffffff',
-    separator: '#ffffff',
-    picto: '#ffffff',
-};
-/** Fixed picto line width + label font. */
-export const PICTO_STROKE = 2.4;
-export const LABEL_FONT_SIZE = 15;
-export const FONT_FAMILY = 'Inter, sans-serif';
-/**
- * Uniform fit of the reference design into an element of size `w × h`: the
- * scale factor plus the centering offsets (letterboxed). Shared by the renderer
- * (to draw) and the view (to map clicks back into reference coords).
- */
-export function refScale(w, h) {
-    const s = Math.min(w / REF_W, h / REF_H);
-    return { s, ox: (w - REF_W * s) / 2, oy: (h - REF_H * s) / 2 };
-}
-//# sourceMappingURL=consts.js.map
+/**
+ * Visual constants for the EDGY "Enterprise Design Facets" diagram.
+ *
+ * The whole diagram is authored in a FIXED reference coordinate space
+ * (`REF_W × REF_H`, matching the validated mockup) and the renderer scales it
+ * uniformly to the element bounds — so the three circles always stay circular
+ * and the pictos/labels keep their relative proportions at any size.
+ */
+
+/** Reference design size (the validated mockup canvas). */
+export const REF_W = 680;
+export const REF_H = 400;
+
+/** Circle geometry in reference coords. */
+export const VENN = {
+  cx: REF_W / 2,
+  cy: 176,
+  /** Circle radius. */
+  R: 95,
+  /** Distance of each circle centre from the diagram centre. */
+  r0: 56,
+} as const;
+
+/** Saturated facet + intersection colours (faithful to the official icons). */
+export const COLORS = {
+  identity: '#00ea4e',
+  architecture: '#034cee',
+  experience: '#ff0056',
+  organisation: '#00caf4',
+  brand: '#ffa500',
+  product: '#cf00ff',
+  center: '#ffffff',
+  separator: '#ffffff',
+  picto: '#ffffff',
+} as const;
+
+/** Fixed picto line width + label font. */
+export const PICTO_STROKE = 2.4;
+export const LABEL_FONT_SIZE = 15;
+export const FONT_FAMILY = 'Inter, sans-serif';
+
+/**
+ * Uniform fit of the reference design into an element of size `w × h`: the
+ * scale factor plus the centering offsets (letterboxed). Shared by the renderer
+ * (to draw) and the view (to map clicks back into reference coords).
+ */
+export function refScale(w: number, h: number) {
+  const s = Math.min(w / REF_W, h / REF_H);
+  return { s, ox: (w - REF_W * s) / 2, oy: (h - REF_H * s) / 2 };
+}

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

@@ -5,4 +5,4 @@ export const edgyFramework = {
   flag: 'edgy',
   telemetry: 'edgy',
   viewExtension: EdgyViewExtension,
-};
+} as const;

package/src/effects.ts

@@ -0,0 +1,14 @@
+import { EdgelessEdgyMenu } from './toolbar/edgy-menu';
+import { EdgelessEdgySeniorButton } from './toolbar/edgy-senior-button';
+
+export function effects() {
+  customElements.define('edgeless-edgy-menu', EdgelessEdgyMenu);
+  customElements.define('edgeless-edgy-senior-button', EdgelessEdgySeniorButton);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-edgy-menu': EdgelessEdgyMenu;
+    'edgeless-edgy-senior-button': EdgelessEdgySeniorButton;
+  }
+}

package/src/element-renderer.ts

@@ -0,0 +1,208 @@
+import {
+  type ElementRenderer,
+  ElementRendererExtension,
+} from '@formicoidea/labre-core/blocks/surface';
+import type { EdgyFacetsElementModel } from '@formicoidea/labre-core/model';
+
+import {
+  COLORS,
+  FONT_FAMILY,
+  LABEL_FONT_SIZE,
+  PICTO_STROKE,
+  REF_H,
+  REF_W,
+  refScale,
+  VENN,
+} from './consts';
+import { CIRCLE_A, CIRCLE_B, CIRCLE_C, facetLabelAnchors } from './label-layout';
+
+type Pt = { x: number; y: number };
+
+/**
+ * Canvas renderer for the EDGY Enterprise Design Facets diagram — reproduces the
+ * validated mockup: three overlapping circles (Identity / Architecture /
+ * Experience), the three pairwise intersection regions (Organisation / Brand /
+ * Product) painted by clip-intersection, the white centre, the six white
+ * pictograms and the three facet labels placed outside the circles.
+ *
+ * The whole diagram is drawn in the fixed reference space and scaled uniformly
+ * to the element bounds so the circles never distort.
+ */
+export const edgy: ElementRenderer<EdgyFacetsElementModel> = (
+  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)
+  );
+
+  // Uniform fit of the reference design, centered (letterboxed).
+  const { s, ox, oy } = refScale(w, h);
+  ctx.translate(ox, oy);
+  ctx.scale(s, s);
+
+  const A = CIRCLE_A;
+  const B = CIRCLE_B;
+  const C = CIRCLE_C;
+  const R = VENN.R;
+
+  const disc = (c: Pt, color: string) => {
+    ctx.beginPath();
+    ctx.arc(c.x, c.y, R, 0, Math.PI * 2);
+    ctx.fillStyle = color;
+    ctx.fill();
+  };
+  // Paint the region common to every circle in `cs` (clip-intersection).
+  const inter = (cs: Pt[], color: string) => {
+    ctx.save();
+    for (const c of cs) {
+      ctx.beginPath();
+      ctx.arc(c.x, c.y, R, 0, Math.PI * 2);
+      ctx.clip();
+    }
+    ctx.fillStyle = color;
+    ctx.fillRect(0, 0, REF_W, REF_H);
+    ctx.restore();
+  };
+
+  // ── Facets + intersections ──────────────────────────────────────────
+  disc(A, COLORS.identity);
+  disc(B, COLORS.architecture);
+  disc(C, COLORS.experience);
+  inter([A, B], COLORS.organisation);
+  inter([A, C], COLORS.brand);
+  inter([B, C], COLORS.product);
+  inter([A, B, C], COLORS.center);
+
+  // White separating outlines.
+  ctx.strokeStyle = COLORS.separator;
+  ctx.lineWidth = 2.5;
+  for (const c of [A, B, C]) {
+    ctx.beginPath();
+    ctx.arc(c.x, c.y, R, 0, Math.PI * 2);
+    ctx.stroke();
+  }
+
+  // ── White pictos ────────────────────────────────────────────────────
+  const pictoSetup = () => {
+    ctx.strokeStyle = COLORS.picto;
+    ctx.fillStyle = COLORS.picto;
+    ctx.lineWidth = PICTO_STROKE;
+    ctx.lineJoin = 'round';
+    ctx.lineCap = 'round';
+  };
+  const lens = (x: number, y: number) => {
+    pictoSetup();
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI * 2);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x + 7, y + 7);
+    ctx.lineTo(x + 15, y + 15);
+    ctx.stroke();
+  };
+  const house = (x: number, y: number) => {
+    pictoSetup();
+    ctx.beginPath();
+    ctx.moveTo(x - 11, y + 9);
+    ctx.lineTo(x - 11, y - 2);
+    ctx.lineTo(x, y - 11);
+    ctx.lineTo(x + 11, y - 2);
+    ctx.lineTo(x + 11, y + 9);
+    ctx.closePath();
+    ctx.stroke();
+  };
+  const heart = (x: number, y: number) => {
+    pictoSetup();
+    ctx.beginPath();
+    ctx.moveTo(x, y + 11);
+    ctx.bezierCurveTo(x - 14, y - 1, x - 9, y - 12, x, y - 4);
+    ctx.bezierCurveTo(x + 9, y - 12, x + 14, y - 1, x, y + 11);
+    ctx.closePath();
+    ctx.stroke();
+  };
+  const network = (x: number, y: number) => {
+    pictoSetup();
+    ctx.beginPath();
+    ctx.moveTo(x, y - 9);
+    ctx.lineTo(x - 9, y + 7);
+    ctx.lineTo(x + 9, y + 7);
+    ctx.closePath();
+    ctx.stroke();
+    for (const [px, py] of [
+      [x, y - 9],
+      [x - 9, y + 7],
+      [x + 9, y + 7],
+    ]) {
+      ctx.beginPath();
+      ctx.arc(px, py, 2.6, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  };
+  const sun = (x: number, y: number) => {
+    pictoSetup();
+    ctx.beginPath();
+    ctx.arc(x, y, 6, 0, Math.PI * 2);
+    ctx.stroke();
+    for (let i = 0; i < 8; i++) {
+      const a = (i * Math.PI) / 4;
+      ctx.beginPath();
+      ctx.moveTo(x + Math.cos(a) * 9, y + Math.sin(a) * 9);
+      ctx.lineTo(x + Math.cos(a) * 12, y + Math.sin(a) * 12);
+      ctx.stroke();
+    }
+  };
+  const cube = (x: number, y: number) => {
+    pictoSetup();
+    const p = [
+      [x, y - 11],
+      [x + 10, y - 5],
+      [x + 10, y + 6],
+      [x, y + 12],
+      [x - 10, y + 6],
+      [x - 10, y - 5],
+    ];
+    ctx.beginPath();
+    p.forEach(([qx, qy], i) => (i ? ctx.lineTo(qx, qy) : ctx.moveTo(qx, qy)));
+    ctx.closePath();
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x - 10, y - 5);
+    ctx.lineTo(x, y + 1);
+    ctx.lineTo(x + 10, y - 5);
+    ctx.moveTo(x, y + 1);
+    ctx.lineTo(x, y + 12);
+    ctx.stroke();
+  };
+
+  // Single-facet zone pictos.
+  lens(A.x - 30, A.y - 22);
+  house(B.x + 30, B.y - 22);
+  heart(C.x, C.y + 36);
+  // Intersection pictos at the validated sweet spots.
+  network(VENN.cx, 114);
+  sun(VENN.cx - 58, 206);
+  cube(VENN.cx + 58, 206);
+
+  // ── Labels (outside the circles) ────────────────────────────────────
+  if (model.showLabels) {
+    ctx.font = `500 ${LABEL_FONT_SIZE}px ${FONT_FAMILY}`;
+    ctx.textBaseline = 'middle';
+    const colorByField: Record<string, string> = {
+      identityLabel: COLORS.identity,
+      architectureLabel: COLORS.architecture,
+      experienceLabel: COLORS.experience,
+    };
+    for (const { field, text, x, y, align } of facetLabelAnchors(model)) {
+      ctx.fillStyle = colorByField[field];
+      ctx.textAlign = align;
+      ctx.fillText(text, x, y);
+    }
+  }
+};
+
+export const EdgyFacetsRendererExtension = ElementRendererExtension('edgy', edgy);

package/src/element-view.ts

@@ -0,0 +1,145 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import type { EdgyFacetsElementModel } 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 { refScale } from './consts';
+import {
+  type EdgyLabelField,
+  getEdgyLabelHits,
+  hitTestEdgyLabel,
+} from './label-layout';
+
+export class EdgyView extends GfxElementModelView<EdgyFacetsElementModel> {
+  static override type: string = 'edgy';
+
+  /** 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;
+    }
+
+    // Map element-local coords into the fixed reference space the labels live in.
+    const { s, ox, oy } = refScale(w, h);
+    const rx = (lx - ox) / s;
+    const ry = (ly - oy) / s;
+
+    const hit = hitTestEdgyLabel(getEdgyLabelHits(this.model), rx, ry);
+    if (!hit) return;
+
+    this._openLabelEditor(hit.field, e);
+  }
+
+  private _openLabelEditor(field: EdgyLabelField, 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 = () => {
+      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 (toggled from the toolbar). Moving/selecting stays available throughout.
+ */
+export const EdgyInteraction = GfxViewInteractionExtension<EdgyView>(
+  EdgyView.type,
+  {
+    handleResize({ model }) {
+      return {
+        beforeResize({ set }) {
+          if (!model.resizeEnabled) {
+            set({ allowedHandlers: [] });
+          }
+        },
+      };
+    },
+  }
+);

package/src/index.ts

@@ -0,0 +1 @@
+export {};

package/src/label-layout.ts

@@ -0,0 +1,105 @@
+import type { EdgyFacetsElementModel } from '@formicoidea/labre-core/model';
+
+import { LABEL_FONT_SIZE, VENN } from './consts';
+
+/** The three circle centres in reference coords. */
+export const CIRCLE_A = { x: VENN.cx - 0.866 * VENN.r0, y: VENN.cy - 0.5 * VENN.r0 }; // Identity
+export const CIRCLE_B = { x: VENN.cx + 0.866 * VENN.r0, y: VENN.cy - 0.5 * VENN.r0 }; // Architecture
+export const CIRCLE_C = { x: VENN.cx, y: VENN.cy + VENN.r0 }; // Experience
+
+/** The editable label fields of the facets diagram. */
+export type EdgyLabelField =
+  | 'identityLabel'
+  | 'architectureLabel'
+  | 'experienceLabel';
+
+export interface EdgyLabelAnchor {
+  field: EdgyLabelField;
+  text: string;
+  x: number;
+  y: number;
+  align: 'start' | 'end' | 'center';
+}
+
+/**
+ * The three facet name anchors in reference coords, positioned fully outside
+ * their circle (validated mockup). Shared by the renderer (to draw them) and
+ * the label-layout hit testing (to edit them).
+ */
+export function facetLabelAnchors(
+  model: EdgyFacetsElementModel
+): EdgyLabelAnchor[] {
+  return [
+    {
+      field: 'identityLabel',
+      text: model.identityLabel,
+      x: CIRCLE_A.x - VENN.R - 10,
+      y: CIRCLE_A.y - 28,
+      align: 'end',
+    },
+    {
+      field: 'architectureLabel',
+      text: model.architectureLabel,
+      x: CIRCLE_B.x + VENN.R + 10,
+      y: CIRCLE_B.y - 28,
+      align: 'start',
+    },
+    {
+      field: 'experienceLabel',
+      text: model.experienceLabel,
+      x: CIRCLE_C.x,
+      y: CIRCLE_C.y + VENN.R + 22,
+      align: 'center',
+    },
+  ];
+}
+
+/** A label's hit box in reference coords (axis-aligned, padded). */
+export interface EdgyLabelHit {
+  field: EdgyLabelField;
+  minX: number;
+  minY: number;
+  maxX: number;
+  maxY: number;
+}
+
+const approxTextWidth = (text: string, fontSize: number) =>
+  Math.max(fontSize, text.length * fontSize * 0.6);
+
+/**
+ * Clickable boxes of every facet label, in reference coords. Derived from the
+ * SAME anchors the renderer uses so they track the drawn text. Boxes are padded
+ * so double-clicking is forgiving. Hidden when `showLabels` is false.
+ */
+export function getEdgyLabelHits(model: EdgyFacetsElementModel): EdgyLabelHit[] {
+  if (!model.showLabels) return [];
+
+  const pad = 6;
+  const fs = LABEL_FONT_SIZE;
+  return facetLabelAnchors(model).map(({ field, text, x, y, align }) => {
+    const tw = approxTextWidth(text, fs);
+    const minX = align === 'end' ? x - tw : align === 'center' ? x - tw / 2 : x;
+    const maxX = align === 'end' ? x : align === 'center' ? x + tw / 2 : x + tw;
+    return {
+      field,
+      minX: minX - pad,
+      maxX: maxX + pad,
+      minY: y - fs / 2 - pad,
+      maxY: y + fs / 2 + pad,
+    };
+  });
+}
+
+/** First label whose (padded) box contains the reference-space point, or null. */
+export function hitTestEdgyLabel(
+  hits: EdgyLabelHit[],
+  rx: number,
+  ry: number
+): EdgyLabelHit | null {
+  for (const hit of hits) {
+    if (rx >= hit.minX && rx <= hit.maxX && ry >= hit.minY && ry <= hit.maxY) {
+      return hit;
+    }
+  }
+  return null;
+}