github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2025-12-14 13:03:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feat/joint-editor' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into feat/joint-editor

Browse Source
This commit is contained in:
kangwei 2020-03-12 03:47:28 +08:00
commit a0e9531c03
10 changed files with 130 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/editor/.eslintrc.js
View File

@ -3,5 +3,6 @@ const { eslint, deepmerge } = require('@ice/spec');
module.exports = deepmerge(eslint, {
rules: {
"global-require": 0,
"interface-name" : [true, "never-prefix"]
},
});

5
packages/editor/package.json
View File

@ -8,8 +8,6 @@
"@alifd/next": "^1.x",
"@alife/dpl-iceluna": "^2.3.2",
"@icedesign/theme": "^1.x",
"@types/react": "^16.8.3",
"@types/react-dom": "^16.8.2",
"events": "^3.1.0",
"intl-messageformat": "^8.2.1",
"keymaster": "^1.6.2",
@ -18,10 +16,13 @@
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-router-dom": "^5.1.2",
"serialize-javascript": "^3.0.0",
"store": "^2.0.12"
},
"devDependencies": {
"@ice/spec": "^0.1.1",
"@types/react": "^16.8.3",
"@types/react-dom": "^16.8.2",
"@types/debug": "^4.1.5",
"@types/events": "^3.0.0",
"@types/store": "^2.0.2",

14
packages/editor/src/config/skeleton.js
View File

@ -213,13 +213,15 @@ export default {
pluginProps: {}
},
],
centerArea: [{
pluginKey: 'designer',
config: {
package: '@ali/lowcode-plugin-designer',
version: '1.0.0'
centerArea: [
{
pluginKey: 'designer',
config: {
package: '@ali/lowcode-plugin-designer',
version: '1.0.0'
}
}
}]
]
},
hooks: [],
shortCuts: []

12
packages/editor/src/framework/areaManager.ts
View File

@ -1,16 +1,16 @@
import Editor from './index';
import { PluginConfig, PluginStatus } from './definitions';
import { clone, deepEqual, transformToPromise } from './utils';
import Editor from './index';
import { clone, deepEqual } from './utils';
export default class AreaManager {
private pluginStatus: PluginStatus;
private config: Array<PluginConfig>;
private config: PluginConfig[];
constructor(private editor: Editor, private area: string) {
this.config = (editor && editor.config && editor.config.plugins && editor.config.plugins[this.area]) || [];
this.pluginStatus = clone(editor.pluginStatus);
}
isPluginStatusUpdate(pluginType?: string): boolean {
public isPluginStatusUpdate(pluginType?: string): boolean {
const { pluginStatus } = this.editor;
const list = pluginType ? this.config.filter(item => item.type === pluginType) : this.config;
@ -19,14 +19,14 @@ export default class AreaManager {
return isUpdate;
}
getVisiblePluginList(pluginType?: string): Array<PluginConfig> {
public getVisiblePluginList(pluginType?: string): PluginConfig[] {
const res = this.config.filter(item => {
return !this.pluginStatus[item.pluginKey] || this.pluginStatus[item.pluginKey].visible;
});
return pluginType ? res.filter(item => item.type === pluginType) : res;
}
getPluginConfig(): Array<PluginConfig> {
public getPluginConfig(): PluginConfig[] {
return this.config;
}
}

10
packages/editor/src/framework/definitions.ts
View File

@ -106,7 +106,7 @@ export interface I18nConfig {
'ja-JP'?: I18nMessages;
}
export type I18nFunction = (key: string, params: object) => string;
export type I18nFunction = (key: string, params: any) => string;
export interface Utils {
[propName: string]: (...args) => any;
@ -127,9 +127,9 @@ export interface PluginComponents {
export interface PluginStatus {
[propName: string]: {
disabled: boolean;
visible: boolean;
marked: boolean;
locked: boolean;
disabled?: boolean;
visible?: boolean;
marked?: boolean;
locked?: boolean;
};
}

62
packages/editor/src/framework/editor.ts
View File

@ -1,9 +1,9 @@
import EventEmitter from 'events';
import Debug from 'debug';
import EventEmitter from 'events';
import store from 'store';
import { EditorConfig, Utils, PluginComponents, PluginStatus, LocaleType, HooksConfig } from './definitions';
import { EditorConfig, HooksConfig, LocaleType, PluginComponents, PluginStatus, Utils } from './definitions';
import { unRegistShortCuts, registShortCuts, transformToPromise } from './utils';
import { registShortCuts, transformToPromise, unRegistShortCuts } from './utils';
// 根据url参数设置debug选项
const res = /_?debug=(.*?)(&|$)/.exec(location.search);
@ -15,17 +15,19 @@ if (res && res[1]) {
store.remove('debug');
}
//重要，用于矫正画布执行new Function的window对象上下文
// 重要，用于矫正画布执行new Function的window对象上下文
window.__newFunc = funContext => {
return new Function(funContext);
};
//关闭浏览器前提醒,只有产生过交互才会生效
// 关闭浏览器前提醒,只有产生过交互才会生效
window.onbeforeunload = function(e) {
e = e || window.event;
// 本地调试不生效
if (location.href.indexOf('localhost') > 0) return;
var msg = '您确定要离开此页面吗？';
if (location.href.indexOf('localhost') > 0) {
return;
}
const msg = '您确定要离开此页面吗？';
e.cancelBubble = true;
e.returnValue = msg;
if (e.stopPropagation) {
@ -45,15 +47,13 @@ export interface HooksFuncs {
}
export default class Editor extends EventEmitter {
static getInstance = (config: EditorConfig, components: PluginComponents, utils?: Utils): Editor => {
public static getInstance = (config: EditorConfig, components: PluginComponents, utils?: Utils): Editor => {
if (!instance) {
instance = new Editor(config, components, utils);
}
return instance;
};
private hooksFuncs: HooksFuncs;
public pluginStatus: PluginStatus;
public plugins: PluginComponents;
public locale: LocaleType;
@ -63,13 +63,15 @@ export default class Editor extends EventEmitter {
public once: (msg: string, handler: (...args) => void) => void;
public off: (msg: string, handler: (...args) => void) => void;
private hooksFuncs: HooksFuncs;
constructor(public config: EditorConfig, public components: PluginComponents, public utils?: Utils) {
super();
instance = this;
this.init();
}
init(): Promise<any> {
public init(): Promise<any> {
const { hooks, shortCuts = [], lifeCycles } = this.config || {};
this.locale = store.get('lowcode-editor-locale') || 'zh-CN';
// this.messages = this.messagesSet[this.locale];
@ -92,24 +94,26 @@ export default class Editor extends EventEmitter {
});
}
destroy() {
public destroy() {
debug('destroy');
try {
const { hooks = [], shortCuts = [], lifeCycles = {} } = this.config;
unRegistShortCuts(shortCuts);
this.destroyHooks(hooks);
lifeCycles.destroy && lifeCycles.destroy(this);
if (lifeCycles.destroy) {
lifeCycles.destroy(this);
}
} catch (err) {
console.warn(err);
return;
}
}
get(key: string): any {
public get(key: string): any {
return this[key];
}
set(key: string | object, val: any): void {
public set(key: string | object, val: any): void {
if (typeof key === 'string') {
if (['init', 'destroy', 'get', 'set', 'batchOn', 'batchOff', 'batchOnce'].includes(key)) {
console.error('init, destroy, get, set, batchOn, batchOff, batchOnce is private attribute');
@ -123,22 +127,28 @@ export default class Editor extends EventEmitter {
}
}
batchOn(events: Array<string>, lisenter: (...args) => void): void {
if (!Array.isArray(events)) return;
public batchOn(events: string[], lisenter: (...args) => void): void {
if (!Array.isArray(events)) {
return;
}
events.forEach(event => this.on(event, lisenter));
}
batchOnce(events: Array<string>, lisenter: (...args) => void): void {
if (!Array.isArray(events)) return;
public batchOnce(events: string[], lisenter: (...args) => void): void {
if (!Array.isArray(events)) {
return;
}
events.forEach(event => this.once(event, lisenter));
}
batchOff(events: Array<string>, lisenter: (...args) => void): void {
if (!Array.isArray(events)) return;
public batchOff(events: string[], lisenter: (...args) => void): void {
if (!Array.isArray(events)) {
return;
}
events.forEach(event => this.off(event, lisenter));
}
//销毁hooks中的消息监听
// 销毁hooks中的消息监听
private destroyHooks(hooks: HooksConfig = []) {
hooks.forEach((item, idx) => {
if (typeof this.hooksFuncs[idx] === 'function') {
@ -148,7 +158,7 @@ export default class Editor extends EventEmitter {
delete this.hooksFuncs;
}
//初始化hooks中的消息监听
// 初始化hooks中的消息监听
private initHooks(hooks: HooksConfig = []): void {
this.hooksFuncs = hooks.map(item => {
const func = (...args) => {
@ -162,10 +172,12 @@ export default class Editor extends EventEmitter {
private initPluginStatus() {
const { plugins = {} } = this.config;
const pluginAreas = Object.keys(plugins);
const res = {};
const res: PluginStatus = {};
pluginAreas.forEach(area => {
(plugins[area] || []).forEach(plugin => {
if (plugin.type === 'Divider') return;
if (plugin.type === 'Divider') {
return;
}
const { visible, disabled, marked } = plugin.props || {};
res[plugin.pluginKey] = {
visible: typeof visible === 'boolean' ? visible : true,

23
packages/editor/src/framework/pluginFactory.tsx
View File

@ -1,10 +1,9 @@
import React, { PureComponent, createRef } from 'react';
import React, { createRef, PureComponent } from 'react';
import EditorContext from './context';
import { I18nFunction, PluginConfig } from './definitions';
import Editor from './editor';
import { isEmpty, generateI18n, transformToPromise, acceptsRef } from './utils';
import { PluginConfig, I18nFunction } from './definitions';
import Editor from './index';
import { acceptsRef, generateI18n, isEmpty, transformToPromise } from './utils';
export interface PluginProps {
editor: Editor;
@ -19,12 +18,12 @@ export default function pluginFactory(
Comp: React.ComponentType<PluginProps & InjectedPluginProps>
): React.ComponentType<PluginProps> {
class LowcodePlugin extends PureComponent<PluginProps> {
static displayName = 'LowcodeEditorPlugin';
static defaultProps = {
public static displayName = 'LowcodeEditorPlugin';
public static defaultProps = {
config: {}
};
static contextType = EditorContext;
static init = Comp.init;
public static contextType = EditorContext;
public static init = Comp.init;
public ref = createRef<React.Component>();
private editor: Editor;
private pluginKey: string;
@ -47,28 +46,28 @@ export default function pluginFactory(
});
}
componentWillUnmount() {
public componentWillUnmount() {
// 销毁插件
if (this.editor && this.editor.plugins) {
delete this.editor.plugins[this.pluginKey];
}
}
open = (): Promise<any> => {
public open = (): Promise<any> => {
if (this.ref && this.ref.open && typeof this.ref.open === 'function') {
return transformToPromise(this.ref.open());
}
return Promise.resolve();
};
close = () => {
public close = () => {
if (this.ref && this.ref.close && typeof this.ref.close === 'function') {
return transformToPromise(this.ref.close());
}
return Promise.resolve();
};
render() {
public render() {
const { config } = this.props;
const props = {
i18n: this.i18n,

89
packages/editor/src/framework/utils.ts
View File

@ -1,14 +1,14 @@
import IntlMessageFormat from 'intl-messageformat';
import keymaster from 'keymaster';
import { EditorConfig, LocaleType, I18nMessages, I18nFunction, ShortCutsConfig } from './definitions';
import { EditorConfig, I18nFunction, I18nMessages, LocaleType, ShortCutsConfig } from './definitions';
import Editor from './editor';
import _pick from 'lodash/pick';
import _deepEqual from 'lodash/isEqualWith';
import _clone from 'lodash/cloneDeep';
import _isEmpty from 'lodash/isEmpty';
import _throttle from 'lodash/throttle';
import _debounce from 'lodash/debounce';
import _isEmpty from 'lodash/isEmpty';
import _deepEqual from 'lodash/isEqualWith';
import _pick from 'lodash/pick';
import _throttle from 'lodash/throttle';
export const pick = _pick;
export const deepEqual = _deepEqual;
@ -36,22 +36,14 @@ export interface IDEMessageParams {
};
}
export interface Window {
sendIDEMessage: (IDEMessageParams) => void;
goldlog: {
record: (logKey: string, gmKey: string, goKey: string, method: 'GET' | 'POST') => void;
};
parent: Window;
is_theia: boolean;
vscode: boolean;
}
/**
/*
* 用于构造国际化字符串处理函数
*/
export function generateI18n(locale: LocaleType = 'zh-CN', messages: I18nMessages = {}): I18nFunction {
return (key, values = {}) => {
if (!messages || !messages[key]) return '';
return (key: string, values): string => {
if (!messages || !messages[key]) {
return '';
}
const formater = new IntlMessageFormat(messages[key], locale);
return formater.format(values);
};
@ -61,10 +53,14 @@ export function generateI18n(locale: LocaleType = 'zh-CN', messages: I18nMessage
* 序列化参数
*/
export function serializeParams(obj: object): string {
if (typeof obj !== 'object') return '';
const res: Array<string> = [];
if (typeof obj !== 'object') {
return '';
}
const res: string[] = [];
Object.entries(obj).forEach(([key, val]) => {
if (val === null || val === undefined || val === '') return;
if (val === null || val === undefined || val === '') {
return;
}
if (typeof val === 'object') {
res.push(`${encodeURIComponent(key)}=${encodeURIComponent(JSON.stringify(val))}`);
} else {
@ -81,8 +77,7 @@ export function serializeParams(obj: object): string {
* @param {String} logKey 属性串
*/
export function goldlog(gmKey: string, params: object = {}, logKey: string = 'other'): void {
const global = window as Window;
const sendIDEMessage = global.sendIDEMessage || global.parent.sendIDEMessage;
const sendIDEMessage = window.sendIDEMessage || window.parent.sendIDEMessage;
const goKey = serializeParams({
env: getEnv(),
...params
@ -97,7 +92,9 @@ export function goldlog(gmKey: string, params: object = {}, logKey: string = 'ot
}
});
}
global.goldlog && global.goldlog.record(`/iceluna.core.${logKey}`, gmKey, goKey, 'POST');
if (window.goldlog) {
window.goldlog.record(`/iceluna.core.${logKey}`, gmKey, goKey, 'POST');
}
}
/**
@ -106,9 +103,13 @@ export function goldlog(gmKey: string, params: object = {}, logKey: string = 'ot
export function getEnv(): string {
const userAgent = navigator.userAgent;
const isVscode = /Electron\//.test(userAgent);
if (isVscode) return ENV.VSCODE;
if (isVscode) {
return ENV.VSCODE;
}
const isTheia = window.is_theia === true;
if (isTheia) return ENV.WEBIDE;
if (isTheia) {
return ENV.WEBIDE;
}
return ENV.WEB;
}
@ -137,7 +138,9 @@ export function unRegistShortCuts(config: ShortCutsConfig): void {
* 将函数返回结果转成promise形式，如果函数有返回值则根据返回值的bool类型判断是reject还是resolve，若函数无返回值默认执行resolve
*/
export function transformToPromise(input: any): Promise<{}> {
if (input instanceof Promise) return input;
if (input instanceof Promise) {
return input;
}
return new Promise((resolve, reject) => {
if (input || input === undefined) {
resolve();
@ -153,13 +156,19 @@ export function transformToPromise(input: any): Promise<{}> {
interface MapOf<T> {
[propName: string]: T;
}
export function transformArrayToMap<T>(arr: Array<T>, key: string, overwrite: boolean = true): MapOf<T> {
if (isEmpty(arr) || !Array.isArray(arr)) return {};
export function transformArrayToMap<T>(arr: T[], key: string, overwrite: boolean = true): MapOf<T> {
if (isEmpty(arr) || !Array.isArray(arr)) {
return {};
}
const res = {};
arr.forEach(item => {
const curKey = item[key];
if (item[key] === undefined) return;
if (res[curKey] && !overwrite) return;
if (item[key] === undefined) {
return;
}
if (res[curKey] && !overwrite) {
return;
}
res[curKey] = item;
});
return res;
@ -172,16 +181,18 @@ interface Query {
[propName: string]: string;
}
export function parseSearch(search: string): Query {
if (!search || typeof search !== 'string') return {};
if (!search || typeof search !== 'string') {
return {};
}
const str = search.replace(/^\?/, '');
let paramStr = str.split('&');
let res = {};
for (let i = 0; i < paramStr.length; i++) {
let regRes = paramStr[i].split('=');
const paramStr = str.split('&');
const res = {};
paramStr.forEach(item => {
const regRes = item.split('=');
if (regRes[0] && regRes[1]) {
res[regRes[0]] = decodeURIComponent(regRes[1]);
}
}
});
return res;
}
@ -238,8 +249,8 @@ export function comboEditorConfig(defaultConfig: EditorConfig = {}, customConfig
* @param {*} Comp 需要判断的组件
*/
export function acceptsRef(Comp: React.ComponentType) {
const hasSymbol = typeof Symbol === 'function' && Symbol['for'];
const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol['for']('react.forward_ref') : 0xead0;
const hasSymbol = typeof Symbol === 'function' && Symbol.for;
const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
return (
(Comp.$$typeof && Comp.$$typeof === REACT_FORWARD_REF_TYPE) || (Comp.prototype && Comp.prototype.isReactComponent)
);

8
packages/editor/src/index.d.ts vendored Normal file
View File

@ -0,0 +1,8 @@
interface Window {
sendIDEMessage?: (IDEMessageParams) => void;
goldlog?: {
record: (logKey: string, gmKey: string, goKey: string, method: 'GET' | 'POST') => void;
};
is_theia?: boolean;
vscode?: boolean;
}

2
packages/editor/src/plugins/undoRedo/index.tsx
View File

@ -1,4 +1,4 @@
import React, {useState} from 'react';
import React, { useState } from 'react';
import './index.scss';
import Editor from '../../framework/index';
import { PluginConfig } from '../../framework/definitions';