From 23c08b2108560ef6e3cf06b3f5529634bdc79e2f Mon Sep 17 00:00:00 2001 From: "lihao.ylh" Date: Thu, 23 Dec 2021 11:20:07 +0800 Subject: [PATCH 1/6] =?UTF-8?q?chore:=20=E4=BD=BF=E7=94=A8=E6=96=B0?= =?UTF-8?q?=E7=9A=84=20engine-core?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/engine/src/engine-core.ts | 57 +++++++++++++++++++++++------- 1 file changed, 45 insertions(+), 12 deletions(-) diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts index 18ded7bd3..dde8db223 100644 --- a/packages/engine/src/engine-core.ts +++ b/packages/engine/src/engine-core.ts @@ -6,30 +6,43 @@ import { Designer, LowCodePluginManager, ILowCodePluginContext, - Setters, + // Setters, } from '@ali/lowcode-designer'; import * as designerCabin from '@ali/lowcode-designer'; -import { Skeleton, SettingsPrimaryPane, registerDefaults } from '@ali/lowcode-editor-skeleton'; +import { Skeleton as InnerSkeleton, SettingsPrimaryPane, registerDefaults } from '@ali/lowcode-editor-skeleton'; import * as skeletonCabin from '@ali/lowcode-editor-skeleton'; import Outline, { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane'; import DesignerPlugin from '@ali/lowcode-plugin-designer'; +import { + Hotkey, + Project, + Skeleton, + Setters, + Material, + Event, + editorSymbol, + designerSymbol, + skeletonSymbol, +} from '@ali/lowcode-shell'; +import { getLogger, Logger } from '@ali/lowcode-utils'; import './modules/live-editing'; import { isPlainObject } from '@ali/lowcode-utils'; import utils from './modules/utils'; + export * from './modules/editor-types'; export * from './modules/skeleton-types'; export * from './modules/designer-types'; export * from './modules/lowcode-types'; -const { hotkey, monitor, getSetter, registerSetter, getSettersMap } = editorCabin; +const { monitor } = editorCabin; registerDefaults(); const editor = new Editor(); globalContext.register(editor, Editor); globalContext.register(editor, 'editor'); -const skeleton = new Skeleton(editor); +const skeleton = new InnerSkeleton(editor); editor.set(Skeleton, skeleton); editor.set('skeleton' as any, skeleton); @@ -42,11 +55,20 @@ editor.set('plugins' as any, plugins); const { project, currentSelection: selection } = designer; const { Workbench } = skeletonCabin; -const setters: Setters = { - getSetter, - registerSetter, - getSettersMap, -}; +// const setters: Setters = { +// getSetter, +// registerSetter, +// getSettersMap, +// }; + +const hotkey = new Hotkey(); +const project2 = new Project(project); +const skeleton2 = new Skeleton(skeleton); +const setters2 = new Setters(); +const material = new Material(editor); +const config = engineConfig; +const event = new Event(editor, { prefix: 'common' }); +const logger = getLogger({ level: 'warn', bizName: 'common' }); export { editor, @@ -76,15 +98,22 @@ export { const getSelection = () => designer.currentDocument?.selection; // TODO: build-plugin-component 的 umd 开发态没有导出 AliLowCodeEngine，这里先简单绕过 (window as any).AliLowCodeEngine = { + /** + * 待删除 start，不要用 + */ editor, editorCabin, - // skeleton, skeletonCabin, designer, designerCabin, + /** + * 待删除 end + */ plugins, - // setters, - project, + skeleton: skeleton2, + project: project2, + setters: setters2, + material, // get selection() { // return getSelection(); // }, @@ -100,6 +129,10 @@ const getSelection = () => designer.currentDocument?.selection; monitor, init, utils, + config, + event, + logger, + hotkey, // engineConfig, }; From ece6c76b463536d6b2888a2a29895015cf9b1422 Mon Sep 17 00:00:00 2001 From: "lihao.ylh" Date: Thu, 23 Dec 2021 15:55:02 +0800 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E7=BB=A7=E7=BB=AD=E5=AE=8C?= =?UTF-8?q?=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/designer/package.json | 1 + .../bem-tools/border-detecting.tsx | 2 +- .../bem-tools/border-resizing.tsx | 9 +- .../bem-tools/drag-resize-engine.ts | 6 +- .../designer/src/builtin-simulator/host.ts | 7 +- .../src/document/node/node-children.ts | 6 +- packages/designer/src/document/node/node.ts | 11 ++- packages/shell/src/canvas.ts | 21 +++++ packages/shell/src/document-model.ts | 3 + packages/shell/src/drop-location.ts | 22 +++++ packages/shell/src/event.ts | 5 ++ packages/shell/src/node.ts | 19 ++++ packages/shell/src/project.ts | 11 +++ packages/shell/src/props.ts | 88 +++++++++++++++++++ packages/shell/src/simulator-host.ts | 8 ++ packages/shell/src/symbols.ts | 2 + 16 files changed, 208 insertions(+), 13 deletions(-) create mode 100644 packages/shell/src/canvas.ts create mode 100644 packages/shell/src/drop-location.ts create mode 100644 packages/shell/src/props.ts diff --git a/packages/designer/package.json b/packages/designer/package.json index dda1156b7..d3e73d3a0 100644 --- a/packages/designer/package.json +++ b/packages/designer/package.json @@ -18,6 +18,7 @@ "@ali/lowcode-editor-core": "1.0.74", "@ali/lowcode-types": "1.0.74", "@ali/lowcode-utils": "1.0.74", + "@ali/lowcode-shell": "1.0.74", "classnames": "^2.2.6", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx index 37602d28f..595048dba 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx @@ -79,7 +79,7 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> { const canHoverHook = current?.componentMeta.getMetadata()?.experimental?.callbacks?.onHoverHook; - const canHover = (canHoverHook && typeof canHoverHook === 'function') ? canHoverHook(current) : true; + const canHover = (canHoverHook && typeof canHoverHook === 'function') ? canHoverHook(current.internalToShellNode()) : true; if (!canHover || !current || host.viewport.scrolling || host.liveEditing.editing) { diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx index b870aef7d..720cff9d9 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx @@ -151,7 +151,8 @@ export class BoxResizingInstance extends Component<{ (e as any).trigger = direction; (e as any).deltaX = moveX; (e as any).deltaY = moveY; - metaData.experimental.callbacks.onResize(e, node); + const cbNode = node?.isNode ? node.internalToShellNode() : node; + metaData.experimental.callbacks.onResize(e, cbNode); } }; @@ -164,7 +165,8 @@ export class BoxResizingInstance extends Component<{ typeof metaData.experimental.callbacks.onResizeStart === 'function' ) { (e as any).trigger = direction; - metaData.experimental.callbacks.onResizeStart(e, node); + const cbNode = node?.isNode ? node.internalToShellNode() : node; + metaData.experimental.callbacks.onResizeStart(e, cbNode); } }; @@ -177,7 +179,8 @@ export class BoxResizingInstance extends Component<{ typeof metaData.experimental.callbacks.onResizeEnd === 'function' ) { (e as any).trigger = direction; - metaData.experimental.callbacks.onResizeEnd(e, node); + const cbNode = node?.isNode ? node.internalToShellNode() : node; + metaData.experimental.callbacks.onResizeEnd(e, cbNode); } const editor = globalContext.get(Editor); diff --git a/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts b/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts index 162ada1b7..b52c0fd22 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts +++ b/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts @@ -109,7 +109,7 @@ export default class DragResizeEngine { doc.addEventListener('mouseup', over, true); }); - this.emitter.emit('resizestart', e, direction, node); + this.emitter.emit('resizeStart', e, direction, node); this.dragResizing = true; this.designer.detecting.enable = false; cursor.addState('ew-resize'); @@ -121,9 +121,9 @@ export default class DragResizeEngine { } onResizeStart(func: (e: MouseEvent, direction: string, node: any) => any) { - this.emitter.on('resizestart', func); + this.emitter.on('resizeStart', func); return () => { - this.emitter.removeListener('resizestart', func); + this.emitter.removeListener('resizeStart', func); }; } diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index 0671cc730..0a4f83b15 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/packages/designer/src/builtin-simulator/host.ts @@ -39,6 +39,7 @@ import { } from '@ali/lowcode-utils'; import { DragObjectType, + DragNodeObject, isShaken, LocateEvent, isDragAnyObject, @@ -1135,11 +1136,11 @@ export class BuiltinSimulatorHost implements ISimulatorHost { + const operationalNodes = nodes?.filter((node) => { const onMoveHook = node.componentMeta?.getMetadata()?.experimental?.callbacks?.onMoveHook; - const canMove = onMoveHook && typeof onMoveHook === 'function' ? onMoveHook(node) : true; + const canMove = onMoveHook && typeof onMoveHook === 'function' ? onMoveHook(node.internalToShellNode()) : true; return canMove; }); diff --git a/packages/designer/src/document/node/node-children.ts b/packages/designer/src/document/node/node-children.ts index 404f95dc7..57894f1a0 100644 --- a/packages/designer/src/document/node/node-children.ts +++ b/packages/designer/src/document/node/node-children.ts @@ -419,7 +419,11 @@ export class NodeChildren { const callbacks = owner.componentMeta.getMetadata().experimental?.callbacks; if (callbacks?.onSubtreeModified) { try { - callbacks?.onSubtreeModified.call(node, owner, options); + callbacks?.onSubtreeModified.call( + node.internalToShellNode(), + owner.internalToShellNode(), + options, + ); } catch (e) { console.error('error when excute experimental.callbacks.onSubtreeModified', e); } diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index 4af456ab5..0d03761ba 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -19,6 +19,7 @@ import { } from '@ali/lowcode-types'; import { compatStage } from '@ali/lowcode-utils'; import { SettingTopEntry } from '@ali/lowcode-designer'; +import { Node as ShellNode } from '@ali/lowcode-shell'; import { Props, getConvertedExtraKey } from './props/props'; import { DocumentModel } from '../document-model'; import { NodeChildren } from './node-children'; @@ -299,7 +300,8 @@ export class Node { private didDropIn(dragment: Node) { const callbacks = this.componentMeta.getMetadata().experimental?.callbacks; if (callbacks?.onNodeAdd) { - callbacks?.onNodeAdd.call(this, dragment, this); + const cbThis = this.internalToShellNode(); + callbacks?.onNodeAdd.call(cbThis, dragment.internalToShellNode(), cbThis); } if (this._parent) { this._parent.didDropIn(dragment); @@ -309,7 +311,8 @@ export class Node { private didDropOut(dragment: Node) { const callbacks = this.componentMeta.getMetadata().experimental?.callbacks; if (callbacks?.onNodeRemove) { - callbacks?.onNodeRemove.call(this, dragment, this); + const cbThis = this.internalToShellNode(); + callbacks?.onNodeRemove.call(cbThis, dragment.internalToShellNode(), cbThis); } if (this._parent) { this._parent.didDropOut(dragment); @@ -361,6 +364,10 @@ export class Node { this._slotFor = slotFor; } + internalToShellNode(): ShellNode | null { + return ShellNode.create(this); + } + /** * 关联属性 */ diff --git a/packages/shell/src/canvas.ts b/packages/shell/src/canvas.ts new file mode 100644 index 000000000..4caa06b06 --- /dev/null +++ b/packages/shell/src/canvas.ts @@ -0,0 +1,21 @@ +import { Designer, Prop as InnerProp } from '@ali/lowcode-designer'; +import { CompositeValue, TransformStage } from '@ali/lowcode-types'; +import { designerSymbol } from './symbols'; +import DropLocation from './drop-location'; + +export default class Canvas { + private readonly [designerSymbol]: Designer; + + constructor(designer: Designer) { + this[designerSymbol] = designer; + } + + static create(designer: Designer) { + if (!designer) return null; + return new Canvas(designer); + } + + get dropLocation() { + return DropLocation.create(this[designerSymbol].dropLocation || null); + } +} \ No newline at end of file diff --git a/packages/shell/src/document-model.ts b/packages/shell/src/document-model.ts index d0bfba04f..fba2f3e81 100644 --- a/packages/shell/src/document-model.ts +++ b/packages/shell/src/document-model.ts @@ -13,6 +13,7 @@ import Detecting from './detecting'; import History from './history'; import Project from './project'; import Prop from './prop'; +import Canvas from './canvas'; import { documentSymbol, editorSymbol, nodeSymbol } from './symbols'; type IOnChangeOptions = { @@ -34,6 +35,7 @@ export default class DocumentModel { public selection: Selection; public detecting: Detecting; public history: History; + public canvas: Canvas; constructor(document: InnerDocumentModel) { this[documentSymbol] = document; @@ -41,6 +43,7 @@ export default class DocumentModel { this.selection = new Selection(document); this.detecting = new Detecting(document); this.history = new History(document); + this.canvas = new Canvas(document.designer); } static create(document: InnerDocumentModel | undefined | null) { diff --git a/packages/shell/src/drop-location.ts b/packages/shell/src/drop-location.ts new file mode 100644 index 000000000..84d9e75d0 --- /dev/null +++ b/packages/shell/src/drop-location.ts @@ -0,0 +1,22 @@ +import { + DropLocation as InnerDropLocation, +} from '@ali/lowcode-designer'; +import { dropLocationSymbol } from './symbols'; +import Node from './node'; + +export default class DropLocation { + private readonly [dropLocationSymbol]: InnerDropLocation; + + constructor(dropLocation: InnerDropLocation) { + this[dropLocationSymbol] = dropLocation; + } + + static create(dropLocation: InnerDropLocation | null) { + if (!dropLocation) return null; + return new DropLocation(dropLocation); + } + + get target() { + return Node.create(this[dropLocationSymbol].target); + } +} diff --git a/packages/shell/src/event.ts b/packages/shell/src/event.ts index 781f01254..1956b5768 100644 --- a/packages/shell/src/event.ts +++ b/packages/shell/src/event.ts @@ -12,6 +12,11 @@ export default class Event { private readonly [editorSymbol]: InnerEditor; private readonly options: EventOptions; + /** + * 内核触发的事件名 + */ + readonly names = []; + constructor(editor: InnerEditor, options: EventOptions) { this[editorSymbol] = editor; this.options = options; diff --git a/packages/shell/src/node.ts b/packages/shell/src/node.ts index 3ae3a502e..0fb4e7bd3 100644 --- a/packages/shell/src/node.ts +++ b/packages/shell/src/node.ts @@ -5,6 +5,7 @@ import { } from '@ali/lowcode-designer'; import { CompositeValue, NodeSchema, TransformStage } from '@ali/lowcode-types'; import Prop from './prop'; +import Props from './props'; import DocumentModel from './document-model'; import NodeChildren from './node-children'; import ComponentMeta from './component-meta'; @@ -134,6 +135,17 @@ export default class Node { return Prop.create(this[nodeSymbol].slotFor); } + get props() { + return Props.create(this[nodeSymbol].props); + } + + /** + * @deprecated use .children instead + */ + getChildren() { + return this.children; + } + hasSlots() { return this[nodeSymbol].hasSlots(); } @@ -146,6 +158,13 @@ export default class Node { return this[nodeSymbol].hasLoop(); } + /** + * @deprecated use .props instead + */ + getProps() { + return this.props; + } + /** * 获取指定 path 的属性模型实例 * @param path 属性路径，支持 a / a.b / a.0 等格式 diff --git a/packages/shell/src/project.ts b/packages/shell/src/project.ts index faa83c336..1a367cd73 100644 --- a/packages/shell/src/project.ts +++ b/packages/shell/src/project.ts @@ -30,6 +30,17 @@ export default class Project { return this[projectSymbol].documents.map((doc) => DocumentModel.create(doc)!); } + get simulatorHost() { + return SimulatorHost.create(this[projectSymbol].simulator as any || this[simulatorHostSymbol]); + } + + /** + * @deprecated use simulatorHost instead. + */ + get simulator() { + return this.simulatorHost; + } + /** * 打开一个 document * @param doc diff --git a/packages/shell/src/props.ts b/packages/shell/src/props.ts new file mode 100644 index 000000000..0392fd84c --- /dev/null +++ b/packages/shell/src/props.ts @@ -0,0 +1,88 @@ +import { Props as InnerProps, getConvertedExtraKey } from '@ali/lowcode-designer'; +import { CompositeValue, TransformStage } from '@ali/lowcode-types'; +import { propsSymbol } from './symbols'; +import Node from './node'; +import Prop from './prop'; + +export default class Props { + private readonly [propsSymbol]: InnerProps; + + constructor(props: InnerProps) { + this[propsSymbol] = props; + } + + static create(props: InnerProps | undefined | null) { + if (!props) return null; + return new Props(props); + } + + get id() { + return this[propsSymbol].id; + } + + get path() { + return this[propsSymbol].path; + } + + get node(): Node | null { + return Node.create(this[propsSymbol].getNode()); + } + + /** + * 获取指定 path 的属性模型实例 + * @param path 属性路径，支持 a / a.b / a.0 等格式 + * @returns + */ + getProp(path: string): Prop | null { + return Prop.create(this[propsSymbol].getProp(path)); + } + + /** + * 获取指定 path 的属性模型实例值 + * @param path 属性路径，支持 a / a.b / a.0 等格式 + * @returns + */ + getPropValue(path: string) { + return this.getProp(path)?.getValue(); + } + + /** + * 获取指定 path 的属性模型实例， + * 注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 + * @param path 属性路径，支持 a / a.b / a.0 等格式 + * @returns + */ + getExtraProp(path: string): Prop | null { + return Prop.create(this[propsSymbol].getProp(getConvertedExtraKey(path))); + } + + /** + * 获取指定 path 的属性模型实例， + * 注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级 + * @param path 属性路径，支持 a / a.b / a.0 等格式 + * @returns + */ + getExtraPropValue(path: string) { + return this.getExtraProp(path)?.getValue(); + } + + /** + * 设置指定 path 的属性模型实例值 + * @param path 属性路径，支持 a / a.b / a.0 等格式 + * @param value 值 + * @returns + */ + setPropValue(path: string, value: CompositeValue) { + return this.getProp(path)?.setValue(value); + } + + /** + * 设置指定 path 的属性模型实例值 + * @param path 属性路径，支持 a / a.b / a.0 等格式 + * @param value 值 + * @returns + */ + setExtraPropValue(path: string, value: CompositeValue) { + return this.getExtraProp(path)?.setValue(value); + } +} \ No newline at end of file diff --git a/packages/shell/src/simulator-host.ts b/packages/shell/src/simulator-host.ts index 006321350..6af489c70 100644 --- a/packages/shell/src/simulator-host.ts +++ b/packages/shell/src/simulator-host.ts @@ -15,6 +15,14 @@ export default class SimulatorHost { return new SimulatorHost(host); } + get contentWindow() { + return this[simulatorHostSymbol].contentWindow; + } + + get contentDocument() { + return this[simulatorHostSymbol].contentDocument; + } + set(key: string, value: any) { this[simulatorHostSymbol].set(key, value); } diff --git a/packages/shell/src/symbols.ts b/packages/shell/src/symbols.ts index a7724e994..94dac51ed 100644 --- a/packages/shell/src/symbols.ts +++ b/packages/shell/src/symbols.ts @@ -13,6 +13,8 @@ export const propSymbol = Symbol('prop'); export const detectingSymbol = Symbol('detecting'); export const selectionSymbol = Symbol('selection'); export const historySymbol = Symbol('history'); +export const canvasSymbol = Symbol('canvas'); export const componentMetaSymbol = Symbol('componentMeta'); +export const dropLocationSymbol = Symbol('dropLocation'); export const simulatorHostSymbol = Symbol('simulatorHost'); export const simulatorRendererSymbol = Symbol('simulatorRenderer'); \ No newline at end of file From 3f041b592b3dabad9a234bc6ce7544bb0953c156 Mon Sep 17 00:00:00 2001 From: "lihao.ylh" Date: Thu, 23 Dec 2021 20:46:04 +0800 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=E4=B8=80?= =?UTF-8?q?=E6=B3=A2=20callbacks=20/=20hooks=20shell=20=E6=A8=A1=E5=9E=8B?= =?UTF-8?q?=E8=BD=AC=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/designer/src/component-meta.ts | 36 ++++++--- .../src/designer/setting/setting-field.ts | 3 +- .../designer/setting/setting-prop-entry.ts | 24 ++++-- .../src/components/settings/settings-pane.tsx | 78 +++++++++---------- packages/engine/src/engine-core.ts | 14 ++-- packages/shell/src/index.ts | 2 + packages/shell/src/node-children.ts | 10 ++- packages/shell/src/node.ts | 11 +++ packages/shell/src/project.ts | 2 +- packages/shell/src/setting-prop-entry.ts | 40 ++++++++++ packages/shell/src/setting-top-entry.ts | 34 ++++++++ packages/shell/src/symbols.ts | 4 +- packages/types/src/setting-target.ts | 5 ++ 13 files changed, 197 insertions(+), 66 deletions(-) create mode 100644 packages/shell/src/setting-prop-entry.ts create mode 100644 packages/shell/src/setting-top-entry.ts diff --git a/packages/designer/src/component-meta.ts b/packages/designer/src/component-meta.ts index d552b7777..f35e8f499 100644 --- a/packages/designer/src/component-meta.ts +++ b/packages/designer/src/component-meta.ts @@ -19,7 +19,16 @@ import EventEmitter from 'events'; import { isNode, Node, ParentalNode } from './document'; import { Designer } from './designer'; import { intlNode } from './locale'; -import { IconLock, IconUnlock, IconContainer, IconPage, IconComponent, IconRemove, IconClone, IconHidden } from './icons'; +import { + IconLock, + IconUnlock, + IconContainer, + IconPage, + IconComponent, + IconRemove, + IconClone, + IconHidden, +} from './icons'; function ensureAList(list?: string | string[]): string[] | null { if (!list) { @@ -183,10 +192,10 @@ export class ComponentMeta { this._title = typeof title === 'string' ? { - type: 'i18n', - 'en-US': this.componentName, - 'zh-CN': title, - } + type: 'i18n', + 'en-US': this.componentName, + 'zh-CN': title, + } : title; } @@ -265,7 +274,8 @@ export class ComponentMeta { // eslint-disable-next-line prefer-const let { disableBehaviors, actions } = this._transformedMetadata?.configure.component || {}; const disabled = - ensureAList(disableBehaviors) || (this.isRootComponent(false) ? ['copy', 'remove', 'lock', 'unlock'] : null); + ensureAList(disableBehaviors) || + (this.isRootComponent(false) ? ['copy', 'remove', 'lock', 'unlock'] : null); actions = builtinComponentActions.concat( this.designer.getGlobalComponentActions() || [], actions || [], @@ -291,7 +301,10 @@ export class ComponentMeta { checkNestingUp(my: Node | NodeData, parent: ParentalNode) { // 检查父子关系，直接约束型，在画布中拖拽直接掠过目标容器 if (this.parentWhitelist) { - return this.parentWhitelist(parent, my); + return this.parentWhitelist( + parent.internalToShellNode(), + isNode(my) ? my.internalToShellNode() : my, + ); } return true; } @@ -302,7 +315,10 @@ export class ComponentMeta { const _target: any = !Array.isArray(target) ? [target] : target; return _target.every((item: Node | NodeSchema) => { const _item = !isNode(item) ? new Node(my.document, item) : item; - return this.childWhitelist && this.childWhitelist(_item, my); + return ( + this.childWhitelist && + this.childWhitelist(_item.internalToShellNode(), my.internalToShellNode()) + ); }); } return true; @@ -484,7 +500,7 @@ const builtinComponentActions: ComponentAction[] = [ }, }, condition: (node: Node) => { - return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && !node.isLocked); + return engineConfig.get('enableCanvasLock', false) && node.isContainer() && !node.isLocked; }, important: true, }, @@ -498,7 +514,7 @@ const builtinComponentActions: ComponentAction[] = [ }, }, condition: (node: Node) => { - return (engineConfig.get('enableCanvasLock', false) && node.isContainer() && node.isLocked); + return engineConfig.get('enableCanvasLock', false) && node.isContainer() && node.isLocked; }, important: true, }, diff --git a/packages/designer/src/designer/setting/setting-field.ts b/packages/designer/src/designer/setting/setting-field.ts index b57646333..95bf030be 100644 --- a/packages/designer/src/designer/setting/setting-field.ts +++ b/packages/designer/src/designer/setting/setting-field.ts @@ -44,7 +44,8 @@ export class SettingField extends SettingPropEntry implements SettingEntry { return null; } if (isDynamicSetter(this._setter)) { - return this._setter.call(this, this); + const shellThis = this.internalToShellPropEntry(); + return this._setter.call(shellThis, shellThis); } return this._setter; } diff --git a/packages/designer/src/designer/setting/setting-prop-entry.ts b/packages/designer/src/designer/setting/setting-prop-entry.ts index ae48bae1a..cd71d9655 100644 --- a/packages/designer/src/designer/setting/setting-prop-entry.ts +++ b/packages/designer/src/designer/setting/setting-prop-entry.ts @@ -1,6 +1,7 @@ import { obx, computed, makeObservable, runInAction } from '@ali/lowcode-editor-core'; import { GlobalEvent, IEditor, isJSExpression } from '@ali/lowcode-types'; import { uniqueId } from '@ali/lowcode-utils'; +import { SettingPropEntry as ShellSettingPropEntry } from '@ali/lowcode-shell'; import { SettingEntry } from './setting-entry'; import { Node } from '../../document'; import { ComponentMeta } from '../../component-meta'; @@ -124,7 +125,11 @@ export class SettingPropEntry implements SettingEntry { return runInAction(() => { if (this.type !== 'field') { const { getValue } = this.extraProps; - return getValue ? (getValue(this, undefined) === undefined ? 0 : 1) : 0; + return getValue + ? getValue(this.internalToShellPropEntry(), undefined) === undefined + ? 0 + : 1 + : 0; } if (this.nodes.length === 1) { return 2; @@ -160,7 +165,7 @@ export class SettingPropEntry implements SettingEntry { } const { getValue } = this.extraProps; try { - return getValue ? getValue(this, val) : val; + return getValue ? getValue(this.internalToShellPropEntry(), val) : val; } catch (e) { console.warn(e); return val; @@ -179,7 +184,7 @@ export class SettingPropEntry implements SettingEntry { const { setValue } = this.extraProps; if (setValue && !extraOptions?.disableMutator) { try { - setValue(this, val); + setValue(this.internalToShellPropEntry(), val); } catch (e) { /* istanbul ignore next */ console.warn(e); @@ -202,7 +207,7 @@ export class SettingPropEntry implements SettingEntry { const { setValue } = this.extraProps; if (setValue) { try { - setValue(this, undefined); + setValue(this.internalToShellPropEntry(), undefined); } catch (e) { /* istanbul ignore next */ console.warn(e); @@ -293,7 +298,12 @@ export class SettingPropEntry implements SettingEntry { } notifyValueChange(oldValue: any, newValue: any) { - this.editor.emit(GlobalEvent.Node.Prop.Change, { node: this.getNode(), prop: this, oldValue, newValue }); + this.editor.emit(GlobalEvent.Node.Prop.Change, { + node: this.getNode(), + prop: this, + oldValue, + newValue, + }); } getDefaultValue() { @@ -352,4 +362,8 @@ export class SettingPropEntry implements SettingEntry { } return v; } + + internalToShellPropEntry() { + return ShellSettingPropEntry.create(this) as any; + } } diff --git a/packages/editor-skeleton/src/components/settings/settings-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-pane.tsx index d1fd3c21f..ee5fcdf78 100644 --- a/packages/editor-skeleton/src/components/settings/settings-pane.tsx +++ b/packages/editor-skeleton/src/components/settings/settings-pane.tsx @@ -40,7 +40,7 @@ class SettingFieldView extends Component<{ field: SettingField }> { let stageName; if (display === 'entry') { runInAction(() => { - stageName = `${field.getNode().id }_${field.name.toString()}`; + stageName = `${field.getNode().id}_${field.name.toString()}`; // 清除原 stage，不然 content 引用的一直是老的 field，导致数据无法得到更新 stages.container.remove(stageName); const stage = stages.add({ @@ -62,7 +62,7 @@ class SettingFieldView extends Component<{ field: SettingField }> { const { condition, defaultValue } = extraProps; let visible; try { - visible = typeof condition === 'function' ? condition(field) !== false : true; + visible = typeof condition === 'function' ? condition(field.internalToShellPropEntry()) !== false : true; } catch (error) { console.error('exception when condition (hidden) is excuted', error); } @@ -86,7 +86,7 @@ class SettingFieldView extends Component<{ field: SettingField }> { if (setter.props) { setterProps = setter.props; if (typeof setterProps === 'function') { - setterProps = setterProps(field); + setterProps = setterProps(field.internalToShellPropEntry()); } } if (setter.initialValue != null) { @@ -150,40 +150,40 @@ class SettingFieldView extends Component<{ field: SettingField }> { ...extraProps, }, !stageName && - createSetterContent(setterType, { - ...shallowIntl(setterProps), - forceInline: extraProps.forceInline, - key: field.id, - // === injection - prop: field, // for compatible vision - selected: field.top?.getNode(), - field, - // === IO - value, // reaction point - onChange: (value: any) => { - this.setState({ - // eslint-disable-next-line react/no-unused-state - value, - }); - field.setValue(value); - if (_onChange) _onChange(value, field); - }, - onInitial: () => { - if (initialValue == null) { - return; - } - const value = typeof initialValue === 'function' ? initialValue(field) : initialValue; - this.setState({ - // eslint-disable-next-line react/no-unused-state - value, - }); - field.setValue(value); - }, + createSetterContent(setterType, { + ...shallowIntl(setterProps), + forceInline: extraProps.forceInline, + key: field.id, + // === injection + prop: field.internalToShellPropEntry(), // for compatible vision + selected: field.top?.getNode()?.internalToShellNode(), + field: field.internalToShellPropEntry(), + // === IO + value, // reaction point + onChange: (value: any) => { + this.setState({ + // eslint-disable-next-line react/no-unused-state + value, + }); + field.setValue(value); + if (_onChange) _onChange(value, field); + }, + onInitial: () => { + if (initialValue == null) { + return; + } + const value = typeof initialValue === 'function' ? initialValue(field.internalToShellPropEntry()) : initialValue; + this.setState({ + // eslint-disable-next-line react/no-unused-state + value, + }); + field.setValue(value); + }, - removeProp: () => { - field.parent.clearPropValue(field.name); - }, - }), + removeProp: () => { + field.parent.clearPropValue(field.name); + }, + }), extraProps.forceInline ? 'plain' : extraProps.display, ); } @@ -200,7 +200,7 @@ class SettingGroupView extends Component { super(props); const { field } = this.props; const { extraProps } = field; - const { condition, display } = extraProps; + const { display } = extraProps; const { stages } = field.editor.get('skeleton') as Skeleton; // const items = field.items; @@ -208,7 +208,7 @@ class SettingGroupView extends Component { let stageName; if (display === 'entry') { runInAction(() => { - stageName = `${field.getNode().id }_${field.name.toString()}`; + stageName = `${field.getNode().id}_${field.name.toString()}`; // 清除原 stage，不然 content 引用的一直是老的 field，导致数据无法得到更新 stages.container.remove(stageName); stages.add({ @@ -228,7 +228,7 @@ class SettingGroupView extends Component { const { field } = this.props; const { extraProps } = field; const { condition, display } = extraProps; - const visible = field.isSingle && typeof condition === 'function' ? condition(field) !== false : true; + const visible = field.isSingle && typeof condition === 'function' ? condition(field.internalToShellPropEntry()) !== false : true; if (!visible) { return null; diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts index dde8db223..396283e8f 100644 --- a/packages/engine/src/engine-core.ts +++ b/packages/engine/src/engine-core.ts @@ -24,12 +24,10 @@ import { designerSymbol, skeletonSymbol, } from '@ali/lowcode-shell'; -import { getLogger, Logger } from '@ali/lowcode-utils'; +import { getLogger, Logger, isPlainObject } from '@ali/lowcode-utils'; import './modules/live-editing'; -import { isPlainObject } from '@ali/lowcode-utils'; import utils from './modules/utils'; - export * from './modules/editor-types'; export * from './modules/skeleton-types'; export * from './modules/designer-types'; @@ -71,12 +69,12 @@ const event = new Event(editor, { prefix: 'common' }); const logger = getLogger({ level: 'warn', bizName: 'common' }); export { - editor, - editorCabin, + // editor, + // editorCabin, // skeleton, - skeletonCabin, - designer, - designerCabin, + // skeletonCabin, + // designer, + // designerCabin, plugins, // setters, project, diff --git a/packages/shell/src/index.ts b/packages/shell/src/index.ts index 073b62b8c..3b1338e51 100644 --- a/packages/shell/src/index.ts +++ b/packages/shell/src/index.ts @@ -11,6 +11,7 @@ import Selection from './selection'; import Setters from './setters'; import Hotkey from './hotkey'; import Skeleton from './skeleton'; +import SettingPropEntry from './setting-prop-entry'; export * from './symbols'; /** @@ -33,4 +34,5 @@ export { Setters, Hotkey, Skeleton, + SettingPropEntry, }; \ No newline at end of file diff --git a/packages/shell/src/node-children.ts b/packages/shell/src/node-children.ts index 03733efdf..68c1aba03 100644 --- a/packages/shell/src/node-children.ts +++ b/packages/shell/src/node-children.ts @@ -1,5 +1,5 @@ import { NodeChildren as InnerNodeChildren, Node as InnerNode } from '@ali/lowcode-designer'; -import { NodeSchema } from '@ali/lowcode-types'; +import { NodeSchema, NodeData, TransformStage } from '@ali/lowcode-types'; import Node from './node'; import { nodeSymbol, nodeChildrenSymbol } from './symbols'; @@ -97,6 +97,14 @@ export default class NodeChildren { }, initialValue); } + importSchema(data?: NodeData | NodeData[]) { + this[nodeChildrenSymbol].import(data); + } + + exportSchema(stage?: TransformStage) { + return this[nodeChildrenSymbol].export(stage); + } + mergeChildren( remover: (node: Node, idx: number) => boolean, adder: (children: Node[]) => any, diff --git a/packages/shell/src/node.ts b/packages/shell/src/node.ts index 0fb4e7bd3..267004db8 100644 --- a/packages/shell/src/node.ts +++ b/packages/shell/src/node.ts @@ -146,6 +146,17 @@ export default class Node { return this.children; } + /** + * @deprecated + */ + getDOMNode() { + return this[nodeSymbol].getDOMNode(); + } + + getRect() { + return this[nodeSymbol].getRect(); + } + hasSlots() { return this[nodeSymbol].hasSlots(); } diff --git a/packages/shell/src/project.ts b/packages/shell/src/project.ts index 1a367cd73..dd72bfb6d 100644 --- a/packages/shell/src/project.ts +++ b/packages/shell/src/project.ts @@ -35,7 +35,7 @@ export default class Project { } /** - * @deprecated use simulatorHost instead. + * @deprecated use .simulatorHost instead. */ get simulator() { return this.simulatorHost; diff --git a/packages/shell/src/setting-prop-entry.ts b/packages/shell/src/setting-prop-entry.ts new file mode 100644 index 000000000..8236cf321 --- /dev/null +++ b/packages/shell/src/setting-prop-entry.ts @@ -0,0 +1,40 @@ +import { SettingEntry } from '@ali/lowcode-designer'; +import { CompositeValue, SettingTarget } from '@ali/lowcode-types'; +import { settingPropEntrySymbol } from './symbols'; +import Node from './node'; +import SettingTopEntry from './setting-top-entry'; + +export default class SettingPropEntry { + private readonly [settingPropEntrySymbol]: SettingEntry; + + constructor(prop: SettingEntry) { + this[settingPropEntrySymbol] = prop; + } + + static create(prop: SettingEntry) { + return new SettingPropEntry(prop); + } + + get node(): Node | null { + return Node.create(this[settingPropEntrySymbol].getNode()); + } + + /** + * @deprecated use .node instead + */ + getNode() { + return this.node; + } + + setValue(val: CompositeValue) { + this[settingPropEntrySymbol].setValue(val); + } + + getValue() { + return this[settingPropEntrySymbol].getValue(); + } + + getProps() { + return SettingTopEntry.create(this[settingPropEntrySymbol].getProps() as SettingEntry) as any; + } +} \ No newline at end of file diff --git a/packages/shell/src/setting-top-entry.ts b/packages/shell/src/setting-top-entry.ts new file mode 100644 index 000000000..1d3f57a14 --- /dev/null +++ b/packages/shell/src/setting-top-entry.ts @@ -0,0 +1,34 @@ +import { SettingEntry } from '@ali/lowcode-designer'; +import { settingTopEntrySymbol } from './symbols'; +import Node from './node'; + +export default class SettingTopEntry { + private readonly [settingTopEntrySymbol]: SettingEntry; + + constructor(prop: SettingEntry) { + this[settingTopEntrySymbol] = prop; + } + + static create(prop: SettingEntry) { + return new SettingTopEntry(prop); + } + + get node(): Node | null { + return Node.create(this[settingTopEntrySymbol].getNode()); + } + + /** + * @deprecated use .node instead + */ + getNode() { + return this.node; + } + + getPropValue(propName: string | number) { + return this[settingTopEntrySymbol].getPropValue(propName); + } + + setPropValue(propName: string | number, value: any) { + this[settingTopEntrySymbol].setPropValue(propName, value); + } +} \ No newline at end of file diff --git a/packages/shell/src/symbols.ts b/packages/shell/src/symbols.ts index 94dac51ed..814807a99 100644 --- a/packages/shell/src/symbols.ts +++ b/packages/shell/src/symbols.ts @@ -8,8 +8,10 @@ export const documentSymbol = Symbol('document'); export const editorSymbol = Symbol('editor'); export const nodeSymbol = Symbol('node'); export const nodeChildrenSymbol = Symbol('nodeChildren'); -export const propsSymbol = Symbol('props'); export const propSymbol = Symbol('prop'); +export const settingPropEntrySymbol = Symbol('settingPropEntry'); +export const settingTopEntrySymbol = Symbol('settingTopEntry'); +export const propsSymbol = Symbol('props'); export const detectingSymbol = Symbol('detecting'); export const selectionSymbol = Symbol('selection'); export const historySymbol = Symbol('history'); diff --git a/packages/types/src/setting-target.ts b/packages/types/src/setting-target.ts index 917225eb5..9d2a3b1fa 100644 --- a/packages/types/src/setting-target.ts +++ b/packages/types/src/setting-target.ts @@ -52,6 +52,11 @@ export interface SettingTarget { */ get: (propName: string | number) => SettingTarget | null; + /** + * 取得子项 + */ + getProps?: () => SettingTarget; + /** * 获取子项属性值 */ From 19295bb040a470581e94c8ecdb4b746b5e386e2b Mon Sep 17 00:00:00 2001 From: "lihao.ylh" Date: Mon, 27 Dec 2021 10:41:31 +0800 Subject: [PATCH 4/6] =?UTF-8?q?chore:=20=E8=A1=A5=E5=85=85=20SettingField?= =?UTF-8?q?=20=E9=83=A8=E5=88=86=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/engine/src/engine-core.ts | 13 +++------- packages/engine/src/modules/designer-cabin.ts | 4 +++ packages/engine/src/modules/editor-cabin.ts | 12 +++++++++ packages/engine/src/modules/skeleton-cabin.ts | 6 +++++ packages/shell/src/setting-prop-entry.ts | 26 +++++++++++++++---- 5 files changed, 47 insertions(+), 14 deletions(-) create mode 100644 packages/engine/src/modules/designer-cabin.ts create mode 100644 packages/engine/src/modules/editor-cabin.ts create mode 100644 packages/engine/src/modules/skeleton-cabin.ts diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts index 396283e8f..bf7c8f9e6 100644 --- a/packages/engine/src/engine-core.ts +++ b/packages/engine/src/engine-core.ts @@ -1,16 +1,14 @@ import { createElement } from 'react'; import { render } from 'react-dom'; import { globalContext, Editor, engineConfig, EngineOptions } from '@ali/lowcode-editor-core'; -import * as editorCabin from '@ali/lowcode-editor-core'; import { Designer, LowCodePluginManager, ILowCodePluginContext, // Setters, } from '@ali/lowcode-designer'; -import * as designerCabin from '@ali/lowcode-designer'; import { Skeleton as InnerSkeleton, SettingsPrimaryPane, registerDefaults } from '@ali/lowcode-editor-skeleton'; -import * as skeletonCabin from '@ali/lowcode-editor-skeleton'; + import Outline, { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane'; import DesignerPlugin from '@ali/lowcode-plugin-designer'; import { @@ -20,20 +18,19 @@ import { Setters, Material, Event, - editorSymbol, - designerSymbol, - skeletonSymbol, } from '@ali/lowcode-shell'; import { getLogger, Logger, isPlainObject } from '@ali/lowcode-utils'; import './modules/live-editing'; import utils from './modules/utils'; +import * as editorCabin from './modules/editor-cabin'; +import * as skeletonCabin from './modules/skeleton-cabin'; +import * as designerCabin from './modules/designer-cabin'; export * from './modules/editor-types'; export * from './modules/skeleton-types'; export * from './modules/designer-types'; export * from './modules/lowcode-types'; -const { monitor } = editorCabin; registerDefaults(); const editor = new Editor(); @@ -88,7 +85,6 @@ export { */ // store, // hotkey, - monitor, utils, // engineConfig, }; @@ -124,7 +120,6 @@ const getSelection = () => designer.currentDocument?.selection; */ // store, // hotkey, - monitor, init, utils, config, diff --git a/packages/engine/src/modules/designer-cabin.ts b/packages/engine/src/modules/designer-cabin.ts new file mode 100644 index 000000000..471d63dd7 --- /dev/null +++ b/packages/engine/src/modules/designer-cabin.ts @@ -0,0 +1,4 @@ +export { + SettingField, + isSettingField, +} from '@ali/lowcode-designer'; \ No newline at end of file diff --git a/packages/engine/src/modules/editor-cabin.ts b/packages/engine/src/modules/editor-cabin.ts new file mode 100644 index 000000000..162ae5537 --- /dev/null +++ b/packages/engine/src/modules/editor-cabin.ts @@ -0,0 +1,12 @@ +export { + Title, + shallowIntl, + createIntl, + createSetterContent, + // TODO: To be deleted + obx, + computed, + observer, + getSetter, + getSettersMap, +} from '@ali/lowcode-editor-core'; \ No newline at end of file diff --git a/packages/engine/src/modules/skeleton-cabin.ts b/packages/engine/src/modules/skeleton-cabin.ts new file mode 100644 index 000000000..3d15edda6 --- /dev/null +++ b/packages/engine/src/modules/skeleton-cabin.ts @@ -0,0 +1,6 @@ +export { + createSettingFieldView, + PopupContext, + PopupPipe, + Workbench, +} from '@ali/lowcode-editor-skeleton'; \ No newline at end of file diff --git a/packages/shell/src/setting-prop-entry.ts b/packages/shell/src/setting-prop-entry.ts index 8236cf321..66b8519b9 100644 --- a/packages/shell/src/setting-prop-entry.ts +++ b/packages/shell/src/setting-prop-entry.ts @@ -1,17 +1,17 @@ -import { SettingEntry } from '@ali/lowcode-designer'; -import { CompositeValue, SettingTarget } from '@ali/lowcode-types'; +import { SettingField } from '@ali/lowcode-designer'; +import { CompositeValue, FieldConfig } from '@ali/lowcode-types'; import { settingPropEntrySymbol } from './symbols'; import Node from './node'; import SettingTopEntry from './setting-top-entry'; export default class SettingPropEntry { - private readonly [settingPropEntrySymbol]: SettingEntry; + private readonly [settingPropEntrySymbol]: SettingField; - constructor(prop: SettingEntry) { + constructor(prop: SettingField) { this[settingPropEntrySymbol] = prop; } - static create(prop: SettingEntry) { + static create(prop: SettingField) { return new SettingPropEntry(prop); } @@ -37,4 +37,20 @@ export default class SettingPropEntry { getProps() { return SettingTopEntry.create(this[settingPropEntrySymbol].getProps() as SettingEntry) as any; } + + isUseVariable() { + return this[settingPropEntrySymbol].isUseVariable(); + } + + setUseVariable(flag: boolean) { + this[settingPropEntrySymbol].setUseVariable(flag); + } + + createField(config: FieldConfig) { + return SettingPropEntry.create(this[settingPropEntrySymbol].createField(config)); + } + + getMockOrValue() { + return this[settingPropEntrySymbol].getMockOrValue(); + } } \ No newline at end of file From 2eeafb1db10c5831208a8c203eec092e58611635 Mon Sep 17 00:00:00 2001 From: "lihao.ylh" Date: Tue, 28 Dec 2021 16:34:52 +0800 Subject: [PATCH 5/6] =?UTF-8?q?refactor:=20=E5=B0=86=20initialValue=20?= =?UTF-8?q?=E5=86=99=E5=85=A5=20field=20=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/settings/settings-pane.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/editor-skeleton/src/components/settings/settings-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-pane.tsx index ee5fcdf78..46aa65e06 100644 --- a/packages/editor-skeleton/src/components/settings/settings-pane.tsx +++ b/packages/editor-skeleton/src/components/settings/settings-pane.tsx @@ -132,6 +132,13 @@ class SettingFieldView extends Component<{ field: SettingField }> { value = field.getValue(); } + // 当前 field 没有 value 值时，将 initialValue 写入 field + // 之所以用 initialValue，而不是 defaultValue 是为了保持跟 props.onInitial 的逻辑一致 + if (value == undefined && initialValue != undefined) { + const _initialValue = typeof initialValue === 'function' ? initialValue(field.internalToShellPropEntry()) : initialValue; + field.setValue(_initialValue); + } + let _onChange = extraProps?.onChange; let stageName = this.stageName; From 70a81d2a7792247868441266c479a37e2d8edb97 Mon Sep 17 00:00:00 2001 From: "lihao.ylh" Date: Wed, 29 Dec 2021 20:04:21 +0800 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20globalLocale?= =?UTF-8?q?=20API?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...{ali-global-locale.ts => global-locale.ts} | 19 ++++---- packages/editor-core/src/intl/index.ts | 2 +- packages/editor-core/src/utils/obx.ts | 2 +- packages/editor-core/tsconfig.json | 2 +- packages/engine/src/engine-core.ts | 43 ++++++++++--------- packages/engine/src/modules/editor-cabin.ts | 1 + 6 files changed, 37 insertions(+), 32 deletions(-) rename packages/editor-core/src/intl/{ali-global-locale.ts => global-locale.ts} (88%) diff --git a/packages/editor-core/src/intl/ali-global-locale.ts b/packages/editor-core/src/intl/global-locale.ts similarity index 88% rename from packages/editor-core/src/intl/ali-global-locale.ts rename to packages/editor-core/src/intl/global-locale.ts index a8ec7911a..874278802 100644 --- a/packages/editor-core/src/intl/ali-global-locale.ts +++ b/packages/editor-core/src/intl/global-locale.ts @@ -29,7 +29,7 @@ const languageMap: { [key: string]: string } = { const LowcodeConfigKey = 'ali-lowcode-config'; -class AliGlobalLocale { +class GlobalLocale { private emitter = new EventEmitter(); @obx.ref private _locale?: string; @@ -114,7 +114,7 @@ class AliGlobalLocale { return this.locale; } - onLocaleChange(fn: (locale: string) => void): () => void { + onChangeLocale(fn: (locale: string) => void): () => void { this.emitter.on('localechange', fn); return () => { this.emitter.removeListener('localechange', fn); @@ -135,12 +135,13 @@ function hasLocalStorage(obj: any): obj is WindowLocalStorage { return obj.localStorage; } -let globalLocale: AliGlobalLocale; -if ((window as any).__aliGlobalLocale) { - globalLocale = (window as any).__aliGlobalLocale as any; -} else { - globalLocale = new AliGlobalLocale(); - (window as any).__aliGlobalLocale = globalLocale; -} +let globalLocale = new GlobalLocale(); +// let globalLocale: GlobalLocale; +// if ((window as any).__GlobalLocale) { +// globalLocale = (window as any).__GlobalLocale as any; +// } else { +// globalLocale = new GlobalLocale(); +// (window as any).__GlobalLocale = globalLocale; +// } export { globalLocale }; diff --git a/packages/editor-core/src/intl/index.ts b/packages/editor-core/src/intl/index.ts index 91fa28073..9eaa4b102 100644 --- a/packages/editor-core/src/intl/index.ts +++ b/packages/editor-core/src/intl/index.ts @@ -1,6 +1,6 @@ import { ReactNode, Component, createElement } from 'react'; import { IntlMessageFormat } from 'intl-messageformat'; -import { globalLocale } from './ali-global-locale'; +import { globalLocale } from './global-locale'; import { isI18nData } from '@ali/lowcode-types'; import { observer, computed } from '../utils'; diff --git a/packages/editor-core/src/utils/obx.ts b/packages/editor-core/src/utils/obx.ts index f10b67756..7a4cfa57c 100644 --- a/packages/editor-core/src/utils/obx.ts +++ b/packages/editor-core/src/utils/obx.ts @@ -21,4 +21,4 @@ export { IReactionOptions, } from 'mobx'; export * as mobx from 'mobx'; -export { observer }; +export { observer }; \ No newline at end of file diff --git a/packages/editor-core/tsconfig.json b/packages/editor-core/tsconfig.json index 91c180bdd..8edf132a3 100644 --- a/packages/editor-core/tsconfig.json +++ b/packages/editor-core/tsconfig.json @@ -3,5 +3,5 @@ "compilerOptions": { "outDir": "lib" }, - "include": ["./src/"], + "include": ["./src/"] } diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts index bf7c8f9e6..d30af7d84 100644 --- a/packages/engine/src/engine-core.ts +++ b/packages/engine/src/engine-core.ts @@ -37,9 +37,9 @@ const editor = new Editor(); globalContext.register(editor, Editor); globalContext.register(editor, 'editor'); -const skeleton = new InnerSkeleton(editor); -editor.set(Skeleton, skeleton); -editor.set('skeleton' as any, skeleton); +const innerSkeleton = new InnerSkeleton(editor); +editor.set(Skeleton, innerSkeleton); +editor.set('skeleton' as any, innerSkeleton); const designer = new Designer({ editor }); editor.set(Designer, designer); @@ -48,7 +48,7 @@ editor.set('designer' as any, designer); const plugins = new LowCodePluginManager(editor).toProxy(); editor.set('plugins' as any, plugins); -const { project, currentSelection: selection } = designer; +const { project: innerProject, currentSelection: selection } = designer; const { Workbench } = skeletonCabin; // const setters: Setters = { // getSetter, @@ -57,9 +57,9 @@ const { Workbench } = skeletonCabin; // }; const hotkey = new Hotkey(); -const project2 = new Project(project); -const skeleton2 = new Skeleton(skeleton); -const setters2 = new Setters(); +const project = new Project(innerProject); +const skeleton = new Skeleton(innerSkeleton); +const setters = new Setters(); const material = new Material(editor); const config = engineConfig; const event = new Event(editor, { prefix: 'common' }); @@ -67,13 +67,13 @@ const logger = getLogger({ level: 'warn', bizName: 'common' }); export { // editor, - // editorCabin, + editorCabin, // skeleton, - // skeletonCabin, + skeletonCabin, // designer, - // designerCabin, + designerCabin, plugins, - // setters, + setters, project, // selection, /** @@ -84,8 +84,11 @@ export { * 全局的一些数据存储 */ // store, - // hotkey, + hotkey, utils, + config, + event, + logger, // engineConfig, }; @@ -95,18 +98,18 @@ const getSelection = () => designer.currentDocument?.selection; /** * 待删除 start，不要用 */ - editor, - editorCabin, - skeletonCabin, + editor: event, designer, - designerCabin, /** * 待删除 end */ + editorCabin, + skeletonCabin, + designerCabin, plugins, - skeleton: skeleton2, - project: project2, - setters: setters2, + skeleton, + project, + setters, material, // get selection() { // return getSelection(); @@ -235,7 +238,7 @@ export async function init(container?: HTMLElement, options?: EngineOptions) { await plugins.init(); render( createElement(Workbench, { - skeleton, + skeleton: innerSkeleton, className: 'engine-main', topAreaItemClassName: 'engine-actionitem', }), diff --git a/packages/engine/src/modules/editor-cabin.ts b/packages/engine/src/modules/editor-cabin.ts index 162ae5537..ac88f832e 100644 --- a/packages/engine/src/modules/editor-cabin.ts +++ b/packages/engine/src/modules/editor-cabin.ts @@ -9,4 +9,5 @@ export { observer, getSetter, getSettersMap, + globalLocale, } from '@ali/lowcode-editor-core'; \ No newline at end of file