@ones-editor/editor 2.2.13 → 2.2.14-beta.2

package/@ones-editor/core/src/utils/dom.d.ts

@@ -40,4 +40,5 @@ export declare function getElementFromPoint(x: number, y: number, options?: {
 export declare function createMouseEventFromTouchEvent(event: TouchEvent, type: 'mousedown' | 'mousemove' | 'mouseup' | 'click'): MouseEvent;
 export declare function ensureIsMobileEvent(events: MouseEvent | TouchEvent): events is TouchEvent;
 export declare function bindDbClick(editor: OnesEditor, elem: HTMLElement, handler: (event: MouseEvent) => void): () => void;
+export declare function bindPreventSelect(elem: HTMLElement, callback?: (event: Event) => void): () => void;
 export {};

package/@ones-editor/graph-embed/src/command.d.ts

@@ -0,0 +1,6 @@
+import { AddMenuCommand, QuickMenuCommandBetween, QuickMenuCommandInline, QuickMenuCommandProvider } from '../../../@ones-editor/ui';
+import { CommandItem, OnesEditor } from '../../../@ones-editor/core';
+export declare class GraphCommandProvider implements QuickMenuCommandProvider {
+    getCommands: (editor: OnesEditor) => CommandItem[];
+    executeCommand: (editor: OnesEditor, item: CommandItem, params: QuickMenuCommandInline | QuickMenuCommandBetween | AddMenuCommand) => Promise<null>;
+}

package/@ones-editor/graph-embed/src/config/index.d.ts

@@ -1,4 +1,12 @@
+import { GraphType } from '../types';
 export declare const MERMAID_SCRIPTS = "https://cdn.jsdelivr.net/npm/mermaid@9.0.1/dist/mermaid.min.js";
 export declare const FLOWCHART_SCRIPTS: string[];
 export declare const PLANTUML_PRE = "https://www.plantuml.com/plantuml/svg";
-export declare const GRAPH_MIN_HEIGHT = 200;
+export declare const GRAPH_MIN_HEIGHT = 150;
+export declare const GRAPH_MAX_HEIGHT = 1000;
+export declare const GRAPH_DEFAULT_HEIGHT = 300;
+export declare const DEFAULT_FLEX = 0.5;
+export declare const MIN_FLEX = 0.3;
+export declare const IMAGE_CLASS_NAME = "graph-embed-image";
+export declare const DRAG_RANGE = 10;
+export declare const GraphDocumentUrl: Record<GraphType, string>;

package/@ones-editor/graph-embed/src/flowchart/flowchart-embed.d.ts

@@ -1,4 +1,4 @@
-import type { Embed } from '../../../../@ones-editor/core';
+import { Embed } from '../../../../@ones-editor/core';
 import '../lang';
 declare const FlowChartEmbed: Embed;
 export default FlowChartEmbed;

package/@ones-editor/graph-embed/src/flowchart/flowchart-helper.d.ts

@@ -1,5 +1,6 @@
-import type { OnesEditor } from '../../../../@ones-editor/core';
+import { OnesEditor } from '../../../../@ones-editor/core';
 import '../../types/window.d';
+export declare const FLOWCHART_TYPE = "flowchart";
 export declare function flowchartCodeToSvgStr(editor: OnesEditor, flowDataCode: string): Promise<string>;
 export declare function flowchartCodeToObjectUrl(editor: OnesEditor, flowChartCode: string): Promise<string>;
 export declare function flowchartCodeToResourceId(editor: OnesEditor, flowChartCode: string): Promise<string>;

package/@ones-editor/graph-embed/src/flowchart/flowchart.d.ts

@@ -1,9 +1,17 @@
-import type { OnesEditor, DocEmbedBlock } from '../../../../@ones-editor/core';
+import { OnesEditor, DocEmbedBlock, BlockElement } from '../../../../@ones-editor/core';
 import GraphBase from '../helper/graph-base';
+import { StandardGraphData, GraphType } from '../types';
 export declare class FlowChartInstance extends GraphBase {
-    constructor(editor: OnesEditor);
-    static get(editor: OnesEditor, block: DocEmbedBlock): FlowChartInstance;
+    static graphType: GraphType;
+    protected graphType: GraphType;
+    static get(editor: OnesEditor, id: string): FlowChartInstance;
     protected code2ObjectUrl(code: string): Promise<string>;
     protected code2ResourceId(code: string): Promise<string>;
+    static createEmptyEmbedData: () => {
+        flowchartText: string;
+        src: string;
+    };
+    protected createGraphEmbedData: (block: BlockElement, data: Partial<StandardGraphData>) => import("@ones-editor/core").DocEmbedData;
+    protected getGraphData: (blockData: DocEmbedBlock) => StandardGraphData;
     destroy(): void;
 }

package/@ones-editor/graph-embed/src/helper/graph-base.d.ts

@@ -1,29 +1,31 @@
-import { BlockProperties } from '../../../../@ones-editor/core';
-import type { OnesEditor, BlockContentElement, DocEmbedBlock, BlockElement, Logger } from '../../../../@ones-editor/core';
-import type { GraphType, GraphEmbedBlockProperties } from './graph-block-commands';
+import { OnesEditor, BlockContentElement, DocEmbedBlock, BlockElement, DocEmbedData, BlockProperties } from '../../../../@ones-editor/core';
+import { StandardGraphData, GraphType } from '../types';
 export default abstract class GraphBase {
-    private graphType;
-    private codeEmbedDataKey;
     protected editor: OnesEditor;
-    logger: Logger;
-    editing: boolean;
-    private graphEmbedContent;
-    private _status;
-    constructor(editor: OnesEditor, graphType: GraphType, codeEmbedDataKey: string);
+    protected abstract graphType: GraphType;
+    static graphType: GraphType;
+    static createEmptyEmbedData: () => Record<string, string>;
     protected abstract code2ObjectUrl(code: string): Promise<string>;
     protected abstract code2ResourceId(code: string): Promise<string>;
-    protected i18nt(key: string, arg?: Record<string, string>): string;
-    protected getContent(embed: HTMLDivElement): BlockContentElement;
-    protected getEmbed(content: BlockContentElement): HTMLDivElement;
-    protected uploadResource(svg: string): Promise<string | null>;
-    createEmbedContent(content: BlockContentElement, block: DocEmbedBlock): void;
-    updateEmbedContent(content: BlockContentElement, block: DocEmbedBlock): void;
-    protected updateImage(embed: HTMLDivElement, code: string | undefined, url: string | undefined | null, err: Error | null): Promise<void>;
-    protected errorBoundary(embed: HTMLDivElement, code: string | undefined, url: string | undefined | null, reason: 'imageLoadError' | 'grammarError', error?: Error): void;
-    protected emptyContent(): void;
-    protected updateSpecialClasses(embed: HTMLDivElement, code: string | undefined, err: Error | null): void;
-    editGraph(content: BlockContentElement): void;
-    getBlockProperties(block: BlockElement, properties?: GraphEmbedBlockProperties): BlockProperties;
+    protected abstract createGraphEmbedData(block: BlockElement, data: Partial<StandardGraphData>): DocEmbedData;
+    protected abstract getGraphData(blockData: DocEmbedBlock): StandardGraphData;
+    private layout?;
+    private viewSelect?;
+    private drawHandler?;
+    private get block();
+    constructor(editor: OnesEditor);
+    private handleReadonlyChanged;
+    destroy(): void;
+    private updateLayoutData;
+    private handleEditChange;
+    private handleFlexChange;
+    private getRealView;
     private hasChanged;
-    private removeStatusContent;
+    private handleBlockFocus;
+    createEmbedContent(content: BlockContentElement, blockData: DocEmbedBlock): void;
+    private updateHeight;
+    private updateLayout;
+    private updateDraw;
+    updateEmbedContent(content: BlockContentElement, block: DocEmbedBlock): Promise<void>;
+    getBlockProperties(block: BlockElement): BlockProperties;
 }

package/@ones-editor/graph-embed/src/helper/graph-block-commands.d.ts

@@ -1,9 +1,8 @@
 import { BlockElement } from '../../../../@ones-editor/core';
 import type { OnesEditor } from '../../../../@ones-editor/core';
-import { CommandId, type StandardEmbedBlockProperties } from '../../../../@ones-editor/embed-block-helper';
-export type GraphType = 'mermaid' | 'flowchart' | 'plantuml';
-export type GraphEmbedBlockProperties = StandardEmbedBlockProperties;
-export declare function getGraphEmbedBlockProperties(editor: OnesEditor, block: BlockElement, type: 'mermaid' | 'flowchart' | 'plantuml', properties?: GraphEmbedBlockProperties): {
+import { CommandId } from '../../../../@ones-editor/embed-block-helper';
+import { GraphType, GraphEmbedBlockProperties } from '../types';
+export declare function getGraphEmbedBlockProperties(editor: OnesEditor, block: BlockElement, type: GraphType, properties?: GraphEmbedBlockProperties): {
     abstract: string;
     blockCommands: {
         'hovering-toolbar': import("@ones-editor/embed-block-helper").StandardEmbedBlockCommands<CommandId>;

package/@ones-editor/graph-embed/src/helper/graph-dom/code-editor.d.ts

@@ -0,0 +1,2 @@
+export type OnChange = (codeValue: string) => void;
+export declare const createCodeEditor: (parent: HTMLElement, codeValue: string, onChange: OnChange) => void;

package/@ones-editor/graph-embed/src/helper/graph-dom/draw-dom.d.ts

@@ -0,0 +1,16 @@
+import { OnesEditor } from '../../../../../@ones-editor/core';
+export declare class DrawHandler {
+    private editor;
+    private parent;
+    private image?;
+    constructor(editor: OnesEditor, parent: HTMLElement);
+    private bindImage;
+    private handleImageError;
+    private handleImageLoad;
+    private setStatus;
+    private get status();
+    createEmptyContent(): void;
+    createErrorContent: () => void;
+    updateDraw(src?: string): void;
+    destroy(): void;
+}

package/@ones-editor/graph-embed/src/helper/graph-dom/layout-dom.d.ts

@@ -0,0 +1,25 @@
+import { DragDrop } from '../../../../../@ones-editor/core';
+import { TypedEmitter } from 'tiny-typed-emitter';
+interface GraphLayoutCallback {
+    'flexChange': (flex: number) => void;
+}
+export declare class GraphLayout extends TypedEmitter<GraphLayoutCallback> {
+    private parent;
+    graphContent: HTMLElement;
+    constructor(parent: HTMLElement, leftEl: HTMLElement, rightEl: HTMLElement, flex: number);
+    bindMouseMove(): void;
+    unbindMouseMove(): void;
+    handleMouseMove: (event: MouseEvent) => void;
+    destroy(): void;
+    getLeftElement(): HTMLElement;
+    getRightElement(): HTMLElement;
+    handleDrag: (drag: DragDrop<unknown>, event: MouseEvent | TouchEvent) => void;
+    handleDragEnd: (drag: DragDrop<unknown>, event: MouseEvent | TouchEvent) => void;
+    private hideLeft;
+    private hideRight;
+    showRight(): void;
+    showLeft(): void;
+    showBoth(flex: number): void;
+    changeLayout(flex: number): void;
+}
+export {};

package/@ones-editor/graph-embed/src/helper/graph-dom/view-select.d.ts

@@ -0,0 +1,22 @@
+import { TypedEmitter } from 'tiny-typed-emitter';
+export declare enum ViewId {
+    Both = "both",
+    Draw = "draw",
+    Code = "code",
+    Select = "select"
+}
+interface ViewSelectCallback {
+    'viewChange': (viewSelect: ViewSelect) => void;
+}
+export declare class ViewSelect extends TypedEmitter<ViewSelectCallback> {
+    private fixedToolbar;
+    selectedView: ViewId;
+    constructor(parent: HTMLElement);
+    private handleSelected;
+    setSelectedView(view: ViewId): void;
+    disable(): void;
+    enable(): void;
+    private createItems;
+    destroy(): void;
+}
+export {};

package/@ones-editor/graph-embed/src/helper/graph-quick-commands.d.ts

@@ -0,0 +1,3 @@
+import GraphBase from './graph-base';
+import { GraphCommandItem } from '../types';
+export declare const getCommands: (base: typeof GraphBase) => GraphCommandItem[];

package/@ones-editor/graph-embed/src/index.d.ts

@@ -1,6 +1,7 @@
 import MermaidEmbed from './mermaid/mermaid-embed';
 import FlowChartEmbed from './flowchart/flowchart-embed';
 import PlantumlEmbed from './plantuml/plantuml-embed';
+import { GraphCommandProvider } from './command';
 import './common.scss';
-export { MermaidEmbed, PlantumlEmbed, FlowChartEmbed, };
-export * from '../types';
+export { MermaidEmbed, PlantumlEmbed, FlowChartEmbed, GraphCommandProvider, };
+export * from './types';

package/@ones-editor/graph-embed/src/lang/en-us.d.ts

@@ -1,13 +1,18 @@
 declare const _default: {
     graph: {
-        invalid: string;
         empty: string;
-        edit: string;
-        comment: string;
-        help: string;
+        readonlyEmpty: string;
         errorTips: string;
-        errorSubTips: string;
-        retry: string;
+        help: string;
+        plantuml: string;
+        mermaid: string;
+        flowchart: string;
+        command: {
+            name: string;
+            bothShow: string;
+            codeShow: string;
+            drawShow: string;
+        };
     };
 };
 export default _default;

package/@ones-editor/graph-embed/src/lang/ja-jp.d.ts

@@ -1,13 +1,18 @@
 declare const _default: {
     graph: {
-        invalid: string;
         empty: string;
-        edit: string;
-        comment: string;
-        help: string;
+        readonlyEmpty: string;
         errorTips: string;
-        errorSubTips: string;
-        retry: string;
+        help: string;
+        plantuml: string;
+        mermaid: string;
+        flowchart: string;
+        command: {
+            name: string;
+            bothShow: string;
+            codeShow: string;
+            drawShow: string;
+        };
     };
 };
 export default _default;

package/@ones-editor/graph-embed/src/lang/zh-cn.d.ts

@@ -1,13 +1,18 @@
 declare const _default: {
     graph: {
-        invalid: string;
         empty: string;
-        edit: string;
-        comment: string;
-        help: string;
+        readonlyEmpty: string;
         errorTips: string;
-        errorSubTips: string;
-        retry: string;
+        help: string;
+        plantuml: string;
+        mermaid: string;
+        flowchart: string;
+        command: {
+            name: string;
+            bothShow: string;
+            codeShow: string;
+            drawShow: string;
+        };
     };
 };
 export default _default;

package/@ones-editor/graph-embed/src/mermaid/mermaid-embed.d.ts

@@ -1,4 +1,4 @@
-import type { Embed } from '../../../../@ones-editor/core';
+import { Embed } from '../../../../@ones-editor/core';
 import '../lang';
 declare const MermaidEmbed: Embed;
 export default MermaidEmbed;

package/@ones-editor/graph-embed/src/mermaid/mermaid-helper.d.ts

@@ -1,4 +1,5 @@
 import { OnesEditor } from '../../../../@ones-editor/core';
+export declare const MERMAID_TYPE = "mermaid";
 export declare function mermaidCodeToSvg(editor: OnesEditor, code: string): Promise<string>;
 export declare function mermaidCodeToObjectUrl(editor: OnesEditor, code: string): Promise<string>;
 export declare function mermaidCodeToResourceId(editor: OnesEditor, code: string): Promise<string>;

package/@ones-editor/graph-embed/src/mermaid/mermaid.d.ts

@@ -1,9 +1,16 @@
-import type { OnesEditor, DocEmbedBlock } from '../../../../@ones-editor/core';
+import { OnesEditor, DocEmbedBlock, BlockElement } from '../../../../@ones-editor/core';
 import GraphBase from '../helper/graph-base';
+import { GraphType, StandardGraphData } from '../types';
 export declare class MermaidInstance extends GraphBase {
-    constructor(editor: OnesEditor);
-    static get(editor: OnesEditor, block: DocEmbedBlock): MermaidInstance;
+    static graphType: GraphType;
+    protected graphType: GraphType;
+    static get(editor: OnesEditor, id: string): MermaidInstance;
     code2ObjectUrl(code: string): Promise<string>;
     code2ResourceId(code: string): Promise<string>;
-    destroy(): void;
+    static createEmptyEmbedData: () => {
+        mermaidText: string;
+        src: string;
+    };
+    protected createGraphEmbedData: (block: BlockElement, data: Partial<StandardGraphData>) => import("@ones-editor/core").DocEmbedData;
+    protected getGraphData: (blockData: DocEmbedBlock) => StandardGraphData;
 }

package/@ones-editor/graph-embed/src/plantuml/plantuml-embed.d.ts

@@ -1,4 +1,4 @@
-import type { Embed } from '../../../../@ones-editor/core';
+import { Embed } from '../../../../@ones-editor/core';
 import '../lang';
 declare const PlantumlEmbed: Embed;
 export default PlantumlEmbed;

package/@ones-editor/graph-embed/src/plantuml/plantuml-helper.d.ts

@@ -1,3 +1,4 @@
-import type { OnesEditor } from '../../../../@ones-editor/core';
+import { OnesEditor } from '../../../../@ones-editor/core';
+export declare const PLANTUML_TYPE = "plantuml";
 export declare function plantumlCodeToUrl(editor: OnesEditor, plantumlText: string): string;
 export declare function plantumlUrlToResourceId(editor: OnesEditor, url: string): Promise<string>;

package/@ones-editor/graph-embed/src/plantuml/plantuml.d.ts

@@ -1,9 +1,17 @@
-import type { OnesEditor, DocEmbedBlock } from '../../../../@ones-editor/core';
+import { OnesEditor, DocEmbedBlock, BlockElement } from '../../../../@ones-editor/core';
 import GraphBase from '../helper/graph-base';
+import { GraphType, StandardGraphData } from '../types';
 export declare class PlantumlInstance extends GraphBase {
-    constructor(editor: OnesEditor);
-    static get(editor: OnesEditor, block: DocEmbedBlock): PlantumlInstance;
+    static graphType: GraphType;
+    protected graphType: GraphType;
+    static get(editor: OnesEditor, id: string): PlantumlInstance;
     protected code2ObjectUrl(code: string): Promise<string>;
     protected code2ResourceId(code: string): Promise<string>;
+    static createEmptyEmbedData: () => {
+        plantumlText: string;
+        src: string;
+    };
+    protected createGraphEmbedData: (block: BlockElement, data: Partial<StandardGraphData>) => import("@ones-editor/core").DocEmbedData;
+    protected getGraphData: (blockData: DocEmbedBlock) => StandardGraphData;
     destroy(): void;
 }

package/@ones-editor/graph-embed/src/types.d.ts

@@ -0,0 +1,38 @@
+import { CommandItem, OnesEditor } from '../../../@ones-editor/core';
+import { StandardEmbedBlockProperties } from '../../../@ones-editor/embed-block-helper';
+export type MermaidEmbedOptions = {
+    cdn?: {
+        mermaid?: string;
+    };
+};
+export type FlowCharEmbedOptions = {
+    cdn?: {
+        flowchart?: string[];
+    };
+};
+export type PlantumlEmbedOptions = {
+    cdn?: {
+        plantuml?: string;
+    };
+};
+export interface GraphCommandItem extends CommandItem {
+    execute: (editor: OnesEditor, containerId: string, blockIndex: number) => void;
+}
+export interface StandardGraphData {
+    src: string;
+    code: string;
+    flex?: number;
+    height?: number;
+    view?: string;
+}
+export type GraphType = 'mermaid' | 'flowchart' | 'plantuml';
+export type GraphEmbedBlockProperties = StandardEmbedBlockProperties;
+export interface MermaidData extends Omit<StandardGraphData, 'code'> {
+    mermaidText: string;
+}
+export interface PlantumlData extends Omit<StandardGraphData, 'code'> {
+    plantumlText: string;
+}
+export interface FlowchartData extends Omit<StandardGraphData, 'code'> {
+    flowchartText: string;
+}