starfish-editor-custom 1.0.0

package/src/controller/shortcut.ts

@@ -0,0 +1,81 @@
+// import { createStore } from "vuex";
+import { reactive } from "vue";
+import { state as form } from "./form";
+import { AllFormItem, ShortCutState } from "@/type";
+
+const state = reactive<ShortCutState>({
+  form: form,
+  copyContent: {},
+  curList: [], // 当前操作在哪个选中区间中
+});
+
+/**
+ * 快捷键对表单的处理
+ */
+class ShortCut {
+  copy(list: AllFormItem[]) {
+    if (state.form.currentIndex > -1) {
+      state.copyContent = list[state.form.currentIndex];
+    }
+  }
+  paste(list: AllFormItem[]) {
+    if (state.copyContent) {
+      const pasteControl = window.VueContext.$Flex.deepClone(state.copyContent);
+      if(pasteControl.data){
+        pasteControl.data.fieldName = pasteControl.ControlType + "_" + window.VueContext.$Flex.generateMixed();
+        pasteControl.id = window.VueContext.$Flex.generateMixed();
+        list.push(pasteControl);
+        state.form.formUpdate = true;
+      }
+    }
+  }
+  delete(list: AllFormItem[]) {
+    list.splice(state.form.currentIndex, 1);
+    state.form.curControl = {};
+    state.form.formUpdate = true;
+    state.form.currentIndex = -1;
+    state.form.currentId = "";
+  }
+  onTop(list: AllFormItem[]) {
+    if (state.form.currentIndex > 0) {
+      const temp = list.splice(state.form.currentIndex, 1);
+      state.form.currentIndex -= 1;
+      list.splice(state.form.currentIndex, 0, ...temp);
+    }
+  }
+  onBottom(list: AllFormItem[]) {
+    if (state.form.currentIndex < list.length - 1) {
+      const temp = list.splice(state.form.currentIndex, 1);
+      state.form.currentIndex += 1;
+      list.splice(state.form.currentIndex, 0, ...temp);
+    }
+  }
+  clear() {
+    state.form.allFormList.length = 0;
+    state.form.formUpdate = true;
+  }
+  moveTop() {
+    if (state.form.currentIndex > 0) {
+      state.form.currentIndex -= 1;
+    }
+  }
+  moveBottom(list: AllFormItem[]) {
+    if (state.form.currentIndex < list.length - 1) {
+      state.form.currentIndex += 1;
+    }
+  }
+  set(name: keyof ShortCutState, value: any) {
+    state[name] = value;
+  }
+
+  get(name: keyof ShortCutState) {
+    return state[name];
+  }
+  commit(event: string) {
+    this[event](state.curList);
+  }
+}
+
+export type shortCut = ShortCut;
+
+export default new ShortCut();

package/src/controller/ui.ts

@@ -0,0 +1,91 @@
+import { reactive, toRaw } from "vue";
+import { UiState, setColumnWidth, GetColumnWidth } from "@/type.ts";
+
+const DEFAUTL_LEFT_COLUMN_WIDTH = 300;
+const DEFAUTL_RIGHT_COLUMN_WIDTH = 400;
+/**
+ * 编辑器各模块的宽度
+ */
+const defaultColumnWidth = {
+  left: DEFAUTL_LEFT_COLUMN_WIDTH,
+  center: window.document.body.clientWidth - DEFAUTL_LEFT_COLUMN_WIDTH - DEFAUTL_RIGHT_COLUMN_WIDTH,
+  right: DEFAUTL_RIGHT_COLUMN_WIDTH,
+};
+
+const DIALOG_WIDTH = 500;
+/**
+ * 编辑器缩放比例
+ */
+const scale = 1;
+
+const state = reactive<UiState>({
+  columnWidth: defaultColumnWidth,
+  dialogWidth: DIALOG_WIDTH,
+  scale,
+  isFullscreen: false,
+  pageType: 'PC',
+  rightClose: false,
+  leftClose: false
+});
+
+
+class Ui {
+  public get<T>(name: keyof typeof state): T {
+    return (state as any)[name];
+  }
+  public set<T>(name: keyof typeof state, value: T) {
+    if (name === "columnWidth") {
+      this.setColumnWidth(value as setColumnWidth);
+    } else if (name === "scale") {
+      this.setScale(Number(value));
+    }else if(name == 'isFullscreen'){
+      (state as any)[name] = value;
+      state.pageType = '';
+    }else if(name == 'pageType'){
+      (state as any)[name] = value;
+      state.isFullscreen = true;
+    }else{
+      (state as any)[name] = value;
+    }
+  }
+
+  private setScale(size: number) {
+    const range = [0.2, 1.5];
+    if (size >= range[0] && size <= range[1]) {
+      state.scale = size;
+    }
+  }
+
+  private setColumnWidth({ left, center, right }: setColumnWidth) {
+    const columnWidth = {
+      ...toRaw(this.get<GetColumnWidth>("columnWidth")),
+    };
+    if (left && left >= 0) {
+      columnWidth.left = left;
+    } else {
+      columnWidth.left = defaultColumnWidth.left;
+    }
+    if (right != undefined && right >= 0) {
+      columnWidth.right = right;
+    } else {
+      columnWidth.right = defaultColumnWidth.right;
+    }
+
+    if (!center || center == "auto") {
+      const bodyWidth = window.document.body.clientWidth;
+      columnWidth.center = bodyWidth - (columnWidth?.left || 0) - (columnWidth?.right || 0);
+      if (columnWidth.center <= 0) {
+        columnWidth.left = defaultColumnWidth.left;
+        columnWidth.center = defaultColumnWidth.center;
+        columnWidth.right = defaultColumnWidth.right;
+      }
+    } else {
+      columnWidth.center = center;
+    }
+
+    state.columnWidth = columnWidth;
+  }
+}
+
+export type UiControl = Ui;
+export default new Ui();

package/src/layouts/ControlEditSize.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="controller_edit_size" ref="controllerSize">
+    <span @click="handleCanvasSize(0.1)"><i class="iconfontui icon-jiahao"></i></span>
+    <span>{{ parseInt(String(size * 100)) }}%</span>
+    <span @click="handleCanvasSize(-0.1)"><i class="iconfontui icon-jianhao"></i></span>
+    <span @mouseover="handleShortcutShow" @mouseleave="handleShortCutHidden">
+      <i class="iconfontui icon-jianpan_o"></i>
+      <transition name="slide-fade">
+        <shortcutKey v-show="shortCutShow" />
+      </transition>
+    </span>
+    <span @click="handleCanvasSize()" title="复位">
+      <i class="iconfontui icon-huanyuan"></i>
+    </span>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, inject, computed } from "vue";
+  import shortcutKey from "./ShortcutKey.vue";
+  import type { Controls } from "@/type";
+  export default defineComponent({
+    components: {
+      shortcutKey,
+    },
+    setup() {
+      const { uiControl } = inject<Controls>("control") || {};
+      const controllerSize = ref();
+      const shortCutShow = ref(false);
+      const handleCanvasSize = (size?: number) => {
+        if (!size) {
+          uiControl?.set<number>("scale", 1);
+        } else {
+          uiControl?.set<number>("scale", (uiControl?.get<number>("scale") || 1) + size);
+        }
+      };
+      const handleShortCutHidden = () => {
+        shortCutShow.value = false;
+      };
+      const handleShortcutShow = () => {
+        shortCutShow.value = true;
+      };
+      return {
+        size: computed(() => uiControl?.get<number>("scale") || 1),
+        handleCanvasSize,
+        controllerSize,
+        shortCutShow,
+        handleShortCutHidden,
+        handleShortcutShow,
+      };
+    },
+  });
+</script>

package/src/layouts/Framework.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="starfish-editor">
+    <div class="starfish-editor-nav">
+      <slot name="nav"></slot>
+    </div>
+    <div
+      class="starfish-editor-content"
+      :class="!headerShow ? 'starfish-editor-content-page' : ''"
+    >
+      <div
+        class="starfish-editor-framework-left"
+        :class="leftClose ? 'hide-status' : ''"
+        :style="`width:${leftClose ? 0 : columnWidth?.left}px`"
+      >
+        <slot name="left"></slot>
+        <div class="container-left-arrow" @click="onLeftArrow"></div>
+      </div>
+      <!-- resizer组件 -->
+      <resizer type="left"></resizer>
+      <div
+        class="starfish-editor-framework-center"
+      >
+        <slot name="navlist"></slot>
+        <slot name="workspace"></slot>
+      </div>
+      <resizer type="right"></resizer>
+      <div
+        class="starfish-editor-framework-right"
+        :class="rightClose ? 'hide-status' : ''"
+        :style="`width:${rightClose ? 0 : columnWidth?.right}px`"
+      >
+        <slot name="propsPanel"></slot>
+        <div class="container-right-arrow" @click="onRightArrow"></div>
+      </div>
+    </div>
+    <slot name="other"></slot>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, inject, computed } from "vue";
+import Resizer from "./Resizer.vue";
+import type { Controls } from "@/type";
+export default defineComponent({
+  props: {
+    headerShow: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  components: {
+    Resizer,
+  },
+  setup() {
+    const { uiControl } = inject<Controls>("control") || {};
+    const columnWidth: any = computed(
+      () => uiControl?.get("columnWidth") || {}
+    );
+    const leftClose: any = computed(() => uiControl?.get("leftClose"));
+    const rightClose: any = computed(() => uiControl?.get("rightClose"));
+
+    function onLeftArrow() {
+      uiControl?.set("leftClose", !leftClose.value);
+    }
+    function onRightArrow() {
+      uiControl?.set("rightClose", !rightClose.value);
+    }
+    return {
+      columnWidth,
+      leftClose,
+      rightClose,
+      onLeftArrow,
+      onRightArrow,
+    };
+  },
+});
+</script>

package/src/layouts/Resizer.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="starfish-editor-resizer" ref="target"></div>
+</template>
+<script lang="ts">
+import {
+  defineComponent,
+  inject,
+  ref,
+  onMounted,
+  toRaw,
+  onUnmounted,
+} from "vue";
+import type { Controls, setColumnWidth } from "@/type";
+import Gesto from "gesto";
+export default defineComponent({
+  props: {
+    type: {
+      type: String,
+    },
+  },
+  setup(props) {
+    const target = ref<HTMLDivElement>();
+    const { uiControl } = inject<Controls>("control") || {};
+    let getso: Gesto;
+    onMounted(() => {
+      if (!target.value) return;
+      getso = new Gesto(target.value, {
+        container: window,
+        pinchOutside: true,
+      }).on("drag", (e) => {
+        if (!target.value || !uiControl) return;
+        let { right, left } = {
+          ...toRaw(uiControl?.get("columnWidth") as Required<setColumnWidth>),
+        };
+        if (props.type == "right") {
+          right -= e.deltaX;
+        } else {
+          left += e.deltaX;
+        }
+        uiControl?.set("columnWidth", { left, right });
+      });
+    });
+
+    onUnmounted(() => {
+      getso?.unset();
+    });
+
+    return {
+      target,
+    };
+  },
+});
+</script>
+

package/src/layouts/ShortcutKey.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="shortCutKey">
+    <div class="title">快捷键</div>
+    <div class="keyContent">
+        <div v-for="(item, index) in keyList" :key="index">
+            <span>{{item.key}}</span>
+            <span>{{item.value}}</span>
+        </div>
+    </div>
+    <div class="san"></div>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive} from "vue";
+
+export default defineComponent({
+    setup(){
+        const keyList = reactive([
+            {
+              key: 'ctrl + C',
+              value: '复制组件'  
+            },
+            {
+              key: 'ctrl + V',
+              value: '粘贴组件'  
+            },
+            {
+              key: 'ctrl + X',
+              value: '裁剪组件'  
+            },
+            {
+              key: 'delete',
+              value: '删除组件'  
+            },
+            {
+              key: 'ctrl + E',
+              value: '清空画布'  
+            },
+            {
+              key: 'ctrl + ↑',
+              value: '组件上移'  
+            },
+            {
+              key: 'ctrl + ↓',
+              value: '组件下移'  
+            },
+            {
+              key: '↑',
+              value: '选中上移'  
+            },
+            {
+              key: '↓',
+              value: '选中下移'  
+            },
+        ])
+        return {
+            keyList
+        }
+    }
+});
+</script>

package/src/main.ts

@@ -0,0 +1,56 @@
+import { App, defineAsyncComponent } from "vue";
+import "element-plus/dist/index.css";
+import "@/styles/index.scss";
+import "jsoneditor/dist/jsoneditor.min.css";
+import StarfishForm from "starfish-form";
+import vm from "./utils/vm";
+import flex from "./utils/_";
+import "starfish-form/dist/style.css";
+import StarfishEditor from "./starfish-editor.vue";
+import Loading from "@/common/Loading.vue";
+export default {
+  install: (app: App) => {
+    app.config.globalProperties.$EventBus = vm;
+    app.config.globalProperties.$Flex = flex;
+    window.VApp = app.config.globalProperties;
+    // 如果想在方法中使用自定义的方法,可以挂载到window中
+    window.VueContext = {
+      $Flex: flex,
+    };
+    // 合并使用的
+    app.use(StarfishForm);
+    const starfishformlist = app.config.globalProperties.$formcomponents;
+    for (const key in starfishformlist) {
+      app.component(key, starfishformlist[key]);
+    }
+    app.component(
+      "CustomDialog",
+      defineAsyncComponent(() => import("@/common/CustomDialog.vue"))
+    );
+    app.component(
+      "ConditionSelect",
+      defineAsyncComponent(() => import("@/common/ConditionSelect.vue"))
+    );
+    app.component(
+      "HighConditionSelect",
+      defineAsyncComponent(() => import("@/common/ConditionSelect/ConditionModule.vue"))
+    );
+    app.component(
+      "draggable",
+      defineAsyncComponent({
+        loader: () => import("vuedraggable"),
+        loadingComponent: Loading,
+      })
+    );
+    app.component(
+      "Shape",
+      defineAsyncComponent(() => import("~editor/Shape.vue"))
+    );
+    app.component(
+      "FormStyle",
+      defineAsyncComponent(() => import("@/common/formStyle.vue"))
+    );
+    app.component("StarfishEditor", StarfishEditor);
+  },
+};
+// app.mount("#app");

package/src/shims-vue.d.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare module "starfish-form";
+
+declare module "jsoneditor";
+
+/**
+ * 在d.ts文件中定义类型,就相当于global,不需要再declare global
+ */
+interface Window {
+  VueContext: {
+    $Flex: any;
+  };
+  clickCountLimitMock: boolean;
+  JSONEditor: any;
+  VApp: any;
+  Clipboard: any;
+}

package/src/starfish-editor.vue

@@ -0,0 +1,176 @@
+<template>
+  <framework :headerShow="headerShow">
+    <template #nav v-if="headerShow">
+      <Nav></Nav>
+    </template>
+    <template #navlist>
+      <nav-list :menu="menu"></nav-list>
+    </template>
+    <template #left>
+      <component-list
+        :basic-fields="basicFields"
+        :layout-fields="layoutFields"
+      ></component-list>
+    </template>
+    <template #workspace>
+      <workspace ref="workspace"></workspace>
+    </template>
+    <template #propsPanel v-if="panel.length > 0">
+      <props-panel
+        @save="onSave"
+        :column="menu.column"
+        :panel="panel"
+      ></props-panel>
+    </template>
+    <template #other>
+      <form-preview ref="formPreview"></form-preview>
+    </template>
+  </framework>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  provide,
+  ref,
+  onMounted,
+  onUnmounted,
+  PropType,
+  defineAsyncComponent,
+} from "vue";
+import Framework from "@/layouts/Framework.vue";
+import NavList from "~editor/NavList.vue";
+import Nav from "~editor/Nav.vue";
+import ComponentList from "~editor/ComponentList.vue";
+import Workspace from "~editor/Workspace.vue";
+import PropsPanel from "~editor/PropsPanel.vue";
+import uiControl from "@/controller/ui";
+import hisContrl from "@/controller/history";
+import formStore from "@/controller/form";
+import actionContrl from "@/controller/action";
+import store from "@/controller/shortcut";
+import { listenGlobalKeyDown } from "@/utils/shortcutKey";
+// 根据编辑器判断,走不同的快捷键逻辑
+import formKeyconList from "@/utils/formKeycon";
+import type { Controls, MenuBarData } from "./type";
+import KeyController from "keycon";
+
+export default defineComponent({
+  name: "StarfishEditor",
+  components: {
+    Framework,
+    NavList,
+    ComponentList,
+    Workspace,
+    PropsPanel,
+    FormPreview: defineAsyncComponent(() => import("~editor/FormPreview.vue")),
+    Nav,
+  },
+  props: {
+    /**
+     * 基础控件
+     */
+    basicFields: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    /**
+     * 布局控件
+     */
+    layoutFields: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    /**
+     * 是否禁用快捷键
+     */
+    shortcutDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 导航头是否展示
+     */
+    headerShow: {
+      type: Boolean,
+      default: true,
+    },
+    /** 顶部工具栏配置 */
+    menu: {
+      type: Object as PropType<MenuBarData>,
+      default: () => ({ left: [], right: [], column: true }),
+    },
+    // 右侧配置属性tab
+    panel: {
+      type: Array,
+      default: () => ["form", "json", "global"],
+    },
+  },
+  setup(props: any, { emit }) {
+    const workspace = ref();
+    const formPreview = ref();
+    let dom: HTMLDivElement;
+    const mouseenterHandler = () => {
+      dom?.focus();
+    };
+
+    const mouseleaveHandler = () => {
+      dom?.blur();
+    };
+    const control: Controls = {
+      uiControl,
+      hisContrl,
+      formStore,
+      actionContrl,
+      store,
+    };
+    let keycons: KeyController;
+    onMounted(() => {
+      dom = workspace.value?.$el;
+      if (!props.shortcutDisabled) {
+        dom.addEventListener("mouseenter", mouseenterHandler);
+        dom.addEventListener("mouseleave", mouseleaveHandler);
+        keycons = listenGlobalKeyDown(formKeyconList, dom);
+      }
+    });
+    onUnmounted(() => {
+      if (!props.shortcutDisabled) {
+        dom.removeEventListener("mouseenter", mouseenterHandler);
+        dom.removeEventListener("mouseleave", mouseleaveHandler);
+        keycons.destroy();
+      }
+    });
+    provide("control", control);
+    return {
+      workspace,
+      formPreview,
+      onSave() {
+        emit("save", formStore?.get("AllFormResult"));
+      },
+      getJson() {
+        window.VApp.$EventBus.emit("setSave");
+      },
+      setJson(jsonList: any[]) {
+        const newJson = jsonList.map((json: any) => {
+          return window.VApp.$Flex.jsonToForm(json);
+        });
+        formStore.updateAllFormList(newJson);
+        formStore?.set("save", true);
+      },
+    };
+  },
+});
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+}
+</style>