github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-12 17:08:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 优化画布锁机制

Browse Source
This commit is contained in:
lihao.ylh 2021-08-05 16:36:23 +08:00
parent b94b06965e
commit 9f3e8df15e
9 changed files with 19 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx
View File

@ -112,7 +112,8 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> {
}
const lockedNode = getClosestNode(current, (n) => {
return n?.getExtraProp('isLocked')?.getValue() === true;
// 假如当前节点就是 locked 状态，要从当前节点的父节点开始查找
return !!(current?.isLocked ? n.parent?.isLocked : n.isLocked);
});
if (lockedNode && lockedNode.getId() !== current.getId()) {
// 选中父节锁定的节点

2
packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx
View File

@ -135,7 +135,7 @@ function createAction(content: ReactNode | ComponentType<any> | ActionContentObj
className="lc-borders-action"
onClick={() => {
action && action(node);
const editor = globalContext.get(Editor);
const editor = globalContext.get('editor');
const npm = node?.componentMeta?.npm;
const selected =
[npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||

5
packages/designer/src/builtin-simulator/host.ts
View File

@ -1218,10 +1218,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
}
const dropContainer = this.getDropContainer(e);
const canDropIn = dropContainer?.container?.componentMeta?.prototype?.options?.canDropIn;
const lockedNode = getClosestNode(dropContainer?.container as Node, (node) => {
return node?.getExtraProp('isLocked')?.getValue() === true;
});
// const isLocked = dropContainer?.container?.getExtraProp('isLocked')?.getValue();
const lockedNode = getClosestNode(dropContainer?.container as Node, (node) => node.isLocked);
if (lockedNode) return null;
if (
!dropContainer ||

9
packages/designer/src/builtin-simulator/utils/clickable.ts
View File

@ -11,12 +11,13 @@ export const getClosestClickableNode = (
event: MouseEvent,
) => {
let node = currentNode;
// 执行 onClickHook 来判断当前节点是否可点击
while (node) {
const lockedNode = getClosestNode(node, (n) => {
return n?.getExtraProp('isLocked')?.getValue() === true;
});
// 判断当前节点是否可点击
let canClick = canClickNode(node, event);
const lockedNode = getClosestNode(node!, (n) => {
// 假如当前节点就是 locked 状态，要从当前节点的父节点开始查找
return !!(node?.isLocked ? n.parent?.isLocked : n.isLocked);
});
if (lockedNode && lockedNode.getId() !== node.getId()) {
canClick = false;
}

10
packages/designer/src/component-meta.ts
View File

@ -474,12 +474,11 @@ const builtinComponentActions: ComponentAction[] = [
icon: IconUnlock, // 解锁icon
title: intlNode('lock'),
action(node: Node) {
node.getExtraProp('isLocked', true)?.setValue(true);
node.lock();
},
},
condition: (node: Node) => {
const isLocked = node.getExtraProp('isLocked')?.getValue();
return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && isLocked !== true);
return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && !node.isLocked);
},
important: true,
},
@ -489,12 +488,11 @@ const builtinComponentActions: ComponentAction[] = [
icon: IconLock, // 锁定icon
title: intlNode('unlock'),
action(node: Node) {
node.getExtraProp('isLocked', true)?.setValue(false);
node.lock(false);
},
},
condition: (node: Node) => {
const isLocked = node.getExtraProp('isLocked')?.getValue();
return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && isLocked === true);
return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && node.isLocked);
},
important: true,
},

4
packages/designer/src/document/node/node.ts
View File

@ -561,8 +561,8 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
return this.props.get(getConvertedExtraKey(key), stash) || null;
}
setExtraProp(key: string, value: CompositeValue, spread = false, options: any = {}): Prop | null {
return this.props.add(value, getConvertedExtraKey(key), spread, options) || null;
setExtraProp(key: string, value: CompositeValue) {
this.getProp(getConvertedExtraKey(key), true)?.setValue(value);
}
/**

8
packages/plugin-outline-pane/src/tree-node.ts
View File

@ -87,15 +87,11 @@ export default class TreeNode {
}
@computed get locked(): boolean {
return this.node.getExtraProp('isLocked', false)?.getValue() === true;
return this.node.isLocked;
}
setLocked(flag: boolean) {
if (flag) {
this.node.getExtraProp('isLocked', true)?.setValue(true);
} else {
this.node.getExtraProp('isLocked', false)?.remove();
}
this.node.lock(flag);
}
@computed get selected(): boolean {

2
packages/rax-simulator-renderer/package.json
View File

@ -55,6 +55,6 @@
"publishConfig": {
"registry": "https://registry.npm.alibaba-inc.com"
},
"homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-rax-simulator-renderer@1.0.60/build/index.html",
"homepage": "https://unpkg.alibaba-inc.com/@ali/lowcode-rax-simulator-renderer@1.0.61/build/index.html",
"gitHead": "3bfd7df92985ec6c9d2ccb8ba95d7b0829fa2b1d"
}

2
packages/utils/src/node-helper.ts
View File

@ -15,8 +15,8 @@ export const getClosestNode = (node: Node, until: (node: Node) => boolean): Node
/**
* 判断节点是否可被点击
* @param {unknown} e 点击事件
* @param {Node} node 节点
* @param {unknown} e 点击事件
* @returns {boolean} 是否可点击，true表示可点击
*/
export const canClickNode = (node: Node, e: unknown): boolean => {