chore: 优化编辑器选中顶部菜单栏三个点呼出的功能菜单位置,防止被挡住 (baidu#9446)

* chore: 优化编辑器选中顶部菜单栏三个点呼出的功能菜单位置,防止被挡住 * fix: 修复新出来的节点无法点选的问题 * chore: 还原相关逻辑
lhtuling · Jan 17, 2024 · 59145cc · 59145cc
1 parent dd62f07
commit 59145cc
Show file tree

Hide file tree

Showing 11 changed files with 108 additions and 98 deletions.
diff --git a/packages/amis-core/src/utils/helper.ts b/packages/amis-core/src/utils/helper.ts
@@ -253,7 +253,8 @@ export function isObjectShallowModified(
   next: any,
   strictModeOrFunc: boolean | ((lhs: any, rhs: any) => boolean) = true,
   ignoreUndefined: boolean = false,
-  stack: Array<any> = []
+  stack: Array<any> = [],
+  maxDepth: number = -1
 ): boolean {
   if (Array.isArray(prev) && Array.isArray(next)) {
     return prev.length !== next.length
@@ -310,6 +311,9 @@ export function isObjectShallowModified(
   }
 
   stack.push(prev);
+  if (maxDepth > 0 && stack.length > maxDepth) {
+    return true;
+  }
 
   for (let i: number = keys.length - 1; i >= 0; i--) {
     const key = keys[i];

diff --git a/packages/amis-core/src/utils/labelToString.ts b/packages/amis-core/src/utils/labelToString.ts
@@ -1,8 +1,11 @@
 import isPlainObject from 'lodash/isPlainObject';
 
 export function labelToString(label: any): string {
-  if (typeof label === 'string') {
+  const type = typeof label;
+  if (type === 'string') {
     return label;
+  } else if (type === 'number') {
+    return `${label}`;
   }
 
   if (isPlainObject(label)) {

diff --git a/packages/amis-core/src/utils/tokenize.ts b/packages/amis-core/src/utils/tokenize.ts
@@ -1,5 +1,16 @@
 import {Evaluator, parse, evaluateForAsync} from 'amis-formula';
 
+const AST_CACHE: {[key: string]: any} = {};
+export function memoParse(str: string, options?: any) {
+  let key = `${str}${options?.evalMode ? '-eval' : ''}${
+    options?.allowFilter ? '-filter' : ''
+  }${options?.variableMode ? '-variable' : ''}`;
+
+  const ast = AST_CACHE[key] || parse(str, options);
+  AST_CACHE[key] = ast;
+  return ast;
+}
+
 export const tokenize = (
   str: string,
   data: object,
@@ -10,10 +21,11 @@ export const tokenize = (
   }
 
   try {
-    const ast = parse(str, {
+    const ast = memoParse(str, {
       evalMode: false,
       allowFilter: true
     });
+
     const result = new Evaluator(data, {
       defaultFilter
     }).evalute(ast);

diff --git a/packages/amis-core/src/utils/tpl.ts b/packages/amis-core/src/utils/tpl.ts
@@ -2,6 +2,7 @@ import {register as registerBulitin, getFilters} from './tpl-builtin';
 import {register as registerLodash} from './tpl-lodash';
 import {parse, evaluate} from 'amis-formula';
 import {resolveCondition} from './resolveCondition';
+import {memoParse} from './tokenize';
 
 export interface Enginer {
   test: (tpl: string) => boolean;
@@ -145,14 +146,10 @@ export async function evalExpressionWithConditionBuilder(
   return evalExpression(String(expression), data);
 }
 
-const AST_CACHE: {[key: string]: any} = {};
 function evalFormula(expression: string, data: any) {
-  const ast =
-    AST_CACHE[expression] ||
-    parse(expression, {
-      evalMode: false
-    });
-  AST_CACHE[expression] = ast;
+  const ast = memoParse(expression, {
+    evalMode: false
+  });
 
   return evaluate(ast, data, {
     defaultFilter: 'raw'

diff --git a/packages/amis-editor-core/src/plugin/BasicToolbar.tsx b/packages/amis-editor-core/src/plugin/BasicToolbar.tsx
@@ -38,6 +38,7 @@ export class BasicToolbarPlugin extends BasePlugin {
 
       if ((node.draggable || draggableContainer) && !isSorptionContainer) {
         toolbars.push({
+          id: 'drag',
           iconSvg: 'drag-btn',
           icon: 'fa fa-arrows',
           tooltip: '按住拖动调整位置',
@@ -127,6 +128,7 @@ export class BasicToolbarPlugin extends BasePlugin {
 
         toolbars.push(
           {
+            id: 'insert-before',
             iconSvg: 'left-arrow-to-left',
             tooltip: '向前插入组件',
             // level: 'special',
@@ -146,6 +148,7 @@ export class BasicToolbarPlugin extends BasePlugin {
               )
           },
           {
+            id: 'insert-after',
             iconSvg: 'arrow-to-right',
             tooltip: '向后插入组件',
             // level: 'special',
@@ -173,6 +176,7 @@ export class BasicToolbarPlugin extends BasePlugin {
       (node.info.plugin.popOverBody || node.info.plugin.popOverBodyCreator)
     ) {
       toolbars.push({
+        id: 'edit',
         icon: 'fa fa-pencil',
         tooltip: '编辑',
         placement: 'bottom',
@@ -193,6 +197,7 @@ export class BasicToolbarPlugin extends BasePlugin {
 
     if (node.removable || node.removable === undefined) {
       toolbars.push({
+        id: 'delete',
         iconSvg: 'delete-btn',
         icon: 'fa',
         tooltip: '删除',
@@ -203,6 +208,7 @@ export class BasicToolbarPlugin extends BasePlugin {
     }
 
     toolbars.push({
+      id: 'more',
       iconSvg: 'more-btn',
       icon: 'fa fa-cog',
       tooltip: '更多',
@@ -213,8 +219,18 @@ export class BasicToolbarPlugin extends BasePlugin {
           const info = (
             e.target as HTMLElement
           ).parentElement!.getBoundingClientRect();
+
+          // 150 是 contextMenu 的宽度
+          // 默认右对齐
+          let x = window.scrollX + info.left + info.width - 150;
+
+          // 显示不全是改成左对齐
+          if (x < 0) {
+            x = window.scrollX + info.left;
+          }
+
           this.manager.openContextMenu(id, '', {
-            x: window.scrollX + info.left + info.width - 155,
+            x: x,
             y: window.scrollY + info.top + info.height + 8
           });
         }
@@ -223,6 +239,7 @@ export class BasicToolbarPlugin extends BasePlugin {
 
     if (info.scaffoldForm?.canRebuild ?? info.plugin.scaffoldForm?.canRebuild) {
       toolbars.push({
+        id: 'build',
         iconSvg: 'harmmer',
         tooltip: `快速构建「${info.plugin.name}」`,
         placement: 'bottom',
@@ -247,19 +264,22 @@ export class BasicToolbarPlugin extends BasePlugin {
     if (selections.length) {
       // 多选时的右键菜单
       menus.push({
+        id: 'copy',
         label: '重复一份',
         icon: 'copy-icon',
         disabled: selections.some(item => !item.node.duplicatable),
         onSelect: () => manager.duplicate(selections.map(item => item.id))
       });
 
       menus.push({
+        id: 'unselect',
         label: '取消多选',
         icon: 'cancel-icon',
         onSelect: () => store.setActiveId(id)
       });
 
       menus.push({
+        id: 'delete',
         label: '删除',
         icon: 'delete-icon',
         disabled: selections.some(item => !item.node.removable),
@@ -281,23 +301,27 @@ export class BasicToolbarPlugin extends BasePlugin {
         });
         */
         menus.push({
+          id: 'insert',
           label: '插入组件',
           onHighlight: (isOn: boolean) => isOn && store.setHoverId(id, region),
           onSelect: () => store.showInsertRendererPanel()
         });
 
         menus.push({
+          id: 'clear',
           label: '清空',
           onSelect: () => manager.emptyRegion(id, region)
         });
 
         menus.push({
+          id: 'paste',
           label: '粘贴',
           onSelect: () => manager.paste(id, region)
         });
       }
     } else {
       menus.push({
+        id: 'select',
         label: `选中${first.label}`,
         disabled: store.activeId === first.id,
         data: id,
@@ -326,6 +350,7 @@ export class BasicToolbarPlugin extends BasePlugin {
       }
 
       menus.push({
+        id: 'unselect',
         label: '取消选中',
         disabled: !store.activeId || store.activeId !== id,
         onSelect: () => store.setActiveId('')
@@ -334,23 +359,27 @@ export class BasicToolbarPlugin extends BasePlugin {
       menus.push('|');
 
       menus.push({
+        id: 'copy',
         label: '重复一份',
         disabled: !node.duplicatable,
         onSelect: () => manager.duplicate(id)
       });
 
       menus.push({
+        id: 'copy-config',
         label: '复制配置',
         onSelect: () => manager.copy(id)
       });
 
       menus.push({
+        id: 'cat-config',
         label: '剪切配置',
         disabled: !node.removable,
         onSelect: () => manager.cut(id)
       });
 
       menus.push({
+        id: 'paste-config',
         label: '粘贴配置',
         disabled:
           !Array.isArray(parent) ||
@@ -361,6 +390,7 @@ export class BasicToolbarPlugin extends BasePlugin {
       });
 
       menus.push({
+        id: 'delete',
         label: '删除',
         disabled: !node.removable,
         className: 'text-danger',
@@ -372,13 +402,15 @@ export class BasicToolbarPlugin extends BasePlugin {
       const idx = Array.isArray(parent) ? parent.indexOf(schema) : -1;
 
       menus.push({
+        id: 'move-forward',
         label: '向前移动',
         disabled: !(Array.isArray(parent) && idx > 0) || !node.moveable,
         // || !node.prevSibling,
         onSelect: () => manager.moveUp()
       });
 
       menus.push({
+        id: 'move-backward',
         label: '向后移动',
         disabled:
           !(Array.isArray(parent) && idx < parent.length - 1) || !node.moveable,
@@ -450,12 +482,14 @@ export class BasicToolbarPlugin extends BasePlugin {
       // });
 
       menus.push({
+        id: 'undo',
         label: '撤销（Undo）',
         disabled: !store.canUndo,
         onSelect: () => store.undo()
       });
 
       menus.push({
+        id: 'redo',
         label: '重做（Redo）',
         disabled: !store.canRedo,
         onSelect: () => store.redo()
@@ -499,6 +533,7 @@ export class BasicToolbarPlugin extends BasePlugin {
       if (first.childRegions.length && renderersPanel) {
         if (first.childRegions.length > 1) {
           menus.push({
+            id: 'insert',
             label: '插入组件',
             children: first.childRegions.map(region => ({
               label: `${region.label}`,
@@ -510,6 +545,7 @@ export class BasicToolbarPlugin extends BasePlugin {
           });
         } else {
           menus.push({
+            id: 'insert',
             label: '插入组件',
             data: first.childRegions[0].region,
             onHighlight: (isOn: boolean, region: string) =>
@@ -520,13 +556,15 @@ export class BasicToolbarPlugin extends BasePlugin {
       }
       if (node.type === 'container') {
         menus.push({
+          id: 'clear',
           label: '清空容器',
           disabled: !node.schema.body?.length,
           onSelect: () => manager.emptyRegion(id, 'body')
         });
       }
 
       menus.push({
+        id: 'replace',
         label: '替换组件',
         disabled:
           !node.host ||
@@ -543,6 +581,7 @@ export class BasicToolbarPlugin extends BasePlugin {
       (info.plugin.scaffoldForm?.canRebuild || info.scaffoldForm?.canRebuild)
     ) {
       menus.push({
+        id: 'build',
         label: `快速构建「${info.plugin.name}」`,
         disabled: schema.$$commonSchema,
         onSelect: () =>