mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-12 17:08:14 +00:00
Merge branch 'preset-vision/0.9.0' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into preset-vision/0.9.0
This commit is contained in:
力皓
commit
812c80c4d7
@ -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.20"></a>
|
||||
## [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
|
||||
|
||||
<a name="0.8.19"></a>
|
||||
## [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
|
||||
|
||||
<a name="0.8.18"></a>
|
||||
## [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)
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ module.exports = ({ onGetWebpackConfig }) => {
|
||||
.plugin('MonacoWebpackPlugin')
|
||||
// 第一项为具体插件，第二项为插件参数
|
||||
.use(new MonacoWebpackPlugin({
|
||||
languages:["javascript","css","json"]
|
||||
languages:["typescript","css","json"]
|
||||
}), []);
|
||||
|
||||
config.plugins.delete('hot');
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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": "",
|
||||
|
||||
@ -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,
|
||||
});
|
||||
|
||||
@ -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.
|
||||
|
||||
<a name="0.9.11"></a>
|
||||
## [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))
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.9.10"></a>
|
||||
## [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))
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="0.9.9"></a>
|
||||
## [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)
|
||||
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
@ -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 <Fragment />;
|
||||
}
|
||||
|
||||
// const componentMeta = selecting[0].componentMeta;
|
||||
// const metaData = componentMeta.getMetadata();
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{selecting.map((node) => (
|
||||
<BoxResizingForNode key={node.id} node={node} host={this.props.host} />
|
||||
))}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@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 (
|
||||
<Fragment key={node.id}>
|
||||
{instances.map((instance: any) => {
|
||||
const observed = designer.createOffsetObserver({
|
||||
node,
|
||||
instance,
|
||||
});
|
||||
if (!observed) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<BoxResizingInstance key={observed.id} dragging={this.dragging} designer={designer} observed={observed} />
|
||||
);
|
||||
})}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@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 (
|
||||
<div>
|
||||
{triggerVisible.includes('w') && (
|
||||
<div
|
||||
ref={(ref) => {
|
||||
this.outlineLeft = ref;
|
||||
}}
|
||||
className={className}
|
||||
style={{
|
||||
height: offsetHeight,
|
||||
transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`,
|
||||
width: 20,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{triggerVisible.includes('e') && (
|
||||
<div
|
||||
className={className}
|
||||
ref={(ref) => {
|
||||
this.outlineRight = ref;
|
||||
}}
|
||||
style={{
|
||||
height: offsetHeight,
|
||||
transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
|
||||
width: 20,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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 (
|
||||
<div className="lc-borders-actions" style={style}>
|
||||
{actions}
|
||||
<NodeSelector node={node} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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<Document>();
|
||||
// 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();
|
||||
@ -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 }> {
|
||||
<BorderDetecting key="hovering" host={host} />
|
||||
<BorderSelecting key="selecting" host={host} />
|
||||
<InsertionView key="insertion" host={host} />
|
||||
<BorderResizing key="resizing" host={host} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -77,7 +77,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
|
||||
|
||||
readonly designer = this.document.designer;
|
||||
|
||||
@computed get device(): string | undefined {
|
||||
@computed get device(): string {
|
||||
return this.get('device') || 'default';
|
||||
}
|
||||
|
||||
|
||||
@ -98,6 +98,7 @@ export class LiveEditing {
|
||||
const onSaveContent = matched?.onSaveContent || saveHandlers.find(item => 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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
111
packages/designer/src/builtin-simulator/node-selector/index.tsx
Normal file
111
packages/designer/src/builtin-simulator/node-selector/index.tsx
Normal file
@ -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<IProps, IState> {
|
||||
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
|
||||
key={key}
|
||||
onClick={this.onSelect(node)}
|
||||
onMouseEnter={this.onMouseOver(node)}
|
||||
onMouseLeave={this.onMouseOut(node)}
|
||||
className="instance-node-selector-node"
|
||||
>
|
||||
<div className="instance-node-selector-node-content">
|
||||
<Title
|
||||
className="instance-node-selector-node-title"
|
||||
title={{
|
||||
label: node.title,
|
||||
icon: node.icon,
|
||||
}}
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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);
|
||||
|
||||
@ -47,6 +47,9 @@ export class Transducer {
|
||||
}
|
||||
if (typeof setter === 'string') {
|
||||
setter = getSetter(setter)?.component;
|
||||
if (!setter) {
|
||||
debugger;
|
||||
}
|
||||
}
|
||||
|
||||
this.setterTransducer = combineTransducer(
|
||||
|
||||
@ -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] };
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -19,5 +19,16 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.full-screen-container{
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 20px;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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],
|
||||
);
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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[]);
|
||||
|
||||
@ -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)
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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'
|
||||
// });
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user