mirror of
https://github.com/alibaba/lowcode-engine.git
synced 2026-01-12 08:58:15 +00:00
Merge branch 'polyfill/vision' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into polyfill/vision
# Conflicts: # packages/vision-preset/package.json
This commit is contained in:
mario.gk
commit
7f46822a43
@ -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>
|
||||
@ -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-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> 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>
|
||||
<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 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>
|
||||
window.pageConfig = {
|
||||
env: 'release',
|
||||
@ -68,9 +70,13 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="lce-container"></div>
|
||||
<!-- lowcode engine globals -->
|
||||
<script src="/js/vision.js"></script>
|
||||
<!-- <script src="https://g.alicdn.com/vision/visualengine-utils/4.3.1/engine-utils.js"></script> -->
|
||||
<script src="./core.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>
|
||||
<!-- lowcode engine app -->
|
||||
<script src="./lowcode-editor.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -3,6 +3,30 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
<a name="0.8.13"></a>
|
||||
## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-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>
|
||||
## [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)
|
||||
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
{
|
||||
"entry": {
|
||||
"index": "src/index.ts",
|
||||
"react-simulator-renderer": "../react-simulator-renderer/src/index.ts",
|
||||
"preview": "src/preview.ts"
|
||||
"index": "src/vision/index.ts",
|
||||
"react-simulator-renderer": "../react-simulator-renderer/src/index.ts"
|
||||
},
|
||||
"vendor": false,
|
||||
"devServer": {
|
||||
@ -10,10 +9,11 @@
|
||||
},
|
||||
"publicPath": "/",
|
||||
"externals": {
|
||||
"react": "window.React",
|
||||
"react-dom": "window.ReactDOM",
|
||||
"prop-types": "window.PropTypes",
|
||||
"@alifd/next": "window.Next"
|
||||
"react": "var window.React",
|
||||
"react-dom": "var window.ReactDOM",
|
||||
"prop-types": "var window.PropTypes",
|
||||
"@alifd/next": "var window.Next",
|
||||
"@ali/visualengine-utils": "var window.VisualEngineUtils"
|
||||
},
|
||||
"plugins": [
|
||||
[
|
||||
@ -35,4 +35,4 @@
|
||||
],
|
||||
"./build.plugin.js"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
{
|
||||
"entry": {
|
||||
"lowcode-editor": "src/index.ts",
|
||||
"lowcode-preview": "src/preview.ts"
|
||||
"lowcode-editor": "src/vision/index.ts"
|
||||
},
|
||||
"vendor": false,
|
||||
"externals": {
|
||||
"react": "window.React",
|
||||
"react-dom": "window.ReactDOM",
|
||||
"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,
|
||||
"sourcemap": true,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ali/lowcode-demo",
|
||||
"version": "0.8.10",
|
||||
"version": "0.8.13",
|
||||
"private": true,
|
||||
"description": "低代码引擎 DEMO",
|
||||
"scripts": {
|
||||
@ -11,22 +11,23 @@
|
||||
},
|
||||
"config": {},
|
||||
"dependencies": {
|
||||
"@ali/lowcode-editor-core": "^0.8.4",
|
||||
"@ali/lowcode-editor-skeleton": "^0.8.0",
|
||||
"@ali/lowcode-plugin-components-pane": "^0.8.0",
|
||||
"@ali/lowcode-plugin-designer": "^0.9.1",
|
||||
"@ali/lowcode-plugin-event-bind-dialog": "^0.8.0",
|
||||
"@ali/lowcode-plugin-outline-pane": "^0.8.7",
|
||||
"@ali/lowcode-plugin-sample-logo": "^0.8.0",
|
||||
"@ali/lowcode-plugin-source-editor":"^0.8.2",
|
||||
"@ali/lowcode-plugin-sample-preview": "^0.8.6",
|
||||
"@ali/lowcode-editor-core": "^0.8.9",
|
||||
"@ali/lowcode-editor-skeleton": "^0.8.10",
|
||||
"@ali/lowcode-plugin-components-pane": "^0.8.8",
|
||||
"@ali/lowcode-plugin-designer": "^0.9.6",
|
||||
"@ali/lowcode-plugin-event-bind-dialog": "^0.8.9",
|
||||
"@ali/lowcode-plugin-outline-pane": "^0.8.12",
|
||||
"@ali/lowcode-plugin-sample-logo": "^0.8.8",
|
||||
"@ali/lowcode-plugin-sample-preview": "^0.8.11",
|
||||
"@ali/lowcode-plugin-settings-pane": "^0.8.8",
|
||||
"@ali/lowcode-plugin-undo-redo": "^0.8.0",
|
||||
"@ali/lowcode-plugin-variable-bind-dialog": "^0.8.2",
|
||||
"@ali/lowcode-plugin-zh-en": "^0.8.6",
|
||||
"@ali/lowcode-react-renderer": "^0.8.4",
|
||||
"@ali/lowcode-runtime": "^0.8.10",
|
||||
"@ali/lowcode-setters": "^0.8.8",
|
||||
"@ali/lowcode-plugin-source-editor": "^0.8.5",
|
||||
"@ali/lowcode-plugin-undo-redo": "^0.8.9",
|
||||
"@ali/lowcode-plugin-variable-bind-dialog": "^0.8.7",
|
||||
"@ali/lowcode-plugin-zh-en": "^0.8.11",
|
||||
"@ali/lowcode-react-renderer": "^0.8.5",
|
||||
"@ali/lowcode-runtime": "^0.8.13",
|
||||
"@ali/lowcode-setters": "^0.8.11",
|
||||
"@ali/lowcode-utils": "^0.8.2",
|
||||
"@alifd/next": "^1.19.12",
|
||||
"@alife/theme-lowcode-dark": "^0.1.0",
|
||||
"@alife/theme-lowcode-light": "^0.1.0",
|
||||
@ -42,7 +43,7 @@
|
||||
"build-plugin-fusion": "^0.1.0",
|
||||
"build-plugin-moment-locales": "^0.1.0",
|
||||
"build-plugin-react-app": "^1.1.2",
|
||||
"monaco-editor-webpack-plugin":"^1.9.0",
|
||||
"monaco-editor-webpack-plugin": "^1.9.0",
|
||||
"tsconfig-paths-webpack-plugin": "^3.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,18 +4,76 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
|
||||
<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-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>
|
||||
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>
|
||||
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
</html>
|
||||
|
||||
@ -14,97 +14,5 @@
|
||||
"padding": 20
|
||||
}
|
||||
},
|
||||
"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": "重置"
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}]
|
||||
}
|
||||
"children": []
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
// @ts-ignore
|
||||
import { createElement } from 'react';
|
||||
import { Button } from '@alifd/next';
|
||||
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 loadUrls from './loader';
|
||||
import { upgradeAssetsBundle } from './upgrade-assets';
|
||||
import { isCSSUrl } from '@ali/lowcode-globals';
|
||||
import { isCSSUrl } from '@ali/lowcode-utils';
|
||||
|
||||
const { editor, skeleton } = Engine;
|
||||
|
||||
3
packages/demo/src/vision/module.d.ts
vendored
Normal file
3
packages/demo/src/vision/module.d.ts
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
declare module "@ali/visualengine";
|
||||
declare module "@ali/visualengine-utils";
|
||||
declare module "@ali/ve-trunk-pane"
|
||||
@ -3,6 +3,30 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
<a name="0.9.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>
|
||||
## [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)
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ali/lowcode-designer",
|
||||
"version": "0.9.3",
|
||||
"version": "0.9.6",
|
||||
"description": "Designer for Ali LowCode Engine",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -15,7 +15,9 @@
|
||||
},
|
||||
"license": "MIT",
|
||||
"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",
|
||||
"react": "^16",
|
||||
"react-dom": "^16.7.0"
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
import { Component, Fragment, PureComponent } from 'react';
|
||||
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 { BuiltinSimulatorHost } from '../host';
|
||||
import { TitleContent } from '@ali/lowcode-types';
|
||||
|
||||
export class BorderHoveringInstance extends PureComponent<{
|
||||
title: TitleContent;
|
||||
|
||||
@ -9,19 +9,13 @@ import {
|
||||
ComponentType,
|
||||
} from 'react';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
observer,
|
||||
computed,
|
||||
createIcon,
|
||||
EmbedTip,
|
||||
isReactComponent,
|
||||
ActionContentObject,
|
||||
isActionContentObject,
|
||||
} from '@ali/lowcode-globals';
|
||||
import { observer, computed, Tip } from '@ali/lowcode-editor-core';
|
||||
import { createIcon, isReactComponent } from '@ali/lowcode-utils';
|
||||
import { ActionContentObject, isActionContentObject } from '@ali/lowcode-types';
|
||||
import { SimulatorContext } from '../context';
|
||||
import { BuiltinSimulatorHost } from '../host';
|
||||
import { OffsetObserver } from '../../../designer';
|
||||
import { Node } from '../../../document';
|
||||
import { OffsetObserver } from '../../designer';
|
||||
import { Node } from '../../document';
|
||||
|
||||
@observer
|
||||
export class BorderSelectingInstance extends Component<{
|
||||
@ -94,9 +88,9 @@ class Toolbar extends Component<{ observed: OffsetObserver }> {
|
||||
}
|
||||
const { node } = observed;
|
||||
const actions: ReactNodeArray = [];
|
||||
node.componentMeta.availableActions.forEach(action => {
|
||||
node.componentMeta.availableActions.forEach((action) => {
|
||||
const { important, condition, content, name } = action;
|
||||
if (node.isSlotRoot && (name === 'copy' || name === 'remove')) {
|
||||
if (node.isSlot() && (name === 'copy' || name === 'remove')) {
|
||||
// FIXME: need this?
|
||||
return;
|
||||
}
|
||||
@ -130,7 +124,7 @@ function createAction(content: ReactNode | ComponentType<any> | ActionContentObj
|
||||
}}
|
||||
>
|
||||
{icon && createIcon(icon)}
|
||||
<EmbedTip>{title}</EmbedTip>
|
||||
<Tip>{title}</Tip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -167,7 +161,7 @@ export class BorderSelectingForNode extends Component<{ node: Node }> {
|
||||
}
|
||||
return (
|
||||
<Fragment key={node.id}>
|
||||
{instances.map(instance => {
|
||||
{instances.map((instance) => {
|
||||
const observed = designer.createOffsetObserver({
|
||||
node,
|
||||
instance,
|
||||
@ -216,7 +210,7 @@ export class BorderSelecting extends Component {
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
{selecting.map(node => (
|
||||
{selecting.map((node) => (
|
||||
<BorderSelectingForNode key={node.id} node={node} />
|
||||
))}
|
||||
</Fragment>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component } from 'react';
|
||||
import { observer } from '@ali/lowcode-globals';
|
||||
import { observer } from '@ali/lowcode-editor-core';
|
||||
import { BorderHovering } from './border-hovering';
|
||||
import { SimulatorContext } from '../context';
|
||||
import { BuiltinSimulatorHost } from '../host';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component } from 'react';
|
||||
import { computed, observer } from '@ali/lowcode-globals';
|
||||
import { computed, observer } from '@ali/lowcode-editor-core';
|
||||
import { SimulatorContext } from '../context';
|
||||
import { BuiltinSimulatorHost } from '../host';
|
||||
import {
|
||||
@ -10,7 +10,7 @@ import {
|
||||
isVertical
|
||||
} from '../../designer';
|
||||
import { ISimulatorHost, } from '../../simulator';
|
||||
import {ParentalNode } from '../../document';
|
||||
import { ParentalNode } from '../../document';
|
||||
import './insertion.less';
|
||||
|
||||
interface InsertionData {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
// NOTE: 仅用作类型标注，切勿作为实体使用
|
||||
import { BuiltinSimulatorHost } from './host';
|
||||
import { AssetLevel, AssetLevels, AssetList, isAssetBundle, isAssetItem, AssetType, assetItem } from '@ali/lowcode-globals';
|
||||
import { isCSSUrl } from '@ali/lowcode-globals';
|
||||
import { AssetLevel, AssetLevels, AssetList, isAssetBundle, isAssetItem, AssetType, assetItem } from '@ali/lowcode-utils';
|
||||
import { isCSSUrl } from '@ali/lowcode-utils';
|
||||
import { BuiltinSimulatorRenderer } from './renderer';
|
||||
|
||||
export function createSimulator(
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component } from 'react';
|
||||
import { observer } from '@ali/lowcode-globals';
|
||||
import { observer } from '@ali/lowcode-editor-core';
|
||||
import { BuiltinSimulatorHost, BuiltinSimulatorProps } from './host';
|
||||
import { DocumentModel } from '../document';
|
||||
import { SimulatorContext } from './context';
|
||||
|
||||
@ -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 Viewport from './viewport';
|
||||
import { createSimulator } from './create-simulator';
|
||||
import { Node, ParentalNode, DocumentModel, isNode, contains, isRootNode } from '../document';
|
||||
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 {
|
||||
DragObjectType,
|
||||
isShaken,
|
||||
@ -21,9 +21,8 @@ import {
|
||||
Rect,
|
||||
CanvasPoint,
|
||||
} from '../designer';
|
||||
import { parseProps, parseMetadata } from './utils/parse-metadata';
|
||||
import { isElement, hotkey } from '@ali/lowcode-globals';
|
||||
import { ComponentMetadata } from '@ali/lowcode-globals';
|
||||
import { parseMetadata } from './utils/parse-metadata';
|
||||
import { ComponentMetadata } from '@ali/lowcode-types';
|
||||
import { BuiltinSimulatorRenderer } from './renderer';
|
||||
import clipboard from '../designer/clipboard';
|
||||
|
||||
@ -54,7 +53,7 @@ const defaultSimulatorUrl = (() => {
|
||||
if (dev) {
|
||||
urls = [`${prefix}/css/react-simulator-renderer.css`, `${prefix}/js/react-simulator-renderer.js`];
|
||||
} 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 {
|
||||
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);
|
||||
}
|
||||
|
||||
const meta = container.componentMeta;
|
||||
const meta = (container as Node).componentMeta;
|
||||
|
||||
// FIXME: get containerInstance for accept logic use
|
||||
const acceptable: boolean = this.isAcceptable(container);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { autorun, obx } from '@ali/lowcode-globals';
|
||||
import { autorun, obx } from '@ali/lowcode-editor-core';
|
||||
import { BuiltinSimulatorHost } from './host';
|
||||
import { EventEmitter } from 'events';
|
||||
import { BuiltinSimulatorRenderer, isSimulatorRenderer } from './renderer';
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { isValidElement } from 'react';
|
||||
import { isElement } from '@ali/lowcode-globals';
|
||||
import { PropConfig } from '@ali/lowcode-globals';
|
||||
import { isElement } from '@ali/lowcode-utils';
|
||||
import { PropConfig } from '@ali/lowcode-types';
|
||||
|
||||
export const primitiveTypes = [
|
||||
'string',
|
||||
|
||||
@ -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 { AutoFit, IViewport } from '../simulator';
|
||||
|
||||
|
||||
@ -6,14 +6,12 @@ import {
|
||||
ComponentAction,
|
||||
TitleContent,
|
||||
TransformedComponentMetadata,
|
||||
getRegisteredMetadataTransducers,
|
||||
registerMetadataTransducer,
|
||||
computed,
|
||||
NestingFilter,
|
||||
} from '@ali/lowcode-globals';
|
||||
} from '@ali/lowcode-types';
|
||||
import { computed } from '@ali/lowcode-editor-core';
|
||||
import { Node, ParentalNode } from './document';
|
||||
import { Designer } from './designer';
|
||||
import { intl } from './locale';
|
||||
import { intlNode } from './locale';
|
||||
import { IconContainer } from './icons/container';
|
||||
import { IconPage } from './icons/page';
|
||||
import { IconComponent } from './icons/component';
|
||||
@ -130,11 +128,14 @@ export class ComponentMeta {
|
||||
|
||||
const title = this._transformedMetadata.title;
|
||||
if (title) {
|
||||
this._title = typeof title === 'string' ? {
|
||||
type: 'i18n',
|
||||
'en-US': this.componentName,
|
||||
'zh-CN': title,
|
||||
} : title;
|
||||
this._title =
|
||||
typeof title === 'string'
|
||||
? {
|
||||
type: 'i18n',
|
||||
'en-US': this.componentName,
|
||||
'zh-CN': title,
|
||||
}
|
||||
: title;
|
||||
}
|
||||
|
||||
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) => {
|
||||
const { configure, componentName } = metadata;
|
||||
const { component = {} } = configure;
|
||||
@ -279,7 +312,7 @@ const builtinComponentActions: ComponentAction[] = [
|
||||
name: 'remove',
|
||||
content: {
|
||||
icon: IconRemove,
|
||||
title: intl('remove'),
|
||||
title: intlNode('remove'),
|
||||
action(node: Node) {
|
||||
node.remove();
|
||||
},
|
||||
@ -290,7 +323,7 @@ const builtinComponentActions: ComponentAction[] = [
|
||||
name: 'copy',
|
||||
content: {
|
||||
icon: IconClone,
|
||||
title: intl('copy'),
|
||||
title: intlNode('copy'),
|
||||
action(node: Node) {
|
||||
// node.remove();
|
||||
},
|
||||
@ -300,7 +333,7 @@ const builtinComponentActions: ComponentAction[] = [
|
||||
];
|
||||
|
||||
export function removeBuiltinComponentAction(name: string) {
|
||||
const i = builtinComponentActions.findIndex(action => action.name === name);
|
||||
const i = builtinComponentActions.findIndex((action) => action.name === name);
|
||||
if (i > -1) {
|
||||
builtinComponentActions.splice(i, 1);
|
||||
}
|
||||
|
||||
@ -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 { insertChildren } from '../document';
|
||||
import { insertChildren, TransformStage } from '../document';
|
||||
import clipboard from './clipboard';
|
||||
|
||||
// hotkey binding
|
||||
@ -52,7 +53,7 @@ hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => {
|
||||
if (!selected || selected.length < 1) return;
|
||||
|
||||
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 };
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { Component } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { TipContainer } from '@ali/lowcode-globals';
|
||||
import BuiltinDragGhostComponent from './drag-ghost';
|
||||
import { Designer, DesignerProps } from './designer';
|
||||
import { ProjectView } from '../project';
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
import { ComponentType } from 'react';
|
||||
import { obx, computed, autorun } from '@ali/lowcode-editor-core';
|
||||
import {
|
||||
ProjectSchema,
|
||||
ComponentMetadata,
|
||||
ComponentAction,
|
||||
NpmInfo,
|
||||
obx,
|
||||
computed,
|
||||
autorun,
|
||||
IEditor,
|
||||
CompositeObject,
|
||||
PropsList,
|
||||
} from '@ali/lowcode-globals';
|
||||
} from '@ali/lowcode-types';
|
||||
import { Project } from '../project';
|
||||
import { Node, DocumentModel, insertChildren, isRootNode, ParentalNode, TransformStage } from '../document';
|
||||
import { ComponentMeta } from '../component-meta';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 { DragObject, isDragNodeObject, isDragNodeDataObject } from '../dragon';
|
||||
import './ghost.less';
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
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 { Node, DocumentModel } from '../document';
|
||||
import { ISimulatorHost, isSimulatorHost } from '../simulator';
|
||||
import { Designer } from './designer';
|
||||
import { setNativeSelection } from '@ali/lowcode-globals';
|
||||
import { cursor } from '@ali/lowcode-globals';
|
||||
|
||||
export interface LocateEvent {
|
||||
readonly type: 'LocateEvent';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { obx } from '@ali/lowcode-globals';
|
||||
import { obx } from '@ali/lowcode-editor-core';
|
||||
import { Node, DocumentModel } from '../document';
|
||||
|
||||
export class Hovering {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { obx, computed } from '@ali/lowcode-globals';
|
||||
import { uniqueId } from '@ali/lowcode-globals';
|
||||
import { obx, computed } from '@ali/lowcode-editor-core';
|
||||
import { uniqueId } from '@ali/lowcode-utils';
|
||||
import { INodeSelector, IViewport } from '../simulator';
|
||||
import { isRootNode, Node } from '../document';
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { isElement } from '@ali/lowcode-globals';
|
||||
import { isElement } from '@ali/lowcode-utils';
|
||||
|
||||
export class ScrollTarget {
|
||||
get left() {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { SettingTarget } from '@ali/lowcode-globals';
|
||||
import { SettingTarget } from '@ali/lowcode-types';
|
||||
import { ComponentMeta } from '../../component-meta';
|
||||
import { Designer } from '../designer';
|
||||
import { Node } from '../../document';
|
||||
|
||||
@ -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 { SettingPropEntry } from './setting-prop-entry';
|
||||
import { SettingEntry } from './setting-entry';
|
||||
import { computed, obx } from '@ali/lowcode-editor-core';
|
||||
|
||||
export class SettingField extends SettingPropEntry implements SettingEntry {
|
||||
readonly isSettingField = true;
|
||||
|
||||
@ -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 { Node } from '../../document';
|
||||
import { ComponentMeta } from '../../component-meta';
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
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 { SettingField } from './setting-field';
|
||||
import { SettingPropEntry } from './setting-prop-entry';
|
||||
|
||||
@ -1,17 +1,5 @@
|
||||
import {
|
||||
NodeData,
|
||||
isJSExpression,
|
||||
isDOMText,
|
||||
NodeSchema,
|
||||
computed,
|
||||
obx,
|
||||
autorun,
|
||||
isNodeSchema,
|
||||
uniqueId,
|
||||
PageSchema,
|
||||
ComponentSchema,
|
||||
RootSchema,
|
||||
} from '@ali/lowcode-globals';
|
||||
import { computed, obx } from '@ali/lowcode-editor-core';
|
||||
import { NodeData, isJSExpression, isDOMText, NodeSchema, isNodeSchema, RootSchema } from '@ali/lowcode-types';
|
||||
import { Project } from '../project';
|
||||
import { ISimulatorHost } from '../simulator';
|
||||
import { ComponentMeta } from '../component-meta';
|
||||
@ -20,6 +8,7 @@ import { Node, insertChildren, insertChild, isNode, RootNode, ParentalNode } fro
|
||||
import { Selection } from './selection';
|
||||
import { History } from './history';
|
||||
import { TransformStage } from './node';
|
||||
import { uniqueId } from '@ali/lowcode-utils';
|
||||
|
||||
export type GetDataType<T, NodeType> = T extends undefined
|
||||
? NodeType extends {
|
||||
@ -90,11 +79,13 @@ export class DocumentModel {
|
||||
this._blank = true;
|
||||
}
|
||||
|
||||
this.rootNode = this.createNode<RootNode>(schema || {
|
||||
componentName: 'Page',
|
||||
id: 'root',
|
||||
fileName: ''
|
||||
});
|
||||
this.rootNode = this.createNode<RootNode>(
|
||||
schema || {
|
||||
componentName: 'Page',
|
||||
id: 'root',
|
||||
fileName: '',
|
||||
},
|
||||
);
|
||||
|
||||
this.history = new History(
|
||||
() => this.schema,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Component } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { observer } from '@ali/lowcode-globals';
|
||||
import { observer } from '@ali/lowcode-editor-core';
|
||||
import { DocumentModel } from './document-model';
|
||||
import { BuiltinSimulatorHostView } from '../builtin-simulator';
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
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
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { obx, computed, TitleContent } from '@ali/lowcode-globals';
|
||||
import { uniqueId } from '@ali/lowcode-globals';
|
||||
import { obx, computed } from '@ali/lowcode-editor-core';
|
||||
import { uniqueId } from '@ali/lowcode-utils';
|
||||
import { TitleContent } from '@ali/lowcode-types';
|
||||
import { Node } from './node';
|
||||
import { intl } from '../../locale';
|
||||
|
||||
|
||||
@ -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 { TransformStage } from './transform-stage';
|
||||
import { NodeData, isNodeSchema } from '@ali/lowcode-types';
|
||||
|
||||
export class NodeChildren {
|
||||
@obx.val private children: Node[];
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { obx, computed } from '@ali/lowcode-editor-core';
|
||||
import {
|
||||
isDOMText,
|
||||
isJSExpression,
|
||||
@ -6,12 +7,10 @@ import {
|
||||
PropsList,
|
||||
NodeData,
|
||||
TitleContent,
|
||||
obx,
|
||||
computed,
|
||||
SlotSchema,
|
||||
PageSchema,
|
||||
ComponentSchema,
|
||||
} from '@ali/lowcode-globals';
|
||||
} from '@ali/lowcode-types';
|
||||
import { Props, EXTRA_KEY_PREFIX } from './props/props';
|
||||
import { DocumentModel } from '../document-model';
|
||||
import { NodeChildren } from './node-children';
|
||||
@ -20,8 +19,6 @@ import { ComponentMeta } from '../../component-meta';
|
||||
import { ExclusiveGroup, isExclusiveGroup } from './exclusive-group';
|
||||
import { TransformStage } from './transform-stage';
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 基础节点
|
||||
*
|
||||
@ -179,7 +176,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
|
||||
}
|
||||
|
||||
isRoot(): this is RootNode {
|
||||
return this.document.rootNode == this as any;
|
||||
return this.document.rootNode == (this as any);
|
||||
}
|
||||
|
||||
isPage(): this is PageNode {
|
||||
@ -302,7 +299,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
|
||||
@computed get slots() {
|
||||
// TODO: optimize recore/obx, array maked every time, donot as changed
|
||||
const slots: Node[] = [];
|
||||
this.props.forEach(item => {
|
||||
this.props.forEach((item) => {
|
||||
if (item.type === 'slot') {
|
||||
slots.push(item.slotNode!);
|
||||
}
|
||||
@ -578,7 +575,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
|
||||
this.children?.insert(node, ref ? ref.index : null);
|
||||
}
|
||||
insertAfter(node: Node, ref?: Node) {
|
||||
this.children?.insert(node, ref ? (ref.index + 1) : null);
|
||||
this.children?.insert(node, ref ? ref.index + 1 : null);
|
||||
}
|
||||
getParent() {
|
||||
return this.parent;
|
||||
@ -609,9 +606,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
setStatus() {
|
||||
|
||||
}
|
||||
setStatus() {}
|
||||
/**
|
||||
* @deprecated
|
||||
*/
|
||||
|
||||
@ -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 { Props } from './props';
|
||||
|
||||
|
||||
@ -1,16 +1,6 @@
|
||||
import {
|
||||
CompositeValue,
|
||||
isJSExpression,
|
||||
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 { untracked, computed, obx } from '@ali/lowcode-editor-core';
|
||||
import { CompositeValue, isJSExpression, isJSSlot, JSSlot, SlotSchema } from '@ali/lowcode-types';
|
||||
import { uniqueId, isPlainObject, hasOwnProperty } from '@ali/lowcode-utils';
|
||||
import { PropStash } from './prop-stash';
|
||||
import { valueToSource } from './value-to-source';
|
||||
import { Props } from './props';
|
||||
|
||||
@ -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 { Prop, IPropParent, UNSET } from './prop';
|
||||
import { Node } from '../node';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 { DocumentModel } from './document-model';
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { SVGIcon, IconProps } from "@ali/lowcode-globals";
|
||||
import { SVGIcon, IconProps } from "@ali/lowcode-utils";
|
||||
|
||||
export function IconClone(props: IconProps) {
|
||||
return (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { SVGIcon, IconProps } from "@ali/lowcode-globals";
|
||||
import { SVGIcon, IconProps } from "@ali/lowcode-utils";
|
||||
|
||||
export function IconComponent(props: IconProps) {
|
||||
return (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { SVGIcon, IconProps } from "@ali/lowcode-globals";
|
||||
import { SVGIcon, IconProps } from "@ali/lowcode-utils";
|
||||
|
||||
export function IconContainer(props: IconProps) {
|
||||
return (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { SVGIcon, IconProps } from "@ali/lowcode-globals";
|
||||
import { SVGIcon, IconProps } from "@ali/lowcode-utils";
|
||||
|
||||
export function IconHidden(props: IconProps) {
|
||||
return (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { SVGIcon, IconProps } from "@ali/lowcode-globals";
|
||||
import { SVGIcon, IconProps } from "@ali/lowcode-utils";
|
||||
|
||||
export function IconPage(props: IconProps) {
|
||||
return (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { SVGIcon, IconProps } from '@ali/lowcode-globals';
|
||||
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
|
||||
|
||||
export function IconRemove(props: IconProps) {
|
||||
return (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { SVGIcon, IconProps } from '@ali/lowcode-globals';
|
||||
import { SVGIcon, IconProps } from '@ali/lowcode-utils';
|
||||
|
||||
export function IconSetting(props: IconProps) {
|
||||
return (
|
||||
|
||||
@ -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 zh_CN from './zh-CN.json';
|
||||
|
||||
const { intl, getLocale, setLocale } = createIntl({
|
||||
const { intl, intlNode, getLocale, setLocale } = createIntl({
|
||||
'en-US': en_US,
|
||||
'zh-CN': zh_CN,
|
||||
});
|
||||
|
||||
export { intl, getLocale, setLocale };
|
||||
export { intl, intlNode, getLocale, setLocale };
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Component } from 'react';
|
||||
import { observer } from '@ali/lowcode-globals';
|
||||
import { observer } from '@ali/lowcode-editor-core';
|
||||
import { Designer } from '../designer';
|
||||
import { DocumentView } from '../document';
|
||||
import { intl } from '../locale';
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
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 { DocumentModel, isDocumentModel } from '../document';
|
||||
import { ProjectSchema, RootSchema } from '@ali/lowcode-types';
|
||||
|
||||
export class Project {
|
||||
private emitter = new EventEmitter();
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 { Node } from './document';
|
||||
|
||||
|
||||
@ -3,43 +3,24 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
<a name="0.8.6"></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)
|
||||
<a name="0.8.9"></a>
|
||||
## [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
|
||||
|
||||
<a name="0.8.5"></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)
|
||||
|
||||
|
||||
### 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)
|
||||
<a name="0.8.8"></a>
|
||||
## [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)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package @ali/lowcode-editor-core
|
||||
|
||||
<a name="0.8.3"></a>
|
||||
## 0.8.3 (2020-03-30)
|
||||
|
||||
|
||||
|
||||
|
||||
**Note:** Version bump only for package @ali/lowcode-editor-core
|
||||
|
||||
<a name="0.8.2"></a>
|
||||
## 0.8.2 (2020-03-30)
|
||||
<a name="0.8.7"></a>
|
||||
## [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)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,11 +1,3 @@
|
||||
# demo component
|
||||
shared globals
|
||||
|
||||
t-s-demo
|
||||
|
||||
intro component
|
||||
|
||||
## API
|
||||
|
||||
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
|
||||
| ------ | ---- | ---- | ---- | ------ | ---- |
|
||||
| | | | | | |
|
||||
发 CDN
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
{
|
||||
"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
12
packages/editor-core/build.plugin.js
Normal 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"
|
||||
}]);
|
||||
});
|
||||
};
|
||||
@ -1,45 +1,44 @@
|
||||
{
|
||||
"name": "@ali/lowcode-editor-core",
|
||||
"version": "0.8.6",
|
||||
"description": "alibaba lowcode editor core",
|
||||
"version": "0.8.9",
|
||||
"description": "Core Api for Ali lowCode engine",
|
||||
"license": "MIT",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
"stylePath": "style.js",
|
||||
"files": [
|
||||
"lib",
|
||||
"es"
|
||||
"es",
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "build-scripts build --skip-demo",
|
||||
"test": "ava",
|
||||
"test:snapshot": "ava --update-snapshots"
|
||||
"cloud-build": "build-scripts build --skip-demo"
|
||||
},
|
||||
"keywords": [
|
||||
"lowcode",
|
||||
"editor"
|
||||
],
|
||||
"author": "xiayang.xy",
|
||||
"dependencies": {
|
||||
"@ali/lowcode-globals": "^0.9.3",
|
||||
"@alifd/next": "1.x",
|
||||
"@ali/lowcode-types": "^0.8.1",
|
||||
"@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",
|
||||
"events": "^3.1.0",
|
||||
"intl-messageformat": "^8.3.1",
|
||||
"lodash": "^4.17.15",
|
||||
"prop-types": "^15.5.8",
|
||||
"react": "^16.8.0",
|
||||
"store": "^2.0.12",
|
||||
"whatwg-fetch": "^3.0.0"
|
||||
"power-di": "^2.2.4",
|
||||
"react": "^16",
|
||||
"react-dom": "^16.7.0",
|
||||
"store": "^2.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@alib/build-scripts": "^0.1.3",
|
||||
"@types/lodash": "^4.14.149",
|
||||
"@types/react": "^16.9.13",
|
||||
"@types/react-dom": "^16.9.4",
|
||||
"@alib/build-scripts": "^0.1.18",
|
||||
"@types/classnames": "^2.2.7",
|
||||
"@types/node": "^13.7.1",
|
||||
"@types/react": "^16",
|
||||
"@types/react-dom": "^16",
|
||||
"@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": {
|
||||
"registry": "https://registry.npm.alibaba-inc.com"
|
||||
}
|
||||
|
||||
@ -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];
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
import { createContext } from 'react';
|
||||
|
||||
const context = createContext({});
|
||||
export default context;
|
||||
@ -1,4 +1,3 @@
|
||||
export * from './setter';
|
||||
export * from './transducer';
|
||||
export * from './ioc-context';
|
||||
export * from './editor';
|
||||
export * from '../widgets/tip/tip';
|
||||
@ -1,7 +1,6 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { CustomView, isCustomView } from '../types/setter-config';
|
||||
import { createContent } from '../utils/create-content';
|
||||
import { TitleContent } from '../types';
|
||||
import { CustomView, isCustomView, TitleContent } from '@ali/lowcode-types';
|
||||
import { createContent } from '@ali/lowcode-utils';
|
||||
|
||||
export type RegisteredSetter = {
|
||||
component: CustomView;
|
||||
@ -1,31 +1,10 @@
|
||||
import { EventEmitter } from 'events';
|
||||
import store from 'store';
|
||||
import { IocContext, RegisterOptions } from '@ali/lowcode-globals';
|
||||
import {
|
||||
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;
|
||||
|
||||
import { IEditor, EditorConfig, PluginClassSet } from '@ali/lowcode-types';
|
||||
import { IocContext, RegisterOptions } from './di';
|
||||
import { globalLocale } from './intl';
|
||||
EventEmitter.defaultMaxListeners = 100;
|
||||
|
||||
export interface HooksFuncs {
|
||||
[idx: number]: (msg: string, handler: (...args: []) => void) => void;
|
||||
}
|
||||
|
||||
export type KeyType = Function | symbol | string;
|
||||
export type KeyType = Function | Symbol | string;
|
||||
export type ClassType = Function | (new (...args: any[]) => any);
|
||||
export interface GetOptions {
|
||||
forceNew?: boolean;
|
||||
@ -41,26 +20,9 @@ export type GetReturnType<T, ClsType> = T extends undefined
|
||||
|
||||
const NOT_FOUND = Symbol.for('not_found');
|
||||
|
||||
export default class Editor extends EventEmitter {
|
||||
static getInstance = (config: EditorConfig, components: PluginClassSet, utils?: Utils): Editor => {
|
||||
if (!instance) {
|
||||
instance = new Editor(config, components, utils);
|
||||
}
|
||||
return instance;
|
||||
};
|
||||
import * as utils from './utils';
|
||||
|
||||
private _components?: PluginClassSet;
|
||||
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;
|
||||
export class Editor extends EventEmitter implements IEditor {
|
||||
/**
|
||||
* Ioc Container
|
||||
*/
|
||||
@ -68,18 +30,14 @@ export default class Editor extends EventEmitter {
|
||||
notFoundHandler: (type: KeyType) => NOT_FOUND,
|
||||
});
|
||||
|
||||
pluginStatus?: PluginStatusSet;
|
||||
get locale() {
|
||||
return globalLocale.getLocale();
|
||||
}
|
||||
|
||||
plugins?: PluginSet;
|
||||
readonly utils = utils;
|
||||
|
||||
locale?: LocaleType;
|
||||
|
||||
hooksFuncs?: HooksFuncs;
|
||||
|
||||
constructor(readonly config: EditorConfig = {}, readonly componentsMap: PluginClassSet = {}, utils?: Utils) {
|
||||
constructor(readonly config: EditorConfig = {}, readonly components: PluginClassSet = {}) {
|
||||
super();
|
||||
this.utils = { ...editorUtils, ...utils } as any;
|
||||
instance = this;
|
||||
}
|
||||
|
||||
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> {
|
||||
const { hooks, shortCuts = [], lifeCycles } = this.config || {};
|
||||
this.locale = store.get('lowcode-editor-locale') || 'zh-CN';
|
||||
this.pluginStatus = this.initPluginStatus();
|
||||
this.initHooks(hooks || []);
|
||||
const { shortCuts = [], lifeCycles } = this.config || {};
|
||||
|
||||
this.emit('editor.beforeInit');
|
||||
const init = (lifeCycles && lifeCycles.init) || ((): void => {});
|
||||
// 用户可以通过设置extensions.init自定义初始化流程；
|
||||
try {
|
||||
await transformToPromise(init(this));
|
||||
// await transformToPromise(init(this));
|
||||
// 注册快捷键
|
||||
registShortCuts(shortCuts, this);
|
||||
// registShortCuts(shortCuts, this);
|
||||
this.emit('editor.afterInit');
|
||||
return true;
|
||||
} catch (err) {
|
||||
@ -156,9 +111,8 @@ export default class Editor extends EventEmitter {
|
||||
|
||||
destroy(): void {
|
||||
try {
|
||||
const { hooks = [], shortCuts = [], lifeCycles = {} } = this.config;
|
||||
unRegistShortCuts(shortCuts);
|
||||
this.destroyHooks(hooks);
|
||||
const { shortCuts = [], lifeCycles = {} } = this.config;
|
||||
// unRegistShortCuts(shortCuts);
|
||||
if (lifeCycles.destroy) {
|
||||
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<
|
||||
KeyType,
|
||||
Array<{
|
||||
@ -245,50 +172,4 @@ export default class Editor extends EventEmitter {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
import Editor from './editor';
|
||||
|
||||
import * as utils from './utils';
|
||||
|
||||
export { default as PluginFactory } from './pluginFactory';
|
||||
export { default as EditorContext } from './context';
|
||||
export { default as AreaManager } from './areaManager';
|
||||
|
||||
export default Editor;
|
||||
|
||||
export { Editor, utils };
|
||||
export * from './intl';
|
||||
export * from './editor';
|
||||
export * from './utils';
|
||||
export * from './di';
|
||||
export * from './hotkey';
|
||||
export * from './widgets';
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { EventEmitter } from 'events';
|
||||
import { obx } from '../utils/obx';
|
||||
const languageMap: { [key: string]: string } = {
|
||||
en: 'en-US',
|
||||
zh: 'zh-CN',
|
||||
@ -28,7 +29,7 @@ const languageMap: { [key: string]: string } = {
|
||||
const LowcodeConfigKey = 'ali-lowcode-config';
|
||||
|
||||
class AliGlobalLocale {
|
||||
private locale: string = '';
|
||||
@obx.ref private locale: string = '';
|
||||
private emitter = new EventEmitter();
|
||||
|
||||
constructor() {
|
||||
@ -1,19 +1,9 @@
|
||||
import { ReactNode, Component, createElement } from 'react';
|
||||
import { IntlMessageFormat } from 'intl-messageformat';
|
||||
import { globalLocale } from './ali-global-locale';
|
||||
import { PureComponent, ReactNode } from 'react';
|
||||
import { isI18nData } from '../types';
|
||||
import { isI18nData } from '@ali/lowcode-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) {
|
||||
const tries = [locale, locale.replace('-', '_')];
|
||||
if (locale === 'zh-TW' || locale === 'en-US') {
|
||||
@ -30,44 +20,40 @@ function generateTryLocales(locale: string) {
|
||||
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)) {
|
||||
return data;
|
||||
}
|
||||
const locale = globalLocale.getLocale();
|
||||
const tries = generateTryLocales(locale);
|
||||
let tpl: string | undefined;
|
||||
let msg: string | undefined;
|
||||
for (const lan of tries) {
|
||||
tpl = data[lan];
|
||||
if (tpl != null) {
|
||||
msg = data[lan];
|
||||
if (msg != null) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (tpl == null) {
|
||||
if (msg == null) {
|
||||
return `##intl@${locale}##`;
|
||||
}
|
||||
return injectVars(tpl, params);
|
||||
}
|
||||
|
||||
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;
|
||||
return injectVars(msg, params, locale);
|
||||
}
|
||||
|
||||
export function shallowIntl(data: any): any {
|
||||
@ -76,38 +62,53 @@ export function shallowIntl(data: any): any {
|
||||
}
|
||||
const maps: any = {};
|
||||
Object.keys(data).forEach(key => {
|
||||
maps[key] = localeFormat(data[key]);
|
||||
maps[key] = intl(data[key]);
|
||||
});
|
||||
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(
|
||||
instance: string | object,
|
||||
): {
|
||||
intl(id: string, params?: object): ReactNode;
|
||||
intlString(id: string, params?: object): string;
|
||||
intlNode(id: string, params?: object): ReactNode;
|
||||
intl(id: string, params?: object): string;
|
||||
getLocale(): string;
|
||||
setLocale(locale: string): void;
|
||||
} {
|
||||
let lastLocale: string | undefined;
|
||||
let data: any = {};
|
||||
function useLocale(locale: string) {
|
||||
lastLocale = locale;
|
||||
const data = computed(() => {
|
||||
const locale = globalLocale.getLocale();
|
||||
if (typeof instance === 'string') {
|
||||
if ((window as any)[instance]) {
|
||||
data = (window as any)[instance][locale] || {};
|
||||
data.messages = (window as any)[instance][locale] || {};
|
||||
} else {
|
||||
const key = `${instance}_${locale.toLocaleLowerCase()}`;
|
||||
data = (window as any)[key] || {};
|
||||
data.messages = (window as any)[key] || {};
|
||||
}
|
||||
} else if (instance && typeof instance === 'object') {
|
||||
data = (instance as any)[locale] || {};
|
||||
data.messages = (instance as any)[locale] || {};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
useLocale(globalLocale.getLocale());
|
||||
|
||||
function intlString(key: string, params?: object): string {
|
||||
function intl(key: string, params?: object): string {
|
||||
// TODO: tries lost language
|
||||
const str = data[key];
|
||||
|
||||
@ -115,30 +116,22 @@ export function createIntl(
|
||||
return `##intl@${key}##`;
|
||||
}
|
||||
|
||||
return injectVars(str, params);
|
||||
return injectVars(str, params, globalLocale.getLocale());
|
||||
}
|
||||
|
||||
class Intl extends PureComponent<{ id: string; params?: object }> {
|
||||
private dispose = globalLocale.onLocaleChange(locale => {
|
||||
if (lastLocale !== locale) {
|
||||
useLocale(locale);
|
||||
this.forceUpdate();
|
||||
}
|
||||
});
|
||||
componentWillUnmount() {
|
||||
this.dispose();
|
||||
}
|
||||
@observer
|
||||
class IntlElement extends Component<{ id: string; params?: object }> {
|
||||
render() {
|
||||
const { id, params } = this.props;
|
||||
return intlString(id, params);
|
||||
return intl(id, params);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
intl(id: string, params?: object) {
|
||||
return <Intl id={id} params={params} />;
|
||||
intlNode(id: string, params?: object) {
|
||||
return createElement(IntlElement, { id, params });
|
||||
},
|
||||
intlString,
|
||||
intl,
|
||||
getLocale() {
|
||||
return globalLocale.getLocale();
|
||||
},
|
||||
@ -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;
|
||||
}
|
||||
@ -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)
|
||||
);
|
||||
}
|
||||
11
packages/editor-core/src/utils/goldlog.ts
Normal file
11
packages/editor-core/src/utils/goldlog.ts
Normal 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
4
packages/editor-core/src/utils/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export * from './get-public-path';
|
||||
export * from './goldlog';
|
||||
export * from './obx';
|
||||
export * from './request';
|
||||
@ -1,8 +1,10 @@
|
||||
import 'whatwg-fetch';
|
||||
import Debug from 'debug';
|
||||
const debug = Debug('request');
|
||||
|
||||
export function serialize(obj: object): string {
|
||||
export function serialize(obj?: object): string {
|
||||
if (!obj) {
|
||||
return '';
|
||||
}
|
||||
const rst: string[] = [];
|
||||
Object.entries(obj || {}).forEach(([key, val]): void => {
|
||||
if (val === null || val === undefined || val === '') return;
|
||||
@ -12,7 +14,7 @@ export function serialize(obj: object): string {
|
||||
return rst.join('&');
|
||||
}
|
||||
|
||||
export function buildUrl(dataAPI: string, params: object): string {
|
||||
export function buildUrl(dataAPI: string, params?: object): string {
|
||||
const paramStr = serialize(params);
|
||||
if (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',
|
||||
...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> {
|
||||
@ -50,7 +52,7 @@ export function request(
|
||||
method: string = 'GET',
|
||||
data?: object | string,
|
||||
headers?: object,
|
||||
otherProps?: object,
|
||||
otherProps?: any,
|
||||
): Promise<any> {
|
||||
return new Promise((resolve, reject): void => {
|
||||
if (otherProps && otherProps.timeout) {
|
||||
@ -109,7 +111,7 @@ export function request(
|
||||
return null;
|
||||
}
|
||||
})
|
||||
.then((json: object): void => {
|
||||
.then((json: any): void => {
|
||||
if (json && json.__success !== false) {
|
||||
resolve(json);
|
||||
} else {
|
||||
@ -1,3 +1,3 @@
|
||||
// TODO move another place
|
||||
export * from './tip';
|
||||
export * from './title';
|
||||
export * from './svg-icon';
|
||||
4
packages/editor-core/src/widgets/tip/index.ts
Normal file
4
packages/editor-core/src/widgets/tip/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import './style.less';
|
||||
|
||||
export * from './tip';
|
||||
export * from './tip-container';
|
||||
@ -1,8 +1,8 @@
|
||||
import { Component } from 'react';
|
||||
import Tip from './tip';
|
||||
import tipHandler from './tip-handler';
|
||||
import { TipItem } from './tip-item';
|
||||
import { tipHandler } from './tip-handler';
|
||||
|
||||
export default class TipContainer extends Component {
|
||||
export class TipContainer extends Component {
|
||||
shouldComponentUpdate() {
|
||||
return false;
|
||||
}
|
||||
@ -29,7 +29,7 @@ export default class TipContainer extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="lc-tips-container">
|
||||
<Tip />
|
||||
<TipItem />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,54 +1,10 @@
|
||||
import { EventEmitter } from 'events';
|
||||
import { TipConfig } from '../../types';
|
||||
import { TipConfig } from '@ali/lowcode-types';
|
||||
|
||||
export interface TipOptions extends TipConfig {
|
||||
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 {
|
||||
tip: TipOptions | null = null;
|
||||
private showDelay: number | null = null;
|
||||
@ -60,7 +16,7 @@ class TipHandler {
|
||||
if (tip) {
|
||||
if (this.tip) {
|
||||
// the some target should return
|
||||
if (this.tip.target === tip.target) {
|
||||
if ((this.tip as any).target === (tip as any).target) {
|
||||
this.tip = tip;
|
||||
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>();
|
||||
export function saveTips(id: string, props: TipConfig | null) {
|
||||
export function postTip(id: string, props: TipConfig | null) {
|
||||
if (props) {
|
||||
tipsMap.set(id, props);
|
||||
} else {
|
||||
tipsMap.delete(id);
|
||||
}
|
||||
}
|
||||
|
||||
export default new TipHandler();
|
||||
@ -1,10 +1,11 @@
|
||||
import { Component } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { resolvePosition } from './utils';
|
||||
import tipHandler, { TipOptions } from './tip-handler';
|
||||
import { TipConfig } from '@ali/lowcode-types';
|
||||
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;
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
@ -101,7 +102,7 @@ export default class Tip extends Component {
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
this.originClassName = className;
|
||||
17
packages/editor-core/src/widgets/tip/tip.tsx
Normal file
17
packages/editor-core/src/widgets/tip/tip.tsx
Normal 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} />;
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,10 @@
|
||||
import { Component, isValidElement } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import EmbedTip from '../tip/embed-tip';
|
||||
import './title.less';
|
||||
import { createIcon } from '../../utils';
|
||||
import { TitleContent, isI18nData } from '../../types';
|
||||
import { createIcon } from '@ali/lowcode-utils';
|
||||
import { TitleContent, isI18nData } from '@ali/lowcode-types';
|
||||
import { intl } from '../../intl';
|
||||
import { Tip } from '../tip';
|
||||
import './title.less';
|
||||
|
||||
export class Title extends Component<{ title: TitleContent; className?: string; onClick?: () => void }> {
|
||||
render() {
|
||||
@ -20,14 +20,14 @@ export class Title extends Component<{ title: TitleContent; className?: string;
|
||||
|
||||
let tip: any = null;
|
||||
if (title.tip) {
|
||||
if (isValidElement(title.tip) && title.tip.type === EmbedTip) {
|
||||
if (isValidElement(title.tip) && title.tip.type === Tip) {
|
||||
tip = title.tip;
|
||||
} else {
|
||||
const tipProps =
|
||||
typeof title.tip === 'object' && !(isValidElement(title.tip) || isI18nData(title.tip))
|
||||
? title.tip
|
||||
: { children: title.tip };
|
||||
tip = <EmbedTip direction="top" theme="black" {...tipProps} />;
|
||||
tip = <Tip direction="top" theme="black" {...tipProps} />;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,5 @@
|
||||
"compilerOptions": {
|
||||
"outDir": "lib"
|
||||
},
|
||||
"include": [
|
||||
"./src/"
|
||||
]
|
||||
"include": ["./src/"],
|
||||
}
|
||||
|
||||
@ -3,6 +3,30 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
<a name="0.8.10"></a>
|
||||
## [0.8.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-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>
|
||||
## [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)
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ali/lowcode-editor-skeleton",
|
||||
"version": "0.8.7",
|
||||
"version": "0.8.10",
|
||||
"description": "alibaba lowcode editor skeleton",
|
||||
"main": "lib/index.js",
|
||||
"module": "es/index.js",
|
||||
@ -18,15 +18,15 @@
|
||||
"lowcode",
|
||||
"editor"
|
||||
],
|
||||
"author": "xiayang.xy",
|
||||
"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",
|
||||
"prop-types": "^15.5.8",
|
||||
"classnames": "^2.2.6",
|
||||
"react": "^16.8.1",
|
||||
"react-dom": "^16.8.1",
|
||||
"react-router-dom": "^5.1.2",
|
||||
"store": "^2.0.12"
|
||||
"react-dom": "^16.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@alib/build-scripts": "^0.1.3",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { obx, computed } from '@ali/lowcode-globals';
|
||||
import WidgetContainer from './widget-container';
|
||||
import { obx, computed } from '@ali/lowcode-editor-core';
|
||||
import WidgetContainer from './widget/widget-container';
|
||||
import { Skeleton } from './skeleton';
|
||||
import { IWidget } from './widget';
|
||||
import { IWidget } from './widget/widget';
|
||||
import { IWidgetBaseConfig } from './types';
|
||||
|
||||
export default class Area<C extends IWidgetBaseConfig = any, T extends IWidget = IWidget> {
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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
Loading…
x
Reference in New Issue
Block a user