@tmagic/editor 1.3.1 → 1.3.3

package/src/layouts/sidebar/data-source/DataSourceList.vue

@@ -38,11 +38,12 @@
 import { computed, inject, ref } from 'vue';
 import { Aim, Close, Coin, Edit, View } from '@element-plus/icons-vue';
 
+import { DepTargetType } from '@tmagic/dep';
 import { tMagicMessageBox, TMagicTooltip, TMagicTree } from '@tmagic/design';
-import { Dep, Id } from '@tmagic/schema';
+import { DepData, Id } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
-import { type DataSourceListSlots, DepTargetType, type Services } from '@editor/type';
+import type { DataSourceListSlots, Services } from '@editor/type';
 
 defineSlots<DataSourceListSlots>();
 
@@ -65,10 +66,10 @@ const dsDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE) |
 const dsMethodDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_METHOD) || {});
 const dsCondDep = computed(() => depService?.getTargets(DepTargetType.DATA_SOURCE_COND) || {});
 
-const getKeyTreeConfig = (dep: Dep[string], type?: string) =>
+const getKeyTreeConfig = (dep: DepData[string], type?: string) =>
   dep.keys.map((key) => ({ name: key, id: key, type: 'key', isMethod: type === 'method', isCond: type === 'cond' }));
 
-const getNodeTreeConfig = (id: string, dep: Dep[string], type?: string) => ({
+const getNodeTreeConfig = (id: string, dep: DepData[string], type?: string) => ({
   name: dep.name,
   type: 'node',
   id,
@@ -81,7 +82,7 @@ const getNodeTreeConfig = (id: string, dep: Dep[string], type?: string) => ({
  * @param deps 依赖
  * @param type 依赖类型
  */
-const mergeChildren = (children: any[], deps: Dep, type?: string) => {
+const mergeChildren = (children: any[], deps: DepData, type?: string) => {
   Object.entries(deps).forEach(([id, dep]) => {
     // 已经生成过的节点
     const nodeItem = children.find((item) => item.id === id);
@@ -97,9 +98,9 @@ const mergeChildren = (children: any[], deps: Dep, type?: string) => {
 
 const list = computed(() =>
   dataSources.value.map((ds) => {
-    const dsDeps = dsDep.value[ds.id].deps;
-    const dsMethodDeps = dsMethodDep.value[ds.id].deps;
-    const dsCondDeps = dsCondDep.value[ds.id].deps;
+    const dsDeps = dsDep.value[ds.id]?.deps || {};
+    const dsMethodDeps = dsMethodDep.value[ds.id]?.deps || {};
+    const dsCondDeps = dsCondDep.value[ds.id]?.deps || {};
 
     const children: any[] = [];
     // 数据源依赖分为三种类型：key/node、method、cond，是分开存储，这里将其合并展示

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -23,20 +23,16 @@
     </div>
 
     <!-- 数据源列表 -->
-    <DataSourceList @edit="editHandler" @remove="removeHandler">
-      <template #data-source-panel-tool="{ data }">
-        <slot name="data-source-panel-tool" :data="data"></slot>
-      </template>
-    </DataSourceList>
-
-    <DataSourceConfigPanel
-      ref="editDialog"
-      :disabled="!editable"
-      :values="dataSourceValues"
-      :title="dialogTitle"
-      @submit="submitDataSourceHandler"
-    ></DataSourceConfigPanel>
+    <DataSourceList @edit="editHandler" @remove="removeHandler"></DataSourceList>
   </TMagicScrollbar>
+  <DataSourceConfigPanel
+    ref="editDialog"
+    :disabled="!editable"
+    :values="dataSourceValues"
+    :title="dialogTitle"
+    :slideType="slideType"
+    @submit="submitDataSourceHandler"
+  ></DataSourceConfigPanel>
 </template>
 
 <script setup lang="ts">
@@ -48,7 +44,7 @@ import type { DataSourceSchema } from '@tmagic/schema';
 
 import SearchInput from '@editor/components/SearchInput.vue';
 import ToolButton from '@editor/components/ToolButton.vue';
-import type { DataSourceListSlots, Services } from '@editor/type';
+import type { DataSourceListSlots, Services, SlideType } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 import DataSourceList from './DataSourceList.vue';
@@ -59,6 +55,10 @@ defineOptions({
   name: 'MEditorDataSourceListPanel',
 });
 
+defineProps<{
+  slideType?: SlideType;
+}>();
+
 const { dataSourceService } = inject<Services>('services') || {};
 
 const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
@@ -102,7 +102,7 @@ const editHandler = (id: string) => {
     ...dataSourceService?.getDataSourceById(id),
   };
 
-  dialogTitle.value = `新增${dataSourceValues.value.title || ''}`;
+  dialogTitle.value = `编辑${dataSourceValues.value.title || ''}`;
 
   editDialog.value.show();
 };

package/src/layouts/sidebar/layer/use-drag.ts

@@ -121,6 +121,10 @@ export const useDrag = (services: Services | undefined) => {
     removeStatusClass(dragState.container);
 
     if (node && dragState.dragOverNodeId && dragState.dropType && services) {
+      if (dragState.dragOverNodeId === node.id) {
+        return;
+      }
+
       const targetInfo = services.editorService.getNodeInfo(dragState.dragOverNodeId, false);
       const targetNode = targetInfo.node;
       let targetParent = targetInfo.parent;

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -7,7 +7,11 @@ import { LayerNodeStatus, Services } from '@editor/type';
 import { traverseNode } from '@editor/utils';
 import { updateStatus } from '@editor/utils/tree';
 
-const createPageNodeStatus = (services: Services | undefined, pageId: Id) => {
+const createPageNodeStatus = (
+  services: Services | undefined,
+  pageId: Id,
+  initalLayerNodeStatus?: Map<Id, LayerNodeStatus>,
+) => {
   const map = new Map<Id, LayerNodeStatus>();
 
   map.set(pageId, {
@@ -19,12 +23,15 @@ const createPageNodeStatus = (services: Services | undefined, pageId: Id) => {
 
   services?.editorService.getNodeById(pageId)?.items.forEach((node: MNode) =>
     traverseNode(node, (node) => {
-      map.set(node.id, {
-        visible: true,
-        expand: false,
-        selected: false,
-        draggable: true,
-      });
+      map.set(
+        node.id,
+        initalLayerNodeStatus?.get(node.id) || {
+          visible: true,
+          expand: false,
+          selected: false,
+          draggable: true,
+        },
+      );
     }),
   );
 
@@ -42,17 +49,15 @@ export const useNodeStatus = (services: Services | undefined, page: ComputedRef<
     page.value ? nodeStatusMaps.value.get(page.value.id) : new Map<Id, LayerNodeStatus>(),
   );
 
-  // 切换页面，重新生成节点状态
+  // 切换页面或者新增页面，重新生成节点状态
   watch(
-    () => page.value?.id,
-    (pageId) => {
-      // 已经存在，不需要重新生成
-      if (!pageId || nodeStatusMaps.value.has(pageId)) {
+    page,
+    (page) => {
+      if (!page) {
         return;
       }
-
-      // 新增页面，生成节点状态
-      nodeStatusMaps.value.set(pageId, createPageNodeStatus(services, pageId));
+      // 生成节点状态
+      nodeStatusMaps.value.set(page.id, createPageNodeStatus(services, page.id, nodeStatusMaps.value.get(page.id)));
     },
     {
       immediate: true,

package/src/services/dataSource.ts

@@ -82,6 +82,8 @@ class DataSource extends BaseService {
     this.get('dataSources').push(newConfig);
 
     this.emit('add', newConfig);
+
+    return newConfig;
   }
 
   public update(config: DataSourceSchema) {
@@ -92,6 +94,8 @@ class DataSource extends BaseService {
     dataSources[index] = cloneDeep(config);
 
     this.emit('update', config);
+
+    return config;
   }
 
   public remove(id: string) {

package/src/services/dep.ts

@@ -15,320 +15,58 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { EventEmitter } from 'events';
-
 import { reactive } from 'vue';
 
-import type { Dep, Id, MNode } from '@tmagic/schema';
-import { isObject } from '@tmagic/utils';
-
-import { DepTargetType } from '@editor/type';
-
-type IsTarget = (key: string | number, value: any) => boolean;
-
-interface TargetOptions {
-  isTarget: IsTarget;
-  id: string | number;
-  /** 类型，数据源、代码块或其他 */
-  type?: DepTargetType | string;
-  name?: string;
-}
-
-interface TargetList {
-  [type: DepTargetType | string]: {
-    [targetId: string | number]: Target;
-  };
-}
-
-/**
- * 需要收集依赖的目标
- * 例如：一个代码块可以为一个目标
- */
-export class Target extends EventEmitter {
-  /**
-   * 如何识别目标
-   */
-  public isTarget: IsTarget;
-  /**
-   * 目标id，不可重复
-   * 例如目标是代码块，则为代码块id
-   */
-  public id: string | number;
-  /**
-   * 目标名称，用于显示在依赖列表中
-   */
-  public name?: string;
-  /**
-   * 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type
-   */
-  public type: DepTargetType | string = DepTargetType.DEFAULT;
-  /**
-   * 依赖详情
-   * 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }
-   */
-  public deps = reactive<Dep>({});
-
-  constructor(options: TargetOptions) {
-    super();
-    this.isTarget = options.isTarget;
-    this.id = options.id;
-    this.name = options.name;
-    if (options.type) {
-      this.type = options.type;
-    }
-  }
-
-  /**
-   * 更新依赖
-   * @param node 节点配置
-   * @param key 哪个key配置了这个目标的id
-   */
-  public updateDep(node: MNode, key: string | number) {
-    const dep = this.deps[node.id] || {
-      name: node.name,
-      keys: [],
-    };
+import { DepTargetType, type Target, Watcher } from '@tmagic/dep';
+import type { Id, MNode } from '@tmagic/schema';
 
-    if (node.name) {
-      dep.name = node.name;
-    }
+import BaseService from './BaseService';
 
-    this.deps[node.id] = dep;
+class Dep extends BaseService {
+  private watcher = new Watcher({ initialTargets: reactive({}) });
 
-    if (dep.keys.indexOf(key) === -1) {
-      dep.keys.push(key);
-    }
+  public removeTargets(type: string = DepTargetType.DEFAULT) {
+    this.watcher.removeTargets(type);
 
-    this.emit('change');
-  }
-
-  /**
-   * 删除依赖
-   * @param node 哪个节点的依赖需要移除，如果为空，则移除所有依赖
-   * @param key 节点下哪个key需要移除，如果为空，则移除改节点下的所有依赖key
-   * @returns void
-   */
-  public removeDep(node?: MNode, key?: string | number) {
-    if (!node) {
-      Object.keys(this.deps).forEach((depKey) => {
-        delete this.deps[depKey];
-      });
-      this.emit('change');
-      return;
-    }
-
-    const dep = this.deps[node.id];
-
-    if (!dep) return;
-
-    if (key) {
-      const index = dep.keys.indexOf(key);
-      dep.keys.splice(index, 1);
-
-      if (dep.keys.length === 0) {
-        delete this.deps[node.id];
-      }
-    } else {
-      delete this.deps[node.id];
-    }
-
-    this.emit('change');
+    this.emit('remove-target');
   }
 
-  /**
-   * 判断指定节点下的指定key是否存在在依赖列表中
-   * @param node 哪个节点
-   * @param key 哪个key
-   * @returns boolean
-   */
-  public hasDep(node: MNode, key: string | number) {
-    const dep = this.deps[node.id];
-
-    return Boolean(dep?.keys.find((d) => d === key));
+  public getTargets(type: string = DepTargetType.DEFAULT) {
+    return this.watcher.getTargets(type);
   }
 
-  public destroy() {
-    this.removeAllListeners();
+  public getTarget(id: Id) {
+    return this.watcher.getTarget(id);
   }
-}
-
-export class Watcher extends EventEmitter {
-  private targets = reactive<TargetList>({});
 
-  /**
-   * 获取指定类型中的所有target
-   * @param type 分类
-   * @returns Target[]
-   */
-  public getTargets(type: DepTargetType | string = DepTargetType.DEFAULT) {
-    return this.targets[type] || {};
-  }
-
-  /**
-   * 添加新的目标
-   * @param target Target
-   */
   public addTarget(target: Target) {
-    const targets = this.getTargets(target.type) || {};
-    this.targets[target.type] = targets;
-    targets[target.id] = target;
-
+    this.watcher.addTarget(target);
     this.emit('add-target', target);
   }
 
-  /**
-   * 获取指定id的target
-   * @param id target id
-   * @returns Target
-   */
-  public getTarget(id: string | number) {
-    const allTargets = Object.values(this.targets);
-    for (const targets of allTargets) {
-      if (targets[id]) {
-        return targets[id];
-      }
-    }
-  }
-
-  /**
-   * 判断是否存在指定id的target
-   * @param id target id
-   * @returns boolean
-   */
-  public hasTarget(id: string | number) {
-    const allTargets = Object.values(this.targets);
-    for (const targets of allTargets) {
-      if (targets[id]) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  /**
-   * 删除指定id的target
-   * @param id target id
-   */
-  public removeTarget(id: string | number) {
-    const allTargets = Object.values(this.targets);
-    for (const targets of allTargets) {
-      if (targets[id]) {
-        targets[id].destroy();
-        delete targets[id];
-      }
-    }
-
-    this.emit('remove-target');
-  }
-
-  /**
-   * 删除指定分类的所有target
-   * @param type 分类
-   * @returns void
-   */
-  public removeTargets(type: DepTargetType | string = DepTargetType.DEFAULT) {
-    const targets = this.targets[type];
-
-    if (!targets) return;
-
-    for (const target of Object.values(targets)) {
-      target.destroy();
-    }
-
-    delete this.targets[type];
-
+  public removeTarget(id: Id) {
+    this.watcher.removeTarget(id);
     this.emit('remove-target');
   }
 
-  /**
-   * 删除所有target
-   */
   public clearTargets() {
-    Object.keys(this.targets).forEach((key) => {
-      delete this.targets[key];
-    });
+    this.watcher.clearTargets();
   }
 
-  /**
-   * 收集依赖
-   * @param nodes 需要收集的节点
-   * @param deep 是否需要收集子节点
-   */
   public collect(nodes: MNode[], deep = false) {
-    Object.values(this.targets).forEach((targets) => {
-      Object.values(targets).forEach((target) => {
-        nodes.forEach((node) => {
-          // 先删除原有依赖，重新收集
-          target.removeDep(node);
-          this.collectItem(node, target, deep);
-        });
-      });
-    });
-
+    this.watcher.collect(nodes, deep);
     this.emit('collected', nodes, deep);
   }
 
-  /**
-   * 清除依赖
-   * @param nodes 需要清除依赖的节点
-   */
   public clear(nodes?: MNode[]) {
-    const clearedItemsNodeIds: Id[] = [];
-    Object.values(this.targets).forEach((targets) => {
-      Object.values(targets).forEach((target) => {
-        if (nodes) {
-          nodes.forEach((node) => {
-            target.removeDep(node);
-
-            if (Array.isArray(node.items) && node.items.length && !clearedItemsNodeIds.includes(node.id)) {
-              clearedItemsNodeIds.push(node.id);
-              this.clear(node.items);
-            }
-          });
-        } else {
-          target.removeDep();
-        }
-      });
-    });
+    return this.watcher.clear(nodes);
   }
 
-  private collectItem(node: MNode, target: Target, deep = false) {
-    const collectTarget = (config: Record<string | number, any>, prop = '') => {
-      const doCollect = (key: string, value: any) => {
-        const keyIsItems = key === 'items';
-        const fullKey = prop ? `${prop}.${key}` : key;
-
-        if (target.isTarget(fullKey, value)) {
-          target.updateDep(node, fullKey);
-          this.emit('update-dep', node, fullKey);
-        } else if (!keyIsItems && Array.isArray(value)) {
-          value.forEach((item, index) => {
-            if (isObject(item)) {
-              collectTarget(item, `${fullKey}.${index}`);
-            }
-          });
-        } else if (isObject(value)) {
-          collectTarget(value, fullKey);
-        }
-
-        if (keyIsItems && deep && Array.isArray(value)) {
-          value.forEach((child) => {
-            this.collectItem(child, target, deep);
-          });
-        }
-      };
-
-      Object.entries(config).forEach(([key, value]) => {
-        if (typeof value === 'undefined' || value === '') return;
-        doCollect(key, value);
-      });
-    };
-
-    collectTarget(node);
+  public hasTarget(id: Id) {
+    return this.watcher.hasTarget(id);
   }
 }
 
-export type DepService = Watcher;
+export type DepService = Dep;
 
-export default new Watcher();
+export default new Dep();

package/src/services/ui.ts

@@ -44,6 +44,8 @@ const state = reactive<UiState>({
   showRule: true,
   propsPanelSize: 'small',
   showAddPageButton: true,
+  floatBox: new Map(),
+  hideSlideBar: false,
 });
 
 class Ui extends BaseService {
@@ -95,6 +97,19 @@ class Ui extends BaseService {
     return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
   }
 
+  public async setFloatBox(keys: string[]) {
+    const map = state.floatBox;
+    for (const key of keys) {
+      if (map.get(key)) continue;
+      map.set(key, {
+        status: false,
+        zIndex: 99,
+        top: 0,
+        left: 0,
+      });
+    }
+  }
+
   public resetState() {
     this.set('showSrc', false);
     this.set('uiSelectMode', false);

package/src/theme/code-block.scss

@@ -33,4 +33,9 @@
   .el-drawer__body {
     padding: 10px 20px;
   }
+
+  &.m-form-box {
+    width: 100%;
+    min-width: 872px;
+  }
 }

package/src/theme/floatbox.scss

@@ -0,0 +1,48 @@
+.m-editor-float-box-list {
+  .m-editor-float-box {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    width: auto;
+    height: 966px;
+    top: 240px;
+    left: 240px;
+    background: #fff;
+    box-sizing: border-box;
+    z-index: 999;
+    max-width: auto;
+    min-width: auto;
+    max-height: auto;
+    min-height: auto;
+    border: 1px solid #eee;
+    box-shadow: 0 0 72px #ccc;
+    &-header {
+      display: flex;
+      align-items: center;
+      padding: 0 16px;
+      height: 44px;
+      border-bottom: 1px solid #d8dee8;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+    &-body {
+      display: flex;
+      flex: 1;
+      width: 100%;
+      overflow: scroll;
+      > *:first-child {
+        min-width: 247px;
+        border-right: 1px solid #d8dee8;
+      }
+    }
+
+    &-close {
+      position: absolute;
+      right: 16px;
+    }
+  }
+  .moveable-resizable {
+    opacity: 0;
+  }
+}

package/src/theme/sidebar.scss

@@ -40,6 +40,7 @@
     .magic-editor-tab-panel-title {
       font-size: 12px;
       white-space: normal;
+      user-select: none;
     }
   }
 

package/src/theme/theme.scss

@@ -22,4 +22,5 @@
 @import "./data-source-methods.scss";
 @import "./data-source-input.scss";
 @import "./key-value.scss";
+@import "./floatbox.scss";
 @import "./tree.scss";