Home Explore Help
Sign In
javascript
/
tentone.escher.js
mirror of https://github.com/tentone/escher.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Rollup dev config

tentone 5 years ago
parent
c6e61e8786
commit
bae80a4472
18 changed files with 60 additions and 73 deletions
Split View Show Diff Stats
  1. 2 2
      build/escher.js
  2. 16 24
      examples/node.html
  3. 1 2
      examples/physics.html
  4. 6 4
      package.json
  5. 22 0
      rollup.dev.js
  6. 1 3
      source/EventManager.js
  7. 2 6
      source/Renderer.js
  8. 1 3
      source/objects/BezierCurve.js
  9. 0 2
      source/objects/Box.js
  10. 1 3
      source/objects/Circle.js
  11. 1 3
      source/objects/DOM.js
  12. 0 2
      source/objects/Graph.js
  13. 0 2
      source/objects/Image.js
  14. 2 4
      source/objects/Line.js
  15. 0 2
      source/objects/Pattern.js
  16. 0 2
      source/objects/Text.js
  17. 2 4
      source/objects/mask/BoxMask.js
  18. 3 5
      source/objects/mask/Mask.js

+ 2 - 2
build/escher.js
View File 

@@ -2,7 +2,7 @@
 
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
 
 	typeof define === 'function' && define.amd ? define(['exports'], factory) :
 
 	(global = global || self, factory(global.Escher = {}));
 
-}(this, function (exports) { 'use strict';
 
+}(this, (function (exports) { 'use strict';
 
 
 	/**
 
 	 * EventManager is used to manager DOM events creationg and destruction in a single function call.
 
@@ -3357,4 +3357,4 @@
 
 
 	Object.defineProperty(exports, '__esModule', { value: true });
 
 
-}));
 
+})));

+ 16 - 24
examples/equation.html → examples/node.html
View File 

@@ -5,33 +5,26 @@
 
 	<title>Equation Editor</title>
 
 </head>
 
 <body style="font-size:30px; font-family: Arial;">
 
-	<div style="position:absolute; width:60px; height:50px; top:0px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('+');">+</div>
 
-	<div style="position:absolute; width:60px; height:50px; top:50px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('-');">-</div>
 
-	<div style="position:absolute; width:60px; height:50px; top:100px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('*');">x</div>
 
-	<div style="position:absolute; width:60px; height:50px; top:150px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('/');">/</div>
 
-	<div style="position:absolute; width:60px; height:50px; top:200px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addConstantBlock(prompt('Input value'));">Num</div>
 
+	<!-- Page -->
 
+	<div style="position:absolute; width:100%; height:100%; top:0px; left:0px; overflow: hidden;">
 
+		<!-- Canvas -->
 
+		<canvas id="canvas" style="position:absolute; width:100%; height:100%; top:0px; left:0px;"></canvas>
 
+
 
+		<!-- Buttons -->
 
+		<div style="position:absolute; width:60px; height:50px; top:0px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('+');">+</div>
 
+		<div style="position:absolute; width:60px; height:50px; top:50px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('-');">-</div>
 
+		<div style="position:absolute; width:60px; height:50px; top:100px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('*');">x</div>
 
+		<div style="position:absolute; width:60px; height:50px; top:150px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addOperatorBlock('/');">/</div>
 
+		<div style="position:absolute; width:60px; height:50px; top:200px; left:10px; text-align:center; z-index:10; cursor: pointer;" onclick="window.addConstantBlock(prompt('Input value'));">Num</div>
 
+	</div>
 
+
 
+	<!-- Code -->
 
 	<script type="text/javascript" src="../build/escher.js"></script>
 
 	<script type="text/javascript">
 
-		// Division
 
-		var division = document.createElement("div");
 
-		division.style.position = "absolute";
 
-		division.style.width = "100%";
 
-		division.style.height = "100%";
 
-		division.style.top = "0px";
 
-		division.style.left = "0px";
 
-		division.style.overflow = "hidden";
 
-		document.body.appendChild(division);
 
-
 
 		// Canvas
 
-		var canvas = document.createElement("canvas");
 
-		canvas.style.position = "absolute";
 
-		canvas.style.width = "100%";
 
-		canvas.style.height = "100%";
 
-		canvas.style.top = "0px";
 
-		canvas.style.left = "0px";
 
+		var canvas = document.getElementById("canvas");
 
 		canvas.width = window.innerWidth;
 
 		canvas.height = window.innerHeight;
 
-		division.appendChild(canvas);
 
 
 		// Prevent context menu events
 
 		document.body.oncontextmenu = function(event)
 
@@ -40,7 +33,6 @@
 
 			return false;
 
 		};
 
 
-
 
 		// Resize canvas on window resize
 
 		window.onresize = function()
 
 		{
 
@@ -127,4 +119,4 @@
 
 		renderer.createRenderLoop(group, viewport);
 
 	</script>
 
 </body>
 
-</html>
 
+</html>

+ 1 - 2
examples/physics.html
View File 

@@ -39,7 +39,6 @@
 
 			canvas.height = window.innerHeight;
 
 		};
 
 
-
 
 		function PhysicsCircle()
 
 		{
 
 			Escher.Circle.call(this);
 
@@ -110,4 +109,4 @@
 
 		});
 
 	</script>
 
 </body>
 
-</html>
 
+</html>

+ 6 - 4
package.json
View File 

@@ -8,6 +8,7 @@
 
 		"url": "https://github.com/tentone/escher.js.git"
 
 	},
 
 	"scripts": {
 
+		"start": "rollup -c rollup.dev.js",
 
 		"build": "rollup -c && npm run uglify",
 
 		"docs": "jsdoc -d docs -r source",
 
 		"uglify": "uglifyjs --compress --mangle --output build/escher.min.js -- build/escher.js",
 
@@ -23,9 +24,10 @@
 
 	"license": "MIT",
 
 	"dependencies": {},
 
 	"devDependencies": {
 
-		"jsdoc": "^3.5.0",
 
-		"rollup": "^1.0.0",
 
-		"rollup-plugin-strip": "^1.2.1",
 
-		"uglify-js": "^3.4.9"
 
+		"jsdoc": "^3.6.4",
 
+		"rollup": "^2.9.1",
 
+		"rollup-plugin-strip": "^1.2.2",
 
+		"uglify-js": "^3.9.2",
 
+		"rollup-plugin-serve": "^2.0.0-beta.0"
 
 	}
 
 }

+ 22 - 0
rollup.dev.js
View File 

@@ -0,0 +1,22 @@
 
+import serve from "rollup-plugin-serve";
 
+
 
+export default {
 
+	input: "source/Escher.js",
 
+	plugins: [
 
+		serve({
 
+			open: true,
 
+			contentBase: '.',
 
+			openPage: '/examples',
 
+			host: 'localhost',
 
+			port: 8080
 
+		})
 
+	],
 
+	output: [
 
+		{
 
+			format: "umd",
 
+			name: "Escher",
 
+			file: "build/escher.js",
 
+			indent: "\t"
 
+		}
 
+	]
 
+};

+ 1 - 3
source/EventManager.js
View File 

@@ -1,7 +1,5 @@
 
-"use strict";
 
-
 
 /**
 
- * EventManager is used to manager DOM events creationg and destruction in a single function call.
 
+ * EventManager is used to manager DOM events creating and destruction in a single function call.
 
  *
 
  * It is used by objects to make it easier to add and remove events from global DOM objects.
 
  *

+ 2 - 6
source/Renderer.js
View File 

@@ -1,12 +1,8 @@
 
-"use strict";
 
-
 
 import {Pointer} from "./input/Pointer.js";
 
 import {ViewportControls} from "./controls/ViewportControls.js";
 
 
 /**
 
- * The renderer is resposible for drawing the structure into the canvas element.
 
- *
 
- * Its also resposible for managing the canvas state.
 
+ * The renderer is responsible for drawing the objects structure into the canvas element and manage its rendering state.
 
  *
 
  * @class
 
  * @param {DOM} canvas Canvas to render the content.
 
@@ -50,7 +46,7 @@ function Renderer(canvas, options)
 
  *
 
  * The render loop cannot be destroyed, and it automatically creates a viewport controls object.
 
  *
 
- * @param {Object2D} group Group to be rendererd.
 
+ * @param {Object2D} group Group to be rendered.
 
  * @param {Viewport} viewport Viewport into the objects.
 
  * @param {Function} onUpdate Function called before rendering the frame.
 
  */

+ 1 - 3
source/objects/BezierCurve.js
View File 

@@ -1,12 +1,10 @@
 
-"use strict";
 
-
 
 import {Object2D} from "../Object2D.js";
 
 import {Vector2} from "../math/Vector2.js";
 
 import {Circle} from "./Circle.js";
 
 import {Line} from "./Line.js";
 
 
 /**
 
- * BezierCurve object draw as bezier curve between two points.
 
+ * Bezier curve object draw as bezier curve between two points.
 
  *
 
  * @class
 
  */

+ 0 - 2
source/objects/Box.js
View File 

@@ -1,5 +1,3 @@
 
-"use strict";
 
-
 
 import {Object2D} from "../Object2D.js";
 
 import {Vector2} from "../math/Vector2.js";
 
 import {Box2} from "../math/Box2.js";

+ 1 - 3
source/objects/Circle.js
View File 

@@ -1,5 +1,3 @@
 
-"use strict";
 
-
 
 import {Object2D} from "../Object2D.js";
 
 import {Vector2} from "../math/Vector2.js";
 
 
@@ -76,4 +74,4 @@ Circle.prototype.draw = function(context, viewport, canvas)
 
 	}
 
 };
 
 
-export {Circle};
 
+export {Circle};

+ 1 - 3
source/objects/DOM.js
View File 

@@ -1,5 +1,3 @@
 
-"use strict";
 
-
 
 import {Object2D} from "../Object2D.js";
 
 import {Vector2} from "../math/Vector2.js";
 
 
@@ -78,4 +76,4 @@ DOM.prototype.transform = function(context, viewport, canvas)
 
 	this.element.style.display = this.visible ? "block" : "none"; 
 };
 
 
-export {DOM};
 
+export {DOM};

+ 0 - 2
source/objects/Graph.js
View File 

@@ -1,5 +1,3 @@
 
-"use strict";
 
-
 
 import {Object2D} from "../Object2D.js";
 
 import {Vector2} from "../math/Vector2.js";
 
 import {Box2} from "../math/Box2.js";

+ 0 - 2
source/objects/Image.js
View File 

@@ -1,5 +1,3 @@
 
-"use strict";
 
-
 
 import {Object2D} from "../Object2D.js";
 
 import {Box2} from "../math/Box2.js";
 
 import {Vector2} from "../math/Vector2.js";

+ 2 - 4
source/objects/Line.js
View File 

@@ -1,5 +1,3 @@
 
-"use strict";
 
-
 
 import {Object2D} from "../Object2D.js";
 
 import {Vector2} from "../math/Vector2.js";
 
 
@@ -30,9 +28,9 @@ function Line()
 
 	/**
 
 	 * Dash line pattern to be used, if empty draws a solid line.
 
 	 *
 
-	 * Dash parttern is defined as the size of dashes as pairs of space with no line and with line.
 
+	 * Dash pattern is defined as the size of dashes as pairs of space with no line and with line.
 
 	 *
 
-	 * E.g if the daspattern is [1, 2] we get 1 point with line, 2 without line repeat infinitelly.
 
+	 * E.g if the dash pattern is [1, 2] we get 1 point with line, 2 without line repeat infinitelly.
 
 	 */
 
 	this.dashPattern = [5, 5];

+ 0 - 2
source/objects/Pattern.js
View File 

@@ -1,5 +1,3 @@
 
-"use strict";
 
-
 
 import {Object2D} from "../Object2D.js";
 
 import {Vector2} from "../math/Vector2.js";
 
 import {Box2} from "../math/Box2.js";

+ 0 - 2
source/objects/Text.js
View File 

@@ -1,5 +1,3 @@
 
-"use strict";
 
-
 
 import {Object2D} from "../Object2D.js";
 
 
 /**

+ 2 - 4
source/objects/mask/BoxMask.js
View File 

@@ -1,5 +1,3 @@
 
-"use strict";
 
-
 
 import {Mask} from "./Mask.js";
 
 import {Vector2} from "../../math/Vector2.js";
 
 import {Box2} from "../../math/Box2.js";
 
@@ -7,7 +5,7 @@ import {Box2} from "../../math/Box2.js";
 
 /**
 
  * Box mask can be used to clear a box mask region.
 
  *
 
- * It will limit the drwaing region to this box.
 
+ * It will limit the drawing region to this box.
 
  *
 
  * @class
 
  * @extends {Mask}
 
@@ -56,4 +54,4 @@ BoxMask.prototype.clip = function(context, viewport, canvas)
 
 	context.clip();
 
 };
 
 
-export {BoxMask};
 
+export {BoxMask};

+ 3 - 5
source/objects/mask/Mask.js
View File 

@@ -1,5 +1,3 @@
 
-"use strict";
 
-
 
 import {Object2D} from "../../Object2D.js";
 
 import {Vector2} from "../../math/Vector2.js";
 
 import {Box2} from "../../math/Box2.js";
 
@@ -9,7 +7,7 @@ import {Box2} from "../../math/Box2.js";
 
  *
 
  * Masks are treated as objects their shape is used to filter other objects shape.
 
  *
 
- * Multiple mask objects can be active simulatenously, they have to be attached to the object mask list to filter the render region.
 
+ * Multiple mask objects can be active simultaneously, they have to be attached to the object mask list to filter the render region.
 
  *
 
  * A mask objects is draw using the context.clip() method.
 
  *
 
@@ -28,10 +26,10 @@ Mask.prototype.isMask = true;
 
 /**
 
  * Clip the canvas context, to ensure that next objects being drawn are cliped to the path stored here.
 
  *
 
- * @param {CanvasContext} context Canvas 2d drawing context.
 
+ * @param {CanvasRenderingContext2D} context Canvas 2d drawing context.
 
  * @param {Viewport} viewport Viewport applied to the canvas.
 
  * @param {DOM} canvas DOM canvas element where the content is being drawn.
 
  */
 
 Mask.prototype.clip = function(context, viewport, canvas){};
 
 
-export {Mask};
 
+export {Mask};