@@ -21,7 +21,6 @@ export default class LeftArea extends Component<{ area: Area }> {
}
}
-
@observer
class Contents extends Component<{ area: Area }> {
render() {
diff --git a/packages/editor-skeleton/src/layouts/right-area.tsx b/packages/editor-skeleton/src/layouts/right-area.tsx
index 4393eef55f..f00ae1461a 100644
--- a/packages/editor-skeleton/src/layouts/right-area.tsx
+++ b/packages/editor-skeleton/src/layouts/right-area.tsx
@@ -22,14 +22,23 @@ export default class RightArea extends Component<{ area: Area }> {
}
}
-
@observer
class Contents extends Component<{ area: Area }> {
render() {
const { area } = this.props;
+
return (
- {area.container.items.map((item) => item.content)}
+ {
+ area.container.items
+ .slice()
+ .sort((a, b) => {
+ const index1 = a.config?.index || 0;
+ const index2 = b.config?.index || 0;
+ return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1);
+ })
+ .map((item) => item.content)
+ }
);
}
diff --git a/packages/workspace/src/layouts/sub-top-area.tsx b/packages/editor-skeleton/src/layouts/sub-top-area.tsx
similarity index 79%
rename from packages/workspace/src/layouts/sub-top-area.tsx
rename to packages/editor-skeleton/src/layouts/sub-top-area.tsx
index e6bf61871a..cef6aa5b02 100644
--- a/packages/workspace/src/layouts/sub-top-area.tsx
+++ b/packages/editor-skeleton/src/layouts/sub-top-area.tsx
@@ -13,7 +13,7 @@ export default class SubTopArea extends Component<{ area: Area; itemClassName?:
}
return (
-
@@ -50,13 +50,13 @@ class Contents extends Component<{ area: Area; itemClassName?: string }> {
});
let children = [];
if (left && left.length) {
- children.push(
diff --git a/packages/editor-skeleton/src/layouts/theme.less b/packages/editor-skeleton/src/layouts/theme.less
index b0da053db1..716ab3a99e 100644
--- a/packages/editor-skeleton/src/layouts/theme.less
+++ b/packages/editor-skeleton/src/layouts/theme.less
@@ -16,6 +16,8 @@
--color-icon-hover: @normal-alpha-3;
--color-icon-active: @brand-color-1;
--color-icon-reverse: @white-alpha-1;
+ --color-icon-disabled: @normal-alpha-6;
+ --color-icon-pane: @dark-alpha-3;
--color-line-normal: @normal-alpha-7;
--color-line-darken: darken(@normal-alpha-7, 10%);
@@ -26,6 +28,7 @@
--color-text-light: lighten(@dark-alpha-3, 10%);
--color-text-reverse: @white-alpha-2;
--color-text-regular: @normal-alpha-2;
+ --color-text-disabled: @gray-light;
--color-field-label: @dark-alpha-4;
--color-field-text: @dark-alpha-3;
@@ -35,18 +38,20 @@
--color-field-border-active: @normal-alpha-3;
--color-field-background: @white-alpha-1;
- --color-function-success: @brand-success;
- --color-function-success-dark: darken(@brand-success, 10%);
- --color-function-success-light: lighten(@brand-success, 10%);
- --color-function-warning: @brand-warning;
- --color-function-warning-dark: darken(@brand-warning, 10%);
- --color-function-warning-light: lighten(@brand-warning, 10%);
- --color-function-information: @brand-link-hover;
- --color-function-information-dark: darken(@brand-link-hover, 10%);
- --color-function-information-light: lighten(@brand-link-hover, 10%);
- --color-function-error: @brand-danger;
- --color-function-error-dark: darken(@brand-danger, 10%);
- --color-function-error-light: lighten(@brand-danger, 10%);
+ --color-success: @brand-success;
+ --colo-success-dark: darken(@brand-success, 10%);
+ --color-success-light: lighten(@brand-success, 10%);
+ --color-warning: @brand-warning;
+ --color-warning-dark: darken(@brand-warning, 10%);
+ --color-warning-light: lighten(@brand-warning, 10%);
+ --color-information: @brand-link-hover;
+ --color-information-dark: darken(@brand-link-hover, 10%);
+ --color-information-light: lighten(@brand-link-hover, 10%);
+ --color-error: @brand-danger;
+ --color-error-dark: darken(@brand-danger, 10%);
+ --color-error-light: lighten(@brand-danger, 10%);
+ --color-purple: rgb(144, 94, 190);
+ --color-brown: #7b605b;
--color-pane-background: @white-alpha-1;
--color-block-background-normal: @white-alpha-1;
@@ -54,9 +59,32 @@
--color-block-background-shallow: @normal-alpha-8;
--color-block-background-dark: @normal-alpha-7;
--color-block-background-disabled: @normal-alpha-6;
+ --color-block-background-active: @brand-color-1-7;
+ --color-block-background-warning: @brand-warning-alpha-7;
+ --color-block-background-error: @brand-danger-alpha-7;
+ --color-block-background-success: @brand-success-alpha-7;
--color-block-background-deep-dark: @normal-5;
--color-layer-mask-background: @dark-alpha-7;
--color-layer-tooltip-background: rgba(44,47,51,0.8);
+ --color-background: #edeff3;
--pane-title-bg-color: rgba(31,56,88,.04);
}
+
+// @deprecated 变量
+:root {
+ --color-function-success: @brand-success;
+ --color-function-success-dark: darken(@brand-success, 10%);
+ --color-function-success-light: lighten(@brand-success, 10%);
+ --color-function-warning: @brand-warning;
+ --color-function-warning-dark: darken(@brand-warning, 10%);
+ --color-function-warning-light: lighten(@brand-warning, 10%);
+ --color-function-information: @brand-link-hover;
+ --color-function-information-dark: darken(@brand-link-hover, 10%);
+ --color-function-information-light: lighten(@brand-link-hover, 10%);
+ --color-function-error: @brand-danger;
+ --color-function-error-dark: darken(@brand-danger, 10%);
+ --color-function-error-light: lighten(@brand-danger, 10%);
+ --color-function-purple: rgb(144, 94, 190);
+ --color-function-brown: #7b605b;
+}
diff --git a/packages/editor-skeleton/src/layouts/top-area.tsx b/packages/editor-skeleton/src/layouts/top-area.tsx
index 56949cbb7f..f6b84b3e6f 100644
--- a/packages/editor-skeleton/src/layouts/top-area.tsx
+++ b/packages/editor-skeleton/src/layouts/top-area.tsx
@@ -4,14 +4,14 @@ import { observer } from '@alilc/lowcode-editor-core';
import { Area } from '../area';
@observer
-export default class TopArea extends Component<{ area: Area; itemClassName?: string }> {
+export default class TopArea extends Component<{ area: Area; itemClassName?: string; className?: string }> {
render() {
- const { area, itemClassName } = this.props;
+ const { area, itemClassName, className } = this.props;
if (area.isEmpty()) {
return null;
}
return (
-
{left}
);
+ children.push({left}
);
}
if (center && center.length) {
- children.push({center}
);
+ children.push({center}
);
}
if (right && right.length) {
- children.push({right}
);
+ children.push({right}
);
}
return (
diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less
index fccdad4c2d..6d0604a1f1 100644
--- a/packages/editor-skeleton/src/layouts/workbench.less
+++ b/packages/editor-skeleton/src/layouts/workbench.less
@@ -38,7 +38,7 @@ body {
font-family: var(--font-family);
font-size: var(--font-size-text);
color: var(--color-text);
- background-color: #edeff3;
+ background-color: var(--color-background);
}
* {
@@ -49,13 +49,10 @@ body {
width: 100%;
height: 100%;
position: relative;
- background-color: #fff;
- background-color: var(--color-pane-background);
&.hidden {
display: none;
}
.lc-panel-title {
- // background-color: var(--pane-title-bg-color,rgba(31,56,88,.04));
display: flex;
align-items: center;
justify-content: flex-start;
@@ -63,7 +60,7 @@ body {
.lc-help-tip {
margin-left: 4px;
- color: rgba(0, 0, 0, 0.4);
+ color: var(--color-icon-normal, rgba(0, 0, 0, 0.4));
cursor: pointer;
}
}
@@ -71,8 +68,7 @@ body {
height: 48px;
font-size: 16px;
padding: 0 15px;
- // border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
- color: #0f1726;
+ color: var(--color-title, #0f1726);
font-weight: bold;
}
@@ -83,39 +79,6 @@ body {
left: 0;
right: 0;
overflow: visible;
- /*
- .my-tabs {
- width: 100%;
- height: 100%;
- position: relative;
- .tabs-title {
- display: flex;
- height: var(--pane-title-height);
- > .tab-title {
- cursor: pointer;
- padding: 0;
- flex: 1;
- min-width: 0;
- justify-content: center;
- border-bottom: 2px solid transparent;
- &.actived {
- cursor: default;
- color: var(--color-text-avtived);
- border-bottom-color: #3896ee;
- }
- }
- }
- .tabs-content {
- position: absolute;
- top: var(--pane-title-height);
- bottom: 0;
- left: 0;
- right: 0;
- height: calc(100% - var(--pane-title-height));
- overflow: hidden;
- }
- }
- */
}
.lc-outline-tree-container {
border-top: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
@@ -125,9 +88,6 @@ body {
height: 100%;
width: 100%;
position: relative;
- background-color: #fff;
- background-color: var(--color-pane-background);
- // overflow: auto;
&.hidden {
display: none;
}
@@ -137,7 +97,7 @@ body {
height: 100%;
display: flex;
flex-direction: column;
- background-color: #edeff3;
+ background-color: var(--color-background);
position: absolute;
left: 0;
top: 0;
@@ -164,47 +124,62 @@ body {
&.active {
z-index: 999;
- background: #edeff3;
+ background: var(--color-background);
}
}
}
-.lc-workbench {
+.lc-workbench, .lc-workspace-workbench {
height: 100%;
display: flex;
flex-direction: column;
- background-color: #edeff3;
+ background-color: var(--color-background);
&.engine-main {
height: 100%;
display: flex;
flex-direction: column;
- background-color: #edeff3;
+ background-color: var(--color-background);
}
- .lc-top-area {
- height: var(--top-area-height);
- background-color: var(--color-pane-background);
+ .lc-top-area, .lc-workspace-sub-top-area {
width: 100%;
display: none;
margin-bottom: 2px;
padding: 8px 12px 8px 16px;
+ &.lc-top-area {
+ background-color: var(--color-top-area-background, var(--color-pane-background));
+ height: var(--top-area-height);
+ }
+
+ &.lc-workspace-top-area {
+ background-color: var(--color-workspace-top-area-background, var(--color-pane-background));
+ }
+
+ &.lc-workspace-sub-top-area {
+ background-color: var(--color-workspace-sub-top-area-background, var(--color-pane-background));
+ height: var(--workspace-sub-top-area-height, var(--top-area-height));
+ margin: var(--workspace-sub-top-area-margin, 0px 0px 2px 0px);
+ padding: var(--workspace-sub-top-area-padding, 8px 12px 8px 16px);
+ }
+
&.lc-area-visible {
display: flex;
}
- .lc-top-area-left {
+ .lc-top-area-left, .lc-workspace-sub-top-area-left {
display: flex;
align-items: center;
+ max-width: 100%;
}
- .lc-top-area-center {
+ .lc-top-area-center, .lc-workspace-sub-top-area-center {
flex: 1;
display: flex;
justify-content: center;
margin: 0 8px;
}
- .lc-top-area-right {
+ .lc-top-area-right, .lc-workspace-sub-top-area-right {
display: flex;
align-items: center;
> * {
@@ -216,7 +191,7 @@ body {
}
}
}
- .lc-workbench-body {
+ .lc-workbench-body, .lc-workspace-workbench-body {
flex: 1;
display: flex;
min-height: 0;
@@ -230,8 +205,7 @@ body {
display: flex;
justify-content: center;
align-items: center;
- // background: rgba(31,56,88,0.04);
- border-bottom: 1px solid #edeff3;
+ border-bottom: 1px solid var(--color-line-normal, #edeff3);
.lc-tab-title {
flex: 1;
height: 32px;
@@ -242,8 +216,8 @@ body {
cursor: pointer;
font-size: 12px;
&.actived {
- color: #0079f2;
- border-bottom-color: #0079f2;
+ color: var(--color-brand, #0079f2);
+ border-bottom-color: var(--color-brand, #0079f2);
}
}
}
@@ -264,7 +238,7 @@ body {
z-index: 2;
.next-icon {
line-height: 1;
- color: rgba(0, 0, 0, 0.6);
+ color: var(--color-icon-pane);
}
}
@@ -277,7 +251,7 @@ body {
z-index: 2;
svg {
vertical-align: middle;
- color: rgba(0, 0, 0, 0.6);
+ color: var(--color-icon-pane);
}
}
@@ -288,8 +262,8 @@ body {
width: var(--dock-pane-width);
// min-width: var(--dock-fixed-pane-width);
left: calc(var(--left-area-width) + 1px);
- background-color: var(--color-pane-background);
- box-shadow: 4px 6px 6px 0 rgba(31, 50, 88, 0.08);
+ background-color: var(--color-left-float-pane-background, var(--color-pane-background));
+ box-shadow: 4px 6px 6px 0 var(--color-block-background-shallow, rgba(31, 50, 88, 0.08));
z-index: 820;
display: none;
// padding-top: 36px;
@@ -297,15 +271,19 @@ body {
display: block;
}
}
- .lc-left-area {
+ .lc-left-area, .lc-workspace-left-area {
height: 100%;
width: var(--left-area-width);
- background-color: var(--color-pane-background);
display: none;
flex-shrink: 0;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
+ background-color: var(--color-left-area-background, var(--color-pane-background));
+
+ &.lc-workspace-left-area {
+ background-color: var(--color-workspace-left-area-background, var(--color-pane-background));
+ }
&.lc-area-visible {
display: flex;
}
@@ -316,6 +294,8 @@ body {
flex-direction: column;
justify-content: flex-start;
align-items: center;
+ color: var(--color-text);
+
.lc-title {
flex-direction: column;
width: calc(var(--left-area-width) - 2px);
@@ -325,8 +305,11 @@ body {
justify-content: center;
cursor: pointer;
+ &.has-tip {
+ cursor: pointer;
+ }
&.actived {
- color: #0079f2;
+ color: var(--color-brand, #0079f2);
}
&.disabled {
opacity: 0.4;
@@ -366,6 +349,9 @@ body {
.lc-left-area.lc-area-visible ~ .lc-workbench-center {
margin-left: 2px;
}
+ .lc-workspace-left-area.lc-area-visible ~ .lc-workspace-workbench-center {
+ margin-left: 2px;
+ }
.lc-outline-pane {
.lc-outline-tree .tree-node .tree-node-title {
border-bottom: none;
@@ -390,7 +376,7 @@ body {
}
.lc-main-area {
flex: 1;
- background-color: #edeff3;
+ background-color: var(--color-background);
}
.lc-bottom-area {
height: var(--bottom-area-height);
@@ -404,15 +390,17 @@ body {
.lc-right-area {
height: 100%;
width: var(--right-area-width);
- background-color: var(--color-pane-background);
+ background-color: var(--color-right-area-background, var(--color-pane-background));
display: none;
flex-shrink: 0;
margin-left: 2px;
position: relative;
> .lc-panel {
position: absolute;
+ background-color: var(--color-right-area-background, var(--color-pane-background, #fff));
left: 0;
top: 0;
+ z-index: 1;
}
&.lc-area-visible {
display: block;
@@ -437,4 +425,68 @@ body {
}
}
}
+ .engine-actionitem {
+ max-width: 100%;
+ color: var(--color-text);
+ }
+}
+
+.lc-workspace-workbench {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background-color: var(--color-background);
+ .lc-workspace-workbench-body {
+ flex: 1;
+ display: flex;
+ min-height: 0;
+ position: relative;
+
+ .lc-workspace-workbench-center {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ z-index: 10;
+ position: relative;
+ .lc-toolbar {
+ display: flex;
+ height: var(--toolbar-height);
+ background-color: var(--color-pane-background);
+ padding: 8px 16px;
+ .lc-toolbar-center {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex: 1;
+ }
+ }
+ .lc-main-area {
+ flex: 1;
+ }
+ .lc-bottom-area {
+ height: var(--bottom-area-height);
+ background-color: var(--color-pane-background);
+ display: none;
+ &.lc-area-visible {
+ display: block;
+ }
+ }
+ }
+
+ .lc-workspace-workbench-center-content {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ flex-direction: column;
+ display: flex;
+ align-content: stretch;
+ }
+
+ .lc-workspace-workbench-window {
+ position: relative;
+ height: 100%;
+ }
+ }
}
diff --git a/packages/editor-skeleton/src/less-variables.less b/packages/editor-skeleton/src/less-variables.less
index c44fc196e2..017e432ce6 100644
--- a/packages/editor-skeleton/src/less-variables.less
+++ b/packages/editor-skeleton/src/less-variables.less
@@ -99,19 +99,19 @@
@brand-link-hover: #2e76a6;
// F1-1-7 A10
-@brand-danger-alpha-7: rgba(240, 70, 49, 0.9);
+@brand-danger-alpha-7: rgba(240, 70, 49, 0.1);
// F1-1-8 A6
@brand-danger-alpha-8: rgba(240, 70, 49, 0.8);
// F2-1-2 A80
@brand-warning-alpha-2: rgba(250, 189, 14, 0.8);
// F2-1-7 A10
-@brand-warning-alpha-7: rgba(250, 189, 14, 0.9);
+@brand-warning-alpha-7: rgba(250, 189, 14, 0.1);
// F3-1-2 A80
@brand-success-alpha-2: rgba(102, 188, 92, 0.8);
// F3-1-7 A10
-@brand-success-alpha-7: rgba(102, 188, 92, 0.9);
+@brand-success-alpha-7: rgba(102, 188, 92, 0.1);
// F4-1-7 A10
-@brand-link-alpha-7: rgba(102, 188, 92, 0.9);
+@brand-link-alpha-7: rgba(102, 188, 92, 0.1);
// 文本色
@text-primary-color: @dark-alpha-3;
diff --git a/packages/editor-skeleton/src/skeleton.ts b/packages/editor-skeleton/src/skeleton.ts
index 8836434049..89bffc4cfe 100644
--- a/packages/editor-skeleton/src/skeleton.ts
+++ b/packages/editor-skeleton/src/skeleton.ts
@@ -108,7 +108,7 @@ export interface ISkeleton extends Omit): IWidget | Widget | Panel | Stage | Dock | PanelDock | undefined;
}
-export class Skeleton {
+export class Skeleton implements ISkeleton {
private panels = new Map();
private containers = new Map>();
diff --git a/packages/engine/package.json b/packages/engine/package.json
index a9521d486b..59ecb02610 100644
--- a/packages/engine/package.json
+++ b/packages/engine/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-engine",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系",
"main": "lib/engine-core.js",
"module": "es/engine-core.js",
@@ -19,15 +19,15 @@
"license": "MIT",
"dependencies": {
"@alifd/next": "^1.19.12",
- "@alilc/lowcode-designer": "1.1.10",
- "@alilc/lowcode-editor-core": "1.1.10",
- "@alilc/lowcode-editor-skeleton": "1.1.10",
+ "@alilc/lowcode-designer": "1.2.0",
+ "@alilc/lowcode-editor-core": "1.2.0",
+ "@alilc/lowcode-editor-skeleton": "1.2.0",
"@alilc/lowcode-engine-ext": "^1.0.0",
- "@alilc/lowcode-plugin-designer": "1.1.10",
- "@alilc/lowcode-plugin-outline-pane": "1.1.10",
- "@alilc/lowcode-shell": "1.1.10",
- "@alilc/lowcode-utils": "1.1.10",
- "@alilc/lowcode-workspace": "1.1.10",
+ "@alilc/lowcode-plugin-designer": "1.2.0",
+ "@alilc/lowcode-plugin-outline-pane": "1.2.0",
+ "@alilc/lowcode-shell": "1.2.0",
+ "@alilc/lowcode-utils": "1.2.0",
+ "@alilc/lowcode-workspace": "1.2.0",
"react": "^16.8.1",
"react-dom": "^16.8.1"
},
diff --git a/packages/engine/src/inner-plugins/builtin-hotkey.ts b/packages/engine/src/inner-plugins/builtin-hotkey.ts
index 692773a756..1a1f3a9c44 100644
--- a/packages/engine/src/inner-plugins/builtin-hotkey.ts
+++ b/packages/engine/src/inner-plugins/builtin-hotkey.ts
@@ -277,6 +277,10 @@ export const builtinHotkey = (ctx: IPublicModelPluginContext) => {
if (isFormEvent(e) || !doc) {
return;
}
+ const anchorValue = document.getSelection()?.anchorNode?.nodeValue;
+ if (anchorValue && typeof anchorValue === 'string') {
+ return;
+ }
e.preventDefault();
let selected = doc.selection.getTopNodes(true);
diff --git a/packages/engine/src/inner-plugins/default-panel-registry.tsx b/packages/engine/src/inner-plugins/default-panel-registry.tsx
index d7549d764b..b5f538d44c 100644
--- a/packages/engine/src/inner-plugins/default-panel-registry.tsx
+++ b/packages/engine/src/inner-plugins/default-panel-registry.tsx
@@ -28,6 +28,9 @@ export const defaultPanelRegistry = (editor: any) => {
props: {
ignoreRoot: true,
},
+ panelProps: {
+ ...(config.get('defaultSettingPanelProps') || {}),
+ },
});
}
},
@@ -39,5 +42,4 @@ export const defaultPanelRegistry = (editor: any) => {
return fun;
};
-
export default defaultPanelRegistry;
diff --git a/packages/engine/src/modules/symbols.ts b/packages/engine/src/modules/symbols.ts
index a0371abf98..55c70e5dcb 100644
--- a/packages/engine/src/modules/symbols.ts
+++ b/packages/engine/src/modules/symbols.ts
@@ -12,6 +12,9 @@ import {
propSymbol,
simulatorHostSymbol,
skeletonItemSymbol,
+ editorCabinSymbol,
+ skeletonCabinSymbol,
+ simulatorRenderSymbol,
} from '@alilc/lowcode-shell';
export default {
@@ -25,7 +28,10 @@ export default {
settingPropEntrySymbol: settingFieldSymbol,
settingTopEntrySymbol,
designerCabinSymbol,
+ editorCabinSymbol,
+ skeletonCabinSymbol,
propSymbol,
simulatorHostSymbol,
skeletonItemSymbol,
+ simulatorRenderSymbol,
};
diff --git a/packages/ignitor/package.json b/packages/ignitor/package.json
index 116f98e5d5..f524eba845 100644
--- a/packages/ignitor/package.json
+++ b/packages/ignitor/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-ignitor",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "点火器，bootstrap lce project",
"main": "lib/index.js",
"private": true,
diff --git a/packages/plugin-designer/package.json b/packages/plugin-designer/package.json
index 760d57a133..65c931ef37 100644
--- a/packages/plugin-designer/package.json
+++ b/packages/plugin-designer/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-plugin-designer",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "alibaba lowcode editor designer plugin",
"files": [
"es",
@@ -18,9 +18,9 @@
],
"author": "xiayang.xy",
"dependencies": {
- "@alilc/lowcode-designer": "1.1.10",
- "@alilc/lowcode-editor-core": "1.1.10",
- "@alilc/lowcode-utils": "1.1.10",
+ "@alilc/lowcode-designer": "1.2.0",
+ "@alilc/lowcode-editor-core": "1.2.0",
+ "@alilc/lowcode-utils": "1.2.0",
"react": "^16.8.1",
"react-dom": "^16.8.1"
},
diff --git a/packages/plugin-outline-pane/package.json b/packages/plugin-outline-pane/package.json
index 4a71eb26b8..e933128018 100644
--- a/packages/plugin-outline-pane/package.json
+++ b/packages/plugin-outline-pane/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-plugin-outline-pane",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "Outline pane for Ali lowCode engine",
"files": [
"es",
@@ -13,8 +13,8 @@
},
"dependencies": {
"@alifd/next": "^1.19.16",
- "@alilc/lowcode-types": "1.1.10",
- "@alilc/lowcode-utils": "1.1.10",
+ "@alilc/lowcode-types": "1.2.0",
+ "@alilc/lowcode-utils": "1.2.0",
"classnames": "^2.2.6",
"react": "^16",
"react-dom": "^16.7.0",
diff --git a/packages/plugin-outline-pane/src/index.tsx b/packages/plugin-outline-pane/src/index.tsx
index addebbb402..822c503f27 100644
--- a/packages/plugin-outline-pane/src/index.tsx
+++ b/packages/plugin-outline-pane/src/index.tsx
@@ -92,6 +92,7 @@ export const OutlinePlugin = (ctx: IPublicModelPluginContext, options: any) => {
paneName: BackupPaneName,
treeMaster,
},
+ index: 1,
});
// 处理 master pane 和 backup pane 切换
diff --git a/packages/plugin-outline-pane/src/locale/en-US.json b/packages/plugin-outline-pane/src/locale/en-US.json
index 9ade9e66f4..b86a7859bb 100644
--- a/packages/plugin-outline-pane/src/locale/en-US.json
+++ b/packages/plugin-outline-pane/src/locale/en-US.json
@@ -10,7 +10,7 @@
"Loop": "Loop",
"Slots": "Slots",
"Slot for {prop}": "Slot for {prop}",
- "Outline Tree": "Outline Tree",
+ "Outline Tree": "Component Tree",
"Filter Node": "Filter Node",
"Check All": "Check All",
"Conditional rendering": "Conditional rendering",
diff --git a/packages/plugin-outline-pane/src/views/style.less b/packages/plugin-outline-pane/src/views/style.less
index 254b639d62..15f115ea6b 100644
--- a/packages/plugin-outline-pane/src/views/style.less
+++ b/packages/plugin-outline-pane/src/views/style.less
@@ -3,7 +3,6 @@
width: 100%;
position: relative;
z-index: 200;
- background-color: white;
> .lc-outline-tree-container {
top: 52px;
@@ -29,8 +28,8 @@
}
.lc-outline-filter-icon {
- background: #ebecf0;
- border: 1px solid #c4c6cf;
+ background: var(--color-block-background-shallow, #ebecf0);
+ border: 1px solid var(--color-field-border, #c4c6cf);
display: flex;
align-items: center;
border-radius: 0 2px 2px 0;
@@ -55,17 +54,17 @@
.tree-node-modal {
margin: 5px;
- border: 1px solid rgba(31, 56, 88, 0.2);
+ border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.2));
border-radius: 3px;
- box-shadow: 0 1px 4px 0 rgba(31, 56, 88, 0.15);
+ box-shadow: 0 1px 4px 0 var(--color-block-background-shallow, rgba(31, 56, 88, 0.15));
.tree-node-modal-title {
position: relative;
- background: rgba(31, 56, 88, 0.04);
+ background: var(--color-block-background-light, rgba(31, 56, 88, 0.04));
padding: 0 10px;
height: 32px;
line-height: 32px;
- border-bottom: 1px solid rgba(31, 56, 88, 0.2);
+ border-bottom: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.2));
.tree-node-modal-title-visible-icon {
position: absolute;
@@ -90,7 +89,7 @@
left: 6px;
}
.tree-node-modal-radio-active {
- color: #006cff;
+ color: var(--color-brand, #006cff);
}
}
@@ -109,7 +108,7 @@
&:hover {
.tree-node-branches::before {
- border-left-color: #ddd;
+ border-left-color: var(--color-line-darken, #ddd);
}
}
@@ -121,20 +120,20 @@
transform: translateZ(0);
transition: all 0.2s ease-in-out;
&.invalid {
- border-color: red;
- background-color: rgba(240, 154, 154, 0.719);
+ border-color: var(--color-error, var(--color-function-error, red));
+ background-color: var(--color-block-background-error, rgba(240, 154, 154, 0.719));
}
}
.condition-group-container {
- border-bottom: 1px solid #7b605b;
+ border-bottom: 1px solid var(--color-brown, var(--color-function-brown, #7b605b));
position: relative;
&:before {
position: absolute;
display: block;
width: 0;
- border-left: 0.5px solid #7b605b;
+ border-left: 0.5px solid var(--color-brown, var(--color-function-brown, #7b605b));
height: 100%;
top: 0;
left: 0;
@@ -143,26 +142,26 @@
}
> .condition-group-title {
text-align: center;
- background-color: #7b605b;
+ background-color: var(--color-brown, var(--color-function-brown, #7b605b));
height: 14px;
> .lc-title {
font-size: 12px;
transform: scale(0.8);
transform-origin: top;
- color: white;
- text-shadow: 0 0 2px black;
+ color: var(--color-text-reverse, white);
+ text-shadow: 0 0 2px var(--color-block-background-shallow, black);
display: block;
}
}
}
.tree-node-slots {
- border-bottom: 1px solid rgb(144, 94, 190);
+ border-bottom: 1px solid var(--color-purple, var(--color-function-purple, rgb(144, 94, 190)));
position: relative;
&::before {
position: absolute;
display: block;
width: 0;
- border-left: 0.5px solid rgb(144, 94, 190);
+ border-left: 0.5px solid var(--color-purple, var(--color-function-purple, rgb(144, 94, 190)));
height: 100%;
top: 0;
left: 0;
@@ -171,25 +170,25 @@
}
> .tree-node-slots-title {
text-align: center;
- background-color: rgb(144, 94, 190);
+ background-color: var(--color-purple, var(--color-function-purple, rgb(144, 94, 190)));
height: 14px;
> .lc-title {
font-size: 12px;
transform: scale(0.8);
transform-origin: top;
- color: white;
+ color: var(--color-text-reverse, white);
text-shadow: 0 0 2px black;
display: block;
}
}
&.insertion-at-slots {
padding-bottom: @treeNodeHeight;
- border-bottom-color: rgb(182, 55, 55);
+ border-bottom-color: var(--color-error-dark, var(--color-function-error-dark, rgb(182, 55, 55)));
> .tree-node-slots-title {
- background-color: rgb(182, 55, 55);
+ background-color: var(--color-error-dark, var(--color-function-error-dark, rgb(182, 55, 55)));
}
&::before {
- border-left-color: rgb(182, 55, 55);
+ border-left-color: var(--color-error-dark, var(--color-function-error-dark, rgb(182, 55, 55)));
}
}
}
@@ -245,7 +244,6 @@
.tree-node-title {
font-size: var(--font-size-text);
cursor: pointer;
- background: var(--color-pane-background);
border-bottom: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
display: flex;
align-items: center;
@@ -328,13 +326,13 @@
align-items: center;
line-height: 0;
&.cond {
- color: rgb(179, 52, 6);
+ color: var(--color-error, var(--color-function-error, rgb(179, 52, 6)));
}
&.loop {
- color: rgb(103, 187, 187);
+ color: var(--color-success, var(--color-function-success, rgb(103, 187, 187)));
}
&.slot {
- color: rgb(211, 90, 211);
+ color: var(--color-purple, var(--color-function-purple, rgb(211, 90, 211)));
}
}
}
@@ -368,7 +366,7 @@
&.hidden {
.tree-node-title-label {
- color: #9b9b9b;
+ color: var(--color-text-disabled, #9b9b9b);
}
& > .tree-node-title > .tree-node-hide-btn {
opacity: 0.8;
diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx
index 02ac94ae69..c8c0e75b09 100644
--- a/packages/plugin-outline-pane/src/views/tree-title.tsx
+++ b/packages/plugin-outline-pane/src/views/tree-title.tsx
@@ -83,6 +83,7 @@ export default class TreeTitle extends PureComponent<{
editing: false,
title: treeNode.titleLabel,
condition: treeNode.condition,
+ visible: !treeNode.hidden,
});
treeNode.onTitleLabelChanged(() => {
this.setState({
diff --git a/packages/rax-renderer/package.json b/packages/rax-renderer/package.json
index 90a9b7e08e..7d55b5ae6c 100644
--- a/packages/rax-renderer/package.json
+++ b/packages/rax-renderer/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-rax-renderer",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "Rax renderer for Ali lowCode engine",
"main": "lib/index.js",
"module": "es/index.js",
@@ -30,8 +30,8 @@
"build": "build-scripts build"
},
"dependencies": {
- "@alilc/lowcode-renderer-core": "1.1.10",
- "@alilc/lowcode-utils": "1.1.10",
+ "@alilc/lowcode-renderer-core": "1.2.0",
+ "@alilc/lowcode-utils": "1.2.0",
"rax-find-dom-node": "^1.0.1"
},
"devDependencies": {
diff --git a/packages/rax-simulator-renderer/package.json b/packages/rax-simulator-renderer/package.json
index 8ff7f1f0a4..69a029578c 100644
--- a/packages/rax-simulator-renderer/package.json
+++ b/packages/rax-simulator-renderer/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-rax-simulator-renderer",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "rax simulator renderer for alibaba lowcode designer",
"main": "lib/index.js",
"module": "es/index.js",
@@ -13,10 +13,10 @@
"build:umd": "build-scripts build --config build.umd.json"
},
"dependencies": {
- "@alilc/lowcode-designer": "1.1.10",
- "@alilc/lowcode-rax-renderer": "1.1.10",
- "@alilc/lowcode-types": "1.1.10",
- "@alilc/lowcode-utils": "1.1.10",
+ "@alilc/lowcode-designer": "1.2.0",
+ "@alilc/lowcode-rax-renderer": "1.2.0",
+ "@alilc/lowcode-types": "1.2.0",
+ "@alilc/lowcode-utils": "1.2.0",
"classnames": "^2.2.6",
"driver-universal": "^3.1.3",
"history": "^5.0.0",
diff --git a/packages/react-renderer/package.json b/packages/react-renderer/package.json
index 1535cb2088..f1d8b5ea54 100644
--- a/packages/react-renderer/package.json
+++ b/packages/react-renderer/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-react-renderer",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "react renderer for ali lowcode engine",
"main": "lib/index.js",
"module": "es/index.js",
@@ -22,7 +22,7 @@
],
"dependencies": {
"@alifd/next": "^1.21.16",
- "@alilc/lowcode-renderer-core": "1.1.10"
+ "@alilc/lowcode-renderer-core": "1.2.0"
},
"devDependencies": {
"@alib/build-scripts": "^0.1.18",
diff --git a/packages/react-simulator-renderer/package.json b/packages/react-simulator-renderer/package.json
index ffb8228dfd..a265c3e88f 100644
--- a/packages/react-simulator-renderer/package.json
+++ b/packages/react-simulator-renderer/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-react-simulator-renderer",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "react simulator renderer for alibaba lowcode designer",
"main": "lib/index.js",
"module": "es/index.js",
@@ -17,10 +17,10 @@
"test:cov": "build-scripts test --config build.test.json --jest-coverage"
},
"dependencies": {
- "@alilc/lowcode-designer": "1.1.10",
- "@alilc/lowcode-react-renderer": "1.1.10",
- "@alilc/lowcode-types": "1.1.10",
- "@alilc/lowcode-utils": "1.1.10",
+ "@alilc/lowcode-designer": "1.2.0",
+ "@alilc/lowcode-react-renderer": "1.2.0",
+ "@alilc/lowcode-types": "1.2.0",
+ "@alilc/lowcode-utils": "1.2.0",
"classnames": "^2.2.6",
"mobx": "^6.3.0",
"mobx-react": "^7.2.0",
diff --git a/packages/react-simulator-renderer/src/locale/index.ts b/packages/react-simulator-renderer/src/locale/index.ts
index e4b39a347c..5f4ef01505 100644
--- a/packages/react-simulator-renderer/src/locale/index.ts
+++ b/packages/react-simulator-renderer/src/locale/index.ts
@@ -9,10 +9,10 @@ const instance: Record> = {
export function createIntl(locale: string = 'zh-CN') {
const intl = (id: string) => {
- return instance[locale][id];
+ return instance[locale]?.[id] || id;
};
- const intlNode = (id: string) => createElement('span', instance[locale][id]);
+ const intlNode = (id: string) => createElement('span', instance[locale]?.[id] || id);
return {
intl,
diff --git a/packages/react-simulator-renderer/test/src/renderer/__snapshots__/demo.test.tsx.snap b/packages/react-simulator-renderer/test/src/renderer/__snapshots__/demo.test.tsx.snap
index 0ebb606dac..2f2d19f269 100644
--- a/packages/react-simulator-renderer/test/src/renderer/__snapshots__/demo.test.tsx.snap
+++ b/packages/react-simulator-renderer/test/src/renderer/__snapshots__/demo.test.tsx.snap
@@ -31,6 +31,7 @@ exports[`Base should be render Text 1`] = `
behavior="NORMAL"
componentId="node_ockvuu8u916"
fieldId="text_kvuu9gl2"
+ forwardRef={[Function]}
maxLine={0}
showTitle={false}
>
diff --git a/packages/renderer-core/package.json b/packages/renderer-core/package.json
index 52b13b86c6..ecfd233809 100644
--- a/packages/renderer-core/package.json
+++ b/packages/renderer-core/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-renderer-core",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "renderer core",
"license": "MIT",
"main": "lib/index.js",
@@ -16,8 +16,8 @@
},
"dependencies": {
"@alilc/lowcode-datasource-engine": "^1.0.0",
- "@alilc/lowcode-types": "1.1.10",
- "@alilc/lowcode-utils": "1.1.10",
+ "@alilc/lowcode-types": "1.2.0",
+ "@alilc/lowcode-utils": "1.2.0",
"classnames": "^2.2.6",
"debug": "^4.1.1",
"fetch-jsonp": "^1.1.3",
@@ -32,7 +32,7 @@
"devDependencies": {
"@alib/build-scripts": "^0.1.18",
"@alifd/next": "^1.26.0",
- "@alilc/lowcode-designer": "1.1.10",
+ "@alilc/lowcode-designer": "1.2.0",
"@babel/plugin-transform-typescript": "^7.16.8",
"@testing-library/react": "^11.2.2",
"@types/classnames": "^2.2.11",
diff --git a/packages/renderer-core/src/hoc/index.tsx b/packages/renderer-core/src/hoc/index.tsx
index a9314060f3..3e7f5ec6a1 100644
--- a/packages/renderer-core/src/hoc/index.tsx
+++ b/packages/renderer-core/src/hoc/index.tsx
@@ -1,20 +1,88 @@
import { cloneEnumerableProperty } from '@alilc/lowcode-utils';
import adapter from '../adapter';
+import { IBaseRendererInstance, IRendererProps } from '../types';
-export function compWrapper(Comp: any) {
+interface Options {
+ baseRenderer: IBaseRendererInstance;
+ schema: any;
+}
+
+function patchDidCatch(Comp: any, { baseRenderer }: Options) {
+ if (Comp.patchedCatch) {
+ return;
+ }
+ Comp.patchedCatch = true;
+ const { PureComponent } = adapter.getRuntime();
+ // Rax 的 getDerivedStateFromError 有 BUG，这里先用 componentDidCatch 来替代
+ // @see https://github.com/alibaba/rax/issues/2211
+ const originalDidCatch = Comp.prototype.componentDidCatch;
+ Comp.prototype.componentDidCatch = function didCatch(this: any, error: Error, errorInfo: any) {
+ this.setState({ engineRenderError: true, error });
+ if (originalDidCatch && typeof originalDidCatch === 'function') {
+ originalDidCatch.call(this, error, errorInfo);
+ }
+ };
+
+ const { engine } = baseRenderer.context;
+ const originRender = Comp.prototype.render;
+ Comp.prototype.render = function () {
+ if (this.state && this.state.engineRenderError) {
+ this.state.engineRenderError = false;
+ return engine.createElement(engine.getFaultComponent(), {
+ ...this.props,
+ error: this.state.error,
+ componentName: this.props._componentName,
+ });
+ }
+ return originRender.call(this);
+ };
+ if (!(Comp.prototype instanceof PureComponent)) {
+ const originShouldComponentUpdate = Comp.prototype.shouldComponentUpdate;
+ Comp.prototype.shouldComponentUpdate = function (nextProps: IRendererProps, nextState: any) {
+ if (nextState && nextState.engineRenderError) {
+ return true;
+ }
+ return originShouldComponentUpdate
+ ? originShouldComponentUpdate.call(this, nextProps, nextState)
+ : true;
+ };
+ }
+}
+
+const cache = new Map();
+
+export function compWrapper(Comp: any, options: Options) {
const { createElement, Component, forwardRef } = adapter.getRuntime();
- class Wrapper extends Component {
- // constructor(props: any, context: any) {
- // super(props, context);
- // }
+ if (
+ Comp?.prototype?.isReactComponent || // react
+ Comp?.prototype?.setState || // rax
+ Comp?.prototype instanceof Component
+ ) {
+ patchDidCatch(Comp, options);
+ return Comp;
+ }
+
+ if (cache.has(options.schema.id)) {
+ return cache.get(options.schema.id);
+ }
+ class Wrapper extends Component {
render() {
- return createElement(Comp, this.props);
+ return createElement(Comp, { ...this.props, ref: this.props.forwardRef });
}
}
(Wrapper as any).displayName = Comp.displayName;
- return cloneEnumerableProperty(forwardRef((props: any, ref: any) => {
- return createElement(Wrapper, { ...props, forwardRef: ref });
- }), Comp);
+ patchDidCatch(Wrapper, options);
+
+ const WrapperComponent = cloneEnumerableProperty(
+ forwardRef((props: any, ref: any) => {
+ return createElement(Wrapper, { ...props, forwardRef: ref });
+ }),
+ Comp,
+ );
+
+ cache.set(options.schema.id, WrapperComponent);
+
+ return WrapperComponent;
}
diff --git a/packages/renderer-core/src/renderer/base.tsx b/packages/renderer-core/src/renderer/base.tsx
index 99a9a40cfa..7b9562fcc6 100644
--- a/packages/renderer-core/src/renderer/base.tsx
+++ b/packages/renderer-core/src/renderer/base.tsx
@@ -23,7 +23,6 @@ import {
transformStringToFunction,
checkPropTypes,
getI18n,
- canAcceptsRef,
getFileCssName,
capitalizeFirstLetter,
DataHelper,
@@ -131,7 +130,6 @@ export default function baseRendererFactory(): IBaseRenderComponent {
static contextType = AppContext;
- appHelper?: IRendererAppHelper;
i18n: any;
getLocale: any;
setLocale: any;
@@ -174,7 +172,6 @@ export default function baseRendererFactory(): IBaseRenderComponent {
__beforeInit(_props: IBaseRendererProps) { }
__init(props: IBaseRendererProps) {
- this.appHelper = props.__appHelper;
this.__compScopes = {};
this.__instanceMap = {};
this.__bindCustomMethods(props);
@@ -455,7 +452,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
* @param idx 为循环渲染的循环Index
*/
__createVirtualDom = (originalSchema: IPublicTypeNodeData | IPublicTypeNodeData[] | undefined, originalScope: any, parentInfo: INodeInfo, idx: string | number = ''): any => {
- if (!originalSchema) {
+ if (originalSchema === null || originalSchema === undefined) {
return null;
}
let scope = originalScope;
@@ -547,6 +544,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
if (schema.loop != null) {
const loop = this.__parseData(schema.loop, scope);
+ if (Array.isArray(loop) && loop.length === 0) return null;
const useLoop = isUseLoop(loop, this.__designModeIsDesign);
if (useLoop) {
return this.__createLoopVirtualDom(
@@ -617,11 +615,8 @@ export default function baseRendererFactory(): IBaseRenderComponent {
});
});
- // 对于不可以接收到 ref 的组件需要做特殊处理
- if (!canAcceptsRef(Comp)) {
- Comp = compWrapper(Comp);
- components[schema.componentName] = Comp;
- }
+ Comp = compWrapper(Comp, { baseRenderer: this, schema });
+ components[schema.componentName] = Comp;
otherProps.ref = (ref: any) => {
this.$(props.fieldId || props.ref, ref); // 收集ref
@@ -651,7 +646,7 @@ export default function baseRendererFactory(): IBaseRenderComponent {
props.key = props.__id;
}
- let child = this.__getSchemaChildrenVirtualDom(schema, scope, Comp);
+ let child = this.__getSchemaChildrenVirtualDom(schema, scope, Comp, condition);
const renderComp = (innerProps: any) => engine.createElement(Comp, innerProps, child);
// 设计模式下的特殊处理
if (engine && [DESIGN_MODE.EXTEND, DESIGN_MODE.BORDER].includes(engine.props.designMode)) {
@@ -711,8 +706,8 @@ export default function baseRendererFactory(): IBaseRenderComponent {
return [];
}
- __getSchemaChildrenVirtualDom = (schema: IPublicTypeNodeSchema | undefined, scope: any, Comp: any) => {
- let children = getSchemaChildren(schema);
+ __getSchemaChildrenVirtualDom = (schema: IPublicTypeNodeSchema | undefined, scope: any, Comp: any, condition = true) => {
+ let children = condition ? getSchemaChildren(schema) : null;
// @todo 补完这里的 Element 定义 @承虎
let result: any = [];
@@ -1019,6 +1014,10 @@ export default function baseRendererFactory(): IBaseRenderComponent {
return !isSchema(schema) || !componentNames.includes(schema?.componentName ?? '');
};
+ get appHelper(): IRendererAppHelper {
+ return this.props.__appHelper;
+ }
+
get requestHandlersMap() {
return this.appHelper?.requestHandlersMap;
}
diff --git a/packages/renderer-core/src/renderer/renderer.tsx b/packages/renderer-core/src/renderer/renderer.tsx
index 09559b6f89..300b1cd164 100644
--- a/packages/renderer-core/src/renderer/renderer.tsx
+++ b/packages/renderer-core/src/renderer/renderer.tsx
@@ -105,55 +105,7 @@ export default function rendererFactory(): IRenderComponent {
return SetComponent;
}
- patchDidCatch(SetComponent: any) {
- if (!this.isValidComponent(SetComponent)) {
- return;
- }
- if (SetComponent.patchedCatch) {
- return;
- }
- if (!SetComponent.prototype) {
- return;
- }
- SetComponent.patchedCatch = true;
-
- // Rax 的 getDerivedStateFromError 有 BUG，这里先用 componentDidCatch 来替代
- // @see https://github.com/alibaba/rax/issues/2211
- const originalDidCatch = SetComponent.prototype.componentDidCatch;
- SetComponent.prototype.componentDidCatch = function didCatch(this: any, error: Error, errorInfo: any) {
- this.setState({ engineRenderError: true, error });
- if (originalDidCatch && typeof originalDidCatch === 'function') {
- originalDidCatch.call(this, error, errorInfo);
- }
- };
-
- const engine = this;
- const originRender = SetComponent.prototype.render;
- SetComponent.prototype.render = function () {
- if (this.state && this.state.engineRenderError) {
- this.state.engineRenderError = false;
- return engine.createElement(engine.getFaultComponent(), {
- ...this.props,
- error: this.state.error,
- componentName: this.props._componentName
- });
- }
- return originRender.call(this);
- };
- if(!(SetComponent.prototype instanceof PureComponent)) {
- const originShouldComponentUpdate = SetComponent.prototype.shouldComponentUpdate;
- SetComponent.prototype.shouldComponentUpdate = function (nextProps: IRendererProps, nextState: any) {
- if (nextState && nextState.engineRenderError) {
- return true;
- }
- return originShouldComponentUpdate ? originShouldComponentUpdate.call(this, nextProps, nextState) : true;
- };
- }
- }
-
createElement(SetComponent: any, props: any, children?: any) {
- // TODO: enable in runtime mode?
- this.patchDidCatch(SetComponent);
return (this.props.customCreateElement || createElement)(SetComponent, props, children);
}
diff --git a/packages/renderer-core/src/types/index.ts b/packages/renderer-core/src/types/index.ts
index a49fe89920..afbec272ab 100644
--- a/packages/renderer-core/src/types/index.ts
+++ b/packages/renderer-core/src/types/index.ts
@@ -335,7 +335,6 @@ export interface IRenderComponent {
componentDidCatch(e: any): Promise | void;
shouldComponentUpdate(nextProps: IRendererProps): boolean;
isValidComponent(SetComponent: any): any;
- patchDidCatch(SetComponent: any): void;
createElement(SetComponent: any, props: any, children?: any): any;
getNotFoundComponent(): any;
getFaultComponent(): any;
diff --git a/packages/shell/package.json b/packages/shell/package.json
index 09768a06a7..884915877c 100644
--- a/packages/shell/package.json
+++ b/packages/shell/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-shell",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "Shell Layer for AliLowCodeEngine",
"main": "lib/index.js",
"module": "es/index.js",
@@ -13,12 +13,12 @@
},
"license": "MIT",
"dependencies": {
- "@alilc/lowcode-designer": "1.1.10",
- "@alilc/lowcode-editor-core": "1.1.10",
- "@alilc/lowcode-editor-skeleton": "1.1.10",
- "@alilc/lowcode-types": "1.1.10",
- "@alilc/lowcode-utils": "1.1.10",
- "@alilc/lowcode-workspace": "1.1.10",
+ "@alilc/lowcode-designer": "1.2.0",
+ "@alilc/lowcode-editor-core": "1.2.0",
+ "@alilc/lowcode-editor-skeleton": "1.2.0",
+ "@alilc/lowcode-types": "1.2.0",
+ "@alilc/lowcode-utils": "1.2.0",
+ "@alilc/lowcode-workspace": "1.2.0",
"classnames": "^2.2.6",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
diff --git a/packages/shell/src/api/common.tsx b/packages/shell/src/api/common.tsx
index 9f38cf1091..a2e4d8c4fa 100644
--- a/packages/shell/src/api/common.tsx
+++ b/packages/shell/src/api/common.tsx
@@ -1,4 +1,4 @@
-import { editorSymbol, skeletonSymbol, designerCabinSymbol, designerSymbol, settingFieldSymbol } from '../symbols';
+import { editorSymbol, skeletonSymbol, designerCabinSymbol, designerSymbol, settingFieldSymbol, editorCabinSymbol, skeletonCabinSymbol } from '../symbols';
import {
isFormEvent as innerIsFormEvent,
compatibleLegaoSchema as innerCompatibleLegaoSchema,
@@ -36,6 +36,11 @@ import {
getConvertedExtraKey as innerGetConvertedExtraKey,
getOriginalExtraKey as innerGetOriginalExtraKey,
IDesigner,
+ DropLocation as InnerDropLocation,
+ Designer as InnerDesigner,
+ Node as InnerNode,
+ LowCodePluginManager as InnerLowCodePluginManager,
+ DesignerView as InnerDesignerView,
} from '@alilc/lowcode-designer';
import {
Skeleton as InnerSkeleton,
@@ -43,6 +48,8 @@ import {
PopupContext as InnerPopupContext,
PopupPipe as InnerPopupPipe,
Workbench as InnerWorkbench,
+ SettingsPrimaryPane as InnerSettingsPrimaryPane,
+ registerDefaults as InnerRegisterDefaults,
} from '@alilc/lowcode-editor-skeleton';
import {
Editor,
@@ -61,6 +68,7 @@ import {
action as innerAction,
runInAction as innerRunInAction,
engineConfig as innerEngineConfig,
+ globalContext,
} from '@alilc/lowcode-editor-core';
import { Dragon as ShellDragon } from '../model';
import { ReactNode } from 'react';
@@ -94,6 +102,11 @@ class DesignerCabin implements IPublicApiCommonDesignerCabin {
DragObjectType: InnerDragObjectType,
isDragNodeDataObject: innerIsDragNodeDataObject,
isNode: innerIsNode,
+ DropLocation: InnerDropLocation,
+ Designer: InnerDesigner,
+ Node: InnerNode,
+ LowCodePluginManager: InnerLowCodePluginManager,
+ DesignerView: InnerDesignerView,
};
}
@@ -160,8 +173,19 @@ class DesignerCabin implements IPublicApiCommonDesignerCabin {
class SkeletonCabin implements IPublicApiCommonSkeletonCabin {
private readonly [skeletonSymbol]: InnerSkeleton;
+ readonly [skeletonCabinSymbol]: any;
+
constructor(skeleton: InnerSkeleton) {
this[skeletonSymbol] = skeleton;
+ this[skeletonCabinSymbol] = {
+ Workbench: InnerWorkbench,
+ createSettingFieldView: this.createSettingFieldView,
+ PopupContext: InnerPopupContext,
+ PopupPipe: InnerPopupPipe,
+ SettingsPrimaryPane: InnerSettingsPrimaryPane,
+ registerDefaults: InnerRegisterDefaults,
+ Skeleton: InnerSkeleton,
+ };
}
get Workbench(): any {
@@ -242,8 +266,33 @@ class Utils implements IPublicApiCommonUtils {
class EditorCabin implements IPublicApiCommonEditorCabin {
private readonly [editorSymbol]: Editor;
+ /**
+ * @deprecated
+ */
+ readonly [editorCabinSymbol]: any;
+
constructor(editor: Editor) {
this[editorSymbol] = editor;
+ this[editorCabinSymbol] = {
+ Editor,
+ globalContext,
+ runInAction: innerRunInAction,
+ Title: InnerTitle,
+ Tip: InnerTip,
+ shallowIntl: innerShallowIntl,
+ createIntl: innerCreateIntl,
+ intl: innerIntl,
+ createSetterContent: this.createSetterContent.bind(this),
+ globalLocale: innerGlobalLocale,
+ obx: innerObx,
+ action: innerAction,
+ engineConfig: innerEngineConfig,
+ observable: innerObservable,
+ makeObservable: innerMakeObservable,
+ untracked: innerUntracked,
+ computed: innerComputed,
+ observer: innerObserver,
+ };
}
/**
diff --git a/packages/shell/src/api/simulator-host.ts b/packages/shell/src/api/simulator-host.ts
index 3ed7448905..663ba0c668 100644
--- a/packages/shell/src/api/simulator-host.ts
+++ b/packages/shell/src/api/simulator-host.ts
@@ -2,7 +2,8 @@ import {
BuiltinSimulatorHost,
} from '@alilc/lowcode-designer';
import { simulatorHostSymbol, nodeSymbol } from '../symbols';
-import { IPublicApiSimulatorHost, IPublicModelNode } from '@alilc/lowcode-types';
+import { IPublicApiSimulatorHost, IPublicModelNode, IPublicModelSimulatorRender } from '@alilc/lowcode-types';
+import { SimulatorRender } from '../model/simulator-render';
export class SimulatorHost implements IPublicApiSimulatorHost {
private readonly [simulatorHostSymbol]: BuiltinSimulatorHost;
@@ -30,8 +31,12 @@ export class SimulatorHost implements IPublicApiSimulatorHost {
return this[simulatorHostSymbol].contentDocument;
}
- get renderer(): any {
- return this[simulatorHostSymbol].renderer;
+ get renderer(): IPublicModelSimulatorRender | undefined {
+ if (this[simulatorHostSymbol].renderer) {
+ return SimulatorRender.create(this[simulatorHostSymbol].renderer);
+ }
+
+ return undefined;
}
/**
@@ -61,7 +66,7 @@ export class SimulatorHost implements IPublicApiSimulatorHost {
}
/**
- * 刷新渲染画布
+ * 触发组件构建，并刷新渲染画布
*/
rerender(): void {
this[simulatorHostSymbol].rerender();
diff --git a/packages/shell/src/api/workspace.ts b/packages/shell/src/api/workspace.ts
index 8737e37bd7..fd3e82fa90 100644
--- a/packages/shell/src/api/workspace.ts
+++ b/packages/shell/src/api/workspace.ts
@@ -3,6 +3,7 @@ import { IWorkspace } from '@alilc/lowcode-workspace';
import { resourceSymbol, workspaceSymbol } from '../symbols';
import { Resource as ShellResource, Window as ShellWindow } from '../model';
import { Plugins } from './plugins';
+import { Skeleton } from './skeleton';
export class Workspace implements IPublicApiWorkspace {
readonly [workspaceSymbol]: IWorkspace;
@@ -92,6 +93,10 @@ export class Workspace implements IPublicApiWorkspace {
return new Plugins(this[workspaceSymbol].plugins, true);
}
+ get skeleton() {
+ return new Skeleton(this[workspaceSymbol].skeleton, 'workspace', true);
+ }
+
get windows() {
return this[workspaceSymbol].windows.map((d) => new ShellWindow(d));
}
diff --git a/packages/shell/src/model/node.ts b/packages/shell/src/model/node.ts
index f2cddd1ab8..29d24232eb 100644
--- a/packages/shell/src/model/node.ts
+++ b/packages/shell/src/model/node.ts
@@ -655,4 +655,24 @@ export class Node implements IPublicModelNode {
setConditionalVisible(): void {
this[nodeSymbol].setConditionalVisible();
}
+
+ getRGL() {
+ const {
+ isContainerNode,
+ isEmptyNode,
+ isRGLContainerNode,
+ isRGLNode,
+ isRGL,
+ rglNode,
+ } = this[nodeSymbol].getRGL();
+
+ return {
+ isContainerNode,
+ isEmptyNode,
+ isRGLContainerNode,
+ isRGLNode,
+ isRGL,
+ rglNode: Node.create(rglNode),
+ };
+ }
}
diff --git a/packages/shell/src/model/simulator-render.ts b/packages/shell/src/model/simulator-render.ts
new file mode 100644
index 0000000000..f6ae47996c
--- /dev/null
+++ b/packages/shell/src/model/simulator-render.ts
@@ -0,0 +1,23 @@
+import { IPublicModelSimulatorRender } from '@alilc/lowcode-types';
+import { simulatorRenderSymbol } from '../symbols';
+import { BuiltinSimulatorRenderer } from '@alilc/lowcode-designer';
+
+export class SimulatorRender implements IPublicModelSimulatorRender {
+ private readonly [simulatorRenderSymbol]: BuiltinSimulatorRenderer;
+
+ constructor(simulatorRender: BuiltinSimulatorRenderer) {
+ this[simulatorRenderSymbol] = simulatorRender;
+ }
+
+ static create(simulatorRender: BuiltinSimulatorRenderer): IPublicModelSimulatorRender {
+ return new SimulatorRender(simulatorRender);
+ }
+
+ get components() {
+ return this[simulatorRenderSymbol].components;
+ }
+
+ rerender() {
+ return this[simulatorRenderSymbol].rerender();
+ }
+}
\ No newline at end of file
diff --git a/packages/shell/src/symbols.ts b/packages/shell/src/symbols.ts
index b4ec01c7ec..8e2962a24f 100644
--- a/packages/shell/src/symbols.ts
+++ b/packages/shell/src/symbols.ts
@@ -21,9 +21,12 @@ export const dragonSymbol = Symbol('dragon');
export const componentMetaSymbol = Symbol('componentMeta');
export const dropLocationSymbol = Symbol('dropLocation');
export const simulatorHostSymbol = Symbol('simulatorHost');
+export const simulatorRenderSymbol = Symbol('simulatorRender');
export const dragObjectSymbol = Symbol('dragObject');
export const locateEventSymbol = Symbol('locateEvent');
export const designerCabinSymbol = Symbol('designerCabin');
+export const editorCabinSymbol = Symbol('editorCabin');
+export const skeletonCabinSymbol = Symbol('skeletonCabin');
export const hotkeySymbol = Symbol('hotkey');
export const pluginsSymbol = Symbol('plugins');
export const workspaceSymbol = Symbol('workspace');
diff --git a/packages/types/package.json b/packages/types/package.json
index fe9cd51235..155242712a 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-types",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "Types for Ali lowCode engine",
"files": [
"es",
diff --git a/packages/types/src/assets.ts b/packages/types/src/assets.ts
index 852ed00380..f0e6d35396 100644
--- a/packages/types/src/assets.ts
+++ b/packages/types/src/assets.ts
@@ -38,6 +38,7 @@ export interface AssetItem {
device?: string;
level?: AssetLevel;
id?: string;
+ scriptType?: string;
}
export type AssetList = Array;
diff --git a/packages/types/src/shell/api/simulator-host.ts b/packages/types/src/shell/api/simulator-host.ts
index 1c0f5dec35..9137067951 100644
--- a/packages/types/src/shell/api/simulator-host.ts
+++ b/packages/types/src/shell/api/simulator-host.ts
@@ -1,7 +1,7 @@
-import { IPublicModelNode } from '../model';
-
+import { IPublicModelNode, IPublicModelSimulatorRender } from '../model';
export interface IPublicApiSimulatorHost {
+
/**
* 获取 contentWindow
* @experimental unstable api, pay extra caution when trying to use it
@@ -17,7 +17,7 @@ export interface IPublicApiSimulatorHost {
/**
* @experimental unstable api, pay extra caution when trying to use it
*/
- get renderer(): any;
+ get renderer(): IPublicModelSimulatorRender | undefined;
/**
* 设置若干用于画布渲染的变量，比如画布大小、locale 等。
diff --git a/packages/types/src/shell/model/index.ts b/packages/types/src/shell/model/index.ts
index 1924f11215..ffe6347ac2 100644
--- a/packages/types/src/shell/model/index.ts
+++ b/packages/types/src/shell/model/index.ts
@@ -32,3 +32,4 @@ export * from './clipboard';
export * from './setting-field';
export * from './editor-view';
export * from './skeleton-item';
+export * from './simulator-render';
diff --git a/packages/types/src/shell/model/node.ts b/packages/types/src/shell/model/node.ts
index 0255376aec..9d8cec3647 100644
--- a/packages/types/src/shell/model/node.ts
+++ b/packages/types/src/shell/model/node.ts
@@ -490,6 +490,18 @@ export interface IBaseModelNode<
* 获取节点实例对应的 dom 节点
*/
getDOMNode(): HTMLElement;
+
+ /**
+ * 获取磁贴相关信息
+ */
+ getRGL(): {
+ isContainerNode: boolean;
+ isEmptyNode: boolean;
+ isRGLContainerNode: boolean;
+ isRGLNode: boolean;
+ isRGL: boolean;
+ rglNode: Node | null;
+ };
}
export interface IPublicModelNode extends IBaseModelNode {}
\ No newline at end of file
diff --git a/packages/types/src/shell/model/simulator-render.ts b/packages/types/src/shell/model/simulator-render.ts
new file mode 100644
index 0000000000..8cf3a03c55
--- /dev/null
+++ b/packages/types/src/shell/model/simulator-render.ts
@@ -0,0 +1,14 @@
+export interface IPublicModelSimulatorRender {
+
+ /**
+ * 画布组件列表
+ */
+ components: {
+ [key: string]: any;
+ };
+
+ /**
+ * 触发画布重新渲染
+ */
+ rerender: () => void;
+}
diff --git a/packages/utils/package.json b/packages/utils/package.json
index ecf6bff3c0..f9c0005b4d 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-utils",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "Utils for Ali lowCode engine",
"files": [
"lib",
@@ -14,7 +14,7 @@
},
"dependencies": {
"@alifd/next": "^1.19.16",
- "@alilc/lowcode-types": "1.1.10",
+ "@alilc/lowcode-types": "1.2.0",
"lodash": "^4.17.21",
"mobx": "^6.3.0",
"react": "^16"
diff --git a/packages/utils/src/app-helper.ts b/packages/utils/src/app-helper.ts
index d5eb2072b3..86b535c592 100644
--- a/packages/utils/src/app-helper.ts
+++ b/packages/utils/src/app-helper.ts
@@ -34,18 +34,18 @@ export class AppHelper extends EventEmitter {
}
}
- batchOn(events: Array, lisenter: (...args: any[]) => void) {
+ batchOn(events: Array, listener: (...args: any[]) => void) {
if (!Array.isArray(events)) return;
- events.forEach((event) => this.on(event, lisenter));
+ events.forEach((event) => this.on(event, listener));
}
- batchOnce(events: Array, lisenter: (...args: any[]) => void) {
+ batchOnce(events: Array, listener: (...args: any[]) => void) {
if (!Array.isArray(events)) return;
- events.forEach((event) => this.once(event, lisenter));
+ events.forEach((event) => this.once(event, listener));
}
- batchOff(events: Array, lisenter: (...args: any[]) => void) {
+ batchOff(events: Array, listener: (...args: any[]) => void) {
if (!Array.isArray(events)) return;
- events.forEach((event) => this.off(event, lisenter));
+ events.forEach((event) => this.off(event, listener));
}
}
diff --git a/packages/utils/src/asset.ts b/packages/utils/src/asset.ts
index 4e5a360b86..ad05221248 100644
--- a/packages/utils/src/asset.ts
+++ b/packages/utils/src/asset.ts
@@ -50,7 +50,7 @@ export function assetItem(type: AssetType, content?: string | null, level?: Asse
};
}
-export function megreAssets(assets: IPublicTypeAssetsJson, incrementalAssets: IPublicTypeAssetsJson): IPublicTypeAssetsJson {
+export function mergeAssets(assets: IPublicTypeAssetsJson, incrementalAssets: IPublicTypeAssetsJson): IPublicTypeAssetsJson {
if (incrementalAssets.packages) {
assets.packages = [...(assets.packages || []), ...incrementalAssets.packages];
}
@@ -59,13 +59,13 @@ export function megreAssets(assets: IPublicTypeAssetsJson, incrementalAssets: IP
assets.components = [...(assets.components || []), ...incrementalAssets.components];
}
- megreAssetsComponentList(assets, incrementalAssets, 'componentList');
- megreAssetsComponentList(assets, incrementalAssets, 'bizComponentList');
+ mergeAssetsComponentList(assets, incrementalAssets, 'componentList');
+ mergeAssetsComponentList(assets, incrementalAssets, 'bizComponentList');
return assets;
}
-function megreAssetsComponentList(assets: IPublicTypeAssetsJson, incrementalAssets: IPublicTypeAssetsJson, listName: keyof IPublicTypeAssetsJson): void {
+function mergeAssetsComponentList(assets: IPublicTypeAssetsJson, incrementalAssets: IPublicTypeAssetsJson, listName: keyof IPublicTypeAssetsJson): void {
if (incrementalAssets[listName]) {
if (assets[listName]) {
// 根据title进行合并
diff --git a/packages/utils/src/create-icon.tsx b/packages/utils/src/create-icon.tsx
index 0f25005298..0a5d6c1ff7 100644
--- a/packages/utils/src/create-icon.tsx
+++ b/packages/utils/src/create-icon.tsx
@@ -18,7 +18,11 @@ export function createIcon(
}
if (typeof icon === 'string') {
if (URL_RE.test(icon)) {
- return 
;
+ return createElement('img', {
+ src: icon,
+ class: props?.className,
+ ...props,
+ });
}
return {
}
export function acceptsRef(obj: any): boolean {
- return obj?.prototype?.isReactComponent || (obj.$$typeof && obj.$$typeof === REACT_FORWARD_REF_TYPE);
+ return obj?.prototype?.isReactComponent || isForwardOrMemoForward(obj);
}
-function isForwardRefType(obj: any): boolean {
+export function isForwardRefType(obj: any): boolean {
return obj?.$$typeof && obj?.$$typeof === REACT_FORWARD_REF_TYPE;
}
@@ -21,6 +21,15 @@ function isMemoType(obj: any): boolean {
return obj?.$$typeof && obj.$$typeof === REACT_MEMO_TYPE;
}
+export function isForwardOrMemoForward(obj: any): boolean {
+ return obj?.$$typeof && (
+ // React.forwardRef(..)
+ isForwardRefType(obj) ||
+ // React.memo(React.forwardRef(..))
+ (isMemoType(obj) && isForwardRefType(obj.type))
+ );
+}
+
export function isReactComponent(obj: any): obj is ComponentType {
if (!obj) {
return false;
diff --git a/packages/utils/src/logger.ts b/packages/utils/src/logger.ts
index 032b54bdc4..4c8f375ecd 100644
--- a/packages/utils/src/logger.ts
+++ b/packages/utils/src/logger.ts
@@ -52,11 +52,11 @@ const bizNameColors = [
'#2e8b57',
];
const bodyColors: Record = {
- debug: '#666666',
- log: '#bbbbbb',
- info: '#ffffff',
- warn: '#bbbbbb',
- error: '#bbbbbb',
+ debug: '#fadb14',
+ log: '#8c8c8c',
+ info: '#52c41a',
+ warn: '#fa8c16',
+ error: '#ff4d4f',
};
const levelMarks: Record = {
debug: 'debug',
@@ -65,7 +65,7 @@ const levelMarks: Record = {
warn: 'warn',
error: 'error',
};
-const outputFuntion: Record = {
+const outputFunction: Record = {
debug: console.log,
log: console.log,
info: console.log,
@@ -88,7 +88,7 @@ const shouldOutput = (
const output = (logLevel: string, bizName: string) => {
return (...args: any[]) => {
- return outputFuntion[logLevel].apply(console, getLogArgs(args, bizName, logLevel));
+ return outputFunction[logLevel].apply(console, getLogArgs(args, bizName, logLevel));
};
};
diff --git a/packages/workspace/package.json b/packages/workspace/package.json
index 8802691d60..7e662af378 100644
--- a/packages/workspace/package.json
+++ b/packages/workspace/package.json
@@ -1,6 +1,6 @@
{
"name": "@alilc/lowcode-workspace",
- "version": "1.1.10",
+ "version": "1.2.0",
"description": "Shell Layer for AliLowCodeEngine",
"main": "lib/index.js",
"module": "es/index.js",
@@ -15,11 +15,11 @@
},
"license": "MIT",
"dependencies": {
- "@alilc/lowcode-designer": "1.1.10",
- "@alilc/lowcode-editor-core": "1.1.10",
- "@alilc/lowcode-editor-skeleton": "1.1.10",
- "@alilc/lowcode-types": "1.1.10",
- "@alilc/lowcode-utils": "1.1.10",
+ "@alilc/lowcode-designer": "1.2.0",
+ "@alilc/lowcode-editor-core": "1.2.0",
+ "@alilc/lowcode-editor-skeleton": "1.2.0",
+ "@alilc/lowcode-types": "1.2.0",
+ "@alilc/lowcode-utils": "1.2.0",
"classnames": "^2.2.6",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
diff --git a/packages/workspace/src/layouts/bottom-area.tsx b/packages/workspace/src/layouts/bottom-area.tsx
deleted file mode 100644
index 5fc4d815bc..0000000000
--- a/packages/workspace/src/layouts/bottom-area.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Component, Fragment } from 'react';
-import classNames from 'classnames';
-import { observer } from '@alilc/lowcode-editor-core';
-import { Area, Panel } from '@alilc/lowcode-editor-skeleton';
-
-@observer
-export default class BottomArea extends Component<{ area: Area }> {
- render() {
- const { area } = this.props;
- if (area.isEmpty()) {
- return null;
- }
- return (
- }> {
- render() {
- const { area } = this.props;
- return (
-
- {area.container.items.map((item) => item.content)}
-
- );
- }
-}
diff --git a/packages/workspace/src/layouts/left-area.tsx b/packages/workspace/src/layouts/left-area.tsx
deleted file mode 100644
index 3057386eda..0000000000
--- a/packages/workspace/src/layouts/left-area.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Component, Fragment } from 'react';
-import classNames from 'classnames';
-import { observer } from '@alilc/lowcode-editor-core';
-import { Area } from '@alilc/lowcode-editor-skeleton';
-
-@observer
-export default class LeftArea extends Component<{ area: Area }> {
- render() {
- const { area } = this.props;
- if (area.isEmpty()) {
- return null;
- }
- return (
-
-
- );
- }
-}
diff --git a/packages/workspace/src/layouts/left-fixed-pane.tsx b/packages/workspace/src/layouts/left-fixed-pane.tsx
deleted file mode 100644
index e0c01c5109..0000000000
--- a/packages/workspace/src/layouts/left-fixed-pane.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Component, Fragment } from 'react';
-import classNames from 'classnames';
-import { observer } from '@alilc/lowcode-editor-core';
-import { Area, Panel, PanelConfig } from '@alilc/lowcode-editor-skeleton';
-
-@observer
-export default class LeftFixedPane extends Component<{ area: Area }> {
- componentDidUpdate() {
- // FIXME: dirty fix, need deep think
- this.props.area.skeleton.editor.get('designer')?.touchOffsetObserver();
- }
-
-
- render() {
- const { area } = this.props;
- const width = area.current?.config.props?.width;
- const style = width
- ? {
- width,
- }
- : undefined;
-
- return (
- }> {
- render() {
- const { area } = this.props;
- return {area.container.items.map((panel) => panel.content)} ;
- }
-}
diff --git a/packages/workspace/src/layouts/left-float-pane.tsx b/packages/workspace/src/layouts/left-float-pane.tsx
deleted file mode 100644
index 3df3e197c2..0000000000
--- a/packages/workspace/src/layouts/left-float-pane.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { Component, Fragment } from 'react';
-import classNames from 'classnames';
-import { observer, Focusable } from '@alilc/lowcode-editor-core';
-import { Area, Panel } from '@alilc/lowcode-editor-skeleton';
-import { IPublicApiProject } from '@alilc/lowcode-types';
-
-@observer
-export default class LeftFloatPane extends Component<{ area: Area }> {
- private dispose?: () => void;
-
- private focusing?: Focusable;
-
- private shell: HTMLElement | null = null;
-
- componentDidMount() {
- const { area } = this.props;
- const triggerClose = (e: any) => {
- if (!area.visible) return;
- // 当 MouseEvent 的 target 为「插入占位符」时，不关闭当前 panel
- if (e.originalEvent?.target?.classList.contains('insertion')) return;
- // 假如当前操作 target 祖先节点中有属性 data-keep-visible-while-dragging="true" 代表该 target 所属 panel
- // 不希望 target 在 panel 范围内拖拽时关闭 panel
- const panelElem = e.originalEvent?.target.closest('div[data-keep-visible-while-dragging="true"]');
- if (panelElem) return;
- area.setVisible(false);
- };
- area.skeleton.editor.eventBus.on('designer.drag', triggerClose);
-
- this.dispose = () => {
- area.skeleton.editor.removeListener('designer.drag', triggerClose);
- };
-
- const project: IPublicApiProject | undefined = area.skeleton.editor.get('project');
-
- this.focusing = area.skeleton.focusTracker.create({
- range: (e) => {
- const target = e.target as HTMLElement;
- if (!target) {
- return false;
- }
- if (this.shell?.contains(target)) {
- return true;
- }
- // 点击了 iframe 内容，算失焦
- if ((document.querySelector('.lc-simulator-content-frame') as HTMLIFrameElement)?.contentWindow?.document.documentElement.contains(target)) {
- return false;
- }
- if (project?.simulatorHost?.contentWindow?.document.documentElement.contains(target)) {
- return false;
- }
- // 点击设置区
- if (document.querySelector('.lc-right-area')?.contains(target)) {
- return false;
- }
- // 点击非编辑区域的popup/dialog,插件栏左侧等不触发失焦
- if (!document.querySelector('.lc-workbench')?.contains(target)) {
- return true;
- }
- // 排除设置区，iframe 之后，都不算失焦
- if (document.querySelector('.lc-workbench-body')?.contains(target)) {
- return true;
- }
- const docks = area.current?.getAssocDocks();
- if (docks && docks?.length) {
- return docks.some(dock => dock.getDOMNode()?.contains(target));
- }
- return false;
- },
- onEsc: () => {
- this.props.area.setVisible(false);
- },
- onBlur: () => {
- this.props.area.setVisible(false);
- },
- });
-
- this.onEffect();
- }
-
- onEffect() {
- const { area } = this.props;
- if (area.visible) {
- this.focusing?.active();
- // 关闭当前fixed区域的面板
- // TODO: 看看有没有更合适的地方
- const fixedContainer = area?.skeleton?.leftFixedArea?.container;
- const currentFixed = fixedContainer?.current;
- if (currentFixed) {
- fixedContainer.unactive(currentFixed);
- }
- } else {
- this.focusing?.suspense();
- }
- }
-
- componentDidUpdate() {
- this.onEffect();
- }
-
- componentWillUnmount() {
- this.focusing?.purge();
- this.dispose?.();
- }
-
- render() {
- const { area } = this.props;
- const width = area.current?.config.props?.width;
-
- const style = width ? {
- width,
- } : undefined;
- return (
- }> {
- render() {
- const { area } = this.props;
- return (
-
- {area.container.items.map((panel) => panel.content)}
-
- );
- }
-}
diff --git a/packages/workspace/src/layouts/main-area.tsx b/packages/workspace/src/layouts/main-area.tsx
deleted file mode 100644
index 5313d7007e..0000000000
--- a/packages/workspace/src/layouts/main-area.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from 'react';
-import classNames from 'classnames';
-import { observer } from '@alilc/lowcode-editor-core';
-import { Area, Panel, Widget } from '@alilc/lowcode-editor-skeleton';
-
-@observer
-export default class MainArea extends Component<{ area: Area }> {
- render() {
- const { area } = this.props;
- return (
-
-
- );
- }
-}
diff --git a/packages/workspace/src/layouts/workbench.less b/packages/workspace/src/layouts/workbench.less
deleted file mode 100644
index 05eb5f513b..0000000000
--- a/packages/workspace/src/layouts/workbench.less
+++ /dev/null
@@ -1,421 +0,0 @@
-@import './theme.less';
-
-:root {
- --font-family: @font-family;
- --font-size-label: @fontSize-4;
- --font-size-text: @fontSize-5;
- --font-size-btn-large: @fontSize-3;
- --font-size-btn-medium: @fontSize-4;
- --font-size-btn-small: @fontSize-5;
-
- --global-border-radius: @global-border-radius;
- --input-border-radius: @input-border-radius;
- --popup-border-radius: @popup-border-radius;
-
- --left-area-width: 48px;
- --right-area-width: 300px;
- --top-area-height: 48px;
- --toolbar-height: 36px;
- --dock-pane-width: 300px;
- --dock-fixed-pane-width: 300px;
-}
-
-@media (min-width: 1860px) {
- :root {
- --right-area-width: 400px;
- --dock-pane-width: 452px;
- --dock-fixed-pane-width: 350px;
- }
-}
-
-html,
-body {
- height: 100%;
- overflow: hidden;
- padding: 0;
- margin: 0;
- position: relative;
- font-family: var(--font-family);
- font-size: var(--font-size-text);
- color: var(--color-text);
- background-color: #edeff3;
-}
-
-* {
- box-sizing: border-box;
-}
-
-.lc-titled-panel {
- width: 100%;
- height: 100%;
- position: relative;
- background-color: #fff;
- background-color: var(--color-pane-background);
- &.hidden {
- display: none;
- }
- .lc-panel-title {
- // background-color: var(--pane-title-bg-color,rgba(31,56,88,.04));
- display: flex;
- align-items: center;
- justify-content: flex-start;
- padding: 0 15px;
-
- .lc-help-tip {
- margin-left: 4px;
- color: rgba(0, 0, 0, 0.4);
- cursor: pointer;
- }
- }
- > .lc-panel-title {
- height: 48px;
- font-size: 16px;
- padding: 0 15px;
- // border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
- color: #0f1726;
- font-weight: bold;
- }
-
- .lc-panel-body {
- position: absolute;
- top: 48px;
- bottom: 0;
- left: 0;
- right: 0;
- overflow: visible;
- /*
- .my-tabs {
- width: 100%;
- height: 100%;
- position: relative;
- .tabs-title {
- display: flex;
- height: var(--pane-title-height);
- > .tab-title {
- cursor: pointer;
- padding: 0;
- flex: 1;
- min-width: 0;
- justify-content: center;
- border-bottom: 2px solid transparent;
- &.actived {
- cursor: default;
- color: var(--color-text-avtived);
- border-bottom-color: #3896ee;
- }
- }
- }
- .tabs-content {
- position: absolute;
- top: var(--pane-title-height);
- bottom: 0;
- left: 0;
- right: 0;
- height: calc(100% - var(--pane-title-height));
- overflow: hidden;
- }
- }
- */
- }
- .lc-outline-tree-container {
- border-top: 1px solid var(--color-line-normal, rgba(31, 56, 88, 0.1));
- }
-}
-.lc-panel {
- height: 100%;
- width: 100%;
- position: relative;
- background-color: #fff;
- background-color: var(--color-pane-background);
- // overflow: auto;
- &.hidden {
- display: none;
- }
-}
-
-.lc-workspace-workbench {
- height: 100%;
- display: flex;
- flex-direction: column;
- background-color: #edeff3;
- .lc-top-area, .lc-sub-top-area {
- height: var(--top-area-height);
- background-color: var(--color-pane-background);
- width: 100%;
- display: none;
- margin-bottom: 2px;
- padding: 8px 12px 8px 16px;
-
- &.lc-area-visible {
- display: flex;
- }
-
- .lc-top-area-left, .lc-sub-top-area-left {
- display: flex;
- align-items: center;
- max-width: 100%;
- }
-
- .lc-top-area-center, .lc-sub-top-area-center {
- flex: 1;
- display: flex;
- justify-content: center;
- margin: 0 8px;
- }
- .lc-top-area-right, .lc-sub-top-area-right {
- display: flex;
- align-items: center;
- > * {
- margin-left: 4px;
- margin-right: 4px;
- }
- .ve-quick-search-trigger {
- display: flex;
- }
- }
- }
- .lc-workspace-workbench-body {
- flex: 1;
- display: flex;
- min-height: 0;
- position: relative;
-
- .lc-tabs-title {
- width: 100%;
- height: 32px;
- position: relative;
- display: center;
- display: flex;
- justify-content: center;
- align-items: center;
- // background: rgba(31,56,88,0.04);
- border-bottom: 1px solid #edeff3;
- .lc-tab-title {
- flex: 1;
- height: 32px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-bottom: 2px solid transparent;
- cursor: pointer;
- font-size: 12px;
- &.actived {
- color: #0079f2;
- border-bottom-color: #0079f2;
- }
- }
- }
-
- .lc-tabs-content {
- position: absolute;
- top: 32px;
- bottom: 0;
- left: 0;
- right: 0;
- }
-
- .lc-pane-icon-close {
- position: absolute;
- right: 16px;
- top: 14px;
- height: auto;
- z-index: 2;
- .next-icon {
- line-height: 1;
- color: rgba(0, 0, 0, 0.6);
- }
- }
-
- .lc-pane-icon-fix,
- .lc-pane-icon-float {
- position: absolute;
- right: 38px;
- top: 14px;
- height: auto;
- z-index: 2;
- svg {
- vertical-align: middle;
- color: rgba(0, 0, 0, 0.6);
- }
- }
-
- .lc-left-float-pane {
- position: absolute;
- top: 0;
- bottom: 0;
- width: var(--dock-pane-width);
- // min-width: var(--dock-fixed-pane-width);
- left: calc(var(--left-area-width) + 1px);
- background-color: var(--color-pane-background);
- box-shadow: 4px 6px 6px 0 rgba(31, 50, 88, 0.08);
- z-index: 820;
- display: none;
- // padding-top: 36px;
- &.lc-area-visible {
- display: block;
- }
- }
- .lc-left-area {
- height: 100%;
- width: var(--left-area-width);
- background-color: var(--color-pane-background);
- display: none;
- flex-shrink: 0;
- flex-direction: column;
- justify-content: space-between;
- overflow: hidden;
- &.lc-area-visible {
- display: flex;
- }
- .lc-left-area-top,
- .lc-left-area-bottom {
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: flex-start;
- align-items: center;
- .lc-title {
- flex-direction: column;
- width: calc(var(--left-area-width) - 2px);
- height: 46px;
- display: flex;
- align-items: center;
- justify-content: center;
-
- &.has-tip {
- cursor: pointer;
- }
- &.actived {
- color: #0079f2;
- }
- &.disabled {
- opacity: 0.4;
- }
- .lc-title-icon {
- height: 20px;
- width: 20px;
- margin: 0;
- .next-icon:before {
- line-height: 1 !important;
- }
- }
- }
- }
- .lc-left-area-top {
- padding-top: 12px;
- }
- .lc-left-area-bottom {
- padding-bottom: 12px;
- }
- }
- .lc-left-fixed-pane {
- width: var(--dock-fixed-pane-width);
- background-color: var(--color-pane-background);
- height: 100%;
- display: none;
- flex-shrink: 0;
- position: relative;
- z-index: 820;
- &.lc-area-visible {
- display: block;
- }
- }
- .lc-left-area.lc-area-visible ~ .lc-left-fixed-pane {
- margin-left: 1px;
- }
- .lc-left-area.lc-area-visible ~ .lc-workspace-workbench-center {
- margin-left: 2px;
- }
- .lc-outline-pane {
- .lc-outline-tree .tree-node .tree-node-title {
- border-bottom: none;
- }
- }
- .lc-workspace-workbench-center {
- flex: 1;
- display: flex;
- flex-direction: column;
- z-index: 10;
- position: relative;
- .lc-toolbar {
- display: flex;
- height: var(--toolbar-height);
- background-color: var(--color-pane-background);
- padding: 8px 16px;
- .lc-toolbar-center {
- display: flex;
- justify-content: center;
- align-items: center;
- flex: 1;
- }
- }
- .lc-main-area {
- flex: 1;
- }
- .lc-bottom-area {
- height: var(--bottom-area-height);
- background-color: var(--color-pane-background);
- display: none;
- &.lc-area-visible {
- display: block;
- }
- }
- }
-
- .lc-workspace-workbench-center-content {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- flex-direction: column;
- display: flex;
- align-content: stretch;
- }
-
- .engine-actionitem {
- max-width: 100%;
- }
-
- .lc-workspace-workbench-window {
- position: relative;
- height: 100%;
- }
-
- .lc-right-area {
- height: 100%;
- width: var(--right-area-width);
- background-color: var(--color-pane-background);
- display: none;
- flex-shrink: 0;
- margin-left: 2px;
- position: relative;
- > .lc-panel {
- position: absolute;
- left: 0;
- top: 0;
- }
- &.lc-area-visible {
- display: block;
- }
- .lc-settings-tabs {
- > .next-tabs-nav-extra {
- top: 36px !important;
- }
- .lc-settings-tab-item {
- .next-tabs-tab-inner {
- font-size: 12px;
- line-height: 12px;
- }
- }
- .lc-title {
- color: inherit;
- line-height: inherit !important;
- }
- }
- .lc-settings-tabs-content {
- top: 66px;
- }
- }
- }
-}
diff --git a/packages/workspace/src/layouts/workbench.tsx b/packages/workspace/src/layouts/workbench.tsx
index 08d6dc1a93..2913576e1c 100644
--- a/packages/workspace/src/layouts/workbench.tsx
+++ b/packages/workspace/src/layouts/workbench.tsx
@@ -2,17 +2,10 @@ import { Component } from 'react';
import { TipContainer, engineConfig, observer } from '@alilc/lowcode-editor-core';
import { WindowView } from '../view/window-view';
import classNames from 'classnames';
-import TopArea from './top-area';
-import LeftArea from './left-area';
-import LeftFixedPane from './left-fixed-pane';
-import LeftFloatPane from './left-float-pane';
-import MainArea from './main-area';
-import BottomArea from './bottom-area';
-import './workbench.less';
import { SkeletonContext } from '../skeleton-context';
import { EditorConfig, PluginClassSet } from '@alilc/lowcode-types';
import { Workspace } from '../workspace';
-import SubTopArea from './sub-top-area';
+import { BottomArea, LeftArea, LeftFixedPane, LeftFloatPane, MainArea, SubTopArea, TopArea } from '@alilc/lowcode-editor-skeleton';
@observer
export class Workbench extends Component<{
@@ -23,12 +16,18 @@ export class Workbench extends Component<{
topAreaItemClassName?: string;
}, {
workspaceEmptyComponent: any;
+ theme?: string;
}> {
constructor(props: any) {
super(props);
const { config, components, workspace } = this.props;
const { skeleton } = workspace;
skeleton.buildFromConfig(config, components);
+ engineConfig.onGot('theme', (theme) => {
+ this.setState({
+ theme,
+ });
+ });
engineConfig.onGot('workspaceEmptyComponent', (workspaceEmptyComponent) => {
this.setState({
workspaceEmptyComponent,
@@ -36,20 +35,21 @@ export class Workbench extends Component<{
});
this.state = {
workspaceEmptyComponent: engineConfig.get('workspaceEmptyComponent'),
+ theme: engineConfig.get('theme'),
};
}
render() {
const { workspace, className, topAreaItemClassName } = this.props;
const { skeleton } = workspace;
- const WorkspaceEmptyComponent = this.state.workspaceEmptyComponent;
+ const { workspaceEmptyComponent: WorkspaceEmptyComponent, theme } = this.state;
return (
-
-
- );
- }
-}
-
-@observer
-class Contents extends Component<{ area: Area
-
- );
- }
-}
-
-
-@observer
-class Contents extends Component<{ area: Area }> {
- render() {
- const { area } = this.props;
- const top: any[] = [];
- const bottom: any[] = [];
- area.container.items.slice().sort((a, b) => {
- const index1 = a.config?.index || 0;
- const index2 = b.config?.index || 0;
- return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1);
- }).forEach((item) => {
- const content = {item.content}
;
- if (item.align === 'bottom') {
- bottom.push(content);
- } else {
- top.push(content);
- }
- });
- return (
- {top}
- {bottom}
-
-
- );
- }
-}
-
-@observer
-class Contents extends Component<{ area: Area { this.shell = ref; }}
- className={classNames('lc-left-float-pane', {
- 'lc-area-visible': area.visible,
- })}
- style={style}
- >
-
- );
- }
-}
-
-@observer
-class Contents extends Component<{ area: Area
- {area.container.items.map((item) => item.content)}
-
- );
- }
-}
diff --git a/packages/workspace/src/layouts/theme.less b/packages/workspace/src/layouts/theme.less
deleted file mode 100644
index b0da053db1..0000000000
--- a/packages/workspace/src/layouts/theme.less
+++ /dev/null
@@ -1,62 +0,0 @@
-@import '../less-variables.less';
-
-/*
- * Theme Colors
- *
- * 乐高设计器的主要主题色变量
- */
-:root {
- --color-brand: @brand-color-1;
- --color-brand-light: @brand-color-2;
- --color-brand-dark: @brand-color-3;
-
- --color-canvas-background: @normal-alpha-8;
-
- --color-icon-normal: @normal-alpha-4;
- --color-icon-hover: @normal-alpha-3;
- --color-icon-active: @brand-color-1;
- --color-icon-reverse: @white-alpha-1;
-
- --color-line-normal: @normal-alpha-7;
- --color-line-darken: darken(@normal-alpha-7, 10%);
-
- --color-title: @dark-alpha-2;
- --color-text: @dark-alpha-3;
- --color-text-dark: darken(@dark-alpha-3, 10%);
- --color-text-light: lighten(@dark-alpha-3, 10%);
- --color-text-reverse: @white-alpha-2;
- --color-text-regular: @normal-alpha-2;
-
- --color-field-label: @dark-alpha-4;
- --color-field-text: @dark-alpha-3;
- --color-field-placeholder: @normal-alpha-5;
- --color-field-border: @normal-alpha-5;
- --color-field-border-hover: @normal-alpha-4;
- --color-field-border-active: @normal-alpha-3;
- --color-field-background: @white-alpha-1;
-
- --color-function-success: @brand-success;
- --color-function-success-dark: darken(@brand-success, 10%);
- --color-function-success-light: lighten(@brand-success, 10%);
- --color-function-warning: @brand-warning;
- --color-function-warning-dark: darken(@brand-warning, 10%);
- --color-function-warning-light: lighten(@brand-warning, 10%);
- --color-function-information: @brand-link-hover;
- --color-function-information-dark: darken(@brand-link-hover, 10%);
- --color-function-information-light: lighten(@brand-link-hover, 10%);
- --color-function-error: @brand-danger;
- --color-function-error-dark: darken(@brand-danger, 10%);
- --color-function-error-light: lighten(@brand-danger, 10%);
-
- --color-pane-background: @white-alpha-1;
- --color-block-background-normal: @white-alpha-1;
- --color-block-background-light: @normal-alpha-9;
- --color-block-background-shallow: @normal-alpha-8;
- --color-block-background-dark: @normal-alpha-7;
- --color-block-background-disabled: @normal-alpha-6;
- --color-block-background-deep-dark: @normal-5;
- --color-layer-mask-background: @dark-alpha-7;
- --color-layer-tooltip-background: rgba(44,47,51,0.8);
-
- --pane-title-bg-color: rgba(31,56,88,.04);
-}
diff --git a/packages/workspace/src/layouts/top-area.tsx b/packages/workspace/src/layouts/top-area.tsx
deleted file mode 100644
index cecaee2a71..0000000000
--- a/packages/workspace/src/layouts/top-area.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Component, Fragment } from 'react';
-import classNames from 'classnames';
-import { observer } from '@alilc/lowcode-editor-core';
-import { Area } from '@alilc/lowcode-editor-skeleton';
-
-@observer
-export default class TopArea extends Component<{ area: Area; itemClassName?: string }> {
- render() {
- const { area, itemClassName } = this.props;
-
- if (area.isEmpty()) {
- return null;
- }
-
- return (
-
-
- );
- }
-}
-
-@observer
-class Contents extends Component<{ area: Area; itemClassName?: string }> {
- render() {
- const { area, itemClassName } = this.props;
- const left: any[] = [];
- const center: any[] = [];
- const right: any[] = [];
- area.container.items.slice().sort((a, b) => {
- const index1 = a.config?.index || 0;
- const index2 = b.config?.index || 0;
- return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1);
- }).forEach(item => {
- const content = (
-
- {item.content}
-
- );
- if (item.align === 'center') {
- center.push(content);
- } else if (item.align === 'left') {
- left.push(content);
- } else {
- right.push(content);
- }
- });
-
- return (
- {left}
- {center}
- {right}
-
+
-
-
diff --git a/packages/workspace/src/less-variables.less b/packages/workspace/src/less-variables.less
index c44fc196e2..017e432ce6 100644
--- a/packages/workspace/src/less-variables.less
+++ b/packages/workspace/src/less-variables.less
@@ -99,19 +99,19 @@
@brand-link-hover: #2e76a6;
// F1-1-7 A10
-@brand-danger-alpha-7: rgba(240, 70, 49, 0.9);
+@brand-danger-alpha-7: rgba(240, 70, 49, 0.1);
// F1-1-8 A6
@brand-danger-alpha-8: rgba(240, 70, 49, 0.8);
// F2-1-2 A80
@brand-warning-alpha-2: rgba(250, 189, 14, 0.8);
// F2-1-7 A10
-@brand-warning-alpha-7: rgba(250, 189, 14, 0.9);
+@brand-warning-alpha-7: rgba(250, 189, 14, 0.1);
// F3-1-2 A80
@brand-success-alpha-2: rgba(102, 188, 92, 0.8);
// F3-1-7 A10
-@brand-success-alpha-7: rgba(102, 188, 92, 0.9);
+@brand-success-alpha-7: rgba(102, 188, 92, 0.1);
// F4-1-7 A10
-@brand-link-alpha-7: rgba(102, 188, 92, 0.9);
+@brand-link-alpha-7: rgba(102, 188, 92, 0.1);
// 文本色
@text-primary-color: @dark-alpha-3;
diff --git a/packages/workspace/src/view/resource-view.tsx b/packages/workspace/src/view/resource-view.tsx
index 9ef30af092..e2204dd505 100644
--- a/packages/workspace/src/view/resource-view.tsx
+++ b/packages/workspace/src/view/resource-view.tsx
@@ -1,10 +1,10 @@
import { PureComponent } from 'react';
import { EditorView } from './editor-view';
import { observer } from '@alilc/lowcode-editor-core';
-import TopArea from '../layouts/top-area';
import { IResource } from '../resource';
import { IEditorWindow } from '../window';
import './resource-view.less';
+import { TopArea } from '@alilc/lowcode-editor-skeleton';
@observer
export class ResourceView extends PureComponent<{
diff --git a/packages/workspace/src/window.ts b/packages/workspace/src/window.ts
index 2c670346fb..ce5aab4142 100644
--- a/packages/workspace/src/window.ts
+++ b/packages/workspace/src/window.ts
@@ -126,9 +126,10 @@ export class EditorWindow implements IEditorWindow {
async init() {
await this.initViewTypes();
await this.execViewTypesInit();
- Promise.all(Array.from(this.editorViews.values()).map((d) => d.onSimulatorRendererReady)).then(() => {
- this.workspace.emitWindowRendererReady();
- });
+ Promise.all(Array.from(this.editorViews.values()).map((d) => d.onSimulatorRendererReady()))
+ .then(() => {
+ this.workspace.emitWindowRendererReady();
+ });
this.url = await this.resource.url();
this.setDefaultViewName();
this.initReady = true;
diff --git a/packages/workspace/src/workspace.ts b/packages/workspace/src/workspace.ts
index 22eb9ede2b..9f1abaa0fb 100644
--- a/packages/workspace/src/workspace.ts
+++ b/packages/workspace/src/workspace.ts
@@ -6,6 +6,7 @@ import { EditorWindow, WINDOW_STATE } from './window';
import type { IEditorWindow } from './window';
import { IResource, Resource } from './resource';
import { IResourceType, ResourceType } from './resource-type';
+import { ISkeleton } from '@alilc/lowcode-editor-skeleton';
enum EVENT {
CHANGE_WINDOW = 'change_window',
@@ -33,6 +34,8 @@ export interface IWorkspace extends Omit;
getResourceList(): IResource[];
@@ -127,7 +130,9 @@ export class Workspace implements IWorkspace {
}
const windowInfo = this.windowQueue.shift();
- if (windowInfo) {
+ if (windowInfo instanceof Resource) {
+ this.openEditorWindowByResource(windowInfo);
+ } else if (windowInfo) {
this.openEditorWindow(windowInfo.name, windowInfo.title, windowInfo.options, windowInfo.viewName);
}
}
@@ -248,7 +253,7 @@ export class Workspace implements IWorkspace {
}
async openEditorWindowByResource(resource: IResource, sleep: boolean = false): Promise {
- if (this.window && !this.window?.initReady && !sleep) {
+ if (this.window && !this.window.sleep && !this.window?.initReady && !sleep) {
this.windowQueue.push(resource);
return;
}
@@ -289,7 +294,7 @@ export class Workspace implements IWorkspace {
}
async openEditorWindow(name: string, title: string, options: Object, viewName?: string, sleep?: boolean) {
- if (this.window && !this.window?.initReady && !sleep) {
+ if (this.window && !this.window.sleep && !this.window?.initReady && !sleep) {
this.windowQueue.push({
name, title, options, viewName,
});
@@ -301,7 +306,7 @@ export class Workspace implements IWorkspace {
return;
}
this.window?.updateState(WINDOW_STATE.inactive);
- const filterWindows = this.windows.filter(d => (d.resource?.name === name && d.resource.title == title));
+ const filterWindows = this.windows.filter(d => (d.resource?.name === name && d.resource.title == title) || (d.resource.id == title));
if (filterWindows && filterWindows.length) {
this.window = filterWindows[0];
if (!sleep && this.window.sleep) {
@@ -317,6 +322,7 @@ export class Workspace implements IWorkspace {
resourceName: name,
title,
options,
+ id: title?.toString(),
}, resourceType, this);
const window = new EditorWindow(resource, this, {
title,