From 373556ad87a07d38af27a321dcfbf38867641282 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8A=9B=E7=9A=93?= Date: Tue, 12 Jan 2021 17:19:56 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B3=A8=E5=86=8C=20builtinSetters=20/?= =?UTF-8?q?=20live-editing,=20=E5=A2=9E=E5=8A=A0=20init?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/engine/package.json | 1 - packages/engine/src/engine.ts | 8 +++ packages/engine/src/index.ts | 1 - packages/engine/src/live-editing.ts | 80 ++++++++++++++++++++++++ packages/vision-polyfill/package.json | 1 - packages/vision-polyfill/src/index.ts | 18 ------ packages/vision-polyfill/src/reducers.ts | 6 +- 7 files changed, 91 insertions(+), 24 deletions(-) create mode 100644 packages/engine/src/live-editing.ts diff --git a/packages/engine/package.json b/packages/engine/package.json index d229c6995..7894cedd0 100644 --- a/packages/engine/package.json +++ b/packages/engine/package.json @@ -4,7 +4,6 @@ "description": "Universal API for AliLowCode engine", "main": "lib/engine.js", "module": "es/engine.js", - "private": true, "files": [ "dist", "es", diff --git a/packages/engine/src/engine.ts b/packages/engine/src/engine.ts index 063ae6acb..4efc839f6 100644 --- a/packages/engine/src/engine.ts +++ b/packages/engine/src/engine.ts @@ -1,6 +1,7 @@ import { createElement } from 'react'; import { render } from 'react-dom'; import { globalContext, Editor } from '@ali/lowcode-editor-core'; +import builtinSetters from '@ali/lowcode-editor-setters'; import { Designer, LiveEditing, TransformStage, Node, getConvertedExtraKey, LowCodePluginManager } from '@ali/lowcode-designer'; import Outline, { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane'; import * as editorHelper from '@ali/lowcode-editor-core'; @@ -8,6 +9,9 @@ import * as designerHelper from '@ali/lowcode-designer'; import * as skeletonHelper from '@ali/lowcode-editor-skeleton'; import DesignerPlugin from '@ali/lowcode-plugin-designer'; import { Skeleton, SettingsPrimaryPane, registerDefaults } from '@ali/lowcode-editor-skeleton'; +import { liveEditingRule, liveEditingSaveHander } from './live-editing'; + +editorHelper.registerSetter(builtinSetters); const editor = new Editor(); globalContext.register(editor, Editor); @@ -113,6 +117,7 @@ export { // store, hotkey, monitor, + init, }; export async function init(container?: Element) { @@ -133,3 +138,6 @@ export async function init(container?: Element) { engineContainer, ); } + +LiveEditing.addLiveEditingSpecificRule(liveEditingRule); +LiveEditing.addLiveEditingSaveHandler(liveEditingSaveHander); diff --git a/packages/engine/src/index.ts b/packages/engine/src/index.ts index 26f5a14a5..5ba4e4ecc 100644 --- a/packages/engine/src/index.ts +++ b/packages/engine/src/index.ts @@ -7,4 +7,3 @@ console.log( 'padding: 2px 1px; border-radius: 3px 0 0 3px; color: #fff; background: #606060; font-weight: bold;', 'padding: 2px 1px; border-radius: 0 3px 3px 0; color: #fff; background: #42c02e; font-weight: bold;', ); - diff --git a/packages/engine/src/live-editing.ts b/packages/engine/src/live-editing.ts new file mode 100644 index 000000000..0d6131e39 --- /dev/null +++ b/packages/engine/src/live-editing.ts @@ -0,0 +1,80 @@ +import { EditingTarget, Node as DocNode, SaveHandler } from '@ali/lowcode-designer'; +import { isJSExpression } from '@ali/lowcode-types'; + +function getText(node: DocNode, prop: string) { + const p = node.getProp(prop, false); + if (!p || p.isUnset()) { + return null; + } + let v = p.getValue(); + if (isJSExpression(v)) { + v = v.mock; + } + if (v == null) { + return null; + } + if (p.type === 'literal') { + return v; + } + return Symbol.for('not-literal'); +} + +export function liveEditingRule(target: EditingTarget) { + // for vision components specific + const { node, event } = target; + + const targetElement = event.target as HTMLElement; + + if (!Array.from(targetElement.childNodes).every(item => item.nodeType === Node.TEXT_NODE)) { + return null; + } + + const { innerText } = targetElement; + const propTarget = ['title', 'label', 'text', 'content', 'children'].find(prop => { + return equalText(getText(node, prop), innerText); + }); + + if (propTarget) { + return { + propElement: targetElement, + propTarget, + }; + } + return null; +} + +function equalText(v: any, innerText: string) { + // TODO: enhance compare text logic + if (typeof v !== 'string') { + return false; + } + return v.trim() === innerText; +} + +export const liveEditingSaveHander: SaveHandler = { + condition: (prop) => { + // const v = prop.getValue(); + return prop.type === 'expression'; // || isI18nData(v); + }, + onSaveContent: (content, prop) => { + const v = prop.getValue(); + let data = v; + if (isJSExpression(v)) { + data = v.mock; + } + data = content; + if (isJSExpression(v)) { + prop.setValue({ + type: 'JSExpression', + value: v.value, + mock: data, + }); + } else { + prop.setValue(data); + } + }, +}; +// TODO: +// 非文本编辑 +// 国际化数据，改变当前 +// JSExpression, 改变 mock 或 弹出绑定变量 diff --git a/packages/vision-polyfill/package.json b/packages/vision-polyfill/package.json index 1b4dcfbab..d6ccb9373 100644 --- a/packages/vision-polyfill/package.json +++ b/packages/vision-polyfill/package.json @@ -3,7 +3,6 @@ "version": "1.0.30-beta.10", "description": "Vision Polyfill for Ali lowCode engine", "main": "lib/index.js", - "private": true, "files": [ "dist", "es", diff --git a/packages/vision-polyfill/src/index.ts b/packages/vision-polyfill/src/index.ts index 669bef56c..95c2a49ff 100644 --- a/packages/vision-polyfill/src/index.ts +++ b/packages/vision-polyfill/src/index.ts @@ -33,24 +33,6 @@ import './vision.less'; invariant((window as any).AliLowCodeEngine, 'AliLowCodeEngine is required, since vision polyfill is totally based on AliLowCodeEngine'); -// async function init(container?: Element) { -// if (!container) { -// container = document.createElement('div'); -// document.body.appendChild(container); -// } -// container.id = 'engine'; - -// await plugins.init(); -// render( -// createElement(Workbench, { -// skeleton, -// className: 'engine-main', -// topAreaItemClassName: 'engine-actionitem', -// }), -// container, -// ); -// } - /** * VE.ui.xxx * diff --git a/packages/vision-polyfill/src/reducers.ts b/packages/vision-polyfill/src/reducers.ts index fa07d7058..b3976c289 100644 --- a/packages/vision-polyfill/src/reducers.ts +++ b/packages/vision-polyfill/src/reducers.ts @@ -5,7 +5,7 @@ import bus from './bus'; import { VE_EVENTS } from './base/const'; import { deepValueParser } from './deep-value-parser'; -import { liveEditingRule, liveEditingSaveHander } from './vc-live-editing'; +// import { liveEditingRule, liveEditingSaveHander } from './vc-live-editing'; import { compatibleReducer, upgradePageLifeCyclesReducer, @@ -20,8 +20,8 @@ import { const { LiveEditing, TransformStage } = designerHelper; -LiveEditing.addLiveEditingSpecificRule(liveEditingRule); -LiveEditing.addLiveEditingSaveHandler(liveEditingSaveHander); +// LiveEditing.addLiveEditingSpecificRule(liveEditingRule); +// LiveEditing.addLiveEditingSaveHandler(liveEditingSaveHander); designer.project.onCurrentDocumentChange((doc) => { bus.emit(VE_EVENTS.VE_PAGE_PAGE_READY);