mind-elixir 4.5.1 → 5.0.0-beta.1

package/dist/mind-elixir.d.ts

@@ -0,0 +1,663 @@
+import type SelectionArea from '@viselect/vanilla';
+
+declare const addChild: (this: MindElixirInstance, el?: Topic, node?: NodeObj) => void;
+
+export declare interface Arrow {
+    id: string;
+    /**
+     * label of arrow
+     */
+    label: string;
+    /**
+     * id of start node
+     */
+    from: Uid;
+    /**
+     * id of end node
+     */
+    to: Uid;
+    /**
+     *  offset of control point from start point
+     */
+    delta1: {
+        x: number;
+        y: number;
+    };
+    /**
+     * offset of control point from end point
+     */
+    delta2: {
+        x: number;
+        y: number;
+    };
+    /**
+     * whether the arrow is bidirectional
+     */
+    bidirectional?: boolean;
+}
+
+declare namespace arrow {
+    export {
+        renderArrow,
+        editArrowLabel,
+        tidyArrow,
+        Arrow,
+        DivData,
+        ArrowOptions,
+        createArrow,
+        removeArrow,
+        selectArrow,
+        unselectArrow
+    }
+}
+
+export declare type ArrowOperation = {
+    name: 'createArrow';
+    obj: Arrow;
+} | {
+    name: 'removeArrow';
+    obj: {
+        id: string;
+    };
+} | {
+    name: 'finishEditArrowLabel';
+    obj: Arrow;
+};
+
+declare type ArrowOptions = {
+    bidirectional?: boolean;
+};
+
+declare type Before = Partial<{
+    [K in Operations]: (...args: Parameters<OperationMap[K]>) => Promise<boolean> | boolean;
+}>;
+
+declare const beginEdit: (this: MindElixirInstance, el?: Topic) => void;
+
+declare const Bus: {
+    create<T extends Record<string, (...args: any[]) => void> = EventMap>(): {
+        handlers: Record<keyof T, ((...arg: any[]) => void)[]>;
+        showHandler: () => void;
+        addListener: <K extends keyof T>(type: K, handler: T[K]) => void;
+        fire: <K_1 extends keyof T>(type: K_1, ...payload: Parameters<T[K_1]>) => void;
+        removeListener: <K_2 extends keyof T>(type: K_2, handler: T[K_2]) => void;
+    };
+};
+
+export declare interface Children extends HTMLElement {
+    parentNode: Wrapper;
+    children: HTMLCollection & Wrapper[];
+    parentElement: Wrapper;
+    firstChild: Wrapper;
+    previousSibling: Parent;
+}
+
+declare type ContextMenuOption = {
+    focus?: boolean;
+    link?: boolean;
+    extend?: {
+        name: string;
+        key?: string;
+        onclick: (e: MouseEvent) => void;
+    }[];
+};
+
+declare const copyNode: (this: MindElixirInstance, node: Topic, to: Topic) => void;
+
+declare const copyNodes: (this: MindElixirInstance, tpcs: Topic[], to: Topic) => void;
+
+declare const create: (dom: HTMLElement) => {
+    dom: HTMLElement;
+    moved: boolean;
+    mousedown: boolean;
+    handleMouseMove(e: MouseEvent): void;
+    handleMouseDown(e: MouseEvent): void;
+    handleClear(e: MouseEvent): void;
+    cb: ((deltaX: number, deltaY: number) => void) | null;
+    init(map: HTMLElement, cb: (deltaX: number, deltaY: number) => void): void;
+    destory(map: HTMLElement): void;
+    clear(): void;
+};
+
+declare const createArrow: (this: MindElixirInstance, from: Topic, to: Topic, options?: ArrowOptions) => void;
+
+declare const createSummary: (this: MindElixirInstance) => void;
+
+export declare type CustomArrow = SVGPathElement;
+
+export declare type CustomLine = SVGPathElement;
+
+export declare interface CustomSvg extends SVGGElement {
+    arrowObj: Arrow;
+    children: HTMLCollection & [CustomLine, CustomArrow, CustomArrow, SVGTextElement];
+}
+
+declare enum DirectionClass {
+    LHS = "lhs",
+    RHS = "rhs"
+}
+
+declare type DivData = {
+    cx: number;
+    cy: number;
+    w: number;
+    h: number;
+    ctrlX: number;
+    ctrlY: number;
+};
+
+declare function editArrowLabel(this: MindElixirInstance, el: CustomSvg): void;
+
+declare const editSummary: (this: MindElixirInstance, el: SummarySvgGroup) => void;
+
+export declare type EventMap = {
+    operation: (info: Operation) => void;
+    selectNode: (nodeObj: NodeObj, e?: MouseEvent) => void;
+    selectNewNode: (nodeObj: NodeObj) => void;
+    selectNodes: (nodeObj: NodeObj[]) => void;
+    unselectNode: () => void;
+    unselectNodes: () => void;
+    expandNode: (nodeObj: NodeObj) => void;
+    linkDiv: () => void;
+    scale: (scale: number) => void;
+    /**
+     *  please use throttling to prevent performance degradation
+     */
+    updateArrowDelta: (arrow: Arrow) => void;
+};
+
+export declare interface Expander extends HTMLElement {
+    expanded?: boolean;
+    parentNode: Parent;
+    parentElement: Parent;
+    previousSibling: Topic;
+}
+
+declare const insertParent: (this: MindElixirInstance, el?: Topic, node?: NodeObj) => void;
+
+declare const insertSibling: (this: MindElixirInstance, type: 'before' | 'after', el?: Topic, node?: NodeObj) => void;
+
+declare type Left = 0;
+
+declare type LinkDragMoveHelperInstance = ReturnType<typeof create>;
+
+/**
+ * @public
+ */
+export declare type Locale = 'cn' | 'zh_CN' | 'zh_TW' | 'en' | 'ru' | 'ja' | 'pt' | 'it' | 'es' | 'fr' | 'ko';
+
+export declare interface MainLineParams {
+    pT: number;
+    pL: number;
+    pW: number;
+    pH: number;
+    cT: number;
+    cL: number;
+    cW: number;
+    cH: number;
+    direction: DirectionClass;
+    containerHeight: number;
+}
+
+/**
+ * Methods that mind-elixir instance can use
+ *
+ * @public
+ */
+export declare const methods: {
+    init(this: MindElixirInstance, data: MindElixirData): Error | undefined;
+    destroy(this: Partial<MindElixirInstance>): void;
+    exportSvg: (this: MindElixirInstance, noForeignObject?: boolean, injectCss?: string | undefined) => Blob;
+    exportPng: (this: MindElixirInstance, noForeignObject?: boolean, injectCss?: string | undefined) => Promise<Blob | null>;
+    createSummary: (this: MindElixirInstance) => void;
+    removeSummary: (this: MindElixirInstance, id: string) => void;
+    selectSummary: (this: MindElixirInstance, el: summary.SummarySvgGroup) => void;
+    unselectSummary: (this: MindElixirInstance) => void;
+    renderSummary: (this: MindElixirInstance) => void;
+    editSummary: (this: MindElixirInstance, el: summary.SummarySvgGroup) => void;
+    renderArrow(this: MindElixirInstance): void;
+    editArrowLabel(this: MindElixirInstance, el: CustomSvg): void;
+    tidyArrow(this: MindElixirInstance): void;
+    createArrow: (this: MindElixirInstance, from: Topic, to: Topic, options?: arrow.ArrowOptions) => void;
+    removeArrow: (this: MindElixirInstance, linkSvg?: CustomSvg | undefined) => void;
+    selectArrow: (this: MindElixirInstance, link: CustomSvg) => void;
+    unselectArrow: (this: MindElixirInstance) => void;
+    rmSubline: (this: MindElixirInstance, tpc: Topic) => Promise<void>;
+    reshapeNode: (this: MindElixirInstance, tpc: Topic, patchData: Partial<NodeObj>) => Promise<void>;
+    insertSibling: (this: MindElixirInstance, type: "before" | "after", el?: Topic | undefined, node?: NodeObj | undefined) => Promise<void>;
+    insertParent: (this: MindElixirInstance, el?: Topic | undefined, node?: NodeObj | undefined) => Promise<void>;
+    addChild: (this: MindElixirInstance, el?: Topic | undefined, node?: NodeObj | undefined) => Promise<void>;
+    copyNode: (this: MindElixirInstance, node: Topic, to: Topic) => Promise<void>;
+    copyNodes: (this: MindElixirInstance, tpcs: Topic[], to: Topic) => Promise<void>;
+    moveUpNode: (this: MindElixirInstance, el?: Topic | undefined) => Promise<void>;
+    moveDownNode: (this: MindElixirInstance, el?: Topic | undefined) => Promise<void>;
+    removeNode: (this: MindElixirInstance, el?: Topic | undefined) => Promise<void>;
+    removeNodes: (this: MindElixirInstance, tpcs: Topic[]) => Promise<void>;
+    moveNodeIn: (this: MindElixirInstance, from: Topic[], to: Topic) => Promise<void>;
+    moveNodeBefore: (this: MindElixirInstance, from: Topic[], to: Topic) => Promise<void>;
+    moveNodeAfter: (this: MindElixirInstance, from: Topic[], to: Topic) => Promise<void>;
+    beginEdit: (this: MindElixirInstance, el?: Topic | undefined) => Promise<void>;
+    setNodeTopic: (this: MindElixirInstance, el: Topic, topic: string) => Promise<void>;
+    selectNode: (this: MindElixirInstance, targetElement: Topic, isNewNode?: boolean | undefined, e?: MouseEvent | undefined) => void;
+    unselectNode: (this: MindElixirInstance) => void;
+    selectNodes: (this: MindElixirInstance, tpc: Topic[]) => void;
+    unselectNodes: (this: MindElixirInstance) => void;
+    clearSelection: (this: MindElixirInstance) => void;
+    getDataString: (this: MindElixirInstance) => string;
+    getData: (this: MindElixirInstance) => MindElixirData;
+    getDataMd: (this: MindElixirInstance) => string;
+    enableEdit: (this: MindElixirInstance) => void;
+    disableEdit: (this: MindElixirInstance) => void;
+    scale: (this: MindElixirInstance, scaleVal: number) => void;
+    toCenter: (this: MindElixirInstance) => void;
+    install: (this: MindElixirInstance, plugin: (instance: MindElixirInstance) => void) => void;
+    focusNode: (this: MindElixirInstance, el: Topic) => void;
+    cancelFocus: (this: MindElixirInstance) => void;
+    initLeft: (this: MindElixirInstance) => void;
+    initRight: (this: MindElixirInstance) => void;
+    initSide: (this: MindElixirInstance) => void;
+    setLocale: (this: MindElixirInstance, locale: Locale) => void;
+    expandNode: (this: MindElixirInstance, el: Topic, isExpand?: boolean | undefined) => void;
+    refresh: (this: MindElixirInstance, data?: MindElixirData | undefined) => void;
+    getObjById: (id: string, data: NodeObj) => NodeObj | null;
+    generateNewObj: (this: MindElixirInstance) => NodeObjExport;
+    layout: (this: MindElixirInstance) => void;
+    linkDiv: (this: MindElixirInstance, mainNode?: Wrapper | undefined) => void;
+    editTopic: (this: MindElixirInstance, el: Topic) => void;
+    createWrapper: (this: MindElixirInstance, nodeObj: NodeObj, omitChildren?: boolean | undefined) => {
+        grp: Wrapper;
+        top: Parent;
+        tpc: Topic;
+    };
+    createParent: (this: MindElixirInstance, nodeObj: NodeObj) => {
+        p: Parent;
+        tpc: Topic;
+    };
+    createChildren: (this: MindElixirInstance, wrappers: Wrapper[]) => Children;
+    createTopic: (this: MindElixirInstance, nodeObj: NodeObj) => Topic;
+    findEle: (id: string, instance?: MindElixirInstance | undefined) => Topic;
+    changeTheme: (this: MindElixirInstance, theme: Theme, shouldRefresh?: boolean) => void;
+};
+
+/**
+ * The exported data of MindElixir
+ *
+ * @public
+ */
+export declare type MindElixirData = {
+    nodeData: NodeObj;
+    arrows?: Arrow[];
+    summaries?: Summary[];
+    direction?: number;
+    theme?: Theme;
+};
+
+/**
+ * The MindElixir instance
+ *
+ * @public
+ */
+export declare interface MindElixirInstance extends MindElixirMethods_2 {
+    disposable: Array<() => void>;
+    isFocusMode: boolean;
+    nodeDataBackup: NodeObj;
+    mindElixirBox: HTMLElement;
+    nodeData: NodeObj;
+    arrows: Arrow[];
+    summaries: Summary[];
+    currentNode: Topic | null;
+    currentNodes: Topic[] | null;
+    currentSummary: SummarySvgGroup | null;
+    currentArrow: CustomSvg | null;
+    waitCopy: Topic[] | null;
+    scaleVal: number;
+    tempDirection: number | null;
+    theme: Theme;
+    userTheme?: Theme;
+    direction: number;
+    locale: Locale;
+    draggable: boolean;
+    editable: boolean;
+    contextMenu: boolean;
+    contextMenuOption?: ContextMenuOption;
+    toolBar: boolean;
+    keypress: boolean;
+    mouseSelectionButton: 0 | 2;
+    before: Before;
+    newTopicName: string;
+    allowUndo: boolean;
+    overflowHidden: boolean;
+    mainBranchStyle: number;
+    subBranchStyle: number;
+    generateMainBranch: (params: MainLineParams) => PathString;
+    generateSubBranch: (params: SubLineParams) => PathString;
+    container: HTMLElement;
+    map: HTMLElement;
+    root: HTMLElement;
+    nodes: HTMLElement;
+    lines: SVGElement;
+    summarySvg: SVGElement;
+    linkController: SVGElement;
+    P2: HTMLElement;
+    P3: HTMLElement;
+    line1: SVGElement;
+    line2: SVGElement;
+    linkSvgGroup: SVGElement;
+    /**
+     * @internal
+     */
+    helper1?: LinkDragMoveHelperInstance;
+    /**
+     * @internal
+     */
+    helper2?: LinkDragMoveHelperInstance;
+    bus: ReturnType<typeof Bus.create<EventMap>>;
+    history: Operation[];
+    undo: () => void;
+    redo: () => void;
+    selection: SelectionArea;
+    selectionContainer?: string | HTMLElement;
+}
+
+export declare type MindElixirMethods = typeof methods;
+
+declare type MindElixirMethods_2 = typeof methods;
+
+declare const moveDownNode: (this: MindElixirInstance, el?: Topic) => void;
+
+declare const moveNodeAfter: (this: MindElixirInstance, from: Topic[], to: Topic) => void;
+
+declare const moveNodeBefore: (this: MindElixirInstance, from: Topic[], to: Topic) => void;
+
+declare const moveNodeIn: (this: MindElixirInstance, from: Topic[], to: Topic) => void;
+
+declare const moveUpNode: (this: MindElixirInstance, el?: Topic) => void;
+
+declare type MultipleNodeOperation = {
+    name: 'removeNodes';
+    objs: NodeObj[];
+} | {
+    name: 'copyNodes';
+    objs: NodeObj[];
+};
+
+/**
+ * MindElixir node object
+ *
+ * @public
+ */
+export declare type NodeObj = {
+    topic: string;
+    id: Uid;
+    style?: {
+        fontSize?: string;
+        color?: string;
+        background?: string;
+        fontWeight?: string;
+    };
+    children?: NodeObj[];
+    tags?: string[];
+    icons?: string[];
+    hyperLink?: string;
+    expanded?: boolean;
+    direction?: Left | Right;
+    image?: {
+        url: string;
+        width: number;
+        height: number;
+        fit?: 'fill' | 'contain' | 'cover';
+    };
+    branchColor?: string;
+    parent?: NodeObj;
+    dangerouslySetInnerHTML?: string;
+};
+
+export declare type NodeObjExport = Omit<NodeObj, 'parent'>;
+
+declare type NodeOperation = {
+    name: 'moveNodeIn' | 'moveDownNode' | 'moveUpNode' | 'copyNode' | 'addChild' | 'insertParent' | 'insertBefore' | 'beginEdit';
+    obj: NodeObj;
+} | {
+    name: 'insertSibling';
+    type: 'before' | 'after';
+    obj: NodeObj;
+} | {
+    name: 'reshapeNode';
+    obj: NodeObj;
+    origin: NodeObj;
+} | {
+    name: 'finishEdit';
+    obj: NodeObj;
+    origin: string;
+} | {
+    name: 'moveNodeAfter' | 'moveNodeBefore' | 'moveNodeIn';
+    objs: NodeObj[];
+    toObj: NodeObj;
+} | {
+    name: 'removeNode';
+    obj: NodeObj;
+    originIndex?: number;
+    originParentId?: string;
+};
+
+declare namespace nodeOperation {
+    export {
+        rmSubline,
+        reshapeNode,
+        insertSibling,
+        insertParent,
+        addChild,
+        copyNode,
+        copyNodes,
+        moveUpNode,
+        moveDownNode,
+        removeNode,
+        removeNodes,
+        moveNodeIn,
+        moveNodeBefore,
+        moveNodeAfter,
+        beginEdit,
+        setNodeTopic
+    }
+}
+
+export declare type Operation = NodeOperation | MultipleNodeOperation | SummaryOperation | ArrowOperation;
+
+declare type OperationMap = typeof nodeOperation;
+
+declare type Operations = keyof OperationMap;
+
+export declare type OperationType = Operation['name'];
+
+/**
+ * The MindElixir options
+ *
+ * @public
+ */
+export declare type Options = {
+    el: string | HTMLElement;
+    direction?: number;
+    locale?: Locale;
+    draggable?: boolean;
+    editable?: boolean;
+    contextMenu?: boolean;
+    contextMenuOption?: ContextMenuOption;
+    toolBar?: boolean;
+    keypress?: boolean;
+    mouseSelectionButton?: 0 | 2;
+    before?: Before;
+    newTopicName?: string;
+    allowUndo?: boolean;
+    overflowHidden?: boolean;
+    generateMainBranch?: (this: MindElixirInstance, params: MainLineParams) => PathString;
+    generateSubBranch?: (this: MindElixirInstance, params: SubLineParams) => PathString;
+    theme?: Theme;
+    nodeMenu?: boolean;
+    selectionContainer?: string | HTMLElement;
+};
+
+export declare interface Parent extends HTMLElement {
+    firstChild: Topic;
+    children: HTMLCollection & [Topic, Expander | undefined];
+    parentNode: Wrapper;
+    parentElement: Wrapper;
+    nextSibling: Children;
+    offsetParent: Wrapper;
+}
+
+declare type PathString = string;
+
+declare const removeArrow: (this: MindElixirInstance, linkSvg?: CustomSvg) => void;
+
+declare const removeNode: (this: MindElixirInstance, el?: Topic) => void;
+
+declare const removeNodes: (this: MindElixirInstance, tpcs: Topic[]) => void;
+
+declare const removeSummary: (this: MindElixirInstance, id: string) => void;
+
+declare function renderArrow(this: MindElixirInstance): void;
+
+declare const renderSummary: (this: MindElixirInstance) => void;
+
+declare const reshapeNode: (this: MindElixirInstance, tpc: Topic, patchData: Partial<NodeObj>) => void;
+
+declare type Right = 1;
+
+declare const rmSubline: (tpc: Topic) => void;
+
+declare const selectArrow: (this: MindElixirInstance, link: CustomSvg) => void;
+
+declare const selectSummary: (this: MindElixirInstance, el: SummarySvgGroup) => void;
+
+declare const setNodeTopic: (this: MindElixirInstance, el: Topic, topic: string) => void;
+
+export declare interface SubLineParams {
+    pT: number;
+    pL: number;
+    pW: number;
+    pH: number;
+    cT: number;
+    cL: number;
+    cW: number;
+    cH: number;
+    direction: DirectionClass;
+    isFirst: boolean | undefined;
+}
+
+/**
+ * @public
+ */
+export declare interface Summary {
+    id: string;
+    text: string;
+    /**
+     * parent node id of the summary
+     */
+    parent: string;
+    /**
+     * start index of the summary
+     */
+    start: number;
+    /**
+     * end index of the summary
+     */
+    end: number;
+}
+
+declare namespace summary {
+    export {
+        Summary,
+        SummarySvgGroup,
+        createSummary,
+        removeSummary,
+        selectSummary,
+        unselectSummary,
+        renderSummary,
+        editSummary
+    }
+}
+
+export declare type SummaryOperation = {
+    name: 'createSummary';
+    obj: Summary;
+} | {
+    name: 'removeSummary';
+    obj: {
+        id: string;
+    };
+} | {
+    name: 'finishEditSummary';
+    obj: Summary;
+};
+
+export declare type SummarySvgGroup = SVGGElement & {
+    children: [SVGPathElement, SVGTextElement];
+    summaryObj: Summary;
+};
+
+/**
+ * MindElixir Theme
+ *
+ * @public
+ */
+export declare type Theme = {
+    name: string;
+    /**
+     * Hint for developers to use the correct theme
+     */
+    type?: 'light' | 'dark';
+    /**
+     * Color palette for main branches
+     */
+    palette: string[];
+    cssVar: Partial<{
+        '--gap': string;
+        '--main-color': string;
+        '--main-bgcolor': string;
+        '--color': string;
+        '--bgcolor': string;
+        '--selected': string;
+        '--root-color': string;
+        '--root-bgcolor': string;
+        '--root-border-color': string;
+        '--root-radius': string;
+        '--main-radius': string;
+        '--topic-padding': string;
+        '--panel-color': string;
+        '--panel-bgcolor': string;
+        '--panel-border-color': string;
+    }>;
+};
+
+declare function tidyArrow(this: MindElixirInstance): void;
+
+export declare interface Topic extends HTMLElement {
+    nodeObj: NodeObj;
+    parentNode: Parent;
+    parentElement: Parent;
+    offsetParent: Parent;
+    text: HTMLSpanElement;
+    expander?: Expander;
+    link?: HTMLElement;
+    image?: HTMLImageElement;
+    icons?: HTMLSpanElement;
+    tags?: HTMLDivElement;
+}
+
+declare type Uid = string;
+
+declare const unselectArrow: (this: MindElixirInstance) => void;
+
+declare const unselectSummary: (this: MindElixirInstance) => void;
+
+export declare interface Wrapper extends HTMLElement {
+    firstChild: Parent;
+    children: HTMLCollection & [Parent, Children];
+    parentNode: Children;
+    parentElement: Children;
+    offsetParent: Wrapper;
+    previousSibling: Wrapper | null;
+    nextSibling: Wrapper | null;
+}
+
+export { }

package/dist/types/docs.d.ts

@@ -1,10 +1,10 @@
 import type { Arrow } from './arrow';
 import type methods from './methods';
-import type { MindElixirMethods } from './methods';
 import type { Summary, SummarySvgGroup } from './summary';
 import type { MindElixirData, MindElixirInstance, NodeObj, NodeObjExport, Options, Theme } from './types';
 import type { MainLineParams, SubLineParams } from './utils/generateBranch';
 import type { Locale } from './i18n';
-export { methods, Theme, Options, MindElixirMethods, MindElixirInstance, MindElixirData, NodeObj, NodeObjExport, Summary, SummarySvgGroup, Arrow, MainLineParams, SubLineParams, Locale, };
+export { methods, Theme, Options, MindElixirInstance, MindElixirData, NodeObj, NodeObjExport, Summary, SummarySvgGroup, Arrow, MainLineParams, SubLineParams, Locale, };
+export type MindElixirMethods = typeof methods;
 export type * from './types/dom';
 export type * from './utils/pubsub';