@formicoidea/labre-framework-cynefin 0.23.0 → 0.23.2

package/src/estuarine/element-renderer.ts

@@ -1,122 +1,122 @@
-import {
-  type ElementRenderer,
-  ElementRendererExtension,
-} from '@formicoidea/labre-core/blocks/surface';
-import type { EstuarineElementModel } from '@formicoidea/labre-core/model';
-
-import { FONT_FAMILY, refScale } from '../utils';
-import {
-  ARROWHEADS,
-  AXIS_LABELS,
-  AXIS_WIDTH,
-  COLORS,
-  COUNTERFACTUAL_PATH,
-  COUNTERFACTUAL_WIDTH,
-  E_AXIS,
-  LABEL_LETTER_SPACING,
-  LABELS,
-  LIMINAL_PATH,
-  LIMINAL_WIDTH,
-  REF_H,
-  REF_W,
-  T_AXIS,
-  VOLATILE_PATH,
-  VOLATILE_WIDTH,
-} from './consts';
-
-/**
- * Canvas renderer for the Estuarine framework map — reproduces the official SVG:
- * the e (vertical, double-headed) / t (horizontal, single-headed) axes and the
- * three reference curves (Liminal / Volatile / Counter-factual), each with its
- * legend and individually hideable. Drawn in the fixed reference space and
- * scaled uniformly to the element bounds.
- */
-export const estuarine: ElementRenderer<EstuarineElementModel> = (
-  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)
-  );
-
-  const { s, ox, oy } = refScale(w, h, REF_W, REF_H);
-  ctx.translate(ox, oy);
-  ctx.scale(s, s);
-
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-
-  // ── Axes ────────────────────────────────────────────────────────────
-  ctx.strokeStyle = COLORS.axis;
-  ctx.fillStyle = COLORS.axis;
-  ctx.lineWidth = AXIS_WIDTH;
-  ctx.beginPath();
-  ctx.moveTo(E_AXIS.x, E_AXIS.y1);
-  ctx.lineTo(E_AXIS.x, E_AXIS.y2);
-  ctx.moveTo(T_AXIS.x1, T_AXIS.y);
-  ctx.lineTo(T_AXIS.x2, T_AXIS.y);
-  ctx.stroke();
-  for (const [[tx, ty], [ax, ay], [bx, by]] of ARROWHEADS) {
-    ctx.beginPath();
-    ctx.moveTo(tx, ty);
-    ctx.lineTo(ax, ay);
-    ctx.lineTo(bx, by);
-    ctx.closePath();
-    ctx.fill();
-  }
-
-  // Uppercase legend (centre-anchored, alphabetic baseline, letter-spaced).
-  const hasSpacing = 'letterSpacing' in ctx;
-  const legend = (l: { text: string; x: number; y: number; size: number; color: string }) => {
-    ctx.fillStyle = l.color;
-    ctx.font = `600 ${l.size}px ${FONT_FAMILY}`;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'alphabetic';
-    if (hasSpacing) ctx.letterSpacing = `${LABEL_LETTER_SPACING}px`;
-    ctx.fillText(l.text, l.x, l.y);
-    if (hasSpacing) ctx.letterSpacing = '0px';
-  };
-
-  // ── Liminal (green) ─────────────────────────────────────────────────
-  if (model.showLiminal) {
-    ctx.strokeStyle = COLORS.liminal;
-    ctx.lineWidth = LIMINAL_WIDTH;
-    ctx.stroke(new Path2D(LIMINAL_PATH));
-    legend(LABELS.liminal);
-  }
-
-  // ── Volatile (red) ──────────────────────────────────────────────────
-  if (model.showVolatile) {
-    ctx.strokeStyle = COLORS.volatile;
-    ctx.lineWidth = VOLATILE_WIDTH;
-    ctx.stroke(new Path2D(VOLATILE_PATH));
-    legend(LABELS.volatile);
-  }
-
-  // ── Counter-factual (dark) ──────────────────────────────────────────
-  if (model.showCounterfactual) {
-    ctx.strokeStyle = COLORS.counterfactual;
-    ctx.lineWidth = COUNTERFACTUAL_WIDTH;
-    ctx.stroke(new Path2D(COUNTERFACTUAL_PATH));
-    legend(LABELS.counterfactual);
-  }
-
-  // ── Italic e / t axis letters ───────────────────────────────────────
-  if (model.showAxisLabels) {
-    ctx.fillStyle = COLORS.axisLabel;
-    ctx.font = `italic 700 ${AXIS_LABELS.size}px Georgia, serif`;
-    ctx.textAlign = 'left';
-    ctx.textBaseline = 'alphabetic';
-    ctx.fillText(AXIS_LABELS.e.text, AXIS_LABELS.e.x, AXIS_LABELS.e.y);
-    ctx.fillText(AXIS_LABELS.t.text, AXIS_LABELS.t.x, AXIS_LABELS.t.y);
-  }
-};
-
-export const EstuarineRendererExtension = ElementRendererExtension(
-  'estuarine',
-  estuarine
-);
+import {
+  type ElementRenderer,
+  ElementRendererExtension,
+} from '@formicoidea/labre-core/blocks/surface';
+import type { EstuarineElementModel } from '@formicoidea/labre-core/model';
+
+import { FONT_FAMILY, refScale } from '../utils';
+import {
+  ARROWHEADS,
+  AXIS_LABELS,
+  AXIS_WIDTH,
+  COLORS,
+  COUNTERFACTUAL_PATH,
+  COUNTERFACTUAL_WIDTH,
+  E_AXIS,
+  LABEL_LETTER_SPACING,
+  LABELS,
+  LIMINAL_PATH,
+  LIMINAL_WIDTH,
+  REF_H,
+  REF_W,
+  T_AXIS,
+  VOLATILE_PATH,
+  VOLATILE_WIDTH,
+} from './consts';
+
+/**
+ * Canvas renderer for the Estuarine framework map — reproduces the official SVG:
+ * the e (vertical, double-headed) / t (horizontal, single-headed) axes and the
+ * three reference curves (Liminal / Volatile / Counter-factual), each with its
+ * legend and individually hideable. Drawn in the fixed reference space and
+ * scaled uniformly to the element bounds.
+ */
+export const estuarine: ElementRenderer<EstuarineElementModel> = (
+  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)
+  );
+
+  const { s, ox, oy } = refScale(w, h, REF_W, REF_H);
+  ctx.translate(ox, oy);
+  ctx.scale(s, s);
+
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  // ── Axes ────────────────────────────────────────────────────────────
+  ctx.strokeStyle = COLORS.axis;
+  ctx.fillStyle = COLORS.axis;
+  ctx.lineWidth = AXIS_WIDTH;
+  ctx.beginPath();
+  ctx.moveTo(E_AXIS.x, E_AXIS.y1);
+  ctx.lineTo(E_AXIS.x, E_AXIS.y2);
+  ctx.moveTo(T_AXIS.x1, T_AXIS.y);
+  ctx.lineTo(T_AXIS.x2, T_AXIS.y);
+  ctx.stroke();
+  for (const [[tx, ty], [ax, ay], [bx, by]] of ARROWHEADS) {
+    ctx.beginPath();
+    ctx.moveTo(tx, ty);
+    ctx.lineTo(ax, ay);
+    ctx.lineTo(bx, by);
+    ctx.closePath();
+    ctx.fill();
+  }
+
+  // Uppercase legend (centre-anchored, alphabetic baseline, letter-spaced).
+  const hasSpacing = 'letterSpacing' in ctx;
+  const legend = (l: { text: string; x: number; y: number; size: number; color: string }) => {
+    ctx.fillStyle = l.color;
+    ctx.font = `600 ${l.size}px ${FONT_FAMILY}`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'alphabetic';
+    if (hasSpacing) ctx.letterSpacing = `${LABEL_LETTER_SPACING}px`;
+    ctx.fillText(l.text, l.x, l.y);
+    if (hasSpacing) ctx.letterSpacing = '0px';
+  };
+
+  // ── Liminal (green) ─────────────────────────────────────────────────
+  if (model.showLiminal) {
+    ctx.strokeStyle = COLORS.liminal;
+    ctx.lineWidth = LIMINAL_WIDTH;
+    ctx.stroke(new Path2D(LIMINAL_PATH));
+    legend(LABELS.liminal);
+  }
+
+  // ── Volatile (red) ──────────────────────────────────────────────────
+  if (model.showVolatile) {
+    ctx.strokeStyle = COLORS.volatile;
+    ctx.lineWidth = VOLATILE_WIDTH;
+    ctx.stroke(new Path2D(VOLATILE_PATH));
+    legend(LABELS.volatile);
+  }
+
+  // ── Counter-factual (dark) ──────────────────────────────────────────
+  if (model.showCounterfactual) {
+    ctx.strokeStyle = COLORS.counterfactual;
+    ctx.lineWidth = COUNTERFACTUAL_WIDTH;
+    ctx.stroke(new Path2D(COUNTERFACTUAL_PATH));
+    legend(LABELS.counterfactual);
+  }
+
+  // ── Italic e / t axis letters ───────────────────────────────────────
+  if (model.showAxisLabels) {
+    ctx.fillStyle = COLORS.axisLabel;
+    ctx.font = `italic 700 ${AXIS_LABELS.size}px Georgia, serif`;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'alphabetic';
+    ctx.fillText(AXIS_LABELS.e.text, AXIS_LABELS.e.x, AXIS_LABELS.e.y);
+    ctx.fillText(AXIS_LABELS.t.text, AXIS_LABELS.t.x, AXIS_LABELS.t.y);
+  }
+};
+
+export const EstuarineRendererExtension = ElementRendererExtension(
+  'estuarine',
+  estuarine
+);

package/src/estuarine/element-view.ts

@@ -1,32 +1,32 @@
-import type { EstuarineElementModel } from '@formicoidea/labre-core/model';
-import {
-  GfxElementModelView,
-  GfxViewInteractionExtension,
-} from '@formicoidea/labre-core/std/gfx';
-
-/**
- * View for the Estuarine background. Registering it ensures `gfx.view.get(model)`
- * returns a view (required so move / select interactions work).
- */
-export class EstuarineView extends GfxElementModelView<EstuarineElementModel> {
-  static override type: string = 'estuarine';
-}
-
-/**
- * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
- * true (toggled from the toolbar). Moving / selecting stays available.
- */
-export const EstuarineInteraction = GfxViewInteractionExtension<EstuarineView>(
-  EstuarineView.type,
-  {
-    handleResize({ model }) {
-      return {
-        beforeResize({ set }) {
-          if (!model.resizeEnabled) {
-            set({ allowedHandlers: [] });
-          }
-        },
-      };
-    },
-  }
-);
+import type { EstuarineElementModel } from '@formicoidea/labre-core/model';
+import {
+  GfxElementModelView,
+  GfxViewInteractionExtension,
+} from '@formicoidea/labre-core/std/gfx';
+
+/**
+ * View for the Estuarine background. Registering it ensures `gfx.view.get(model)`
+ * returns a view (required so move / select interactions work).
+ */
+export class EstuarineView extends GfxElementModelView<EstuarineElementModel> {
+  static override type: string = 'estuarine';
+}
+
+/**
+ * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
+ * true (toggled from the toolbar). Moving / selecting stays available.
+ */
+export const EstuarineInteraction = GfxViewInteractionExtension<EstuarineView>(
+  EstuarineView.type,
+  {
+    handleResize({ model }) {
+      return {
+        beforeResize({ set }) {
+          if (!model.resizeEnabled) {
+            set({ allowedHandlers: [] });
+          }
+        },
+      };
+    },
+  }
+);

package/src/estuarine/toolbar/config.ts

@@ -1,65 +1,65 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
-import { EstuarineElementModel } 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>`;
-// All curve icons use currentColor so the toolbar can grey them when inactive;
-// they are distinguished by shape (wave / arc / hooked curve).
-const LiminalIcon = html`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 13c3-6 6 4 9 0s6-6 9 0" /></svg>`;
-const VolatileIcon = html`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M7 4a9 9 0 0 1 0 18" /></svg>`;
-const CounterfactualIcon = html`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7c7 0 11 4 12 14" /></svg>`;
-const AxisIcon = 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="M6 3v18M6 12h15" /><path d="M3 6l3-3 3 3M18 9l3 3-3 3" /></svg>`;
-
-type EstuarineToggleProp =
-  | 'resizeEnabled'
-  | 'showLiminal'
-  | 'showVolatile'
-  | 'showCounterfactual'
-  | 'showAxisLabels';
-
-function booleanToggle(
-  id: string,
-  tooltip: string,
-  icon: TemplateResult,
-  prop: EstuarineToggleProp
-) {
-  return {
-    id,
-    tooltip,
-    icon,
-    active(ctx: ToolbarContext) {
-      const models = ctx.getSurfaceModelsByType(EstuarineElementModel);
-      return models.length > 0 && models.every(model => model[prop]);
-    },
-    run(ctx: ToolbarContext) {
-      const models = ctx.getSurfaceModelsByType(EstuarineElementModel);
-      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 estuarineToolbarConfig = {
-  actions: [
-    booleanToggle('a.toggle-resize', 'Enable / lock resizing', ResizeIcon, 'resizeEnabled'),
-    booleanToggle('b.toggle-liminal', 'Show / hide the Liminal line', LiminalIcon, 'showLiminal'),
-    booleanToggle('c.toggle-volatile', 'Show / hide the Volatile line', VolatileIcon, 'showVolatile'),
-    booleanToggle('d.toggle-counterfactual', 'Show / hide the Counter-factual line', CounterfactualIcon, 'showCounterfactual'),
-    booleanToggle('e.toggle-axis-labels', 'Show / hide axis labels (e / t)', AxisIcon, 'showAxisLabels'),
-  ],
-  when: ctx => ctx.getSurfaceModelsByType(EstuarineElementModel).length > 0,
-} as const satisfies ToolbarModuleConfig;
-
-export const estuarineToolbarExtension = ToolbarModuleExtension({
-  id: BlockFlavourIdentifier('affine:surface:estuarine'),
-  config: estuarineToolbarConfig,
-});
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { EstuarineElementModel } 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>`;
+// All curve icons use currentColor so the toolbar can grey them when inactive;
+// they are distinguished by shape (wave / arc / hooked curve).
+const LiminalIcon = html`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M3 13c3-6 6 4 9 0s6-6 9 0" /></svg>`;
+const VolatileIcon = html`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M7 4a9 9 0 0 1 0 18" /></svg>`;
+const CounterfactualIcon = html`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7c7 0 11 4 12 14" /></svg>`;
+const AxisIcon = 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="M6 3v18M6 12h15" /><path d="M3 6l3-3 3 3M18 9l3 3-3 3" /></svg>`;
+
+type EstuarineToggleProp =
+  | 'resizeEnabled'
+  | 'showLiminal'
+  | 'showVolatile'
+  | 'showCounterfactual'
+  | 'showAxisLabels';
+
+function booleanToggle(
+  id: string,
+  tooltip: string,
+  icon: TemplateResult,
+  prop: EstuarineToggleProp
+) {
+  return {
+    id,
+    tooltip,
+    icon,
+    active(ctx: ToolbarContext) {
+      const models = ctx.getSurfaceModelsByType(EstuarineElementModel);
+      return models.length > 0 && models.every(model => model[prop]);
+    },
+    run(ctx: ToolbarContext) {
+      const models = ctx.getSurfaceModelsByType(EstuarineElementModel);
+      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 estuarineToolbarConfig = {
+  actions: [
+    booleanToggle('a.toggle-resize', 'Enable / lock resizing', ResizeIcon, 'resizeEnabled'),
+    booleanToggle('b.toggle-liminal', 'Show / hide the Liminal line', LiminalIcon, 'showLiminal'),
+    booleanToggle('c.toggle-volatile', 'Show / hide the Volatile line', VolatileIcon, 'showVolatile'),
+    booleanToggle('d.toggle-counterfactual', 'Show / hide the Counter-factual line', CounterfactualIcon, 'showCounterfactual'),
+    booleanToggle('e.toggle-axis-labels', 'Show / hide axis labels (e / t)', AxisIcon, 'showAxisLabels'),
+  ],
+  when: ctx => ctx.getSurfaceModelsByType(EstuarineElementModel).length > 0,
+} as const satisfies ToolbarModuleConfig;
+
+export const estuarineToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:estuarine'),
+  config: estuarineToolbarConfig,
+});