Refactor

.editorconfig

@@ -1,9 +1,9 @@
 [*]
-indent_style = tab
-indent_size = 4
+indent_style = space
+indent_size = 2
 trim_trailing_whitespace = true
 
 # Some exceptions
-[{package.json}]
+[{package.json,*.yml}]
 indent_style = space
 indent_size = 2

.prettierrc

@@ -0,0 +1,7 @@
+{
+	"semi": true,
+	"singleQuote": true,
+	"tabWidth": 2,
+	"jsxBracketSameLine": true,
+	"useTabs": false
+}

demos/demo-standard/index.story.tsx

@@ -1,79 +1,84 @@
-import { CanvasWidget } from "../../src/widgets/CanvasWidget";
-import * as React from "react";
-import { CanvasEngine } from "../../src/CanvasEngine";
-import { CanvasModel } from "../../src/models-canvas/CanvasModel";
-import { CanvasLayerModel } from "../../src/models-canvas/CanvasLayerModel";
-import { RectangleElementModel } from "../../src/primitives/rectangle/RectangleElementModel";
-
-import { storiesOf } from "@storybook/react";
-import { button } from "@storybook/addon-knobs";
-import { GridElementModel } from "../../src/primitives/grid/GridElementModel";
-import { PaperElementModel } from "../../src/primitives/paper/PaperElementModel";
-
-storiesOf("Simple Usage", module).add("Full example", () => {
-	//setup canvas engine
-	let engine = new CanvasEngine();
-	engine.enableDebugMode(true);
-	engine.installDefaults();
-
-	let model = new CanvasModel();
-	model.setOffset(100, 100);
-	model.setZoomLevel(1);
-	engine.setModel(model);
-
-	// grid layer
-	let layer2 = new CanvasLayerModel();
-	layer2.setSVG(true);
-	layer2.setTransformable(false);
-	model.addLayer(layer2);
-
-	let gridModel = new GridElementModel();
-	layer2.addModel(gridModel);
-
-	let gridModel2 = new GridElementModel();
-	gridModel2.sizeX = 200;
-	gridModel2.sizeY = 200;
-	gridModel2.color = "cyan";
-	gridModel2.thickness = 2;
-	layer2.addModel(gridModel2);
-
-	// paper layer
-	let paperLayer = new CanvasLayerModel();
-	paperLayer.setSVG(false);
-	paperLayer.setTransformable(true);
-	let paper = new PaperElementModel();
-	paperLayer.addModel(paper);
-	model.addLayer(paperLayer);
-
-	// add layer
-	let layer = new CanvasLayerModel();
-	layer.setSVG(true);
-	layer.setTransformable(true);
-	model.addLayer(layer);
-
-	// squares
-	let squareModel = new RectangleElementModel();
-	squareModel.dimensions.updateDimensions(-100, -100, 100, 100);
-
-	let squareModel2 = new RectangleElementModel();
-	squareModel2.dimensions.updateDimensions(300, 300, 50, 70);
-
-	let squareModel3 = new RectangleElementModel();
-	squareModel3.dimensions.updateDimensions(420, 420, 50, 70);
-
-	layer.addModels([squareModel, squareModel2, squareModel3]);
-
-	button("Fit Width", () => {
-		engine.getCanvasWidget().zoomToFit(15);
-	});
-
-	button("Undo", () => {
-		engine.getHistoryBank().goBackward();
-	});
-
-	button("Redo", () => {
-		engine.getHistoryBank().goForward();
-	});
-
-	return <CanvasWidget className={"demo-canvas"} engine={engine} />;
+import * as React from 'react';
+import { CanvasEngine } from '../../src/CanvasEngine';
+import { CanvasModel } from '../../src/primitives-core/canvas/CanvasModel';
+import { LayerModel } from '../../src/primitives-core/layer/LayerModel';
+import { RectangleElementModel } from '../../src/primitives/rectangle/RectangleElementModel';
+
+import { storiesOf } from '@storybook/react';
+import { button } from '@storybook/addon-knobs';
+import { GridElementModel } from '../../src/primitives/grid/GridElementModel';
+import { PaperElementModel } from '../../src/primitives/paper/PaperElementModel';
+import { installDebugInteractivity } from '../../src/interactivity/debug-interactivity';
+import { installDefaultInteractivity } from '../../src/interactivity/default-interactivity';
+import { SmartCanvasWidget } from '../../src/primitives-core/canvas/SmartCanvasWidget';
+
+storiesOf('Simple Usage', module).add('Full example', () => {
+  //setup canvas engine
+  let engine = new CanvasEngine();
+
+  let model = new CanvasModel();
+  model.setOffset(100, 100);
+  model.setZoomLevel(1);
+  engine.setModel(model);
+
+  engine.installDefaults();
+  installDebugInteractivity(engine);
+  installDefaultInteractivity(engine);
+
+  // grid layer
+  let layer2 = new LayerModel();
+  layer2.setSVG(true);
+  layer2.setTransformable(false);
+  model.addLayer(layer2);
+
+  let gridModel = new GridElementModel();
+  layer2.addModel(gridModel);
+
+  let gridModel2 = new GridElementModel();
+  gridModel2.sizeX = 200;
+  gridModel2.sizeY = 200;
+  gridModel2.color = 'cyan';
+  gridModel2.thickness = 2;
+  layer2.addModel(gridModel2);
+
+  // paper layer
+  let paperLayer = new LayerModel();
+  paperLayer.setSVG(false);
+  paperLayer.setTransformable(true);
+  let paper = new PaperElementModel();
+  paperLayer.addModel(paper);
+  model.addLayer(paperLayer);
+
+  // add layer
+  let layer = new LayerModel();
+  layer.setSVG(true);
+  layer.setTransformable(true);
+  model.addLayer(layer);
+
+  // squares
+  let squareModel = new RectangleElementModel();
+  squareModel.dimensions.updateDimensions(-100, -100, 100, 100);
+
+  let squareModel2 = new RectangleElementModel();
+  squareModel2.dimensions.updateDimensions(300, 300, 50, 70);
+
+  let squareModel3 = new RectangleElementModel();
+  squareModel3.dimensions.updateDimensions(420, 420, 50, 70);
+  squareModel3.dimensions.rotate(33);
+
+  layer.addModels([squareModel, squareModel2, squareModel3]);
+
+  button('Fit Width', () => {
+    model.zoomToFit(15);
+  });
+
+  button('Undo', () => {
+    engine.getHistoryBank().goBackward();
+  });
+
+  button('Redo', () => {
+    engine.getHistoryBank().goForward();
+  });
+
+  return <SmartCanvasWidget model={model} className={'demo-canvas'} engine={engine} />;
 });

demos/index.tsx

@@ -1,16 +1,15 @@
-import * as React from "react";
-import { storiesOf, addDecorator } from "@storybook/react";
-import { setOptions } from "@storybook/addon-options";
-import { withKnobs, text, boolean, number } from "@storybook/addon-knobs/react";
-import { configureViewport } from '@storybook/addon-viewport';
+import * as React from 'react';
+import { addDecorator } from '@storybook/react';
+import { setOptions } from '@storybook/addon-options';
+import { withKnobs } from '@storybook/addon-knobs/react';
 //include the SCSS for the demo
-import "./.helpers/demo.scss";
-import "../src/sass/main.scss";
+import './.helpers/demo.scss';
+import '../src/sass/main.scss';
 
 addDecorator(withKnobs);
 
 setOptions({
-	name: "STORM React Canvas",
-	url: "https://github.com/projectstorm/react-canvas",
-	addonPanelInRight: true
+  name: 'STORM React Canvas',
+  url: 'https://github.com/projectstorm/react-canvas',
+  addonPanelInRight: true
 });

package.json

@@ -4,45 +4,45 @@
 	"main": "./dist/main.js",
 	"typings": "./dist/@types/src/main",
 	"scripts": {
-		"pretty": "prettier --use-tabs --write \"{src,demos,tests}/**/*.{ts,tsx}\" --print-width 120",
+		"pretty": "prettier --write \"{src,demos,tests}/**/*.{ts,tsx}\" --print-width 120",
 		"storybook": "start-storybook -p 9001 -c .storybook",
 		"storybook:build": "build-storybook -c .storybook -o .out",
 		"storybook:github": "storybook-to-ghpages"
 	},
 	"dependencies": {
 		"@projectstorm/react-core": "^1.2.11",
 		"lodash": "^4.17.11",
-		"mathjs": "^5.1.2",
-		"react": "^16.5.1"
+		"mathjs": "^5.8.0",
+		"react": "^16.8.4"
 	},
 	"devDependencies": {
 		"@babel/core": "^7",
-		"@storybook/addon-actions": "^4.0.0-alpha.21",
-		"@storybook/addon-knobs": "^4.0.0-alpha.21",
-		"@storybook/addon-options": "^4.0.0-alpha.21",
-		"@storybook/addon-storysource": "^4.0.0-alpha.21",
-		"@storybook/addons": "^4.0.0-alpha.21",
-		"@storybook/react": "^4.0.0-alpha.21",
-		"@types/lodash": "^4.14.116",
-		"@types/mathjs": "^4.4.1",
-		"@types/react": "^16.4.14",
-		"@types/react-dom": "^16.0.7",
+		"@storybook/addon-actions": "^5.0.3",
+		"@storybook/addon-knobs": "^5.0.3",
+		"@storybook/addon-options": "^5.0.3",
+		"@storybook/addon-storysource": "^5.0.3",
+		"@storybook/addons": "^5.0.3",
+		"@storybook/react": "^5.0.3",
+		"@types/lodash": "^4.14.123",
+		"@types/mathjs": "^5.0.1",
+		"@types/react": "^16.8.8",
+		"@types/react-dom": "^16.8.3",
 		"awesome-typescript-loader": "5",
-		"babel-loader": "^8.0.2",
-		"css-loader": "^1.0.0",
-		"file-loader": "^2.0.0",
-		"moment": "^2.22.2",
-		"node-sass": "^4.9.3",
-		"prettier": "^1.14.2",
-		"react-dom": "^16.5.1",
+		"babel-loader": "^8.0.5",
+		"css-loader": "^2.1.1",
+		"file-loader": "^3.0.1",
+		"moment": "^2.24.0",
+		"node-sass": "^4.11.0",
+		"prettier": "^1.16.4",
+		"react-dom": "^16.8.4",
 		"sass-loader": "^7.1.0",
 		"source-map-loader": "^0.2.4",
-		"style-loader": "^0.23.0",
-		"ts-loader": "^5.1.1",
+		"style-loader": "^0.23.1",
+		"ts-loader": "^5.3.3",
 		"tsconfig-paths-webpack-plugin": "^3.2.0",
-		"typescript": "^3.0.3",
-		"webpack": "^4.19.0",
-		"webpack-cli": "^3.1.0",
+		"typescript": "^3.3.4000",
+		"webpack": "^4.29.6",
+		"webpack-cli": "^3.3.0",
 		"webpack-node-externals": "^1.7.2"
 	}
 }