@formicoidea/labre-framework-cynefin 0.23.0 → 0.23.2

package/src/toolbar/menu.ts

@@ -1,156 +1,156 @@
-import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
-import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
-import { ShapeStyle } from '@formicoidea/labre-core/model';
-import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
-import { Bound } from '@formicoidea/labre-core/global/gfx';
-import { css, html, LitElement } from 'lit';
-
-import { REF_H as CYN_H, REF_W as CYN_W } from '../cynefin/consts';
-import { REF_H as EST_H, REF_W as EST_W } from '../estuarine/consts';
-import {
-  cynefinMenuIcon,
-  estuarineMenuIcon,
-  hexagonMenuIcon,
-} from './icons';
-
-/** Estuarine map default size (REF aspect, scaled up so it reads on canvas). */
-const MAP_SCALE = 1.2;
-const HEX_SIZE = 60;
-const HEX_FILL = '#34c724';
-const HEX_STROKE = '#1f1f1f';
-/** Flat-top regular hexagon, normalized vertices. */
-const HEX_VERTICES: number[][] = [
-  [1, 0.5],
-  [0.75, 0.933],
-  [0.25, 0.933],
-  [0, 0.5],
-  [0.25, 0.067],
-  [0.75, 0.067],
-];
-
-/**
- * The popover above the toolbar hosting both frameworks: create the Cynefin
- * diagram, the Estuarine map, or a hexagon constraint node.
- */
-export class EdgelessCynefinEstuarineMenu extends EdgelessToolbarToolMixin(
-  LitElement
-) {
-  static override styles = css`
-    :host {
-      position: absolute;
-      display: flex;
-      z-index: -1;
-    }
-    .menu-content {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .button-group-container {
-      display: flex;
-      align-items: center;
-      gap: 14px;
-      fill: var(--affine-icon-color);
-    }
-    .button-group-container svg {
-      width: 24px;
-      height: 24px;
-    }
-  `;
-
-  override type = EmptyTool;
-
-  private _finish(id: string) {
-    const { gfx } = this;
-    gfx.doc.captureSync();
-    gfx.tool.setTool(DefaultTool);
-    gfx.selection.set({ elements: [id], editing: false });
-  }
-
-  private _createCynefin() {
-    const { gfx } = this;
-    if (!gfx.surface) return;
-    const { centerX, centerY } = gfx.viewport;
-    const id = gfx.surface.addElement({
-      type: 'cynefin',
-      xywh: new Bound(
-        centerX - CYN_W / 2,
-        centerY - CYN_H / 2,
-        CYN_W,
-        CYN_H
-      ).serialize(),
-    });
-    this._finish(id);
-  }
-
-  private _createMap() {
-    const { gfx } = this;
-    if (!gfx.surface) return;
-    const width = EST_W * MAP_SCALE;
-    const height = EST_H * MAP_SCALE;
-    const { centerX, centerY } = gfx.viewport;
-    const id = gfx.surface.addElement({
-      type: 'estuarine',
-      xywh: new Bound(
-        centerX - width / 2,
-        centerY - height / 2,
-        width,
-        height
-      ).serialize(),
-    });
-    this._finish(id);
-  }
-
-  private _createHexagon() {
-    const { gfx } = this;
-    if (!gfx.surface) return;
-    const { centerX: cx, centerY: cy } = gfx.viewport;
-    const id = gfx.surface.addElement({
-      type: 'shape',
-      shapeType: 'polygon',
-      vertices: HEX_VERTICES,
-      filled: true,
-      fillColor: HEX_FILL,
-      strokeColor: HEX_STROKE,
-      strokeWidth: 2,
-      shapeStyle: ShapeStyle.General,
-      roughness: 0,
-      xywh: new Bound(
-        cx - HEX_SIZE / 2,
-        cy - HEX_SIZE / 2,
-        HEX_SIZE,
-        HEX_SIZE
-      ).serialize(),
-    });
-    this._finish(id);
-  }
-
-  override render() {
-    return html`
-      <edgeless-slide-menu>
-        <div class="menu-content">
-          <div class="button-group-container">
-            <edgeless-tool-icon-button
-              .tooltip=${'Cynefin framework'}
-              @click=${this._createCynefin}
-            >
-              ${cynefinMenuIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Estuarine map'}
-              @click=${this._createMap}
-            >
-              ${estuarineMenuIcon}
-            </edgeless-tool-icon-button>
-            <edgeless-tool-icon-button
-              .tooltip=${'Hexagon node'}
-              @click=${this._createHexagon}
-            >
-              ${hexagonMenuIcon}
-            </edgeless-tool-icon-button>
-          </div>
-        </div>
-      </edgeless-slide-menu>
-    `;
-  }
-}
+import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { ShapeStyle } from '@formicoidea/labre-core/model';
+import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { Bound } from '@formicoidea/labre-core/global/gfx';
+import { css, html, LitElement } from 'lit';
+
+import { REF_H as CYN_H, REF_W as CYN_W } from '../cynefin/consts';
+import { REF_H as EST_H, REF_W as EST_W } from '../estuarine/consts';
+import {
+  cynefinMenuIcon,
+  estuarineMenuIcon,
+  hexagonMenuIcon,
+} from './icons';
+
+/** Estuarine map default size (REF aspect, scaled up so it reads on canvas). */
+const MAP_SCALE = 1.2;
+const HEX_SIZE = 60;
+const HEX_FILL = '#34c724';
+const HEX_STROKE = '#1f1f1f';
+/** Flat-top regular hexagon, normalized vertices. */
+const HEX_VERTICES: number[][] = [
+  [1, 0.5],
+  [0.75, 0.933],
+  [0.25, 0.933],
+  [0, 0.5],
+  [0.25, 0.067],
+  [0.75, 0.067],
+];
+
+/**
+ * The popover above the toolbar hosting both frameworks: create the Cynefin
+ * diagram, the Estuarine map, or a hexagon constraint node.
+ */
+export class EdgelessCynefinEstuarineMenu extends EdgelessToolbarToolMixin(
+  LitElement
+) {
+  static override styles = css`
+    :host {
+      position: absolute;
+      display: flex;
+      z-index: -1;
+    }
+    .menu-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .button-group-container {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      fill: var(--affine-icon-color);
+    }
+    .button-group-container svg {
+      width: 24px;
+      height: 24px;
+    }
+  `;
+
+  override type = EmptyTool;
+
+  private _finish(id: string) {
+    const { gfx } = this;
+    gfx.doc.captureSync();
+    gfx.tool.setTool(DefaultTool);
+    gfx.selection.set({ elements: [id], editing: false });
+  }
+
+  private _createCynefin() {
+    const { gfx } = this;
+    if (!gfx.surface) return;
+    const { centerX, centerY } = gfx.viewport;
+    const id = gfx.surface.addElement({
+      type: 'cynefin',
+      xywh: new Bound(
+        centerX - CYN_W / 2,
+        centerY - CYN_H / 2,
+        CYN_W,
+        CYN_H
+      ).serialize(),
+    });
+    this._finish(id);
+  }
+
+  private _createMap() {
+    const { gfx } = this;
+    if (!gfx.surface) return;
+    const width = EST_W * MAP_SCALE;
+    const height = EST_H * MAP_SCALE;
+    const { centerX, centerY } = gfx.viewport;
+    const id = gfx.surface.addElement({
+      type: 'estuarine',
+      xywh: new Bound(
+        centerX - width / 2,
+        centerY - height / 2,
+        width,
+        height
+      ).serialize(),
+    });
+    this._finish(id);
+  }
+
+  private _createHexagon() {
+    const { gfx } = this;
+    if (!gfx.surface) return;
+    const { centerX: cx, centerY: cy } = gfx.viewport;
+    const id = gfx.surface.addElement({
+      type: 'shape',
+      shapeType: 'polygon',
+      vertices: HEX_VERTICES,
+      filled: true,
+      fillColor: HEX_FILL,
+      strokeColor: HEX_STROKE,
+      strokeWidth: 2,
+      shapeStyle: ShapeStyle.General,
+      roughness: 0,
+      xywh: new Bound(
+        cx - HEX_SIZE / 2,
+        cy - HEX_SIZE / 2,
+        HEX_SIZE,
+        HEX_SIZE
+      ).serialize(),
+    });
+    this._finish(id);
+  }
+
+  override render() {
+    return html`
+      <edgeless-slide-menu>
+        <div class="menu-content">
+          <div class="button-group-container">
+            <edgeless-tool-icon-button
+              .tooltip=${'Cynefin framework'}
+              @click=${this._createCynefin}
+            >
+              ${cynefinMenuIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Estuarine map'}
+              @click=${this._createMap}
+            >
+              ${estuarineMenuIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Hexagon node'}
+              @click=${this._createHexagon}
+            >
+              ${hexagonMenuIcon}
+            </edgeless-tool-icon-button>
+          </div>
+        </div>
+      </edgeless-slide-menu>
+    `;
+  }
+}

package/src/toolbar/senior-button.ts

@@ -1,95 +1,95 @@
-import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
-import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
-import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
-import { SignalWatcher } from '@formicoidea/labre-core/global/lit';
-import { css, html, LitElement } from 'lit';
-
-import { cynefinToolbarIcon } from './icons';
-
-/** Main toolbar button that opens the combined Cynefin / Estuarine sub-menu. */
-export class EdgelessCynefinEstuarineSeniorButton extends EdgelessToolbarToolMixin(
-  SignalWatcher(LitElement)
-) {
-  static override styles = css`
-    :host,
-    .ce-button {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-    :host {
-      position: relative;
-    }
-    .ce-root {
-      width: 100%;
-      height: 64px;
-      position: relative;
-      overflow: hidden;
-      cursor: pointer;
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-    }
-    .ce-card {
-      --y: -4px;
-      --s: 1;
-      position: absolute;
-      bottom: 0;
-      width: 54px;
-      height: 54px;
-      transform: translateY(var(--y)) scale(var(--s));
-      transition: transform 0.3s ease;
-    }
-    .ce-card svg {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-    .ce-root:hover .ce-card {
-      --y: -10px;
-      --s: 1.07;
-    }
-  `;
-
-  override enableActiveBackground = true;
-
-  override type = EmptyTool;
-
-  private _toggleMenu() {
-    if (this.popper) {
-      this.popper.dispose();
-      this.popper = null;
-      return;
-    }
-    this.setEdgelessTool(DefaultTool);
-    const menu = this.createPopper('edgeless-cynefin-estuarine-menu', this);
-    menu.element.edgeless = this.edgeless;
-
-    const el = menu.element as HTMLElement;
-    const wrap = el.parentElement;
-    if (wrap) {
-      wrap.style.overflow = 'visible';
-      wrap.style.justifyContent = 'flex-end';
-    }
-    Object.assign(el.style, {
-      position: 'static',
-      width: 'max-content',
-      maxWidth: 'calc(100vw - 16px)',
-      marginLeft: '0',
-    });
-  }
-
-  override render() {
-    return html`<edgeless-toolbar-button
-      class="ce-button"
-      .tooltip=${this.popper ? '' : 'Cynefin / Estuarine'}
-      .tooltipOffset=${4}
-      .active=${!!this.popper}
-      @click=${this._toggleMenu}
-    >
-      <div class="ce-root">
-        <div class="ce-card">${cynefinToolbarIcon}</div>
-      </div>
-    </edgeless-toolbar-button>`;
-  }
-}
+import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { SignalWatcher } from '@formicoidea/labre-core/global/lit';
+import { css, html, LitElement } from 'lit';
+
+import { cynefinToolbarIcon } from './icons';
+
+/** Main toolbar button that opens the combined Cynefin / Estuarine sub-menu. */
+export class EdgelessCynefinEstuarineSeniorButton extends EdgelessToolbarToolMixin(
+  SignalWatcher(LitElement)
+) {
+  static override styles = css`
+    :host,
+    .ce-button {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    :host {
+      position: relative;
+    }
+    .ce-root {
+      width: 100%;
+      height: 64px;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+    }
+    .ce-card {
+      --y: -4px;
+      --s: 1;
+      position: absolute;
+      bottom: 0;
+      width: 54px;
+      height: 54px;
+      transform: translateY(var(--y)) scale(var(--s));
+      transition: transform 0.3s ease;
+    }
+    .ce-card svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .ce-root:hover .ce-card {
+      --y: -10px;
+      --s: 1.07;
+    }
+  `;
+
+  override enableActiveBackground = true;
+
+  override type = EmptyTool;
+
+  private _toggleMenu() {
+    if (this.popper) {
+      this.popper.dispose();
+      this.popper = null;
+      return;
+    }
+    this.setEdgelessTool(DefaultTool);
+    const menu = this.createPopper('edgeless-cynefin-estuarine-menu', this);
+    menu.element.edgeless = this.edgeless;
+
+    const el = menu.element as HTMLElement;
+    const wrap = el.parentElement;
+    if (wrap) {
+      wrap.style.overflow = 'visible';
+      wrap.style.justifyContent = 'flex-end';
+    }
+    Object.assign(el.style, {
+      position: 'static',
+      width: 'max-content',
+      maxWidth: 'calc(100vw - 16px)',
+      marginLeft: '0',
+    });
+  }
+
+  override render() {
+    return html`<edgeless-toolbar-button
+      class="ce-button"
+      .tooltip=${this.popper ? '' : 'Cynefin / Estuarine'}
+      .tooltipOffset=${4}
+      .active=${!!this.popper}
+      @click=${this._toggleMenu}
+    >
+      <div class="ce-root">
+        <div class="ce-card">${cynefinToolbarIcon}</div>
+      </div>
+    </edgeless-toolbar-button>`;
+  }
+}

package/src/toolbar/senior-tool.ts

@@ -1,15 +1,15 @@
-import { SeniorToolExtension } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
-import { html } from 'lit';
-
-/** A single senior tool hosting both the Cynefin and Estuarine frameworks. */
-export const cynefinEstuarineSeniorTool = SeniorToolExtension(
-  'cynefin-estuarine',
-  ({ block }) => {
-    return {
-      name: 'Cynefin / Estuarine',
-      content: html`<edgeless-cynefin-estuarine-senior-button
-        .edgeless=${block}
-      ></edgeless-cynefin-estuarine-senior-button>`,
-    };
-  }
-);
+import { SeniorToolExtension } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { html } from 'lit';
+
+/** A single senior tool hosting both the Cynefin and Estuarine frameworks. */
+export const cynefinEstuarineSeniorTool = SeniorToolExtension(
+  'cynefin-estuarine',
+  ({ block }) => {
+    return {
+      name: 'Cynefin / Estuarine',
+      content: html`<edgeless-cynefin-estuarine-senior-button
+        .edgeless=${block}
+      ></edgeless-cynefin-estuarine-senior-button>`,
+    };
+  }
+);