@formicoidea/labre-framework-edgy 0.23.0 → 0.23.1

package/src/effects.ts

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

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

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

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

package/src/label-layout.ts

@@ -1,105 +0,0 @@
-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/node-renderer.ts

@@ -1,64 +0,0 @@
-import {
-  type ElementRenderer,
-  ElementRendererExtension,
-} from '@formicoidea/labre-core/blocks/surface';
-import { shape as shapeRenderer } from '@formicoidea/labre-core/gfx/shape';
-import { DefaultTheme, type EdgyNodeElementModel } from '@formicoidea/labre-core/model';
-
-import { PERSON_GLYPH_PATHS, PERSON_GLYPH_VIEWBOX } from './consts';
-
-/**
- * Renderer for an EDGY base-element node. The shape body (rounded rect / rect /
- * chevron polygon / ellipse) is drawn by REUSING the native shape renderer — so
- * stroke width, colors, inner text and theme behave exactly like a native shape.
- * Only `people` is decorated: an inscribed person glyph (the official
- * `Icon-People` paths) drawn on top in the node's (editable) stroke color.
- */
-export const edgyNode: ElementRenderer<EdgyNodeElementModel> = (
-  model,
-  ctx,
-  matrix,
-  renderer,
-  rc,
-  bound
-) => {
-  const [, , w, h] = model.deserializedXYWH;
-  const cx = w / 2;
-  const cy = h / 2;
-
-  // Capture the element-local transform BEFORE the shape renderer mutates the
-  // matrix, so the glyph can be drawn in the same space afterwards.
-  const glyphMatrix = DOMMatrix.fromMatrix(matrix)
-    .translateSelf(cx, cy)
-    .rotateSelf(model.rotate)
-    .translateSelf(-cx, -cy);
-
-  // Native shape (fill / stroke / inner text / theme handled natively).
-  shapeRenderer(model, ctx, matrix, renderer, rc, bound);
-
-  if (model.kind !== 'people') return;
-
-  const color = renderer.getColorValue(
-    model.strokeColor,
-    DefaultTheme.shapeStrokeColor,
-    true
-  );
-
-  // ── Person glyph (Icon-People), scaled to the node and centred ──────
-  const target = Math.min(w, h) * 0.8;
-  const s = target / PERSON_GLYPH_VIEWBOX;
-
-  ctx.setTransform(glyphMatrix);
-  ctx.translate(cx, cy);
-  ctx.scale(s, s);
-  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));
-  }
-};
-
-export const EdgyNodeRendererExtension = ElementRendererExtension(
-  'edgyNode',
-  edgyNode
-);