github/lowcode-engine
1
0
Fork 0
mirror of https://github.com/alibaba/lowcode-engine.git synced 2026-02-27 20:30:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: support float pane fixed

Browse Source
This commit is contained in:
mario.gk 2020-07-20 10:05:18 +08:00
parent f4c07afba3
commit 40d8260afb
6 changed files with 150 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor-skeleton/src/area.ts
View File

@ -34,6 +34,10 @@ export default class Area<C extends IWidgetBaseConfig = any, T extends IWidget =
return this.container.add(config);
}
remove(config: T | string): number {
return this.container.remove(config);
}
private lastCurrent: T | null = null;
setVisible(flag: boolean) {
if (this.exclusive) {

11
packages/editor-skeleton/src/icons/fix.tsx Normal file
View File

@ -0,0 +1,11 @@
import { SVGIcon, IconProps } from "@ali/lowcode-utils";
export function IconFix(props: IconProps) {
return (
<SVGIcon viewBox="0 0 1024 1024" {...props}>
<path d="M750.848 28.928l245.248 242.944a66.048 66.048 0 1 1-93.184 93.184l-25.6-19.456-249.6 353.792 78.336 78.336a66.048 66.048 0 0 1-93.184 92.672l-460.8-464.64a66.048 66.048 0 0 1 93.184-93.184l76.8 78.336 354.048-249.856-18.176-18.944a66.048 66.048 0 1 1 93.184-93.184zM380.672 732.416l-91.904-90.88c-74.24 89.6-191.488 219.904-212.736 247.04a419.84 419.84 0 0 0-70.656 128 419.84 419.84 0 0 0 128-70.144c27.136-21.248 157.44-138.496 246.528-214.016z"></path>
</SVGIcon>
);
}
IconFix.displayName = 'Fix';

12
packages/editor-skeleton/src/icons/float.tsx Normal file
View File

@ -0,0 +1,12 @@
import { SVGIcon, IconProps } from "@ali/lowcode-utils";
export function IconFloat(props: IconProps) {
return (
<SVGIcon viewBox="0 0 1024 1024" {...props}>
<path d="M160.256 816.64C116.224 872.448 102.4 921.6 102.4 921.6s49.152-13.824 104.96-57.856c22.016-17.408 128-112.64 200.704-174.08l-73.728-73.728c-61.44 72.704-157.184 178.688-174.08 200.704zM648.704 209.408L442.368 355.328l226.304 226.304 145.92-206.336 15.872 15.872c20.992 20.992 54.784 20.992 75.776 0s20.992-54.784 0-75.776l-197.12-197.12c-20.992-20.992-54.784-20.992-75.776 0-20.992 20.992-20.992 54.784 0 75.776l15.36 15.36zM247.808 334.848c-9.728 2.048-18.944 6.656-26.624 14.336-20.992 20.992-20.992 54.784 0 75.776l377.856 377.856c20.992 20.992 54.784 20.992 75.776 0 7.68-7.68 12.288-16.896 14.336-26.624L247.808 334.848z"></path>
<path d="M840.704 879.104c-9.728 0-19.456-3.584-27.136-11.264L155.648 210.432c-14.848-14.848-14.848-39.424 0-54.272 14.848-14.848 39.424-14.848 54.272 0L867.84 814.08c14.848 14.848 14.848 39.424 0 54.272-7.168 7.168-16.896 10.752-27.136 10.752z"></path>
</SVGIcon>
);
}
IconFloat.displayName = 'Float';

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

@ -6,16 +6,31 @@ import Area from '../area';
import { PanelConfig } from '../types';
import Panel from '../widget/panel';
import { Designer } from '@ali/lowcode-designer';
import { IconFloat } from '../icons/float';
@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();
}
// 取消固定
setFloat() {
const { area } = this.props;
const { current } = area;
if (!current) {
return;
}
area.skeleton.leftFixedArea.remove(current);
area.skeleton.leftFloatArea.add(current);
area.skeleton.leftFloatArea.container.active(current);
}
render() {
const { area } = this.props;
const hideTitleBar = area.current?.config.props?.hideTitleBar;
@ -26,15 +41,24 @@ export default class LeftFixedPane extends Component<{ area: Area<PanelConfig, P
})}
>
{!hideTitleBar && (
<Button
text
className="lc-pane-close"
onClick={() => {
area.setVisible(false);
}}
>
<Icon type="close" />
</Button>
<Fragment>
<Button
text
className="lc-pane-icon-float"
onClick={this.setFloat.bind(this)}
>
<IconFloat />
</Button>
<Button
text
className="lc-pane-icon-close"
onClick={() => {
area.setVisible(false);
}}
>
<Icon type="close" />
</Button>
</Fragment>
)}
<Contents area={area} />
</div>

40
packages/editor-skeleton/src/layouts/left-float-pane.tsx
View File

@ -2,6 +2,7 @@ import { Component, Fragment } from 'react';
import classNames from 'classnames';
import { observer, Focusable, focusTracker } from '@ali/lowcode-editor-core';
import { Button, Icon } from '@alifd/next';
import { IconFix } from '../icons/fix';
import Area from '../area';
import Panel from '../widget/panel';
@ -76,6 +77,18 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
this.dispose?.();
}
// 固定
setFixed() {
const { area } = this.props;
const { current } = area;
if (!current) {
return;
}
area.skeleton.leftFloatArea.remove(current);
area.skeleton.leftFixedArea.add(current);
area.skeleton.leftFixedArea.container.active(current);
}
render() {
const { area } = this.props;
const width = area.current?.config.props?.width;
@ -93,15 +106,24 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
>
{
!hideTitleBar && (
<Button
text
className="lc-pane-close"
onClick={() => {
area.setVisible(false);
}}
>
<Icon type="close" />
</Button>
<Fragment>
<Button
text
className="lc-pane-icon-fix"
onClick={this.setFixed.bind(this)}
>
<IconFix />
</Button>
<Button
text
className="lc-pane-icon-close"
onClick={() => {
area.setVisible(false);
}}
>
<Icon type="close" />
</Button>
</Fragment>
)
}
<Contents area={area} />

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

@ -171,6 +171,65 @@ body {
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;
@ -186,48 +245,6 @@ body {
&.lc-area-visible {
display: block;
}
.lc-pane-close{
position: absolute;
right: 16px;
top: 16px;
height: auto;
z-index: 2;
.next-icon{
line-height: 1;
}
}
.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-left-area {
height: 100%;
@ -289,16 +306,6 @@ body {
&.lc-area-visible {
display: block;
}
.lc-pane-close {
position: absolute;
right: 16px;
top: 16px;
height: auto;
z-index: 2;
.next-icon {
line-height: 1;
}
}
}
.lc-left-area.lc-area-visible ~ .lc-left-fixed-pane {
margin-left: 1px;