From 810ccbd03ef6ce5e4159c3e52aa7efad7073a67e Mon Sep 17 00:00:00 2001 From: JackLian Date: Mon, 30 Jan 2023 14:40:17 +0800 Subject: [PATCH] feat: add get advanced api for ComponentMeta --- .../bem-tools/border-detecting.tsx | 2 +- .../bem-tools/border-resizing.tsx | 30 ++-- .../bem-tools/border-selecting.tsx | 2 +- .../builtin-simulator/bem-tools/insertion.tsx | 2 +- .../designer/src/builtin-simulator/host.ts | 168 +++++++++--------- packages/designer/src/component-meta.ts | 18 +- packages/designer/src/designer/designer.ts | 4 +- .../src/designer/drag-ghost/index.tsx | 2 +- .../src/document/node/node-children.ts | 2 +- packages/designer/src/document/node/node.ts | 8 +- .../tests/document/node/node.add.test.ts | 5 +- .../tests/document/node/node.modify.test.ts | 3 + .../tests/document/node/node.remove.test.ts | 3 + .../designer/tests/document/node/node.test.ts | 2 +- .../designer/tests/document/selection.test.ts | 3 + .../designer/tests/project/project.test.ts | 3 + .../src/controllers/pane-controller.ts | 140 +++++++-------- packages/shell/src/model/component-meta.ts | 6 +- .../types/src/shell/model/component-meta.ts | 8 +- .../types/src/shell/model/setting-target.ts | 2 +- packages/types/src/shell/type/advanced.ts | 100 ++++++----- packages/types/src/shell/type/configure.ts | 4 + packages/utils/src/node-helper.ts | 2 +- 23 files changed, 288 insertions(+), 231 deletions(-) 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 f316e1c7a..49e68b77c 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx @@ -76,7 +76,7 @@ export class BorderDetecting extends Component<{ host: BuiltinSimulatorHost }> { const { host } = this.props; const { current } = this; - const canHoverHook = current?.componentMeta.getMetadata()?.configure.advanced?.callbacks?.onHoverHook; + const canHoverHook = current?.componentMeta.advanced.callbacks?.onHoverHook; 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 33dce7712..e174c4ad6 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx @@ -136,40 +136,40 @@ export class BoxResizingInstance extends Component<{ this.willBind(); const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => { - const metadata = node.componentMeta.getMetadata(); + const { advanced } = node.componentMeta; if ( - metadata.configure?.advanced?.callbacks && - typeof metadata.configure.advanced.callbacks.onResize === 'function' + advanced.callbacks && + typeof advanced.callbacks.onResize === 'function' ) { (e as any).trigger = direction; (e as any).deltaX = moveX; (e as any).deltaY = moveY; const cbNode = node?.isNode ? node.internalToShellNode() : node; - metadata.configure.advanced.callbacks.onResize(e, cbNode); + advanced.callbacks.onResize(e, cbNode); } }; const resizeStart = (e: MouseEvent, direction: string, node: any) => { - const metadata = node.componentMeta.getMetadata(); + const { advanced } = node.componentMeta; if ( - metadata.configure?.advanced?.callbacks && - typeof metadata.configure.advanced.callbacks.onResizeStart === 'function' + advanced.callbacks && + typeof advanced.callbacks.onResizeStart === 'function' ) { (e as any).trigger = direction; const cbNode = node?.isNode ? node.internalToShellNode() : node; - metadata.configure.advanced.callbacks.onResizeStart(e, cbNode); + advanced.callbacks.onResizeStart(e, cbNode); } }; const resizeEnd = (e: MouseEvent, direction: string, node: any) => { - const metadata = node.componentMeta.getMetadata(); + const { advanced } = node.componentMeta; if ( - metadata.configure?.advanced?.callbacks && - typeof metadata.configure.advanced.callbacks.onResizeEnd === 'function' + advanced.callbacks && + typeof advanced.callbacks.onResizeEnd === 'function' ) { (e as any).trigger = direction; const cbNode = node?.isNode ? node.internalToShellNode() : node; - metadata.configure.advanced.callbacks.onResizeEnd(e, cbNode); + advanced.callbacks.onResizeEnd(e, cbNode); } const workspace = globalContext.get('workspace'); @@ -242,9 +242,9 @@ export class BoxResizingInstance extends Component<{ const { node, offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed; let triggerVisible: any = []; - const metadata = node.componentMeta.getMetadata(); - if (metadata.configure?.advanced?.getResizingHandlers) { - triggerVisible = metadata.configure.advanced.getResizingHandlers(node.internalToShellNode()); + const { advanced } = node.componentMeta; + if (advanced.getResizingHandlers) { + triggerVisible = advanced.getResizingHandlers(node.internalToShellNode()); } triggerVisible = normalizeTriggers(triggerVisible); diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx index 0280d9055..da3c73ae5 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx @@ -46,7 +46,7 @@ export class BorderSelectingInstance extends Component<{ dragging, }); - const hideSelectTools = observed.node.componentMeta.getMetadata().configure.advanced?.hideSelectTools; + const { hideSelectTools } = observed.node.componentMeta.advanced; if (hideSelectTools) { return null; diff --git a/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx b/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx index e9955004b..98ac4266c 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/insertion.tsx @@ -121,7 +121,7 @@ export class InsertionView extends Component<{ host: BuiltinSimulatorHost }> { return null; } // 如果是个绝对定位容器，不需要渲染插入标记 - if (loc.target.componentMeta.getMetadata().configure.advanced?.isAbsoluteLayoutContainer) { + if (loc.target?.componentMeta?.advanced.isAbsoluteLayoutContainer) { return null; } diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index 2171050c8..1eb228f29 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/packages/designer/src/builtin-simulator/host.ts @@ -99,6 +99,7 @@ export interface BuiltinSimulatorProps { simulatorUrl?: Asset; theme?: Asset; componentsAsset?: Asset; + // eslint-disable-next-line @typescript-eslint/member-ordering [key: string]: any; } @@ -184,40 +185,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost(() => this.componentsAsset); - this.injectionConsumer = new ResourceConsumer(() => { - return { - appHelper: engineConfig.get('appHelper'), - }; - }); - - this.i18nConsumer = new ResourceConsumer(() => this.project.i18n); - - transactionManager.onStartTransaction(() => { - this.stopAutoRepaintNode(); - }, IPublicEnumTransitionType.REPAINT); - // 防止批量调用 transaction 时，执行多次 rerender - const rerender = debounce(this.rerender.bind(this), 28); - transactionManager.onEndTransaction(() => { - rerender(); - this.enableAutoRepaintNode(); - }, IPublicEnumTransitionType.REPAINT); - } - get currentDocument() { return this.project.currentDocument; } @@ -285,6 +252,87 @@ export class BuiltinSimulatorHost implements ISimulatorHost void; + + private disableDetecting?: () => void; + + readonly liveEditing = new LiveEditing(); + + @obx private instancesMap: { + [docId: string]: Map; + } = {}; + + private tryScrollAgain: number | null = null; + + private _sensorAvailable = true; + + /** + * @see IPublicModelSensor + */ + get sensorAvailable(): boolean { + return this._sensorAvailable; + } + + private sensing = false; + + constructor(project: Project, designer: Designer) { + makeObservable(this); + this.project = project; + this.designer = designer; + this.scroller = this.designer.createScroller(this.viewport); + this.autoRender = !engineConfig.get('disableAutoRender', false); + this.componentsConsumer = new ResourceConsumer(() => this.componentsAsset); + this.injectionConsumer = new ResourceConsumer(() => { + return { + appHelper: engineConfig.get('appHelper'), + }; + }); + + this.i18nConsumer = new ResourceConsumer(() => this.project.i18n); + + transactionManager.onStartTransaction(() => { + this.stopAutoRepaintNode(); + }, IPublicEnumTransitionType.REPAINT); + // 防止批量调用 transaction 时，执行多次 rerender + const rerender = debounce(this.rerender.bind(this), 28); + transactionManager.onEndTransaction(() => { + rerender(); + this.enableAutoRepaintNode(); + }, IPublicEnumTransitionType.REPAINT); + } + + stopAutoRepaintNode() { + this.renderer?.stopAutoRepaintNode(); + } + + enableAutoRepaintNode() { + this.renderer?.enableAutoRepaintNode(); + } + /** * @see ISimulator */ @@ -337,30 +385,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost void; - - private disableDetecting?: () => void; - /** * 设置悬停处理 */ @@ -742,8 +762,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost; - } = {}; setInstance(docId: string, id: string, instances: IPublicTypeComponentInstance[] | null) { if (!hasOwnProperty(this.instancesMap, docId)) { this.instancesMap[docId] = new Map(); @@ -1045,8 +1060,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost { - const onMoveHook = node.componentMeta?.getMetadata()?.configure.advanced?.callbacks?.onMoveHook; + const onMoveHook = node.componentMeta?.advanced.callbacks?.onMoveHook; const canMove = onMoveHook && typeof onMoveHook === 'function' ? onMoveHook(node.internalToShellNode()) : true; let parentContainerNode: Node | null = null; @@ -1195,7 +1197,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost { @@ -234,7 +240,7 @@ export class ComponentMeta implements IComponentMeta { collectLiveTextEditing(this.configure); this._liveTextEditing = liveTextEditing.length > 0 ? liveTextEditing : undefined; - const isTopFixed = this._transformedMetadata.configure.advanced?.isTopFixed; + const isTopFixed = this.advanced.isTopFixed; if (isTopFixed) { this._isTopFixed = isTopFixed; diff --git a/packages/designer/src/designer/designer.ts b/packages/designer/src/designer/designer.ts index 0e3559e0a..968b54ce5 100644 --- a/packages/designer/src/designer/designer.ts +++ b/packages/designer/src/designer/designer.ts @@ -567,7 +567,7 @@ export class Designer implements IDesigner { if (metaData.devMode === 'lowCode') { maps[key] = metaData.schema; } else { - const view = metaData.configure.advanced?.view; + const { view } = config.advanced; if (view) { maps[key] = view; } else { @@ -620,4 +620,4 @@ export class Designer implements IDesigner { purge() { // TODO: } -} \ No newline at end of file +} diff --git a/packages/designer/src/designer/drag-ghost/index.tsx b/packages/designer/src/designer/drag-ghost/index.tsx index 717472543..50fca2f28 100644 --- a/packages/designer/src/designer/drag-ghost/index.tsx +++ b/packages/designer/src/designer/drag-ghost/index.tsx @@ -39,7 +39,7 @@ export default class DragGhost extends Component<{ designer: Designer }> { this.y = e.globalY; if (isSimulatorHost(e.sensor)) { const container = e.sensor.getDropContainer(e); - if (container?.container.componentMeta.getMetadata().configure.advanced?.isAbsoluteLayoutContainer) { + if (container?.container.componentMeta.advanced.isAbsoluteLayoutContainer) { this.isAbsoluteLayoutContainer = true; return; } diff --git a/packages/designer/src/document/node/node-children.ts b/packages/designer/src/document/node/node-children.ts index bcdf897b3..d370a797b 100644 --- a/packages/designer/src/document/node/node-children.ts +++ b/packages/designer/src/document/node/node-children.ts @@ -502,7 +502,7 @@ export class NodeChildren implements INodeChildren { if (node.isRootNode) { return; } - const callbacks = owner.componentMeta?.getMetadata().configure.advanced?.callbacks; + const callbacks = owner.componentMeta?.advanced.callbacks; if (callbacks?.onSubtreeModified) { try { callbacks?.onSubtreeModified.call( diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index 7e0a7c530..7baa5ad0a 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -371,7 +371,7 @@ export class Node } private setupAutoruns() { - const autoruns = this.componentMeta.getMetadata().configure.advanced?.autoruns; + const { autoruns } = this.componentMeta.advanced; if (!autoruns || autoruns.length < 1) { return; } @@ -385,7 +385,7 @@ export class Node private initialChildren(children: any): IPublicTypeNodeData[] { // FIXME! this is dirty code if (children == null) { - const initialChildren = this.componentMeta.getMetadata().configure.advanced?.initialChildren; + const { initialChildren } = this.componentMeta.advanced; if (initialChildren) { if (typeof initialChildren === 'function') { return initialChildren(this as any) || []; @@ -471,7 +471,7 @@ export class Node } private didDropIn(dragment: Node) { - const callbacks = this.componentMeta.getMetadata().configure.advanced?.callbacks; + const { callbacks } = this.componentMeta.advanced; if (callbacks?.onNodeAdd) { const cbThis = this.internalToShellNode(); callbacks?.onNodeAdd.call(cbThis, dragment.internalToShellNode(), cbThis); @@ -482,7 +482,7 @@ export class Node } private didDropOut(dragment: Node) { - const callbacks = this.componentMeta.getMetadata().configure.advanced?.callbacks; + const { callbacks } = this.componentMeta.advanced; if (callbacks?.onNodeRemove) { const cbThis = this.internalToShellNode(); callbacks?.onNodeRemove.call(cbThis, dragment.internalToShellNode(), cbThis); diff --git a/packages/designer/tests/document/node/node.add.test.ts b/packages/designer/tests/document/node/node.add.test.ts index 4f5655db9..bede02196 100644 --- a/packages/designer/tests/document/node/node.add.test.ts +++ b/packages/designer/tests/document/node/node.add.test.ts @@ -17,6 +17,9 @@ jest.mock('../../../src/designer/designer', () => { getMetadata() { return { configure: { advanced: null } }; }, + get advanced() { + return {}; + }, }; }, transformProps(props) { return props; }, @@ -506,7 +509,7 @@ describe('schema 生成节点模型测试', () => { }); }); - it('场景二：插入 Node 实例，指定 index', () => { + it.only('场景二：插入 Node 实例，指定 index', () => { expect(project).toBeTruthy(); const ids = getIdsFromSchema(formSchema); const { currentDocument } = project; diff --git a/packages/designer/tests/document/node/node.modify.test.ts b/packages/designer/tests/document/node/node.modify.test.ts index 7aa055ae1..f7bd7dd5e 100644 --- a/packages/designer/tests/document/node/node.modify.test.ts +++ b/packages/designer/tests/document/node/node.modify.test.ts @@ -14,6 +14,9 @@ jest.mock('../../../src/designer/designer', () => { getMetadata() { return { configure: { advanced: null } }; }, + get advanced() { + return {}; + }, }; }, transformProps(props) { return props; }, diff --git a/packages/designer/tests/document/node/node.remove.test.ts b/packages/designer/tests/document/node/node.remove.test.ts index 28bdf914f..82d180443 100644 --- a/packages/designer/tests/document/node/node.remove.test.ts +++ b/packages/designer/tests/document/node/node.remove.test.ts @@ -16,6 +16,9 @@ jest.mock('../../../src/designer/designer', () => { getMetadata() { return { configure: { advanced: null } }; }, + get advanced() { + return {}; + }, }; }, transformProps(props) { return props; }, diff --git a/packages/designer/tests/document/node/node.test.ts b/packages/designer/tests/document/node/node.test.ts index f7d35f6d6..e0be159ff 100644 --- a/packages/designer/tests/document/node/node.test.ts +++ b/packages/designer/tests/document/node/node.test.ts @@ -473,7 +473,7 @@ describe('Node 方法测试', () => { const form = doc.getNode('node_k1ow3cbo'); designer.createComponentMeta(divMetadata); designer.createComponentMeta(formMetadata); - const callbacks = form.componentMeta.getMetadata().configure.advanced?.callbacks; + const callbacks = form.componentMeta.advanced.callbacks; const fn1 = callbacks.onNodeAdd = jest.fn(); const fn2 = callbacks.onNodeRemove = jest.fn(); const textField = doc.getNode('node_k1ow3cc9'); diff --git a/packages/designer/tests/document/selection.test.ts b/packages/designer/tests/document/selection.test.ts index 30032ac7a..b8b5ad434 100644 --- a/packages/designer/tests/document/selection.test.ts +++ b/packages/designer/tests/document/selection.test.ts @@ -17,6 +17,9 @@ jest.mock('../../src/designer/designer', () => { getMetadata() { return { configure: { advanced: null } }; }, + get advanced() { + return {}; + }, }; }, transformProps(props) { return props; }, diff --git a/packages/designer/tests/project/project.test.ts b/packages/designer/tests/project/project.test.ts index 6e4aeb8c0..2066c0398 100644 --- a/packages/designer/tests/project/project.test.ts +++ b/packages/designer/tests/project/project.test.ts @@ -17,6 +17,9 @@ jest.mock('../../src/designer/designer', () => { getMetadata() { return { configure: { advanced: null } }; }, + get advanced() { + return {}; + }, }; }, transformProps(props) { return props; }, diff --git a/packages/plugin-outline-pane/src/controllers/pane-controller.ts b/packages/plugin-outline-pane/src/controllers/pane-controller.ts index be3b6b9ce..0d565c15f 100644 --- a/packages/plugin-outline-pane/src/controllers/pane-controller.ts +++ b/packages/plugin-outline-pane/src/controllers/pane-controller.ts @@ -31,6 +31,75 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicMo readonly id = uniqueId('outline'); + private indentTrack = new IndentTrack(); + + private _sensorAvailable = false; + + /** + * @see IPublicModelSensor + */ + get sensorAvailable() { + return this._sensorAvailable; + } + + private dwell = new DwellTimer((target, event) => { + const { canvas, project } = this.pluginContext; + const document = project.getCurrentDocument(); + let index: any; + let focus: any; + let valid = true; + if (target.hasSlots()) { + index = null; + focus = { type: 'slots' }; + } else { + index = 0; + valid = !!document?.checkNesting(target, event.dragObject as any); + } + canvas.createLocation({ + target, + source: this.id, + event, + detail: { + type: IPublicTypeLocationDetailType.Children, + index, + focus, + valid, + }, + }); + }); + + /** + * @see ITreeBoard + */ + readonly at: string | symbol; + + private tryScrollAgain: number | null = null; + + private sensing = false; + + /** + * @see IScrollable + */ + get bounds(): DOMRect | null { + if (!this._shell) { + return null; + } + return this._shell.getBoundingClientRect(); + } + + private _scrollTarget?: IPublicModelScrollTarget; + + /** + * @see IScrollable + */ + get scrollTarget() { + return this._scrollTarget; + } + + private scroller?: IPublicModelScroller; + + private _shell: HTMLDivElement | null = null; + constructor(at: string | symbol, pluginContext: IPublicModelPluginContext, treeMaster: TreeMaster) { this.pluginContext = pluginContext; this.treeMaster = treeMaster; @@ -52,8 +121,6 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicMo /** -------------------- IPublicModelSensor begin -------------------- */ - private indentTrack = new IndentTrack(); - /** * @see IPublicModelSensor */ @@ -91,7 +158,7 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicMo } const operationalNodes = nodes?.filter((node: any) => { - const onMoveHook = node.componentMeta?.getMetadata().configure?.advanced?.callbacks?.onMoveHook; + const onMoveHook = node.componentMeta?.advanced.callbacks?.onMoveHook; const canMove = onMoveHook && typeof onMoveHook === 'function' ? onMoveHook(node) : true; return canMove; @@ -233,24 +300,10 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicMo this.indentTrack.reset(); } - private _sensorAvailable = false; - - /** - * @see IPublicModelSensor - */ - get sensorAvailable() { - return this._sensorAvailable; - } - /** -------------------- IPublicModelSensor end -------------------- */ /** -------------------- ITreeBoard begin -------------------- */ - /** - * @see ITreeBoard - */ - readonly at: string | symbol; - /** * @see ITreeBoard */ @@ -295,32 +348,6 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicMo /** -------------------- ITreeBoard end -------------------- */ - private dwell = new DwellTimer((target, event) => { - const { canvas, project } = this.pluginContext; - const document = project.getCurrentDocument(); - let index: any; - let focus: any; - let valid = true; - if (target.hasSlots()) { - index = null; - focus = { type: 'slots' }; - } else { - index = 0; - valid = !!document?.checkNesting(target, event.dragObject as any); - } - canvas.createLocation({ - target, - source: this.id, - event, - detail: { - type: IPublicTypeLocationDetailType.Children, - index, - focus, - valid, - }, - }); - }); - private getNear(treeNode: TreeNode, e: IPublicModelLocateEvent, originalIndex?: number, originalRect?: DOMRect) { const { canvas, project } = this.pluginContext; const document = project.getCurrentDocument(); @@ -541,39 +568,12 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicMo return canvas.createLocation(locationData); } - private tryScrollAgain: number | null = null; - - private sensing = false; - - /** - * @see IScrollable - */ - get bounds(): DOMRect | null { - if (!this._shell) { - return null; - } - return this._shell.getBoundingClientRect(); - } - - private _scrollTarget?: IPublicModelScrollTarget; - - /** - * @see IScrollable - */ - get scrollTarget() { - return this._scrollTarget; - } - - private scroller?: IPublicModelScroller; - purge() { const { canvas } = this.pluginContext; canvas.dragon?.removeSensor(this); this.treeMaster?.removeBoard(this); } - private _shell: HTMLDivElement | null = null; - mount(shell: HTMLDivElement | null) { if (this._shell === shell) { return; diff --git a/packages/shell/src/model/component-meta.ts b/packages/shell/src/model/component-meta.ts index 67cb2895d..c913c2c0f 100644 --- a/packages/shell/src/model/component-meta.ts +++ b/packages/shell/src/model/component-meta.ts @@ -2,7 +2,7 @@ import { IComponentMeta as InnerComponentMeta, INode, } from '@alilc/lowcode-designer'; -import { IPublicTypeNodeData, IPublicTypeNodeSchema, IPublicModelComponentMeta, IPublicTypeI18nData, IPublicTypeIconType, IPublicTypeNpmInfo, IPublicTypeTransformedComponentMetadata, IPublicModelNode } from '@alilc/lowcode-types'; +import { IPublicTypeNodeData, IPublicTypeNodeSchema, IPublicModelComponentMeta, IPublicTypeI18nData, IPublicTypeIconType, IPublicTypeNpmInfo, IPublicTypeTransformedComponentMetadata, IPublicModelNode, IPublicTypeAdvanced } from '@alilc/lowcode-types'; import { componentMetaSymbol, nodeSymbol } from '../symbols'; import { ReactElement } from 'react'; @@ -92,6 +92,10 @@ export class ComponentMeta implements IPublicModelComponentMeta { return this[componentMetaSymbol].availableActions; } + get advanced(): IPublicTypeAdvanced { + return this[componentMetaSymbol].advanced; + } + /** * 设置 npm 信息 * @param npm diff --git a/packages/types/src/shell/model/component-meta.ts b/packages/types/src/shell/model/component-meta.ts index 160c7107d..7a5f3fa8c 100644 --- a/packages/types/src/shell/model/component-meta.ts +++ b/packages/types/src/shell/model/component-meta.ts @@ -1,4 +1,4 @@ -import { IPublicTypeNodeSchema, IPublicTypeNodeData, IPublicTypeIconType, IPublicTypeTransformedComponentMetadata, IPublicTypeI18nData, IPublicTypeNpmInfo } from '../type'; +import { IPublicTypeNodeSchema, IPublicTypeNodeData, IPublicTypeIconType, IPublicTypeTransformedComponentMetadata, IPublicTypeI18nData, IPublicTypeNpmInfo, IPublicTypeAdvanced } from '../type'; import { ReactElement } from 'react'; import { IPublicModelNode } from './node'; @@ -49,6 +49,12 @@ export interface IPublicModelComponentMeta { get availableActions(): any; + /** + * configure.advanced + * @since v1.1.0 + */ + get advanced(): IPublicTypeAdvanced; + /** * 设置 npm 信息 * @param npm diff --git a/packages/types/src/shell/model/setting-target.ts b/packages/types/src/shell/model/setting-target.ts index f8b1df0b9..e41cf6ea6 100644 --- a/packages/types/src/shell/model/setting-target.ts +++ b/packages/types/src/shell/model/setting-target.ts @@ -2,6 +2,7 @@ import { IPublicApiSetters } from '../api'; import { IPublicModelEditor } from './'; export interface IPublicModelSettingTarget { + /** * 同样类型的节点 */ @@ -39,7 +40,6 @@ export interface IPublicModelSettingTarget { */ readonly parent: IPublicModelSettingTarget; - /** * 获取当前值 */ diff --git a/packages/types/src/shell/type/advanced.ts b/packages/types/src/shell/type/advanced.ts index 7a3474034..f4c750535 100644 --- a/packages/types/src/shell/type/advanced.ts +++ b/packages/types/src/shell/type/advanced.ts @@ -5,58 +5,24 @@ import { IPublicModelSettingTarget } from '../model'; /** * 高级特性配置 */ - export interface IPublicTypeAdvanced { - /** - * @todo 待补充文档 - */ - context?: { [contextInfoName: string]: any }; - /** - * @deprecated 使用组件 metadata 上的 snippets 字段即可 - */ - snippets?: IPublicTypeSnippet[]; - /** - * @todo 待补充文档 - */ - view?: ComponentType; - /** - * @todo 待补充文档 - */ - transducers?: any; - /** - * @deprecated 用于动态初始化拖拽到设计器里的组件的 prop 的值 - */ - initials?: IPublicTypeInitialItem[]; - /** - * @todo 待补充文档 - */ - filters?: IPublicTypeFilterItem[]; - /** - * @todo 待补充文档 - */ - autoruns?: IPublicTypeAutorunItem[]; + /** * 配置 callbacks 可捕获引擎抛出的一些事件，例如 onNodeAdd、onResize 等 + * callbacks/hooks which can be used to do + * things on some special ocations like onNodeAdd or onResize */ callbacks?: IPublicTypeCallbacks; + /** * 拖入容器时，自动带入 children 列表 */ initialChildren?: IPublicTypeNodeData[] | ((target: IPublicModelSettingTarget) => IPublicTypeNodeData[]); - /** - * @todo 待补充文档 - */ - isAbsoluteLayoutContainer?: boolean; - /** - * @todo 待补充文档 - */ - hideSelectTools?: boolean; /** * 样式 及 位置，handle 上必须有明确的标识以便事件路由判断，或者主动设置事件独占模式 * NWSE 是交给引擎计算放置位置，ReactElement 必须自己控制初始位置 - */ - /** + * * 用于配置设计器中组件 resize 操作工具的样式和内容 * - hover 时控制柄高亮 * - mousedown 时请求独占 @@ -73,13 +39,67 @@ export interface IPublicTypeAdvanced { }> | ReactElement[]); + /** + * @deprecated 用于动态初始化拖拽到设计器里的组件的 prop 的值 + */ + initials?: IPublicTypeInitialItem[]; + + /** + * @deprecated 使用组件 metadata 上的 snippets 字段即可 + */ + snippets?: IPublicTypeSnippet[]; + + /** + * 是否绝对布局容器，还未进入协议 + * @experimental not in spec yet + */ + isAbsoluteLayoutContainer?: boolean; + + /** + * hide bem tools when selected + * @experimental not in spec yet + */ + hideSelectTools?: boolean; + /** * Live Text Editing：如果 children 内容是纯文本，支持双击直接编辑 + * @experimental not in spec yet */ liveTextEditing?: IPublicTypeLiveTextEditingConfig[]; /** - * @deprecated 暂未使用 + * TODO: 补充文档 + * @experimental not in spec yet + */ + view?: ComponentType; + + /** + * @legacy capability for vision + * @deprecated */ isTopFixed?: boolean; + + /** + * TODO: 补充文档 或 删除 + * @deprecated not used anywhere, dont know what is it for + */ + context?: { [contextInfoName: string]: any }; + + /** + * @legacy capability for vision + * @deprecated + */ + filters?: IPublicTypeFilterItem[]; + + /** + * @legacy capability for vision + * @deprecated + */ + autoruns?: IPublicTypeAutorunItem[]; + + /** + * @legacy capability for vision + * @deprecated + */ + transducers?: any; } diff --git a/packages/types/src/shell/type/configure.ts b/packages/types/src/shell/type/configure.ts index 34f5a7fb2..44fd1ffe6 100644 --- a/packages/types/src/shell/type/configure.ts +++ b/packages/types/src/shell/type/configure.ts @@ -4,18 +4,22 @@ import { IPublicTypeComponentConfigure, ConfigureSupport, IPublicTypeFieldConfig * 编辑体验配置 */ export interface IPublicTypeConfigure { + /** * 属性面板配置 */ props?: IPublicTypeFieldConfig[]; + /** * 组件能力配置 */ component?: IPublicTypeComponentConfigure; + /** * 通用扩展面板支持性配置 */ supports?: ConfigureSupport; + /** * 高级特性配置 */ diff --git a/packages/utils/src/node-helper.ts b/packages/utils/src/node-helper.ts index 9d6573cdc..1293cec2e 100644 --- a/packages/utils/src/node-helper.ts +++ b/packages/utils/src/node-helper.ts @@ -23,7 +23,7 @@ export const getClosestNode = ( * @returns {boolean} 是否可点击，true表示可点击 */ export const canClickNode = (node: IPublicModelNode, e: unknown): boolean => { - const onClickHook = node.componentMeta?.getMetadata().configure?.advanced?.callbacks?.onClickHook; + const onClickHook = node.componentMeta?.advanced.callbacks?.onClickHook; const canClick = typeof onClickHook === 'function' ? onClickHook(e as MouseEvent, node) : true; return canClick; };