@formicoidea/labre-core 0.40.0 → 0.42.0

package/dist/_pkgs/affine-gfx-shape/overlay/polygon-drawing-overlay.js

@@ -59,10 +59,39 @@ export class PolygonDrawingOverlay extends ToolOverlay {
     _effectiveStrokeColor() {
         return this._strokeStyle === 'none' ? 'transparent' : this._strokeColor;
     }
+    /**
+     * The marker shown at the pointer while the tool is armed and empty: the same
+     * dot the first placed vertex gets, plus a light ring, so the promise the
+     * cursor makes is the shape the click keeps.
+     */
+    _renderFirstVertexHint(ctx, [cx, cy]) {
+        const zoom = this.gfx.viewport.zoom;
+        ctx.beginPath();
+        ctx.arc(cx, cy, VERTEX_INDICATOR_RADIUS, 0, Math.PI * 2);
+        ctx.fillStyle = this._strokeColor;
+        ctx.fill();
+        ctx.beginPath();
+        ctx.arc(cx, cy, CLOSE_SNAP_INDICATOR_RADIUS / zoom, 0, Math.PI * 2);
+        ctx.strokeStyle = this._strokeColor;
+        ctx.lineWidth = 1.5 / zoom;
+        ctx.setLineDash([]);
+        ctx.globalAlpha = this.globalAlpha * 0.4;
+        ctx.stroke();
+        ctx.globalAlpha = this.globalAlpha;
+    }
     render(ctx, _rc) {
         const { vertices, cursorPos, isDrawing } = this;
         ctx.globalAlpha = this.globalAlpha;
-        if (!isDrawing || vertices.length === 0)
+        if (vertices.length === 0) {
+            // Nothing is placed yet, so there is no outline to preview — but the tool
+            // IS armed, and until now the canvas said nothing about it. Marking where
+            // the next click would land a corner is what tells the author the board
+            // is waiting for a first vertex rather than ignoring the pointer.
+            if (cursorPos)
+                this._renderFirstVertexHint(ctx, cursorPos);
+            return;
+        }
+        if (!isDrawing)
             return;
         const effectiveStroke = this._effectiveStrokeColor();
         const strokeWidth = Math.max(this._strokeWidth, 1);

package/dist/_pkgs/affine-gfx-shape/polygon-tool.d.ts

@@ -1,6 +1,25 @@
 import type { PointerEventState } from '../std/index.js';
 import { BaseTool, type GfxController } from '../std/gfx/index.js';
-export type PolygonToolOption = Record<string, unknown>;
+export type PolygonToolOption = {
+    /**
+     * Props the activation stamps on the shape the closed outline produces — the
+     * same seam `ConnectorTool`'s `role` / `style` options are: a framework arms
+     * this tool to draw ITS artefact (a Wardley zone) rather than a plain
+     * polygon, so the element is born typed instead of being converted after the
+     * fact. Absent for the plain polygon tool, which keeps drawing a shape.
+     *
+     * Merged BEFORE the geometry: a framework's description of an artefact
+     * carries the box and the outline it would have been born with, and the
+     * outline the author just drew must win over both.
+     */
+    props?: Record<string, unknown>;
+    /**
+     * Called once the element exists, for the placement an element description
+     * cannot express — a Wardley zone has to be lowered to just above the map it
+     * covers, which depends on what is already on the board.
+     */
+    onCreated?: (gfx: GfxController, id: string) => void;
+};
 /**
  * PolygonTool allows users to draw arbitrary polygons by clicking to place
  * vertices on the edgeless canvas. The polygon is finalised by either:

package/dist/_pkgs/affine-gfx-shape/polygon-tool.js

@@ -228,8 +228,15 @@ export class PolygonTool extends BaseTool {
         const id = this.gfx.surface.addElement({
             type: CanvasElementType.SHAPE,
             shapeType: ShapeType.Polygon,
-            xywh: bound.serialize(),
             radius: 0,
+            // What the activation asked for, if anything — it may change the element
+            // type itself, which is how a framework gets its own artefact out of this
+            // gesture. Spread here so the geometry below always wins: the props of a
+            // framework artefact describe the shape it would have been born with,
+            // outline included, and that outline is exactly what the author just
+            // replaced by drawing.
+            ...this.activatedOption.props,
+            xywh: bound.serialize(),
             vertices: normalizedVertices,
             isClosed: true,
             smoothFlags: smoothFlagsForModel,
@@ -237,6 +244,7 @@ export class PolygonTool extends BaseTool {
                 ? { controlPoints: controlPointsForModel }
                 : {}),
         });
+        this.activatedOption.onCreated?.(this.gfx, id);
         this.std.getOptional(TelemetryProvider)?.track('CanvasElementAdded', {
             control: 'canvas:draw',
             page: 'whiteboard editor',

package/dist/_pkgs/affine-gfx-shape/toolbar/config.d.ts

@@ -16,12 +16,14 @@ export declare const shapeToolbarConfig: {
     }, {
         readonly id: "f.text";
         readonly tooltip: "Add text";
+        readonly tooltipWording: import("../../affine-shared/services/index.js").ChromeWording;
         readonly icon: import("lit-html").TemplateResult<1>;
         readonly when: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => boolean;
         readonly run: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => void;
     }, {
         readonly id: "f1.edit-vertices";
         readonly tooltip: "Edit vertices";
+        readonly tooltipWording: import("../../affine-shared/services/index.js").ChromeWording;
         readonly icon: import("lit-html").TemplateResult<1>;
         readonly when: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => boolean;
         readonly run: (ctx: import("../../affine-shared/services/index.js").ToolbarContext) => void;

package/dist/_pkgs/affine-gfx-shape/toolbar/config.js

@@ -1,8 +1,8 @@
 import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
-import { packColor, } from '../../affine-components/color-picker/index.js';
+import { frameworkPaletteGroups, packColor, } from '../../affine-components/color-picker/index.js';
 import { createTextActions } from '../../affine-gfx-text/index.js';
 import { DefaultTheme, FontFamily, getShapeName, getShapeRadius, getShapeType, isTransparent, LineWidth, MindmapElementModel, resolveColor, ShapeElementModel, ShapeStyle, ShapeType, StrokeStyle, TextFitMode, } from '../../affine-model/index.js';
-import { ToolbarModuleExtension, } from '../../affine-shared/services/index.js';
+import { STYLE_MENU_LABEL, ToolbarModuleExtension, translateKey, } from '../../affine-shared/services/index.js';
 import { getMostCommonValue } from '../../affine-shared/utils/index.js';
 import { getRootBlock, LINE_STYLE_LIST, renderMenu, } from '../../affine-widget-edgeless-toolbar/index.js';
 import { Bound } from '../../global/gfx/index.js';
@@ -15,11 +15,18 @@ import { ShapeElementView } from '../element-view.js';
 import { applyTextFitMode, nextTextFitMode } from '../text-fit.js';
 import { mountShapeTextEditor } from '../text/edgeless-shape-text-editor.js';
 import { ShapeComponentConfig } from './shape-menu-config.js';
-/** Icon + label per text fit mode for the cycling toolbar button. */
+import { SHAPE_ADD_TEXT_TOOLTIP, SHAPE_EDIT_VERTICES_TOOLTIP, SHAPE_SWITCH_TYPE_LABEL, SHAPE_TEXT_FIT_ARIA, SHAPE_TEXT_FIT_CONTAINED, SHAPE_TEXT_FIT_GROW, SHAPE_TEXT_FIT_OVERFLOW, SHAPE_TEXT_FIT_TOOLTIP, } from '../translations.js';
+/** Icon + wording per text fit mode for the cycling toolbar button. */
 const TEXT_FIT_UI = {
-    [TextFitMode.Grow]: { icon: AutoHeightIcon(), label: 'Grow shape' },
-    [TextFitMode.Contained]: { icon: AutoSizeIcon(), label: 'Contained text' },
-    [TextFitMode.Overflow]: { icon: ScaleAltIcon(), label: 'Overflow text' },
+    [TextFitMode.Grow]: { icon: AutoHeightIcon(), wording: SHAPE_TEXT_FIT_GROW },
+    [TextFitMode.Contained]: {
+        icon: AutoSizeIcon(),
+        wording: SHAPE_TEXT_FIT_CONTAINED,
+    },
+    [TextFitMode.Overflow]: {
+        icon: ScaleAltIcon(),
+        wording: SHAPE_TEXT_FIT_OVERFLOW,
+    },
 };
 export const shapeToolbarConfig = {
     actions: [
@@ -52,8 +59,10 @@ export const shapeToolbarConfig = {
                 return renderMenu({
                     icon: ShapeIcon(),
                     label: 'Switch shape type',
+                    labelWording: SHAPE_SWITCH_TYPE_LABEL,
                     items: ShapeComponentConfig.map(item => ({
                         key: item.tooltip,
+                        keyWording: item.tooltipWording,
                         value: item.name,
                         icon: shapeStyle === ShapeStyle.General
                             ? item.generalIcon
@@ -62,6 +71,7 @@ export const shapeToolbarConfig = {
                     })),
                     currentValue: shapeName,
                     onPick,
+                    std: ctx.std,
                 });
             },
         },
@@ -85,9 +95,11 @@ export const shapeToolbarConfig = {
                 };
                 return renderMenu({
                     label: 'Style',
+                    labelWording: STYLE_MENU_LABEL,
                     items: LINE_STYLE_LIST,
                     currentValue: shapeStyle === ShapeStyle.Scribbled,
                     onPick,
+                    std: ctx.std,
                 });
             },
         },
@@ -180,11 +192,16 @@ export const shapeToolbarConfig = {
                             .updateElement(model.id, { strokeStyle });
                     }
                 };
+                // The base palette, plus a page per framework whose tooling is on —
+                // opening on the one the selection belongs to (`docs/adr/0027`).
+                const carousel = frameworkPaletteGroups(ctx.std, models, DefaultTheme.Palettes);
                 return html `
           <edgeless-shape-color-picker
             @pickFillColor=${onPickFillColor}
             @pickStrokeColor=${onPickStrokeColor}
             @pickStrokeStyle=${onPickStrokeStyle}
+            .paletteGroups=${carousel.groups}
+            .activeGroupKey=${carousel.activeKey}
             .payload=${{
                     fillColor,
                     strokeColor,
@@ -203,6 +220,7 @@ export const shapeToolbarConfig = {
         {
             id: 'f.text',
             tooltip: 'Add text',
+            tooltipWording: SHAPE_ADD_TEXT_TOOLTIP,
             icon: AddTextIcon(),
             when(ctx) {
                 const models = ctx.getSurfaceModelsByType(ShapeElementModel);
@@ -221,6 +239,7 @@ export const shapeToolbarConfig = {
         {
             id: 'f1.edit-vertices',
             tooltip: 'Edit vertices',
+            tooltipWording: SHAPE_EDIT_VERTICES_TOOLTIP,
             icon: EditIcon(),
             when(ctx) {
                 const models = ctx.getSurfaceModelsByType(ShapeElementModel);
@@ -251,11 +270,18 @@ export const shapeToolbarConfig = {
                     return null;
                 const mode = getMostCommonValue(models, 'textFitMode') ?? TextFitMode.Grow;
                 const next = nextTextFitMode(mode);
-                const { icon, label } = TEXT_FIT_UI[mode];
+                const { icon, wording } = TEXT_FIT_UI[mode];
+                const label = translateKey(ctx.std, ...wording);
+                const nextLabel = translateKey(ctx.std, ...TEXT_FIT_UI[next].wording);
                 return html `
           <editor-icon-button
-            aria-label="Text fit: ${label}"
-            .tooltip=${`Text fit: ${label} — click for ${TEXT_FIT_UI[next].label}`}
+            aria-label="${translateKey(ctx.std, ...SHAPE_TEXT_FIT_ARIA, {
+                    label,
+                })}"
+            .tooltip=${translateKey(ctx.std, ...SHAPE_TEXT_FIT_TOOLTIP, {
+                    label,
+                    nextLabel,
+                })}
             @click=${() => applyTextFitMode(ctx.std, models, next)}
           >
             ${icon}

package/dist/_pkgs/affine-gfx-shape/toolbar/palette-color-action.js

@@ -1,5 +1,5 @@
 import { EdgelessCRUDIdentifier } from '../../affine-block-surface/index.js';
-import { packColor, } from '../../affine-components/color-picker/index.js';
+import { frameworkPaletteGroups, packColor, } from '../../affine-components/color-picker/index.js';
 import { DefaultTheme, isTransparent, LineWidth, resolveColor, ShapeElementModel, StrokeStyle, } from '../../affine-model/index.js';
 import { getMostCommonValue } from '../../affine-shared/utils/index.js';
 import { html } from 'lit';
@@ -99,12 +99,22 @@ export function paletteColorAction(id, palettes, fillColorFor = (_model, value)
                     crud.updateElement(model.id, props);
                 }
             };
+            // The carousel: the editor palette, then a page per framework whose
+            // tooling is on. A Wardley node resolves to `wardley` and therefore
+            // OPENS on the very swatches `palettes` holds, since the framework
+            // registers that same list (`docs/adr/0027`). With its flag off the
+            // framework contributes no page and the picker opens on the editor
+            // palette — a palette is tooling (`docs/adr/0009`), the colour already
+            // stored is not and does not move.
+            const carousel = frameworkPaletteGroups(ctx.std, models, DefaultTheme.Palettes);
             return html `
         <edgeless-shape-color-picker
           @pickFillColor=${onPickFillColor}
           @pickStrokeColor=${onPickStrokeColor}
           @pickStrokeStyle=${onPickStrokeStyle}
           .palettes=${palettes}
+          .paletteGroups=${carousel.groups}
+          .activeGroupKey=${carousel.activeKey}
           .payload=${{
                 fillColor,
                 strokeColor,

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

@@ -1,8 +1,10 @@
 import { SeniorToolExtension } from '../../affine-widget-edgeless-toolbar/index.js';
 import { html } from 'lit';
+import { SHAPE_TOOL_NAME } from '../translations.js';
 export const shapeSeniorTool = SeniorToolExtension('shape', ({ block, toolbarContainer }) => {
     return {
         name: 'Shape',
+        labelKey: SHAPE_TOOL_NAME[0],
         content: html `<edgeless-shape-tool-button
         .edgeless=${block}
         .toolbarContainer=${toolbarContainer}

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

@@ -1,10 +1,13 @@
 import type { ShapeToolOption } from '../index.js';
+import type { ChromeWording } from '../../affine-shared/services/index.js';
 import type { TemplateResult } from 'lit';
 type Config = {
     name: ShapeToolOption['shapeName'];
     generalIcon: TemplateResult<1>;
     scribbledIcon: TemplateResult<1>;
     tooltip: string;
+    /** {@link tooltip}, for the translation seam. */
+    tooltipWording: ChromeWording;
     disabled: boolean;
 };
 export declare const ShapeComponentConfig: Config[];

package/dist/_pkgs/affine-gfx-shape/toolbar/shape-menu-config.js

@@ -1,12 +1,14 @@
 import { ShapeType } from '../../affine-model/index.js';
 import { DiamondIcon, EllipseIcon, RoundedRectangleIcon, SquareIcon, TriangleIcon, } from '@blocksuite/icons/lit';
 import { GeneralPolygonIcon, ScribbledDiamondIcon, ScribbledEllipseIcon, ScribbledPolygonIcon, ScribbledRoundedRectangleIcon, ScribbledSquareIcon, ScribbledTriangleIcon, } from './icons.js';
+import { SHAPE_NAME_DIAMOND, SHAPE_NAME_ELLIPSE, SHAPE_NAME_POLYGON, SHAPE_NAME_ROUNDED_RECT, SHAPE_NAME_SQUARE, SHAPE_NAME_TRIANGLE, } from '../translations.js';
 export const ShapeComponentConfig = [
     {
         name: ShapeType.Rect,
         generalIcon: SquareIcon(),
         scribbledIcon: ScribbledSquareIcon,
         tooltip: 'Square',
+        tooltipWording: SHAPE_NAME_SQUARE,
         disabled: false,
     },
     {
@@ -14,6 +16,7 @@ export const ShapeComponentConfig = [
         generalIcon: EllipseIcon(),
         scribbledIcon: ScribbledEllipseIcon,
         tooltip: 'Ellipse',
+        tooltipWording: SHAPE_NAME_ELLIPSE,
         disabled: false,
     },
     {
@@ -21,6 +24,7 @@ export const ShapeComponentConfig = [
         generalIcon: DiamondIcon(),
         scribbledIcon: ScribbledDiamondIcon,
         tooltip: 'Diamond',
+        tooltipWording: SHAPE_NAME_DIAMOND,
         disabled: false,
     },
     {
@@ -28,6 +32,7 @@ export const ShapeComponentConfig = [
         generalIcon: TriangleIcon(),
         scribbledIcon: ScribbledTriangleIcon,
         tooltip: 'Triangle',
+        tooltipWording: SHAPE_NAME_TRIANGLE,
         disabled: false,
     },
     {
@@ -35,6 +40,7 @@ export const ShapeComponentConfig = [
         generalIcon: GeneralPolygonIcon,
         scribbledIcon: ScribbledPolygonIcon,
         tooltip: 'Polygon',
+        tooltipWording: SHAPE_NAME_POLYGON,
         disabled: false,
     },
     {
@@ -42,6 +48,7 @@ export const ShapeComponentConfig = [
         generalIcon: RoundedRectangleIcon(),
         scribbledIcon: ScribbledRoundedRectangleIcon,
         tooltip: 'Rounded rectangle',
+        tooltipWording: SHAPE_NAME_ROUNDED_RECT,
         disabled: false,
     },
 ];

package/dist/_pkgs/affine-gfx-shape/translations.d.ts

@@ -0,0 +1,37 @@
+import { type ChromeWording } from '../affine-shared/services/index.js';
+/**
+ * The shape toolbar's own wordings. `STYLE_GENERAL` / `STYLE_SCRIBBLED` /
+ * `STYLE_MENU_LABEL` / `TOOL_NAME_SHAPE` are declared once in `chrome.ts`
+ * (shared with `widgets/edgeless-toolbar` and `gfx/mindmap`) and re-exported
+ * here under this package's own name, so a call site in this package can
+ * import everything it needs from one place.
+ */
+export declare const SHAPE_STYLE_GENERAL: ChromeWording;
+export declare const SHAPE_STYLE_SCRIBBLED: ChromeWording;
+export declare const SHAPE_STYLE_MENU_LABEL: ChromeWording;
+export declare const SHAPE_TOOL_NAME: ChromeWording;
+export declare const SHAPE_TEXT_FIT_GROW: ChromeWording;
+export declare const SHAPE_TEXT_FIT_CONTAINED: ChromeWording;
+export declare const SHAPE_TEXT_FIT_OVERFLOW: ChromeWording;
+/**
+ * The cycling button's aria-label and tooltip — interpolated with the
+ * already-resolved mode label(s) rather than split into per-word keys (the
+ * brief's "don't split a sentence" rule).
+ */
+export declare const SHAPE_TEXT_FIT_ARIA: ChromeWording;
+export declare const SHAPE_TEXT_FIT_TOOLTIP: ChromeWording;
+export declare const SHAPE_SWITCH_TYPE_LABEL: ChromeWording;
+export declare const SHAPE_ADD_TEXT_TOOLTIP: ChromeWording;
+export declare const SHAPE_EDIT_VERTICES_TOOLTIP: ChromeWording;
+export declare const SHAPE_NAME_SQUARE: ChromeWording;
+export declare const SHAPE_NAME_ELLIPSE: ChromeWording;
+export declare const SHAPE_NAME_DIAMOND: ChromeWording;
+export declare const SHAPE_NAME_TRIANGLE: ChromeWording;
+export declare const SHAPE_NAME_POLYGON: ChromeWording;
+export declare const SHAPE_NAME_ROUNDED_RECT: ChromeWording;
+/**
+ * Every wording this package DECLARES (not the re-exported chrome ones — they
+ * are `CHROME_WORDINGS` entries already, and listing them again here would
+ * offer a host the same key twice).
+ */
+export declare const SHAPE_WORDINGS: readonly ChromeWording[];

package/dist/_pkgs/affine-gfx-shape/translations.js

@@ -0,0 +1,93 @@
+import { ADD_TEXT_TOOLTIP, STYLE_GENERAL, STYLE_MENU_LABEL, STYLE_SCRIBBLED, TOOL_NAME_SHAPE, } from '../affine-shared/services/index.js';
+/**
+ * The shape toolbar's own wordings. `STYLE_GENERAL` / `STYLE_SCRIBBLED` /
+ * `STYLE_MENU_LABEL` / `TOOL_NAME_SHAPE` are declared once in `chrome.ts`
+ * (shared with `widgets/edgeless-toolbar` and `gfx/mindmap`) and re-exported
+ * here under this package's own name, so a call site in this package can
+ * import everything it needs from one place.
+ */
+export const SHAPE_STYLE_GENERAL = STYLE_GENERAL;
+export const SHAPE_STYLE_SCRIBBLED = STYLE_SCRIBBLED;
+export const SHAPE_STYLE_MENU_LABEL = STYLE_MENU_LABEL;
+export const SHAPE_TOOL_NAME = TOOL_NAME_SHAPE;
+/* ── Text-fit cycling button ───────────────────────────────────────────── */
+export const SHAPE_TEXT_FIT_GROW = [
+    'com.labre.shape.text-fit.grow',
+    'Grow shape',
+];
+export const SHAPE_TEXT_FIT_CONTAINED = [
+    'com.labre.shape.text-fit.contained',
+    'Contained text',
+];
+export const SHAPE_TEXT_FIT_OVERFLOW = [
+    'com.labre.shape.text-fit.overflow',
+    'Overflow text',
+];
+/**
+ * The cycling button's aria-label and tooltip — interpolated with the
+ * already-resolved mode label(s) rather than split into per-word keys (the
+ * brief's "don't split a sentence" rule).
+ */
+export const SHAPE_TEXT_FIT_ARIA = [
+    'com.labre.shape.text-fit.aria',
+    'Text fit: {{label}}',
+];
+export const SHAPE_TEXT_FIT_TOOLTIP = [
+    'com.labre.shape.text-fit.tooltip',
+    'Text fit: {{label}} — click for {{nextLabel}}',
+];
+/* ── Toolbar actions ────────────────────────────────────────────────────── */
+export const SHAPE_SWITCH_TYPE_LABEL = [
+    'com.labre.shape.toolbar.switch-type',
+    'Switch shape type',
+];
+export const SHAPE_ADD_TEXT_TOOLTIP = ADD_TEXT_TOOLTIP;
+export const SHAPE_EDIT_VERTICES_TOOLTIP = [
+    'com.labre.shape.toolbar.edit-vertices',
+    'Edit vertices',
+];
+/* ── Shape names (switch-type menu, drag basket) ───────────────────────── */
+export const SHAPE_NAME_SQUARE = [
+    'com.labre.shape.name.square',
+    'Square',
+];
+export const SHAPE_NAME_ELLIPSE = [
+    'com.labre.shape.name.ellipse',
+    'Ellipse',
+];
+export const SHAPE_NAME_DIAMOND = [
+    'com.labre.shape.name.diamond',
+    'Diamond',
+];
+export const SHAPE_NAME_TRIANGLE = [
+    'com.labre.shape.name.triangle',
+    'Triangle',
+];
+export const SHAPE_NAME_POLYGON = [
+    'com.labre.shape.name.polygon',
+    'Polygon',
+];
+export const SHAPE_NAME_ROUNDED_RECT = [
+    'com.labre.shape.name.rounded-rect',
+    'Rounded rectangle',
+];
+/**
+ * Every wording this package DECLARES (not the re-exported chrome ones — they
+ * are `CHROME_WORDINGS` entries already, and listing them again here would
+ * offer a host the same key twice).
+ */
+export const SHAPE_WORDINGS = [
+    SHAPE_TEXT_FIT_GROW,
+    SHAPE_TEXT_FIT_CONTAINED,
+    SHAPE_TEXT_FIT_OVERFLOW,
+    SHAPE_TEXT_FIT_ARIA,
+    SHAPE_TEXT_FIT_TOOLTIP,
+    SHAPE_SWITCH_TYPE_LABEL,
+    SHAPE_EDIT_VERTICES_TOOLTIP,
+    SHAPE_NAME_SQUARE,
+    SHAPE_NAME_ELLIPSE,
+    SHAPE_NAME_DIAMOND,
+    SHAPE_NAME_TRIANGLE,
+    SHAPE_NAME_POLYGON,
+    SHAPE_NAME_ROUNDED_RECT,
+];