github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-01-13 09:41:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix settings pane

Browse Source
This commit is contained in:
kangwei 2020-05-08 15:23:08 +08:00
parent eabf11af00
commit 429979617a
7 changed files with 127 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -205,8 +205,30 @@ export class Designer {
return new Scroller(scrollable);
}
private oobxList: OffsetObserver[] = [];
createOffsetObserver(nodeInstance: INodeSelector): OffsetObserver | null {
return createOffsetObserver(nodeInstance);
const oobx = createOffsetObserver(nodeInstance);
this.clearOobxList();
if (oobx) {
this.oobxList.push(oobx);
}
return oobx;
}
private clearOobxList(force?: boolean) {
let l = this.oobxList.length;
if (l > 20 || force) {
while (l-- > 0) {
if (this.oobxList[l].isPurged()) {
this.oobxList.splice(l, 1);
}
}
}
}
touchOffsetObserver() {
this.clearOobxList(true);
this.oobxList.forEach(item => item.compute());
}
createSettingEntry(editor: IEditor, nodes: Node[]) {

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

@ -82,6 +82,8 @@ export class OffsetObserver {
private isRoot: boolean;
readonly node: Node;
readonly compute: () => void;
constructor(readonly nodeInstance: INodeSelector) {
const { node, instance } = nodeInstance;
this.node = node;
@ -121,6 +123,8 @@ export class OffsetObserver {
this.pid = pid = (window as any).requestIdleCallback(compute);
};
this.compute = compute;
// try first
compute();
// try second, ensure the dom mounted
@ -133,6 +137,10 @@ export class OffsetObserver {
}
this.pid = undefined;
}
isPurged() {
return this.pid == null;
}
}
export function createOffsetObserver(nodeInstance: INodeSelector): OffsetObserver | null {

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

@ -118,7 +118,11 @@ export class SettingField extends SettingPropEntry implements SettingEntry {
// ======= compatibles for vision ======
getHotValue(): any {
return this.transducer.toHot(this.getValue());
let v = this.getValue();
if (v == null) {
v = this.extraProps.defaultValue;
}
return this.transducer.toHot(v);
}
setHotValue(data: any) {

4
packages/editor-core/src/utils/focus-tracker.ts
View File

@ -10,9 +10,9 @@ export class FocusTracker {
first.internalTriggerBlur();
}
};
win.document.addEventListener('mousedown', checkDown, true);
win.document.addEventListener('click', checkDown, true);
return () => {
win.document.removeEventListener('mousedown', checkDown, true);
win.document.removeEventListener('click', checkDown, true);
};
}
private actives: Focusable[] = [];

5
packages/editor-skeleton/src/layouts/left-fixed-pane.tsx
View File

@ -5,12 +5,17 @@ import { Button, Icon } from '@alifd/next';
import Area from '../area';
import { PanelConfig } from '../types';
import Panel from '../widget/panel';
import { Designer } from '@ali/lowcode-designer';
@observer
export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, Panel> }> {
shouldComponentUpdate() {
return false;
}
componentDidUpdate() {
// FIXME: dirty fix, need deep think
this.props.area.skeleton.editor.get(Designer)?.touchOffsetObserver();
}
render() {
const { area } = this.props;
const hideTitleBar = area.current?.config.props?.hideTitleBar;

121
packages/editor-skeleton/src/layouts/workbench.less
View File

@ -127,122 +127,6 @@ body {
&.hidden {
display: none;
}
/*
.my-tabs {
width: 100%;
height: 100%;
position: relative;
.tabs-title {
display: flex;
height: var(--pane-title-height);
margin-right: 30px;
> .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;
}
}
*/
/*覆盖旧面板*/
/*组件面板*/
// .ve-component-list {
// .ve-component-list-body{
// .ve-component-list-sidebar{
// .ve-component-list-navigator{
// .navigator-group{
// &:last-child{
// &::after{
// display: none;
// }
// }
// &::after{
// content: '';
// display: block;
// height: 1px;
// background-color: #EDEFF3;
// line-height: 0;
// margin: 4px 12px 0;
// }
// .navigator-group-head{
// .navigator-group-title{
// border-bottom: none;
// }
// }
// .navigator-group-item{
// border-left: 2px solid transparent;
// &.active{
// border-left-color: #0079f2;
// border-right: none;
// }
// }
// }
// }
// }
// }
// }
/*数据源*/
// .engine-datapool{
// .engine-datapool-view-group{
// padding-top: 48px;
// .engine-datapool-view-group-title{
// height: 48px;
// line-height: 48px;
// font-size: 16px;
// background-color: transparent;
// padding: 0 16px;
// border-bottom: 1px solid #EDEFF3;
// }
// }
// }
/*动作面板*/
// .ve-action-pane{
// border-top: none;
// .rc-tabs{
// .rc-tabs-bar{
// background-color: transparent;
// .rc-tabs-tab{
// line-height: 1;
// &.rc-tabs-tab-active{
// }
// }
// }
// }
// }
/*设置面板*/
// .ve-field .ve-field-head,
// .ve-field.ve-accordion2-field > .ve-field-head .ve-field-title-content{
// padding: 0;
// }
// .ve-field.ve-accordion2-field > .ve-field-split-line{
// display: none;
// }
// .vs-style .vs-style-source{
// margin: 0 0 16px;
// }
// .vs-code-button,
// .vs-json-button{
// margin: 0;
// }
}
@ -283,10 +167,11 @@ body {
position: absolute;
top: 0;
bottom: 0;
// width: var(--dock-pane-width);
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 0 16px 0 rgba(31,50,88,0.08);
box-shadow: 4px 6px 6px 0 rgba(31,50,88,0.08);
z-index: 820;
display: none;
// padding-top: 36px;

152
packages/editor-skeleton/src/transducers/addon-combine.ts
View File

@ -125,6 +125,24 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
],
});
*/
const stylesGroup: FieldConfig[] = [];
let advanceGroup: FieldConfig[] = [];
if (propsGroup) {
let l = propsGroup.length;
while (l-- > 0) {
const item = propsGroup[l];
if (item.type === 'group' && (item.title === '高级' || item.title?.label === '高级')) {
advanceGroup = item.items || [];
propsGroup.splice(l, 1);
} else if (item.name === '__style__' || item.name === 'containerStyle' || item.name === 'pageStyle') {
propsGroup.splice(l, 1);
stylesGroup.push(item);
if (item.extraProps?.defaultCollapsed && item.name !== 'containerStyle') {
item.extraProps.defaultCollapsed = false;
}
}
}
}
const combined: FieldConfig[] = [
{
title: { type: 'i18n', 'zh-CN': '属性', 'en-US': 'Props' },
@ -132,7 +150,6 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
items: propsGroup,
},
];
const stylesGroup: FieldConfig[] = [];
if (styles?.supportClassName) {
stylesGroup.push({
name: 'className',
@ -183,79 +200,72 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
});
}
if (isRoot) {
/*
if (!isRoot) {
advanceGroup = advanceGroup.concat([
{
name: '___condition',
title: { type: 'i18n', 'zh-CN': '是否渲染', 'en-US': 'Condition' },
defaultValue: true,
setter: [{
componentName: 'BoolSetter',
}, {
componentName: 'VariableSetter'
}],
},
{
name: '#loop',
title: { type: 'i18n', 'zh-CN': '循环', 'en-US': 'Loop' },
items: [
{
name: '___loop',
title: { type: 'i18n', 'zh-CN': '循环数据', 'en-US': 'Loop Data' },
setter: [{
componentName: 'JsonSetter',
props: {
label: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data'},
},
}, {
componentName: 'VariableSetter'
}],
},
{
name: '___loopArgs.0',
title: { type: 'i18n', 'zh-CN': '迭代变量名', 'en-US': 'Loop Item' },
setter: {
componentName: 'StringSetter',
props: {
placeholder: { type: 'i18n', 'zh-CN': '默认为: item', 'en-US': 'Defaults: item' },
}
},
},
{
name: '___loopArgs.1',
title: { type: 'i18n', 'zh-CN': '索引变量名', 'en-US': 'Loop Index' },
setter: {
componentName: 'StringSetter',
props: {
placeholder: { type: 'i18n', 'zh-CN': '默认为: index', 'en-US': 'Defaults: index' },
}
},
},
{
name: 'key',
title: '循环 Key',
setter: [{
componentName: 'StringSetter',
}, {
componentName: 'VariableSetter'
}],
},
],
},
])
}
if (advanceGroup.length > 0) {
combined.push({
name: '#advanced',
title: { type: 'i18n', 'zh-CN': '高级', 'en-US': 'Advance' },
items: [],
});
*/
} else {
combined.push({
name: '#advanced',
title: { type: 'i18n', 'zh-CN': '高级', 'en-US': 'Advance' },
items: [
{
name: '___condition',
title: { type: 'i18n', 'zh-CN': '是否渲染', 'en-US': 'Condition' },
setter: [{
componentName: 'BoolSetter',
props: {
defaultValue: true,
}
}, {
componentName: 'VariableSetter'
}],
},
{
name: '#loop',
title: { type: 'i18n', 'zh-CN': '循环', 'en-US': 'Loop' },
items: [
{
name: '___loop',
title: { type: 'i18n', 'zh-CN': '循环数据', 'en-US': 'Loop Data' },
setter: [{
componentName: 'JsonSetter',
props: {
label: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data'},
},
}, {
componentName: 'VariableSetter'
}],
},
{
name: '___loopArgs.0',
title: { type: 'i18n', 'zh-CN': '迭代变量名', 'en-US': 'Loop Item' },
setter: {
componentName: 'StringSetter',
props: {
placeholder: { type: 'i18n', 'zh-CN': '默认为: item', 'en-US': 'Defaults: item' },
}
},
},
{
name: '___loopArgs.1',
title: { type: 'i18n', 'zh-CN': '索引变量名', 'en-US': 'Loop Index' },
setter: {
componentName: 'StringSetter',
props: {
placeholder: { type: 'i18n', 'zh-CN': '默认为: index', 'en-US': 'Defaults: index' },
}
},
},
{
name: 'key',
title: '循环 Key',
setter: [{
componentName: 'StringSetter',
}, {
componentName: 'VariableSetter'
}],
},
],
},
],
items: advanceGroup,
});
}