@formicoidea/labre-framework-edgy 0.23.0

package/src/toolbar/edgy-senior-button.ts

@@ -0,0 +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)
+) {
+  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/src/toolbar/icons.ts

@@ -0,0 +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">
+  <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">
+  <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">
+  <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">
+  <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">
+  <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">
+  <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>`;

package/src/toolbar/node-config.ts

@@ -0,0 +1,202 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import {
+  packColor,
+  type PickColorEvent,
+} from '@formicoidea/labre-core/components/color-picker';
+import { shapeToolbarConfig } from '@formicoidea/labre-core/gfx/shape';
+import {
+  type Color,
+  DefaultTheme,
+  isTransparent,
+  LineWidth,
+  type Palette,
+  resolveColor,
+  ShapeElementModel,
+  StrokeStyle,
+} from '@formicoidea/labre-core/model';
+import {
+  type ToolbarContext,
+  type ToolbarModuleConfig,
+  ToolbarModuleExtension,
+} from '@formicoidea/labre-core/shared/services';
+import { getMostCommonValue } from '@formicoidea/labre-core/shared/utils';
+import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+import { html } from 'lit';
+
+/**
+ * The typical EDGY palette, surfaced as ready-made swatches in the EDGY node
+ * color picker (facet + intersection colours, saturated then pastel), followed
+ * by the default editor palette.
+ */
+const EDGY_PALETTES: Palette[] = [
+  { key: 'Identity', value: '#00ea4e' },
+  { key: 'Architecture', value: '#034cee' },
+  { key: 'Experience', value: '#ff0056' },
+  { key: 'Organisation', value: '#00caf4' },
+  { key: 'Brand', value: '#ffa500' },
+  { key: 'Product', value: '#cf00ff' },
+  { key: 'Identity light', value: '#80ffb7' },
+  { key: 'Architecture light', value: '#a6c0ff' },
+  { key: 'Experience light', value: '#ff99bd' },
+  { key: 'Organisation light', value: '#80eaff' },
+  { key: 'Brand light', value: '#ffd580' },
+  { key: 'Product light', value: '#e599ff' },
+];
+
+/**
+ * From the default editor palette we keep ONLY the neutrals (greys, white,
+ * black, transparent) — the historical colours are dropped in favour of the
+ * EDGY swatches above.
+ */
+const NEUTRAL_KEY = /grey|gray|white|black|transparent/i;
+
+const EDGY_PALETTE_LIST: Palette[] = [
+  ...EDGY_PALETTES,
+  ...DefaultTheme.Palettes.filter(p => NEUTRAL_KEY.test(p.key)),
+];
+
+// Mirror of the shape color action's text-color rule.
+function getTextColor(fillColor: Color) {
+  if (fillColor === DefaultTheme.black) return DefaultTheme.white;
+  if (fillColor === DefaultTheme.white) return DefaultTheme.black;
+  return DefaultTheme.shapeTextColor;
+}
+
+/**
+ * EDGY fill / stroke colour picker — identical to the shape one but seeded with
+ * the EDGY palette swatches (`.palettes`).
+ */
+const edgyColorAction = {
+  id: 'e.color',
+  when(ctx: ToolbarContext) {
+    return ctx.getSurfaceModelsByType(ShapeElementModel).length > 0;
+  },
+  content(ctx: ToolbarContext) {
+    const models = ctx.getSurfaceModelsByType(ShapeElementModel);
+    if (!models.length) return null;
+
+    const enableCustomColor = ctx.features.getFlag('enable_color_picker');
+    const theme = ctx.theme.edgeless$.value;
+
+    const firstModel = models[0];
+    const originalFillColor = firstModel.fillColor;
+    const originalStrokeColor = firstModel.strokeColor;
+
+    const mapped = models.map(
+      ({ filled, fillColor, strokeColor, strokeWidth, strokeStyle }) => ({
+        fillColor: filled
+          ? resolveColor(fillColor, theme)
+          : DefaultTheme.transparent,
+        strokeColor: resolveColor(strokeColor, theme),
+        strokeWidth,
+        strokeStyle,
+      })
+    );
+    const fillColor =
+      getMostCommonValue(mapped, 'fillColor') ??
+      resolveColor(DefaultTheme.shapeFillColor, theme);
+    const strokeColor =
+      getMostCommonValue(mapped, 'strokeColor') ??
+      resolveColor(DefaultTheme.shapeStrokeColor, theme);
+    const strokeWidth =
+      getMostCommonValue(mapped, 'strokeWidth') ?? LineWidth.Four;
+    const strokeStyle =
+      getMostCommonValue(mapped, 'strokeStyle') ?? StrokeStyle.Solid;
+
+    const pickColorWrapper =
+      (field: string, pickCallback: (palette: Palette) => void) =>
+      (e: CustomEvent<PickColorEvent>) => {
+        e.stopPropagation();
+        switch (e.detail.type) {
+          case 'pick':
+            pickCallback(e.detail.detail);
+            break;
+          case 'start':
+            ctx.store.captureSync();
+            models.forEach(model => model.stash(field));
+            break;
+          case 'end':
+            ctx.store.transact(() => {
+              models.forEach(model => model.pop(field));
+            });
+        }
+      };
+
+    const onPickFillColor = pickColorWrapper('fillColor', palette => {
+      const value = palette.value;
+      const filled = isTransparent(value);
+      const props = packColor('fillColor', value);
+      const crud = ctx.std.get(EdgelessCRUDIdentifier);
+      models.forEach(model => {
+        if (filled && !model.filled) {
+          const color = getTextColor(value);
+          Object.assign(props, { filled, color });
+        }
+        crud.updateElement(model.id, props);
+      });
+    });
+
+    const onPickStrokeColor = pickColorWrapper('strokeColor', palette => {
+      const props = packColor('strokeColor', palette.value);
+      const crud = ctx.std.get(EdgelessCRUDIdentifier);
+      models.forEach(model => crud.updateElement(model.id, props));
+    });
+
+    const onPickStrokeStyle = (
+      e: CustomEvent<{ type: string; value: number & StrokeStyle }>
+    ) => {
+      e.stopPropagation();
+      const { type, value } = e.detail;
+      const crud = ctx.std.get(EdgelessCRUDIdentifier);
+      const props =
+        type === 'size'
+          ? { strokeWidth: value as number }
+          : { strokeStyle: value as StrokeStyle };
+      for (const model of models) {
+        crud.updateElement(model.id, props);
+      }
+    };
+
+    return html`
+      <edgeless-shape-color-picker
+        @pickFillColor=${onPickFillColor}
+        @pickStrokeColor=${onPickStrokeColor}
+        @pickStrokeStyle=${onPickStrokeStyle}
+        .palettes=${EDGY_PALETTE_LIST}
+        .payload=${{
+          fillColor,
+          strokeColor,
+          strokeWidth,
+          strokeStyle,
+          originalFillColor,
+          originalStrokeColor,
+          theme,
+          enableCustomColor,
+        }}
+      >
+      </edgeless-shape-color-picker>
+    `;
+  },
+};
+
+/**
+ * EDGY nodes are {@link ShapeElementModel} subclasses, so the shape toolbar's
+ * actions operate on them directly. We reuse the line-style + text actions, add
+ * the EDGY-seeded color picker, and drop the actions that don't fit an EDGY base
+ * shape (switch shape type, edit polygon vertices).
+ */
+const KEEP_FROM_SHAPE = (id: string) =>
+  id === 'd.style' || id === 'f.text' || id.startsWith('g.text-');
+
+const edgyNodeToolbarConfig = {
+  actions: [
+    ...shapeToolbarConfig.actions.filter(action => KEEP_FROM_SHAPE(action.id)),
+    edgyColorAction,
+  ],
+  when: shapeToolbarConfig.when,
+} as ToolbarModuleConfig;
+
+export const edgyNodeToolbarExtension = ToolbarModuleExtension({
+  id: BlockFlavourIdentifier('affine:surface:edgyNode'),
+  config: edgyNodeToolbarConfig,
+});

package/src/toolbar/senior-tool.ts

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

package/src/view.ts

@@ -0,0 +1,39 @@
+import {
+  type ViewExtensionContext,
+  ViewExtensionProvider,
+} from '@formicoidea/labre-core/ext-loader';
+import { extendTemplateCategory } from '@formicoidea/labre-core/gfx/template';
+
+import { effects } from './effects';
+import { edgyTemplateCategory } from './templates';
+import { EdgyFacetsRendererExtension } from './element-renderer';
+import { EdgyInteraction, EdgyView } from './element-view';
+import { EdgyNodeRendererExtension } from './node/node-renderer';
+import { EdgyNodeView } from './node/node-view';
+import { edgyToolbarExtension } from './toolbar/config';
+import { edgyNodeToolbarExtension } from './toolbar/node-config';
+import { edgySeniorTool } from './toolbar/senior-tool';
+
+export class EdgyViewExtension extends ViewExtensionProvider {
+  override name = 'affine-edgy-gfx';
+
+  override effect(): void {
+    super.effect();
+    effects();
+    extendTemplateCategory(edgyTemplateCategory);
+  }
+
+  override setup(context: ViewExtensionContext) {
+    super.setup(context);
+    context.register(EdgyView);
+    context.register(EdgyFacetsRendererExtension);
+    context.register(EdgyNodeView);
+    context.register(EdgyNodeRendererExtension);
+    if (this.isEdgeless(context.scope)) {
+      context.register(EdgyInteraction);
+      context.register(edgySeniorTool);
+      context.register(edgyToolbarExtension);
+      context.register(edgyNodeToolbarExtension);
+    }
+  }
+}