form-designer-xinyi 1.0.0

package/packages/utils/common/element.ts

@@ -0,0 +1,166 @@
+import { onKeyUp, onKeyDown } from "@vueuse/core";
+import { useShareStore } from "../shareStore";
+import { type Ref, watch, ref } from "vue";
+
+/**
+ * 是否按住键盘状态
+ * @returns
+ *  pressSpace: Ref<boolean>;
+ *  pressShift: Ref<boolean>;
+ *  pressCtrl: Ref<boolean>;
+ */
+export function useKeyPress() {
+  // 是否按住空格键
+  const pressSpace = ref(false);
+  // 是否按住shift键
+  const pressShift = ref(false);
+  // 是否按住ctrl键
+  const pressCtrl = ref(false);
+  onKeyDown(" ", (e) => {
+    var element = e.target as HTMLElement;
+    if (!["INPUT", "TEXTAREA"].includes(element.tagName)) {
+      e.preventDefault();
+    }
+    pressSpace.value = true;
+  });
+  onKeyUp(" ", () => {
+    pressSpace.value = false;
+  });
+
+  onKeyDown("Shift", (e) => {
+    e.preventDefault();
+    pressShift.value = true;
+  });
+  onKeyUp("Shift", () => {
+    pressShift.value = false;
+  });
+
+  onKeyDown("Control", (e) => {
+    e.preventDefault();
+    pressCtrl.value = true;
+  });
+  onKeyUp("Control", () => {
+    pressCtrl.value = false;
+  });
+
+  return { pressSpace, pressShift, pressCtrl };
+}
+
+/**
+ * 拖拽元素
+ * @param editScreenContainer
+ * @returns
+ */
+export function useElementDrag(
+  editScreenContainer: Ref<HTMLDivElement | null>
+) {
+  const { pressSpace } = useShareStore();
+
+  let startX = 0;
+  let startY = 0;
+  function handleElementDragStart(event: DragEvent) {
+    startX = event.x;
+    startY = event.y;
+    event.dataTransfer?.setDragImage(document.createElement("div"), 0, 0);
+  }
+
+  /**
+   * 拖拽设计区域
+   * @param event
+   */
+  function handleElementDrag(event: DragEvent) {
+    event.preventDefault();
+    // 计算新的光标位置：
+    if (!event.x || !event.y || !pressSpace.value) {
+      return;
+    }
+    const offsetX = event.x - startX;
+    const offsetY = event.y - startY;
+    startX = event.x;
+    startY = event.y;
+    if (editScreenContainer.value) {
+      editScreenContainer.value.scrollTop -= offsetY;
+      editScreenContainer.value.scrollLeft -= offsetX;
+    }
+  }
+
+  function handleElementDragEnd() {
+    pressSpace.value = false;
+  }
+
+  return { handleElementDragStart, handleElementDrag, handleElementDragEnd };
+}
+
+/**
+ * 缩放元素
+ * @param draggableElRef
+ * @returns
+ */
+export function useElementZoom(draggableElRef: Ref<HTMLDivElement | null>) {
+  const { pressCtrl, canvasScale, disabledZoom } = useShareStore();
+  /**
+   * 缩放操作
+   * @param e
+   * @returns
+   */
+  function handleZoom(event: WheelEvent) {
+    if (!pressCtrl.value || disabledZoom.value) {
+      return;
+    }
+    event.preventDefault();
+
+    let newScale = 0;
+    if (event.deltaY < 0) {
+      newScale = canvasScale.value + 0.05;
+    } else {
+      newScale = canvasScale.value - 0.05;
+    }
+    // 限制缩放范围
+    if (newScale > 150 || newScale < 0.5) {
+      return;
+    }
+
+    canvasScale.value = newScale;
+  }
+
+  // 启用监听缩放
+  watch(
+    () => canvasScale.value,
+    (e) => {
+      if (draggableElRef.value && !disabledZoom.value) {
+        draggableElRef.value.style.transform = `scale(${e})`;
+      }
+    }
+  );
+
+  return { handleZoom, canvasScale };
+}
+
+/**
+ * 创建定时任务hooks
+ * @param handler 任务函数
+ * @param timeout 任务间隔
+ * @returns 
+ */
+export function useTimedQuery(handler: () => void, timeout = 16.66) {
+  let timer: number;
+
+  /**
+   * 开始任务执行
+   */
+  function startTimedQuery() {
+    stopTimedQuery();
+    timer = window.setInterval(handler, timeout);
+  }
+
+  /**
+   * 结束任务执行
+   */
+  function stopTimedQuery() {
+    window.clearInterval(timer);
+  }
+  return {
+    startTimedQuery,
+    stopTimedQuery,
+  };
+}

package/packages/utils/common/index.ts

@@ -0,0 +1,6 @@
+export * from "./component";
+export * from "./data";
+export * from "./string";
+export * from "./element";
+export * from "./common";
+export * from "./theme";

package/packages/utils/common/string.ts

@@ -0,0 +1,18 @@
+/**
+ * 生成一个用不重复的ID
+ * @param randomLength 随机id长度 0 - 11
+ */
+export function getUUID(randomLength = 10): string {
+  return Math.random()
+    .toString(36)
+    .substring(2, 2 + randomLength);
+}
+
+/**
+  将字符串的首字母大写
+  @param str 待处理字符串
+  @returns string 首字母大写后的字符串
+  */
+export function capitalizeFirstLetter(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

package/packages/utils/common/theme.ts

@@ -0,0 +1,84 @@
+import { useToggle } from "@vueuse/core";
+import { useShareStore } from "../shareStore";
+import { watch, ref, onMounted, onUnmounted } from "vue";
+export function useTheme() {
+  const { isDark } = useShareStore();
+  const toggleDark = useToggle(isDark);
+  return {
+    isDark,
+    toggleDark,
+  };
+}
+
+export function useDark() {
+  const isDark = ref(false);
+  onMounted(() => {
+    getDarkState(isDark);
+    monitorHtml(isDark);
+  });
+
+  watch(
+    () => isDark.value,
+    () => {
+      if (isDark.value) {
+        document.documentElement.classList.add("dark");
+      } else {
+        document.documentElement.classList.remove("dark");
+      }
+    }
+  );
+  return {
+    isDark,
+  };
+}
+
+/**
+ * 获取dark初始化状态
+ * @param isDark
+ */
+export function getDarkState(isDark) {
+  var targetNode = document.documentElement;
+  if (!targetNode) return;
+  if (targetNode.classList.contains("dark")) {
+    isDark.value = true;
+  } else {
+    isDark.value = false;
+  }
+}
+
+/**
+ * 监听html元素
+ * @param isDark
+ */
+function monitorHtml(isDark) {
+  // 选择需要监听的元素
+  var targetNode = document.querySelector("html");
+
+  // 创建MutationObserver对象
+  var observer = new MutationObserver(function (mutationsList) {
+    for (var mutation of mutationsList) {
+      if (
+        mutation.type === "attributes" &&
+        mutation.attributeName === "class"
+      ) {
+        const target = mutation.target as any;
+        if (new Array(...target.classList).includes("dark")) {
+          isDark.value = true;
+        } else {
+          isDark.value = false;
+        }
+      }
+    }
+  });
+
+  // 开始监听
+  observer.observe(targetNode!, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+
+  // 销毁监听
+  onUnmounted(() => {
+    observer.disconnect();
+  });
+}

package/packages/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './manager'
+export * from './common'
+export * from './shareStore'

package/packages/utils/manager/index.ts

@@ -0,0 +1,3 @@
+export * from './pageManager';
+export * from './pluginManager';
+export * from './revoke';

package/packages/utils/manager/pageManager.ts

@@ -0,0 +1,157 @@
+import { type ComponentSchema } from "@epic-designer/core/types/epic-designer";
+import { ref, type Ref, type ComponentPublicInstance } from "vue";
+import { pluginManager } from "./pluginManager";
+import { findSchemas } from "../index";
+
+export interface ActionsModel {
+  componentId?: string;
+  args: string;
+  methodName: string;
+  type: "component" | "public" | "custom";
+}
+export interface PageManager {
+  componentInstances: Ref<Record<string, ComponentPublicInstance>>;
+  funcs: Ref<Record<string, any>>;
+  isDesignMode: Ref<boolean>;
+  defaultComponentIds: Ref<string[]>;
+  getComponentInstance: (id: string) => ComponentPublicInstance;
+  find: (id: string) => ComponentPublicInstance;
+  addComponentInstance: (id: string, instance: ComponentPublicInstance) => void;
+  removeComponentInstance: (id: string) => void;
+  setMethods: (scriptStr: string, outputError?: boolean) => void;
+  doActions: (actions: ActionsModel[], ...args: any) => void;
+  setDesignMode: (isDesign?: boolean) => void;
+  setDefaultComponentIds: (schemas:ComponentSchema[]) => void;
+}
+
+export function usePageManager(): PageManager {
+  const componentInstances = ref<Record<string, ComponentPublicInstance>>({});
+  const funcs = ref<Record<string, any>>({});
+  // 当前模式 true 设计模式, false 渲染模式
+  const isDesignMode = ref(false);
+  const defaultComponentIds = ref<string[]>([]);
+
+  /**
+   * 获取组件实例
+   * @param id
+   * @returns
+   */
+  function getComponentInstance(id: string): ComponentPublicInstance {
+    return componentInstances.value[id];
+  }
+
+  /**
+   * 添加组件实例
+   * @param id
+   * @param instance
+   * @returns
+   */
+  function addComponentInstance(id: string, instance: ComponentPublicInstance) {
+    componentInstances.value[id] = instance;
+  }
+  /**
+   * 移除组件实例
+   * @param id
+   * @returns
+   */
+  function removeComponentInstance(id: string): void {
+    delete componentInstances.value[id];
+  }
+
+  /**
+   * 动态创建函数
+   * @param scriptStr
+   */
+  function setMethods(scriptStr: string, outputError: boolean = false): void {
+    // 将PublicMethodsModel 映射为 Record<string, () => any>
+    const publicMethods: Record<string, () => any> = Object.entries(
+      pluginManager.publicMethods
+    ).reduce((acc: any, [key, value]) => {
+
+      acc[key] = value.handler;
+      return acc;
+    }, {});
+
+    try {
+      new Function(`const epic = this;${scriptStr}`).bind({
+        ...publicMethods,
+        getComponent: getComponentInstance,
+        find: getComponentInstance,
+        defineExpose,
+        publicMethods: publicMethods,
+        pluginManager,
+      })();
+    } catch (error) {
+      if (outputError) {
+        console.error("[epic-desinger：自定义函数]异常：", error);
+      }
+    }
+  }
+
+  /**
+   *  存储自定义脚本暴露的函数及属性
+   * @param exposed
+   */
+  function defineExpose(exposed?: Record<string, any> | undefined): void {
+    if (exposed != null) {
+      funcs.value = exposed;
+    }
+  }
+
+  /**
+   * 执行一组操作
+   * @param actions 操作数组
+   */
+  function doActions(actions: ActionsModel[], ...args: any): void {
+    actions?.forEach((action) => {
+      if (action.type === "public") {
+        pluginManager.publicMethods[action.methodName]?.handler(...args);
+      }
+
+      if (action.type === "custom") {
+        funcs.value[action.methodName]?.(...args);
+      }
+
+      if (action.type === "component") {
+        const component =
+          action.componentId != null &&
+          (getComponentInstance(action.componentId) as any);
+
+        component[action.methodName](
+          ...(action.args ? JSON.parse(action.args) : args)
+        );
+        return;
+      }
+    });
+  }
+
+  /**
+   * 设置设计模式的状态
+   * @param isDesignMode 是否处于设计模式
+   */
+  function setDesignMode(isDesign: boolean = true): void {
+    isDesignMode.value = isDesign;
+  }
+
+  
+  function setDefaultComponentIds(schemas:ComponentSchema[]){
+    const componentSchemas = findSchemas(schemas,()=>true) as ComponentSchema[]
+    defaultComponentIds.value = componentSchemas.map(item=>item.id as string)
+  }
+
+  return {
+    componentInstances,
+    funcs,
+    isDesignMode,
+    defaultComponentIds,
+    getComponentInstance,
+    // 简化查询函数, 推荐使用
+    find: getComponentInstance,
+    addComponentInstance,
+    removeComponentInstance,
+    setMethods,
+    doActions,
+    setDesignMode,
+    setDefaultComponentIds
+  };
+}