From b379bd7c0c488ef24f825760750a13d3fa083c96 Mon Sep 17 00:00:00 2001 From: kangwei Date: Mon, 30 Mar 2020 04:11:05 +0800 Subject: [PATCH 1/2] feat: double outline & ZH_EN support --- docs/code-specification.md | 2 +- packages/demo/package.json | 1 + packages/demo/src/config/components.js | 6 +- packages/demo/src/config/skeleton.js | 12 +++ .../globals/src/components/tip/embed-tip.tsx | 1 + .../globals/src/components/tip/tip-handler.ts | 2 +- packages/globals/src/types/tip.ts | 2 +- packages/plugin-outline-pane/src/index.ts | 2 + packages/plugin-outline-pane/src/main.ts | 76 +++++++++++++++++-- .../plugin-outline-pane/src/views/pane.tsx | 9 ++- packages/plugin-settings-pane/src/index.tsx | 27 ++++++- packages/plugin-settings-pane/src/main.ts | 16 ++++ packages/plugin-settings-pane/src/style.less | 14 ++++ packages/plugin-zh-en/README.md | 1 + packages/plugin-zh-en/build.json | 5 ++ packages/plugin-zh-en/package.json | 31 ++++++++ packages/plugin-zh-en/src/icons/en.tsx | 11 +++ packages/plugin-zh-en/src/icons/zh.tsx | 11 +++ packages/plugin-zh-en/src/index.less | 11 +++ packages/plugin-zh-en/src/index.tsx | 36 +++++++++ packages/plugin-zh-en/src/locale/en-US.json | 3 + packages/plugin-zh-en/src/locale/index.ts | 10 +++ packages/plugin-zh-en/src/locale/zh-CN.json | 3 + packages/plugin-zh-en/tsconfig.json | 9 +++ 24 files changed, 284 insertions(+), 17 deletions(-) create mode 100644 packages/plugin-zh-en/README.md create mode 100644 packages/plugin-zh-en/build.json create mode 100644 packages/plugin-zh-en/package.json create mode 100644 packages/plugin-zh-en/src/icons/en.tsx create mode 100644 packages/plugin-zh-en/src/icons/zh.tsx create mode 100644 packages/plugin-zh-en/src/index.less create mode 100644 packages/plugin-zh-en/src/index.tsx create mode 100644 packages/plugin-zh-en/src/locale/en-US.json create mode 100644 packages/plugin-zh-en/src/locale/index.ts create mode 100644 packages/plugin-zh-en/src/locale/zh-CN.json create mode 100644 packages/plugin-zh-en/tsconfig.json diff --git a/docs/code-specification.md b/docs/code-specification.md index 4c42cd0c7..0a7c9f555 100644 --- a/docs/code-specification.md +++ b/docs/code-specification.md @@ -10,7 +10,7 @@ - 使用 `camelCase` 为属性或本地变量命名 - 不要为私有属性名添加 `_` 前缀 - 尽可能使用完整的单词拼写命名 - - 文件夹命名统一使用小写 + - 文件夹/文件命名统一使用小写 `get-custom-data.ts` ### 组件 diff --git a/packages/demo/package.json b/packages/demo/package.json index 16ca0d3c8..6e448fffe 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -15,6 +15,7 @@ "@ali/lowcode-plugin-settings-pane": "^0.8.0", "@ali/lowcode-plugin-outline-pane": "^0.8.0", "@ali/lowcode-plugin-undo-redo": "^0.8.0", + "@ali/lowcode-plugin-zh-en": "^0.8.0", "@ali/lowcode-plugin-sample-logo": "^0.8.0", "@ali/lowcode-plugin-sample-preview": "^0.8.0", "@alife/theme-lowcode-dark": "^0.1.0", diff --git a/packages/demo/src/config/components.js b/packages/demo/src/config/components.js index 2d40e553c..2607bf092 100644 --- a/packages/demo/src/config/components.js +++ b/packages/demo/src/config/components.js @@ -1,4 +1,5 @@ import undoRedo from '@ali/lowcode-plugin-undo-redo'; +import zhEn from '@ali/lowcode-plugin-zh-en'; import logo from '@ali/lowcode-plugin-sample-logo'; import SamplePreview from '@ali/lowcode-plugin-sample-preview'; import Designer from '@ali/lowcode-plugin-designer'; @@ -8,11 +9,12 @@ import OutlinePane from '@ali/lowcode-plugin-outline-pane'; import { PluginFactory } from '@ali/lowcode-editor-core'; export default { - logo: PluginFactory(logo), - samplePreview: PluginFactory(SamplePreview), undoRedo: PluginFactory(undoRedo), + zhEn: PluginFactory(zhEn), designer: PluginFactory(Designer), componentsPane: PluginFactory(componentsPane), settingsPane: PluginFactory(SettingsPane), outlinePane: PluginFactory(OutlinePane), + logo: PluginFactory(logo), + samplePreview: PluginFactory(SamplePreview), }; diff --git a/packages/demo/src/config/skeleton.js b/packages/demo/src/config/skeleton.js index 035d9a0c5..081e06da1 100644 --- a/packages/demo/src/config/skeleton.js +++ b/packages/demo/src/config/skeleton.js @@ -91,6 +91,18 @@ export default { version: '^1.0.0' }, pluginProps: {} + }, + { + pluginKey: 'zhEn', + type: 'Custom', + props: { + align: 'bottom', + }, + config: { + package: '@ali/lowcode-plugin-zh-en', + version: '^1.0.0' + }, + pluginProps: {} } ], rightArea: [ diff --git a/packages/globals/src/components/tip/embed-tip.tsx b/packages/globals/src/components/tip/embed-tip.tsx index 290cf2f9a..df5748771 100644 --- a/packages/globals/src/components/tip/embed-tip.tsx +++ b/packages/globals/src/components/tip/embed-tip.tsx @@ -12,6 +12,7 @@ export default class EmbedTip extends Component { render() { saveTips(this.id, this.props); + console.info(this.props); return ; } } diff --git a/packages/globals/src/components/tip/tip-handler.ts b/packages/globals/src/components/tip/tip-handler.ts index ed1cb908a..db347f847 100644 --- a/packages/globals/src/components/tip/tip-handler.ts +++ b/packages/globals/src/components/tip/tip-handler.ts @@ -16,7 +16,7 @@ function findTip(target: HTMLElement | null): TipOptions | null { if (target.dataset && target.dataset.tip) { return { children: target.dataset.tip, - direction: target.dataset.direction || target.dataset.dir, + direction: (target.dataset.direction || target.dataset.dir) as any, theme: target.dataset.theme, target, }; diff --git a/packages/globals/src/types/tip.ts b/packages/globals/src/types/tip.ts index 0d9cd4752..5c7174159 100644 --- a/packages/globals/src/types/tip.ts +++ b/packages/globals/src/types/tip.ts @@ -5,7 +5,7 @@ export interface TipConfig { className?: string; children?: I18nData | ReactNode; theme?: string; - direction?: string; // 'n|s|w|e|top|bottom|left|right'; + direction?: 'top' | 'bottom' | 'left' | 'right'; } export type TipContent = string | I18nData | ReactElement | TipConfig; diff --git a/packages/plugin-outline-pane/src/index.ts b/packages/plugin-outline-pane/src/index.ts index bc52dcf36..dbb4d2b11 100644 --- a/packages/plugin-outline-pane/src/index.ts +++ b/packages/plugin-outline-pane/src/index.ts @@ -11,4 +11,6 @@ export default { }; */ +export { getTreeMaster } from './main'; + export default Pane; diff --git a/packages/plugin-outline-pane/src/main.ts b/packages/plugin-outline-pane/src/main.ts index 166463663..c4b1479b4 100644 --- a/packages/plugin-outline-pane/src/main.ts +++ b/packages/plugin-outline-pane/src/main.ts @@ -21,12 +21,15 @@ import { Tree } from './tree'; import TreeNode from './tree-node'; import { IndentTrack } from './helper/indent-track'; import DwellTimer from './helper/dwell-timer'; +import { EventEmitter } from 'events'; export interface IScrollBoard { scrollToNode(treeNode: TreeNode, detail?: any): void; } class TreeMaster { + private emitter = new EventEmitter(); + private currentFixed?: OutlineMain; constructor(readonly designer: Designer) { designer.dragon.onDragstart((e) => { const tree = this.currentTree; @@ -35,6 +38,9 @@ class TreeMaster { tree.getTreeNode(node).setExpanded(false); }); } + if (!this.currentFixed) { + this.emitter.emit('enable-builtin'); + } }); designer.activeTracker.onChange(({ node, detail }) => { const tree = this.currentTree; @@ -55,6 +61,23 @@ class TreeMaster { }); } + setFixed(entry: OutlineMain) { + this.currentFixed = entry; + } + + unFixed(entry: OutlineMain) { + if (entry === this.currentFixed) { + this.currentFixed = undefined; + } + } + + onceEnableBuiltin(fn: () => void): () => void { + this.emitter.once('enable-builtin', fn); + return () => { + this.emitter.removeListener('enable-builtin', fn); + } + } + private boards = new Set(); addBoard(board: IScrollBoard) { this.boards.add(board); @@ -63,12 +86,16 @@ class TreeMaster { this.boards.delete(board); } + purge() { + this.emitter.removeAllListeners(); + // todo others purge + } + private treeMap = new Map(); @computed get currentTree(): Tree | null { const doc = this.designer?.currentDocument; if (doc) { const id = doc.id; - console.info(id); if (this.treeMap.has(id)) { return this.treeMap.get(id)!; } @@ -82,7 +109,7 @@ class TreeMaster { } const mastersMap = new Map(); -function getTreeMaster(designer: Designer): TreeMaster { +export function getTreeMaster(designer: Designer): TreeMaster { let master = mastersMap.get(designer); if (!master) { master = new TreeMaster(designer); @@ -102,13 +129,45 @@ export class OutlineMain implements ISensor, IScrollBoard, IScrollable { } readonly id = uniqueId('outline'); - constructor(readonly editor: any) { - if (editor.designer) { - this.setupDesigner(editor.designer); + private fixed = false; + constructor(readonly editor: any, at?: string) { + let inited = false; + const setup = () => { + if (inited) { + return false; + } + inited = true; + if (editor.designer) { + this.setupDesigner(editor.designer); + } else { + editor.once('designer.mount', (designer: Designer) => { + this.setupDesigner(designer); + }); + } + }; + + if (at === '__IN_SETTINGS__') { + setup(); } else { - editor.once('designer.mount', (designer: Designer) => { - this.setupDesigner(designer); + editor.on('leftPanel.show', (key: string) => { + if (key === at) { + setup(); + if (this.master) { + this.master.setFixed(this); + } else { + this.fixed = true; + } + document.documentElement.classList.add('lowcode-has-fixed-tree'); + } else { + document.documentElement.classList.remove('lowcode-has-fixed-tree'); + if (this.master) { + this.master.unFixed(this); + } else { + this.fixed = false; + } + } }); + // editor.once('outlinePane.visible', setup); } } @@ -570,6 +629,9 @@ export class OutlineMain implements ISensor, IScrollBoard, IScrollable { this._designer = designer; this._master = getTreeMaster(designer); this._master.addBoard(this); + if (this.fixed) { + this._master.setFixed(this); + } designer.dragon.addSensor(this); this.scroller = designer.createScroller(this); } diff --git a/packages/plugin-outline-pane/src/views/pane.tsx b/packages/plugin-outline-pane/src/views/pane.tsx index 4166db4b5..36f141c95 100644 --- a/packages/plugin-outline-pane/src/views/pane.tsx +++ b/packages/plugin-outline-pane/src/views/pane.tsx @@ -6,8 +6,11 @@ import TreeView from './tree'; import './style.less'; @observer -export default class OutlinePane extends Component<{ editor: any }> { - private main = new OutlineMain(this.props.editor); +export default class OutlinePane extends Component<{ config?: any; editor: any; inSettings?: boolean }> { + private main = new OutlineMain( + this.props.editor, + this.props.config ? this.props.config.pluginKey : this.props.inSettings ? '__IN_SETTINGS__' : null, + ); shouldComponentUpdate() { return false; @@ -20,8 +23,6 @@ export default class OutlinePane extends Component<{ editor: any }> { render() { const tree = this.main.currentTree; - console.info('tree', tree); - if (!tree) { return (
diff --git a/packages/plugin-settings-pane/src/index.tsx b/packages/plugin-settings-pane/src/index.tsx index 1bb8d8c9f..11a7e791c 100644 --- a/packages/plugin-settings-pane/src/index.tsx +++ b/packages/plugin-settings-pane/src/index.tsx @@ -1,7 +1,8 @@ -import React, { Component } from 'react'; +import React, { Component, PureComponent } from 'react'; import { Tab, Breadcrumb } from '@alifd/next'; import { Title, createIcon } from '@ali/lowcode-globals'; import { Node } from '@ali/lowcode-designer'; +import OutlinePane, { getTreeMaster } from '@ali/lowcode-plugin-outline-pane'; import { SettingsMain, SettingField, isSettingField } from './main'; import SettingsPane, { createSettingFieldView } from './settings-pane'; import './transducers/register'; @@ -67,6 +68,7 @@ export default class SettingsMainView extends Component { // 未选中节点，提示选中 或者 显示根节点设置 return (
+

请在左侧画布选中节点

@@ -78,6 +80,7 @@ export default class SettingsMainView extends Component { // todo: future support 获取设置项交集编辑 return (
+

请选中同一类型节点编辑

@@ -89,6 +92,7 @@ export default class SettingsMainView extends Component { if (items.length > 5 || items.some(item => !isSettingField(item) || !item.isGroup)) { return (
+ {this.renderBreadcrumb()}
@@ -99,6 +103,7 @@ export default class SettingsMainView extends Component { return (
+ { + state = { + outlineInited: false, + }; + private dispose = this.props.main.onceOutlineVisible(() => { + this.setState({ + outlineInited: true, + }); + }); + componentWillUnmount() { + this.dispose(); + } + render() { + if (!this.state.outlineInited) { + return null; + } + return ; + } +} + function hoverNode(node: Node, flag: boolean) { node.hover(flag); } diff --git a/packages/plugin-settings-pane/src/main.ts b/packages/plugin-settings-pane/src/main.ts index 269b6c284..c617d66c2 100644 --- a/packages/plugin-settings-pane/src/main.ts +++ b/packages/plugin-settings-pane/src/main.ts @@ -2,6 +2,7 @@ import { EventEmitter } from 'events'; import { uniqueId } from '@ali/lowcode-globals'; import { ComponentMeta, Node, Designer, Selection } from '@ali/lowcode-designer'; import { TitleContent, FieldExtraProps, SetterType, CustomView, FieldConfig, isCustomView } from '@ali/lowcode-globals'; +import { getTreeMaster } from 'plugin-outline-pane/src/main'; export interface SettingTarget { // 所设置的节点集，至少一个 @@ -337,8 +338,16 @@ export class SettingsMain implements SettingTarget { } }; editor.on('designer.selection-change', setupSelection); + const connectTree = (designer: any) => { + getTreeMaster(designer).onceEnableBuiltin(() => { + this.emitter.emit('outline-visible'); + }); + } if (editor.designer) { + connectTree(editor.designer); setupSelection(editor.designer.currentSelection); + } else { + editor.once('designer.mount', connectTree); } this.disposeListener = () => { editor.removeListener('designer.selection-change', setupSelection); @@ -350,6 +359,13 @@ export class SettingsMain implements SettingTarget { return this.onNodesChange(action); } + onceOutlineVisible(fn: () => void): () => void { + this.emitter.on('outline-visible', fn); + return () => { + this.emitter.removeListener('outline-visible', fn); + }; + } + /** * 获取属性值 */ diff --git a/packages/plugin-settings-pane/src/style.less b/packages/plugin-settings-pane/src/style.less index 3481c7fae..0ebac372e 100644 --- a/packages/plugin-settings-pane/src/style.less +++ b/packages/plugin-settings-pane/src/style.less @@ -129,4 +129,18 @@ overflow-y: auto; } } + .lc-outline-pane { + position: absolute; + z-index: 100; + background-color: white; + top: 0; + bottom: 0; + display: none; + } +} + +html.lc-cursor-dragging:not(.lowcode-has-fixed-tree) { + .lc-settings-main .lc-outline-pane { + display: block; + } } diff --git a/packages/plugin-zh-en/README.md b/packages/plugin-zh-en/README.md new file mode 100644 index 000000000..8a6fb13f0 --- /dev/null +++ b/packages/plugin-zh-en/README.md @@ -0,0 +1 @@ +## todo diff --git a/packages/plugin-zh-en/build.json b/packages/plugin-zh-en/build.json new file mode 100644 index 000000000..bd5cf18dd --- /dev/null +++ b/packages/plugin-zh-en/build.json @@ -0,0 +1,5 @@ +{ + "plugins": [ + "build-plugin-component" + ] +} diff --git a/packages/plugin-zh-en/package.json b/packages/plugin-zh-en/package.json new file mode 100644 index 000000000..c2de5403d --- /dev/null +++ b/packages/plugin-zh-en/package.json @@ -0,0 +1,31 @@ +{ + "name": "@ali/lowcode-plugin-zh-en", + "version": "0.8.0", + "description": "alibaba lowcode editor zhong english plugin", + "files": [ + "es", + "lib" + ], + "main": "lib/index.js", + "module": "es/index.js", + "scripts": { + "build": "build-scripts build --skip-demo", + "test": "ava", + "test:snapshot": "ava --update-snapshots" + }, + "dependencies": { + "@ali/lowcode-globals": "^0.8.0", + "@ali/lowcode-editor-core": "^0.8.0", + "react": "^16.8.1", + "react-dom": "^16.8.1" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.3", + "@types/react": "^16.9.13", + "@types/react-dom": "^16.9.4", + "build-plugin-component": "^0.2.11" + }, + "publishConfig": { + "registry": "https://registry.npm.alibaba-inc.com" + } +} diff --git a/packages/plugin-zh-en/src/icons/en.tsx b/packages/plugin-zh-en/src/icons/en.tsx new file mode 100644 index 000000000..44303ca21 --- /dev/null +++ b/packages/plugin-zh-en/src/icons/en.tsx @@ -0,0 +1,11 @@ +import { IconBase, IconProps } from '@ali/lowcode-globals'; + +export function IconEn(props: IconProps) { + return ( + + + + ); +} + +IconEn.displayName = 'IconEn'; diff --git a/packages/plugin-zh-en/src/icons/zh.tsx b/packages/plugin-zh-en/src/icons/zh.tsx new file mode 100644 index 000000000..4c4828411 --- /dev/null +++ b/packages/plugin-zh-en/src/icons/zh.tsx @@ -0,0 +1,11 @@ +import { IconBase, IconProps } from '@ali/lowcode-globals'; + +export function IconZh(props: IconProps) { + return ( + + + + ); +} + +IconZh.displayName = 'IconZh'; diff --git a/packages/plugin-zh-en/src/index.less b/packages/plugin-zh-en/src/index.less new file mode 100644 index 000000000..e03f646a1 --- /dev/null +++ b/packages/plugin-zh-en/src/index.less @@ -0,0 +1,11 @@ +.lowcode-plugin-zh-en { + display: flex; + align-items: center; + justify-content: center; + height: 30px; + cursor: pointer; + color: #8F9BB3; + &:hover { + color: #1F3858; + } +} diff --git a/packages/plugin-zh-en/src/index.tsx b/packages/plugin-zh-en/src/index.tsx new file mode 100644 index 000000000..7c44ae362 --- /dev/null +++ b/packages/plugin-zh-en/src/index.tsx @@ -0,0 +1,36 @@ +import { PureComponent } from 'react'; +import { globalLocale, EmbedTip } from '@ali/lowcode-globals'; +import { PluginProps } from '@ali/lowcode-editor-core'; +import { intl } from './locale'; +import { IconZh } from './icons/zh'; +import { IconEn } from './icons/en'; +import './index.less'; + +export default class ZhEn extends PureComponent { + static displayName = 'LowcodeZhEn'; + state = { + locale: globalLocale.getLocale(), + }; + + private dispose = globalLocale.onLocaleChange((locale) => { + this.setState({ + locale + }); + }); + + componentWillUnmount() { + this.dispose(); + } + + render() { + const isZh = this.state.locale === 'zh-CN'; + return ( +
{ + globalLocale.setLocale(isZh ? 'en-US' : 'zh-CN'); + }}> + {isZh ? : } + {intl('To Locale')} +
+ ); + } +} diff --git a/packages/plugin-zh-en/src/locale/en-US.json b/packages/plugin-zh-en/src/locale/en-US.json new file mode 100644 index 000000000..3565e2ae1 --- /dev/null +++ b/packages/plugin-zh-en/src/locale/en-US.json @@ -0,0 +1,3 @@ +{ + "To Locale": "中/En切换" +} diff --git a/packages/plugin-zh-en/src/locale/index.ts b/packages/plugin-zh-en/src/locale/index.ts new file mode 100644 index 000000000..913dd42f8 --- /dev/null +++ b/packages/plugin-zh-en/src/locale/index.ts @@ -0,0 +1,10 @@ +import { createIntl } from '@ali/lowcode-globals'; +import en_US from './en-US.json'; +import zh_CN from './zh-CN.json'; + +const { intl, getLocale, setLocale } = createIntl({ + 'en-US': en_US, + 'zh-CN': zh_CN, +}); + +export { intl, getLocale, setLocale }; diff --git a/packages/plugin-zh-en/src/locale/zh-CN.json b/packages/plugin-zh-en/src/locale/zh-CN.json new file mode 100644 index 000000000..3565e2ae1 --- /dev/null +++ b/packages/plugin-zh-en/src/locale/zh-CN.json @@ -0,0 +1,3 @@ +{ + "To Locale": "中/En切换" +} diff --git a/packages/plugin-zh-en/tsconfig.json b/packages/plugin-zh-en/tsconfig.json new file mode 100644 index 000000000..c37b76ecc --- /dev/null +++ b/packages/plugin-zh-en/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "lib" + }, + "include": [ + "./src/" + ] +} From fef611bc552e66d7221928ac3dc50e680f2149c5 Mon Sep 17 00:00:00 2001 From: kangwei Date: Mon, 30 Mar 2020 04:20:20 +0800 Subject: [PATCH 2/2] fix:update version --- packages/plugin-outline-pane/package.json | 2 +- packages/plugin-settings-pane/package.json | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/plugin-outline-pane/package.json b/packages/plugin-outline-pane/package.json index eb90dba0b..27bdd96be 100644 --- a/packages/plugin-outline-pane/package.json +++ b/packages/plugin-outline-pane/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-outline-pane", - "version": "0.8.0", + "version": "0.8.1", "description": "Outline pane for Ali lowCode engine", "files": [ "es", diff --git a/packages/plugin-settings-pane/package.json b/packages/plugin-settings-pane/package.json index 5234e27a5..cad115607 100644 --- a/packages/plugin-settings-pane/package.json +++ b/packages/plugin-settings-pane/package.json @@ -1,6 +1,6 @@ { "name": "@ali/lowcode-plugin-settings-pane", - "version": "0.8.0", + "version": "0.8.1", "description": "Settings pane for Ali lowCode engine", "files": [ "es", @@ -17,6 +17,7 @@ "@ali/lowcode-editor-core": "^0.8.0", "@ali/lowcode-designer": "^0.8.0", "@ali/lowcode-globals": "^0.8.0", + "@ali/lowcode-plugin-outline-pane": "^0.8.0", "@alifd/next": "^1.19.16", "classnames": "^2.2.6", "react": "^16"