@formicoidea/labre-core 0.23.3 → 0.24.0

package/dist/_pkgs/affine-gfx-ddd/toolbar/senior-buttons.js

@@ -0,0 +1,114 @@
+import { DefaultTool } from '../../affine-block-surface/index.js';
+import { EmptyTool } from '../../affine-gfx-pointer/index.js';
+import { EdgelessToolbarToolMixin } from '../../affine-widget-edgeless-toolbar/index.js';
+import { SignalWatcher } from '../../global/lit/index.js';
+import { css, html, LitElement } from 'lit';
+import { contextMapToolbarIcon, coreDomainToolbarIcon, eventStormingToolbarIcon, } from './icons';
+/**
+ * Shared base for the three DDD senior buttons. Each subclass only differs by
+ * the popover menu it opens, its tooltip and its glyph — the toggle / popper
+ * wiring is identical (mirrors the Cynefin senior button).
+ */
+class DddSeniorButtonBase extends EdgelessToolbarToolMixin(SignalWatcher(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.enableActiveBackground = true;
+        this.type = EmptyTool;
+    }
+    static { this.styles = css `
+    :host,
+    .ddd-button {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    :host {
+      position: relative;
+    }
+    .ddd-root {
+      width: 100%;
+      height: 64px;
+      cursor: pointer;
+      display: flex;
+      align-items: flex-end;
+      justify-content: center;
+    }
+    .ddd-card {
+      --y: -4px;
+      --s: 1;
+      width: 50px;
+      height: 50px;
+      margin-bottom: 4px;
+      transform: translateY(var(--y)) scale(var(--s));
+      transition: transform 0.3s ease;
+    }
+    .ddd-card svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .ddd-root:hover .ddd-card {
+      --y: -10px;
+      --s: 1.07;
+    }
+  `; }
+    _toggleMenu() {
+        if (this.popper) {
+            this.popper.dispose();
+            this.popper = null;
+            return;
+        }
+        this.setEdgelessTool(DefaultTool);
+        const menu = this.createPopper(this.menuTag, 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="ddd-button"
+      .tooltip=${this.popper ? '' : this.label}
+      .tooltipOffset=${4}
+      .active=${!!this.popper}
+      @click=${this._toggleMenu}
+    >
+      <div class="ddd-root">
+        <div class="ddd-card">${this.icon}</div>
+      </div>
+    </edgeless-toolbar-button>`;
+    }
+}
+export class EdgelessDddEventStormingSeniorButton extends DddSeniorButtonBase {
+    constructor() {
+        super(...arguments);
+        this.menuTag = 'edgeless-ddd-event-storming-menu';
+        this.label = 'Event Storming';
+        this.icon = eventStormingToolbarIcon;
+    }
+}
+export class EdgelessDddCoreDomainSeniorButton extends DddSeniorButtonBase {
+    constructor() {
+        super(...arguments);
+        this.menuTag = 'edgeless-ddd-core-domain-menu';
+        this.label = 'Core Domain Chart';
+        this.icon = coreDomainToolbarIcon;
+    }
+}
+export class EdgelessDddContextMapSeniorButton extends DddSeniorButtonBase {
+    constructor() {
+        super(...arguments);
+        this.menuTag = 'edgeless-ddd-context-map-menu';
+        this.label = 'Context Map';
+        this.icon = contextMapToolbarIcon;
+    }
+}

package/dist/_pkgs/affine-gfx-ddd/toolbar/senior-tool.d.ts

@@ -0,0 +1,6 @@
+/** Independent senior tool — Event Storming. */
+export declare const eventStormingSeniorTool: import("../../store/index.js").ExtensionType;
+/** Independent senior tool — Core Domain Chart. */
+export declare const coreDomainSeniorTool: import("../../store/index.js").ExtensionType;
+/** Independent senior tool — Context Map. */
+export declare const contextMapSeniorTool: import("../../store/index.js").ExtensionType;

package/dist/_pkgs/affine-gfx-ddd/toolbar/senior-tool.js

@@ -0,0 +1,23 @@
+import { SeniorToolExtension } from '../../affine-widget-edgeless-toolbar/index.js';
+import { html } from 'lit';
+/** Independent senior tool — Event Storming. */
+export const eventStormingSeniorTool = SeniorToolExtension('ddd-event-storming', ({ block }) => ({
+    name: 'Event Storming',
+    content: html `<edgeless-ddd-event-storming-senior-button
+      .edgeless=${block}
+    ></edgeless-ddd-event-storming-senior-button>`,
+}));
+/** Independent senior tool — Core Domain Chart. */
+export const coreDomainSeniorTool = SeniorToolExtension('ddd-core-domain', ({ block }) => ({
+    name: 'Core Domain Chart',
+    content: html `<edgeless-ddd-core-domain-senior-button
+      .edgeless=${block}
+    ></edgeless-ddd-core-domain-senior-button>`,
+}));
+/** Independent senior tool — Context Map. */
+export const contextMapSeniorTool = SeniorToolExtension('ddd-context-map', ({ block }) => ({
+    name: 'Context Map',
+    content: html `<edgeless-ddd-context-map-senior-button
+      .edgeless=${block}
+    ></edgeless-ddd-context-map-senior-button>`,
+}));

package/dist/_pkgs/affine-gfx-ddd/view.d.ts

@@ -0,0 +1,35 @@
+import { type ViewExtensionContext, ViewExtensionProvider } from '../affine-ext-loader/index.js';
+/** Event Storming — independently flag-gated (`ddd-event-storming`). */
+export declare class DddEventStormingViewExtension extends ViewExtensionProvider {
+    name: string;
+    effect(): void;
+    setup(context: ViewExtensionContext): void;
+}
+/**
+ * Core Domain Chart rendering — ALWAYS registered, independent of any flag.
+ * Disabling `ddd-core-domain` hides only the senior toolbar button (see
+ * {@link DddCoreDomainViewExtension}); placed `coreDomain` elements must still
+ * paint, stay selectable, and keep their contextual toolbar, and Templates-
+ * panel insertion must still render them.
+ */
+export declare class DddCoreDomainRenderViewExtension extends ViewExtensionProvider {
+    name: string;
+    setup(context: ViewExtensionContext): void;
+}
+/** Core Domain Chart senior button — independently flag-gated (`ddd-core-domain`). */
+export declare class DddCoreDomainViewExtension extends ViewExtensionProvider {
+    name: string;
+    effect(): void;
+    setup(context: ViewExtensionContext): void;
+}
+/** Context Map — independently flag-gated (`ddd-context-map`). */
+export declare class DddContextMapViewExtension extends ViewExtensionProvider {
+    name: string;
+    effect(): void;
+    setup(context: ViewExtensionContext): void;
+}
+/** DDD Templates section (Aggregate Design Canvas) — flag-gated (`ddd-templates`). */
+export declare class DddTemplatesViewExtension extends ViewExtensionProvider {
+    name: string;
+    effect(): void;
+}

package/dist/_pkgs/affine-gfx-ddd/view.js

@@ -0,0 +1,95 @@
+import { ViewExtensionProvider, } from '../affine-ext-loader/index.js';
+import { extendTemplateCategory } from '../affine-gfx-template/index.js';
+import { CoreDomainRendererExtension } from './core-domain/element-renderer';
+import { CoreDomainInteraction, CoreDomainView } from './core-domain/element-view';
+import { coreDomainToolbarExtension } from './core-domain/toolbar-config';
+import { contextMapEffects, coreDomainEffects, eventStormingEffects, } from './effects';
+import { aggregateTemplateCategory, contextMapTemplateCategory, coreDomainTemplateCategory, eventStormingTemplateCategory, } from './templates';
+import { contextMapSeniorTool, coreDomainSeniorTool, eventStormingSeniorTool, } from './toolbar/senior-tool';
+/** Event Storming — independently flag-gated (`ddd-event-storming`). */
+export class DddEventStormingViewExtension extends ViewExtensionProvider {
+    constructor() {
+        super(...arguments);
+        this.name = 'affine-ddd-event-storming-gfx';
+    }
+    effect() {
+        super.effect();
+        eventStormingEffects();
+    }
+    setup(context) {
+        super.setup(context);
+        if (this.isEdgeless(context.scope)) {
+            context.register(eventStormingSeniorTool);
+        }
+    }
+}
+/**
+ * Core Domain Chart rendering — ALWAYS registered, independent of any flag.
+ * Disabling `ddd-core-domain` hides only the senior toolbar button (see
+ * {@link DddCoreDomainViewExtension}); placed `coreDomain` elements must still
+ * paint, stay selectable, and keep their contextual toolbar, and Templates-
+ * panel insertion must still render them.
+ */
+export class DddCoreDomainRenderViewExtension extends ViewExtensionProvider {
+    constructor() {
+        super(...arguments);
+        this.name = 'affine-ddd-core-domain-render-gfx';
+    }
+    setup(context) {
+        super.setup(context);
+        context.register(CoreDomainView);
+        context.register(CoreDomainRendererExtension);
+        if (this.isEdgeless(context.scope)) {
+            context.register(CoreDomainInteraction);
+            context.register(coreDomainToolbarExtension);
+        }
+    }
+}
+/** Core Domain Chart senior button — independently flag-gated (`ddd-core-domain`). */
+export class DddCoreDomainViewExtension extends ViewExtensionProvider {
+    constructor() {
+        super(...arguments);
+        this.name = 'affine-ddd-core-domain-gfx';
+    }
+    effect() {
+        super.effect();
+        coreDomainEffects();
+    }
+    setup(context) {
+        super.setup(context);
+        if (this.isEdgeless(context.scope)) {
+            context.register(coreDomainSeniorTool);
+        }
+    }
+}
+/** Context Map — independently flag-gated (`ddd-context-map`). */
+export class DddContextMapViewExtension extends ViewExtensionProvider {
+    constructor() {
+        super(...arguments);
+        this.name = 'affine-ddd-context-map-gfx';
+    }
+    effect() {
+        super.effect();
+        contextMapEffects();
+    }
+    setup(context) {
+        super.setup(context);
+        if (this.isEdgeless(context.scope)) {
+            context.register(contextMapSeniorTool);
+        }
+    }
+}
+/** DDD Templates section (Aggregate Design Canvas) — flag-gated (`ddd-templates`). */
+export class DddTemplatesViewExtension extends ViewExtensionProvider {
+    constructor() {
+        super(...arguments);
+        this.name = 'affine-ddd-templates';
+    }
+    effect() {
+        super.effect();
+        extendTemplateCategory(eventStormingTemplateCategory);
+        extendTemplateCategory(coreDomainTemplateCategory);
+        extendTemplateCategory(contextMapTemplateCategory);
+        extendTemplateCategory(aggregateTemplateCategory);
+    }
+}

package/dist/_pkgs/affine-gfx-mindmap/index.d.ts

@@ -2,6 +2,7 @@ export * from './adapter';
 export * from './element-renderer';
 export * from './indicator-overlay';
 export * from './interactivity';
+export * from './templates';
 export * from './toolbar/config';
 export * from './toolbar/senior-tool';
 export * from './utils';

package/dist/_pkgs/affine-gfx-mindmap/index.js

@@ -2,6 +2,7 @@ export * from './adapter';
 export * from './element-renderer';
 export * from './indicator-overlay';
 export * from './interactivity';
+export * from './templates';
 export * from './toolbar/config';
 export * from './toolbar/senior-tool';
 export * from './utils';

package/dist/_pkgs/affine-gfx-mindmap/templates/index.d.ts

@@ -0,0 +1,2 @@
+import { type TemplateCategory } from '../../affine-gfx-template/index.js';
+export declare const mindmapTemplateCategory: TemplateCategory;

package/dist/_pkgs/affine-gfx-mindmap/templates/index.js

@@ -0,0 +1,28 @@
+import { makeTemplateSnapshot, } from '../../affine-gfx-template/index.js';
+/**
+ * Mindmap starter templates — one per built-in style. Captured as real
+ * serialized mindmaps (the element plus its node shapes) so they round-trip
+ * through the Templates-panel insert path; the id-regeneration middleware
+ * (replaceIdMiddleware) remaps the mindmap node-id references on insert.
+ */
+function tpl(name, preview, elements) {
+    return {
+        name,
+        type: 'template',
+        preview,
+        content: makeTemplateSnapshot(elements, name),
+    };
+}
+const STYLE_1 = { "1Y2vfnrsLJ": { "index": "a0", "seed": 1700105571, "fillColor": "#ffffff", "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontWeight": "600", "maxWidth": false, "padding": [11, 22], "radius": 8, "rotate": 0, "roughness": 1.4, "shadow": { "offsetX": 0, "offsetY": 6, "blur": 12, "color": "rgba(0, 0, 0, 0.14)" }, "shapeStyle": "General", "shapeType": "rect", "strokeColor": "#53b2ef", "strokeStyle": "solid", "strokeWidth": 4, "text": { "affine:surface:text": true, "delta": [{ "insert": "Mind Map" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[0,0,136.20703125,45]", "type": "shape", "id": "1Y2vfnrsLJ" }, "K_WWv7xJKi": { "index": "a0", "seed": 1580354321, "fillColor": "#ffffff", "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, "fontWeight": "500", "maxWidth": false, "padding": [6, 22], "radius": 8, "rotate": 0, "roughness": 1.4, "shadow": { "offsetX": 0, "offsetY": 6, "blur": 12, "color": "rgba(0, 0, 0, 0.14)" }, "shapeStyle": "General", "shapeType": "rect", "strokeColor": "#6e52df", "strokeStyle": "solid", "strokeWidth": 3, "text": { "affine:surface:text": true, "delta": [{ "insert": "Topic 1" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[336.20703125,-67.5,94.6953125,30]", "type": "shape", "id": "K_WWv7xJKi" }, "7fO_u4_Elm": { "index": "a0", "seed": 1196740856, "fillColor": "#ffffff", "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, "fontWeight": "500", "maxWidth": false, "padding": [6, 22], "radius": 8, "rotate": 0, "roughness": 1.4, "shadow": { "offsetX": 0, "offsetY": 6, "blur": 12, "color": "rgba(0, 0, 0, 0.14)" }, "shapeStyle": "General", "shapeType": "rect", "strokeColor": "#e96cab", "strokeStyle": "solid", "strokeWidth": 3, "text": { "affine:surface:text": true, "delta": [{ "insert": "Topic 2" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[336.20703125,7.5,94.6953125,30]", "type": "shape", "id": "7fO_u4_Elm" }, "Lza2YDXgkV": { "index": "a0", "seed": 981612871, "fillColor": "#ffffff", "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, "fontWeight": "500", "maxWidth": false, "padding": [6, 22], "radius": 8, "rotate": 0, "roughness": 1.4, "shadow": { "offsetX": 0, "offsetY": 6, "blur": 12, "color": "rgba(0, 0, 0, 0.14)" }, "shapeStyle": "General", "shapeType": "rect", "strokeColor": "#ff8c38", "strokeStyle": "solid", "strokeWidth": 3, "text": { "affine:surface:text": true, "delta": [{ "insert": "Topic 3" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[336.20703125,82.5,94.6953125,30]", "type": "shape", "id": "Lza2YDXgkV" }, "Gsko87TmXj": { "index": "a0", "seed": 871727345, "children": { "affine:surface:ymap": true, "json": { "1Y2vfnrsLJ": { "index": "a0" }, "K_WWv7xJKi": { "index": "a0", "parent": "1Y2vfnrsLJ" }, "7fO_u4_Elm": { "index": "a1", "parent": "1Y2vfnrsLJ" }, "Lza2YDXgkV": { "index": "a2", "parent": "1Y2vfnrsLJ" } } }, "layoutType": 0, "style": 1, "type": "mindmap", "id": "Gsko87TmXj" } };
+const STYLE_2 = { "kPwf_uD4jZ": { "index": "a0", "seed": 1047170436, "fillColor": "#fcd34d", "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 18, "fontWeight": "600", "maxWidth": false, "padding": [11, 22], "radius": 3, "rotate": 0, "roughness": 1.4, "shadow": { "blur": 0, "offsetX": 3, "offsetY": 3, "color": { "dark": "#ffffff", "light": "#000000" } }, "shapeStyle": "General", "shapeType": "rect", "strokeColor": { "dark": "#ffffff", "light": "#000000" }, "strokeStyle": "solid", "strokeWidth": 3, "text": { "affine:surface:text": true, "delta": [{ "insert": "Mind Map" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[0,0,126.986328125,42.7]", "type": "shape", "id": "kPwf_uD4jZ" }, "zwZHwYXnAG": { "index": "a0", "seed": 79321525, "fillColor": "#84cfff", "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, "fontWeight": "600", "maxWidth": false, "padding": [6, 22], "radius": 3, "rotate": 0, "roughness": 1.4, "shadow": { "blur": 0, "offsetX": 3, "offsetY": 3, "color": { "dark": "#ffffff", "light": "#000000" } }, "shapeStyle": "General", "shapeType": "rect", "strokeColor": { "dark": "#ffffff", "light": "#000000" }, "strokeStyle": "solid", "strokeWidth": 3, "text": { "affine:surface:text": true, "delta": [{ "insert": "Topic 1" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[326.986328125,-69.25,98.8203125,30.400000000000002]", "type": "shape", "id": "zwZHwYXnAG" }, "VIz858biOY": { "index": "a0", "seed": 1187771384, "fillColor": "#84cfff", "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, "fontWeight": "600", "maxWidth": false, "padding": [6, 22], "radius": 3, "rotate": 0, "roughness": 1.4, "shadow": { "blur": 0, "offsetX": 3, "offsetY": 3, "color": { "dark": "#ffffff", "light": "#000000" } }, "shapeStyle": "General", "shapeType": "rect", "strokeColor": { "dark": "#ffffff", "light": "#000000" }, "strokeStyle": "solid", "strokeWidth": 3, "text": { "affine:surface:text": true, "delta": [{ "insert": "Topic 2" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[326.986328125,6.150000000000006,98.8203125,30.400000000000002]", "type": "shape", "id": "VIz858biOY" }, "DPMWxLX_cs": { "index": "a0", "seed": 1192286986, "fillColor": "#84cfff", "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, "fontWeight": "600", "maxWidth": false, "padding": [6, 22], "radius": 3, "rotate": 0, "roughness": 1.4, "shadow": { "blur": 0, "offsetX": 3, "offsetY": 3, "color": { "dark": "#ffffff", "light": "#000000" } }, "shapeStyle": "General", "shapeType": "rect", "strokeColor": { "dark": "#ffffff", "light": "#000000" }, "strokeStyle": "solid", "strokeWidth": 3, "text": { "affine:surface:text": true, "delta": [{ "insert": "Topic 3" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[326.986328125,81.55000000000001,98.8203125,30.400000000000002]", "type": "shape", "id": "DPMWxLX_cs" }, "nMfQ2gc-O2": { "index": "a0", "seed": 1612961410, "children": { "affine:surface:ymap": true, "json": { "kPwf_uD4jZ": { "index": "a0" }, "zwZHwYXnAG": { "index": "a0", "parent": "kPwf_uD4jZ" }, "VIz858biOY": { "index": "a1", "parent": "kPwf_uD4jZ" }, "DPMWxLX_cs": { "index": "a2", "parent": "kPwf_uD4jZ" } } }, "layoutType": 0, "style": 2, "type": "mindmap", "id": "nMfQ2gc-O2" } };
+const STYLE_3 = { "ZIw4rmcVBn": { "index": "a0", "seed": 880670515, "fillColor": "#fcd34d", "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, "fontWeight": "500", "maxWidth": false, "padding": [10, 22], "radius": 10, "rotate": 0, "roughness": 1.4, "shadow": { "blur": 12, "offsetX": 0, "offsetY": 0, "color": "rgba(66, 65, 73, 0.18)" }, "shapeStyle": "General", "shapeType": "rect", "strokeColor": "transparent", "strokeStyle": "solid", "strokeWidth": 0, "text": { "affine:surface:text": true, "delta": [{ "insert": "Mind Map" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[0,0,114.25,38]", "type": "shape", "id": "ZIw4rmcVBn" }, "dwRkKPG-3B": { "index": "a0", "seed": 125208616, "fillColor": "#ffffff", "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, "fontWeight": "500", "maxWidth": false, "padding": [6, 22], "radius": 10, "rotate": 0, "roughness": 1.4, "shadow": { "blur": 12, "offsetX": 0, "offsetY": 0, "color": "rgba(66, 65, 73, 0.18)" }, "shapeStyle": "General", "shapeType": "rect", "strokeColor": "#fcd34d", "strokeStyle": "solid", "strokeWidth": 2, "text": { "affine:surface:text": true, "delta": [{ "insert": "Topic 1" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[314.25,-71,94.6953125,30]", "type": "shape", "id": "dwRkKPG-3B" }, "c7LOmcZzw5": { "index": "a0", "seed": 1361083332, "fillColor": "#ffffff", "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, "fontWeight": "500", "maxWidth": false, "padding": [6, 22], "radius": 10, "rotate": 0, "roughness": 1.4, "shadow": { "blur": 12, "offsetX": 0, "offsetY": 0, "color": "rgba(66, 65, 73, 0.18)" }, "shapeStyle": "General", "shapeType": "rect", "strokeColor": "#fcd34d", "strokeStyle": "solid", "strokeWidth": 2, "text": { "affine:surface:text": true, "delta": [{ "insert": "Topic 2" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[314.25,4,94.6953125,30]", "type": "shape", "id": "c7LOmcZzw5" }, "FE0kD_GYHx": { "index": "a0", "seed": 774157552, "fillColor": "#ffffff", "filled": true, "fontFamily": "blocksuite:surface:Poppins", "fontSize": 16, "fontWeight": "500", "maxWidth": false, "padding": [6, 22], "radius": 10, "rotate": 0, "roughness": 1.4, "shadow": { "blur": 12, "offsetX": 0, "offsetY": 0, "color": "rgba(66, 65, 73, 0.18)" }, "shapeStyle": "General", "shapeType": "rect", "strokeColor": "#fcd34d", "strokeStyle": "solid", "strokeWidth": 2, "text": { "affine:surface:text": true, "delta": [{ "insert": "Topic 3" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[314.25,79,94.6953125,30]", "type": "shape", "id": "FE0kD_GYHx" }, "wR3Bc0vWc_": { "index": "a0", "seed": 660798577, "children": { "affine:surface:ymap": true, "json": { "ZIw4rmcVBn": { "index": "a0" }, "dwRkKPG-3B": { "index": "a0", "parent": "ZIw4rmcVBn" }, "c7LOmcZzw5": { "index": "a1", "parent": "ZIw4rmcVBn" }, "FE0kD_GYHx": { "index": "a2", "parent": "ZIw4rmcVBn" } } }, "layoutType": 0, "style": 3, "type": "mindmap", "id": "wR3Bc0vWc_" } };
+const STYLE_4 = { "EyUas98ZAK": { "index": "a0", "seed": 1433519934, "color": { "dark": "#ffffff", "light": "#000000" }, "fillColor": "transparent", "filled": true, "fontFamily": "blocksuite:surface:Kalam", "fontSize": 22, "fontWeight": "700", "maxWidth": false, "padding": [0, 10], "radius": 0, "rotate": 0, "roughness": 1.4, "shadow": null, "shapeStyle": "General", "shapeType": "rect", "strokeColor": "transparent", "strokeStyle": "solid", "strokeWidth": 0, "text": { "affine:surface:text": true, "delta": [{ "insert": "Mind Map" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[0,0,121.427734375,26]", "type": "shape", "id": "EyUas98ZAK" }, "8AX6hJveTK": { "index": "a0", "seed": 1032075934, "color": { "dark": "#ffffff", "light": "#000000" }, "fillColor": "transparent", "filled": true, "fontFamily": "blocksuite:surface:Kalam", "fontSize": 18, "fontWeight": "700", "maxWidth": false, "padding": [1.5, 10], "radius": 0, "rotate": 0, "roughness": 1.4, "shadow": null, "shapeStyle": "General", "shapeType": "rect", "strokeColor": "transparent", "strokeStyle": "solid", "strokeWidth": 0, "text": { "affine:surface:text": true, "delta": [{ "insert": "Topic 1" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[321.427734375,-68.40909090909092,81.6728515625,24.272727272727273]", "type": "shape", "id": "8AX6hJveTK" }, "sk6jIhglvv": { "index": "a0", "seed": 1054014636, "color": { "dark": "#ffffff", "light": "#000000" }, "fillColor": "transparent", "filled": true, "fontFamily": "blocksuite:surface:Kalam", "fontSize": 18, "fontWeight": "700", "maxWidth": false, "padding": [1.5, 10], "radius": 0, "rotate": 0, "roughness": 1.4, "shadow": null, "shapeStyle": "General", "shapeType": "rect", "strokeColor": "transparent", "strokeStyle": "solid", "strokeWidth": 0, "text": { "affine:surface:text": true, "delta": [{ "insert": "Topic 2" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[321.427734375,0.8636363636363598,81.6728515625,24.272727272727273]", "type": "shape", "id": "sk6jIhglvv" }, "ua9jCGGYRE": { "index": "a0", "seed": 2140202745, "color": { "dark": "#ffffff", "light": "#000000" }, "fillColor": "transparent", "filled": true, "fontFamily": "blocksuite:surface:Kalam", "fontSize": 18, "fontWeight": "700", "maxWidth": false, "padding": [1.5, 10], "radius": 0, "rotate": 0, "roughness": 1.4, "shadow": null, "shapeStyle": "General", "shapeType": "rect", "strokeColor": "transparent", "strokeStyle": "solid", "strokeWidth": 0, "text": { "affine:surface:text": true, "delta": [{ "insert": "Topic 3" }] }, "textResizing": 0, "vertices": null, "isClosed": true, "smoothFlags": null, "controlPoints": null, "xywh": "[321.427734375,70.13636363636364,81.6728515625,24.272727272727273]", "type": "shape", "id": "ua9jCGGYRE" }, "nqaFHOZEOd": { "index": "a0", "seed": 664701650, "children": { "affine:surface:ymap": true, "json": { "EyUas98ZAK": { "index": "a0" }, "8AX6hJveTK": { "index": "a0", "parent": "EyUas98ZAK" }, "sk6jIhglvv": { "index": "a1", "parent": "EyUas98ZAK" }, "ua9jCGGYRE": { "index": "a2", "parent": "EyUas98ZAK" } } }, "layoutType": 0, "style": 4, "type": "mindmap", "id": "nqaFHOZEOd" } };
+export const mindmapTemplateCategory = {
+    name: 'Mind Map',
+    templates: [
+        tpl('Mind Map — Style 1', `<svg width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg" fill="none"><rect x="8" y="33" width="40" height="16" rx="5" fill="#53b2ef" fill-opacity="0.18" stroke="#53b2ef" stroke-width="1.6"/><g stroke="#53b2ef" stroke-width="1.4"><path d="M48 41 H72 M72 41 V20 M72 41 V62 M72 20 H96 M72 62 H96"/></g><g fill="#fff" stroke="#53b2ef" stroke-width="1.4"><rect x="96" y="13" width="31" height="13" rx="4"/><rect x="96" y="34" width="31" height="13" rx="4"/><rect x="96" y="55" width="31" height="13" rx="4"/></g></svg>`, STYLE_1),
+        tpl('Mind Map — Style 2', `<svg width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg" fill="none"><rect x="8" y="33" width="40" height="16" rx="5" fill="#53b2ef" fill-opacity="0.18" stroke="#53b2ef" stroke-width="1.6"/><g stroke="#53b2ef" stroke-width="1.4"><path d="M48 41 H72 M72 41 V20 M72 41 V62 M72 20 H96 M72 62 H96"/></g><g fill="#fff" stroke="#53b2ef" stroke-width="1.4"><rect x="96" y="13" width="31" height="13" rx="4"/><rect x="96" y="34" width="31" height="13" rx="4"/><rect x="96" y="55" width="31" height="13" rx="4"/></g></svg>`, STYLE_2),
+        tpl('Mind Map — Style 3', `<svg width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg" fill="none"><rect x="8" y="33" width="40" height="16" rx="5" fill="#53b2ef" fill-opacity="0.18" stroke="#53b2ef" stroke-width="1.6"/><g stroke="#53b2ef" stroke-width="1.4"><path d="M48 41 H72 M72 41 V20 M72 41 V62 M72 20 H96 M72 62 H96"/></g><g fill="#fff" stroke="#53b2ef" stroke-width="1.4"><rect x="96" y="13" width="31" height="13" rx="4"/><rect x="96" y="34" width="31" height="13" rx="4"/><rect x="96" y="55" width="31" height="13" rx="4"/></g></svg>`, STYLE_3),
+        tpl('Mind Map — Style 4', `<svg width="100%" height="100%" viewBox="0 0 135 80" xmlns="http://www.w3.org/2000/svg" fill="none"><rect x="8" y="33" width="40" height="16" rx="5" fill="#53b2ef" fill-opacity="0.18" stroke="#53b2ef" stroke-width="1.6"/><g stroke="#53b2ef" stroke-width="1.4"><path d="M48 41 H72 M72 41 V20 M72 41 V62 M72 20 H96 M72 62 H96"/></g><g fill="#fff" stroke="#53b2ef" stroke-width="1.4"><rect x="96" y="13" width="31" height="13" rx="4"/><rect x="96" y="34" width="31" height="13" rx="4"/><rect x="96" y="55" width="31" height="13" rx="4"/></g></svg>`, STYLE_4),
+    ],
+};

package/dist/_pkgs/affine-gfx-mindmap/toolbar/mindmap-menu.d.ts

@@ -34,6 +34,9 @@ export declare class EdgelessMindmapMenu extends EdgelessMindmapMenu_base {
     render(): TemplateResult<1>;
     updated(changedProperties: Map<PropertyKey, unknown>): void;
     accessor model: BlockModel;
+    /** Which sections to render: the "Others" button shows media + text, the
+     * dedicated "Mind Map" button shows the mindmap styles + import. */
+    accessor variant: 'mindmap' | 'other';
     accessor onActiveStyleChange: (style: MindmapStyle) => void;
     accessor onImportMindMap: (bound: Bound) => Promise<void>;
     accessor std: BlockStdScope;

package/dist/_pkgs/affine-gfx-mindmap/toolbar/mindmap-menu.js

@@ -60,6 +60,9 @@ let EdgelessMindmapMenu = (() => {
     let _model_decorators;
     let _model_initializers = [];
     let _model_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
     let _onActiveStyleChange_decorators;
     let _onActiveStyleChange_initializers = [];
     let _onActiveStyleChange_extraInitializers = [];
@@ -73,10 +76,12 @@ let EdgelessMindmapMenu = (() => {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _model_decorators = [consume({ context: modelContext })];
+            _variant_decorators = [property({ attribute: false })];
             _onActiveStyleChange_decorators = [property({ attribute: false })];
             _onImportMindMap_decorators = [property({ attribute: false })];
             _std_decorators = [consume({ context: stdContext })];
             __esDecorate(this, null, _model_decorators, { kind: "accessor", name: "model", static: false, private: false, access: { has: obj => "model" in obj, get: obj => obj.model, set: (obj, value) => { obj.model = value; } }, metadata: _metadata }, _model_initializers, _model_extraInitializers);
+            __esDecorate(this, null, _variant_decorators, { kind: "accessor", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
             __esDecorate(this, null, _onActiveStyleChange_decorators, { kind: "accessor", name: "onActiveStyleChange", static: false, private: false, access: { has: obj => "onActiveStyleChange" in obj, get: obj => obj.onActiveStyleChange, set: (obj, value) => { obj.onActiveStyleChange = value; } }, metadata: _metadata }, _onActiveStyleChange_initializers, _onActiveStyleChange_extraInitializers);
             __esDecorate(this, null, _onImportMindMap_decorators, { kind: "accessor", name: "onImportMindMap", static: false, private: false, access: { has: obj => "onImportMindMap" in obj, get: obj => obj.onImportMindMap, set: (obj, value) => { obj.onImportMindMap = value; } }, metadata: _metadata }, _onImportMindMap_initializers, _onImportMindMap_extraInitializers);
             __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
@@ -277,100 +282,104 @@ let EdgelessMindmapMenu = (() => {
             const isDraggingMedia = draggingElement?.data?.type === 'media';
             const isDraggingText = draggingElement?.data?.type === 'text';
             const showNextText = dragOut && !cancelled;
-            return html `<edgeless-slide-menu .height=${'64px'}>
-      <div class="text-and-mindmap">
-        <div class="media-item">
-          ${isDraggingMedia
-                ? html `<button
-                class="next"
-                style="transform: translateY(${showNextText ? 0 : 64}px)"
+            // The menu is shared by two senior buttons: the "Others" button (media +
+            // text) and the dedicated "Mind Map" button (mindmap styles + import).
+            const otherSection = this.variant === 'other'
+                ? html `
+            <div class="media-item">
+              ${isDraggingMedia
+                    ? html `<button
+                    class="next"
+                    style="transform: translateY(${showNextText ? 0 : 64}px)"
+                  >
+                    ${mediaItem.icon}
+                  </button>`
+                    : nothing}
+              <button
+                style="opacity: ${isDraggingMedia ? 0 : 1}"
+                @mousedown=${(e) => this.draggableController.onMouseDown(e, {
+                    preview: mediaItem.icon,
+                    data: mediaItem,
+                })}
+                @touchstart=${(e) => this.draggableController.onTouchStart(e, {
+                    preview: mediaItem.icon,
+                    data: mediaItem,
+                })}
               >
                 ${mediaItem.icon}
-              </button>`
-                : nothing}
-          <button
-            style="opacity: ${isDraggingMedia ? 0 : 1}"
-            @mousedown=${(e) => this.draggableController.onMouseDown(e, {
-                preview: mediaItem.icon,
-                data: mediaItem,
-            })}
-            @touchstart=${(e) => this.draggableController.onTouchStart(e, {
-                preview: mediaItem.icon,
-                data: mediaItem,
-            })}
-          >
-            ${mediaItem.icon}
-          </button>
-          <affine-tooltip tip-position="top" .offset=${12}>
-            <affine-tooltip-content-with-shortcut
-              data-tip="${'Add media'}"
-            ></affine-tooltip-content-with-shortcut>
-          </affine-tooltip>
-        </div>
-        <div class="thin-divider"></div>
-        <div class="text-item">
-          ${isDraggingText
-                ? html `<button
-                class="next"
-                style="transform: translateY(${showNextText ? 0 : 64}px)"
+              </button>
+              <affine-tooltip tip-position="top" .offset=${12}>
+                <affine-tooltip-content-with-shortcut
+                  data-tip="${'Add media'}"
+                ></affine-tooltip-content-with-shortcut>
+              </affine-tooltip>
+            </div>
+            <div class="thin-divider"></div>
+            <div class="text-item">
+              ${isDraggingText
+                    ? html `<button
+                    class="next"
+                    style="transform: translateY(${showNextText ? 0 : 64}px)"
+                  >
+                    ${textItem.icon}
+                  </button>`
+                    : nothing}
+              <button
+                style="opacity: ${isDraggingText ? 0 : 1}"
+                @mousedown=${(e) => this.draggableController.onMouseDown(e, {
+                    preview: textItem.icon,
+                    data: textItem,
+                })}
+                @touchstart=${(e) => this.draggableController.onTouchStart(e, {
+                    preview: textItem.icon,
+                    data: textItem,
+                })}
               >
                 ${textItem.icon}
-              </button>`
-                : nothing}
-          <button
-            style="opacity: ${isDraggingText ? 0 : 1}"
-            @mousedown=${(e) => this.draggableController.onMouseDown(e, {
-                preview: textItem.icon,
-                data: textItem,
-            })}
-            @touchstart=${(e) => this.draggableController.onTouchStart(e, {
-                preview: textItem.icon,
-                data: textItem,
-            })}
-          >
-            ${textItem.icon}
-          </button>
-          <affine-tooltip tip-position="top" .offset=${12}>
-            <affine-tooltip-content-with-shortcut
-              data-tip="${'Edgeless Text'}"
-              data-shortcup="${'T'}"
-            ></affine-tooltip-content-with-shortcut>
-          </affine-tooltip>
-        </div>
-        <div class="thin-divider"></div>
-        <!-- mind map -->
-        ${repeat(this.mindMaps, mindMap => {
-                const isDraggingMindMap = draggingElement?.data?.type !== 'text';
-                const draggingEle = draggingElement?.data;
-                const isBeingDragged = isDraggingMindMap && draggingEle?.style === mindMap.style;
-                const showNext = dragOut && !cancelled;
-                const isActive = this._style$.value === mindMap.style;
-                return html `
+              </button>
+              <affine-tooltip tip-position="top" .offset=${12}>
+                <affine-tooltip-content-with-shortcut
+                  data-tip="${'Edgeless Text'}"
+                  data-shortcup="${'T'}"
+                ></affine-tooltip-content-with-shortcut>
+              </affine-tooltip>
+            </div>
+          `
+                : nothing;
+            const mindmapSection = this.variant === 'mindmap'
+                ? html `
+            ${repeat(this.mindMaps, mindMap => {
+                    const isDraggingMindMap = draggingElement?.data?.type !== 'text';
+                    const draggingEle = draggingElement?.data;
+                    const isBeingDragged = isDraggingMindMap && draggingEle?.style === mindMap.style;
+                    const showNext = dragOut && !cancelled;
+                    const isActive = this._style$.value === mindMap.style;
+                    return html `
             <div class="mindmap-item" data-is-active=${isActive}>
               ${isBeingDragged
-                    ? html `<button
+                        ? html `<button
                     style="transform: translateY(${showNext ? 0 : 64}px)"
                     class="next"
                   >
                     ${mindMap.icon}
                   </button>`
-                    : nothing}
+                        : nothing}
               <button
                 style="opacity: ${isBeingDragged ? 0 : 1}"
                 @mousedown=${(e) => {
-                    this.draggableController.onMouseDown(e, {
-                        preview: mindMap.icon,
-                        data: mindMap,
-                        standardWidth: 350,
-                    });
-                }}
+                        this.draggableController.onMouseDown(e, {
+                            preview: mindMap.icon,
+                            data: mindMap,
+                            standardWidth: 350,
+                        });
+                    }}
                 @touchstart=${(e) => {
-                    this.draggableController.onTouchStart(e, {
-                        preview: mindMap.icon,
-                        data: mindMap,
-                        standardWidth: 350,
-                    });
-                }}
+                        this.draggableController.onTouchStart(e, {
+                            preview: mindMap.icon,
+                            data: mindMap,
+                            standardWidth: 350,
+                        });
+                    }}
                 @click=${() => this.onActiveStyleChange?.(mindMap.style)}
               >
                 ${mindMap.icon}
@@ -383,13 +392,16 @@ let EdgelessMindmapMenu = (() => {
               </affine-tooltip>
             </div>
           `;
-            })}
-        ${this.std.store
-                .get(FeatureFlagService)
-                .getFlag('enable_mind_map_import')
-                ? this._importMindMapEntry()
-                : nothing}
-      </div>
+                })}
+            ${this.std.store
+                    .get(FeatureFlagService)
+                    .getFlag('enable_mind_map_import')
+                    ? this._importMindMapEntry()
+                    : nothing}
+          `
+                : nothing;
+            return html `<edgeless-slide-menu .height=${'64px'}>
+      <div class="text-and-mindmap">${otherSection}${mindmapSection}</div>
     </edgeless-slide-menu>`;
         }
         updated(changedProperties) {
@@ -400,6 +412,11 @@ let EdgelessMindmapMenu = (() => {
         #model_accessor_storage;
         get model() { return this.#model_accessor_storage; }
         set model(value) { this.#model_accessor_storage = value; }
+        #variant_accessor_storage;
+        /** Which sections to render: the "Others" button shows media + text, the
+         * dedicated "Mind Map" button shows the mindmap styles + import. */
+        get variant() { return this.#variant_accessor_storage; }
+        set variant(value) { this.#variant_accessor_storage = value; }
         #onActiveStyleChange_accessor_storage;
         get onActiveStyleChange() { return this.#onActiveStyleChange_accessor_storage; }
         set onActiveStyleChange(value) { this.#onActiveStyleChange_accessor_storage = value; }
@@ -417,7 +434,8 @@ let EdgelessMindmapMenu = (() => {
             });
             this.type = EmptyTool;
             this.#model_accessor_storage = __runInitializers(this, _model_initializers, void 0);
-            this.#onActiveStyleChange_accessor_storage = (__runInitializers(this, _model_extraInitializers), __runInitializers(this, _onActiveStyleChange_initializers, void 0));
+            this.#variant_accessor_storage = (__runInitializers(this, _model_extraInitializers), __runInitializers(this, _variant_initializers, 'mindmap'));
+            this.#onActiveStyleChange_accessor_storage = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _onActiveStyleChange_initializers, void 0));
             this.#onImportMindMap_accessor_storage = (__runInitializers(this, _onActiveStyleChange_extraInitializers), __runInitializers(this, _onImportMindMap_initializers, void 0));
             this.#std_accessor_storage = (__runInitializers(this, _onImportMindMap_extraInitializers), __runInitializers(this, _std_initializers, void 0));
             __runInitializers(this, _std_extraInitializers);