github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-26 03:48:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'polyfill/vision' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into polyfill/vision

Browse Source 
# Conflicts:
#	packages/vision-preset/package.json
This commit is contained in:
mario.gk 2020-04-27 20:50:33 +08:00
commit 7f46822a43
344 changed files with 1700 additions and 6153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
deploy-space/html/index.html
View File

@ -1,29 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
<meta name="viewport" content="width=device-width" />
<title>LowCodeEngine Editor DEMO</title>
<link rel="shortcut icon" href="./favicon.png" />
<script src="https://g.alicdn.com/code/lib/react/16.9.0/umd/react.development.js"></script>
<script src="https://g.alicdn.com/code/lib/react-dom/16.9.0/umd/react-dom.development.js"></script>
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script> React.PropTypes = PropTypes; </script>
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css" />
<script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
<!-- lowcode engine globals -->
<link rel="stylesheet" href="./globals.css" />
<!-- lowcode engine app -->
<link rel="stylesheet" href="./lowcode-editor.css" />
</head>
<body>
<div id="lce-container"></div>
<!-- lowcode engine globals -->
<script src="./globals.js"></script>
<!-- lowcode engine app -->
<script src="./lowcode-editor.js"></script>
</body>
</html>

18
packages/vision-polyfill/public/index.html → deploy-space/static/index.html
View File

@ -9,15 +9,17 @@
<script src="https://g.alicdn.com/code/lib/react/16.9.0/umd/react.development.js"></script> <script src="https://g.alicdn.com/code/lib/react/16.9.0/umd/react.development.js"></script>
<script src="https://g.alicdn.com/code/lib/react-dom/16.9.0/umd/react-dom.development.js"></script> <script src="https://g.alicdn.com/code/lib/react-dom/16.9.0/umd/react-dom.development.js"></script>
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script> <script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script> <script> React.PropTypes = PropTypes; </script>
React.PropTypes = PropTypes;
</script>
<script src="https://g.alicdn.com/platform/c/??react15-polyfill/0.0.1/dist/index.js,lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js,natty-storage/2.0.2/dist/natty-storage.min.js,natty-fetch/2.6.0/dist/natty-fetch.pc.min.js,tinymce/4.2.5/tinymce-full.js"></script> <script src="https://g.alicdn.com/platform/c/??react15-polyfill/0.0.1/dist/index.js,lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js,natty-storage/2.0.2/dist/natty-storage.min.js,natty-fetch/2.6.0/dist/natty-fetch.pc.min.js,tinymce/4.2.5/tinymce-full.js"></script>
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script> <script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css" /> <link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css" />
<script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script> <script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
<!-- lowcode engine globals --> <!-- lowcode engine globals -->
<link href="/css/vision.css" rel="stylesheet" /> <link rel="stylesheet" href="./core.css" />
<!-- lowcode engine globals -->
<link rel="stylesheet" href="./vision-preset.css" />
<!-- lowcode engine app -->
<link rel="stylesheet" href="./lowcode-editor.css" />
<script> <script>
window.pageConfig = { window.pageConfig = {
env: 'release', env: 'release',
@ -68,9 +70,13 @@
</head> </head>
<body> <body>
<div id="lce-container"></div>
<!-- lowcode engine globals --> <!-- lowcode engine globals -->
<script src="/js/vision.js"></script> <script src="./core.js"></script>
<!-- <script src="https://g.alicdn.com/vision/visualengine-utils/4.3.1/engine-utils.js"></script> --> <!-- lowcode engine globals -->
<script src="./vision-preset.js"></script>
<script src="https://dev.g.alicdn.com/vision/visualengine-utils/5.0.0/engine-utils.js"></script> <script src="https://dev.g.alicdn.com/vision/visualengine-utils/5.0.0/engine-utils.js"></script>
<!-- lowcode engine app -->
<script src="./lowcode-editor.js"></script>
</body> </body>
</html> </html>

0
deploy-space/html/preview.html → deploy-space/static/preview.html
View File

24
packages/demo/CHANGELOG.md
View File

@ -3,6 +3,30 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.13"></a>
## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.12...@ali/lowcode-demo@0.8.13) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-demo
<a name="0.8.12"></a>
## [0.8.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.11...@ali/lowcode-demo@0.8.12) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-demo
<a name="0.8.11"></a>
## [0.8.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.10...@ali/lowcode-demo@0.8.11) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-demo
<a name="0.8.10"></a> <a name="0.8.10"></a>
## [0.8.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.9...@ali/lowcode-demo@0.8.10) (2020-04-16) ## [0.8.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.9...@ali/lowcode-demo@0.8.10) (2020-04-16)

14
packages/demo/build.json
View File

@ -1,8 +1,7 @@
{ {
"entry": { "entry": {
"index": "src/index.ts", "index": "src/vision/index.ts",
"react-simulator-renderer": "../react-simulator-renderer/src/index.ts", "react-simulator-renderer": "../react-simulator-renderer/src/index.ts"
"preview": "src/preview.ts"
}, },
"vendor": false, "vendor": false,
"devServer": { "devServer": {
@ -10,10 +9,11 @@
}, },
"publicPath": "/", "publicPath": "/",
"externals": { "externals": {
"react": "window.React", "react": "var window.React",
"react-dom": "window.ReactDOM", "react-dom": "var window.ReactDOM",
"prop-types": "window.PropTypes", "prop-types": "var window.PropTypes",
"@alifd/next": "window.Next" "@alifd/next": "var window.Next",
"@ali/visualengine-utils": "var window.VisualEngineUtils"
}, },
"plugins": [ "plugins": [
[ [

7
packages/demo/cloud-build.json
View File

@ -1,14 +1,15 @@
{ {
"entry": { "entry": {
"lowcode-editor": "src/index.ts", "lowcode-editor": "src/vision/index.ts"
"lowcode-preview": "src/preview.ts"
}, },
"vendor": false, "vendor": false,
"externals": { "externals": {
"react": "window.React", "react": "window.React",
"react-dom": "window.ReactDOM", "react-dom": "window.ReactDOM",
"prop-types": "window.PropTypes", "prop-types": "window.PropTypes",
"@ali/lowcode-globals": "window.LCEGlobals" "@ali/lowcode-editor-core": "window.LCECore",
"@ali/visualengine": "window.VisualEngine",
"@ali/visualengine-utils": "window.VisualEngineUtils"
}, },
"minify": false, "minify": false,
"sourcemap": true, "sourcemap": true,

33
packages/demo/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-demo", "name": "@ali/lowcode-demo",
"version": "0.8.10", "version": "0.8.13",
"private": true, "private": true,
"description": "低代码引擎 DEMO", "description": "低代码引擎 DEMO",
"scripts": { "scripts": {
@ -11,22 +11,23 @@
}, },
"config": {}, "config": {},
"dependencies": { "dependencies": {
"@ali/lowcode-editor-core": "^0.8.4", "@ali/lowcode-editor-core": "^0.8.9",
"@ali/lowcode-editor-skeleton": "^0.8.0", "@ali/lowcode-editor-skeleton": "^0.8.10",
"@ali/lowcode-plugin-components-pane": "^0.8.0", "@ali/lowcode-plugin-components-pane": "^0.8.8",
"@ali/lowcode-plugin-designer": "^0.9.1", "@ali/lowcode-plugin-designer": "^0.9.6",
"@ali/lowcode-plugin-event-bind-dialog": "^0.8.0", "@ali/lowcode-plugin-event-bind-dialog": "^0.8.9",
"@ali/lowcode-plugin-outline-pane": "^0.8.7", "@ali/lowcode-plugin-outline-pane": "^0.8.12",
"@ali/lowcode-plugin-sample-logo": "^0.8.0", "@ali/lowcode-plugin-sample-logo": "^0.8.8",
"@ali/lowcode-plugin-source-editor":"^0.8.2", "@ali/lowcode-plugin-sample-preview": "^0.8.11",
"@ali/lowcode-plugin-sample-preview": "^0.8.6",
"@ali/lowcode-plugin-settings-pane": "^0.8.8", "@ali/lowcode-plugin-settings-pane": "^0.8.8",
"@ali/lowcode-plugin-undo-redo": "^0.8.0", "@ali/lowcode-plugin-source-editor": "^0.8.5",
"@ali/lowcode-plugin-variable-bind-dialog": "^0.8.2", "@ali/lowcode-plugin-undo-redo": "^0.8.9",
"@ali/lowcode-plugin-zh-en": "^0.8.6", "@ali/lowcode-plugin-variable-bind-dialog": "^0.8.7",
"@ali/lowcode-react-renderer": "^0.8.4", "@ali/lowcode-plugin-zh-en": "^0.8.11",
"@ali/lowcode-runtime": "^0.8.10", "@ali/lowcode-react-renderer": "^0.8.5",
"@ali/lowcode-setters": "^0.8.8", "@ali/lowcode-runtime": "^0.8.13",
"@ali/lowcode-setters": "^0.8.11",
"@ali/lowcode-utils": "^0.8.2",
"@alifd/next": "^1.19.12", "@alifd/next": "^1.19.12",
"@alife/theme-lowcode-dark": "^0.1.0", "@alife/theme-lowcode-dark": "^0.1.0",
"@alife/theme-lowcode-light": "^0.1.0", "@alife/theme-lowcode-light": "^0.1.0",

68
packages/demo/public/index.html
View File

@ -4,18 +4,76 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" /> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title>LowCodeEngine DEMO</title> <title>LowCodeEngine Editor DEMO</title>
<link rel="shortcut icon" href="./favicon.png" />
<script src="https://g.alicdn.com/code/lib/react/16.9.0/umd/react.development.js"></script> <script src="https://g.alicdn.com/code/lib/react/16.9.0/umd/react.development.js"></script>
<script src="https://g.alicdn.com/code/lib/react-dom/16.9.0/umd/react-dom.development.js"></script> <script src="https://g.alicdn.com/code/lib/react-dom/16.9.0/umd/react-dom.development.js"></script>
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script> <script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script> React.PropTypes = PropTypes; </script> <script>
React.PropTypes = PropTypes;
</script>
<script src="https://g.alicdn.com/platform/c/??react15-polyfill/0.0.1/dist/index.js,lodash/4.6.1/lodash.min.js,immutable/3.7.6/dist/immutable.min.js,natty-storage/2.0.2/dist/natty-storage.min.js,natty-fetch/2.6.0/dist/natty-fetch.pc.min.js,tinymce/4.2.5/tinymce-full.js"></script>
<script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script> <script src="https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"></script>
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css" />
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/next/1.11.6/next.min.css">
<script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script> <script src="https://unpkg.alibaba-inc.com/@alifd/next@1.18.17/dist/next.min.js"></script>
<!-- lowcode engine core -->
<link rel="stylesheet" href="/dist/core.css" />
<!-- lowcode engine vision-prest -->
<link rel="stylesheet" href="/dist/vision-preset.css" />
<script>
window.pageConfig = {
env: 'release',
locale: 'zh_CN',
pageType: 'single',
deviceType: 'web',
appName: '基础包管理后台',
appType: 'legao_base_packages',
templateType: '',
pageId: 'FORM-3KYJN7RV-DIOD8LLK1WGQ89S7NHA92-QJVH497K-V',
slug: 'test',
appMode: 'back',
isAppAdmin: 'y',
isSuperAdmin: 'n',
isBetaDeveloper: 'n',
formType: 'display',
title: { en_US: '测试', type: 'i18n', zh_CN: '测试' },
urlPrefix: 'https://go.alibaba-inc.com',
APIUrlPrefix: 'https://go.alibaba-inc.com',
devVersion: '0.1.0', // 这个是子应用的变更 id
subAppType: '0.1.0',
appKey: 'legao_base_packages',
RE_VERSION: '7.1.1',
appSource: '',
isDomainDefault: 'n',
useReleaseBundle: 'n',
isDomainPkg: 'n',
medusaAppName: '',
domainCode: 'kS6SyH',
aecp: {
mdcDomain: '',
projectId: '',
appCode: '',
},
designerConfigs: {},
navConfig:
'{"appName":{"en_US":"基础包管理后台","key":"","type":"i18n","zh_CN":"基础包管理后台"},"bgColor":"white","data":[{"children":[],"hidden":false,"icon":"","inner":true,"navUuid":"FORM-3KYJN7RV-DIOD8LLK1WGQ89S7NHA92-QJVH497K-V","relateUuid":"FORM-3KYJN7RV-DIOD8LLK1WGQ89S7NHA92-QJVH497K-V","slug":"test","targetNew":false,"title":{"en_US":"测试","type":"i18n","zh_CN":"测试"}}],"isFixed":"y","isFold":"y","isFoldHorizontal":"n","languageChangeUrl":{"en_US":"/common/account/changeAccountLanguage.json","type":"i18n","zh_CN":"/common/account/changeAccountLanguage.json"},"layout":"auto","navStyle":"orange","navTheme":"light","openSubMode":false,"showAppTitle":true,"showCrumb":true,"showIcon":false,"showLanguageChange":true,"showNav":true,"showSearch":"n","singletons":{"FORM-3KYJN7RV-DIOD8LLK1WGQ89S7NHA92-QJVH497K-V":{"isFixed":"n","isFold":"n","isFoldHorizontal":"n","showAppTitle":false,"showCrumb":false,"showLanguageChange":false,"showNav":false,"showSearch":"n","singleton":false},"test":{"$ref":"$.singletons.FORM\\-3KYJN7RV\\-DIOD8LLK1WGQ89S7NHA92\\-QJVH497K\\-V"}},"type":"top_fold"}',
historyType: 'HASH',
isSinglePage: 'n',
rhino: 'n',
isMiniApp: '',
taskId: '',
appSchema: 'V5',
openSubMode: 'n',
};
window.g_config = {};
</script>
</head> </head>
<body> <body>
<div id="lce-container"></div> <!-- lowcode engine globals -->
<script src="/dist/core.js"></script>
<!-- lowcode engine globals -->
<script src="/dist/vision-preset.js"></script>
<script src="https://dev.g.alicdn.com/vision/visualengine-utils/5.0.0/engine-utils.js"></script>
</body> </body>
</html> </html>

0
packages/vision-polyfill/public/legao-assets.json → packages/demo/public/legao-assets.json
View File

94
packages/demo/public/schema.json
View File

@ -14,97 +14,5 @@
"padding": 20 "padding": 20
} }
}, },
"children": [{ "children": []
"componentName": "Form",
"props": {
"labelCol": 3,
"style": {},
"ref": "testForm"
},
"children": [{
"componentName": "Form.Item",
"props": {
"label": "姓名：",
"name": "name",
"initValue": "李雷"
},
"children": [{
"componentName": "Input",
"props": {
"placeholder": "请输入",
"size": "medium",
"style": {
"width": 320
}
}
}]
}, {
"componentName": "Form.Item",
"props": {
"label": "年龄：",
"name": "age",
"initValue": "22"
},
"children": [{
"componentName": "NumberPicker",
"props": {
"size": "medium",
"type": "normal"
}
}]
}, {
"componentName": "Form.Item",
"props": {
"label": "职业：",
"name": "profession"
},
"children": [{
"componentName": "Select",
"props": {
"dataSource": [{
"label": "教师",
"value": "t"
}, {
"label": "医生",
"value": "d"
}, {
"label": "歌手",
"value": "s"
}]
}
}]
}, {
"componentName": "Div",
"props": {
"style": {
"textAlign": "center"
}
},
"children": [{
"componentName": "Button.Group",
"props": {},
"children": [{
"componentName": "Button",
"props": {
"type": "primary",
"style": {
"margin": "0 5px 0 5px"
},
"htmlType": "submit"
},
"children": "提交"
}, {
"componentName": "Button",
"props": {
"type": "normal",
"style": {
"margin": "0 5px 0 5px"
},
"htmlType": "reset"
},
"children": "重置"
}]
}]
}]
}]
} }

3
packages/vision-polyfill/src/demo/index.ts → packages/demo/src/vision/index.ts
View File

@ -1,4 +1,3 @@
// @ts-ignore
import { createElement } from 'react'; import { createElement } from 'react';
import { Button } from '@alifd/next'; import { Button } from '@alifd/next';
import Engine, { Panes } from '@ali/visualengine'; import Engine, { Panes } from '@ali/visualengine';
@ -11,7 +10,7 @@ import fetchContext from '@ali/vu-legao-design-fetch-context';
import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog'; import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
import loadUrls from './loader'; import loadUrls from './loader';
import { upgradeAssetsBundle } from './upgrade-assets'; import { upgradeAssetsBundle } from './upgrade-assets';
import { isCSSUrl } from '@ali/lowcode-globals'; import { isCSSUrl } from '@ali/lowcode-utils';
const { editor, skeleton } = Engine; const { editor, skeleton } = Engine;

0
packages/vision-polyfill/src/demo/loader.js → packages/demo/src/vision/loader.js
View File

3
packages/demo/src/vision/module.d.ts vendored Normal file
View File

@ -0,0 +1,3 @@
declare module "@ali/visualengine";
declare module "@ali/visualengine-utils";
declare module "@ali/ve-trunk-pane"

0
packages/vision-polyfill/src/demo/upgrade-assets.js → packages/demo/src/vision/upgrade-assets.js
View File

24
packages/designer/CHANGELOG.md
View File

@ -3,6 +3,30 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.9.6"></a>
## [0.9.6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.5...@ali/lowcode-designer@0.9.6) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-designer
<a name="0.9.5"></a>
## [0.9.5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.4...@ali/lowcode-designer@0.9.5) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-designer
<a name="0.9.4"></a>
## [0.9.4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.3...@ali/lowcode-designer@0.9.4) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-designer
<a name="0.9.3"></a> <a name="0.9.3"></a>
## [0.9.3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.2...@ali/lowcode-designer@0.9.3) (2020-04-16) ## [0.9.3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.2...@ali/lowcode-designer@0.9.3) (2020-04-16)

6
packages/designer/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-designer", "name": "@ali/lowcode-designer",
"version": "0.9.3", "version": "0.9.6",
"description": "Designer for Ali LowCode Engine", "description": "Designer for Ali LowCode Engine",
"main": "lib/index.js", "main": "lib/index.js",
"module": "es/index.js", "module": "es/index.js",
@ -15,7 +15,9 @@
}, },
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ali/lowcode-globals": "^0.9.3", "@ali/lowcode-editor-core": "^0.8.9",
"@ali/lowcode-types": "^0.8.1",
"@ali/lowcode-utils": "^0.8.2",
"classnames": "^2.2.6", "classnames": "^2.2.6",
"react": "^16", "react": "^16",
"react-dom": "^16.7.0" "react-dom": "^16.7.0"

3
packages/designer/src/builtin-simulator/bem-tools/border-hovering.tsx
View File

@ -1,8 +1,9 @@
import { Component, Fragment, PureComponent } from 'react'; import { Component, Fragment, PureComponent } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { computed, observer, TitleContent, Title } from '@ali/lowcode-globals'; import { computed, observer, Title } from '@ali/lowcode-editor-core';
import { SimulatorContext } from '../context'; import { SimulatorContext } from '../context';
import { BuiltinSimulatorHost } from '../host'; import { BuiltinSimulatorHost } from '../host';
import { TitleContent } from '@ali/lowcode-types';
export class BorderHoveringInstance extends PureComponent<{ export class BorderHoveringInstance extends PureComponent<{
title: TitleContent; title: TitleContent;

26
packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx
View File

@ -9,19 +9,13 @@ import {
ComponentType, ComponentType,
} from 'react'; } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { import { observer, computed, Tip } from '@ali/lowcode-editor-core';
observer, import { createIcon, isReactComponent } from '@ali/lowcode-utils';
computed, import { ActionContentObject, isActionContentObject } from '@ali/lowcode-types';
createIcon,
EmbedTip,
isReactComponent,
ActionContentObject,
isActionContentObject,
} from '@ali/lowcode-globals';
import { SimulatorContext } from '../context'; import { SimulatorContext } from '../context';
import { BuiltinSimulatorHost } from '../host'; import { BuiltinSimulatorHost } from '../host';
import { OffsetObserver } from '../../../designer'; import { OffsetObserver } from '../../designer';
import { Node } from '../../../document'; import { Node } from '../../document';
@observer @observer
export class BorderSelectingInstance extends Component<{ export class BorderSelectingInstance extends Component<{
@ -94,9 +88,9 @@ class Toolbar extends Component<{ observed: OffsetObserver }> {
} }
const { node } = observed; const { node } = observed;
const actions: ReactNodeArray = []; const actions: ReactNodeArray = [];
node.componentMeta.availableActions.forEach(action => { node.componentMeta.availableActions.forEach((action) => {
const { important, condition, content, name } = action; const { important, condition, content, name } = action;
if (node.isSlotRoot && (name === 'copy' || name === 'remove')) { if (node.isSlot() && (name === 'copy' || name === 'remove')) {
// FIXME: need this? // FIXME: need this?
return; return;
} }
@ -130,7 +124,7 @@ function createAction(content: ReactNode | ComponentType<any> | ActionContentObj
}} }}
> >
{icon && createIcon(icon)} {icon && createIcon(icon)}
<EmbedTip>{title}</EmbedTip> <Tip>{title}</Tip>
</div> </div>
); );
} }
@ -167,7 +161,7 @@ export class BorderSelectingForNode extends Component<{ node: Node }> {
} }
return ( return (
<Fragment key={node.id}> <Fragment key={node.id}>
{instances.map(instance => { {instances.map((instance) => {
const observed = designer.createOffsetObserver({ const observed = designer.createOffsetObserver({
node, node,
instance, instance,
@ -216,7 +210,7 @@ export class BorderSelecting extends Component {
return ( return (
<Fragment> <Fragment>
{selecting.map(node => ( {selecting.map((node) => (
<BorderSelectingForNode key={node.id} node={node} /> <BorderSelectingForNode key={node.id} node={node} />
))} ))}
</Fragment> </Fragment>

2
packages/designer/src/builtin-simulator/bem-tools/index.tsx
View File

@ -1,5 +1,5 @@
import { Component } from 'react'; import { Component } from 'react';
import { observer } from '@ali/lowcode-globals'; import { observer } from '@ali/lowcode-editor-core';
import { BorderHovering } from './border-hovering'; import { BorderHovering } from './border-hovering';
import { SimulatorContext } from '../context'; import { SimulatorContext } from '../context';
import { BuiltinSimulatorHost } from '../host'; import { BuiltinSimulatorHost } from '../host';

2
packages/designer/src/builtin-simulator/bem-tools/insertion.tsx
View File

@ -1,5 +1,5 @@
import { Component } from 'react'; import { Component } from 'react';
import { computed, observer } from '@ali/lowcode-globals'; import { computed, observer } from '@ali/lowcode-editor-core';
import { SimulatorContext } from '../context'; import { SimulatorContext } from '../context';
import { BuiltinSimulatorHost } from '../host'; import { BuiltinSimulatorHost } from '../host';
import { import {

4
packages/designer/src/builtin-simulator/create-simulator.ts
View File

@ -1,7 +1,7 @@
// NOTE: 仅用作类型标注，切勿作为实体使用 // NOTE: 仅用作类型标注，切勿作为实体使用
import { BuiltinSimulatorHost } from './host'; import { BuiltinSimulatorHost } from './host';
import { AssetLevel, AssetLevels, AssetList, isAssetBundle, isAssetItem, AssetType, assetItem } from '@ali/lowcode-globals'; import { AssetLevel, AssetLevels, AssetList, isAssetBundle, isAssetItem, AssetType, assetItem } from '@ali/lowcode-utils';
import { isCSSUrl } from '@ali/lowcode-globals'; import { isCSSUrl } from '@ali/lowcode-utils';
import { BuiltinSimulatorRenderer } from './renderer'; import { BuiltinSimulatorRenderer } from './renderer';
export function createSimulator( export function createSimulator(

2
packages/designer/src/builtin-simulator/host-view.tsx
View File

@ -1,5 +1,5 @@
import { Component } from 'react'; import { Component } from 'react';
import { observer } from '@ali/lowcode-globals'; import { observer } from '@ali/lowcode-editor-core';
import { BuiltinSimulatorHost, BuiltinSimulatorProps } from './host'; import { BuiltinSimulatorHost, BuiltinSimulatorProps } from './host';
import { DocumentModel } from '../document'; import { DocumentModel } from '../document';
import { SimulatorContext } from './context'; import { SimulatorContext } from './context';

13
packages/designer/src/builtin-simulator/host.ts
View File

@ -1,10 +1,10 @@
import { obx, autorun, computed } from '@ali/lowcode-globals'; import { obx, autorun, computed, getPublicPath, hotkey } from '@ali/lowcode-editor-core';
import { ISimulatorHost, Component, NodeInstance, ComponentInstance } from '../simulator'; import { ISimulatorHost, Component, NodeInstance, ComponentInstance } from '../simulator';
import Viewport from './viewport'; import Viewport from './viewport';
import { createSimulator } from './create-simulator'; import { createSimulator } from './create-simulator';
import { Node, ParentalNode, DocumentModel, isNode, contains, isRootNode } from '../document'; import { Node, ParentalNode, DocumentModel, isNode, contains, isRootNode } from '../document';
import ResourceConsumer from './resource-consumer'; import ResourceConsumer from './resource-consumer';
import { AssetLevel, Asset, AssetList, assetBundle, assetItem, AssetType, getPublicPath } from '@ali/lowcode-globals'; import { AssetLevel, Asset, AssetList, assetBundle, assetItem, AssetType, isElement } from '@ali/lowcode-utils';
import { import {
DragObjectType, DragObjectType,
isShaken, isShaken,
@ -21,9 +21,8 @@ import {
Rect, Rect,
CanvasPoint, CanvasPoint,
} from '../designer'; } from '../designer';
import { parseProps, parseMetadata } from './utils/parse-metadata'; import { parseMetadata } from './utils/parse-metadata';
import { isElement, hotkey } from '@ali/lowcode-globals'; import { ComponentMetadata } from '@ali/lowcode-types';
import { ComponentMetadata } from '@ali/lowcode-globals';
import { BuiltinSimulatorRenderer } from './renderer'; import { BuiltinSimulatorRenderer } from './renderer';
import clipboard from '../designer/clipboard'; import clipboard from '../designer/clipboard';
@ -54,7 +53,7 @@ const defaultSimulatorUrl = (() => {
if (dev) { if (dev) {
urls = [`${prefix}/css/react-simulator-renderer.css`, `${prefix}/js/react-simulator-renderer.js`]; urls = [`${prefix}/css/react-simulator-renderer.css`, `${prefix}/js/react-simulator-renderer.js`];
} else if (process.env.NODE_ENV === 'production') { } else if (process.env.NODE_ENV === 'production') {
urls = [`${prefix}/react-simulator-renderer.min.css`, `${prefix}/react-simulator-renderer.min.js`]; urls = [`${prefix}/react-simulator-renderer.css`, `${prefix}/react-simulator-renderer.js`];
} else { } else {
urls = [`${prefix}/react-simulator-renderer.css`, `${prefix}/react-simulator-renderer.js`]; urls = [`${prefix}/react-simulator-renderer.css`, `${prefix}/react-simulator-renderer.js`];
} }
@ -967,7 +966,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
return this.document.checkDropTarget(container, dragObject as any); return this.document.checkDropTarget(container, dragObject as any);
} }
const meta = container.componentMeta; const meta = (container as Node).componentMeta;
// FIXME: get containerInstance for accept logic use // FIXME: get containerInstance for accept logic use
const acceptable: boolean = this.isAcceptable(container); const acceptable: boolean = this.isAcceptable(container);

2
packages/designer/src/builtin-simulator/resource-consumer.ts
View File

@ -1,4 +1,4 @@
import { autorun, obx } from '@ali/lowcode-globals'; import { autorun, obx } from '@ali/lowcode-editor-core';
import { BuiltinSimulatorHost } from './host'; import { BuiltinSimulatorHost } from './host';
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import { BuiltinSimulatorRenderer, isSimulatorRenderer } from './renderer'; import { BuiltinSimulatorRenderer, isSimulatorRenderer } from './renderer';

4
packages/designer/src/builtin-simulator/utils/parse-metadata.ts
View File

@ -1,7 +1,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { isValidElement } from 'react'; import { isValidElement } from 'react';
import { isElement } from '@ali/lowcode-globals'; import { isElement } from '@ali/lowcode-utils';
import { PropConfig } from '@ali/lowcode-globals'; import { PropConfig } from '@ali/lowcode-types';
export const primitiveTypes = [ export const primitiveTypes = [
'string', 'string',

2
packages/designer/src/builtin-simulator/viewport.ts
View File

@ -1,4 +1,4 @@
import { obx, computed } from '@ali/lowcode-globals'; import { obx, computed } from '@ali/lowcode-editor-core';
import { Point, ScrollTarget } from '../designer'; import { Point, ScrollTarget } from '../designer';
import { AutoFit, IViewport } from '../simulator'; import { AutoFit, IViewport } from '../simulator';

53
packages/designer/src/component-meta.ts
View File

@ -6,14 +6,12 @@ import {
ComponentAction, ComponentAction,
TitleContent, TitleContent,
TransformedComponentMetadata, TransformedComponentMetadata,
getRegisteredMetadataTransducers,
registerMetadataTransducer,
computed,
NestingFilter, NestingFilter,
} from '@ali/lowcode-globals'; } from '@ali/lowcode-types';
import { computed } from '@ali/lowcode-editor-core';
import { Node, ParentalNode } from './document'; import { Node, ParentalNode } from './document';
import { Designer } from './designer'; import { Designer } from './designer';
import { intl } from './locale'; import { intlNode } from './locale';
import { IconContainer } from './icons/container'; import { IconContainer } from './icons/container';
import { IconPage } from './icons/page'; import { IconPage } from './icons/page';
import { IconComponent } from './icons/component'; import { IconComponent } from './icons/component';
@ -130,11 +128,14 @@ export class ComponentMeta {
const title = this._transformedMetadata.title; const title = this._transformedMetadata.title;
if (title) { if (title) {
this._title = typeof title === 'string' ? { this._title =
typeof title === 'string'
? {
type: 'i18n', type: 'i18n',
'en-US': this.componentName, 'en-US': this.componentName,
'zh-CN': title, 'zh-CN': title,
} : title; }
: title;
} }
const { configure = {} } = this._transformedMetadata; const { configure = {} } = this._transformedMetadata;
@ -234,6 +235,38 @@ function preprocessMetadata(metadata: ComponentMetadata): TransformedComponentMe
}; };
} }
export interface MetadataTransducer {
(prev: TransformedComponentMetadata): TransformedComponentMetadata;
/**
* 0 - 9 system
* 10 - 99 builtin-plugin
* 100 - app & plugin
*/
level?: number;
/**
* use to replace TODO
*/
id?: string;
}
const metadataTransducers: MetadataTransducer[] = [];
export function registerMetadataTransducer(transducer: MetadataTransducer, level: number = 100, id?: string) {
transducer.level = level;
transducer.id = id;
const i = metadataTransducers.findIndex((item) => item.level != null && item.level > level);
if (i < 0) {
metadataTransducers.push(transducer);
} else {
metadataTransducers.splice(i, 0, transducer);
}
}
export function getRegisteredMetadataTransducers(): MetadataTransducer[] {
return metadataTransducers;
}
registerMetadataTransducer((metadata) => { registerMetadataTransducer((metadata) => {
const { configure, componentName } = metadata; const { configure, componentName } = metadata;
const { component = {} } = configure; const { component = {} } = configure;
@ -279,7 +312,7 @@ const builtinComponentActions: ComponentAction[] = [
name: 'remove', name: 'remove',
content: { content: {
icon: IconRemove, icon: IconRemove,
title: intl('remove'), title: intlNode('remove'),
action(node: Node) { action(node: Node) {
node.remove(); node.remove();
}, },
@ -290,7 +323,7 @@ const builtinComponentActions: ComponentAction[] = [
name: 'copy', name: 'copy',
content: { content: {
icon: IconClone, icon: IconClone,
title: intl('copy'), title: intlNode('copy'),
action(node: Node) { action(node: Node) {
// node.remove(); // node.remove();
}, },
@ -300,7 +333,7 @@ const builtinComponentActions: ComponentAction[] = [
]; ];
export function removeBuiltinComponentAction(name: string) { export function removeBuiltinComponentAction(name: string) {
const i = builtinComponentActions.findIndex(action => action.name === name); const i = builtinComponentActions.findIndex((action) => action.name === name);
if (i > -1) { if (i > -1) {
builtinComponentActions.splice(i, 1); builtinComponentActions.splice(i, 1);
} }

7
packages/designer/src/designer/builtin-hotkey.ts
View File

@ -1,6 +1,7 @@
import { hotkey, isFormEvent } from '@ali/lowcode-globals'; import { hotkey } from '@ali/lowcode-editor-core';
import { isFormEvent } from '@ali/lowcode-utils';
import { focusing } from './focusing'; import { focusing } from './focusing';
import { insertChildren } from '../document'; import { insertChildren, TransformStage } from '../document';
import clipboard from './clipboard'; import clipboard from './clipboard';
// hotkey binding // hotkey binding
@ -52,7 +53,7 @@ hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => {
if (!selected || selected.length < 1) return; if (!selected || selected.length < 1) return;
const componentsMap = {}; const componentsMap = {};
const componentsTree = selected.map((item) => item.export(false)); const componentsTree = selected.map((item) => item.export(TransformStage.Save));
const data = { type: 'nodeSchema', componentsMap, componentsTree }; const data = { type: 'nodeSchema', componentsMap, componentsTree };

1
packages/designer/src/designer/designer-view.tsx
View File

@ -1,6 +1,5 @@
import { Component } from 'react'; import { Component } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { TipContainer } from '@ali/lowcode-globals';
import BuiltinDragGhostComponent from './drag-ghost'; import BuiltinDragGhostComponent from './drag-ghost';
import { Designer, DesignerProps } from './designer'; import { Designer, DesignerProps } from './designer';
import { ProjectView } from '../project'; import { ProjectView } from '../project';

6
packages/designer/src/designer/designer.ts
View File

@ -1,16 +1,14 @@
import { ComponentType } from 'react'; import { ComponentType } from 'react';
import { obx, computed, autorun } from '@ali/lowcode-editor-core';
import { import {
ProjectSchema, ProjectSchema,
ComponentMetadata, ComponentMetadata,
ComponentAction, ComponentAction,
NpmInfo, NpmInfo,
obx,
computed,
autorun,
IEditor, IEditor,
CompositeObject, CompositeObject,
PropsList, PropsList,
} from '@ali/lowcode-globals'; } from '@ali/lowcode-types';
import { Project } from '../project'; import { Project } from '../project';
import { Node, DocumentModel, insertChildren, isRootNode, ParentalNode, TransformStage } from '../document'; import { Node, DocumentModel, insertChildren, isRootNode, ParentalNode, TransformStage } from '../document';
import { ComponentMeta } from '../component-meta'; import { ComponentMeta } from '../component-meta';

2
packages/designer/src/designer/drag-ghost/index.tsx
View File

@ -1,5 +1,5 @@
import { Component } from 'react'; import { Component } from 'react';
import { observer, obx, Title } from '@ali/lowcode-globals'; import { observer, obx, Title } from '@ali/lowcode-editor-core';
import { Designer } from '../designer'; import { Designer } from '../designer';
import { DragObject, isDragNodeObject, isDragNodeDataObject } from '../dragon'; import { DragObject, isDragNodeObject, isDragNodeDataObject } from '../dragon';
import './ghost.less'; import './ghost.less';

6
packages/designer/src/designer/dragon.ts
View File

@ -1,11 +1,11 @@
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import { NodeSchema, obx } from '@ali/lowcode-globals'; import { obx } from '@ali/lowcode-editor-core';
import { NodeSchema } from '@ali/lowcode-types';
import { setNativeSelection, cursor } from '@ali/lowcode-utils';
import { DropLocation } from './location'; import { DropLocation } from './location';
import { Node, DocumentModel } from '../document'; import { Node, DocumentModel } from '../document';
import { ISimulatorHost, isSimulatorHost } from '../simulator'; import { ISimulatorHost, isSimulatorHost } from '../simulator';
import { Designer } from './designer'; import { Designer } from './designer';
import { setNativeSelection } from '@ali/lowcode-globals';
import { cursor } from '@ali/lowcode-globals';
export interface LocateEvent { export interface LocateEvent {
readonly type: 'LocateEvent'; readonly type: 'LocateEvent';

2
packages/designer/src/designer/hovering.ts
View File

@ -1,4 +1,4 @@
import { obx } from '@ali/lowcode-globals'; import { obx } from '@ali/lowcode-editor-core';
import { Node, DocumentModel } from '../document'; import { Node, DocumentModel } from '../document';
export class Hovering { export class Hovering {

4
packages/designer/src/designer/offset-observer.ts
View File

@ -1,5 +1,5 @@
import { obx, computed } from '@ali/lowcode-globals'; import { obx, computed } from '@ali/lowcode-editor-core';
import { uniqueId } from '@ali/lowcode-globals'; import { uniqueId } from '@ali/lowcode-utils';
import { INodeSelector, IViewport } from '../simulator'; import { INodeSelector, IViewport } from '../simulator';
import { isRootNode, Node } from '../document'; import { isRootNode, Node } from '../document';

2
packages/designer/src/designer/scroller.ts
View File

@ -1,4 +1,4 @@
import { isElement } from '@ali/lowcode-globals'; import { isElement } from '@ali/lowcode-utils';
export class ScrollTarget { export class ScrollTarget {
get left() { get left() {

2
packages/designer/src/designer/setting/setting-entry.ts
View File

@ -1,4 +1,4 @@
import { SettingTarget } from '@ali/lowcode-globals'; import { SettingTarget } from '@ali/lowcode-types';
import { ComponentMeta } from '../../component-meta'; import { ComponentMeta } from '../../component-meta';
import { Designer } from '../designer'; import { Designer } from '../designer';
import { Node } from '../../document'; import { Node } from '../../document';

3
packages/designer/src/designer/setting/setting-field.ts
View File

@ -1,7 +1,8 @@
import { TitleContent, computed, isDynamicSetter, SetterType, DynamicSetter, FieldExtraProps, FieldConfig, CustomView, isCustomView, obx } from '@ali/lowcode-globals'; import { TitleContent, isDynamicSetter, SetterType, DynamicSetter, FieldExtraProps, FieldConfig, CustomView, isCustomView } from '@ali/lowcode-types';
import { Transducer } from './utils'; import { Transducer } from './utils';
import { SettingPropEntry } from './setting-prop-entry'; import { SettingPropEntry } from './setting-prop-entry';
import { SettingEntry } from './setting-entry'; import { SettingEntry } from './setting-entry';
import { computed, obx } from '@ali/lowcode-editor-core';
export class SettingField extends SettingPropEntry implements SettingEntry { export class SettingField extends SettingPropEntry implements SettingEntry {
readonly isSettingField = true; readonly isSettingField = true;

4
packages/designer/src/designer/setting/setting-prop-entry.ts
View File

@ -1,4 +1,6 @@
import { obx, uniqueId, computed, IEditor } from '@ali/lowcode-globals'; import { obx, computed } from '@ali/lowcode-editor-core';
import { IEditor } from '@ali/lowcode-types';
import { uniqueId } from '@ali/lowcode-utils';
import { SettingEntry } from './setting-entry'; import { SettingEntry } from './setting-entry';
import { Node } from '../../document'; import { Node } from '../../document';
import { ComponentMeta } from '../../component-meta'; import { ComponentMeta } from '../../component-meta';

3
packages/designer/src/designer/setting/setting-top-entry.ts
View File

@ -1,5 +1,6 @@
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import { CustomView, computed, isCustomView, IEditor } from '@ali/lowcode-globals'; import { CustomView, isCustomView, IEditor } from '@ali/lowcode-types';
import { computed } from '@ali/lowcode-editor-core';
import { SettingEntry } from './setting-entry'; import { SettingEntry } from './setting-entry';
import { SettingField } from './setting-field'; import { SettingField } from './setting-field';
import { SettingPropEntry } from './setting-prop-entry'; import { SettingPropEntry } from './setting-prop-entry';

25
packages/designer/src/document/document-model.ts
View File

@ -1,17 +1,5 @@
import { import { computed, obx } from '@ali/lowcode-editor-core';
NodeData, import { NodeData, isJSExpression, isDOMText, NodeSchema, isNodeSchema, RootSchema } from '@ali/lowcode-types';
isJSExpression,
isDOMText,
NodeSchema,
computed,
obx,
autorun,
isNodeSchema,
uniqueId,
PageSchema,
ComponentSchema,
RootSchema,
} from '@ali/lowcode-globals';
import { Project } from '../project'; import { Project } from '../project';
import { ISimulatorHost } from '../simulator'; import { ISimulatorHost } from '../simulator';
import { ComponentMeta } from '../component-meta'; import { ComponentMeta } from '../component-meta';
@ -20,6 +8,7 @@ import { Node, insertChildren, insertChild, isNode, RootNode, ParentalNode } fro
import { Selection } from './selection'; import { Selection } from './selection';
import { History } from './history'; import { History } from './history';
import { TransformStage } from './node'; import { TransformStage } from './node';
import { uniqueId } from '@ali/lowcode-utils';
export type GetDataType<T, NodeType> = T extends undefined export type GetDataType<T, NodeType> = T extends undefined
? NodeType extends { ? NodeType extends {
@ -90,11 +79,13 @@ export class DocumentModel {
this._blank = true; this._blank = true;
} }
this.rootNode = this.createNode<RootNode>(schema || { this.rootNode = this.createNode<RootNode>(
schema || {
componentName: 'Page', componentName: 'Page',
id: 'root', id: 'root',
fileName: '' fileName: '',
}); },
);
this.history = new History( this.history = new History(
() => this.schema, () => this.schema,

2
packages/designer/src/document/document-view.tsx
View File

@ -1,6 +1,6 @@
import { Component } from 'react'; import { Component } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { observer } from '@ali/lowcode-globals'; import { observer } from '@ali/lowcode-editor-core';
import { DocumentModel } from './document-model'; import { DocumentModel } from './document-model';
import { BuiltinSimulatorHostView } from '../builtin-simulator'; import { BuiltinSimulatorHostView } from '../builtin-simulator';

3
packages/designer/src/document/history.ts
View File

@ -1,5 +1,6 @@
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import { NodeSchema, autorun, Reaction, untracked } from '@ali/lowcode-globals'; import { autorun, Reaction, untracked } from '@ali/lowcode-editor-core';
import { NodeSchema } from '@ali/lowcode-types';
// TODO: cache to localStorage // TODO: cache to localStorage

5
packages/designer/src/document/node/exclusive-group.ts
View File

@ -1,5 +1,6 @@
import { obx, computed, TitleContent } from '@ali/lowcode-globals'; import { obx, computed } from '@ali/lowcode-editor-core';
import { uniqueId } from '@ali/lowcode-globals'; import { uniqueId } from '@ali/lowcode-utils';
import { TitleContent } from '@ali/lowcode-types';
import { Node } from './node'; import { Node } from './node';
import { intl } from '../../locale'; import { intl } from '../../locale';

3
packages/designer/src/document/node/node-children.ts
View File

@ -1,6 +1,7 @@
import { NodeData, isNodeSchema, obx, computed } from '@ali/lowcode-globals'; import { obx, computed } from '@ali/lowcode-editor-core';
import { Node, ParentalNode } from './node'; import { Node, ParentalNode } from './node';
import { TransformStage } from './transform-stage'; import { TransformStage } from './transform-stage';
import { NodeData, isNodeSchema } from '@ali/lowcode-types';
export class NodeChildren { export class NodeChildren {
@obx.val private children: Node[]; @obx.val private children: Node[];

17
packages/designer/src/document/node/node.ts
View File

@ -1,3 +1,4 @@
import { obx, computed } from '@ali/lowcode-editor-core';
import { import {
isDOMText, isDOMText,
isJSExpression, isJSExpression,
@ -6,12 +7,10 @@ import {
PropsList, PropsList,
NodeData, NodeData,
TitleContent, TitleContent,
obx,
computed,
SlotSchema, SlotSchema,
PageSchema, PageSchema,
ComponentSchema, ComponentSchema,
} from '@ali/lowcode-globals'; } from '@ali/lowcode-types';
import { Props, EXTRA_KEY_PREFIX } from './props/props'; import { Props, EXTRA_KEY_PREFIX } from './props/props';
import { DocumentModel } from '../document-model'; import { DocumentModel } from '../document-model';
import { NodeChildren } from './node-children'; import { NodeChildren } from './node-children';
@ -20,8 +19,6 @@ import { ComponentMeta } from '../../component-meta';
import { ExclusiveGroup, isExclusiveGroup } from './exclusive-group'; import { ExclusiveGroup, isExclusiveGroup } from './exclusive-group';
import { TransformStage } from './transform-stage'; import { TransformStage } from './transform-stage';
/** /**
* 基础节点 * 基础节点
* *
@ -179,7 +176,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
} }
isRoot(): this is RootNode { isRoot(): this is RootNode {
return this.document.rootNode == this as any; return this.document.rootNode == (this as any);
} }
isPage(): this is PageNode { isPage(): this is PageNode {
@ -302,7 +299,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
@computed get slots() { @computed get slots() {
// TODO: optimize recore/obx, array maked every time, donot as changed // TODO: optimize recore/obx, array maked every time, donot as changed
const slots: Node[] = []; const slots: Node[] = [];
this.props.forEach(item => { this.props.forEach((item) => {
if (item.type === 'slot') { if (item.type === 'slot') {
slots.push(item.slotNode!); slots.push(item.slotNode!);
} }
@ -578,7 +575,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
this.children?.insert(node, ref ? ref.index : null); this.children?.insert(node, ref ? ref.index : null);
} }
insertAfter(node: Node, ref?: Node) { insertAfter(node: Node, ref?: Node) {
this.children?.insert(node, ref ? (ref.index + 1) : null); this.children?.insert(node, ref ? ref.index + 1 : null);
} }
getParent() { getParent() {
return this.parent; return this.parent;
@ -609,9 +606,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
/** /**
* @deprecated * @deprecated
*/ */
setStatus() { setStatus() {}
}
/** /**
* @deprecated * @deprecated
*/ */

2
packages/designer/src/document/node/props/prop-stash.ts
View File

@ -1,4 +1,4 @@
import { obx, autorun, untracked, computed } from '@ali/lowcode-globals'; import { obx, autorun, untracked, computed } from '@ali/lowcode-editor-core';
import { Prop, IPropParent, UNSET } from './prop'; import { Prop, IPropParent, UNSET } from './prop';
import { Props } from './props'; import { Props } from './props';

16
packages/designer/src/document/node/props/prop.ts
View File

@ -1,16 +1,6 @@
import { import { untracked, computed, obx } from '@ali/lowcode-editor-core';
CompositeValue, import { CompositeValue, isJSExpression, isJSSlot, JSSlot, SlotSchema } from '@ali/lowcode-types';
isJSExpression, import { uniqueId, isPlainObject, hasOwnProperty } from '@ali/lowcode-utils';
isJSSlot,
untracked,
computed,
obx,
JSSlot,
SlotSchema
} from '@ali/lowcode-globals';
import { uniqueId } from '@ali/lowcode-globals';
import { isPlainObject } from '@ali/lowcode-globals';
import { hasOwnProperty } from '@ali/lowcode-globals';
import { PropStash } from './prop-stash'; import { PropStash } from './prop-stash';
import { valueToSource } from './value-to-source'; import { valueToSource } from './value-to-source';
import { Props } from './props'; import { Props } from './props';

4
packages/designer/src/document/node/props/props.ts
View File

@ -1,4 +1,6 @@
import { PropsMap, PropsList, CompositeValue, computed, obx, uniqueId } from '@ali/lowcode-globals'; import { computed, obx } from '@ali/lowcode-editor-core';
import { PropsMap, PropsList, CompositeValue } from '@ali/lowcode-types';
import { uniqueId } from '@ali/lowcode-utils';
import { PropStash } from './prop-stash'; import { PropStash } from './prop-stash';
import { Prop, IPropParent, UNSET } from './prop'; import { Prop, IPropParent, UNSET } from './prop';
import { Node } from '../node'; import { Node } from '../node';

2
packages/designer/src/document/selection.ts
View File

@ -1,5 +1,5 @@
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import { obx } from '@ali/lowcode-globals'; import { obx } from '@ali/lowcode-editor-core';
import { Node, comparePosition, PositionNO } from './node/node'; import { Node, comparePosition, PositionNO } from './node/node';
import { DocumentModel } from './document-model'; import { DocumentModel } from './document-model';

2
packages/designer/src/icons/clone.tsx
View File

@ -1,4 +1,4 @@
import { SVGIcon, IconProps } from "@ali/lowcode-globals"; import { SVGIcon, IconProps } from "@ali/lowcode-utils";
export function IconClone(props: IconProps) { export function IconClone(props: IconProps) {
return ( return (

2
packages/designer/src/icons/component.tsx
View File

@ -1,4 +1,4 @@
import { SVGIcon, IconProps } from "@ali/lowcode-globals"; import { SVGIcon, IconProps } from "@ali/lowcode-utils";
export function IconComponent(props: IconProps) { export function IconComponent(props: IconProps) {
return ( return (

2
packages/designer/src/icons/container.tsx
View File

@ -1,4 +1,4 @@
import { SVGIcon, IconProps } from "@ali/lowcode-globals"; import { SVGIcon, IconProps } from "@ali/lowcode-utils";
export function IconContainer(props: IconProps) { export function IconContainer(props: IconProps) {
return ( return (

2
packages/designer/src/icons/hidden.tsx
View File

@ -1,4 +1,4 @@
import { SVGIcon, IconProps } from "@ali/lowcode-globals"; import { SVGIcon, IconProps } from "@ali/lowcode-utils";
export function IconHidden(props: IconProps) { export function IconHidden(props: IconProps) {
return ( return (

2
packages/designer/src/icons/page.tsx
View File

@ -1,4 +1,4 @@
import { SVGIcon, IconProps } from "@ali/lowcode-globals"; import { SVGIcon, IconProps } from "@ali/lowcode-utils";
export function IconPage(props: IconProps) { export function IconPage(props: IconProps) {
return ( return (

2
packages/designer/src/icons/remove.tsx
View File

@ -1,4 +1,4 @@
import { SVGIcon, IconProps } from '@ali/lowcode-globals'; import { SVGIcon, IconProps } from '@ali/lowcode-utils';
export function IconRemove(props: IconProps) { export function IconRemove(props: IconProps) {
return ( return (

2
packages/designer/src/icons/setting.tsx
View File

@ -1,4 +1,4 @@
import { SVGIcon, IconProps } from '@ali/lowcode-globals'; import { SVGIcon, IconProps } from '@ali/lowcode-utils';
export function IconSetting(props: IconProps) { export function IconSetting(props: IconProps) {
return ( return (

6
packages/designer/src/locale/index.ts
View File

@ -1,10 +1,10 @@
import { createIntl } from '@ali/lowcode-globals'; import { createIntl } from '@ali/lowcode-editor-core';
import en_US from './en-US.json'; import en_US from './en-US.json';
import zh_CN from './zh-CN.json'; import zh_CN from './zh-CN.json';
const { intl, getLocale, setLocale } = createIntl({ const { intl, intlNode, getLocale, setLocale } = createIntl({
'en-US': en_US, 'en-US': en_US,
'zh-CN': zh_CN, 'zh-CN': zh_CN,
}); });
export { intl, getLocale, setLocale }; export { intl, intlNode, getLocale, setLocale };

2
packages/designer/src/project/project-view.tsx
View File

@ -1,5 +1,5 @@
import { Component } from 'react'; import { Component } from 'react';
import { observer } from '@ali/lowcode-globals'; import { observer } from '@ali/lowcode-editor-core';
import { Designer } from '../designer'; import { Designer } from '../designer';
import { DocumentView } from '../document'; import { DocumentView } from '../document';
import { intl } from '../locale'; import { intl } from '../locale';

3
packages/designer/src/project/project.ts
View File

@ -1,7 +1,8 @@
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import { ProjectSchema, RootSchema, obx, computed } from '@ali/lowcode-globals'; import { obx, computed } from '@ali/lowcode-editor-core';
import { Designer } from '../designer'; import { Designer } from '../designer';
import { DocumentModel, isDocumentModel } from '../document'; import { DocumentModel, isDocumentModel } from '../document';
import { ProjectSchema, RootSchema } from '@ali/lowcode-types';
export class Project { export class Project {
private emitter = new EventEmitter(); private emitter = new EventEmitter();

2
packages/designer/src/simulator.ts
View File

@ -1,5 +1,5 @@
import { Component as ReactComponent, ComponentType } from 'react'; import { Component as ReactComponent, ComponentType } from 'react';
import { ComponentMetadata } from '@ali/lowcode-globals'; import { ComponentMetadata } from '@ali/lowcode-types';
import { ISensor, Point, ScrollTarget, IScrollable } from './designer'; import { ISensor, Point, ScrollTarget, IScrollable } from './designer';
import { Node } from './document'; import { Node } from './document';

31
packages/editor-core/CHANGELOG.md
View File

@ -3,43 +3,24 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.6"></a> <a name="0.8.9"></a>
## [0.8.6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.5...@ali/lowcode-editor-core@0.8.6) (2020-04-16) ## [0.8.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.8...@ali/lowcode-editor-core@0.8.9) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-editor-core **Note:** Version bump only for package @ali/lowcode-editor-core
<a name="0.8.5"></a> <a name="0.8.8"></a>
## [0.8.5](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.4...@ali/lowcode-editor-core@0.8.5) (2020-04-15) ## [0.8.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.7...@ali/lowcode-editor-core@0.8.8) (2020-04-27)
### Bug Fixes
* editor ([ccd9162](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/ccd9162))
<a name="0.8.4"></a>
## [0.8.4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.3...@ali/lowcode-editor-core@0.8.4) (2020-03-30)
**Note:** Version bump only for package @ali/lowcode-editor-core **Note:** Version bump only for package @ali/lowcode-editor-core
<a name="0.8.3"></a> <a name="0.8.7"></a>
## 0.8.3 (2020-03-30) ## [0.8.7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-core@0.8.6...@ali/lowcode-editor-core@0.8.7) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-editor-core
<a name="0.8.2"></a>
## 0.8.2 (2020-03-30)

12
packages/editor-core/README.md
View File

@ -1,11 +1,3 @@
# demo component shared globals
t-s-demo 发 CDN
intro component
## API
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------ | ---- | ---- | ---- | ------ | ---- |
| | | | | | |

11
packages/editor-core/build.json
View File

@ -1,5 +1,14 @@
{ {
"plugins": [ "plugins": [
"build-plugin-component" [
"build-plugin-component",
{
"filename": "core",
"library": "LCECore",
"libraryTarget": "umd"
}
],
"build-plugin-fusion",
"./build.plugin.js"
] ]
} }

12
packages/editor-core/build.plugin.js Normal file
View File

@ -0,0 +1,12 @@
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = ({ onGetWebpackConfig }) => {
onGetWebpackConfig((config) => {
config.resolve
.plugin('tsconfigpaths')
.use(TsconfigPathsPlugin, [{
configFile: "./tsconfig.json"
}]);
});
};

49
packages/editor-core/package.json
View File

@ -1,45 +1,44 @@
{ {
"name": "@ali/lowcode-editor-core", "name": "@ali/lowcode-editor-core",
"version": "0.8.6", "version": "0.8.9",
"description": "alibaba lowcode editor core", "description": "Core Api for Ali lowCode engine",
"license": "MIT",
"main": "lib/index.js", "main": "lib/index.js",
"module": "es/index.js", "module": "es/index.js",
"stylePath": "style.js",
"files": [ "files": [
"lib", "lib",
"es" "es",
"dist"
], ],
"scripts": { "scripts": {
"build": "build-scripts build --skip-demo", "build": "build-scripts build --skip-demo",
"test": "ava", "cloud-build": "build-scripts build --skip-demo"
"test:snapshot": "ava --update-snapshots"
}, },
"keywords": [
"lowcode",
"editor"
],
"author": "xiayang.xy",
"dependencies": { "dependencies": {
"@ali/lowcode-globals": "^0.9.3", "@ali/lowcode-types": "^0.8.1",
"@alifd/next": "1.x", "@ali/lowcode-utils": "^0.8.2",
"@alifd/next": "^1.19.16",
"@recore/obx": "^1.0.8",
"@recore/obx-react": "^1.0.7",
"classnames": "^2.2.6",
"debug": "^4.1.1", "debug": "^4.1.1",
"events": "^3.1.0",
"intl-messageformat": "^8.3.1", "intl-messageformat": "^8.3.1",
"lodash": "^4.17.15", "power-di": "^2.2.4",
"prop-types": "^15.5.8", "react": "^16",
"react": "^16.8.0", "react-dom": "^16.7.0",
"store": "^2.0.12", "store": "^2.0.12"
"whatwg-fetch": "^3.0.0"
}, },
"devDependencies": { "devDependencies": {
"@alib/build-scripts": "^0.1.3", "@alib/build-scripts": "^0.1.18",
"@types/lodash": "^4.14.149", "@types/classnames": "^2.2.7",
"@types/react": "^16.9.13", "@types/node": "^13.7.1",
"@types/react-dom": "^16.9.4", "@types/react": "^16",
"@types/react-dom": "^16",
"@types/store": "^2.0.2", "@types/store": "^2.0.2",
"build-plugin-component": "^0.2.10" "build-plugin-component": "^0.2.11",
"build-plugin-fusion": "^0.1.0",
"build-plugin-moment-locales": "^0.1.0"
}, },
"license": "MIT",
"publishConfig": { "publishConfig": {
"registry": "https://registry.npm.alibaba-inc.com" "registry": "https://registry.npm.alibaba-inc.com"
} }

75
packages/editor-core/src/areaManager.ts
View File

@ -1,75 +0,0 @@
import { PluginConfig, PluginStatus, PluginClass, HOCPlugin } from './definitions';
import Editor from './index';
import { clone, deepEqual } from './utils';
export default class AreaManager {
private pluginStatus: PluginStatus;
private config: PluginConfig[];
constructor(private editor: Editor, private name: string) {
this.config = (editor && editor.config && editor.config.plugins && editor.config.plugins[name]) || [];
this.pluginStatus = clone(editor.pluginStatus);
}
setVisible(flag: boolean) {
}
isEnable() {
}
isVisible() {
}
isEmpty() {
}
isPluginStatusUpdate(pluginType?: string, notUpdateStatus?: boolean): boolean {
const { pluginStatus } = this.editor;
const list = pluginType ? this.config.filter((item): boolean => item.type === pluginType) : this.config;
const isUpdate = list.some(
(item): boolean => !deepEqual(pluginStatus[item.pluginKey], this.pluginStatus[item.pluginKey]),
);
if (!notUpdateStatus) {
this.pluginStatus = clone(pluginStatus);
}
return isUpdate;
}
getVisiblePluginList(pluginType?: string): PluginConfig[] {
const res = this.config.filter((item): boolean => {
return !!(!this.pluginStatus[item.pluginKey] || this.pluginStatus[item.pluginKey].visible);
});
return pluginType ? res.filter((item): boolean => item.type === pluginType) : res;
}
getPlugin(pluginKey: string): HOCPlugin | void {
if (pluginKey) {
return this.editor && this.editor.plugins && this.editor.plugins[pluginKey];
}
}
getPluginConfig(pluginKey?: string): PluginConfig[] | PluginConfig | undefined {
if (pluginKey) {
return this.config.find(item => item.pluginKey === pluginKey);
}
return this.config;
}
getPluginClass(pluginKey: string): PluginClass | void {
if (pluginKey) {
return this.editor && this.editor.components && this.editor.components[pluginKey];
}
}
getPluginStatus(pluginKey: string): PluginStatus | void {
if (pluginKey) {
return this.editor && this.editor.pluginStatus && this.editor.pluginStatus[pluginKey];
}
}
}

4
packages/editor-core/src/context.ts
View File

@ -1,4 +0,0 @@
import { createContext } from 'react';
const context = createContext({});
export default context;

3
packages/globals/src/di/index.ts → packages/editor-core/src/di/index.ts
View File

@ -1,4 +1,3 @@
export * from './setter'; export * from './setter';
export * from './transducer';
export * from './ioc-context'; export * from './ioc-context';
export * from './editor'; export * from '../widgets/tip/tip';

0
packages/globals/src/di/ioc-context.ts → packages/editor-core/src/di/ioc-context.ts
View File

5
packages/globals/src/di/setter.ts → packages/editor-core/src/di/setter.ts
View File

@ -1,7 +1,6 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { CustomView, isCustomView } from '../types/setter-config'; import { CustomView, isCustomView, TitleContent } from '@ali/lowcode-types';
import { createContent } from '../utils/create-content'; import { createContent } from '@ali/lowcode-utils';
import { TitleContent } from '../types';
export type RegisteredSetter = { export type RegisteredSetter = {
component: CustomView; component: CustomView;

151
packages/editor-core/src/editor.ts
View File

@ -1,31 +1,10 @@
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import store from 'store'; import { IEditor, EditorConfig, PluginClassSet } from '@ali/lowcode-types';
import { IocContext, RegisterOptions } from '@ali/lowcode-globals'; import { IocContext, RegisterOptions } from './di';
import { import { globalLocale } from './intl';
EditorConfig,
HooksConfig,
LocaleType,
PluginStatusSet,
Utils,
PluginClassSet,
PluginSet,
} from './definitions';
import pluginFactory from './pluginFactory';
import * as editorUtils from './utils';
const { registShortCuts, transformToPromise, unRegistShortCuts } = editorUtils;
let instance: Editor;
EventEmitter.defaultMaxListeners = 100; EventEmitter.defaultMaxListeners = 100;
export interface HooksFuncs { export type KeyType = Function | Symbol | string;
[idx: number]: (msg: string, handler: (...args: []) => void) => void;
}
export type KeyType = Function | symbol | string;
export type ClassType = Function | (new (...args: any[]) => any); export type ClassType = Function | (new (...args: any[]) => any);
export interface GetOptions { export interface GetOptions {
forceNew?: boolean; forceNew?: boolean;
@ -41,26 +20,9 @@ export type GetReturnType<T, ClsType> = T extends undefined
const NOT_FOUND = Symbol.for('not_found'); const NOT_FOUND = Symbol.for('not_found');
export default class Editor extends EventEmitter { import * as utils from './utils';
static getInstance = (config: EditorConfig, components: PluginClassSet, utils?: Utils): Editor => {
if (!instance) {
instance = new Editor(config, components, utils);
}
return instance;
};
private _components?: PluginClassSet; export class Editor extends EventEmitter implements IEditor {
get components(): PluginClassSet {
if (!this._components) {
this._components = {};
Object.keys(this.componentsMap).forEach((key) => {
(this._components as any)[key] = pluginFactory(this.componentsMap[key]);
});
}
return this._components;
}
readonly utils: Utils;
/** /**
* Ioc Container * Ioc Container
*/ */
@ -68,18 +30,14 @@ export default class Editor extends EventEmitter {
notFoundHandler: (type: KeyType) => NOT_FOUND, notFoundHandler: (type: KeyType) => NOT_FOUND,
}); });
pluginStatus?: PluginStatusSet; get locale() {
return globalLocale.getLocale();
}
plugins?: PluginSet; readonly utils = utils;
locale?: LocaleType; constructor(readonly config: EditorConfig = {}, readonly components: PluginClassSet = {}) {
hooksFuncs?: HooksFuncs;
constructor(readonly config: EditorConfig = {}, readonly componentsMap: PluginClassSet = {}, utils?: Utils) {
super(); super();
this.utils = { ...editorUtils, ...utils } as any;
instance = this;
} }
get<T = undefined, KeyOrType = any>(keyOrType: KeyOrType, opt?: GetOptions): GetReturnType<T, KeyOrType> | undefined { get<T = undefined, KeyOrType = any>(keyOrType: KeyOrType, opt?: GetOptions): GetReturnType<T, KeyOrType> | undefined {
@ -135,18 +93,15 @@ export default class Editor extends EventEmitter {
} }
async init(): Promise<any> { async init(): Promise<any> {
const { hooks, shortCuts = [], lifeCycles } = this.config || {}; const { shortCuts = [], lifeCycles } = this.config || {};
this.locale = store.get('lowcode-editor-locale') || 'zh-CN';
this.pluginStatus = this.initPluginStatus();
this.initHooks(hooks || []);
this.emit('editor.beforeInit'); this.emit('editor.beforeInit');
const init = (lifeCycles && lifeCycles.init) || ((): void => {}); const init = (lifeCycles && lifeCycles.init) || ((): void => {});
// 用户可以通过设置extensions.init自定义初始化流程； // 用户可以通过设置extensions.init自定义初始化流程；
try { try {
await transformToPromise(init(this)); // await transformToPromise(init(this));
// 注册快捷键 // 注册快捷键
registShortCuts(shortCuts, this); // registShortCuts(shortCuts, this);
this.emit('editor.afterInit'); this.emit('editor.afterInit');
return true; return true;
} catch (err) { } catch (err) {
@ -156,9 +111,8 @@ export default class Editor extends EventEmitter {
destroy(): void { destroy(): void {
try { try {
const { hooks = [], shortCuts = [], lifeCycles = {} } = this.config; const { shortCuts = [], lifeCycles = {} } = this.config;
unRegistShortCuts(shortCuts); // unRegistShortCuts(shortCuts);
this.destroyHooks(hooks);
if (lifeCycles.destroy) { if (lifeCycles.destroy) {
lifeCycles.destroy(this); lifeCycles.destroy(this);
} }
@ -167,33 +121,6 @@ export default class Editor extends EventEmitter {
} }
} }
batchOn(events: string[], lisenter: (...args: any[]) => void): void {
if (!Array.isArray(events)) {
return;
}
events.forEach((event): void => {
this.on(event, lisenter);
});
}
batchOnce(events: string[], lisenter: (...args: any[]) => void): void {
if (!Array.isArray(events)) {
return;
}
events.forEach((event): void => {
this.once(event, lisenter);
});
}
batchOff(events: string[], lisenter: (...args: any[]) => void): void {
if (!Array.isArray(events)) {
return;
}
events.forEach((event): void => {
this.off(event, lisenter);
});
}
private waits = new Map< private waits = new Map<
KeyType, KeyType,
Array<{ Array<{
@ -245,50 +172,4 @@ export default class Editor extends EventEmitter {
this.waits.delete(key); this.waits.delete(key);
} }
} }
// 销毁hooks中的消息监听
private destroyHooks(hooks: HooksConfig = []): void {
hooks.forEach((item, idx): void => {
if (typeof this.hooksFuncs?.[idx] === 'function') {
this.off(item.message, this.hooksFuncs[idx]);
}
});
delete this.hooksFuncs;
}
// 初始化hooks中的消息监听
private initHooks(hooks: HooksConfig = []): void {
this.hooksFuncs = hooks.map((item): ((...arg: any[]) => void) => {
const func = (...args: any[]): void => {
item.handler(this, ...args);
};
this[item.type](item.message, func);
return func;
});
}
private initPluginStatus(): PluginStatusSet {
const { plugins = {} } = this.config;
const pluginAreas = Object.keys(plugins);
const res: PluginStatusSet = {};
pluginAreas.forEach((area): void => {
(plugins[area] || []).forEach((plugin): void => {
if (plugin.type === 'Divider') {
return;
}
const { visible, disabled, marked } = plugin.props || {};
res[plugin.pluginKey] = {
visible: typeof visible === 'boolean' ? visible : true,
disabled: typeof disabled === 'boolean' ? disabled : false,
marked: typeof marked === 'boolean' ? marked : false,
};
const pluginClass = this.components[plugin.pluginKey];
// 判断如果编辑器插件有init静态方法，则在此执行init方法
if (pluginClass && pluginClass.init) {
pluginClass.init(this);
}
});
});
return res;
}
} }

0
packages/globals/src/utils/hotkey.ts → packages/editor-core/src/hotkey.ts
View File

17
packages/editor-core/src/index.ts
View File

@ -1,11 +1,6 @@
import Editor from './editor'; export * from './intl';
export * from './editor';
import * as utils from './utils'; export * from './utils';
export * from './di';
export { default as PluginFactory } from './pluginFactory'; export * from './hotkey';
export { default as EditorContext } from './context'; export * from './widgets';
export { default as AreaManager } from './areaManager';
export default Editor;
export { Editor, utils };

3
packages/globals/src/intl/ali-global-locale.ts → packages/editor-core/src/intl/ali-global-locale.ts
View File

@ -1,4 +1,5 @@
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import { obx } from '../utils/obx';
const languageMap: { [key: string]: string } = { const languageMap: { [key: string]: string } = {
en: 'en-US', en: 'en-US',
zh: 'zh-CN', zh: 'zh-CN',
@ -28,7 +29,7 @@ const languageMap: { [key: string]: string } = {
const LowcodeConfigKey = 'ali-lowcode-config'; const LowcodeConfigKey = 'ali-lowcode-config';
class AliGlobalLocale { class AliGlobalLocale {
private locale: string = ''; @obx.ref private locale: string = '';
private emitter = new EventEmitter(); private emitter = new EventEmitter();
constructor() { constructor() {

133
packages/globals/src/intl/index.tsx → packages/editor-core/src/intl/index.ts
View File

@ -1,19 +1,9 @@
import { ReactNode, Component, createElement } from 'react';
import { IntlMessageFormat } from 'intl-messageformat';
import { globalLocale } from './ali-global-locale'; import { globalLocale } from './ali-global-locale';
import { PureComponent, ReactNode } from 'react'; import { isI18nData } from '@ali/lowcode-types';
import { isI18nData } from '../types'; import { observer, computed } from '../utils';
function injectVars(template: string, params: any): string {
if (!template || !params) {
return template;
}
return template.replace(/({\w+})/g, (_, $1) => {
const key = (/\d+/.exec($1) || [])[0] as any;
if (key && params[key] != null) {
return params[key];
}
return $1;
});
}
function generateTryLocales(locale: string) { function generateTryLocales(locale: string) {
const tries = [locale, locale.replace('-', '_')]; const tries = [locale, locale.replace('-', '_')];
if (locale === 'zh-TW' || locale === 'en-US') { if (locale === 'zh-TW' || locale === 'en-US') {
@ -30,44 +20,40 @@ function generateTryLocales(locale: string) {
return tries; return tries;
} }
export function localeFormat(data: any, params?: object): string { function injectVars(msg: string, params: any, locale: string): string {
if (!msg || !params) {
return msg;
}
const formater = new IntlMessageFormat(msg, locale);
return formater.format(params as any) as string;
/*
return template.replace(/({\w+})/g, (_, $1) => {
const key = (/\d+/.exec($1) || [])[0] as any;
if (key && params[key] != null) {
return params[key];
}
return $1;
});*/
}
export function intl(data: any, params?: object): string {
if (!isI18nData(data)) { if (!isI18nData(data)) {
return data; return data;
} }
const locale = globalLocale.getLocale(); const locale = globalLocale.getLocale();
const tries = generateTryLocales(locale); const tries = generateTryLocales(locale);
let tpl: string | undefined; let msg: string | undefined;
for (const lan of tries) { for (const lan of tries) {
tpl = data[lan]; msg = data[lan];
if (tpl != null) { if (msg != null) {
break; break;
} }
} }
if (tpl == null) { if (msg == null) {
return `##intl@${locale}##`; return `##intl@${locale}##`;
} }
return injectVars(tpl, params); return injectVars(msg, params, locale);
}
class Intl extends PureComponent<{ data: any; params?: object }> {
private dispose = globalLocale.onLocaleChange(() => this.forceUpdate());
componentWillUnmount() {
this.dispose();
}
render() {
const { data, params } = this.props;
return localeFormat(data, params);
}
}
export function intl(data: any, params?: object): ReactNode {
if (isI18nData(data)) {
if (data.intl) {
return data.intl;
}
return <Intl data={data} params={params} />;
}
return data;
} }
export function shallowIntl(data: any): any { export function shallowIntl(data: any): any {
@ -76,38 +62,53 @@ export function shallowIntl(data: any): any {
} }
const maps: any = {}; const maps: any = {};
Object.keys(data).forEach(key => { Object.keys(data).forEach(key => {
maps[key] = localeFormat(data[key]); maps[key] = intl(data[key]);
}); });
return maps; return maps;
} }
export function intlNode(data: any, params?: object): ReactNode {
if (isI18nData(data)) {
if (data.intlNode) {
return data.intlNode;
}
return createElement(IntlElement, { data, params });
}
return data;
}
@observer
class IntlElement extends Component<{ data: any; params?: object }> {
render() {
const { data, params } = this.props;
return intl(data, params);
}
}
export function createIntl( export function createIntl(
instance: string | object, instance: string | object,
): { ): {
intl(id: string, params?: object): ReactNode; intlNode(id: string, params?: object): ReactNode;
intlString(id: string, params?: object): string; intl(id: string, params?: object): string;
getLocale(): string; getLocale(): string;
setLocale(locale: string): void; setLocale(locale: string): void;
} { } {
let lastLocale: string | undefined; const data = computed(() => {
let data: any = {}; const locale = globalLocale.getLocale();
function useLocale(locale: string) {
lastLocale = locale;
if (typeof instance === 'string') { if (typeof instance === 'string') {
if ((window as any)[instance]) { if ((window as any)[instance]) {
data = (window as any)[instance][locale] || {}; data.messages = (window as any)[instance][locale] || {};
} else { } else {
const key = `${instance}_${locale.toLocaleLowerCase()}`; const key = `${instance}_${locale.toLocaleLowerCase()}`;
data = (window as any)[key] || {}; data.messages = (window as any)[key] || {};
} }
} else if (instance && typeof instance === 'object') { } else if (instance && typeof instance === 'object') {
data = (instance as any)[locale] || {}; data.messages = (instance as any)[locale] || {};
}
} }
});
useLocale(globalLocale.getLocale()); function intl(key: string, params?: object): string {
function intlString(key: string, params?: object): string {
// TODO: tries lost language // TODO: tries lost language
const str = data[key]; const str = data[key];
@ -115,30 +116,22 @@ export function createIntl(
return `##intl@${key}##`; return `##intl@${key}##`;
} }
return injectVars(str, params); return injectVars(str, params, globalLocale.getLocale());
} }
class Intl extends PureComponent<{ id: string; params?: object }> { @observer
private dispose = globalLocale.onLocaleChange(locale => { class IntlElement extends Component<{ id: string; params?: object }> {
if (lastLocale !== locale) {
useLocale(locale);
this.forceUpdate();
}
});
componentWillUnmount() {
this.dispose();
}
render() { render() {
const { id, params } = this.props; const { id, params } = this.props;
return intlString(id, params); return intl(id, params);
} }
} }
return { return {
intl(id: string, params?: object) { intlNode(id: string, params?: object) {
return <Intl id={id} params={params} />; return createElement(IntlElement, { id, params });
}, },
intlString, intl,
getLocale() { getLocale() {
return globalLocale.getLocale(); return globalLocale.getLocale();
}, },

84
packages/editor-core/src/pluginFactory.tsx
View File

@ -1,84 +0,0 @@
import React, { createRef, PureComponent } from 'react';
import EditorContext from './context';
import { I18nFunction, PluginProps, PluginClass, Plugin } from './definitions';
import Editor from './editor';
import { acceptsRef, generateI18n, isEmpty, transformToPromise } from './utils';
export default function pluginFactory(Comp: PluginClass): React.ComponentType<PluginProps> {
class LowcodePlugin extends PureComponent<PluginProps> {
public static displayName = 'LowcodeEditorPlugin';
public static contextType = EditorContext;
public static init = Comp.init;
public ref: React.RefObject<React.ReactElement> & Plugin;
private editor: Editor;
private pluginKey: string;
private i18n: I18nFunction;
constructor(props, context) {
super(props, context);
if (isEmpty(props.config) || !props.config.pluginKey) {
console.warn('lowcode editor plugin has wrong config');
return;
}
const { editor } = props;
this.ref = createRef<React.ReactElement>();
// 注册插件
this.editor = editor;
this.pluginKey = props.config.pluginKey;
const defaultProps = Comp.defaultProps || {};
const locale = this.editor.get('locale') || defaultProps.locale || 'zh-CN';
const editorMessages = this.editor.get('messages') || {};
const messages = editorMessages[this.pluginKey] || defaultProps.messages || {};
this.i18n = generateI18n(locale, messages);
editor.set('plugins', {
...editor.plugins,
[this.pluginKey]: this,
});
}
public componentWillUnmount(): void {
// 销毁插件
if (this.pluginKey && this.editor && this.editor.plugins) {
delete this.editor.plugins[this.pluginKey];
}
}
public open = (): Promise<any> => {
if (this.ref && this.ref.open && typeof this.ref.open === 'function') {
return transformToPromise(this.ref.open());
}
return Promise.resolve();
};
public close = (): Promise<any> => {
if (this.ref && this.ref.close && typeof this.ref.close === 'function') {
return transformToPromise(this.ref.close());
}
return Promise.resolve();
};
public render(): React.ReactNode {
const { config } = this.props;
const props = {
i18n: this.i18n,
editor: this.editor,
config,
...config.pluginProps,
};
if (acceptsRef(Comp)) {
props.ref = this.ref;
}
return <Comp {...props} />;
}
}
return LowcodePlugin;
}

273
packages/editor-core/src/utils.ts
View File

@ -1,273 +0,0 @@
import IntlMessageFormat from 'intl-messageformat';
import keymaster from 'keymaster';
import _clone from 'lodash/cloneDeep';
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';
import _serialize from 'serialize-javascript';
export { get, post, request } from './request';
import Editor from './editor';
import { EditorConfig, I18nFunction, I18nMessages, LocaleType, ShortCutsConfig } from './definitions';
export const pick = _pick;
export const deepEqual = _deepEqual;
export const clone = _clone;
export const isEmpty = _isEmpty;
export const throttle = _throttle;
export const debounce = _debounce;
export const serialize = _serialize;
const ENV = {
TBE: 'TBE',
WEBIDE: 'WEB-IDE',
VSCODE: 'VSCODE',
WEB: 'WEB',
};
declare global {
interface Window {
sendIDEMessage?: (params: IDEMessageParams) => void;
goldlog?: {
record: (logKey: string, gmKey: string, goKey: string, method: 'POST' | 'GET') => (...args: any[]) => any;
};
is_theia?: boolean;
vscode?: boolean;
}
}
export interface IDEMessageParams {
action: string;
data: {
logKey: string;
gmKey: string;
goKey: string;
};
}
/*
* 用于构造国际化字符串处理函数
*/
export function generateI18n(locale: LocaleType = 'zh-CN', messages: I18nMessages = {}): I18nFunction {
return (key: string, values): string => {
if (!messages || !messages[key]) {
return '';
}
const formater = new IntlMessageFormat(messages[key], locale);
return formater.format(values);
};
}
/**
* 序列化参数
*/
export function serializeParams(obj: object): string {
if (typeof obj !== 'object') {
return '';
}
const res: string[] = [];
Object.entries(obj).forEach(([key, val]): void => {
if (val === null || val === undefined || val === '') {
return;
}
if (typeof val === 'object') {
res.push(`${encodeURIComponent(key)}=${encodeURIComponent(JSON.stringify(val))}`);
} else {
res.push(`${encodeURIComponent(key)}=${encodeURIComponent(val)}`);
}
});
return res.join('&');
}
/**
* 黄金令箭埋点
* @param {String} gmKey 为黄金令箭业务类型
* @param {Object} params 参数
* @param {String} logKey 属性串
*/
export function goldlog(gmKey: string, params: object = {}, logKey: string = 'other'): void {
const sendIDEMessage = window.sendIDEMessage || window.parent.sendIDEMessage;
const goKey = serializeParams({
env: getEnv(),
...params,
});
if (sendIDEMessage) {
sendIDEMessage({
action: 'goldlog',
data: {
logKey: `/iceluna.core.${logKey}`,
gmKey,
goKey,
},
});
}
if (window.goldlog) {
window.goldlog.record(`/iceluna.core.${logKey}`, gmKey, goKey, 'POST');
}
}
/**
* 获取当前编辑器环境
*/
export function getEnv(): string {
const userAgent = navigator.userAgent;
const isVscode = /Electron\//.test(userAgent);
if (isVscode) {
return ENV.VSCODE;
}
const isTheia = window.is_theia === true;
if (isTheia) {
return ENV.WEBIDE;
}
return ENV.WEB;
}
// 注册快捷键
export function registShortCuts(config: ShortCutsConfig, editor: Editor): void {
(config || []).forEach((item): void => {
keymaster(item.keyboard, (ev: Event): void => {
ev.preventDefault();
item.handler(editor, ev, keymaster);
});
});
}
// 取消注册快捷
export function unRegistShortCuts(config: ShortCutsConfig): void {
(config || []).forEach((item): void => {
keymaster.unbind(item.keyboard);
});
if (window.parent.vscode) {
keymaster.unbind('command+c');
keymaster.unbind('command+v');
}
}
/**
* 将函数返回结果转成promise形式，如果函数有返回值则根据返回值的bool类型判断是reject还是resolve，若函数无返回值默认执行resolve
*/
export function transformToPromise(input: any): Promise<{}> {
if (input instanceof Promise) {
return input;
}
return new Promise((resolve, reject): void => {
if (input || input === undefined) {
resolve();
} else {
reject();
}
});
}
/**
* 将数组类型转换为Map类型
*/
interface MapOf<T> {
[propName: string]: T;
}
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): void => {
const curKey = item[key];
if (item[key] === undefined) {
return;
}
if (res[curKey] && !overwrite) {
return;
}
res[curKey] = item;
});
return res;
}
/**
* 解析url的查询参数
*/
interface Query {
[propName: string]: string;
}
export function parseSearch(search: string): Query {
if (!search || typeof search !== 'string') {
return {};
}
const str = search.replace(/^\?/, '');
const paramStr = str.split('&');
const res = {};
paramStr.forEach((item): void => {
const regRes = item.split('=');
if (regRes[0] && regRes[1]) {
res[regRes[0]] = decodeURIComponent(regRes[1]);
}
});
return res;
}
export function comboEditorConfig(defaultConfig: EditorConfig = {}, customConfig: EditorConfig): EditorConfig {
const { skeleton, theme, plugins, hooks, shortCuts, lifeCycles, constants, utils, i18n } = customConfig || {};
if (skeleton && skeleton.handler && typeof skeleton.handler === 'function') {
return skeleton.handler({
skeleton,
...defaultConfig,
});
}
const defaultShortCuts = transformArrayToMap(defaultConfig.shortCuts || [], 'keyboard');
const customShortCuts = transformArrayToMap(shortCuts || [], 'keyboard');
const localeList = ['zh-CN', 'zh-TW', 'en-US', 'ja-JP'];
const i18nConfig = {};
localeList.forEach((key): void => {
i18nConfig[key] = {
...(defaultConfig.i18n && defaultConfig.i18n[key]),
...(i18n && i18n[key]),
};
});
return {
skeleton,
theme: {
...defaultConfig.theme,
...theme,
},
plugins: {
...defaultConfig.plugins,
...plugins,
},
hooks: [...(defaultConfig.hooks || []), ...(hooks || [])],
shortCuts: Object.values({
...defaultShortCuts,
...customShortCuts,
}),
lifeCycles: {
...defaultConfig.lifeCycles,
...lifeCycles,
},
constants: {
...defaultConfig.constants,
...constants,
},
utils: [...(defaultConfig.utils || []), ...(utils || [])],
i18n: i18nConfig,
};
}
/**
* 判断当前组件是否能够设置ref
* @param {*} Comp 需要判断的组件
*/
export function acceptsRef(Comp: React.ReactNode): boolean {
const hasSymbol = typeof Symbol === 'function' && Symbol.for;
const REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
if (!Comp || typeof Comp !== 'object' || isEmpty(Comp)) {
return false;
}
return (
(Comp.$$typeof && Comp.$$typeof === REACT_FORWARD_REF_TYPE) || (Comp.prototype && Comp.prototype.isReactComponent)
);
}

0
packages/editor-core/src/app-preset.ts → packages/editor-core/src/utils/app-preset.ts
View File

0
packages/globals/src/utils/get-public-path.ts → packages/editor-core/src/utils/get-public-path.ts
View File

11
packages/editor-core/src/utils/goldlog.ts Normal file
View File

@ -0,0 +1,11 @@
/**
* 黄金令箭埋点
* @param {String} gmKey 为黄金令箭业务类型
* @param {Object} params 参数
* @param {String} logKey 属性串
*/
export function goldlog(gmKey: string, params: object = {}, logKey: string = 'other'): void {
}

4
packages/editor-core/src/utils/index.ts Normal file
View File

@ -0,0 +1,4 @@
export * from './get-public-path';
export * from './goldlog';
export * from './obx';
export * from './request';

0
packages/globals/src/obx/index.ts → packages/editor-core/src/utils/obx.ts
View File

14
packages/editor-core/src/request.ts → packages/editor-core/src/utils/request.ts
View File

@ -1,8 +1,10 @@
import 'whatwg-fetch';
import Debug from 'debug'; import Debug from 'debug';
const debug = Debug('request'); const debug = Debug('request');
export function serialize(obj: object): string { export function serialize(obj?: object): string {
if (!obj) {
return '';
}
const rst: string[] = []; const rst: string[] = [];
Object.entries(obj || {}).forEach(([key, val]): void => { Object.entries(obj || {}).forEach(([key, val]): void => {
if (val === null || val === undefined || val === '') return; if (val === null || val === undefined || val === '') return;
@ -12,7 +14,7 @@ export function serialize(obj: object): string {
return rst.join('&'); return rst.join('&');
} }
export function buildUrl(dataAPI: string, params: object): string { export function buildUrl(dataAPI: string, params?: object): string {
const paramStr = serialize(params); const paramStr = serialize(params);
if (paramStr) { if (paramStr) {
return dataAPI.indexOf('?') > 0 ? `${dataAPI}&${paramStr}` : `${dataAPI}?${paramStr}`; return dataAPI.indexOf('?') > 0 ? `${dataAPI}&${paramStr}` : `${dataAPI}?${paramStr}`;
@ -25,7 +27,7 @@ export function get(dataAPI: string, params?: object, headers?: object, otherPro
Accept: 'application/json', Accept: 'application/json',
...headers, ...headers,
}; };
return request(buildUrl(dataAPI, params), 'GET', null, fetchHeaders, otherProps); return request(buildUrl(dataAPI, params), 'GET', undefined, fetchHeaders, otherProps);
} }
export function post(dataAPI: string, params?: object, headers?: object, otherProps?: object): Promise<any> { export function post(dataAPI: string, params?: object, headers?: object, otherProps?: object): Promise<any> {
@ -50,7 +52,7 @@ export function request(
method: string = 'GET', method: string = 'GET',
data?: object | string, data?: object | string,
headers?: object, headers?: object,
otherProps?: object, otherProps?: any,
): Promise<any> { ): Promise<any> {
return new Promise((resolve, reject): void => { return new Promise((resolve, reject): void => {
if (otherProps && otherProps.timeout) { if (otherProps && otherProps.timeout) {
@ -109,7 +111,7 @@ export function request(
return null; return null;
} }
}) })
.then((json: object): void => { .then((json: any): void => {
if (json && json.__success !== false) { if (json && json.__success !== false) {
resolve(json); resolve(json);
} else { } else {

2
packages/globals/src/components/index.ts → packages/editor-core/src/widgets/index.ts
View File

@ -1,3 +1,3 @@
// TODO move another place
export * from './tip'; export * from './tip';
export * from './title'; export * from './title';
export * from './svg-icon';

4
packages/editor-core/src/widgets/tip/index.ts Normal file
View File

@ -0,0 +1,4 @@
import './style.less';
export * from './tip';
export * from './tip-container';

0
packages/globals/src/components/tip/style.less → packages/editor-core/src/widgets/tip/style.less
View File

8
packages/globals/src/components/tip/tip-container.tsx → packages/editor-core/src/widgets/tip/tip-container.tsx
View File

@ -1,8 +1,8 @@
import { Component } from 'react'; import { Component } from 'react';
import Tip from './tip'; import { TipItem } from './tip-item';
import tipHandler from './tip-handler'; import { tipHandler } from './tip-handler';
export default class TipContainer extends Component { export class TipContainer extends Component {
shouldComponentUpdate() { shouldComponentUpdate() {
return false; return false;
} }
@ -29,7 +29,7 @@ export default class TipContainer extends Component {
render() { render() {
return ( return (
<div className="lc-tips-container"> <div className="lc-tips-container">
<Tip /> <TipItem />
</div> </div>
); );
} }

98
packages/globals/src/components/tip/tip-handler.ts → packages/editor-core/src/widgets/tip/tip-handler.ts
View File

@ -1,54 +1,10 @@
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import { TipConfig } from '../../types'; import { TipConfig } from '@ali/lowcode-types';
export interface TipOptions extends TipConfig { export interface TipOptions extends TipConfig {
target: HTMLElement; target: HTMLElement;
} }
function findTip(target: HTMLElement | null): TipOptions | null {
if (!target) {
return null;
}
// optimize deep finding on mouseover
let loopupLimit = 10;
while (target && loopupLimit-- > 0) {
// get tip from target node
if (target.dataset && target.dataset.tip) {
return {
children: target.dataset.tip,
direction: (target.dataset.direction || target.dataset.dir) as any,
theme: target.dataset.theme,
target,
};
}
// or get tip from child nodes
let child: HTMLElement | null = target.lastElementChild as HTMLElement;
while (child) {
if (child.dataset && child.dataset.role === 'tip') {
const tipId = child.dataset.tipId;
if (!tipId) {
return null;
}
const tipProps = tipsMap.get(tipId);
if (!tipProps) {
return null;
}
return {
...tipProps,
target,
};
}
child = child.previousElementSibling as HTMLElement;
}
target = target.parentNode as HTMLElement;
}
return null;
}
class TipHandler { class TipHandler {
tip: TipOptions | null = null; tip: TipOptions | null = null;
private showDelay: number | null = null; private showDelay: number | null = null;
@ -60,7 +16,7 @@ class TipHandler {
if (tip) { if (tip) {
if (this.tip) { if (this.tip) {
// the some target should return // the some target should return
if (this.tip.target === tip.target) { if ((this.tip as any).target === (tip as any).target) {
this.tip = tip; this.tip = tip;
return; return;
} }
@ -127,13 +83,57 @@ class TipHandler {
} }
} }
export const tipHandler = new TipHandler();
function findTip(target: HTMLElement | null): TipOptions | null {
if (!target) {
return null;
}
// optimize deep finding on mouseover
let loopupLimit = 10;
while (target && loopupLimit-- > 0) {
// get tip from target node
if (target.dataset && target.dataset.tip) {
return {
children: target.dataset.tip,
direction: (target.dataset.direction || target.dataset.dir) as any,
theme: target.dataset.theme,
target,
};
}
// or get tip from child nodes
let child: HTMLElement | null = target.lastElementChild as HTMLElement;
while (child) {
if (child.dataset && child.dataset.role === 'tip') {
const tipId = child.dataset.tipId;
if (!tipId) {
return null;
}
const tipProps = tipsMap.get(tipId);
if (!tipProps) {
return null;
}
return {
...tipProps,
target,
};
}
child = child.previousElementSibling as HTMLElement;
}
target = target.parentNode as HTMLElement;
}
return null;
}
const tipsMap = new Map<string, TipConfig>(); const tipsMap = new Map<string, TipConfig>();
export function saveTips(id: string, props: TipConfig | null) { export function postTip(id: string, props: TipConfig | null) {
if (props) { if (props) {
tipsMap.set(id, props); tipsMap.set(id, props);
} else { } else {
tipsMap.delete(id); tipsMap.delete(id);
} }
} }
export default new TipHandler();

9
packages/globals/src/components/tip/tip.tsx → packages/editor-core/src/widgets/tip/tip-item.tsx
View File

@ -1,10 +1,11 @@
import { Component } from 'react'; import { Component } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { resolvePosition } from './utils'; import { TipConfig } from '@ali/lowcode-types';
import tipHandler, { TipOptions } from './tip-handler';
import { intl } from '../../intl'; import { intl } from '../../intl';
import { resolvePosition } from './utils';
import { tipHandler } from './tip-handler';
export default class Tip extends Component { export class TipItem extends Component {
private dispose?: () => void; private dispose?: () => void;
constructor(props: any) { constructor(props: any) {
super(props); super(props);
@ -101,7 +102,7 @@ export default class Tip extends Component {
} }
render() { render() {
const tip: TipOptions = tipHandler.tip || ({} as any); const tip: TipConfig = tipHandler.tip || ({} as any);
const className = classNames('lc-tip', tip.className, tip && tip.theme ? `lc-theme-${tip.theme}` : null); const className = classNames('lc-tip', tip.className, tip && tip.theme ? `lc-theme-${tip.theme}` : null);
this.originClassName = className; this.originClassName = className;

17
packages/editor-core/src/widgets/tip/tip.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Component } from 'react';
import { TipConfig } from '@ali/lowcode-types';
import { uniqueId } from '@ali/lowcode-utils';
import { postTip } from './tip-handler';
export class Tip extends Component<TipConfig> {
private id = uniqueId('tips$');
componentWillUnmount() {
postTip(this.id, null);
}
render() {
postTip(this.id, this.props);
return <meta data-role="tip" data-tip-id={this.id} />;
}
}

0
packages/globals/src/components/tip/utils.ts → packages/editor-core/src/widgets/tip/utils.ts
View File

12
packages/globals/src/components/title/index.tsx → packages/editor-core/src/widgets/title/index.tsx
View File

@ -1,10 +1,10 @@
import { Component, isValidElement } from 'react'; import { Component, isValidElement } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import EmbedTip from '../tip/embed-tip'; import { createIcon } from '@ali/lowcode-utils';
import './title.less'; import { TitleContent, isI18nData } from '@ali/lowcode-types';
import { createIcon } from '../../utils';
import { TitleContent, isI18nData } from '../../types';
import { intl } from '../../intl'; import { intl } from '../../intl';
import { Tip } from '../tip';
import './title.less';
export class Title extends Component<{ title: TitleContent; className?: string; onClick?: () => void }> { export class Title extends Component<{ title: TitleContent; className?: string; onClick?: () => void }> {
render() { render() {
@ -20,14 +20,14 @@ export class Title extends Component<{ title: TitleContent; className?: string;
let tip: any = null; let tip: any = null;
if (title.tip) { if (title.tip) {
if (isValidElement(title.tip) && title.tip.type === EmbedTip) { if (isValidElement(title.tip) && title.tip.type === Tip) {
tip = title.tip; tip = title.tip;
} else { } else {
const tipProps = const tipProps =
typeof title.tip === 'object' && !(isValidElement(title.tip) || isI18nData(title.tip)) typeof title.tip === 'object' && !(isValidElement(title.tip) || isI18nData(title.tip))
? title.tip ? title.tip
: { children: title.tip }; : { children: title.tip };
tip = <EmbedTip direction="top" theme="black" {...tipProps} />; tip = <Tip direction="top" theme="black" {...tipProps} />;
} }
} }

0
packages/globals/src/components/title/title.less → packages/editor-core/src/widgets/title/title.less
View File

4
packages/editor-core/tsconfig.json
View File

@ -3,7 +3,5 @@
"compilerOptions": { "compilerOptions": {
"outDir": "lib" "outDir": "lib"
}, },
"include": [ "include": ["./src/"],
"./src/"
]
} }

24
packages/editor-skeleton/CHANGELOG.md
View File

@ -3,6 +3,30 @@
All notable changes to this project will be documented in this file. All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
<a name="0.8.10"></a>
## [0.8.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.9...@ali/lowcode-editor-skeleton@0.8.10) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-editor-skeleton
<a name="0.8.9"></a>
## [0.8.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.8...@ali/lowcode-editor-skeleton@0.8.9) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-editor-skeleton
<a name="0.8.8"></a>
## [0.8.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.7...@ali/lowcode-editor-skeleton@0.8.8) (2020-04-27)
**Note:** Version bump only for package @ali/lowcode-editor-skeleton
<a name="0.8.7"></a> <a name="0.8.7"></a>
## [0.8.7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.6...@ali/lowcode-editor-skeleton@0.8.7) (2020-04-16) ## [0.8.7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.6...@ali/lowcode-editor-skeleton@0.8.7) (2020-04-16)

14
packages/editor-skeleton/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@ali/lowcode-editor-skeleton", "name": "@ali/lowcode-editor-skeleton",
"version": "0.8.7", "version": "0.8.10",
"description": "alibaba lowcode editor skeleton", "description": "alibaba lowcode editor skeleton",
"main": "lib/index.js", "main": "lib/index.js",
"module": "es/index.js", "module": "es/index.js",
@ -18,15 +18,15 @@
"lowcode", "lowcode",
"editor" "editor"
], ],
"author": "xiayang.xy",
"dependencies": { "dependencies": {
"@ali/lowcode-editor-core": "^0.8.6", "@ali/lowcode-designer": "^0.9.6",
"@ali/lowcode-editor-core": "^0.8.9",
"@ali/lowcode-types": "^0.8.1",
"@ali/lowcode-utils": "^0.8.2",
"@alifd/next": "^1.x", "@alifd/next": "^1.x",
"prop-types": "^15.5.8", "classnames": "^2.2.6",
"react": "^16.8.1", "react": "^16.8.1",
"react-dom": "^16.8.1", "react-dom": "^16.8.1"
"react-router-dom": "^5.1.2",
"store": "^2.0.12"
}, },
"devDependencies": { "devDependencies": {
"@alib/build-scripts": "^0.1.3", "@alib/build-scripts": "^0.1.3",

6
packages/vision-polyfill/src/skeleton/area.ts → packages/editor-skeleton/src/area.ts
View File

@ -1,7 +1,7 @@
import { obx, computed } from '@ali/lowcode-globals'; import { obx, computed } from '@ali/lowcode-editor-core';
import WidgetContainer from './widget-container'; import WidgetContainer from './widget/widget-container';
import { Skeleton } from './skeleton'; import { Skeleton } from './skeleton';
import { IWidget } from './widget'; import { IWidget } from './widget/widget';
import { IWidgetBaseConfig } from './types'; import { IWidgetBaseConfig } from './types';
export default class Area<C extends IWidgetBaseConfig = any, T extends IWidget = IWidget> { export default class Area<C extends IWidgetBaseConfig = any, T extends IWidget = IWidget> {

59
packages/editor-skeleton/src/components/LeftPlugin/index.scss
View File

@ -1,59 +0,0 @@
.lowcode-left-plugin {
font-size: 20px;
text-align: center;
line-height: 44px;
height: 44px;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
color: $color-text1-3;
&.locked {
color: red !important;
}
&:hover {
color: $color-brand1-6;
&:before {
content: attr(data-tooltip);
display: block;
position: absolute;
left: 45px;
top: 8px;
line-height: 18px;
font-size: 12px;
white-space: nowrap;
padding: 6px 8px;
border-radius: 4px;
background: $balloon-normal-color-bg;
border: 1px solid $balloon-normal-color-border;
color: $color-text1-3;
z-index: 100;
}
&:after {
content: '';
display: block;
position: absolute;
width: 10px;
height: 10px;
transform: rotate(45deg);
left: 40px;
top: 18px;
background: $balloon-normal-color-bg;
border-left: 1px solid $balloon-normal-color-border;
border-bottom: 1px solid $balloon-normal-color-border;
z-index: 100;
}
}
&.active {
color: $color-brand1-9;
&.disabled {
color: $color-text1-1;
}
&:hover {
color: $color-brand1-6;
}
}
&.disabled {
cursor: not-allowed;
color: $color-text1-1;
}
}

221
packages/editor-skeleton/src/components/LeftPlugin/index.tsx
View File

@ -1,221 +0,0 @@
import React, { PureComponent, Fragment } from 'react';
import classNames from 'classnames';
import { Balloon, Dialog, Icon, Badge } from '@alifd/next';
import Editor from '@ali/lowcode-editor-core';
import {
PluginConfig,
PluginClass,
} from '@ali/lowcode-editor-core/lib/definitions';
import './index.scss';
export interface LeftPluginProps {
active?: boolean;
config: PluginConfig;
disabled?: boolean;
editor: Editor;
locked?: boolean;
marked?: boolean;
onClick?: () => void;
pluginClass: PluginClass | undefined;
}
export interface LeftPluginState {
dialogVisible: boolean;
}
export default class LeftPlugin extends PureComponent<
LeftPluginProps,
LeftPluginState
> {
static displayName = 'LowcodeLeftPlugin';
static defaultProps = {
active: false,
config: {},
disabled: false,
marked: false,
locked: false,
onClick: (): void => {},
};
constructor(props, context) {
super(props, context);
this.state = {
dialogVisible: false,
};
}
componentDidMount(): void {
const { config, editor } = this.props;
const pluginKey = config && config.pluginKey;
if (editor && pluginKey) {
editor.on(`${pluginKey}.dialog.show`, this.handleShow);
editor.on(`${pluginKey}.dialog.close`, this.handleClose);
}
}
componentWillUnmount(): void {
const { config, editor } = this.props;
const pluginKey = config && config.pluginKey;
if (editor && pluginKey) {
editor.off(`${pluginKey}.dialog.show`, this.handleShow);
editor.off(`${pluginKey}.dialog.close`, this.handleClose);
}
}
handleClose = (): void => {
const { config, editor } = this.props;
const pluginKey = config && config.pluginKey;
const plugin = editor.plugins && editor.plugins[pluginKey];
if (plugin) {
plugin.close().then((): void => {
this.setState({
dialogVisible: false,
});
});
}
};
handleOpen = (): void => {
// todo 对话框类型的插件初始时拿不到插件实例
this.setState({
dialogVisible: true,
});
};
handleShow = (): void => {
const { disabled, config, onClick, editor } = this.props;
const pluginKey = config && config.pluginKey;
if (disabled || !pluginKey) return;
this.handleOpen();
// 考虑到弹窗情况，延时发送消息
setTimeout((): void => {
editor.emit(`${pluginKey}.plugin.activate`);
}, 0);
if (onClick) {
onClick();
}
};
renderIcon = (clickCallback): React.ReactNode => {
const { active, disabled, marked, locked, onClick, config } = this.props;
const { pluginKey, props } = config || {};
const { icon, title } = props || {};
return (
<div
className={classNames('lowcode-left-plugin', pluginKey, {
active,
disabled,
locked,
})}
data-tooltip={title}
onClick={(): void => {
if (disabled) return;
// 考虑到弹窗情况，延时发送消息
clickCallback && clickCallback();
onClick && onClick();
}}
>
{marked ? (
<Badge dot>
<Icon type={icon} size="small" />
</Badge>
) : (
<Icon type={icon} size="small" />
)}
</div>
);
};
render(): React.ReactNode {
const {
marked,
locked,
active,
disabled,
config,
editor,
pluginClass: Comp,
} = this.props;
const { pluginKey, props, type, pluginProps } = config || {};
const { onClick, title } = props || {};
const { dialogVisible } = this.state;
if (!pluginKey || !type || !props) return null;
const node = Comp ? (
<Comp
editor={editor}
active={active}
locked={locked}
disabled={disabled}
config={config}
onClick={(): void => {
onClick && onClick.call(null, editor);
}}
{...pluginProps}
/>
) : null;
switch (type) {
case 'LinkIcon':
return (
<a {...(props.linkProps || {})}>
{this.renderIcon((): void => {
onClick && onClick.call(null, editor);
})}
</a>
);
case 'Icon':
return this.renderIcon((): void => {
onClick && onClick.call(null, editor);
});
case 'DialogIcon':
return (
<Fragment>
{this.renderIcon((): void => {
onClick && onClick.call(null, editor);
this.handleOpen();
})}
<Dialog
onOk={(): void => {
editor.emit(`${pluginKey}.dialog.onOk`);
this.handleClose();
}}
onCancel={this.handleClose}
onClose={this.handleClose}
title={title}
style={{
width: 500,
...(props.dialogProps && props.dialogProps.style),
}}
{...(props.dialogProps || {})}
visible={dialogVisible}
>
{node}
</Dialog>
</Fragment>
);
case 'BalloonIcon':
return (
<Balloon
trigger={this.renderIcon((): void => {
onClick && onClick.call(null, editor);
})}
align="r"
triggerType={['click', 'hover']}
{...(props.balloonProps || {})}
>
{node}
</Balloon>
);
case 'PanelIcon':
return this.renderIcon((): void => {
onClick && onClick.call(null, editor);
});
case 'Custom':
return marked ? <Badge dot>{node}</Badge> : node;
default:
return null;
}
}
}

52
packages/editor-skeleton/src/components/Panel/index.scss
View File

@ -1,52 +0,0 @@
.lowcode-panel {
user-select: none;
overflow: hidden;
position: relative;
background: $card-background;
transition: width 0.3s ease;
transform: translate3d(0, 0, 0);
height: 100%;
&.visible {
border-right: 1px solid $color-line1-1;
}
.drag-area {
display: none;
}
&.floatable {
position: absolute;
top: 0;
bottom: 0;
z-index: 999;
}
&.draggable {
.drag-area {
display: block;
width: 10px;
position: absolute;
top: 0;
bottom: 0;
cursor: col-resize;
z-index: 9999;
}
&.left {
.drag-area {
right: 0;
}
}
&.right {
.drag-area {
left: 0;
}
}
}
&.left {
&.floatable {
left: 50px;
}
}
&.right {
&.floatable {
right: 48px;
}
}
}

Some files were not shown because too many files have changed in this diff Show More