mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-06-11 01:42:47 +00:00
Compare commits
3 Commits
main
...
v1.1.0-bet
| Author | SHA1 | Date | |
|---|---|---|---|
|
94e8a0e585 | ||
|
|
6130212e6a | ||
|
|
f0e60bb9f8 |
@ -1,6 +1,6 @@
|
||||
{
|
||||
"lerna": "4.0.0",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"packages": [
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"@alife/build-plugin-lowcode": "^1.0.7",
|
||||
"@alib/build-scripts": "^0.1.3",
|
||||
"@alifd/adaptor-generate": "^0.1.3",
|
||||
"build-plugin-component": "^0.2.0",
|
||||
"build-plugin-component": "^1.0.0",
|
||||
"build-plugin-fusion": "^0.1.0",
|
||||
"build-plugin-fusion-cool": "^0.1.0",
|
||||
"build-plugin-moment-locales": "^0.1.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-designer",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "Designer for Ali LowCode Engine",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -15,9 +15,9 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@alilc/lowcode-editor-core": "1.0.17",
|
||||
"@alilc/lowcode-types": "1.0.17",
|
||||
"@alilc/lowcode-utils": "1.0.17",
|
||||
"@alilc/lowcode-editor-core": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-types": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-utils": "1.1.0-beta.1",
|
||||
"classnames": "^2.2.6",
|
||||
"react": "^16",
|
||||
"react-dom": "^16.7.0",
|
||||
@ -27,10 +27,12 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@alib/build-scripts": "^0.1.29",
|
||||
"@alilc/lowcode-shell": "1.0.17",
|
||||
"@alilc/lowcode-shell": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-test-mate": "^1.0.1",
|
||||
"@testing-library/react": "^11.2.2",
|
||||
"@types/classnames": "^2.2.7",
|
||||
"@types/enzyme": "^3.10.12",
|
||||
"@types/enzyme-adapter-react-16": "^1.0.6",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/lodash": "^4.14.165",
|
||||
"@types/medium-editor": "^5.0.3",
|
||||
@ -42,9 +44,7 @@
|
||||
"build-plugin-component": "^1.0.0",
|
||||
"build-scripts-config": "^3.0.3",
|
||||
"enzyme": "^3.11.0",
|
||||
"@types/enzyme": "^3.10.12",
|
||||
"enzyme-adapter-react-16": "^1.15.5",
|
||||
"@types/enzyme-adapter-react-16": "^1.0.6",
|
||||
"jest": "^26.6.3",
|
||||
"lodash": "^4.17.20",
|
||||
"moment": "^2.29.1",
|
||||
|
||||
@ -172,7 +172,8 @@ export class BoxResizingInstance extends Component<{
|
||||
metadata.configure.advanced.callbacks.onResizeEnd(e, cbNode);
|
||||
}
|
||||
|
||||
const editor = globalContext.get(Editor);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const npm = node?.componentMeta?.npm;
|
||||
const selected =
|
||||
[npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
|
||||
|
||||
@ -131,7 +131,8 @@ function createAction(content: ReactNode | ComponentType<any> | ActionContentObj
|
||||
className="lc-borders-action"
|
||||
onClick={() => {
|
||||
action && action(node);
|
||||
const editor = globalContext.get('editor');
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const npm = node?.componentMeta?.npm;
|
||||
const selected =
|
||||
[npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
|
||||
|
||||
@ -22,6 +22,7 @@ export function createSimulator(
|
||||
const doc = iframe.contentDocument!;
|
||||
|
||||
win.LCSimulatorHost = host;
|
||||
win._ = window._;
|
||||
|
||||
const styles: any = {};
|
||||
const scripts: any = {};
|
||||
|
||||
@ -23,8 +23,8 @@ export class BuiltinSimulatorHostView extends Component<SimulatorHostProps> {
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
const { project, onMount } = this.props;
|
||||
this.host = (project.simulator as BuiltinSimulatorHost) || new BuiltinSimulatorHost(project);
|
||||
const { project, onMount, designer } = this.props;
|
||||
this.host = (project.simulator as BuiltinSimulatorHost) || new BuiltinSimulatorHost(project, designer);
|
||||
this.host.setProps(this.props);
|
||||
onMount?.(this.host);
|
||||
}
|
||||
@ -76,7 +76,8 @@ class Content extends Component<{ host: BuiltinSimulatorHost }> {
|
||||
private dispose?: () => void;
|
||||
|
||||
componentDidMount() {
|
||||
const editor = globalContext.get('editor');
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const onEnableEvents = (type: boolean) => {
|
||||
this.setState({
|
||||
disabledEvents: type,
|
||||
@ -97,7 +98,7 @@ class Content extends Component<{ host: BuiltinSimulatorHost }> {
|
||||
render() {
|
||||
const sim = this.props.host;
|
||||
const { disabledEvents } = this.state;
|
||||
const { viewport } = sim;
|
||||
const { viewport, designer } = sim;
|
||||
const frameStyle: any = {
|
||||
transform: `scale(${viewport.scale})`,
|
||||
height: viewport.contentHeight,
|
||||
@ -107,10 +108,12 @@ class Content extends Component<{ host: BuiltinSimulatorHost }> {
|
||||
frameStyle.pointerEvents = 'none';
|
||||
}
|
||||
|
||||
const name = designer.name;
|
||||
|
||||
return (
|
||||
<div className="lc-simulator-content">
|
||||
<iframe
|
||||
name="SimulatorRenderer"
|
||||
name={`${name}-SimulatorRenderer`}
|
||||
className="lc-simulator-content-frame"
|
||||
style={frameStyle}
|
||||
ref={(frame) => sim.mountContentFrame(frame)}
|
||||
|
||||
@ -64,7 +64,7 @@ import {
|
||||
DragNodeObject,
|
||||
} from '@alilc/lowcode-types';
|
||||
import { BuiltinSimulatorRenderer } from './renderer';
|
||||
import clipboard from '../designer/clipboard';
|
||||
import { clipboard } from '../designer/clipboard';
|
||||
import { LiveEditing } from './live-editing/live-editing';
|
||||
import { Project } from '../project';
|
||||
import { Scroller } from '../designer/scroller';
|
||||
@ -192,10 +192,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
|
||||
this.renderer?.enableAutoRepaintNode();
|
||||
}
|
||||
|
||||
constructor(project: Project) {
|
||||
constructor(project: Project, designer: Designer) {
|
||||
makeObservable(this);
|
||||
this.project = project;
|
||||
this.designer = project?.designer;
|
||||
this.designer = designer;
|
||||
this.scroller = this.designer.createScroller(this.viewport);
|
||||
this.autoRender = !engineConfig.get('disableAutoRender', false);
|
||||
this.componentsConsumer = new ResourceConsumer<Asset | undefined>(() => this.componentsAsset);
|
||||
@ -418,7 +418,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
|
||||
this.renderer?.rerender?.();
|
||||
}
|
||||
|
||||
async mountContentFrame(iframe: HTMLIFrameElement | null) {
|
||||
async mountContentFrame(iframe: HTMLIFrameElement | null): Promise<void> {
|
||||
if (!iframe || this._iframe === iframe) {
|
||||
return;
|
||||
}
|
||||
@ -478,6 +478,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
|
||||
this.setupEvents();
|
||||
|
||||
// bind hotkey & clipboard
|
||||
const hotkey = this.designer.editor.get('innerHotkey');
|
||||
hotkey.mount(this._contentWindow);
|
||||
focusTracker.mount(this._contentWindow);
|
||||
clipboard.injectCopyPaster(this._contentDocument);
|
||||
|
||||
@ -52,7 +52,8 @@ export class LiveEditing {
|
||||
const targetElement = event.target as HTMLElement;
|
||||
const { liveTextEditing } = node.componentMeta;
|
||||
|
||||
const editor = globalContext.get(Editor);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const npm = node?.componentMeta?.npm;
|
||||
const selected =
|
||||
[npm?.package, npm?.componentName].filter((item) => !!item).join('-') || node?.componentMeta?.componentName || '';
|
||||
|
||||
@ -62,7 +62,8 @@ export default class InstanceNodeSelector extends React.Component<IProps, IState
|
||||
|
||||
if (canClick && typeof node.select === 'function') {
|
||||
node.select();
|
||||
const editor = globalContext.get(Editor);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const npm = node?.componentMeta?.npm;
|
||||
const selected =
|
||||
[npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||
|
||||
|
||||
@ -1,354 +0,0 @@
|
||||
import { hotkey, Editor, globalContext } from '@alilc/lowcode-editor-core';
|
||||
import { isFormEvent } from '@alilc/lowcode-utils';
|
||||
import { focusing } from './focusing';
|
||||
import { insertChildren, TransformStage } from '../document';
|
||||
import clipboard from './clipboard';
|
||||
|
||||
export function isInLiveEditing() {
|
||||
if (globalContext.has(Editor)) {
|
||||
return Boolean(
|
||||
globalContext.get(Editor).get('designer')?.project?.simulator?.liveEditing?.editing,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
function getNextForSelect(next: any, head?: any, parent?: any): any {
|
||||
if (next) {
|
||||
if (!head) {
|
||||
return next;
|
||||
}
|
||||
|
||||
let ret;
|
||||
if (next.isContainer()) {
|
||||
const children = next.getChildren() || [];
|
||||
if (children && !children.isEmpty()) {
|
||||
ret = getNextForSelect(children.get(0));
|
||||
if (ret) {
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ret = getNextForSelect(next.nextSibling);
|
||||
if (ret) {
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
|
||||
if (parent) {
|
||||
return getNextForSelect(parent.nextSibling, false, parent.getParent());
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
function getPrevForSelect(prev: any, head?: any, parent?: any): any {
|
||||
if (prev) {
|
||||
let ret;
|
||||
if (!head && prev.isContainer()) {
|
||||
const children = prev.getChildren() || [];
|
||||
const lastChild = children && !children.isEmpty() ? children.get(children.size - 1) : null;
|
||||
|
||||
ret = getPrevForSelect(lastChild);
|
||||
if (ret) {
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
|
||||
if (!head) {
|
||||
return prev;
|
||||
}
|
||||
|
||||
ret = getPrevForSelect(prev.prevSibling);
|
||||
if (ret) {
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
|
||||
if (parent) {
|
||||
return parent;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// hotkey binding
|
||||
hotkey.bind(['backspace', 'del'], (e: KeyboardEvent) => {
|
||||
if (isInLiveEditing()) return;
|
||||
// TODO: use focus-tracker
|
||||
const doc = focusing.focusDesigner?.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
|
||||
const sel = doc.selection;
|
||||
const topItems = sel.getTopNodes();
|
||||
// TODO: check can remove
|
||||
topItems.forEach((node) => {
|
||||
if (node.canPerformAction('remove')) {
|
||||
doc.removeNode(node);
|
||||
}
|
||||
});
|
||||
sel.clear();
|
||||
});
|
||||
|
||||
hotkey.bind('escape', (e: KeyboardEvent) => {
|
||||
// const currentFocus = focusing.current;
|
||||
if (isInLiveEditing()) return;
|
||||
const sel = focusing.focusDesigner?.currentDocument?.selection;
|
||||
if (isFormEvent(e) || !sel) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
|
||||
sel.clear();
|
||||
// currentFocus.esc();
|
||||
});
|
||||
|
||||
// command + c copy command + x cut
|
||||
hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => {
|
||||
if (isInLiveEditing()) return;
|
||||
const doc = focusing.focusDesigner?.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
|
||||
let selected = doc.selection.getTopNodes(true);
|
||||
selected = selected.filter((node) => {
|
||||
return node.canPerformAction('copy');
|
||||
});
|
||||
if (!selected || selected.length < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const componentsMap = {};
|
||||
const componentsTree = selected.map((item) => item.export(TransformStage.Clone));
|
||||
|
||||
// FIXME: clear node.id
|
||||
|
||||
const data = { type: 'nodeSchema', componentsMap, componentsTree };
|
||||
|
||||
clipboard.setData(data);
|
||||
|
||||
const cutMode = action && action.indexOf('x') > 0;
|
||||
if (cutMode) {
|
||||
selected.forEach((node) => {
|
||||
const parentNode = node.getParent();
|
||||
parentNode?.select();
|
||||
node.remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// command + v paste
|
||||
hotkey.bind(['command+v', 'ctrl+v'], (e) => {
|
||||
if (isInLiveEditing()) return;
|
||||
const designer = focusing.focusDesigner;
|
||||
const doc = designer?.currentDocument;
|
||||
if (isFormEvent(e) || !designer || !doc) {
|
||||
return;
|
||||
}
|
||||
/* istanbul ignore next */
|
||||
clipboard.waitPasteData(e, ({ componentsTree }) => {
|
||||
if (componentsTree) {
|
||||
const { target, index } = designer.getSuitableInsertion(componentsTree) || {};
|
||||
if (!target) {
|
||||
return;
|
||||
}
|
||||
let canAddComponentsTree = componentsTree.filter((i) => {
|
||||
return doc.checkNestingUp(target, i);
|
||||
});
|
||||
if (canAddComponentsTree.length === 0) return;
|
||||
const nodes = insertChildren(target, canAddComponentsTree, index);
|
||||
if (nodes) {
|
||||
doc.selection.selectAll(nodes.map((o) => o.id));
|
||||
setTimeout(() => designer.activeTracker.track(nodes[0]), 10);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// command + z undo
|
||||
hotkey.bind(['command+z', 'ctrl+z'], (e) => {
|
||||
if (isInLiveEditing()) return;
|
||||
const his = focusing.focusDesigner?.currentHistory;
|
||||
if (isFormEvent(e) || !his) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
const selection = focusing.focusDesigner?.currentSelection;
|
||||
const curSelected = Array.from(selection?.selected);
|
||||
his.back();
|
||||
selection?.selectAll(curSelected);
|
||||
});
|
||||
|
||||
// command + shift + z redo
|
||||
hotkey.bind(['command+y', 'ctrl+y', 'command+shift+z'], (e) => {
|
||||
if (isInLiveEditing()) return;
|
||||
const his = focusing.focusDesigner?.currentHistory;
|
||||
if (isFormEvent(e) || !his) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const selection = focusing.focusDesigner?.currentSelection;
|
||||
const curSelected = Array.from(selection?.selected);
|
||||
his.forward();
|
||||
selection?.selectAll(curSelected);
|
||||
});
|
||||
|
||||
// sibling selection
|
||||
hotkey.bind(['left', 'right'], (e, action) => {
|
||||
if (isInLiveEditing()) return;
|
||||
const designer = focusing.focusDesigner;
|
||||
const doc = designer?.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const selected = doc.selection.getTopNodes(true);
|
||||
if (!selected || selected.length < 1) {
|
||||
return;
|
||||
}
|
||||
const firstNode = selected[0];
|
||||
const silbing = action === 'left' ? firstNode?.prevSibling : firstNode?.nextSibling;
|
||||
silbing?.select();
|
||||
});
|
||||
|
||||
hotkey.bind(['up', 'down'], (e, action) => {
|
||||
if (isInLiveEditing()) return;
|
||||
const designer = focusing.focusDesigner;
|
||||
const doc = designer?.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const selected = doc.selection.getTopNodes(true);
|
||||
if (!selected || selected.length < 1) {
|
||||
return;
|
||||
}
|
||||
const firstNode = selected[0];
|
||||
|
||||
if (action === 'down') {
|
||||
const next = getNextForSelect(firstNode, true, firstNode.getParent());
|
||||
next?.select();
|
||||
} else if (action === 'up') {
|
||||
const prev = getPrevForSelect(firstNode, true, firstNode.getParent());
|
||||
prev?.select();
|
||||
}
|
||||
});
|
||||
|
||||
hotkey.bind(['option+left', 'option+right'], (e, action) => {
|
||||
if (isInLiveEditing()) return;
|
||||
const designer = focusing.focusDesigner;
|
||||
const doc = designer?.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const selected = doc.selection.getTopNodes(true);
|
||||
if (!selected || selected.length < 1) {
|
||||
return;
|
||||
}
|
||||
// TODO: 此处需要增加判断当前节点是否可被操作移动，原ve里是用 node.canOperating()来判断
|
||||
// TODO: 移动逻辑也需要重新梳理，对于移动目标位置的选择，是否可以移入，需要增加判断
|
||||
|
||||
const firstNode = selected[0];
|
||||
const parent = firstNode.getParent();
|
||||
if (!parent) return;
|
||||
|
||||
const isPrev = action && /(left)$/.test(action);
|
||||
|
||||
const silbing = isPrev ? firstNode.prevSibling : firstNode.nextSibling;
|
||||
if (silbing) {
|
||||
if (isPrev) {
|
||||
parent.insertBefore(firstNode, silbing);
|
||||
} else {
|
||||
parent.insertAfter(firstNode, silbing);
|
||||
}
|
||||
firstNode?.select();
|
||||
}
|
||||
});
|
||||
|
||||
hotkey.bind(['option+up'], (e) => {
|
||||
if (isInLiveEditing()) return;
|
||||
const designer = focusing.focusDesigner;
|
||||
const doc = designer?.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const selected = doc.selection.getTopNodes(true);
|
||||
if (!selected || selected.length < 1) {
|
||||
return;
|
||||
}
|
||||
// TODO: 此处需要增加判断当前节点是否可被操作移动，原ve里是用 node.canOperating()来判断
|
||||
// TODO: 移动逻辑也需要重新梳理，对于移动目标位置的选择，是否可以移入，需要增加判断
|
||||
|
||||
const firstNode = selected[0];
|
||||
const parent = firstNode.getParent();
|
||||
if (!parent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const silbing = firstNode.prevSibling;
|
||||
if (silbing) {
|
||||
if (silbing.isContainer()) {
|
||||
const place = silbing.getSuitablePlace(firstNode, null);
|
||||
place.container.insertAfter(firstNode, place.ref);
|
||||
} else {
|
||||
parent.insertBefore(firstNode, silbing);
|
||||
}
|
||||
firstNode?.select();
|
||||
} else {
|
||||
const place = parent.getSuitablePlace(firstNode, null); // upwards
|
||||
if (place) {
|
||||
place.container.insertBefore(firstNode, place.ref);
|
||||
firstNode?.select();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
hotkey.bind(['option+down'], (e) => {
|
||||
if (isInLiveEditing()) return;
|
||||
const designer = focusing.focusDesigner;
|
||||
const doc = designer?.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const selected = doc.selection.getTopNodes(true);
|
||||
if (!selected || selected.length < 1) {
|
||||
return;
|
||||
}
|
||||
// TODO: 此处需要增加判断当前节点是否可被操作移动，原ve里是用 node.canOperating()来判断
|
||||
// TODO: 移动逻辑也需要重新梳理，对于移动目标位置的选择，是否可以移入，需要增加判断
|
||||
|
||||
const firstNode = selected[0];
|
||||
const parent = firstNode.getParent();
|
||||
if (!parent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const silbing = firstNode.nextSibling;
|
||||
if (silbing) {
|
||||
if (silbing.isContainer()) {
|
||||
// const place = silbing.getSuitablePlace(firstNode, null);
|
||||
silbing.insertBefore(firstNode, undefined);
|
||||
// place.container.insertBefore(firstNode, place.ref);
|
||||
} else {
|
||||
parent.insertAfter(firstNode, silbing);
|
||||
}
|
||||
firstNode?.select();
|
||||
} else {
|
||||
const place = parent.getSuitablePlace(firstNode, null); // upwards
|
||||
if (place) {
|
||||
place.container.insertAfter(firstNode, place.ref);
|
||||
firstNode?.select();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -109,4 +109,4 @@ class Clipboard {
|
||||
}
|
||||
}
|
||||
|
||||
export default new Clipboard();
|
||||
export const clipboard = new Clipboard();
|
||||
|
||||
@ -4,16 +4,18 @@ import BuiltinDragGhostComponent from './drag-ghost';
|
||||
import { Designer, DesignerProps } from './designer';
|
||||
import { ProjectView } from '../project';
|
||||
import './designer.less';
|
||||
import clipboard from './clipboard';
|
||||
import { clipboard } from './clipboard';
|
||||
|
||||
export class DesignerView extends Component<DesignerProps & {
|
||||
designer?: Designer;
|
||||
}> {
|
||||
readonly designer: Designer;
|
||||
readonly name: string;
|
||||
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
const { designer, ...designerProps } = props;
|
||||
this.name = designer.name;
|
||||
if (designer) {
|
||||
this.designer = designer;
|
||||
designer.setProps(designerProps);
|
||||
|
||||
@ -74,14 +74,17 @@ export class Designer {
|
||||
return this.currentDocument?.selection;
|
||||
}
|
||||
|
||||
name: string;
|
||||
|
||||
constructor(props: DesignerProps) {
|
||||
makeObservable(this);
|
||||
const { editor, shellModelFactory } = props;
|
||||
const { editor, name, shellModelFactory } = props;
|
||||
this.editor = editor;
|
||||
this.name = name;
|
||||
this.shellModelFactory = shellModelFactory;
|
||||
this.setProps(props);
|
||||
|
||||
this.project = new Project(this, props.defaultSchema);
|
||||
this.project = new Project(this, props.defaultSchema, name);
|
||||
|
||||
this.dragon.onDragstart((e) => {
|
||||
this.detecting.enable = false;
|
||||
@ -364,12 +367,12 @@ export class Designer {
|
||||
const { components, packages } = incrementalAssets;
|
||||
components && this.buildComponentMetasMap(components);
|
||||
if (packages) {
|
||||
await this.project.simulator!.setupComponents(packages);
|
||||
await this.project.simulator?.setupComponents(packages);
|
||||
}
|
||||
|
||||
if (components) {
|
||||
// 合并assets
|
||||
let assets = this.editor.get('assets');
|
||||
// 合并 assets
|
||||
let assets = this.editor.get('assets') || {};
|
||||
let newAssets = megreAssets(assets, incrementalAssets);
|
||||
// 对于 assets 存在需要二次网络下载的过程，必须 await 等待结束之后，再进行事件触发
|
||||
await this.editor.set('assets', newAssets);
|
||||
@ -403,6 +406,21 @@ export class Designer {
|
||||
return this._simulatorProps || {};
|
||||
}
|
||||
|
||||
/**
|
||||
* 提供给模拟器的参数
|
||||
*/
|
||||
@computed get projectSimulatorProps(): any {
|
||||
return {
|
||||
...this.simulatorProps,
|
||||
project: this.project,
|
||||
designer: this,
|
||||
onMount: (simulator: any) => {
|
||||
this.project.mountSimulator(simulator);
|
||||
this.editor.set('simulator', simulator);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@obx.ref private _suspensed = false;
|
||||
|
||||
get suspensed(): boolean {
|
||||
|
||||
@ -145,6 +145,8 @@ function isDragEvent(e: any): e is DragEvent {
|
||||
export class Dragon {
|
||||
private sensors: ISensor[] = [];
|
||||
|
||||
key = Math.random();
|
||||
|
||||
/**
|
||||
* current active sensor, 可用于感应区高亮
|
||||
*/
|
||||
@ -162,10 +164,13 @@ export class Dragon {
|
||||
return this._dragging;
|
||||
}
|
||||
|
||||
name: string;
|
||||
|
||||
private emitter = new EventEmitter();
|
||||
|
||||
constructor(readonly designer: Designer) {
|
||||
makeObservable(this);
|
||||
this.name = designer.name;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import './builtin-hotkey';
|
||||
|
||||
export * from './designer';
|
||||
export * from './designer-view';
|
||||
export * from './dragon';
|
||||
@ -9,3 +7,6 @@ export * from './offset-observer';
|
||||
export * from './scroller';
|
||||
export * from './setting';
|
||||
export * from './active-tracker';
|
||||
export * from './focusing';
|
||||
export * from '../document';
|
||||
export * from './clipboard';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { obx, computed, makeObservable, runInAction } from '@alilc/lowcode-editor-core';
|
||||
import { obx, computed, makeObservable, runInAction, Setters } from '@alilc/lowcode-editor-core';
|
||||
import { GlobalEvent, IEditor, ISetValueOptions } from '@alilc/lowcode-types';
|
||||
import { uniqueId, isJSExpression } from '@alilc/lowcode-utils';
|
||||
import { SettingEntry } from './setting-entry';
|
||||
@ -18,6 +18,8 @@ export class SettingPropEntry implements SettingEntry {
|
||||
|
||||
readonly isSingle: boolean;
|
||||
|
||||
readonly setters: Setters;
|
||||
|
||||
readonly nodes: Node[];
|
||||
|
||||
readonly componentMeta: ComponentMeta | null;
|
||||
@ -70,6 +72,7 @@ export class SettingPropEntry implements SettingEntry {
|
||||
// copy parent static properties
|
||||
this.editor = parent.editor;
|
||||
this.nodes = parent.nodes;
|
||||
this.setters = parent.setters;
|
||||
this.componentMeta = parent.componentMeta;
|
||||
this.isSameComponent = parent.isSameComponent;
|
||||
this.isMultiple = parent.isMultiple;
|
||||
|
||||
@ -72,6 +72,8 @@ export class SettingTopEntry implements SettingEntry {
|
||||
|
||||
readonly designer: Designer;
|
||||
|
||||
readonly setters: any;
|
||||
|
||||
disposeFunctions: any[] = [];
|
||||
|
||||
constructor(readonly editor: IEditor, readonly nodes: Node[]) {
|
||||
@ -81,6 +83,7 @@ export class SettingTopEntry implements SettingEntry {
|
||||
this.id = generateSessionId(nodes);
|
||||
this.first = nodes[0];
|
||||
this.designer = this.first.document.designer;
|
||||
this.setters = editor.get('setters');
|
||||
|
||||
// setups
|
||||
this.setupComponentMeta();
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
import { isValidElement } from 'react';
|
||||
import { FieldConfig, SetterConfig } from '@alilc/lowcode-types';
|
||||
import { isSetterConfig, isDynamicSetter } from '@alilc/lowcode-utils';
|
||||
import { getSetter } from '@alilc/lowcode-editor-core';
|
||||
import { SettingField } from './setting-field';
|
||||
|
||||
function getHotterFromSetter(setter) {
|
||||
@ -64,7 +63,7 @@ export class Transducer {
|
||||
isDynamic = dynamicFlag !== false;
|
||||
}
|
||||
if (typeof setter === 'string') {
|
||||
const { component, isDynamic: dynamicFlag } = getSetter(setter) || {};
|
||||
const { component, isDynamic: dynamicFlag } = context.setters.getSetter(setter) || {};
|
||||
setter = component;
|
||||
// 如果在物料配置中声明了，在 registerSetter 没有声明，取物料配置中的声明
|
||||
isDynamic = dynamicFlag === undefined ? isDynamic : dynamicFlag !== false;
|
||||
|
||||
@ -118,7 +118,8 @@ export class History<T = NodeSchema> {
|
||||
}
|
||||
const cursor = this.session.cursor - 1;
|
||||
this.go(cursor);
|
||||
const editor = globalContext.get(Editor);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
if (!editor) {
|
||||
return;
|
||||
}
|
||||
@ -131,7 +132,8 @@ export class History<T = NodeSchema> {
|
||||
}
|
||||
const cursor = this.session.cursor + 1;
|
||||
this.go(cursor);
|
||||
const editor = globalContext.get(Editor);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
if (!editor) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -161,7 +161,9 @@ export class NodeChildren {
|
||||
const { document } = node;
|
||||
/* istanbul ignore next */
|
||||
if (globalContext.has('editor')) {
|
||||
globalContext.get('editor').emit('node.remove', { node, index: i });
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
editor.emit('node.remove', { node, index: i });
|
||||
}
|
||||
document.unlinkNode(node);
|
||||
document.selection.remove(node.id);
|
||||
@ -196,12 +198,14 @@ export class NodeChildren {
|
||||
const i = children.indexOf(node);
|
||||
|
||||
if (node.parent) {
|
||||
/* istanbul ignore next */
|
||||
globalContext.has('editor') &&
|
||||
globalContext.get('editor').emit('node.remove.topLevel', {
|
||||
if (globalContext.has('editor')) {
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
editor.emit('node.remove.topLevel', {
|
||||
node,
|
||||
index: node.index,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (i < 0) {
|
||||
@ -231,7 +235,9 @@ export class NodeChildren {
|
||||
this.emitter.emit('insert', node);
|
||||
/* istanbul ignore next */
|
||||
if (globalContext.has('editor')) {
|
||||
globalContext.get('editor').emit('node.add', { node });
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
editor.emit('node.add', { node });
|
||||
}
|
||||
if (useMutator) {
|
||||
this.reportModified(node, this.owner, { type: 'insert' });
|
||||
|
||||
@ -1018,7 +1018,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
|
||||
}
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
* TODO: replace non standard metas with standard ones.
|
||||
*/
|
||||
getSuitablePlace(node: Node, ref: any): any {
|
||||
const focusNode = this.document?.focusNode;
|
||||
|
||||
@ -42,7 +42,6 @@ export default class PluginContext implements ILowCodePluginContext, ILowCodePlu
|
||||
contextApiAssembler: ILowCodePluginContextApiAssembler,
|
||||
) {
|
||||
contextApiAssembler.assembleApis(this);
|
||||
this.plugins = plugins;
|
||||
const { pluginName = 'anonymous' } = options;
|
||||
this.logger = getLogger({ level: 'warn', bizName: `designer:plugin:${pluginName}` });
|
||||
|
||||
|
||||
@ -27,19 +27,19 @@ const logger = getLogger({ level: 'warn', bizName: 'designer:pluginManager' });
|
||||
export class LowCodePluginManager implements ILowCodePluginManager {
|
||||
private plugins: ILowCodePlugin[] = [];
|
||||
|
||||
private pluginsMap: Map<string, ILowCodePlugin> = new Map();
|
||||
pluginsMap: Map<string, ILowCodePlugin> = new Map();
|
||||
|
||||
private pluginPreference?: PluginPreference = new Map();
|
||||
|
||||
contextApiAssembler: ILowCodePluginContextApiAssembler;
|
||||
|
||||
constructor(contextApiAssembler: ILowCodePluginContextApiAssembler) {
|
||||
constructor(contextApiAssembler: ILowCodePluginContextApiAssembler, readonly name = 'unknown') {
|
||||
this.contextApiAssembler = contextApiAssembler;
|
||||
}
|
||||
|
||||
private _getLowCodePluginContext(options: IPluginContextOptions) {
|
||||
_getLowCodePluginContext = (options: IPluginContextOptions) => {
|
||||
return new LowCodePluginContext(this, options, this.contextApiAssembler);
|
||||
}
|
||||
};
|
||||
|
||||
isEngineVersionMatched(versionExp: string): boolean {
|
||||
const engineVersion = engineConfig.get('ENGINE_VERSION');
|
||||
@ -107,6 +107,7 @@ export class LowCodePluginManager implements ILowCodePluginManager {
|
||||
const plugin = new LowCodePlugin(pluginName, this, config, meta);
|
||||
// support initialization of those plugins which registered after normal initialization by plugin-manager
|
||||
if (registerOptions?.autoInit) {
|
||||
// debugger
|
||||
await plugin.init();
|
||||
}
|
||||
this.plugins.push(plugin);
|
||||
|
||||
@ -10,6 +10,7 @@ import {
|
||||
CompositeObject,
|
||||
ComponentAction,
|
||||
MetadataTransducer,
|
||||
IPublicApiPlugins,
|
||||
} from '@alilc/lowcode-types';
|
||||
import { EngineConfig } from '@alilc/lowcode-editor-core';
|
||||
import { Setters } from '../types';
|
||||
@ -126,6 +127,7 @@ export interface ILowCodePluginContextPrivate {
|
||||
set event(event: IPublicApiEvent);
|
||||
set config(config: EngineConfig);
|
||||
set common(common: IPublicApiCommon);
|
||||
set plugins(plugins: IPublicApiPlugins);
|
||||
}
|
||||
export interface ILowCodePluginContextApiAssembler {
|
||||
assembleApis: (context: ILowCodePluginContextPrivate) => void;
|
||||
|
||||
@ -26,8 +26,7 @@ export class ProjectView extends Component<{ designer: Designer }> {
|
||||
}
|
||||
render() {
|
||||
const { designer } = this.props;
|
||||
const { project } = designer;
|
||||
const { simulatorProps } = project;
|
||||
const { project, projectSimulatorProps: simulatorProps } = designer;
|
||||
const Simulator = designer.simulatorComponent || BuiltinSimulatorHostView;
|
||||
const Loading = engineConfig.get('loadingComponent', BuiltinLoading);
|
||||
|
||||
|
||||
@ -13,6 +13,10 @@
|
||||
padding-top: 50%;
|
||||
}
|
||||
|
||||
.lc-simulator {
|
||||
background: rgb(237, 239, 243);
|
||||
}
|
||||
|
||||
.lc-simulator-shell {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { EventEmitter } from 'events';
|
||||
import { obx, computed, makeObservable, action } from '@alilc/lowcode-editor-core';
|
||||
import { obx, computed, makeObservable, action, engineConfig } from '@alilc/lowcode-editor-core';
|
||||
import { Designer } from '../designer';
|
||||
import { DocumentModel, isDocumentModel } from '../document';
|
||||
import {
|
||||
@ -32,9 +32,11 @@ export class Project {
|
||||
return this._simulator || null;
|
||||
}
|
||||
|
||||
key = Math.random();
|
||||
|
||||
// TODO: 考虑项目级别 History
|
||||
|
||||
constructor(readonly designer: Designer, schema?: ProjectSchema) {
|
||||
constructor(readonly designer: Designer, schema?: ProjectSchema, public name = 'unknown') {
|
||||
makeObservable(this);
|
||||
this.load(schema);
|
||||
}
|
||||
@ -301,25 +303,9 @@ export class Project {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 提供给模拟器的参数
|
||||
*/
|
||||
@computed get simulatorProps(): object {
|
||||
let { simulatorProps } = this.designer;
|
||||
if (typeof simulatorProps === 'function') {
|
||||
simulatorProps = simulatorProps(this);
|
||||
}
|
||||
return {
|
||||
...simulatorProps,
|
||||
project: this,
|
||||
onMount: this.mountSimulator.bind(this),
|
||||
};
|
||||
}
|
||||
|
||||
private mountSimulator(simulator: ISimulatorHost) {
|
||||
mountSimulator(simulator: ISimulatorHost) {
|
||||
// TODO: 多设备 simulator 支持
|
||||
this._simulator = simulator;
|
||||
this.designer.editor.set('simulator', simulator);
|
||||
this.emitter.emit('lowcode_engine_simulator_ready', simulator);
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-editor-core",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "Core Api for Ali lowCode engine",
|
||||
"license": "MIT",
|
||||
"main": "lib/index.js",
|
||||
@ -14,8 +14,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@alifd/next": "^1.19.16",
|
||||
"@alilc/lowcode-types": "1.0.17",
|
||||
"@alilc/lowcode-utils": "1.0.17",
|
||||
"@alilc/lowcode-types": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-utils": "1.1.0-beta.1",
|
||||
"classnames": "^2.2.6",
|
||||
"debug": "^4.1.1",
|
||||
"intl-messageformat": "^9.3.1",
|
||||
|
||||
@ -44,32 +44,72 @@ function getInitialFromSetter(setter: any) {
|
||||
) || null; // eslint-disable-line
|
||||
}
|
||||
|
||||
export function getSetter(type: string): RegisteredSetter | null {
|
||||
return settersMap.get(type) || null;
|
||||
}
|
||||
export function getSettersMap() {
|
||||
return settersMap;
|
||||
}
|
||||
export class Setters {
|
||||
constructor(public name: string = 'unknown') {}
|
||||
|
||||
export function createSetterContent(setter: any, props: Record<string, any>): ReactNode {
|
||||
if (typeof setter === 'string') {
|
||||
setter = getSetter(setter);
|
||||
if (!setter) {
|
||||
return null;
|
||||
settersMap = new Map<string, RegisteredSetter & {
|
||||
type: string;
|
||||
}>();
|
||||
|
||||
getSetter = (type: string): RegisteredSetter | null => {
|
||||
return this.settersMap.get(type) || null;
|
||||
};
|
||||
|
||||
registerSetter = (
|
||||
typeOrMaps: string | { [key: string]: CustomView | RegisteredSetter },
|
||||
setter?: CustomView | RegisteredSetter,
|
||||
) => {
|
||||
if (typeof typeOrMaps === 'object') {
|
||||
Object.keys(typeOrMaps).forEach(type => {
|
||||
this.registerSetter(type, typeOrMaps[type]);
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (setter.defaultProps) {
|
||||
props = {
|
||||
...setter.defaultProps,
|
||||
...props,
|
||||
if (!setter) {
|
||||
return;
|
||||
}
|
||||
if (isCustomView(setter)) {
|
||||
setter = {
|
||||
component: setter,
|
||||
// todo: intl
|
||||
title: (setter as any).displayName || (setter as any).name || 'CustomSetter',
|
||||
};
|
||||
}
|
||||
setter = setter.component;
|
||||
}
|
||||
if (!setter.initialValue) {
|
||||
const initial = getInitialFromSetter(setter.component);
|
||||
if (initial) {
|
||||
setter.initialValue = (field: any) => {
|
||||
return initial.call(field, field.getValue());
|
||||
};
|
||||
}
|
||||
}
|
||||
this.settersMap.set(typeOrMaps, { type: typeOrMaps, ...setter });
|
||||
};
|
||||
|
||||
// Fusion的表单组件都是通过 'value' in props 来判断是否使用 defaultValue
|
||||
if ('value' in props && typeof props.value === 'undefined') {
|
||||
delete props.value;
|
||||
}
|
||||
getSettersMap = () => {
|
||||
return this.settersMap;
|
||||
};
|
||||
|
||||
return createContent(setter, props);
|
||||
}
|
||||
createSetterContent = (setter: any, props: Record<string, any>): ReactNode => {
|
||||
if (typeof setter === 'string') {
|
||||
setter = this.getSetter(setter);
|
||||
if (!setter) {
|
||||
return null;
|
||||
}
|
||||
if (setter.defaultProps) {
|
||||
props = {
|
||||
...setter.defaultProps,
|
||||
...props,
|
||||
};
|
||||
}
|
||||
setter = setter.component;
|
||||
}
|
||||
|
||||
// Fusion的表单组件都是通过 'value' in props 来判断是否使用 defaultValue
|
||||
if ('value' in props && typeof props.value === 'undefined') {
|
||||
delete props.value;
|
||||
}
|
||||
|
||||
return createContent(setter, props);
|
||||
};
|
||||
}
|
||||
@ -51,6 +51,10 @@ export declare interface Editor extends StrictEventEmitter<EventEmitter, GlobalE
|
||||
|
||||
// eslint-disable-next-line no-redeclare
|
||||
export class Editor extends (EventEmitter as any) implements IEditor {
|
||||
constructor(public name: string = 'unknown', public workspaceMode: boolean = false) {
|
||||
// eslint-disable-next-line constructor-super
|
||||
super();
|
||||
}
|
||||
/**
|
||||
* Ioc Container
|
||||
*/
|
||||
@ -114,11 +118,47 @@ export class Editor extends (EventEmitter as any) implements IEditor {
|
||||
if (remoteComponentDescriptions && remoteComponentDescriptions.length) {
|
||||
await Promise.all(
|
||||
remoteComponentDescriptions.map(async (component: any) => {
|
||||
const { exportName, url } = component;
|
||||
const { exportName, url, npm } = component;
|
||||
await (new AssetLoader()).load(url);
|
||||
function setAssetsComponent(component: any, extraNpmInfo: any = {}) {
|
||||
const components = component.components;
|
||||
if (Array.isArray(components)) {
|
||||
components.forEach(d => {
|
||||
assets.components = assets.components.concat({
|
||||
npm: {
|
||||
...npm,
|
||||
...extraNpmInfo,
|
||||
},
|
||||
...d,
|
||||
} || []);
|
||||
});
|
||||
return;
|
||||
}
|
||||
assets.components = assets.components.concat({
|
||||
npm: {
|
||||
...npm,
|
||||
...extraNpmInfo,
|
||||
},
|
||||
...component.components,
|
||||
} || []);
|
||||
// assets.componentList = assets.componentList.concat(component.componentList || []);
|
||||
}
|
||||
function setArrayAssets(value: any[], preExportName: string = '', preSubName: string = '') {
|
||||
value.forEach((d: any, i: number) => {
|
||||
const exportName = [preExportName, i.toString()].filter(d => !!d).join('.');
|
||||
const subName = [preSubName, i.toString()].filter(d => !!d).join('.');
|
||||
Array.isArray(d) ? setArrayAssets(d, exportName, subName) : setAssetsComponent(d, {
|
||||
exportName,
|
||||
subName,
|
||||
});
|
||||
});
|
||||
}
|
||||
if (window[exportName]) {
|
||||
assets.components = assets.components.concat((window[exportName] as any).components || []);
|
||||
assets.componentList = assets.componentList?.concat((window[exportName] as any).componentList || []);
|
||||
if (Array.isArray(window[exportName])) {
|
||||
setArrayAssets(window[exportName] as any);
|
||||
} else {
|
||||
setAssetsComponent(window[exportName] as any);
|
||||
}
|
||||
}
|
||||
return window[exportName];
|
||||
}),
|
||||
|
||||
@ -330,7 +330,8 @@ function getKeyInfo(combination: string, action?: string): KeyInfo {
|
||||
*/
|
||||
function fireCallback(callback: HotkeyCallback, e: KeyboardEvent, combo?: string, sequence?: string): void {
|
||||
try {
|
||||
const editor = globalContext.get(Editor);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const designer = editor.get('designer');
|
||||
const node = designer?.currentSelection?.getNodes()?.[0];
|
||||
const npm = node?.componentMeta?.npm;
|
||||
@ -353,7 +354,7 @@ function fireCallback(callback: HotkeyCallback, e: KeyboardEvent, combo?: string
|
||||
}
|
||||
|
||||
export class Hotkey {
|
||||
private callBacks: HotkeyCallbacks = {};
|
||||
callBacks: HotkeyCallbacks = {};
|
||||
|
||||
private directMap: HotkeyDirectMap = {};
|
||||
|
||||
@ -367,6 +368,16 @@ export class Hotkey {
|
||||
|
||||
private nextExpectedAction: boolean | string = false;
|
||||
|
||||
private isActivate = true;
|
||||
|
||||
constructor(readonly name: string = 'unknown') {
|
||||
this.mount(window);
|
||||
}
|
||||
|
||||
activate(activate: boolean): void {
|
||||
this.isActivate = activate;
|
||||
}
|
||||
|
||||
mount(window: Window) {
|
||||
const { document } = window;
|
||||
const handleKeyEvent = this.handleKeyEvent.bind(this);
|
||||
@ -541,6 +552,9 @@ export class Hotkey {
|
||||
}
|
||||
|
||||
private handleKeyEvent(e: KeyboardEvent): void {
|
||||
if (!this.isActivate) {
|
||||
return;
|
||||
}
|
||||
const character = characterFromEvent(e);
|
||||
|
||||
// no character found then stop
|
||||
@ -644,5 +658,5 @@ export class Hotkey {
|
||||
}
|
||||
}
|
||||
|
||||
export const hotkey = new Hotkey();
|
||||
hotkey.mount(window);
|
||||
// export const hotkey = new Hotkey();
|
||||
// hotkey.mount(window);
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-editor-skeleton",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "alibaba lowcode editor skeleton",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -18,10 +18,10 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@alifd/next": "^1.20.12",
|
||||
"@alilc/lowcode-designer": "1.0.17",
|
||||
"@alilc/lowcode-editor-core": "1.0.17",
|
||||
"@alilc/lowcode-types": "1.0.17",
|
||||
"@alilc/lowcode-utils": "1.0.17",
|
||||
"@alilc/lowcode-designer": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-editor-core": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-types": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-utils": "1.1.0-beta.1",
|
||||
"classnames": "^2.2.6",
|
||||
"react": "^16.8.1",
|
||||
"react-dom": "^16.8.1"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component, MouseEvent, Fragment } from 'react';
|
||||
import { shallowIntl, createSetterContent, observer, obx, engineConfig, runInAction, globalContext } from '@alilc/lowcode-editor-core';
|
||||
import { shallowIntl, observer, obx, engineConfig, runInAction, globalContext } from '@alilc/lowcode-editor-core';
|
||||
import { createContent, isJSSlot, isSetterConfig } from '@alilc/lowcode-utils';
|
||||
import { Skeleton } from '@alilc/lowcode-editor-skeleton';
|
||||
import { CustomView } from '@alilc/lowcode-types';
|
||||
@ -8,6 +8,7 @@ import { createField } from '../field';
|
||||
import PopupService, { PopupPipe } from '../popup';
|
||||
import { SkeletonContext } from '../../context';
|
||||
import { intl } from '../../locale';
|
||||
import { Setters } from '@alilc/lowcode-shell';
|
||||
|
||||
function isStandardComponent(componentMeta: ComponentMeta | null) {
|
||||
if (!componentMeta) return false;
|
||||
@ -38,6 +39,8 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
|
||||
|
||||
stageName: string | undefined;
|
||||
|
||||
setters: Setters;
|
||||
|
||||
constructor(props: SettingFieldViewProps) {
|
||||
super(props);
|
||||
|
||||
@ -45,8 +48,10 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
|
||||
const { extraProps } = field;
|
||||
const { display } = extraProps;
|
||||
|
||||
const editor = globalContext.get('editor');
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const { stages } = editor.get('skeleton') as Skeleton;
|
||||
this.setters = editor.get('setters');
|
||||
let stageName;
|
||||
if (display === 'entry') {
|
||||
runInAction(() => {
|
||||
@ -192,7 +197,6 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
|
||||
setterProps = {},
|
||||
setterType,
|
||||
initialValue = null,
|
||||
|
||||
} = this.setterInfo;
|
||||
|
||||
const value = this.value;
|
||||
@ -215,7 +219,7 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
|
||||
...extraProps,
|
||||
},
|
||||
!stageName &&
|
||||
createSetterContent(setterType, {
|
||||
this.setters.createSetterContent(setterType, {
|
||||
...shallowIntl(setterProps),
|
||||
forceInline: extraProps.forceInline,
|
||||
key: field.id,
|
||||
@ -268,7 +272,8 @@ class SettingGroupView extends Component<SettingGroupViewProps> {
|
||||
const { field } = this.props;
|
||||
const { extraProps } = field;
|
||||
const { display } = extraProps;
|
||||
const editor = globalContext.get('editor');
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const { stages } = editor.get('skeleton') as Skeleton;
|
||||
// const items = field.items;
|
||||
|
||||
|
||||
@ -14,19 +14,25 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
|
||||
state = {
|
||||
shouldIgnoreRoot: false,
|
||||
};
|
||||
private main = new SettingsMain(globalContext.get('editor'));
|
||||
private main;
|
||||
|
||||
@obx.ref private _activeKey?: any;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
makeObservable(this);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
this.main = new SettingsMain(editor);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setShouldIgnoreRoot();
|
||||
|
||||
globalContext.get('editor').on('designer.selection.change', () => {
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
|
||||
editor.on('designer.selection.change', () => {
|
||||
if (!engineConfig.get('stayOnTheSameSettingTab', false)) {
|
||||
this._activeKey = null;
|
||||
}
|
||||
@ -65,7 +71,8 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
|
||||
);
|
||||
}
|
||||
|
||||
const editor = globalContext.get('editor');
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const designer = editor.get('designer');
|
||||
const current = designer?.currentSelection?.getNodes()?.[0];
|
||||
let node: Node | null = settings.first;
|
||||
@ -128,7 +135,8 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
|
||||
|
||||
render() {
|
||||
const { settings } = this.main;
|
||||
const editor = globalContext.get('editor');
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
if (!settings) {
|
||||
// 未选中节点，提示选中 或者 显示根节点设置
|
||||
return (
|
||||
|
||||
@ -116,12 +116,14 @@ export class DraggableLineView extends Component<{ panel: Panel }> {
|
||||
}
|
||||
|
||||
// 抛出事件，对于有些需要 panel 插件随着 度变化进行再次渲染的，由panel插件内部监听事件实现
|
||||
const editor = globalContext.get(Editor);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
editor?.emit('dockpane.drag', width);
|
||||
}
|
||||
|
||||
onDragChange(type: 'start' | 'end') {
|
||||
const editor = globalContext.get(Editor);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
editor?.emit('dockpane.dragchange', type);
|
||||
// builtinSimulator 屏蔽掉 鼠标事件
|
||||
editor?.emit('designer.builtinSimulator.disabledEvents', type === 'start');
|
||||
@ -185,7 +187,8 @@ export class TitledPanelView extends Component<{ panel: Panel; area?: string }>
|
||||
if (!panel.inited) {
|
||||
return null;
|
||||
}
|
||||
const editor = globalContext.get(Editor);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const panelName = area ? `${area}-${panel.name}` : panel.name;
|
||||
editor?.emit('skeleton.panel.toggle', {
|
||||
name: panelName || '',
|
||||
@ -247,7 +250,8 @@ export class PanelView extends Component<{
|
||||
if (!panel.inited) {
|
||||
return null;
|
||||
}
|
||||
const editor = globalContext.get(Editor);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const panelName = area ? `${area}-${panel.name}` : panel.name;
|
||||
editor?.emit('skeleton.panel.toggle', {
|
||||
name: panelName || '',
|
||||
|
||||
@ -65,7 +65,6 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
|
||||
this.props.area.setVisible(false);
|
||||
},
|
||||
onBlur: () => {
|
||||
// debugger
|
||||
this.props.area.setVisible(false);
|
||||
},
|
||||
});
|
||||
|
||||
@ -133,11 +133,38 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.lc-workbench {
|
||||
.workspace-engine-main {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #edeff3;
|
||||
|
||||
.lc-workbench {
|
||||
|
||||
}
|
||||
|
||||
.engine-editor-view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&.active {
|
||||
z-index: 999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lc-workbench {
|
||||
&.engine-main {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #edeff3;
|
||||
}
|
||||
.lc-top-area {
|
||||
height: var(--top-area-height);
|
||||
background-color: var(--color-pane-background);
|
||||
@ -349,6 +376,7 @@ body {
|
||||
}
|
||||
.lc-main-area {
|
||||
flex: 1;
|
||||
background-color: #edeff3;
|
||||
}
|
||||
.lc-bottom-area {
|
||||
height: var(--bottom-area-height);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Editor, action, makeObservable } from '@alilc/lowcode-editor-core';
|
||||
import { Editor, action, makeObservable, obx } from '@alilc/lowcode-editor-core';
|
||||
import {
|
||||
DockConfig,
|
||||
PanelConfig,
|
||||
@ -56,13 +56,13 @@ export class Skeleton {
|
||||
|
||||
readonly rightArea: Area<PanelConfig, Panel>;
|
||||
|
||||
readonly mainArea: Area<WidgetConfig | PanelConfig, Widget | Panel>;
|
||||
@obx readonly mainArea: Area<WidgetConfig | PanelConfig, Widget | Panel>;
|
||||
|
||||
readonly bottomArea: Area<PanelConfig, Panel>;
|
||||
|
||||
readonly stages: Area<StageConfig, Stage>;
|
||||
|
||||
constructor(readonly editor: Editor) {
|
||||
constructor(readonly editor: Editor, readonly name: string = 'unknown') {
|
||||
makeObservable(this);
|
||||
this.leftArea = new Area(
|
||||
this,
|
||||
@ -366,6 +366,12 @@ export class Skeleton {
|
||||
...this.parseConfig(config),
|
||||
...extraConfig,
|
||||
};
|
||||
parsedConfig.contentProps = {
|
||||
context: this.editor.get('innerPlugins')?._getLowCodePluginContext({
|
||||
pluginName: 'any',
|
||||
}),
|
||||
...(parsedConfig.contentProps || {}),
|
||||
};
|
||||
let { area } = parsedConfig;
|
||||
if (!area) {
|
||||
if (parsedConfig.type === 'Panel') {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-engine",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系",
|
||||
"main": "lib/engine-core.js",
|
||||
"module": "es/engine-core.js",
|
||||
@ -19,14 +19,14 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@alifd/next": "^1.19.12",
|
||||
"@alilc/lowcode-designer": "1.0.17",
|
||||
"@alilc/lowcode-editor-core": "1.0.17",
|
||||
"@alilc/lowcode-editor-skeleton": "1.0.17",
|
||||
"@alilc/lowcode-designer": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-editor-core": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-editor-skeleton": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-engine-ext": "^1.0.0",
|
||||
"@alilc/lowcode-plugin-designer": "1.0.17",
|
||||
"@alilc/lowcode-plugin-outline-pane": "1.0.17",
|
||||
"@alilc/lowcode-shell": "1.0.17",
|
||||
"@alilc/lowcode-utils": "1.0.17",
|
||||
"@alilc/lowcode-plugin-designer": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-plugin-outline-pane": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-shell": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-utils": "1.1.0-beta.1",
|
||||
"react": "^16.8.1",
|
||||
"react-dom": "^16.8.1"
|
||||
},
|
||||
|
||||
@ -1,23 +1,32 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
import { createElement } from 'react';
|
||||
import { render, unmountComponentAtNode } from 'react-dom';
|
||||
import { globalContext, Editor, engineConfig, EngineOptions } from '@alilc/lowcode-editor-core';
|
||||
import {
|
||||
globalContext,
|
||||
Editor,
|
||||
engineConfig,
|
||||
Setters as InnerSetters,
|
||||
Hotkey as InnerHotkey,
|
||||
} from '@alilc/lowcode-editor-core';
|
||||
import { EngineOptions,
|
||||
IPublicModelDocumentModel,
|
||||
} from '@alilc/lowcode-types';
|
||||
import {
|
||||
Designer,
|
||||
LowCodePluginManager,
|
||||
ILowCodePluginContext,
|
||||
ILowCodePluginContextPrivate,
|
||||
ILowCodePluginContextApiAssembler,
|
||||
PluginPreference,
|
||||
} from '@alilc/lowcode-designer';
|
||||
import {
|
||||
Skeleton as InnerSkeleton,
|
||||
SettingsPrimaryPane,
|
||||
registerDefaults,
|
||||
} from '@alilc/lowcode-editor-skeleton';
|
||||
import {
|
||||
WorkSpace,
|
||||
Workbench as WorkSpaceWorkbench,
|
||||
} from '@alilc/lowcode-workspace';
|
||||
|
||||
import Outline, { OutlineBackupPane, getTreeMaster } from '@alilc/lowcode-plugin-outline-pane';
|
||||
import DesignerPlugin from '@alilc/lowcode-plugin-designer';
|
||||
import {
|
||||
Hotkey,
|
||||
Project,
|
||||
@ -25,6 +34,7 @@ import {
|
||||
Setters,
|
||||
Material,
|
||||
Event,
|
||||
Plugins,
|
||||
DocumentModel,
|
||||
Common,
|
||||
} from '@alilc/lowcode-shell';
|
||||
@ -32,7 +42,11 @@ import { getLogger, isPlainObject } from '@alilc/lowcode-utils';
|
||||
import './modules/live-editing';
|
||||
import classes from './modules/classes';
|
||||
import symbols from './modules/symbols';
|
||||
import { componentMetaParser } from './inner-plugins/component-meta-parser';
|
||||
import { setterRegistry } from './inner-plugins/setter-registry';
|
||||
import { defaultPanelRegistry } from './inner-plugins/default-panel-registry';
|
||||
import { shellModelFactory } from './modules/shell-model-factory';
|
||||
import { builtinHotkey } from './inner-plugins/builtin-hotkey';
|
||||
|
||||
export * from './modules/skeleton-types';
|
||||
export * from './modules/designer-types';
|
||||
@ -40,9 +54,11 @@ export * from './modules/lowcode-types';
|
||||
|
||||
registerDefaults();
|
||||
|
||||
const workSpace = new WorkSpace();
|
||||
const editor = new Editor();
|
||||
globalContext.register(editor, Editor);
|
||||
globalContext.register(editor, 'editor');
|
||||
globalContext.register(workSpace, 'workSpace');
|
||||
|
||||
const innerSkeleton = new InnerSkeleton(editor);
|
||||
editor.set('skeleton' as any, innerSkeleton);
|
||||
@ -51,15 +67,23 @@ const designer = new Designer({ editor, shellModelFactory });
|
||||
editor.set('designer' as any, designer);
|
||||
const { project: innerProject } = designer;
|
||||
|
||||
const hotkey = new Hotkey();
|
||||
const innerHotkey = new InnerHotkey();
|
||||
const hotkey = new Hotkey(innerHotkey);
|
||||
const project = new Project(innerProject);
|
||||
const skeleton = new Skeleton(innerSkeleton);
|
||||
const setters = new Setters();
|
||||
const innerSetters = new InnerSetters();
|
||||
const setters = new Setters(innerSetters);
|
||||
|
||||
const material = new Material(editor);
|
||||
editor.set('project', project);
|
||||
editor.set('setters' as any, setters);
|
||||
editor.set('material', material);
|
||||
editor.set('innerHotkey', innerHotkey);
|
||||
const config = engineConfig;
|
||||
const event = new Event(editor, { prefix: 'common' });
|
||||
const logger = getLogger({ level: 'warn', bizName: 'common' });
|
||||
const common = new Common(editor, innerSkeleton);
|
||||
let plugins: Plugins;
|
||||
|
||||
const pluginContextApiAssembler: ILowCodePluginContextApiAssembler = {
|
||||
assembleApis: (context: ILowCodePluginContextPrivate) => {
|
||||
@ -71,9 +95,13 @@ const pluginContextApiAssembler: ILowCodePluginContextApiAssembler = {
|
||||
context.event = event;
|
||||
context.config = config;
|
||||
context.common = common;
|
||||
context.plugins = plugins;
|
||||
},
|
||||
};
|
||||
const plugins = new LowCodePluginManager(pluginContextApiAssembler).toProxy();
|
||||
|
||||
const innerPlugins = new LowCodePluginManager(pluginContextApiAssembler);
|
||||
plugins = new Plugins(innerPlugins).toProxy();
|
||||
editor.set('innerPlugins' as any, innerPlugins);
|
||||
editor.set('plugins' as any, plugins);
|
||||
|
||||
export {
|
||||
@ -89,6 +117,7 @@ export {
|
||||
common,
|
||||
// 兼容原 editor 的事件功能
|
||||
event as editor,
|
||||
workSpace,
|
||||
};
|
||||
// declare this is open-source version
|
||||
export const isOpenSource = true;
|
||||
@ -96,100 +125,7 @@ export const __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
|
||||
symbols,
|
||||
classes,
|
||||
};
|
||||
engineConfig.set('isOpenSource', isOpenSource);
|
||||
|
||||
// 注册一批内置插件
|
||||
(async function registerPlugins() {
|
||||
// 处理 editor.set('assets')，将组件元数据创建好
|
||||
const componentMetaParser = (ctx: ILowCodePluginContext) => {
|
||||
return {
|
||||
init() {
|
||||
editor.onGot('assets', (assets: any) => {
|
||||
const { components = [] } = assets;
|
||||
designer.buildComponentMetasMap(components);
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
componentMetaParser.pluginName = '___component_meta_parser___';
|
||||
await plugins.register(componentMetaParser);
|
||||
|
||||
// 注册默认的 setters
|
||||
const setterRegistry = (ctx: ILowCodePluginContext) => {
|
||||
return {
|
||||
init() {
|
||||
if (engineConfig.get('disableDefaultSetters')) return;
|
||||
const builtinSetters = require('@alilc/lowcode-engine-ext')?.setters;
|
||||
if (builtinSetters) {
|
||||
ctx.setters.registerSetter(builtinSetters);
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
setterRegistry.pluginName = '___setter_registry___';
|
||||
await plugins.register(setterRegistry);
|
||||
|
||||
// 注册默认的面板
|
||||
const defaultPanelRegistry = (ctx: ILowCodePluginContext) => {
|
||||
return {
|
||||
init() {
|
||||
skeleton.add({
|
||||
area: 'mainArea',
|
||||
name: 'designer',
|
||||
type: 'Widget',
|
||||
content: DesignerPlugin,
|
||||
});
|
||||
if (!engineConfig.get('disableDefaultSettingPanel')) {
|
||||
skeleton.add({
|
||||
area: 'rightArea',
|
||||
name: 'settingsPane',
|
||||
type: 'Panel',
|
||||
content: SettingsPrimaryPane,
|
||||
props: {
|
||||
ignoreRoot: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// by default in float area;
|
||||
let isInFloatArea = true;
|
||||
const hasPreferenceForOutline = editor
|
||||
?.getPreference()
|
||||
?.contains('outline-pane-pinned-status-isFloat', 'skeleton');
|
||||
if (hasPreferenceForOutline) {
|
||||
isInFloatArea = editor
|
||||
?.getPreference()
|
||||
?.get('outline-pane-pinned-status-isFloat', 'skeleton');
|
||||
}
|
||||
|
||||
skeleton.add({
|
||||
area: 'leftArea',
|
||||
name: 'outlinePane',
|
||||
type: 'PanelDock',
|
||||
content: Outline,
|
||||
panelProps: {
|
||||
area: isInFloatArea ? 'leftFloatArea' : 'leftFixedArea',
|
||||
keepVisibleWhileDragging: true,
|
||||
...engineConfig.get('defaultOutlinePaneProps'),
|
||||
},
|
||||
});
|
||||
skeleton.add({
|
||||
area: 'rightArea',
|
||||
name: 'backupOutline',
|
||||
type: 'Panel',
|
||||
props: {
|
||||
condition: () => {
|
||||
return designer.dragon.dragging && !getTreeMaster(designer).hasVisibleTreeBoard();
|
||||
},
|
||||
},
|
||||
content: OutlineBackupPane,
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
defaultPanelRegistry.pluginName = '___default_panel___';
|
||||
await plugins.register(defaultPanelRegistry);
|
||||
})();
|
||||
config.set('isOpenSource', isOpenSource);
|
||||
|
||||
// container which will host LowCodeEngine DOM
|
||||
let engineContainer: HTMLElement;
|
||||
@ -202,6 +138,7 @@ export async function init(
|
||||
options?: EngineOptions,
|
||||
pluginPreference?: PluginPreference,
|
||||
) {
|
||||
|
||||
await destroy();
|
||||
let engineOptions = null;
|
||||
if (isPlainObject(container)) {
|
||||
@ -220,9 +157,42 @@ export async function init(
|
||||
}
|
||||
engineConfig.setEngineOptions(engineOptions as any);
|
||||
|
||||
|
||||
if (options && options.enableWorkspaceMode) {
|
||||
render(
|
||||
createElement(WorkSpaceWorkbench, {
|
||||
workSpace,
|
||||
className: 'engine-main',
|
||||
topAreaItemClassName: 'engine-actionitem',
|
||||
}),
|
||||
engineContainer,
|
||||
);
|
||||
workSpace.setActive(true);
|
||||
return;
|
||||
}
|
||||
|
||||
// 注册一批内置插件
|
||||
await plugins.register(componentMetaParser(designer));
|
||||
await plugins.register(setterRegistry);
|
||||
await plugins.register(defaultPanelRegistry(editor, designer));
|
||||
await plugins.register(builtinHotkey);
|
||||
|
||||
await plugins.init(pluginPreference as any);
|
||||
|
||||
const { Workbench } = common.skeletonCabin;
|
||||
if (options && options.enableWorkspaceMode) {
|
||||
render(
|
||||
createElement(WorkSpaceWorkbench, {
|
||||
workSpace,
|
||||
// skeleton: workSpace.skeleton,
|
||||
className: 'engine-main',
|
||||
topAreaItemClassName: 'engine-actionitem',
|
||||
}),
|
||||
engineContainer,
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
render(
|
||||
createElement(Workbench, {
|
||||
skeleton: innerSkeleton,
|
||||
@ -237,7 +207,7 @@ export async function destroy() {
|
||||
// remove all documents
|
||||
const { documents } = project;
|
||||
if (Array.isArray(documents) && documents.length > 0) {
|
||||
documents.forEach(((doc: DocumentModel) => project.removeDocument(doc)));
|
||||
documents.forEach(((doc: IPublicModelDocumentModel) => project.removeDocument(doc)));
|
||||
}
|
||||
|
||||
// TODO: delete plugins except for core plugins
|
||||
|
||||
407
packages/engine/src/inner-plugins/builtin-hotkey.ts
Normal file
407
packages/engine/src/inner-plugins/builtin-hotkey.ts
Normal file
@ -0,0 +1,407 @@
|
||||
import { IPublicModelNode } from './../../../types/src/shell/model/node';
|
||||
import { Editor, globalContext } from '@alilc/lowcode-editor-core';
|
||||
import { isFormEvent } from '@alilc/lowcode-utils';
|
||||
import {
|
||||
focusing,
|
||||
insertChildren,
|
||||
TransformStage,
|
||||
clipboard,
|
||||
ILowCodePluginContext,
|
||||
} from '@alilc/lowcode-designer';
|
||||
|
||||
export function isInLiveEditing() {
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
if (workSpace.isActive) {
|
||||
return Boolean(
|
||||
workSpace.window.editor.get('designer')?.project?.simulator?.liveEditing?.editing,
|
||||
);
|
||||
}
|
||||
|
||||
if (globalContext.has(Editor)) {
|
||||
return Boolean(
|
||||
globalContext.get(Editor).get('designer')?.project?.simulator?.liveEditing?.editing,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
function getNextForSelect(next: IPublicModelNode | null, head?: any, parent?: IPublicModelNode | null): any {
|
||||
if (next) {
|
||||
if (!head) {
|
||||
return next;
|
||||
}
|
||||
|
||||
let ret;
|
||||
if (next.isContainer) {
|
||||
const children = next.children;
|
||||
if (children && !children.isEmpty) {
|
||||
ret = getNextForSelect(children.get(0));
|
||||
if (ret) {
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ret = getNextForSelect(next.nextSibling);
|
||||
if (ret) {
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
|
||||
if (parent) {
|
||||
return getNextForSelect(parent.nextSibling, false, parent?.parent);
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/* istanbul ignore next */
|
||||
function getPrevForSelect(prev: IPublicModelNode | null, head?: any, parent?: IPublicModelNode | null): any {
|
||||
if (prev) {
|
||||
let ret;
|
||||
if (!head && prev.isContainer) {
|
||||
const children = prev.children;
|
||||
const lastChild = children && !children.isEmpty ? children.get(children.size - 1) : null;
|
||||
|
||||
ret = getPrevForSelect(lastChild);
|
||||
if (ret) {
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
|
||||
if (!head) {
|
||||
return prev;
|
||||
}
|
||||
|
||||
ret = getPrevForSelect(prev.prevSibling);
|
||||
if (ret) {
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
|
||||
if (parent) {
|
||||
return parent;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// 注册默认的 setters
|
||||
export const builtinHotkey = (ctx: ILowCodePluginContext) => {
|
||||
return {
|
||||
init() {
|
||||
const { hotkey, project, logger } = ctx;
|
||||
// hotkey binding
|
||||
hotkey.bind(['backspace', 'del'], (e: KeyboardEvent, action) => {
|
||||
logger.info(`action ${action} is triggered`);
|
||||
|
||||
if (isInLiveEditing()) {
|
||||
return;
|
||||
}
|
||||
// TODO: use focus-tracker
|
||||
const doc = project.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
|
||||
const sel = doc.selection;
|
||||
const topItems = sel.getTopNodes();
|
||||
// TODO: check can remove
|
||||
topItems.forEach((node) => {
|
||||
if (node?.canPerformAction('remove')) {
|
||||
node && doc.removeNode(node);
|
||||
}
|
||||
});
|
||||
sel.clear();
|
||||
});
|
||||
|
||||
hotkey.bind('escape', (e: KeyboardEvent, action) => {
|
||||
logger.info(`action ${action} is triggered`);
|
||||
// const currentFocus = focusing.current;
|
||||
if (isInLiveEditing()) {
|
||||
return;
|
||||
}
|
||||
const sel = focusing.focusDesigner?.currentDocument?.selection;
|
||||
if (isFormEvent(e) || !sel) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
|
||||
sel.clear();
|
||||
// currentFocus.esc();
|
||||
});
|
||||
|
||||
// command + c copy command + x cut
|
||||
hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => {
|
||||
logger.info(`action ${action} is triggered`);
|
||||
if (isInLiveEditing()) {
|
||||
return;
|
||||
}
|
||||
const doc = project.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
|
||||
let selected = doc.selection.getTopNodes(true);
|
||||
selected = selected.filter((node) => {
|
||||
return node?.canPerformAction('copy');
|
||||
});
|
||||
if (!selected || selected.length < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
const componentsMap = {};
|
||||
const componentsTree = selected.map((item) => item?.exportSchema(TransformStage.Clone));
|
||||
|
||||
// FIXME: clear node.id
|
||||
|
||||
const data = { type: 'nodeSchema', componentsMap, componentsTree };
|
||||
|
||||
clipboard.setData(data);
|
||||
|
||||
const cutMode = action && action.indexOf('x') > 0;
|
||||
if (cutMode) {
|
||||
selected.forEach((node) => {
|
||||
const parentNode = node?.parent;
|
||||
parentNode?.select();
|
||||
node?.remove();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// command + v paste
|
||||
hotkey.bind(['command+v', 'ctrl+v'], (e, action) => {
|
||||
logger.info(`action ${action} is triggered`);
|
||||
if (isInLiveEditing()) {
|
||||
return;
|
||||
}
|
||||
if (isInLiveEditing()) return;
|
||||
// TODO
|
||||
const designer = focusing.focusDesigner;
|
||||
const doc = designer?.currentDocument;
|
||||
if (isFormEvent(e) || !designer || !doc) {
|
||||
return;
|
||||
}
|
||||
/* istanbul ignore next */
|
||||
clipboard.waitPasteData(e, ({ componentsTree }) => {
|
||||
if (componentsTree) {
|
||||
const { target, index } = designer.getSuitableInsertion(componentsTree) || {};
|
||||
if (!target) {
|
||||
return;
|
||||
}
|
||||
let canAddComponentsTree = componentsTree.filter((i) => {
|
||||
return doc.checkNestingUp(target, i);
|
||||
});
|
||||
if (canAddComponentsTree.length === 0) return;
|
||||
const nodes = insertChildren(target, canAddComponentsTree, index);
|
||||
if (nodes) {
|
||||
doc.selection.selectAll(nodes.map((o) => o.id));
|
||||
setTimeout(() => designer.activeTracker.track(nodes[0]), 10);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// command + z undo
|
||||
hotkey.bind(['command+z', 'ctrl+z'], (e, action) => {
|
||||
logger.info(`action ${action} is triggered`);
|
||||
if (isInLiveEditing()) {
|
||||
return;
|
||||
}
|
||||
const history = project.currentDocument?.history;
|
||||
if (isFormEvent(e) || !history) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
const selection = project.currentDocument?.selection;
|
||||
const curSelected = selection?.selected && Array.from(selection?.selected);
|
||||
history.back();
|
||||
selection?.selectAll(curSelected);
|
||||
});
|
||||
|
||||
// command + shift + z redo
|
||||
hotkey.bind(['command+y', 'ctrl+y', 'command+shift+z'], (e, action) => {
|
||||
logger.info(`action ${action} is triggered`);
|
||||
if (isInLiveEditing()) {
|
||||
return;
|
||||
}
|
||||
const history = project.currentDocument?.history;
|
||||
if (isFormEvent(e) || !history) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const selection = project.currentDocument?.selection;
|
||||
const curSelected = selection?.selected && Array.from(selection?.selected);
|
||||
history.forward();
|
||||
selection?.selectAll(curSelected);
|
||||
});
|
||||
|
||||
// sibling selection
|
||||
hotkey.bind(['left', 'right'], (e, action) => {
|
||||
logger.info(`action ${action} is triggered`);
|
||||
if (isInLiveEditing()) {
|
||||
return;
|
||||
}
|
||||
const doc = project.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const selected = doc.selection.getTopNodes(true);
|
||||
if (!selected || selected.length < 1) {
|
||||
return;
|
||||
}
|
||||
const firstNode = selected[0];
|
||||
const silbing = action === 'left' ? firstNode?.prevSibling : firstNode?.nextSibling;
|
||||
silbing?.select();
|
||||
});
|
||||
|
||||
hotkey.bind(['up', 'down'], (e, action) => {
|
||||
logger.info(`action ${action} is triggered`);
|
||||
if (isInLiveEditing()) {
|
||||
return;
|
||||
}
|
||||
const doc = project.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const selected = doc.selection.getTopNodes(true);
|
||||
if (!selected || selected.length < 1) {
|
||||
return;
|
||||
}
|
||||
const firstNode = selected[0];
|
||||
|
||||
if (action === 'down') {
|
||||
const next = getNextForSelect(firstNode, true, firstNode?.parent);
|
||||
next?.select();
|
||||
} else if (action === 'up') {
|
||||
const prev = getPrevForSelect(firstNode, true, firstNode?.parent);
|
||||
prev?.select();
|
||||
}
|
||||
});
|
||||
|
||||
hotkey.bind(['option+left', 'option+right'], (e, action) => {
|
||||
logger.info(`action ${action} is triggered`);
|
||||
if (isInLiveEditing()) {
|
||||
return;
|
||||
}
|
||||
const doc = project.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const selected = doc.selection.getTopNodes(true);
|
||||
if (!selected || selected.length < 1) {
|
||||
return;
|
||||
}
|
||||
// TODO: 此处需要增加判断当前节点是否可被操作移动，原ve里是用 node.canOperating()来判断
|
||||
// TODO: 移动逻辑也需要重新梳理，对于移动目标位置的选择，是否可以移入，需要增加判断
|
||||
|
||||
const firstNode = selected[0];
|
||||
const parent = firstNode?.parent;
|
||||
if (!parent) return;
|
||||
|
||||
const isPrev = action && /(left)$/.test(action);
|
||||
|
||||
const silbing = isPrev ? firstNode.prevSibling : firstNode.nextSibling;
|
||||
if (silbing) {
|
||||
if (isPrev) {
|
||||
parent.insertBefore(firstNode, silbing);
|
||||
} else {
|
||||
parent.insertAfter(firstNode, silbing);
|
||||
}
|
||||
firstNode?.select();
|
||||
}
|
||||
});
|
||||
|
||||
hotkey.bind(['option+up'], (e, action) => {
|
||||
logger.info(`action ${action} is triggered`);
|
||||
if (isInLiveEditing()) {
|
||||
return;
|
||||
}
|
||||
const doc = project.currentDocument;
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const selected = doc.selection.getTopNodes(true);
|
||||
if (!selected || selected.length < 1) {
|
||||
return;
|
||||
}
|
||||
// TODO: 此处需要增加判断当前节点是否可被操作移动，原ve里是用 node.canOperating()来判断
|
||||
// TODO: 移动逻辑也需要重新梳理，对于移动目标位置的选择，是否可以移入，需要增加判断
|
||||
|
||||
const firstNode = selected[0];
|
||||
const parent = firstNode?.parent;
|
||||
if (!parent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const silbing = firstNode.prevSibling;
|
||||
if (silbing) {
|
||||
if (silbing.isContainer) {
|
||||
const place = silbing.getSuitablePlace(firstNode, null);
|
||||
silbing.insertAfter(place, place.ref);
|
||||
} else {
|
||||
parent.insertBefore(firstNode, silbing);
|
||||
}
|
||||
firstNode?.select();
|
||||
} else {
|
||||
const place = parent.getSuitablePlace(firstNode, null); // upwards
|
||||
if (place) {
|
||||
place.container.insertBefore(firstNode, place.ref);
|
||||
firstNode?.select();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
hotkey.bind(['option+down'], (e, action) => {
|
||||
logger.info(`action ${action} is triggered`);
|
||||
if (isInLiveEditing()) {
|
||||
return;
|
||||
}
|
||||
const doc = project.getCurrentDocument();
|
||||
if (isFormEvent(e) || !doc) {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
const selected = doc.selection.getTopNodes(true);
|
||||
if (!selected || selected.length < 1) {
|
||||
return;
|
||||
}
|
||||
// TODO: 此处需要增加判断当前节点是否可被操作移动，原 ve 里是用 node.canOperating() 来判断
|
||||
// TODO: 移动逻辑也需要重新梳理，对于移动目标位置的选择，是否可以移入，需要增加判断
|
||||
|
||||
const firstNode = selected[0];
|
||||
const parent = firstNode?.parent;
|
||||
if (!parent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const silbing = firstNode.nextSibling;
|
||||
if (silbing) {
|
||||
if (silbing.isContainer) {
|
||||
// const place = silbing.getSuitablePlace(firstNode, null);
|
||||
silbing.insertBefore(firstNode, undefined);
|
||||
// place.container.insertBefore(firstNode, place.ref);
|
||||
} else {
|
||||
parent.insertAfter(firstNode, silbing);
|
||||
}
|
||||
firstNode?.select();
|
||||
} else {
|
||||
const place = parent.getSuitablePlace(firstNode, null); // upwards
|
||||
if (place) {
|
||||
place.container.insertAfter(firstNode, place.ref);
|
||||
firstNode?.select();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
builtinHotkey.pluginName = '___builtin_hotkey___';
|
||||
20
packages/engine/src/inner-plugins/component-meta-parser.ts
Normal file
20
packages/engine/src/inner-plugins/component-meta-parser.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { ILowCodePluginContext } from '@alilc/lowcode-designer';
|
||||
|
||||
export const componentMetaParser = (designer: any) => {
|
||||
const fun = (ctx: ILowCodePluginContext) => {
|
||||
return {
|
||||
init() {
|
||||
const { material } = ctx;
|
||||
material.onChangeAssets(() => {
|
||||
const assets = material.getAssets();
|
||||
const { components = [] } = assets;
|
||||
designer.buildComponentMetasMap(components);
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
fun.pluginName = '___component_meta_parser___';
|
||||
|
||||
return fun;
|
||||
};
|
||||
93
packages/engine/src/inner-plugins/default-panel-registry.tsx
Normal file
93
packages/engine/src/inner-plugins/default-panel-registry.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
import { ILowCodePluginContext } from '@alilc/lowcode-designer';
|
||||
import { SettingsPrimaryPane } from '@alilc/lowcode-editor-skeleton';
|
||||
import DesignerPlugin from '@alilc/lowcode-plugin-designer';
|
||||
import Outline, { getTreeMaster, OutlineBackupPane } from '@alilc/lowcode-plugin-outline-pane';
|
||||
|
||||
// 注册默认的面板
|
||||
export const defaultPanelRegistry = (editor: any, designer: any) => {
|
||||
const fun = (ctx: ILowCodePluginContext) => {
|
||||
return {
|
||||
init() {
|
||||
const { skeleton, config } = ctx;
|
||||
skeleton.add({
|
||||
area: 'mainArea',
|
||||
name: 'designer',
|
||||
type: 'Widget',
|
||||
content: <DesignerPlugin
|
||||
engineConfig={config}
|
||||
engineEditor={editor}
|
||||
/>,
|
||||
});
|
||||
if (!config.get('disableDefaultSettingPanel')) {
|
||||
skeleton.add({
|
||||
area: 'rightArea',
|
||||
name: 'settingsPane',
|
||||
type: 'Panel',
|
||||
content: SettingsPrimaryPane,
|
||||
props: {
|
||||
ignoreRoot: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// by default in float area;
|
||||
let isInFloatArea = true;
|
||||
const hasPreferenceForOutline = editor
|
||||
?.getPreference()
|
||||
?.contains('outline-pane-pinned-status-isFloat', 'skeleton');
|
||||
if (hasPreferenceForOutline) {
|
||||
isInFloatArea = editor
|
||||
?.getPreference()
|
||||
?.get('outline-pane-pinned-status-isFloat', 'skeleton');
|
||||
}
|
||||
|
||||
skeleton.add({
|
||||
area: 'leftArea',
|
||||
name: 'outlinePane',
|
||||
type: 'PanelDock',
|
||||
content: {
|
||||
...Outline,
|
||||
content: (props: any) => {
|
||||
const Content = Outline.content;
|
||||
return (
|
||||
<Content
|
||||
engineConfig={config}
|
||||
engineEditor={editor}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
panelProps: {
|
||||
area: isInFloatArea ? 'leftFloatArea' : 'leftFixedArea',
|
||||
keepVisibleWhileDragging: true,
|
||||
...config.get('defaultOutlinePaneProps'),
|
||||
},
|
||||
});
|
||||
skeleton.add({
|
||||
area: 'rightArea',
|
||||
name: 'backupOutline',
|
||||
type: 'Panel',
|
||||
props: {
|
||||
condition: () => {
|
||||
return designer.dragon.dragging && !getTreeMaster(designer).hasVisibleTreeBoard();
|
||||
},
|
||||
},
|
||||
content: () => (
|
||||
<OutlineBackupPane
|
||||
engineConfig={config}
|
||||
engineEditor={editor}
|
||||
/>
|
||||
),
|
||||
});
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
fun.pluginName = '___default_panel___';
|
||||
|
||||
return fun;
|
||||
};
|
||||
|
||||
|
||||
export default defaultPanelRegistry;
|
||||
17
packages/engine/src/inner-plugins/setter-registry.ts
Normal file
17
packages/engine/src/inner-plugins/setter-registry.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { ILowCodePluginContext } from '@alilc/lowcode-designer';
|
||||
|
||||
// 注册默认的 setters
|
||||
export const setterRegistry = (ctx: ILowCodePluginContext) => {
|
||||
return {
|
||||
init() {
|
||||
const { config } = ctx;
|
||||
if (config.get('disableDefaultSetters')) return;
|
||||
const builtinSetters = require('@alilc/lowcode-engine-ext')?.setters;
|
||||
if (builtinSetters) {
|
||||
ctx.setters.registerSetter(builtinSetters);
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
setterRegistry.pluginName = '___setter_registry___';
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-ignitor",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "点火器，bootstrap lce project",
|
||||
"main": "lib/index.js",
|
||||
"private": true,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-plugin-designer",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "alibaba lowcode editor designer plugin",
|
||||
"files": [
|
||||
"es",
|
||||
@ -18,9 +18,9 @@
|
||||
],
|
||||
"author": "xiayang.xy",
|
||||
"dependencies": {
|
||||
"@alilc/lowcode-designer": "1.0.17",
|
||||
"@alilc/lowcode-editor-core": "1.0.17",
|
||||
"@alilc/lowcode-utils": "1.0.17",
|
||||
"@alilc/lowcode-designer": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-editor-core": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-utils": "1.1.0-beta.1",
|
||||
"react": "^16.8.1",
|
||||
"react-dom": "^16.8.1"
|
||||
},
|
||||
|
||||
@ -5,7 +5,9 @@ import { Asset } from '@alilc/lowcode-utils';
|
||||
import './index.scss';
|
||||
|
||||
export interface PluginProps {
|
||||
editor: Editor;
|
||||
// editor?: Editor;
|
||||
// engineConfig?: any;
|
||||
engineEditor?: any;
|
||||
}
|
||||
|
||||
interface DesignerPluginState {
|
||||
@ -46,7 +48,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
|
||||
}
|
||||
|
||||
private async setupAssets() {
|
||||
const editor = globalContext.get('editor');
|
||||
const editor = this.props.engineEditor;
|
||||
try {
|
||||
const assets = await editor.onceGot('assets');
|
||||
const renderEnv = engineConfig.get('renderEnv') || editor.get('renderEnv');
|
||||
@ -85,7 +87,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
|
||||
}
|
||||
|
||||
private handleDesignerMount = (designer: Designer): void => {
|
||||
const editor = globalContext.get('editor');
|
||||
const editor = this.props.engineEditor;
|
||||
editor.set('designer', designer);
|
||||
editor.emit('designer.ready', designer);
|
||||
editor.onGot('schema', (schema) => {
|
||||
@ -94,7 +96,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
|
||||
};
|
||||
|
||||
render(): React.ReactNode {
|
||||
const editor = globalContext.get('editor');
|
||||
const editor = this.props.engineEditor;
|
||||
const {
|
||||
componentMetadatas,
|
||||
utilsMetadata,
|
||||
@ -119,6 +121,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
|
||||
onMount={this.handleDesignerMount}
|
||||
className="lowcode-plugin-designer"
|
||||
editor={editor}
|
||||
name={editor.name}
|
||||
designer={editor.get('designer')}
|
||||
componentMetadatas={componentMetadatas}
|
||||
simulatorProps={{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-plugin-outline-pane",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "Outline pane for Ali lowCode engine",
|
||||
"files": [
|
||||
"es",
|
||||
@ -13,10 +13,10 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@alifd/next": "^1.19.16",
|
||||
"@alilc/lowcode-designer": "1.0.17",
|
||||
"@alilc/lowcode-editor-core": "1.0.17",
|
||||
"@alilc/lowcode-types": "1.0.17",
|
||||
"@alilc/lowcode-utils": "1.0.17",
|
||||
"@alilc/lowcode-designer": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-editor-core": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-types": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-utils": "1.1.0-beta.1",
|
||||
"classnames": "^2.2.6",
|
||||
"react": "^16",
|
||||
"react-dom": "^16.7.0",
|
||||
|
||||
@ -5,11 +5,12 @@ import { OutlinePane } from './pane';
|
||||
|
||||
export const Backup = Symbol.for('backup-outline');
|
||||
|
||||
export class OutlineBackupPane extends PureComponent<PluginProps> {
|
||||
export class OutlineBackupPane extends PureComponent<any> {
|
||||
render() {
|
||||
return (
|
||||
<OutlinePane
|
||||
editor={globalContext.get('editor')}
|
||||
editor={this.props.engineEditor}
|
||||
engineEditor={this.props.engineEditor}
|
||||
config={{
|
||||
name: Backup,
|
||||
}}
|
||||
|
||||
@ -7,9 +7,15 @@ import './style.less';
|
||||
import { IEditor } from '@alilc/lowcode-types';
|
||||
import Filter from './filter';
|
||||
|
||||
interface Props { config: any; editor: IEditor }
|
||||
@observer
|
||||
export class OutlinePane extends Component<{ config: any; editor: IEditor }> {
|
||||
private main = new OutlineMain(globalContext.get('editor'), this.props.config.name || this.props.config.pluginKey);
|
||||
export class OutlinePane extends Component<any> {
|
||||
private main;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.main = new OutlineMain(this.props.engineEditor, this.props.config.name || this.props.config.pluginKey);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.main.purge();
|
||||
|
||||
@ -16,7 +16,8 @@ import { IconLock, IconUnlock } from '../icons';
|
||||
|
||||
|
||||
function emitOutlineEvent(type: string, treeNode: TreeNode, rest?: Record<string, unknown>) {
|
||||
const editor = globalContext.get(Editor);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const node = treeNode?.node;
|
||||
const npm = node?.componentMeta?.npm;
|
||||
const selected =
|
||||
|
||||
@ -67,7 +67,8 @@ export default class TreeView extends Component<{ tree: Tree }> {
|
||||
}
|
||||
} else {
|
||||
selection.select(id);
|
||||
const editor = globalContext.get(Editor);
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
|
||||
const selectedNode = designer.currentSelection?.getNodes()?.[0];
|
||||
const npm = selectedNode?.componentMeta?.npm;
|
||||
const selected =
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-rax-renderer",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "Rax renderer for Ali lowCode engine",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -30,8 +30,8 @@
|
||||
"build": "build-scripts build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@alilc/lowcode-renderer-core": "1.0.17",
|
||||
"@alilc/lowcode-utils": "1.0.17",
|
||||
"@alilc/lowcode-renderer-core": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-utils": "1.1.0-beta.1",
|
||||
"rax-find-dom-node": "^1.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-rax-simulator-renderer",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "rax simulator renderer for alibaba lowcode designer",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -13,10 +13,10 @@
|
||||
"build:umd": "build-scripts build --config build.umd.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@alilc/lowcode-designer": "1.0.17",
|
||||
"@alilc/lowcode-rax-renderer": "1.0.17",
|
||||
"@alilc/lowcode-types": "1.0.17",
|
||||
"@alilc/lowcode-utils": "1.0.17",
|
||||
"@alilc/lowcode-designer": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-rax-renderer": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-types": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-utils": "1.1.0-beta.1",
|
||||
"classnames": "^2.2.6",
|
||||
"driver-universal": "^3.1.3",
|
||||
"history": "^5.0.0",
|
||||
|
||||
@ -245,7 +245,6 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
|
||||
constructor() {
|
||||
this.dispose = host.connect(this, () => {
|
||||
// sync layout config
|
||||
// debugger;
|
||||
this._layout = host.project.get('config').layout;
|
||||
// todo: split with others, not all should recompute
|
||||
if (this._libraryMap !== host.libraryMap || this._componentsMap !== host.designer.componentsMap) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-react-renderer",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "react renderer for ali lowcode engine",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -22,7 +22,7 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@alifd/next": "^1.21.16",
|
||||
"@alilc/lowcode-renderer-core": "1.0.17"
|
||||
"@alilc/lowcode-renderer-core": "1.1.0-beta.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@alib/build-scripts": "^0.1.18",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-react-simulator-renderer",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "react simulator renderer for alibaba lowcode designer",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -17,10 +17,10 @@
|
||||
"test:cov": "build-scripts test --config build.test.json --jest-coverage"
|
||||
},
|
||||
"dependencies": {
|
||||
"@alilc/lowcode-designer": "1.0.17",
|
||||
"@alilc/lowcode-react-renderer": "1.0.17",
|
||||
"@alilc/lowcode-types": "1.0.17",
|
||||
"@alilc/lowcode-utils": "1.0.17",
|
||||
"@alilc/lowcode-designer": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-react-renderer": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-types": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-utils": "1.1.0-beta.1",
|
||||
"classnames": "^2.2.6",
|
||||
"mobx": "^6.3.0",
|
||||
"mobx-react": "^7.2.0",
|
||||
|
||||
@ -171,6 +171,7 @@ class Renderer extends Component<{
|
||||
this.schemaChangedSymbol = false;
|
||||
|
||||
if (!container.autoRender || isRendererDetached()) return null;
|
||||
|
||||
return (
|
||||
<LowCodeRenderer
|
||||
locale={locale}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-renderer-core",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "renderer core",
|
||||
"license": "MIT",
|
||||
"main": "lib/index.js",
|
||||
@ -16,8 +16,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@alilc/lowcode-datasource-engine": "^1.0.0",
|
||||
"@alilc/lowcode-types": "1.0.17",
|
||||
"@alilc/lowcode-utils": "1.0.17",
|
||||
"@alilc/lowcode-types": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-utils": "1.1.0-beta.1",
|
||||
"classnames": "^2.2.6",
|
||||
"debug": "^4.1.1",
|
||||
"fetch-jsonp": "^1.1.3",
|
||||
@ -33,7 +33,7 @@
|
||||
"devDependencies": {
|
||||
"@alib/build-scripts": "^0.1.18",
|
||||
"@alifd/next": "^1.26.0",
|
||||
"@alilc/lowcode-designer": "1.0.17",
|
||||
"@alilc/lowcode-designer": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-test-mate": "^1.0.1",
|
||||
"@babel/plugin-transform-typescript": "^7.16.8",
|
||||
"@testing-library/react": "^11.2.2",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-shell",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "Shell Layer for AliLowCodeEngine",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -15,11 +15,11 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@alilc/lowcode-designer": "1.0.17",
|
||||
"@alilc/lowcode-editor-core": "1.0.17",
|
||||
"@alilc/lowcode-editor-skeleton": "1.0.17",
|
||||
"@alilc/lowcode-types": "1.0.17",
|
||||
"@alilc/lowcode-utils": "1.0.17",
|
||||
"@alilc/lowcode-designer": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-editor-core": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-editor-skeleton": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-types": "1.1.0-beta.1",
|
||||
"@alilc/lowcode-utils": "1.1.0-beta.1",
|
||||
"classnames": "^2.2.6",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.15.5",
|
||||
|
||||
@ -48,7 +48,7 @@ import {
|
||||
shallowIntl as innerShallowIntl,
|
||||
createIntl as innerCreateIntl,
|
||||
intl as innerIntl,
|
||||
createSetterContent as innerCreateSetterContent,
|
||||
// createSetterContent as innerCreateSetterContent,
|
||||
globalLocale as innerGlobalLocale,
|
||||
obx as innerObx,
|
||||
observable as innerObservable,
|
||||
@ -59,7 +59,6 @@ import {
|
||||
} from '@alilc/lowcode-editor-core';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
|
||||
class DesignerCabin implements IPublicCommonDesignerCabin {
|
||||
private readonly [editorSymbol]: Editor;
|
||||
/**
|
||||
@ -225,6 +224,11 @@ class Utils implements IPublicCommonUtils {
|
||||
}
|
||||
|
||||
class EditorCabin {
|
||||
private readonly [editorSymbol]: Editor;
|
||||
|
||||
constructor(editor: Editor) {
|
||||
this[editorSymbol] = editor;
|
||||
}
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
@ -263,9 +267,10 @@ class EditorCabin {
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
createSetterContent(setter: any, props: Record<string, any>): ReactNode {
|
||||
return innerCreateSetterContent(setter, props);
|
||||
}
|
||||
createSetterContent = (setter: any, props: Record<string, any>): ReactNode => {
|
||||
const setters = this[editorSymbol].get('setters');
|
||||
return setters.createSetterContent(setter, props);
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated
|
||||
@ -327,7 +332,7 @@ export default class Common implements IPublicApiCommon {
|
||||
constructor(editor: Editor, skeleton: InnerSkeleton) {
|
||||
this.__designerCabin = new DesignerCabin(editor);
|
||||
this.__skeletonCabin = new SkeletonCabin(skeleton);
|
||||
this.__editorCabin = new EditorCabin();
|
||||
this.__editorCabin = new EditorCabin(editor);
|
||||
this.__utils = new Utils();
|
||||
}
|
||||
|
||||
|
||||
@ -106,6 +106,7 @@ export default class ComponentMeta implements IPublicModelComponentMeta {
|
||||
return this[componentMetaSymbol].getMetadata();
|
||||
}
|
||||
|
||||
isComponentMeta = true;
|
||||
/**
|
||||
* check if the current node could be placed in parent node
|
||||
* @param my
|
||||
|
||||
@ -33,7 +33,7 @@ import Canvas from './canvas';
|
||||
import ModalNodesManager from './modal-nodes-manager';
|
||||
import { documentSymbol, editorSymbol, nodeSymbol } from './symbols';
|
||||
|
||||
const Events = {
|
||||
export const Events = {
|
||||
IMPORT_SCHEMA: 'shell.document.importSchema',
|
||||
};
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ import {
|
||||
import { dragonSymbol } from './symbols';
|
||||
import LocateEvent from './locate-event';
|
||||
import DragObject from './drag-object';
|
||||
import { globalContext } from '@alilc/lowcode-editor-core';
|
||||
import {
|
||||
IPublicModelDragon,
|
||||
IPublicModelLocateEvent,
|
||||
@ -13,11 +14,26 @@ import {
|
||||
DragNodeDataObject,
|
||||
} from '@alilc/lowcode-types';
|
||||
|
||||
export default class Dragon implements IPublicModelDragon {
|
||||
private readonly [dragonSymbol]: InnerDragon;
|
||||
export const innerDragonSymbol = Symbol('innerDragonSymbol');
|
||||
|
||||
|
||||
export default class Dragon implements IPublicModelDragon {
|
||||
constructor(dragon: InnerDragon) {
|
||||
this[dragonSymbol] = dragon;
|
||||
this[innerDragonSymbol] = dragon;
|
||||
}
|
||||
|
||||
private readonly [innerDragonSymbol]: InnerDragon;
|
||||
|
||||
get [dragonSymbol](): any {
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
let editor = globalContext.get('editor');
|
||||
|
||||
if (workSpace.isActive) {
|
||||
editor = workSpace.window.editor;
|
||||
}
|
||||
|
||||
const designer = editor.get('designer');
|
||||
return designer.dragon;
|
||||
}
|
||||
|
||||
static create(dragon: InnerDragon | null): IPublicModelDragon | null {
|
||||
|
||||
@ -9,8 +9,11 @@ type EventOptions = {
|
||||
prefix: string;
|
||||
};
|
||||
|
||||
const innerEditorSymbol = Symbol('editor');
|
||||
|
||||
export default class Event implements IPublicApiEvent {
|
||||
private readonly [editorSymbol]: InnerEditor;
|
||||
private readonly [innerEditorSymbol]: InnerEditor;
|
||||
// private readonly [editorSymbol]: InnerEditor;
|
||||
private readonly options: EventOptions;
|
||||
|
||||
// TODO:
|
||||
@ -19,8 +22,20 @@ export default class Event implements IPublicApiEvent {
|
||||
*/
|
||||
readonly names = [];
|
||||
|
||||
constructor(editor: InnerEditor, options: EventOptions) {
|
||||
this[editorSymbol] = editor;
|
||||
get [editorSymbol](): InnerEditor {
|
||||
if (this.workspaceMode) {
|
||||
return this[innerEditorSymbol];
|
||||
}
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
if (workSpace.isActive) {
|
||||
return workSpace.window.editor;
|
||||
}
|
||||
|
||||
return this[innerEditorSymbol];
|
||||
}
|
||||
|
||||
constructor(editor: InnerEditor, options: EventOptions, public workspaceMode = false) {
|
||||
this[innerEditorSymbol] = editor;
|
||||
this.options = options;
|
||||
if (!this.options.prefix) {
|
||||
logger.warn('prefix is required while initializing Event');
|
||||
|
||||
@ -1,9 +1,29 @@
|
||||
import { hotkey } from '@alilc/lowcode-editor-core';
|
||||
import { globalContext, Hotkey as InnerHotkey } from '@alilc/lowcode-editor-core';
|
||||
import { hotkeySymbol } from './symbols';
|
||||
import { Disposable, HotkeyCallback, IPublicApiHotkey } from '@alilc/lowcode-types';
|
||||
|
||||
const innerHotkeySymbol = Symbol('innerHotkey');
|
||||
|
||||
export default class Hotkey implements IPublicApiHotkey {
|
||||
get callbacks() {
|
||||
return hotkey.callBacks;
|
||||
private readonly [innerHotkeySymbol]: InnerHotkey;
|
||||
get [hotkeySymbol](): InnerHotkey {
|
||||
if (this.workspaceMode) {
|
||||
return this[innerHotkeySymbol];
|
||||
}
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
if (workSpace.isActive) {
|
||||
return workSpace.window.innerHotkey;
|
||||
}
|
||||
|
||||
return this[innerHotkeySymbol];
|
||||
}
|
||||
|
||||
constructor(hotkey: InnerHotkey, public name: string = 'unknown', public workspaceMode: boolean = false) {
|
||||
this[innerHotkeySymbol] = hotkey;
|
||||
}
|
||||
|
||||
get callbacks(): any {
|
||||
return this[hotkeySymbol].callBacks;
|
||||
}
|
||||
/**
|
||||
* @deprecated
|
||||
@ -19,9 +39,9 @@ export default class Hotkey implements IPublicApiHotkey {
|
||||
* @returns
|
||||
*/
|
||||
bind(combos: string[] | string, callback: HotkeyCallback, action?: string): Disposable {
|
||||
hotkey.bind(combos, callback, action);
|
||||
this[hotkeySymbol].bind(combos, callback, action);
|
||||
return () => {
|
||||
hotkey.unbind(combos, callback, action);
|
||||
this[hotkeySymbol].unbind(combos, callback, action);
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -15,6 +15,7 @@ import Dragon from './dragon';
|
||||
import SettingPropEntry from './setting-prop-entry';
|
||||
import SettingTopEntry from './setting-top-entry';
|
||||
import Common from './common';
|
||||
import Plugins from './plugins';
|
||||
|
||||
export * from './symbols';
|
||||
|
||||
@ -44,4 +45,5 @@ export {
|
||||
Dragon,
|
||||
Common,
|
||||
getEvent,
|
||||
Plugins,
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
import { Editor } from '@alilc/lowcode-editor-core';
|
||||
import { Editor, globalContext } from '@alilc/lowcode-editor-core';
|
||||
import {
|
||||
Designer,
|
||||
registerMetadataTransducer,
|
||||
@ -19,13 +19,31 @@ import {
|
||||
import { editorSymbol, designerSymbol } from './symbols';
|
||||
import ComponentMeta from './component-meta';
|
||||
|
||||
const innerEditorSymbol = Symbol('editor');
|
||||
export default class Material implements IPublicApiMaterial {
|
||||
private readonly [editorSymbol]: Editor;
|
||||
private readonly [designerSymbol]: Designer;
|
||||
// private readonly [editorSymbol]: Editor;
|
||||
private readonly [innerEditorSymbol]: Editor;
|
||||
// private readonly [designerSymbol]: Designer;
|
||||
|
||||
constructor(editor: Editor) {
|
||||
this[editorSymbol] = editor;
|
||||
this[designerSymbol] = editor.get('designer')!;
|
||||
get [editorSymbol](): Editor {
|
||||
if (this.workspaceMode) {
|
||||
return this[innerEditorSymbol];
|
||||
}
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
if (workSpace.isActive) {
|
||||
return workSpace.window.editor;
|
||||
}
|
||||
|
||||
return this[innerEditorSymbol];
|
||||
}
|
||||
|
||||
get [designerSymbol](): Designer {
|
||||
return this[editorSymbol].get('designer')!;
|
||||
}
|
||||
|
||||
constructor(editor: Editor, public workspaceMode: boolean = false, public name: string = 'unknown') {
|
||||
this[innerEditorSymbol] = editor;
|
||||
// this[designerSymbol] = editor.get('designer')!;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -52,6 +70,10 @@ export default class Material implements IPublicApiMaterial {
|
||||
return this[editorSymbol].get('assets');
|
||||
}
|
||||
|
||||
async asyncGetAssets() {
|
||||
return await this[editorSymbol].get('assets');
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载增量的「资产包」结构，该增量包会与原有的合并
|
||||
* @param incrementalAssets
|
||||
|
||||
@ -10,11 +10,11 @@ export default class NodeChildren implements IPublicModelNodeChildren {
|
||||
this[nodeChildrenSymbol] = nodeChildren;
|
||||
}
|
||||
|
||||
static create(nodeChldren: InnerNodeChildren | null): IPublicModelNodeChildren | null {
|
||||
if (!nodeChldren) {
|
||||
static create(nodeChildren: InnerNodeChildren | null): IPublicModelNodeChildren | null {
|
||||
if (!nodeChildren) {
|
||||
return null;
|
||||
}
|
||||
return new NodeChildren(nodeChldren);
|
||||
return new NodeChildren(nodeChildren);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -527,4 +527,8 @@ export default class Node implements IPublicModelNode {
|
||||
internalToShellNode() {
|
||||
return this;
|
||||
}
|
||||
|
||||
canPerformAction(actionName: string): boolean {
|
||||
return this[nodeSymbol].canPerformAction(actionName);
|
||||
}
|
||||
}
|
||||
|
||||
60
packages/shell/src/plugins.ts
Normal file
60
packages/shell/src/plugins.ts
Normal file
@ -0,0 +1,60 @@
|
||||
import {
|
||||
LowCodePluginManager,
|
||||
} from '@alilc/lowcode-designer';
|
||||
import { globalContext } from '@alilc/lowcode-editor-core';
|
||||
import {
|
||||
IPublicApiPlugins,
|
||||
} from '@alilc/lowcode-types';
|
||||
import { pluginsSymbol } from './symbols';
|
||||
|
||||
const innerPluginsSymbol = Symbol('plugin');
|
||||
export default class Plugins implements IPublicApiPlugins {
|
||||
private readonly [innerPluginsSymbol]: LowCodePluginManager;
|
||||
get [pluginsSymbol](): LowCodePluginManager {
|
||||
if (this.workspaceMode) {
|
||||
return this[innerPluginsSymbol];
|
||||
}
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
if (workSpace.isActive) {
|
||||
return workSpace.window.innerPlugins;
|
||||
}
|
||||
|
||||
return this[innerPluginsSymbol];
|
||||
}
|
||||
|
||||
constructor(plugins: LowCodePluginManager, public workspaceMode: boolean = false) {
|
||||
this[innerPluginsSymbol] = plugins;
|
||||
}
|
||||
|
||||
async register(
|
||||
pluginConfigCreator: (ctx: any, options: any) => any,
|
||||
options?: any,
|
||||
registerOptions?: any,
|
||||
): Promise<void> {
|
||||
await this[pluginsSymbol].register(pluginConfigCreator, options, registerOptions);
|
||||
}
|
||||
|
||||
async init(registerOptions: any) {
|
||||
await this[pluginsSymbol].init(registerOptions);
|
||||
}
|
||||
|
||||
async getPluginPreference(pluginName: string) {
|
||||
await this[pluginsSymbol].getPluginPreference(pluginName);
|
||||
}
|
||||
|
||||
toProxy() {
|
||||
return new Proxy(this, {
|
||||
get(target, prop, receiver) {
|
||||
const _target = target[pluginsSymbol];
|
||||
if (_target.pluginsMap.has(prop as string)) {
|
||||
// 禁用态的插件，直接返回 undefined
|
||||
if (_target.pluginsMap.get(prop as string)!.disabled) {
|
||||
return undefined;
|
||||
}
|
||||
return _target.pluginsMap.get(prop as string)?.toProxy();
|
||||
}
|
||||
return Reflect.get(target, prop, receiver);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -3,6 +3,7 @@ import {
|
||||
Project as InnerProject,
|
||||
TransformStage,
|
||||
} from '@alilc/lowcode-designer';
|
||||
import { globalContext } from '@alilc/lowcode-editor-core';
|
||||
import {
|
||||
RootSchema,
|
||||
ProjectSchema,
|
||||
@ -12,18 +13,32 @@ import {
|
||||
IPublicModelDocumentModel,
|
||||
PropsTransducer,
|
||||
} from '@alilc/lowcode-types';
|
||||
|
||||
|
||||
import DocumentModel from './document-model';
|
||||
import SimulatorHost from './simulator-host';
|
||||
import { editorSymbol, projectSymbol, simulatorHostSymbol, simulatorRendererSymbol, documentSymbol } from './symbols';
|
||||
|
||||
const innerProjectSymbol = Symbol('project');
|
||||
export default class Project implements IPublicApiProject {
|
||||
private readonly [projectSymbol]: InnerProject;
|
||||
private readonly [editorSymbol]: IEditor;
|
||||
private readonly [innerProjectSymbol]: InnerProject;
|
||||
private [simulatorHostSymbol]: BuiltinSimulatorHost;
|
||||
private [simulatorRendererSymbol]: any;
|
||||
get [projectSymbol]() {
|
||||
if (this.workspaceMode) {
|
||||
return this[innerProjectSymbol];
|
||||
}
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
if (workSpace.isActive) {
|
||||
return workSpace.window.innerProject;
|
||||
}
|
||||
|
||||
constructor(project: InnerProject) {
|
||||
this[projectSymbol] = project;
|
||||
return this[innerProjectSymbol];
|
||||
}
|
||||
|
||||
constructor(project: InnerProject, public workspaceMode: boolean = false) {
|
||||
this[innerProjectSymbol] = project;
|
||||
this[editorSymbol] = project?.designer.editor;
|
||||
}
|
||||
|
||||
@ -122,6 +137,7 @@ export default class Project implements IPublicApiProject {
|
||||
*/
|
||||
importSchema(schema?: ProjectSchema): void {
|
||||
this[projectSymbol].load(schema, true);
|
||||
// this[editorSymbol].emit(Events.IMPORT_SCHEMA, schema);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -92,7 +92,7 @@ export default class Selection implements IPublicModelSelection {
|
||||
* getTopNodes() will return [A, B], subA will be removed
|
||||
* @returns
|
||||
*/
|
||||
getTopNodes(): Array<IPublicModelNode | null> {
|
||||
return this[selectionSymbol].getTopNodes().map((node: InnerNode) => Node.create(node));
|
||||
getTopNodes(includeRoot: boolean = false): Array<IPublicModelNode | null> {
|
||||
return this[selectionSymbol].getTopNodes(includeRoot).map((node: InnerNode) => Node.create(node));
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,38 @@
|
||||
import { getSetter, registerSetter, getSettersMap } from '@alilc/lowcode-editor-core';
|
||||
import { CustomView, IPublicApiSetters, RegisteredSetter } from '@alilc/lowcode-types';
|
||||
import { Setters as InnerSetters, globalContext } from '@alilc/lowcode-editor-core';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
const innerSettersSymbol = Symbol('setters');
|
||||
const settersSymbol = Symbol('setters');
|
||||
|
||||
export default class Setters implements IPublicApiSetters {
|
||||
readonly [innerSettersSymbol]: InnerSetters;
|
||||
|
||||
get [settersSymbol](): InnerSetters {
|
||||
if (this.workspaceMode) {
|
||||
return this[innerSettersSymbol];
|
||||
}
|
||||
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
if (workSpace.isActive) {
|
||||
return workSpace.window.innerSetters;
|
||||
}
|
||||
|
||||
return this[innerSettersSymbol];
|
||||
}
|
||||
|
||||
constructor(innerSetters: InnerSetters, readonly workspaceMode = false) {
|
||||
this[innerSettersSymbol] = innerSetters;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取指定 setter
|
||||
* @param type
|
||||
* @returns
|
||||
*/
|
||||
getSetter(type: string): RegisteredSetter | null {
|
||||
return getSetter(type);
|
||||
}
|
||||
getSetter = (type: string) => {
|
||||
return this[settersSymbol].getSetter(type);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取已注册的所有 settersMap
|
||||
@ -18,7 +41,7 @@ export default class Setters implements IPublicApiSetters {
|
||||
getSettersMap(): Map<string, RegisteredSetter & {
|
||||
type: string;
|
||||
}> {
|
||||
return getSettersMap();
|
||||
return this[settersSymbol].getSettersMap();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -27,10 +50,14 @@ export default class Setters implements IPublicApiSetters {
|
||||
* @param setter
|
||||
* @returns
|
||||
*/
|
||||
registerSetter(
|
||||
registerSetter = (
|
||||
typeOrMaps: string | { [key: string]: CustomView | RegisteredSetter },
|
||||
setter?: CustomView | RegisteredSetter | undefined,
|
||||
) {
|
||||
return registerSetter(typeOrMaps, setter);
|
||||
}
|
||||
) => {
|
||||
return this[settersSymbol].registerSetter(typeOrMaps, setter);
|
||||
};
|
||||
|
||||
createSetterContent = (setter: any, props: Record<string, any>): ReactNode => {
|
||||
return this[settersSymbol].createSetterContent(setter, props);
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { globalContext } from '@alilc/lowcode-editor-core';
|
||||
import {
|
||||
Skeleton as InnerSkeleton,
|
||||
SkeletonEvents,
|
||||
@ -5,11 +6,24 @@ import {
|
||||
import { skeletonSymbol } from './symbols';
|
||||
import { IPublicApiSkeleton, IWidgetBaseConfig, IWidgetConfigArea } from '@alilc/lowcode-types';
|
||||
|
||||
const innerSkeletonSymbol = Symbol('skeleton');
|
||||
export default class Skeleton implements IPublicApiSkeleton {
|
||||
private readonly [skeletonSymbol]: InnerSkeleton;
|
||||
private readonly [innerSkeletonSymbol]: InnerSkeleton;
|
||||
|
||||
constructor(skeleton: InnerSkeleton) {
|
||||
this[skeletonSymbol] = skeleton;
|
||||
get [skeletonSymbol]() {
|
||||
if (this.workspaceMode) {
|
||||
return this[innerSkeletonSymbol];
|
||||
}
|
||||
const workSpace = globalContext.get('workSpace');
|
||||
if (workSpace.isActive) {
|
||||
return workSpace.window.innerSkeleton;
|
||||
}
|
||||
|
||||
return this[innerSkeletonSymbol];
|
||||
}
|
||||
|
||||
constructor(skeleton: InnerSkeleton, readonly workspaceMode: boolean = false) {
|
||||
this[innerSkeletonSymbol] = skeleton;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -24,4 +24,6 @@ export const simulatorHostSymbol = Symbol('simulatorHost');
|
||||
export const simulatorRendererSymbol = Symbol('simulatorRenderer');
|
||||
export const dragObjectSymbol = Symbol('dragObject');
|
||||
export const locateEventSymbol = Symbol('locateEvent');
|
||||
export const designerCabinSymbol = Symbol('designerCabin');
|
||||
export const designerCabinSymbol = Symbol('designerCabin');
|
||||
export const hotkeySymbol = Symbol('hotkey');
|
||||
export const pluginsSymbol = Symbol('plugins');
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-types",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "Types for Ali lowCode engine",
|
||||
"files": [
|
||||
"es",
|
||||
|
||||
@ -132,6 +132,11 @@ export interface EngineOptions {
|
||||
* 配置指定节点为根组件
|
||||
*/
|
||||
focusNodeSelector?: (rootNode: Node) => Node;
|
||||
|
||||
/**
|
||||
* 开启应用级设计模式
|
||||
*/
|
||||
enableWorkspaceMode?: boolean;
|
||||
}
|
||||
|
||||
export interface IEngineConfig {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { EitherOr } from './utils';
|
||||
|
||||
/**
|
||||
* npm 源引入完整描述对象
|
||||
*/
|
||||
|
||||
@ -21,6 +21,8 @@ export interface SettingTarget {
|
||||
*/
|
||||
readonly editor: IEditor;
|
||||
|
||||
readonly setters: any;
|
||||
|
||||
/**
|
||||
* 访问路径
|
||||
*/
|
||||
|
||||
@ -5,4 +5,5 @@ export * from './material';
|
||||
export * from './project';
|
||||
export * from './setters';
|
||||
export * from './simulator-host';
|
||||
export * from './skeleton';
|
||||
export * from './skeleton';
|
||||
export * from './plugins';
|
||||
|
||||
7
packages/types/src/shell/api/plugins.ts
Normal file
7
packages/types/src/shell/api/plugins.ts
Normal file
@ -0,0 +1,7 @@
|
||||
export interface IPublicApiPlugins {
|
||||
register(
|
||||
pluginConfigCreator: (ctx: any, options: any) => any,
|
||||
options?: any,
|
||||
registerOptions?: any,
|
||||
): Promise<void>;
|
||||
}
|
||||
@ -5,6 +5,8 @@ import { IPublicApiProject } from '../api';
|
||||
import { PropChangeOptions } from '../index';
|
||||
import { IPublicModelModalNodesManager } from './modal-nodes-manager';
|
||||
import { IPublicModelNode } from './node';
|
||||
import { IPublicModelSelection } from './selection';
|
||||
import { IPublicModelHistory } from './history';
|
||||
|
||||
|
||||
export interface IPublicModelDocumentModel {
|
||||
@ -16,6 +18,10 @@ export interface IPublicModelDocumentModel {
|
||||
|
||||
set id(id);
|
||||
|
||||
selection: IPublicModelSelection;
|
||||
|
||||
history: IPublicModelHistory;
|
||||
|
||||
/**
|
||||
* 获取当前文档所属的 project
|
||||
* @returns
|
||||
|
||||
@ -12,7 +12,6 @@ import { IPublicModelNodeChildren } from './node-children';
|
||||
import { IPublicModelComponentMeta } from './component-meta';
|
||||
|
||||
export interface IPublicModelNode {
|
||||
|
||||
/**
|
||||
* 节点 id
|
||||
*/
|
||||
@ -313,4 +312,11 @@ export interface IPublicModelNode {
|
||||
* @returns Boolean
|
||||
*/
|
||||
get isRGLContainer();
|
||||
|
||||
/**
|
||||
* 是否可执行某 action
|
||||
* @param actionName action 名字
|
||||
* @returns boolean
|
||||
*/
|
||||
canPerformAction(actionName: string): boolean;
|
||||
}
|
||||
|
||||
@ -61,5 +61,5 @@ export interface IPublicModelSelection {
|
||||
* getTopNodes() will return [A, B], subA will be removed
|
||||
* @returns
|
||||
*/
|
||||
getTopNodes(): Array<IPublicModelNode | null>;
|
||||
getTopNodes(includeRoot?: boolean): Array<IPublicModelNode | null>;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-utils",
|
||||
"version": "1.0.17",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "Utils for Ali lowCode engine",
|
||||
"files": [
|
||||
"lib",
|
||||
@ -14,7 +14,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@alifd/next": "^1.19.16",
|
||||
"@alilc/lowcode-types": "1.0.17",
|
||||
"@alilc/lowcode-types": "1.1.0-beta.1",
|
||||
"lodash": "^4.17.21",
|
||||
"mobx": "^6.3.0",
|
||||
"react": "^16",
|
||||
|
||||
@ -53,10 +53,9 @@ export function megreAssets(assets: AssetsJson, incrementalAssets: AssetsJson):
|
||||
}
|
||||
|
||||
if (incrementalAssets.components) {
|
||||
assets.components = [...assets.components, ...incrementalAssets.components];
|
||||
assets.components = [...(assets.components || []), ...incrementalAssets.components];
|
||||
}
|
||||
|
||||
|
||||
megreAssetsComponentList(assets, incrementalAssets, 'componentList');
|
||||
megreAssetsComponentList(assets, incrementalAssets, 'bizComponentList');
|
||||
|
||||
|
||||
5
packages/workspace/build.json
Normal file
5
packages/workspace/build.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"plugins": [
|
||||
"build-plugin-component"
|
||||
]
|
||||
}
|
||||
6
packages/workspace/build.test.json
Normal file
6
packages/workspace/build.test.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"plugins": [
|
||||
"build-plugin-component",
|
||||
"@alilc/lowcode-test-mate/plugin/index.ts"
|
||||
]
|
||||
}
|
||||
9
packages/workspace/jest.config.js
Normal file
9
packages/workspace/jest.config.js
Normal file
@ -0,0 +1,9 @@
|
||||
module.exports = {
|
||||
moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
|
||||
collectCoverage: true,
|
||||
collectCoverageFrom: [
|
||||
'src/**/*.{ts,tsx}',
|
||||
'!**/node_modules/**',
|
||||
'!**/vendor/**',
|
||||
],
|
||||
};
|
||||
62
packages/workspace/package.json
Normal file
62
packages/workspace/package.json
Normal file
@ -0,0 +1,62 @@
|
||||
{
|
||||
"name": "@alilc/lowcode-workspace",
|
||||
"version": "1.1.0-beta.1",
|
||||
"description": "Shell Layer for AliLowCodeEngine",
|
||||
"main": "lib/index.js",
|
||||
"private": true,
|
||||
"module": "es/index.js",
|
||||
"files": [
|
||||
"lib",
|
||||
"es"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "build-scripts build --skip-demo",
|
||||
"test": "build-scripts test --config build.test.json",
|
||||
"test:cov": "build-scripts test --config build.test.json --jest-coverage"
|
||||
},
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@alilc/lowcode-designer": "1.0.15",
|
||||
"@alilc/lowcode-editor-core": "1.0.15",
|
||||
"@alilc/lowcode-editor-skeleton": "1.0.15",
|
||||
"@alilc/lowcode-types": "1.0.15",
|
||||
"@alilc/lowcode-utils": "1.0.15",
|
||||
"classnames": "^2.2.6",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.15.5",
|
||||
"react": "^16",
|
||||
"react-dom": "^16.7.0",
|
||||
"zen-logger": "^1.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@alib/build-scripts": "^0.1.29",
|
||||
"@alilc/lowcode-test-mate": "^1.0.1",
|
||||
"@testing-library/react": "^11.2.2",
|
||||
"@types/classnames": "^2.2.7",
|
||||
"@types/jest": "^26.0.16",
|
||||
"@types/lodash": "^4.14.165",
|
||||
"@types/medium-editor": "^5.0.3",
|
||||
"@types/node": "^13.7.1",
|
||||
"@types/react": "^16",
|
||||
"@types/react-dom": "^16",
|
||||
"babel-jest": "^26.5.2",
|
||||
"build-plugin-component": "^1.0.0",
|
||||
"build-scripts-config": "^3.0.3",
|
||||
"jest": "^26.6.3",
|
||||
"lodash": "^4.17.20",
|
||||
"moment": "^2.29.1",
|
||||
"typescript": "^4.0.3"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public",
|
||||
"registry": "https://registry.npmjs.org/"
|
||||
},
|
||||
"resolutions": {
|
||||
"@builder/babel-preset-ice": "1.0.1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "http",
|
||||
"url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/shell"
|
||||
},
|
||||
"gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6"
|
||||
}
|
||||
133
packages/workspace/src/base-context.ts
Normal file
133
packages/workspace/src/base-context.ts
Normal file
@ -0,0 +1,133 @@
|
||||
import { Editor, engineConfig, Setters as InnerSetters, Hotkey as InnerHotkey } from '@alilc/lowcode-editor-core';
|
||||
import {
|
||||
Designer,
|
||||
ILowCodePluginContextApiAssembler,
|
||||
LowCodePluginManager,
|
||||
ILowCodePluginContextPrivate,
|
||||
Project as InnerProject,
|
||||
} from '@alilc/lowcode-designer';
|
||||
import {
|
||||
Skeleton as InnerSkeleton,
|
||||
} from '@alilc/lowcode-editor-skeleton';
|
||||
import {
|
||||
// EditorWindow,
|
||||
WorkSpace,
|
||||
} from '@alilc/lowcode-workspace';
|
||||
|
||||
import {
|
||||
Hotkey,
|
||||
Plugins,
|
||||
Project,
|
||||
Skeleton,
|
||||
Setters,
|
||||
Material,
|
||||
Event,
|
||||
Common,
|
||||
} from '@alilc/lowcode-shell';
|
||||
import { getLogger } from '@alilc/lowcode-utils';
|
||||
import { setterRegistry } from 'engine/src/inner-plugins/setter-registry';
|
||||
import { componentMetaParser } from 'engine/src/inner-plugins/component-meta-parser';
|
||||
import defaultPanelRegistry from 'engine/src/inner-plugins/default-panel-registry';
|
||||
import { builtinHotkey } from 'engine/src/inner-plugins/builtin-hotkey';
|
||||
import { EditorWindow } from './editor-window/context';
|
||||
import { shellModelFactory } from './shell-model-factory';
|
||||
|
||||
export class BasicContext {
|
||||
skeleton: Skeleton;
|
||||
plugins: Plugins;
|
||||
project: Project;
|
||||
setters: Setters;
|
||||
material: Material;
|
||||
config;
|
||||
event;
|
||||
logger;
|
||||
hotkey: Hotkey;
|
||||
innerProject: InnerProject;
|
||||
editor: Editor;
|
||||
designer: Designer;
|
||||
registerInnerPlugins: () => Promise<void>;
|
||||
innerSetters: InnerSetters;
|
||||
innerSkeleton: any;
|
||||
innerHotkey: InnerHotkey;
|
||||
innerPlugins: LowCodePluginManager;
|
||||
|
||||
constructor(workSpace: WorkSpace, name: string, public editorWindow?: EditorWindow) {
|
||||
const editor = new Editor(name, true);
|
||||
|
||||
const innerSkeleton = new InnerSkeleton(editor, name);
|
||||
editor.set('skeleton' as any, innerSkeleton);
|
||||
|
||||
const designer: Designer = new Designer({
|
||||
editor,
|
||||
name,
|
||||
shellModelFactory,
|
||||
});
|
||||
editor.set('designer' as any, designer);
|
||||
|
||||
const { project: innerProject } = designer;
|
||||
const innerHotkey = new InnerHotkey(name);
|
||||
const hotkey = new Hotkey(innerHotkey, name, true);
|
||||
const innerSetters = new InnerSetters(name);
|
||||
const setters = new Setters(innerSetters, true);
|
||||
const material = new Material(editor, true, name);
|
||||
const project = new Project(innerProject, true);
|
||||
const config = engineConfig;
|
||||
const event = new Event(editor, { prefix: 'common' });
|
||||
const logger = getLogger({ level: 'warn', bizName: 'common' });
|
||||
const skeleton = new Skeleton(innerSkeleton, true);
|
||||
editor.set('setters', setters);
|
||||
editor.set('project', project);
|
||||
editor.set('material', material);
|
||||
editor.set('hotkey', hotkey);
|
||||
editor.set('innerHotkey', innerHotkey);
|
||||
this.innerSetters = innerSetters;
|
||||
this.innerSkeleton = innerSkeleton;
|
||||
this.skeleton = skeleton;
|
||||
this.innerProject = innerProject;
|
||||
this.project = project;
|
||||
this.setters = setters;
|
||||
this.material = material;
|
||||
this.config = config;
|
||||
this.event = event;
|
||||
this.logger = logger;
|
||||
this.hotkey = hotkey;
|
||||
this.innerHotkey = innerHotkey;
|
||||
this.editor = editor;
|
||||
this.designer = designer;
|
||||
const common = new Common(editor, innerSkeleton);
|
||||
let plugins: any;
|
||||
|
||||
const pluginContextApiAssembler: ILowCodePluginContextApiAssembler = {
|
||||
assembleApis: (context: ILowCodePluginContextPrivate) => {
|
||||
context.hotkey = hotkey;
|
||||
context.project = project;
|
||||
context.skeleton = skeleton;
|
||||
context.setters = setters;
|
||||
context.material = material;
|
||||
context.event = event;
|
||||
context.config = config;
|
||||
context.common = common;
|
||||
context.plugins = plugins;
|
||||
},
|
||||
};
|
||||
|
||||
const innerPlugins = new LowCodePluginManager(pluginContextApiAssembler, name);
|
||||
this.innerPlugins = innerPlugins;
|
||||
plugins = new Plugins(innerPlugins, true).toProxy();
|
||||
editor.set('plugins' as any, plugins);
|
||||
editor.set('innerPlugins' as any, innerPlugins);
|
||||
this.plugins = plugins;
|
||||
|
||||
// 注册一批内置插件
|
||||
this.registerInnerPlugins = async function registerPlugins() {
|
||||
await plugins.register(componentMetaParser(designer));
|
||||
await plugins.register(setterRegistry);
|
||||
await plugins.register(defaultPanelRegistry(editor, designer));
|
||||
await plugins.register(builtinHotkey);
|
||||
};
|
||||
}
|
||||
|
||||
// get project() {
|
||||
// return this.editorWindow ? this.editorWindow.project : this._project;
|
||||
// }
|
||||
}
|
||||
4
packages/workspace/src/context.ts
Normal file
4
packages/workspace/src/context.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { createContext } from 'react';
|
||||
import { Skeleton } from './skeleton';
|
||||
|
||||
export const SkeletonContext = createContext<Skeleton>({} as any);
|
||||
36
packages/workspace/src/editor-view/context.ts
Normal file
36
packages/workspace/src/editor-view/context.ts
Normal file
@ -0,0 +1,36 @@
|
||||
import { makeObservable, obx, runInAction } from '@alilc/lowcode-editor-core';
|
||||
import { EditorViewOptions, EditorWindow } from '@alilc/lowcode-workspace';
|
||||
import { flow } from 'mobx';
|
||||
import { BasicContext } from '../base-context';
|
||||
|
||||
export class Context extends BasicContext {
|
||||
name = 'editor-view';
|
||||
|
||||
constructor(public workspace: any, public editorWindow: EditorWindow, public editorView: EditorViewOptions) {
|
||||
super(workspace, editorView.name, editorWindow);
|
||||
this.name = editorView.name;
|
||||
makeObservable(this);
|
||||
}
|
||||
|
||||
@obx _activate = false;
|
||||
|
||||
setActivate = (_activate: boolean) => {
|
||||
this._activate = _activate;
|
||||
this.innerHotkey.activate(this._activate);
|
||||
};
|
||||
|
||||
get active() {
|
||||
return this._activate;
|
||||
}
|
||||
|
||||
@obx isInit: boolean = false;
|
||||
|
||||
init = flow(function* (this: any) {
|
||||
yield this.registerInnerPlugins();
|
||||
yield this.editorView?.init(this.innerPlugins._getLowCodePluginContext({
|
||||
pluginName: 'any',
|
||||
}));
|
||||
yield this.innerPlugins.init();
|
||||
this.isInit = true;
|
||||
});
|
||||
}
|
||||
39
packages/workspace/src/editor-view/view.tsx
Normal file
39
packages/workspace/src/editor-view/view.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import { skeletonSymbol } from '@alilc/lowcode-shell';
|
||||
import { observer } from '@alilc/lowcode-editor-core';
|
||||
import {
|
||||
Workbench,
|
||||
} from '@alilc/lowcode-editor-skeleton';
|
||||
import { Component } from 'react';
|
||||
import { Context } from './context';
|
||||
|
||||
export * from '../base-context';
|
||||
|
||||
@observer
|
||||
export class EditorView extends Component<any, any> {
|
||||
// 因为 document 数据在不同视图下使用的是同一份，所以这里通过 constructor 传入
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
// this.ctx = new Context(props.editorView);
|
||||
}
|
||||
|
||||
// ctx: Context;
|
||||
|
||||
render() {
|
||||
const { active } = this.props;
|
||||
const editorView = this.props.editorView;
|
||||
const skeleton = editorView.innerSkeleton;
|
||||
if (!editorView.isInit) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Workbench
|
||||
skeleton={skeleton}
|
||||
className={active ? 'active engine-editor-view' : 'engine-editor-view'}
|
||||
topAreaItemClassName="engine-actionitem"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
16
packages/workspace/src/editor-window.ts
Normal file
16
packages/workspace/src/editor-window.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { makeObservable, obx } from '@alilc/lowcode-editor-core';
|
||||
import { Resource } from './resource';
|
||||
|
||||
export class EditorWindow {
|
||||
constructor(public resource: Resource) {
|
||||
// debugger
|
||||
makeObservable(this);
|
||||
this.editorView = resource.getEditorView(this.resource.defaultViewType);
|
||||
}
|
||||
|
||||
@obx editorView;
|
||||
|
||||
changeViewType(name: string) {
|
||||
this.editorView = this.resource.getEditorView(name);
|
||||
}
|
||||
}
|
||||
103
packages/workspace/src/editor-window/context.ts
Normal file
103
packages/workspace/src/editor-window/context.ts
Normal file
@ -0,0 +1,103 @@
|
||||
import { computed, makeObservable, obx } from '@alilc/lowcode-editor-core';
|
||||
import { Context } from '../editor-view/context';
|
||||
import { WorkSpace } from '..';
|
||||
import { Resource } from '../resource';
|
||||
|
||||
export class EditorWindow {
|
||||
constructor(public resource: Resource, public workspace: WorkSpace) {
|
||||
makeObservable(this);
|
||||
this.init();
|
||||
}
|
||||
|
||||
async importSchema(schema: any) {
|
||||
const newSchema = await this.resource.import(schema);
|
||||
|
||||
Object.keys(newSchema).forEach(key => {
|
||||
const view = this.editorViews.get(key);
|
||||
view?.project.importSchema(newSchema[key]);
|
||||
});
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.initViewTypes();
|
||||
await this.execViewTypesInit();
|
||||
this.setDefaultViewType();
|
||||
}
|
||||
|
||||
initViewTypes = async () => {
|
||||
const editorViews = this.resource.editorViews;
|
||||
for (let i = 0; i < editorViews.length; i++) {
|
||||
const name = editorViews[i].name;
|
||||
await this.initViewType(name);
|
||||
if (!this.editorView) {
|
||||
this.changeViewType(name);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
execViewTypesInit = async () => {
|
||||
const editorViews = this.resource.editorViews;
|
||||
for (let i = 0; i < editorViews.length; i++) {
|
||||
const name = editorViews[i].name;
|
||||
this.changeViewType(name);
|
||||
await this.editorViews.get(name)?.init();
|
||||
}
|
||||
};
|
||||
|
||||
setDefaultViewType = () => {
|
||||
this.changeViewType(this.resource.defaultViewType);
|
||||
};
|
||||
|
||||
@obx.ref editorView: Context;
|
||||
|
||||
@obx editorViews: Map<string, Context> = new Map<string, Context>();
|
||||
|
||||
initViewType = async (name: string) => {
|
||||
const viewInfo = this.resource.getEditorView(name);
|
||||
if (this.editorViews.get(name)) {
|
||||
return;
|
||||
}
|
||||
const editorView = new Context(this.workspace, this, viewInfo as any);
|
||||
// await editorView.init();
|
||||
this.editorViews.set(name, editorView);
|
||||
};
|
||||
|
||||
changeViewType = (name: string) => {
|
||||
this.editorView?.setActivate(false);
|
||||
this.editorView = this.editorViews.get(name)!;
|
||||
|
||||
this.editorView.setActivate(true);
|
||||
};
|
||||
|
||||
get project() {
|
||||
return this.editorView?.project;
|
||||
}
|
||||
|
||||
get innerProject() {
|
||||
return this.editorView?.innerProject;
|
||||
}
|
||||
|
||||
get innerSkeleton() {
|
||||
return this.editorView?.innerSkeleton;
|
||||
}
|
||||
|
||||
get innerSetters() {
|
||||
return this.editorView?.innerSetters;
|
||||
}
|
||||
|
||||
get innerHotkey() {
|
||||
return this.editorView?.innerHotkey;
|
||||
}
|
||||
|
||||
get editor() {
|
||||
return this.editorView?.editor;
|
||||
}
|
||||
|
||||
get designer() {
|
||||
return this.editorView?.designer;
|
||||
}
|
||||
|
||||
get innerPlugins() {
|
||||
return this.editorView?.innerPlugins;
|
||||
}
|
||||
}
|
||||
45
packages/workspace/src/editor-window/view.tsx
Normal file
45
packages/workspace/src/editor-window/view.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { Component } from 'react';
|
||||
import { EditorView } from '../editor-view/view';
|
||||
import { observer } from '@alilc/lowcode-editor-core';
|
||||
import { EditorWindow } from './context';
|
||||
|
||||
@observer
|
||||
export class EditorWindowView extends Component<{
|
||||
editorWindow: EditorWindow;
|
||||
}, any> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { resource, editorView, editorViews } = this.props.editorWindow;
|
||||
// const editorViews = Array.from(editorViews.values())
|
||||
if (!editorView) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="workspace-engine-main">
|
||||
{/* <EditorView
|
||||
resource={resource}
|
||||
key={editorView.name}
|
||||
active={editorView.active}
|
||||
editorView={editorView}
|
||||
defaultViewType
|
||||
/> */}
|
||||
{
|
||||
Array.from(editorViews.values()).map((editorView: any) => {
|
||||
return (
|
||||
<EditorView
|
||||
resource={resource}
|
||||
key={editorView.name}
|
||||
active={editorView.active}
|
||||
editorView={editorView}
|
||||
defaultViewType
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
77
packages/workspace/src/index.ts
Normal file
77
packages/workspace/src/index.ts
Normal file
@ -0,0 +1,77 @@
|
||||
import { Editor } from '@alilc/lowcode-editor-core';
|
||||
import {
|
||||
Skeleton as InnerSkeleton,
|
||||
} from '@alilc/lowcode-editor-skeleton';
|
||||
import { EditorWindow } from './editor-window/context';
|
||||
import { Resource } from './resource';
|
||||
export { Resource } from './resource';
|
||||
export * from './editor-window/context';
|
||||
export * from './layouts/workbench';
|
||||
|
||||
export class WorkSpace {
|
||||
constructor() {
|
||||
this.editor = new Editor();
|
||||
this.skeleton = new InnerSkeleton(this.editor);
|
||||
if (this.defaultResource) {
|
||||
this.window = new EditorWindow(this.defaultResource, this);
|
||||
}
|
||||
}
|
||||
|
||||
private _isActive = false;
|
||||
|
||||
get isActive() {
|
||||
return this._isActive;
|
||||
}
|
||||
|
||||
setActive(value: boolean) {
|
||||
this._isActive = value;
|
||||
}
|
||||
|
||||
editorWindows: [];
|
||||
|
||||
window: EditorWindow;
|
||||
|
||||
private resources: Map<string, Resource> = new Map();
|
||||
|
||||
registerResourceType(resourceName: string, resourceType: 'editor' | 'webview', options: ResourceOptions): void {
|
||||
if (resourceType === 'editor') {
|
||||
const resource = new Resource(options);
|
||||
this.resources.set(resourceName, resource);
|
||||
|
||||
if (!this.window) {
|
||||
this.window = new EditorWindow(this.defaultResource, this);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
get defaultResource() {
|
||||
if (this.resources.size === 1) {
|
||||
return this.resources.values().next().value;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
removeResourceType(resourceName: string) {
|
||||
if (this.resources.has(resourceName)) {
|
||||
this.resources.delete(resourceName);
|
||||
}
|
||||
}
|
||||
|
||||
openEditorWindow() {}
|
||||
}
|
||||
|
||||
export interface ResourceOptions {
|
||||
description: string;
|
||||
defaultViewType?: string;
|
||||
editorViews?: EditorViewOptions[];
|
||||
init: (ctx: any) => Promise<void>;
|
||||
dispose: (ctx: any) => Promise<void>;
|
||||
import: (ctx: any) => Promise<any>;
|
||||
}
|
||||
|
||||
export interface EditorViewOptions {
|
||||
name: string;
|
||||
init: (ctx: any) => Promise<void>;
|
||||
save: (ctx: any) => Promise<void>;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user