From 33750b7fef9bd00ac1fd32cbcfc5fa9ac6bd80fc Mon Sep 17 00:00:00 2001 From: kangwei Date: Wed, 8 Apr 2020 15:59:00 +0800 Subject: [PATCH] feat: run vision polyfill --- package.json | 2 +- .../designer/src/designer/designer-view.tsx | 7 +- packages/editor-skeleton/src/skeleton.tsx | 65 +- packages/vision-polyfill/build.json | 37 + packages/vision-polyfill/build.plugin.js | 13 + packages/vision-polyfill/package.json | 31 +- packages/vision-polyfill/public/assets.json | 1594 +++++++++++++++++ packages/vision-polyfill/public/favicon.png | Bin 0 -> 3612 bytes packages/vision-polyfill/public/index.html | 24 + packages/vision-polyfill/public/schema.json | 110 ++ .../vision-polyfill/src/{ => bak}/trunk.ts | 8 +- .../vision-polyfill/src/bak/vision copy.ts | 161 ++ packages/vision-polyfill/src/bundle/bundle.ts | 2 +- packages/vision-polyfill/src/demo.ts | 16 + packages/vision-polyfill/src/editor.ts | 68 + packages/vision-polyfill/src/vision.ts | 183 +- packages/vision-polyfill/tsconfig.json | 9 + 17 files changed, 2146 insertions(+), 184 deletions(-) create mode 100644 packages/vision-polyfill/build.json create mode 100644 packages/vision-polyfill/build.plugin.js create mode 100644 packages/vision-polyfill/public/assets.json create mode 100644 packages/vision-polyfill/public/favicon.png create mode 100644 packages/vision-polyfill/public/index.html create mode 100644 packages/vision-polyfill/public/schema.json rename packages/vision-polyfill/src/{ => bak}/trunk.ts (98%) create mode 100644 packages/vision-polyfill/src/bak/vision copy.ts create mode 100644 packages/vision-polyfill/src/demo.ts create mode 100644 packages/vision-polyfill/src/editor.ts create mode 100644 packages/vision-polyfill/tsconfig.json diff --git a/package.json b/package.json index 30d7377c1..0332bfcf4 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "commit": "git-cz", "pub": "lerna publish", "setup": "./scripts/setup.sh", - "start": "./scripts/start.sh", + "start": "lerna exec --scope @ali/lowcode-vision-polyfill -- npm start", "test": "lerna run test --stream", "test:snapshot": "lerna run test:snapshot" }, diff --git a/packages/designer/src/designer/designer-view.tsx b/packages/designer/src/designer/designer-view.tsx index 848f938c8..3fff56f60 100644 --- a/packages/designer/src/designer/designer-view.tsx +++ b/packages/designer/src/designer/designer-view.tsx @@ -7,12 +7,15 @@ import { ProjectView } from '../project'; import './designer.less'; import clipboard from './clipboard'; -export class DesignerView extends Component { +export class DesignerView extends Component { readonly designer: Designer; constructor(props: any) { super(props); - this.designer = new Designer(props); + const { designer, ...designerProps } = props; + this.designer = designer || new Designer(designerProps); } shouldComponentUpdate(nextProps: DesignerProps) { diff --git a/packages/editor-skeleton/src/skeleton.tsx b/packages/editor-skeleton/src/skeleton.tsx index cf04022ec..ddcd842a0 100644 --- a/packages/editor-skeleton/src/skeleton.tsx +++ b/packages/editor-skeleton/src/skeleton.tsx @@ -31,12 +31,13 @@ declare global { } export interface SkeletonProps { - components: PluginClassSet; - config: EditorConfig; - history: object; - location: object; - match: object; - utils: Utils; + components?: PluginClassSet; + config?: EditorConfig; + history?: object; + location?: object; + match?: object; + utils?: Utils; + editor?: Editor; } export interface SkeletonState { @@ -79,29 +80,32 @@ export class Skeleton extends PureComponent { if (this.editor) { this.editor.destroy(); } - const { utils, config, components } = this.props; - const editor = new Editor( - comboEditorConfig(defaultConfig, config), - components, - { - ...skeletonUtils, - ...utils, - }, - ); - this.editor = editor; + const { utils, config, components, editor } = this.props; + if (!editor) { + this.editor = new Editor( + comboEditorConfig(defaultConfig, config), + components, + { + ...skeletonUtils, + ...utils, + }, + ); + this.editor.once('editor.reset', (): void => { + this.setState({ + initReady: false, + }); + this.editor.emit('editor.beforeReset'); + this.init(true); + }); + } else { + this.editor = editor; + } + // eslint-disable-next-line no-underscore-dangle window.__ctx = { - editor, - appHelper: editor, + editor: this.editor, + appHelper: this.editor, }; - editor.once('editor.reset', (): void => { - this.setState({ - initReady: false, - }); - editor.emit('editor.beforeReset'); - this.init(true); - }); - this.editor.init().then((): void => { this.setState( { @@ -151,9 +155,10 @@ export class Skeleton extends PureComponent { // 通过React-Router包裹，支持编辑器内页面根据路由切换 export interface SkeletonWithRouterProps { - components: PluginClassSet; - config: EditorConfig; - utils: Utils; + components?: PluginClassSet; + config?: EditorConfig; + utils?: Utils; + editor?: Editor; } const SkeletonWithRouter: React.FC = ( @@ -168,7 +173,7 @@ const SkeletonWithRouter: React.FC = ( )} diff --git a/packages/vision-polyfill/build.json b/packages/vision-polyfill/build.json new file mode 100644 index 000000000..c6ed6e7a8 --- /dev/null +++ b/packages/vision-polyfill/build.json @@ -0,0 +1,37 @@ +{ + "entry": { + "index": "src/demo.ts" + }, + "vendor": false, + "devServer": { + "hot": false + }, + "publicPath": "/", + "externals": { + "react": "window.React", + "react-dom": "window.ReactDOM", + "prop-types": "window.PropTypes", + "@alifd/next": "window.Next", + "@ali/lowcode-globals": "window.LCEGlobals" + }, + "plugins": [ + [ + "build-plugin-react-app" + ], + [ + "build-plugin-fusion", + { + "themePackage": "@alife/theme-lowcode-light" + } + ], + [ + "build-plugin-moment-locales", + { + "locales": [ + "zh-cn" + ] + } + ], + "./build.plugin.js" + ] +} diff --git a/packages/vision-polyfill/build.plugin.js b/packages/vision-polyfill/build.plugin.js new file mode 100644 index 000000000..0fbf67f53 --- /dev/null +++ b/packages/vision-polyfill/build.plugin.js @@ -0,0 +1,13 @@ +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); + +module.exports = ({ onGetWebpackConfig }) => { + onGetWebpackConfig((config) => { + config.resolve + .plugin('tsconfigpaths') + .use(TsconfigPathsPlugin, [{ + configFile: "./tsconfig.json" + }]); + config.plugins.delete('hot'); + config.devServer.hot(false); + }); +}; diff --git a/packages/vision-polyfill/package.json b/packages/vision-polyfill/package.json index 1e8b2923a..01e5dded8 100644 --- a/packages/vision-polyfill/package.json +++ b/packages/vision-polyfill/package.json @@ -1,12 +1,15 @@ { "name": "@ali/lowcode-vision-polyfill", + "private": true, "version": "0.8.0", "description": "Vision Polyfill for Ali lowCode engine", "main": "lib/index.js", "files": [ "dist" ], - "scripts": {}, + "scripts": { + "start": "build-scripts start" + }, "license": "MIT", "dependencies": { "@ali/ve-icons": "^4.1.9", @@ -14,6 +17,30 @@ "@ali/ve-utils": "^1.1.0", "@ali/vu-css-style": "^1.1.3", "@ali/vu-logger": "^1.0.7", - "@ali/vu-style-sheet": "^2.4.0" + "@ali/vu-style-sheet": "^2.4.0", + "@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-outline-pane": "^0.8.7", + "@ali/lowcode-plugin-settings-pane": "^0.8.8", + "@ali/lowcode-plugin-undo-redo": "^0.8.0", + "@ali/lowcode-plugin-zh-en": "^0.8.6", + "@ali/lowcode-setters": "^0.8.6", + "@alifd/next": "^1.19.12", + "@alife/theme-lowcode-dark": "^0.1.0", + "@alife/theme-lowcode-light": "^0.1.0", + "react": "^16.8.1", + "react-dom": "^16.8.1" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.18", + "@types/events": "^3.0.0", + "@types/react": "^16.8.3", + "@types/react-dom": "^16.8.2", + "build-plugin-fusion": "^0.1.0", + "build-plugin-moment-locales": "^0.1.0", + "build-plugin-react-app": "^1.1.2", + "tsconfig-paths-webpack-plugin": "^3.2.0" } } diff --git a/packages/vision-polyfill/public/assets.json b/packages/vision-polyfill/public/assets.json new file mode 100644 index 000000000..aceef84ad --- /dev/null +++ b/packages/vision-polyfill/public/assets.json @@ -0,0 +1,1594 @@ +{ + "version": "1.0.0", + "packages": { + "moment": { + "package": "moment", + "urls": ["https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"], + "library": "moment" + }, + "@alifd/next": { + "title": "fusion组件库", + "package": "@alifd/next", + "version": "1.19.18", + "urls": ["https://unpkg.antfin-inc.com/@alife/next@1.19.18/dist/next.js", "https://unpkg.antfin-inc.com/@alife/next@1.19.18/dist/next.css"], + "library": "Next" + } + }, + "components": { + "Page": { + "componentName": "Page", + "title": "页面", + "configure": { + "events": { + "supportedLifecycles": [{ + "description": "初始化时", + "name": "constructor" + }, { + "description": "装载后", + "name": "componentDidMount" + }, { + "description": "更新时", + "name": "componentDidMount" + }, { + "description": "卸载时", + "name": "componentWillUnmount" + }] + }, + "component": { + "isContainer": true + } + } + }, + "Div": { + "componentName": "Div", + "title": "容器", + "configure": { + "component": { + "isContainer": true + } + } + }, + "Button": { + "componentName": "Button", + "title": "按钮", + "devMode": "proCode", + "npm": { + "package": "@alifd/next", + "version": "1.19.18", + "destructuring": true, + "exportName": "Button" + }, + "props": [{ + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, { + "name": "rtl", + "propType": "bool" + }, { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["primary", "secondary", "normal"] + }, + "description": "按钮的类型", + "defaultValue": "normal" + }, { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "按钮的尺寸", + "defaultValue": "medium" + }, { + "name": "iconSize", + "propType": { + "type": "oneOf", + "value": ["xxs", "xs", "small", "medium", "large", "xl", "xxl", "xxxl"] + }, + "description": "按钮中 Icon 的尺寸，用于替代 Icon 的默认大小" + }, { + "name": "htmlType", + "propType": { + "type": "oneOf", + "value": ["submit", "reset", "button"] + }, + "description": "当 component = 'button' 时，设置 button 标签的 type 值", + "defaultValue": "button" + }, { + "name": "component", + "propType": { + "type": "oneOf", + "value": ["button", "a", "div", "span"] + }, + "description": "设置标签类型", + "defaultValue": "button" + }, { + "name": "loading", + "propType": "bool", + "description": "设置按钮的载入状态", + "defaultValue": false + }, { + "name": "ghost", + "propType": { + "type": "oneOf", + "value": [true, false, "light", "dark"] + }, + "description": "是否为幽灵按钮", + "defaultValue": false + }, { + "name": "text", + "propType": "bool", + "description": "是否为文本按钮", + "defaultValue": false + }, { + "name": "warning", + "propType": "bool", + "description": "是否为警告按钮", + "defaultValue": false + }, { + "name": "disabled", + "propType": "bool", + "description": "是否禁用", + "defaultValue": false + }, { + "name": "onClick", + "propType": "func", + "description": "点击按钮的回调\n@param {Object} e Event Object" + }, { + "name": "className", + "propType": "string" + }, { + "name": "onMouseUp", + "propType": "func" + }, { + "name": "children", + "propType": "node" + }] + }, + "Button.Group": { + "componentName": "Button.Group", + "title": "按钮组", + "devMode": "proCode", + "npm": { + "package": "@alifd/next", + "version": "1.19.18", + "destructuring": true, + "exportName": "Button", + "subName": "Group" + }, + "props": [{ + "name": "rtl", + "propType": "bool" + }, { + "name": "prefix", + "propType": "string", + "defaultValue": "next-" + }, { + "name": "size", + "propType": "string", + "description": "统一设置 Button 组件的按钮大小", + "defaultValue": "medium" + }, { + "name": "className", + "propType": "string" + }, { + "name": "children", + "propType": "node" + }], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": "Button" + } + } + } + }, + "Input": { + "componentName": "Input", + "title": "输入框", + "devMode": "proCode", + "npm": { + "package": "@alifd/next", + "version": "1.19.18", + "destructuring": true, + "exportName": "Input" + }, + "props": [{ + "name": "label", + "propType": "node", + "description": "label" + }, { + "name": "hasClear", + "propType": "bool", + "description": "是否出现clear按钮" + }, { + "name": "hasBorder", + "propType": "bool", + "description": "是否有边框", + "defaultValue": "true" + }, { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["error", "loading", "success", "warning"] + }, + "description": "状态\n@enumdesc 错误, 校验中, 成功, 警告" + }, { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["small", "medium", "large"] + }, + "description": "尺寸\n@enumdesc 小, 中, 大", + "defaultValue": "medium" + }, { + "name": "onPressEnter", + "propType": "func", + "description": "按下回车的回调", + "defaultValue": "func.noop" + }, { + "name": "onClear", + "propType": "func" + }, { + "name": "htmlType", + "propType": "string", + "description": "原生type" + }, { + "name": "htmlSize", + "propType": "string" + }, { + "name": "hint", + "propType": "string", + "description": "水印 (Icon的type类型，和hasClear占用一个地方)" + }, { + "name": "innerBefore", + "propType": "node", + "description": "文字前附加内容" + }, { + "name": "innerAfter", + "propType": "node", + "description": "文字后附加内容" + }, { + "name": "addonBefore", + "propType": "node", + "description": "输入框前附加内容" + }, { + "name": "addonAfter", + "propType": "node", + "description": "输入框后附加内容" + }, { + "name": "addonTextBefore", + "propType": "node", + "description": "输入框前附加文字" + }, { + "name": "addonTextAfter", + "propType": "node", + "description": "输入框后附加文字" + }, { + "name": "autoComplete", + "propType": "string", + "description": "(原生input支持)", + "defaultValue": "off" + }, { + "name": "autoFocus", + "propType": "bool", + "description": "自动聚焦(原生input支持)" + }, { + "name": "inputRender", + "propType": "func", + "defaultValue": "el => el" + }, { + "name": "extra", + "propType": "node" + }, { + "name": "innerBeforeClassName", + "propType": "string" + }, { + "name": "innerAfterClassName", + "propType": "string" + }, { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态", + "defaultValue": "false" + }, { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + }] + }, + "Form": { + "componentName": "Form", + "title": "表单容器", + "devMode": "proCode", + "npm": { + "package": "@alifd/next", + "version": "1.19.18", + "destructuring": true, + "exportName": "Form" + }, + "props": [{ + "name": "prefix", + "propType": "string", + "description": "样式前缀", + "defaultValue": "next-" + }, { + "name": "inline", + "propType": "bool", + "description": "内联表单" + }, { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["large", "medium", "small"] + }, + "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。\n@enumdesc 大, 中, 小", + "defaultValue": "medium" + }, { + "name": "fullWidth", + "propType": "bool", + "description": "单个 Item 中表单类组件宽度是否是100%" + }, { + "name": "labelAlign", + "propType": { + "type": "oneOf", + "value": ["top", "left", "inset"] + }, + "description": "标签的位置\n@enumdesc 上, 左, 内", + "defaultValue": "left" + }, { + "name": "labelTextAlign", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "标签的左右对齐方式\n@enumdesc 左, 右" + }, { + "name": "field", + "propType": "any", + "description": "field 实例, 传 false 会禁用 field" + }, { + "name": "saveField", + "propType": "func", + "description": "保存 Form 自动生成的 field 对象" + }, { + "name": "labelCol", + "propType": "object", + "description": "控制第一级 Item 的 labelCol" + }, { + "name": "wrapperCol", + "propType": "object", + "description": "控制第一级 Item 的 wrapperCol" + }, { + "name": "onSubmit", + "propType": "func", + "description": "form内有 `htmlType=\"submit\"` 的元素的时候会触发" + }, { + "name": "children", + "propType": "any", + "description": "子元素" + }, { + "name": "className", + "propType": "string", + "description": "扩展class" + }, { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, { + "name": "value", + "propType": "object", + "description": "表单数值" + }, { + "name": "onChange", + "propType": "func", + "description": "表单变化回调\n@param {Object} values 表单数据\n@param {Object} item 详细\n@param {String} item.name 变化的组件名\n@param {String} item.value 变化的数据\n@param {Object} item.field field 实例" + }, { + "name": "component", + "propType": { + "type": "oneOfType", + "value": ["string", "func"] + }, + "description": "设置标签类型", + "defaultValue": "form" + }, { + "name": "fieldOptions", + "propType": "object" + }, { + "name": "rtl", + "propType": "bool" + }, { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["phone", "tablet", "desktop"] + }, + "description": "预设屏幕宽度", + "defaultValue": "desktop" + }, { + "name": "responsive", + "propType": "bool", + "description": "是否开启内置的响应式布局 （使用ResponsiveGrid）" + }, { + "name": "isPreview", + "propType": "bool", + "description": "是否开启预览态" + }], + "configure": { + "component": { + "isContainer": true + } + } + }, + "Form.Item": { + "componentName": "Form.Item", + "title": "表单项", + "devMode": "proCode", + "npm": { + "package": "@alifd/next", + "version": "1.19.18", + "destructuring": true, + "exportName": "Form", + "subName": "Item" + }, + "props": [{ + "name": "prefix", + "propType": "string", + "description": "样式前缀", + "defaultValue": "next-" + }, { + "name": "rtl", + "propType": "bool" + }, { + "name": "label", + "propType": "node", + "description": "label 标签的文本" + }, { + "name": "labelCol", + "propType": "object", + "description": "label 标签布局，通 `` 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效" + }, { + "name": "wrapperCol", + "propType": "object", + "description": "需要为输入控件设置布局样式时，使用该属性，用法同 labelCol" + }, { + "name": "help", + "propType": "node", + "description": "自定义提示信息，如不设置，则会根据校验规则自动生成." + }, { + "name": "extra", + "propType": "node", + "description": "额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面" + }, { + "name": "validateState", + "propType": { + "type": "oneOf", + "value": ["error", "success", "loading", "warning"] + }, + "description": "校验状态，如不设置，则会根据校验规则自动生成\n@enumdesc 失败, 成功, 校验中, 警告" + }, { + "name": "hasFeedback", + "propType": "bool", + "description": "配合 validateState 属性使用，是否展示 success/loading 的校验状态图标, 目前只有Input支持", + "defaultValue": false + }, { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, { + "name": "id", + "propType": "string" + }, { + "name": "children", + "propType": { + "type": "oneOfType", + "value": ["node", "func"] + }, + "description": "node 或者 function(values)" + }, { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["large", "small", "medium"] + }, + "description": "单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。" + }, { + "name": "fullWidth", + "propType": "bool", + "description": "单个 Item 中表单类组件宽度是否是100%" + }, { + "name": "labelAlign", + "propType": { + "type": "oneOf", + "value": ["top", "left", "inset"] + }, + "description": "标签的位置\n@enumdesc 上, 左, 内" + }, { + "name": "labelTextAlign", + "propType": { + "type": "oneOf", + "value": ["left", "right"] + }, + "description": "标签的左右对齐方式\n@enumdesc 左, 右" + }, { + "name": "className", + "propType": "string", + "description": "扩展class" + }, { + "name": "required", + "propType": "bool", + "description": "[表单校验] 不能为空" + }, { + "name": "asterisk", + "propType": "bool", + "description": "required 的星号是否显示" + }, { + "name": "requiredMessage", + "propType": "string", + "description": "required 自定义错误信息" + }, { + "name": "requiredTrigger", + "propType": { + "type": "oneOfType", + "value": ["string", "array"] + }, + "description": "required 自定义触发方式" + }, { + "name": "min", + "propType": "number", + "description": "[表单校验] 最小值" + }, { + "name": "max", + "propType": "number", + "description": "[表单校验] 最大值" + }, { + "name": "minmaxMessage", + "propType": "string", + "description": "min/max 自定义错误信息" + }, { + "name": "minmaxTrigger", + "propType": { + "type": "oneOfType", + "value": ["string", "array"] + }, + "description": "min/max 自定义触发方式" + }, { + "name": "minLength", + "propType": "number", + "description": "[表单校验] 字符串最小长度 / 数组最小个数" + }, { + "name": "maxLength", + "propType": "number", + "description": "[表单校验] 字符串最大长度 / 数组最大个数" + }, { + "name": "minmaxLengthMessage", + "propType": "string", + "description": "minLength/maxLength 自定义错误信息" + }, { + "name": "minmaxLengthTrigger", + "propType": { + "type": "oneOfType", + "value": ["string", "array"] + }, + "description": "minLength/maxLength 自定义触发方式" + }, { + "name": "length", + "propType": "number", + "description": "[表单校验] 字符串精确长度 / 数组精确个数" + }, { + "name": "lengthMessage", + "propType": "string", + "description": "length 自定义错误信息" + }, { + "name": "lengthTrigger", + "propType": { + "type": "oneOfType", + "value": ["string", "array"] + }, + "description": "length 自定义触发方式" + }, { + "name": "pattern", + "propType": "any", + "description": "正则校验" + }, { + "name": "patternMessage", + "propType": "string", + "description": "pattern 自定义错误信息" + }, { + "name": "patternTrigger", + "propType": { + "type": "oneOfType", + "value": ["string", "array"] + }, + "description": "pattern 自定义触发方式" + }, { + "name": "format", + "propType": { + "type": "oneOf", + "value": ["number", "email", "url", "tel"] + }, + "description": "[表单校验] 四种常用的 pattern" + }, { + "name": "formatMessage", + "propType": "string", + "description": "format 自定义错误信息" + }, { + "name": "formatTrigger", + "propType": { + "type": "oneOfType", + "value": ["string", "array"] + }, + "description": "format 自定义触发方式" + }, { + "name": "validator", + "propType": "func", + "description": "[表单校验] 自定义校验函数" + }, { + "name": "validatorTrigger", + "propType": { + "type": "oneOfType", + "value": ["string", "array"] + }, + "description": "validator 自定义触发方式" + }, { + "name": "autoValidate", + "propType": "bool", + "description": "是否修改数据时自动触发校验" + }, { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["phone", "tablet", "desktop"] + }, + "description": "预设屏幕宽度" + }, { + "name": "responsive", + "propType": "bool" + }, { + "name": "colSpan", + "propType": "number", + "description": "在响应式布局模式下，表单项占多少列" + }, { + "name": "labelWidth", + "propType": { + "type": "oneOfType", + "value": ["string", "number"] + }, + "description": "在响应式布局下，且label在左边时，label的宽度是多少", + "defaultValue": 100 + }, { + "name": "isPreview", + "propType": "bool", + "description": "是否开启预览态" + }, { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {any} value 根据包裹的组件的 value 类型而决定" + }], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": "Form" + } + } + } + }, + "NumberPicker": { + "componentName": "NumberPicker", + "title": "数字输入", + "devMode": "proCode", + "npm": { + "package": "@alifd/next", + "version": "1.19.18", + "destructuring": true, + "exportName": "NumberPicker" + }, + "props": [{ + "name": "prefix", + "propType": "string", + "description": "样式前缀", + "defaultValue": "next-" + }, { + "name": "type", + "propType": { + "type": "oneOf", + "value": ["normal", "inline"] + }, + "description": "设置类型\n@enumdesc 普通, 内联", + "defaultValue": "normal" + }, { + "name": "size", + "propType": { + "type": "oneOf", + "value": ["large", "medium"] + }, + "description": "大小", + "defaultValue": "medium" + }, { + "name": "value", + "propType": "number", + "description": "当前值" + }, { + "name": "defaultValue", + "propType": "number", + "description": "默认值" + }, { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, { + "name": "step", + "propType": { + "type": "oneOfType", + "value": ["number", "string"] + }, + "description": "步长", + "defaultValue": 1 + }, { + "name": "precision", + "propType": "number", + "description": "保留小数点后位数", + "defaultValue": 0 + }, { + "name": "editable", + "propType": "bool", + "description": "用户是否可以输入", + "defaultValue": true + }, { + "name": "autoFocus", + "propType": "bool", + "description": "自动焦点" + }, { + "name": "onChange", + "propType": "func", + "description": "数值被改变的事件\n@param {Number} value 数据\n@param {Event} e DOM事件对象" + }, { + "name": "onKeyDown", + "propType": "func", + "description": "键盘按下" + }, { + "name": "onFocus", + "propType": "func", + "description": "焦点获得" + }, { + "name": "onBlur", + "propType": "func", + "description": "焦点失去" + }, { + "name": "onCorrect", + "propType": "func", + "description": "数值订正后的回调\n@param {Object} obj {currentValue,oldValue:String}" + }, { + "name": "onDisabled", + "propType": "func" + }, { + "name": "max", + "propType": "number", + "description": "最大值", + "defaultValue": null + }, { + "name": "min", + "propType": "number", + "description": "最小值", + "defaultValue": null + }, { + "name": "className", + "propType": "string", + "description": "自定义class" + }, { + "name": "style", + "propType": "object", + "description": "自定义内联样式" + }, { + "name": "state", + "propType": { + "type": "oneOf", + "value": ["error"] + } + }, { + "name": "format", + "propType": "func", + "description": "格式化当前值\n@param {Number} value\n@return {String|Number}" + }, { + "name": "upBtnProps", + "propType": "object", + "description": "增加按钮的props" + }, { + "name": "downBtnProps", + "propType": "object", + "description": "减少按钮的props" + }, { + "name": "label", + "propType": "node", + "description": "内联 label" + }, { + "name": "innerAfter", + "propType": "node", + "description": "inner after" + }, { + "name": "rtl", + "propType": "bool" + }, { + "name": "isPreview", + "propType": "bool", + "description": "是否为预览态" + }, { + "name": "renderPreview", + "propType": "func", + "description": "预览态模式下渲染的内容\n@param {number} value 评分值" + }, { + "name": "device", + "propType": { + "type": "oneOf", + "value": ["phone", "tablet", "desktop"] + }, + "description": "预设屏幕宽度" + }] + }, + "Select": { + "componentName": "Select", + "title": "下拉", + "devMode": "proCode", + "npm": { + "package": "@alifd/next", + "version": "1.19.18", + "destructuring": true, + "exportName": "Select" + }, + "props": [{ + "name": "mode", + "propType": { + "type": "oneOf", + "value": ["single", "multiple", "tag"] + }, + "description": "选择器模式", + "defaultValue": "single" + }, { + "name": "value", + "propType": "any", + "description": "当前值，用于受控模式" + }, { + "name": "defaultValue", + "propType": "any", + "description": "初始的默认值" + }, { + "name": "onChange", + "propType": "func", + "description": "Select发生改变时触发的回调\n@param {*} value 选中的值\n@param {String} actionType 触发的方式, 'itemClick', 'enter', 'tag'\n@param {*} item 选中的值的对象数据 (useDetailValue=false有效)" + }, { + "name": "dataSource", + "propType": { + "type": "arrayOf", + "value": { + "type": "oneOfType", + "value": [{ + "type": "shape", + "value": [{ + "name": "value", + "propType": "any" + }, { + "name": "label", + "propType": "any" + }, { + "name": "disabled", + "propType": "bool" + }, { + "name": "children", + "propType": "array" + }] + }, "bool", "number", "string"] + } + }, + "description": "传入的数据源，可以动态渲染子项，详见 [dataSource的使用](#dataSource的使用)" + }, { + "name": "hasBorder", + "propType": "bool", + "description": "是否有边框" + }, { + "name": "hasArrow", + "propType": "bool", + "description": "是否有下拉箭头", + "defaultValue": true + }, { + "name": "showSearch", + "propType": "bool", + "description": "展开后是否能搜索（tag 模式下固定为true）", + "defaultValue": false + }, { + "name": "onSearch", + "propType": "func", + "description": "当搜索框值变化时回调\n@param {String} value 数据" + }, { + "name": "onSearchClear", + "propType": "func", + "description": "当搜索框值被清空时候的回调\n@param {String} actionType 触发的方式, 'select'(选择清空), 'popupClose'(弹窗关闭清空)" + }, { + "name": "hasSelectAll", + "propType": { + "type": "oneOfType", + "value": ["bool", "string"] + }, + "description": "多选模式下是否有全选功能" + }, { + "name": "fillProps", + "propType": "string", + "description": "填充到选择框里的值的 key\b\b" + }, { + "name": "useDetailValue", + "propType": "bool", + "description": "onChange 返回的 value 使用 dataSource 的对象" + }, { + "name": "cacheValue", + "propType": "bool", + "description": "dataSource 变化的时是否保留已选的内容", + "defaultValue": true + }, { + "name": "valueRender", + "propType": "func", + "description": "渲染 Select 展现内容的方法\n@param {Object} item 渲染节点的item\n@return {ReactNode} 展现内容\n@default item => item.label \\|\\| item.value" + }, { + "name": "itemRender", + "propType": "func", + "description": "渲染 MenuItem 内容的方法\n@param {Object} item 渲染节点的item\n@param {String} searchValue 搜索关键字（如果开启搜索）\n@return {ReactNode} item node" + }, { + "name": "notFoundContent", + "propType": "node", + "description": "弹层内容为空的文案" + }, { + "name": "style", + "propType": "object" + }, { + "name": "searchValue", + "propType": "string", + "description": "受控搜索值，一般不需要设置\n@type {[type]}" + }, { + "name": "tagInline", + "propType": "bool", + "description": "是否一行显示，仅在 mode 为 multiple 的时候生效", + "defaultValue": false + }, { + "name": "maxTagCount", + "propType": "number", + "description": "最多显示多少个 tag" + }, { + "name": "maxTagPlaceholder", + "propType": "func", + "description": "隐藏多余 tag 时显示的内容，在 maxTagCount 生效时起作用\n@param {number} selectedValues 当前已选中的元素\n@param {number} totalValues 总待选元素" + }, { + "name": "hiddenSelected", + "propType": "bool", + "description": "选择后是否立即隐藏菜单 (mode=multiple/tag 模式生效)" + }, { + "name": "onRemove", + "propType": "func", + "description": "tag 删除回调\n@param {object} item 渲染节点的item" + }, { + "name": "onFocus", + "propType": "func", + "description": "焦点事件" + }, { + "name": "onBlur", + "propType": "func", + "description": "失去焦点事件" + }, { + "name": "onMouseEnter", + "propType": "func" + }, { + "name": "onMouseLeave", + "propType": "func" + }, { + "name": "onKeyDown", + "propType": "func" + }, { + "name": "locale", + "propType": "object" + }], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "childWhitelist": "Select.Option" + } + }, + "props": [{ + "name": "mode", + "title": "选择器模式", + "setter": { + "componentName": "RadioGroupSetter", + "props": { + "defaultValue": "single", + "dataSource": [{ + "value": "single", + "label": "single" + }, { + "value": "multiple", + "label": "multiple" + }, { + "value": "tag", + "label": "tag" + }] + } + } + }, { + "name": "mode", + "title": "选择器模式", + "setter": { + "componentName": "SelectSetter", + "props": { + "defaultValue": "single", + "dataSource": [{ + "value": "single", + "label": "single" + }, { + "value": "multiple", + "label": "multiple" + }, { + "value": "tag", + "label": "tag" + }] + } + } + }, { + "name": "value", + "title": "受控值", + "setter": "StringSetter" + }, { + "name": "hasBorder", + "title": "是否有边框", + "setter": { + "componentName": "BoolSetter", + "props": { + "defaultValue": true + } + } + }, { + "name": "maxTagCount", + "title": "最多显示多少个 tag", + "setter": "NumberSetter" + }, { + "name": "maxTagCount", + "title": "最多显示多少个 tag", + "setter": "ExpressionSetter" + }, { + "name": "MixinSetter", + "placeholder": "混合", + "setter": { + "componentName": "MixinSetter", + "props": { + "types": [{ + "name": "StringSetter", + "props": {} + }, { + "name": "TextAreaSetter", + "props": {} + }, { + "name": "SelectSetter", + "props": { + "hasClear": true, + "dataSource": [{ + "label": "上", + "value": "t" + }, { + "label": "右", + "value": "r" + }, { + "label": "下", + "value": "b" + }, { + "label": "左", + "value": "l" + }] + } + }, { + "name": "NumberSetter", + "props": {} + }, { + "name": "BoolSetter", + "props": {} + }], + "defaultType": "SelectSetter" + } + } + }, { + "type": "group", + "name": "扩展 Setter", + "items": [{ + "name": "TextAreaSetter", + "setter": "TextAreaSetter" + }, { + "name": "date", + "title": "测试日期", + "setter": "DateSetter" + }, { + "name": "date", + "title": "测试日期-年", + "setter": "DateYearSetter" + }, { + "name": "date", + "title": "测试日期-月", + "setter": "DateMonthSetter" + }, { + "name": "date", + "title": "测试日期-区间", + "setter": "DateRangeSetter" + }] + }, { + "type": "group", + "name": "ArraySetter", + "items": [{ + "name": "arrayValue1", + "title": "字符数组", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "StringSetter", + "initialValue": "" + } + } + } + }, { + "name": "arrayValue2", + "title": "数字数组", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "NumberSetter", + "initialValue": 0 + } + } + } + }, { + "name": "arrayValue3", + "title": "混合数组", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "MixinSetter", + "props": { + "types": [{ + "name": "StringSetter", + "props": {} + }, { + "name": "ExpressionSetter", + "props": {} + }, { + "name": "RadioGroupSetter", + "props": { + "hasClear": true, + "dataSource": [{ + "label": "上", + "value": "t" + }, { + "label": "右", + "value": "r" + }, { + "label": "下", + "value": "b" + }, { + "label": "左", + "value": "l" + }] + } + }], + "defaultType": "SelectSetter" + } + } + } + } + }, { + "name": "arrayValue4", + "title": "对象数组", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [{ + "name": "username", + "title": "姓名", + "setter": "StringSetter", + "important": true + }, { + "name": "phone", + "title": "电话", + "setter": "StringSetter", + "important": true + }, { + "name": "age", + "title": "年龄", + "setter": "NumberSetter" + }, { + "name": "married", + "title": "婚否", + "setter": "BoolSetter" + }, { + "type": "group", + "title": "work", + "items": [{ + "name": "job", + "title": "工作岗位", + "setter": { + "componentName": "SelectSetter", + "props": { + "dataSource": [{ + "label": "工程师", + "value": 1 + }, { + "label": "高级工程师", + "value": 2 + }, { + "label": "资深工程师", + "value": 3 + }] + } + } + }, { + "name": "address", + "title": "工作地点", + "setter": "TextAreaSetter" + }] + }] + } + }, + "initialValue": {} + } + } + } + }, { + "name": "arrayValue5", + "title": "对象数组", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [{ + "name": "username", + "title": "姓名", + "setter": "StringSetter", + "important": true + }, { + "name": "age", + "title": "年龄", + "setter": "NumberSetter", + "important": true + }, { + "name": "married", + "title": "婚否", + "setter": "BoolSetter", + "important": true + }, { + "name": "log", + "title": "到访记录", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": "StringSetter" + } + }, + "important": true + }, { + "type": "group", + "title": "work", + "items": [{ + "name": "job", + "title": "工作岗位", + "setter": { + "componentName": "SelectSetter", + "props": { + "dataSource": [{ + "label": "工程师", + "value": 1 + }, { + "label": "高级工程师", + "value": 2 + }, { + "label": "资深工程师", + "value": 3 + }] + } + } + }, { + "name": "address", + "title": "工作地点", + "setter": "TextAreaSetter" + }] + }] + } + }, + "initialValue": {} + }, + "mode": "popup" + } + } + }], + "extraProps": { + "defaultCollapsed": false + } + }, { + "type": "group", + "name": "ObjectSetter", + "items": [{ + "name": "objectValue1", + "title": "对象数据1", + "setter": { + "componentName": "ObjectSetter", + "props": { + "config": { + "items": [{ + "name": "username", + "title": "姓名", + "setter": "StringSetter", + "important": true + }, { + "name": "age", + "title": "年龄", + "setter": "NumberSetter", + "important": true + }, { + "name": "married", + "title": "婚否", + "setter": "BoolSetter", + "important": true + }, { + "name": "log", + "title": "到访记录", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": "StringSetter" + } + }, + "important": true + }, { + "type": "group", + "title": "work", + "items": [{ + "name": "job", + "title": "工作岗位", + "setter": { + "componentName": "SelectSetter", + "props": { + "dataSource": [{ + "label": "工程师", + "value": 1 + }, { + "label": "高级工程师", + "value": 2 + }, { + "label": "资深工程师", + "value": 3 + }] + } + } + }, { + "name": "address", + "title": "工作地点", + "setter": "TextAreaSetter" + }] + }] + } + }, + "initialValue": {} + } + }, { + "name": "objectValue2", + "title": "对象数据2", + "setter": { + "componentName": "ObjectSetter", + "props": { + "mode": "popup", + "config": { + "items": [{ + "name": "username", + "title": "姓名", + "setter": "StringSetter", + "important": true + }, { + "name": "age", + "title": "年龄", + "setter": "NumberSetter", + "important": true + }, { + "name": "married", + "title": "婚否", + "setter": "BoolSetter", + "important": true + }, { + "name": "log", + "title": "到访记录", + "setter": { + "componentName": "ArraySetter", + "props": { + "itemSetter": "StringSetter" + } + }, + "important": true + }, { + "type": "group", + "title": "work", + "items": [{ + "name": "job", + "title": "工作岗位", + "setter": { + "componentName": "SelectSetter", + "props": { + "dataSource": [{ + "label": "工程师", + "value": 1 + }, { + "label": "高级工程师", + "value": 2 + }, { + "label": "资深工程师", + "value": 3 + }] + } + } + }, { + "name": "address", + "title": "工作地点", + "setter": "TextAreaSetter" + }] + }] + } + }, + "initialValue": {} + } + }] + }] + } + }, + "Select.Option": { + "componentName": "Select.Option", + "title": "选择项", + "devMode": "proCode", + "npm": { + "package": "@alifd/next", + "version": "1.19.18", + "destructuring": true, + "exportName": "Select", + "subName": "Option" + }, + "props": [{ + "name": "value", + "propType": { + "type": "any", + "isRequired": true + }, + "description": "选项值" + }, { + "name": "disabled", + "propType": "bool", + "description": "是否禁用" + }, { + "name": "children", + "propType": "any" + }], + "configure": { + "component": { + "isContainer": true, + "nestingRule": { + "parentWhitelist": "Select" + } + } + } + } + }, + "componentList": [{ + "title": "基础", + "icon": "", + "children": [{ + "componentName": "Button", + "title": "按钮", + "icon": "", + "package": "@alife/next", + "library": "Next", + "snippets": [{ + "title": "private", + "screenshot": "https://img.alicdn.com/tfs/TB16gZhi.H1gK0jSZSyXXXtlpXa-192-144.png", + "schema": { + "componentName": "Button", + "props": { + "type": "primary" + }, + "children": "Primary" + } + }, { + "title": "secondary", + "screenshot": "https://img.alicdn.com/tfs/TB11Hkji1H2gK0jSZFEXXcqMpXa-192-144.png", + "schema": { + "componentName": "Button", + "props": { + "type": "secondary" + }, + "children": "secondary" + } + }, { + "title": "normal", + "screenshot": "", + "schema": { + "componentName": "Button", + "props": { + "type": "normal" + }, + "children": "normal" + } + }] + }] + }, { + "title": "表单", + "icon": "", + "children": [{ + "componentName": "Input", + "library": "Next", + "title": "输入框", + "icon": "", + "package": "@alife/next", + "snippets": [{ + "title": "普通", + "screenshot": "", + "schema": { + "componentName": "Input", + "props": {} + } + }] + }, { + "componentName": "Select", + "library": "Next", + "title": "选择框", + "icon": "", + "package": "@alife/next", + "snippets": [{ + "title": "默认", + "screenshot": "", + "schema": { + "componentName": "Select", + "props": {} + } + }] + }, { + "componentName": "NumberPicker", + "library": "Next", + "title": "数字", + "icon": "", + "package": "@alife/next", + "snippets": [{ + "title": "默认", + "screenshot": "", + "schema": { + "componentName": "NumberPicker", + "props": {} + } + }] + }] + }, { + "title": "其他", + "icon": "", + "children": [{ + "componentName": "Div", + "library": "Next", + "title": "容器", + "icon": "", + "snippets": [{ + "title": "默认", + "screenshot": "", + "schema": { + "componentName": "Div", + "props": {} + } + }] + }] + }] +} diff --git a/packages/vision-polyfill/public/favicon.png b/packages/vision-polyfill/public/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..307ffbd82dba398d6db6459102bff331eef7df6b GIT binary patch literal 3612 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 + + + + + + LowCodeEngine Editor DEMO + + + + + + + + + + + + + + + + + diff --git a/packages/vision-polyfill/public/schema.json b/packages/vision-polyfill/public/schema.json new file mode 100644 index 000000000..424628106 --- /dev/null +++ b/packages/vision-polyfill/public/schema.json @@ -0,0 +1,110 @@ +{ + "componentName": "Page", + "fileName": "test", + "dataSource": { + "list": [] + }, + "state": { + "text": "outter" + }, + "props": { + "ref": "outterView", + "autoLoading": true, + "style": { + "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": "重置" + }] + }] + }] + }] +} \ No newline at end of file diff --git a/packages/vision-polyfill/src/trunk.ts b/packages/vision-polyfill/src/bak/trunk.ts similarity index 98% rename from packages/vision-polyfill/src/trunk.ts rename to packages/vision-polyfill/src/bak/trunk.ts index a832c02b5..8771e21c2 100644 --- a/packages/vision-polyfill/src/trunk.ts +++ b/packages/vision-polyfill/src/bak/trunk.ts @@ -1,10 +1,10 @@ import lg from '@ali/vu-logger'; -import EventEmitter = require('events'); +import { EventEmitter } from 'events'; import { ComponentClass } from 'react'; -import Bundle from './bundle/bundle'; -import Prototype, { setPackages } from './bundle/prototype'; -import Bus from './bus'; +import Bundle from '../bundle/bundle'; +import Prototype, { setPackages } from '../bundle/prototype'; +import Bus from '../bus'; interface IComponentInfo { image?: string; diff --git a/packages/vision-polyfill/src/bak/vision copy.ts b/packages/vision-polyfill/src/bak/vision copy.ts new file mode 100644 index 000000000..cd556c087 --- /dev/null +++ b/packages/vision-polyfill/src/bak/vision copy.ts @@ -0,0 +1,161 @@ +import * as utils from '@ali/ve-utils'; +import popups from '@ali/ve-popups'; +import Icons from '@ali/ve-icons'; +import { VE_EVENTS, VE_HOOKS } from '../const'; +import Bus from '../bus'; +import Symbols from '../symbols'; +import Skeleton from '@ali/lowcode-editor-skeleton'; +import editor from '../editor'; + +const VEOldAPIs = { + /** + * VE.Popup + */ + Popup: popups, + /** + * VE.ui.xxx + * + * Core UI Components + */ + ui: { + Field: { + SettingField, + Stage, + CaptionField, + PopupField, + EntryField, + AccordionField, + BlockField, + InlineField, + PlainField + }, + Icon: Icons, + Icons, + Popup: popups, + /* + // for rax visualpage, will not support any + FaultComponent, + HiddenComponent, + UnknownComponent, + InsertionGhost, + */ + }, + + /** + * VE.context DI 实现 + * + * 默认未初始化，需要等待 init 之后 + */ + context: new VisualEngineContext(), + + /** + * VE.init + * + * Initialized the whole VisualEngine UI + */ + init: (container?: Element, contextConfigs?: any) => { + if (!container) { + container = document.createElement('div'); + document.body.appendChild(container); + } + container.id = 'engine'; + ReactDOM.render(, container); + }, + + /** + * VE.modules.xxx + * + * VE BuildIn Modules + */ + modules: { + // SchemaManager, 没看到使用的地方 + // VisualDesigner, 没看到使用的地方 + VisualManager // legao-designer 有用 + // VisualRender, 没看到使用的地方 + I18nUtil, // vs-list vs-rhino-widget-mapping + Prop, // vs-list vs-rhino-widget-mapping + /* 没看到使用的地方 + Node, + Props, + + Scroller, + Insertion, + */ + }, + + /** + * VE Utils + */ + utils, + /* 包抽象 */ + Bundle, + + /* pub/sub 集线器 */ + // ve-quick-search-pane, ve-section-pane vp-in-place-editing ve-action-save + // ve-page-history vs-q-chart-data ve-action-pane ve-page-lock-pane + // ve-datapool-pane ve-youshu-card-param-pane + Bus, + + /* 拖拽引擎 */ + DragEngine, // 在 ve-metadata-pane, ve-section-pane， ve-trunk-pane-simple， ve-trunk-pane 中有用 + + /* 环境变量 */ + // vu-oneapi-parser vu-events-property ve-section-pane vs-formula vu-link-property + // ve-datapool-pane vs-form-validator vs-style vs-link vs-micro-link vs-link-options vu-field-property + Env, + + /* 状态交换 */ + // + Exchange, + + /* 状态 Flags */ + // legao-design tree-pane + Flags, + + /* 快捷键 */ + // legao-design + Hotkey, + + /* 多语言文案 */ + I18nUtil, + + /* 页面管理 */ + Pages, + + /* 面板管理 */ + Panes, + + /* 应用管理 */ + Project, + + /* 包原型 */ + Prototype, + + /* 组件仓库 */ + Trunk, + + /* 事件 */ + EVENTS: VE_EVENTS, // legao-design + + /* 修饰方法 */ + HOOKS: VE_HOOKS, // legao-design vu-visualpage-rax + + /* 视图管理 */ + Viewport, + + /* Symbol 管理类 */ + Symbols, // legao-design vu-action-util + + /** + * VisualEngine Logger Tool + */ + // lg: logger, 没看到使用的地方 + // logger, + + /* 版本号 */ + // Version: VERSION, + + // Location, + // Node, + // VirtualRenderingNode +} diff --git a/packages/vision-polyfill/src/bundle/bundle.ts b/packages/vision-polyfill/src/bundle/bundle.ts index d2c9ae8f1..fd2db6332 100644 --- a/packages/vision-polyfill/src/bundle/bundle.ts +++ b/packages/vision-polyfill/src/bundle/bundle.ts @@ -3,7 +3,7 @@ import { camelCase, find, findIndex, upperFirst } from 'lodash'; import { ComponentClass, ReactElement, ComponentType } from 'react'; import { UnknownComponent } from '../../ui/placeholders'; -import Trunk, { IComponentBundle } from '../trunk'; +import Trunk, { IComponentBundle } from '../bak/trunk'; import Prototype from './prototype'; function basename(name: string) { diff --git a/packages/vision-polyfill/src/demo.ts b/packages/vision-polyfill/src/demo.ts new file mode 100644 index 000000000..b980feffd --- /dev/null +++ b/packages/vision-polyfill/src/demo.ts @@ -0,0 +1,16 @@ +import { init } from "./vision"; +import editor from './editor'; + +init(); + +load(); + +async function load() { + const assets = await editor.utils.get('./assets.json'); + editor.set('assets', assets); + editor.emit('assets.loaded', assets); + + const schema = await editor.utils.get('./schema.json'); + editor.set('schema', schema); + editor.emit('schema.loaded', schema); +} diff --git a/packages/vision-polyfill/src/editor.ts b/packages/vision-polyfill/src/editor.ts new file mode 100644 index 000000000..60989133c --- /dev/null +++ b/packages/vision-polyfill/src/editor.ts @@ -0,0 +1,68 @@ +import Editor from '@ali/lowcode-editor-core'; +import outlinePane from '@ali/lowcode-plugin-outline-pane'; +import settingsPane from '@ali/lowcode-plugin-settings-pane'; +import designer from '@ali/lowcode-plugin-designer'; +import { registerSetters } from '@ali/lowcode-setters'; + +registerSetters(); + +export default new Editor( + { + plugins: { + topArea: [], + leftArea: [ + { + pluginKey: 'outlinePane', + type: 'PanelIcon', + props: { + align: 'top', + icon: 'shuxingkongjian', + title: '大纲树', + }, + config: { + package: '@ali/lowcode-plugin-outline-pane', + version: '^0.8.0', + }, + pluginProps: {}, + }, + ], + rightArea: [ + { + pluginKey: 'settingsPane', + type: 'Panel', + props: {}, + config: { + package: '@ali/lowcode-plugin-settings-pane', + version: '^0.8.0', + }, + pluginProps: {}, + }, + ], + centerArea: [ + { + pluginKey: 'designer', + type: '', + props: {}, + config: { + package: '@ali/lowcode-plugin-designer', + version: '^0.8.0', + }, + }, + ], + }, + }, + { + outlinePane, + settingsPane, + designer, + }, +); + + +// editor-core +// 1. di 实现 +// 2. skeleton 区域管理 +// 3. general bus: pub/sub +// editor-skeleton/workbench 视图实现 +// provide fixed left pane +// provide float left pane diff --git a/packages/vision-polyfill/src/vision.ts b/packages/vision-polyfill/src/vision.ts index 180bb361b..ac016b299 100644 --- a/packages/vision-polyfill/src/vision.ts +++ b/packages/vision-polyfill/src/vision.ts @@ -1,159 +1,54 @@ import * as utils from '@ali/ve-utils'; -import popups from '@ali/ve-popups'; +import Popup from '@ali/ve-popups'; import Icons from '@ali/ve-icons'; -import { VE_EVENTS, VE_HOOKS } from './const'; +import { render } from 'react-dom'; +import { createElement } from 'react'; +import { VE_EVENTS as EVENTS, VE_HOOKS as HOOKS } from './const'; import Bus from './bus'; import Symbols from './symbols'; +import Skeleton from '@ali/lowcode-editor-skeleton'; +import editor from './editor'; -const VEOldAPIs = { +function init(container?: Element) { + if (!container) { + container = document.createElement('div'); + document.body.appendChild(container); + } + container.id = 'engine'; + + render(createElement(Skeleton, { + editor, + }), container); +} + +const ui = { + Icon: Icons, + Icons, + Popup, +}; + +export { /** * VE.Popup */ - Popup: popups, + Popup, /** - * VE.ui.xxx - * - * Core UI Components + * VE Utils */ - ui: { - Field: { - SettingField, - Stage, - CaptionField, - PopupField, - EntryField, - AccordionField, - BlockField, - InlineField, - PlainField - }, - Icon: Icons, - Icons, - Popup: popups, - /* - // for rax visualpage, will not support any - FaultComponent, - HiddenComponent, - UnknownComponent, - InsertionGhost, - */ - }, - - /** - * VE.context DI 实现 - * - * 默认未初始化，需要等待 init 之后 - */ - context: new VisualEngineContext(), - + utils, + /* pub/sub 集线器 */ + Bus, + /* 事件 */ + EVENTS, + /* 修饰方法 */ + HOOKS, + /* Symbol 管理类 */ + Symbols, /** * VE.init * * Initialized the whole VisualEngine UI */ - init: once((container?: Element, contextConfigs?: any) => { - if (!container) { - container = document.createElement('div'); - document.body.appendChild(container); - } - container.id = 'engine'; - ReactDOM.render(, container); - }), - - /** - * VE.modules.xxx - * - * VE BuildIn Modules - */ - modules: { - // SchemaManager, 没看到使用的地方 - // VisualDesigner, 没看到使用的地方 - VisualManager // legao-designer 有用 - // VisualRender, 没看到使用的地方 - I18nUtil, // vs-list vs-rhino-widget-mapping - Prop, // vs-list vs-rhino-widget-mapping - /* 没看到使用的地方 - Node, - Props, - - Scroller, - Insertion, - */ - }, - - /** - * VE Utils - */ - utils, - /* 包抽象 */ - Bundle, - - /* pub/sub 集线器 */ - // ve-quick-search-pane, ve-section-pane vp-in-place-editing ve-action-save - // ve-page-history vs-q-chart-data ve-action-pane ve-page-lock-pane - // ve-datapool-pane ve-youshu-card-param-pane - Bus, - - /* 拖拽引擎 */ - DragEngine, // 在 ve-metadata-pane, ve-section-pane， ve-trunk-pane-simple， ve-trunk-pane 中有用 - - /* 环境变量 */ - // vu-oneapi-parser vu-events-property ve-section-pane vs-formula vu-link-property - // ve-datapool-pane vs-form-validator vs-style vs-link vs-micro-link vs-link-options vu-field-property - Env, - - /* 状态交换 */ - // - Exchange, - - /* 状态 Flags */ - // legao-design tree-pane - Flags, - - /* 快捷键 */ - // legao-design - Hotkey, - - /* 多语言文案 */ - I18nUtil, - - /* 页面管理 */ - Pages, - - /* 面板管理 */ - Panes, - - /* 应用管理 */ - Project, - - /* 包原型 */ - Prototype, - - /* 组件仓库 */ - Trunk, - - /* 事件 */ - EVENTS: VE_EVENTS, // legao-design - - /* 修饰方法 */ - HOOKS: VE_HOOKS, // legao-design vu-visualpage-rax - - /* 视图管理 */ - Viewport, - - /* Symbol 管理类 */ - Symbols, // legao-design vu-action-util - - /** - * VisualEngine Logger Tool - */ - // lg: logger, 没看到使用的地方 - // logger, - - /* 版本号 */ - // Version: VERSION, - - // Location, - // Node, - // VirtualRenderingNode -} + init, + ui, +}; diff --git a/packages/vision-polyfill/tsconfig.json b/packages/vision-polyfill/tsconfig.json new file mode 100644 index 000000000..c37b76ecc --- /dev/null +++ b/packages/vision-polyfill/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "lib" + }, + "include": [ + "./src/" + ] +}