From a9bc28478e289a987bbefaeba9bfcf26338fa8f2 Mon Sep 17 00:00:00 2001 From: Matei Adriel Date: Tue, 16 Jul 2019 12:38:42 +0300 Subject: [PATCH] new file structure --- src/modules/core/components/Canvas.tsx | 11 +- src/modules/simulation/types/DeepPartial.ts | 1 - .../classes/Camera.ts | 2 +- .../classes/MouseVelocityManager.ts} | 4 +- .../classes/SimulationRenderer.ts | 113 ++++-------------- src/modules/simulationRenderer/constants.ts | 13 ++ .../simulationRenderer/helpers/clearCanvas.ts | 8 ++ .../helpers/drawPolygon.ts | 2 +- .../helpers/drawRotatedSquare.ts | 2 +- .../helpers/pointInSquare.ts | 3 +- .../helpers/projectPoint.ts | 2 +- .../helpers/renderGate.ts | 2 +- .../helpers/renderGateShadow.ts | 4 +- .../helpers/renderSimulation.ts | 36 ++++++ .../helpers/updateSimulation.ts | 19 +++ .../types/SimulationRendererOptions.ts | 11 ++ 16 files changed, 125 insertions(+), 108 deletions(-) delete mode 100644 src/modules/simulation/types/DeepPartial.ts rename src/modules/{simulation => simulationRenderer}/classes/Camera.ts (89%) rename src/modules/{simulation/classes/MouseManager.ts => simulationRenderer/classes/MouseVelocityManager.ts} (96%) rename src/modules/{simulation => simulationRenderer}/classes/SimulationRenderer.ts (56%) create mode 100644 src/modules/simulationRenderer/constants.ts create mode 100644 src/modules/simulationRenderer/helpers/clearCanvas.ts rename src/modules/{simulation => simulationRenderer}/helpers/drawPolygon.ts (84%) rename src/modules/{simulation => simulationRenderer}/helpers/drawRotatedSquare.ts (83%) rename src/modules/{simulation => simulationRenderer}/helpers/pointInSquare.ts (68%) rename src/modules/{simulation => simulationRenderer}/helpers/projectPoint.ts (78%) rename src/modules/{simulation => simulationRenderer}/helpers/renderGate.ts (79%) rename src/modules/{simulation => simulationRenderer}/helpers/renderGateShadow.ts (80%) create mode 100644 src/modules/simulationRenderer/helpers/renderSimulation.ts create mode 100644 src/modules/simulationRenderer/helpers/updateSimulation.ts create mode 100644 src/modules/simulationRenderer/types/SimulationRendererOptions.ts diff --git a/src/modules/core/components/Canvas.tsx b/src/modules/core/components/Canvas.tsx index 8013655..bf278c1 100644 --- a/src/modules/core/components/Canvas.tsx +++ b/src/modules/core/components/Canvas.tsx @@ -2,8 +2,10 @@ import React, { Component, createRef, Ref, RefObject } from 'react' import FluidCanvas, { MouseEventInfo } from './FluidCanvas' import loop from 'mainloop.js' import { Gate } from '../../simulation/classes/Gate' -import { SimulationRenderer } from '../../simulation/classes/SimulationRenderer' +import { SimulationRenderer } from '../../simulationRenderer/classes/SimulationRenderer' import { Subject } from 'rxjs' +import { renderSimulation } from '../../simulationRenderer/helpers/renderSimulation' +import { updateSimulation } from '../../simulationRenderer/helpers/updateSimulation' class Canvas extends Component { private canvasRef: RefObject = createRef() @@ -25,9 +27,10 @@ class Canvas extends Component { this.renderer.simulation.push(foo, bar) loop.setDraw(() => { - if (this.renderingContext) - this.renderer.render(this.renderingContext) - }).setUpdate(delta => this.renderer.update(delta)) + if (this.renderingContext) { + renderSimulation(this.renderingContext, this.renderer) + } + }).setUpdate(delta => updateSimulation(this.renderer, delta)) } public componentDidMount() { diff --git a/src/modules/simulation/types/DeepPartial.ts b/src/modules/simulation/types/DeepPartial.ts deleted file mode 100644 index 4e03aa8..0000000 --- a/src/modules/simulation/types/DeepPartial.ts +++ /dev/null @@ -1 +0,0 @@ -export type DeepPartial = { [key in keyof T]?: DeepPartial } diff --git a/src/modules/simulation/classes/Camera.ts b/src/modules/simulationRenderer/classes/Camera.ts similarity index 89% rename from src/modules/simulation/classes/Camera.ts rename to src/modules/simulationRenderer/classes/Camera.ts index 13c3112..ada67c3 100644 --- a/src/modules/simulation/classes/Camera.ts +++ b/src/modules/simulationRenderer/classes/Camera.ts @@ -1,4 +1,4 @@ -import { Transform, vector2 } from './Transform' +import { Transform, vector2 } from '../../simulation/classes/Transform' import { Screen } from '../../core/classes/Screen' import { relativeTo } from '../../vector2/helpers/basic' diff --git a/src/modules/simulation/classes/MouseManager.ts b/src/modules/simulationRenderer/classes/MouseVelocityManager.ts similarity index 96% rename from src/modules/simulation/classes/MouseManager.ts rename to src/modules/simulationRenderer/classes/MouseVelocityManager.ts index fd11066..145719c 100644 --- a/src/modules/simulation/classes/MouseManager.ts +++ b/src/modules/simulationRenderer/classes/MouseVelocityManager.ts @@ -1,9 +1,9 @@ import { Singleton } from '@eix-js/utils' import { MouseSubject } from '../../core/types/MouseSubject' -import { clamp } from '../helpers/clamp' +import { clamp } from '../../simulation/helpers/clamp' @Singleton -export class MouseManager { +export class MouseVelocityManager { private history: number[] = [] private total = 0 private limit = 10 diff --git a/src/modules/simulation/classes/SimulationRenderer.ts b/src/modules/simulationRenderer/classes/SimulationRenderer.ts similarity index 56% rename from src/modules/simulation/classes/SimulationRenderer.ts rename to src/modules/simulationRenderer/classes/SimulationRenderer.ts index d4adcac..94328c4 100644 --- a/src/modules/simulation/classes/SimulationRenderer.ts +++ b/src/modules/simulationRenderer/classes/SimulationRenderer.ts @@ -1,63 +1,39 @@ import { Camera } from './Camera' -import { Simulation } from './Simulation' +import { Simulation } from '../../simulation/classes/Simulation' import { Subject } from 'rxjs' import { MouseEventInfo } from '../../core/components/FluidCanvas' import { pointInSquare } from '../helpers/pointInSquare' -import { vector2 } from './Transform' -import merge from 'deepmerge' -import { renderGate } from '../helpers/renderGate' -import { renderGateShadow } from '../helpers/renderGateShadow' -import { MouseManager } from './MouseManager' +import { vector2 } from '../../simulation/classes/Transform' +import { MouseVelocityManager } from './MouseVelocityManager' import { Screen } from '../../core/classes/Screen' import { relativeTo, add, invert } from '../../vector2/helpers/basic' - -export interface SimulationRendererOptions { - shadows: { - enabled: boolean - color: string - lightHeight: number - gateHeight: number - } - dnd: { - rotation: number - } -} - -export const defaultSimulationRendererOptions: SimulationRendererOptions = { - shadows: { - enabled: true, - color: 'rgba(0,0,0,0.3)', - gateHeight: 10, - lightHeight: 100 - }, - dnd: { - rotation: Math.PI / 12 // 7.5 degrees - } -} +import { SimulationRendererOptions } from '../types/SimulationRendererOptions' +import { defaultSimulationRendererOptions } from '../constants' +import merge from 'deepmerge' export class SimulationRenderer { - public camera = new Camera() public mouseDownOutput = new Subject() public mouseUpOutput = new Subject() public mouseMoveOutput = new Subject() - public selectedGate: number | null = null - public lastMousePosition: vector2 = [0, 0] - public movedSelection = false - // first bit = dragging // second bit = moving around private mouseState = 0b00 - private options: SimulationRendererOptions - private mouseManager = new MouseManager(this.mouseMoveOutput) - private screen = new Screen() + private selectedGate: number | null = null + private gateSelectionOffset: vector2 = [0, 0] + + public movedSelection = false + public options: SimulationRendererOptions + public mouseManager = new MouseVelocityManager(this.mouseMoveOutput) + public screen = new Screen() + public camera = new Camera() public constructor( options: Partial = {}, public simulation = new Simulation() ) { - this.options = merge(options, defaultSimulationRendererOptions) + this.options = merge(defaultSimulationRendererOptions, options) this.init() } @@ -80,7 +56,7 @@ export class SimulationRenderer { this.movedSelection = false this.selectedGate = id - this.lastMousePosition = worldPosition.map( + this.gateSelectionOffset = worldPosition.map( (position, index) => position - transform.position[index] ) as vector2 @@ -95,7 +71,7 @@ export class SimulationRenderer { } } - this.lastMousePosition = worldPosition + this.gateSelectionOffset = worldPosition this.mouseState |= 2 }) @@ -124,8 +100,8 @@ export class SimulationRenderer { const transform = gate.data.transform - transform.x = worldPosition[0] - this.lastMousePosition[0] - transform.y = worldPosition[1] - this.lastMousePosition[1] + transform.x = worldPosition[0] - this.gateSelectionOffset[0] + transform.y = worldPosition[1] - this.gateSelectionOffset[1] if (!this.movedSelection) { this.movedSelection = true @@ -134,7 +110,7 @@ export class SimulationRenderer { if ((this.mouseState >> 1) & 1) { const offset = invert( - relativeTo(this.lastMousePosition, worldPosition) + relativeTo(this.gateSelectionOffset, worldPosition) ) this.camera.transform.position = add( @@ -142,64 +118,17 @@ export class SimulationRenderer { invert(offset) ) - this.lastMousePosition = this.camera.toWordPostition( + this.gateSelectionOffset = this.camera.toWordPostition( event.position ) } }) } - public render(ctx: CanvasRenderingContext2D) { - this.clear(ctx) - - ctx.translate(...this.camera.transform.position) - - const center = relativeTo( - this.camera.transform.position, - this.screen.center - ) - - // render gates - for (const gate of this.simulation.gates) { - if (this.options.shadows.enabled) { - renderGateShadow( - ctx, - this.options.shadows.color, - gate, - this.options.shadows.gateHeight, - [center[0], center[1], this.options.shadows.lightHeight] - ) - } - - renderGate(ctx, gate) - } - - ctx.translate(...invert(this.camera.transform.position)) - } - - public clear(ctx: CanvasRenderingContext2D) { - ctx.clearRect(0, 0, ...this.camera.transform.scale) - } - public getGateById(id: number) { return this.simulation.gates.get(id) } - public update(delta: number) { - const selected = this.getSelected() - - if (selected && this.movedSelection) { - this.mouseManager.update() - selected.transform.rotation = - this.mouseManager.getDirection() * this.options.dnd.rotation - } else { - if (selected) { - selected.transform.rotation = 0 - } - this.mouseManager.update() - } - } - public getSelected() { if (this.selectedGate === null) return null diff --git a/src/modules/simulationRenderer/constants.ts b/src/modules/simulationRenderer/constants.ts new file mode 100644 index 0000000..25a81f7 --- /dev/null +++ b/src/modules/simulationRenderer/constants.ts @@ -0,0 +1,13 @@ +import { SimulationRendererOptions } from './types/SimulationRendererOptions' + +export const defaultSimulationRendererOptions: SimulationRendererOptions = { + shadows: { + enabled: true, + color: 'rgba(0,0,0,0.3)', + gateHeight: 10, + lightHeight: 100 + }, + dnd: { + rotation: Math.PI / 12 // 7.5 degrees + } +} diff --git a/src/modules/simulationRenderer/helpers/clearCanvas.ts b/src/modules/simulationRenderer/helpers/clearCanvas.ts new file mode 100644 index 0000000..30ec5f1 --- /dev/null +++ b/src/modules/simulationRenderer/helpers/clearCanvas.ts @@ -0,0 +1,8 @@ +import { SimulationRenderer } from '../classes/SimulationRenderer' + +export const clearCanvas = ( + ctx: CanvasRenderingContext2D, + renderer: SimulationRenderer +) => { + ctx.clearRect(0, 0, ...renderer.camera.transform.scale) +} diff --git a/src/modules/simulation/helpers/drawPolygon.ts b/src/modules/simulationRenderer/helpers/drawPolygon.ts similarity index 84% rename from src/modules/simulation/helpers/drawPolygon.ts rename to src/modules/simulationRenderer/helpers/drawPolygon.ts index af0d7e4..c427cea 100644 --- a/src/modules/simulation/helpers/drawPolygon.ts +++ b/src/modules/simulationRenderer/helpers/drawPolygon.ts @@ -1,4 +1,4 @@ -import { vector2 } from '../classes/Transform' +import { vector2 } from '../../simulation/classes/Transform' export const drawPolygon = ( ctx: CanvasRenderingContext2D, diff --git a/src/modules/simulation/helpers/drawRotatedSquare.ts b/src/modules/simulationRenderer/helpers/drawRotatedSquare.ts similarity index 83% rename from src/modules/simulation/helpers/drawRotatedSquare.ts rename to src/modules/simulationRenderer/helpers/drawRotatedSquare.ts index 54fd12b..e5d37b8 100644 --- a/src/modules/simulation/helpers/drawRotatedSquare.ts +++ b/src/modules/simulationRenderer/helpers/drawRotatedSquare.ts @@ -1,4 +1,4 @@ -import { Transform } from '../classes/Transform' +import { Transform } from '../../simulation/classes/Transform' export const drawRotatedSquare = ( ctx: CanvasRenderingContext2D, diff --git a/src/modules/simulation/helpers/pointInSquare.ts b/src/modules/simulationRenderer/helpers/pointInSquare.ts similarity index 68% rename from src/modules/simulation/helpers/pointInSquare.ts rename to src/modules/simulationRenderer/helpers/pointInSquare.ts index 774634f..f250c60 100644 --- a/src/modules/simulation/helpers/pointInSquare.ts +++ b/src/modules/simulationRenderer/helpers/pointInSquare.ts @@ -1,5 +1,4 @@ -import { vector2, Transform } from '../classes/Transform' -import { LruCacheNode } from '@eix-js/utils' +import { vector2, Transform } from '../../simulation/classes/Transform' export const pointInSquare = (point: vector2, square: Transform) => { return ( diff --git a/src/modules/simulation/helpers/projectPoint.ts b/src/modules/simulationRenderer/helpers/projectPoint.ts similarity index 78% rename from src/modules/simulation/helpers/projectPoint.ts rename to src/modules/simulationRenderer/helpers/projectPoint.ts index 8008429..08f1acf 100644 --- a/src/modules/simulation/helpers/projectPoint.ts +++ b/src/modules/simulationRenderer/helpers/projectPoint.ts @@ -1,4 +1,4 @@ -import { vector3, vector2 } from '../classes/Transform' +import { vector3, vector2 } from '../../simulation/classes/Transform' export const projectPointOnPlane = (point: vector3, light: vector3) => point.slice(0, 2).map((position, index) => { diff --git a/src/modules/simulation/helpers/renderGate.ts b/src/modules/simulationRenderer/helpers/renderGate.ts similarity index 79% rename from src/modules/simulation/helpers/renderGate.ts rename to src/modules/simulationRenderer/helpers/renderGate.ts index e431053..9efb6ee 100644 --- a/src/modules/simulation/helpers/renderGate.ts +++ b/src/modules/simulationRenderer/helpers/renderGate.ts @@ -1,4 +1,4 @@ -import { Gate } from '../classes/Gate' +import { Gate } from '../../simulation/classes/Gate' import { drawRotatedSquare } from './drawRotatedSquare' export const renderGate = (ctx: CanvasRenderingContext2D, gate: Gate) => { diff --git a/src/modules/simulation/helpers/renderGateShadow.ts b/src/modules/simulationRenderer/helpers/renderGateShadow.ts similarity index 80% rename from src/modules/simulation/helpers/renderGateShadow.ts rename to src/modules/simulationRenderer/helpers/renderGateShadow.ts index 2e15b82..a102e96 100644 --- a/src/modules/simulation/helpers/renderGateShadow.ts +++ b/src/modules/simulationRenderer/helpers/renderGateShadow.ts @@ -1,7 +1,7 @@ -import { Gate } from '../classes/Gate' +import { Gate } from '../../simulation/classes/Gate' import { projectPointOnPlane } from './projectPoint' import { drawPolygon } from './drawPolygon' -import { vector3 } from '../classes/Transform' +import { vector3 } from '../../simulation/classes/Transform' export const renderGateShadow = ( ctx: CanvasRenderingContext2D, diff --git a/src/modules/simulationRenderer/helpers/renderSimulation.ts b/src/modules/simulationRenderer/helpers/renderSimulation.ts new file mode 100644 index 0000000..686067f --- /dev/null +++ b/src/modules/simulationRenderer/helpers/renderSimulation.ts @@ -0,0 +1,36 @@ +import { SimulationRenderer } from '../classes/SimulationRenderer' +import { relativeTo, invert } from '../../vector2/helpers/basic' +import { renderGateShadow } from './renderGateShadow' +import { renderGate } from './renderGate' +import { clearCanvas } from './clearCanvas' + +export const renderSimulation = ( + ctx: CanvasRenderingContext2D, + renderer: SimulationRenderer +) => { + clearCanvas(ctx, renderer) + + ctx.translate(...renderer.camera.transform.position) + + const center = relativeTo( + renderer.camera.transform.position, + renderer.screen.center + ) + + // render gates + for (const gate of renderer.simulation.gates) { + if (renderer.options.shadows.enabled) { + renderGateShadow( + ctx, + renderer.options.shadows.color, + gate, + renderer.options.shadows.gateHeight, + [center[0], center[1], renderer.options.shadows.lightHeight] + ) + } + + renderGate(ctx, gate) + } + + ctx.translate(...invert(renderer.camera.transform.position)) +} diff --git a/src/modules/simulationRenderer/helpers/updateSimulation.ts b/src/modules/simulationRenderer/helpers/updateSimulation.ts new file mode 100644 index 0000000..ef5f902 --- /dev/null +++ b/src/modules/simulationRenderer/helpers/updateSimulation.ts @@ -0,0 +1,19 @@ +import { SimulationRenderer } from '../classes/SimulationRenderer' + +export const updateSimulation = ( + renderer: SimulationRenderer, + delta: number +) => { + const selected = renderer.getSelected() + + if (selected && renderer.movedSelection) { + renderer.mouseManager.update() + selected.transform.rotation = + renderer.mouseManager.getDirection() * renderer.options.dnd.rotation + } else { + if (selected) { + selected.transform.rotation = 0 + } + renderer.mouseManager.update() + } +} diff --git a/src/modules/simulationRenderer/types/SimulationRendererOptions.ts b/src/modules/simulationRenderer/types/SimulationRendererOptions.ts new file mode 100644 index 0000000..4e6ce2d --- /dev/null +++ b/src/modules/simulationRenderer/types/SimulationRendererOptions.ts @@ -0,0 +1,11 @@ +export interface SimulationRendererOptions { + shadows: { + enabled: boolean + color: string + lightHeight: number + gateHeight: number + } + dnd: { + rotation: number + } +}