8000 feat: enhance clipboard action · idrawjs/studio@329d7ac · GitHub
[go: up one dir, main page]
Skip to content

Commit 329d7ac

Browse files
chenshenhaichenshenhai
committed
feat: enhance clipboard action
1 parent b87618f commit 329d7ac

File tree

11 files changed

+242
-82
lines changed

11 files changed

+242
-82
lines changed

‎packages/studio-base/src/modules/element-tree/index.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,7 @@ export const ElementTree = React.forwardRef((props: ElementTreeProps, ref: any)
7777
onDelete,
7878
onExpand,
7979
onGoToGroup,
80-
// reverse // TODO
81-
reverse = true
80+
reverse
8281
} = props;
8382

8483
const onSelectNode: TreeProps['onSelect'] = (skeys, info) => {

‎packages/studio/src/modules/context-menu.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export const useContextMenuOptions: HookUseContextMenuOptions = (opts: { sharedE
8787
8000 const updateContextMenuOptions: UpdateContextMenuOptions = (opts) => {
8888
const { selectedElements } = opts;
8989
innerItems?.forEach((item) => {
90-
if (item && ['copy', 'paste', 'cut', 'delete'].includes(item?.key as string)) {
90+
if (item && ['copy', 'cut', 'delete'].includes(item?.key as string)) {
9191
(item as any).disabled = selectedElements?.length > 0 ? false : true;
9292
}
9393
});

‎packages/studio/src/modules/dashboard/index.tsx

+11-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { Sketch } from '../sketch';
1010
// import SplitPane from '../split-pane';
1111
import type { SharedEvent, SharedStore, HookUseContextMenuOptions, GetTemplates } from '../../types';
1212
import { Context } from '../context';
13+
import { generatePasteEventCallback } from '../../shared/event';
1314

1415
const modName = 'mod-dashboard';
1516
const leftSiderDefaultWidth = 240;
@@ -24,6 +25,7 @@ export interface DashboardProps {
2425
logo?: React.ReactNode;
2526
navigationMenu?: React.ReactNode;
2627
navigationCenter?: React.ReactNode;
28+
reverseTree?: boolean;
2729
defaultSelectedElementUUIDs?: string[];
2830
sharedStore: SharedStore;
2931
sharedEvent: SharedEvent;
@@ -55,7 +57,8 @@ export const Dashboard = forwardRef<HTMLDivElement, DashboardProps>((props: Dash
5557
useContextMenuOptions,
5658
handleKeyboard,
5759
getPageTemplates,
58-
getMaterialTemplates
60+
getMaterialTemplates,
61+
reverseTree
5962
} = props;
6063
const { state } = useContext(Context);
6164
const { editMode } = state;
@@ -69,9 +72,14 @@ export const Dashboard = forwardRef<HTMLDivElement, DashboardProps>((props: Dash
6972
}
7073
handleKeyboard(e, { sharedEvent, sharedStore });
7174
};
75+
76+
const pasteCallback = generatePasteEventCallback({ sharedStore, sharedEvent });
77+
7278
window.addEventListener('keydown', hotKeyCallback);
79+
window.addEventListener('paste', pasteCallback);
7380
return () => {
7481
window.removeEventListener('keydown', hotKeyCallback);
82+
window.removeEventListener('paste', pasteCallback);
7583
};
7684
}, []);
7785

@@ -182,6 +190,7 @@ export const Dashboard = forwardRef<HTMLDivElement, DashboardProps>((props: Dash
182190
<PanelPage
183191
height={height - headerHeight}
184192
className={leftClassName}
193+
reverseTree={!!reverseTree}
185194
defaultSelectedElementUUIDs={defaultSelectedElementUUIDs}
186195
sharedEvent={sharedEvent}
187196
sharedStore={sharedStore}
@@ -192,6 +201,7 @@ export const Dashboard = forwardRef<HTMLDivElement, DashboardProps>((props: Dash
192201
<PanelLayer
193202
height={height - headerHeight}
194203
className={leftClassName}
204+
reverseTree={!!reverseTree}
195205
// defaultSelectedElementUUIDs={defaultSelectedElementUUIDs}
196206
sharedEvent={sharedEvent}
197207
sharedStore={sharedStore}

‎packages/studio/src/modules/hot-key.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,17 @@ export const handleKeyboard = (
99
}
1010
) => {
1111
const { sharedEvent } = opts;
12+
// if (isHotkey('mod+v', e)) {
13+
// sharedEvent.trigger('paste');
14+
// } else
1215
if (isHotkey('mod+c', e)) {
13-
sharedEvent.trigger('copy', undefined);
14-
} else if (isHotkey('mod+v', e)) {
15-
sharedEvent.trigger('paste', undefined);
16+
sharedEvent.trigger('copy');
1617
} else if (isHotkey('mod+x', e)) {
17-
sharedEvent.trigger('cut', undefined);
18+
sharedEvent.trigger('cut');
1819
} else if (isHotkey('del', e)) {
19-
sharedEvent.trigger('delete', undefined);
20+
sharedEvent.trigger('delete');
2021
} else if (isHotkey('backspace', e)) {
21-
sharedEvent.trigger('delete', undefined);
22+
sharedEvent.trigger('delete');
2223
} else if (isHotkey('mod+s', e)) {
2324
console.log('Save ... '); // TODO
2425
}

‎packages/studio/src/modules/panel-layer/index.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ export interface PanelLayerProps {
1515
height: number;
1616
style?: CSSProperties;
1717
// defaultSelectedElementUUIDs?: string[];
18+
reverseTree: boolean;
1819
sharedStore: SharedStore;
1920
sharedEvent: SharedEvent;
2021
useContextMenuOptions: HookUseContextMenuOptions;
2122
}
2223

2324
export const PanelLayer = (props: PanelLayerProps) => {
24-
const { className, style, height, sharedStore, sharedEvent, useContextMenuOptions } = props;
25+
const { className, style, height, sharedStore, sharedEvent, reverseTree, useContextMenuOptions } = props;
2526
const { state, dispatch } = useContext(Context);
2627
const { elementTree, selectedUUIDs, editingData } = state;
2728

@@ -128,6 +129,7 @@ export const PanelLayer = (props: PanelLayerProps) => {
128129
<ElementTree
129130
ref={refTree}
130131
height={elementsHeight}
132+
reverse={reverseTree}
131133
treeData={elementTree}
132134
selectedKeys={selectedUUIDs}
133135
onTitleChange={({ uuid, value }) => {

‎packages/studio/src/modules/panel-page/add-page-button.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,11 @@ export interface AddPageButtonProps {
2020
sharedStore: SharedStore;
2121
inPageOverview: boolean;
2222
getPageTemplates?: GetTemplates;
23+
disabled: boolean;
2324
}
2425

2526
export const AddPageButton = (props: AddPageButtonProps) => {
26-
const { className, style, parentModName, inPageOverview, sharedEvent, sharedStore, getPageTemplates } = props;
27+
const { className, style, parentModName, inPageOverview, sharedEvent, sharedStore, getPageTemplates, disabled } = props;
2728
const rootClassName = generateClassName(parentModName, modName);
2829
const [moduleLocale] = useLocale('PanelPage');
2930
const { getContainer } = useContext(ConfigContext);
@@ -38,6 +39,7 @@ export const AddPageButton = (props: AddPageButtonProps) => {
3839
type="text"
3940
style={style}
4041
className={classnames(rootClassName, className)}
42+
disabled={disabled}
4143
onClick={(e) => {
4244
e.preventDefault();
4345
e.stopPropagation();

‎packages/studio/src/modules/panel-page/index.tsx

+11-4
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export interface PanelPageProps {
2222
sharedEvent: SharedEvent;
2323
useContextMenuOptions: HookUseContextMenuOptions;
2424
getPageTemplates?: GetTemplates;
25+
reverseTree: boolean;
2526
}
2627

2728
const pageTreeKey = 'page-tree';
@@ -31,7 +32,7 @@ const pageTreeHeightRatio = 1;
3132
const elementTreeHeightRatio = 3;
3233

3334
export const PanelPage = (props: PanelPageProps) => {
34-
const { className, style, height, defaultSelectedElementUUIDs = [], sharedStore, sharedEvent, useContextMenuOptions, getPageTemplates } = props;
35+
const { className, style, height, defaultSelectedElementUUIDs = [], sharedStore, sharedEvent, useContextMenuOptions, getPageTemplates, reverseTree } = props;
3536
const { state, dispatch } = useContext(Context);
3637
const { pageTree, elementTree, selectedUUIDs, editingData, editingDataPosition, data } = state;
3738

@@ -73,7 +74,7 @@ export const PanelPage = (props: PanelPageProps) => {
7374
useEffect(() => {
7475
const idraw = sharedStore.getStatic('idraw');
7576
const listenSelectedPage = (e: { uuids?: string[] }) => {
76-
if (refInPageOverview.current === true) {
77+
if (inPageOverview === true) {
7778
const { uuids = [] } = e;
7879
setSelectedPageUUIDs([...uuids]);
7980
}
@@ -83,7 +84,7 @@ export const PanelPage = (props: PanelPageProps) => {
8384
return () => {
8485
idraw?.off(eventKeys.SELECT, listenSelectedPage);
8586
};
86-
}, []);
87+
}, [inPageOverview]);
8788

8889
useEffect(() => {
8990
if (editingDataPosition.length === 1 && pageTree.length > 0) {
@@ -127,7 +128,10 @@ export const PanelPage = (props: PanelPageProps) => {
127128
const pageKeys: string[] = [];
128129
if (pageTree.length > 0) {
129130
pageKeys.push(pageTree[0].uuid);
130-
sharedEvent.trigger('resetEditingView', { type: 'go-to-page', position: [0] });
131+
sharedEvent.trigger('resetEditingView', {
132+
type: 'go-to-page',
133+
position: reverseTree === true ? [pageTree.length > 0 ? pageTree.length - 1 : 0] : [0]
134+
});
131135
}
132136
setSelectedPageUUIDs(pageKeys);
133137
idraw?.enable('selectInGroup');
@@ -238,6 +242,7 @@ export const PanelPage = (props: PanelPageProps) => {
238242
</div>
239243
<div style={{ display: 'flex' }}>
240244
<AddPageButton
245+
disabled={inPageOverview}
241246
inPageOverview={inPageOverview}
242247
parentModName={modName}
243248
sharedEvent={sharedEvent}
@@ -253,6 +258,7 @@ export const PanelPage = (props: PanelPageProps) => {
253258
<PageTree
254259
ref={refPageTree}
255260
height={pageTreeHeight}
261+
reverse={reverseTree}
256262
treeData={pageTree}
257263
selectedKeys={selectedPageUUIDs}
258264
onTitleChange={({ uuid, value }) => {
@@ -355,6 +361,7 @@ export const PanelPage = (props: PanelPageProps) => {
355361
<ElementTree
356362
ref={refElementTree}
357363
height={elementTreeHeight}
364+
reverse={reverseTree}
358365
treeData={elementTree}
359366
selectedKeys={selectedUUIDs}
360367
// expandedKeys={expandedElementKeys}

0 commit comments

Comments
 (0)
0