@formicoidea/labre-framework-edgy 0.23.1 → 0.23.2

package/src/toolbar/edgy-menu.ts

@@ -0,0 +1,242 @@
+import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
+import { createGroupCommand } from '@formicoidea/labre-core/gfx/group';
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { FontFamily, ShapeStyle } from '@formicoidea/labre-core/model';
+import { TelemetryProvider } from '@formicoidea/labre-core/shared/services';
+import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { Bound } from '@formicoidea/labre-core/global/gfx';
+import type { GfxController } from '@formicoidea/labre-core/std/gfx';
+import { css, html, LitElement } from 'lit';
+
+import { REF_H, REF_W } from '../consts';
+import {
+  ACTIVITY_VERTICES,
+  INNER_FONT_SIZE,
+  LABEL_FONT_SIZE,
+  LABEL_GAP,
+  NODE_FILL,
+  NODE_LABEL,
+  NODE_SIZE,
+  NODE_STROKE,
+  NODE_STROKE_WIDTH,
+  OUTCOME_RADIUS,
+} from '../node/consts';
+import {
+  edgyActivityIcon,
+  edgyFacetsIcon,
+  edgyObjectIcon,
+  edgyOutcomeIcon,
+  edgyPeopleIcon,
+} from './icons';
+
+type Surface = NonNullable<GfxController['surface']>;
+type BoxKind = 'outcome' | 'object' | 'activity';
+
+/** Default facets-diagram size (REF aspect, scaled up so it reads on canvas). */
+const FACETS_SCALE = 1.5;
+
+/** Height of the native People free-text label. */
+const LABEL_H = LABEL_FONT_SIZE + 8;
+
+/**
+ * The popover above the toolbar for the EDGY toolbox. Items create the facets
+ * diagram (the on-click Venn) and the four base-element prefab shapes — all
+ * native shapes so they stay editable.
+ */
+export class EdgelessEdgyMenu 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;
+
+  /** Create the Enterprise Design Facets diagram centred on the viewport. */
+  private _createFacets() {
+    const { gfx } = this;
+    if (!gfx.surface) return;
+
+    const width = REF_W * FACETS_SCALE;
+    const height = REF_H * FACETS_SCALE;
+    const { centerX, centerY } = gfx.viewport;
+    const id = gfx.surface.addElement({
+      type: 'edgy',
+      xywh: new Bound(
+        centerX - width / 2,
+        centerY - height / 2,
+        width,
+        height
+      ).serialize(),
+    });
+    this._track('facets');
+    this._finish(id);
+  }
+
+  /** Add a native free-text label (Inter), used for the People node. */
+  private _addLabel(surface: Surface, text: string, x: number, y: number) {
+    return surface.addElement({
+      type: 'text',
+      text,
+      fontFamily: FontFamily.Inter,
+      fontSize: LABEL_FONT_SIZE,
+      color: NODE_STROKE,
+      textAlign: 'center',
+      xywh: new Bound(x, y, 120, LABEL_H).serialize(),
+    });
+  }
+
+  private _group(ids: string[]) {
+    const [, result] = this.edgeless.std.command.exec(createGroupCommand, {
+      elements: ids,
+    });
+    return result.groupId || ids[0];
+  }
+
+  /** Shared props for an EDGY node shape. */
+  private _baseShapeProps(kind: BoxKind | 'people') {
+    return {
+      type: 'edgyNode' as const,
+      kind,
+      filled: true,
+      fillColor: NODE_FILL,
+      strokeColor: NODE_STROKE,
+      shapeStyle: ShapeStyle.General,
+      roughness: 0,
+    };
+  }
+
+  /** Create a box base element (outcome / object / activity) with inner text. */
+  private _createBox(kind: BoxKind) {
+    const surface = this.gfx.surface;
+    if (!surface) return;
+
+    const { w, h } = NODE_SIZE[kind];
+    const { centerX: cx, centerY: cy } = this.gfx.viewport;
+    const shapeType = kind === 'activity' ? 'polygon' : 'rect';
+
+    const id = surface.addElement({
+      ...this._baseShapeProps(kind),
+      shapeType,
+      strokeWidth: NODE_STROKE_WIDTH,
+      radius: kind === 'outcome' ? OUTCOME_RADIUS : 0,
+      vertices: kind === 'activity' ? ACTIVITY_VERTICES : null,
+      text: NODE_LABEL[kind],
+      color: NODE_STROKE,
+      fontFamily: FontFamily.Inter,
+      fontSize: INNER_FONT_SIZE,
+      textAlign: 'center',
+      xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
+    });
+    this._track(`node:${kind}`);
+    this._finish(id);
+  }
+
+  /**
+   * Create the People base element: an (invisible) ellipse decorated with the
+   * person glyph by the renderer, plus a native text label below, grouped.
+   */
+  private _createPeople() {
+    const surface = this.gfx.surface;
+    if (!surface) return;
+
+    const { w, h } = NODE_SIZE.people;
+    const { centerX: cx, centerY: cy } = this.gfx.viewport;
+
+    const nodeId = surface.addElement({
+      ...this._baseShapeProps('people'),
+      shapeType: 'ellipse',
+      // No visible outline — People is just the glyph; the ellipse is the bound.
+      strokeWidth: 0,
+      xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
+    });
+    const labelId = this._addLabel(
+      surface,
+      NODE_LABEL.people,
+      cx - 60,
+      cy + h / 2 + LABEL_GAP
+    );
+
+    this._track('node:people');
+    this._finish(this._group([nodeId, labelId]));
+  }
+
+  private _finish(id: string) {
+    const { gfx } = this;
+    gfx.doc.captureSync();
+    gfx.tool.setTool(DefaultTool);
+    gfx.selection.set({ elements: [id], editing: false });
+    // Keep the palette open (native sub-menu behaviour).
+  }
+
+  private _track(element: string) {
+    this.edgeless.std.getOptional(TelemetryProvider)?.track(
+      'FrameworkElementAdded',
+      {
+        framework: 'edgy',
+        element,
+        page: 'whiteboard editor',
+        segment: 'edgy toolbox',
+        module: 'edgy menu',
+      }
+    );
+  }
+
+  override render() {
+    return html`
+      <edgeless-slide-menu>
+        <div class="menu-content">
+          <div class="button-group-container">
+            <edgeless-tool-icon-button
+              .tooltip=${'Enterprise Design facets'}
+              @click=${this._createFacets}
+            >
+              ${edgyFacetsIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'People'}
+              @click=${this._createPeople}
+            >
+              ${edgyPeopleIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Outcome'}
+              @click=${() => this._createBox('outcome')}
+            >
+              ${edgyOutcomeIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Object'}
+              @click=${() => this._createBox('object')}
+            >
+              ${edgyObjectIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Activity'}
+              @click=${() => this._createBox('activity')}
+            >
+              ${edgyActivityIcon}
+            </edgeless-tool-icon-button>
+          </div>
+        </div>
+      </edgeless-slide-menu>
+    `;
+  }
+}

package/{dist/toolbar/edgy-senior-button.js → src/toolbar/edgy-senior-button.ts}

@@ -1,97 +1,102 @@
-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 { edgyToolbarIcon } from './icons';
-/**
- * Main toolbar button (colored facets glyph) that opens the EDGY toolbox
- * sub-menu above the toolbar. Mirrors the Wardley senior button.
- */
-export class EdgelessEdgySeniorButton extends EdgelessToolbarToolMixin(SignalWatcher(LitElement)) {
-    constructor() {
-        super(...arguments);
-        this.enableActiveBackground = true;
-        this.type = EmptyTool;
-    }
-    static { this.styles = css `
-    :host,
-    .edgy-button {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-    :host {
-      position: relative;
-    }
-    .edgy-root {
-      width: 100%;
-      height: 64px;
-      position: relative;
-      overflow: hidden;
-      cursor: pointer;
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-    }
-    .edgy-card {
-      --y: -4px;
-      --s: 1;
-      position: absolute;
-      bottom: 0;
-      width: 54px;
-      height: 54px;
-      transform: translateY(var(--y)) scale(var(--s));
-      translate: var(--active-x, 0) var(--active-y, 0);
-      rotate: var(--active-r, -2deg);
-      scale: var(--active-s, 1);
-      transition: transform 0.3s ease, translate 0.3s ease, rotate 0.3s ease,
-        scale 0.3s ease;
-    }
-    .edgy-card svg {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-    .edgy-root:hover .edgy-card {
-      --y: -10px;
-      --s: 1.07;
-    }
-  `; }
-    _toggleMenu() {
-        if (this.popper) {
-            this.popper.dispose();
-            this.popper = null;
-            return;
-        }
-        this.setEdgelessTool(DefaultTool);
-        const menu = this.createPopper('edgeless-edgy-menu', this);
-        menu.element.edgeless = this.edgeless;
-        const el = menu.element;
-        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',
-        });
-    }
-    render() {
-        return html `<edgeless-toolbar-button
-      class="edgy-button"
-      .tooltip=${this.popper ? '' : 'EDGY'}
-      .tooltipOffset=${4}
-      .active=${!!this.popper}
-      @click=${this._toggleMenu}
-    >
-      <div class="edgy-root">
-        <div class="edgy-card">${edgyToolbarIcon}</div>
-      </div>
-    </edgeless-toolbar-button>`;
-    }
-}
-//# sourceMappingURL=edgy-senior-button.js.map
+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 { edgyToolbarIcon } from './icons';
+
+/**
+ * Main toolbar button (colored facets glyph) that opens the EDGY toolbox
+ * sub-menu above the toolbar. Mirrors the Wardley senior button.
+ */
+export class EdgelessEdgySeniorButton extends EdgelessToolbarToolMixin(
+  SignalWatcher(LitElement)
+) {
+  static override styles = css`
+    :host,
+    .edgy-button {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    :host {
+      position: relative;
+    }
+    .edgy-root {
+      width: 100%;
+      height: 64px;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+    }
+    .edgy-card {
+      --y: -4px;
+      --s: 1;
+      position: absolute;
+      bottom: 0;
+      width: 54px;
+      height: 54px;
+      transform: translateY(var(--y)) scale(var(--s));
+      translate: var(--active-x, 0) var(--active-y, 0);
+      rotate: var(--active-r, -2deg);
+      scale: var(--active-s, 1);
+      transition: transform 0.3s ease, translate 0.3s ease, rotate 0.3s ease,
+        scale 0.3s ease;
+    }
+    .edgy-card svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .edgy-root:hover .edgy-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-edgy-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="edgy-button"
+      .tooltip=${this.popper ? '' : 'EDGY'}
+      .tooltipOffset=${4}
+      .active=${!!this.popper}
+      @click=${this._toggleMenu}
+    >
+      <div class="edgy-root">
+        <div class="edgy-card">${edgyToolbarIcon}</div>
+      </div>
+    </edgeless-toolbar-button>`;
+  }
+}

package/{dist/toolbar/icons.js → src/toolbar/icons.ts}

@@ -1,33 +1,38 @@
-import { svg } from 'lit';
-/** Colored EDGY facets glyph for the main toolbar button (3 overlapping circles). */
-export const edgyToolbarIcon = svg `<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+import { svg } from 'lit';
+
+/** Colored EDGY facets glyph for the main toolbar button (3 overlapping circles). */
+export const edgyToolbarIcon = svg`<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g opacity="0.95">
     <circle cx="22" cy="24" r="13" fill="#00ea4e"/>
     <circle cx="34" cy="24" r="13" fill="#034cee"/>
     <circle cx="28" cy="34" r="13" fill="#ff0056"/>
   </g>
-</svg>`;
-/** Menu icon — the facets diagram (colored mini Venn). */
-export const edgyFacetsIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+
+/** Menu icon — the facets diagram (colored mini Venn). */
+export const edgyFacetsIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <circle cx="9.5" cy="10" r="6" fill="#00ea4e" opacity="0.92"/>
   <circle cx="14.5" cy="10" r="6" fill="#034cee" opacity="0.92"/>
   <circle cx="12" cy="14.5" r="6" fill="#ff0056" opacity="0.92"/>
-</svg>`;
-/** People — person glyph (official Icon-People), uses currentColor. */
-export const edgyPeopleIcon = svg `<svg width="24" height="24" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+
+/** People — person glyph (official Icon-People), uses currentColor. */
+export const edgyPeopleIcon = svg`<svg width="24" height="24" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path d="m16,19c-3.308,0-6-2.692-6-6v-4c0-3.308,2.692-6,6-6s6,2.692,6,6v4c0,3.308-2.692,6-6,6Zm0-14c-2.206,0-4,1.794-4,4v4c0,2.206,1.794,4,4,4s4-1.794,4-4v-4c0-2.206-1.794-4-4-4Z"/>
   <path d="m29,30H3v-3.5c0-3.308,2.692-6,6-6h14c3.308,0,6,2.692,6,6v3.5Zm-24-2h22v-1.5c0-2.206-1.794-4-4-4h-14c-2.206,0-4,1.794-4,4v1.5Z"/>
-</svg>`;
-/** Outcome — lightly rounded rectangle. */
-export const edgyOutcomeIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+
+/** Outcome — lightly rounded rectangle. */
+export const edgyOutcomeIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <rect x="3.5" y="6.5" width="17" height="11" rx="2" stroke="currentColor" stroke-width="1.6"/>
-</svg>`;
-/** Object — plain rectangle. */
-export const edgyObjectIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+
+/** Object — plain rectangle. */
+export const edgyObjectIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <rect x="3.5" y="6.5" width="17" height="11" stroke="currentColor" stroke-width="1.6"/>
-</svg>`;
-/** Activity — right-pointing chevron. */
-export const edgyActivityIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+
+/** Activity — right-pointing chevron. */
+export const edgyActivityIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M3.5 6.5 H15 L20.5 12 L15 17.5 H3.5 Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
-</svg>`;
-//# sourceMappingURL=icons.js.map
+</svg>`;