@formicoidea/labre-framework-edgy 0.23.0 → 0.23.2

package/src/node/node-renderer.ts

@@ -1,64 +1,64 @@
-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
-);
+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
+);

package/src/node/node-view.ts

@@ -1,33 +1,33 @@
-import { mountShapeTextEditor } from '@formicoidea/labre-core/gfx/shape';
-import {
-  type EdgyNodeElementModel,
-  ShapeElementModel,
-} from '@formicoidea/labre-core/model';
-import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
-
-/**
- * View for an EDGY base-element node. Registering it ensures `gfx.view.get(model)`
- * returns a view (required so move / select / connector interactions work).
- *
- * EDGY nodes are native shapes, so we reuse the shape inner-text editor: a
- * double-click mounts the editable text overlay (`mountShapeTextEditor`), exactly
- * like a native shape. We deliberately do NOT inherit the polygon vertex-editing
- * overlay (the Activity chevron should keep its shape).
- */
-export class EdgyNodeView extends GfxElementModelView<EdgyNodeElementModel> {
-  static override type: string = 'edgyNode';
-
-  override onCreated(): void {
-    super.onCreated();
-    this.on('dblclick', () => {
-      const edgeless = this.std.view.getBlock(this.std.store.root!.id);
-      if (
-        edgeless &&
-        !this.model.isLocked() &&
-        this.model instanceof ShapeElementModel
-      ) {
-        mountShapeTextEditor(this.model, edgeless);
-      }
-    });
-  }
-}
+import { mountShapeTextEditor } from '@formicoidea/labre-core/gfx/shape';
+import {
+  type EdgyNodeElementModel,
+  ShapeElementModel,
+} from '@formicoidea/labre-core/model';
+import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
+
+/**
+ * View for an EDGY base-element node. Registering it ensures `gfx.view.get(model)`
+ * returns a view (required so move / select / connector interactions work).
+ *
+ * EDGY nodes are native shapes, so we reuse the shape inner-text editor: a
+ * double-click mounts the editable text overlay (`mountShapeTextEditor`), exactly
+ * like a native shape. We deliberately do NOT inherit the polygon vertex-editing
+ * overlay (the Activity chevron should keep its shape).
+ */
+export class EdgyNodeView extends GfxElementModelView<EdgyNodeElementModel> {
+  static override type: string = 'edgyNode';
+
+  override onCreated(): void {
+    super.onCreated();
+    this.on('dblclick', () => {
+      const edgeless = this.std.view.getBlock(this.std.store.root!.id);
+      if (
+        edgeless &&
+        !this.model.isLocked() &&
+        this.model instanceof ShapeElementModel
+      ) {
+        mountShapeTextEditor(this.model, edgeless);
+      }
+    });
+  }
+}

package/src/toolbar/config.ts

@@ -1,96 +1,96 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
-import { EdgyFacetsElementModel } from '@formicoidea/labre-core/model';
-import {
-  type ToolbarContext,
-  type ToolbarModuleConfig,
-  ToolbarModuleExtension,
-} from '@formicoidea/labre-core/shared/services';
-import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
-import { html, type TemplateResult } from 'lit';
-
-const ResizeIcon = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="1.6"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="M9 5H5v4M15 19h4v-4" />
-  <path d="M5 5l6 6M19 19l-6-6" />
-</svg>`;
-
-/** Tag — show / hide the facet name labels. */
-const LabelsIcon = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="1.6"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="M3 8.5l6-4.5 12 0 0 16-12 0-6-4.5z" />
-  <circle cx="8" cy="12" r="1.4" />
-</svg>`;
-
-type EdgyToggleProp = 'resizeEnabled' | 'showLabels';
-
-/**
- * Build a toolbar toggle that flips a boolean flag on every selected facets
- * diagram: `active` reflects the current state, `run` flips it (with an undo
- * checkpoint).
- */
-function booleanToggle(
-  id: string,
-  tooltip: string,
-  icon: TemplateResult,
-  prop: EdgyToggleProp
-) {
-  return {
-    id,
-    tooltip,
-    icon,
-    active(ctx: ToolbarContext) {
-      const models = ctx.getSurfaceModelsByType(EdgyFacetsElementModel);
-      return models.length > 0 && models.every(model => model[prop]);
-    },
-    run(ctx: ToolbarContext) {
-      const models = ctx.getSurfaceModelsByType(EdgyFacetsElementModel);
-      if (!models.length) return;
-
-      const enable = !models.every(model => model[prop]);
-      ctx.std.store.captureSync();
-      const crud = ctx.std.get(EdgelessCRUDIdentifier);
-      for (const model of models) {
-        crud.updateElement(model.id, { [prop]: enable });
-      }
-    },
-  };
-}
-
-export const edgyToolbarConfig = {
-  actions: [
-    booleanToggle(
-      'a.toggle-resize',
-      'Enable / lock resizing',
-      ResizeIcon,
-      'resizeEnabled'
-    ),
-    booleanToggle(
-      'b.toggle-labels',
-      'Show / hide facet labels',
-      LabelsIcon,
-      'showLabels'
-    ),
-  ],
-  when: ctx => ctx.getSurfaceModelsByType(EdgyFacetsElementModel).length > 0,
-} as const satisfies ToolbarModuleConfig;
-
-export const edgyToolbarExtension = ToolbarModuleExtension({
-  id: BlockFlavourIdentifier('affine:surface:edgy'),
-  config: edgyToolbarConfig,
-});
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { EdgyFacetsElementModel } from '@formicoidea/labre-core/model';
+import {
+  type ToolbarContext,
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@formicoidea/labre-core/shared/services';
+import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+import { html, type TemplateResult } from 'lit';
+
+const ResizeIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M9 5H5v4M15 19h4v-4" />
+  <path d="M5 5l6 6M19 19l-6-6" />
+</svg>`;
+
+/** Tag — show / hide the facet name labels. */
+const LabelsIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 8.5l6-4.5 12 0 0 16-12 0-6-4.5z" />
+  <circle cx="8" cy="12" r="1.4" />
+</svg>`;
+
+type EdgyToggleProp = 'resizeEnabled' | 'showLabels';
+
+/**
+ * Build a toolbar toggle that flips a boolean flag on every selected facets
+ * diagram: `active` reflects the current state, `run` flips it (with an undo
+ * checkpoint).
+ */
+function booleanToggle(
+  id: string,
+  tooltip: string,
+  icon: TemplateResult,
+  prop: EdgyToggleProp
+) {
+  return {
+    id,
+    tooltip,
+    icon,
+    active(ctx: ToolbarContext) {
+      const models = ctx.getSurfaceModelsByType(EdgyFacetsElementModel);
+      return models.length > 0 && models.every(model => model[prop]);
+    },
+    run(ctx: ToolbarContext) {
+      const models = ctx.getSurfaceModelsByType(EdgyFacetsElementModel);
+      if (!models.length) return;
+
+      const enable = !models.every(model => model[prop]);
+      ctx.std.store.captureSync();
+      const crud = ctx.std.get(EdgelessCRUDIdentifier);
+      for (const model of models) {
+        crud.updateElement(model.id, { [prop]: enable });
+      }
+    },
+  };
+}
+
+export const edgyToolbarConfig = {
+  actions: [
+    booleanToggle(
+      'a.toggle-resize',
+      'Enable / lock resizing',
+      ResizeIcon,
+      'resizeEnabled'
+    ),
+    booleanToggle(
+      'b.toggle-labels',
+      'Show / hide facet labels',
+      LabelsIcon,
+      'showLabels'
+    ),
+  ],
+  when: ctx => ctx.getSurfaceModelsByType(EdgyFacetsElementModel).length > 0,
+} as const satisfies ToolbarModuleConfig;
+
+export const edgyToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:edgy'),
+  config: edgyToolbarConfig,
+});