Changed the icons in the toolbar
This commit is contained in:
Eric NGUYEN
parent
14d74edf93
commit
4bb9e44b84
7 changed files with 7 additions and 74 deletions
|
|
@ -8,7 +8,7 @@ import { SymbolLayer } from './Elements/SymbolLayer';
|
|||
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
|
||||
import { DimensionLayer } from './Elements/DimensionLayer';
|
||||
import { SelectorSymbol } from './Elements/SelectorSymbol/SelectorSymbol';
|
||||
import { Toolbar } from './SVGReactPanZoom/ui-toolbar/Toolbar';
|
||||
import { Toolbar } from './SVGReactPanZoom/ui-toolbar/toolbar';
|
||||
|
||||
interface ISVGProps {
|
||||
className?: string
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
// credits https://materialdesignicons.com/icon/cursor-default-outline
|
||||
|
||||
export function IconCursor(): JSX.Element {
|
||||
return (
|
||||
<svg width={24} height={24} stroke="currentColor">
|
||||
<path
|
||||
d="M10.07,14.27C10.57,14.03 11.16,14.25 11.4,14.75L13.7,19.74L15.5,18.89L13.19,13.91C12.95,13.41 13.17,12.81 13.67,12.58L13.95,12.5L16.25,12.05L8,5.12V15.9L9.82,14.43L10.07,14.27M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
//credits https://materialdesignicons.com/icon/cursor-default-outline
|
||||
|
||||
export function IconFit(): JSX.Element {
|
||||
return (
|
||||
<svg width={24} height={24} stroke="currentColor">
|
||||
<path
|
||||
d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3zM3 9l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3zm6 12l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3 3 15v6zm12-6l-2.3 2.3-2.87-2.89-1.42 1.42 2.89 2.87L15 21h6z"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
//https://materialdesignicons.com/icon/cursor-move
|
||||
|
||||
export function IconPan(): JSX.Element {
|
||||
return (
|
||||
<svg width={24} height={24} stroke="currentColor">
|
||||
<path
|
||||
d="M13,6V11H18V7.75L22.25,12L18,16.25V13H13V18H16.25L12,22.25L7.75,18H11V13H6V16.25L1.75,12L6,7.75V11H11V6H7.75L12,1.75L16.25,6H13Z"/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
//https://material.io/icons/#ic_zoom_in
|
||||
|
||||
export function IconZoomIn(): JSX.Element {
|
||||
return (
|
||||
<svg width={24} height={24} stroke="currentColor">
|
||||
<g>
|
||||
<path
|
||||
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
|
||||
<path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import React from 'react';
|
||||
|
||||
//https://material.io/icons/#ic_zoom_out
|
||||
|
||||
export function IconZoomOut(): JSX.Element {
|
||||
return (
|
||||
<svg width={24} height={24} stroke="currentColor">
|
||||
<path
|
||||
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import { ArrowsPointingOutIcon, CursorArrowRaysIcon, HandRaisedIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon } from '@heroicons/react/24/outline';
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
|
|
@ -19,11 +20,6 @@ import {
|
|||
type ALIGN_RIGHT,
|
||||
type ToolbarPosition
|
||||
} from 'react-svg-pan-zoom';
|
||||
import { IconCursor } from './icon-cursor';
|
||||
import { IconFit } from './icon-fit';
|
||||
import { IconPan } from './icon-pan';
|
||||
import { IconZoomIn } from './icon-zoom-in';
|
||||
import { IconZoomOut } from './icon-zoom-out';
|
||||
import { ToolbarButton } from './toolbar-button';
|
||||
|
||||
interface IToolbarProps {
|
||||
|
|
@ -87,7 +83,7 @@ export function Toolbar({
|
|||
name="unselect-tools"
|
||||
title="Selection"
|
||||
onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleChangeTool(event, TOOL_NONE); } }>
|
||||
<IconCursor/>
|
||||
<CursorArrowRaysIcon/>
|
||||
</ToolbarButton>
|
||||
|
||||
<ToolbarButton
|
||||
|
|
@ -97,7 +93,7 @@ export function Toolbar({
|
|||
name="select-tool-pan"
|
||||
title="Pan"
|
||||
onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleChangeTool(event, TOOL_PAN); } }>
|
||||
<IconPan/>
|
||||
<HandRaisedIcon/>
|
||||
</ToolbarButton>
|
||||
|
||||
<ToolbarButton
|
||||
|
|
@ -107,7 +103,7 @@ export function Toolbar({
|
|||
name="select-tool-zoom-in"
|
||||
title="Zoom in"
|
||||
onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleChangeTool(event, TOOL_ZOOM_IN); } }>
|
||||
<IconZoomIn/>
|
||||
<MagnifyingGlassPlusIcon/>
|
||||
</ToolbarButton>
|
||||
|
||||
<ToolbarButton
|
||||
|
|
@ -117,7 +113,7 @@ export function Toolbar({
|
|||
name="select-tool-zoom-out"
|
||||
title="Zoom out"
|
||||
onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleChangeTool(event, TOOL_ZOOM_OUT); } }>
|
||||
<IconZoomOut/>
|
||||
<MagnifyingGlassMinusIcon/>
|
||||
</ToolbarButton>
|
||||
|
||||
<ToolbarButton
|
||||
|
|
@ -127,7 +123,7 @@ export function Toolbar({
|
|||
name="fit-to-viewer"
|
||||
title="Fit to viewer"
|
||||
onClick={ (event: React.MouseEvent | React.TouchEvent) => { handleFit(event); } }>
|
||||
<IconFit/>
|
||||
<ArrowsPointingOutIcon/>
|
||||
</ToolbarButton>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue