Skip to content

Commit

Permalink
lint
Browse files Browse the repository at this point in the history
  • Loading branch information
@chgibb
chgibb committed Aug 25, 2019
1 parent 0a60ce2 commit 1665da8
Show file tree
Hide file tree
Showing 7 changed files with 160 additions and 129 deletions.
8 changes: 4 additions & 4 deletions src/circularGenomeBuilderRenderer.tsx
View file
Expand Up @@ -2,12 +2,12 @@ import * as electron from "electron";
const ipc = electron.ipcRenderer;
import * as React from "react";

import { GetKeyEvent, KeySubEvent } from "./req/ipcEvents";
import { makeWindowDockable } from "./req/renderer/dock";
import {GetKeyEvent, KeySubEvent} from "./req/ipcEvents";
import {makeWindowDockable} from "./req/renderer/dock";
import "./req/renderer/styles/defaults";
import "./req/renderer/commonBehaviour";
import { CircularGenomeBuilderViewProps, CircularGenomeBuilderView } from './req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView';
import { renderAppRoot } from './req/renderer/renderAppRoot';
import {CircularGenomeBuilderViewProps, CircularGenomeBuilderView} from "./req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView";
import {renderAppRoot} from "./req/renderer/renderAppRoot";

class CircularGenomeBuilderApp extends React.Component<{},CircularGenomeBuilderViewProps>
{
Expand Down
54 changes: 31 additions & 23 deletions src/req/renderer/views/circularGenomeBuilderView/circularGenomeBuilderView.tsx
View file
Expand Up @@ -2,19 +2,21 @@ import * as electron from "electron";
const ipc = electron.ipcRenderer;

import * as React from "react";
import { AppBar } from '../../components/appBar';
import { Toolbar } from '../../components/toolBar';
import { IconButton } from '../../components/iconButton';
import { MenuRounded } from '../../components/icons/menuRounded';
import { white } from '../../styles/colours';
import { CircularFigure } from '../../circularFigure/circularFigure';
import { Fasta } from '../../../fasta';
import { SaveKeyEvent } from '../../../ipcEvents';
import { CircularGenome } from './containers/circularGenome/circularGenome';
import { DonutLargeOutlined } from '../../components/icons/donutLargeOutlined';
import { WavesOutlined } from '../../components/icons/wavesOutlined';
import { FigureSelectOverlay } from './containers/overlays/figureSelectOverlay';
import { appBar } from './containers/styles/appBar';

import {AppBar} from "../../components/appBar";
import {Toolbar} from "../../components/toolBar";
import {IconButton} from "../../components/iconButton";
import {MenuRounded} from "../../components/icons/menuRounded";
import {white} from "../../styles/colours";
import {CircularFigure} from "../../circularFigure/circularFigure";
import {Fasta} from "../../../fasta";
import {SaveKeyEvent} from "../../../ipcEvents";
import {DonutLargeOutlined} from "../../components/icons/donutLargeOutlined";
import {WavesOutlined} from "../../components/icons/wavesOutlined";

import {CircularGenome} from "./containers/circularGenome/circularGenome";
import {FigureSelectOverlay} from "./containers/overlays/figureSelectOverlay";
import {appBar} from "./containers/styles/appBar";


export interface CircularGenomeBuilderViewState {
Expand All @@ -29,15 +31,17 @@ export interface CircularGenomeBuilderViewProps {

export class CircularGenomeBuilderView extends React.Component<CircularGenomeBuilderViewProps, CircularGenomeBuilderViewState>
{
public constructor(props: CircularGenomeBuilderViewProps) {
public constructor(props: CircularGenomeBuilderViewProps)
{
super(props);

this.state = {
figureSelectDrawerOpen: false,
} as CircularGenomeBuilderViewState;
}

public newFigure(fasta: Fasta): void {
public newFigure(fasta: Fasta): void
{
ipc.send(
"saveKey",
{
Expand All @@ -50,16 +54,18 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui

}

public render(): JSX.Element {
public render(): JSX.Element
{
return (
<React.Fragment>
<AppBar position="fixed" className={appBar}>
<Toolbar>
<IconButton
edge="start"
color="primary"
classes={{ colorPrimary: white }}
onClick={() => {
classes={{colorPrimary: white}}
onClick={() =>
{
this.setState({
figureSelectDrawerOpen: !this.state.figureSelectDrawerOpen
});
Expand All @@ -70,28 +76,30 @@ export class CircularGenomeBuilderView extends React.Component<CircularGenomeBui
<IconButton
edge="start"
color="primary"
classes={{ colorPrimary: white }}
classes={{colorPrimary: white}}
>
<DonutLargeOutlined />
</IconButton>
<IconButton
edge="start"
color="primary"
classes={{ colorPrimary: white }}
classes={{colorPrimary: white}}
>
<WavesOutlined />
</IconButton>
</Toolbar>
</AppBar>
<FigureSelectOverlay builder={this} />
{
this.props.figures.map((x) => {
if (x.uuid == this.state.selectedFigure) {
this.props.figures.map((x) =>
{
if (x.uuid == this.state.selectedFigure)
{
return (
<CircularGenome
figure={x}
/>
)
);
}
return null;
})
Expand Down
12 changes: 7 additions & 5 deletions ...req/renderer/views/circularGenomeBuilderView/containers/circularGenome/circularGenome.tsx
View file
@@ -1,9 +1,10 @@
import * as React from "react";

import { CircularFigure, getBaseFigureTemplateFromCache, assembleCompilableBaseFigureTemplates } from '../../../../circularFigure/circularFigure';
import { Plasmid } from '../../../../../ngplasmid/lib/plasmid';
import { Layer } from './layer';
import { Node, loadFromString } from '../../../../../ngplasmid/lib/html';
import {CircularFigure, getBaseFigureTemplateFromCache, assembleCompilableBaseFigureTemplates} from "../../../../circularFigure/circularFigure";
import {Plasmid} from "../../../../../ngplasmid/lib/plasmid";
import {Node, loadFromString} from "../../../../../ngplasmid/lib/html";

import {Layer} from "./layer";

export interface CircularGenomeState
{
Expand Down Expand Up @@ -89,7 +90,8 @@ export class CircularGenome extends React.Component<CircularGenomeProps,Circular
return (
<React.Fragment>
{
this.props.figure.visibleLayers.map((layer) => {
this.props.figure.visibleLayers.map((layer) =>
{
return (
<Layer
plasmidCache={this.state.plasmidCache}
Expand Down
31 changes: 20 additions & 11 deletions src/req/renderer/views/circularGenomeBuilderView/containers/circularGenome/layer.tsx
View file
@@ -1,7 +1,7 @@
import * as React from "react";

import { CircularFigure, renderSVGToCanvas } from '../../../../circularFigure/circularFigure';
import { Plasmid } from '../../../../../ngplasmid/lib/plasmid';
import {CircularFigure, renderSVGToCanvas} from "../../../../circularFigure/circularFigure";
import {Plasmid} from "../../../../../ngplasmid/lib/plasmid";

export interface LayerProps {
plasmidCache: Array<{ uuid: string, plasmid: Plasmid }>;
Expand All @@ -14,7 +14,8 @@ export class Layer extends React.Component<LayerProps, {}>
{
private canvasRef = React.createRef<HTMLDivElement>();
private canvas = document.createElement("canvas");
public constructor(props: LayerProps) {
public constructor(props: LayerProps)
{
super(props);

this.updateCanvas = this.updateCanvas.bind(this);
Expand All @@ -23,21 +24,26 @@ export class Layer extends React.Component<LayerProps, {}>
}


public async updateCanvas() {
let plasmid = this.props.plasmidCache.find((x) => {
public async updateCanvas()
{
let plasmid = this.props.plasmidCache.find((x) =>
{
if (x.uuid == this.props.target)
return true;
return false;
});

if (!plasmid) {
if (!plasmid)
{
this.props.loadPlasmid(this.props.target);
}

else if (plasmid && this.canvas) {
else if (plasmid && this.canvas)
{
let ctx: CanvasRenderingContext2D | null = this.canvas.getContext("2d");

if (ctx) {
if (ctx)
{
this.canvas.width = this.props.figure.width;
this.canvas.height = this.props.figure.height;
console.log(plasmid.plasmid.renderStart() + plasmid.plasmid.renderEnd());
Expand All @@ -46,15 +52,17 @@ export class Layer extends React.Component<LayerProps, {}>
}
}

public componentDidMount() {
public componentDidMount()
{
if(this.canvasRef.current)
{
this.canvasRef.current.appendChild(this.canvas);
this.updateCanvas();
}
}

public componentDidUpdate() {
public componentDidUpdate()
{
this.updateCanvas();
}

Expand All @@ -68,7 +76,8 @@ export class Layer extends React.Component<LayerProps, {}>
return true;
}

public render(): JSX.Element {
public render(): JSX.Element
{
console.log("render layer");
return (
<React.Fragment>
Expand Down
54 changes: 31 additions & 23 deletions src/req/renderer/views/circularGenomeBuilderView/containers/overlays/figureSelectOverlay.tsx
View file
@@ -1,31 +1,34 @@
import * as React from "react";

import { CircularGenomeBuilderView } from '../../circularGenomeBuilderView';
import { GridWrapper } from '../../../../containers/gridWrapper';
import { Grid } from '../../../../components/grid';
import { Typography } from '../../../../components/typography';
import { IconButton } from '../../../../components/iconButton';
import { AddBox } from '../../../../components/icons/addBox';
import { Overlay } from './overlay';
import {CircularGenomeBuilderView} from "../../circularGenomeBuilderView";
import {GridWrapper} from "../../../../containers/gridWrapper";
import {Grid} from "../../../../components/grid";
import {Typography} from "../../../../components/typography";
import {IconButton} from "../../../../components/iconButton";
import {AddBox} from "../../../../components/icons/addBox";

import {Overlay} from "./overlay";

export interface FigureSelectOverlayProps {
builder: CircularGenomeBuilderView;
}

export function FigureSelectOverlay(props: FigureSelectOverlayProps): JSX.Element {
export function FigureSelectOverlay(props: FigureSelectOverlayProps): JSX.Element
{
return (
<Overlay
kind="drawerLeft"
onClose ={ () => {
props.builder.setState({
figureSelectDrawerOpen: false
});
}}
kind="drawerLeft"
onClose ={ () =>
{
props.builder.setState({
figureSelectDrawerOpen: false
});
}}
open={props.builder.state.figureSelectDrawerOpen}
>
<div>
<GridWrapper>
<div style={{ marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh" }}>
<div style={{marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh"}}>
<Grid container spacing={4} justify="center">
<Grid item>
<Typography variant="h5">Open a Figure</Typography>
Expand All @@ -34,18 +37,20 @@ export function FigureSelectOverlay(props: FigureSelectOverlayProps): JSX.Elemen
</div>
</GridWrapper>
{
props.builder.props.fastas.map((fasta) => {
props.builder.props.fastas.map((fasta) =>
{
return (
<div>
<GridWrapper>
<div style={{ marginLeft: "1vh", marginBottom: "1vh" }}>
<div style={{marginLeft: "1vh", marginBottom: "1vh"}}>
<Grid container direction="row" spacing={1} justify="flex-start">
<Grid item>
<Typography variant="h6">{fasta.alias}</Typography>
</Grid>
<Grid item>
<IconButton
onClick={() => {
onClick={() =>
{
props.builder.newFigure(fasta);
}}
>
Expand All @@ -56,14 +61,17 @@ export function FigureSelectOverlay(props: FigureSelectOverlayProps): JSX.Elemen
</div>
</GridWrapper>
{
props.builder.props.figures.map((figure) => {
if (fasta.uuid == figure.uuidFasta) {
props.builder.props.figures.map((figure) =>
{
if (fasta.uuid == figure.uuidFasta)
{
return (
<GridWrapper>
<div style={{ marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh" }}>
<div style={{marginRight: "1vh", marginLeft: "1vh", marginBottom: "1vh"}}>
<Grid container spacing={4} justify="center">
<Grid item>
<Typography variant="caption" onClick={() => {
<Typography variant="caption" onClick={() =>
{
props.builder.setState({
selectedFigure: figure.uuid,
figureSelectDrawerOpen : false
Expand All @@ -79,7 +87,7 @@ export function FigureSelectOverlay(props: FigureSelectOverlayProps): JSX.Elemen
})
}
</div>
)
);
})
}
</div>
Expand Down

0 comments on commit 1665da8

Please sign in to comment.