diff --git a/packages/demo/CHANGELOG.md b/packages/demo/CHANGELOG.md index dc3c22fd9..11ff8ccc8 100644 --- a/packages/demo/CHANGELOG.md +++ b/packages/demo/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.19...@ali/lowcode-demo@0.8.20) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-demo + + +## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.18...@ali/lowcode-demo@0.8.19) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-demo + ## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.17...@ali/lowcode-demo@0.8.18) (2020-05-13) diff --git a/packages/demo/build.plugin.js b/packages/demo/build.plugin.js index 50ac34ddd..6c89f05c1 100644 --- a/packages/demo/build.plugin.js +++ b/packages/demo/build.plugin.js @@ -16,7 +16,7 @@ module.exports = ({ onGetWebpackConfig }) => { .plugin('MonacoWebpackPlugin') // 第一项为具体插件，第二项为插件参数 .use(new MonacoWebpackPlugin({ - languages:["javascript","css","json"] + languages:["typescript","css","json"] }), []); config.plugins.delete('hot'); diff --git a/packages/demo/package.json b/packages/demo/package.json index e4406ff6c..12e672043 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-demo", - "version": "0.8.18", + "version": "0.8.20", "private": true, "description": "低代码引擎 DEMO", "scripts": { @@ -12,18 +12,18 @@ "config": {}, "dependencies": { "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-editor-skeleton": "^0.8.15", - "@ali/lowcode-plugin-components-pane": "^0.8.11", - "@ali/lowcode-plugin-designer": "^0.9.9", + "@ali/lowcode-editor-skeleton": "^0.8.17", + "@ali/lowcode-plugin-components-pane": "^0.8.13", + "@ali/lowcode-plugin-designer": "^0.9.11", "@ali/lowcode-plugin-event-bind-dialog": "^0.8.12", - "@ali/lowcode-plugin-outline-pane": "^0.8.15", + "@ali/lowcode-plugin-outline-pane": "^0.8.17", "@ali/lowcode-plugin-sample-logo": "^0.8.11", - "@ali/lowcode-plugin-sample-preview": "^0.8.14", + "@ali/lowcode-plugin-sample-preview": "^0.8.16", "@ali/lowcode-plugin-settings-pane": "^0.8.8", - "@ali/lowcode-plugin-undo-redo": "^0.8.14", + "@ali/lowcode-plugin-undo-redo": "^0.8.16", "@ali/lowcode-plugin-variable-bind-dialog": "^0.8.10", "@ali/lowcode-plugin-zh-en": "^0.8.14", - "@ali/lowcode-react-renderer": "^0.8.7", + "@ali/lowcode-react-renderer": "^0.8.8", "@ali/lowcode-runtime": "^0.8.13", "@ali/lowcode-utils": "^0.8.4", "@ali/ve-action-pane": "^4.7.0-beta.0", diff --git a/packages/demo/public/legao-assets.json b/packages/demo/public/legao-assets.json index e499f3918..d3feb0cc8 100644 --- a/packages/demo/public/legao-assets.json +++ b/packages/demo/public/legao-assets.json @@ -115,8 +115,8 @@ }, { "prototypeConfigsUrl": [ - "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.0.11/proto.3f4f5d1.css", - "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.0.11/proto.057b4c5.js" + "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.1.12/proto.611ab53.css", + "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.1.12/proto.5b7b3d3.js" ], "prototypeViewsUrl": null, "alias": "", diff --git a/packages/demo/src/vision/index.ts b/packages/demo/src/vision/index.ts index e01b724c6..3ab9ef186 100644 --- a/packages/demo/src/vision/index.ts +++ b/packages/demo/src/vision/index.ts @@ -11,6 +11,7 @@ import PageHistoryPane from '@ali/ve-page-history-pane'; // import I18nPane from '@ali/ve-i18n-pane'; import I18nManagePane from '@ali/ve-i18n-manage-pane'; import ActionPane from '@ali/ve-action-pane'; +import SourceEditor from '@ali/lowcode-plugin-source-editor'; import fetchContext from '@ali/vu-legao-design-fetch-context'; import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog'; import loadUrls from './loader'; @@ -95,16 +96,43 @@ function initDemoPanes() { type: 'Widget', content: EventBindDialog, }); - skeleton.add({ - area: 'leftArea', - name: 'icon1', - type: 'Dock', - props: { - align: 'bottom', - icon: 'set', - description: '设置' - }, - }); + + // skeleton.add({ + // area: 'left', + // name: 'sourceEditor', + // type: "PanelDock", + // content: SourceEditor, + // props: { + // align: undefined, + // description: "动作面板", + // onDestroy: undefined, + // icon: 'set', + // onInit: undefined + // }, + // panelProps:{ + // height: 300, + // help: undefined, + // hideTitleBar: true, + // maxHeight: 800, + // maxWidth: 1200, + // title: "动作面板", + // width: 600 + // } + + // }); + + // skeleton.add({ + // area: 'leftArea', + // name: 'icon1', + // type: 'PanelDock', + // props: { + // align: 'bottom', + // icon: 'set', + // description: '设置' + // }, + // }); + + skeleton.add({ area: 'leftArea', name: 'icon2', @@ -129,6 +157,8 @@ function initDemoPanes() { children: '发布', }), }); + + skeleton.add({ area: 'topArea', type: 'Dock', @@ -322,6 +352,7 @@ function initActionPane() { enableHeaderTip: true, }; + Panes.add(ActionPane, { props, }); diff --git a/packages/designer/CHANGELOG.md b/packages/designer/CHANGELOG.md index 1733f05e0..d0ad33327 100644 --- a/packages/designer/CHANGELOG.md +++ b/packages/designer/CHANGELOG.md @@ -3,6 +3,36 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. + +## [0.9.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.10...@ali/lowcode-designer@0.9.11) (2020-05-15) + + +### Features + +* add ? to component designer/src/designer/setting/utils.js ([0025e3c](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0025e3c)) +* add alias for get index ([e853a4f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/e853a4f)) +* add resize box ([14a55ae](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/14a55ae)) +* bord resizing ([361f4f6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/361f4f6)) +* border resizing ([c7fc28c](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/c7fc28c)) +* for box resizing ([77e325f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/77e325f)) +* for box resizing ([cb2854d](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/cb2854d)) + + + + + +## [0.9.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.9...@ali/lowcode-designer@0.9.10) (2020-05-15) + + +### Bug Fixes + +* handling the undefined variable ([0efe8b4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0efe8b4)) +* lc-borders-actions ([56d9f5f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/56d9f5f)) +* 修复 toolbar 弹出位置异常 ([b40b9a4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/b40b9a4)) + + + + ## [0.9.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.8...@ali/lowcode-designer@0.9.9) (2020-05-13) diff --git a/packages/designer/package.json b/packages/designer/package.json index f5eae7abd..ad1e0dce9 100644 --- a/packages/designer/package.json +++ b/packages/designer/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-designer", - "version": "0.9.9", + "version": "0.9.11", "description": "Designer for Ali LowCode Engine", "main": "lib/index.js", "module": "es/index.js", @@ -19,6 +19,7 @@ "@ali/lowcode-types": "^0.8.3", "@ali/lowcode-utils": "^0.8.4", "classnames": "^2.2.6", + "event": "^1.0.0", "react": "^16", "react-dom": "^16.7.0" }, diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx new file mode 100644 index 000000000..b0036c5c4 --- /dev/null +++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx @@ -0,0 +1,273 @@ +import { Component, Fragment } from 'react'; +import DragResizeEngine from './drag-resize-engine'; +import { observer, computed } from '@ali/lowcode-editor-core'; +import classNames from 'classnames'; +import { SimulatorContext } from '../context'; +import { BuiltinSimulatorHost } from '../host'; +import { OffsetObserver, Designer } from '../../designer'; + +@observer +export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost }> { + static contextType = SimulatorContext; + + get host(): BuiltinSimulatorHost { + return this.props.host; + } + + get dragging(): boolean { + return this.host.designer.dragon.dragging; + } + + @computed get selecting() { + const doc = this.host.document; + if (doc.suspensed) { + return null; + } + const selection = doc.selection; + return this.dragging ? selection.getTopNodes() : selection.getNodes(); + } + + shouldComponentUpdate() { + return false; + } + + componentDidUpdate() { + // this.hoveringCapture.setBoundary(this.outline); + // this.willBind(); + } + + render() { + const selecting = this.selecting; + if (!selecting || selecting.length < 1) { + // DIRTY FIX, recore has a bug! + return ; + } + + // const componentMeta = selecting[0].componentMeta; + // const metaData = componentMeta.getMetadata(); + + return ( + + {selecting.map((node) => ( + + ))} + + ); + } +} + +@observer +export class BoxResizingForNode extends Component<{ host: BuiltinSimulatorHost; node: Node }> { + static contextType = SimulatorContext; + + get host(): BuiltinSimulatorHost { + return this.props.host; + } + + get dragging(): boolean { + return this.host.designer.dragon.dragging; + } + + @computed get instances() { + return this.host.getComponentInstances(this.props.node); + } + + shouldComponentUpdate() { + return false; + } + + render() { + const { instances } = this; + const { node } = this.props; + const designer = this.host.designer; + + if (!instances || instances.length < 1) { + return null; + } + return ( + + {instances.map((instance: any) => { + const observed = designer.createOffsetObserver({ + node, + instance, + }); + if (!observed) { + return null; + } + return ( + + ); + })} + + ); + } +} + +@observer +export class BoxResizingInstance extends Component<{ + observed: OffsetObserver; + highlight?: boolean; + dragging?: boolean; + designer?: Designer; +}> { + // private outline: any; + private willUnbind: () => any; + private outlineRight: any; + private outlineLeft: any; + private dragEngine: DragResizeEngine; + + constructor(props: any) { + super(props); + this.dragEngine = new DragResizeEngine(props.designer); + } + + componentWillUnmount() { + if (this.willUnbind) { + this.willUnbind(); + } + this.props.observed.purge(); + } + + getExperiMentalFns = (metaData: any) => { + if (metaData.experimental && metaData.experimental.callbacks) { + return metaData.experimantal.callbacks; + } + }; + + componentDidMount() { + // this.hoveringCapture.setBoundary(this.outline); + this.willBind(); + + const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => { + const metaData = node.componentMeta.getMetadata(); + if ( + metaData && + metaData.experimental && + metaData.experimental.callbacks && + typeof metaData.experimental.callbacks.onResize === 'function' + ) { + e.trigger = direction; + e.deltaX = moveX; + e.deltaY = moveY; + metaData.experimental.callbacks.onResize(e, node); + } + }; + + const resizeStart = (e: MouseEvent, direction: string, node: any) => { + const metaData = node.componentMeta.getMetadata(); + if ( + metaData && + metaData.experimental && + metaData.experimental.callbacks && + typeof metaData.experimental.callbacks.onResizeStart === 'function' + ) { + e.trigger = direction; + metaData.experimental.callbacks.onResizeStart(e, node); + } + }; + + const resizeEnd = (e: MouseEvent, direction: string, node: any) => { + const metaData = node.componentMeta.getMetadata(); + if ( + metaData && + metaData.experimental && + metaData.experimental.callbacks && + typeof metaData.experimental.callbacks.onResizeEnd === 'function' + ) { + e.trigger = direction; + metaData.experimental.callbacks.onResizeStart(e, node); + } + }; + + this.dragEngine.onResize(resize); + this.dragEngine.onResizeStart(resizeStart); + this.dragEngine.onResizeEnd(resizeEnd); + } + + willBind() { + if (this.willUnbind) { + this.willUnbind(); + } + + if (!this.outlineRight && !this.outlineLeft) { + return; + } + + const unBind: any[] = []; + + unBind.push( + this.dragEngine.from(this.outlineRight, 'e', () => { + // if (!this.hoveringLine.hasOutline()) { + // return null; + // } + // return this.hoveringLine.getCurrentNode(); + return this.props.observed.node; + }), + ); + unBind.push( + this.dragEngine.from(this.outlineLeft, 'w', () => { + return this.props.observed.node; + // if (!this.hoveringLine.hasOutline()) { + // return null; + // } + // return this.hoveringLine.getCurrentNode(); + }), + ); + + this.willUnbind = () => { + if (unBind && unBind.length > 0) { + unBind.forEach((item) => { + item(); + }); + } + this.willUnbind = () => {}; + }; + } + + render() { + const { observed } = this.props; + if (!observed.hasOffset) { + return null; + } + + const { node, offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed; + let triggerVisible: any = []; + const metaData = node.componentMeta.getMetadata(); + if (metaData && metaData.experimental && metaData.experimental.getResizingHandlers) { + triggerVisible = metaData.experimental.getResizingHandlers(node); + } + + const className = classNames('lc-borders lc-resize-box'); + + return ( +
+ {triggerVisible.includes('w') && ( +
{ + this.outlineLeft = ref; + }} + className={className} + style={{ + height: offsetHeight, + transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`, + width: 20, + }} + /> + )} + {triggerVisible.includes('e') && ( +
{ + this.outlineRight = ref; + }} + style={{ + height: offsetHeight, + transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`, + width: 20, + }} + /> + )} +
+ ); + } +} 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 209fce326..33303c2fc 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx @@ -15,6 +15,7 @@ import { ActionContentObject, isActionContentObject } from '@ali/lowcode-types'; import { BuiltinSimulatorHost } from '../host'; import { OffsetObserver } from '../../designer'; import { Node } from '../../document'; +import NodeSelector from '../node-selector'; @observer export class BorderSelectingInstance extends Component<{ @@ -68,7 +69,6 @@ class Toolbar extends Component<{ observed: OffsetObserver }> { let style: any; if (observed.top > SPACE_HEIGHT) { style = { - right: Math.max(-BORDER, observed.right - width - BORDER), top: -SPACE_HEIGHT, height: BAR_HEIGHT, }; @@ -76,15 +76,18 @@ class Toolbar extends Component<{ observed: OffsetObserver }> { style = { bottom: -SPACE_HEIGHT, height: BAR_HEIGHT, - right: Math.max(-BORDER, observed.right - width - BORDER), }; } else { style = { height: BAR_HEIGHT, top: Math.max(MARGIN, MARGIN - observed.top), - right: Math.max(MARGIN, MARGIN + observed.right - width), }; } + if (observed.width < 140) { + style.left = Math.max(-BORDER, observed.left - width - BORDER); + } else { + style.right = Math.max(-BORDER, observed.right - width - BORDER); + } const { node } = observed; const actions: ReactNodeArray = []; node.componentMeta.availableActions.forEach((action) => { @@ -100,6 +103,7 @@ class Toolbar extends Component<{ observed: OffsetObserver }> { return (
{actions} +
); } diff --git a/packages/designer/src/builtin-simulator/bem-tools/borders.less b/packages/designer/src/builtin-simulator/bem-tools/borders.less index 7effde36a..4b10396ed 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/borders.less +++ b/packages/designer/src/builtin-simulator/bem-tools/borders.less @@ -30,7 +30,8 @@ } } - &-action { + &-action, + .ve-icon-button.ve-action-save { box-sizing: border-box; cursor: pointer; height: 20px; @@ -48,6 +49,28 @@ } } + &.lc-resize-box { + border-width: 0; + z-index: 1; + cursor: ew-resize; + pointer-events: auto; + align-items: center; + justify-content: center; + display: flex; + + &:after { + content: ""; + display: block; + height: calc(100% - 20px); + min-height: 50%; + width: 4px; + background: #738397; + border-radius: 2px; + // animation: flashing 1.5s infinite linear; + } + } + + // &&-hovering { &&-detecting { z-index: 1; border-style: dashed; 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 new file mode 100644 index 000000000..11308316e --- /dev/null +++ b/packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts @@ -0,0 +1,138 @@ +import * as EventEmitter from 'events'; +import { ISimulatorHost, isSimulatorHost } from '../../../../designer/src/simulator'; +import { Designer } from '../../../../designer/src/designer/designer'; +import { setNativeSelection, cursor } from '@ali/lowcode-utils'; +// import Cursor from './cursor'; +// import Pages from './pages'; + +function makeEventsHandler( + boostEvent: MouseEvent | DragEvent, + sensors: ISimulatorHost[], +): (fn: (sdoc: Document) => void) => void { + const topDoc = window.top.document; + const sourceDoc = boostEvent.view?.document || topDoc; + // TODO: optimize this logic, reduce listener + // const boostPrevented = boostEvent.defaultPrevented; + const docs = new Set(); + // if (boostPrevented || isDragEvent(boostEvent)) { + docs.add(topDoc); + // } + docs.add(sourceDoc); + // if (sourceDoc !== topDoc || isDragEvent(boostEvent)) { + sensors.forEach((sim) => { + const sdoc = sim.contentDocument; + if (sdoc) { + docs.add(sdoc); + } + }); + // } + + return (handle: (sdoc: Document) => void) => { + docs.forEach((doc) => handle(doc)); + }; +} + +// 拖动缩放 +export default class DragResizeEngine { + private emitter: EventEmitter; + private dragResizing = false; + + constructor(readonly designer: Designer) { + this.designer = designer; + this.emitter = new EventEmitter(); + } + + private getMasterSensors(): ISimulatorHost[] { + return this.designer.project.documents + .map((doc) => { + // TODO: not use actived, + if (doc.actived && doc.simulator?.sensorAvailable) { + return doc.simulator; + } + return null; + }) + .filter(Boolean) as any; + } + + isDragResizing() { + return this.dragResizing; + } + + /** + * drag reszie from + * @param shell + * @param direction n/s/e/w + * @param boost (e: MouseEvent) => VE.Node + */ + from(shell: Element, direction: string, boost: (e: MouseEvent) => any) { + let node: any; + let startEvent: MouseEvent; + + if (!shell) { + return () => {}; + } + + const move = (e: MouseEvent) => { + const moveX = e.clientX - startEvent.clientX; + const moveY = e.clientY - startEvent.clientY; + + this.emitter.emit('resize', e, direction, node, moveX, moveY); + }; + + const masterSensors = this.getMasterSensors(); + + const over = (e: MouseEvent) => { + const handleEvents = makeEventsHandler(e, masterSensors); + handleEvents((doc) => { + doc.removeEventListener('mousemove', move, true); + doc.removeEventListener('mouseup', over, true); + }); + + this.dragResizing = false; + cursor.release(); + + this.emitter.emit('resizeEnd', e, direction, node); + }; + + const mousedown = (e: MouseEvent) => { + node = boost(e); + startEvent = e; + const handleEvents = makeEventsHandler(e, masterSensors); + handleEvents((doc) => { + doc.addEventListener('mousemove', move, true); + doc.addEventListener('mouseup', over, true); + }); + + this.emitter.emit('resizestart', e, direction, node); + this.dragResizing = true; + cursor.addState('ew-resize'); + }; + shell.addEventListener('mousedown', mousedown); + return () => { + shell.removeEventListener('mousedown', mousedown); + }; + } + + onResizeStart(func: (e: MouseEvent, direction: string, node: any) => any) { + this.emitter.on('resizestart', func); + return () => { + this.emitter.removeListener('resizestart', func); + }; + } + + onResize(func: (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => any) { + this.emitter.on('resize', func); + return () => { + this.emitter.removeListener('resize', func); + }; + } + + onResizeEnd(func: (e: MouseEvent, direction: string, node: any) => any) { + this.emitter.on('resizeEnd', func); + return () => { + this.emitter.removeListener('resizeEnd', func); + }; + } +} + +// new DragResizeEngine(); diff --git a/packages/designer/src/builtin-simulator/bem-tools/index.tsx b/packages/designer/src/builtin-simulator/bem-tools/index.tsx index 881ff9396..c22951c2f 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/index.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/index.tsx @@ -3,6 +3,7 @@ import { observer } from '@ali/lowcode-editor-core'; import { BorderDetecting } from './border-detecting'; import { BuiltinSimulatorHost } from '../host'; import { BorderSelecting } from './border-selecting'; +import BorderResizing from './border-resizing'; import { InsertionView } from './insertion'; import './bem-tools.less'; import './borders.less'; @@ -21,6 +22,7 @@ export class BemTools extends Component<{ host: BuiltinSimulatorHost }> { +
); } diff --git a/packages/designer/src/builtin-simulator/host.less b/packages/designer/src/builtin-simulator/host.less index ea009f455..d183408f2 100644 --- a/packages/designer/src/builtin-simulator/host.less +++ b/packages/designer/src/builtin-simulator/host.less @@ -31,12 +31,13 @@ &-device-iphone6 { left: 50%; - width: 368px; + width: 378px; transform: translateX(-50%); background: url(https://img.alicdn.com/tps/TB12GetLpXXXXXhXFXXXXXXXXXX-756-1544.png) no-repeat top; background-size: 378px 772px; top: 8px; .@{scope}-canvas-viewport { + width: auto; top: 114px; left: 25px; right: 25px; diff --git a/packages/designer/src/builtin-simulator/host.ts b/packages/designer/src/builtin-simulator/host.ts index 6f9a2d9da..04aad80ad 100644 --- a/packages/designer/src/builtin-simulator/host.ts +++ b/packages/designer/src/builtin-simulator/host.ts @@ -77,7 +77,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost item.condition(prop))?.onSaveContent || defaultSaveContent; setterPropElement.setAttribute('contenteditable', matched?.mode && matched.mode !== 'plaintext' ? 'true' : 'plaintext-only'); + setterPropElement.removeAttribute('for'); setterPropElement.classList.add('engine-live-editing'); // be sure setterPropElement.focus(); @@ -107,14 +108,24 @@ export class LiveEditing { onSaveContent(setterPropElement!.innerText, prop); }; - this._dispose = () => { - setterPropElement!.removeAttribute('contenteditable'); - setterPropElement!.classList.remove('engine-live-editing'); + const keydown = (e: KeyboardEvent) => { + console.info(e.code); + // esc + // enter + // tab }; - - setterPropElement.addEventListener('focusout', (e) => { + const focusout = (e: FocusEvent) => { this.saveAndDispose(); - }); + }; + setterPropElement.addEventListener('focusout', focusout); + setterPropElement.addEventListener('keydown', keydown, true); + + this._dispose = () => { + setterPropElement!.classList.remove('engine-live-editing'); + setterPropElement!.removeAttribute('contenteditable'); + setterPropElement!.removeEventListener('focusout', focusout); + setterPropElement!.removeEventListener('keydown', keydown, true); + }; this._editing = prop; } diff --git a/packages/designer/src/builtin-simulator/node-selector/index.less b/packages/designer/src/builtin-simulator/node-selector/index.less new file mode 100644 index 000000000..c630e0914 --- /dev/null +++ b/packages/designer/src/builtin-simulator/node-selector/index.less @@ -0,0 +1,82 @@ +@import '~@ali/ve-less-variables/index.less'; + +// 样式直接沿用之前的样式，优化了下命名 +.instance-node-selector { + position: relative; + margin-right: 2px; + color: var(--color-icon-white, @title-bgcolor); + border-radius: @global-border-radius; + margin-right: 2px; + pointer-events: auto; + flex-grow: 0; + flex-shrink: 0; + + svg { + width: 16px; + height: 16px; + margin-right: 5px; + flex-grow: 0; + flex-shrink: 0; + max-width: inherit; + path { + fill: var(--color-icon-white, @title-bgcolor); + } + } + &-current { + background: var(--color-brand, @brand-color-1); + padding: 0 6px; + display: flex; + align-items: center; + height: 20px; + cursor: pointer; + color: var(--color-icon-white, @title-bgcolor); + border-radius: 3px; + + &-title { + padding-right: 6px; + color: var(--color-icon-white, @title-bgcolor); + } + } + &-list { + position: absolute; + left: 0; + right: 0; + opacity: 0; + visibility: hidden; + } + &-node { + margin: 2px 0; + &-content { + padding-left: 6px; + background: #78869a; + display: inline-flex; + border-radius: 3px; + align-items: center; + height: 20px; + color: var(--color-icon-white, @title-bgcolor); + cursor: pointer; + overflow: visible; + } + &-title { + padding-right: 6px; + // margin-left: 5px; + color: var(--color-icon-white, @title-bgcolor); + cursor: pointer; + overflow: visible; + } + &:hover { + opacity: 0.8; + } + } +} + +&:hover { + .instance-node-selector-current { + color: ar(--color-text-reverse, @white-alpha-2); + } + .instance-node-selector-popup { + visibility: visible; + opacity: 1; + transition: 0.2s all ease-in; + } +} diff --git a/packages/designer/src/builtin-simulator/node-selector/index.tsx b/packages/designer/src/builtin-simulator/node-selector/index.tsx new file mode 100644 index 000000000..5d1118294 --- /dev/null +++ b/packages/designer/src/builtin-simulator/node-selector/index.tsx @@ -0,0 +1,111 @@ +import { Overlay } from '@alifd/next'; +import React from 'react'; +import './index.less'; +import { Title } from '@ali/lowcode-editor-core'; + +import { Node, ParentalNode } from '@ali/lowcode-designer'; + +const { Popup } = Overlay; + +export interface IProps { + node: Node; +} + +export interface IState { + parentNodes: Node[]; +} + +type UnionNode = Node | ParentalNode | null; + +export default class InstanceNodeSelector extends React.Component { + state: IState = { + parentNodes: [], + }; + + componentDidMount() { + const parentNodes = this.getParentNodes(this.props.node); + this.setState({ + parentNodes, + }); + } + + // 获取节点的父级节点（最多获取5层） + getParentNodes = (node: Node) => { + const parentNodes = []; + let currentNode: UnionNode = node; + + while (currentNode && parentNodes.length < 5) { + currentNode = currentNode.getParent(); + if (currentNode) { + parentNodes.push(currentNode); + } + } + return parentNodes; + }; + + onSelect = (node: Node) => () => { + if (node && typeof node.select === 'function') { + node.select(); + } + }; + onMouseOver = (node: Node) => (_: any, flag = true) => { + if (node && typeof node.hover === 'function') { + node.hover(flag); + } + }; + onMouseOut = (node: Node) => (_: any, flag = false) => { + if (node && typeof node.hover === 'function') { + node.hover(flag); + } + }; + renderNodes = (node: Node) => { + const nodes = this.state.parentNodes || []; + const children = nodes.map((node, key) => { + return ( +
+
+ + </div> + </div> + ); + }); + return children; + }; + + render() { + const { node } = this.props; + return ( + <div className="instance-node-selector"> + <Popup + trigger={ + <div className="instance-node-selector-current"> + <Title + className="instance-node-selector-node-title" + title={{ + label: node.title, + icon: node.icon, + }} + /> + </div> + } + triggerType="hover" + offset={[0, 2]} + > + <div className="instance-node-selector">{this.renderNodes(node)}</div> + </Popup> + </div> + ); + } +} diff --git a/packages/designer/src/designer/builtin-hotkey.ts b/packages/designer/src/designer/builtin-hotkey.ts index 8e01bbfff..3f1fbc2c4 100644 --- a/packages/designer/src/designer/builtin-hotkey.ts +++ b/packages/designer/src/designer/builtin-hotkey.ts @@ -108,6 +108,8 @@ hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => { const componentsMap = {}; const componentsTree = selected.map((item) => item.export(TransformStage.Save)); + // FIXME: clear node.id + const data = { type: 'nodeSchema', componentsMap, componentsTree }; clipboard.setData(data); diff --git a/packages/designer/src/designer/setting/utils.js b/packages/designer/src/designer/setting/utils.js index 64f063da3..ab09545e6 100644 --- a/packages/designer/src/designer/setting/utils.js +++ b/packages/designer/src/designer/setting/utils.js @@ -47,6 +47,9 @@ export class Transducer { } if (typeof setter === 'string') { setter = getSetter(setter)?.component; + if (!setter) { + debugger; + } } this.setterTransducer = combineTransducer( diff --git a/packages/designer/src/document/document-model.ts b/packages/designer/src/document/document-model.ts index fe7908500..b1c72b44d 100644 --- a/packages/designer/src/document/document-model.ts +++ b/packages/designer/src/document/document-model.ts @@ -483,7 +483,7 @@ export class DocumentModel { // add toData toData() { - const node = this.project?.currentDocument?.export(TransformStage.Serilize); + const node = this.project?.currentDocument?.export(TransformStage.Save); return { componentsTree: [node] }; } diff --git a/packages/designer/src/document/node/node.ts b/packages/designer/src/document/node/node.ts index 63a75421d..d743b0bd1 100644 --- a/packages/designer/src/document/node/node.ts +++ b/packages/designer/src/document/node/node.ts @@ -426,6 +426,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> { return this.parent.children.indexOf(this); } + /** * 获取下一个兄弟节点 */ @@ -486,9 +487,9 @@ export class Node<Schema extends NodeSchema = NodeSchema> { componentName: this.componentName, }; - if (stage !== TransformStage.Save) { + // if (stage !== TransformStage.Save) { baseSchema.id = this.id; - } + // } if (this.isLeaf()) { baseSchema.children = this.props.get('children')?.export(stage); @@ -618,6 +619,9 @@ export class Node<Schema extends NodeSchema = NodeSchema> { getId() { return this.id; } + getIndex() { + return this.index; + } getNode() { return this; } diff --git a/packages/designer/src/simulator.ts b/packages/designer/src/simulator.ts index fd3e7dcaf..0979ce40e 100644 --- a/packages/designer/src/simulator.ts +++ b/packages/designer/src/simulator.ts @@ -81,7 +81,10 @@ export interface ISimulatorHost<P = object> extends ISensor { // later: // layout: ComponentName // 获取区块代码, 通过 components 传递，可异步获取 + // 设置 simulator Props setProps(props: P): void; + // 设置单个 Prop + set(key: string, value: any): void; setSuspense(suspensed: boolean): void; diff --git a/packages/editor-skeleton/CHANGELOG.md b/packages/editor-skeleton/CHANGELOG.md index 692fef781..34c16eb9c 100644 --- a/packages/editor-skeleton/CHANGELOG.md +++ b/packages/editor-skeleton/CHANGELOG.md @@ -3,6 +3,27 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.17"></a> +## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.16...@ali/lowcode-editor-skeleton@0.8.17) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-editor-skeleton + +<a name="0.8.16"></a> +## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.15...@ali/lowcode-editor-skeleton@0.8.16) (2020-05-15) + + +### Bug Fixes + +* setting pane tab active ([06d7b50](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/06d7b50)) +* topbar search icon ([0447801](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0447801)) +* 修复 toolbar 弹出位置异常 ([b40b9a4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/b40b9a4)) + + + + <a name="0.8.15"></a> ## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.14...@ali/lowcode-editor-skeleton@0.8.15) (2020-05-13) diff --git a/packages/editor-skeleton/package.json b/packages/editor-skeleton/package.json index 4f54eed48..55f224f02 100644 --- a/packages/editor-skeleton/package.json +++ b/packages/editor-skeleton/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-editor-skeleton", - "version": "0.8.15", + "version": "0.8.17", "description": "alibaba lowcode editor skeleton", "main": "lib/index.js", "module": "es/index.js", @@ -19,7 +19,7 @@ "editor" ], "dependencies": { - "@ali/lowcode-designer": "^0.9.9", + "@ali/lowcode-designer": "^0.9.11", "@ali/lowcode-editor-core": "^0.8.12", "@ali/lowcode-types": "^0.8.3", "@ali/lowcode-utils": "^0.8.4", diff --git a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx index 77c9eda0f..182a521b7 100644 --- a/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx +++ b/packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx @@ -96,6 +96,7 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> { return ( <div className="lc-settings-main"> <Tab + key={settings.id} navClassName="lc-settings-tabs" animation={false} excessMode="dropdown" diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less index 019835cb7..deec754a1 100644 --- a/packages/editor-skeleton/src/layouts/workbench.less +++ b/packages/editor-skeleton/src/layouts/workbench.less @@ -156,6 +156,9 @@ body { margin-left: 4px; margin-right: 4px; } + .ve-quick-search-trigger{ + display: flex; + } } } .lc-workbench-body { @@ -229,6 +232,7 @@ body { flex-shrink: 0; flex-direction: column; justify-content: space-between; + overflow: hidden; &.lc-area-visible { display: flex; } diff --git a/packages/plugin-components-pane/CHANGELOG.md b/packages/plugin-components-pane/CHANGELOG.md index e8287055b..008953cdf 100644 --- a/packages/plugin-components-pane/CHANGELOG.md +++ b/packages/plugin-components-pane/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.13"></a> +## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.12...@ali/lowcode-plugin-components-pane@0.8.13) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-components-pane + +<a name="0.8.12"></a> +## [0.8.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.11...@ali/lowcode-plugin-components-pane@0.8.12) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-components-pane + <a name="0.8.11"></a> ## [0.8.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.10...@ali/lowcode-plugin-components-pane@0.8.11) (2020-05-13) diff --git a/packages/plugin-components-pane/package.json b/packages/plugin-components-pane/package.json index ff51d2de8..fec2b0c1d 100644 --- a/packages/plugin-components-pane/package.json +++ b/packages/plugin-components-pane/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-components-pane", - "version": "0.8.11", + "version": "0.8.13", "description": "alibaba lowcode editor component-list plugin", "files": [ "es/", @@ -23,7 +23,7 @@ "@ali/iceluna-addon-component-list": "^1.0.11", "@ali/iceluna-comp-material-show": "^1.0.10", "@ali/iceluna-sdk": "^1.0.6-beta.6", - "@ali/lowcode-designer": "^0.9.9", + "@ali/lowcode-designer": "^0.9.11", "@ali/lowcode-editor-core": "^0.8.12", "@ali/lowcode-types": "^0.8.3", "@alifd/next": "^1.19.19", diff --git a/packages/plugin-designer/CHANGELOG.md b/packages/plugin-designer/CHANGELOG.md index fc04137fe..2e493a99c 100644 --- a/packages/plugin-designer/CHANGELOG.md +++ b/packages/plugin-designer/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.9.11"></a> +## [0.9.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.10...@ali/lowcode-plugin-designer@0.9.11) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-designer + +<a name="0.9.10"></a> +## [0.9.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.9...@ali/lowcode-plugin-designer@0.9.10) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-designer + <a name="0.9.9"></a> ## [0.9.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.8...@ali/lowcode-plugin-designer@0.9.9) (2020-05-13) diff --git a/packages/plugin-designer/package.json b/packages/plugin-designer/package.json index 92fc7202b..bde4e28f2 100644 --- a/packages/plugin-designer/package.json +++ b/packages/plugin-designer/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-designer", - "version": "0.9.9", + "version": "0.9.11", "description": "alibaba lowcode editor designer plugin", "files": [ "es", @@ -20,7 +20,7 @@ ], "author": "xiayang.xy", "dependencies": { - "@ali/lowcode-designer": "^0.9.9", + "@ali/lowcode-designer": "^0.9.11", "@ali/lowcode-editor-core": "^0.8.12", "react": "^16.8.1", "react-dom": "^16.8.1" diff --git a/packages/plugin-outline-pane/CHANGELOG.md b/packages/plugin-outline-pane/CHANGELOG.md index 7d6a3f5d6..747908330 100644 --- a/packages/plugin-outline-pane/CHANGELOG.md +++ b/packages/plugin-outline-pane/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.17"></a> +## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.16...@ali/lowcode-plugin-outline-pane@0.8.17) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane + +<a name="0.8.16"></a> +## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.15...@ali/lowcode-plugin-outline-pane@0.8.16) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane + <a name="0.8.15"></a> ## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.14...@ali/lowcode-plugin-outline-pane@0.8.15) (2020-05-13) diff --git a/packages/plugin-outline-pane/package.json b/packages/plugin-outline-pane/package.json index a610a5e3c..9f566d1c4 100644 --- a/packages/plugin-outline-pane/package.json +++ b/packages/plugin-outline-pane/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-outline-pane", - "version": "0.8.15", + "version": "0.8.17", "description": "Outline pane for Ali lowCode engine", "files": [ "es", @@ -14,7 +14,7 @@ "test:snapshot": "ava --update-snapshots" }, "dependencies": { - "@ali/lowcode-designer": "^0.9.9", + "@ali/lowcode-designer": "^0.9.11", "@ali/lowcode-editor-core": "^0.8.12", "@ali/lowcode-types": "^0.8.3", "@ali/lowcode-utils": "^0.8.4", diff --git a/packages/plugin-sample-preview/CHANGELOG.md b/packages/plugin-sample-preview/CHANGELOG.md index efd59ccef..0cc662a19 100644 --- a/packages/plugin-sample-preview/CHANGELOG.md +++ b/packages/plugin-sample-preview/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.16"></a> +## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.15...@ali/lowcode-plugin-sample-preview@0.8.16) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview + +<a name="0.8.15"></a> +## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.14...@ali/lowcode-plugin-sample-preview@0.8.15) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview + <a name="0.8.14"></a> ## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.13...@ali/lowcode-plugin-sample-preview@0.8.14) (2020-05-13) diff --git a/packages/plugin-sample-preview/package.json b/packages/plugin-sample-preview/package.json index 92a4cf6a2..c0d4bfeae 100644 --- a/packages/plugin-sample-preview/package.json +++ b/packages/plugin-sample-preview/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-sample-preview", - "version": "0.8.14", + "version": "0.8.16", "description": "alibaba lowcode editor sample preview plugin", "files": [ "es", @@ -18,7 +18,7 @@ "editor" ], "dependencies": { - "@ali/lowcode-designer": "^0.9.9", + "@ali/lowcode-designer": "^0.9.11", "@ali/lowcode-editor-core": "^0.8.12", "@alifd/next": "^1.x", "react": "^16.8.1" diff --git a/packages/plugin-source-editor/CHANGELOG.md b/packages/plugin-source-editor/CHANGELOG.md index f9b48ac8c..e401f19c3 100644 --- a/packages/plugin-source-editor/CHANGELOG.md +++ b/packages/plugin-source-editor/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.9"></a> +## [0.8.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.8...@ali/lowcode-plugin-source-editor@0.8.9) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-source-editor + <a name="0.8.8"></a> ## [0.8.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.7...@ali/lowcode-plugin-source-editor@0.8.8) (2020-05-13) diff --git a/packages/plugin-source-editor/package.json b/packages/plugin-source-editor/package.json index 7448deb63..6f2be4dbe 100644 --- a/packages/plugin-source-editor/package.json +++ b/packages/plugin-source-editor/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-source-editor", - "version": "0.8.8", + "version": "0.8.9", "description": "alibaba lowcode editor source-editor plugin", "files": [ "es", diff --git a/packages/plugin-source-editor/src/index.scss b/packages/plugin-source-editor/src/index.scss index 02b902227..bd570e930 100644 --- a/packages/plugin-source-editor/src/index.scss +++ b/packages/plugin-source-editor/src/index.scss @@ -19,5 +19,16 @@ height: 100%; } + .full-screen-container{ + position: absolute; + top: 40px; + right: 20px; + cursor: pointer; + img{ + width: 20px; + height: 20px; + } + } + } diff --git a/packages/plugin-source-editor/src/index.tsx b/packages/plugin-source-editor/src/index.tsx index fb957dbb6..0a4aaefdb 100644 --- a/packages/plugin-source-editor/src/index.tsx +++ b/packages/plugin-source-editor/src/index.tsx @@ -1,11 +1,8 @@ import { Component, isValidElement, ReactElement, ReactNode } from 'react'; import { Tab, Search, Input, Button } from '@alifd/next'; -import { Editor } from '@ali/lowcode-editor-core'; +import {Editor} from '@ali/lowcode-editor-core'; import { js_beautify, css_beautify } from 'js-beautify'; import MonacoEditor from 'react-monaco-editor'; - -// import lolizer from './sorceEditorPlugin', - import { Designer } from '@ali/lowcode-designer'; const TAB_KEY = { JS_TAB: 'js_tab', @@ -46,23 +43,33 @@ interface FunctionEventParam { export default class SourceEditor extends Component<{ editor: Editor; - panel?: any }> { - private monocoEditer: any; - private editorCmd: any; + private monocoEditor: Object; + private editorCmd: Object; + private editorRef = React.createRef(); + private editorNode: Object; + private editorParentNode: Object; - state: any = { + state = { isShow: false, tabKey: TAB_KEY.JS_TAB, }; - async componentWillMount() { + componentWillMount() { const { editor } = this.props; editor.on('leftPanel.show', (key: String) => { - if (key === 'sourceEditor' && !this.monocoEditer) { + debugger; + if (key === 'sourceEditor' && !this.monocoEditor) { this.setState({ isShow: true, }); + + + setTimeout(()=>{ + this.editorNode = this.editorRef.current; //记录当前dom节点； + this.editorParentNode = this.editorNode.parentNode; //记录父节点; + console.log(this.editorNode); + },0) } }); @@ -73,57 +80,68 @@ export default class SourceEditor extends Component<{ }); // 定位函数 - editor.on('sourceEditor.focusByFunction',(params:FunctionEventParam)=>{ + editor.on('sourceEditor.focusByFunction', (params: FunctionEventParam) => { this.callEditorEvent('sourceEditor.focusByFunction', params); this.openPluginPannel(); - }) + }); - const designer = await editor.onceGot(Designer); - // let schema = designer.project.getSchema(); - // mock data - let schema = { - componentTree: [ - { - state: { - // 初始state： 选填 对象类型/变量表达式 - btnText: 'submit', // 默认数据值： 选填 变量表达式 - }, - css: 'body {font-size: 12px;} .botton{widht:100px;color:#ff00ff}', //css样式描述： 选填 - lifeCycles: { - //生命周期: 选填 对象类型 - didMount: { - type: 'JSExpression', - value: "function() {\n \t\tconsole.log('did mount');\n\t}", + //editor.once('designer.mount', (designer: Designer) => { + // let schema = designer.project.getSchema(); + // mock data + let schema = { + componentTree: [ + { + state: { + // 初始state： 选填 对象类型/变量表达式 + btnText: 'submit', // 默认数据值： 选填 变量表达式 }, - willUnmount: { - type: 'JSExpression', - value: "function() {\n \t\tconsole.log('will umount');\n\t}", + css: 'body {font-size: 12px;} .botton{widht:100px;color:#ff00ff}', //css样式描述： 选填 + lifeCycles: { + //生命周期: 选填 对象类型 + didMount: { + type: 'JSExpression', + value: "function() {\n \t\tconsole.log('did mount');\n\t}", + }, + willUnmount: { + type: 'JSExpression', + value: "function() {\n \t\tconsole.log('will umount');\n\t}", + }, + }, + methods: { + //自定义方法对象： 选填 对象类型 + getData: { + //自定义方法： 选填 函数类型 + type: 'JSExpression', + value: "function() {\n \t\tconsole.log('testFunc');\n \t}", + }, }, }, - methods: { - //自定义方法对象： 选填 对象类型 - getData: { - //自定义方法： 选填 函数类型 - type: 'JSExpression', - value: "function() {\n \t\tconsole.log('testFunc');\n \t}", - }, - }, - }, - ], - }; + ], + }; + + this.initCode(schema); + //}); + } + + componentDidMount(){ + - this.initCode(schema); } openPluginPannel = () => { - const { panel } = this.props; - if (panel) { - panel.show(); + const { editor } = this.props; + // 判断面板是否处于激活状态 + if (!editor.leftNav || editor.leftNav != 'sourceEditor') { + // 打开面板 + editor.emit('leftNav.change', 'sourceEditor'); } - } + }; - callEditorEvent = (eventName: any, params: any) => { - if (!this.monocoEditer) { + /** + * 执行编辑器事件 + */ + callEditorEvent = (eventName, params) => { + if (!this.monocoEditor) { this.editorCmd = { eventName, params, @@ -131,16 +149,24 @@ export default class SourceEditor extends Component<{ return; } - if (eventName === 'sourceEditor.addFunction') { - this.addFunction(params); - }else if (eventName === 'sourceEditor.focusByFunction'){ - this.focusByFunctionName(params); + if (this.state.selectTab == TAB_KEY.CSS_TAB) { + this.setState({ + selectTab: TAB_KEY.JS_TAB, + }); } - + if (eventName === 'sourceEditor.addFunction') { + setTimeout(() => { + this.addFunction(params); + }, 100); + } else if (eventName === 'sourceEditor.focusByFunction') { + setTimeout(() => { + this.focusByFunctionName(params); + }, 100); + } }; - initCode = (schema: any) => { + initCode = (schema) => { let jsCode = js_beautify(transfrom.schema2Code(schema), { indent_size: 2, indent_empty_lines: true }); let css; @@ -160,19 +186,19 @@ export default class SourceEditor extends Component<{ * @param params */ addFunction(params: FunctionEventParam) { - const count = this.monocoEditer.getModel().getLineCount() || 0; - const range = new (window as any).monaco.Range(count, 1, count, 1); + const count = this.monocoEditor.getModel().getLineCount() || 0; + const range = new monaco.Range(count, 1, count, 1); const functionCode = transfrom.getNewFunctionCode(params.functionName); - this.monocoEditer.executeEdits('log-source', [ + this.monocoEditor.executeEdits('log-source', [ { identifier: 'event_id', range: range, text: functionCode, forceMoveMarkers: true }, ]); setTimeout(() => { - let newPosition = new (window as any).monaco.Position(count + 1, 2); - this.monocoEditer.setPosition(newPosition); - this.monocoEditer.focus(); + let newPosition = new monaco.Position(count + 1, 2); + this.monocoEditor.setPosition(newPosition); + this.monocoEditor.focus(); }, 100); - this.updateCode(this.monocoEditer.getModel().getValue()); + this.updateCode(this.monocoEditor.getModel().getValue()); } /** @@ -181,30 +207,24 @@ export default class SourceEditor extends Component<{ */ focusByFunctionName(params: FunctionEventParam) { const functionName = params.functionName; - const matchedResult = this.monocoEditer + const matchedResult = this.monocoEditor .getModel() .findMatches(`${functionName}\\s*\\([\\s\\S]*\\)[\\s\\S]*\\{`, false, true)[0]; if (matchedResult) { - - setTimeout(()=>{ - this.monocoEditer.revealLineInCenter(matchedResult.range.startLineNumber); - this.monocoEditer.setPosition({ + let monocoEditor = this.monocoEditor; + setTimeout(() => { + monocoEditor.revealLineInCenter(matchedResult.range.startLineNumber); + monocoEditor.setPosition({ column: matchedResult.range.endColumn, lineNumber: matchedResult.range.endLineNumber, }); - - this.monocoEditer.focus(); - },100) + monocoEditor.focus(); + }, 100); } } - editorDidMount = (editor: any, monaco: any) => { + editorDidMount = (editor, monaco) => { console.log('editorDidMount', editor); - this.monocoEditer = editor; - - if (this.editorCmd) { - this.callEditorEvent(this.editorCmd.eventName, this.editorCmd.params); - } // var commandId = editor.addCommand( // 0, @@ -215,39 +235,22 @@ export default class SourceEditor extends Component<{ // '', // ); - // monaco.languages.registerCodeLensProvider('javascript', { - // provideCodeLenses: function(model, token) { - // return { - // lenses: [ - // { - // range: { - // startLineNumber: 1, - // startColumn: 1, - // endLineNumber: 1, - // endColumn: 1, - // }, - // id: 'First Line', - // command: { - // id: commandId, - // title: 'First Line', - // }, - // }, - // ], - // }; - // }, - // resolveCodeLens: function(model, codeLens, token) { - // return codeLens; - // }, - // }); + if (this.state.selectTab == TAB_KEY.JS_TAB) { + this.monocoEditor = editor; + } + + if (this.editorCmd) { + this.callEditorEvent(this.editorCmd.eventName, this.editorCmd.params); + } }; - onTabChange = (key: any) => { + onTabChange = (key) => { this.setState({ selectTab: key, }); }; - updateCode = (newCode: any) => { + updateCode = (newCode) => { const { selectTab } = this.state; if (selectTab === TAB_KEY.JS_TAB) { this.setState({ @@ -270,22 +273,28 @@ export default class SourceEditor extends Component<{ ]; return ( - <div className="source-editor-container"> - <Tab size="small" shape="wrapped" onChange={this.onTabChange}> + <div className="source-editor-container" > + <Tab size="small" shape="wrapped" onChange={this.onTabChange} activeKey={selectTab}> {tabs.map((item) => ( <Tab.Item key={item.key} title={item.tab}> {isShow && ( - <MonacoEditor - value={selectTab == TAB_KEY.JS_TAB ? jsCode : css} - {...defaultEditorOption as any} - {...{ language: selectTab == TAB_KEY.JS_TAB ? 'javascript' : 'css' }} - onChange={(newCode) => this.updateCode(newCode)} - editorDidMount={this.editorDidMount} - /> + <div style={{ height: '100%' }} ref={this.editorRef}> + <MonacoEditor + value={selectTab == TAB_KEY.JS_TAB ? jsCode : css} + {...defaultEditorOption} + {...{ language: selectTab == TAB_KEY.JS_TAB ? 'typescript' : 'css' }} + onChange={(newCode) => this.updateCode(newCode)} + editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco)} + /> + </div> )} </Tab.Item> ))} </Tab> + + <div className="full-screen-container" onClick={this.fullScreen}> + <img src="https://gw.alicdn.com/tfs/TB1d7XqE1T2gK0jSZFvXXXnFXXa-200-200.png"></img> + </div> </div> ); } diff --git a/packages/plugin-undo-redo/CHANGELOG.md b/packages/plugin-undo-redo/CHANGELOG.md index 7ece18495..7e35b45bc 100644 --- a/packages/plugin-undo-redo/CHANGELOG.md +++ b/packages/plugin-undo-redo/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.16"></a> +## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.15...@ali/lowcode-plugin-undo-redo@0.8.16) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo + +<a name="0.8.15"></a> +## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.14...@ali/lowcode-plugin-undo-redo@0.8.15) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo + <a name="0.8.14"></a> ## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.13...@ali/lowcode-plugin-undo-redo@0.8.14) (2020-05-13) diff --git a/packages/plugin-undo-redo/package.json b/packages/plugin-undo-redo/package.json index ab17a87f6..94f17770e 100644 --- a/packages/plugin-undo-redo/package.json +++ b/packages/plugin-undo-redo/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-undo-redo", - "version": "0.8.14", + "version": "0.8.16", "description": "alibaba lowcode editor undo redo plugin", "files": [ "es", @@ -19,9 +19,9 @@ ], "author": "xiayang.xy", "dependencies": { - "@ali/lowcode-designer": "^0.9.9", + "@ali/lowcode-designer": "^0.9.11", "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-editor-skeleton": "^0.8.15", + "@ali/lowcode-editor-skeleton": "^0.8.17", "@ali/lowcode-types": "^0.8.3", "@ali/lowcode-utils": "^0.8.4", "react": "^16.8.1", diff --git a/packages/react-renderer/CHANGELOG.md b/packages/react-renderer/CHANGELOG.md index fa76c7993..5ccb2a58b 100644 --- a/packages/react-renderer/CHANGELOG.md +++ b/packages/react-renderer/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.8"></a> +## [0.8.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-renderer@0.8.7...@ali/lowcode-react-renderer@0.8.8) (2020-05-15) + + +### Bug Fixes + +* handling the undefined variable ([0efe8b4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0efe8b4)) + + + + <a name="0.8.7"></a> ## [0.8.7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-renderer@0.8.6...@ali/lowcode-react-renderer@0.8.7) (2020-05-13) diff --git a/packages/react-renderer/package.json b/packages/react-renderer/package.json index 75a60e35f..4092c04c7 100644 --- a/packages/react-renderer/package.json +++ b/packages/react-renderer/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-react-renderer", - "version": "0.8.7", + "version": "0.8.8", "description": "react renderer for ali lowcode engine", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/react-simulator-renderer/CHANGELOG.md b/packages/react-simulator-renderer/CHANGELOG.md index 4b389589c..fbc0420a2 100644 --- a/packages/react-simulator-renderer/CHANGELOG.md +++ b/packages/react-simulator-renderer/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.16"></a> +## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.15...@ali/lowcode-react-simulator-renderer@0.8.16) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer + +<a name="0.8.15"></a> +## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.14...@ali/lowcode-react-simulator-renderer@0.8.15) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer + <a name="0.8.14"></a> ## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.13...@ali/lowcode-react-simulator-renderer@0.8.14) (2020-05-13) diff --git a/packages/react-simulator-renderer/package.json b/packages/react-simulator-renderer/package.json index b13d26269..ff2fe733e 100644 --- a/packages/react-simulator-renderer/package.json +++ b/packages/react-simulator-renderer/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@ali/lowcode-react-simulator-renderer", - "version": "0.8.14", + "version": "0.8.16", "description": "react simulator renderer for alibaba lowcode designer", "main": "lib/index.js", "module": "es/index.js", @@ -13,8 +13,8 @@ "test:snapshot": "ava --update-snapshots" }, "dependencies": { - "@ali/lowcode-designer": "^0.9.9", - "@ali/lowcode-react-renderer": "^0.8.7", + "@ali/lowcode-designer": "^0.9.11", + "@ali/lowcode-react-renderer": "^0.8.8", "@ali/lowcode-types": "^0.8.3", "@ali/lowcode-utils": "^0.8.4", "@ali/vu-css-style": "^1.0.2", diff --git a/packages/react-simulator-renderer/src/renderer-view.tsx b/packages/react-simulator-renderer/src/renderer-view.tsx index 5ae9ce0fe..c2f2e03ab 100644 --- a/packages/react-simulator-renderer/src/renderer-view.tsx +++ b/packages/react-simulator-renderer/src/renderer-view.tsx @@ -47,6 +47,26 @@ export default class SimulatorRendererView extends Component<{ renderer: Simulat } } +function ucfirst(s: string) { + return s.charAt(0).toUpperCase() + s.substring(1); +} +function getDeviceView(view: any, device: string, mode: string) { + if (!view || typeof view === 'string') { + return view; + } + + // compatible vision Mobile | Preview + device = ucfirst(device); + if (device === 'Mobile' && view.hasOwnProperty(device)) { + view = view[device]; + } + mode = ucfirst(mode); + if (mode === 'Preview' && view.hasOwnProperty(mode)) { + view = view[mode]; + } + return view; +} + @observer class Layout extends Component<{ renderer: SimulatorRenderer }> { shouldComponentUpdate() { @@ -72,13 +92,14 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> { } render() { const { renderer } = this.props; + const { device, designMode } = renderer; return ( <LowCodeRenderer schema={renderer.schema} components={renderer.components} appHelper={renderer.context} // context={renderer.context} - designMode={renderer.designMode} + designMode={designMode} suspended={renderer.suspended} self={renderer.scope} customCreateElement={(Component: any, props: any, children: any) => { @@ -87,7 +108,7 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> { viewProps._leaf = host.document.getNode(__id); return createElement( - Component, + getDeviceView(Component, device, designMode), viewProps, children == null ? [] : Array.isArray(children) ? children : [children], ); diff --git a/packages/react-simulator-renderer/src/renderer.ts b/packages/react-simulator-renderer/src/renderer.ts index 1aa4ba534..a5bee9da7 100644 --- a/packages/react-simulator-renderer/src/renderer.ts +++ b/packages/react-simulator-renderer/src/renderer.ts @@ -35,12 +35,14 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer { } // sync designMode + this._designMode = host.designMode; // sync suspended // sync scope // sync device + this._device = host.device; }); host.componentsConsumer.consume(async (componentsAsset) => { if (componentsAsset) { @@ -83,9 +85,13 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer { @computed get context(): any { return this._appContext; } - + @obx.ref private _designMode: string = 'design'; @computed get designMode(): any { - return 'preview'; + return this._designMode; + } + @obx.ref private _device: string = 'default'; + @computed get device() { + return this._device; } @obx.ref private _componentsMap = {}; @computed get componentsMap(): any { diff --git a/packages/types/src/metadata.ts b/packages/types/src/metadata.ts index b3b11aed0..ac3bee227 100644 --- a/packages/types/src/metadata.ts +++ b/packages/types/src/metadata.ts @@ -45,6 +45,10 @@ export interface InitialItem { name: string; initial: (target: SettingTarget, currentValue: any) => any; } +export interface FilterItem { + name: string; + filter: (target: SettingTarget, currentValue: any) => any; +} export interface Experimental { context?: { [contextInfoName: string]: any }; @@ -52,6 +56,7 @@ export interface Experimental { view?: ComponentType<any>; transducers?: any; // ? should support initials?: InitialItem[]; + filters?: FilterItem[]; callbacks?: Callbacks; // TODO: thinkof function initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]); diff --git a/packages/vision-preset/CHANGELOG.md b/packages/vision-preset/CHANGELOG.md index da652b700..e208100e3 100644 --- a/packages/vision-preset/CHANGELOG.md +++ b/packages/vision-preset/CHANGELOG.md @@ -3,6 +3,26 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +<a name="0.8.10"></a> +## [0.8.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-vision-preset@0.8.9...@ali/lowcode-vision-preset@0.8.10) (2020-05-15) + + + + +**Note:** Version bump only for package @ali/lowcode-vision-preset + +<a name="0.8.9"></a> +## [0.8.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-vision-preset@0.8.8...@ali/lowcode-vision-preset@0.8.9) (2020-05-15) + + +### Bug Fixes + +* add pages.toData method ([95d3cb3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/95d3cb3)) +* lc-borders-actions ([56d9f5f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/56d9f5f)) + + + + <a name="0.8.8"></a> ## [0.8.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-vision-preset@0.8.7...@ali/lowcode-vision-preset@0.8.8) (2020-05-13) diff --git a/packages/vision-preset/package.json b/packages/vision-preset/package.json index 7fbb33b2d..b6724ed08 100644 --- a/packages/vision-preset/package.json +++ b/packages/vision-preset/package.json @@ -1,7 +1,7 @@ { "name": "@ali/lowcode-vision-preset", "private": true, - "version": "0.8.8", + "version": "0.8.10", "description": "Vision Polyfill for Ali lowCode engine", "main": "lib/index.js", "files": [ @@ -15,9 +15,9 @@ "license": "MIT", "dependencies": { "@ali/lowcode-editor-core": "^0.8.12", - "@ali/lowcode-editor-skeleton": "^0.8.15", - "@ali/lowcode-plugin-designer": "^0.9.9", - "@ali/lowcode-plugin-outline-pane": "^0.8.15", + "@ali/lowcode-editor-skeleton": "^0.8.17", + "@ali/lowcode-plugin-designer": "^0.9.11", + "@ali/lowcode-plugin-outline-pane": "^0.8.17", "@ali/ve-i18n-util": "^2.0.2", "@ali/ve-icons": "^4.1.9", "@ali/ve-less-variables": "2.0.3", diff --git a/packages/vision-preset/src/bundle/prototype.ts b/packages/vision-preset/src/bundle/prototype.ts index 4ea036ffc..815dab4bf 100644 --- a/packages/vision-preset/src/bundle/prototype.ts +++ b/packages/vision-preset/src/bundle/prototype.ts @@ -1,5 +1,5 @@ import { ComponentType, ReactElement } from 'react'; -import { ComponentMetadata, FieldConfig, InitialItem } from '@ali/lowcode-types'; +import { ComponentMetadata, FieldConfig, InitialItem, FilterItem } from '@ali/lowcode-types'; import { ComponentMeta, addBuiltinComponentAction, @@ -18,22 +18,35 @@ import { import { designer } from '../editor'; import { uniqueId } from '@ali/lowcode-utils'; -const GlobalPropsConfigure: Array<{ position: string; initials?: InitialItem[]; config: FieldConfig }> = []; +const GlobalPropsConfigure: Array<{ + position: string; + initials?: InitialItem[]; + filters?: FilterItem[]; + config: FieldConfig +}> = []; const Overrides: { [componentName: string]: { initials?: InitialItem[]; + filters?: FilterItem[]; override: any; }; } = {}; function addGlobalPropsConfigure(config: OldGlobalPropConfig) { const initials: InitialItem[] = []; + const filters: FilterItem[] = []; GlobalPropsConfigure.push({ position: config.position || 'bottom', initials, - config: upgradePropConfig(config, (item) => { - initials.push(item); - }), + filters, + config: upgradePropConfig(config, { + addInitial: (item) => { + initials.push(item); + }, + addFilter: (item) => { + filters.push(item); + }, + }) }); } function removeGlobalPropsConfigure(name: string) { @@ -46,20 +59,25 @@ function removeGlobalPropsConfigure(name: string) { } function overridePropsConfigure(componentName: string, config: { [name: string]: OldPropConfig } | OldPropConfig[]) { const initials: InitialItem[] = []; + const filters: FilterItem[] = []; const addInitial = (item: InitialItem) => { initials.push(item); }; + const addFilter = (item: FilterItem) => { + filters.push(item); + }; let override: any; if (Array.isArray(config)) { - override = upgradeConfigure(config, addInitial); + override = upgradeConfigure(config, { addInitial, addFilter }); } else { override = {}; Object.keys(config).forEach(key => { - override[key] = upgradePropConfig(config[key], addInitial); + override[key] = upgradePropConfig(config[key], { addInitial, addFilter }); }); } Overrides[componentName] = { initials, + filters, override, }; } diff --git a/packages/vision-preset/src/bundle/upgrade-metadata.ts b/packages/vision-preset/src/bundle/upgrade-metadata.ts index cf10a6cd5..cad503a57 100644 --- a/packages/vision-preset/src/bundle/upgrade-metadata.ts +++ b/packages/vision-preset/src/bundle/upgrade-metadata.ts @@ -1,6 +1,6 @@ import { ComponentType, ReactElement, isValidElement, ComponentClass } from 'react'; import { isPlainObject } from '@ali/lowcode-utils'; -import { isI18nData, SettingTarget, InitialItem, isJSSlot, isJSExpression } from '@ali/lowcode-types'; +import { isI18nData, SettingTarget, InitialItem, FilterItem, isJSSlot, isJSExpression } from '@ali/lowcode-types'; type Field = SettingTarget; @@ -178,7 +178,7 @@ type SetterGetter = (this: Field, value: any) => ComponentClass; type ReturnBooleanFunction = (this: Field, value: any) => boolean; -export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) { +export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollector) { const { type, name, @@ -261,22 +261,9 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) } else if (hidden != null || disabled != null) { extraProps.condition = (field: Field) => !(isHidden(field) || isDisabled(field)); } - if (ignore != null || disabled != null) { - // FIXME! addFilter - extraProps.virtual = (field: Field) => { - if (isDisabled(field)) { - return true; - } - - if (typeof ignore === 'function') { - return ignore.call(field, field.getValue()) === true; - } - return ignore === true; - }; - } if (type === 'group') { - newConfig.items = items ? upgradeConfigure(items, addInitial) : []; + newConfig.items = items ? upgradeConfigure(items, collector) : []; return newConfig; } @@ -314,7 +301,7 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) const setterInitial = getInitialFromSetter(setter); - addInitial({ + collector.addInitial({ name: slotName || name, initial: (field: Field, currentValue: any) => { // FIXME! read from prototype.defaultProps @@ -334,6 +321,28 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) }, }); + if (ignore != null || disabled != null) { + collector.addFilter({ + name: slotName || name, + filter: (field: Field, currentValue: any) => { + let disabledValue: boolean; + if (typeof disabled === 'function') { + disabledValue = disabled.call(field, currentValue) === true; + } + else { + disabledValue = disabled === true; + } + if (disabledValue) { + return false; + } + if (typeof ignore === 'function') { + return ignore.call(field, currentValue) !== true; + } + return ignore !== true; + } + }); + } + if (sync) { extraProps.autorun = (field: Field) => { const value = sync.call(field, field.getValue()); @@ -385,10 +394,18 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) let primarySetter: any; if (type === 'composite') { const initials: InitialItem[] = []; + const filters: FilterItem[] = []; const objItems = items - ? upgradeConfigure(items, (item) => { - initials.push(item); - }) + ? upgradeConfigure(items, + { + addInitial: (item) => { + initials.push(item); + }, + addFilter: (item) => { + filters.push(item); + } + } + ) : []; const initial = (target: SettingTarget, value?: any) => { // TODO: @@ -400,7 +417,7 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) }); return data; }; - addInitial({ + collector.addInitial({ name, initial, }); @@ -460,7 +477,13 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) return newConfig; } -type AddIntial = (initialItem: InitialItem) => void; +type AddInitial = (initialItem: InitialItem) => void; +type AddFilter = (filterItem: FilterItem) => void; + +type ConfigCollector = { + addInitial: AddInitial, + addFilter: AddFilter, +} function getInitialFromSetter(setter: any) { return setter && ( @@ -474,7 +497,7 @@ function defaultInitial(value: any, defaultValue: any) { } -export function upgradeConfigure(items: OldPropConfig[], addInitial: AddIntial) { +export function upgradeConfigure(items: OldPropConfig[], collector: ConfigCollector) { const configure: any[] = []; let ignoreSlotName: any = null; items.forEach((config) => { @@ -487,7 +510,7 @@ export function upgradeConfigure(items: OldPropConfig[], addInitial: AddIntial) } ignoreSlotName = null; } - configure.push(upgradePropConfig(config, addInitial)); + configure.push(upgradePropConfig(config, collector)); }); return configure; } @@ -724,10 +747,19 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) { experimental.callbacks = callbacks; const initials: InitialItem[] = []; - const props = upgradeConfigure(configure || [], (item) => { - initials.push(item); - }); + const filters: FilterItem[] = []; + const props = upgradeConfigure(configure || [], + { + addInitial: (item) => { + initials.push(item); + }, + addFilter: (item) => { + filters.push(item); + }, + } + ); experimental.initials = initials; + experimental.filters = filters; const supports: any = {}; if (canUseCondition != null) { diff --git a/packages/vision-preset/src/editor.ts b/packages/vision-preset/src/editor.ts index 805537782..5735a946b 100644 --- a/packages/vision-preset/src/editor.ts +++ b/packages/vision-preset/src/editor.ts @@ -1,7 +1,7 @@ import { isJSBlock, isJSExpression, isJSSlot } from '@ali/lowcode-types'; import { isPlainObject } from '@ali/lowcode-utils'; import { globalContext, Editor } from '@ali/lowcode-editor-core'; -import { Designer, LiveEditing, TransformStage, addBuiltinComponentAction } from '@ali/lowcode-designer'; +import { Designer, LiveEditing, TransformStage, addBuiltinComponentAction, Node } from '@ali/lowcode-designer'; import Outline, { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane'; import { toCss } from '@ali/vu-css-style'; @@ -44,6 +44,23 @@ designer.addPropsReducer((props, node) => { // 国际化渲染时处理 designer.addPropsReducer(i18nReducer, TransformStage.Render); +function filterReducer(props: any, node: Node): any { + const filters = node.componentMeta.getMetadata().experimental?.filters; + if (filters && filters.length) { + const newProps = { ...props }; + filters.forEach((item) => { + const v = item.filter(node as any, props[item.name]); + if (!v) { + delete newProps[item.name]; + } + }); + return newProps; + } + return props; +} +designer.addPropsReducer(filterReducer, TransformStage.Save); +designer.addPropsReducer(filterReducer, TransformStage.Render); + function upgradePropsReducer(props: any) { if (!isPlainObject(props)) { return props; @@ -180,9 +197,9 @@ skeleton.add({ LiveEditing.addLiveEditingSpecificRule(liveEditingRule); // 实例节点选择器，线框高亮 -addBuiltinComponentAction({ - name: 'instance-node-selector', - content: InstanceNodeSelector, - important: true, - condition: 'always', -}); +// addBuiltinComponentAction({ +// name: 'instance-node-selector', +// content: InstanceNodeSelector, +// important: true, +// condition: 'always' +// }); diff --git a/packages/vision-preset/src/viewport.ts b/packages/vision-preset/src/viewport.ts index 0b5ec7cb7..536010ae6 100644 --- a/packages/vision-preset/src/viewport.ts +++ b/packages/vision-preset/src/viewport.ts @@ -2,6 +2,7 @@ import { EventEmitter } from 'events'; const domReady = require('domready'); import Flags from './flags'; +import { designer } from './editor'; function enterFullscreen() { const elem = document.documentElement; @@ -185,8 +186,9 @@ export class Viewport { setDevice(device = 'pc') { if (this.getDevice() !== device) { this.device = device; - Flags.setSimulator(device); - this.applyMediaCSS(); + designer.currentDocument?.simulator?.set('device', device === 'mobile' ? 'mobile' : 'default'); + // Flags.setSimulator(device); + // this.applyMediaCSS(); this.emitter.emit('devicechange', device); this.changeViewport(); } @@ -229,7 +231,7 @@ export class Viewport { } setWithShell(shell: string) { - Flags.setWithShell(shell); + // Flags.setWithShell(shell); } onFullscreenChange(func: () => any) {