-
+
);
};
diff --git a/src/wireframes/components/PagesView.tsx b/src/wireframes/components/PagesView.tsx
index c6c8bd0..776d3ce 100644
--- a/src/wireframes/components/PagesView.tsx
+++ b/src/wireframes/components/PagesView.tsx
@@ -7,10 +7,10 @@
*/
import { DragDropContext, Draggable, Droppable, DropResult } from '@hello-pangea/dnd';
-import { useDispatch } from 'react-redux';
import { useEventCallback, Vec2 } from '@app/core';
import { addDiagram, duplicateDiagram, getDiagramId, getFilteredDiagrams, moveDiagram, removeDiagram, selectDiagram, useStore } from '@app/wireframes/model';
import { vogues } from '@app/const';
+import { useAppDispatch } from '@app/store';
import { PageThumbnail, PageAdd, PageAction } from './menu';
import './styles/PagesView.scss';
@@ -26,7 +26,7 @@ export const PagesView = (props: PagesViewProps) => {
const { prevWidth, prevHeight } = props;
const viewSize = new Vec2(prevWidth, prevHeight);
- const dispatch = useDispatch();
+ const dispatch = useAppDispatch();
const diagramId = useStore(getDiagramId);
const diagrams = useStore(getFilteredDiagrams);
diff --git a/src/wireframes/components/RecentView.tsx b/src/wireframes/components/RecentView.tsx
index f07e03c..ae78943 100644
--- a/src/wireframes/components/RecentView.tsx
+++ b/src/wireframes/components/RecentView.tsx
@@ -8,15 +8,15 @@
import { Empty } from 'antd';
import * as React from 'react';
-import { useDispatch } from 'react-redux';
import { useEventCallback } from '@app/core';
import { texts } from '@app/const';
import { loadDiagramFromServer, RecentDiagram, useStore } from '@app/wireframes/model';
+import { useAppDispatch } from '@app/store';
import { RecentItem } from './menu';
import './styles/RecentView.scss';
export const RecentView = () => {
- const dispatch = useDispatch();
+ const dispatch = useAppDispatch();
const recent = useStore(x => x.loading.recentDiagrams);
const doLoad = useEventCallback((item: RecentDiagram) => {
diff --git a/src/wireframes/components/ShapeView.tsx b/src/wireframes/components/ShapeView.tsx
index f4b044b..bf72762 100644
--- a/src/wireframes/components/ShapeView.tsx
+++ b/src/wireframes/components/ShapeView.tsx
@@ -5,12 +5,12 @@
* 8 Nov 2023
*/
-import { useDispatch } from 'react-redux';
import { Button, Dropdown, Form, Input } from 'antd';
import type { MenuProps } from 'antd';
import { getDiagramId, useStore, addShape } from '@app/wireframes/model';
import * as React from 'react';
import { ArrowIcon, CircleIcon, FunctionIcon, ImageIcon, RectangleIcon, TableIcon, TextIcon, TriangleIcon, ShapesIcon, LinkIcon, HeadingIcon, SubHeadingIcon, ParagraphIcon, DiamondIcon, VectorIcon, LineUpIcon, BezierIcon } from '@app/icons/icon';
+import { useAppDispatch } from '@app/store';
import './styles/ShapeView.scss';
import { useState } from 'react';
import classNames from 'classnames';
@@ -18,7 +18,7 @@ import { FormModal, ShapeModal } from './modal/FormModal';
import { shapes } from '@app/const';
export const ShapeView = React.memo(() => {
- const dispatch = useDispatch();
+ const dispatch = useAppDispatch();
const selectedDiagramId = useStore(getDiagramId);
const [selectedCell, setSelectedCell] = useState(0);
const [isShapeModal, setIsShapeModal] = useState
('');
diff --git a/src/wireframes/components/ToolView.tsx b/src/wireframes/components/ToolView.tsx
index 8d89117..861d3f1 100644
--- a/src/wireframes/components/ToolView.tsx
+++ b/src/wireframes/components/ToolView.tsx
@@ -1,10 +1,10 @@
-import { DiagramItem, setAnimation } from '@app/wireframes/model';
+import { DiagramItem, DiagramItemSet, setAnimation } from '@app/wireframes/model';
import { ClipboardTool } from './tools/ClipboardTool';
import { TableTool } from './tools/TableTool';
import './styles/ToolView.scss';
import { AlignmentTool, GraphicTool, HistoryTool, LineTool, OrderingTool, TextTool, VisualTool, ZoomTool } from './tools';
import { Segmented } from 'antd';
-import { useDispatch } from 'react-redux';
+import { useAppDispatch } from '@app/store';
import { SegmentedValue } from "antd/es/segmented";
import { shapes } from '@app/const';
import { ModeType } from '../interface';
@@ -13,16 +13,17 @@ export interface ToolViewProps {
// Application's mode
mode: ModeType;
- // Item
- item: DiagramItem | null;
-
// Group
- set: DiagramItem[] | null;
+ set: DiagramItemSet | null;
}
export const ToolView = (props: ToolViewProps) => {
- const { item, set } = props;
- const dispatch = useDispatch();
+ const { set } = props;
+ const dispatch = useAppDispatch();
+
+ const item = set?.selectedItems[0];
+ const isMultiItems = set != null && set.selection.size > 1;
+ const isSingleItem = !(!item) && item != null;
const MoreTools = (props: {item: DiagramItem}) => {
const renderer = props.item.renderer;
@@ -91,10 +92,10 @@ export const ToolView = (props: ToolViewProps) => {
- 1) || item != null} />
- { (item != null) && }
- { (set != null && set.length > 1) && }
- { (item != null) && }
+
+ { isSingleItem && }
+ { isMultiItems && }
+ { isSingleItem && }
diff --git a/src/wireframes/components/actions/Components.tsx b/src/wireframes/components/actions/Components.tsx
index 32245aa..51d3acc 100644
--- a/src/wireframes/components/actions/Components.tsx
+++ b/src/wireframes/components/actions/Components.tsx
@@ -8,9 +8,11 @@
import { Button, Tooltip } from 'antd';
import { ButtonProps } from 'antd/lib/button';
+import { MenuItemType } from 'antd/lib/menu/hooks/useItems';
import * as React from 'react';
import { isMac, Shortcut, Types } from '@app/core';
import { UIAction } from './shared';
+import Icon from '@ant-design/icons';
type ActionDisplayMode = 'Icon' | 'IconLabel' | 'Label';
@@ -103,6 +105,14 @@ const ButtonContent = ({ displayMode, label, icon }: { icon?: string | JSX.Eleme
);
};
+function buildIcon(icon: string | JSX.Element | undefined, displayMode?: ActionDisplayMode) {
+ if (displayMode === 'Label') {
+ return null;
+ }
+
+ return Types.isString(icon) ? (