-
Notifications
You must be signed in to change notification settings - Fork 286
/
svgViewer.tsx
111 lines (99 loc) · 3.91 KB
/
svgViewer.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
'use strict';
import * as React from 'react';
import { POSITION_TOP, ReactSVGPanZoom, Tool, Value } from 'react-svg-pan-zoom';
import { SvgLoader } from 'react-svgmt';
import { AutoSizer } from 'react-virtualized';
import './svgViewer.css';
interface ISvgViewerProps {
svg: string;
id: string; // Unique identified for this svg (in case they are the same)
baseTheme: string;
themeMatplotlibPlots: boolean;
size: { width: string; height: string };
defaultValue: Value | undefined;
tool: Tool;
changeValue(value: Value): void;
}
interface ISvgViewerState {
value: Value;
tool: Tool;
}
export class SvgViewer extends React.Component<ISvgViewerProps, ISvgViewerState> {
private svgPanZoomRef: React.RefObject<ReactSVGPanZoom> = React.createRef<ReactSVGPanZoom>();
constructor(props: ISvgViewerProps) {
super(props);
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
this.state = { value: props.defaultValue ? props.defaultValue : ({} as Value), tool: props.tool };
}
public override componentDidUpdate(prevProps: ISvgViewerProps) {
// May need to update state if props changed
if (prevProps.defaultValue !== this.props.defaultValue || this.props.id !== prevProps.id) {
this.setState({
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
value: this.props.defaultValue ? this.props.defaultValue : ({} as Value),
tool: this.props.tool
});
} else if (this.props.tool !== this.state.tool) {
this.setState({ tool: this.props.tool });
}
}
public move(offsetX: number, offsetY: number) {
if (this.svgPanZoomRef && this.svgPanZoomRef.current) {
this.svgPanZoomRef.current.pan(offsetX, offsetY);
}
}
public zoom(amount: number) {
if (this.svgPanZoomRef && this.svgPanZoomRef.current) {
this.svgPanZoomRef.current.zoomOnViewerCenter(amount);
}
}
public override render() {
const plotBackground = this.props.themeMatplotlibPlots ? 'var(--vscode-notifications-background)' : 'white';
return (
<AutoSizer>
{({ height, width }) =>
width === 0 || height === 0 ? null : (
<ReactSVGPanZoom
ref={this.svgPanZoomRef}
width={width}
height={height}
toolbarProps={{ position: POSITION_TOP }}
detectAutoPan={true}
tool={this.state.tool}
value={this.state.value}
onChangeTool={this.changeTool}
onChangeValue={this.changeValue}
customToolbar={this.renderToolbar}
customMiniature={this.renderMiniature}
SVGBackground={'transparent'}
background={plotBackground}
detectWheel={true}
>
<svg width={this.props.size.width} height={this.props.size.height}>
<SvgLoader svgXML={this.props.svg} />
</svg>
</ReactSVGPanZoom>
)
}
</AutoSizer>
);
}
private changeTool = (tool: Tool) => {
this.setState({ tool });
};
private changeValue = (value: Value) => {
this.setState({ value });
this.props.changeValue(value);
};
private renderToolbar = () => {
// Hide toolbar too
return <div />;
};
private renderMiniature = () => {
return (
<div /> // Hide miniature
);
};
}