inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/processDrawingConfiguration/editor/previewModal.tsx

@@ -1,121 +1,121 @@
-import {
-  defineComponent,
-  nextTick,
-  onMounted,
-  shallowRef,
-  watch,
-  reactive,
-  ref,
-} from "vue";
-import useVModel from "@/pageComponent/hooks/useVModel";
-import { toPreviewData } from "@/pageComponent/hooks/toPreviewData";
-import propertyModal from "../components/propertyModal";
-import inlTpEditor from "../editor-util/index.js";
-import { DataItem } from "../components/propertyModal";
-import { getState, lineAnimate, getTextPosition } from "../hooks";
-
-/**
- * 预览弹窗
- */
-
-const PreviewModal = defineComponent({
-  emits: ["update:visible"],
-  props: {
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    json: {
-      type: String,
-    },
-  },
-  components: { propertyModal },
-  setup(props, { emit }) {
-    const isVisible = useVModel(props, "visible", emit);
-    const canvas = shallowRef<inlTpEditor>()!;
-    const data = reactive<{
-      list: DataItem;
-      thingPropertyList: Array<{
-        [key: string]: string | number | boolean | null;
-      }>;
-    }>({
-      list: {
-        title: "",
-        tabList: [],
-      },
-      thingPropertyList: [],
-    });
-    const equipment = ref();
-    const equipModalVisbible = ref(false);
-    watch(isVisible, async (val) => {
-      if (val) {
-        await nextTick();
-        canvas.value = new inlTpEditor({
-          boxElement: "previewBox",
-          isPreview: true,
-        });
-        if (props.json) {
-          canvas.value.loadJsonString(props.json, async () => {
-            await nextTick();
-            canvas.value?.zoomToFitCanvas();
-            getTextPosition(canvas.value);
-            await nextTick();
-            getState(canvas.value);
-            // setInterval(() => {
-            //   getState(canvas.value);
-            // }, 3000);
-            lineAnimate(canvas.value);
-          });
-          // 设备弹窗
-          canvas.value.canvas.on("mouse:down:before", async (e) => {
-            console.log(e.target);
-            equipment.value = e.target?.data;
-            if (
-              equipment.value?.effectType &&
-              equipment.value?.effectType === "svg"
-            ) {
-              if (equipment.value.customData?.events?.mousedown) {
-                equipModalVisbible.value = true;
-                if (equipment.value.instanceId) {
-                  toPreviewData(equipment.value).then((val) => {
-                    data.list = val.obj;
-                    data.thingPropertyList = val.thingPropertyList;
-                  });
-                }
-              }
-            }
-          });
-        }
-      } else {
-        canvas.value?.destroy();
-      }
-    }); // 重新添加设备属性
-    return () => (
-      <div class="previewModal">
-        <propertyModal
-          data={data.list}
-          v-models={[[equipModalVisbible.value, "visible"]]}
-          thingPropertyList={data.thingPropertyList}
-        ></propertyModal>
-        {isVisible.value ? (
-          <a-modal
-            wrapClassName="preview-flow-modal"
-            title="预览"
-            width="100%"
-            mask={false}
-            getContainer={() => document.querySelector(".processFlow")}
-            v-model={[isVisible.value, "visible"]}
-            footer={null}
-            v-slots={{ closeIcon: () => <close-outlined /> }}
-          >
-            <div id="previewBox">
-              <canvas id="previewCanvas"></canvas>
-            </div>
-          </a-modal>
-        ) : null}
-      </div>
-    );
-  },
-});
-
-export default PreviewModal;
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  shallowRef,
+  watch,
+  reactive,
+  ref,
+} from "vue";
+import useVModel from "@/pageComponent/hooks/useVModel";
+import { toPreviewData } from "@/pageComponent/hooks/toPreviewData";
+import propertyModal from "../components/propertyModal";
+import inlTpEditor from "../editor-util/index.js";
+import { DataItem } from "../components/propertyModal";
+import { getState, lineAnimate, getTextPosition } from "../hooks";
+
+/**
+ * 预览弹窗
+ */
+
+const PreviewModal = defineComponent({
+  emits: ["update:visible"],
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    json: {
+      type: String,
+    },
+  },
+  components: { propertyModal },
+  setup(props, { emit }) {
+    const isVisible = useVModel(props, "visible", emit);
+    const canvas = shallowRef<inlTpEditor>()!;
+    const data = reactive<{
+      list: DataItem;
+      thingPropertyList: Array<{
+        [key: string]: string | number | boolean | null;
+      }>;
+    }>({
+      list: {
+        title: "",
+        tabList: [],
+      },
+      thingPropertyList: [],
+    });
+    const equipment = ref();
+    const equipModalVisbible = ref(false);
+    watch(isVisible, async (val) => {
+      if (val) {
+        await nextTick();
+        canvas.value = new inlTpEditor({
+          boxElement: "previewBox",
+          isPreview: true,
+        });
+        if (props.json) {
+          canvas.value.loadJsonString(props.json, async () => {
+            await nextTick();
+            canvas.value?.zoomToFitCanvas();
+            getTextPosition(canvas.value);
+            await nextTick();
+            getState(canvas.value);
+            // setInterval(() => {
+            //   getState(canvas.value);
+            // }, 3000);
+            lineAnimate(canvas.value);
+          });
+          // 设备弹窗
+          canvas.value.canvas.on("mouse:down:before", async (e) => {
+            console.log(e.target);
+            equipment.value = e.target?.data;
+            if (
+              equipment.value?.effectType &&
+              equipment.value?.effectType === "svg"
+            ) {
+              if (equipment.value.customData?.events?.mousedown) {
+                equipModalVisbible.value = true;
+                if (equipment.value.instanceId) {
+                  toPreviewData(equipment.value).then((val) => {
+                    data.list = val.obj;
+                    data.thingPropertyList = val.thingPropertyList;
+                  });
+                }
+              }
+            }
+          });
+        }
+      } else {
+        canvas.value?.destroy();
+      }
+    }); // 重新添加设备属性
+    return () => (
+      <div class="previewModal">
+        <propertyModal
+          data={data.list}
+          v-models={[[equipModalVisbible.value, "visible"]]}
+          thingPropertyList={data.thingPropertyList}
+        ></propertyModal>
+        {isVisible.value ? (
+          <a-modal
+            wrapClassName="preview-flow-modal"
+            title="预览"
+            width="100%"
+            mask={false}
+            getContainer={() => document.querySelector(".processFlow")}
+            v-model={[isVisible.value, "visible"]}
+            footer={null}
+            v-slots={{ closeIcon: () => <close-outlined /> }}
+          >
+            <div id="previewBox">
+              <canvas id="previewCanvas"></canvas>
+            </div>
+          </a-modal>
+        ) : null}
+      </div>
+    );
+  },
+});
+
+export default PreviewModal;

package/src/pageComponent/views/processDrawingConfiguration/editor/utils.ts

@@ -1,76 +1,76 @@
-import inlTpEditor from "../editor-util/index.js";
-
-/**
- * 监听实例移动 控制实例的附属元素跟随实例
- * @param canvas canvas
- */
-export const watchThingMove = (instance: inlTpEditor) => {
-  let child: any[] = [];
-  let status = false;
-  const canvas = instance.canvas;
-
-  canvas.on("mouse:down:before", (e) => {
-    const target = e.target! as any;
-    if (target?.data?.effectType === "svg" && instance.state !== "createLine") {
-      status = true;
-      child = [];
-
-      // 获取当前svg下所有的动态和静态属性
-      for (let i of canvas.getObjects() as Array<fabric.Object>) {
-        if (
-          i.data?.effectType !== "svg" &&
-          i.data?.instanceId &&
-          i.data.instanceId === target.id
-        ) {
-          const offsetX = target.left! - i.left!;
-          const offsetY = target.top! - i.top!;
-          child.push({
-            target: i,
-            offsetX,
-            offsetY,
-          });
-        }
-      }
-    }
-  });
-  canvas.on("mouse:move", (e) => {
-    if (status) {
-      for (let i of child as Array<{
-        target: fabric.Object;
-        offsetX: number;
-        offsetY: number;
-      }>) {
-        // 获取每一个元素的位置
-        const left = e.target?.left! - i.offsetX;
-        const top = e.target?.top! - i.offsetY;
-        i.target.set({
-          left,
-          top,
-        });
-      }
-    }
-  });
-  canvas.on("mouse:up", (e) => {
-    status = false;
-    child = [];
-  });
-};
-
-/**
- * 监听实例移除 同时移除附属元素
- * @param canvas canvas
- */
-export const watchThingRemove = (canvas: inlTpEditor) => {
-  canvas.onElementRemove((instance) => {
-    const allElements = canvas.canvas.getObjects();
-    for (const element of allElements) {
-      if (
-        element.data?.effectType === "property" &&
-        element.data?.instanceId === instance.id
-      ) {
-        canvas.canvas.remove(element);
-      }
-    }
-    canvas.canvas.requestRenderAll();
-  });
-};
+import inlTpEditor from "../editor-util/index.js";
+
+/**
+ * 监听实例移动 控制实例的附属元素跟随实例
+ * @param canvas canvas
+ */
+export const watchThingMove = (instance: inlTpEditor) => {
+  let child: any[] = [];
+  let status = false;
+  const canvas = instance.canvas;
+
+  canvas.on("mouse:down:before", (e) => {
+    const target = e.target! as any;
+    if (target?.data?.effectType === "svg" && instance.state !== "createLine") {
+      status = true;
+      child = [];
+
+      // 获取当前svg下所有的动态和静态属性
+      for (let i of canvas.getObjects() as Array<fabric.Object>) {
+        if (
+          i.data?.effectType !== "svg" &&
+          i.data?.instanceId &&
+          i.data.instanceId === target.id
+        ) {
+          const offsetX = target.left! - i.left!;
+          const offsetY = target.top! - i.top!;
+          child.push({
+            target: i,
+            offsetX,
+            offsetY,
+          });
+        }
+      }
+    }
+  });
+  canvas.on("mouse:move", (e) => {
+    if (status) {
+      for (let i of child as Array<{
+        target: fabric.Object;
+        offsetX: number;
+        offsetY: number;
+      }>) {
+        // 获取每一个元素的位置
+        const left = e.target?.left! - i.offsetX;
+        const top = e.target?.top! - i.offsetY;
+        i.target.set({
+          left,
+          top,
+        });
+      }
+    }
+  });
+  canvas.on("mouse:up", (e) => {
+    status = false;
+    child = [];
+  });
+};
+
+/**
+ * 监听实例移除 同时移除附属元素
+ * @param canvas canvas
+ */
+export const watchThingRemove = (canvas: inlTpEditor) => {
+  canvas.onElementRemove((instance) => {
+    const allElements = canvas.canvas.getObjects();
+    for (const element of allElements) {
+      if (
+        element.data?.effectType === "property" &&
+        element.data?.instanceId === instance.id
+      ) {
+        canvas.canvas.remove(element);
+      }
+    }
+    canvas.canvas.requestRenderAll();
+  });
+};

package/src/pageComponent/views/processDrawingConfiguration/editor-util/index.d.ts

@@ -1,98 +1,98 @@
-import { fabric } from "fabric";
-import LineAnimate from "./animate/line";
-import { LineState } from "./config/line";
-import { Alignparam } from "./config/align/index.enum";
-import { Levels } from "./config/level/index.enum";
-import Grid from "./draw/renderGrid";
-import Scale from "./draw/scale";
-import { Pattern } from "fabric/fabric-impl";
-interface inlTpEditor {
-    id: string;
-    canvas: ITE.Canvas;
-    opt: inlTpEditorconstructor;
-    state: string;
-    config: {
-        line: fabric.IPolylineOptions;
-        shape: fabric.IRectOptions;
-    };
-}
-declare type inlTpEditorconstructor = {
-    boxElement?: string;
-    url?: string;
-    svgUrl?: string;
-    isPreview?: boolean;
-    id?: string;
-    scaleHd?: number;
-    customEvent?: (canvas: ITE.Canvas) => void;
-    uploadFile?: {
-        customFun: (file: File) => Promise<any>;
-    };
-    fConfig?: fabric.ICanvasOptions;
-    config?: {
-        line?: fabric.IPolylineOptions;
-        shape?: fabric.IRectOptions;
-    };
-};
-declare class inlTpEditor {
-    constructor(opt: inlTpEditorconstructor);
-    elementId: string;
-    enums: {
-        Alignparam: typeof Alignparam;
-        LineState: typeof LineState;
-        Levels: typeof Levels;
-    };
-    newCanvas(): void;
-    init(): void;
-    initEditorBackground(): void;
-    setBackground(s: string | Pattern, cb?: Function): void;
-    getBackground(): string | fabric.Pattern | undefined;
-    changeGridVisibility(): void;
-    scale: Scale;
-    grid: Grid;
-    setLineColor(line: ITE.Polyline, color: string): void;
-    setState(state: string): void;
-    zoomToFitCanvas(): void;
-    draw: {
-        path: (this: any, opt: {
-            path: import("./draw/path").PathInfo;
-            pathOpt?: import("./draw/path").PathOpt | undefined;
-        }) => ITE.Object;
-        text: (opt: {
-            name: string;
-            parentId: string;
-            option?: fabric.ITextOptions | undefined;
-        }) => ITE.Object | ITE.Image | ITE.Polyline;
-    };
-    updateImg: (canvas: any, id: string, src: string) => void;
-    updateState: (canvas: any, id: string, value: string) => void;
-    align: (alignparam: number) => void;
-    setLevel: (idOrEle: string | ITE.Object, level: string) => fabric.Object | undefined;
-    injectEvent(): void;
-    flip: {
-        x: () => void;
-        y: () => void;
-    };
-    loadJsonString: (s: string | Object, cb?: (() => void) | undefined) => void;
-    toJson(): string;
-    util: {
-        UUID: (n?: number | undefined) => string;
-        computedZoomXY: (e: Event, svg: ITE.Object, canvas: ITE.Canvas) => {
-            left: number;
-            top: number;
-        };
-        getWindowInfo: (domId?: string | undefined) => () => {
-            height: any;
-            width: any;
-        };
-        file: {
-            getExt: typeof import("./util/file").getExt;
-            getFiles: typeof import("./util/file").getFiles;
-        };
-    };
-    toImg(): string;
-    onAddElement(callBack: (item: ITE.Object) => void): void;
-    onElementRemove(callBack: (item: ITE.Object) => void): void;
-    destroy(): void;
-}
-export { LineAnimate };
-export default inlTpEditor;
+import { fabric } from "fabric";
+import LineAnimate from "./animate/line";
+import { LineState } from "./config/line";
+import { Alignparam } from "./config/align/index.enum";
+import { Levels } from "./config/level/index.enum";
+import Grid from "./draw/renderGrid";
+import Scale from "./draw/scale";
+import { Pattern } from "fabric/fabric-impl";
+interface inlTpEditor {
+    id: string;
+    canvas: ITE.Canvas;
+    opt: inlTpEditorconstructor;
+    state: string;
+    config: {
+        line: fabric.IPolylineOptions;
+        shape: fabric.IRectOptions;
+    };
+}
+declare type inlTpEditorconstructor = {
+    boxElement?: string;
+    url?: string;
+    svgUrl?: string;
+    isPreview?: boolean;
+    id?: string;
+    scaleHd?: number;
+    customEvent?: (canvas: ITE.Canvas) => void;
+    uploadFile?: {
+        customFun: (file: File) => Promise<any>;
+    };
+    fConfig?: fabric.ICanvasOptions;
+    config?: {
+        line?: fabric.IPolylineOptions;
+        shape?: fabric.IRectOptions;
+    };
+};
+declare class inlTpEditor {
+    constructor(opt: inlTpEditorconstructor);
+    elementId: string;
+    enums: {
+        Alignparam: typeof Alignparam;
+        LineState: typeof LineState;
+        Levels: typeof Levels;
+    };
+    newCanvas(): void;
+    init(): void;
+    initEditorBackground(): void;
+    setBackground(s: string | Pattern, cb?: Function): void;
+    getBackground(): string | fabric.Pattern | undefined;
+    changeGridVisibility(): void;
+    scale: Scale;
+    grid: Grid;
+    setLineColor(line: ITE.Polyline, color: string): void;
+    setState(state: string): void;
+    zoomToFitCanvas(): void;
+    draw: {
+        path: (this: any, opt: {
+            path: import("./draw/path").PathInfo;
+            pathOpt?: import("./draw/path").PathOpt | undefined;
+        }) => ITE.Object;
+        text: (opt: {
+            name: string;
+            parentId: string;
+            option?: fabric.ITextOptions | undefined;
+        }) => ITE.Object | ITE.Image | ITE.Polyline;
+    };
+    updateImg: (canvas: any, id: string, src: string) => void;
+    updateState: (canvas: any, id: string, value: string) => void;
+    align: (alignparam: number) => void;
+    setLevel: (idOrEle: string | ITE.Object, level: string) => fabric.Object | undefined;
+    injectEvent(): void;
+    flip: {
+        x: () => void;
+        y: () => void;
+    };
+    loadJsonString: (s: string | Object, cb?: (() => void) | undefined) => void;
+    toJson(): string;
+    util: {
+        UUID: (n?: number | undefined) => string;
+        computedZoomXY: (e: Event, svg: ITE.Object, canvas: ITE.Canvas) => {
+            left: number;
+            top: number;
+        };
+        getWindowInfo: (domId?: string | undefined) => () => {
+            height: any;
+            width: any;
+        };
+        file: {
+            getExt: typeof import("./util/file").getExt;
+            getFiles: typeof import("./util/file").getFiles;
+        };
+    };
+    toImg(): string;
+    onAddElement(callBack: (item: ITE.Object) => void): void;
+    onElementRemove(callBack: (item: ITE.Object) => void): void;
+    destroy(): void;
+}
+export { LineAnimate };
+export default inlTpEditor;