@formicoidea/labre-framework-wardley 0.23.0 → 0.23.2

package/src/toolbar/config.ts

@@ -1,280 +1,280 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
-import { WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
-import {
-  TelemetryProvider,
-  type ToolbarContext,
-  type ToolbarModuleConfig,
-  ToolbarModuleExtension,
-} from '@formicoidea/labre-core/shared/services';
-import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
-import { html, type TemplateResult } from 'lit';
-
-import { createWardleyLegend } from '../legend';
-import { wardleyLegendIcon } from './icons';
-
-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>`;
-
-/** Gradient swatch — show/hide the variant gradient. */
-const GradientIcon = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <defs>
-    <linearGradient id="wardleyToolbarGrad" x1="0" y1="0" x2="1" y2="0">
-      <stop offset="0" stop-color="currentColor" stop-opacity="0.85" />
-      <stop offset="1" stop-color="currentColor" stop-opacity="0.1" />
-    </linearGradient>
-  </defs>
-  <rect
-    x="4"
-    y="5"
-    width="16"
-    height="14"
-    rx="2"
-    fill="url(#wardleyToolbarGrad)"
-    stroke="currentColor"
-    stroke-width="1.4"
-  />
-</svg>`;
-
-/** Horizontal axis with a right-pointing arrow (Evolution / X). */
-const XAxisIcon = 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 17h15" />
-  <path d="M15 14l3 3-3 3" />
-</svg>`;
-
-/** Vertical axis with an up-pointing arrow (Value Chain / Y). */
-const YAxisIcon = 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="M7 21V6" />
-  <path d="M4 9l3-3 3 3" />
-</svg>`;
-
-/** Dashed vertical column dividers. */
-const ColumnsIcon = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="1.6"
-  stroke-linecap="round"
-  stroke-dasharray="3 3"
->
-  <path d="M9 4v16M15 4v16" />
-</svg>`;
-
-/** Column labels (short bars under the columns). */
-const ColumnLabelsIcon = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="currentColor"
-  stroke="none"
->
-  <rect x="3" y="15" width="4.5" height="3" rx="1" />
-  <rect x="9.75" y="15" width="4.5" height="3" rx="1" />
-  <rect x="16.5" y="15" width="4.5" height="3" rx="1" />
-</svg>`;
-
-/** Corner labels (Uncharted / Industrialized, top corners). */
-const CornerLabelsIcon = html`<svg
-  width="24"
-  height="24"
-  viewBox="0 0 24 24"
-  fill="currentColor"
-  stroke="none"
->
-  <rect x="3" y="5" width="6" height="3" rx="1" />
-  <rect x="15" y="5" width="6" height="3" rx="1" />
-</svg>`;
-
-/** Visibility labels (Visible / Invisible) — an eye. */
-const VisibilityIcon = 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="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12z" />
-  <circle cx="12" cy="12" r="2.4" />
-</svg>`;
-
-type WardleyToggleProp =
-  | 'resizeEnabled'
-  | 'showGradient'
-  | 'showXAxis'
-  | 'showYAxis'
-  | 'showColumnDividers'
-  | 'showColumnLabels'
-  | 'showCornerLabels'
-  | 'showVisibilityLabels';
-
-/**
- * Build a toolbar toggle that flips a boolean flag on every selected Wardley
- * background: `active` reflects the current state, `run` flips it (with an
- * undo checkpoint). An optional `when` predicate hides the button.
- */
-function booleanToggle(
-  id: string,
-  tooltip: string,
-  icon: TemplateResult,
-  prop: WardleyToggleProp,
-  when?: (ctx: ToolbarContext) => boolean
-) {
-  return {
-    id,
-    tooltip,
-    icon,
-    when: when ?? true,
-    active(ctx: ToolbarContext) {
-      const models = ctx.getSurfaceModelsByType(WardleyBackgroundElementModel);
-      return models.length > 0 && models.every(model => model[prop]);
-    },
-    run(ctx: ToolbarContext) {
-      const models = ctx.getSurfaceModelsByType(WardleyBackgroundElementModel);
-      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 wardleyToolbarConfig = {
-  actions: [
-    booleanToggle(
-      'a.toggle-resize',
-      'Enable / lock resizing',
-      ResizeIcon,
-      'resizeEnabled'
-    ),
-    // Group 1 — evolution (X) side: axis, phase labels, columns, corner
-    // labels, and the gradient toggle.
-    {
-      id: 'b.evolution',
-      actions: [
-        booleanToggle(
-          'b.1-axis-x',
-          'Evolution axis (X)',
-          XAxisIcon,
-          'showXAxis'
-        ),
-        booleanToggle(
-          'b.2-column-labels',
-          'Evolution phase labels',
-          ColumnLabelsIcon,
-          'showColumnLabels'
-        ),
-        booleanToggle(
-          'b.3-columns',
-          'Columns (dividers)',
-          ColumnsIcon,
-          'showColumnDividers'
-        ),
-        booleanToggle(
-          'b.4-corner-labels',
-          'Labels Uncharted / Industrialized',
-          CornerLabelsIcon,
-          'showCornerLabels'
-        ),
-        // Only relevant when the selection has a gradient variant.
-        booleanToggle(
-          'b.5-gradient',
-          'Show / hide the gradient',
-          GradientIcon,
-          'showGradient',
-          ctx =>
-            ctx
-              .getSurfaceModelsByType(WardleyBackgroundElementModel)
-              .some(model => model.variant !== 'classic')
-        ),
-      ],
-    },
-    // Group 2 — value-chain (Y) side: axis and Visible/Invisible labels.
-    {
-      id: 'c.value-chain',
-      actions: [
-        booleanToggle(
-          'c.1-axis-y',
-          'Value Chain axis (Y)',
-          YAxisIcon,
-          'showYAxis'
-        ),
-        booleanToggle(
-          'c.2-visibility-labels',
-          'Labels Visible / Invisible',
-          VisibilityIcon,
-          'showVisibilityLabels'
-        ),
-      ],
-    },
-    // Generate the auto-legend from the components present inside this
-    // background's perimeter (+ a gradient-meaning block for gradient variants).
-    {
-      id: 'd.legend',
-      tooltip: 'Generate the legend (components present)',
-      icon: wardleyLegendIcon,
-      run(ctx) {
-        const models = ctx.getSurfaceModelsByType(WardleyBackgroundElementModel);
-        const bg = models[0];
-        if (!bg) return;
-        createWardleyLegend(ctx.std, bg);
-        ctx.std.getOptional(TelemetryProvider)?.track('FrameworkLegendCreated', {
-          framework: 'wardley',
-          element: 'legend',
-          page: 'whiteboard editor',
-          segment: 'element toolbar',
-          module: 'wardley toolbar',
-        });
-      },
-    },
-  ],
-  when: ctx =>
-    ctx.getSurfaceModelsByType(WardleyBackgroundElementModel).length > 0,
-} as const satisfies ToolbarModuleConfig;
-
-export const wardleyToolbarExtension = ToolbarModuleExtension({
-  id: BlockFlavourIdentifier('affine:surface:wardley'),
-  config: wardleyToolbarConfig,
-});
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { WardleyBackgroundElementModel } from '@formicoidea/labre-core/model';
+import {
+  TelemetryProvider,
+  type ToolbarContext,
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@formicoidea/labre-core/shared/services';
+import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+import { html, type TemplateResult } from 'lit';
+
+import { createWardleyLegend } from '../legend';
+import { wardleyLegendIcon } from './icons';
+
+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>`;
+
+/** Gradient swatch — show/hide the variant gradient. */
+const GradientIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <defs>
+    <linearGradient id="wardleyToolbarGrad" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0" stop-color="currentColor" stop-opacity="0.85" />
+      <stop offset="1" stop-color="currentColor" stop-opacity="0.1" />
+    </linearGradient>
+  </defs>
+  <rect
+    x="4"
+    y="5"
+    width="16"
+    height="14"
+    rx="2"
+    fill="url(#wardleyToolbarGrad)"
+    stroke="currentColor"
+    stroke-width="1.4"
+  />
+</svg>`;
+
+/** Horizontal axis with a right-pointing arrow (Evolution / X). */
+const XAxisIcon = 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 17h15" />
+  <path d="M15 14l3 3-3 3" />
+</svg>`;
+
+/** Vertical axis with an up-pointing arrow (Value Chain / Y). */
+const YAxisIcon = 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="M7 21V6" />
+  <path d="M4 9l3-3 3 3" />
+</svg>`;
+
+/** Dashed vertical column dividers. */
+const ColumnsIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.6"
+  stroke-linecap="round"
+  stroke-dasharray="3 3"
+>
+  <path d="M9 4v16M15 4v16" />
+</svg>`;
+
+/** Column labels (short bars under the columns). */
+const ColumnLabelsIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  stroke="none"
+>
+  <rect x="3" y="15" width="4.5" height="3" rx="1" />
+  <rect x="9.75" y="15" width="4.5" height="3" rx="1" />
+  <rect x="16.5" y="15" width="4.5" height="3" rx="1" />
+</svg>`;
+
+/** Corner labels (Uncharted / Industrialized, top corners). */
+const CornerLabelsIcon = html`<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  stroke="none"
+>
+  <rect x="3" y="5" width="6" height="3" rx="1" />
+  <rect x="15" y="5" width="6" height="3" rx="1" />
+</svg>`;
+
+/** Visibility labels (Visible / Invisible) — an eye. */
+const VisibilityIcon = 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="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12z" />
+  <circle cx="12" cy="12" r="2.4" />
+</svg>`;
+
+type WardleyToggleProp =
+  | 'resizeEnabled'
+  | 'showGradient'
+  | 'showXAxis'
+  | 'showYAxis'
+  | 'showColumnDividers'
+  | 'showColumnLabels'
+  | 'showCornerLabels'
+  | 'showVisibilityLabels';
+
+/**
+ * Build a toolbar toggle that flips a boolean flag on every selected Wardley
+ * background: `active` reflects the current state, `run` flips it (with an
+ * undo checkpoint). An optional `when` predicate hides the button.
+ */
+function booleanToggle(
+  id: string,
+  tooltip: string,
+  icon: TemplateResult,
+  prop: WardleyToggleProp,
+  when?: (ctx: ToolbarContext) => boolean
+) {
+  return {
+    id,
+    tooltip,
+    icon,
+    when: when ?? true,
+    active(ctx: ToolbarContext) {
+      const models = ctx.getSurfaceModelsByType(WardleyBackgroundElementModel);
+      return models.length > 0 && models.every(model => model[prop]);
+    },
+    run(ctx: ToolbarContext) {
+      const models = ctx.getSurfaceModelsByType(WardleyBackgroundElementModel);
+      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 wardleyToolbarConfig = {
+  actions: [
+    booleanToggle(
+      'a.toggle-resize',
+      'Enable / lock resizing',
+      ResizeIcon,
+      'resizeEnabled'
+    ),
+    // Group 1 — evolution (X) side: axis, phase labels, columns, corner
+    // labels, and the gradient toggle.
+    {
+      id: 'b.evolution',
+      actions: [
+        booleanToggle(
+          'b.1-axis-x',
+          'Evolution axis (X)',
+          XAxisIcon,
+          'showXAxis'
+        ),
+        booleanToggle(
+          'b.2-column-labels',
+          'Evolution phase labels',
+          ColumnLabelsIcon,
+          'showColumnLabels'
+        ),
+        booleanToggle(
+          'b.3-columns',
+          'Columns (dividers)',
+          ColumnsIcon,
+          'showColumnDividers'
+        ),
+        booleanToggle(
+          'b.4-corner-labels',
+          'Labels Uncharted / Industrialized',
+          CornerLabelsIcon,
+          'showCornerLabels'
+        ),
+        // Only relevant when the selection has a gradient variant.
+        booleanToggle(
+          'b.5-gradient',
+          'Show / hide the gradient',
+          GradientIcon,
+          'showGradient',
+          ctx =>
+            ctx
+              .getSurfaceModelsByType(WardleyBackgroundElementModel)
+              .some(model => model.variant !== 'classic')
+        ),
+      ],
+    },
+    // Group 2 — value-chain (Y) side: axis and Visible/Invisible labels.
+    {
+      id: 'c.value-chain',
+      actions: [
+        booleanToggle(
+          'c.1-axis-y',
+          'Value Chain axis (Y)',
+          YAxisIcon,
+          'showYAxis'
+        ),
+        booleanToggle(
+          'c.2-visibility-labels',
+          'Labels Visible / Invisible',
+          VisibilityIcon,
+          'showVisibilityLabels'
+        ),
+      ],
+    },
+    // Generate the auto-legend from the components present inside this
+    // background's perimeter (+ a gradient-meaning block for gradient variants).
+    {
+      id: 'd.legend',
+      tooltip: 'Generate the legend (components present)',
+      icon: wardleyLegendIcon,
+      run(ctx) {
+        const models = ctx.getSurfaceModelsByType(WardleyBackgroundElementModel);
+        const bg = models[0];
+        if (!bg) return;
+        createWardleyLegend(ctx.std, bg);
+        ctx.std.getOptional(TelemetryProvider)?.track('FrameworkLegendCreated', {
+          framework: 'wardley',
+          element: 'legend',
+          page: 'whiteboard editor',
+          segment: 'element toolbar',
+          module: 'wardley toolbar',
+        });
+      },
+    },
+  ],
+  when: ctx =>
+    ctx.getSurfaceModelsByType(WardleyBackgroundElementModel).length > 0,
+} as const satisfies ToolbarModuleConfig;
+
+export const wardleyToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:wardley'),
+  config: wardleyToolbarConfig,
+});

package/src/toolbar/node-config.ts

@@ -1,28 +1,28 @@
-import { shapeToolbarConfig } from '@formicoidea/labre-core/gfx/shape';
-import {
-  type ToolbarModuleConfig,
-  ToolbarModuleExtension,
-} from '@formicoidea/labre-core/shared/services';
-import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
-
-/**
- * Wardley nodes are {@link ShapeElementModel} subclasses, so the shape toolbar's
- * actions (which target `getSurfaceModelsByType(ShapeElementModel)`) operate on
- * them directly. We re-register only the color / line-style actions under the
- * `wardleyNode` flavour so the circle's fill / stroke color / stroke width are
- * editable — while excluding the shape-only actions (switch type, add inner
- * text, edit vertices) that don't make sense for a Wardley node.
- */
-const KEEP_ACTION_IDS = new Set(['e.color', 'd.style']);
-
-const wardleyNodeToolbarConfig = {
-  actions: shapeToolbarConfig.actions.filter(action =>
-    KEEP_ACTION_IDS.has(action.id)
-  ),
-  when: shapeToolbarConfig.when,
-} as ToolbarModuleConfig;
-
-export const wardleyNodeToolbarExtension = ToolbarModuleExtension({
-  id: BlockFlavourIdentifier('affine:surface:wardleyNode'),
-  config: wardleyNodeToolbarConfig,
-});
+import { shapeToolbarConfig } from '@formicoidea/labre-core/gfx/shape';
+import {
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@formicoidea/labre-core/shared/services';
+import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+
+/**
+ * Wardley nodes are {@link ShapeElementModel} subclasses, so the shape toolbar's
+ * actions (which target `getSurfaceModelsByType(ShapeElementModel)`) operate on
+ * them directly. We re-register only the color / line-style actions under the
+ * `wardleyNode` flavour so the circle's fill / stroke color / stroke width are
+ * editable — while excluding the shape-only actions (switch type, add inner
+ * text, edit vertices) that don't make sense for a Wardley node.
+ */
+const KEEP_ACTION_IDS = new Set(['e.color', 'd.style']);
+
+const wardleyNodeToolbarConfig = {
+  actions: shapeToolbarConfig.actions.filter(action =>
+    KEEP_ACTION_IDS.has(action.id)
+  ),
+  when: shapeToolbarConfig.when,
+} as ToolbarModuleConfig;
+
+export const wardleyNodeToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:wardleyNode'),
+  config: wardleyNodeToolbarConfig,
+});

package/src/toolbar/senior-tool.ts

@@ -1,11 +1,11 @@
-import { SeniorToolExtension } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
-import { html } from 'lit';
-
-export const wardleySeniorTool = SeniorToolExtension('wardley', ({ block }) => {
-  return {
-    name: 'Wardley map',
-    content: html`<edgeless-wardley-senior-button
-      .edgeless=${block}
-    ></edgeless-wardley-senior-button>`,
-  };
-});
+import { SeniorToolExtension } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { html } from 'lit';
+
+export const wardleySeniorTool = SeniorToolExtension('wardley', ({ block }) => {
+  return {
+    name: 'Wardley map',
+    content: html`<edgeless-wardley-senior-button
+      .edgeless=${block}
+    ></edgeless-wardley-senior-button>`,
+  };
+});