@formicoidea/labre-framework-edgy 0.23.1 → 0.23.2

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/{dist/toolbar/senior-tool.js → src/toolbar/senior-tool.ts}

@@ -1,11 +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>`,
-    };
-});
-//# sourceMappingURL=senior-tool.js.map
+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);
+    }
+  }
+}

package/dist/consts.d.ts

@@ -1,47 +0,0 @@
-/**
- * Visual constants for the EDGY "Enterprise Design Facets" diagram.
- *
- * The whole diagram is authored in a FIXED reference coordinate space
- * (`REF_W × REF_H`, matching the validated mockup) and the renderer scales it
- * uniformly to the element bounds — so the three circles always stay circular
- * and the pictos/labels keep their relative proportions at any size.
- */
-/** Reference design size (the validated mockup canvas). */
-export declare const REF_W = 680;
-export declare const REF_H = 400;
-/** Circle geometry in reference coords. */
-export declare const VENN: {
-    readonly cx: number;
-    readonly cy: 176;
-    /** Circle radius. */
-    readonly R: 95;
-    /** Distance of each circle centre from the diagram centre. */
-    readonly r0: 56;
-};
-/** Saturated facet + intersection colours (faithful to the official icons). */
-export declare const COLORS: {
-    readonly identity: "#00ea4e";
-    readonly architecture: "#034cee";
-    readonly experience: "#ff0056";
-    readonly organisation: "#00caf4";
-    readonly brand: "#ffa500";
-    readonly product: "#cf00ff";
-    readonly center: "#ffffff";
-    readonly separator: "#ffffff";
-    readonly picto: "#ffffff";
-};
-/** Fixed picto line width + label font. */
-export declare const PICTO_STROKE = 2.4;
-export declare const LABEL_FONT_SIZE = 15;
-export declare const FONT_FAMILY = "Inter, sans-serif";
-/**
- * Uniform fit of the reference design into an element of size `w × h`: the
- * scale factor plus the centering offsets (letterboxed). Shared by the renderer
- * (to draw) and the view (to map clicks back into reference coords).
- */
-export declare function refScale(w: number, h: number): {
-    s: number;
-    ox: number;
-    oy: number;
-};
-//# sourceMappingURL=consts.d.ts.map

package/dist/descriptor.d.ts

@@ -1,7 +0,0 @@
-import { EdgyViewExtension } from './view.js';
-
-export declare const edgyFramework: {
-  readonly flag: 'edgy';
-  readonly telemetry: 'edgy';
-  readonly viewExtension: typeof EdgyViewExtension;
-};

package/dist/effects.d.ts

@@ -1,10 +0,0 @@
-import { EdgelessEdgyMenu } from './toolbar/edgy-menu';
-import { EdgelessEdgySeniorButton } from './toolbar/edgy-senior-button';
-export declare function effects(): void;
-declare global {
-    interface HTMLElementTagNameMap {
-        'edgeless-edgy-menu': EdgelessEdgyMenu;
-        'edgeless-edgy-senior-button': EdgelessEdgySeniorButton;
-    }
-}
-//# sourceMappingURL=effects.d.ts.map

package/dist/effects.js

@@ -1,7 +0,0 @@
-import { EdgelessEdgyMenu } from './toolbar/edgy-menu';
-import { EdgelessEdgySeniorButton } from './toolbar/edgy-senior-button';
-export function effects() {
-    customElements.define('edgeless-edgy-menu', EdgelessEdgyMenu);
-    customElements.define('edgeless-edgy-senior-button', EdgelessEdgySeniorButton);
-}
-//# sourceMappingURL=effects.js.map

package/dist/element-renderer.d.ts

@@ -1,17 +0,0 @@
-import { type ElementRenderer } from '@formicoidea/labre-core/blocks/surface';
-import type { EdgyFacetsElementModel } from '@formicoidea/labre-core/model';
-/**
- * Canvas renderer for the EDGY Enterprise Design Facets diagram — reproduces the
- * validated mockup: three overlapping circles (Identity / Architecture /
- * Experience), the three pairwise intersection regions (Organisation / Brand /
- * Product) painted by clip-intersection, the white centre, the six white
- * pictograms and the three facet labels placed outside the circles.
- *
- * The whole diagram is drawn in the fixed reference space and scaled uniformly
- * to the element bounds so the circles never distort.
- */
-export declare const edgy: ElementRenderer<EdgyFacetsElementModel>;
-export declare const EdgyFacetsRendererExtension: import("@formicoidea/labre-core/store").ExtensionType & {
-    identifier: import("@formicoidea/labre-core/global/di").ServiceIdentifier<ElementRenderer<EdgyFacetsElementModel>>;
-};
-//# sourceMappingURL=element-renderer.d.ts.map

package/dist/element-renderer.js

@@ -1,177 +0,0 @@
-import { ElementRendererExtension, } from '@formicoidea/labre-core/blocks/surface';
-import { COLORS, FONT_FAMILY, LABEL_FONT_SIZE, PICTO_STROKE, REF_H, REF_W, refScale, VENN, } from './consts';
-import { CIRCLE_A, CIRCLE_B, CIRCLE_C, facetLabelAnchors } from './label-layout';
-/**
- * Canvas renderer for the EDGY Enterprise Design Facets diagram — reproduces the
- * validated mockup: three overlapping circles (Identity / Architecture /
- * Experience), the three pairwise intersection regions (Organisation / Brand /
- * Product) painted by clip-intersection, the white centre, the six white
- * pictograms and the three facet labels placed outside the circles.
- *
- * The whole diagram is drawn in the fixed reference space and scaled uniformly
- * to the element bounds so the circles never distort.
- */
-export const edgy = (model, ctx, matrix) => {
-    const [, , w, h] = model.deserializedXYWH;
-    const cx = w / 2;
-    const cy = h / 2;
-    ctx.setTransform(matrix.translateSelf(cx, cy).rotateSelf(model.rotate).translateSelf(-cx, -cy));
-    // Uniform fit of the reference design, centered (letterboxed).
-    const { s, ox, oy } = refScale(w, h);
-    ctx.translate(ox, oy);
-    ctx.scale(s, s);
-    const A = CIRCLE_A;
-    const B = CIRCLE_B;
-    const C = CIRCLE_C;
-    const R = VENN.R;
-    const disc = (c, color) => {
-        ctx.beginPath();
-        ctx.arc(c.x, c.y, R, 0, Math.PI * 2);
-        ctx.fillStyle = color;
-        ctx.fill();
-    };
-    // Paint the region common to every circle in `cs` (clip-intersection).
-    const inter = (cs, color) => {
-        ctx.save();
-        for (const c of cs) {
-            ctx.beginPath();
-            ctx.arc(c.x, c.y, R, 0, Math.PI * 2);
-            ctx.clip();
-        }
-        ctx.fillStyle = color;
-        ctx.fillRect(0, 0, REF_W, REF_H);
-        ctx.restore();
-    };
-    // ── Facets + intersections ──────────────────────────────────────────
-    disc(A, COLORS.identity);
-    disc(B, COLORS.architecture);
-    disc(C, COLORS.experience);
-    inter([A, B], COLORS.organisation);
-    inter([A, C], COLORS.brand);
-    inter([B, C], COLORS.product);
-    inter([A, B, C], COLORS.center);
-    // White separating outlines.
-    ctx.strokeStyle = COLORS.separator;
-    ctx.lineWidth = 2.5;
-    for (const c of [A, B, C]) {
-        ctx.beginPath();
-        ctx.arc(c.x, c.y, R, 0, Math.PI * 2);
-        ctx.stroke();
-    }
-    // ── White pictos ────────────────────────────────────────────────────
-    const pictoSetup = () => {
-        ctx.strokeStyle = COLORS.picto;
-        ctx.fillStyle = COLORS.picto;
-        ctx.lineWidth = PICTO_STROKE;
-        ctx.lineJoin = 'round';
-        ctx.lineCap = 'round';
-    };
-    const lens = (x, y) => {
-        pictoSetup();
-        ctx.beginPath();
-        ctx.arc(x, y, 10, 0, Math.PI * 2);
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(x + 7, y + 7);
-        ctx.lineTo(x + 15, y + 15);
-        ctx.stroke();
-    };
-    const house = (x, y) => {
-        pictoSetup();
-        ctx.beginPath();
-        ctx.moveTo(x - 11, y + 9);
-        ctx.lineTo(x - 11, y - 2);
-        ctx.lineTo(x, y - 11);
-        ctx.lineTo(x + 11, y - 2);
-        ctx.lineTo(x + 11, y + 9);
-        ctx.closePath();
-        ctx.stroke();
-    };
-    const heart = (x, y) => {
-        pictoSetup();
-        ctx.beginPath();
-        ctx.moveTo(x, y + 11);
-        ctx.bezierCurveTo(x - 14, y - 1, x - 9, y - 12, x, y - 4);
-        ctx.bezierCurveTo(x + 9, y - 12, x + 14, y - 1, x, y + 11);
-        ctx.closePath();
-        ctx.stroke();
-    };
-    const network = (x, y) => {
-        pictoSetup();
-        ctx.beginPath();
-        ctx.moveTo(x, y - 9);
-        ctx.lineTo(x - 9, y + 7);
-        ctx.lineTo(x + 9, y + 7);
-        ctx.closePath();
-        ctx.stroke();
-        for (const [px, py] of [
-            [x, y - 9],
-            [x - 9, y + 7],
-            [x + 9, y + 7],
-        ]) {
-            ctx.beginPath();
-            ctx.arc(px, py, 2.6, 0, Math.PI * 2);
-            ctx.fill();
-        }
-    };
-    const sun = (x, y) => {
-        pictoSetup();
-        ctx.beginPath();
-        ctx.arc(x, y, 6, 0, Math.PI * 2);
-        ctx.stroke();
-        for (let i = 0; i < 8; i++) {
-            const a = (i * Math.PI) / 4;
-            ctx.beginPath();
-            ctx.moveTo(x + Math.cos(a) * 9, y + Math.sin(a) * 9);
-            ctx.lineTo(x + Math.cos(a) * 12, y + Math.sin(a) * 12);
-            ctx.stroke();
-        }
-    };
-    const cube = (x, y) => {
-        pictoSetup();
-        const p = [
-            [x, y - 11],
-            [x + 10, y - 5],
-            [x + 10, y + 6],
-            [x, y + 12],
-            [x - 10, y + 6],
-            [x - 10, y - 5],
-        ];
-        ctx.beginPath();
-        p.forEach(([qx, qy], i) => (i ? ctx.lineTo(qx, qy) : ctx.moveTo(qx, qy)));
-        ctx.closePath();
-        ctx.stroke();
-        ctx.beginPath();
-        ctx.moveTo(x - 10, y - 5);
-        ctx.lineTo(x, y + 1);
-        ctx.lineTo(x + 10, y - 5);
-        ctx.moveTo(x, y + 1);
-        ctx.lineTo(x, y + 12);
-        ctx.stroke();
-    };
-    // Single-facet zone pictos.
-    lens(A.x - 30, A.y - 22);
-    house(B.x + 30, B.y - 22);
-    heart(C.x, C.y + 36);
-    // Intersection pictos at the validated sweet spots.
-    network(VENN.cx, 114);
-    sun(VENN.cx - 58, 206);
-    cube(VENN.cx + 58, 206);
-    // ── Labels (outside the circles) ────────────────────────────────────
-    if (model.showLabels) {
-        ctx.font = `500 ${LABEL_FONT_SIZE}px ${FONT_FAMILY}`;
-        ctx.textBaseline = 'middle';
-        const colorByField = {
-            identityLabel: COLORS.identity,
-            architectureLabel: COLORS.architecture,
-            experienceLabel: COLORS.experience,
-        };
-        for (const { field, text, x, y, align } of facetLabelAnchors(model)) {
-            ctx.fillStyle = colorByField[field];
-            ctx.textAlign = align;
-            ctx.fillText(text, x, y);
-        }
-    }
-};
-export const EdgyFacetsRendererExtension = ElementRendererExtension('edgy', edgy);
-//# sourceMappingURL=element-renderer.js.map

package/dist/element-view.d.ts

@@ -1,19 +0,0 @@
-import type { EdgyFacetsElementModel } from '@formicoidea/labre-core/model';
-import { GfxElementModelView } from '@formicoidea/labre-core/std/gfx';
-export declare class EdgyView extends GfxElementModelView<EdgyFacetsElementModel> {
-    static type: string;
-    /** The in-place `<input>` used to edit a label, or null when idle. */
-    private _labelEditor;
-    onCreated(): void;
-    onDestroyed(): void;
-    /** Double-click on a label → edit its text in place. */
-    private _onDblClick;
-    private _openLabelEditor;
-    private _closeLabelEditor;
-}
-/**
- * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
- * true (toggled from the toolbar). Moving/selecting stays available throughout.
- */
-export declare const EdgyInteraction: import("@formicoidea/labre-core/store").ExtensionType;
-//# sourceMappingURL=element-view.d.ts.map

package/dist/element-view.js

@@ -1,123 +0,0 @@
-import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
-import { rotatePoint } from '@formicoidea/labre-core/global/gfx';
-import { GfxElementModelView, GfxViewInteractionExtension, } from '@formicoidea/labre-core/std/gfx';
-import { refScale } from './consts';
-import { getEdgyLabelHits, hitTestEdgyLabel, } from './label-layout';
-export class EdgyView extends GfxElementModelView {
-    constructor() {
-        super(...arguments);
-        /** The in-place `<input>` used to edit a label, or null when idle. */
-        this._labelEditor = null;
-    }
-    static { this.type = 'edgy'; }
-    onCreated() {
-        super.onCreated();
-        this.on('dblclick', e => this._onDblClick(e));
-    }
-    onDestroyed() {
-        this._closeLabelEditor();
-        super.onDestroyed();
-    }
-    /** Double-click on a label → edit its text in place. */
-    _onDblClick(e) {
-        if (this.model.isLocked())
-            return;
-        const [mx, my] = this.gfx.viewport.toModelCoord(e.x, e.y);
-        const [bx, by, w, h] = this.model.deserializedXYWH;
-        // Convert the model-space point into element-local coordinates, undoing the
-        // element rotation around its center.
-        let lx = mx - bx;
-        let ly = my - by;
-        const rot = this.model.rotate ?? 0;
-        if (rot) {
-            const center = [bx + w / 2, by + h / 2];
-            const [ux, uy] = rotatePoint([mx, my], center, -rot);
-            lx = ux - bx;
-            ly = uy - by;
-        }
-        // Map element-local coords into the fixed reference space the labels live in.
-        const { s, ox, oy } = refScale(w, h);
-        const rx = (lx - ox) / s;
-        const ry = (ly - oy) / s;
-        const hit = hitTestEdgyLabel(getEdgyLabelHits(this.model), rx, ry);
-        if (!hit)
-            return;
-        this._openLabelEditor(hit.field, e);
-    }
-    _openLabelEditor(field, e) {
-        this._closeLabelEditor();
-        const input = document.createElement('input');
-        input.value = String(this.model[field] ?? '');
-        Object.assign(input.style, {
-            position: 'fixed',
-            left: `${e.raw.clientX}px`,
-            top: `${e.raw.clientY}px`,
-            transform: 'translate(-50%, -50%)',
-            zIndex: '10000',
-            minWidth: '140px',
-            padding: '3px 8px',
-            font: '14px Inter, sans-serif',
-            color: 'var(--affine-text-primary-color, #1f2328)',
-            background: 'var(--affine-background-overlay-panel-color, #ffffff)',
-            border: '1px solid var(--affine-primary-color, #1e96eb)',
-            borderRadius: '6px',
-            boxShadow: 'var(--affine-shadow-2, 0 2px 8px rgba(0,0,0,0.18))',
-            outline: 'none',
-        });
-        document.body.append(input);
-        this._labelEditor = input;
-        // Mark the element as "editing" so the global edgeless key handlers
-        // (delete, escape, etc.) don't act on it while the user types.
-        this.gfx.selection.set({ elements: [this.model.id], editing: true });
-        input.focus();
-        input.select();
-        const commit = () => {
-            if (this._labelEditor !== input)
-                return;
-            const value = input.value;
-            this._closeLabelEditor();
-            this.gfx.std.store.captureSync();
-            this.gfx.std
-                .get(EdgelessCRUDIdentifier)
-                .updateElement(this.model.id, { [field]: value });
-        };
-        input.addEventListener('keydown', ev => {
-            ev.stopPropagation();
-            if (ev.key === 'Enter') {
-                ev.preventDefault();
-                commit();
-            }
-            else if (ev.key === 'Escape') {
-                ev.preventDefault();
-                this._closeLabelEditor();
-            }
-        });
-        input.addEventListener('blur', commit);
-    }
-    _closeLabelEditor() {
-        if (!this._labelEditor)
-            return;
-        const input = this._labelEditor;
-        this._labelEditor = null;
-        input.remove();
-        if (this.isConnected) {
-            this.gfx.selection.set({ elements: [this.model.id], editing: false });
-        }
-    }
-}
-/**
- * Resize gating: the resize handles are hidden unless `model.resizeEnabled` is
- * true (toggled from the toolbar). Moving/selecting stays available throughout.
- */
-export const EdgyInteraction = GfxViewInteractionExtension(EdgyView.type, {
-    handleResize({ model }) {
-        return {
-            beforeResize({ set }) {
-                if (!model.resizeEnabled) {
-                    set({ allowedHandlers: [] });
-                }
-            },
-        };
-    },
-});
-//# sourceMappingURL=element-view.js.map

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=index.d.ts.map