diff --git a/src/mol-geo/geometry/direct-volume/direct-volume.ts b/src/mol-geo/geometry/direct-volume/direct-volume.ts
index a2a660b959bdfcc24a1a7a8b8d13f72cd97c9133..a5eb39583a68a84953a168e815ad7ae25f380ce1 100644
--- a/src/mol-geo/geometry/direct-volume/direct-volume.ts
+++ b/src/mol-geo/geometry/direct-volume/direct-volume.ts
@@ -72,7 +72,6 @@ export namespace DirectVolume {
...Geometry.Params,
isoValue: PD.Numeric(0.22, { min: -1, max: 1, step: 0.01 }),
renderMode: PD.Select('isosurface', RenderModeOptions),
- // controlPoints: PD.Text('0.19:0.1, 0.2:0.5, 0.21:0.1, 0.4:0.3'),
controlPoints: PD.LineGraph([Vec2.create(0.19, 0.1), Vec2.create(0.2, 0.5), Vec2.create(0.21, 0.1), Vec2.create(0.4, 0.3)]),
}
export type Params = typeof Params
diff --git a/src/mol-plugin/skin/base/components/canvas.scss b/src/mol-plugin/skin/base/components/line-graph.scss
similarity index 100%
rename from src/mol-plugin/skin/base/components/canvas.scss
rename to src/mol-plugin/skin/base/components/line-graph.scss
diff --git a/src/mol-plugin/skin/base/ui.scss b/src/mol-plugin/skin/base/ui.scss
index c54504fde02fe56d1978816d2a11856e8a3acf98..7610eb8782137e39a2d45cdf5767724eddfcc5d7 100644
--- a/src/mol-plugin/skin/base/ui.scss
+++ b/src/mol-plugin/skin/base/ui.scss
@@ -41,4 +41,4 @@
@import 'components/toast';
@import 'components/help';
@import 'components/temp';
-@import 'components/canvas.scss';
\ No newline at end of file
+@import 'components/line-graph.scss';
\ No newline at end of file
diff --git a/src/mol-plugin/ui/controls/Canvas/CanvasComponent.tsx b/src/mol-plugin/ui/controls/LineGraph/LineGraphComponent.tsx
similarity index 51%
rename from src/mol-plugin/ui/controls/Canvas/CanvasComponent.tsx
rename to src/mol-plugin/ui/controls/LineGraph/LineGraphComponent.tsx
index 7e2a273864199af3cc12103b8a4923a1a3693293..5da52c5aba6b0d63180c3c12cbed9610c8311d2c 100644
--- a/src/mol-plugin/ui/controls/Canvas/CanvasComponent.tsx
+++ b/src/mol-plugin/ui/controls/LineGraph/LineGraphComponent.tsx
@@ -8,79 +8,19 @@ import PointComponent from './PointComponent';
import * as React from 'react';
import { Vec2 } from 'mol-math/linear-algebra';
-// interface Line {
-// x1: number;
-// x2: number;
-// y1: number;
-// y2: number;
-// };
-
-// interface Rect {
-// x: number;
-// y: number;
-// }
-
-// interface TextLabel {
-// x: number;
-// y: number;
-// }
-
-interface CanvasComponentState {
+interface LineGraphComponentState {
points: Vec2[],
- selectedPoint: any,
- selected: number | undefined,
+ selected?: number,
copyPoint: any,
updatedX: number,
updatedY: number,
}
-export default class CanvasComponent extends React.Component<any, CanvasComponentState> {
+export default class LineGraphComponent extends React.Component<any, LineGraphComponentState> {
private myRef:any;
private height: number;
private width: number;
private padding: number;
- // private topLine: Line;
- // private bottomLine: Line;
- // private rightLine: Line;
- // private leftLine: Line;
- // private normalizedXLabels: Point[];
- // private normalizedYLabels: Point[];
- // private normalizedRect: Rect;
- // private normalizedLabel: TextLabel;
- // private normalizedInfoPoint: Point;
- // private normalizedInfoLabel: Point;
- // private label: TextLabel = {x: 0, y: 0.1};
- // private infoPoint = {x: 0.95, y: 0.5};
- // private infoLabel = {x: 0.945, y: 0.2};
- // private rainbowRect: Rect = {x: 0.0, y: 0.5};
- // private xLabel: Point[] = [
- // {x: 0, y: 0.65},
- // {x: 0.07, y: 0.65},
- // {x: 0.17, y: 0.65},
- // {x: 0.27, y: 0.65},
- // {x: 0.37, y: 0.65},
- // {x: 0.47, y: 0.65},
- // {x: 0.57, y: 0.65},
- // {x: 0.67, y: 0.65},
- // {x: 0.77, y: 0.65},
- // {x: 0.87, y: 0.65},
- // {x: 0.97, y: 0.65},
- // ];
-
- // private yLabel: Point[] = [
- // {x: 0.45, y: 0},
- // {x: 0.45, y: 0.1},
- // {x: 0.45, y: 0.2},
- // {x: 0.45, y: 0.3},
- // {x: 0.45, y: 0.4},
- // {x: 0.45, y: 0.5},
- // {x: 0.45, y: 0.6},
- // {x: 0.45, y: 0.7},
- // {x: 0.45, y: 0.8},
- // {x: 0.45, y: 0.9},
- // {x: 0.45, y: 1},
- // ];
-
constructor(props: any) {
super(props);
@@ -90,7 +30,6 @@ export default class CanvasComponent extends React.Component<any, CanvasComponen
Vec2.create(0, 0),
Vec2.create(1, 0)
],
- selectedPoint: undefined,
selected: undefined,
copyPoint: undefined,
updatedX: 0,
@@ -99,60 +38,6 @@ export default class CanvasComponent extends React.Component<any, CanvasComponen
this.height = 400;
this.width = 600;
this.padding = 70;
- // this.normalizedXLabels = this.normalizeXLabel(this.xLabel);
- // this.normalizedYLabels = this.normalizeYLabel(this.yLabel);
- // this.topLine = {
- // x1: this.padding/2,
- // x2: this.width+this.padding/2,
- // y1: this.padding/2,
- // y2: this.padding/2
- // };
- // this.rightLine = {
- // x1: this.width+this.padding/2,
- // x2: this.width+this.padding/2,
- // y1: this.padding/2,
- // y2: this.height+this.padding/2
- // };
- // this.bottomLine = {
- // x1: this.padding/2,
- // x2: this.width+this.padding/2,
- // y1: this.height+this.padding/2,
- // y2: this.height+this.padding/2
- // };
- // this.leftLine = {
- // x1: this.padding/2,
- // x2: this.padding/2,
- // y1: this.padding/2,
- // y2: this.height+this.padding/2
- // };
- // this.normalizedLabel = this.normalizeGraphLabel(
- // this.label,
- // this.padding/2,
- // this.height+this.padding/2,
- // this.width+this.padding/2,
- // this.height+this.padding
- // );
- // this.normalizedInfoPoint = this.normalizeGraphLabel(
- // this.infoPoint,
- // this.padding/2,
- // this.height+this.padding/2,
- // this.width+this.padding/2,
- // this.height+this.padding
- // );
- // this.normalizedInfoLabel = this.normalizeGraphLabel(
- // this.infoLabel,
- // this.padding/2,
- // this.height+this.padding/2,
- // this.width+this.padding/2,
- // this.height+this.padding
- // );
- // this.normalizedRect = this.normalizeGraphLabel(
- // this.rainbowRect,
- // this.padding/2,
- // 0,
- // this.width+this.padding/2,
- // this.padding/2
- // );
for (const point of this.props.data){
this.state.points.push(point);
@@ -172,7 +57,6 @@ export default class CanvasComponent extends React.Component<any, CanvasComponen
});
this.handleDrag = this.handleDrag.bind(this);
- this.handleClickCanvas = this.handleClickCanvas.bind(this);
this.handleDoubleClick = this.handleDoubleClick.bind(this);
this.refCallBack = this.refCallBack.bind(this);
this.handlePointUpdate = this.handlePointUpdate.bind(this);
@@ -182,29 +66,16 @@ export default class CanvasComponent extends React.Component<any, CanvasComponen
public render() {
const points = this.renderPoints();
const ghostPoint = this.state.copyPoint;
- const selectedPoint = this.state.selectedPoint;
return ([
- <div key="canvas" id="canvas">
- <svg
- id="svg"
+ <div key="LineGraph">
+ <svg
className="msp-canvas"
ref={this.refCallBack}
viewBox={`0 0 ${this.width+this.padding} ${this.height+this.padding}`}
onMouseMove={this.handleDrag}
onMouseUp={this.handlePointUpdate}
- onClick={this.handleClickCanvas}
onDoubleClick={this.handleDoubleClick}>
- {/* <text x={this.normalizedLabel.x} y={this.normalizedLabel.y} fontSize="250%">YOUR LABEL HERE</text> */}
- {/* <InfoComponent
- key="rootInfo"
- cx={this.normalizedInfoPoint.x}
- cy={this.normalizedInfoPoint.y}
- x={this.normalizedInfoLabel.x}
- y={this.normalizedInfoLabel.y}
- fill="white"
- stroke="black"
- strokeWidth="5"
- /> */}
+
<g stroke="black" fill="black">
<Poly
data={this.state.points}
@@ -214,39 +85,7 @@ export default class CanvasComponent extends React.Component<any, CanvasComponen
padding={this.padding}/>
{points}
{ghostPoint}
- {selectedPoint}
-
- {/* <line x1={this.topLine.x1} x2={this.topLine.x2} y1={this.topLine.y1} y2={this.topLine.y2} stroke="black" strokeWidth="5" strokeLinecap="square"/>
- <line x1={this.bottomLine.x1} x2={this.bottomLine.x2} y1={this.bottomLine.y1} y2={this.bottomLine.y2} stroke="black" strokeWidth="5" strokeLinecap="square"/>
- <line x1={this.rightLine.x1} x2={this.rightLine.x2} y1={this.rightLine.y1} y2={this.rightLine.y2} stroke="black" strokeWidth="5" strokeLinecap="square"/>
- <line x1={this.leftLine.x1} x2={this.leftLine.x2} y1={this.leftLine.y1} y2={this.leftLine.y2} stroke="black" strokeWidth="5" strokeLinecap="square"/> */}
- </g>
- {/* <g className="x-labels">
- <text x={this.normalizedXLabels[0].x} y={this.normalizedXLabels[0].y} fontSize="250%">0</text>
- <text x={this.normalizedXLabels[1].x} y={this.normalizedXLabels[1].y} fontSize="250%">0.1</text>
- <text x={this.normalizedXLabels[2].x} y={this.normalizedXLabels[2].y} fontSize="250%">0.2</text>
- <text x={this.normalizedXLabels[3].x} y={this.normalizedXLabels[3].y} fontSize="250%">0.3</text>
- <text x={this.normalizedXLabels[4].x} y={this.normalizedXLabels[4].y} fontSize="250%">0.4</text>
- <text x={this.normalizedXLabels[5].x} y={this.normalizedXLabels[5].y} fontSize="250%">0.5</text>
- <text x={this.normalizedXLabels[6].x} y={this.normalizedXLabels[6].y} fontSize="250%">0.6</text>
- <text x={this.normalizedXLabels[7].x} y={this.normalizedXLabels[7].y} fontSize="250%">0.7</text>
- <text x={this.normalizedXLabels[8].x} y={this.normalizedXLabels[8].y} fontSize="250%">0.8</text>
- <text x={this.normalizedXLabels[9].x} y={this.normalizedXLabels[9].y} fontSize="250%">0.9</text>
- <text x={this.normalizedXLabels[10].x} y={this.normalizedXLabels[10].y} fontSize="250%">1</text>
</g>
- <g className="y-labels">
- <text x={this.normalizedYLabels[0].x} y={this.normalizedYLabels[0].y} fontSize="250%">0</text>
- <text x={this.normalizedYLabels[1].x} y={this.normalizedYLabels[1].y} fontSize="250%">0.1</text>
- <text x={this.normalizedYLabels[2].x} y={this.normalizedYLabels[2].y} fontSize="250%">0.2</text>
- <text x={this.normalizedYLabels[3].x} y={this.normalizedYLabels[3].y} fontSize="250%">0.3</text>
- <text x={this.normalizedYLabels[4].x} y={this.normalizedYLabels[4].y} fontSize="250%">0.4</text>
- <text x={this.normalizedYLabels[5].x} y={this.normalizedYLabels[5].y} fontSize="250%">0.5</text>
- <text x={this.normalizedYLabels[6].x} y={this.normalizedYLabels[6].y} fontSize="250%">0.6</text>
- <text x={this.normalizedYLabels[7].x} y={this.normalizedYLabels[7].y} fontSize="250%">0.7</text>
- <text x={this.normalizedYLabels[8].x} y={this.normalizedYLabels[8].y} fontSize="250%">0.8</text>
- <text x={this.normalizedYLabels[9].x} y={this.normalizedYLabels[9].y} fontSize="250%">0.9</text>
- <text x={this.normalizedYLabels[9].x} y={this.normalizedYLabels[10].y} fontSize="250%">1</text>
- </g> */}
<defs>
<linearGradient id="Gradient">
@@ -257,8 +96,6 @@ export default class CanvasComponent extends React.Component<any, CanvasComponen
<stop offset="100%" stopColor="#041ae0"/>
</linearGradient>
</defs>
-
- {/* <rect id="rect1" x={this.normalizedRect.x} y={this.normalizedRect.y} rx="15" ry="15" width={this.width} height="30" fill="url(#Gradient)"/> */}
</svg>
</div>,
@@ -359,31 +196,6 @@ export default class CanvasComponent extends React.Component<any, CanvasComponen
event.preventDefault();
}
- // private handleClickPoint = (id:number) => (event: any) => {
- // const selectedPointX = this.state.points[id][0];
- // const selectedPointY = this.state.points[id][1];
- // const normalizePoint = this.normalizePoint(Vec2.create(selectedPointX, selectedPointY));
- // const selectedPoint = <PointComponent
- // key={id}
- // id={id}
- // x={normalizePoint[0]}
- // y={normalizePoint[1]}
- // nX={selectedPointX}
- // nY={selectedPointY}
- // selected={true}
- // delete={this.deletePoint}
- // onMouseDown={this.handleMouseDown(id)}
- // />
-
- // this.setState({selectedPoint});
-
- // event.stopPropagation();
- // }
-
- private handleClickCanvas() {
- this.setState({selectedPoint: undefined});
- }
-
private handleDoubleClick(event: any) {
let newPoint;
const pt = this.myRef.createSVGPoint();
@@ -448,39 +260,6 @@ export default class CanvasComponent extends React.Component<any, CanvasComponen
return newPoint;
}
- // private normalizeGraphLabel(point: Point, minX: number, minY: number, maxX: number, maxY: number) {
- // const normalizedX = (point.x*(maxX-minX))+minX;
- // const normalizedY = (point.y*(maxY-minY))+minY;
- // const reverseY = (this.height+this.padding)-normalizedY;
-
- // return {x: normalizedX, y: reverseY};
- // }
-
- // private normalizeXLabel(points: Point[]) {
- // const minX = this.padding/2;
- // const minY = 0;
- // const maxX = this.width+this.padding/2;
- // const maxY = this.padding/2;
- // const normalizedPoints: Point[] = [];
- // for(const point of points){
- // normalizedPoints.push(this.normalizeGraphLabel(point, minX, minY, maxX, maxY));
- // }
-
- // return normalizedPoints;
- // }
-
- // private normalizeYLabel(points: Point[]) {
- // const minX = 0;
- // const minY = this.padding/2;
- // const maxX = this.padding/2;
- // const maxY = this.height+this.padding/2;
- // const normalizedPoints: Point[] = [];
- // for(const point of points) {
- // normalizedPoints.push(this.normalizeGraphLabel(point, minX, minY, maxX, maxY));
- // }
- // return normalizedPoints;
- // }
-
private unNormalizePoint(point: Vec2) {
const min = this.padding/2;
const maxX = this.width+min;
@@ -516,7 +295,6 @@ export default class CanvasComponent extends React.Component<any, CanvasComponen
delete={this.deletePoint}
onmouseover={this.props.onHover}
onMouseDown={this.handleMouseDown(i)}
- // onClick={this.handleClickPoint(i)}
/>);
}
}
diff --git a/src/mol-plugin/ui/controls/Canvas/PointComponent.tsx b/src/mol-plugin/ui/controls/LineGraph/PointComponent.tsx
similarity index 84%
rename from src/mol-plugin/ui/controls/Canvas/PointComponent.tsx
rename to src/mol-plugin/ui/controls/LineGraph/PointComponent.tsx
index 5da5f9a0ece84fe72f39fda805a4ebf276da9be9..e5a78c6e2b04acb58e397de1ac3d22ba65419832 100644
--- a/src/mol-plugin/ui/controls/Canvas/PointComponent.tsx
+++ b/src/mol-plugin/ui/controls/LineGraph/PointComponent.tsx
@@ -3,19 +3,7 @@ import * as React from 'react';
import { Vec2 } from 'mol-math/linear-algebra';
-// interface PointComponentProps {
-// id: number;
-// x: number;
-// y: number;
-// nX: number;
-// nY: number;
-// selected: boolean;
-// delete: any;
-// onMouseDown: any;
-// onClick: any;
-// }
-
-export default class PointComponent extends React.Component<any, any> {
+export default class PointComponent extends React.Component<any, {show: boolean}> {
constructor(props: any){
super(props);
this.state = {show: false}
diff --git a/src/mol-plugin/ui/controls/parameters.tsx b/src/mol-plugin/ui/controls/parameters.tsx
index ecacbe9a7ca127ec2fbe4f025bef160540a6eb90..d0b106823985afb951ad51a531686346fb4c2ffe 100644
--- a/src/mol-plugin/ui/controls/parameters.tsx
+++ b/src/mol-plugin/ui/controls/parameters.tsx
@@ -7,14 +7,13 @@
import * as React from 'react'
-import CanvasComponent from './Canvas/CanvasComponent';
-
import { ParamDefinition as PD } from 'mol-util/param-definition';
import { camelCaseToWords } from 'mol-util/string';
import { ColorNames } from 'mol-util/color/tables';
import { Color } from 'mol-util/color';
import { Slider } from './slider';
import { Vec2 } from 'mol-math/linear-algebra';
+import LineGraphComponent from './LineGraph/LineGraphComponent';
export interface ParameterControlsProps<P extends PD.Params = PD.Params> {
params: P,
@@ -135,7 +134,7 @@ export class LineGraphControl extends React.PureComponent<ParamProps<PD.LineGrap
</div>
</div>
<div className='msp-control-offset' style={{ display: this.state.isExpanded ? 'block' : 'none' }}>
- <CanvasComponent
+ <LineGraphComponent
data={this.props.param.defaultValue}
onChange={this.onChange}
onHover={this.onHover}