Siklos/svg-layout-designer-react
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Implement Highlight on symbols

Browse source
This commit is contained in:
Carl Fuchs 2023-02-09 15:30:31 +01:00
parent c6c4bd1e32
commit 579422653b
7 changed files with 138 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/Components/SVG/SVG.tsx
View file

@ -1,13 +1,14 @@
import * as React from 'react';
import { ReactSVGPanZoom, Tool, TOOL_PAN, Value } from 'react-svg-pan-zoom';
import { ReactSVGPanZoom, type Tool, TOOL_PAN, type Value } from 'react-svg-pan-zoom';
import { Container } from './Elements/Container';
import { IContainerModel } from '../../Interfaces/IContainerModel';
import { Selector } from './Elements/Selector/Selector';
import { type IContainerModel } from '../../Interfaces/IContainerModel';
import { SelectorContainer } from './Elements/SelectorContainer/SelectorContainer';
import { DepthDimensionLayer } from './Elements/DepthDimensionLayer';
import { MAX_FRAMERATE, SHOW_DIMENSIONS_PER_DEPTH } from '../../utils/default';
import { SymbolLayer } from './Elements/SymbolLayer';
import { ISymbolModel } from '../../Interfaces/ISymbolModel';
import { type ISymbolModel } from '../../Interfaces/ISymbolModel';
import { DimensionLayer } from './Elements/DimensionLayer';
import { SelectorSymbol } from './Elements/SelectorSymbol/SelectorSymbol';
interface ISVGProps {
className?: string
@ -17,9 +18,12 @@ interface ISVGProps {
height: number
containers: Map<string, IContainerModel>
children: IContainerModel
selected?: IContainerModel
selectedContainer?: IContainerModel
symbols: Map<string, ISymbolModel>
selectedSymbol?: ISymbolModel
selectContainer: (containerId: string) => void
isComponentsOpen: boolean
isSymbolsOpen: boolean
}
export const ID = 'svg';
@ -49,8 +53,7 @@ export function SVG(props: ISVGProps): JSX.Element {
xmlns
};
let children: React.ReactNode | React.ReactNode[] = [];
children = <Container
const children: React.ReactNode | React.ReactNode[] = <Container
key={`container-${props.children.properties.id}`}
containers={props.containers}
model={props.children}
@ -99,7 +102,9 @@ export function SVG(props: ISVGProps): JSX.Element {
: null}
<DimensionLayer containers={props.containers} symbols={props.symbols} scale={scale} root={props.children} />
<SymbolLayer scale={scale} symbols={props.symbols} />
<Selector containers={props.containers} scale={scale} selected={props.selected} /> {/* leave this at the end so it can be removed during the svg export */}
{/* leave this at the end so it can be removed during the svg export */}
{ props.isComponentsOpen ? <SelectorContainer containers={props.containers} scale={scale} selected={props.selectedContainer} /> : null }
{ props.isSymbolsOpen ? <SelectorSymbol symbols={props.symbols} scale={scale} selected={props.selectedSymbol} /> : null }
</svg>
</ReactSVGPanZoom>
</div>