@formicoidea/labre-framework-edgy 0.23.0 → 0.23.2

package/src/element-view.ts

@@ -1,145 +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: [] });
-          }
-        },
-      };
-    },
-  }
-);
+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/label-layout.ts

@@ -1,105 +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;
-}
+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;
+}

package/src/node/consts.ts

@@ -1,56 +1,56 @@
-import type { EdgyNodeKind } from '@formicoidea/labre-core/model';
-
-/**
- * Visual constants for the four EDGY base-element nodes. Each node is a NATIVE
- * shape (ShapeElementModel-derived) so its stroke / fill / inner text are
- * editable via the shape toolbar; these are just the pre-formatted defaults at
- * creation.
- */
-export const NODE_FILL = '#ffffff';
-export const NODE_STROKE = '#262626';
-export const NODE_STROKE_WIDTH = 2;
-
-/** Outcome corner radius (absolute px — a lightly rounded rectangle). */
-export const OUTCOME_RADIUS = 6;
-
-/** Right-pointing chevron, as normalized polygon vertices (Activity). */
-export const ACTIVITY_VERTICES: number[][] = [
-  [0, 0],
-  [0.8, 0],
-  [1, 0.5],
-  [0.8, 1],
-  [0, 1],
-];
-
-/** Default node sizes (model units) per kind. */
-export const NODE_SIZE: Record<EdgyNodeKind, { w: number; h: number }> = {
-  people: { w: 64, h: 64 },
-  outcome: { w: 130, h: 80 },
-  object: { w: 130, h: 80 },
-  activity: { w: 140, h: 80 },
-};
-
-/** Inner-text + label font (matches the diagram labels). */
-export const INNER_FONT_SIZE = 20;
-export const LABEL_FONT_SIZE = 18;
-export const LABEL_GAP = 8;
-
-/** Default inner text / label per kind. */
-export const NODE_LABEL: Record<EdgyNodeKind, string> = {
-  people: 'People',
-  outcome: 'Outcome',
-  object: 'Object',
-  activity: 'Activity',
-};
-
-/**
- * Person glyph for `kind: 'people'`, taken from the official `Icon-People.svg`
- * (viewBox 0 0 32 32). Two filled outline rings (head + shoulders) — filling
- * them yields the line-art person. Drawn in the node stroke color, scaled to
- * the node and centred.
- */
-export const PERSON_GLYPH_VIEWBOX = 32;
-export const PERSON_GLYPH_PATHS = [
-  'm16,19c-3.308,0-6-2.692-6-6v-4c0-3.308,2.692-6,6-6s6,2.692,6,6v4c0,3.308-2.692,6-6,6Zm0-14c-2.206,0-4,1.794-4,4v4c0,2.206,1.794,4,4,4s4-1.794,4-4v-4c0-2.206-1.794-4-4-4Z',
-  'm29,30H3v-3.5c0-3.308,2.692-6,6-6h14c3.308,0,6,2.692,6,6v3.5Zm-24-2h22v-1.5c0-2.206-1.794-4-4-4h-14c-2.206,0-4,1.794-4,4v1.5Z',
-];
+import type { EdgyNodeKind } from '@formicoidea/labre-core/model';
+
+/**
+ * Visual constants for the four EDGY base-element nodes. Each node is a NATIVE
+ * shape (ShapeElementModel-derived) so its stroke / fill / inner text are
+ * editable via the shape toolbar; these are just the pre-formatted defaults at
+ * creation.
+ */
+export const NODE_FILL = '#ffffff';
+export const NODE_STROKE = '#262626';
+export const NODE_STROKE_WIDTH = 2;
+
+/** Outcome corner radius (absolute px — a lightly rounded rectangle). */
+export const OUTCOME_RADIUS = 6;
+
+/** Right-pointing chevron, as normalized polygon vertices (Activity). */
+export const ACTIVITY_VERTICES: number[][] = [
+  [0, 0],
+  [0.8, 0],
+  [1, 0.5],
+  [0.8, 1],
+  [0, 1],
+];
+
+/** Default node sizes (model units) per kind. */
+export const NODE_SIZE: Record<EdgyNodeKind, { w: number; h: number }> = {
+  people: { w: 64, h: 64 },
+  outcome: { w: 130, h: 80 },
+  object: { w: 130, h: 80 },
+  activity: { w: 140, h: 80 },
+};
+
+/** Inner-text + label font (matches the diagram labels). */
+export const INNER_FONT_SIZE = 20;
+export const LABEL_FONT_SIZE = 18;
+export const LABEL_GAP = 8;
+
+/** Default inner text / label per kind. */
+export const NODE_LABEL: Record<EdgyNodeKind, string> = {
+  people: 'People',
+  outcome: 'Outcome',
+  object: 'Object',
+  activity: 'Activity',
+};
+
+/**
+ * Person glyph for `kind: 'people'`, taken from the official `Icon-People.svg`
+ * (viewBox 0 0 32 32). Two filled outline rings (head + shoulders) — filling
+ * them yields the line-art person. Drawn in the node stroke color, scaled to
+ * the node and centred.
+ */
+export const PERSON_GLYPH_VIEWBOX = 32;
+export const PERSON_GLYPH_PATHS = [
+  'm16,19c-3.308,0-6-2.692-6-6v-4c0-3.308,2.692-6,6-6s6,2.692,6,6v4c0,3.308-2.692,6-6,6Zm0-14c-2.206,0-4,1.794-4,4v4c0,2.206,1.794,4,4,4s4-1.794,4-4v-4c0-2.206-1.794-4-4-4Z',
+  'm29,30H3v-3.5c0-3.308,2.692-6,6-6h14c3.308,0,6,2.692,6,6v3.5Zm-24-2h22v-1.5c0-2.206-1.794-4-4-4h-14c-2.206,0-4,1.794-4,4v1.5Z',
+];