fix(playground,runtime): 拖动添加弹窗时初始位置不对

Tencent · Aug 16, 2022 · 41a8400 · 41a8400
1 parent 59e6aff
commit 41a8400
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 26 deletions.
diff --git a/playground/src/pages/Editor.vue b/playground/src/pages/Editor.vue
@@ -38,8 +38,8 @@ import { Coin, Connection, Document } from '@element-plus/icons-vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import serialize from 'serialize-javascript';
 
-import type { MenuBarData, MoveableOptions, TMagicEditor } from '@tmagic/editor';
-import type { Id } from '@tmagic/schema';
+import { editorService, MenuBarData, MoveableOptions, TMagicEditor } from '@tmagic/editor';
+import type { Id, MContainer, MNode } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { asyncLoadJs } from '@tmagic/utils';
@@ -169,6 +169,22 @@ asyncLoadJs(`${VITE_ENTRY_PATH}/event/index.umd.js`).then(() => {
 });
 
 save();
+
+editorService.usePlugin({
+ beforeDoAdd: (config: MNode, parent?: MContainer | null) => {
+ if (config.type === 'overlay') {
+ config.style = {
+ ...config.style,
+ left: 0,
+ top: 0,
+ };
+
+ return [config, editorService.get('page')];
+ }
+
+ return [config, parent];
+ },
+});
 </script>
 
 <style lang="scss">

diff --git a/runtime/vue2/playground/App.vue b/runtime/vue2/playground/App.vue
@@ -65,35 +65,31 @@ export default defineComponent({
  return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
  },
 
- add({ config }: UpdateData) {
+ add({ config, parentId }: UpdateData) {
  console.log('add config', config);
  if (!root.value) throw new Error('error');
  if (!selectedId.value) throw new Error('error');
- const path = getNodePath(selectedId.value, [root.value]);
- const node = path.pop();
- const parent = node?.items ? node : path.pop();
+ const parent = getNodePath(parentId, [root.value]).pop();
  if (!parent) throw new Error('未找到父节点');
  parent.items?.push(config);
  },
 
- update({ config }: UpdateData) {
+ update({ config, parentId }: UpdateData) {
  console.log('update config', config);
  if (!root.value) throw new Error('error');
- const path = getNodePath(config.id, [root.value]);
- const node = path.pop();
- const parent = path.pop();
+ const node = getNodePath(config.id, [root.value]).pop();
+ const parent = getNodePath(parentId, [root.value]).pop();
  if (!node) throw new Error('未找到目标节点');
  if (!parent) throw new Error('未找到父节点');
  const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
  parent.items.splice(index, 1, reactive(config));
  },
 
- remove({ id }: RemoveData) {
+ remove({ id, parentId }: RemoveData) {
  if (!root.value) throw new Error('error');
- const path = getNodePath(id, [root.value]);
- const node = path.pop();
+ const node = getNodePath(id, [root.value]).pop();
  if (!node) throw new Error('未找到目标元素');
- const parent = path.pop();
+ const parent = getNodePath(parentId, [root.value]).pop();
  if (!parent) throw new Error('未找到父元素');
  const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
  parent.items.splice(index, 1);

diff --git a/runtime/vue3/playground/App.vue b/runtime/vue3/playground/App.vue
@@ -65,35 +65,31 @@ export default defineComponent({
  return nextTick().then(() => document.getElementById(`${id}`) as HTMLElement);
  },
 
- add({ config }: UpdateData) {
+ add({ config, parentId }: UpdateData) {
  console.log('add config', config);
  if (!root.value) throw new Error('error');
  if (!selectedId.value) throw new Error('error');
- const path = getNodePath(selectedId.value, [root.value]);
- const node = path.pop();
- const parent = node?.items ? node : path.pop();
+ const parent = getNodePath(parentId, [root.value]).pop();
  if (!parent) throw new Error('未找到父节点');
  parent.items?.push(config);
  },
 
- update({ config }: UpdateData) {
+ update({ config, parentId }: UpdateData) {
  console.log('update config', config);
  if (!root.value) throw new Error('error');
- const path = getNodePath(config.id, [root.value]);
- const node = path.pop();
- const parent = path.pop();
+ const node = getNodePath(config.id, [root.value]).pop();
+ const parent = getNodePath(parentId, [root.value]).pop();
  if (!node) throw new Error('未找到目标节点');
  if (!parent) throw new Error('未找到父节点');
  const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
  parent.items.splice(index, 1, reactive(config));
  },
 
- remove({ id }: RemoveData) {
+ remove({ id, parentId }: RemoveData) {
  if (!root.value) throw new Error('error');
- const path = getNodePath(id, [root.value]);
- const node = path.pop();
+ const node = getNodePath(id, [root.value]).pop();
  if (!node) throw new Error('未找到目标元素');
- const parent = path.pop();
+ const parent = getNodePath(parentId, [root.value]).pop();
  if (!parent) throw new Error('未找到父元素');
  const index = parent.items?.findIndex((child: MNode) => child.id === node.id);
  parent.items.splice(index, 1);