fixed repositioning

chgibb · Aug 25, 2019 · da87b0c · da87b0c
1 parent 506e0f2
commit da87b0c
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 5 deletions.
diff --git a/src/req/renderer/components/icons/swapVertOutlined.ts b/src/req/renderer/components/icons/swapVertOutlined.ts
@@ -0,0 +1 @@
+export const SwapVertOutlined : typeof import("@material-ui/icons/SwapVertOutlined").default = require("@material-ui/icons/SwapVertOutlined").default;
diff --git a/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx b/src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx
@@ -17,11 +17,18 @@ import {WavesOutlined} from "../../components/icons/wavesOutlined";
 import {CircularGenome} from "./containers/circularGenome/circularGenome";
 import {FigureSelectOverlay} from "./containers/overlays/figureSelectOverlay";
 import {appBar} from "./containers/styles/appBar";
+import { SwapVertOutlined } from '../../components/icons/swapVertOutlined';
 
 
 export interface CircularGenomeBuilderViewState {
     figureSelectDrawerOpen: boolean;
     selectedFigure: string;
+    figurePosition : {
+        width : number,
+        height : number,
+        x : number,
+        y : number
+    }
 }
 
 export interface CircularGenomeBuilderViewProps {
@@ -37,7 +44,17 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
 
         this.state = {
             figureSelectDrawerOpen: false,
+            figurePosition : {
+                width : 0,
+                height : 0,
+                x : 0,
+                y : 0
+            }
         } as CircularGenomeBuilderViewState;
+
+        this.reposition = this.reposition.bind(this);
+
+        window.addEventListener("resize",this.reposition);
     }
 
     public newFigure(fasta: Fasta): void 
@@ -54,6 +71,38 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
 
     }
 
+    public reposition()
+    {
+        this.props.figures.map((x) => 
+                    {
+                        if (x.uuid == this.state.selectedFigure) 
+                        {
+                            this.setState({
+                                figurePosition: {
+                                    width : x.width,
+                                    height : x.height,
+                                    x : (document.documentElement.clientWidth/2) - (x.width/2),
+                                    y : (document.documentElement.clientHeight/2) - (x.height/2)
+                                }
+                            })
+                        }
+                    }
+                );
+    }
+
+    public componentDidUpdate(prevProps : CircularGenomeBuilderViewProps,prevState : CircularGenomeBuilderViewState)
+    {
+        if(prevState.selectedFigure != this.state.selectedFigure)
+        {
+            this.reposition();
+        }
+    }
+
+    public componentWillUnmount()
+    {
+        window.removeEventListener("resize",this.reposition);
+    }
+
     public render(): JSX.Element 
     {
         return (
@@ -78,14 +127,33 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
                             color="primary"
                             classes={{colorPrimary: white}}
                         >
-                            <DonutLargeOutlined />
+                            <DonutLargeOutlined 
+                                style={{
+                                    transform:"rotate(45deg)"
+                                }}
+                            />
+                        </IconButton>
+                        <IconButton
+                            edge="start"
+                            color="primary"
+                            classes={{colorPrimary: white}}
+                        >
+                            <WavesOutlined 
+                                style={{
+                                    transform:"rotate(45deg)"
+                                }}
+                            />
                         </IconButton>
                         <IconButton
                             edge="start"
                             color="primary"
                             classes={{colorPrimary: white}}
                         >
-                            <WavesOutlined />
+                            <SwapVertOutlined 
+                                style={{
+                                    transform:"rotate(-30deg)"
+                                }}
+                            />
                         </IconButton>
                     </Toolbar>
                 </AppBar>
@@ -98,6 +166,10 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
                             return (
                                 <CircularGenome
                                     figure={x}
+                                    width={this.state.figurePosition.width}
+                                    height={this.state.figurePosition.height}
+                                    x={this.state.figurePosition.x}
+                                    y={this.state.figurePosition.y}
                                 />
                             );
                         }

diff --git a/...req/renderer/views/circularGenomeBuilderView/containers/circularGenome/circularGenome.tsx b/...req/renderer/views/circularGenomeBuilderView/containers/circularGenome/circularGenome.tsx
@@ -14,6 +14,10 @@ export interface CircularGenomeState
 export interface CircularGenomeProps
 {
     figure : CircularFigure;
+    width : number;
+    height : number;
+    x : number;
+    y : number;
 }
 
 export class CircularGenome extends React.Component<CircularGenomeProps,CircularGenomeState>
@@ -98,6 +102,11 @@ export class CircularGenome extends React.Component<CircularGenomeProps,Circular
                                 figure={this.props.figure}
                                 target={layer}
                                 loadPlasmid={this.loadPlasmid}
+
+                                width={this.props.width}
+                                height={this.props.height}
+                                x={this.props.x}
+                                y={this.props.y}
                             />
                         );
                     })

diff --git a/src/req/renderer/views/circularGenomeBuilderView/containers/circularGenome/layer.tsx b/src/req/renderer/views/circularGenomeBuilderView/containers/circularGenome/layer.tsx
@@ -8,6 +8,10 @@ export interface LayerProps {
     figure: CircularFigure;
     target: string;
     loadPlasmid: (target: string) => void;
+    width : number;
+    height : number;
+    x : number;
+    y : number;
 }
 
 export class Layer extends React.Component<LayerProps, {}>
@@ -44,9 +48,12 @@ export class Layer extends React.Component<LayerProps, {}>
 
             if (ctx) 
             {
-                this.canvas.width = this.props.figure.width;
-                this.canvas.height = this.props.figure.height;
-                console.log(plasmid.plasmid.renderStart() + plasmid.plasmid.renderEnd());
+                this.canvas.style.position = "absolute";
+                this.canvas.setAttribute("width",`${this.props.width}`);
+                this.canvas.setAttribute("height",`${this.props.height}`);
+                this.canvas.style.left = `${this.props.x}px`;
+                this.canvas.style.top = `${this.props.y}px`;
+
                 await renderSVGToCanvas(plasmid.plasmid.renderStart() + plasmid.plasmid.renderEnd(), ctx);
             }
         }