@hankchen/canvas-editor-vue 0.3.0 → 0.4.0

package/dist/canvas/CanvasSurface.d.ts

@@ -25,14 +25,30 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
         rootRef: HTMLDivElement;
         textareaRef: HTMLTextAreaElement;
-        pillRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        toolbarRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
             mode: "static" | "expression";
+            font: string;
+            fontSize: number;
+            fontColor: string;
+            horizontalAlign: import('@hankchen/canvas').HorizontalAlign;
+            verticalAlign: import('@hankchen/canvas').VerticalAlign;
+            autowrap: boolean;
         }> & Readonly<{
             onChange?: ((value: "expression" | "static") => any) | undefined;
+            onStyleWrite?: ((write: {
+                key: readonly string[];
+                value: unknown;
+                final: boolean;
+            }) => any) | undefined;
         }>, {
             rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
         }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
             change: (value: "expression" | "static") => any;
+            styleWrite: (write: {
+                key: readonly string[];
+                value: unknown;
+                final: boolean;
+            }) => any;
         }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
             rootRef: HTMLDivElement;
         }, HTMLDivElement, import('vue').ComponentProvideOptions, {
@@ -44,8 +60,19 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
             Defaults: {};
         }, Readonly<{
             mode: "static" | "expression";
+            font: string;
+            fontSize: number;
+            fontColor: string;
+            horizontalAlign: import('@hankchen/canvas').HorizontalAlign;
+            verticalAlign: import('@hankchen/canvas').VerticalAlign;
+            autowrap: boolean;
         }> & Readonly<{
             onChange?: ((value: "expression" | "static") => any) | undefined;
+            onStyleWrite?: ((write: {
+                key: readonly string[];
+                value: unknown;
+                final: boolean;
+            }) => any) | undefined;
         }>, {
             rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
         }, {}, {}, {}, {}> | null;

package/dist/canvas/{ContentTypePill.d.ts → EditOverlayToolbar.d.ts}

@@ -1,13 +1,32 @@
+import { HorizontalAlign, VerticalAlign } from '@hankchen/canvas-editor';
 type __VLS_Props = {
     /** 当前会话模式（ui.editing.expression 投影）：激活项高亮随之 */
     mode: 'static' | 'expression';
+    /** 字体引用（textEditLayout.font 原串；空串 = 内置默认字体） */
+    font: string;
+    /** 场景字号（读数恒场景像素，不随 zoom 折算——工单 04 验收项） */
+    fontSize: number;
+    fontColor: string;
+    horizontalAlign: HorizontalAlign;
+    verticalAlign: VerticalAlign;
+    autowrap: boolean;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {
     rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     change: (value: "expression" | "static") => any;
+    styleWrite: (write: {
+        key: readonly string[];
+        value: unknown;
+        final: boolean;
+    }) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onChange?: ((value: "expression" | "static") => any) | undefined;
+    onStyleWrite?: ((write: {
+        key: readonly string[];
+        value: unknown;
+        final: boolean;
+    }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     rootRef: HTMLDivElement;
 }, HTMLDivElement>;

package/dist/canvas/TextEditingOverlay.d.ts

@@ -12,20 +12,37 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
     commitEditing: () => void;
     /** 编辑态查询 */
     isEditing: () => boolean;
-    /** 指针目标是否属于编辑中的 textarea 或内容类型 pill（表面组件分流：
-     *  两者的指针都归编辑面——textarea 编辑光标、pill 切换，不点选/拖动/提交） */
+    /** 指针目标是否属于编辑中的 textarea 或整条工具条（表面组件分流：
+     *  两者的指针都归编辑面——textarea 编辑光标、工具条样式段点按，
+     *  不点选/拖动/提交） */
     ownsEventTarget: (target: EventTarget | null) => boolean;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     rootRef: HTMLDivElement;
     textareaRef: HTMLTextAreaElement;
-    pillRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+    toolbarRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
         mode: "static" | "expression";
+        font: string;
+        fontSize: number;
+        fontColor: string;
+        horizontalAlign: import('@hankchen/canvas').HorizontalAlign;
+        verticalAlign: import('@hankchen/canvas').VerticalAlign;
+        autowrap: boolean;
     }> & Readonly<{
         onChange?: ((value: "expression" | "static") => any) | undefined;
+        onStyleWrite?: ((write: {
+            key: readonly string[];
+            value: unknown;
+            final: boolean;
+        }) => any) | undefined;
     }>, {
         rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
         change: (value: "expression" | "static") => any;
+        styleWrite: (write: {
+            key: readonly string[];
+            value: unknown;
+            final: boolean;
+        }) => any;
     }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
         rootRef: HTMLDivElement;
     }, HTMLDivElement, import('vue').ComponentProvideOptions, {
@@ -37,8 +54,19 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {
         Defaults: {};
     }, Readonly<{
         mode: "static" | "expression";
+        font: string;
+        fontSize: number;
+        fontColor: string;
+        horizontalAlign: import('@hankchen/canvas').HorizontalAlign;
+        verticalAlign: import('@hankchen/canvas').VerticalAlign;
+        autowrap: boolean;
     }> & Readonly<{
         onChange?: ((value: "expression" | "static") => any) | undefined;
+        onStyleWrite?: ((write: {
+            key: readonly string[];
+            value: unknown;
+            final: boolean;
+        }) => any) | undefined;
     }>, {
         rootEl: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
     }, {}, {}, {}, {}> | null;

package/dist/canvas/index.d.ts

@@ -6,7 +6,7 @@
 export { default as AlignFloatBar } from './AlignFloatBar';
 export { default as CanvasSurface, type CanvasSurfaceReady } from './CanvasSurface';
 export { default as ContextMenu } from './ContextMenu';
-export { default as ContentTypePill } from './ContentTypePill';
+export { default as EditOverlayToolbar } from './EditOverlayToolbar';
 export { default as FindBar } from './FindBar';
 export { default as GuidesOverlay } from './GuidesOverlay';
 export { default as Ruler, type RulerGuideGesture } from './Ruler';

package/dist/canvas/useTextEditing.d.ts

@@ -6,24 +6,39 @@ export interface TextEditingHosts {
     /** 画布表面宿主元素（区分「画布内点按」与「面板/工具栏等外部交互」） */
     getHost: () => HTMLElement | null;
     /**
-     * 内容类型 pill 根元素（可选，工单 03）：与 textarea 同入豁免集——pill 点击
-     * 不得触发表面组件 pointerdown 的 commitNow/点选/拖动路径
+     * 编辑浮层工具条根元素（可选，工单 03）：与 textarea 同入豁免集——工具条
+     * 点击不得触发表面组件 pointerdown 的 commitNow/点选/拖动路径；也是屏幕
+     * 恒定尺寸的实测面（offsetWidth/Height + RO 跟随，翻转/钳制/居中都吃它）
      */
-    getPill?: () => HTMLElement | null;
+    getToolbar?: () => HTMLElement | null;
 }
 export interface TextEditingBinding {
     /** 编辑中的图层路径；null = 非编辑态 */
     editing: ComputedRef<LayerPath | null>;
     /** 编辑层的布局描述（内核查询，路径失效为 null） */
     layout: ComputedRef<TextEditLayout | null>;
+    /**
+     * 草稿接管序号（edit-overlay-toolbar 工单 02，会话内容独占的内核底线面）：
+     * 会话对象 draftSeq 的投影——旁门内容写（查找替换等程序化写）命中编辑层时
+     * 内核递增，绑定层据此全量替换 textarea 草稿为文档新值并刷新表达式诊断
+     * （pill 翻标志不递增，草稿不动）。未接管过为 undefined。
+     */
+    draftSeq: ComputedRef<number | undefined>;
     /** textarea 内联样式（随相机/dpr 实时跟随；字号视觉恒定） */
     style: ComputedRef<CSSProperties | null>;
     /**
-     * 内容类型 pill 内联样式（工单 03）：图层框上边框居中的锚点换算——与 textarea
-     * 同一换算系（场景定位 + CSS transform scale，相机/dpr 跟随复用），尾部
-     * translate(-50%, -100%) 把 pill 自身底边中点对到锚点；null = 非编辑态
+     * 编辑浮层工具条内联样式（edit-overlay-toolbar 工单 03，ADR 0019）：屏幕恒定
+     * 尺寸系——屏幕坐标 left/top 直接定位、无 scale 变换，锚点 = 图层框上缘中点
+     * 的屏幕折算点（与 textarea 的场景像素换算系分叉，浮层定位两套并存）；上缘
+     * 放不下整条翻框下缘、水平钳制画布视口；null = 非编辑态
+     */
+    toolbarStyle: ComputedRef<CSSProperties | null>;
+    /**
+     * 工具条标签类浮示锚点内联样式（工单 03）：挂工具条左端外侧、背离图层盒一侧
+     * （工具条在上挂其上方，翻下随翻下方；表达式语法诊断条消费面），与工具条同
+     * 屏幕恒定系；null = 非编辑态
      */
-    pillStyle: ComputedRef<CSSProperties | null>;
+    toolbarTagStyle: ComputedRef<CSSProperties | null>;
     /**
      * 呈现缩放（snapViewportToPhysicalPixels 后的 zoom）：补全锚点测量的 scale
      * 消费面——画布 textarea 整体在 transform: scale(zoom) 系（工单 03 补全绑定）
@@ -45,9 +60,16 @@ export interface TextEditingBinding {
      * 零文档变更零历史步）；非编辑态或目标即现态零操作
      */
     setExpressionMode(expression: boolean): void;
+    /**
+     * 工具条样式段权威写（edit-overlay-toolbar 工单 04）：与属性面板同门——
+     * updateSpec + `sel:path:key` mergeKey（usePropertyPanel.commit 的 spec 分支
+     * 同一约定），连续操作合并一步历史；final = 收口（closeMerge）。新层样式槽
+     * 随权威写在内核 updateSpec 漏斗自动捕获（与面板写不分叉）。非编辑态零操作。
+     */
+    updateStyleField(key: readonly string[], value: unknown, final: boolean): void;
     /** blur 延迟提交：外部指针交互豁免、焦点落回取消（语义见模块头注释） */
     armBlurCommit(): void;
-    /** 编辑态查询：目标是否属于编辑中的 textarea 或内容类型 pill（表面组件的指针分流用） */
+    /** 编辑态查询：目标是否属于编辑中的 textarea 或整条工具条（表面组件的指针分流用） */
     ownsEventTarget(target: EventTarget | null): boolean;
 }
 export declare function useTextEditing(editor: EditorSession, hosts: TextEditingHosts): TextEditingBinding;