Skip to content

Commit 15f5675

Browse files
kyoonartkyoonart
authored
feat: outline-plugin-pane support overflow-x scroll & delete node (#2376)
1 parent 4128654 commit 15f5675

File tree

7 files changed

+70
-16
lines changed

7 files changed

+70
-16
lines changed

‎packages/plugin-outline-pane/src/controllers/tree-node.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,9 @@ export default class TreeNode {
178178
this.node.lock(flag);
179179
this.event.emit(EVENT_NAMES.lockedChanged, flag);
180180
}
181-
181+
deleteNode(node: IPublicModelNode) {
182+
node && node.remove();
183+
}
182184
onFilterResultChanged(fn: () => void): IPublicTypeDisposable {
183185
this.event.on(EVENT_NAMES.filterResultChanged, fn);
184186
return () => {

‎packages/plugin-outline-pane/src/icons/delete.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { SVGIcon, IconProps } from '@alilc/lowcode-utils';
2+
3+
export function IconDelete(props: IconProps) {
4+
return (
5+
<SVGIcon viewBox="0 0 1024 1024" {...props}>
6+
<path d="M224 256v639.84A64 64 0 0 0 287.84 960h448.32A64 64 0 0 0 800 895.84V256h64a32 32 0 1 0 0-64H160a32 32 0 1 0 0 64h64zM384 96c0-17.664 14.496-32 31.904-32h192.192C625.696 64 640 78.208 640 96c0 17.664-14.496 32-31.904 32H415.904A31.872 31.872 0 0 1 384 96z m-96 191.744C288 270.208 302.4 256 320.224 256h383.552C721.6 256 736 270.56 736 287.744v576.512C736 881.792 721.6 896 703.776 896H320.224A32.224 32.224 0 0 1 288 864.256V287.744zM352 352c0-17.696 14.208-32.032 32-32.032 17.664 0 32 14.24 32 32v448c0 17.664-14.208 32-32 32-17.664 0-32-14.24-32-32V352z m128 0c0-17.696 14.208-32.032 32-32.032 17.664 0 32 14.24 32 32v448c0 17.664-14.208 32-32 32-17.664 0-32-14.24-32-32V352z m128 0c0-17.696 14.208-32.032 32-32.032 17.664 0 32 14.24 32 32v448c0 17.664-14.208 32-32 32-17.664 0-32-14.24-32-32V352z" />
7+
</SVGIcon>
8+
);
9+
}
10+
11+
IconDelete.displayName = 'IconDelete';

‎packages/plugin-outline-pane/src/icons/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ export * from './loop';
99
export * from './radio-active';
1010
export * from './radio';
1111
export * from './setting';
12+
export * from './delete';

‎packages/plugin-outline-pane/src/locale/en-US.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,6 @@
1818
"Locked": "Locked",
1919
"Hidden": "Hidden",
2020
"Modal View": "Modal View",
21-
"Rename": "Rename"
21+
"Rename": "Rename",
22+
"Delete": "Delete"
2223
}

‎packages/plugin-outline-pane/src/locale/zh-CN.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,6 @@
1818
"Locked": "已锁定",
1919
"Hidden": "已隐藏",
2020
"Modal View": "模态视图层",
21-
"Rename": "重命名"
21+
"Rename": "重命名",
22+
"Delete": "删除"
2223
}

‎packages/plugin-outline-pane/src/views/style.less‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
overflow: hidden;
5252
margin-bottom: @treeNodeHeight;
5353
user-select: none;
54+
overflow-x: scroll;
5455

5556
.tree-node-modal {
5657
margin: 5px;
@@ -80,7 +81,8 @@
8081
}
8182
}
8283

83-
.tree-node-modal-radio, .tree-node-modal-radio-active {
84+
.tree-node-modal-radio,
85+
.tree-node-modal-radio-active {
8486
margin-right: 4px;
8587
opacity: 0.8;
8688
position: absolute;
@@ -139,7 +141,7 @@
139141
content: ' ';
140142
z-index: 2;
141143
}
142-
>.condition-group-title {
144+
> .condition-group-title {
143145
text-align: center;
144146
background-color: #7b605b;
145147
height: 14px;
@@ -167,7 +169,7 @@
167169
content: ' ';
168170
z-index: 2;
169171
}
170-
>.tree-node-slots-title {
172+
> .tree-node-slots-title {
171173
text-align: center;
172174
background-color: rgb(144, 94, 190);
173175
height: 14px;
@@ -183,7 +185,7 @@
183185
&.insertion-at-slots {
184186
padding-bottom: @treeNodeHeight;
185187
border-bottom-color: rgb(182, 55, 55);
186-
>.tree-node-slots-title {
188+
> .tree-node-slots-title {
187189
background-color: rgb(182, 55, 55);
188190
}
189191
&::before {
@@ -279,7 +281,10 @@
279281
}
280282
}
281283

282-
.tree-node-hide-btn, .tree-node-lock-btn, .tree-node-rename-btn {
284+
.tree-node-hide-btn,
285+
.tree-node-lock-btn,
286+
.tree-node-rename-btn,
287+
.tree-node-delete-btn {
283288
opacity: 0;
284289
color: var(--color-text);
285290
line-height: 0;
@@ -293,18 +298,26 @@
293298
}
294299
}
295300
&:hover {
296-
.tree-node-hide-btn, .tree-node-lock-btn, .tree-node-rename-btn {
301+
.tree-node-hide-btn,
302+
.tree-node-lock-btn,
303+
.tree-node-rename-btn,
304+
.tree-node-delete-btn {
297305
opacity: 0.5;
298306
}
299307
}
300308
html.lc-cursor-dragging & {
301309
// FIXME: only hide hover shows
302-
.tree-node-hide-btn, .tree-node-lock-btn, .tree-node-rename-btn {
310+
.tree-node-hide-btn,
311+
.tree-node-lock-btn,
312+
.tree-node-rename-btn {
303313
display: none;
304314
}
305315
}
306316
&.editing {
307-
& > .tree-node-hide-btn, & >.tree-node-lock-btn, & >.tree-node-rename-btn {
317+
& > .tree-node-hide-btn,
318+
& > .tree-node-lock-btn,
319+
& > .tree-node-rename-btn,
320+
& > .tree-node-delete-btn {
308321
display: none;
309322
}
310323
}
@@ -381,7 +394,8 @@
381394
opacity: 0.8;
382395
}
383396
.tree-node-branches {
384-
.tree-node-lock-btn, .tree-node-hide-btn {
397+
.tree-node-lock-btn,
398+
.tree-node-hide-btn {
385399
opacity: 0;
386400
}
387401
}

‎packages/plugin-outline-pane/src/views/tree-title.tsx‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import classNames from 'classnames';
33
import { createIcon } from '@alilc/lowcode-utils';
44
import { IPublicApiEvent } from '@alilc/lowcode-types';
55
import TreeNode from '../controllers/tree-node';
6-
import { IconLock, IconUnlock, IconArrowRight, IconEyeClose, IconEye, IconCond, IconLoop, IconRadioActive, IconRadio, IconSetting } from '../icons';
6+
import { IconLock, IconUnlock, IconArrowRight, IconEyeClose, IconEye, IconCond, IconLoop, IconRadioActive, IconRadio, IconSetting, IconDelete } from '../icons';
77

88
function emitOutlineEvent(event: IPublicApiEvent, type: string, treeNode: TreeNode, rest?: Record<string, unknown>) {
99
const node = treeNode?.node;
@@ -100,7 +100,11 @@ export default class TreeTitle extends PureComponent<{
100100
});
101101
});
102102
}
103-
103+
deleteClick = () => {
104+
const { treeNode } = this.props;
105+
const { node } = treeNode;
106+
treeNode.deleteNode(node);
107+
};
104108
render() {
105109
const { treeNode, isModal } = this.props;
106110
const { pluginContext } = treeNode;
@@ -131,6 +135,7 @@ export default class TreeTitle extends PureComponent<{
131135
const shouldShowHideBtn = isCNode && isNodeParent && !isModal && couldHide;
132136
const shouldShowLockBtn = config.get('enableCanvasLock', false) && isContainer && isCNode && isNodeParent && ((couldLock && !node.isLocked) || (couldUnlock && node.isLocked));
133137
const shouldEditBtn = isCNode && isNodeParent;
138+
const shouldDeleteBtn = isCNode && isNodeParent && node?.canPerformAction('remove');
134139
return (
135140
<div
136141
className={classNames('tree-node-title', { editing })}
@@ -214,8 +219,28 @@ export default class TreeTitle extends PureComponent<{
214219
</div>
215220
{shouldShowHideBtn && <HideBtn hidden={this.props.hidden} treeNode={treeNode} />}
216221
{shouldShowLockBtn && <LockBtn locked={this.props.locked} treeNode={treeNode} />}
217-
{shouldEditBtn && <RenameBtn treeNode={treeNode} onClick={this.enableEdit} /> }
222+
{shouldEditBtn && <RenameBtn treeNode={treeNode} onClick={this.enableEdit} />}
223+
{shouldDeleteBtn && <DeleteBtn treeNode={treeNode} onClick={this.deleteClick} />}
224+
</div>
225+
);
226+
}
227+
}
218228

229+
class DeleteBtn extends PureComponent<{
230+
treeNode: TreeNode;
231+
onClick: () => void;
232+
}> {
233+
render() {
234+
const { intl, common } = this.props.treeNode.pluginContext;
235+
const { Tip } = common.editorCabin;
236+
return (
237+
<div
238+
className="tree-node-delete-btn"
239+
onClick={this.props.onClick}
240+
>
241+
<IconDelete />
242+
{/* @ts-ignore */}
243+
<Tip>{intl('Delete')}</Tip>
219244
</div>
220245
);
221246
}
@@ -297,7 +322,6 @@ class ExpandBtn extends PureComponent<{
297322
expanded: boolean;
298323
expandable: boolean;
299324
}> {
300-
301325
render() {
302326
const { treeNode, expanded, expandable } = this.props;
303327
if (!expandable) {

0 commit comments

Comments
 (0)