diff --git a/doodle_app/css/dark.css b/doodle_app/css/dark.css
new file mode 100755
index 0000000..0dc1940
--- /dev/null
+++ b/doodle_app/css/dark.css
@@ -0,0 +1,193 @@
+.Outliner {
+ color: #868686;
+ background: #222;
+ padding: 0;
+ width: 100%;
+ height: 140px;
+ font-size: 12px;
+ cursor: default;
+ overflow: auto;
+ outline: none;
+}
+
+ .Outliner .option {
+ padding: 4px;
+ white-space: nowrap;
+ }
+
+ .Outliner .option.active {
+ background-color: #153C5E;
+ }
+
+.Panel.Collapsible.collapsed .Static .Button {
+ border-left-color: #444;
+}
+
+.Panel.Collapsible:not(.collapsed) .Static .Button {
+ border-top-color: #444;
+}
+
+input.Number {
+ color: #2A75B7!important;
+ font-size: 12px; /** TODO: Use of !imporant is not ideal **/
+ background-color: transparent!important; /* For now this is a quick fix a rendering issue due to inherited background */
+ border: 1px solid transparent;
+ padding: 2px;
+ cursor: col-resize;
+}
+
+#viewport {
+ position: absolute;
+ top: 32px;
+ left: 0px;
+ right: 300px;
+ bottom: 32px;
+}
+
+ #viewport #info {
+ text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
+ }
+
+#script {
+ position: absolute;
+ top: 32px;
+ left: 0px;
+ right: 300px;
+ bottom: 32px;
+ opacity: 0.9;
+}
+
+#player {
+ position: absolute;
+ top: 32px;
+ left: 0px;
+ right: 300px;
+ bottom: 32px;
+}
+
+#menubar {
+ position: absolute;
+ width: 100%;
+ height: 32px;
+ background: #111;
+ padding: 0px;
+ margin: 0px;
+ right: 0px;
+ top: 0px;
+}
+
+ #menubar .menu {
+ float: left;
+ cursor: pointer;
+ padding-right: 8px;
+ }
+
+ #menubar .menu.right {
+ float: right;
+ cursor: auto;
+ text-align: right;
+ }
+
+ #menubar .menu .title {
+ display: inline-block;
+ color: #888;
+ margin: 0px;
+ padding: 8px;
+ }
+
+ #menubar .menu .options {
+ position: absolute;
+ display: none;
+ padding: 5px 0px;
+ background: #111;
+ width: 150px;
+ }
+
+ #menubar .menu:hover .options {
+ display: block;
+ }
+
+ #menubar .menu .options hr {
+ border-color: #333;
+ }
+
+ #menubar .menu .options .option {
+ color: #888;
+ background-color: transparent;
+ padding: 5px 10px;
+ margin: 0px !important;
+ }
+
+ #menubar .menu .options .option:hover {
+ color: #fff;
+ background-color: #08f;
+ }
+
+ #menubar .menu .options .option:active {
+ background: transparent;
+ }
+
+#sidebar {
+ position: absolute;
+ right: 0px;
+ top: 32px;
+ bottom: 0px;
+ width: 300px;
+ background-color: #111;
+ overflow: auto;
+}
+
+ #sidebar * {
+ vertical-align: middle;
+ }
+
+ #sidebar input,
+ #sidebar textarea,
+ #sidebar select {
+ background: #222;
+ border: 1px solid transparent;
+ color: #888;
+ }
+
+ #sidebar .Panel {
+ margin-bottom: 10px;
+ }
+
+ #sidebar .Panel.collapsed {
+ margin-bottom: 0px;
+ }
+
+ #sidebar > .Panel {
+ color: #888;
+ padding: 10px;
+ border-top: 1px solid #333;
+ }
+
+ #sidebar .Panel.Material canvas {
+
+ border: solid 1px #5A5A5A;
+
+ }
+
+#toolbar {
+ position: absolute;
+ left: 0px;
+ right: 300px;
+ bottom: 0px;
+ height: 32px;
+ background-color: #111;
+ color: #333;
+}
+
+ #toolbar * {
+ vertical-align: middle;
+ }
+
+ #toolbar .Panel {
+ padding: 4px;
+ color: #888;
+ }
+
+ #toolbar button {
+ margin-right: 6px;
+ }
diff --git a/doodle_app/css/light.css b/doodle_app/css/light.css
new file mode 100755
index 0000000..a4d9f95
--- /dev/null
+++ b/doodle_app/css/light.css
@@ -0,0 +1,168 @@
+.Outliner {
+ color: #444;
+ background: #fff;
+ padding: 0;
+ width: 100%;
+ height: 140px;
+ font-size: 12px;
+ cursor: default;
+ overflow: auto;
+ outline: none;
+}
+
+.Outliner .option {
+ padding: 4px;
+ color: #666;
+ white-space: nowrap;
+}
+
+.Outliner .option.active {
+ background-color: #f8f8f8;
+}
+
+input.Number {
+ color: #0080f0!important;
+ font-size: 12px; /** TODO: Use of !imporant is not ideal **/
+ background-color: transparent!important; /* For now this is a quick fix a rendering issue due to inherited background */
+ border: 1px solid transparent;
+ padding: 2px;
+ cursor: col-resize;
+}
+
+#script {
+ position: absolute;
+ top: 32px;
+ left: 0px;
+ right: 300px;
+ bottom: 32px;
+ opacity: 0.9;
+}
+
+#player {
+ position: absolute;
+ top: 32px;
+ left: 0px;
+ right: 300px;
+ bottom: 32px;
+}
+
+#menubar {
+ position: absolute;
+ width: 100%;
+ height: 32px;
+ background: #eee;
+ padding: 0px;
+ margin: 0px;
+ right: 0px;
+ top: 0px;
+}
+
+ #menubar .menu {
+ float: left;
+ cursor: pointer;
+ padding-right: 8px;
+ }
+
+ #menubar .menu.right {
+ float: right;
+ cursor: auto;
+ text-align: right;
+ }
+
+ #menubar .menu .title {
+ display: inline-block;
+ color: #888;
+ margin: 0px;
+ padding: 8px;
+ }
+
+ #menubar .menu .options {
+ position: absolute;
+ display: none;
+ padding: 5px 0px;
+ background: #eee;
+ width: 150px;
+ }
+
+ #menubar .menu:hover .options {
+ display: block;
+ }
+
+ #menubar .menu .options hr {
+ border-color: #ddd;
+ }
+
+ #menubar .menu .options .option {
+ color: #666;
+ background-color: transparent;
+ padding: 5px 10px;
+ margin: 0px !important;
+ }
+
+ #menubar .menu .options .option:hover {
+ color: #fff;
+ background-color: #08f;
+ }
+
+ #menubar .menu .options .option:active {
+ color: #666;
+ background: transparent;
+ }
+
+#sidebar {
+ position: absolute;
+ right: 0px;
+ top: 32px;
+ bottom: 0px;
+ width: 300px;
+ background: #eee;
+ overflow: auto;
+}
+
+ #sidebar * {
+ vertical-align: middle;
+ }
+
+ #sidebar input,
+ #sidebar textarea,
+ #sidebar select {
+ border: 1px solid transparent;
+ color: #444;
+ }
+
+ #sidebar .Panel {
+ margin-bottom: 10px;
+ }
+
+ #sidebar .Panel.collapsed {
+ margin-bottom: 0px;
+ }
+
+ #sidebar > .Panel {
+ color: #888;
+ padding: 10px;
+ border-top: 1px solid #ccc;
+ }
+
+#toolbar {
+ position: absolute;
+ left: 0px;
+ right: 300px;
+ bottom: 0px;
+ height: 32px;
+ background: #eee;
+ color: #333;
+}
+
+ #toolbar * {
+ vertical-align: middle;
+ }
+
+ #toolbar .Panel {
+ padding: 4px;
+ color: #888;
+ }
+
+ #toolbar button {
+ margin-right: 6px;
+ }
diff --git a/doodle_app/css/main.css b/doodle_app/css/main.css
new file mode 100755
index 0000000..8e4319c
--- /dev/null
+++ b/doodle_app/css/main.css
@@ -0,0 +1,146 @@
+body {
+ font-family: Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ margin: 0;
+ overflow: hidden;
+}
+
+hr {
+ border: 0px;
+ border-top: 1px solid #ccc;
+}
+
+button {
+ position: relative;
+}
+
+textarea {
+ tab-size: 4;
+ white-space: pre;
+ word-wrap: normal;
+}
+
+ textarea.success {
+ border-color: #8b8 !important;
+ }
+
+ textarea.fail {
+ border-color: #f00 !important;
+ background-color: rgba(255,0,0,0.05);
+ }
+
+textarea, input { outline: none; } /* osx */
+
+.Panel {
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+
+ /* No support for these yet */
+ -o-user-select: none;
+ user-select: none;
+}
+
+ .Panel.Collapsible .Static {
+ margin: 0px;
+ }
+
+ .Panel.Collapsible .Static .Button {
+ float: left;
+ margin-right: 6px;
+ width: 0px;
+ height: 0px;
+ border: 6px solid transparent;
+ }
+
+ .Panel.Collapsible.collapsed .Static .Button {
+ margin-top: 2px;
+ border-left-color: #bbb;
+ }
+
+ .Panel.Collapsible:not(.collapsed) .Static .Button {
+ margin-top: 6px;
+ border-top-color: #bbb;
+ }
+
+ .Panel.Collapsible.collapsed .Content {
+ display: none;
+ }
+
+/* CodeMirror */
+
+.CodeMirror {
+
+ position: absolute !important;
+ top: 37px;
+ width: 100% !important;
+ height: calc(100% - 37px) !important;
+
+}
+
+ .CodeMirror .errorLine {
+
+ background: rgba(255,0,0,0.25);
+
+ }
+
+ .CodeMirror .esprima-error {
+
+ color: #f00;
+ text-align: right;
+ padding: 0px 20px;
+
+ }
+
+/* scene types */
+
+.type {
+ position:relative;
+ top:-2px;
+ padding: 0px 2px;
+ color: #ddd;
+}
+.type:after {
+ content: '■';
+}
+
+.Scene {
+ color: #ccccff;
+}
+
+.Object3D {
+ color: #aaaaee;
+}
+
+.Mesh {
+ color: #8888ee;
+}
+
+/* */
+
+.PointLight {
+ color: #dddd00;
+}
+
+/* */
+
+.Geometry {
+ color: #88ff88;
+}
+
+.BoxGeometry {
+ color: #bbeebb;
+}
+.TorusGeometry {
+ color: #aaeeaa;
+}
+
+/* */
+
+.Material {
+ color: #ff8888;
+}
+
+.MeshPhongMaterial {
+ color: #ffaa88;
+}
diff --git a/doodle_app/index.html b/doodle_app/index.html
index 2551d34..9d043e2 100644
--- a/doodle_app/index.html
+++ b/doodle_app/index.html
@@ -4,7 +4,12 @@
Doodle 3D App
+
+
+
+
+
@@ -13,34 +18,38 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
diff --git a/doodle_app/js/DrawCanvas.js b/doodle_app/js/DrawCanvas.js
new file mode 100644
index 0000000..552effa
--- /dev/null
+++ b/doodle_app/js/DrawCanvas.js
@@ -0,0 +1,86 @@
+function DrawCanvas (scene) {
+ "use strict";
+
+ this.domElement = document.createElement("canvas");
+
+ paper.setup(this.domElement);
+
+ var path = new paper.Path();
+
+ this.scene = scene;
+ this.test();
+};
+DrawCanvas.prototype.test = function () {
+ "use strict";
+ var scope = this;
+
+ var a = [];
+
+ var tool = new paper.Tool();
+
+ var path;
+
+ tool.onMouseDown = function (event) {
+ if (path) {
+ path.selected = false;
+ }
+
+ a.push(event.point);
+
+ path = new paper.Path({
+ segments: [event.point],
+ strokeColor: 'black',
+ fullySelected: true
+ });
+ }
+
+ tool.onMouseDrag = function(event) {
+ path.add(event.point);
+
+ a.push(event.point);
+ }
+
+ tool.onMouseUp = function (event) {
+ console.log(path);
+
+ var shape = new THREE.Shape();
+
+ for (var i = 0; i < a.length; i ++) {
+ var point = a[i % a.length];
+
+ if (i === 0) {
+ shape.moveTo(point.y, point.x);
+ }
+ else {
+ shape.lineTo(point.y, point.x);
+ }
+ }
+ var geometry = new THREE.ExtrudeGeometry(shape, {
+ amount: 40,
+ bevelEnabled: true,
+ bevelSegments: 2,
+ steps: 2,
+ bevelSize: 1,
+ bevelThickness: 1
+ });
+ var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({color: 0xff0000}));
+ mesh.rotation.x = -Math.PI/2;
+
+ mesh.position.x = -400;
+ mesh.position.z = 200;
+
+ a = [];
+
+ scope.scene.add(mesh);
+
+ // Select the path, so we can see its segments:
+ path.fullySelected = true;
+ }
+};
+DrawCanvas.prototype.setSize = function (width, height) {
+ "use strict";
+
+ paper.view.viewSize = new paper.Size(width, height);
+ paper.view.draw();
+
+};
\ No newline at end of file
diff --git a/doodle_app/lib/paper-core.js b/doodle_app/lib/paper-core.js
new file mode 100644
index 0000000..99f062b
--- /dev/null
+++ b/doodle_app/lib/paper-core.js
@@ -0,0 +1,12694 @@
+/*!
+ * Paper.js v0.9.22 - The Swiss Army Knife of Vector Graphics Scripting.
+ * http://paperjs.org/
+ *
+ * Copyright (c) 2011 - 2014, Juerg Lehni & Jonathan Puckey
+ * http://scratchdisk.com/ & http://jonathanpuckey.com/
+ *
+ * Distributed under the MIT license. See LICENSE file for details.
+ *
+ * All rights reserved.
+ *
+ * Date: Sat Feb 28 19:20:48 2015 +0100
+ *
+ ***
+ *
+ * Straps.js - Class inheritance library with support for bean-style accessors
+ *
+ * Copyright (c) 2006 - 2013 Juerg Lehni
+ * http://scratchdisk.com/
+ *
+ * Distributed under the MIT license.
+ *
+ ***
+ *
+ * Acorn.js
+ * http://marijnhaverbeke.nl/acorn/
+ *
+ * Acorn is a tiny, fast JavaScript parser written in JavaScript,
+ * created by Marijn Haverbeke and released under an MIT license.
+ *
+ */
+
+var paper = new function(undefined) {
+
+var Base = new function() {
+ var hidden = /^(statics|enumerable|beans|preserve)$/,
+
+ forEach = [].forEach || function(iter, bind) {
+ for (var i = 0, l = this.length; i < l; i++)
+ iter.call(bind, this[i], i, this);
+ },
+
+ forIn = function(iter, bind) {
+ for (var i in this)
+ if (this.hasOwnProperty(i))
+ iter.call(bind, this[i], i, this);
+ },
+
+ create = Object.create || function(proto) {
+ return { __proto__: proto };
+ },
+
+ describe = Object.getOwnPropertyDescriptor || function(obj, name) {
+ var get = obj.__lookupGetter__ && obj.__lookupGetter__(name);
+ return get
+ ? { get: get, set: obj.__lookupSetter__(name),
+ enumerable: true, configurable: true }
+ : obj.hasOwnProperty(name)
+ ? { value: obj[name], enumerable: true,
+ configurable: true, writable: true }
+ : null;
+ },
+
+ _define = Object.defineProperty || function(obj, name, desc) {
+ if ((desc.get || desc.set) && obj.__defineGetter__) {
+ if (desc.get)
+ obj.__defineGetter__(name, desc.get);
+ if (desc.set)
+ obj.__defineSetter__(name, desc.set);
+ } else {
+ obj[name] = desc.value;
+ }
+ return obj;
+ },
+
+ define = function(obj, name, desc) {
+ delete obj[name];
+ return _define(obj, name, desc);
+ };
+
+ function inject(dest, src, enumerable, beans, preserve) {
+ var beansNames = {};
+
+ function field(name, val) {
+ val = val || (val = describe(src, name))
+ && (val.get ? val : val.value);
+ if (typeof val === 'string' && val[0] === '#')
+ val = dest[val.substring(1)] || val;
+ var isFunc = typeof val === 'function',
+ res = val,
+ prev = preserve || isFunc
+ ? (val && val.get ? name in dest : dest[name])
+ : null,
+ bean;
+ if (!preserve || !prev) {
+ if (isFunc && prev)
+ val.base = prev;
+ if (isFunc && beans !== false
+ && (bean = name.match(/^([gs]et|is)(([A-Z])(.*))$/)))
+ beansNames[bean[3].toLowerCase() + bean[4]] = bean[2];
+ if (!res || isFunc || !res.get || typeof res.get !== 'function'
+ || !Base.isPlainObject(res))
+ res = { value: res, writable: true };
+ if ((describe(dest, name)
+ || { configurable: true }).configurable) {
+ res.configurable = true;
+ res.enumerable = enumerable;
+ }
+ define(dest, name, res);
+ }
+ }
+ if (src) {
+ for (var name in src) {
+ if (src.hasOwnProperty(name) && !hidden.test(name))
+ field(name);
+ }
+ for (var name in beansNames) {
+ var part = beansNames[name],
+ set = dest['set' + part],
+ get = dest['get' + part] || set && dest['is' + part];
+ if (get && (beans === true || get.length === 0))
+ field(name, { get: get, set: set });
+ }
+ }
+ return dest;
+ }
+
+ function each(obj, iter, bind) {
+ if (obj)
+ ('length' in obj && !obj.getLength
+ && typeof obj.length === 'number'
+ ? forEach
+ : forIn).call(obj, iter, bind = bind || obj);
+ return bind;
+ }
+
+ function set(obj, props, exclude) {
+ for (var key in props)
+ if (props.hasOwnProperty(key) && !(exclude && exclude[key]))
+ obj[key] = props[key];
+ return obj;
+ }
+
+ return inject(function Base() {
+ for (var i = 0, l = arguments.length; i < l; i++)
+ set(this, arguments[i]);
+ }, {
+ inject: function(src) {
+ if (src) {
+ var statics = src.statics === true ? src : src.statics,
+ beans = src.beans,
+ preserve = src.preserve;
+ if (statics !== src)
+ inject(this.prototype, src, src.enumerable, beans, preserve);
+ inject(this, statics, true, beans, preserve);
+ }
+ for (var i = 1, l = arguments.length; i < l; i++)
+ this.inject(arguments[i]);
+ return this;
+ },
+
+ extend: function() {
+ var base = this,
+ ctor;
+ for (var i = 0, l = arguments.length; i < l; i++)
+ if (ctor = arguments[i].initialize)
+ break;
+ ctor = ctor || function() {
+ base.apply(this, arguments);
+ };
+ ctor.prototype = create(this.prototype);
+ ctor.base = base;
+ define(ctor.prototype, 'constructor',
+ { value: ctor, writable: true, configurable: true });
+ inject(ctor, this, true);
+ return arguments.length ? this.inject.apply(ctor, arguments) : ctor;
+ }
+ }, true).inject({
+ inject: function() {
+ for (var i = 0, l = arguments.length; i < l; i++) {
+ var src = arguments[i];
+ if (src)
+ inject(this, src, src.enumerable, src.beans, src.preserve);
+ }
+ return this;
+ },
+
+ extend: function() {
+ var res = create(this);
+ return res.inject.apply(res, arguments);
+ },
+
+ each: function(iter, bind) {
+ return each(this, iter, bind);
+ },
+
+ set: function(props) {
+ return set(this, props);
+ },
+
+ clone: function() {
+ return new this.constructor(this);
+ },
+
+ statics: {
+ each: each,
+ create: create,
+ define: define,
+ describe: describe,
+ set: set,
+
+ clone: function(obj) {
+ return set(new obj.constructor(), obj);
+ },
+
+ isPlainObject: function(obj) {
+ var ctor = obj != null && obj.constructor;
+ return ctor && (ctor === Object || ctor === Base
+ || ctor.name === 'Object');
+ },
+
+ pick: function(a, b) {
+ return a !== undefined ? a : b;
+ }
+ }
+ });
+};
+
+if (typeof module !== 'undefined')
+ module.exports = Base;
+
+Base.inject({
+ toString: function() {
+ return this._id != null
+ ? (this._class || 'Object') + (this._name
+ ? " '" + this._name + "'"
+ : ' @' + this._id)
+ : '{ ' + Base.each(this, function(value, key) {
+ if (!/^_/.test(key)) {
+ var type = typeof value;
+ this.push(key + ': ' + (type === 'number'
+ ? Formatter.instance.number(value)
+ : type === 'string' ? "'" + value + "'" : value));
+ }
+ }, []).join(', ') + ' }';
+ },
+
+ getClassName: function() {
+ return this._class || '';
+ },
+
+ exportJSON: function(options) {
+ return Base.exportJSON(this, options);
+ },
+
+ toJSON: function() {
+ return Base.serialize(this);
+ },
+
+ _set: function(props, exclude, dontCheck) {
+ if (props && (dontCheck || Base.isPlainObject(props))) {
+ var orig = props._filtering || props;
+ for (var key in orig) {
+ if (orig.hasOwnProperty(key) && !(exclude && exclude[key])) {
+ var value = props[key];
+ if (value !== undefined)
+ this[key] = value;
+ }
+ }
+ return true;
+ }
+ },
+
+ statics: {
+
+ exports: {
+ enumerable: true
+ },
+
+ extend: function extend() {
+ var res = extend.base.apply(this, arguments),
+ name = res.prototype._class;
+ if (name && !Base.exports[name])
+ Base.exports[name] = res;
+ return res;
+ },
+
+ equals: function(obj1, obj2) {
+ function checkKeys(o1, o2) {
+ for (var i in o1)
+ if (o1.hasOwnProperty(i) && !o2.hasOwnProperty(i))
+ return false;
+ return true;
+ }
+ if (obj1 === obj2)
+ return true;
+ if (obj1 && obj1.equals)
+ return obj1.equals(obj2);
+ if (obj2 && obj2.equals)
+ return obj2.equals(obj1);
+ if (Array.isArray(obj1) && Array.isArray(obj2)) {
+ if (obj1.length !== obj2.length)
+ return false;
+ for (var i = 0, l = obj1.length; i < l; i++) {
+ if (!Base.equals(obj1[i], obj2[i]))
+ return false;
+ }
+ return true;
+ }
+ if (obj1 && typeof obj1 === 'object'
+ && obj2 && typeof obj2 === 'object') {
+ if (!checkKeys(obj1, obj2) || !checkKeys(obj2, obj1))
+ return false;
+ for (var i in obj1) {
+ if (obj1.hasOwnProperty(i)
+ && !Base.equals(obj1[i], obj2[i]))
+ return false;
+ }
+ return true;
+ }
+ return false;
+ },
+
+ read: function(list, start, options, length) {
+ if (this === Base) {
+ var value = this.peek(list, start);
+ list.__index++;
+ return value;
+ }
+ var proto = this.prototype,
+ readIndex = proto._readIndex,
+ index = start || readIndex && list.__index || 0;
+ if (!length)
+ length = list.length - index;
+ var obj = list[index];
+ if (obj instanceof this
+ || options && options.readNull && obj == null && length <= 1) {
+ if (readIndex)
+ list.__index = index + 1;
+ return obj && options && options.clone ? obj.clone() : obj;
+ }
+ obj = Base.create(this.prototype);
+ if (readIndex)
+ obj.__read = true;
+ obj = obj.initialize.apply(obj, index > 0 || length < list.length
+ ? Array.prototype.slice.call(list, index, index + length)
+ : list) || obj;
+ if (readIndex) {
+ list.__index = index + obj.__read;
+ obj.__read = undefined;
+ }
+ return obj;
+ },
+
+ peek: function(list, start) {
+ return list[list.__index = start || list.__index || 0];
+ },
+
+ remain: function(list) {
+ return list.length - (list.__index || 0);
+ },
+
+ readAll: function(list, start, options) {
+ var res = [],
+ entry;
+ for (var i = start || 0, l = list.length; i < l; i++) {
+ res.push(Array.isArray(entry = list[i])
+ ? this.read(entry, 0, options)
+ : this.read(list, i, options, 1));
+ }
+ return res;
+ },
+
+ readNamed: function(list, name, start, options, length) {
+ var value = this.getNamed(list, name),
+ hasObject = value !== undefined;
+ if (hasObject) {
+ var filtered = list._filtered;
+ if (!filtered) {
+ filtered = list._filtered = Base.create(list[0]);
+ filtered._filtering = list[0];
+ }
+ filtered[name] = undefined;
+ }
+ return this.read(hasObject ? [value] : list, start, options, length);
+ },
+
+ getNamed: function(list, name) {
+ var arg = list[0];
+ if (list._hasObject === undefined)
+ list._hasObject = list.length === 1 && Base.isPlainObject(arg);
+ if (list._hasObject)
+ return name ? arg[name] : list._filtered || arg;
+ },
+
+ hasNamed: function(list, name) {
+ return !!this.getNamed(list, name);
+ },
+
+ isPlainValue: function(obj, asString) {
+ return this.isPlainObject(obj) || Array.isArray(obj)
+ || asString && typeof obj === 'string';
+ },
+
+ serialize: function(obj, options, compact, dictionary) {
+ options = options || {};
+
+ var root = !dictionary,
+ res;
+ if (root) {
+ options.formatter = new Formatter(options.precision);
+ dictionary = {
+ length: 0,
+ definitions: {},
+ references: {},
+ add: function(item, create) {
+ var id = '#' + item._id,
+ ref = this.references[id];
+ if (!ref) {
+ this.length++;
+ var res = create.call(item),
+ name = item._class;
+ if (name && res[0] !== name)
+ res.unshift(name);
+ this.definitions[id] = res;
+ ref = this.references[id] = [id];
+ }
+ return ref;
+ }
+ };
+ }
+ if (obj && obj._serialize) {
+ res = obj._serialize(options, dictionary);
+ var name = obj._class;
+ if (name && !compact && !res._compact && res[0] !== name)
+ res.unshift(name);
+ } else if (Array.isArray(obj)) {
+ res = [];
+ for (var i = 0, l = obj.length; i < l; i++)
+ res[i] = Base.serialize(obj[i], options, compact,
+ dictionary);
+ if (compact)
+ res._compact = true;
+ } else if (Base.isPlainObject(obj)) {
+ res = {};
+ for (var i in obj)
+ if (obj.hasOwnProperty(i))
+ res[i] = Base.serialize(obj[i], options, compact,
+ dictionary);
+ } else if (typeof obj === 'number') {
+ res = options.formatter.number(obj, options.precision);
+ } else {
+ res = obj;
+ }
+ return root && dictionary.length > 0
+ ? [['dictionary', dictionary.definitions], res]
+ : res;
+ },
+
+ deserialize: function(json, create, _data) {
+ var res = json,
+ isRoot = !_data;
+ _data = _data || {};
+ if (Array.isArray(json)) {
+ var type = json[0],
+ isDictionary = type === 'dictionary';
+ if (!isDictionary) {
+ if (_data.dictionary && json.length == 1 && /^#/.test(type))
+ return _data.dictionary[type];
+ type = Base.exports[type];
+ }
+ res = [];
+ for (var i = type ? 1 : 0, l = json.length; i < l; i++)
+ res.push(Base.deserialize(json[i], create, _data));
+ if (isDictionary) {
+ _data.dictionary = res[0];
+ } else if (type) {
+ var args = res;
+ if (create) {
+ res = create(type, args);
+ } else {
+ res = Base.create(type.prototype);
+ type.apply(res, args);
+ }
+ }
+ } else if (Base.isPlainObject(json)) {
+ res = {};
+ for (var key in json)
+ res[key] = Base.deserialize(json[key], create, _data);
+ }
+ return isRoot && json && json.length && json[0][0] === 'dictionary'
+ ? res[1]
+ : res;
+ },
+
+ exportJSON: function(obj, options) {
+ var json = Base.serialize(obj, options);
+ return options && options.asString === false
+ ? json
+ : JSON.stringify(json);
+ },
+
+ importJSON: function(json, target) {
+ return Base.deserialize(
+ typeof json === 'string' ? JSON.parse(json) : json,
+ function(type, args) {
+ var obj = target && target.constructor === type
+ ? target
+ : Base.create(type.prototype),
+ isTarget = obj === target;
+ if (args.length === 1 && obj instanceof Item
+ && (isTarget || !(obj instanceof Layer))) {
+ var arg = args[0];
+ if (Base.isPlainObject(arg))
+ arg.insert = false;
+ }
+ type.apply(obj, args);
+ if (isTarget)
+ target = null;
+ return obj;
+ });
+ },
+
+ splice: function(list, items, index, remove) {
+ var amount = items && items.length,
+ append = index === undefined;
+ index = append ? list.length : index;
+ if (index > list.length)
+ index = list.length;
+ for (var i = 0; i < amount; i++)
+ items[i]._index = index + i;
+ if (append) {
+ list.push.apply(list, items);
+ return [];
+ } else {
+ var args = [index, remove];
+ if (items)
+ args.push.apply(args, items);
+ var removed = list.splice.apply(list, args);
+ for (var i = 0, l = removed.length; i < l; i++)
+ removed[i]._index = undefined;
+ for (var i = index + amount, l = list.length; i < l; i++)
+ list[i]._index = i;
+ return removed;
+ }
+ },
+
+ capitalize: function(str) {
+ return str.replace(/\b[a-z]/g, function(match) {
+ return match.toUpperCase();
+ });
+ },
+
+ camelize: function(str) {
+ return str.replace(/-(.)/g, function(all, chr) {
+ return chr.toUpperCase();
+ });
+ },
+
+ hyphenate: function(str) {
+ return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+ }
+ }
+});
+
+var Emitter = {
+ on: function(type, func) {
+ if (typeof type !== 'string') {
+ Base.each(type, function(value, key) {
+ this.on(key, value);
+ }, this);
+ } else {
+ var entry = this._eventTypes[type];
+ if (entry) {
+ var handlers = this._callbacks = this._callbacks || {};
+ handlers = handlers[type] = handlers[type] || [];
+ if (handlers.indexOf(func) === -1) {
+ handlers.push(func);
+ if (entry.install && handlers.length == 1)
+ entry.install.call(this, type);
+ }
+ }
+ }
+ return this;
+ },
+
+ off: function(type, func) {
+ if (typeof type !== 'string') {
+ Base.each(type, function(value, key) {
+ this.off(key, value);
+ }, this);
+ return;
+ }
+ var entry = this._eventTypes[type],
+ handlers = this._callbacks && this._callbacks[type],
+ index;
+ if (entry && handlers) {
+ if (!func || (index = handlers.indexOf(func)) !== -1
+ && handlers.length === 1) {
+ if (entry.uninstall)
+ entry.uninstall.call(this, type);
+ delete this._callbacks[type];
+ } else if (index !== -1) {
+ handlers.splice(index, 1);
+ }
+ }
+ return this;
+ },
+
+ once: function(type, func) {
+ return this.on(type, function() {
+ func.apply(this, arguments);
+ this.off(type, func);
+ });
+ },
+
+ emit: function(type, event) {
+ var handlers = this._callbacks && this._callbacks[type];
+ if (!handlers)
+ return false;
+ var args = [].slice.call(arguments, 1);
+ for (var i = 0, l = handlers.length; i < l; i++) {
+ if (handlers[i].apply(this, args) === false
+ && event && event.stop) {
+ event.stop();
+ break;
+ }
+ }
+ return true;
+ },
+
+ responds: function(type) {
+ return !!(this._callbacks && this._callbacks[type]);
+ },
+
+ attach: '#on',
+ detach: '#off',
+ fire: '#emit',
+
+ _installEvents: function(install) {
+ var handlers = this._callbacks,
+ key = install ? 'install' : 'uninstall';
+ for (var type in handlers) {
+ if (handlers[type].length > 0) {
+ var entry = this._eventTypes[type],
+ func = entry[key];
+ if (func)
+ func.call(this, type);
+ }
+ }
+ },
+
+ statics: {
+ inject: function inject(src) {
+ var events = src._events;
+ if (events) {
+ var types = {};
+ Base.each(events, function(entry, key) {
+ var isString = typeof entry === 'string',
+ name = isString ? entry : key,
+ part = Base.capitalize(name),
+ type = name.substring(2).toLowerCase();
+ types[type] = isString ? {} : entry;
+ name = '_' + name;
+ src['get' + part] = function() {
+ return this[name];
+ };
+ src['set' + part] = function(func) {
+ var prev = this[name];
+ if (prev)
+ this.off(type, prev);
+ if (func)
+ this.on(type, func);
+ this[name] = func;
+ };
+ });
+ src._eventTypes = types;
+ }
+ return inject.base.apply(this, arguments);
+ }
+ }
+};
+
+var PaperScope = Base.extend({
+ _class: 'PaperScope',
+
+ initialize: function PaperScope() {
+ paper = this;
+ this.settings = new Base({
+ applyMatrix: true,
+ handleSize: 4,
+ hitTolerance: 0
+ });
+ this.project = null;
+ this.projects = [];
+ this.tools = [];
+ this.palettes = [];
+ this._id = PaperScope._id++;
+ PaperScope._scopes[this._id] = this;
+ var proto = PaperScope.prototype;
+ if (!this.support) {
+ var ctx = CanvasProvider.getContext(1, 1);
+ proto.support = {
+ nativeDash: 'setLineDash' in ctx || 'mozDash' in ctx,
+ nativeBlendModes: BlendMode.nativeModes
+ };
+ CanvasProvider.release(ctx);
+ }
+
+ if (!this.browser) {
+ var browser = proto.browser = {};
+ navigator.userAgent.toLowerCase().replace(
+ /(opera|chrome|safari|webkit|firefox|msie|trident|atom)\/?\s*([.\d]+)(?:.*version\/([.\d]+))?(?:.*rv\:([.\d]+))?/g,
+ function(all, n, v1, v2, rv) {
+ if (!browser.chrome) {
+ var v = n === 'opera' ? v2 : v1;
+ if (n === 'trident') {
+ v = rv;
+ n = 'msie';
+ }
+ browser.version = v;
+ browser.versionNumber = parseFloat(v);
+ browser.name = n;
+ browser[n] = true;
+ }
+ }
+ );
+ if (browser.chrome)
+ delete browser.webkit;
+ if (browser.atom)
+ delete browser.chrome;
+ }
+ },
+
+ version: '0.9.22',
+
+ getView: function() {
+ return this.project && this.project.getView();
+ },
+
+ getPaper: function() {
+ return this;
+ },
+
+ execute: function(code, url, options) {
+ paper.PaperScript.execute(code, this, url, options);
+ View.updateFocus();
+ },
+
+ install: function(scope) {
+ var that = this;
+ Base.each(['project', 'view', 'tool'], function(key) {
+ Base.define(scope, key, {
+ configurable: true,
+ get: function() {
+ return that[key];
+ }
+ });
+ });
+ for (var key in this)
+ if (!/^_/.test(key) && this[key])
+ scope[key] = this[key];
+ },
+
+ setup: function(element) {
+ paper = this;
+ this.project = new Project(element);
+ return this;
+ },
+
+ activate: function() {
+ paper = this;
+ },
+
+ clear: function() {
+ for (var i = this.projects.length - 1; i >= 0; i--)
+ this.projects[i].remove();
+ for (var i = this.tools.length - 1; i >= 0; i--)
+ this.tools[i].remove();
+ for (var i = this.palettes.length - 1; i >= 0; i--)
+ this.palettes[i].remove();
+ },
+
+ remove: function() {
+ this.clear();
+ delete PaperScope._scopes[this._id];
+ },
+
+ statics: new function() {
+ function handleAttribute(name) {
+ name += 'Attribute';
+ return function(el, attr) {
+ return el[name](attr) || el[name]('data-paper-' + attr);
+ };
+ }
+
+ return {
+ _scopes: {},
+ _id: 0,
+
+ get: function(id) {
+ return this._scopes[id] || null;
+ },
+
+ getAttribute: handleAttribute('get'),
+ hasAttribute: handleAttribute('has')
+ };
+ }
+});
+
+var PaperScopeItem = Base.extend(Emitter, {
+
+ initialize: function(activate) {
+ this._scope = paper;
+ this._index = this._scope[this._list].push(this) - 1;
+ if (activate || !this._scope[this._reference])
+ this.activate();
+ },
+
+ activate: function() {
+ if (!this._scope)
+ return false;
+ var prev = this._scope[this._reference];
+ if (prev && prev !== this)
+ prev.emit('deactivate');
+ this._scope[this._reference] = this;
+ this.emit('activate', prev);
+ return true;
+ },
+
+ isActive: function() {
+ return this._scope[this._reference] === this;
+ },
+
+ remove: function() {
+ if (this._index == null)
+ return false;
+ Base.splice(this._scope[this._list], null, this._index, 1);
+ if (this._scope[this._reference] == this)
+ this._scope[this._reference] = null;
+ this._scope = null;
+ return true;
+ }
+});
+
+var Formatter = Base.extend({
+ initialize: function(precision) {
+ this.precision = precision || 5;
+ this.multiplier = Math.pow(10, this.precision);
+ },
+
+ number: function(val) {
+ return Math.round(val * this.multiplier) / this.multiplier;
+ },
+
+ pair: function(val1, val2, separator) {
+ return this.number(val1) + (separator || ',') + this.number(val2);
+ },
+
+ point: function(val, separator) {
+ return this.number(val.x) + (separator || ',') + this.number(val.y);
+ },
+
+ size: function(val, separator) {
+ return this.number(val.width) + (separator || ',')
+ + this.number(val.height);
+ },
+
+ rectangle: function(val, separator) {
+ return this.point(val, separator) + (separator || ',')
+ + this.size(val, separator);
+ }
+});
+
+Formatter.instance = new Formatter();
+
+var Numerical = new function() {
+
+ var abscissas = [
+ [ 0.5773502691896257645091488],
+ [0,0.7745966692414833770358531],
+ [ 0.3399810435848562648026658,0.8611363115940525752239465],
+ [0,0.5384693101056830910363144,0.9061798459386639927976269],
+ [ 0.2386191860831969086305017,0.6612093864662645136613996,0.9324695142031520278123016],
+ [0,0.4058451513773971669066064,0.7415311855993944398638648,0.9491079123427585245261897],
+ [ 0.1834346424956498049394761,0.5255324099163289858177390,0.7966664774136267395915539,0.9602898564975362316835609],
+ [0,0.3242534234038089290385380,0.6133714327005903973087020,0.8360311073266357942994298,0.9681602395076260898355762],
+ [ 0.1488743389816312108848260,0.4333953941292471907992659,0.6794095682990244062343274,0.8650633666889845107320967,0.9739065285171717200779640],
+ [0,0.2695431559523449723315320,0.5190961292068118159257257,0.7301520055740493240934163,0.8870625997680952990751578,0.9782286581460569928039380],
+ [ 0.1252334085114689154724414,0.3678314989981801937526915,0.5873179542866174472967024,0.7699026741943046870368938,0.9041172563704748566784659,0.9815606342467192506905491],
+ [0,0.2304583159551347940655281,0.4484927510364468528779129,0.6423493394403402206439846,0.8015780907333099127942065,0.9175983992229779652065478,0.9841830547185881494728294],
+ [ 0.1080549487073436620662447,0.3191123689278897604356718,0.5152486363581540919652907,0.6872929048116854701480198,0.8272013150697649931897947,0.9284348836635735173363911,0.9862838086968123388415973],
+ [0,0.2011940939974345223006283,0.3941513470775633698972074,0.5709721726085388475372267,0.7244177313601700474161861,0.8482065834104272162006483,0.9372733924007059043077589,0.9879925180204854284895657],
+ [ 0.0950125098376374401853193,0.2816035507792589132304605,0.4580167776572273863424194,0.6178762444026437484466718,0.7554044083550030338951012,0.8656312023878317438804679,0.9445750230732325760779884,0.9894009349916499325961542]
+ ];
+
+ var weights = [
+ [1],
+ [0.8888888888888888888888889,0.5555555555555555555555556],
+ [0.6521451548625461426269361,0.3478548451374538573730639],
+ [0.5688888888888888888888889,0.4786286704993664680412915,0.2369268850561890875142640],
+ [0.4679139345726910473898703,0.3607615730481386075698335,0.1713244923791703450402961],
+ [0.4179591836734693877551020,0.3818300505051189449503698,0.2797053914892766679014678,0.1294849661688696932706114],
+ [0.3626837833783619829651504,0.3137066458778872873379622,0.2223810344533744705443560,0.1012285362903762591525314],
+ [0.3302393550012597631645251,0.3123470770400028400686304,0.2606106964029354623187429,0.1806481606948574040584720,0.0812743883615744119718922],
+ [0.2955242247147528701738930,0.2692667193099963550912269,0.2190863625159820439955349,0.1494513491505805931457763,0.0666713443086881375935688],
+ [0.2729250867779006307144835,0.2628045445102466621806889,0.2331937645919904799185237,0.1862902109277342514260976,0.1255803694649046246346943,0.0556685671161736664827537],
+ [0.2491470458134027850005624,0.2334925365383548087608499,0.2031674267230659217490645,0.1600783285433462263346525,0.1069393259953184309602547,0.0471753363865118271946160],
+ [0.2325515532308739101945895,0.2262831802628972384120902,0.2078160475368885023125232,0.1781459807619457382800467,0.1388735102197872384636018,0.0921214998377284479144218,0.0404840047653158795200216],
+ [0.2152638534631577901958764,0.2051984637212956039659241,0.1855383974779378137417166,0.1572031671581935345696019,0.1215185706879031846894148,0.0801580871597602098056333,0.0351194603317518630318329],
+ [0.2025782419255612728806202,0.1984314853271115764561183,0.1861610000155622110268006,0.1662692058169939335532009,0.1395706779261543144478048,0.1071592204671719350118695,0.0703660474881081247092674,0.0307532419961172683546284],
+ [0.1894506104550684962853967,0.1826034150449235888667637,0.1691565193950025381893121,0.1495959888165767320815017,0.1246289712555338720524763,0.0951585116824927848099251,0.0622535239386478928628438,0.0271524594117540948517806]
+ ];
+
+ var abs = Math.abs,
+ sqrt = Math.sqrt,
+ pow = Math.pow,
+ TOLERANCE = 1e-6,
+ EPSILON = 1e-12,
+ MACHINE_EPSILON = 1.12e-16;
+
+ return {
+ TOLERANCE: TOLERANCE,
+ EPSILON: EPSILON,
+ MACHINE_EPSILON: MACHINE_EPSILON,
+ KAPPA: 4 * (sqrt(2) - 1) / 3,
+
+ isZero: function(val) {
+ return abs(val) <= EPSILON;
+ },
+
+ integrate: function(f, a, b, n) {
+ var x = abscissas[n - 2],
+ w = weights[n - 2],
+ A = (b - a) * 0.5,
+ B = A + a,
+ i = 0,
+ m = (n + 1) >> 1,
+ sum = n & 1 ? w[i++] * f(B) : 0;
+ while (i < m) {
+ var Ax = A * x[i];
+ sum += w[i++] * (f(B + Ax) + f(B - Ax));
+ }
+ return A * sum;
+ },
+
+ findRoot: function(f, df, x, a, b, n, tolerance) {
+ for (var i = 0; i < n; i++) {
+ var fx = f(x),
+ dx = fx / df(x),
+ nx = x - dx;
+ if (abs(dx) < tolerance)
+ return nx;
+ if (fx > 0) {
+ b = x;
+ x = nx <= a ? (a + b) * 0.5 : nx;
+ } else {
+ a = x;
+ x = nx >= b ? (a + b) * 0.5 : nx;
+ }
+ }
+ return x;
+ },
+
+ solveQuadratic: function(a, b, c, roots, min, max) {
+ var count = 0,
+ x1, x2 = Infinity,
+ B = b,
+ D;
+ b /= 2;
+ D = b * b - a * c;
+ if (abs(D) < MACHINE_EPSILON) {
+ var pow = Math.pow,
+ gmC = pow(abs(a*b*c), 1/3);
+ if (gmC < 1e-8) {
+ /*
+ * we multiply with a factor to normalize the
+ * coefficients. The factor is just the nearest exponent
+ * of 10, big enough to raise all the coefficients to
+ * nearly [-1, +1] range.
+ */
+ var mult = pow(10, abs(
+ Math.floor(Math.log(gmC) * Math.LOG10E)));
+ if (!isFinite(mult))
+ mult = 0;
+ a *= mult;
+ b *= mult;
+ c *= mult;
+ D = b * b - a * c;
+ }
+ }
+ if (abs(a) < MACHINE_EPSILON) {
+ if (abs(B) < MACHINE_EPSILON)
+ return abs(c) < MACHINE_EPSILON ? -1 : 0;
+ x1 = -c / B;
+ } else {
+ if (D >= -MACHINE_EPSILON) {
+ D = D < 0 ? 0 : D;
+ var R = sqrt(D);
+ if (b >= MACHINE_EPSILON && b <= MACHINE_EPSILON) {
+ x1 = abs(a) >= abs(c) ? R / a : -c / R;
+ x2 = -x1;
+ } else {
+ var q = -(b + (b < 0 ? -1 : 1) * R);
+ x1 = q / a;
+ x2 = c / q;
+ }
+ }
+ }
+ if (isFinite(x1) && (min == null || x1 >= min && x1 <= max))
+ roots[count++] = x1;
+ if (x2 !== x1
+ && isFinite(x2) && (min == null || x2 >= min && x2 <= max))
+ roots[count++] = x2;
+ return count;
+ },
+
+ solveCubic: function(a, b, c, d, roots, min, max) {
+ var x, b1, c2, count = 0;
+ if (a === 0) {
+ a = b;
+ b1 = c;
+ c2 = d;
+ x = Infinity;
+ } else if (d === 0) {
+ b1 = b;
+ c2 = c;
+ x = 0;
+ } else {
+ var ec = 1 + MACHINE_EPSILON,
+ x0, q, qd, t, r, s, tmp;
+ x = -(b / a) / 3;
+ tmp = a * x,
+ b1 = tmp + b,
+ c2 = b1 * x + c,
+ qd = (tmp + b1) * x + c2,
+ q = c2 * x + d;
+ t = q /a;
+ r = pow(abs(t), 1/3);
+ s = t < 0 ? -1 : 1;
+ t = -qd / a;
+ r = t > 0 ? 1.3247179572 * Math.max(r, sqrt(t)) : r;
+ x0 = x - s * r;
+ if (x0 !== x) {
+ do {
+ x = x0;
+ tmp = a * x,
+ b1 = tmp + b,
+ c2 = b1 * x + c,
+ qd = (tmp + b1) * x + c2,
+ q = c2 * x + d;
+ x0 = qd === 0 ? x : x - q / qd / ec;
+ if (x0 === x) {
+ x = x0;
+ break;
+ }
+ } while (s * x0 > s * x);
+ if (abs(a) * x * x > abs(d / x)) {
+ c2 = -d / x;
+ b1 = (c2 - c) / x;
+ }
+ }
+ }
+ var count = Numerical.solveQuadratic(a, b1, c2, roots, min, max);
+ if (isFinite(x) && (count === 0 || x !== roots[count - 1])
+ && (min == null || x >= min && x <= max))
+ roots[count++] = x;
+ return count;
+ }
+ };
+};
+
+var Point = Base.extend({
+ _class: 'Point',
+ _readIndex: true,
+
+ initialize: function Point(arg0, arg1) {
+ var type = typeof arg0;
+ if (type === 'number') {
+ var hasY = typeof arg1 === 'number';
+ this.x = arg0;
+ this.y = hasY ? arg1 : arg0;
+ if (this.__read)
+ this.__read = hasY ? 2 : 1;
+ } else if (type === 'undefined' || arg0 === null) {
+ this.x = this.y = 0;
+ if (this.__read)
+ this.__read = arg0 === null ? 1 : 0;
+ } else {
+ if (Array.isArray(arg0)) {
+ this.x = arg0[0];
+ this.y = arg0.length > 1 ? arg0[1] : arg0[0];
+ } else if (arg0.x != null) {
+ this.x = arg0.x;
+ this.y = arg0.y;
+ } else if (arg0.width != null) {
+ this.x = arg0.width;
+ this.y = arg0.height;
+ } else if (arg0.angle != null) {
+ this.x = arg0.length;
+ this.y = 0;
+ this.setAngle(arg0.angle);
+ } else {
+ this.x = this.y = 0;
+ if (this.__read)
+ this.__read = 0;
+ }
+ if (this.__read)
+ this.__read = 1;
+ }
+ },
+
+ set: function(x, y) {
+ this.x = x;
+ this.y = y;
+ return this;
+ },
+
+ equals: function(point) {
+ return this === point || point
+ && (this.x === point.x && this.y === point.y
+ || Array.isArray(point)
+ && this.x === point[0] && this.y === point[1])
+ || false;
+ },
+
+ clone: function() {
+ return new Point(this.x, this.y);
+ },
+
+ toString: function() {
+ var f = Formatter.instance;
+ return '{ x: ' + f.number(this.x) + ', y: ' + f.number(this.y) + ' }';
+ },
+
+ _serialize: function(options) {
+ var f = options.formatter;
+ return [f.number(this.x), f.number(this.y)];
+ },
+
+ getLength: function() {
+ return Math.sqrt(this.x * this.x + this.y * this.y);
+ },
+
+ setLength: function(length) {
+ if (this.isZero()) {
+ var angle = this._angle || 0;
+ this.set(
+ Math.cos(angle) * length,
+ Math.sin(angle) * length
+ );
+ } else {
+ var scale = length / this.getLength();
+ if (Numerical.isZero(scale))
+ this.getAngle();
+ this.set(
+ this.x * scale,
+ this.y * scale
+ );
+ }
+ },
+ getAngle: function() {
+ return this.getAngleInRadians.apply(this, arguments) * 180 / Math.PI;
+ },
+
+ setAngle: function(angle) {
+ this.setAngleInRadians.call(this, angle * Math.PI / 180);
+ },
+
+ getAngleInDegrees: '#getAngle',
+ setAngleInDegrees: '#setAngle',
+
+ getAngleInRadians: function() {
+ if (!arguments.length) {
+ return this.isZero()
+ ? this._angle || 0
+ : this._angle = Math.atan2(this.y, this.x);
+ } else {
+ var point = Point.read(arguments),
+ div = this.getLength() * point.getLength();
+ if (Numerical.isZero(div)) {
+ return NaN;
+ } else {
+ var a = this.dot(point) / div;
+ return Math.acos(a < -1 ? -1 : a > 1 ? 1 : a);
+ }
+ }
+ },
+
+ setAngleInRadians: function(angle) {
+ this._angle = angle;
+ if (!this.isZero()) {
+ var length = this.getLength();
+ this.set(
+ Math.cos(angle) * length,
+ Math.sin(angle) * length
+ );
+ }
+ },
+
+ getQuadrant: function() {
+ return this.x >= 0 ? this.y >= 0 ? 1 : 4 : this.y >= 0 ? 2 : 3;
+ }
+}, {
+ beans: false,
+
+ getDirectedAngle: function() {
+ var point = Point.read(arguments);
+ return Math.atan2(this.cross(point), this.dot(point)) * 180 / Math.PI;
+ },
+
+ getDistance: function() {
+ var point = Point.read(arguments),
+ x = point.x - this.x,
+ y = point.y - this.y,
+ d = x * x + y * y,
+ squared = Base.read(arguments);
+ return squared ? d : Math.sqrt(d);
+ },
+
+ normalize: function(length) {
+ if (length === undefined)
+ length = 1;
+ var current = this.getLength(),
+ scale = current !== 0 ? length / current : 0,
+ point = new Point(this.x * scale, this.y * scale);
+ if (scale >= 0)
+ point._angle = this._angle;
+ return point;
+ },
+
+ rotate: function(angle, center) {
+ if (angle === 0)
+ return this.clone();
+ angle = angle * Math.PI / 180;
+ var point = center ? this.subtract(center) : this,
+ s = Math.sin(angle),
+ c = Math.cos(angle);
+ point = new Point(
+ point.x * c - point.y * s,
+ point.x * s + point.y * c
+ );
+ return center ? point.add(center) : point;
+ },
+
+ transform: function(matrix) {
+ return matrix ? matrix._transformPoint(this) : this;
+ },
+
+ add: function() {
+ var point = Point.read(arguments);
+ return new Point(this.x + point.x, this.y + point.y);
+ },
+
+ subtract: function() {
+ var point = Point.read(arguments);
+ return new Point(this.x - point.x, this.y - point.y);
+ },
+
+ multiply: function() {
+ var point = Point.read(arguments);
+ return new Point(this.x * point.x, this.y * point.y);
+ },
+
+ divide: function() {
+ var point = Point.read(arguments);
+ return new Point(this.x / point.x, this.y / point.y);
+ },
+
+ modulo: function() {
+ var point = Point.read(arguments);
+ return new Point(this.x % point.x, this.y % point.y);
+ },
+
+ negate: function() {
+ return new Point(-this.x, -this.y);
+ },
+
+ isInside: function() {
+ return Rectangle.read(arguments).contains(this);
+ },
+
+ isClose: function(point, tolerance) {
+ return this.getDistance(point) < tolerance;
+ },
+
+ isColinear: function(point) {
+ return Math.abs(this.cross(point)) < 1e-12;
+ },
+
+ isOrthogonal: function(point) {
+ return Math.abs(this.dot(point)) < 1e-12;
+ },
+
+ isZero: function() {
+ return Numerical.isZero(this.x) && Numerical.isZero(this.y);
+ },
+
+ isNaN: function() {
+ return isNaN(this.x) || isNaN(this.y);
+ },
+
+ dot: function() {
+ var point = Point.read(arguments);
+ return this.x * point.x + this.y * point.y;
+ },
+
+ cross: function() {
+ var point = Point.read(arguments);
+ return this.x * point.y - this.y * point.x;
+ },
+
+ project: function() {
+ var point = Point.read(arguments);
+ if (point.isZero()) {
+ return new Point(0, 0);
+ } else {
+ var scale = this.dot(point) / point.dot(point);
+ return new Point(
+ point.x * scale,
+ point.y * scale
+ );
+ }
+ },
+
+ statics: {
+ min: function() {
+ var point1 = Point.read(arguments),
+ point2 = Point.read(arguments);
+ return new Point(
+ Math.min(point1.x, point2.x),
+ Math.min(point1.y, point2.y)
+ );
+ },
+
+ max: function() {
+ var point1 = Point.read(arguments),
+ point2 = Point.read(arguments);
+ return new Point(
+ Math.max(point1.x, point2.x),
+ Math.max(point1.y, point2.y)
+ );
+ },
+
+ random: function() {
+ return new Point(Math.random(), Math.random());
+ }
+ }
+}, Base.each(['round', 'ceil', 'floor', 'abs'], function(name) {
+ var op = Math[name];
+ this[name] = function() {
+ return new Point(op(this.x), op(this.y));
+ };
+}, {}));
+
+var LinkedPoint = Point.extend({
+ initialize: function Point(x, y, owner, setter) {
+ this._x = x;
+ this._y = y;
+ this._owner = owner;
+ this._setter = setter;
+ },
+
+ set: function(x, y, _dontNotify) {
+ this._x = x;
+ this._y = y;
+ if (!_dontNotify)
+ this._owner[this._setter](this);
+ return this;
+ },
+
+ getX: function() {
+ return this._x;
+ },
+
+ setX: function(x) {
+ this._x = x;
+ this._owner[this._setter](this);
+ },
+
+ getY: function() {
+ return this._y;
+ },
+
+ setY: function(y) {
+ this._y = y;
+ this._owner[this._setter](this);
+ }
+});
+
+var Size = Base.extend({
+ _class: 'Size',
+ _readIndex: true,
+
+ initialize: function Size(arg0, arg1) {
+ var type = typeof arg0;
+ if (type === 'number') {
+ var hasHeight = typeof arg1 === 'number';
+ this.width = arg0;
+ this.height = hasHeight ? arg1 : arg0;
+ if (this.__read)
+ this.__read = hasHeight ? 2 : 1;
+ } else if (type === 'undefined' || arg0 === null) {
+ this.width = this.height = 0;
+ if (this.__read)
+ this.__read = arg0 === null ? 1 : 0;
+ } else {
+ if (Array.isArray(arg0)) {
+ this.width = arg0[0];
+ this.height = arg0.length > 1 ? arg0[1] : arg0[0];
+ } else if (arg0.width != null) {
+ this.width = arg0.width;
+ this.height = arg0.height;
+ } else if (arg0.x != null) {
+ this.width = arg0.x;
+ this.height = arg0.y;
+ } else {
+ this.width = this.height = 0;
+ if (this.__read)
+ this.__read = 0;
+ }
+ if (this.__read)
+ this.__read = 1;
+ }
+ },
+
+ set: function(width, height) {
+ this.width = width;
+ this.height = height;
+ return this;
+ },
+
+ equals: function(size) {
+ return size === this || size && (this.width === size.width
+ && this.height === size.height
+ || Array.isArray(size) && this.width === size[0]
+ && this.height === size[1]) || false;
+ },
+
+ clone: function() {
+ return new Size(this.width, this.height);
+ },
+
+ toString: function() {
+ var f = Formatter.instance;
+ return '{ width: ' + f.number(this.width)
+ + ', height: ' + f.number(this.height) + ' }';
+ },
+
+ _serialize: function(options) {
+ var f = options.formatter;
+ return [f.number(this.width),
+ f.number(this.height)];
+ },
+
+ add: function() {
+ var size = Size.read(arguments);
+ return new Size(this.width + size.width, this.height + size.height);
+ },
+
+ subtract: function() {
+ var size = Size.read(arguments);
+ return new Size(this.width - size.width, this.height - size.height);
+ },
+
+ multiply: function() {
+ var size = Size.read(arguments);
+ return new Size(this.width * size.width, this.height * size.height);
+ },
+
+ divide: function() {
+ var size = Size.read(arguments);
+ return new Size(this.width / size.width, this.height / size.height);
+ },
+
+ modulo: function() {
+ var size = Size.read(arguments);
+ return new Size(this.width % size.width, this.height % size.height);
+ },
+
+ negate: function() {
+ return new Size(-this.width, -this.height);
+ },
+
+ isZero: function() {
+ return Numerical.isZero(this.width) && Numerical.isZero(this.height);
+ },
+
+ isNaN: function() {
+ return isNaN(this.width) || isNaN(this.height);
+ },
+
+ statics: {
+ min: function(size1, size2) {
+ return new Size(
+ Math.min(size1.width, size2.width),
+ Math.min(size1.height, size2.height));
+ },
+
+ max: function(size1, size2) {
+ return new Size(
+ Math.max(size1.width, size2.width),
+ Math.max(size1.height, size2.height));
+ },
+
+ random: function() {
+ return new Size(Math.random(), Math.random());
+ }
+ }
+}, Base.each(['round', 'ceil', 'floor', 'abs'], function(name) {
+ var op = Math[name];
+ this[name] = function() {
+ return new Size(op(this.width), op(this.height));
+ };
+}, {}));
+
+var LinkedSize = Size.extend({
+ initialize: function Size(width, height, owner, setter) {
+ this._width = width;
+ this._height = height;
+ this._owner = owner;
+ this._setter = setter;
+ },
+
+ set: function(width, height, _dontNotify) {
+ this._width = width;
+ this._height = height;
+ if (!_dontNotify)
+ this._owner[this._setter](this);
+ return this;
+ },
+
+ getWidth: function() {
+ return this._width;
+ },
+
+ setWidth: function(width) {
+ this._width = width;
+ this._owner[this._setter](this);
+ },
+
+ getHeight: function() {
+ return this._height;
+ },
+
+ setHeight: function(height) {
+ this._height = height;
+ this._owner[this._setter](this);
+ }
+});
+
+var Rectangle = Base.extend({
+ _class: 'Rectangle',
+ _readIndex: true,
+ beans: true,
+
+ initialize: function Rectangle(arg0, arg1, arg2, arg3) {
+ var type = typeof arg0,
+ read = 0;
+ if (type === 'number') {
+ this.x = arg0;
+ this.y = arg1;
+ this.width = arg2;
+ this.height = arg3;
+ read = 4;
+ } else if (type === 'undefined' || arg0 === null) {
+ this.x = this.y = this.width = this.height = 0;
+ read = arg0 === null ? 1 : 0;
+ } else if (arguments.length === 1) {
+ if (Array.isArray(arg0)) {
+ this.x = arg0[0];
+ this.y = arg0[1];
+ this.width = arg0[2];
+ this.height = arg0[3];
+ read = 1;
+ } else if (arg0.x !== undefined || arg0.width !== undefined) {
+ this.x = arg0.x || 0;
+ this.y = arg0.y || 0;
+ this.width = arg0.width || 0;
+ this.height = arg0.height || 0;
+ read = 1;
+ } else if (arg0.from === undefined && arg0.to === undefined) {
+ this.x = this.y = this.width = this.height = 0;
+ this._set(arg0);
+ read = 1;
+ }
+ }
+ if (!read) {
+ var point = Point.readNamed(arguments, 'from'),
+ next = Base.peek(arguments);
+ this.x = point.x;
+ this.y = point.y;
+ if (next && next.x !== undefined || Base.hasNamed(arguments, 'to')) {
+ var to = Point.readNamed(arguments, 'to');
+ this.width = to.x - point.x;
+ this.height = to.y - point.y;
+ if (this.width < 0) {
+ this.x = to.x;
+ this.width = -this.width;
+ }
+ if (this.height < 0) {
+ this.y = to.y;
+ this.height = -this.height;
+ }
+ } else {
+ var size = Size.read(arguments);
+ this.width = size.width;
+ this.height = size.height;
+ }
+ read = arguments.__index;
+ }
+ if (this.__read)
+ this.__read = read;
+ },
+
+ set: function(x, y, width, height) {
+ this.x = x;
+ this.y = y;
+ this.width = width;
+ this.height = height;
+ return this;
+ },
+
+ clone: function() {
+ return new Rectangle(this.x, this.y, this.width, this.height);
+ },
+
+ equals: function(rect) {
+ var rt = Base.isPlainValue(rect)
+ ? Rectangle.read(arguments)
+ : rect;
+ return rt === this
+ || rt && this.x === rt.x && this.y === rt.y
+ && this.width === rt.width && this.height === rt.height
+ || false;
+ },
+
+ toString: function() {
+ var f = Formatter.instance;
+ return '{ x: ' + f.number(this.x)
+ + ', y: ' + f.number(this.y)
+ + ', width: ' + f.number(this.width)
+ + ', height: ' + f.number(this.height)
+ + ' }';
+ },
+
+ _serialize: function(options) {
+ var f = options.formatter;
+ return [f.number(this.x),
+ f.number(this.y),
+ f.number(this.width),
+ f.number(this.height)];
+ },
+
+ getPoint: function(_dontLink) {
+ var ctor = _dontLink ? Point : LinkedPoint;
+ return new ctor(this.x, this.y, this, 'setPoint');
+ },
+
+ setPoint: function() {
+ var point = Point.read(arguments);
+ this.x = point.x;
+ this.y = point.y;
+ },
+
+ getSize: function(_dontLink) {
+ var ctor = _dontLink ? Size : LinkedSize;
+ return new ctor(this.width, this.height, this, 'setSize');
+ },
+
+ setSize: function() {
+ var size = Size.read(arguments);
+ if (this._fixX)
+ this.x += (this.width - size.width) * this._fixX;
+ if (this._fixY)
+ this.y += (this.height - size.height) * this._fixY;
+ this.width = size.width;
+ this.height = size.height;
+ this._fixW = 1;
+ this._fixH = 1;
+ },
+
+ getLeft: function() {
+ return this.x;
+ },
+
+ setLeft: function(left) {
+ if (!this._fixW)
+ this.width -= left - this.x;
+ this.x = left;
+ this._fixX = 0;
+ },
+
+ getTop: function() {
+ return this.y;
+ },
+
+ setTop: function(top) {
+ if (!this._fixH)
+ this.height -= top - this.y;
+ this.y = top;
+ this._fixY = 0;
+ },
+
+ getRight: function() {
+ return this.x + this.width;
+ },
+
+ setRight: function(right) {
+ if (this._fixX !== undefined && this._fixX !== 1)
+ this._fixW = 0;
+ if (this._fixW)
+ this.x = right - this.width;
+ else
+ this.width = right - this.x;
+ this._fixX = 1;
+ },
+
+ getBottom: function() {
+ return this.y + this.height;
+ },
+
+ setBottom: function(bottom) {
+ if (this._fixY !== undefined && this._fixY !== 1)
+ this._fixH = 0;
+ if (this._fixH)
+ this.y = bottom - this.height;
+ else
+ this.height = bottom - this.y;
+ this._fixY = 1;
+ },
+
+ getCenterX: function() {
+ return this.x + this.width * 0.5;
+ },
+
+ setCenterX: function(x) {
+ this.x = x - this.width * 0.5;
+ this._fixX = 0.5;
+ },
+
+ getCenterY: function() {
+ return this.y + this.height * 0.5;
+ },
+
+ setCenterY: function(y) {
+ this.y = y - this.height * 0.5;
+ this._fixY = 0.5;
+ },
+
+ getCenter: function(_dontLink) {
+ var ctor = _dontLink ? Point : LinkedPoint;
+ return new ctor(this.getCenterX(), this.getCenterY(), this, 'setCenter');
+ },
+
+ setCenter: function() {
+ var point = Point.read(arguments);
+ this.setCenterX(point.x);
+ this.setCenterY(point.y);
+ return this;
+ },
+
+ getArea: function() {
+ return this.width * this.height;
+ },
+
+ isEmpty: function() {
+ return this.width === 0 || this.height === 0;
+ },
+
+ contains: function(arg) {
+ return arg && arg.width !== undefined
+ || (Array.isArray(arg) ? arg : arguments).length == 4
+ ? this._containsRectangle(Rectangle.read(arguments))
+ : this._containsPoint(Point.read(arguments));
+ },
+
+ _containsPoint: function(point) {
+ var x = point.x,
+ y = point.y;
+ return x >= this.x && y >= this.y
+ && x <= this.x + this.width
+ && y <= this.y + this.height;
+ },
+
+ _containsRectangle: function(rect) {
+ var x = rect.x,
+ y = rect.y;
+ return x >= this.x && y >= this.y
+ && x + rect.width <= this.x + this.width
+ && y + rect.height <= this.y + this.height;
+ },
+
+ intersects: function() {
+ var rect = Rectangle.read(arguments);
+ return rect.x + rect.width > this.x
+ && rect.y + rect.height > this.y
+ && rect.x < this.x + this.width
+ && rect.y < this.y + this.height;
+ },
+
+ touches: function() {
+ var rect = Rectangle.read(arguments);
+ return rect.x + rect.width >= this.x
+ && rect.y + rect.height >= this.y
+ && rect.x <= this.x + this.width
+ && rect.y <= this.y + this.height;
+ },
+
+ intersect: function() {
+ var rect = Rectangle.read(arguments),
+ x1 = Math.max(this.x, rect.x),
+ y1 = Math.max(this.y, rect.y),
+ x2 = Math.min(this.x + this.width, rect.x + rect.width),
+ y2 = Math.min(this.y + this.height, rect.y + rect.height);
+ return new Rectangle(x1, y1, x2 - x1, y2 - y1);
+ },
+
+ unite: function() {
+ var rect = Rectangle.read(arguments),
+ x1 = Math.min(this.x, rect.x),
+ y1 = Math.min(this.y, rect.y),
+ x2 = Math.max(this.x + this.width, rect.x + rect.width),
+ y2 = Math.max(this.y + this.height, rect.y + rect.height);
+ return new Rectangle(x1, y1, x2 - x1, y2 - y1);
+ },
+
+ include: function() {
+ var point = Point.read(arguments);
+ var x1 = Math.min(this.x, point.x),
+ y1 = Math.min(this.y, point.y),
+ x2 = Math.max(this.x + this.width, point.x),
+ y2 = Math.max(this.y + this.height, point.y);
+ return new Rectangle(x1, y1, x2 - x1, y2 - y1);
+ },
+
+ expand: function() {
+ var amount = Size.read(arguments),
+ hor = amount.width,
+ ver = amount.height;
+ return new Rectangle(this.x - hor / 2, this.y - ver / 2,
+ this.width + hor, this.height + ver);
+ },
+
+ scale: function(hor, ver) {
+ return this.expand(this.width * hor - this.width,
+ this.height * (ver === undefined ? hor : ver) - this.height);
+ }
+}, Base.each([
+ ['Top', 'Left'], ['Top', 'Right'],
+ ['Bottom', 'Left'], ['Bottom', 'Right'],
+ ['Left', 'Center'], ['Top', 'Center'],
+ ['Right', 'Center'], ['Bottom', 'Center']
+ ],
+ function(parts, index) {
+ var part = parts.join('');
+ var xFirst = /^[RL]/.test(part);
+ if (index >= 4)
+ parts[1] += xFirst ? 'Y' : 'X';
+ var x = parts[xFirst ? 0 : 1],
+ y = parts[xFirst ? 1 : 0],
+ getX = 'get' + x,
+ getY = 'get' + y,
+ setX = 'set' + x,
+ setY = 'set' + y,
+ get = 'get' + part,
+ set = 'set' + part;
+ this[get] = function(_dontLink) {
+ var ctor = _dontLink ? Point : LinkedPoint;
+ return new ctor(this[getX](), this[getY](), this, set);
+ };
+ this[set] = function() {
+ var point = Point.read(arguments);
+ this[setX](point.x);
+ this[setY](point.y);
+ };
+ }, {
+ beans: true
+ }
+));
+
+var LinkedRectangle = Rectangle.extend({
+ initialize: function Rectangle(x, y, width, height, owner, setter) {
+ this.set(x, y, width, height, true);
+ this._owner = owner;
+ this._setter = setter;
+ },
+
+ set: function(x, y, width, height, _dontNotify) {
+ this._x = x;
+ this._y = y;
+ this._width = width;
+ this._height = height;
+ if (!_dontNotify)
+ this._owner[this._setter](this);
+ return this;
+ }
+}, new function() {
+ var proto = Rectangle.prototype;
+
+ return Base.each(['x', 'y', 'width', 'height'], function(key) {
+ var part = Base.capitalize(key);
+ var internal = '_' + key;
+ this['get' + part] = function() {
+ return this[internal];
+ };
+
+ this['set' + part] = function(value) {
+ this[internal] = value;
+ if (!this._dontNotify)
+ this._owner[this._setter](this);
+ };
+ }, Base.each(['Point', 'Size', 'Center',
+ 'Left', 'Top', 'Right', 'Bottom', 'CenterX', 'CenterY',
+ 'TopLeft', 'TopRight', 'BottomLeft', 'BottomRight',
+ 'LeftCenter', 'TopCenter', 'RightCenter', 'BottomCenter'],
+ function(key) {
+ var name = 'set' + key;
+ this[name] = function() {
+ this._dontNotify = true;
+ proto[name].apply(this, arguments);
+ this._dontNotify = false;
+ this._owner[this._setter](this);
+ };
+ }, {
+ isSelected: function() {
+ return this._owner._boundsSelected;
+ },
+
+ setSelected: function(selected) {
+ var owner = this._owner;
+ if (owner.setSelected) {
+ owner._boundsSelected = selected;
+ owner.setSelected(selected || owner._selectedSegmentState > 0);
+ }
+ }
+ })
+ );
+});
+
+var Matrix = Base.extend({
+ _class: 'Matrix',
+
+ initialize: function Matrix(arg) {
+ var count = arguments.length,
+ ok = true;
+ if (count === 6) {
+ this.set.apply(this, arguments);
+ } else if (count === 1) {
+ if (arg instanceof Matrix) {
+ this.set(arg._a, arg._c, arg._b, arg._d, arg._tx, arg._ty);
+ } else if (Array.isArray(arg)) {
+ this.set.apply(this, arg);
+ } else {
+ ok = false;
+ }
+ } else if (count === 0) {
+ this.reset();
+ } else {
+ ok = false;
+ }
+ if (!ok)
+ throw new Error('Unsupported matrix parameters');
+ },
+
+ set: function(a, c, b, d, tx, ty, _dontNotify) {
+ this._a = a;
+ this._c = c;
+ this._b = b;
+ this._d = d;
+ this._tx = tx;
+ this._ty = ty;
+ if (!_dontNotify)
+ this._changed();
+ return this;
+ },
+
+ _serialize: function(options) {
+ return Base.serialize(this.getValues(), options);
+ },
+
+ _changed: function() {
+ var owner = this._owner;
+ if (owner) {
+ if (owner._applyMatrix) {
+ owner.transform(null, true);
+ } else {
+ owner._changed(9);
+ }
+ }
+ },
+
+ clone: function() {
+ return new Matrix(this._a, this._c, this._b, this._d,
+ this._tx, this._ty);
+ },
+
+ equals: function(mx) {
+ return mx === this || mx && this._a === mx._a && this._b === mx._b
+ && this._c === mx._c && this._d === mx._d
+ && this._tx === mx._tx && this._ty === mx._ty
+ || false;
+ },
+
+ toString: function() {
+ var f = Formatter.instance;
+ return '[[' + [f.number(this._a), f.number(this._b),
+ f.number(this._tx)].join(', ') + '], ['
+ + [f.number(this._c), f.number(this._d),
+ f.number(this._ty)].join(', ') + ']]';
+ },
+
+ reset: function(_dontNotify) {
+ this._a = this._d = 1;
+ this._c = this._b = this._tx = this._ty = 0;
+ if (!_dontNotify)
+ this._changed();
+ return this;
+ },
+
+ apply: function(recursively, _setApplyMatrix) {
+ var owner = this._owner;
+ if (owner) {
+ owner.transform(null, true, Base.pick(recursively, true),
+ _setApplyMatrix);
+ return this.isIdentity();
+ }
+ return false;
+ },
+
+ translate: function() {
+ var point = Point.read(arguments),
+ x = point.x,
+ y = point.y;
+ this._tx += x * this._a + y * this._b;
+ this._ty += x * this._c + y * this._d;
+ this._changed();
+ return this;
+ },
+
+ scale: function() {
+ var scale = Point.read(arguments),
+ center = Point.read(arguments, 0, { readNull: true });
+ if (center)
+ this.translate(center);
+ this._a *= scale.x;
+ this._c *= scale.x;
+ this._b *= scale.y;
+ this._d *= scale.y;
+ if (center)
+ this.translate(center.negate());
+ this._changed();
+ return this;
+ },
+
+ rotate: function(angle ) {
+ angle *= Math.PI / 180;
+ var center = Point.read(arguments, 1),
+ x = center.x,
+ y = center.y,
+ cos = Math.cos(angle),
+ sin = Math.sin(angle),
+ tx = x - x * cos + y * sin,
+ ty = y - x * sin - y * cos,
+ a = this._a,
+ b = this._b,
+ c = this._c,
+ d = this._d;
+ this._a = cos * a + sin * b;
+ this._b = -sin * a + cos * b;
+ this._c = cos * c + sin * d;
+ this._d = -sin * c + cos * d;
+ this._tx += tx * a + ty * b;
+ this._ty += tx * c + ty * d;
+ this._changed();
+ return this;
+ },
+
+ shear: function() {
+ var shear = Point.read(arguments),
+ center = Point.read(arguments, 0, { readNull: true });
+ if (center)
+ this.translate(center);
+ var a = this._a,
+ c = this._c;
+ this._a += shear.y * this._b;
+ this._c += shear.y * this._d;
+ this._b += shear.x * a;
+ this._d += shear.x * c;
+ if (center)
+ this.translate(center.negate());
+ this._changed();
+ return this;
+ },
+
+ skew: function() {
+ var skew = Point.read(arguments),
+ center = Point.read(arguments, 0, { readNull: true }),
+ toRadians = Math.PI / 180,
+ shear = new Point(Math.tan(skew.x * toRadians),
+ Math.tan(skew.y * toRadians));
+ return this.shear(shear, center);
+ },
+
+ concatenate: function(mx) {
+ var a1 = this._a,
+ b1 = this._b,
+ c1 = this._c,
+ d1 = this._d,
+ a2 = mx._a,
+ b2 = mx._b,
+ c2 = mx._c,
+ d2 = mx._d,
+ tx2 = mx._tx,
+ ty2 = mx._ty;
+ this._a = a2 * a1 + c2 * b1;
+ this._b = b2 * a1 + d2 * b1;
+ this._c = a2 * c1 + c2 * d1;
+ this._d = b2 * c1 + d2 * d1;
+ this._tx += tx2 * a1 + ty2 * b1;
+ this._ty += tx2 * c1 + ty2 * d1;
+ this._changed();
+ return this;
+ },
+
+ preConcatenate: function(mx) {
+ var a1 = this._a,
+ b1 = this._b,
+ c1 = this._c,
+ d1 = this._d,
+ tx1 = this._tx,
+ ty1 = this._ty,
+ a2 = mx._a,
+ b2 = mx._b,
+ c2 = mx._c,
+ d2 = mx._d,
+ tx2 = mx._tx,
+ ty2 = mx._ty;
+ this._a = a2 * a1 + b2 * c1;
+ this._b = a2 * b1 + b2 * d1;
+ this._c = c2 * a1 + d2 * c1;
+ this._d = c2 * b1 + d2 * d1;
+ this._tx = a2 * tx1 + b2 * ty1 + tx2;
+ this._ty = c2 * tx1 + d2 * ty1 + ty2;
+ this._changed();
+ return this;
+ },
+
+ chain: function(mx) {
+ var a1 = this._a,
+ b1 = this._b,
+ c1 = this._c,
+ d1 = this._d,
+ tx1 = this._tx,
+ ty1 = this._ty,
+ a2 = mx._a,
+ b2 = mx._b,
+ c2 = mx._c,
+ d2 = mx._d,
+ tx2 = mx._tx,
+ ty2 = mx._ty;
+ return new Matrix(
+ a2 * a1 + c2 * b1,
+ a2 * c1 + c2 * d1,
+ b2 * a1 + d2 * b1,
+ b2 * c1 + d2 * d1,
+ tx1 + tx2 * a1 + ty2 * b1,
+ ty1 + tx2 * c1 + ty2 * d1);
+ },
+
+ isIdentity: function() {
+ return this._a === 1 && this._c === 0 && this._b === 0 && this._d === 1
+ && this._tx === 0 && this._ty === 0;
+ },
+
+ orNullIfIdentity: function() {
+ return this.isIdentity() ? null : this;
+ },
+
+ isInvertible: function() {
+ return !!this._getDeterminant();
+ },
+
+ isSingular: function() {
+ return !this._getDeterminant();
+ },
+
+ transform: function( src, dst, count) {
+ return arguments.length < 3
+ ? this._transformPoint(Point.read(arguments))
+ : this._transformCoordinates(src, dst, count);
+ },
+
+ _transformPoint: function(point, dest, _dontNotify) {
+ var x = point.x,
+ y = point.y;
+ if (!dest)
+ dest = new Point();
+ return dest.set(
+ x * this._a + y * this._b + this._tx,
+ x * this._c + y * this._d + this._ty,
+ _dontNotify
+ );
+ },
+
+ _transformCoordinates: function(src, dst, count) {
+ var i = 0,
+ j = 0,
+ max = 2 * count;
+ while (i < max) {
+ var x = src[i++],
+ y = src[i++];
+ dst[j++] = x * this._a + y * this._b + this._tx;
+ dst[j++] = x * this._c + y * this._d + this._ty;
+ }
+ return dst;
+ },
+
+ _transformCorners: function(rect) {
+ var x1 = rect.x,
+ y1 = rect.y,
+ x2 = x1 + rect.width,
+ y2 = y1 + rect.height,
+ coords = [ x1, y1, x2, y1, x2, y2, x1, y2 ];
+ return this._transformCoordinates(coords, coords, 4);
+ },
+
+ _transformBounds: function(bounds, dest, _dontNotify) {
+ var coords = this._transformCorners(bounds),
+ min = coords.slice(0, 2),
+ max = coords.slice();
+ for (var i = 2; i < 8; i++) {
+ var val = coords[i],
+ j = i & 1;
+ if (val < min[j])
+ min[j] = val;
+ else if (val > max[j])
+ max[j] = val;
+ }
+ if (!dest)
+ dest = new Rectangle();
+ return dest.set(min[0], min[1], max[0] - min[0], max[1] - min[1],
+ _dontNotify);
+ },
+
+ inverseTransform: function() {
+ return this._inverseTransform(Point.read(arguments));
+ },
+
+ _getDeterminant: function() {
+ var det = this._a * this._d - this._b * this._c;
+ return isFinite(det) && !Numerical.isZero(det)
+ && isFinite(this._tx) && isFinite(this._ty)
+ ? det : null;
+ },
+
+ _inverseTransform: function(point, dest, _dontNotify) {
+ var det = this._getDeterminant();
+ if (!det)
+ return null;
+ var x = point.x - this._tx,
+ y = point.y - this._ty;
+ if (!dest)
+ dest = new Point();
+ return dest.set(
+ (x * this._d - y * this._b) / det,
+ (y * this._a - x * this._c) / det,
+ _dontNotify
+ );
+ },
+
+ decompose: function() {
+ var a = this._a, b = this._b, c = this._c, d = this._d;
+ if (Numerical.isZero(a * d - b * c))
+ return null;
+
+ var scaleX = Math.sqrt(a * a + b * b);
+ a /= scaleX;
+ b /= scaleX;
+
+ var shear = a * c + b * d;
+ c -= a * shear;
+ d -= b * shear;
+
+ var scaleY = Math.sqrt(c * c + d * d);
+ c /= scaleY;
+ d /= scaleY;
+ shear /= scaleY;
+
+ if (a * d < b * c) {
+ a = -a;
+ b = -b;
+ shear = -shear;
+ scaleX = -scaleX;
+ }
+
+ return {
+ scaling: new Point(scaleX, scaleY),
+ rotation: -Math.atan2(b, a) * 180 / Math.PI,
+ shearing: shear
+ };
+ },
+
+ getValues: function() {
+ return [ this._a, this._c, this._b, this._d, this._tx, this._ty ];
+ },
+
+ getTranslation: function() {
+ return new Point(this._tx, this._ty);
+ },
+
+ getScaling: function() {
+ return (this.decompose() || {}).scaling;
+ },
+
+ getRotation: function() {
+ return (this.decompose() || {}).rotation;
+ },
+
+ inverted: function() {
+ var det = this._getDeterminant();
+ return det && new Matrix(
+ this._d / det,
+ -this._c / det,
+ -this._b / det,
+ this._a / det,
+ (this._b * this._ty - this._d * this._tx) / det,
+ (this._c * this._tx - this._a * this._ty) / det);
+ },
+
+ shiftless: function() {
+ return new Matrix(this._a, this._c, this._b, this._d, 0, 0);
+ },
+
+ applyToContext: function(ctx) {
+ ctx.transform(this._a, this._c, this._b, this._d, this._tx, this._ty);
+ }
+}, Base.each(['a', 'c', 'b', 'd', 'tx', 'ty'], function(name) {
+ var part = Base.capitalize(name),
+ prop = '_' + name;
+ this['get' + part] = function() {
+ return this[prop];
+ };
+ this['set' + part] = function(value) {
+ this[prop] = value;
+ this._changed();
+ };
+}, {}));
+
+var Line = Base.extend({
+ _class: 'Line',
+
+ initialize: function Line(arg0, arg1, arg2, arg3, arg4) {
+ var asVector = false;
+ if (arguments.length >= 4) {
+ this._px = arg0;
+ this._py = arg1;
+ this._vx = arg2;
+ this._vy = arg3;
+ asVector = arg4;
+ } else {
+ this._px = arg0.x;
+ this._py = arg0.y;
+ this._vx = arg1.x;
+ this._vy = arg1.y;
+ asVector = arg2;
+ }
+ if (!asVector) {
+ this._vx -= this._px;
+ this._vy -= this._py;
+ }
+ },
+
+ getPoint: function() {
+ return new Point(this._px, this._py);
+ },
+
+ getVector: function() {
+ return new Point(this._vx, this._vy);
+ },
+
+ getLength: function() {
+ return this.getVector().getLength();
+ },
+
+ intersect: function(line, isInfinite) {
+ return Line.intersect(
+ this._px, this._py, this._vx, this._vy,
+ line._px, line._py, line._vx, line._vy,
+ true, isInfinite);
+ },
+
+ getSide: function(point) {
+ return Line.getSide(
+ this._px, this._py, this._vx, this._vy,
+ point.x, point.y, true);
+ },
+
+ getDistance: function(point) {
+ return Math.abs(Line.getSignedDistance(
+ this._px, this._py, this._vx, this._vy,
+ point.x, point.y, true));
+ },
+
+ statics: {
+ intersect: function(apx, apy, avx, avy, bpx, bpy, bvx, bvy, asVector,
+ isInfinite) {
+ if (!asVector) {
+ avx -= apx;
+ avy -= apy;
+ bvx -= bpx;
+ bvy -= bpy;
+ }
+ var cross = avx * bvy - avy * bvx;
+ if (!Numerical.isZero(cross)) {
+ var dx = apx - bpx,
+ dy = apy - bpy,
+ ta = (bvx * dy - bvy * dx) / cross,
+ tb = (avx * dy - avy * dx) / cross;
+ if (isInfinite || 0 <= ta && ta <= 1 && 0 <= tb && tb <= 1)
+ return new Point(
+ apx + ta * avx,
+ apy + ta * avy);
+ }
+ },
+
+ getSide: function(px, py, vx, vy, x, y, asVector) {
+ if (!asVector) {
+ vx -= px;
+ vy -= py;
+ }
+ var v2x = x - px,
+ v2y = y - py,
+ ccw = v2x * vy - v2y * vx;
+ if (ccw === 0) {
+ ccw = v2x * vx + v2y * vy;
+ if (ccw > 0) {
+ v2x -= vx;
+ v2y -= vy;
+ ccw = v2x * vx + v2y * vy;
+ if (ccw < 0)
+ ccw = 0;
+ }
+ }
+ return ccw < 0 ? -1 : ccw > 0 ? 1 : 0;
+ },
+
+ getSignedDistance: function(px, py, vx, vy, x, y, asVector) {
+ if (!asVector) {
+ vx -= px;
+ vy -= py;
+ }
+ return Numerical.isZero(vx)
+ ? vy >= 0 ? px - x : x - px
+ : Numerical.isZero(vy)
+ ? vx >= 0 ? y - py : py - y
+ : (vx * (y - py) - vy * (x - px)) / Math.sqrt(vx * vx + vy * vy);
+ }
+ }
+});
+
+var Project = PaperScopeItem.extend({
+ _class: 'Project',
+ _list: 'projects',
+ _reference: 'project',
+
+ initialize: function Project(element) {
+ PaperScopeItem.call(this, true);
+ this.layers = [];
+ this._activeLayer = null;
+ this.symbols = [];
+ this._currentStyle = new Style(null, null, this);
+ this._view = View.create(this,
+ element || CanvasProvider.getCanvas(1, 1));
+ this._selectedItems = {};
+ this._selectedItemCount = 0;
+ this._updateVersion = 0;
+ },
+
+ _serialize: function(options, dictionary) {
+ return Base.serialize(this.layers, options, true, dictionary);
+ },
+
+ clear: function() {
+ for (var i = this.layers.length - 1; i >= 0; i--)
+ this.layers[i].remove();
+ this.symbols = [];
+ },
+
+ isEmpty: function() {
+ return this.layers.length === 0;
+ },
+
+ remove: function remove() {
+ if (!remove.base.call(this))
+ return false;
+ if (this._view)
+ this._view.remove();
+ return true;
+ },
+
+ getView: function() {
+ return this._view;
+ },
+
+ getCurrentStyle: function() {
+ return this._currentStyle;
+ },
+
+ setCurrentStyle: function(style) {
+ this._currentStyle.initialize(style);
+ },
+
+ getIndex: function() {
+ return this._index;
+ },
+
+ getOptions: function() {
+ return this._scope.settings;
+ },
+
+ getActiveLayer: function() {
+ return this._activeLayer || new Layer({ project: this });
+ },
+
+ getSelectedItems: function() {
+ var items = [];
+ for (var id in this._selectedItems) {
+ var item = this._selectedItems[id];
+ if (item.isInserted())
+ items.push(item);
+ }
+ return items;
+ },
+
+ insertChild: function(index, item, _preserve) {
+ if (item instanceof Layer) {
+ item._remove(false, true);
+ Base.splice(this.layers, [item], index, 0);
+ item._setProject(this, true);
+ if (this._changes)
+ item._changed(5);
+ if (!this._activeLayer)
+ this._activeLayer = item;
+ } else if (item instanceof Item) {
+ (this._activeLayer
+ || this.insertChild(index, new Layer(Item.NO_INSERT)))
+ .insertChild(index, item, _preserve);
+ } else {
+ item = null;
+ }
+ return item;
+ },
+
+ addChild: function(item, _preserve) {
+ return this.insertChild(undefined, item, _preserve);
+ },
+
+ _updateSelection: function(item) {
+ var id = item._id,
+ selectedItems = this._selectedItems;
+ if (item._selected) {
+ if (selectedItems[id] !== item) {
+ this._selectedItemCount++;
+ selectedItems[id] = item;
+ }
+ } else if (selectedItems[id] === item) {
+ this._selectedItemCount--;
+ delete selectedItems[id];
+ }
+ },
+
+ selectAll: function() {
+ var layers = this.layers;
+ for (var i = 0, l = layers.length; i < l; i++)
+ layers[i].setFullySelected(true);
+ },
+
+ deselectAll: function() {
+ var selectedItems = this._selectedItems;
+ for (var i in selectedItems)
+ selectedItems[i].setFullySelected(false);
+ },
+
+ hitTest: function() {
+ var point = Point.read(arguments),
+ options = HitResult.getOptions(Base.read(arguments));
+ for (var i = this.layers.length - 1; i >= 0; i--) {
+ var res = this.layers[i]._hitTest(point, options);
+ if (res) return res;
+ }
+ return null;
+ },
+
+ getItems: function(match) {
+ return Item._getItems(this.layers, match);
+ },
+
+ getItem: function(match) {
+ return Item._getItems(this.layers, match, null, null, true)[0] || null;
+ },
+
+ importJSON: function(json) {
+ this.activate();
+ var layer = this._activeLayer;
+ return Base.importJSON(json, layer && layer.isEmpty() && layer);
+ },
+
+ draw: function(ctx, matrix, pixelRatio) {
+ this._updateVersion++;
+ ctx.save();
+ matrix.applyToContext(ctx);
+ var param = new Base({
+ offset: new Point(0, 0),
+ pixelRatio: pixelRatio,
+ viewMatrix: matrix.isIdentity() ? null : matrix,
+ matrices: [new Matrix()],
+ updateMatrix: true
+ });
+ for (var i = 0, layers = this.layers, l = layers.length; i < l; i++)
+ layers[i].draw(ctx, param);
+ ctx.restore();
+
+ if (this._selectedItemCount > 0) {
+ ctx.save();
+ ctx.strokeWidth = 1;
+ var items = this._selectedItems,
+ size = this._scope.settings.handleSize,
+ version = this._updateVersion;
+ for (var id in items)
+ items[id]._drawSelection(ctx, matrix, size, items, version);
+ ctx.restore();
+ }
+ }
+});
+
+var Symbol = Base.extend({
+ _class: 'Symbol',
+
+ initialize: function Symbol(item, dontCenter) {
+ this._id = Symbol._id = (Symbol._id || 0) + 1;
+ this.project = paper.project;
+ this.project.symbols.push(this);
+ if (item)
+ this.setDefinition(item, dontCenter);
+ },
+
+ _serialize: function(options, dictionary) {
+ return dictionary.add(this, function() {
+ return Base.serialize([this._class, this._definition],
+ options, false, dictionary);
+ });
+ },
+
+ _changed: function(flags) {
+ if (flags & 8) {
+ Item._clearBoundsCache(this);
+ }
+ if (flags & 1) {
+ this.project._needsUpdate = true;
+ }
+ },
+
+ getDefinition: function() {
+ return this._definition;
+ },
+
+ setDefinition: function(item, _dontCenter) {
+ if (item._parentSymbol)
+ item = item.clone();
+ if (this._definition)
+ this._definition._parentSymbol = null;
+ this._definition = item;
+ item.remove();
+ item.setSelected(false);
+ if (!_dontCenter)
+ item.setPosition(new Point());
+ item._parentSymbol = this;
+ this._changed(9);
+ },
+
+ place: function(position) {
+ return new PlacedSymbol(this, position);
+ },
+
+ clone: function() {
+ return new Symbol(this._definition.clone(false));
+ },
+
+ equals: function(symbol) {
+ return symbol === this
+ || symbol && this.definition.equals(symbol.definition)
+ || false;
+ }
+});
+
+var Item = Base.extend(Emitter, {
+ statics: {
+ extend: function extend(src) {
+ if (src._serializeFields)
+ src._serializeFields = new Base(
+ this.prototype._serializeFields, src._serializeFields);
+ return extend.base.apply(this, arguments);
+ },
+
+ NO_INSERT: { insert: false }
+ },
+
+ _class: 'Item',
+ _applyMatrix: true,
+ _canApplyMatrix: true,
+ _boundsSelected: false,
+ _selectChildren: false,
+ _serializeFields: {
+ name: null,
+ applyMatrix: null,
+ matrix: new Matrix(),
+ pivot: null,
+ locked: false,
+ visible: true,
+ blendMode: 'normal',
+ opacity: 1,
+ guide: false,
+ selected: false,
+ clipMask: false,
+ data: {}
+ },
+
+ initialize: function Item() {
+ },
+
+ _initialize: function(props, point) {
+ var hasProps = props && Base.isPlainObject(props),
+ internal = hasProps && props.internal === true,
+ matrix = this._matrix = new Matrix(),
+ project = hasProps && props.project || paper.project;
+ if (!internal)
+ this._id = Item._id = (Item._id || 0) + 1;
+ this._applyMatrix = this._canApplyMatrix && paper.settings.applyMatrix;
+ if (point)
+ matrix.translate(point);
+ matrix._owner = this;
+ this._style = new Style(project._currentStyle, this, project);
+ if (!this._project) {
+ if (internal || hasProps && props.insert === false) {
+ this._setProject(project);
+ } else if (hasProps && props.parent) {
+ this.setParent(props.parent);
+ } else {
+ (project._activeLayer || new Layer()).addChild(this);
+ }
+ }
+ if (hasProps && props !== Item.NO_INSERT)
+ this._set(props, { insert: true, parent: true }, true);
+ return hasProps;
+ },
+
+ _events: new function() {
+
+ var mouseFlags = {
+ mousedown: {
+ mousedown: 1,
+ mousedrag: 1,
+ click: 1,
+ doubleclick: 1
+ },
+ mouseup: {
+ mouseup: 1,
+ mousedrag: 1,
+ click: 1,
+ doubleclick: 1
+ },
+ mousemove: {
+ mousedrag: 1,
+ mousemove: 1,
+ mouseenter: 1,
+ mouseleave: 1
+ }
+ };
+
+ var mouseEvent = {
+ install: function(type) {
+ var counters = this.getView()._eventCounters;
+ if (counters) {
+ for (var key in mouseFlags) {
+ counters[key] = (counters[key] || 0)
+ + (mouseFlags[key][type] || 0);
+ }
+ }
+ },
+ uninstall: function(type) {
+ var counters = this.getView()._eventCounters;
+ if (counters) {
+ for (var key in mouseFlags)
+ counters[key] -= mouseFlags[key][type] || 0;
+ }
+ }
+ };
+
+ return Base.each(['onMouseDown', 'onMouseUp', 'onMouseDrag', 'onClick',
+ 'onDoubleClick', 'onMouseMove', 'onMouseEnter', 'onMouseLeave'],
+ function(name) {
+ this[name] = mouseEvent;
+ }, {
+ onFrame: {
+ install: function() {
+ this._animateItem(true);
+ },
+ uninstall: function() {
+ this._animateItem(false);
+ }
+ },
+
+ onLoad: {}
+ }
+ );
+ },
+
+ _animateItem: function(animate) {
+ this.getView()._animateItem(this, animate);
+ },
+
+ _serialize: function(options, dictionary) {
+ var props = {},
+ that = this;
+
+ function serialize(fields) {
+ for (var key in fields) {
+ var value = that[key];
+ if (!Base.equals(value, key === 'leading'
+ ? fields.fontSize * 1.2 : fields[key])) {
+ props[key] = Base.serialize(value, options,
+ key !== 'data', dictionary);
+ }
+ }
+ }
+
+ serialize(this._serializeFields);
+ if (!(this instanceof Group))
+ serialize(this._style._defaults);
+ return [ this._class, props ];
+ },
+
+ _changed: function(flags) {
+ var symbol = this._parentSymbol,
+ cacheParent = this._parent || symbol,
+ project = this._project;
+ if (flags & 8) {
+ this._bounds = this._position = this._decomposed =
+ this._globalMatrix = this._currentPath = undefined;
+ }
+ if (cacheParent
+ && (flags & 40)) {
+ Item._clearBoundsCache(cacheParent);
+ }
+ if (flags & 2) {
+ Item._clearBoundsCache(this);
+ }
+ if (project) {
+ if (flags & 1) {
+ project._needsUpdate = true;
+ }
+ if (project._changes) {
+ var entry = project._changesById[this._id];
+ if (entry) {
+ entry.flags |= flags;
+ } else {
+ entry = { item: this, flags: flags };
+ project._changesById[this._id] = entry;
+ project._changes.push(entry);
+ }
+ }
+ }
+ if (symbol)
+ symbol._changed(flags);
+ },
+
+ set: function(props) {
+ if (props)
+ this._set(props);
+ return this;
+ },
+
+ getId: function() {
+ return this._id;
+ },
+
+ getName: function() {
+ return this._name;
+ },
+
+ setName: function(name, unique) {
+
+ if (this._name)
+ this._removeNamed();
+ if (name === (+name) + '')
+ throw new Error(
+ 'Names consisting only of numbers are not supported.');
+ var parent = this._parent;
+ if (name && parent) {
+ var children = parent._children,
+ namedChildren = parent._namedChildren,
+ orig = name,
+ i = 1;
+ while (unique && children[name])
+ name = orig + ' ' + (i++);
+ (namedChildren[name] = namedChildren[name] || []).push(this);
+ children[name] = this;
+ }
+ this._name = name || undefined;
+ this._changed(128);
+ },
+
+ getStyle: function() {
+ return this._style;
+ },
+
+ setStyle: function(style) {
+ this.getStyle().set(style);
+ }
+}, Base.each(['locked', 'visible', 'blendMode', 'opacity', 'guide'],
+ function(name) {
+ var part = Base.capitalize(name),
+ name = '_' + name;
+ this['get' + part] = function() {
+ return this[name];
+ };
+ this['set' + part] = function(value) {
+ if (value != this[name]) {
+ this[name] = value;
+ this._changed(name === '_locked'
+ ? 128 : 129);
+ }
+ };
+ },
+{}), {
+ beans: true,
+
+ _locked: false,
+
+ _visible: true,
+
+ _blendMode: 'normal',
+
+ _opacity: 1,
+
+ _guide: false,
+
+ isSelected: function() {
+ if (this._selectChildren) {
+ var children = this._children;
+ for (var i = 0, l = children.length; i < l; i++)
+ if (children[i].isSelected())
+ return true;
+ }
+ return this._selected;
+ },
+
+ setSelected: function(selected, noChildren) {
+ if (!noChildren && this._selectChildren) {
+ var children = this._children;
+ for (var i = 0, l = children.length; i < l; i++)
+ children[i].setSelected(selected);
+ }
+ if ((selected = !!selected) ^ this._selected) {
+ this._selected = selected;
+ this._project._updateSelection(this);
+ this._changed(129);
+ }
+ },
+
+ _selected: false,
+
+ isFullySelected: function() {
+ var children = this._children;
+ if (children && this._selected) {
+ for (var i = 0, l = children.length; i < l; i++)
+ if (!children[i].isFullySelected())
+ return false;
+ return true;
+ }
+ return this._selected;
+ },
+
+ setFullySelected: function(selected) {
+ var children = this._children;
+ if (children) {
+ for (var i = 0, l = children.length; i < l; i++)
+ children[i].setFullySelected(selected);
+ }
+ this.setSelected(selected, true);
+ },
+
+ isClipMask: function() {
+ return this._clipMask;
+ },
+
+ setClipMask: function(clipMask) {
+ if (this._clipMask != (clipMask = !!clipMask)) {
+ this._clipMask = clipMask;
+ if (clipMask) {
+ this.setFillColor(null);
+ this.setStrokeColor(null);
+ }
+ this._changed(129);
+ if (this._parent)
+ this._parent._changed(1024);
+ }
+ },
+
+ _clipMask: false,
+
+ getData: function() {
+ if (!this._data)
+ this._data = {};
+ return this._data;
+ },
+
+ setData: function(data) {
+ this._data = data;
+ },
+
+ getPosition: function(_dontLink) {
+ var position = this._position,
+ ctor = _dontLink ? Point : LinkedPoint;
+ if (!position) {
+ var pivot = this._pivot;
+ position = this._position = pivot
+ ? this._matrix._transformPoint(pivot)
+ : this.getBounds().getCenter(true);
+ }
+ return new ctor(position.x, position.y, this, 'setPosition');
+ },
+
+ setPosition: function() {
+ this.translate(Point.read(arguments).subtract(this.getPosition(true)));
+ },
+
+ getPivot: function(_dontLink) {
+ var pivot = this._pivot;
+ if (pivot) {
+ var ctor = _dontLink ? Point : LinkedPoint;
+ pivot = new ctor(pivot.x, pivot.y, this, 'setPivot');
+ }
+ return pivot;
+ },
+
+ setPivot: function() {
+ this._pivot = Point.read(arguments);
+ this._position = undefined;
+ },
+
+ _pivot: null,
+
+ getRegistration: '#getPivot',
+ setRegistration: '#setPivot'
+}, Base.each(['bounds', 'strokeBounds', 'handleBounds', 'roughBounds',
+ 'internalBounds', 'internalRoughBounds'],
+ function(key) {
+ var getter = 'get' + Base.capitalize(key),
+ match = key.match(/^internal(.*)$/),
+ internalGetter = match ? 'get' + match[1] : null;
+ this[getter] = function(_matrix) {
+ var boundsGetter = this._boundsGetter,
+ name = !internalGetter && (typeof boundsGetter === 'string'
+ ? boundsGetter : boundsGetter && boundsGetter[getter])
+ || getter,
+ bounds = this._getCachedBounds(name, _matrix, this,
+ internalGetter);
+ return key === 'bounds'
+ ? new LinkedRectangle(bounds.x, bounds.y, bounds.width,
+ bounds.height, this, 'setBounds')
+ : bounds;
+ };
+ },
+{
+ beans: true,
+
+ _getBounds: function(getter, matrix, cacheItem) {
+ var children = this._children;
+ if (!children || children.length == 0)
+ return new Rectangle();
+ var x1 = Infinity,
+ x2 = -x1,
+ y1 = x1,
+ y2 = x2;
+ for (var i = 0, l = children.length; i < l; i++) {
+ var child = children[i];
+ if (child._visible && !child.isEmpty()) {
+ var rect = child._getCachedBounds(getter,
+ matrix && matrix.chain(child._matrix), cacheItem);
+ x1 = Math.min(rect.x, x1);
+ y1 = Math.min(rect.y, y1);
+ x2 = Math.max(rect.x + rect.width, x2);
+ y2 = Math.max(rect.y + rect.height, y2);
+ }
+ }
+ return isFinite(x1)
+ ? new Rectangle(x1, y1, x2 - x1, y2 - y1)
+ : new Rectangle();
+ },
+
+ setBounds: function() {
+ var rect = Rectangle.read(arguments),
+ bounds = this.getBounds(),
+ matrix = new Matrix(),
+ center = rect.getCenter();
+ matrix.translate(center);
+ if (rect.width != bounds.width || rect.height != bounds.height) {
+ matrix.scale(
+ bounds.width != 0 ? rect.width / bounds.width : 1,
+ bounds.height != 0 ? rect.height / bounds.height : 1);
+ }
+ center = bounds.getCenter();
+ matrix.translate(-center.x, -center.y);
+ this.transform(matrix);
+ },
+
+ _getCachedBounds: function(getter, matrix, cacheItem, internalGetter) {
+ matrix = matrix && matrix.orNullIfIdentity();
+ var _matrix = internalGetter ? null : this._matrix.orNullIfIdentity(),
+ cache = (!matrix || matrix.equals(_matrix)) && getter;
+ var cacheParent = this._parent || this._parentSymbol;
+ if (cacheParent) {
+ var id = cacheItem._id,
+ ref = cacheParent._boundsCache = cacheParent._boundsCache || {
+ ids: {},
+ list: []
+ };
+ if (!ref.ids[id]) {
+ ref.list.push(cacheItem);
+ ref.ids[id] = cacheItem;
+ }
+ }
+ if (cache && this._bounds && this._bounds[cache])
+ return this._bounds[cache].clone();
+ var bounds = this._getBounds(internalGetter || getter,
+ matrix || _matrix, cacheItem);
+ if (cache) {
+ if (!this._bounds)
+ this._bounds = {};
+ var cached = this._bounds[cache] = bounds.clone();
+ cached._internal = !!internalGetter;
+ }
+ return bounds;
+ },
+
+ statics: {
+ _clearBoundsCache: function(item) {
+ var cache = item._boundsCache;
+ if (cache) {
+ item._bounds = item._position = item._boundsCache = undefined;
+ for (var i = 0, list = cache.list, l = list.length; i < l; i++) {
+ var other = list[i];
+ if (other !== item) {
+ other._bounds = other._position = undefined;
+ if (other._boundsCache)
+ Item._clearBoundsCache(other);
+ }
+ }
+ }
+ }
+ }
+
+}), {
+ beans: true,
+
+ _decompose: function() {
+ return this._decomposed = this._matrix.decompose();
+ },
+
+ getRotation: function() {
+ var decomposed = this._decomposed || this._decompose();
+ return decomposed && decomposed.rotation;
+ },
+
+ setRotation: function(rotation) {
+ var current = this.getRotation();
+ if (current != null && rotation != null) {
+ var decomposed = this._decomposed;
+ this.rotate(rotation - current);
+ decomposed.rotation = rotation;
+ this._decomposed = decomposed;
+ }
+ },
+
+ getScaling: function(_dontLink) {
+ var decomposed = this._decomposed || this._decompose(),
+ scaling = decomposed && decomposed.scaling,
+ ctor = _dontLink ? Point : LinkedPoint;
+ return scaling && new ctor(scaling.x, scaling.y, this, 'setScaling');
+ },
+
+ setScaling: function() {
+ var current = this.getScaling();
+ if (current) {
+ var scaling = Point.read(arguments, 0, { clone: true }),
+ decomposed = this._decomposed;
+ this.scale(scaling.x / current.x, scaling.y / current.y);
+ decomposed.scaling = scaling;
+ this._decomposed = decomposed;
+ }
+ },
+
+ getMatrix: function() {
+ return this._matrix;
+ },
+
+ setMatrix: function(matrix) {
+ this._matrix.initialize(matrix);
+ if (this._applyMatrix) {
+ this.transform(null, true);
+ } else {
+ this._changed(9);
+ }
+ },
+
+ getGlobalMatrix: function(_dontClone) {
+ var matrix = this._globalMatrix,
+ updateVersion = this._project._updateVersion;
+ if (matrix && matrix._updateVersion !== updateVersion)
+ matrix = null;
+ if (!matrix) {
+ matrix = this._globalMatrix = this._matrix.clone();
+ var parent = this._parent;
+ if (parent)
+ matrix.preConcatenate(parent.getGlobalMatrix(true));
+ matrix._updateVersion = updateVersion;
+ }
+ return _dontClone ? matrix : matrix.clone();
+ },
+
+ getApplyMatrix: function() {
+ return this._applyMatrix;
+ },
+
+ setApplyMatrix: function(apply) {
+ if (this._applyMatrix = this._canApplyMatrix && !!apply)
+ this.transform(null, true);
+ },
+
+ getTransformContent: '#getApplyMatrix',
+ setTransformContent: '#setApplyMatrix',
+}, {
+ getProject: function() {
+ return this._project;
+ },
+
+ _setProject: function(project, installEvents) {
+ if (this._project !== project) {
+ if (this._project)
+ this._installEvents(false);
+ this._project = project;
+ var children = this._children;
+ for (var i = 0, l = children && children.length; i < l; i++)
+ children[i]._setProject(project);
+ installEvents = true;
+ }
+ if (installEvents)
+ this._installEvents(true);
+ },
+
+ getView: function() {
+ return this._project.getView();
+ },
+
+ _installEvents: function _installEvents(install) {
+ _installEvents.base.call(this, install);
+ var children = this._children;
+ for (var i = 0, l = children && children.length; i < l; i++)
+ children[i]._installEvents(install);
+ },
+
+ getLayer: function() {
+ var parent = this;
+ while (parent = parent._parent) {
+ if (parent instanceof Layer)
+ return parent;
+ }
+ return null;
+ },
+
+ getParent: function() {
+ return this._parent;
+ },
+
+ setParent: function(item) {
+ return item.addChild(this);
+ },
+
+ getChildren: function() {
+ return this._children;
+ },
+
+ setChildren: function(items) {
+ this.removeChildren();
+ this.addChildren(items);
+ },
+
+ getFirstChild: function() {
+ return this._children && this._children[0] || null;
+ },
+
+ getLastChild: function() {
+ return this._children && this._children[this._children.length - 1]
+ || null;
+ },
+
+ getNextSibling: function() {
+ return this._parent && this._parent._children[this._index + 1] || null;
+ },
+
+ getPreviousSibling: function() {
+ return this._parent && this._parent._children[this._index - 1] || null;
+ },
+
+ getIndex: function() {
+ return this._index;
+ },
+
+ equals: function(item) {
+ return item === this || item && this._class === item._class
+ && this._style.equals(item._style)
+ && this._matrix.equals(item._matrix)
+ && this._locked === item._locked
+ && this._visible === item._visible
+ && this._blendMode === item._blendMode
+ && this._opacity === item._opacity
+ && this._clipMask === item._clipMask
+ && this._guide === item._guide
+ && this._equals(item)
+ || false;
+ },
+
+ _equals: function(item) {
+ return Base.equals(this._children, item._children);
+ },
+
+ clone: function(insert) {
+ return this._clone(new this.constructor(Item.NO_INSERT), insert);
+ },
+
+ _clone: function(copy, insert) {
+ copy.setStyle(this._style);
+ if (this._children) {
+ for (var i = 0, l = this._children.length; i < l; i++)
+ copy.addChild(this._children[i].clone(false), true);
+ }
+ if (insert || insert === undefined)
+ copy.insertAbove(this);
+ var keys = ['_locked', '_visible', '_blendMode', '_opacity',
+ '_clipMask', '_guide', '_applyMatrix'];
+ for (var i = 0, l = keys.length; i < l; i++) {
+ var key = keys[i];
+ if (this.hasOwnProperty(key))
+ copy[key] = this[key];
+ }
+ copy._matrix.initialize(this._matrix);
+ copy._data = this._data ? Base.clone(this._data) : null;
+ copy.setSelected(this._selected);
+ if (this._name)
+ copy.setName(this._name, true);
+ return copy;
+ },
+
+ copyTo: function(itemOrProject) {
+ return itemOrProject.addChild(this.clone(false));
+ },
+
+ rasterize: function(resolution) {
+ var bounds = this.getStrokeBounds(),
+ scale = (resolution || this.getView().getResolution()) / 72,
+ topLeft = bounds.getTopLeft().floor(),
+ bottomRight = bounds.getBottomRight().ceil(),
+ size = new Size(bottomRight.subtract(topLeft)),
+ canvas = CanvasProvider.getCanvas(size.multiply(scale)),
+ ctx = canvas.getContext('2d'),
+ matrix = new Matrix().scale(scale).translate(topLeft.negate());
+ ctx.save();
+ matrix.applyToContext(ctx);
+ this.draw(ctx, new Base({ matrices: [matrix] }));
+ ctx.restore();
+ var raster = new Raster(Item.NO_INSERT);
+ raster.setCanvas(canvas);
+ raster.transform(new Matrix().translate(topLeft.add(size.divide(2)))
+ .scale(1 / scale));
+ raster.insertAbove(this);
+ return raster;
+ },
+
+ contains: function() {
+ return !!this._contains(
+ this._matrix._inverseTransform(Point.read(arguments)));
+ },
+
+ _contains: function(point) {
+ if (this._children) {
+ for (var i = this._children.length - 1; i >= 0; i--) {
+ if (this._children[i].contains(point))
+ return true;
+ }
+ return false;
+ }
+ return point.isInside(this.getInternalBounds());
+ },
+
+ isInside: function() {
+ return Rectangle.read(arguments).contains(this.getBounds());
+ },
+
+ _asPathItem: function() {
+ return new Path.Rectangle({
+ rectangle: this.getInternalBounds(),
+ matrix: this._matrix,
+ insert: false,
+ });
+ },
+
+ intersects: function(item, _matrix) {
+ if (!(item instanceof Item))
+ return false;
+ return this._asPathItem().getIntersections(item._asPathItem(),
+ _matrix || item._matrix).length > 0;
+ },
+
+ hitTest: function() {
+ return this._hitTest(
+ Point.read(arguments),
+ HitResult.getOptions(Base.read(arguments)));
+ },
+
+ _hitTest: function(point, options) {
+ if (this._locked || !this._visible || this._guide && !options.guides
+ || this.isEmpty())
+ return null;
+
+ var matrix = this._matrix,
+ parentTotalMatrix = options._totalMatrix,
+ view = this.getView(),
+ totalMatrix = options._totalMatrix = parentTotalMatrix
+ ? parentTotalMatrix.chain(matrix)
+ : this.getGlobalMatrix().preConcatenate(view._matrix),
+ tolerancePadding = options._tolerancePadding = new Size(
+ Path._getPenPadding(1, totalMatrix.inverted())
+ ).multiply(
+ Math.max(options.tolerance, 0.000001)
+ );
+ point = matrix._inverseTransform(point);
+
+ if (!this._children && !this.getInternalRoughBounds()
+ .expand(tolerancePadding.multiply(2))._containsPoint(point))
+ return null;
+ var checkSelf = !(options.guides && !this._guide
+ || options.selected && !this._selected
+ || options.type && options.type !== Base.hyphenate(this._class)
+ || options.class && !(this instanceof options.class)),
+ that = this,
+ res;
+
+ function checkBounds(type, part) {
+ var pt = bounds['get' + part]();
+ if (point.subtract(pt).divide(tolerancePadding).length <= 1)
+ return new HitResult(type, that,
+ { name: Base.hyphenate(part), point: pt });
+ }
+
+ if (checkSelf && (options.center || options.bounds) && this._parent) {
+ var bounds = this.getInternalBounds();
+ if (options.center)
+ res = checkBounds('center', 'Center');
+ if (!res && options.bounds) {
+ var points = [
+ 'TopLeft', 'TopRight', 'BottomLeft', 'BottomRight',
+ 'LeftCenter', 'TopCenter', 'RightCenter', 'BottomCenter'
+ ];
+ for (var i = 0; i < 8 && !res; i++)
+ res = checkBounds('bounds', points[i]);
+ }
+ }
+
+ var children = !res && this._children;
+ if (children) {
+ var opts = this._getChildHitTestOptions(options);
+ for (var i = children.length - 1; i >= 0 && !res; i--)
+ res = children[i]._hitTest(point, opts);
+ }
+ if (!res && checkSelf)
+ res = this._hitTestSelf(point, options);
+ if (res && res.point)
+ res.point = matrix.transform(res.point);
+ options._totalMatrix = parentTotalMatrix;
+ return res;
+ },
+
+ _getChildHitTestOptions: function(options) {
+ return options;
+ },
+
+ _hitTestSelf: function(point, options) {
+ if (options.fill && this.hasFill() && this._contains(point))
+ return new HitResult('fill', this);
+ },
+
+ matches: function(name, compare) {
+ function matchObject(obj1, obj2) {
+ for (var i in obj1) {
+ if (obj1.hasOwnProperty(i)) {
+ var val1 = obj1[i],
+ val2 = obj2[i];
+ if (Base.isPlainObject(val1) && Base.isPlainObject(val2)) {
+ if (!matchObject(val1, val2))
+ return false;
+ } else if (!Base.equals(val1, val2)) {
+ return false;
+ }
+ }
+ }
+ return true;
+ }
+ if (typeof name === 'object') {
+ for (var key in name) {
+ if (name.hasOwnProperty(key) && !this.matches(key, name[key]))
+ return false;
+ }
+ } else {
+ var value = /^(empty|editable)$/.test(name)
+ ? this['is' + Base.capitalize(name)]()
+ : name === 'type'
+ ? Base.hyphenate(this._class)
+ : this[name];
+ if (/^(constructor|class)$/.test(name)) {
+ if (!(this instanceof compare))
+ return false;
+ } else if (compare instanceof RegExp) {
+ if (!compare.test(value))
+ return false;
+ } else if (typeof compare === 'function') {
+ if (!compare(value))
+ return false;
+ } else if (Base.isPlainObject(compare)) {
+ if (!matchObject(compare, value))
+ return false;
+ } else if (!Base.equals(value, compare)) {
+ return false;
+ }
+ }
+ return true;
+ },
+
+ getItems: function(match) {
+ return Item._getItems(this._children, match, this._matrix);
+ },
+
+ getItem: function(match) {
+ return Item._getItems(this._children, match, this._matrix, null, true)
+ [0] || null;
+ },
+
+ statics: {
+ _getItems: function _getItems(children, match, matrix, param,
+ firstOnly) {
+ if (!param) {
+ var overlapping = match.overlapping,
+ inside = match.inside,
+ bounds = overlapping || inside,
+ rect = bounds && Rectangle.read([bounds]);
+ param = {
+ items: [],
+ inside: rect,
+ overlapping: overlapping && new Path.Rectangle({
+ rectangle: rect,
+ insert: false
+ })
+ };
+ if (bounds)
+ match = Base.set({}, match,
+ { inside: true, overlapping: true });
+ }
+ var items = param.items,
+ inside = param.inside,
+ overlapping = param.overlapping;
+ matrix = inside && (matrix || new Matrix());
+ for (var i = 0, l = children && children.length; i < l; i++) {
+ var child = children[i],
+ childMatrix = matrix && matrix.chain(child._matrix),
+ add = true;
+ if (inside) {
+ var bounds = child.getBounds(childMatrix);
+ if (!inside.intersects(bounds))
+ continue;
+ if (!(inside && inside.contains(bounds)) && !(overlapping
+ && overlapping.intersects(child, childMatrix)))
+ add = false;
+ }
+ if (add && child.matches(match)) {
+ items.push(child);
+ if (firstOnly)
+ break;
+ }
+ _getItems(child._children, match,
+ childMatrix, param,
+ firstOnly);
+ if (firstOnly && items.length > 0)
+ break;
+ }
+ return items;
+ }
+ }
+}, {
+
+ importJSON: function(json) {
+ var res = Base.importJSON(json, this);
+ return res !== this
+ ? this.addChild(res)
+ : res;
+ },
+
+ addChild: function(item, _preserve) {
+ return this.insertChild(undefined, item, _preserve);
+ },
+
+ insertChild: function(index, item, _preserve) {
+ var res = item ? this.insertChildren(index, [item], _preserve) : null;
+ return res && res[0];
+ },
+
+ addChildren: function(items, _preserve) {
+ return this.insertChildren(this._children.length, items, _preserve);
+ },
+
+ insertChildren: function(index, items, _preserve, _proto) {
+ var children = this._children;
+ if (children && items && items.length > 0) {
+ items = Array.prototype.slice.apply(items);
+ for (var i = items.length - 1; i >= 0; i--) {
+ var item = items[i];
+ if (_proto && !(item instanceof _proto)) {
+ items.splice(i, 1);
+ } else {
+ var shift = item._parent === this && item._index < index;
+ if (item._remove(false, true) && shift)
+ index--;
+ }
+ }
+ Base.splice(children, items, index, 0);
+ var project = this._project,
+ notifySelf = project && project._changes;
+ for (var i = 0, l = items.length; i < l; i++) {
+ var item = items[i];
+ item._parent = this;
+ item._setProject(this._project, true);
+ if (item._name)
+ item.setName(item._name);
+ if (notifySelf)
+ this._changed(5);
+ }
+ this._changed(11);
+ } else {
+ items = null;
+ }
+ return items;
+ },
+
+ _insertSibling: function(index, item, _preserve) {
+ return this._parent
+ ? this._parent.insertChild(index, item, _preserve)
+ : null;
+ },
+
+ insertAbove: function(item, _preserve) {
+ return item._insertSibling(item._index + 1, this, _preserve);
+ },
+
+ insertBelow: function(item, _preserve) {
+ return item._insertSibling(item._index, this, _preserve);
+ },
+
+ sendToBack: function() {
+ return (this._parent || this instanceof Layer && this._project)
+ .insertChild(0, this);
+ },
+
+ bringToFront: function() {
+ return (this._parent || this instanceof Layer && this._project)
+ .addChild(this);
+ },
+
+ appendTop: '#addChild',
+
+ appendBottom: function(item) {
+ return this.insertChild(0, item);
+ },
+
+ moveAbove: '#insertAbove',
+
+ moveBelow: '#insertBelow',
+
+ reduce: function() {
+ if (this._children && this._children.length === 1) {
+ var child = this._children[0].reduce();
+ child.insertAbove(this);
+ child.setStyle(this._style);
+ this.remove();
+ return child;
+ }
+ return this;
+ },
+
+ _removeNamed: function() {
+ var parent = this._parent;
+ if (parent) {
+ var children = parent._children,
+ namedChildren = parent._namedChildren,
+ name = this._name,
+ namedArray = namedChildren[name],
+ index = namedArray ? namedArray.indexOf(this) : -1;
+ if (index !== -1) {
+ if (children[name] == this)
+ delete children[name];
+ namedArray.splice(index, 1);
+ if (namedArray.length) {
+ children[name] = namedArray[namedArray.length - 1];
+ } else {
+ delete namedChildren[name];
+ }
+ }
+ }
+ },
+
+ _remove: function(notifySelf, notifyParent) {
+ var parent = this._parent;
+ if (parent) {
+ if (this._name)
+ this._removeNamed();
+ if (this._index != null)
+ Base.splice(parent._children, null, this._index, 1);
+ this._installEvents(false);
+ if (notifySelf) {
+ var project = this._project;
+ if (project && project._changes)
+ this._changed(5);
+ }
+ if (notifyParent)
+ parent._changed(11);
+ this._parent = null;
+ return true;
+ }
+ return false;
+ },
+
+ remove: function() {
+ return this._remove(true, true);
+ },
+
+ replaceWith: function(item) {
+ var ok = item && item.insertBelow(this);
+ if (ok)
+ this.remove();
+ return ok;
+ },
+
+ removeChildren: function(from, to) {
+ if (!this._children)
+ return null;
+ from = from || 0;
+ to = Base.pick(to, this._children.length);
+ var removed = Base.splice(this._children, null, from, to - from);
+ for (var i = removed.length - 1; i >= 0; i--) {
+ removed[i]._remove(true, false);
+ }
+ if (removed.length > 0)
+ this._changed(11);
+ return removed;
+ },
+
+ clear: '#removeChildren',
+
+ reverseChildren: function() {
+ if (this._children) {
+ this._children.reverse();
+ for (var i = 0, l = this._children.length; i < l; i++)
+ this._children[i]._index = i;
+ this._changed(11);
+ }
+ },
+
+ isEmpty: function() {
+ return !this._children || this._children.length === 0;
+ },
+
+ isEditable: function() {
+ var item = this;
+ while (item) {
+ if (!item._visible || item._locked)
+ return false;
+ item = item._parent;
+ }
+ return true;
+ },
+
+ hasFill: function() {
+ return this.getStyle().hasFill();
+ },
+
+ hasStroke: function() {
+ return this.getStyle().hasStroke();
+ },
+
+ hasShadow: function() {
+ return this.getStyle().hasShadow();
+ },
+
+ _getOrder: function(item) {
+ function getList(item) {
+ var list = [];
+ do {
+ list.unshift(item);
+ } while (item = item._parent);
+ return list;
+ }
+ var list1 = getList(this),
+ list2 = getList(item);
+ for (var i = 0, l = Math.min(list1.length, list2.length); i < l; i++) {
+ if (list1[i] != list2[i]) {
+ return list1[i]._index < list2[i]._index ? 1 : -1;
+ }
+ }
+ return 0;
+ },
+
+ hasChildren: function() {
+ return this._children && this._children.length > 0;
+ },
+
+ isInserted: function() {
+ return this._parent ? this._parent.isInserted() : false;
+ },
+
+ isAbove: function(item) {
+ return this._getOrder(item) === -1;
+ },
+
+ isBelow: function(item) {
+ return this._getOrder(item) === 1;
+ },
+
+ isParent: function(item) {
+ return this._parent === item;
+ },
+
+ isChild: function(item) {
+ return item && item._parent === this;
+ },
+
+ isDescendant: function(item) {
+ var parent = this;
+ while (parent = parent._parent) {
+ if (parent == item)
+ return true;
+ }
+ return false;
+ },
+
+ isAncestor: function(item) {
+ return item ? item.isDescendant(this) : false;
+ },
+
+ isGroupedWith: function(item) {
+ var parent = this._parent;
+ while (parent) {
+ if (parent._parent
+ && /^(Group|Layer|CompoundPath)$/.test(parent._class)
+ && item.isDescendant(parent))
+ return true;
+ parent = parent._parent;
+ }
+ return false;
+ },
+
+ translate: function() {
+ var mx = new Matrix();
+ return this.transform(mx.translate.apply(mx, arguments));
+ },
+
+ rotate: function(angle ) {
+ return this.transform(new Matrix().rotate(angle,
+ Point.read(arguments, 1, { readNull: true })
+ || this.getPosition(true)));
+ }
+}, Base.each(['scale', 'shear', 'skew'], function(name) {
+ this[name] = function() {
+ var point = Point.read(arguments),
+ center = Point.read(arguments, 0, { readNull: true });
+ return this.transform(new Matrix()[name](point,
+ center || this.getPosition(true)));
+ };
+}, {
+
+}), {
+ transform: function(matrix, _applyMatrix, _applyRecursively,
+ _setApplyMatrix) {
+ if (matrix && matrix.isIdentity())
+ matrix = null;
+ var _matrix = this._matrix,
+ applyMatrix = (_applyMatrix || this._applyMatrix)
+ && ((!_matrix.isIdentity() || matrix)
+ || _applyMatrix && _applyRecursively && this._children);
+ if (!matrix && !applyMatrix)
+ return this;
+ if (matrix)
+ _matrix.preConcatenate(matrix);
+ if (applyMatrix = applyMatrix && this._transformContent(_matrix,
+ _applyRecursively, _setApplyMatrix)) {
+ var pivot = this._pivot,
+ style = this._style,
+ fillColor = style.getFillColor(true),
+ strokeColor = style.getStrokeColor(true);
+ if (pivot)
+ _matrix._transformPoint(pivot, pivot, true);
+ if (fillColor)
+ fillColor.transform(_matrix);
+ if (strokeColor)
+ strokeColor.transform(_matrix);
+ _matrix.reset(true);
+ if (_setApplyMatrix && this._canApplyMatrix)
+ this._applyMatrix = true;
+ }
+ var bounds = this._bounds,
+ position = this._position;
+ this._changed(9);
+ var decomp = bounds && matrix && matrix.decompose();
+ if (decomp && !decomp.shearing && decomp.rotation % 90 === 0) {
+ for (var key in bounds) {
+ var rect = bounds[key];
+ if (applyMatrix || !rect._internal)
+ matrix._transformBounds(rect, rect);
+ }
+ var getter = this._boundsGetter,
+ rect = bounds[getter && getter.getBounds || getter || 'getBounds'];
+ if (rect)
+ this._position = rect.getCenter(true);
+ this._bounds = bounds;
+ } else if (matrix && position) {
+ this._position = matrix._transformPoint(position, position);
+ }
+ return this;
+ },
+
+ _transformContent: function(matrix, applyRecursively, setApplyMatrix) {
+ var children = this._children;
+ if (children) {
+ for (var i = 0, l = children.length; i < l; i++)
+ children[i].transform(matrix, true, applyRecursively,
+ setApplyMatrix);
+ return true;
+ }
+ },
+
+ globalToLocal: function() {
+ return this.getGlobalMatrix(true)._inverseTransform(
+ Point.read(arguments));
+ },
+
+ localToGlobal: function() {
+ return this.getGlobalMatrix(true)._transformPoint(
+ Point.read(arguments));
+ },
+
+ parentToLocal: function() {
+ return this._matrix._inverseTransform(Point.read(arguments));
+ },
+
+ localToParent: function() {
+ return this._matrix._transformPoint(Point.read(arguments));
+ },
+
+ fitBounds: function(rectangle, fill) {
+ rectangle = Rectangle.read(arguments);
+ var bounds = this.getBounds(),
+ itemRatio = bounds.height / bounds.width,
+ rectRatio = rectangle.height / rectangle.width,
+ scale = (fill ? itemRatio > rectRatio : itemRatio < rectRatio)
+ ? rectangle.width / bounds.width
+ : rectangle.height / bounds.height,
+ newBounds = new Rectangle(new Point(),
+ new Size(bounds.width * scale, bounds.height * scale));
+ newBounds.setCenter(rectangle.getCenter());
+ this.setBounds(newBounds);
+ },
+
+ _setStyles: function(ctx) {
+ var style = this._style,
+ fillColor = style.getFillColor(),
+ strokeColor = style.getStrokeColor(),
+ shadowColor = style.getShadowColor();
+ if (fillColor)
+ ctx.fillStyle = fillColor.toCanvasStyle(ctx);
+ if (strokeColor) {
+ var strokeWidth = style.getStrokeWidth();
+ if (strokeWidth > 0) {
+ ctx.strokeStyle = strokeColor.toCanvasStyle(ctx);
+ ctx.lineWidth = strokeWidth;
+ var strokeJoin = style.getStrokeJoin(),
+ strokeCap = style.getStrokeCap(),
+ miterLimit = style.getMiterLimit();
+ if (strokeJoin)
+ ctx.lineJoin = strokeJoin;
+ if (strokeCap)
+ ctx.lineCap = strokeCap;
+ if (miterLimit)
+ ctx.miterLimit = miterLimit;
+ if (paper.support.nativeDash) {
+ var dashArray = style.getDashArray(),
+ dashOffset = style.getDashOffset();
+ if (dashArray && dashArray.length) {
+ if ('setLineDash' in ctx) {
+ ctx.setLineDash(dashArray);
+ ctx.lineDashOffset = dashOffset;
+ } else {
+ ctx.mozDash = dashArray;
+ ctx.mozDashOffset = dashOffset;
+ }
+ }
+ }
+ }
+ }
+ if (shadowColor) {
+ var shadowBlur = style.getShadowBlur();
+ if (shadowBlur > 0) {
+ ctx.shadowColor = shadowColor.toCanvasStyle(ctx);
+ ctx.shadowBlur = shadowBlur;
+ var offset = this.getShadowOffset();
+ ctx.shadowOffsetX = offset.x;
+ ctx.shadowOffsetY = offset.y;
+ }
+ }
+ },
+
+ draw: function(ctx, param, parentStrokeMatrix) {
+ var updateVersion = this._updateVersion = this._project._updateVersion;
+ if (!this._visible || this._opacity === 0)
+ return;
+ var matrices = param.matrices,
+ viewMatrix = param.viewMatrix,
+ matrix = this._matrix,
+ globalMatrix = matrices[matrices.length - 1].chain(matrix);
+ if (!globalMatrix.isInvertible())
+ return;
+
+ function getViewMatrix(matrix) {
+ return viewMatrix ? viewMatrix.chain(matrix) : matrix;
+ }
+
+ matrices.push(globalMatrix);
+ if (param.updateMatrix) {
+ globalMatrix._updateVersion = updateVersion;
+ this._globalMatrix = globalMatrix;
+ }
+
+ var blendMode = this._blendMode,
+ opacity = this._opacity,
+ normalBlend = blendMode === 'normal',
+ nativeBlend = BlendMode.nativeModes[blendMode],
+ direct = normalBlend && opacity === 1
+ || param.dontStart
+ || param.clip
+ || (nativeBlend || normalBlend && opacity < 1)
+ && this._canComposite(),
+ pixelRatio = param.pixelRatio,
+ mainCtx, itemOffset, prevOffset;
+ if (!direct) {
+ var bounds = this.getStrokeBounds(getViewMatrix(globalMatrix));
+ if (!bounds.width || !bounds.height)
+ return;
+ prevOffset = param.offset;
+ itemOffset = param.offset = bounds.getTopLeft().floor();
+ mainCtx = ctx;
+ ctx = CanvasProvider.getContext(bounds.getSize().ceil().add(1)
+ .multiply(pixelRatio));
+ if (pixelRatio !== 1)
+ ctx.scale(pixelRatio, pixelRatio);
+ }
+ ctx.save();
+ var strokeMatrix = parentStrokeMatrix
+ ? parentStrokeMatrix.chain(matrix)
+ : !this.getStrokeScaling(true) && getViewMatrix(globalMatrix),
+ clip = !direct && param.clipItem,
+ transform = !strokeMatrix || clip;
+ if (direct) {
+ ctx.globalAlpha = opacity;
+ if (nativeBlend)
+ ctx.globalCompositeOperation = blendMode;
+ } else if (transform) {
+ ctx.translate(-itemOffset.x, -itemOffset.y);
+ }
+ if (transform)
+ (direct ? matrix : getViewMatrix(globalMatrix)).applyToContext(ctx);
+ if (clip)
+ param.clipItem.draw(ctx, param.extend({ clip: true }));
+ if (strokeMatrix) {
+ ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
+ var offset = param.offset;
+ if (offset)
+ ctx.translate(-offset.x, -offset.y);
+ }
+ this._draw(ctx, param, strokeMatrix);
+ ctx.restore();
+ matrices.pop();
+ if (param.clip && !param.dontFinish)
+ ctx.clip();
+ if (!direct) {
+ BlendMode.process(blendMode, ctx, mainCtx, opacity,
+ itemOffset.subtract(prevOffset).multiply(pixelRatio));
+ CanvasProvider.release(ctx);
+ param.offset = prevOffset;
+ }
+ },
+
+ _isUpdated: function(updateVersion) {
+ var parent = this._parent;
+ if (parent instanceof CompoundPath)
+ return parent._isUpdated(updateVersion);
+ var updated = this._updateVersion === updateVersion;
+ if (!updated && parent && parent._visible
+ && parent._isUpdated(updateVersion)) {
+ this._updateVersion = updateVersion;
+ updated = true;
+ }
+ return updated;
+ },
+
+ _drawSelection: function(ctx, matrix, size, selectedItems, updateVersion) {
+ if ((this._drawSelected || this._boundsSelected)
+ && this._isUpdated(updateVersion)) {
+ var color = this.getSelectedColor(true)
+ || this.getLayer().getSelectedColor(true),
+ mx = matrix.chain(this.getGlobalMatrix(true));
+ ctx.strokeStyle = ctx.fillStyle = color
+ ? color.toCanvasStyle(ctx) : '#009dec';
+ if (this._drawSelected)
+ this._drawSelected(ctx, mx, selectedItems);
+ if (this._boundsSelected) {
+ var half = size / 2;
+ coords = mx._transformCorners(this.getInternalBounds());
+ ctx.beginPath();
+ for (var i = 0; i < 8; i++)
+ ctx[i === 0 ? 'moveTo' : 'lineTo'](coords[i], coords[++i]);
+ ctx.closePath();
+ ctx.stroke();
+ for (var i = 0; i < 8; i++)
+ ctx.fillRect(coords[i] - half, coords[++i] - half,
+ size, size);
+ }
+ }
+ },
+
+ _canComposite: function() {
+ return false;
+ }
+}, Base.each(['down', 'drag', 'up', 'move'], function(name) {
+ this['removeOn' + Base.capitalize(name)] = function() {
+ var hash = {};
+ hash[name] = true;
+ return this.removeOn(hash);
+ };
+}, {
+
+ removeOn: function(obj) {
+ for (var name in obj) {
+ if (obj[name]) {
+ var key = 'mouse' + name,
+ project = this._project,
+ sets = project._removeSets = project._removeSets || {};
+ sets[key] = sets[key] || {};
+ sets[key][this._id] = this;
+ }
+ }
+ return this;
+ }
+}));
+
+var Group = Item.extend({
+ _class: 'Group',
+ _selectChildren: true,
+ _serializeFields: {
+ children: []
+ },
+
+ initialize: function Group(arg) {
+ this._children = [];
+ this._namedChildren = {};
+ if (!this._initialize(arg))
+ this.addChildren(Array.isArray(arg) ? arg : arguments);
+ },
+
+ _changed: function _changed(flags) {
+ _changed.base.call(this, flags);
+ if (flags & 1026) {
+ this._clipItem = undefined;
+ }
+ },
+
+ _getClipItem: function() {
+ var clipItem = this._clipItem;
+ if (clipItem === undefined) {
+ clipItem = null;
+ for (var i = 0, l = this._children.length; i < l; i++) {
+ var child = this._children[i];
+ if (child._clipMask) {
+ clipItem = child;
+ break;
+ }
+ }
+ this._clipItem = clipItem;
+ }
+ return clipItem;
+ },
+
+ isClipped: function() {
+ return !!this._getClipItem();
+ },
+
+ setClipped: function(clipped) {
+ var child = this.getFirstChild();
+ if (child)
+ child.setClipMask(clipped);
+ },
+
+ _draw: function(ctx, param) {
+ var clip = param.clip,
+ clipItem = !clip && this._getClipItem(),
+ draw = true;
+ param = param.extend({ clipItem: clipItem, clip: false });
+ if (clip) {
+ if (this._currentPath) {
+ ctx.currentPath = this._currentPath;
+ draw = false;
+ } else {
+ ctx.beginPath();
+ param.dontStart = param.dontFinish = true;
+ }
+ } else if (clipItem) {
+ clipItem.draw(ctx, param.extend({ clip: true }));
+ }
+ if (draw) {
+ for (var i = 0, l = this._children.length; i < l; i++) {
+ var item = this._children[i];
+ if (item !== clipItem)
+ item.draw(ctx, param);
+ }
+ }
+ if (clip) {
+ this._currentPath = ctx.currentPath;
+ }
+ }
+});
+
+var Layer = Group.extend({
+ _class: 'Layer',
+
+ initialize: function Layer(arg) {
+ var props = Base.isPlainObject(arg)
+ ? new Base(arg)
+ : { children: Array.isArray(arg) ? arg : arguments },
+ insert = props.insert;
+ props.insert = false;
+ Group.call(this, props);
+ if (insert || insert === undefined) {
+ this._project.addChild(this);
+ this.activate();
+ }
+ },
+
+ _remove: function _remove(notifySelf, notifyParent) {
+ if (this._parent)
+ return _remove.base.call(this, notifySelf, notifyParent);
+ if (this._index != null) {
+ var project = this._project;
+ if (project._activeLayer === this)
+ project._activeLayer = this.getNextSibling()
+ || this.getPreviousSibling();
+ Base.splice(project.layers, null, this._index, 1);
+ this._installEvents(false);
+ if (notifySelf && project._changes)
+ this._changed(5);
+ if (notifyParent) {
+ project._needsUpdate = true;
+ }
+ return true;
+ }
+ return false;
+ },
+
+ getNextSibling: function getNextSibling() {
+ return this._parent ? getNextSibling.base.call(this)
+ : this._project.layers[this._index + 1] || null;
+ },
+
+ getPreviousSibling: function getPreviousSibling() {
+ return this._parent ? getPreviousSibling.base.call(this)
+ : this._project.layers[this._index - 1] || null;
+ },
+
+ isInserted: function isInserted() {
+ return this._parent ? isInserted.base.call(this) : this._index != null;
+ },
+
+ activate: function() {
+ this._project._activeLayer = this;
+ },
+
+ _insertSibling: function _insertSibling(index, item, _preserve) {
+ return !this._parent
+ ? this._project.insertChild(index, item, _preserve)
+ : _insertSibling.base.call(this, index, item, _preserve);
+ }
+});
+
+var Shape = Item.extend({
+ _class: 'Shape',
+ _applyMatrix: false,
+ _canApplyMatrix: false,
+ _boundsSelected: true,
+ _serializeFields: {
+ type: null,
+ size: null,
+ radius: null
+ },
+
+ initialize: function Shape(props) {
+ this._initialize(props);
+ },
+
+ _equals: function(item) {
+ return this._type === item._type
+ && this._size.equals(item._size)
+ && Base.equals(this._radius, item._radius);
+ },
+
+ clone: function(insert) {
+ var copy = new Shape(Item.NO_INSERT);
+ copy.setType(this._type);
+ copy.setSize(this._size);
+ copy.setRadius(this._radius);
+ return this._clone(copy, insert);
+ },
+
+ getType: function() {
+ return this._type;
+ },
+
+ setType: function(type) {
+ this._type = type;
+ },
+
+ getShape: '#getType',
+ setShape: '#setType',
+
+ getSize: function() {
+ var size = this._size;
+ return new LinkedSize(size.width, size.height, this, 'setSize');
+ },
+
+ setSize: function() {
+ var size = Size.read(arguments);
+ if (!this._size) {
+ this._size = size.clone();
+ } else if (!this._size.equals(size)) {
+ var type = this._type,
+ width = size.width,
+ height = size.height;
+ if (type === 'rectangle') {
+ var radius = Size.min(this._radius, size.divide(2));
+ this._radius.set(radius.width, radius.height);
+ } else if (type === 'circle') {
+ width = height = (width + height) / 2;
+ this._radius = width / 2;
+ } else if (type === 'ellipse') {
+ this._radius.set(width / 2, height / 2);
+ }
+ this._size.set(width, height);
+ this._changed(9);
+ }
+ },
+
+ getRadius: function() {
+ var rad = this._radius;
+ return this._type === 'circle'
+ ? rad
+ : new LinkedSize(rad.width, rad.height, this, 'setRadius');
+ },
+
+ setRadius: function(radius) {
+ var type = this._type;
+ if (type === 'circle') {
+ if (radius === this._radius)
+ return;
+ var size = radius * 2;
+ this._radius = radius;
+ this._size.set(size, size);
+ } else {
+ radius = Size.read(arguments);
+ if (!this._radius) {
+ this._radius = radius.clone();
+ } else {
+ if (this._radius.equals(radius))
+ return;
+ this._radius.set(radius.width, radius.height);
+ if (type === 'rectangle') {
+ var size = Size.max(this._size, radius.multiply(2));
+ this._size.set(size.width, size.height);
+ } else if (type === 'ellipse') {
+ this._size.set(radius.width * 2, radius.height * 2);
+ }
+ }
+ }
+ this._changed(9);
+ },
+
+ isEmpty: function() {
+ return false;
+ },
+
+ toPath: function(insert) {
+ var path = new Path[Base.capitalize(this._type)]({
+ center: new Point(),
+ size: this._size,
+ radius: this._radius,
+ insert: false
+ });
+ path.setStyle(this._style);
+ path.transform(this._matrix);
+ if (insert || insert === undefined)
+ path.insertAbove(this);
+ return path;
+ },
+
+ _draw: function(ctx, param, strokeMatrix) {
+ var style = this._style,
+ hasFill = style.hasFill(),
+ hasStroke = style.hasStroke(),
+ dontPaint = param.dontFinish || param.clip,
+ untransformed = !strokeMatrix;
+ if (hasFill || hasStroke || dontPaint) {
+ var type = this._type,
+ radius = this._radius,
+ isCircle = type === 'circle';
+ if (!param.dontStart)
+ ctx.beginPath();
+ if (untransformed && isCircle) {
+ ctx.arc(0, 0, radius, 0, Math.PI * 2, true);
+ } else {
+ var rx = isCircle ? radius : radius.width,
+ ry = isCircle ? radius : radius.height,
+ size = this._size,
+ width = size.width,
+ height = size.height;
+ if (untransformed && type === 'rect' && rx === 0 && ry === 0) {
+ ctx.rect(-width / 2, -height / 2, width, height);
+ } else {
+ var x = width / 2,
+ y = height / 2,
+ kappa = 1 - 0.5522847498307936,
+ cx = rx * kappa,
+ cy = ry * kappa,
+ c = [
+ -x, -y + ry,
+ -x, -y + cy,
+ -x + cx, -y,
+ -x + rx, -y,
+ x - rx, -y,
+ x - cx, -y,
+ x, -y + cy,
+ x, -y + ry,
+ x, y - ry,
+ x, y - cy,
+ x - cx, y,
+ x - rx, y,
+ -x + rx, y,
+ -x + cx, y,
+ -x, y - cy,
+ -x, y - ry
+ ];
+ if (strokeMatrix)
+ strokeMatrix.transform(c, c, 32);
+ ctx.moveTo(c[0], c[1]);
+ ctx.bezierCurveTo(c[2], c[3], c[4], c[5], c[6], c[7]);
+ if (x !== rx)
+ ctx.lineTo(c[8], c[9]);
+ ctx.bezierCurveTo(c[10], c[11], c[12], c[13], c[14], c[15]);
+ if (y !== ry)
+ ctx.lineTo(c[16], c[17]);
+ ctx.bezierCurveTo(c[18], c[19], c[20], c[21], c[22], c[23]);
+ if (x !== rx)
+ ctx.lineTo(c[24], c[25]);
+ ctx.bezierCurveTo(c[26], c[27], c[28], c[29], c[30], c[31]);
+ }
+ }
+ ctx.closePath();
+ }
+ if (!dontPaint && (hasFill || hasStroke)) {
+ this._setStyles(ctx);
+ if (hasFill) {
+ ctx.fill(style.getWindingRule());
+ ctx.shadowColor = 'rgba(0,0,0,0)';
+ }
+ if (hasStroke)
+ ctx.stroke();
+ }
+ },
+
+ _canComposite: function() {
+ return !(this.hasFill() && this.hasStroke());
+ },
+
+ _getBounds: function(getter, matrix) {
+ var rect = new Rectangle(this._size).setCenter(0, 0);
+ if (getter !== 'getBounds' && this.hasStroke())
+ rect = rect.expand(this.getStrokeWidth());
+ return matrix ? matrix._transformBounds(rect) : rect;
+ }
+},
+new function() {
+
+ function getCornerCenter(that, point, expand) {
+ var radius = that._radius;
+ if (!radius.isZero()) {
+ var halfSize = that._size.divide(2);
+ for (var i = 0; i < 4; i++) {
+ var dir = new Point(i & 1 ? 1 : -1, i > 1 ? 1 : -1),
+ corner = dir.multiply(halfSize),
+ center = corner.subtract(dir.multiply(radius)),
+ rect = new Rectangle(corner, center);
+ if ((expand ? rect.expand(expand) : rect).contains(point))
+ return center;
+ }
+ }
+ }
+
+ function getEllipseRadius(point, radius) {
+ var angle = point.getAngleInRadians(),
+ width = radius.width * 2,
+ height = radius.height * 2,
+ x = width * Math.sin(angle),
+ y = height * Math.cos(angle);
+ return width * height / (2 * Math.sqrt(x * x + y * y));
+ }
+
+ return {
+ _contains: function _contains(point) {
+ if (this._type === 'rectangle') {
+ var center = getCornerCenter(this, point);
+ return center
+ ? point.subtract(center).divide(this._radius)
+ .getLength() <= 1
+ : _contains.base.call(this, point);
+ } else {
+ return point.divide(this.size).getLength() <= 0.5;
+ }
+ },
+
+ _hitTestSelf: function _hitTestSelf(point, options) {
+ var hit = false;
+ if (this.hasStroke()) {
+ var type = this._type,
+ radius = this._radius,
+ strokeWidth = this.getStrokeWidth() + 2 * options.tolerance;
+ if (type === 'rectangle') {
+ var center = getCornerCenter(this, point, strokeWidth);
+ if (center) {
+ var pt = point.subtract(center);
+ hit = 2 * Math.abs(pt.getLength()
+ - getEllipseRadius(pt, radius)) <= strokeWidth;
+ } else {
+ var rect = new Rectangle(this._size).setCenter(0, 0),
+ outer = rect.expand(strokeWidth),
+ inner = rect.expand(-strokeWidth);
+ hit = outer._containsPoint(point)
+ && !inner._containsPoint(point);
+ }
+ } else {
+ if (type === 'ellipse')
+ radius = getEllipseRadius(point, radius);
+ hit = 2 * Math.abs(point.getLength() - radius)
+ <= strokeWidth;
+ }
+ }
+ return hit
+ ? new HitResult('stroke', this)
+ : _hitTestSelf.base.apply(this, arguments);
+ }
+ };
+}, {
+
+statics: new function() {
+ function createShape(type, point, size, radius, args) {
+ var item = new Shape(Base.getNamed(args));
+ item._type = type;
+ item._size = size;
+ item._radius = radius;
+ return item.translate(point);
+ }
+
+ return {
+ Circle: function() {
+ var center = Point.readNamed(arguments, 'center'),
+ radius = Base.readNamed(arguments, 'radius');
+ return createShape('circle', center, new Size(radius * 2), radius,
+ arguments);
+ },
+
+ Rectangle: function() {
+ var rect = Rectangle.readNamed(arguments, 'rectangle'),
+ radius = Size.min(Size.readNamed(arguments, 'radius'),
+ rect.getSize(true).divide(2));
+ return createShape('rectangle', rect.getCenter(true),
+ rect.getSize(true), radius, arguments);
+ },
+
+ Ellipse: function() {
+ var ellipse = Shape._readEllipse(arguments),
+ radius = ellipse.radius;
+ return createShape('ellipse', ellipse.center, radius.multiply(2),
+ radius, arguments);
+ },
+
+ _readEllipse: function(args) {
+ var center,
+ radius;
+ if (Base.hasNamed(args, 'radius')) {
+ center = Point.readNamed(args, 'center');
+ radius = Size.readNamed(args, 'radius');
+ } else {
+ var rect = Rectangle.readNamed(args, 'rectangle');
+ center = rect.getCenter(true);
+ radius = rect.getSize(true).divide(2);
+ }
+ return { center: center, radius: radius };
+ }
+ };
+}});
+
+var Raster = Item.extend({
+ _class: 'Raster',
+ _applyMatrix: false,
+ _canApplyMatrix: false,
+ _boundsGetter: 'getBounds',
+ _boundsSelected: true,
+ _serializeFields: {
+ source: null
+ },
+
+ initialize: function Raster(object, position) {
+ if (!this._initialize(object,
+ position !== undefined && Point.read(arguments, 1))) {
+ if (typeof object === 'string') {
+ this.setSource(object);
+ } else {
+ this.setImage(object);
+ }
+ }
+ if (!this._size) {
+ this._size = new Size();
+ this._loaded = false;
+ }
+ },
+
+ _equals: function(item) {
+ return this.getSource() === item.getSource();
+ },
+
+ clone: function(insert) {
+ var copy = new Raster(Item.NO_INSERT),
+ image = this._image,
+ canvas = this._canvas;
+ if (image) {
+ copy.setImage(image);
+ } else if (canvas) {
+ var copyCanvas = CanvasProvider.getCanvas(this._size);
+ copyCanvas.getContext('2d').drawImage(canvas, 0, 0);
+ copy.setImage(copyCanvas);
+ }
+ return this._clone(copy, insert);
+ },
+
+ getSize: function() {
+ var size = this._size;
+ return new LinkedSize(size ? size.width : 0, size ? size.height : 0,
+ this, 'setSize');
+ },
+
+ setSize: function() {
+ var size = Size.read(arguments);
+ if (!size.equals(this._size)) {
+ if (size.width > 0 && size.height > 0) {
+ var element = this.getElement();
+ this.setImage(CanvasProvider.getCanvas(size));
+ if (element)
+ this.getContext(true).drawImage(element, 0, 0,
+ size.width, size.height);
+ } else {
+ if (this._canvas)
+ CanvasProvider.release(this._canvas);
+ this._size = size.clone();
+ }
+ }
+ },
+
+ getWidth: function() {
+ return this._size ? this._size.width : 0;
+ },
+
+ setWidth: function(width) {
+ this.setSize(width, this.getHeight());
+ },
+
+ getHeight: function() {
+ return this._size ? this._size.height : 0;
+ },
+
+ setHeight: function(height) {
+ this.setSize(this.getWidth(), height);
+ },
+
+ isEmpty: function() {
+ var size = this._size;
+ return !size || size.width === 0 && size.height === 0;
+ },
+
+ getResolution: function() {
+ var matrix = this._matrix,
+ orig = new Point(0, 0).transform(matrix),
+ u = new Point(1, 0).transform(matrix).subtract(orig),
+ v = new Point(0, 1).transform(matrix).subtract(orig);
+ return new Size(
+ 72 / u.getLength(),
+ 72 / v.getLength()
+ );
+ },
+
+ getPpi: '#getResolution',
+
+ getImage: function() {
+ return this._image;
+ },
+
+ setImage: function(image) {
+ if (this._canvas)
+ CanvasProvider.release(this._canvas);
+ if (image && image.getContext) {
+ this._image = null;
+ this._canvas = image;
+ this._loaded = true;
+ } else {
+ this._image = image;
+ this._canvas = null;
+ this._loaded = image && image.complete;
+ }
+ this._size = new Size(
+ image ? image.naturalWidth || image.width : 0,
+ image ? image.naturalHeight || image.height : 0);
+ this._context = null;
+ this._changed(521);
+ },
+
+ getCanvas: function() {
+ if (!this._canvas) {
+ var ctx = CanvasProvider.getContext(this._size);
+ try {
+ if (this._image)
+ ctx.drawImage(this._image, 0, 0);
+ this._canvas = ctx.canvas;
+ } catch (e) {
+ CanvasProvider.release(ctx);
+ }
+ }
+ return this._canvas;
+ },
+
+ setCanvas: '#setImage',
+
+ getContext: function(modify) {
+ if (!this._context)
+ this._context = this.getCanvas().getContext('2d');
+ if (modify) {
+ this._image = null;
+ this._changed(513);
+ }
+ return this._context;
+ },
+
+ setContext: function(context) {
+ this._context = context;
+ },
+
+ getSource: function() {
+ return this._image && this._image.src || this.toDataURL();
+ },
+
+ setSource: function(src) {
+ var that = this,
+ image;
+
+ function loaded() {
+ var view = that.getView();
+ if (view) {
+ paper = view._scope;
+ that.setImage(image);
+ that.emit('load');
+ view.update();
+ }
+ }
+
+ image = document.getElementById(src) || new Image();
+
+ if (image.naturalWidth && image.naturalHeight) {
+ setTimeout(loaded, 0);
+ } else {
+ DomEvent.add(image, {
+ load: loaded
+ });
+ if (!image.src)
+ image.src = src;
+ }
+ this.setImage(image);
+ },
+
+ getElement: function() {
+ return this._canvas || this._loaded && this._image;
+ }
+}, {
+ beans: false,
+
+ getSubCanvas: function() {
+ var rect = Rectangle.read(arguments),
+ ctx = CanvasProvider.getContext(rect.getSize());
+ ctx.drawImage(this.getCanvas(), rect.x, rect.y,
+ rect.width, rect.height, 0, 0, rect.width, rect.height);
+ return ctx.canvas;
+ },
+
+ getSubRaster: function() {
+ var rect = Rectangle.read(arguments),
+ raster = new Raster(Item.NO_INSERT);
+ raster.setImage(this.getSubCanvas(rect));
+ raster.translate(rect.getCenter().subtract(this.getSize().divide(2)));
+ raster._matrix.preConcatenate(this._matrix);
+ raster.insertAbove(this);
+ return raster;
+ },
+
+ toDataURL: function() {
+ var src = this._image && this._image.src;
+ if (/^data:/.test(src))
+ return src;
+ var canvas = this.getCanvas();
+ return canvas ? canvas.toDataURL() : null;
+ },
+
+ drawImage: function(image ) {
+ var point = Point.read(arguments, 1);
+ this.getContext(true).drawImage(image, point.x, point.y);
+ },
+
+ getAverageColor: function(object) {
+ var bounds, path;
+ if (!object) {
+ bounds = this.getBounds();
+ } else if (object instanceof PathItem) {
+ path = object;
+ bounds = object.getBounds();
+ } else if (object.width) {
+ bounds = new Rectangle(object);
+ } else if (object.x) {
+ bounds = new Rectangle(object.x - 0.5, object.y - 0.5, 1, 1);
+ }
+ var sampleSize = 32,
+ width = Math.min(bounds.width, sampleSize),
+ height = Math.min(bounds.height, sampleSize);
+ var ctx = Raster._sampleContext;
+ if (!ctx) {
+ ctx = Raster._sampleContext = CanvasProvider.getContext(
+ new Size(sampleSize));
+ } else {
+ ctx.clearRect(0, 0, sampleSize + 1, sampleSize + 1);
+ }
+ ctx.save();
+ var matrix = new Matrix()
+ .scale(width / bounds.width, height / bounds.height)
+ .translate(-bounds.x, -bounds.y);
+ matrix.applyToContext(ctx);
+ if (path)
+ path.draw(ctx, new Base({ clip: true, matrices: [matrix] }));
+ this._matrix.applyToContext(ctx);
+ var element = this.getElement(),
+ size = this._size;
+ if (element)
+ ctx.drawImage(element, -size.width / 2, -size.height / 2);
+ ctx.restore();
+ var pixels = ctx.getImageData(0.5, 0.5, Math.ceil(width),
+ Math.ceil(height)).data,
+ channels = [0, 0, 0],
+ total = 0;
+ for (var i = 0, l = pixels.length; i < l; i += 4) {
+ var alpha = pixels[i + 3];
+ total += alpha;
+ alpha /= 255;
+ channels[0] += pixels[i] * alpha;
+ channels[1] += pixels[i + 1] * alpha;
+ channels[2] += pixels[i + 2] * alpha;
+ }
+ for (var i = 0; i < 3; i++)
+ channels[i] /= total;
+ return total ? Color.read(channels) : null;
+ },
+
+ getPixel: function() {
+ var point = Point.read(arguments);
+ var data = this.getContext().getImageData(point.x, point.y, 1, 1).data;
+ return new Color('rgb', [data[0] / 255, data[1] / 255, data[2] / 255],
+ data[3] / 255);
+ },
+
+ setPixel: function() {
+ var point = Point.read(arguments),
+ color = Color.read(arguments),
+ components = color._convert('rgb'),
+ alpha = color._alpha,
+ ctx = this.getContext(true),
+ imageData = ctx.createImageData(1, 1),
+ data = imageData.data;
+ data[0] = components[0] * 255;
+ data[1] = components[1] * 255;
+ data[2] = components[2] * 255;
+ data[3] = alpha != null ? alpha * 255 : 255;
+ ctx.putImageData(imageData, point.x, point.y);
+ },
+
+ createImageData: function() {
+ var size = Size.read(arguments);
+ return this.getContext().createImageData(size.width, size.height);
+ },
+
+ getImageData: function() {
+ var rect = Rectangle.read(arguments);
+ if (rect.isEmpty())
+ rect = new Rectangle(this._size);
+ return this.getContext().getImageData(rect.x, rect.y,
+ rect.width, rect.height);
+ },
+
+ setImageData: function(data ) {
+ var point = Point.read(arguments, 1);
+ this.getContext(true).putImageData(data, point.x, point.y);
+ },
+
+ _getBounds: function(getter, matrix) {
+ var rect = new Rectangle(this._size).setCenter(0, 0);
+ return matrix ? matrix._transformBounds(rect) : rect;
+ },
+
+ _hitTestSelf: function(point) {
+ if (this._contains(point)) {
+ var that = this;
+ return new HitResult('pixel', that, {
+ offset: point.add(that._size.divide(2)).round(),
+ color: {
+ get: function() {
+ return that.getPixel(this.offset);
+ }
+ }
+ });
+ }
+ },
+
+ _draw: function(ctx) {
+ var element = this.getElement();
+ if (element) {
+ ctx.globalAlpha = this._opacity;
+ ctx.drawImage(element,
+ -this._size.width / 2, -this._size.height / 2);
+ }
+ },
+
+ _canComposite: function() {
+ return true;
+ }
+});
+
+var PlacedSymbol = Item.extend({
+ _class: 'PlacedSymbol',
+ _applyMatrix: false,
+ _canApplyMatrix: false,
+ _boundsGetter: { getBounds: 'getStrokeBounds' },
+ _boundsSelected: true,
+ _serializeFields: {
+ symbol: null
+ },
+
+ initialize: function PlacedSymbol(arg0, arg1) {
+ if (!this._initialize(arg0,
+ arg1 !== undefined && Point.read(arguments, 1)))
+ this.setSymbol(arg0 instanceof Symbol ? arg0 : new Symbol(arg0));
+ },
+
+ _equals: function(item) {
+ return this._symbol === item._symbol;
+ },
+
+ getSymbol: function() {
+ return this._symbol;
+ },
+
+ setSymbol: function(symbol) {
+ this._symbol = symbol;
+ this._changed(9);
+ },
+
+ clone: function(insert) {
+ var copy = new PlacedSymbol(Item.NO_INSERT);
+ copy.setSymbol(this._symbol);
+ return this._clone(copy, insert);
+ },
+
+ isEmpty: function() {
+ return this._symbol._definition.isEmpty();
+ },
+
+ _getBounds: function(getter, matrix, cacheItem) {
+ var definition = this.symbol._definition;
+ return definition._getCachedBounds(getter,
+ matrix && matrix.chain(definition._matrix), cacheItem);
+ },
+
+ _hitTestSelf: function(point, options) {
+ var res = this._symbol._definition._hitTest(point, options);
+ if (res)
+ res.item = this;
+ return res;
+ },
+
+ _draw: function(ctx, param) {
+ this.symbol._definition.draw(ctx, param);
+ }
+
+});
+
+var HitResult = Base.extend({
+ _class: 'HitResult',
+
+ initialize: function HitResult(type, item, values) {
+ this.type = type;
+ this.item = item;
+ if (values) {
+ values.enumerable = true;
+ this.inject(values);
+ }
+ },
+
+ statics: {
+ getOptions: function(options) {
+ return new Base({
+ type: null,
+ tolerance: paper.settings.hitTolerance,
+ fill: !options,
+ stroke: !options,
+ segments: !options,
+ handles: false,
+ ends: false,
+ center: false,
+ bounds: false,
+ guides: false,
+ selected: false
+ }, options);
+ }
+ }
+});
+
+var Segment = Base.extend({
+ _class: 'Segment',
+ beans: true,
+
+ initialize: function Segment(arg0, arg1, arg2, arg3, arg4, arg5) {
+ var count = arguments.length,
+ point, handleIn, handleOut;
+ if (count === 0) {
+ } else if (count === 1) {
+ if (arg0.point) {
+ point = arg0.point;
+ handleIn = arg0.handleIn;
+ handleOut = arg0.handleOut;
+ } else {
+ point = arg0;
+ }
+ } else if (count === 2 && typeof arg0 === 'number') {
+ point = arguments;
+ } else if (count <= 3) {
+ point = arg0;
+ handleIn = arg1;
+ handleOut = arg2;
+ } else {
+ point = arg0 !== undefined ? [ arg0, arg1 ] : null;
+ handleIn = arg2 !== undefined ? [ arg2, arg3 ] : null;
+ handleOut = arg4 !== undefined ? [ arg4, arg5 ] : null;
+ }
+ new SegmentPoint(point, this, '_point');
+ new SegmentPoint(handleIn, this, '_handleIn');
+ new SegmentPoint(handleOut, this, '_handleOut');
+ },
+
+ _serialize: function(options) {
+ return Base.serialize(this.isLinear() ? this._point
+ : [this._point, this._handleIn, this._handleOut],
+ options, true);
+ },
+
+ _changed: function(point) {
+ var path = this._path;
+ if (!path)
+ return;
+ var curves = path._curves,
+ index = this._index,
+ curve;
+ if (curves) {
+ if ((!point || point === this._point || point === this._handleIn)
+ && (curve = index > 0 ? curves[index - 1] : path._closed
+ ? curves[curves.length - 1] : null))
+ curve._changed();
+ if ((!point || point === this._point || point === this._handleOut)
+ && (curve = curves[index]))
+ curve._changed();
+ }
+ path._changed(25);
+ },
+
+ getPoint: function() {
+ return this._point;
+ },
+
+ setPoint: function() {
+ var point = Point.read(arguments);
+ this._point.set(point.x, point.y);
+ },
+
+ getHandleIn: function() {
+ return this._handleIn;
+ },
+
+ setHandleIn: function() {
+ var point = Point.read(arguments);
+ this._handleIn.set(point.x, point.y);
+ },
+
+ getHandleOut: function() {
+ return this._handleOut;
+ },
+
+ setHandleOut: function() {
+ var point = Point.read(arguments);
+ this._handleOut.set(point.x, point.y);
+ },
+
+ isLinear: function() {
+ return this._handleIn.isZero() && this._handleOut.isZero();
+ },
+
+ setLinear: function(linear) {
+ if (linear) {
+ this._handleIn.set(0, 0);
+ this._handleOut.set(0, 0);
+ } else {
+ }
+ },
+
+ isColinear: function(segment) {
+ var next1 = this.getNext(),
+ next2 = segment.getNext();
+ return this._handleOut.isZero() && next1._handleIn.isZero()
+ && segment._handleOut.isZero() && next2._handleIn.isZero()
+ && next1._point.subtract(this._point).isColinear(
+ next2._point.subtract(segment._point));
+ },
+
+ isOrthogonal: function() {
+ var prev = this.getPrevious(),
+ next = this.getNext();
+ return prev._handleOut.isZero() && this._handleIn.isZero()
+ && this._handleOut.isZero() && next._handleIn.isZero()
+ && this._point.subtract(prev._point).isOrthogonal(
+ next._point.subtract(this._point));
+ },
+
+ isArc: function() {
+ var next = this.getNext(),
+ handle1 = this._handleOut,
+ handle2 = next._handleIn,
+ kappa = 0.5522847498307936;
+ if (handle1.isOrthogonal(handle2)) {
+ var from = this._point,
+ to = next._point,
+ corner = new Line(from, handle1, true).intersect(
+ new Line(to, handle2, true), true);
+ return corner && Numerical.isZero(handle1.getLength() /
+ corner.subtract(from).getLength() - kappa)
+ && Numerical.isZero(handle2.getLength() /
+ corner.subtract(to).getLength() - kappa);
+ }
+ return false;
+ },
+
+ _selectionState: 0,
+
+ isSelected: function(_point) {
+ var state = this._selectionState;
+ return !_point ? !!(state & 7)
+ : _point === this._point ? !!(state & 4)
+ : _point === this._handleIn ? !!(state & 1)
+ : _point === this._handleOut ? !!(state & 2)
+ : false;
+ },
+
+ setSelected: function(selected, _point) {
+ var path = this._path,
+ selected = !!selected,
+ state = this._selectionState,
+ oldState = state,
+ flag = !_point ? 7
+ : _point === this._point ? 4
+ : _point === this._handleIn ? 1
+ : _point === this._handleOut ? 2
+ : 0;
+ if (selected) {
+ state |= flag;
+ } else {
+ state &= ~flag;
+ }
+ this._selectionState = state;
+ if (path && state !== oldState) {
+ path._updateSelection(this, oldState, state);
+ path._changed(129);
+ }
+ },
+
+ getIndex: function() {
+ return this._index !== undefined ? this._index : null;
+ },
+
+ getPath: function() {
+ return this._path || null;
+ },
+
+ getCurve: function() {
+ var path = this._path,
+ index = this._index;
+ if (path) {
+ if (index > 0 && !path._closed
+ && index === path._segments.length - 1)
+ index--;
+ return path.getCurves()[index] || null;
+ }
+ return null;
+ },
+
+ getLocation: function() {
+ var curve = this.getCurve();
+ return curve
+ ? new CurveLocation(curve, this === curve._segment1 ? 0 : 1)
+ : null;
+ },
+
+ getNext: function() {
+ var segments = this._path && this._path._segments;
+ return segments && (segments[this._index + 1]
+ || this._path._closed && segments[0]) || null;
+ },
+
+ getPrevious: function() {
+ var segments = this._path && this._path._segments;
+ return segments && (segments[this._index - 1]
+ || this._path._closed && segments[segments.length - 1]) || null;
+ },
+
+ reverse: function() {
+ return new Segment(this._point, this._handleOut, this._handleIn);
+ },
+
+ remove: function() {
+ return this._path ? !!this._path.removeSegment(this._index) : false;
+ },
+
+ clone: function() {
+ return new Segment(this._point, this._handleIn, this._handleOut);
+ },
+
+ equals: function(segment) {
+ return segment === this || segment && this._class === segment._class
+ && this._point.equals(segment._point)
+ && this._handleIn.equals(segment._handleIn)
+ && this._handleOut.equals(segment._handleOut)
+ || false;
+ },
+
+ toString: function() {
+ var parts = [ 'point: ' + this._point ];
+ if (!this._handleIn.isZero())
+ parts.push('handleIn: ' + this._handleIn);
+ if (!this._handleOut.isZero())
+ parts.push('handleOut: ' + this._handleOut);
+ return '{ ' + parts.join(', ') + ' }';
+ },
+
+ transform: function(matrix) {
+ this._transformCoordinates(matrix, new Array(6), true);
+ this._changed();
+ },
+
+ _transformCoordinates: function(matrix, coords, change) {
+ var point = this._point,
+ handleIn = !change || !this._handleIn.isZero()
+ ? this._handleIn : null,
+ handleOut = !change || !this._handleOut.isZero()
+ ? this._handleOut : null,
+ x = point._x,
+ y = point._y,
+ i = 2;
+ coords[0] = x;
+ coords[1] = y;
+ if (handleIn) {
+ coords[i++] = handleIn._x + x;
+ coords[i++] = handleIn._y + y;
+ }
+ if (handleOut) {
+ coords[i++] = handleOut._x + x;
+ coords[i++] = handleOut._y + y;
+ }
+ if (matrix) {
+ matrix._transformCoordinates(coords, coords, i / 2);
+ x = coords[0];
+ y = coords[1];
+ if (change) {
+ point._x = x;
+ point._y = y;
+ i = 2;
+ if (handleIn) {
+ handleIn._x = coords[i++] - x;
+ handleIn._y = coords[i++] - y;
+ }
+ if (handleOut) {
+ handleOut._x = coords[i++] - x;
+ handleOut._y = coords[i++] - y;
+ }
+ } else {
+ if (!handleIn) {
+ coords[i++] = x;
+ coords[i++] = y;
+ }
+ if (!handleOut) {
+ coords[i++] = x;
+ coords[i++] = y;
+ }
+ }
+ }
+ return coords;
+ }
+});
+
+var SegmentPoint = Point.extend({
+ initialize: function SegmentPoint(point, owner, key) {
+ var x, y, selected;
+ if (!point) {
+ x = y = 0;
+ } else if ((x = point[0]) !== undefined) {
+ y = point[1];
+ } else {
+ var pt = point;
+ if ((x = pt.x) === undefined) {
+ pt = Point.read(arguments);
+ x = pt.x;
+ }
+ y = pt.y;
+ selected = pt.selected;
+ }
+ this._x = x;
+ this._y = y;
+ this._owner = owner;
+ owner[key] = this;
+ if (selected)
+ this.setSelected(true);
+ },
+
+ set: function(x, y) {
+ this._x = x;
+ this._y = y;
+ this._owner._changed(this);
+ return this;
+ },
+
+ _serialize: function(options) {
+ var f = options.formatter,
+ x = f.number(this._x),
+ y = f.number(this._y);
+ return this.isSelected()
+ ? { x: x, y: y, selected: true }
+ : [x, y];
+ },
+
+ getX: function() {
+ return this._x;
+ },
+
+ setX: function(x) {
+ this._x = x;
+ this._owner._changed(this);
+ },
+
+ getY: function() {
+ return this._y;
+ },
+
+ setY: function(y) {
+ this._y = y;
+ this._owner._changed(this);
+ },
+
+ isZero: function() {
+ return Numerical.isZero(this._x) && Numerical.isZero(this._y);
+ },
+
+ setSelected: function(selected) {
+ this._owner.setSelected(selected, this);
+ },
+
+ isSelected: function() {
+ return this._owner.isSelected(this);
+ }
+});
+
+var Curve = Base.extend({
+ _class: 'Curve',
+
+ initialize: function Curve(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
+ var count = arguments.length;
+ if (count === 3) {
+ this._path = arg0;
+ this._segment1 = arg1;
+ this._segment2 = arg2;
+ } else if (count === 0) {
+ this._segment1 = new Segment();
+ this._segment2 = new Segment();
+ } else if (count === 1) {
+ this._segment1 = new Segment(arg0.segment1);
+ this._segment2 = new Segment(arg0.segment2);
+ } else if (count === 2) {
+ this._segment1 = new Segment(arg0);
+ this._segment2 = new Segment(arg1);
+ } else {
+ var point1, handle1, handle2, point2;
+ if (count === 4) {
+ point1 = arg0;
+ handle1 = arg1;
+ handle2 = arg2;
+ point2 = arg3;
+ } else if (count === 8) {
+ point1 = [arg0, arg1];
+ point2 = [arg6, arg7];
+ handle1 = [arg2 - arg0, arg3 - arg1];
+ handle2 = [arg4 - arg6, arg5 - arg7];
+ }
+ this._segment1 = new Segment(point1, null, handle1);
+ this._segment2 = new Segment(point2, handle2, null);
+ }
+ },
+
+ _changed: function() {
+ this._length = this._bounds = undefined;
+ },
+
+ getPoint1: function() {
+ return this._segment1._point;
+ },
+
+ setPoint1: function() {
+ var point = Point.read(arguments);
+ this._segment1._point.set(point.x, point.y);
+ },
+
+ getPoint2: function() {
+ return this._segment2._point;
+ },
+
+ setPoint2: function() {
+ var point = Point.read(arguments);
+ this._segment2._point.set(point.x, point.y);
+ },
+
+ getHandle1: function() {
+ return this._segment1._handleOut;
+ },
+
+ setHandle1: function() {
+ var point = Point.read(arguments);
+ this._segment1._handleOut.set(point.x, point.y);
+ },
+
+ getHandle2: function() {
+ return this._segment2._handleIn;
+ },
+
+ setHandle2: function() {
+ var point = Point.read(arguments);
+ this._segment2._handleIn.set(point.x, point.y);
+ },
+
+ getSegment1: function() {
+ return this._segment1;
+ },
+
+ getSegment2: function() {
+ return this._segment2;
+ },
+
+ getPath: function() {
+ return this._path;
+ },
+
+ getIndex: function() {
+ return this._segment1._index;
+ },
+
+ getNext: function() {
+ var curves = this._path && this._path._curves;
+ return curves && (curves[this._segment1._index + 1]
+ || this._path._closed && curves[0]) || null;
+ },
+
+ getPrevious: function() {
+ var curves = this._path && this._path._curves;
+ return curves && (curves[this._segment1._index - 1]
+ || this._path._closed && curves[curves.length - 1]) || null;
+ },
+
+ isSelected: function() {
+ return this.getPoint1().isSelected()
+ && this.getHandle2().isSelected()
+ && this.getHandle2().isSelected()
+ && this.getPoint2().isSelected();
+ },
+
+ setSelected: function(selected) {
+ this.getPoint1().setSelected(selected);
+ this.getHandle1().setSelected(selected);
+ this.getHandle2().setSelected(selected);
+ this.getPoint2().setSelected(selected);
+ },
+
+ getValues: function(matrix) {
+ return Curve.getValues(this._segment1, this._segment2, matrix);
+ },
+
+ getPoints: function() {
+ var coords = this.getValues(),
+ points = [];
+ for (var i = 0; i < 8; i += 2)
+ points.push(new Point(coords[i], coords[i + 1]));
+ return points;
+ },
+
+ getLength: function() {
+ if (this._length == null) {
+ this._length = this.isLinear()
+ ? this._segment2._point.getDistance(this._segment1._point)
+ : Curve.getLength(this.getValues(), 0, 1);
+ }
+ return this._length;
+ },
+
+ getArea: function() {
+ return Curve.getArea(this.getValues());
+ },
+
+ getPart: function(from, to) {
+ return new Curve(Curve.getPart(this.getValues(), from, to));
+ },
+
+ getPartLength: function(from, to) {
+ return Curve.getLength(this.getValues(), from, to);
+ },
+
+ isLinear: function() {
+ return this._segment1._handleOut.isZero()
+ && this._segment2._handleIn.isZero();
+ },
+
+ getIntersections: function(curve) {
+ return Curve.filterIntersections(Curve.getIntersections(
+ this.getValues(), curve.getValues(), this, curve, []));
+ },
+
+ _getParameter: function(offset, isParameter) {
+ return isParameter
+ ? offset
+ : offset && offset.curve === this
+ ? offset.parameter
+ : offset === undefined && isParameter === undefined
+ ? 0.5
+ : this.getParameterAt(offset, 0);
+ },
+
+ divide: function(offset, isParameter, ignoreLinear) {
+ var parameter = this._getParameter(offset, isParameter),
+ tolerance = 0.000001,
+ res = null;
+ if (parameter > tolerance && parameter < 1 - tolerance) {
+ var parts = Curve.subdivide(this.getValues(), parameter),
+ isLinear = ignoreLinear ? false : this.isLinear(),
+ left = parts[0],
+ right = parts[1];
+
+ if (!isLinear) {
+ this._segment1._handleOut.set(left[2] - left[0],
+ left[3] - left[1]);
+ this._segment2._handleIn.set(right[4] - right[6],
+ right[5] - right[7]);
+ }
+
+ var x = left[6], y = left[7],
+ segment = new Segment(new Point(x, y),
+ !isLinear && new Point(left[4] - x, left[5] - y),
+ !isLinear && new Point(right[2] - x, right[3] - y));
+
+ if (this._path) {
+ if (this._segment1._index > 0 && this._segment2._index === 0) {
+ this._path.add(segment);
+ } else {
+ this._path.insert(this._segment2._index, segment);
+ }
+ res = this;
+ } else {
+ var end = this._segment2;
+ this._segment2 = segment;
+ res = new Curve(segment, end);
+ }
+ }
+ return res;
+ },
+
+ split: function(offset, isParameter) {
+ return this._path
+ ? this._path.split(this._segment1._index,
+ this._getParameter(offset, isParameter))
+ : null;
+ },
+
+ reverse: function() {
+ return new Curve(this._segment2.reverse(), this._segment1.reverse());
+ },
+
+ remove: function() {
+ var removed = false;
+ if (this._path) {
+ var segment2 = this._segment2,
+ handleOut = segment2._handleOut;
+ removed = segment2.remove();
+ if (removed)
+ this._segment1._handleOut.set(handleOut.x, handleOut.y);
+ }
+ return removed;
+ },
+
+ clone: function() {
+ return new Curve(this._segment1, this._segment2);
+ },
+
+ toString: function() {
+ var parts = [ 'point1: ' + this._segment1._point ];
+ if (!this._segment1._handleOut.isZero())
+ parts.push('handle1: ' + this._segment1._handleOut);
+ if (!this._segment2._handleIn.isZero())
+ parts.push('handle2: ' + this._segment2._handleIn);
+ parts.push('point2: ' + this._segment2._point);
+ return '{ ' + parts.join(', ') + ' }';
+ },
+
+statics: {
+ getValues: function(segment1, segment2, matrix) {
+ var p1 = segment1._point,
+ h1 = segment1._handleOut,
+ h2 = segment2._handleIn,
+ p2 = segment2._point,
+ values = [
+ p1._x, p1._y,
+ p1._x + h1._x, p1._y + h1._y,
+ p2._x + h2._x, p2._y + h2._y,
+ p2._x, p2._y
+ ];
+ if (matrix)
+ matrix._transformCoordinates(values, values, 4);
+ return values;
+ },
+
+ evaluate: function(v, t, type) {
+ var p1x = v[0], p1y = v[1],
+ c1x = v[2], c1y = v[3],
+ c2x = v[4], c2y = v[5],
+ p2x = v[6], p2y = v[7],
+ tolerance = 0.000001,
+ x, y;
+
+ if (type === 0 && (t < tolerance || t > 1 - tolerance)) {
+ var isZero = t < tolerance;
+ x = isZero ? p1x : p2x;
+ y = isZero ? p1y : p2y;
+ } else {
+ var cx = 3 * (c1x - p1x),
+ bx = 3 * (c2x - c1x) - cx,
+ ax = p2x - p1x - cx - bx,
+
+ cy = 3 * (c1y - p1y),
+ by = 3 * (c2y - c1y) - cy,
+ ay = p2y - p1y - cy - by;
+ if (type === 0) {
+ x = ((ax * t + bx) * t + cx) * t + p1x;
+ y = ((ay * t + by) * t + cy) * t + p1y;
+ } else {
+ if (t < tolerance && c1x === p1x && c1y === p1y
+ || t > 1 - tolerance && c2x === p2x && c2y === p2y) {
+ x = c2x - c1x;
+ y = c2y - c1y;
+ } else if (t < tolerance) {
+ x = cx;
+ y = cy;
+ } else if (t > 1 - tolerance) {
+ x = 3 * (p2x - c2x);
+ y = 3 * (p2y - c2y);
+ } else {
+ x = (3 * ax * t + 2 * bx) * t + cx;
+ y = (3 * ay * t + 2 * by) * t + cy;
+ }
+ if (type === 3) {
+ var x2 = 6 * ax * t + 2 * bx,
+ y2 = 6 * ay * t + 2 * by;
+ return (x * y2 - y * x2) / Math.pow(x * x + y * y, 3 / 2);
+ }
+ }
+ }
+ return type === 2 ? new Point(y, -x) : new Point(x, y);
+ },
+
+ subdivide: function(v, t) {
+ var p1x = v[0], p1y = v[1],
+ c1x = v[2], c1y = v[3],
+ c2x = v[4], c2y = v[5],
+ p2x = v[6], p2y = v[7];
+ if (t === undefined)
+ t = 0.5;
+ var u = 1 - t,
+ p3x = u * p1x + t * c1x, p3y = u * p1y + t * c1y,
+ p4x = u * c1x + t * c2x, p4y = u * c1y + t * c2y,
+ p5x = u * c2x + t * p2x, p5y = u * c2y + t * p2y,
+ p6x = u * p3x + t * p4x, p6y = u * p3y + t * p4y,
+ p7x = u * p4x + t * p5x, p7y = u * p4y + t * p5y,
+ p8x = u * p6x + t * p7x, p8y = u * p6y + t * p7y;
+ return [
+ [p1x, p1y, p3x, p3y, p6x, p6y, p8x, p8y],
+ [p8x, p8y, p7x, p7y, p5x, p5y, p2x, p2y]
+ ];
+ },
+
+ solveCubic: function (v, coord, val, roots, min, max) {
+ var p1 = v[coord],
+ c1 = v[coord + 2],
+ c2 = v[coord + 4],
+ p2 = v[coord + 6],
+ c = 3 * (c1 - p1),
+ b = 3 * (c2 - c1) - c,
+ a = p2 - p1 - c - b,
+ isZero = Numerical.isZero;
+ if (isZero(a) && isZero(b))
+ a = b = 0;
+ return Numerical.solveCubic(a, b, c, p1 - val, roots, min, max);
+ },
+
+ getParameterOf: function(v, x, y) {
+ var tolerance = 0.000001;
+ if (Math.abs(v[0] - x) < tolerance && Math.abs(v[1] - y) < tolerance)
+ return 0;
+ if (Math.abs(v[6] - x) < tolerance && Math.abs(v[7] - y) < tolerance)
+ return 1;
+ var txs = [],
+ tys = [],
+ sx = Curve.solveCubic(v, 0, x, txs, 0, 1),
+ sy = Curve.solveCubic(v, 1, y, tys, 0, 1),
+ tx, ty;
+ for (var cx = 0; sx == -1 || cx < sx;) {
+ if (sx == -1 || (tx = txs[cx++]) >= 0 && tx <= 1) {
+ for (var cy = 0; sy == -1 || cy < sy;) {
+ if (sy == -1 || (ty = tys[cy++]) >= 0 && ty <= 1) {
+ if (sx == -1) tx = ty;
+ else if (sy == -1) ty = tx;
+ if (Math.abs(tx - ty) < tolerance)
+ return (tx + ty) * 0.5;
+ }
+ }
+ if (sx == -1)
+ break;
+ }
+ }
+ return null;
+ },
+
+ getPart: function(v, from, to) {
+ if (from > 0)
+ v = Curve.subdivide(v, from)[1];
+ if (to < 1)
+ v = Curve.subdivide(v, (to - from) / (1 - from))[0];
+ return v;
+ },
+
+ isLinear: function(v) {
+ var isZero = Numerical.isZero;
+ return isZero(v[0] - v[2]) && isZero(v[1] - v[3])
+ && isZero(v[4] - v[6]) && isZero(v[5] - v[7]);
+ },
+
+ isFlatEnough: function(v, tolerance) {
+ var p1x = v[0], p1y = v[1],
+ c1x = v[2], c1y = v[3],
+ c2x = v[4], c2y = v[5],
+ p2x = v[6], p2y = v[7],
+ ux = 3 * c1x - 2 * p1x - p2x,
+ uy = 3 * c1y - 2 * p1y - p2y,
+ vx = 3 * c2x - 2 * p2x - p1x,
+ vy = 3 * c2y - 2 * p2y - p1y;
+ return Math.max(ux * ux, vx * vx) + Math.max(uy * uy, vy * vy)
+ < 10 * tolerance * tolerance;
+ },
+
+ getArea: function(v) {
+ var p1x = v[0], p1y = v[1],
+ c1x = v[2], c1y = v[3],
+ c2x = v[4], c2y = v[5],
+ p2x = v[6], p2y = v[7];
+ return ( 3.0 * c1y * p1x - 1.5 * c1y * c2x
+ - 1.5 * c1y * p2x - 3.0 * p1y * c1x
+ - 1.5 * p1y * c2x - 0.5 * p1y * p2x
+ + 1.5 * c2y * p1x + 1.5 * c2y * c1x
+ - 3.0 * c2y * p2x + 0.5 * p2y * p1x
+ + 1.5 * p2y * c1x + 3.0 * p2y * c2x) / 10;
+ },
+
+ getEdgeSum: function(v) {
+ return (v[0] - v[2]) * (v[3] + v[1])
+ + (v[2] - v[4]) * (v[5] + v[3])
+ + (v[4] - v[6]) * (v[7] + v[5]);
+ },
+
+ getBounds: function(v) {
+ var min = v.slice(0, 2),
+ max = min.slice(),
+ roots = [0, 0];
+ for (var i = 0; i < 2; i++)
+ Curve._addBounds(v[i], v[i + 2], v[i + 4], v[i + 6],
+ i, 0, min, max, roots);
+ return new Rectangle(min[0], min[1], max[0] - min[0], max[1] - min[1]);
+ },
+
+ _addBounds: function(v0, v1, v2, v3, coord, padding, min, max, roots) {
+ function add(value, padding) {
+ var left = value - padding,
+ right = value + padding;
+ if (left < min[coord])
+ min[coord] = left;
+ if (right > max[coord])
+ max[coord] = right;
+ }
+ var a = 3 * (v1 - v2) - v0 + v3,
+ b = 2 * (v0 + v2) - 4 * v1,
+ c = v1 - v0,
+ count = Numerical.solveQuadratic(a, b, c, roots),
+ tMin = 0.000001,
+ tMax = 1 - tMin;
+ add(v3, 0);
+ for (var i = 0; i < count; i++) {
+ var t = roots[i],
+ u = 1 - t;
+ if (tMin < t && t < tMax)
+ add(u * u * u * v0
+ + 3 * u * u * t * v1
+ + 3 * u * t * t * v2
+ + t * t * t * v3,
+ padding);
+ }
+ }
+}}, Base.each(['getBounds', 'getStrokeBounds', 'getHandleBounds', 'getRoughBounds'],
+ function(name) {
+ this[name] = function() {
+ if (!this._bounds)
+ this._bounds = {};
+ var bounds = this._bounds[name];
+ if (!bounds) {
+ bounds = this._bounds[name] = Path[name]([this._segment1,
+ this._segment2], false, this._path.getStyle());
+ }
+ return bounds.clone();
+ };
+ },
+{
+
+}), Base.each(['getPoint', 'getTangent', 'getNormal', 'getCurvature'],
+ function(name, index) {
+ this[name + 'At'] = function(offset, isParameter) {
+ var values = this.getValues();
+ return Curve.evaluate(values, isParameter
+ ? offset : Curve.getParameterAt(values, offset, 0), index);
+ };
+ this[name] = function(parameter) {
+ return Curve.evaluate(this.getValues(), parameter, index);
+ };
+ },
+{
+ beans: false,
+
+ getParameterAt: function(offset, start) {
+ return Curve.getParameterAt(this.getValues(), offset, start);
+ },
+
+ getParameterOf: function() {
+ var point = Point.read(arguments);
+ return Curve.getParameterOf(this.getValues(), point.x, point.y);
+ },
+
+ getLocationAt: function(offset, isParameter) {
+ if (!isParameter)
+ offset = this.getParameterAt(offset);
+ return offset >= 0 && offset <= 1 && new CurveLocation(this, offset);
+ },
+
+ getLocationOf: function() {
+ return this.getLocationAt(this.getParameterOf(Point.read(arguments)),
+ true);
+ },
+
+ getOffsetOf: function() {
+ var loc = this.getLocationOf.apply(this, arguments);
+ return loc ? loc.getOffset() : null;
+ },
+
+ getNearestLocation: function() {
+ var point = Point.read(arguments),
+ values = this.getValues(),
+ count = 100,
+ minDist = Infinity,
+ minT = 0;
+
+ function refine(t) {
+ if (t >= 0 && t <= 1) {
+ var dist = point.getDistance(
+ Curve.evaluate(values, t, 0), true);
+ if (dist < minDist) {
+ minDist = dist;
+ minT = t;
+ return true;
+ }
+ }
+ }
+
+ for (var i = 0; i <= count; i++)
+ refine(i / count);
+
+ var step = 1 / (count * 2);
+ while (step > 0.000001) {
+ if (!refine(minT - step) && !refine(minT + step))
+ step /= 2;
+ }
+ var pt = Curve.evaluate(values, minT, 0);
+ return new CurveLocation(this, minT, pt, null, null, null,
+ point.getDistance(pt));
+ },
+
+ getNearestPoint: function() {
+ return this.getNearestLocation.apply(this, arguments).getPoint();
+ }
+
+}),
+new function() {
+
+ function getLengthIntegrand(v) {
+ var p1x = v[0], p1y = v[1],
+ c1x = v[2], c1y = v[3],
+ c2x = v[4], c2y = v[5],
+ p2x = v[6], p2y = v[7],
+
+ ax = 9 * (c1x - c2x) + 3 * (p2x - p1x),
+ bx = 6 * (p1x + c2x) - 12 * c1x,
+ cx = 3 * (c1x - p1x),
+
+ ay = 9 * (c1y - c2y) + 3 * (p2y - p1y),
+ by = 6 * (p1y + c2y) - 12 * c1y,
+ cy = 3 * (c1y - p1y);
+
+ return function(t) {
+ var dx = (ax * t + bx) * t + cx,
+ dy = (ay * t + by) * t + cy;
+ return Math.sqrt(dx * dx + dy * dy);
+ };
+ }
+
+ function getIterations(a, b) {
+ return Math.max(2, Math.min(16, Math.ceil(Math.abs(b - a) * 32)));
+ }
+
+ return {
+ statics: true,
+
+ getLength: function(v, a, b) {
+ if (a === undefined)
+ a = 0;
+ if (b === undefined)
+ b = 1;
+ var isZero = Numerical.isZero;
+ if (a === 0 && b === 1
+ && isZero(v[0] - v[2]) && isZero(v[1] - v[3])
+ && isZero(v[6] - v[4]) && isZero(v[7] - v[5])) {
+ var dx = v[6] - v[0],
+ dy = v[7] - v[1];
+ return Math.sqrt(dx * dx + dy * dy);
+ }
+ var ds = getLengthIntegrand(v);
+ return Numerical.integrate(ds, a, b, getIterations(a, b));
+ },
+
+ getParameterAt: function(v, offset, start) {
+ if (start === undefined)
+ start = offset < 0 ? 1 : 0
+ if (offset === 0)
+ return start;
+ var forward = offset > 0,
+ a = forward ? start : 0,
+ b = forward ? 1 : start,
+ ds = getLengthIntegrand(v),
+ rangeLength = Numerical.integrate(ds, a, b,
+ getIterations(a, b));
+ if (Math.abs(offset) >= rangeLength)
+ return forward ? b : a;
+ var guess = offset / rangeLength,
+ length = 0;
+ function f(t) {
+ length += Numerical.integrate(ds, start, t,
+ getIterations(start, t));
+ start = t;
+ return length - offset;
+ }
+ return Numerical.findRoot(f, ds, start + guess, a, b, 16,
+ 0.000001);
+ }
+ };
+}, new function() {
+ function addLocation(locations, include, curve1, t1, point1, curve2, t2,
+ point2) {
+ var loc = new CurveLocation(curve1, t1, point1, curve2, t2, point2);
+ if (!include || include(loc))
+ locations.push(loc);
+ }
+
+ function addCurveIntersections(v1, v2, curve1, curve2, locations, include,
+ tMin, tMax, uMin, uMax, oldTDiff, reverse, recursion) {
+ if (recursion > 32)
+ return;
+ var q0x = v2[0], q0y = v2[1], q3x = v2[6], q3y = v2[7],
+ tolerance = 0.000001,
+ getSignedDistance = Line.getSignedDistance,
+ d1 = getSignedDistance(q0x, q0y, q3x, q3y, v2[2], v2[3]) || 0,
+ d2 = getSignedDistance(q0x, q0y, q3x, q3y, v2[4], v2[5]) || 0,
+ factor = d1 * d2 > 0 ? 3 / 4 : 4 / 9,
+ dMin = factor * Math.min(0, d1, d2),
+ dMax = factor * Math.max(0, d1, d2),
+ dp0 = getSignedDistance(q0x, q0y, q3x, q3y, v1[0], v1[1]),
+ dp1 = getSignedDistance(q0x, q0y, q3x, q3y, v1[2], v1[3]),
+ dp2 = getSignedDistance(q0x, q0y, q3x, q3y, v1[4], v1[5]),
+ dp3 = getSignedDistance(q0x, q0y, q3x, q3y, v1[6], v1[7]),
+ tMinNew, tMaxNew, tDiff;
+ if (q0x === q3x && uMax - uMin <= tolerance && recursion > 3) {
+ tMaxNew = tMinNew = (tMax + tMin) / 2;
+ tDiff = 0;
+ } else {
+ var hull = getConvexHull(dp0, dp1, dp2, dp3),
+ top = hull[0],
+ bottom = hull[1],
+ tMinClip, tMaxClip;
+ tMinClip = clipConvexHull(top, bottom, dMin, dMax);
+ top.reverse();
+ bottom.reverse();
+ tMaxClip = clipConvexHull(top, bottom, dMin, dMax);
+ if (tMinClip == null || tMaxClip == null)
+ return;
+ v1 = Curve.getPart(v1, tMinClip, tMaxClip);
+ tDiff = tMaxClip - tMinClip;
+ tMinNew = tMax * tMinClip + tMin * (1 - tMinClip);
+ tMaxNew = tMax * tMaxClip + tMin * (1 - tMaxClip);
+ }
+ if (oldTDiff > 0.5 && tDiff > 0.5) {
+ if (tMaxNew - tMinNew > uMax - uMin) {
+ var parts = Curve.subdivide(v1, 0.5),
+ t = tMinNew + (tMaxNew - tMinNew) / 2;
+ addCurveIntersections(
+ v2, parts[0], curve2, curve1, locations, include,
+ uMin, uMax, tMinNew, t, tDiff, !reverse, ++recursion);
+ addCurveIntersections(
+ v2, parts[1], curve2, curve1, locations, include,
+ uMin, uMax, t, tMaxNew, tDiff, !reverse, recursion);
+ } else {
+ var parts = Curve.subdivide(v2, 0.5),
+ t = uMin + (uMax - uMin) / 2;
+ addCurveIntersections(
+ parts[0], v1, curve2, curve1, locations, include,
+ uMin, t, tMinNew, tMaxNew, tDiff, !reverse, ++recursion);
+ addCurveIntersections(
+ parts[1], v1, curve2, curve1, locations, include,
+ t, uMax, tMinNew, tMaxNew, tDiff, !reverse, recursion);
+ }
+ } else if (Math.max(uMax - uMin, tMaxNew - tMinNew) < tolerance) {
+ var t1 = tMinNew + (tMaxNew - tMinNew) / 2,
+ t2 = uMin + (uMax - uMin) / 2;
+ if (reverse) {
+ addLocation(locations, include,
+ curve2, t2, Curve.evaluate(v2, t2, 0),
+ curve1, t1, Curve.evaluate(v1, t1, 0));
+ } else {
+ addLocation(locations, include,
+ curve1, t1, Curve.evaluate(v1, t1, 0),
+ curve2, t2, Curve.evaluate(v2, t2, 0));
+ }
+ } else if (tDiff > 0) {
+ addCurveIntersections(v2, v1, curve2, curve1, locations, include,
+ uMin, uMax, tMinNew, tMaxNew, tDiff, !reverse, ++recursion);
+ }
+ }
+
+ function getConvexHull(dq0, dq1, dq2, dq3) {
+ var p0 = [ 0, dq0 ],
+ p1 = [ 1 / 3, dq1 ],
+ p2 = [ 2 / 3, dq2 ],
+ p3 = [ 1, dq3 ],
+ getSignedDistance = Line.getSignedDistance,
+ dist1 = getSignedDistance(0, dq0, 1, dq3, 1 / 3, dq1),
+ dist2 = getSignedDistance(0, dq0, 1, dq3, 2 / 3, dq2),
+ flip = false,
+ hull;
+ if (dist1 * dist2 < 0) {
+ hull = [[p0, p1, p3], [p0, p2, p3]];
+ flip = dist1 < 0;
+ } else {
+ var pmax, cross = 0,
+ distZero = dist1 === 0 || dist2 === 0;
+ if (Math.abs(dist1) > Math.abs(dist2)) {
+ pmax = p1;
+ cross = (dq3 - dq2 - (dq3 - dq0) / 3)
+ * (2 * (dq3 - dq2) - dq3 + dq1) / 3;
+ } else {
+ pmax = p2;
+ cross = (dq1 - dq0 + (dq0 - dq3) / 3)
+ * (-2 * (dq0 - dq1) + dq0 - dq2) / 3;
+ }
+ hull = cross < 0 || distZero
+ ? [[p0, pmax, p3], [p0, p3]]
+ : [[p0, p1, p2, p3], [p0, p3]];
+ flip = dist1 ? dist1 < 0 : dist2 < 0;
+ }
+ return flip ? hull.reverse() : hull;
+ }
+
+ function clipConvexHull(hullTop, hullBottom, dMin, dMax) {
+ if (hullTop[0][1] < dMin) {
+ return clipConvexHullPart(hullTop, true, dMin);
+ } else if (hullBottom[0][1] > dMax) {
+ return clipConvexHullPart(hullBottom, false, dMax);
+ } else {
+ return hullTop[0][0];
+ }
+ }
+
+ function clipConvexHullPart(part, top, threshold) {
+ var px = part[0][0],
+ py = part[0][1];
+ for (var i = 1, l = part.length; i < l; i++) {
+ var qx = part[i][0],
+ qy = part[i][1];
+ if (top ? qy >= threshold : qy <= threshold)
+ return px + (threshold - py) * (qx - px) / (qy - py);
+ px = qx;
+ py = qy;
+ }
+ return null;
+ }
+
+ function addCurveLineIntersections(v1, v2, curve1, curve2, locations,
+ include) {
+ var flip = Curve.isLinear(v1),
+ vc = flip ? v2 : v1,
+ vl = flip ? v1 : v2,
+ lx1 = vl[0], ly1 = vl[1],
+ lx2 = vl[6], ly2 = vl[7],
+ ldx = lx2 - lx1,
+ ldy = ly2 - ly1,
+ angle = Math.atan2(-ldy, ldx),
+ sin = Math.sin(angle),
+ cos = Math.cos(angle),
+ rlx2 = ldx * cos - ldy * sin,
+ rvl = [0, 0, 0, 0, rlx2, 0, rlx2, 0],
+ rvc = [];
+ for(var i = 0; i < 8; i += 2) {
+ var x = vc[i] - lx1,
+ y = vc[i + 1] - ly1;
+ rvc.push(
+ x * cos - y * sin,
+ y * cos + x * sin);
+ }
+ var roots = [],
+ count = Curve.solveCubic(rvc, 1, 0, roots, 0, 1);
+ for (var i = 0; i < count; i++) {
+ var tc = roots[i],
+ x = Curve.evaluate(rvc, tc, 0).x;
+ if (x >= 0 && x <= rlx2) {
+ var tl = Curve.getParameterOf(rvl, x, 0),
+ t1 = flip ? tl : tc,
+ t2 = flip ? tc : tl;
+ addLocation(locations, include,
+ curve1, t1, Curve.evaluate(v1, t1, 0),
+ curve2, t2, Curve.evaluate(v2, t2, 0));
+ }
+ }
+ }
+
+ function addLineIntersection(v1, v2, curve1, curve2, locations, include) {
+ var point = Line.intersect(
+ v1[0], v1[1], v1[6], v1[7],
+ v2[0], v2[1], v2[6], v2[7]);
+ if (point) {
+ var x = point.x,
+ y = point.y;
+ addLocation(locations, include,
+ curve1, Curve.getParameterOf(v1, x, y), point,
+ curve2, Curve.getParameterOf(v2, x, y), point);
+ }
+ }
+
+ return { statics: {
+ getIntersections: function(v1, v2, c1, c2, locations, include) {
+ var linear1 = Curve.isLinear(v1),
+ linear2 = Curve.isLinear(v2),
+ c1p1 = c1.getPoint1(),
+ c1p2 = c1.getPoint2(),
+ c2p1 = c2.getPoint1(),
+ c2p2 = c2.getPoint2(),
+ tolerance = 0.000001;
+ if (c1p1.isClose(c2p1, tolerance))
+ addLocation(locations, include, c1, 0, c1p1, c2, 0, c1p1);
+ if (c1p1.isClose(c2p2, tolerance))
+ addLocation(locations, include, c1, 0, c1p1, c2, 1, c1p1);
+ (linear1 && linear2
+ ? addLineIntersection
+ : linear1 || linear2
+ ? addCurveLineIntersections
+ : addCurveIntersections)(
+ v1, v2, c1, c2, locations, include,
+ 0, 1, 0, 1, 0, false, 0);
+ if (c1p2.isClose(c2p1, tolerance))
+ addLocation(locations, include, c1, 1, c1p2, c2, 0, c1p2);
+ if (c1p2.isClose(c2p2, tolerance))
+ addLocation(locations, include, c1, 1, c1p2, c2, 1, c1p2);
+ return locations;
+ },
+
+ filterIntersections: function(locations, _expand) {
+ var last = locations.length - 1,
+ tMax = 1 - 0.000001;
+ for (var i = last; i >= 0; i--) {
+ var loc = locations[i],
+ next = loc._curve.getNext(),
+ next2 = loc._curve2.getNext();
+ if (next && loc._parameter >= tMax) {
+ loc._parameter = 0;
+ loc._curve = next;
+ }
+ if (next2 && loc._parameter2 >= tMax) {
+ loc._parameter2 = 0;
+ loc._curve2 = next2;
+ }
+ }
+
+ function compare(loc1, loc2) {
+ var path1 = loc1.getPath(),
+ path2 = loc2.getPath();
+ return path1 === path2
+ ? (loc1.getIndex() + loc1.getParameter())
+ - (loc2.getIndex() + loc2.getParameter())
+ : path1._id - path2._id;
+ }
+
+ if (last > 0) {
+ locations.sort(compare);
+ for (var i = last; i > 0; i--) {
+ if (locations[i].equals(locations[i - 1])) {
+ locations.splice(i, 1);
+ last--;
+ }
+ }
+ }
+ if (_expand) {
+ for (var i = last; i >= 0; i--)
+ locations.push(locations[i].getIntersection());
+ locations.sort(compare);
+ }
+ return locations;
+ }
+ }};
+});
+
+var CurveLocation = Base.extend({
+ _class: 'CurveLocation',
+ beans: true,
+
+ initialize: function CurveLocation(curve, parameter, point, _curve2,
+ _parameter2, _point2, _distance) {
+ this._id = CurveLocation._id = (CurveLocation._id || 0) + 1;
+ this._curve = curve;
+ this._segment1 = curve._segment1;
+ this._segment2 = curve._segment2;
+ this._parameter = parameter;
+ this._point = point;
+ this._curve2 = _curve2;
+ this._parameter2 = _parameter2;
+ this._point2 = _point2;
+ this._distance = _distance;
+ },
+
+ getSegment: function(_preferFirst) {
+ if (!this._segment) {
+ var curve = this.getCurve(),
+ parameter = this.getParameter();
+ if (parameter === 1) {
+ this._segment = curve._segment2;
+ } else if (parameter === 0 || _preferFirst) {
+ this._segment = curve._segment1;
+ } else if (parameter == null) {
+ return null;
+ } else {
+ this._segment = curve.getPartLength(0, parameter)
+ < curve.getPartLength(parameter, 1)
+ ? curve._segment1
+ : curve._segment2;
+ }
+ }
+ return this._segment;
+ },
+
+ getCurve: function(_uncached) {
+ if (!this._curve || _uncached) {
+ this._curve = this._segment1.getCurve();
+ if (this._curve.getParameterOf(this._point) == null)
+ this._curve = this._segment2.getPrevious().getCurve();
+ }
+ return this._curve;
+ },
+
+ getIntersection: function() {
+ var intersection = this._intersection;
+ if (!intersection && this._curve2) {
+ var param = this._parameter2;
+ this._intersection = intersection = new CurveLocation(
+ this._curve2, param, this._point2 || this._point, this);
+ intersection._intersection = this;
+ }
+ return intersection;
+ },
+
+ getPath: function() {
+ var curve = this.getCurve();
+ return curve && curve._path;
+ },
+
+ getIndex: function() {
+ var curve = this.getCurve();
+ return curve && curve.getIndex();
+ },
+
+ getOffset: function() {
+ var path = this.getPath();
+ return path ? path._getOffset(this) : this.getCurveOffset();
+ },
+
+ getCurveOffset: function() {
+ var curve = this.getCurve(),
+ parameter = this.getParameter();
+ return parameter != null && curve && curve.getPartLength(0, parameter);
+ },
+
+ getParameter: function(_uncached) {
+ if ((this._parameter == null || _uncached) && this._point) {
+ var curve = this.getCurve(_uncached);
+ this._parameter = curve && curve.getParameterOf(this._point);
+ }
+ return this._parameter;
+ },
+
+ getPoint: function(_uncached) {
+ if ((!this._point || _uncached) && this._parameter != null) {
+ var curve = this.getCurve(_uncached);
+ this._point = curve && curve.getPointAt(this._parameter, true);
+ }
+ return this._point;
+ },
+
+ getDistance: function() {
+ return this._distance;
+ },
+
+ divide: function() {
+ var curve = this.getCurve(true);
+ return curve && curve.divide(this.getParameter(true), true);
+ },
+
+ split: function() {
+ var curve = this.getCurve(true);
+ return curve && curve.split(this.getParameter(true), true);
+ },
+
+ equals: function(loc) {
+ var abs = Math.abs,
+ tolerance = 0.000001;
+ return this === loc
+ || loc
+ && this._curve === loc._curve
+ && this._curve2 === loc._curve2
+ && abs(this._parameter - loc._parameter) <= tolerance
+ && abs(this._parameter2 - loc._parameter2) <= tolerance
+ || false;
+ },
+
+ toString: function() {
+ var parts = [],
+ point = this.getPoint(),
+ f = Formatter.instance;
+ if (point)
+ parts.push('point: ' + point);
+ var index = this.getIndex();
+ if (index != null)
+ parts.push('index: ' + index);
+ var parameter = this.getParameter();
+ if (parameter != null)
+ parts.push('parameter: ' + f.number(parameter));
+ if (this._distance != null)
+ parts.push('distance: ' + f.number(this._distance));
+ return '{ ' + parts.join(', ') + ' }';
+ }
+}, Base.each(['getTangent', 'getNormal', 'getCurvature'], function(name) {
+ var get = name + 'At';
+ this[name] = function() {
+ var parameter = this.getParameter(),
+ curve = this.getCurve();
+ return parameter != null && curve && curve[get](parameter, true);
+ };
+}, {}));
+
+var PathItem = Item.extend({
+ _class: 'PathItem',
+
+ initialize: function PathItem() {
+ },
+
+ getIntersections: function(path, _matrix, _expand) {
+ if (this === path)
+ path = null;
+ var locations = [],
+ curves1 = this.getCurves(),
+ curves2 = path ? path.getCurves() : curves1,
+ matrix1 = this._matrix.orNullIfIdentity(),
+ matrix2 = path ? (_matrix || path._matrix).orNullIfIdentity()
+ : matrix1,
+ length1 = curves1.length,
+ length2 = path ? curves2.length : length1,
+ values2 = [],
+ tMin = 0.000001,
+ tMax = 1 - tMin;
+ if (path && !this.getBounds(matrix1).touches(path.getBounds(matrix2)))
+ return [];
+ for (var i = 0; i < length2; i++)
+ values2[i] = curves2[i].getValues(matrix2);
+ for (var i = 0; i < length1; i++) {
+ var curve1 = curves1[i],
+ values1 = path ? curve1.getValues(matrix1) : values2[i];
+ if (!path) {
+ var seg1 = curve1.getSegment1(),
+ seg2 = curve1.getSegment2(),
+ h1 = seg1._handleOut,
+ h2 = seg2._handleIn;
+ if (new Line(seg1._point.subtract(h1), h1.multiply(2), true)
+ .intersect(new Line(seg2._point.subtract(h2),
+ h2.multiply(2), true), false)) {
+ var parts = Curve.subdivide(values1);
+ Curve.getIntersections(
+ parts[0], parts[1], curve1, curve1, locations,
+ function(loc) {
+ if (loc._parameter <= tMax) {
+ loc._parameter /= 2;
+ loc._parameter2 = 0.5 + loc._parameter2 / 2;
+ return true;
+ }
+ }
+ );
+ }
+ }
+ for (var j = path ? 0 : i + 1; j < length2; j++) {
+ Curve.getIntersections(
+ values1, values2[j], curve1, curves2[j], locations,
+ !path && (j === i + 1 || j === length2 - 1 && i === 0)
+ && function(loc) {
+ var t = loc._parameter;
+ return t >= tMin && t <= tMax;
+ }
+ );
+ }
+ }
+ return Curve.filterIntersections(locations, _expand);
+ },
+
+ _asPathItem: function() {
+ return this;
+ },
+
+ setPathData: function(data) {
+
+ var parts = data.match(/[mlhvcsqtaz][^mlhvcsqtaz]*/ig),
+ coords,
+ relative = false,
+ previous,
+ control,
+ current = new Point(),
+ start = new Point();
+
+ function getCoord(index, coord) {
+ var val = +coords[index];
+ if (relative)
+ val += current[coord];
+ return val;
+ }
+
+ function getPoint(index) {
+ return new Point(
+ getCoord(index, 'x'),
+ getCoord(index + 1, 'y')
+ );
+ }
+
+ this.clear();
+
+ for (var i = 0, l = parts && parts.length; i < l; i++) {
+ var part = parts[i],
+ command = part[0],
+ lower = command.toLowerCase();
+ coords = part.match(/[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g);
+ var length = coords && coords.length;
+ relative = command === lower;
+ if (previous === 'z' && !/[mz]/.test(lower))
+ this.moveTo(current = start);
+ switch (lower) {
+ case 'm':
+ case 'l':
+ var move = lower === 'm';
+ if (move && previous && previous !== 'z')
+ this.closePath(true);
+ for (var j = 0; j < length; j += 2)
+ this[j === 0 && move ? 'moveTo' : 'lineTo'](
+ current = getPoint(j));
+ control = current;
+ if (move)
+ start = current;
+ break;
+ case 'h':
+ case 'v':
+ var coord = lower === 'h' ? 'x' : 'y';
+ for (var j = 0; j < length; j++) {
+ current[coord] = getCoord(j, coord);
+ this.lineTo(current);
+ }
+ control = current;
+ break;
+ case 'c':
+ for (var j = 0; j < length; j += 6) {
+ this.cubicCurveTo(
+ getPoint(j),
+ control = getPoint(j + 2),
+ current = getPoint(j + 4));
+ }
+ break;
+ case 's':
+ for (var j = 0; j < length; j += 4) {
+ this.cubicCurveTo(
+ /[cs]/.test(previous)
+ ? current.multiply(2).subtract(control)
+ : current,
+ control = getPoint(j),
+ current = getPoint(j + 2));
+ previous = lower;
+ }
+ break;
+ case 'q':
+ for (var j = 0; j < length; j += 4) {
+ this.quadraticCurveTo(
+ control = getPoint(j),
+ current = getPoint(j + 2));
+ }
+ break;
+ case 't':
+ for (var j = 0; j < length; j += 2) {
+ this.quadraticCurveTo(
+ control = (/[qt]/.test(previous)
+ ? current.multiply(2).subtract(control)
+ : current),
+ current = getPoint(j));
+ previous = lower;
+ }
+ break;
+ case 'a':
+ for (var j = 0; j < length; j += 7) {
+ this.arcTo(current = getPoint(j + 5),
+ new Size(+coords[j], +coords[j + 1]),
+ +coords[j + 2], +coords[j + 4], +coords[j + 3]);
+ }
+ break;
+ case 'z':
+ this.closePath(true);
+ break;
+ }
+ previous = lower;
+ }
+ },
+
+ _canComposite: function() {
+ return !(this.hasFill() && this.hasStroke());
+ },
+
+ _contains: function(point) {
+ var winding = this._getWinding(point, false, true);
+ return !!(this.getWindingRule() === 'evenodd' ? winding & 1 : winding);
+ }
+
+});
+
+var Path = PathItem.extend({
+ _class: 'Path',
+ _serializeFields: {
+ segments: [],
+ closed: false
+ },
+
+ initialize: function Path(arg) {
+ this._closed = false;
+ this._segments = [];
+ var segments = Array.isArray(arg)
+ ? typeof arg[0] === 'object'
+ ? arg
+ : arguments
+ : arg && (arg.size === undefined && (arg.x !== undefined
+ || arg.point !== undefined))
+ ? arguments
+ : null;
+ if (segments && segments.length > 0) {
+ this.setSegments(segments);
+ } else {
+ this._curves = undefined;
+ this._selectedSegmentState = 0;
+ if (!segments && typeof arg === 'string') {
+ this.setPathData(arg);
+ arg = null;
+ }
+ }
+ this._initialize(!segments && arg);
+ },
+
+ _equals: function(item) {
+ return this._closed === item._closed
+ && Base.equals(this._segments, item._segments);
+ },
+
+ clone: function(insert) {
+ var copy = new Path(Item.NO_INSERT);
+ copy.setSegments(this._segments);
+ copy._closed = this._closed;
+ if (this._clockwise !== undefined)
+ copy._clockwise = this._clockwise;
+ return this._clone(copy, insert);
+ },
+
+ _changed: function _changed(flags) {
+ _changed.base.call(this, flags);
+ if (flags & 8) {
+ var parent = this._parent;
+ if (parent)
+ parent._currentPath = undefined;
+ this._length = this._clockwise = undefined;
+ if (this._curves && !(flags & 16)) {
+ for (var i = 0, l = this._curves.length; i < l; i++)
+ this._curves[i]._changed();
+ }
+ this._monoCurves = undefined;
+ } else if (flags & 32) {
+ this._bounds = undefined;
+ }
+ },
+
+ getStyle: function() {
+ var parent = this._parent;
+ return (parent instanceof CompoundPath ? parent : this)._style;
+ },
+
+ getSegments: function() {
+ return this._segments;
+ },
+
+ setSegments: function(segments) {
+ var fullySelected = this.isFullySelected();
+ this._segments.length = 0;
+ this._selectedSegmentState = 0;
+ this._curves = undefined;
+ if (segments && segments.length > 0)
+ this._add(Segment.readAll(segments));
+ if (fullySelected)
+ this.setFullySelected(true);
+ },
+
+ getFirstSegment: function() {
+ return this._segments[0];
+ },
+
+ getLastSegment: function() {
+ return this._segments[this._segments.length - 1];
+ },
+
+ getCurves: function() {
+ var curves = this._curves,
+ segments = this._segments;
+ if (!curves) {
+ var length = this._countCurves();
+ curves = this._curves = new Array(length);
+ for (var i = 0; i < length; i++)
+ curves[i] = new Curve(this, segments[i],
+ segments[i + 1] || segments[0]);
+ }
+ return curves;
+ },
+
+ getFirstCurve: function() {
+ return this.getCurves()[0];
+ },
+
+ getLastCurve: function() {
+ var curves = this.getCurves();
+ return curves[curves.length - 1];
+ },
+
+ isClosed: function() {
+ return this._closed;
+ },
+
+ setClosed: function(closed) {
+ if (this._closed != (closed = !!closed)) {
+ this._closed = closed;
+ if (this._curves) {
+ var length = this._curves.length = this._countCurves();
+ if (closed)
+ this._curves[length - 1] = new Curve(this,
+ this._segments[length - 1], this._segments[0]);
+ }
+ this._changed(25);
+ }
+ }
+}, {
+ beans: true,
+
+ getPathData: function(_matrix, _precision) {
+ var segments = this._segments,
+ length = segments.length,
+ f = new Formatter(_precision),
+ coords = new Array(6),
+ first = true,
+ curX, curY,
+ prevX, prevY,
+ inX, inY,
+ outX, outY,
+ parts = [];
+
+ function addSegment(segment, skipLine) {
+ segment._transformCoordinates(_matrix, coords, false);
+ curX = coords[0];
+ curY = coords[1];
+ if (first) {
+ parts.push('M' + f.pair(curX, curY));
+ first = false;
+ } else {
+ inX = coords[2];
+ inY = coords[3];
+ if (inX === curX && inY === curY
+ && outX === prevX && outY === prevY) {
+ if (!skipLine)
+ parts.push('l' + f.pair(curX - prevX, curY - prevY));
+ } else {
+ parts.push('c' + f.pair(outX - prevX, outY - prevY)
+ + ' ' + f.pair(inX - prevX, inY - prevY)
+ + ' ' + f.pair(curX - prevX, curY - prevY));
+ }
+ }
+ prevX = curX;
+ prevY = curY;
+ outX = coords[4];
+ outY = coords[5];
+ }
+
+ if (length === 0)
+ return '';
+
+ for (var i = 0; i < length; i++)
+ addSegment(segments[i]);
+ if (this._closed && length > 0) {
+ addSegment(segments[0], true);
+ parts.push('z');
+ }
+ return parts.join('');
+ }
+}, {
+
+ isEmpty: function() {
+ return this._segments.length === 0;
+ },
+
+ isPolygon: function() {
+ for (var i = 0, l = this._segments.length; i < l; i++) {
+ if (!this._segments[i].isLinear())
+ return false;
+ }
+ return true;
+ },
+
+ _transformContent: function(matrix) {
+ var coords = new Array(6);
+ for (var i = 0, l = this._segments.length; i < l; i++)
+ this._segments[i]._transformCoordinates(matrix, coords, true);
+ return true;
+ },
+
+ _add: function(segs, index) {
+ var segments = this._segments,
+ curves = this._curves,
+ amount = segs.length,
+ append = index == null,
+ index = append ? segments.length : index;
+ for (var i = 0; i < amount; i++) {
+ var segment = segs[i];
+ if (segment._path)
+ segment = segs[i] = segment.clone();
+ segment._path = this;
+ segment._index = index + i;
+ if (segment._selectionState)
+ this._updateSelection(segment, 0, segment._selectionState);
+ }
+ if (append) {
+ segments.push.apply(segments, segs);
+ } else {
+ segments.splice.apply(segments, [index, 0].concat(segs));
+ for (var i = index + amount, l = segments.length; i < l; i++)
+ segments[i]._index = i;
+ }
+ if (curves || segs._curves) {
+ if (!curves)
+ curves = this._curves = [];
+ var from = index > 0 ? index - 1 : index,
+ start = from,
+ to = Math.min(from + amount, this._countCurves());
+ if (segs._curves) {
+ curves.splice.apply(curves, [from, 0].concat(segs._curves));
+ start += segs._curves.length;
+ }
+ for (var i = start; i < to; i++)
+ curves.splice(i, 0, new Curve(this, null, null));
+ this._adjustCurves(from, to);
+ }
+ this._changed(25);
+ return segs;
+ },
+
+ _adjustCurves: function(from, to) {
+ var segments = this._segments,
+ curves = this._curves,
+ curve;
+ for (var i = from; i < to; i++) {
+ curve = curves[i];
+ curve._path = this;
+ curve._segment1 = segments[i];
+ curve._segment2 = segments[i + 1] || segments[0];
+ curve._changed();
+ }
+ if (curve = curves[this._closed && from === 0 ? segments.length - 1
+ : from - 1]) {
+ curve._segment2 = segments[from] || segments[0];
+ curve._changed();
+ }
+ if (curve = curves[to]) {
+ curve._segment1 = segments[to];
+ curve._changed();
+ }
+ },
+
+ _countCurves: function() {
+ var length = this._segments.length;
+ return !this._closed && length > 0 ? length - 1 : length;
+ },
+
+ add: function(segment1 ) {
+ return arguments.length > 1 && typeof segment1 !== 'number'
+ ? this._add(Segment.readAll(arguments))
+ : this._add([ Segment.read(arguments) ])[0];
+ },
+
+ insert: function(index, segment1 ) {
+ return arguments.length > 2 && typeof segment1 !== 'number'
+ ? this._add(Segment.readAll(arguments, 1), index)
+ : this._add([ Segment.read(arguments, 1) ], index)[0];
+ },
+
+ addSegment: function() {
+ return this._add([ Segment.read(arguments) ])[0];
+ },
+
+ insertSegment: function(index ) {
+ return this._add([ Segment.read(arguments, 1) ], index)[0];
+ },
+
+ addSegments: function(segments) {
+ return this._add(Segment.readAll(segments));
+ },
+
+ insertSegments: function(index, segments) {
+ return this._add(Segment.readAll(segments), index);
+ },
+
+ removeSegment: function(index) {
+ return this.removeSegments(index, index + 1)[0] || null;
+ },
+
+ removeSegments: function(from, to, _includeCurves) {
+ from = from || 0;
+ to = Base.pick(to, this._segments.length);
+ var segments = this._segments,
+ curves = this._curves,
+ count = segments.length,
+ removed = segments.splice(from, to - from),
+ amount = removed.length;
+ if (!amount)
+ return removed;
+ for (var i = 0; i < amount; i++) {
+ var segment = removed[i];
+ if (segment._selectionState)
+ this._updateSelection(segment, segment._selectionState, 0);
+ segment._index = segment._path = null;
+ }
+ for (var i = from, l = segments.length; i < l; i++)
+ segments[i]._index = i;
+ if (curves) {
+ var index = from > 0 && to === count + (this._closed ? 1 : 0)
+ ? from - 1
+ : from,
+ curves = curves.splice(index, amount);
+ if (_includeCurves)
+ removed._curves = curves.slice(1);
+ this._adjustCurves(index, index);
+ }
+ this._changed(25);
+ return removed;
+ },
+
+ clear: '#removeSegments',
+
+ getLength: function() {
+ if (this._length == null) {
+ var curves = this.getCurves();
+ this._length = 0;
+ for (var i = 0, l = curves.length; i < l; i++)
+ this._length += curves[i].getLength();
+ }
+ return this._length;
+ },
+
+ getArea: function() {
+ var curves = this.getCurves();
+ var area = 0;
+ for (var i = 0, l = curves.length; i < l; i++)
+ area += curves[i].getArea();
+ return area;
+ },
+
+ isFullySelected: function() {
+ var length = this._segments.length;
+ return this._selected && length > 0 && this._selectedSegmentState
+ === length * 7;
+ },
+
+ setFullySelected: function(selected) {
+ if (selected)
+ this._selectSegments(true);
+ this.setSelected(selected);
+ },
+
+ setSelected: function setSelected(selected) {
+ if (!selected)
+ this._selectSegments(false);
+ setSelected.base.call(this, selected);
+ },
+
+ _selectSegments: function(selected) {
+ var length = this._segments.length;
+ this._selectedSegmentState = selected
+ ? length * 7 : 0;
+ for (var i = 0; i < length; i++)
+ this._segments[i]._selectionState = selected
+ ? 7 : 0;
+ },
+
+ _updateSelection: function(segment, oldState, newState) {
+ segment._selectionState = newState;
+ var total = this._selectedSegmentState += newState - oldState;
+ if (total > 0)
+ this.setSelected(true);
+ },
+
+ flatten: function(maxDistance) {
+ var iterator = new PathIterator(this, 64, 0.1),
+ pos = 0,
+ step = iterator.length / Math.ceil(iterator.length / maxDistance),
+ end = iterator.length + (this._closed ? -step : step) / 2;
+ var segments = [];
+ while (pos <= end) {
+ segments.push(new Segment(iterator.evaluate(pos, 0)));
+ pos += step;
+ }
+ this.setSegments(segments);
+ },
+
+ reduce: function() {
+ var curves = this.getCurves();
+ for (var i = curves.length - 1; i >= 0; i--) {
+ var curve = curves[i];
+ if (curve.isLinear() && curve.getLength() === 0)
+ curve.remove();
+ }
+ return this;
+ },
+
+ simplify: function(tolerance) {
+ if (this._segments.length > 2) {
+ var fitter = new PathFitter(this, tolerance || 2.5);
+ this.setSegments(fitter.fit());
+ }
+ },
+
+ split: function(index, parameter) {
+ if (parameter === null)
+ return null;
+ if (arguments.length === 1) {
+ var arg = index;
+ if (typeof arg === 'number')
+ arg = this.getLocationAt(arg);
+ if (!arg)
+ return null
+ index = arg.index;
+ parameter = arg.parameter;
+ }
+ var tolerance = 0.000001;
+ if (parameter >= 1 - tolerance) {
+ index++;
+ parameter--;
+ }
+ var curves = this.getCurves();
+ if (index >= 0 && index < curves.length) {
+ if (parameter > tolerance) {
+ curves[index++].divide(parameter, true);
+ }
+ var segs = this.removeSegments(index, this._segments.length, true),
+ path;
+ if (this._closed) {
+ this.setClosed(false);
+ path = this;
+ } else {
+ path = this._clone(new Path().insertAbove(this, true));
+ }
+ path._add(segs, 0);
+ this.addSegment(segs[0]);
+ return path;
+ }
+ return null;
+ },
+
+ isClockwise: function() {
+ if (this._clockwise !== undefined)
+ return this._clockwise;
+ return Path.isClockwise(this._segments);
+ },
+
+ setClockwise: function(clockwise) {
+ if (this.isClockwise() != (clockwise = !!clockwise))
+ this.reverse();
+ this._clockwise = clockwise;
+ },
+
+ reverse: function() {
+ this._segments.reverse();
+ for (var i = 0, l = this._segments.length; i < l; i++) {
+ var segment = this._segments[i];
+ var handleIn = segment._handleIn;
+ segment._handleIn = segment._handleOut;
+ segment._handleOut = handleIn;
+ segment._index = i;
+ }
+ this._curves = null;
+ if (this._clockwise !== undefined)
+ this._clockwise = !this._clockwise;
+ this._changed(9);
+ },
+
+ join: function(path) {
+ if (path) {
+ var segments = path._segments,
+ last1 = this.getLastSegment(),
+ last2 = path.getLastSegment();
+ if (!last2)
+ return this;
+ if (last1 && last1._point.equals(last2._point))
+ path.reverse();
+ var first2 = path.getFirstSegment();
+ if (last1 && last1._point.equals(first2._point)) {
+ last1.setHandleOut(first2._handleOut);
+ this._add(segments.slice(1));
+ } else {
+ var first1 = this.getFirstSegment();
+ if (first1 && first1._point.equals(first2._point))
+ path.reverse();
+ last2 = path.getLastSegment();
+ if (first1 && first1._point.equals(last2._point)) {
+ first1.setHandleIn(last2._handleIn);
+ this._add(segments.slice(0, segments.length - 1), 0);
+ } else {
+ this._add(segments.slice());
+ }
+ }
+ if (path.closed)
+ this._add([segments[0]]);
+ path.remove();
+ }
+ var first = this.getFirstSegment(),
+ last = this.getLastSegment();
+ if (first !== last && first._point.equals(last._point)) {
+ first.setHandleIn(last._handleIn);
+ last.remove();
+ this.setClosed(true);
+ }
+ return this;
+ },
+
+ toShape: function(insert) {
+ if (!this._closed)
+ return null;
+
+ var segments = this._segments,
+ type,
+ size,
+ radius,
+ topCenter;
+
+ function isColinear(i, j) {
+ return segments[i].isColinear(segments[j]);
+ }
+
+ function isOrthogonal(i) {
+ return segments[i].isOrthogonal();
+ }
+
+ function isArc(i) {
+ return segments[i].isArc();
+ }
+
+ function getDistance(i, j) {
+ return segments[i]._point.getDistance(segments[j]._point);
+ }
+
+ if (this.isPolygon() && segments.length === 4
+ && isColinear(0, 2) && isColinear(1, 3) && isOrthogonal(1)) {
+ type = Shape.Rectangle;
+ size = new Size(getDistance(0, 3), getDistance(0, 1));
+ topCenter = segments[1]._point.add(segments[2]._point).divide(2);
+ } else if (segments.length === 8 && isArc(0) && isArc(2) && isArc(4)
+ && isArc(6) && isColinear(1, 5) && isColinear(3, 7)) {
+ type = Shape.Rectangle;
+ size = new Size(getDistance(1, 6), getDistance(0, 3));
+ radius = size.subtract(new Size(getDistance(0, 7),
+ getDistance(1, 2))).divide(2);
+ topCenter = segments[3]._point.add(segments[4]._point).divide(2);
+ } else if (segments.length === 4
+ && isArc(0) && isArc(1) && isArc(2) && isArc(3)) {
+ if (Numerical.isZero(getDistance(0, 2) - getDistance(1, 3))) {
+ type = Shape.Circle;
+ radius = getDistance(0, 2) / 2;
+ } else {
+ type = Shape.Ellipse;
+ radius = new Size(getDistance(2, 0) / 2, getDistance(3, 1) / 2);
+ }
+ topCenter = segments[1]._point;
+ }
+
+ if (type) {
+ var center = this.getPosition(true),
+ shape = new type({
+ center: center,
+ size: size,
+ radius: radius,
+ insert: false
+ });
+ shape.rotate(topCenter.subtract(center).getAngle() + 90);
+ shape.setStyle(this._style);
+ if (insert || insert === undefined)
+ shape.insertAbove(this);
+ return shape;
+ }
+ return null;
+ },
+
+ _hitTestSelf: function(point, options) {
+ var that = this,
+ style = this.getStyle(),
+ segments = this._segments,
+ numSegments = segments.length,
+ closed = this._closed,
+ tolerancePadding = options._tolerancePadding,
+ strokePadding = tolerancePadding,
+ join, cap, miterLimit,
+ area, loc, res,
+ hitStroke = options.stroke && style.hasStroke(),
+ hitFill = options.fill && style.hasFill(),
+ hitCurves = options.curves,
+ radius = hitStroke
+ ? style.getStrokeWidth() / 2
+ : hitFill && options.tolerance > 0 || hitCurves
+ ? 0 : null;
+ if (radius !== null) {
+ if (radius > 0) {
+ join = style.getStrokeJoin();
+ cap = style.getStrokeCap();
+ miterLimit = radius * style.getMiterLimit();
+ strokePadding = tolerancePadding.add(new Point(radius, radius));
+ } else {
+ join = cap = 'round';
+ }
+ }
+
+ function isCloseEnough(pt, padding) {
+ return point.subtract(pt).divide(padding).length <= 1;
+ }
+
+ function checkSegmentPoint(seg, pt, name) {
+ if (!options.selected || pt.isSelected()) {
+ var anchor = seg._point;
+ if (pt !== anchor)
+ pt = pt.add(anchor);
+ if (isCloseEnough(pt, strokePadding)) {
+ return new HitResult(name, that, {
+ segment: seg,
+ point: pt
+ });
+ }
+ }
+ }
+
+ function checkSegmentPoints(seg, ends) {
+ return (ends || options.segments)
+ && checkSegmentPoint(seg, seg._point, 'segment')
+ || (!ends && options.handles) && (
+ checkSegmentPoint(seg, seg._handleIn, 'handle-in') ||
+ checkSegmentPoint(seg, seg._handleOut, 'handle-out'));
+ }
+
+ function addToArea(point) {
+ area.add(point);
+ }
+
+ function checkSegmentStroke(segment) {
+ if (join !== 'round' || cap !== 'round') {
+ area = new Path({ internal: true, closed: true });
+ if (closed || segment._index > 0
+ && segment._index < numSegments - 1) {
+ if (join !== 'round' && (segment._handleIn.isZero()
+ || segment._handleOut.isZero()))
+ Path._addBevelJoin(segment, join, radius, miterLimit,
+ addToArea, true);
+ } else if (cap !== 'round') {
+ Path._addSquareCap(segment, cap, radius, addToArea, true);
+ }
+ if (!area.isEmpty()) {
+ var loc;
+ return area.contains(point)
+ || (loc = area.getNearestLocation(point))
+ && isCloseEnough(loc.getPoint(), tolerancePadding);
+ }
+ }
+ return isCloseEnough(segment._point, strokePadding);
+ }
+
+ if (options.ends && !options.segments && !closed) {
+ if (res = checkSegmentPoints(segments[0], true)
+ || checkSegmentPoints(segments[numSegments - 1], true))
+ return res;
+ } else if (options.segments || options.handles) {
+ for (var i = 0; i < numSegments; i++)
+ if (res = checkSegmentPoints(segments[i]))
+ return res;
+ }
+ if (radius !== null) {
+ loc = this.getNearestLocation(point);
+ if (loc) {
+ var parameter = loc.getParameter();
+ if (parameter === 0 || parameter === 1 && numSegments > 1) {
+ if (!checkSegmentStroke(loc.getSegment()))
+ loc = null;
+ } else if (!isCloseEnough(loc.getPoint(), strokePadding)) {
+ loc = null;
+ }
+ }
+ if (!loc && join === 'miter' && numSegments > 1) {
+ for (var i = 0; i < numSegments; i++) {
+ var segment = segments[i];
+ if (point.getDistance(segment._point) <= miterLimit
+ && checkSegmentStroke(segment)) {
+ loc = segment.getLocation();
+ break;
+ }
+ }
+ }
+ }
+ return !loc && hitFill && this._contains(point)
+ || loc && !hitStroke && !hitCurves
+ ? new HitResult('fill', this)
+ : loc
+ ? new HitResult(hitStroke ? 'stroke' : 'curve', this, {
+ location: loc,
+ point: loc.getPoint()
+ })
+ : null;
+ }
+
+}, Base.each(['getPoint', 'getTangent', 'getNormal', 'getCurvature'],
+ function(name) {
+ this[name + 'At'] = function(offset, isParameter) {
+ var loc = this.getLocationAt(offset, isParameter);
+ return loc && loc[name]();
+ };
+ },
+{
+ beans: false,
+
+ _getOffset: function(location) {
+ var index = location && location.getIndex();
+ if (index != null) {
+ var curves = this.getCurves(),
+ offset = 0;
+ for (var i = 0; i < index; i++)
+ offset += curves[i].getLength();
+ var curve = curves[index],
+ parameter = location.getParameter();
+ if (parameter > 0)
+ offset += curve.getPartLength(0, parameter);
+ return offset;
+ }
+ return null;
+ },
+
+ getLocationOf: function() {
+ var point = Point.read(arguments),
+ curves = this.getCurves();
+ for (var i = 0, l = curves.length; i < l; i++) {
+ var loc = curves[i].getLocationOf(point);
+ if (loc)
+ return loc;
+ }
+ return null;
+ },
+
+ getOffsetOf: function() {
+ var loc = this.getLocationOf.apply(this, arguments);
+ return loc ? loc.getOffset() : null;
+ },
+
+ getLocationAt: function(offset, isParameter) {
+ var curves = this.getCurves(),
+ length = 0;
+ if (isParameter) {
+ var index = ~~offset;
+ return curves[index].getLocationAt(offset - index, true);
+ }
+ for (var i = 0, l = curves.length; i < l; i++) {
+ var start = length,
+ curve = curves[i];
+ length += curve.getLength();
+ if (length > offset) {
+ return curve.getLocationAt(offset - start);
+ }
+ }
+ if (offset <= this.getLength())
+ return new CurveLocation(curves[curves.length - 1], 1);
+ return null;
+ },
+
+ getNearestLocation: function() {
+ var point = Point.read(arguments),
+ curves = this.getCurves(),
+ minDist = Infinity,
+ minLoc = null;
+ for (var i = 0, l = curves.length; i < l; i++) {
+ var loc = curves[i].getNearestLocation(point);
+ if (loc._distance < minDist) {
+ minDist = loc._distance;
+ minLoc = loc;
+ }
+ }
+ return minLoc;
+ },
+
+ getNearestPoint: function() {
+ return this.getNearestLocation.apply(this, arguments).getPoint();
+ }
+}), new function() {
+
+ function drawHandles(ctx, segments, matrix, size) {
+ var half = size / 2;
+
+ function drawHandle(index) {
+ var hX = coords[index],
+ hY = coords[index + 1];
+ if (pX != hX || pY != hY) {
+ ctx.beginPath();
+ ctx.moveTo(pX, pY);
+ ctx.lineTo(hX, hY);
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.arc(hX, hY, half, 0, Math.PI * 2, true);
+ ctx.fill();
+ }
+ }
+
+ var coords = new Array(6);
+ for (var i = 0, l = segments.length; i < l; i++) {
+ var segment = segments[i];
+ segment._transformCoordinates(matrix, coords, false);
+ var state = segment._selectionState,
+ pX = coords[0],
+ pY = coords[1];
+ if (state & 1)
+ drawHandle(2);
+ if (state & 2)
+ drawHandle(4);
+ ctx.fillRect(pX - half, pY - half, size, size);
+ if (!(state & 4)) {
+ var fillStyle = ctx.fillStyle;
+ ctx.fillStyle = '#ffffff';
+ ctx.fillRect(pX - half + 1, pY - half + 1, size - 2, size - 2);
+ ctx.fillStyle = fillStyle;
+ }
+ }
+ }
+
+ function drawSegments(ctx, path, matrix) {
+ var segments = path._segments,
+ length = segments.length,
+ coords = new Array(6),
+ first = true,
+ curX, curY,
+ prevX, prevY,
+ inX, inY,
+ outX, outY;
+
+ function drawSegment(segment) {
+ if (matrix) {
+ segment._transformCoordinates(matrix, coords, false);
+ curX = coords[0];
+ curY = coords[1];
+ } else {
+ var point = segment._point;
+ curX = point._x;
+ curY = point._y;
+ }
+ if (first) {
+ ctx.moveTo(curX, curY);
+ first = false;
+ } else {
+ if (matrix) {
+ inX = coords[2];
+ inY = coords[3];
+ } else {
+ var handle = segment._handleIn;
+ inX = curX + handle._x;
+ inY = curY + handle._y;
+ }
+ if (inX === curX && inY === curY
+ && outX === prevX && outY === prevY) {
+ ctx.lineTo(curX, curY);
+ } else {
+ ctx.bezierCurveTo(outX, outY, inX, inY, curX, curY);
+ }
+ }
+ prevX = curX;
+ prevY = curY;
+ if (matrix) {
+ outX = coords[4];
+ outY = coords[5];
+ } else {
+ var handle = segment._handleOut;
+ outX = prevX + handle._x;
+ outY = prevY + handle._y;
+ }
+ }
+
+ for (var i = 0; i < length; i++)
+ drawSegment(segments[i]);
+ if (path._closed && length > 0)
+ drawSegment(segments[0]);
+ }
+
+ return {
+ _draw: function(ctx, param, strokeMatrix) {
+ var dontStart = param.dontStart,
+ dontPaint = param.dontFinish || param.clip,
+ style = this.getStyle(),
+ hasFill = style.hasFill(),
+ hasStroke = style.hasStroke(),
+ dashArray = style.getDashArray(),
+ dashLength = !paper.support.nativeDash && hasStroke
+ && dashArray && dashArray.length;
+
+ if (!dontStart)
+ ctx.beginPath();
+
+ if (!dontStart && this._currentPath) {
+ ctx.currentPath = this._currentPath;
+ } else if (hasFill || hasStroke && !dashLength || dontPaint) {
+ drawSegments(ctx, this, strokeMatrix);
+ if (this._closed)
+ ctx.closePath();
+ if (!dontStart)
+ this._currentPath = ctx.currentPath;
+ }
+
+ function getOffset(i) {
+ return dashArray[((i % dashLength) + dashLength) % dashLength];
+ }
+
+ if (!dontPaint && (hasFill || hasStroke)) {
+ this._setStyles(ctx);
+ if (hasFill) {
+ ctx.fill(style.getWindingRule());
+ ctx.shadowColor = 'rgba(0,0,0,0)';
+ }
+ if (hasStroke) {
+ if (dashLength) {
+ if (!dontStart)
+ ctx.beginPath();
+ var iterator = new PathIterator(this, 32, 0.25,
+ strokeMatrix),
+ length = iterator.length,
+ from = -style.getDashOffset(), to,
+ i = 0;
+ from = from % length;
+ while (from > 0) {
+ from -= getOffset(i--) + getOffset(i--);
+ }
+ while (from < length) {
+ to = from + getOffset(i++);
+ if (from > 0 || to > 0)
+ iterator.drawPart(ctx,
+ Math.max(from, 0), Math.max(to, 0));
+ from = to + getOffset(i++);
+ }
+ }
+ ctx.stroke();
+ }
+ }
+ },
+
+ _drawSelected: function(ctx, matrix) {
+ ctx.beginPath();
+ drawSegments(ctx, this, matrix);
+ ctx.stroke();
+ drawHandles(ctx, this._segments, matrix, paper.settings.handleSize);
+ }
+ };
+}, new function() {
+
+ function getFirstControlPoints(rhs) {
+ var n = rhs.length,
+ x = [],
+ tmp = [],
+ b = 2;
+ x[0] = rhs[0] / b;
+ for (var i = 1; i < n; i++) {
+ tmp[i] = 1 / b;
+ b = (i < n - 1 ? 4 : 2) - tmp[i];
+ x[i] = (rhs[i] - x[i - 1]) / b;
+ }
+ for (var i = 1; i < n; i++) {
+ x[n - i - 1] -= tmp[n - i] * x[n - i];
+ }
+ return x;
+ }
+
+ return {
+ smooth: function() {
+ var segments = this._segments,
+ size = segments.length,
+ closed = this._closed,
+ n = size,
+ overlap = 0;
+ if (size <= 2)
+ return;
+ if (closed) {
+ overlap = Math.min(size, 4);
+ n += Math.min(size, overlap) * 2;
+ }
+ var knots = [];
+ for (var i = 0; i < size; i++)
+ knots[i + overlap] = segments[i]._point;
+ if (closed) {
+ for (var i = 0; i < overlap; i++) {
+ knots[i] = segments[i + size - overlap]._point;
+ knots[i + size + overlap] = segments[i]._point;
+ }
+ } else {
+ n--;
+ }
+ var rhs = [];
+
+ for (var i = 1; i < n - 1; i++)
+ rhs[i] = 4 * knots[i]._x + 2 * knots[i + 1]._x;
+ rhs[0] = knots[0]._x + 2 * knots[1]._x;
+ rhs[n - 1] = 3 * knots[n - 1]._x;
+ var x = getFirstControlPoints(rhs);
+
+ for (var i = 1; i < n - 1; i++)
+ rhs[i] = 4 * knots[i]._y + 2 * knots[i + 1]._y;
+ rhs[0] = knots[0]._y + 2 * knots[1]._y;
+ rhs[n - 1] = 3 * knots[n - 1]._y;
+ var y = getFirstControlPoints(rhs);
+
+ if (closed) {
+ for (var i = 0, j = size; i < overlap; i++, j++) {
+ var f1 = i / overlap,
+ f2 = 1 - f1,
+ ie = i + overlap,
+ je = j + overlap;
+ x[j] = x[i] * f1 + x[j] * f2;
+ y[j] = y[i] * f1 + y[j] * f2;
+ x[je] = x[ie] * f2 + x[je] * f1;
+ y[je] = y[ie] * f2 + y[je] * f1;
+ }
+ n--;
+ }
+ var handleIn = null;
+ for (var i = overlap; i <= n - overlap; i++) {
+ var segment = segments[i - overlap];
+ if (handleIn)
+ segment.setHandleIn(handleIn.subtract(segment._point));
+ if (i < n) {
+ segment.setHandleOut(
+ new Point(x[i], y[i]).subtract(segment._point));
+ handleIn = i < n - 1
+ ? new Point(
+ 2 * knots[i + 1]._x - x[i + 1],
+ 2 * knots[i + 1]._y - y[i + 1])
+ : new Point(
+ (knots[n]._x + x[n - 1]) / 2,
+ (knots[n]._y + y[n - 1]) / 2);
+ }
+ }
+ if (closed && handleIn) {
+ var segment = this._segments[0];
+ segment.setHandleIn(handleIn.subtract(segment._point));
+ }
+ }
+ };
+}, new function() {
+ function getCurrentSegment(that) {
+ var segments = that._segments;
+ if (segments.length === 0)
+ throw new Error('Use a moveTo() command first');
+ return segments[segments.length - 1];
+ }
+
+ return {
+ moveTo: function() {
+ var segments = this._segments;
+ if (segments.length === 1)
+ this.removeSegment(0);
+ if (!segments.length)
+ this._add([ new Segment(Point.read(arguments)) ]);
+ },
+
+ moveBy: function() {
+ throw new Error('moveBy() is unsupported on Path items.');
+ },
+
+ lineTo: function() {
+ this._add([ new Segment(Point.read(arguments)) ]);
+ },
+
+ cubicCurveTo: function() {
+ var handle1 = Point.read(arguments),
+ handle2 = Point.read(arguments),
+ to = Point.read(arguments),
+ current = getCurrentSegment(this);
+ current.setHandleOut(handle1.subtract(current._point));
+ this._add([ new Segment(to, handle2.subtract(to)) ]);
+ },
+
+ quadraticCurveTo: function() {
+ var handle = Point.read(arguments),
+ to = Point.read(arguments),
+ current = getCurrentSegment(this)._point;
+ this.cubicCurveTo(
+ handle.add(current.subtract(handle).multiply(1 / 3)),
+ handle.add(to.subtract(handle).multiply(1 / 3)),
+ to
+ );
+ },
+
+ curveTo: function() {
+ var through = Point.read(arguments),
+ to = Point.read(arguments),
+ t = Base.pick(Base.read(arguments), 0.5),
+ t1 = 1 - t,
+ current = getCurrentSegment(this)._point,
+ handle = through.subtract(current.multiply(t1 * t1))
+ .subtract(to.multiply(t * t)).divide(2 * t * t1);
+ if (handle.isNaN())
+ throw new Error(
+ 'Cannot put a curve through points with parameter = ' + t);
+ this.quadraticCurveTo(handle, to);
+ },
+
+ arcTo: function() {
+ var current = getCurrentSegment(this),
+ from = current._point,
+ to = Point.read(arguments),
+ through,
+ peek = Base.peek(arguments),
+ clockwise = Base.pick(peek, true),
+ center, extent, vector, matrix;
+ if (typeof clockwise === 'boolean') {
+ var middle = from.add(to).divide(2),
+ through = middle.add(middle.subtract(from).rotate(
+ clockwise ? -90 : 90));
+ } else if (Base.remain(arguments) <= 2) {
+ through = to;
+ to = Point.read(arguments);
+ } else {
+ var radius = Size.read(arguments);
+ if (radius.isZero())
+ return this.lineTo(to);
+ var rotation = Base.read(arguments),
+ clockwise = !!Base.read(arguments),
+ large = !!Base.read(arguments),
+ middle = from.add(to).divide(2),
+ pt = from.subtract(middle).rotate(-rotation),
+ x = pt.x,
+ y = pt.y,
+ abs = Math.abs,
+ epsilon = 1e-12,
+ rx = abs(radius.width),
+ ry = abs(radius.height),
+ rxSq = rx * rx,
+ rySq = ry * ry,
+ xSq = x * x,
+ ySq = y * y;
+ var factor = Math.sqrt(xSq / rxSq + ySq / rySq);
+ if (factor > 1) {
+ rx *= factor;
+ ry *= factor;
+ rxSq = rx * rx;
+ rySq = ry * ry;
+ }
+ factor = (rxSq * rySq - rxSq * ySq - rySq * xSq) /
+ (rxSq * ySq + rySq * xSq);
+ if (abs(factor) < epsilon)
+ factor = 0;
+ if (factor < 0)
+ throw new Error(
+ 'Cannot create an arc with the given arguments');
+ center = new Point(rx * y / ry, -ry * x / rx)
+ .multiply((large === clockwise ? -1 : 1)
+ * Math.sqrt(factor))
+ .rotate(rotation).add(middle);
+ matrix = new Matrix().translate(center).rotate(rotation)
+ .scale(rx, ry);
+ vector = matrix._inverseTransform(from);
+ extent = vector.getDirectedAngle(matrix._inverseTransform(to));
+ if (!clockwise && extent > 0)
+ extent -= 360;
+ else if (clockwise && extent < 0)
+ extent += 360;
+ }
+ if (through) {
+ var l1 = new Line(from.add(through).divide(2),
+ through.subtract(from).rotate(90), true),
+ l2 = new Line(through.add(to).divide(2),
+ to.subtract(through).rotate(90), true),
+ line = new Line(from, to),
+ throughSide = line.getSide(through);
+ center = l1.intersect(l2, true);
+ if (!center) {
+ if (!throughSide)
+ return this.lineTo(to);
+ throw new Error(
+ 'Cannot create an arc with the given arguments');
+ }
+ vector = from.subtract(center);
+ extent = vector.getDirectedAngle(to.subtract(center));
+ var centerSide = line.getSide(center);
+ if (centerSide === 0) {
+ extent = throughSide * Math.abs(extent);
+ } else if (throughSide === centerSide) {
+ extent += extent < 0 ? 360 : -360;
+ }
+ }
+ var ext = Math.abs(extent),
+ count = ext >= 360 ? 4 : Math.ceil(ext / 90),
+ inc = extent / count,
+ half = inc * Math.PI / 360,
+ z = 4 / 3 * Math.sin(half) / (1 + Math.cos(half)),
+ segments = [];
+ for (var i = 0; i <= count; i++) {
+ var pt = to,
+ out = null;
+ if (i < count) {
+ out = vector.rotate(90).multiply(z);
+ if (matrix) {
+ pt = matrix._transformPoint(vector);
+ out = matrix._transformPoint(vector.add(out))
+ .subtract(pt);
+ } else {
+ pt = center.add(vector);
+ }
+ }
+ if (i === 0) {
+ current.setHandleOut(out);
+ } else {
+ var _in = vector.rotate(-90).multiply(z);
+ if (matrix) {
+ _in = matrix._transformPoint(vector.add(_in))
+ .subtract(pt);
+ }
+ segments.push(new Segment(pt, _in, out));
+ }
+ vector = vector.rotate(inc);
+ }
+ this._add(segments);
+ },
+
+ lineBy: function() {
+ var to = Point.read(arguments),
+ current = getCurrentSegment(this)._point;
+ this.lineTo(current.add(to));
+ },
+
+ curveBy: function() {
+ var through = Point.read(arguments),
+ to = Point.read(arguments),
+ parameter = Base.read(arguments),
+ current = getCurrentSegment(this)._point;
+ this.curveTo(current.add(through), current.add(to), parameter);
+ },
+
+ cubicCurveBy: function() {
+ var handle1 = Point.read(arguments),
+ handle2 = Point.read(arguments),
+ to = Point.read(arguments),
+ current = getCurrentSegment(this)._point;
+ this.cubicCurveTo(current.add(handle1), current.add(handle2),
+ current.add(to));
+ },
+
+ quadraticCurveBy: function() {
+ var handle = Point.read(arguments),
+ to = Point.read(arguments),
+ current = getCurrentSegment(this)._point;
+ this.quadraticCurveTo(current.add(handle), current.add(to));
+ },
+
+ arcBy: function() {
+ var current = getCurrentSegment(this)._point,
+ point = current.add(Point.read(arguments)),
+ clockwise = Base.pick(Base.peek(arguments), true);
+ if (typeof clockwise === 'boolean') {
+ this.arcTo(point, clockwise);
+ } else {
+ this.arcTo(point, current.add(Point.read(arguments)));
+ }
+ },
+
+ closePath: function(join) {
+ this.setClosed(true);
+ if (join)
+ this.join();
+ }
+ };
+}, {
+
+ _getBounds: function(getter, matrix) {
+ return Path[getter](this._segments, this._closed, this.getStyle(),
+ matrix);
+ },
+
+statics: {
+ isClockwise: function(segments) {
+ var sum = 0;
+ for (var i = 0, l = segments.length; i < l; i++)
+ sum += Curve.getEdgeSum(Curve.getValues(
+ segments[i], segments[i + 1 < l ? i + 1 : 0]));
+ return sum > 0;
+ },
+
+ getBounds: function(segments, closed, style, matrix, strokePadding) {
+ var first = segments[0];
+ if (!first)
+ return new Rectangle();
+ var coords = new Array(6),
+ prevCoords = first._transformCoordinates(matrix, new Array(6), false),
+ min = prevCoords.slice(0, 2),
+ max = min.slice(),
+ roots = new Array(2);
+
+ function processSegment(segment) {
+ segment._transformCoordinates(matrix, coords, false);
+ for (var i = 0; i < 2; i++) {
+ Curve._addBounds(
+ prevCoords[i],
+ prevCoords[i + 4],
+ coords[i + 2],
+ coords[i],
+ i, strokePadding ? strokePadding[i] : 0, min, max, roots);
+ }
+ var tmp = prevCoords;
+ prevCoords = coords;
+ coords = tmp;
+ }
+
+ for (var i = 1, l = segments.length; i < l; i++)
+ processSegment(segments[i]);
+ if (closed)
+ processSegment(first);
+ return new Rectangle(min[0], min[1], max[0] - min[0], max[1] - min[1]);
+ },
+
+ getStrokeBounds: function(segments, closed, style, matrix) {
+ if (!style.hasStroke())
+ return Path.getBounds(segments, closed, style, matrix);
+ var length = segments.length - (closed ? 0 : 1),
+ radius = style.getStrokeWidth() / 2,
+ padding = Path._getPenPadding(radius, matrix),
+ bounds = Path.getBounds(segments, closed, style, matrix, padding),
+ join = style.getStrokeJoin(),
+ cap = style.getStrokeCap(),
+ miterLimit = radius * style.getMiterLimit();
+ var joinBounds = new Rectangle(new Size(padding).multiply(2));
+
+ function add(point) {
+ bounds = bounds.include(matrix
+ ? matrix._transformPoint(point, point) : point);
+ }
+
+ function addRound(segment) {
+ bounds = bounds.unite(joinBounds.setCenter(matrix
+ ? matrix._transformPoint(segment._point) : segment._point));
+ }
+
+ function addJoin(segment, join) {
+ var handleIn = segment._handleIn,
+ handleOut = segment._handleOut;
+ if (join === 'round' || !handleIn.isZero() && !handleOut.isZero()
+ && handleIn.isColinear(handleOut)) {
+ addRound(segment);
+ } else {
+ Path._addBevelJoin(segment, join, radius, miterLimit, add);
+ }
+ }
+
+ function addCap(segment, cap) {
+ if (cap === 'round') {
+ addRound(segment);
+ } else {
+ Path._addSquareCap(segment, cap, radius, add);
+ }
+ }
+
+ for (var i = 1; i < length; i++)
+ addJoin(segments[i], join);
+ if (closed) {
+ addJoin(segments[0], join);
+ } else if (length > 0) {
+ addCap(segments[0], cap);
+ addCap(segments[segments.length - 1], cap);
+ }
+ return bounds;
+ },
+
+ _getPenPadding: function(radius, matrix) {
+ if (!matrix)
+ return [radius, radius];
+ var mx = matrix.shiftless(),
+ hor = mx.transform(new Point(radius, 0)),
+ ver = mx.transform(new Point(0, radius)),
+ phi = hor.getAngleInRadians(),
+ a = hor.getLength(),
+ b = ver.getLength();
+ var sin = Math.sin(phi),
+ cos = Math.cos(phi),
+ tan = Math.tan(phi),
+ tx = -Math.atan(b * tan / a),
+ ty = Math.atan(b / (tan * a));
+ return [Math.abs(a * Math.cos(tx) * cos - b * Math.sin(tx) * sin),
+ Math.abs(b * Math.sin(ty) * cos + a * Math.cos(ty) * sin)];
+ },
+
+ _addBevelJoin: function(segment, join, radius, miterLimit, addPoint, area) {
+ var curve2 = segment.getCurve(),
+ curve1 = curve2.getPrevious(),
+ point = curve2.getPointAt(0, true),
+ normal1 = curve1.getNormalAt(1, true),
+ normal2 = curve2.getNormalAt(0, true),
+ step = normal1.getDirectedAngle(normal2) < 0 ? -radius : radius;
+ normal1.setLength(step);
+ normal2.setLength(step);
+ if (area) {
+ addPoint(point);
+ addPoint(point.add(normal1));
+ }
+ if (join === 'miter') {
+ var corner = new Line(
+ point.add(normal1),
+ new Point(-normal1.y, normal1.x), true
+ ).intersect(new Line(
+ point.add(normal2),
+ new Point(-normal2.y, normal2.x), true
+ ), true);
+ if (corner && point.getDistance(corner) <= miterLimit) {
+ addPoint(corner);
+ if (!area)
+ return;
+ }
+ }
+ if (!area)
+ addPoint(point.add(normal1));
+ addPoint(point.add(normal2));
+ },
+
+ _addSquareCap: function(segment, cap, radius, addPoint, area) {
+ var point = segment._point,
+ loc = segment.getLocation(),
+ normal = loc.getNormal().normalize(radius);
+ if (area) {
+ addPoint(point.subtract(normal));
+ addPoint(point.add(normal));
+ }
+ if (cap === 'square')
+ point = point.add(normal.rotate(loc.getParameter() === 0 ? -90 : 90));
+ addPoint(point.add(normal));
+ addPoint(point.subtract(normal));
+ },
+
+ getHandleBounds: function(segments, closed, style, matrix, strokePadding,
+ joinPadding) {
+ var coords = new Array(6),
+ x1 = Infinity,
+ x2 = -x1,
+ y1 = x1,
+ y2 = x2;
+ for (var i = 0, l = segments.length; i < l; i++) {
+ var segment = segments[i];
+ segment._transformCoordinates(matrix, coords, false);
+ for (var j = 0; j < 6; j += 2) {
+ var padding = j === 0 ? joinPadding : strokePadding,
+ paddingX = padding ? padding[0] : 0,
+ paddingY = padding ? padding[1] : 0,
+ x = coords[j],
+ y = coords[j + 1],
+ xn = x - paddingX,
+ xx = x + paddingX,
+ yn = y - paddingY,
+ yx = y + paddingY;
+ if (xn < x1) x1 = xn;
+ if (xx > x2) x2 = xx;
+ if (yn < y1) y1 = yn;
+ if (yx > y2) y2 = yx;
+ }
+ }
+ return new Rectangle(x1, y1, x2 - x1, y2 - y1);
+ },
+
+ getRoughBounds: function(segments, closed, style, matrix) {
+ var strokeRadius = style.hasStroke() ? style.getStrokeWidth() / 2 : 0,
+ joinRadius = strokeRadius;
+ if (strokeRadius > 0) {
+ if (style.getStrokeJoin() === 'miter')
+ joinRadius = strokeRadius * style.getMiterLimit();
+ if (style.getStrokeCap() === 'square')
+ joinRadius = Math.max(joinRadius, strokeRadius * Math.sqrt(2));
+ }
+ return Path.getHandleBounds(segments, closed, style, matrix,
+ Path._getPenPadding(strokeRadius, matrix),
+ Path._getPenPadding(joinRadius, matrix));
+ }
+}});
+
+Path.inject({ statics: new function() {
+
+ var kappa = 0.5522847498307936,
+ ellipseSegments = [
+ new Segment([-1, 0], [0, kappa ], [0, -kappa]),
+ new Segment([0, -1], [-kappa, 0], [kappa, 0 ]),
+ new Segment([1, 0], [0, -kappa], [0, kappa ]),
+ new Segment([0, 1], [kappa, 0 ], [-kappa, 0])
+ ];
+
+ function createPath(segments, closed, args) {
+ var props = Base.getNamed(args),
+ path = new Path(props && props.insert === false && Item.NO_INSERT);
+ path._add(segments);
+ path._closed = closed;
+ return path.set(props);
+ }
+
+ function createEllipse(center, radius, args) {
+ var segments = new Array(4);
+ for (var i = 0; i < 4; i++) {
+ var segment = ellipseSegments[i];
+ segments[i] = new Segment(
+ segment._point.multiply(radius).add(center),
+ segment._handleIn.multiply(radius),
+ segment._handleOut.multiply(radius)
+ );
+ }
+ return createPath(segments, true, args);
+ }
+
+ return {
+ Line: function() {
+ return createPath([
+ new Segment(Point.readNamed(arguments, 'from')),
+ new Segment(Point.readNamed(arguments, 'to'))
+ ], false, arguments);
+ },
+
+ Circle: function() {
+ var center = Point.readNamed(arguments, 'center'),
+ radius = Base.readNamed(arguments, 'radius');
+ return createEllipse(center, new Size(radius), arguments);
+ },
+
+ Rectangle: function() {
+ var rect = Rectangle.readNamed(arguments, 'rectangle'),
+ radius = Size.readNamed(arguments, 'radius', 0,
+ { readNull: true }),
+ bl = rect.getBottomLeft(true),
+ tl = rect.getTopLeft(true),
+ tr = rect.getTopRight(true),
+ br = rect.getBottomRight(true),
+ segments;
+ if (!radius || radius.isZero()) {
+ segments = [
+ new Segment(bl),
+ new Segment(tl),
+ new Segment(tr),
+ new Segment(br)
+ ];
+ } else {
+ radius = Size.min(radius, rect.getSize(true).divide(2));
+ var rx = radius.width,
+ ry = radius.height,
+ hx = rx * kappa,
+ hy = ry * kappa;
+ segments = [
+ new Segment(bl.add(rx, 0), null, [-hx, 0]),
+ new Segment(bl.subtract(0, ry), [0, hy]),
+ new Segment(tl.add(0, ry), null, [0, -hy]),
+ new Segment(tl.add(rx, 0), [-hx, 0], null),
+ new Segment(tr.subtract(rx, 0), null, [hx, 0]),
+ new Segment(tr.add(0, ry), [0, -hy], null),
+ new Segment(br.subtract(0, ry), null, [0, hy]),
+ new Segment(br.subtract(rx, 0), [hx, 0])
+ ];
+ }
+ return createPath(segments, true, arguments);
+ },
+
+ RoundRectangle: '#Rectangle',
+
+ Ellipse: function() {
+ var ellipse = Shape._readEllipse(arguments);
+ return createEllipse(ellipse.center, ellipse.radius, arguments);
+ },
+
+ Oval: '#Ellipse',
+
+ Arc: function() {
+ var from = Point.readNamed(arguments, 'from'),
+ through = Point.readNamed(arguments, 'through'),
+ to = Point.readNamed(arguments, 'to'),
+ props = Base.getNamed(arguments),
+ path = new Path(props && props.insert === false
+ && Item.NO_INSERT);
+ path.moveTo(from);
+ path.arcTo(through, to);
+ return path.set(props);
+ },
+
+ RegularPolygon: function() {
+ var center = Point.readNamed(arguments, 'center'),
+ sides = Base.readNamed(arguments, 'sides'),
+ radius = Base.readNamed(arguments, 'radius'),
+ step = 360 / sides,
+ three = !(sides % 3),
+ vector = new Point(0, three ? -radius : radius),
+ offset = three ? -1 : 0.5,
+ segments = new Array(sides);
+ for (var i = 0; i < sides; i++)
+ segments[i] = new Segment(center.add(
+ vector.rotate((i + offset) * step)));
+ return createPath(segments, true, arguments);
+ },
+
+ Star: function() {
+ var center = Point.readNamed(arguments, 'center'),
+ points = Base.readNamed(arguments, 'points') * 2,
+ radius1 = Base.readNamed(arguments, 'radius1'),
+ radius2 = Base.readNamed(arguments, 'radius2'),
+ step = 360 / points,
+ vector = new Point(0, -1),
+ segments = new Array(points);
+ for (var i = 0; i < points; i++)
+ segments[i] = new Segment(center.add(vector.rotate(step * i)
+ .multiply(i % 2 ? radius2 : radius1)));
+ return createPath(segments, true, arguments);
+ }
+ };
+}});
+
+var CompoundPath = PathItem.extend({
+ _class: 'CompoundPath',
+ _serializeFields: {
+ children: []
+ },
+
+ initialize: function CompoundPath(arg) {
+ this._children = [];
+ this._namedChildren = {};
+ if (!this._initialize(arg)) {
+ if (typeof arg === 'string') {
+ this.setPathData(arg);
+ } else {
+ this.addChildren(Array.isArray(arg) ? arg : arguments);
+ }
+ }
+ },
+
+ insertChildren: function insertChildren(index, items, _preserve) {
+ items = insertChildren.base.call(this, index, items, _preserve, Path);
+ for (var i = 0, l = !_preserve && items && items.length; i < l; i++) {
+ var item = items[i];
+ if (item._clockwise === undefined)
+ item.setClockwise(item._index === 0);
+ }
+ return items;
+ },
+
+ reverse: function() {
+ var children = this._children;
+ for (var i = 0, l = children.length; i < l; i++)
+ children[i].reverse();
+ },
+
+ smooth: function() {
+ for (var i = 0, l = this._children.length; i < l; i++)
+ this._children[i].smooth();
+ },
+
+ reduce: function reduce() {
+ if (this._children.length === 0) {
+ var path = new Path(Item.NO_INSERT);
+ path.insertAbove(this);
+ path.setStyle(this._style);
+ this.remove();
+ return path;
+ } else {
+ return reduce.base.call(this);
+ }
+ },
+
+ isClockwise: function() {
+ var child = this.getFirstChild();
+ return child && child.isClockwise();
+ },
+
+ setClockwise: function(clockwise) {
+ if (this.isClockwise() !== !!clockwise)
+ this.reverse();
+ },
+
+ getFirstSegment: function() {
+ var first = this.getFirstChild();
+ return first && first.getFirstSegment();
+ },
+
+ getLastSegment: function() {
+ var last = this.getLastChild();
+ return last && last.getLastSegment();
+ },
+
+ getCurves: function() {
+ var children = this._children,
+ curves = [];
+ for (var i = 0, l = children.length; i < l; i++)
+ curves.push.apply(curves, children[i].getCurves());
+ return curves;
+ },
+
+ getFirstCurve: function() {
+ var first = this.getFirstChild();
+ return first && first.getFirstCurve();
+ },
+
+ getLastCurve: function() {
+ var last = this.getLastChild();
+ return last && last.getFirstCurve();
+ },
+
+ getArea: function() {
+ var children = this._children,
+ area = 0;
+ for (var i = 0, l = children.length; i < l; i++)
+ area += children[i].getArea();
+ return area;
+ }
+}, {
+ beans: true,
+
+ getPathData: function(_matrix, _precision) {
+ var children = this._children,
+ paths = [];
+ for (var i = 0, l = children.length; i < l; i++) {
+ var child = children[i],
+ mx = child._matrix;
+ paths.push(child.getPathData(_matrix && !mx.isIdentity()
+ ? _matrix.chain(mx) : mx, _precision));
+ }
+ return paths.join(' ');
+ }
+}, {
+ _getChildHitTestOptions: function(options) {
+ return options.class === Path || options.type === 'path'
+ ? options
+ : new Base(options, { fill: false });
+ },
+
+ _draw: function(ctx, param, strokeMatrix) {
+ var children = this._children;
+ if (children.length === 0)
+ return;
+
+ if (this._currentPath) {
+ ctx.currentPath = this._currentPath;
+ } else {
+ param = param.extend({ dontStart: true, dontFinish: true });
+ ctx.beginPath();
+ for (var i = 0, l = children.length; i < l; i++)
+ children[i].draw(ctx, param, strokeMatrix);
+ this._currentPath = ctx.currentPath;
+ }
+
+ if (!param.clip) {
+ this._setStyles(ctx);
+ var style = this._style;
+ if (style.hasFill()) {
+ ctx.fill(style.getWindingRule());
+ ctx.shadowColor = 'rgba(0,0,0,0)';
+ }
+ if (style.hasStroke())
+ ctx.stroke();
+ }
+ },
+
+ _drawSelected: function(ctx, matrix, selectedItems) {
+ var children = this._children;
+ for (var i = 0, l = children.length; i < l; i++) {
+ var child = children[i],
+ mx = child._matrix;
+ if (!selectedItems[child._id])
+ child._drawSelected(ctx, mx.isIdentity() ? matrix
+ : matrix.chain(mx));
+ }
+ }
+}, new function() {
+ function getCurrentPath(that, check) {
+ var children = that._children;
+ if (check && children.length === 0)
+ throw new Error('Use a moveTo() command first');
+ return children[children.length - 1];
+ }
+
+ var fields = {
+ moveTo: function() {
+ var current = getCurrentPath(this),
+ path = current && current.isEmpty() ? current : new Path();
+ if (path !== current)
+ this.addChild(path);
+ path.moveTo.apply(path, arguments);
+ },
+
+ moveBy: function() {
+ var current = getCurrentPath(this, true),
+ last = current && current.getLastSegment(),
+ point = Point.read(arguments);
+ this.moveTo(last ? point.add(last._point) : point);
+ },
+
+ closePath: function(join) {
+ getCurrentPath(this, true).closePath(join);
+ }
+ };
+
+ Base.each(['lineTo', 'cubicCurveTo', 'quadraticCurveTo', 'curveTo', 'arcTo',
+ 'lineBy', 'cubicCurveBy', 'quadraticCurveBy', 'curveBy', 'arcBy'],
+ function(key) {
+ fields[key] = function() {
+ var path = getCurrentPath(this, true);
+ path[key].apply(path, arguments);
+ };
+ }
+ );
+
+ return fields;
+});
+
+PathItem.inject(new function() {
+ var operators = {
+ unite: function(w) {
+ return w === 1 || w === 0;
+ },
+
+ intersect: function(w) {
+ return w === 2;
+ },
+
+ subtract: function(w) {
+ return w === 1;
+ },
+
+ exclude: function(w) {
+ return w === 1;
+ }
+ };
+
+ function computeBoolean(path1, path2, operation) {
+ var operator = operators[operation];
+ function preparePath(path) {
+ return path.clone(false).reduce().reorient().transform(null, true,
+ true);
+ }
+
+ var _path1 = preparePath(path1),
+ _path2 = path2 && path1 !== path2 && preparePath(path2);
+ if (_path2 && /^(subtract|exclude)$/.test(operation)
+ ^ (_path2.isClockwise() !== _path1.isClockwise()))
+ _path2.reverse();
+ splitPath(_path1.getIntersections(_path2, null, true));
+
+ var chain = [],
+ segments = [],
+ monoCurves = [],
+ tolerance = 0.000001;
+
+ function collect(paths) {
+ for (var i = 0, l = paths.length; i < l; i++) {
+ var path = paths[i];
+ segments.push.apply(segments, path._segments);
+ monoCurves.push.apply(monoCurves, path._getMonoCurves());
+ }
+ }
+
+ collect(_path1._children || [_path1]);
+ if (_path2)
+ collect(_path2._children || [_path2]);
+ segments.sort(function(a, b) {
+ var _a = a._intersection,
+ _b = b._intersection;
+ return !_a && !_b || _a && _b ? 0 : _a ? -1 : 1;
+ });
+ for (var i = 0, l = segments.length; i < l; i++) {
+ var segment = segments[i];
+ if (segment._winding != null)
+ continue;
+ chain.length = 0;
+ var startSeg = segment,
+ totalLength = 0,
+ windingSum = 0;
+ do {
+ var length = segment.getCurve().getLength();
+ chain.push({ segment: segment, length: length });
+ totalLength += length;
+ segment = segment.getNext();
+ } while (segment && !segment._intersection && segment !== startSeg);
+ for (var j = 0; j < 3; j++) {
+ var length = totalLength * (j + 1) / 4;
+ for (k = 0, m = chain.length; k < m; k++) {
+ var node = chain[k],
+ curveLength = node.length;
+ if (length <= curveLength) {
+ if (length <= tolerance
+ || curveLength - length <= tolerance)
+ length = curveLength / 2;
+ var curve = node.segment.getCurve(),
+ pt = curve.getPointAt(length),
+ hor = curve.isLinear() && Math.abs(curve
+ .getTangentAt(0.5, true).y) <= tolerance,
+ path = curve._path;
+ if (path._parent instanceof CompoundPath)
+ path = path._parent;
+ windingSum += operation === 'subtract' && _path2
+ && (path === _path1 && _path2._getWinding(pt, hor)
+ || path === _path2 && !_path1._getWinding(pt, hor))
+ ? 0
+ : getWinding(pt, monoCurves, hor);
+ break;
+ }
+ length -= curveLength;
+ }
+ }
+ var winding = Math.round(windingSum / 3);
+ for (var j = chain.length - 1; j >= 0; j--)
+ chain[j].segment._winding = winding;
+ }
+ var result = new CompoundPath(Item.NO_INSERT);
+ result.insertAbove(path1);
+ result.addChildren(tracePaths(segments, operator), true);
+ result = result.reduce();
+ result.setStyle(path1._style);
+ return result;
+ }
+
+ function splitPath(intersections) {
+ var tMin = 0.000001,
+ tMax = 1 - tMin,
+ linearHandles;
+
+ function resetLinear() {
+ for (var i = 0, l = linearHandles.length; i < l; i++)
+ linearHandles[i].set(0, 0);
+ }
+
+ for (var i = intersections.length - 1, curve, prev; i >= 0; i--) {
+ var loc = intersections[i],
+ t = loc._parameter;
+ if (prev && prev._curve === loc._curve && prev._parameter > 0) {
+ t /= prev._parameter;
+ } else {
+ curve = loc._curve;
+ if (linearHandles)
+ resetLinear();
+ linearHandles = curve.isLinear() ? [
+ curve._segment1._handleOut,
+ curve._segment2._handleIn
+ ] : null;
+ }
+ var newCurve,
+ segment;
+ if (newCurve = curve.divide(t, true, true)) {
+ segment = newCurve._segment1;
+ curve = newCurve.getPrevious();
+ if (linearHandles)
+ linearHandles.push(segment._handleOut, segment._handleIn);
+ } else {
+ segment = t < tMin
+ ? curve._segment1
+ : t > tMax
+ ? curve._segment2
+ : curve.getPartLength(0, t) < curve.getPartLength(t, 1)
+ ? curve._segment1
+ : curve._segment2;
+ }
+ segment._intersection = loc.getIntersection();
+ loc._segment = segment;
+ prev = loc;
+ }
+ if (linearHandles)
+ resetLinear();
+ }
+
+ function getWinding(point, curves, horizontal, testContains) {
+ var tolerance = 0.000001,
+ tMin = tolerance,
+ tMax = 1 - tMin,
+ px = point.x,
+ py = point.y,
+ windLeft = 0,
+ windRight = 0,
+ roots = [],
+ abs = Math.abs;
+ if (horizontal) {
+ var yTop = -Infinity,
+ yBottom = Infinity,
+ yBefore = py - tolerance,
+ yAfter = py + tolerance;
+ for (var i = 0, l = curves.length; i < l; i++) {
+ var values = curves[i].values;
+ if (Curve.solveCubic(values, 0, px, roots, 0, 1) > 0) {
+ for (var j = roots.length - 1; j >= 0; j--) {
+ var y = Curve.evaluate(values, roots[j], 0).y;
+ if (y < yBefore && y > yTop) {
+ yTop = y;
+ } else if (y > yAfter && y < yBottom) {
+ yBottom = y;
+ }
+ }
+ }
+ }
+ yTop = (yTop + py) / 2;
+ yBottom = (yBottom + py) / 2;
+ if (yTop > -Infinity)
+ windLeft = getWinding(new Point(px, yTop), curves);
+ if (yBottom < Infinity)
+ windRight = getWinding(new Point(px, yBottom), curves);
+ } else {
+ var xBefore = px - tolerance,
+ xAfter = px + tolerance;
+ for (var i = 0, l = curves.length; i < l; i++) {
+ var curve = curves[i],
+ values = curve.values,
+ winding = curve.winding,
+ prevT,
+ prevX;
+ if (winding && (winding === 1
+ && py >= values[1] && py <= values[7]
+ || py >= values[7] && py <= values[1])
+ && Curve.solveCubic(values, 1, py, roots, 0, 1) === 1) {
+ var t = roots[0],
+ x = Curve.evaluate(values, t, 0).x,
+ slope = Curve.evaluate(values, t, 1).y;
+ if (!(t > tMax
+ && (i === l - 1 || curve.next !== curves[i + 1])
+ && abs(Curve.evaluate(curve.next.values, 0, 0).x -x)
+ <= tolerance
+ || i > 0 && curve.previous === curves[i - 1]
+ && abs(prevX - x) < tolerance
+ && prevT > tMax && t < tMin)) {
+ if (Numerical.isZero(slope) && !Curve.isLinear(values)
+ || t < tMin && slope * Curve.evaluate(
+ curve.previous.values, 1, 1).y < 0
+ || t > tMax && slope * Curve.evaluate(
+ curve.next.values, 0, 1).y < 0) {
+ if (testContains && x >= xBefore && x <= xAfter) {
+ ++windLeft;
+ ++windRight;
+ }
+ } else if (x <= xBefore) {
+ windLeft += winding;
+ } else if (x >= xAfter) {
+ windRight += winding;
+ }
+ }
+ prevT = t;
+ prevX = x;
+ }
+ }
+ }
+ return Math.max(abs(windLeft), abs(windRight));
+ }
+
+ function tracePaths(segments, operator, selfOp) {
+ var paths = [],
+ tMin = 0.000001,
+ tMax = 1 - tMin;
+ for (var i = 0, seg, startSeg, l = segments.length; i < l; i++) {
+ seg = startSeg = segments[i];
+ if (seg._visited || !operator(seg._winding))
+ continue;
+ var path = new Path(Item.NO_INSERT),
+ inter = seg._intersection,
+ startInterSeg = inter && inter._segment,
+ added = false,
+ dir = 1;
+ do {
+ var handleIn = dir > 0 ? seg._handleIn : seg._handleOut,
+ handleOut = dir > 0 ? seg._handleOut : seg._handleIn,
+ interSeg;
+ if (added && (!operator(seg._winding) || selfOp)
+ && (inter = seg._intersection)
+ && (interSeg = inter._segment)
+ && interSeg !== startSeg) {
+ if (selfOp) {
+ seg._visited = interSeg._visited;
+ seg = interSeg;
+ dir = 1;
+ } else {
+ var c1 = seg.getCurve();
+ if (dir > 0)
+ c1 = c1.getPrevious();
+ var t1 = c1.getTangentAt(dir < 1 ? tMin : tMax, true),
+ c4 = interSeg.getCurve(),
+ c3 = c4.getPrevious(),
+ t3 = c3.getTangentAt(tMax, true),
+ t4 = c4.getTangentAt(tMin, true),
+ w3 = t1.cross(t3),
+ w4 = t1.cross(t4);
+ if (w3 * w4 !== 0) {
+ var curve = w3 < w4 ? c3 : c4,
+ nextCurve = operator(curve._segment1._winding)
+ ? curve
+ : w3 < w4 ? c4 : c3,
+ nextSeg = nextCurve._segment1;
+ dir = nextCurve === c3 ? -1 : 1;
+ if (nextSeg._visited && seg._path !== nextSeg._path
+ || !operator(nextSeg._winding)) {
+ dir = 1;
+ } else {
+ seg._visited = interSeg._visited;
+ seg = interSeg;
+ if (nextSeg._visited)
+ dir = 1;
+ }
+ } else {
+ dir = 1;
+ }
+ }
+ handleOut = dir > 0 ? seg._handleOut : seg._handleIn;
+ }
+ path.add(new Segment(seg._point, added && handleIn, handleOut));
+ added = true;
+ seg._visited = true;
+ seg = dir > 0 ? seg.getNext() : seg. getPrevious();
+ } while (seg && !seg._visited
+ && seg !== startSeg && seg !== startInterSeg
+ && (seg._intersection || operator(seg._winding)));
+ if (seg && (seg === startSeg || seg === startInterSeg)) {
+ path.firstSegment.setHandleIn((seg === startInterSeg
+ ? startInterSeg : seg)._handleIn);
+ path.setClosed(true);
+ } else {
+ path.lastSegment._handleOut.set(0, 0);
+ }
+ if (path._segments.length >
+ (path._closed ? path.isPolygon() ? 2 : 0 : 1))
+ paths.push(path);
+ }
+ return paths;
+ }
+
+ return {
+ _getWinding: function(point, horizontal, testContains) {
+ return getWinding(point, this._getMonoCurves(),
+ horizontal, testContains);
+ },
+
+ unite: function(path) {
+ return computeBoolean(this, path, 'unite');
+ },
+
+ intersect: function(path) {
+ return computeBoolean(this, path, 'intersect');
+ },
+
+ subtract: function(path) {
+ return computeBoolean(this, path, 'subtract');
+ },
+
+ exclude: function(path) {
+ return computeBoolean(this, path, 'exclude');
+ },
+
+ divide: function(path) {
+ return new Group([this.subtract(path), this.intersect(path)]);
+ }
+ };
+});
+
+Path.inject({
+ _getMonoCurves: function() {
+ var monoCurves = this._monoCurves,
+ prevCurve;
+
+ function insertCurve(v) {
+ var y0 = v[1],
+ y1 = v[7],
+ curve = {
+ values: v,
+ winding: y0 === y1
+ ? 0
+ : y0 > y1
+ ? -1
+ : 1,
+ previous: prevCurve,
+ next: null
+ };
+ if (prevCurve)
+ prevCurve.next = curve;
+ monoCurves.push(curve);
+ prevCurve = curve;
+ }
+
+ function handleCurve(v) {
+ if (Curve.getLength(v) === 0)
+ return;
+ var y0 = v[1],
+ y1 = v[3],
+ y2 = v[5],
+ y3 = v[7];
+ if (Curve.isLinear(v)) {
+ insertCurve(v);
+ } else {
+ var a = 3 * (y1 - y2) - y0 + y3,
+ b = 2 * (y0 + y2) - 4 * y1,
+ c = y1 - y0,
+ tolerance = 0.000001,
+ roots = [];
+ var count = Numerical.solveQuadratic(a, b, c, roots, tolerance,
+ 1 - tolerance);
+ if (count === 0) {
+ insertCurve(v);
+ } else {
+ roots.sort();
+ var t = roots[0],
+ parts = Curve.subdivide(v, t);
+ insertCurve(parts[0]);
+ if (count > 1) {
+ t = (roots[1] - t) / (1 - t);
+ parts = Curve.subdivide(parts[1], t);
+ insertCurve(parts[0]);
+ }
+ insertCurve(parts[1]);
+ }
+ }
+ }
+
+ if (!monoCurves) {
+ monoCurves = this._monoCurves = [];
+ var curves = this.getCurves(),
+ segments = this._segments;
+ for (var i = 0, l = curves.length; i < l; i++)
+ handleCurve(curves[i].getValues());
+ if (!this._closed && segments.length > 1) {
+ var p1 = segments[segments.length - 1]._point,
+ p2 = segments[0]._point,
+ p1x = p1._x, p1y = p1._y,
+ p2x = p2._x, p2y = p2._y;
+ handleCurve([p1x, p1y, p1x, p1y, p2x, p2y, p2x, p2y]);
+ }
+ if (monoCurves.length > 0) {
+ var first = monoCurves[0],
+ last = monoCurves[monoCurves.length - 1];
+ first.previous = last;
+ last.next = first;
+ }
+ }
+ return monoCurves;
+ },
+
+ getInteriorPoint: function() {
+ var bounds = this.getBounds(),
+ point = bounds.getCenter(true);
+ if (!this.contains(point)) {
+ var curves = this._getMonoCurves(),
+ roots = [],
+ y = point.y,
+ xIntercepts = [];
+ for (var i = 0, l = curves.length; i < l; i++) {
+ var values = curves[i].values;
+ if ((curves[i].winding === 1
+ && y >= values[1] && y <= values[7]
+ || y >= values[7] && y <= values[1])
+ && Curve.solveCubic(values, 1, y, roots, 0, 1) > 0) {
+ for (var j = roots.length - 1; j >= 0; j--)
+ xIntercepts.push(Curve.evaluate(values, roots[j], 0).x);
+ }
+ if (xIntercepts.length > 1)
+ break;
+ }
+ point.x = (xIntercepts[0] + xIntercepts[1]) / 2;
+ }
+ return point;
+ },
+
+ reorient: function() {
+ this.setClockwise(true);
+ return this;
+ }
+});
+
+CompoundPath.inject({
+ _getMonoCurves: function() {
+ var children = this._children,
+ monoCurves = [];
+ for (var i = 0, l = children.length; i < l; i++)
+ monoCurves.push.apply(monoCurves, children[i]._getMonoCurves());
+ return monoCurves;
+ },
+
+ reorient: function() {
+ var children = this.removeChildren().sort(function(a, b) {
+ return b.getBounds().getArea() - a.getBounds().getArea();
+ });
+ if (children.length > 0) {
+ this.addChildren(children);
+ var clockwise = children[0].isClockwise();
+ for (var i = 1, l = children.length; i < l; i++) {
+ var point = children[i].getInteriorPoint(),
+ counters = 0;
+ for (var j = i - 1; j >= 0; j--) {
+ if (children[j].contains(point))
+ counters++;
+ }
+ children[i].setClockwise(counters % 2 === 0 && clockwise);
+ }
+ }
+ return this;
+ }
+});
+
+var PathIterator = Base.extend({
+ _class: 'PathIterator',
+
+ initialize: function(path, maxRecursion, tolerance, matrix) {
+ var curves = [],
+ parts = [],
+ length = 0,
+ minDifference = 1 / (maxRecursion || 32),
+ segments = path._segments,
+ segment1 = segments[0],
+ segment2;
+
+ function addCurve(segment1, segment2) {
+ var curve = Curve.getValues(segment1, segment2, matrix);
+ curves.push(curve);
+ computeParts(curve, segment1._index, 0, 1);
+ }
+
+ function computeParts(curve, index, minT, maxT) {
+ if ((maxT - minT) > minDifference
+ && !Curve.isFlatEnough(curve, tolerance || 0.25)) {
+ var split = Curve.subdivide(curve),
+ halfT = (minT + maxT) / 2;
+ computeParts(split[0], index, minT, halfT);
+ computeParts(split[1], index, halfT, maxT);
+ } else {
+ var x = curve[6] - curve[0],
+ y = curve[7] - curve[1],
+ dist = Math.sqrt(x * x + y * y);
+ if (dist > 0.000001) {
+ length += dist;
+ parts.push({
+ offset: length,
+ value: maxT,
+ index: index
+ });
+ }
+ }
+ }
+
+ for (var i = 1, l = segments.length; i < l; i++) {
+ segment2 = segments[i];
+ addCurve(segment1, segment2);
+ segment1 = segment2;
+ }
+ if (path._closed)
+ addCurve(segment2, segments[0]);
+
+ this.curves = curves;
+ this.parts = parts;
+ this.length = length;
+ this.index = 0;
+ },
+
+ getParameterAt: function(offset) {
+ var i, j = this.index;
+ for (;;) {
+ i = j;
+ if (j == 0 || this.parts[--j].offset < offset)
+ break;
+ }
+ for (var l = this.parts.length; i < l; i++) {
+ var part = this.parts[i];
+ if (part.offset >= offset) {
+ this.index = i;
+ var prev = this.parts[i - 1];
+ var prevVal = prev && prev.index == part.index ? prev.value : 0,
+ prevLen = prev ? prev.offset : 0;
+ return {
+ value: prevVal + (part.value - prevVal)
+ * (offset - prevLen) / (part.offset - prevLen),
+ index: part.index
+ };
+ }
+ }
+ var part = this.parts[this.parts.length - 1];
+ return {
+ value: 1,
+ index: part.index
+ };
+ },
+
+ evaluate: function(offset, type) {
+ var param = this.getParameterAt(offset);
+ return Curve.evaluate(this.curves[param.index], param.value, type);
+ },
+
+ drawPart: function(ctx, from, to) {
+ from = this.getParameterAt(from);
+ to = this.getParameterAt(to);
+ for (var i = from.index; i <= to.index; i++) {
+ var curve = Curve.getPart(this.curves[i],
+ i == from.index ? from.value : 0,
+ i == to.index ? to.value : 1);
+ if (i == from.index)
+ ctx.moveTo(curve[0], curve[1]);
+ ctx.bezierCurveTo.apply(ctx, curve.slice(2));
+ }
+ }
+}, Base.each(['getPoint', 'getTangent', 'getNormal', 'getCurvature'],
+ function(name, index) {
+ this[name + 'At'] = function(offset) {
+ return this.evaluate(offset, index);
+ };
+ }, {})
+);
+
+var PathFitter = Base.extend({
+ initialize: function(path, error) {
+ var points = this.points = [],
+ segments = path._segments,
+ prev;
+ for (var i = 0, l = segments.length; i < l; i++) {
+ var point = segments[i].point.clone();
+ if (!prev || !prev.equals(point)) {
+ points.push(point);
+ prev = point;
+ }
+ }
+
+ if (path._closed) {
+ this.closed = true;
+ points.unshift(points[points.length - 1]);
+ points.push(points[1]);
+ }
+
+ this.error = error;
+ },
+
+ fit: function() {
+ var points = this.points,
+ length = points.length,
+ segments = this.segments = length > 0
+ ? [new Segment(points[0])] : [];
+ if (length > 1)
+ this.fitCubic(0, length - 1,
+ points[1].subtract(points[0]).normalize(),
+ points[length - 2].subtract(points[length - 1]).normalize());
+
+ if (this.closed) {
+ segments.shift();
+ segments.pop();
+ }
+
+ return segments;
+ },
+
+ fitCubic: function(first, last, tan1, tan2) {
+ if (last - first == 1) {
+ var pt1 = this.points[first],
+ pt2 = this.points[last],
+ dist = pt1.getDistance(pt2) / 3;
+ this.addCurve([pt1, pt1.add(tan1.normalize(dist)),
+ pt2.add(tan2.normalize(dist)), pt2]);
+ return;
+ }
+ var uPrime = this.chordLengthParameterize(first, last),
+ maxError = Math.max(this.error, this.error * this.error),
+ split;
+ for (var i = 0; i <= 4; i++) {
+ var curve = this.generateBezier(first, last, uPrime, tan1, tan2);
+ var max = this.findMaxError(first, last, curve, uPrime);
+ if (max.error < this.error) {
+ this.addCurve(curve);
+ return;
+ }
+ split = max.index;
+ if (max.error >= maxError)
+ break;
+ this.reparameterize(first, last, uPrime, curve);
+ maxError = max.error;
+ }
+ var V1 = this.points[split - 1].subtract(this.points[split]),
+ V2 = this.points[split].subtract(this.points[split + 1]),
+ tanCenter = V1.add(V2).divide(2).normalize();
+ this.fitCubic(first, split, tan1, tanCenter);
+ this.fitCubic(split, last, tanCenter.negate(), tan2);
+ },
+
+ addCurve: function(curve) {
+ var prev = this.segments[this.segments.length - 1];
+ prev.setHandleOut(curve[1].subtract(curve[0]));
+ this.segments.push(
+ new Segment(curve[3], curve[2].subtract(curve[3])));
+ },
+
+ generateBezier: function(first, last, uPrime, tan1, tan2) {
+ var epsilon = 1e-12,
+ pt1 = this.points[first],
+ pt2 = this.points[last],
+ C = [[0, 0], [0, 0]],
+ X = [0, 0];
+
+ for (var i = 0, l = last - first + 1; i < l; i++) {
+ var u = uPrime[i],
+ t = 1 - u,
+ b = 3 * u * t,
+ b0 = t * t * t,
+ b1 = b * t,
+ b2 = b * u,
+ b3 = u * u * u,
+ a1 = tan1.normalize(b1),
+ a2 = tan2.normalize(b2),
+ tmp = this.points[first + i]
+ .subtract(pt1.multiply(b0 + b1))
+ .subtract(pt2.multiply(b2 + b3));
+ C[0][0] += a1.dot(a1);
+ C[0][1] += a1.dot(a2);
+ C[1][0] = C[0][1];
+ C[1][1] += a2.dot(a2);
+ X[0] += a1.dot(tmp);
+ X[1] += a2.dot(tmp);
+ }
+
+ var detC0C1 = C[0][0] * C[1][1] - C[1][0] * C[0][1],
+ alpha1, alpha2;
+ if (Math.abs(detC0C1) > epsilon) {
+ var detC0X = C[0][0] * X[1] - C[1][0] * X[0],
+ detXC1 = X[0] * C[1][1] - X[1] * C[0][1];
+ alpha1 = detXC1 / detC0C1;
+ alpha2 = detC0X / detC0C1;
+ } else {
+ var c0 = C[0][0] + C[0][1],
+ c1 = C[1][0] + C[1][1];
+ if (Math.abs(c0) > epsilon) {
+ alpha1 = alpha2 = X[0] / c0;
+ } else if (Math.abs(c1) > epsilon) {
+ alpha1 = alpha2 = X[1] / c1;
+ } else {
+ alpha1 = alpha2 = 0;
+ }
+ }
+
+ var segLength = pt2.getDistance(pt1);
+ epsilon *= segLength;
+ if (alpha1 < epsilon || alpha2 < epsilon) {
+ alpha1 = alpha2 = segLength / 3;
+ }
+
+ return [pt1, pt1.add(tan1.normalize(alpha1)),
+ pt2.add(tan2.normalize(alpha2)), pt2];
+ },
+
+ reparameterize: function(first, last, u, curve) {
+ for (var i = first; i <= last; i++) {
+ u[i - first] = this.findRoot(curve, this.points[i], u[i - first]);
+ }
+ },
+
+ findRoot: function(curve, point, u) {
+ var curve1 = [],
+ curve2 = [];
+ for (var i = 0; i <= 2; i++) {
+ curve1[i] = curve[i + 1].subtract(curve[i]).multiply(3);
+ }
+ for (var i = 0; i <= 1; i++) {
+ curve2[i] = curve1[i + 1].subtract(curve1[i]).multiply(2);
+ }
+ var pt = this.evaluate(3, curve, u),
+ pt1 = this.evaluate(2, curve1, u),
+ pt2 = this.evaluate(1, curve2, u),
+ diff = pt.subtract(point),
+ df = pt1.dot(pt1) + diff.dot(pt2);
+ if (Math.abs(df) < 0.000001)
+ return u;
+ return u - diff.dot(pt1) / df;
+ },
+
+ evaluate: function(degree, curve, t) {
+ var tmp = curve.slice();
+ for (var i = 1; i <= degree; i++) {
+ for (var j = 0; j <= degree - i; j++) {
+ tmp[j] = tmp[j].multiply(1 - t).add(tmp[j + 1].multiply(t));
+ }
+ }
+ return tmp[0];
+ },
+
+ chordLengthParameterize: function(first, last) {
+ var u = [0];
+ for (var i = first + 1; i <= last; i++) {
+ u[i - first] = u[i - first - 1]
+ + this.points[i].getDistance(this.points[i - 1]);
+ }
+ for (var i = 1, m = last - first; i <= m; i++) {
+ u[i] /= u[m];
+ }
+ return u;
+ },
+
+ findMaxError: function(first, last, curve, u) {
+ var index = Math.floor((last - first + 1) / 2),
+ maxDist = 0;
+ for (var i = first + 1; i < last; i++) {
+ var P = this.evaluate(3, curve, u[i - first]);
+ var v = P.subtract(this.points[i]);
+ var dist = v.x * v.x + v.y * v.y;
+ if (dist >= maxDist) {
+ maxDist = dist;
+ index = i;
+ }
+ }
+ return {
+ error: maxDist,
+ index: index
+ };
+ }
+});
+
+var TextItem = Item.extend({
+ _class: 'TextItem',
+ _boundsSelected: true,
+ _applyMatrix: false,
+ _canApplyMatrix: false,
+ _serializeFields: {
+ content: null
+ },
+ _boundsGetter: 'getBounds',
+
+ initialize: function TextItem(arg) {
+ this._content = '';
+ this._lines = [];
+ var hasProps = arg && Base.isPlainObject(arg)
+ && arg.x === undefined && arg.y === undefined;
+ this._initialize(hasProps && arg, !hasProps && Point.read(arguments));
+ },
+
+ _equals: function(item) {
+ return this._content === item._content;
+ },
+
+ _clone: function _clone(copy, insert) {
+ copy.setContent(this._content);
+ return _clone.base.call(this, copy, insert);
+ },
+
+ getContent: function() {
+ return this._content;
+ },
+
+ setContent: function(content) {
+ this._content = '' + content;
+ this._lines = this._content.split(/\r\n|\n|\r/mg);
+ this._changed(265);
+ },
+
+ isEmpty: function() {
+ return !this._content;
+ },
+
+ getCharacterStyle: '#getStyle',
+ setCharacterStyle: '#setStyle',
+
+ getParagraphStyle: '#getStyle',
+ setParagraphStyle: '#setStyle'
+});
+
+var PointText = TextItem.extend({
+ _class: 'PointText',
+
+ initialize: function PointText() {
+ TextItem.apply(this, arguments);
+ },
+
+ clone: function(insert) {
+ return this._clone(new PointText(Item.NO_INSERT), insert);
+ },
+
+ getPoint: function() {
+ var point = this._matrix.getTranslation();
+ return new LinkedPoint(point.x, point.y, this, 'setPoint');
+ },
+
+ setPoint: function() {
+ var point = Point.read(arguments);
+ this.translate(point.subtract(this._matrix.getTranslation()));
+ },
+
+ _draw: function(ctx) {
+ if (!this._content)
+ return;
+ this._setStyles(ctx);
+ var style = this._style,
+ lines = this._lines,
+ leading = style.getLeading(),
+ shadowColor = ctx.shadowColor;
+ ctx.font = style.getFontStyle();
+ ctx.textAlign = style.getJustification();
+ for (var i = 0, l = lines.length; i < l; i++) {
+ ctx.shadowColor = shadowColor;
+ var line = lines[i];
+ if (style.hasFill()) {
+ ctx.fillText(line, 0, 0);
+ ctx.shadowColor = 'rgba(0,0,0,0)';
+ }
+ if (style.hasStroke())
+ ctx.strokeText(line, 0, 0);
+ ctx.translate(0, leading);
+ }
+ },
+
+ _getBounds: function(getter, matrix) {
+ var style = this._style,
+ lines = this._lines,
+ numLines = lines.length,
+ justification = style.getJustification(),
+ leading = style.getLeading(),
+ width = this.getView().getTextWidth(style.getFontStyle(), lines),
+ x = 0;
+ if (justification !== 'left')
+ x -= width / (justification === 'center' ? 2: 1);
+ var bounds = new Rectangle(x,
+ numLines ? - 0.75 * leading : 0,
+ width, numLines * leading);
+ return matrix ? matrix._transformBounds(bounds, bounds) : bounds;
+ }
+});
+
+var Color = Base.extend(new function() {
+ var types = {
+ gray: ['gray'],
+ rgb: ['red', 'green', 'blue'],
+ hsb: ['hue', 'saturation', 'brightness'],
+ hsl: ['hue', 'saturation', 'lightness'],
+ gradient: ['gradient', 'origin', 'destination', 'highlight']
+ };
+
+ var componentParsers = {},
+ colorCache = {},
+ colorCtx;
+
+ function fromCSS(string) {
+ var match = string.match(/^#(\w{1,2})(\w{1,2})(\w{1,2})$/),
+ components;
+ if (match) {
+ components = [0, 0, 0];
+ for (var i = 0; i < 3; i++) {
+ var value = match[i + 1];
+ components[i] = parseInt(value.length == 1
+ ? value + value : value, 16) / 255;
+ }
+ } else if (match = string.match(/^rgba?\((.*)\)$/)) {
+ components = match[1].split(',');
+ for (var i = 0, l = components.length; i < l; i++) {
+ var value = +components[i];
+ components[i] = i < 3 ? value / 255 : value;
+ }
+ } else {
+ var cached = colorCache[string];
+ if (!cached) {
+ if (!colorCtx) {
+ colorCtx = CanvasProvider.getContext(1, 1);
+ colorCtx.globalCompositeOperation = 'copy';
+ }
+ colorCtx.fillStyle = 'rgba(0,0,0,0)';
+ colorCtx.fillStyle = string;
+ colorCtx.fillRect(0, 0, 1, 1);
+ var data = colorCtx.getImageData(0, 0, 1, 1).data;
+ cached = colorCache[string] = [
+ data[0] / 255,
+ data[1] / 255,
+ data[2] / 255
+ ];
+ }
+ components = cached.slice();
+ }
+ return components;
+ }
+
+ var hsbIndices = [
+ [0, 3, 1],
+ [2, 0, 1],
+ [1, 0, 3],
+ [1, 2, 0],
+ [3, 1, 0],
+ [0, 1, 2]
+ ];
+
+ var converters = {
+ 'rgb-hsb': function(r, g, b) {
+ var max = Math.max(r, g, b),
+ min = Math.min(r, g, b),
+ delta = max - min,
+ h = delta === 0 ? 0
+ : ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
+ : max == g ? (b - r) / delta + 2
+ : (r - g) / delta + 4) * 60;
+ return [h, max === 0 ? 0 : delta / max, max];
+ },
+
+ 'hsb-rgb': function(h, s, b) {
+ h = (((h / 60) % 6) + 6) % 6;
+ var i = Math.floor(h),
+ f = h - i,
+ i = hsbIndices[i],
+ v = [
+ b,
+ b * (1 - s),
+ b * (1 - s * f),
+ b * (1 - s * (1 - f))
+ ];
+ return [v[i[0]], v[i[1]], v[i[2]]];
+ },
+
+ 'rgb-hsl': function(r, g, b) {
+ var max = Math.max(r, g, b),
+ min = Math.min(r, g, b),
+ delta = max - min,
+ achromatic = delta === 0,
+ h = achromatic ? 0
+ : ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
+ : max == g ? (b - r) / delta + 2
+ : (r - g) / delta + 4) * 60,
+ l = (max + min) / 2,
+ s = achromatic ? 0 : l < 0.5
+ ? delta / (max + min)
+ : delta / (2 - max - min);
+ return [h, s, l];
+ },
+
+ 'hsl-rgb': function(h, s, l) {
+ h = (((h / 360) % 1) + 1) % 1;
+ if (s === 0)
+ return [l, l, l];
+ var t3s = [ h + 1 / 3, h, h - 1 / 3 ],
+ t2 = l < 0.5 ? l * (1 + s) : l + s - l * s,
+ t1 = 2 * l - t2,
+ c = [];
+ for (var i = 0; i < 3; i++) {
+ var t3 = t3s[i];
+ if (t3 < 0) t3 += 1;
+ if (t3 > 1) t3 -= 1;
+ c[i] = 6 * t3 < 1
+ ? t1 + (t2 - t1) * 6 * t3
+ : 2 * t3 < 1
+ ? t2
+ : 3 * t3 < 2
+ ? t1 + (t2 - t1) * ((2 / 3) - t3) * 6
+ : t1;
+ }
+ return c;
+ },
+
+ 'rgb-gray': function(r, g, b) {
+ return [r * 0.2989 + g * 0.587 + b * 0.114];
+ },
+
+ 'gray-rgb': function(g) {
+ return [g, g, g];
+ },
+
+ 'gray-hsb': function(g) {
+ return [0, 0, g];
+ },
+
+ 'gray-hsl': function(g) {
+ return [0, 0, g];
+ },
+
+ 'gradient-rgb': function() {
+ return [];
+ },
+
+ 'rgb-gradient': function() {
+ return [];
+ }
+
+ };
+
+ return Base.each(types, function(properties, type) {
+ componentParsers[type] = [];
+ Base.each(properties, function(name, index) {
+ var part = Base.capitalize(name),
+ hasOverlap = /^(hue|saturation)$/.test(name),
+ parser = componentParsers[type][index] = name === 'gradient'
+ ? function(value) {
+ var current = this._components[0];
+ value = Gradient.read(Array.isArray(value) ? value
+ : arguments, 0, { readNull: true });
+ if (current !== value) {
+ if (current)
+ current._removeOwner(this);
+ if (value)
+ value._addOwner(this);
+ }
+ return value;
+ }
+ : type === 'gradient'
+ ? function() {
+ return Point.read(arguments, 0, {
+ readNull: name === 'highlight',
+ clone: true
+ });
+ }
+ : function(value) {
+ return value == null || isNaN(value) ? 0 : value;
+ };
+
+ this['get' + part] = function() {
+ return this._type === type
+ || hasOverlap && /^hs[bl]$/.test(this._type)
+ ? this._components[index]
+ : this._convert(type)[index];
+ };
+
+ this['set' + part] = function(value) {
+ if (this._type !== type
+ && !(hasOverlap && /^hs[bl]$/.test(this._type))) {
+ this._components = this._convert(type);
+ this._properties = types[type];
+ this._type = type;
+ }
+ value = parser.call(this, value);
+ if (value != null) {
+ this._components[index] = value;
+ this._changed();
+ }
+ };
+ }, this);
+ }, {
+ _class: 'Color',
+ _readIndex: true,
+
+ initialize: function Color(arg) {
+ var slice = Array.prototype.slice,
+ args = arguments,
+ read = 0,
+ type,
+ components,
+ alpha,
+ values;
+ if (Array.isArray(arg)) {
+ args = arg;
+ arg = args[0];
+ }
+ var argType = arg != null && typeof arg;
+ if (argType === 'string' && arg in types) {
+ type = arg;
+ arg = args[1];
+ if (Array.isArray(arg)) {
+ components = arg;
+ alpha = args[2];
+ } else {
+ if (this.__read)
+ read = 1;
+ args = slice.call(args, 1);
+ argType = typeof arg;
+ }
+ }
+ if (!components) {
+ values = argType === 'number'
+ ? args
+ : argType === 'object' && arg.length != null
+ ? arg
+ : null;
+ if (values) {
+ if (!type)
+ type = values.length >= 3
+ ? 'rgb'
+ : 'gray';
+ var length = types[type].length;
+ alpha = values[length];
+ if (this.__read)
+ read += values === arguments
+ ? length + (alpha != null ? 1 : 0)
+ : 1;
+ if (values.length > length)
+ values = slice.call(values, 0, length);
+ } else if (argType === 'string') {
+ type = 'rgb';
+ components = fromCSS(arg);
+ if (components.length === 4) {
+ alpha = components[3];
+ components.length--;
+ }
+ } else if (argType === 'object') {
+ if (arg.constructor === Color) {
+ type = arg._type;
+ components = arg._components.slice();
+ alpha = arg._alpha;
+ if (type === 'gradient') {
+ for (var i = 1, l = components.length; i < l; i++) {
+ var point = components[i];
+ if (point)
+ components[i] = point.clone();
+ }
+ }
+ } else if (arg.constructor === Gradient) {
+ type = 'gradient';
+ values = args;
+ } else {
+ type = 'hue' in arg
+ ? 'lightness' in arg
+ ? 'hsl'
+ : 'hsb'
+ : 'gradient' in arg || 'stops' in arg
+ || 'radial' in arg
+ ? 'gradient'
+ : 'gray' in arg
+ ? 'gray'
+ : 'rgb';
+ var properties = types[type];
+ parsers = componentParsers[type];
+ this._components = components = [];
+ for (var i = 0, l = properties.length; i < l; i++) {
+ var value = arg[properties[i]];
+ if (value == null && i === 0 && type === 'gradient'
+ && 'stops' in arg) {
+ value = {
+ stops: arg.stops,
+ radial: arg.radial
+ };
+ }
+ value = parsers[i].call(this, value);
+ if (value != null)
+ components[i] = value;
+ }
+ alpha = arg.alpha;
+ }
+ }
+ if (this.__read && type)
+ read = 1;
+ }
+ this._type = type || 'rgb';
+ if (type === 'gradient')
+ this._id = Color._id = (Color._id || 0) + 1;
+ if (!components) {
+ this._components = components = [];
+ var parsers = componentParsers[this._type];
+ for (var i = 0, l = parsers.length; i < l; i++) {
+ var value = parsers[i].call(this, values && values[i]);
+ if (value != null)
+ components[i] = value;
+ }
+ }
+ this._components = components;
+ this._properties = types[this._type];
+ this._alpha = alpha;
+ if (this.__read)
+ this.__read = read;
+ },
+
+ _serialize: function(options, dictionary) {
+ var components = this.getComponents();
+ return Base.serialize(
+ /^(gray|rgb)$/.test(this._type)
+ ? components
+ : [this._type].concat(components),
+ options, true, dictionary);
+ },
+
+ _changed: function() {
+ this._canvasStyle = null;
+ if (this._owner)
+ this._owner._changed(65);
+ },
+
+ _convert: function(type) {
+ var converter;
+ return this._type === type
+ ? this._components.slice()
+ : (converter = converters[this._type + '-' + type])
+ ? converter.apply(this, this._components)
+ : converters['rgb-' + type].apply(this,
+ converters[this._type + '-rgb'].apply(this,
+ this._components));
+ },
+
+ convert: function(type) {
+ return new Color(type, this._convert(type), this._alpha);
+ },
+
+ getType: function() {
+ return this._type;
+ },
+
+ setType: function(type) {
+ this._components = this._convert(type);
+ this._properties = types[type];
+ this._type = type;
+ },
+
+ getComponents: function() {
+ var components = this._components.slice();
+ if (this._alpha != null)
+ components.push(this._alpha);
+ return components;
+ },
+
+ getAlpha: function() {
+ return this._alpha != null ? this._alpha : 1;
+ },
+
+ setAlpha: function(alpha) {
+ this._alpha = alpha == null ? null : Math.min(Math.max(alpha, 0), 1);
+ this._changed();
+ },
+
+ hasAlpha: function() {
+ return this._alpha != null;
+ },
+
+ equals: function(color) {
+ var col = Base.isPlainValue(color, true)
+ ? Color.read(arguments)
+ : color;
+ return col === this || col && this._class === col._class
+ && this._type === col._type
+ && this._alpha === col._alpha
+ && Base.equals(this._components, col._components)
+ || false;
+ },
+
+ toString: function() {
+ var properties = this._properties,
+ parts = [],
+ isGradient = this._type === 'gradient',
+ f = Formatter.instance;
+ for (var i = 0, l = properties.length; i < l; i++) {
+ var value = this._components[i];
+ if (value != null)
+ parts.push(properties[i] + ': '
+ + (isGradient ? value : f.number(value)));
+ }
+ if (this._alpha != null)
+ parts.push('alpha: ' + f.number(this._alpha));
+ return '{ ' + parts.join(', ') + ' }';
+ },
+
+ toCSS: function(hex) {
+ var components = this._convert('rgb'),
+ alpha = hex || this._alpha == null ? 1 : this._alpha;
+ function convert(val) {
+ return Math.round((val < 0 ? 0 : val > 1 ? 1 : val) * 255);
+ }
+ components = [
+ convert(components[0]),
+ convert(components[1]),
+ convert(components[2])
+ ];
+ if (alpha < 1)
+ components.push(alpha < 0 ? 0 : alpha);
+ return hex
+ ? '#' + ((1 << 24) + (components[0] << 16)
+ + (components[1] << 8)
+ + components[2]).toString(16).slice(1)
+ : (components.length == 4 ? 'rgba(' : 'rgb(')
+ + components.join(',') + ')';
+ },
+
+ toCanvasStyle: function(ctx) {
+ if (this._canvasStyle)
+ return this._canvasStyle;
+ if (this._type !== 'gradient')
+ return this._canvasStyle = this.toCSS();
+ var components = this._components,
+ gradient = components[0],
+ stops = gradient._stops,
+ origin = components[1],
+ destination = components[2],
+ canvasGradient;
+ if (gradient._radial) {
+ var radius = destination.getDistance(origin),
+ highlight = components[3];
+ if (highlight) {
+ var vector = highlight.subtract(origin);
+ if (vector.getLength() > radius)
+ highlight = origin.add(vector.normalize(radius - 0.1));
+ }
+ var start = highlight || origin;
+ canvasGradient = ctx.createRadialGradient(start.x, start.y,
+ 0, origin.x, origin.y, radius);
+ } else {
+ canvasGradient = ctx.createLinearGradient(origin.x, origin.y,
+ destination.x, destination.y);
+ }
+ for (var i = 0, l = stops.length; i < l; i++) {
+ var stop = stops[i];
+ canvasGradient.addColorStop(stop._rampPoint,
+ stop._color.toCanvasStyle());
+ }
+ return this._canvasStyle = canvasGradient;
+ },
+
+ transform: function(matrix) {
+ if (this._type === 'gradient') {
+ var components = this._components;
+ for (var i = 1, l = components.length; i < l; i++) {
+ var point = components[i];
+ matrix._transformPoint(point, point, true);
+ }
+ this._changed();
+ }
+ },
+
+ statics: {
+ _types: types,
+
+ random: function() {
+ var random = Math.random;
+ return new Color(random(), random(), random());
+ }
+ }
+ });
+}, new function() {
+ var operators = {
+ add: function(a, b) {
+ return a + b;
+ },
+
+ subtract: function(a, b) {
+ return a - b;
+ },
+
+ multiply: function(a, b) {
+ return a * b;
+ },
+
+ divide: function(a, b) {
+ return a / b;
+ }
+ };
+
+ return Base.each(operators, function(operator, name) {
+ this[name] = function(color) {
+ color = Color.read(arguments);
+ var type = this._type,
+ components1 = this._components,
+ components2 = color._convert(type);
+ for (var i = 0, l = components1.length; i < l; i++)
+ components2[i] = operator(components1[i], components2[i]);
+ return new Color(type, components2,
+ this._alpha != null
+ ? operator(this._alpha, color.getAlpha())
+ : null);
+ };
+ }, {
+ });
+});
+
+Base.each(Color._types, function(properties, type) {
+ var ctor = this[Base.capitalize(type) + 'Color'] = function(arg) {
+ var argType = arg != null && typeof arg,
+ components = argType === 'object' && arg.length != null
+ ? arg
+ : argType === 'string'
+ ? null
+ : arguments;
+ return components
+ ? new Color(type, components)
+ : new Color(arg);
+ };
+ if (type.length == 3) {
+ var acronym = type.toUpperCase();
+ Color[acronym] = this[acronym + 'Color'] = ctor;
+ }
+}, Base.exports);
+
+var Gradient = Base.extend({
+ _class: 'Gradient',
+
+ initialize: function Gradient(stops, radial) {
+ this._id = Gradient._id = (Gradient._id || 0) + 1;
+ if (stops && this._set(stops))
+ stops = radial = null;
+ if (!this._stops)
+ this.setStops(stops || ['white', 'black']);
+ if (this._radial == null)
+ this.setRadial(typeof radial === 'string' && radial === 'radial'
+ || radial || false);
+ },
+
+ _serialize: function(options, dictionary) {
+ return dictionary.add(this, function() {
+ return Base.serialize([this._stops, this._radial],
+ options, true, dictionary);
+ });
+ },
+
+ _changed: function() {
+ for (var i = 0, l = this._owners && this._owners.length; i < l; i++)
+ this._owners[i]._changed();
+ },
+
+ _addOwner: function(color) {
+ if (!this._owners)
+ this._owners = [];
+ this._owners.push(color);
+ },
+
+ _removeOwner: function(color) {
+ var index = this._owners ? this._owners.indexOf(color) : -1;
+ if (index != -1) {
+ this._owners.splice(index, 1);
+ if (this._owners.length === 0)
+ this._owners = undefined;
+ }
+ },
+
+ clone: function() {
+ var stops = [];
+ for (var i = 0, l = this._stops.length; i < l; i++)
+ stops[i] = this._stops[i].clone();
+ return new Gradient(stops);
+ },
+
+ getStops: function() {
+ return this._stops;
+ },
+
+ setStops: function(stops) {
+ if (this.stops) {
+ for (var i = 0, l = this._stops.length; i < l; i++)
+ this._stops[i]._owner = undefined;
+ }
+ if (stops.length < 2)
+ throw new Error(
+ 'Gradient stop list needs to contain at least two stops.');
+ this._stops = GradientStop.readAll(stops, 0, { clone: true });
+ for (var i = 0, l = this._stops.length; i < l; i++) {
+ var stop = this._stops[i];
+ stop._owner = this;
+ if (stop._defaultRamp)
+ stop.setRampPoint(i / (l - 1));
+ }
+ this._changed();
+ },
+
+ getRadial: function() {
+ return this._radial;
+ },
+
+ setRadial: function(radial) {
+ this._radial = radial;
+ this._changed();
+ },
+
+ equals: function(gradient) {
+ if (gradient === this)
+ return true;
+ if (gradient && this._class === gradient._class
+ && this._stops.length === gradient._stops.length) {
+ for (var i = 0, l = this._stops.length; i < l; i++) {
+ if (!this._stops[i].equals(gradient._stops[i]))
+ return false;
+ }
+ return true;
+ }
+ return false;
+ }
+});
+
+var GradientStop = Base.extend({
+ _class: 'GradientStop',
+
+ initialize: function GradientStop(arg0, arg1) {
+ if (arg0) {
+ var color, rampPoint;
+ if (arg1 === undefined && Array.isArray(arg0)) {
+ color = arg0[0];
+ rampPoint = arg0[1];
+ } else if (arg0.color) {
+ color = arg0.color;
+ rampPoint = arg0.rampPoint;
+ } else {
+ color = arg0;
+ rampPoint = arg1;
+ }
+ this.setColor(color);
+ this.setRampPoint(rampPoint);
+ }
+ },
+
+ clone: function() {
+ return new GradientStop(this._color.clone(), this._rampPoint);
+ },
+
+ _serialize: function(options, dictionary) {
+ return Base.serialize([this._color, this._rampPoint], options, true,
+ dictionary);
+ },
+
+ _changed: function() {
+ if (this._owner)
+ this._owner._changed(65);
+ },
+
+ getRampPoint: function() {
+ return this._rampPoint;
+ },
+
+ setRampPoint: function(rampPoint) {
+ this._defaultRamp = rampPoint == null;
+ this._rampPoint = rampPoint || 0;
+ this._changed();
+ },
+
+ getColor: function() {
+ return this._color;
+ },
+
+ setColor: function(color) {
+ this._color = Color.read(arguments);
+ if (this._color === color)
+ this._color = color.clone();
+ this._color._owner = this;
+ this._changed();
+ },
+
+ equals: function(stop) {
+ return stop === this || stop && this._class === stop._class
+ && this._color.equals(stop._color)
+ && this._rampPoint == stop._rampPoint
+ || false;
+ }
+});
+
+var Style = Base.extend(new function() {
+ var defaults = {
+ fillColor: undefined,
+ strokeColor: undefined,
+ strokeWidth: 1,
+ strokeCap: 'butt',
+ strokeJoin: 'miter',
+ strokeScaling: true,
+ miterLimit: 10,
+ dashOffset: 0,
+ dashArray: [],
+ windingRule: 'nonzero',
+ shadowColor: undefined,
+ shadowBlur: 0,
+ shadowOffset: new Point(),
+ selectedColor: undefined,
+ fontFamily: 'sans-serif',
+ fontWeight: 'normal',
+ fontSize: 12,
+ font: 'sans-serif',
+ leading: null,
+ justification: 'left'
+ };
+
+ var flags = {
+ strokeWidth: 97,
+ strokeCap: 97,
+ strokeJoin: 97,
+ strokeScaling: 105,
+ miterLimit: 97,
+ fontFamily: 9,
+ fontWeight: 9,
+ fontSize: 9,
+ font: 9,
+ leading: 9,
+ justification: 9
+ };
+
+ var item = { beans: true },
+ fields = {
+ _defaults: defaults,
+ _textDefaults: new Base(defaults, {
+ fillColor: new Color()
+ }),
+ beans: true
+ };
+
+ Base.each(defaults, function(value, key) {
+ var isColor = /Color$/.test(key),
+ isPoint = key === 'shadowOffset',
+ part = Base.capitalize(key),
+ flag = flags[key],
+ set = 'set' + part,
+ get = 'get' + part;
+
+ fields[set] = function(value) {
+ var owner = this._owner,
+ children = owner && owner._children;
+ if (children && children.length > 0
+ && !(owner instanceof CompoundPath)) {
+ for (var i = 0, l = children.length; i < l; i++)
+ children[i]._style[set](value);
+ } else {
+ var old = this._values[key];
+ if (old !== value) {
+ if (isColor) {
+ if (old)
+ old._owner = undefined;
+ if (value && value.constructor === Color) {
+ if (value._owner)
+ value = value.clone();
+ value._owner = owner;
+ }
+ }
+ this._values[key] = value;
+ if (owner)
+ owner._changed(flag || 65);
+ }
+ }
+ };
+
+ fields[get] = function(_dontMerge) {
+ var owner = this._owner,
+ children = owner && owner._children,
+ value;
+ if (!children || children.length === 0 || _dontMerge
+ || owner instanceof CompoundPath) {
+ var value = this._values[key];
+ if (value === undefined) {
+ value = this._defaults[key];
+ if (value && value.clone)
+ value = value.clone();
+ } else {
+ var ctor = isColor ? Color : isPoint ? Point : null;
+ if (ctor && !(value && value.constructor === ctor)) {
+ this._values[key] = value = ctor.read([value], 0,
+ { readNull: true, clone: true });
+ if (value && isColor)
+ value._owner = owner;
+ }
+ }
+ return value;
+ }
+ for (var i = 0, l = children.length; i < l; i++) {
+ var childValue = children[i]._style[get]();
+ if (i === 0) {
+ value = childValue;
+ } else if (!Base.equals(value, childValue)) {
+ return undefined;
+ }
+ }
+ return value;
+ };
+
+ item[get] = function(_dontMerge) {
+ return this._style[get](_dontMerge);
+ };
+
+ item[set] = function(value) {
+ this._style[set](value);
+ };
+ });
+
+ Item.inject(item);
+ return fields;
+}, {
+ _class: 'Style',
+
+ initialize: function Style(style, _owner, _project) {
+ this._values = {};
+ this._owner = _owner;
+ this._project = _owner && _owner._project || _project || paper.project;
+ if (_owner instanceof TextItem)
+ this._defaults = this._textDefaults;
+ if (style)
+ this.set(style);
+ },
+
+ set: function(style) {
+ var isStyle = style instanceof Style,
+ values = isStyle ? style._values : style;
+ if (values) {
+ for (var key in values) {
+ if (key in this._defaults) {
+ var value = values[key];
+ this[key] = value && isStyle && value.clone
+ ? value.clone() : value;
+ }
+ }
+ }
+ },
+
+ equals: function(style) {
+ return style === this || style && this._class === style._class
+ && Base.equals(this._values, style._values)
+ || false;
+ },
+
+ hasFill: function() {
+ return !!this.getFillColor();
+ },
+
+ hasStroke: function() {
+ return !!this.getStrokeColor() && this.getStrokeWidth() > 0;
+ },
+
+ hasShadow: function() {
+ return !!this.getShadowColor() && this.getShadowBlur() > 0;
+ },
+
+ getView: function() {
+ return this._project.getView();
+ },
+
+ getFontStyle: function() {
+ var fontSize = this.getFontSize();
+ return this.getFontWeight()
+ + ' ' + fontSize + (/[a-z]/i.test(fontSize + '') ? ' ' : 'px ')
+ + this.getFontFamily();
+ },
+
+ getFont: '#getFontFamily',
+ setFont: '#setFontFamily',
+
+ getLeading: function getLeading() {
+ var leading = getLeading.base.call(this),
+ fontSize = this.getFontSize();
+ if (/pt|em|%|px/.test(fontSize))
+ fontSize = this.getView().getPixelSize(fontSize);
+ return leading != null ? leading : fontSize * 1.2;
+ }
+
+});
+
+var DomElement = new function() {
+ function handlePrefix(el, name, set, value) {
+ var prefixes = ['', 'webkit', 'moz', 'Moz', 'ms', 'o'],
+ suffix = name[0].toUpperCase() + name.substring(1);
+ for (var i = 0; i < 6; i++) {
+ var prefix = prefixes[i],
+ key = prefix ? prefix + suffix : name;
+ if (key in el) {
+ if (set) {
+ el[key] = value;
+ } else {
+ return el[key];
+ }
+ break;
+ }
+ }
+ }
+
+ return {
+ getStyles: function(el) {
+ var doc = el && el.nodeType !== 9 ? el.ownerDocument : el,
+ view = doc && doc.defaultView;
+ return view && view.getComputedStyle(el, '');
+ },
+
+ getBounds: function(el, viewport) {
+ var doc = el.ownerDocument,
+ body = doc.body,
+ html = doc.documentElement,
+ rect;
+ try {
+ rect = el.getBoundingClientRect();
+ } catch (e) {
+ rect = { left: 0, top: 0, width: 0, height: 0 };
+ }
+ var x = rect.left - (html.clientLeft || body.clientLeft || 0),
+ y = rect.top - (html.clientTop || body.clientTop || 0);
+ if (!viewport) {
+ var view = doc.defaultView;
+ x += view.pageXOffset || html.scrollLeft || body.scrollLeft;
+ y += view.pageYOffset || html.scrollTop || body.scrollTop;
+ }
+ return new Rectangle(x, y, rect.width, rect.height);
+ },
+
+ getViewportBounds: function(el) {
+ var doc = el.ownerDocument,
+ view = doc.defaultView,
+ html = doc.documentElement;
+ return new Rectangle(0, 0,
+ view.innerWidth || html.clientWidth,
+ view.innerHeight || html.clientHeight
+ );
+ },
+
+ getOffset: function(el, viewport) {
+ return DomElement.getBounds(el, viewport).getPoint();
+ },
+
+ getSize: function(el) {
+ return DomElement.getBounds(el, true).getSize();
+ },
+
+ isInvisible: function(el) {
+ return DomElement.getSize(el).equals(new Size(0, 0));
+ },
+
+ isInView: function(el) {
+ return !DomElement.isInvisible(el)
+ && DomElement.getViewportBounds(el).intersects(
+ DomElement.getBounds(el, true));
+ },
+
+ getPrefixed: function(el, name) {
+ return handlePrefix(el, name);
+ },
+
+ setPrefixed: function(el, name, value) {
+ if (typeof name === 'object') {
+ for (var key in name)
+ handlePrefix(el, key, true, name[key]);
+ } else {
+ handlePrefix(el, name, true, value);
+ }
+ }
+ };
+};
+
+var DomEvent = {
+ add: function(el, events) {
+ for (var type in events) {
+ var func = events[type],
+ parts = type.split(/[\s,]+/g);
+ for (var i = 0, l = parts.length; i < l; i++)
+ el.addEventListener(parts[i], func, false);
+ }
+ },
+
+ remove: function(el, events) {
+ for (var type in events) {
+ var func = events[type],
+ parts = type.split(/[\s,]+/g);
+ for (var i = 0, l = parts.length; i < l; i++)
+ el.removeEventListener(parts[i], func, false);
+ }
+ },
+
+ getPoint: function(event) {
+ var pos = event.targetTouches
+ ? event.targetTouches.length
+ ? event.targetTouches[0]
+ : event.changedTouches[0]
+ : event;
+ return new Point(
+ pos.pageX || pos.clientX + document.documentElement.scrollLeft,
+ pos.pageY || pos.clientY + document.documentElement.scrollTop
+ );
+ },
+
+ getTarget: function(event) {
+ return event.target || event.srcElement;
+ },
+
+ getRelatedTarget: function(event) {
+ return event.relatedTarget || event.toElement;
+ },
+
+ getOffset: function(event, target) {
+ return DomEvent.getPoint(event).subtract(DomElement.getOffset(
+ target || DomEvent.getTarget(event)));
+ },
+
+ stop: function(event) {
+ event.stopPropagation();
+ event.preventDefault();
+ }
+};
+
+DomEvent.requestAnimationFrame = new function() {
+ var nativeRequest = DomElement.getPrefixed(window, 'requestAnimationFrame'),
+ requested = false,
+ callbacks = [],
+ focused = true,
+ timer;
+
+ DomEvent.add(window, {
+ focus: function() {
+ focused = true;
+ },
+ blur: function() {
+ focused = false;
+ }
+ });
+
+ function handleCallbacks() {
+ for (var i = callbacks.length - 1; i >= 0; i--) {
+ var entry = callbacks[i],
+ func = entry[0],
+ el = entry[1];
+ if (!el || (PaperScope.getAttribute(el, 'keepalive') == 'true'
+ || focused) && DomElement.isInView(el)) {
+ callbacks.splice(i, 1);
+ func();
+ }
+ }
+ if (nativeRequest) {
+ if (callbacks.length) {
+ nativeRequest(handleCallbacks);
+ } else {
+ requested = false;
+ }
+ }
+ }
+
+ return function(callback, element) {
+ callbacks.push([callback, element]);
+ if (nativeRequest) {
+ if (!requested) {
+ nativeRequest(handleCallbacks);
+ requested = true;
+ }
+ } else if (!timer) {
+ timer = setInterval(handleCallbacks, 1000 / 60);
+ }
+ };
+};
+
+var View = Base.extend(Emitter, {
+ _class: 'View',
+
+ initialize: function View(project, element) {
+ this._project = project;
+ this._scope = project._scope;
+ this._element = element;
+ var size;
+ if (!this._pixelRatio)
+ this._pixelRatio = window.devicePixelRatio || 1;
+ this._id = element.getAttribute('id');
+ if (this._id == null)
+ element.setAttribute('id', this._id = 'view-' + View._id++);
+ DomEvent.add(element, this._viewEvents);
+ var none = 'none';
+ DomElement.setPrefixed(element.style, {
+ userSelect: none,
+ touchAction: none,
+ touchCallout: none,
+ contentZooming: none,
+ userDrag: none,
+ tapHighlightColor: 'rgba(0,0,0,0)'
+ });
+
+ function getSize(name) {
+ return element[name] || parseInt(element.getAttribute(name), 10);
+ };
+
+ function getCanvasSize() {
+ var size = DomElement.getSize(element);
+ return size.isNaN() || size.isZero()
+ ? new Size(getSize('width'), getSize('height'))
+ : size;
+ };
+
+ if (PaperScope.hasAttribute(element, 'resize')) {
+ var that = this;
+ DomEvent.add(window, this._windowEvents = {
+ resize: function() {
+ that.setViewSize(getCanvasSize());
+ }
+ });
+ }
+ this._setViewSize(size = getCanvasSize());
+ if (PaperScope.hasAttribute(element, 'stats')
+ && typeof Stats !== 'undefined') {
+ this._stats = new Stats();
+ var stats = this._stats.domElement,
+ style = stats.style,
+ offset = DomElement.getOffset(element);
+ style.position = 'absolute';
+ style.left = offset.x + 'px';
+ style.top = offset.y + 'px';
+ document.body.appendChild(stats);
+ }
+ View._views.push(this);
+ View._viewsById[this._id] = this;
+ this._viewSize = size;
+ (this._matrix = new Matrix())._owner = this;
+ this._zoom = 1;
+ if (!View._focused)
+ View._focused = this;
+ this._frameItems = {};
+ this._frameItemCount = 0;
+ },
+
+ remove: function() {
+ if (!this._project)
+ return false;
+ if (View._focused === this)
+ View._focused = null;
+ View._views.splice(View._views.indexOf(this), 1);
+ delete View._viewsById[this._id];
+ if (this._project._view === this)
+ this._project._view = null;
+ DomEvent.remove(this._element, this._viewEvents);
+ DomEvent.remove(window, this._windowEvents);
+ this._element = this._project = null;
+ this.off('frame');
+ this._animate = false;
+ this._frameItems = {};
+ return true;
+ },
+
+ _events: {
+ onFrame: {
+ install: function() {
+ this.play();
+ },
+
+ uninstall: function() {
+ this.pause();
+ }
+ },
+
+ onResize: {}
+ },
+
+ _animate: false,
+ _time: 0,
+ _count: 0,
+
+ _requestFrame: function() {
+ var that = this;
+ DomEvent.requestAnimationFrame(function() {
+ that._requested = false;
+ if (!that._animate)
+ return;
+ that._requestFrame();
+ that._handleFrame();
+ }, this._element);
+ this._requested = true;
+ },
+
+ _handleFrame: function() {
+ paper = this._scope;
+ var now = Date.now() / 1000,
+ delta = this._before ? now - this._before : 0;
+ this._before = now;
+ this._handlingFrame = true;
+ this.emit('frame', new Base({
+ delta: delta,
+ time: this._time += delta,
+ count: this._count++
+ }));
+ if (this._stats)
+ this._stats.update();
+ this._handlingFrame = false;
+ this.update();
+ },
+
+ _animateItem: function(item, animate) {
+ var items = this._frameItems;
+ if (animate) {
+ items[item._id] = {
+ item: item,
+ time: 0,
+ count: 0
+ };
+ if (++this._frameItemCount === 1)
+ this.on('frame', this._handleFrameItems);
+ } else {
+ delete items[item._id];
+ if (--this._frameItemCount === 0) {
+ this.off('frame', this._handleFrameItems);
+ }
+ }
+ },
+
+ _handleFrameItems: function(event) {
+ for (var i in this._frameItems) {
+ var entry = this._frameItems[i];
+ entry.item.emit('frame', new Base(event, {
+ time: entry.time += event.delta,
+ count: entry.count++
+ }));
+ }
+ },
+
+ _update: function() {
+ this._project._needsUpdate = true;
+ if (this._handlingFrame)
+ return;
+ if (this._animate) {
+ this._handleFrame();
+ } else {
+ this.update();
+ }
+ },
+
+ _changed: function(flags) {
+ if (flags & 1)
+ this._project._needsUpdate = true;
+ },
+
+ _transform: function(matrix) {
+ this._matrix.concatenate(matrix);
+ this._bounds = null;
+ this._update();
+ },
+
+ getElement: function() {
+ return this._element;
+ },
+
+ getPixelRatio: function() {
+ return this._pixelRatio;
+ },
+
+ getResolution: function() {
+ return this._pixelRatio * 72;
+ },
+
+ getViewSize: function() {
+ var size = this._viewSize;
+ return new LinkedSize(size.width, size.height, this, 'setViewSize');
+ },
+
+ setViewSize: function() {
+ var size = Size.read(arguments),
+ delta = size.subtract(this._viewSize);
+ if (delta.isZero())
+ return;
+ this._viewSize.set(size.width, size.height);
+ this._setViewSize(size);
+ this._bounds = null;
+ this.emit('resize', {
+ size: size,
+ delta: delta
+ });
+ this._update();
+ },
+
+ _setViewSize: function(size) {
+ var element = this._element;
+ element.width = size.width;
+ element.height = size.height;
+ },
+
+ getBounds: function() {
+ if (!this._bounds)
+ this._bounds = this._matrix.inverted()._transformBounds(
+ new Rectangle(new Point(), this._viewSize));
+ return this._bounds;
+ },
+
+ getSize: function() {
+ return this.getBounds().getSize();
+ },
+
+ getCenter: function() {
+ return this.getBounds().getCenter();
+ },
+
+ setCenter: function() {
+ var center = Point.read(arguments);
+ this.scrollBy(center.subtract(this.getCenter()));
+ },
+
+ getZoom: function() {
+ return this._zoom;
+ },
+
+ setZoom: function(zoom) {
+ this._transform(new Matrix().scale(zoom / this._zoom,
+ this.getCenter()));
+ this._zoom = zoom;
+ },
+
+ isVisible: function() {
+ return DomElement.isInView(this._element);
+ },
+
+ scrollBy: function() {
+ this._transform(new Matrix().translate(Point.read(arguments).negate()));
+ },
+
+ play: function() {
+ this._animate = true;
+ if (!this._requested)
+ this._requestFrame();
+ },
+
+ pause: function() {
+ this._animate = false;
+ },
+
+ draw: function() {
+ this.update();
+ },
+
+ projectToView: function() {
+ return this._matrix._transformPoint(Point.read(arguments));
+ },
+
+ viewToProject: function() {
+ return this._matrix._inverseTransform(Point.read(arguments));
+ }
+
+}, {
+ statics: {
+ _views: [],
+ _viewsById: {},
+ _id: 0,
+
+ create: function(project, element) {
+ if (typeof element === 'string')
+ element = document.getElementById(element);
+ return new CanvasView(project, element);
+ }
+ }
+}, new function() {
+ var tool,
+ prevFocus,
+ tempFocus,
+ dragging = false;
+
+ function getView(event) {
+ var target = DomEvent.getTarget(event);
+ return target.getAttribute && View._viewsById[target.getAttribute('id')];
+ }
+
+ function viewToProject(view, event) {
+ return view.viewToProject(DomEvent.getOffset(event, view._element));
+ }
+
+ function updateFocus() {
+ if (!View._focused || !View._focused.isVisible()) {
+ for (var i = 0, l = View._views.length; i < l; i++) {
+ var view = View._views[i];
+ if (view && view.isVisible()) {
+ View._focused = tempFocus = view;
+ break;
+ }
+ }
+ }
+ }
+
+ function handleMouseMove(view, point, event) {
+ view._handleEvent('mousemove', point, event);
+ var tool = view._scope.tool;
+ if (tool) {
+ tool._handleEvent(dragging && tool.responds('mousedrag')
+ ? 'mousedrag' : 'mousemove', point, event);
+ }
+ view.update();
+ return tool;
+ }
+
+ var navigator = window.navigator,
+ mousedown, mousemove, mouseup;
+ if (navigator.pointerEnabled || navigator.msPointerEnabled) {
+ mousedown = 'pointerdown MSPointerDown';
+ mousemove = 'pointermove MSPointerMove';
+ mouseup = 'pointerup pointercancel MSPointerUp MSPointerCancel';
+ } else {
+ mousedown = 'touchstart';
+ mousemove = 'touchmove';
+ mouseup = 'touchend touchcancel';
+ if (!('ontouchstart' in window && navigator.userAgent.match(
+ /mobile|tablet|ip(ad|hone|od)|android|silk/i))) {
+ mousedown += ' mousedown';
+ mousemove += ' mousemove';
+ mouseup += ' mouseup';
+ }
+ }
+
+ var viewEvents = {
+ 'selectstart dragstart': function(event) {
+ if (dragging)
+ event.preventDefault();
+ }
+ };
+
+ var docEvents = {
+ mouseout: function(event) {
+ var view = View._focused,
+ target = DomEvent.getRelatedTarget(event);
+ if (view && (!target || target.nodeName === 'HTML'))
+ handleMouseMove(view, viewToProject(view, event), event);
+ },
+
+ scroll: updateFocus
+ };
+
+ viewEvents[mousedown] = function(event) {
+ var view = View._focused = getView(event),
+ point = viewToProject(view, event);
+ dragging = true;
+ view._handleEvent('mousedown', point, event);
+ if (tool = view._scope.tool)
+ tool._handleEvent('mousedown', point, event);
+ view.update();
+ };
+
+ docEvents[mousemove] = function(event) {
+ var view = View._focused;
+ if (!dragging) {
+ var target = getView(event);
+ if (target) {
+ if (view !== target)
+ handleMouseMove(view, viewToProject(view, event), event);
+ prevFocus = view;
+ view = View._focused = tempFocus = target;
+ } else if (tempFocus && tempFocus === view) {
+ view = View._focused = prevFocus;
+ updateFocus();
+ }
+ }
+ if (view) {
+ var point = viewToProject(view, event);
+ if (dragging || view.getBounds().contains(point))
+ tool = handleMouseMove(view, point, event);
+ }
+ };
+
+ docEvents[mouseup] = function(event) {
+ var view = View._focused;
+ if (!view || !dragging)
+ return;
+ var point = viewToProject(view, event);
+ dragging = false;
+ view._handleEvent('mouseup', point, event);
+ if (tool)
+ tool._handleEvent('mouseup', point, event);
+ view.update();
+ };
+
+ DomEvent.add(document, docEvents);
+
+ DomEvent.add(window, {
+ load: updateFocus
+ });
+
+ return {
+ _viewEvents: viewEvents,
+
+ _handleEvent: function() {},
+
+ statics: {
+ updateFocus: updateFocus
+ }
+ };
+});
+
+var CanvasView = View.extend({
+ _class: 'CanvasView',
+
+ initialize: function CanvasView(project, canvas) {
+ if (!(canvas instanceof HTMLCanvasElement)) {
+ var size = Size.read(arguments, 1);
+ if (size.isZero())
+ throw new Error(
+ 'Cannot create CanvasView with the provided argument: '
+ + [].slice.call(arguments, 1));
+ canvas = CanvasProvider.getCanvas(size);
+ }
+ this._context = canvas.getContext('2d');
+ this._eventCounters = {};
+ this._pixelRatio = 1;
+ if (!/^off|false$/.test(PaperScope.getAttribute(canvas, 'hidpi'))) {
+ var deviceRatio = window.devicePixelRatio || 1,
+ backingStoreRatio = DomElement.getPrefixed(this._context,
+ 'backingStorePixelRatio') || 1;
+ this._pixelRatio = deviceRatio / backingStoreRatio;
+ }
+ View.call(this, project, canvas);
+ },
+
+ _setViewSize: function(size) {
+ var element = this._element,
+ pixelRatio = this._pixelRatio,
+ width = size.width,
+ height = size.height;
+ element.width = width * pixelRatio;
+ element.height = height * pixelRatio;
+ if (pixelRatio !== 1) {
+ if (!PaperScope.hasAttribute(element, 'resize')) {
+ var style = element.style;
+ style.width = width + 'px';
+ style.height = height + 'px';
+ }
+ this._context.scale(pixelRatio, pixelRatio);
+ }
+ },
+
+ getPixelSize: function(size) {
+ var ctx = this._context,
+ prevFont = ctx.font;
+ ctx.font = size + ' serif';
+ size = parseFloat(ctx.font);
+ ctx.font = prevFont;
+ return size;
+ },
+
+ getTextWidth: function(font, lines) {
+ var ctx = this._context,
+ prevFont = ctx.font,
+ width = 0;
+ ctx.font = font;
+ for (var i = 0, l = lines.length; i < l; i++)
+ width = Math.max(width, ctx.measureText(lines[i]).width);
+ ctx.font = prevFont;
+ return width;
+ },
+
+ update: function() {
+ var project = this._project;
+ if (!project || !project._needsUpdate)
+ return false;
+ var ctx = this._context,
+ size = this._viewSize;
+ ctx.clearRect(0, 0, size.width + 1, size.height + 1);
+ project.draw(ctx, this._matrix, this._pixelRatio);
+ project._needsUpdate = false;
+ return true;
+ }
+}, new function() {
+
+ var downPoint,
+ lastPoint,
+ overPoint,
+ downItem,
+ lastItem,
+ overItem,
+ dragItem,
+ dblClick,
+ clickTime;
+
+ function callEvent(view, type, event, point, target, lastPoint) {
+ var item = target,
+ mouseEvent;
+
+ function call(obj) {
+ if (obj.responds(type)) {
+ if (!mouseEvent) {
+ mouseEvent = new MouseEvent(type, event, point, target,
+ lastPoint ? point.subtract(lastPoint) : null);
+ }
+ if (obj.emit(type, mouseEvent) && mouseEvent.isStopped) {
+ event.preventDefault();
+ return true;
+ }
+ }
+ }
+
+ while (item) {
+ if (call(item))
+ return true;
+ item = item.getParent();
+ }
+ if (call(view))
+ return true;
+ return false;
+ }
+
+ return {
+ _handleEvent: function(type, point, event) {
+ if (!this._eventCounters[type])
+ return;
+ var project = this._project,
+ hit = project.hitTest(point, {
+ tolerance: 0,
+ fill: true,
+ stroke: true
+ }),
+ item = hit && hit.item,
+ stopped = false;
+ switch (type) {
+ case 'mousedown':
+ stopped = callEvent(this, type, event, point, item);
+ dblClick = lastItem == item && (Date.now() - clickTime < 300);
+ downItem = lastItem = item;
+ downPoint = lastPoint = overPoint = point;
+ dragItem = !stopped && item;
+ while (dragItem && !dragItem.responds('mousedrag'))
+ dragItem = dragItem._parent;
+ break;
+ case 'mouseup':
+ stopped = callEvent(this, type, event, point, item, downPoint);
+ if (dragItem) {
+ if (lastPoint && !lastPoint.equals(point))
+ callEvent(this, 'mousedrag', event, point, dragItem,
+ lastPoint);
+ if (item !== dragItem) {
+ overPoint = point;
+ callEvent(this, 'mousemove', event, point, item,
+ overPoint);
+ }
+ }
+ if (!stopped && item && item === downItem) {
+ clickTime = Date.now();
+ callEvent(this, dblClick && downItem.responds('doubleclick')
+ ? 'doubleclick' : 'click', event, downPoint, item);
+ dblClick = false;
+ }
+ downItem = dragItem = null;
+ break;
+ case 'mousemove':
+ if (dragItem)
+ stopped = callEvent(this, 'mousedrag', event, point,
+ dragItem, lastPoint);
+ if (!stopped) {
+ if (item !== overItem)
+ overPoint = point;
+ stopped = callEvent(this, type, event, point, item,
+ overPoint);
+ }
+ lastPoint = overPoint = point;
+ if (item !== overItem) {
+ callEvent(this, 'mouseleave', event, point, overItem);
+ overItem = item;
+ callEvent(this, 'mouseenter', event, point, item);
+ }
+ break;
+ }
+ return stopped;
+ }
+ };
+});
+
+var Event = Base.extend({
+ _class: 'Event',
+
+ initialize: function Event(event) {
+ this.event = event;
+ },
+
+ isPrevented: false,
+ isStopped: false,
+
+ preventDefault: function() {
+ this.isPrevented = true;
+ this.event.preventDefault();
+ },
+
+ stopPropagation: function() {
+ this.isStopped = true;
+ this.event.stopPropagation();
+ },
+
+ stop: function() {
+ this.stopPropagation();
+ this.preventDefault();
+ },
+
+ getModifiers: function() {
+ return Key.modifiers;
+ }
+});
+
+var KeyEvent = Event.extend({
+ _class: 'KeyEvent',
+
+ initialize: function KeyEvent(down, key, character, event) {
+ Event.call(this, event);
+ this.type = down ? 'keydown' : 'keyup';
+ this.key = key;
+ this.character = character;
+ },
+
+ toString: function() {
+ return "{ type: '" + this.type
+ + "', key: '" + this.key
+ + "', character: '" + this.character
+ + "', modifiers: " + this.getModifiers()
+ + " }";
+ }
+});
+
+var Key = new function() {
+
+ var specialKeys = {
+ 8: 'backspace',
+ 9: 'tab',
+ 13: 'enter',
+ 16: 'shift',
+ 17: 'control',
+ 18: 'option',
+ 19: 'pause',
+ 20: 'caps-lock',
+ 27: 'escape',
+ 32: 'space',
+ 35: 'end',
+ 36: 'home',
+ 37: 'left',
+ 38: 'up',
+ 39: 'right',
+ 40: 'down',
+ 46: 'delete',
+ 91: 'command',
+ 93: 'command',
+ 224: 'command'
+ },
+
+ specialChars = {
+ 9: true,
+ 13: true,
+ 32: true
+ },
+
+ modifiers = new Base({
+ shift: false,
+ control: false,
+ option: false,
+ command: false,
+ capsLock: false,
+ space: false
+ }),
+
+ charCodeMap = {},
+ keyMap = {},
+ downCode;
+
+ function handleKey(down, keyCode, charCode, event) {
+ var character = charCode ? String.fromCharCode(charCode) : '',
+ specialKey = specialKeys[keyCode],
+ key = specialKey || character.toLowerCase(),
+ type = down ? 'keydown' : 'keyup',
+ view = View._focused,
+ scope = view && view.isVisible() && view._scope,
+ tool = scope && scope.tool,
+ name;
+ keyMap[key] = down;
+ if (specialKey && (name = Base.camelize(specialKey)) in modifiers)
+ modifiers[name] = down;
+ if (down) {
+ charCodeMap[keyCode] = charCode;
+ } else {
+ delete charCodeMap[keyCode];
+ }
+ if (tool && tool.responds(type)) {
+ paper = scope;
+ tool.emit(type, new KeyEvent(down, key, character, event));
+ if (view)
+ view.update();
+ }
+ }
+
+ DomEvent.add(document, {
+ keydown: function(event) {
+ var code = event.which || event.keyCode;
+ if (code in specialKeys || modifiers.command) {
+ handleKey(true, code,
+ code in specialChars || modifiers.command ? code : 0,
+ event);
+ } else {
+ downCode = code;
+ }
+ },
+
+ keypress: function(event) {
+ if (downCode != null) {
+ handleKey(true, downCode, event.which || event.keyCode, event);
+ downCode = null;
+ }
+ },
+
+ keyup: function(event) {
+ var code = event.which || event.keyCode;
+ if (code in charCodeMap)
+ handleKey(false, code, charCodeMap[code], event);
+ }
+ });
+
+ DomEvent.add(window, {
+ blur: function(event) {
+ for (var code in charCodeMap)
+ handleKey(false, code, charCodeMap[code], event);
+ }
+ });
+
+ return {
+ modifiers: modifiers,
+
+ isDown: function(key) {
+ return !!keyMap[key];
+ }
+ };
+};
+
+var MouseEvent = Event.extend({
+ _class: 'MouseEvent',
+
+ initialize: function MouseEvent(type, event, point, target, delta) {
+ Event.call(this, event);
+ this.type = type;
+ this.point = point;
+ this.target = target;
+ this.delta = delta;
+ },
+
+ toString: function() {
+ return "{ type: '" + this.type
+ + "', point: " + this.point
+ + ', target: ' + this.target
+ + (this.delta ? ', delta: ' + this.delta : '')
+ + ', modifiers: ' + this.getModifiers()
+ + ' }';
+ }
+});
+
+var ToolEvent = Event.extend({
+ _class: 'ToolEvent',
+ _item: null,
+
+ initialize: function ToolEvent(tool, type, event) {
+ this.tool = tool;
+ this.type = type;
+ this.event = event;
+ },
+
+ _choosePoint: function(point, toolPoint) {
+ return point ? point : toolPoint ? toolPoint.clone() : null;
+ },
+
+ getPoint: function() {
+ return this._choosePoint(this._point, this.tool._point);
+ },
+
+ setPoint: function(point) {
+ this._point = point;
+ },
+
+ getLastPoint: function() {
+ return this._choosePoint(this._lastPoint, this.tool._lastPoint);
+ },
+
+ setLastPoint: function(lastPoint) {
+ this._lastPoint = lastPoint;
+ },
+
+ getDownPoint: function() {
+ return this._choosePoint(this._downPoint, this.tool._downPoint);
+ },
+
+ setDownPoint: function(downPoint) {
+ this._downPoint = downPoint;
+ },
+
+ getMiddlePoint: function() {
+ if (!this._middlePoint && this.tool._lastPoint) {
+ return this.tool._point.add(this.tool._lastPoint).divide(2);
+ }
+ return this._middlePoint;
+ },
+
+ setMiddlePoint: function(middlePoint) {
+ this._middlePoint = middlePoint;
+ },
+
+ getDelta: function() {
+ return !this._delta && this.tool._lastPoint
+ ? this.tool._point.subtract(this.tool._lastPoint)
+ : this._delta;
+ },
+
+ setDelta: function(delta) {
+ this._delta = delta;
+ },
+
+ getCount: function() {
+ return /^mouse(down|up)$/.test(this.type)
+ ? this.tool._downCount
+ : this.tool._count;
+ },
+
+ setCount: function(count) {
+ this.tool[/^mouse(down|up)$/.test(this.type) ? 'downCount' : 'count']
+ = count;
+ },
+
+ getItem: function() {
+ if (!this._item) {
+ var result = this.tool._scope.project.hitTest(this.getPoint());
+ if (result) {
+ var item = result.item,
+ parent = item._parent;
+ while (/^(Group|CompoundPath)$/.test(parent._class)) {
+ item = parent;
+ parent = parent._parent;
+ }
+ this._item = item;
+ }
+ }
+ return this._item;
+ },
+
+ setItem: function(item) {
+ this._item = item;
+ },
+
+ toString: function() {
+ return '{ type: ' + this.type
+ + ', point: ' + this.getPoint()
+ + ', count: ' + this.getCount()
+ + ', modifiers: ' + this.getModifiers()
+ + ' }';
+ }
+});
+
+var Tool = PaperScopeItem.extend({
+ _class: 'Tool',
+ _list: 'tools',
+ _reference: 'tool',
+ _events: [ 'onActivate', 'onDeactivate', 'onEditOptions',
+ 'onMouseDown', 'onMouseUp', 'onMouseDrag', 'onMouseMove',
+ 'onKeyDown', 'onKeyUp' ],
+
+ initialize: function Tool(props) {
+ PaperScopeItem.call(this);
+ this._firstMove = true;
+ this._count = 0;
+ this._downCount = 0;
+ this._set(props);
+ },
+
+ getMinDistance: function() {
+ return this._minDistance;
+ },
+
+ setMinDistance: function(minDistance) {
+ this._minDistance = minDistance;
+ if (this._minDistance != null && this._maxDistance != null
+ && this._minDistance > this._maxDistance) {
+ this._maxDistance = this._minDistance;
+ }
+ },
+
+ getMaxDistance: function() {
+ return this._maxDistance;
+ },
+
+ setMaxDistance: function(maxDistance) {
+ this._maxDistance = maxDistance;
+ if (this._minDistance != null && this._maxDistance != null
+ && this._maxDistance < this._minDistance) {
+ this._minDistance = maxDistance;
+ }
+ },
+
+ getFixedDistance: function() {
+ return this._minDistance == this._maxDistance
+ ? this._minDistance : null;
+ },
+
+ setFixedDistance: function(distance) {
+ this._minDistance = distance;
+ this._maxDistance = distance;
+ },
+
+ _updateEvent: function(type, point, minDistance, maxDistance, start,
+ needsChange, matchMaxDistance) {
+ if (!start) {
+ if (minDistance != null || maxDistance != null) {
+ var minDist = minDistance != null ? minDistance : 0,
+ vector = point.subtract(this._point),
+ distance = vector.getLength();
+ if (distance < minDist)
+ return false;
+ var maxDist = maxDistance != null ? maxDistance : 0;
+ if (maxDist != 0) {
+ if (distance > maxDist) {
+ point = this._point.add(vector.normalize(maxDist));
+ } else if (matchMaxDistance) {
+ return false;
+ }
+ }
+ }
+ if (needsChange && point.equals(this._point))
+ return false;
+ }
+ this._lastPoint = start && type == 'mousemove' ? point : this._point;
+ this._point = point;
+ switch (type) {
+ case 'mousedown':
+ this._lastPoint = this._downPoint;
+ this._downPoint = this._point;
+ this._downCount++;
+ break;
+ case 'mouseup':
+ this._lastPoint = this._downPoint;
+ break;
+ }
+ this._count = start ? 0 : this._count + 1;
+ return true;
+ },
+
+ _fireEvent: function(type, event) {
+ var sets = paper.project._removeSets;
+ if (sets) {
+ if (type === 'mouseup')
+ sets.mousedrag = null;
+ var set = sets[type];
+ if (set) {
+ for (var id in set) {
+ var item = set[id];
+ for (var key in sets) {
+ var other = sets[key];
+ if (other && other != set)
+ delete other[item._id];
+ }
+ item.remove();
+ }
+ sets[type] = null;
+ }
+ }
+ return this.responds(type)
+ && this.emit(type, new ToolEvent(this, type, event));
+ },
+
+ _handleEvent: function(type, point, event) {
+ paper = this._scope;
+ var called = false;
+ switch (type) {
+ case 'mousedown':
+ this._updateEvent(type, point, null, null, true, false, false);
+ called = this._fireEvent(type, event);
+ break;
+ case 'mousedrag':
+ var needsChange = false,
+ matchMaxDistance = false;
+ while (this._updateEvent(type, point, this.minDistance,
+ this.maxDistance, false, needsChange, matchMaxDistance)) {
+ called = this._fireEvent(type, event) || called;
+ needsChange = true;
+ matchMaxDistance = true;
+ }
+ break;
+ case 'mouseup':
+ if (!point.equals(this._point)
+ && this._updateEvent('mousedrag', point, this.minDistance,
+ this.maxDistance, false, false, false)) {
+ called = this._fireEvent('mousedrag', event);
+ }
+ this._updateEvent(type, point, null, this.maxDistance, false,
+ false, false);
+ called = this._fireEvent(type, event) || called;
+ this._updateEvent(type, point, null, null, true, false, false);
+ this._firstMove = true;
+ break;
+ case 'mousemove':
+ while (this._updateEvent(type, point, this.minDistance,
+ this.maxDistance, this._firstMove, true, false)) {
+ called = this._fireEvent(type, event) || called;
+ this._firstMove = false;
+ }
+ break;
+ }
+ if (called)
+ event.preventDefault();
+ return called;
+ }
+
+});
+
+var Http = {
+ request: function(method, url, callback) {
+ var xhr = new (window.ActiveXObject || XMLHttpRequest)(
+ 'Microsoft.XMLHTTP');
+ xhr.open(method.toUpperCase(), url, true);
+ if ('overrideMimeType' in xhr)
+ xhr.overrideMimeType('text/plain');
+ xhr.onreadystatechange = function() {
+ if (xhr.readyState === 4) {
+ var status = xhr.status;
+ if (status === 0 || status === 200) {
+ callback.call(xhr, xhr.responseText);
+ } else {
+ throw new Error('Could not load ' + url + ' (Error '
+ + status + ')');
+ }
+ }
+ };
+ return xhr.send(null);
+ }
+};
+
+var CanvasProvider = {
+ canvases: [],
+
+ getCanvas: function(width, height) {
+ var canvas,
+ clear = true;
+ if (typeof width === 'object') {
+ height = width.height;
+ width = width.width;
+ }
+ if (this.canvases.length) {
+ canvas = this.canvases.pop();
+ } else {
+ canvas = document.createElement('canvas');
+ }
+ var ctx = canvas.getContext('2d');
+ if (canvas.width === width && canvas.height === height) {
+ if (clear)
+ ctx.clearRect(0, 0, width + 1, height + 1);
+ } else {
+ canvas.width = width;
+ canvas.height = height;
+ }
+ ctx.save();
+ return canvas;
+ },
+
+ getContext: function(width, height) {
+ return this.getCanvas(width, height).getContext('2d');
+ },
+
+ release: function(obj) {
+ var canvas = obj.canvas ? obj.canvas : obj;
+ canvas.getContext('2d').restore();
+ this.canvases.push(canvas);
+ }
+};
+
+var BlendMode = new function() {
+ var min = Math.min,
+ max = Math.max,
+ abs = Math.abs,
+ sr, sg, sb, sa,
+ br, bg, bb, ba,
+ dr, dg, db;
+
+ function getLum(r, g, b) {
+ return 0.2989 * r + 0.587 * g + 0.114 * b;
+ }
+
+ function setLum(r, g, b, l) {
+ var d = l - getLum(r, g, b);
+ dr = r + d;
+ dg = g + d;
+ db = b + d;
+ var l = getLum(dr, dg, db),
+ mn = min(dr, dg, db),
+ mx = max(dr, dg, db);
+ if (mn < 0) {
+ var lmn = l - mn;
+ dr = l + (dr - l) * l / lmn;
+ dg = l + (dg - l) * l / lmn;
+ db = l + (db - l) * l / lmn;
+ }
+ if (mx > 255) {
+ var ln = 255 - l,
+ mxl = mx - l;
+ dr = l + (dr - l) * ln / mxl;
+ dg = l + (dg - l) * ln / mxl;
+ db = l + (db - l) * ln / mxl;
+ }
+ }
+
+ function getSat(r, g, b) {
+ return max(r, g, b) - min(r, g, b);
+ }
+
+ function setSat(r, g, b, s) {
+ var col = [r, g, b],
+ mx = max(r, g, b),
+ mn = min(r, g, b),
+ md;
+ mn = mn === r ? 0 : mn === g ? 1 : 2;
+ mx = mx === r ? 0 : mx === g ? 1 : 2;
+ md = min(mn, mx) === 0 ? max(mn, mx) === 1 ? 2 : 1 : 0;
+ if (col[mx] > col[mn]) {
+ col[md] = (col[md] - col[mn]) * s / (col[mx] - col[mn]);
+ col[mx] = s;
+ } else {
+ col[md] = col[mx] = 0;
+ }
+ col[mn] = 0;
+ dr = col[0];
+ dg = col[1];
+ db = col[2];
+ }
+
+ var modes = {
+ multiply: function() {
+ dr = br * sr / 255;
+ dg = bg * sg / 255;
+ db = bb * sb / 255;
+ },
+
+ screen: function() {
+ dr = br + sr - (br * sr / 255);
+ dg = bg + sg - (bg * sg / 255);
+ db = bb + sb - (bb * sb / 255);
+ },
+
+ overlay: function() {
+ dr = br < 128 ? 2 * br * sr / 255 : 255 - 2 * (255 - br) * (255 - sr) / 255;
+ dg = bg < 128 ? 2 * bg * sg / 255 : 255 - 2 * (255 - bg) * (255 - sg) / 255;
+ db = bb < 128 ? 2 * bb * sb / 255 : 255 - 2 * (255 - bb) * (255 - sb) / 255;
+ },
+
+ 'soft-light': function() {
+ var t = sr * br / 255;
+ dr = t + br * (255 - (255 - br) * (255 - sr) / 255 - t) / 255;
+ t = sg * bg / 255;
+ dg = t + bg * (255 - (255 - bg) * (255 - sg) / 255 - t) / 255;
+ t = sb * bb / 255;
+ db = t + bb * (255 - (255 - bb) * (255 - sb) / 255 - t) / 255;
+ },
+
+ 'hard-light': function() {
+ dr = sr < 128 ? 2 * sr * br / 255 : 255 - 2 * (255 - sr) * (255 - br) / 255;
+ dg = sg < 128 ? 2 * sg * bg / 255 : 255 - 2 * (255 - sg) * (255 - bg) / 255;
+ db = sb < 128 ? 2 * sb * bb / 255 : 255 - 2 * (255 - sb) * (255 - bb) / 255;
+ },
+
+ 'color-dodge': function() {
+ dr = br === 0 ? 0 : sr === 255 ? 255 : min(255, 255 * br / (255 - sr));
+ dg = bg === 0 ? 0 : sg === 255 ? 255 : min(255, 255 * bg / (255 - sg));
+ db = bb === 0 ? 0 : sb === 255 ? 255 : min(255, 255 * bb / (255 - sb));
+ },
+
+ 'color-burn': function() {
+ dr = br === 255 ? 255 : sr === 0 ? 0 : max(0, 255 - (255 - br) * 255 / sr);
+ dg = bg === 255 ? 255 : sg === 0 ? 0 : max(0, 255 - (255 - bg) * 255 / sg);
+ db = bb === 255 ? 255 : sb === 0 ? 0 : max(0, 255 - (255 - bb) * 255 / sb);
+ },
+
+ darken: function() {
+ dr = br < sr ? br : sr;
+ dg = bg < sg ? bg : sg;
+ db = bb < sb ? bb : sb;
+ },
+
+ lighten: function() {
+ dr = br > sr ? br : sr;
+ dg = bg > sg ? bg : sg;
+ db = bb > sb ? bb : sb;
+ },
+
+ difference: function() {
+ dr = br - sr;
+ if (dr < 0)
+ dr = -dr;
+ dg = bg - sg;
+ if (dg < 0)
+ dg = -dg;
+ db = bb - sb;
+ if (db < 0)
+ db = -db;
+ },
+
+ exclusion: function() {
+ dr = br + sr * (255 - br - br) / 255;
+ dg = bg + sg * (255 - bg - bg) / 255;
+ db = bb + sb * (255 - bb - bb) / 255;
+ },
+
+ hue: function() {
+ setSat(sr, sg, sb, getSat(br, bg, bb));
+ setLum(dr, dg, db, getLum(br, bg, bb));
+ },
+
+ saturation: function() {
+ setSat(br, bg, bb, getSat(sr, sg, sb));
+ setLum(dr, dg, db, getLum(br, bg, bb));
+ },
+
+ luminosity: function() {
+ setLum(br, bg, bb, getLum(sr, sg, sb));
+ },
+
+ color: function() {
+ setLum(sr, sg, sb, getLum(br, bg, bb));
+ },
+
+ add: function() {
+ dr = min(br + sr, 255);
+ dg = min(bg + sg, 255);
+ db = min(bb + sb, 255);
+ },
+
+ subtract: function() {
+ dr = max(br - sr, 0);
+ dg = max(bg - sg, 0);
+ db = max(bb - sb, 0);
+ },
+
+ average: function() {
+ dr = (br + sr) / 2;
+ dg = (bg + sg) / 2;
+ db = (bb + sb) / 2;
+ },
+
+ negation: function() {
+ dr = 255 - abs(255 - sr - br);
+ dg = 255 - abs(255 - sg - bg);
+ db = 255 - abs(255 - sb - bb);
+ }
+ };
+
+ var nativeModes = this.nativeModes = Base.each([
+ 'source-over', 'source-in', 'source-out', 'source-atop',
+ 'destination-over', 'destination-in', 'destination-out',
+ 'destination-atop', 'lighter', 'darker', 'copy', 'xor'
+ ], function(mode) {
+ this[mode] = true;
+ }, {});
+
+ var ctx = CanvasProvider.getContext(1, 1);
+ Base.each(modes, function(func, mode) {
+ var darken = mode === 'darken',
+ ok = false;
+ ctx.save();
+ try {
+ ctx.fillStyle = darken ? '#300' : '#a00';
+ ctx.fillRect(0, 0, 1, 1);
+ ctx.globalCompositeOperation = mode;
+ if (ctx.globalCompositeOperation === mode) {
+ ctx.fillStyle = darken ? '#a00' : '#300';
+ ctx.fillRect(0, 0, 1, 1);
+ ok = ctx.getImageData(0, 0, 1, 1).data[0] !== darken ? 170 : 51;
+ }
+ } catch (e) {}
+ ctx.restore();
+ nativeModes[mode] = ok;
+ });
+ CanvasProvider.release(ctx);
+
+ this.process = function(mode, srcContext, dstContext, alpha, offset) {
+ var srcCanvas = srcContext.canvas,
+ normal = mode === 'normal';
+ if (normal || nativeModes[mode]) {
+ dstContext.save();
+ dstContext.setTransform(1, 0, 0, 1, 0, 0);
+ dstContext.globalAlpha = alpha;
+ if (!normal)
+ dstContext.globalCompositeOperation = mode;
+ dstContext.drawImage(srcCanvas, offset.x, offset.y);
+ dstContext.restore();
+ } else {
+ var process = modes[mode];
+ if (!process)
+ return;
+ var dstData = dstContext.getImageData(offset.x, offset.y,
+ srcCanvas.width, srcCanvas.height),
+ dst = dstData.data,
+ src = srcContext.getImageData(0, 0,
+ srcCanvas.width, srcCanvas.height).data;
+ for (var i = 0, l = dst.length; i < l; i += 4) {
+ sr = src[i];
+ br = dst[i];
+ sg = src[i + 1];
+ bg = dst[i + 1];
+ sb = src[i + 2];
+ bb = dst[i + 2];
+ sa = src[i + 3];
+ ba = dst[i + 3];
+ process();
+ var a1 = sa * alpha / 255,
+ a2 = 1 - a1;
+ dst[i] = a1 * dr + a2 * br;
+ dst[i + 1] = a1 * dg + a2 * bg;
+ dst[i + 2] = a1 * db + a2 * bb;
+ dst[i + 3] = sa * alpha + a2 * ba;
+ }
+ dstContext.putImageData(dstData, offset.x, offset.y);
+ }
+ };
+};
+
+var SVGStyles = Base.each({
+ fillColor: ['fill', 'color'],
+ strokeColor: ['stroke', 'color'],
+ strokeWidth: ['stroke-width', 'number'],
+ strokeCap: ['stroke-linecap', 'string'],
+ strokeJoin: ['stroke-linejoin', 'string'],
+ strokeScaling: ['vector-effect', 'lookup', {
+ true: 'none',
+ false: 'non-scaling-stroke'
+ }, function(item, value) {
+ return !value
+ && (item instanceof PathItem
+ || item instanceof Shape
+ || item instanceof TextItem);
+ }],
+ miterLimit: ['stroke-miterlimit', 'number'],
+ dashArray: ['stroke-dasharray', 'array'],
+ dashOffset: ['stroke-dashoffset', 'number'],
+ fontFamily: ['font-family', 'string'],
+ fontWeight: ['font-weight', 'string'],
+ fontSize: ['font-size', 'number'],
+ justification: ['text-anchor', 'lookup', {
+ left: 'start',
+ center: 'middle',
+ right: 'end'
+ }],
+ opacity: ['opacity', 'number'],
+ blendMode: ['mix-blend-mode', 'string']
+}, function(entry, key) {
+ var part = Base.capitalize(key),
+ lookup = entry[2];
+ this[key] = {
+ type: entry[1],
+ property: key,
+ attribute: entry[0],
+ toSVG: lookup,
+ fromSVG: lookup && Base.each(lookup, function(value, name) {
+ this[value] = name;
+ }, {}),
+ exportFilter: entry[3],
+ get: 'get' + part,
+ set: 'set' + part
+ };
+}, {});
+
+var SVGNamespaces = {
+ href: 'http://www.w3.org/1999/xlink',
+ xlink: 'http://www.w3.org/2000/xmlns'
+};
+
+new function() {
+ var formatter;
+
+ function setAttributes(node, attrs) {
+ for (var key in attrs) {
+ var val = attrs[key],
+ namespace = SVGNamespaces[key];
+ if (typeof val === 'number')
+ val = formatter.number(val);
+ if (namespace) {
+ node.setAttributeNS(namespace, key, val);
+ } else {
+ node.setAttribute(key, val);
+ }
+ }
+ return node;
+ }
+
+ function createElement(tag, attrs) {
+ return setAttributes(
+ document.createElementNS('http://www.w3.org/2000/svg', tag), attrs);
+ }
+
+ function getTransform(matrix, coordinates, center) {
+ var attrs = new Base(),
+ trans = matrix.getTranslation();
+ if (coordinates) {
+ matrix = matrix.shiftless();
+ var point = matrix._inverseTransform(trans);
+ attrs[center ? 'cx' : 'x'] = point.x;
+ attrs[center ? 'cy' : 'y'] = point.y;
+ trans = null;
+ }
+ if (!matrix.isIdentity()) {
+ var decomposed = matrix.decompose();
+ if (decomposed && !decomposed.shearing) {
+ var parts = [],
+ angle = decomposed.rotation,
+ scale = decomposed.scaling;
+ if (trans && !trans.isZero())
+ parts.push('translate(' + formatter.point(trans) + ')');
+ if (!Numerical.isZero(scale.x - 1)
+ || !Numerical.isZero(scale.y - 1))
+ parts.push('scale(' + formatter.point(scale) +')');
+ if (angle)
+ parts.push('rotate(' + formatter.number(angle) + ')');
+ attrs.transform = parts.join(' ');
+ } else {
+ attrs.transform = 'matrix(' + matrix.getValues().join(',') + ')';
+ }
+ }
+ return attrs;
+ }
+
+ function exportGroup(item, options) {
+ var attrs = getTransform(item._matrix),
+ children = item._children;
+ var node = createElement('g', attrs);
+ for (var i = 0, l = children.length; i < l; i++) {
+ var child = children[i];
+ var childNode = exportSVG(child, options);
+ if (childNode) {
+ if (child.isClipMask()) {
+ var clip = createElement('clipPath');
+ clip.appendChild(childNode);
+ setDefinition(child, clip, 'clip');
+ setAttributes(node, {
+ 'clip-path': 'url(#' + clip.id + ')'
+ });
+ } else {
+ node.appendChild(childNode);
+ }
+ }
+ }
+ return node;
+ }
+
+ function exportRaster(item) {
+ var attrs = getTransform(item._matrix, true),
+ size = item.getSize();
+ attrs.x -= size.width / 2;
+ attrs.y -= size.height / 2;
+ attrs.width = size.width;
+ attrs.height = size.height;
+ attrs.href = item.toDataURL();
+ return createElement('image', attrs);
+ }
+
+ function exportPath(item, options) {
+ if (options.matchShapes) {
+ var shape = item.toShape(false);
+ if (shape)
+ return exportShape(shape, options);
+ }
+ var segments = item._segments,
+ type,
+ attrs = getTransform(item._matrix);
+ if (segments.length === 0)
+ return null;
+ if (item.isPolygon()) {
+ if (segments.length >= 3) {
+ type = item._closed ? 'polygon' : 'polyline';
+ var parts = [];
+ for(i = 0, l = segments.length; i < l; i++)
+ parts.push(formatter.point(segments[i]._point));
+ attrs.points = parts.join(' ');
+ } else {
+ type = 'line';
+ var first = segments[0]._point,
+ last = segments[segments.length - 1]._point;
+ attrs.set({
+ x1: first.x,
+ y1: first.y,
+ x2: last.x,
+ y2: last.y
+ });
+ }
+ } else {
+ type = 'path';
+ attrs.d = item.getPathData(null, options.precision);
+ }
+ return createElement(type, attrs);
+ }
+
+ function exportShape(item) {
+ var type = item._type,
+ radius = item._radius,
+ attrs = getTransform(item._matrix, true, type !== 'rectangle');
+ if (type === 'rectangle') {
+ type = 'rect';
+ var size = item._size,
+ width = size.width,
+ height = size.height;
+ attrs.x -= width / 2;
+ attrs.y -= height / 2;
+ attrs.width = width;
+ attrs.height = height;
+ if (radius.isZero())
+ radius = null;
+ }
+ if (radius) {
+ if (type === 'circle') {
+ attrs.r = radius;
+ } else {
+ attrs.rx = radius.width;
+ attrs.ry = radius.height;
+ }
+ }
+ return createElement(type, attrs);
+ }
+
+ function exportCompoundPath(item, options) {
+ var attrs = getTransform(item._matrix);
+ var data = item.getPathData(null, options.precision);
+ if (data)
+ attrs.d = data;
+ return createElement('path', attrs);
+ }
+
+ function exportPlacedSymbol(item, options) {
+ var attrs = getTransform(item._matrix, true),
+ symbol = item.getSymbol(),
+ symbolNode = getDefinition(symbol, 'symbol'),
+ definition = symbol.getDefinition(),
+ bounds = definition.getBounds();
+ if (!symbolNode) {
+ symbolNode = createElement('symbol', {
+ viewBox: formatter.rectangle(bounds)
+ });
+ symbolNode.appendChild(exportSVG(definition, options));
+ setDefinition(symbol, symbolNode, 'symbol');
+ }
+ attrs.href = '#' + symbolNode.id;
+ attrs.x += bounds.x;
+ attrs.y += bounds.y;
+ attrs.width = formatter.number(bounds.width);
+ attrs.height = formatter.number(bounds.height);
+ attrs.overflow = 'visible';
+ return createElement('use', attrs);
+ }
+
+ function exportGradient(color) {
+ var gradientNode = getDefinition(color, 'color');
+ if (!gradientNode) {
+ var gradient = color.getGradient(),
+ radial = gradient._radial,
+ origin = color.getOrigin().transform(),
+ destination = color.getDestination().transform(),
+ attrs;
+ if (radial) {
+ attrs = {
+ cx: origin.x,
+ cy: origin.y,
+ r: origin.getDistance(destination)
+ };
+ var highlight = color.getHighlight();
+ if (highlight) {
+ highlight = highlight.transform();
+ attrs.fx = highlight.x;
+ attrs.fy = highlight.y;
+ }
+ } else {
+ attrs = {
+ x1: origin.x,
+ y1: origin.y,
+ x2: destination.x,
+ y2: destination.y
+ };
+ }
+ attrs.gradientUnits = 'userSpaceOnUse';
+ gradientNode = createElement(
+ (radial ? 'radial' : 'linear') + 'Gradient', attrs);
+ var stops = gradient._stops;
+ for (var i = 0, l = stops.length; i < l; i++) {
+ var stop = stops[i],
+ stopColor = stop._color,
+ alpha = stopColor.getAlpha();
+ attrs = {
+ offset: stop._rampPoint,
+ 'stop-color': stopColor.toCSS(true)
+ };
+ if (alpha < 1)
+ attrs['stop-opacity'] = alpha;
+ gradientNode.appendChild(createElement('stop', attrs));
+ }
+ setDefinition(color, gradientNode, 'color');
+ }
+ return 'url(#' + gradientNode.id + ')';
+ }
+
+ function exportText(item) {
+ var node = createElement('text', getTransform(item._matrix, true));
+ node.textContent = item._content;
+ return node;
+ }
+
+ var exporters = {
+ Group: exportGroup,
+ Layer: exportGroup,
+ Raster: exportRaster,
+ Path: exportPath,
+ Shape: exportShape,
+ CompoundPath: exportCompoundPath,
+ PlacedSymbol: exportPlacedSymbol,
+ PointText: exportText
+ };
+
+ function applyStyle(item, node, isRoot) {
+ var attrs = {},
+ parent = !isRoot && item.getParent();
+
+ if (item._name != null)
+ attrs.id = item._name;
+
+ Base.each(SVGStyles, function(entry) {
+ var get = entry.get,
+ type = entry.type,
+ value = item[get]();
+ if (entry.exportFilter
+ ? entry.exportFilter(item, value)
+ : !parent || !Base.equals(parent[get](), value)) {
+ if (type === 'color' && value != null) {
+ var alpha = value.getAlpha();
+ if (alpha < 1)
+ attrs[entry.attribute + '-opacity'] = alpha;
+ }
+ attrs[entry.attribute] = value == null
+ ? 'none'
+ : type === 'number'
+ ? formatter.number(value)
+ : type === 'color'
+ ? value.gradient
+ ? exportGradient(value, item)
+ : value.toCSS(true)
+ : type === 'array'
+ ? value.join(',')
+ : type === 'lookup'
+ ? entry.toSVG[value]
+ : value;
+ }
+ });
+
+ if (attrs.opacity === 1)
+ delete attrs.opacity;
+
+ if (!item._visible)
+ attrs.visibility = 'hidden';
+
+ return setAttributes(node, attrs);
+ }
+
+ var definitions;
+ function getDefinition(item, type) {
+ if (!definitions)
+ definitions = { ids: {}, svgs: {} };
+ return item && definitions.svgs[type + '-' + item._id];
+ }
+
+ function setDefinition(item, node, type) {
+ if (!definitions)
+ getDefinition();
+ var id = definitions.ids[type] = (definitions.ids[type] || 0) + 1;
+ node.id = type + '-' + id;
+ definitions.svgs[type + '-' + item._id] = node;
+ }
+
+ function exportDefinitions(node, options) {
+ var svg = node,
+ defs = null;
+ if (definitions) {
+ svg = node.nodeName.toLowerCase() === 'svg' && node;
+ for (var i in definitions.svgs) {
+ if (!defs) {
+ if (!svg) {
+ svg = createElement('svg');
+ svg.appendChild(node);
+ }
+ defs = svg.insertBefore(createElement('defs'),
+ svg.firstChild);
+ }
+ defs.appendChild(definitions.svgs[i]);
+ }
+ definitions = null;
+ }
+ return options.asString
+ ? new XMLSerializer().serializeToString(svg)
+ : svg;
+ }
+
+ function exportSVG(item, options, isRoot) {
+ var exporter = exporters[item._class],
+ node = exporter && exporter(item, options);
+ if (node) {
+ var onExport = options.onExport;
+ if (onExport)
+ node = onExport(item, node, options) || node;
+ var data = JSON.stringify(item._data);
+ if (data && data !== '{}' && data !== 'null')
+ node.setAttribute('data-paper-data', data);
+ }
+ return node && applyStyle(item, node, isRoot);
+ }
+
+ function setOptions(options) {
+ if (!options)
+ options = {};
+ formatter = new Formatter(options.precision);
+ return options;
+ }
+
+ Item.inject({
+ exportSVG: function(options) {
+ options = setOptions(options);
+ return exportDefinitions(exportSVG(this, options, true), options);
+ }
+ });
+
+ Project.inject({
+ exportSVG: function(options) {
+ options = setOptions(options);
+ var layers = this.layers,
+ view = this.getView(),
+ size = view.getViewSize(),
+ node = createElement('svg', {
+ x: 0,
+ y: 0,
+ width: size.width,
+ height: size.height,
+ version: '1.1',
+ xmlns: 'http://www.w3.org/2000/svg',
+ 'xmlns:xlink': 'http://www.w3.org/1999/xlink'
+ }),
+ parent = node,
+ matrix = view._matrix;
+ if (!matrix.isIdentity())
+ parent = node.appendChild(
+ createElement('g', getTransform(matrix)));
+ for (var i = 0, l = layers.length; i < l; i++)
+ parent.appendChild(exportSVG(layers[i], options, true));
+ return exportDefinitions(node, options);
+ }
+ });
+};
+
+new function() {
+
+ function getValue(node, name, isString, allowNull) {
+ var namespace = SVGNamespaces[name],
+ value = namespace
+ ? node.getAttributeNS(namespace, name)
+ : node.getAttribute(name);
+ if (value === 'null')
+ value = null;
+ return value == null
+ ? allowNull
+ ? null
+ : isString
+ ? ''
+ : 0
+ : isString
+ ? value
+ : parseFloat(value);
+ }
+
+ function getPoint(node, x, y, allowNull) {
+ x = getValue(node, x, false, allowNull);
+ y = getValue(node, y, false, allowNull);
+ return allowNull && (x == null || y == null) ? null
+ : new Point(x, y);
+ }
+
+ function getSize(node, w, h, allowNull) {
+ w = getValue(node, w, false, allowNull);
+ h = getValue(node, h, false, allowNull);
+ return allowNull && (w == null || h == null) ? null
+ : new Size(w, h);
+ }
+
+ function convertValue(value, type, lookup) {
+ return value === 'none'
+ ? null
+ : type === 'number'
+ ? parseFloat(value)
+ : type === 'array'
+ ? value ? value.split(/[\s,]+/g).map(parseFloat) : []
+ : type === 'color'
+ ? getDefinition(value) || value
+ : type === 'lookup'
+ ? lookup[value]
+ : value;
+ }
+
+ function importGroup(node, type, options, isRoot) {
+ var nodes = node.childNodes,
+ isClip = type === 'clippath',
+ item = new Group(),
+ project = item._project,
+ currentStyle = project._currentStyle,
+ children = [];
+ if (!isClip) {
+ item = applyAttributes(item, node, isRoot);
+ project._currentStyle = item._style.clone();
+ }
+ for (var i = 0, l = nodes.length; i < l; i++) {
+ var childNode = nodes[i],
+ child;
+ if (childNode.nodeType === 1
+ && (child = importSVG(childNode, options, false))
+ && !(child instanceof Symbol))
+ children.push(child);
+ }
+ item.addChildren(children);
+ if (isClip)
+ item = applyAttributes(item.reduce(), node, isRoot);
+ project._currentStyle = currentStyle;
+ if (isClip || type === 'defs') {
+ item.remove();
+ item = null;
+ }
+ return item;
+ }
+
+ function importPoly(node, type) {
+ var coords = node.getAttribute('points').match(
+ /[+-]?(?:\d*\.\d+|\d+\.?)(?:[eE][+-]?\d+)?/g),
+ points = [];
+ for (var i = 0, l = coords.length; i < l; i += 2)
+ points.push(new Point(
+ parseFloat(coords[i]),
+ parseFloat(coords[i + 1])));
+ var path = new Path(points);
+ if (type === 'polygon')
+ path.closePath();
+ return path;
+ }
+
+ function importPath(node) {
+ var data = node.getAttribute('d'),
+ param = { pathData: data };
+ return (data.match(/m/gi) || []).length > 1 || /z\S+/i.test(data)
+ ? new CompoundPath(param)
+ : new Path(param);
+ }
+
+ function importGradient(node, type) {
+ var id = (getValue(node, 'href', true) || '').substring(1),
+ isRadial = type === 'radialgradient',
+ gradient;
+ if (id) {
+ gradient = definitions[id].getGradient();
+ } else {
+ var nodes = node.childNodes,
+ stops = [];
+ for (var i = 0, l = nodes.length; i < l; i++) {
+ var child = nodes[i];
+ if (child.nodeType === 1)
+ stops.push(applyAttributes(new GradientStop(), child));
+ }
+ gradient = new Gradient(stops, isRadial);
+ }
+ var origin, destination, highlight;
+ if (isRadial) {
+ origin = getPoint(node, 'cx', 'cy');
+ destination = origin.add(getValue(node, 'r'), 0);
+ highlight = getPoint(node, 'fx', 'fy', true);
+ } else {
+ origin = getPoint(node, 'x1', 'y1');
+ destination = getPoint(node, 'x2', 'y2');
+ }
+ applyAttributes(
+ new Color(gradient, origin, destination, highlight), node);
+ return null;
+ }
+
+ var importers = {
+ '#document': function (node, type, options, isRoot) {
+ var nodes = node.childNodes;
+ for (var i = 0, l = nodes.length; i < l; i++) {
+ var child = nodes[i];
+ if (child.nodeType === 1) {
+ var next = child.nextSibling;
+ document.body.appendChild(child);
+ var item = importSVG(child, options, isRoot);
+ if (next) {
+ node.insertBefore(child, next);
+ } else {
+ node.appendChild(child);
+ }
+ return item;
+ }
+ }
+ },
+ g: importGroup,
+ svg: importGroup,
+ clippath: importGroup,
+ polygon: importPoly,
+ polyline: importPoly,
+ path: importPath,
+ lineargradient: importGradient,
+ radialgradient: importGradient,
+
+ image: function (node) {
+ var raster = new Raster(getValue(node, 'href', true));
+ raster.on('load', function() {
+ var size = getSize(node, 'width', 'height');
+ this.setSize(size);
+ var center = this._matrix._transformPoint(
+ getPoint(node, 'x', 'y').add(size.divide(2)));
+ this.translate(center);
+ });
+ return raster;
+ },
+
+ symbol: function(node, type, options, isRoot) {
+ return new Symbol(importGroup(node, type, options, isRoot), true);
+ },
+
+ defs: importGroup,
+
+ use: function(node) {
+ var id = (getValue(node, 'href', true) || '').substring(1),
+ definition = definitions[id],
+ point = getPoint(node, 'x', 'y');
+ return definition
+ ? definition instanceof Symbol
+ ? definition.place(point)
+ : definition.clone().translate(point)
+ : null;
+ },
+
+ circle: function(node) {
+ return new Shape.Circle(getPoint(node, 'cx', 'cy'),
+ getValue(node, 'r'));
+ },
+
+ ellipse: function(node) {
+ return new Shape.Ellipse({
+ center: getPoint(node, 'cx', 'cy'),
+ radius: getSize(node, 'rx', 'ry')
+ });
+ },
+
+ rect: function(node) {
+ var point = getPoint(node, 'x', 'y'),
+ size = getSize(node, 'width', 'height'),
+ radius = getSize(node, 'rx', 'ry');
+ return new Shape.Rectangle(new Rectangle(point, size), radius);
+ },
+
+ line: function(node) {
+ return new Path.Line(getPoint(node, 'x1', 'y1'),
+ getPoint(node, 'x2', 'y2'));
+ },
+
+ text: function(node) {
+ var text = new PointText(getPoint(node, 'x', 'y')
+ .add(getPoint(node, 'dx', 'dy')));
+ text.setContent(node.textContent.trim() || '');
+ return text;
+ }
+ };
+
+ function applyTransform(item, value, name, node) {
+ var transforms = (node.getAttribute(name) || '').split(/\)\s*/g),
+ matrix = new Matrix();
+ for (var i = 0, l = transforms.length; i < l; i++) {
+ var transform = transforms[i];
+ if (!transform)
+ break;
+ var parts = transform.split(/\(\s*/),
+ command = parts[0],
+ v = parts[1].split(/[\s,]+/g);
+ for (var j = 0, m = v.length; j < m; j++)
+ v[j] = parseFloat(v[j]);
+ switch (command) {
+ case 'matrix':
+ matrix.concatenate(
+ new Matrix(v[0], v[1], v[2], v[3], v[4], v[5]));
+ break;
+ case 'rotate':
+ matrix.rotate(v[0], v[1], v[2]);
+ break;
+ case 'translate':
+ matrix.translate(v[0], v[1]);
+ break;
+ case 'scale':
+ matrix.scale(v);
+ break;
+ case 'skewX':
+ matrix.skew(v[0], 0);
+ break;
+ case 'skewY':
+ matrix.skew(0, v[0]);
+ break;
+ }
+ }
+ item.transform(matrix);
+ }
+
+ function applyOpacity(item, value, name) {
+ var color = item[name === 'fill-opacity' ? 'getFillColor'
+ : 'getStrokeColor']();
+ if (color)
+ color.setAlpha(parseFloat(value));
+ }
+
+ var attributes = Base.each(SVGStyles, function(entry) {
+ this[entry.attribute] = function(item, value) {
+ item[entry.set](convertValue(value, entry.type, entry.fromSVG));
+ if (entry.type === 'color' && item instanceof Shape) {
+ var color = item[entry.get]();
+ if (color)
+ color.transform(new Matrix().translate(
+ item.getPosition(true).negate()));
+ }
+ };
+ }, {
+ id: function(item, value) {
+ definitions[value] = item;
+ if (item.setName)
+ item.setName(value);
+ },
+
+ 'clip-path': function(item, value) {
+ var clip = getDefinition(value);
+ if (clip) {
+ clip = clip.clone();
+ clip.setClipMask(true);
+ if (item instanceof Group) {
+ item.insertChild(0, clip);
+ } else {
+ return new Group(clip, item);
+ }
+ }
+ },
+
+ gradientTransform: applyTransform,
+ transform: applyTransform,
+
+ 'fill-opacity': applyOpacity,
+ 'stroke-opacity': applyOpacity,
+
+ visibility: function(item, value) {
+ item.setVisible(value === 'visible');
+ },
+
+ display: function(item, value) {
+ item.setVisible(value !== null);
+ },
+
+ 'stop-color': function(item, value) {
+ if (item.setColor)
+ item.setColor(value);
+ },
+
+ 'stop-opacity': function(item, value) {
+ if (item._color)
+ item._color.setAlpha(parseFloat(value));
+ },
+
+ offset: function(item, value) {
+ var percentage = value.match(/(.*)%$/);
+ item.setRampPoint(percentage
+ ? percentage[1] / 100
+ : parseFloat(value));
+ },
+
+ viewBox: function(item, value, name, node, styles) {
+ var rect = new Rectangle(convertValue(value, 'array')),
+ size = getSize(node, 'width', 'height', true);
+ if (item instanceof Group) {
+ var scale = size ? rect.getSize().divide(size) : 1,
+ matrix = new Matrix().translate(rect.getPoint()).scale(scale);
+ item.transform(matrix.inverted());
+ } else if (item instanceof Symbol) {
+ if (size)
+ rect.setSize(size);
+ var clip = getAttribute(node, 'overflow', styles) != 'visible',
+ group = item._definition;
+ if (clip && !rect.contains(group.getBounds())) {
+ clip = new Shape.Rectangle(rect).transform(group._matrix);
+ clip.setClipMask(true);
+ group.addChild(clip);
+ }
+ }
+ }
+ });
+
+ function getAttribute(node, name, styles) {
+ var attr = node.attributes[name],
+ value = attr && attr.value;
+ if (!value) {
+ var style = Base.camelize(name);
+ value = node.style[style];
+ if (!value && styles.node[style] !== styles.parent[style])
+ value = styles.node[style];
+ }
+ return !value
+ ? undefined
+ : value === 'none'
+ ? null
+ : value;
+ }
+
+ function applyAttributes(item, node, isRoot) {
+ var styles = {
+ node: DomElement.getStyles(node) || {},
+ parent: !isRoot && DomElement.getStyles(node.parentNode) || {}
+ };
+ Base.each(attributes, function(apply, name) {
+ var value = getAttribute(node, name, styles);
+ if (value !== undefined)
+ item = Base.pick(apply(item, value, name, node, styles), item);
+ });
+ return item;
+ }
+
+ var definitions = {};
+ function getDefinition(value) {
+ var match = value && value.match(/\((?:#|)([^)']+)/);
+ return match && definitions[match[1]];
+ }
+
+ function importSVG(source, options, isRoot) {
+ if (!source)
+ return null;
+ if (!options) {
+ options = {};
+ } else if (typeof options === 'function') {
+ options = { onLoad: options };
+ }
+
+ var node = source,
+ scope = paper;
+
+ function onLoadCallback(svg) {
+ paper = scope;
+ var item = importSVG(svg, options, isRoot),
+ onLoad = options.onLoad,
+ view = scope.project && scope.getView();
+ if (onLoad)
+ onLoad.call(this, item);
+ view.update();
+ }
+
+ if (isRoot) {
+ if (typeof source === 'string' && !/^.* 0 ) {
+
+ this.addObject( scene.children[ 0 ] );
+
+ }
+
+ this.signals.sceneGraphChanged.active = true;
+ this.signals.sceneGraphChanged.dispatch();
+
+ },
+
+ //
+
+ addObject: function ( object ) {
+
+ var scope = this;
+
+ object.traverse( function ( child ) {
+
+ if ( child.geometry !== undefined ) scope.addGeometry( child.geometry );
+ if ( child.material !== undefined ) scope.addMaterial( child.material );
+
+ scope.addHelper( child );
+
+ } );
+
+ this.scene.add( object );
+
+ this.signals.objectAdded.dispatch( object );
+ this.signals.sceneGraphChanged.dispatch();
+
+ },
+
+ moveObject: function ( object, parent, before ) {
+
+ if ( parent === undefined ) {
+
+ parent = this.scene;
+
+ }
+
+ parent.add( object );
+
+ // sort children array
+
+ if ( before !== undefined ) {
+
+ var index = parent.children.indexOf( before );
+ parent.children.splice( index, 0, object );
+ parent.children.pop();
+
+ }
+
+ this.signals.sceneGraphChanged.dispatch();
+
+ },
+
+ nameObject: function ( object, name ) {
+
+ object.name = name;
+ this.signals.sceneGraphChanged.dispatch();
+
+ },
+
+ removeObject: function ( object ) {
+
+ if ( object.parent === undefined ) return; // avoid deleting the camera or scene
+
+ var scope = this;
+
+ object.traverse( function ( child ) {
+
+ scope.removeHelper( child );
+
+ } );
+
+ object.parent.remove( object );
+
+ this.signals.objectRemoved.dispatch( object );
+ this.signals.sceneGraphChanged.dispatch();
+
+ },
+
+ addGeometry: function ( geometry ) {
+
+ this.geometries[ geometry.uuid ] = geometry;
+
+ },
+
+ setGeometryName: function ( geometry, name ) {
+
+ geometry.name = name;
+ this.signals.sceneGraphChanged.dispatch();
+
+ },
+
+ addMaterial: function ( material ) {
+
+ this.materials[ material.uuid ] = material;
+
+ },
+
+ setMaterialName: function ( material, name ) {
+
+ material.name = name;
+ this.signals.sceneGraphChanged.dispatch();
+
+ },
+
+ addTexture: function ( texture ) {
+
+ this.textures[ texture.uuid ] = texture;
+
+ },
+
+ //
+
+ addHelper: function () {
+
+ var geometry = new THREE.SphereGeometry( 20, 4, 2 );
+ var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
+
+ return function ( object ) {
+
+ var helper;
+
+ if ( object instanceof THREE.Camera ) {
+
+ helper = new THREE.CameraHelper( object, 10 );
+
+ } else if ( object instanceof THREE.PointLight ) {
+
+ helper = new THREE.PointLightHelper( object, 10 );
+
+ } else if ( object instanceof THREE.DirectionalLight ) {
+
+ helper = new THREE.DirectionalLightHelper( object, 20 );
+
+ } else if ( object instanceof THREE.SpotLight ) {
+
+ helper = new THREE.SpotLightHelper( object, 10 );
+
+ } else if ( object instanceof THREE.HemisphereLight ) {
+
+ helper = new THREE.HemisphereLightHelper( object, 10 );
+
+ } else if ( object instanceof THREE.SkinnedMesh ) {
+
+ helper = new THREE.SkeletonHelper( object );
+
+ } else {
+
+ // no helper for this object type
+ return;
+
+ }
+
+ var picker = new THREE.Mesh( geometry, material );
+ picker.name = 'picker';
+ picker.userData.object = object;
+ picker.visible = false;
+ helper.add( picker );
+
+ this.sceneHelpers.add( helper );
+ this.helpers[ object.id ] = helper;
+
+ this.signals.helperAdded.dispatch( helper );
+
+ };
+
+ }(),
+
+ removeHelper: function ( object ) {
+
+ if ( this.helpers[ object.id ] !== undefined ) {
+
+ var helper = this.helpers[ object.id ];
+ helper.parent.remove( helper );
+
+ delete this.helpers[ object.id ];
+
+ this.signals.helperRemoved.dispatch( helper );
+
+ }
+
+ },
+
+ //
+
+ addScript: function ( object, script ) {
+
+ if ( this.scripts[ object.uuid ] === undefined ) {
+
+ this.scripts[ object.uuid ] = [];
+
+ }
+
+ this.scripts[ object.uuid ].push( script );
+
+ this.signals.scriptAdded.dispatch( script );
+
+ },
+
+ removeScript: function ( object, script ) {
+
+ if ( this.scripts[ object.uuid ] === undefined ) return;
+
+ var index = this.scripts[ object.uuid ].indexOf( script );
+
+ if ( index !== - 1 ) {
+
+ this.scripts[ object.uuid ].splice( index, 1 );
+
+ }
+
+ this.signals.scriptRemoved.dispatch( script );
+
+ },
+
+ //
+
+ select: function ( object ) {
+
+ if ( this.selected === object ) return;
+
+ var uuid = null;
+
+ if ( object !== null ) {
+
+ uuid = object.uuid;
+
+ }
+
+ this.selected = object;
+
+ this.config.setKey( 'selected', uuid );
+ this.signals.objectSelected.dispatch( object );
+
+ },
+
+ selectById: function ( id ) {
+
+ if ( id === this.camera.id ) {
+
+ this.select( this.camera );
+ return;
+
+ }
+
+ this.select( this.scene.getObjectById( id, true ) );
+
+ },
+
+ selectByUuid: function ( uuid ) {
+
+ var scope = this;
+
+ this.scene.traverse( function ( child ) {
+
+ if ( child.uuid === uuid ) {
+
+ scope.select( child );
+
+ }
+
+ } );
+
+ },
+
+ deselect: function () {
+
+ this.select( null );
+
+ },
+
+ focus: function ( object ) {
+
+ this.signals.objectFocused.dispatch( object );
+
+ },
+
+ focusById: function ( id ) {
+
+ this.focus( this.scene.getObjectById( id, true ) );
+
+ },
+
+ clear: function () {
+
+ this.camera.position.set( 500, 250, 500 );
+ this.camera.lookAt( new THREE.Vector3() );
+
+ var objects = this.scene.children;
+
+ while ( objects.length > 0 ) {
+
+ this.removeObject( objects[ 0 ] );
+
+ }
+
+ this.geometries = {};
+ this.materials = {};
+ this.textures = {};
+ this.scripts = {};
+
+ this.deselect();
+
+ this.signals.editorCleared.dispatch();
+
+ },
+
+ //
+
+ fromJSON: function ( json ) {
+
+ var loader = new THREE.ObjectLoader();
+
+ // backwards
+
+ if ( json.scene === undefined ) {
+
+ var scene = loader.parse( json );
+
+ this.setScene( scene );
+
+ return;
+
+ }
+
+ // TODO: Clean this up somehow
+
+ var camera = loader.parse( json.camera );
+
+ this.camera.position.copy( camera.position );
+ this.camera.rotation.copy( camera.rotation );
+ this.camera.aspect = camera.aspect;
+ this.camera.near = camera.near;
+ this.camera.far = camera.far;
+
+ this.setScene( loader.parse( json.scene ) );
+ this.scripts = json.scripts;
+
+ },
+
+ toJSON: function () {
+
+ return {
+
+ project: {
+ vr: this.config.getKey( 'project/vr' )
+ },
+ camera: this.camera.toJSON(),
+ scene: this.scene.toJSON(),
+ scripts: this.scripts
+
+ };
+
+ }
+
+}
diff --git a/doodle_app/ui/Loader.js b/doodle_app/ui/Loader.js
new file mode 100755
index 0000000..4b4197e
--- /dev/null
+++ b/doodle_app/ui/Loader.js
@@ -0,0 +1,441 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+var Loader = function ( editor ) {
+
+ var scope = this;
+ var signals = editor.signals;
+
+ this.loadFile = function ( file ) {
+
+ var filename = file.name;
+ var extension = filename.split( '.' ).pop().toLowerCase();
+
+ switch ( extension ) {
+
+ case 'awd':
+
+ var reader = new FileReader();
+ reader.addEventListener( 'load', function ( event ) {
+
+ var loader = new THREE.AWDLoader();
+ var scene = loader.parse( event.target.result );
+
+ editor.setScene( scene );
+
+ }, false );
+ reader.readAsArrayBuffer( file );
+
+ break;
+
+ case 'babylon':
+
+ var reader = new FileReader();
+ reader.addEventListener( 'load', function ( event ) {
+
+ var contents = event.target.result;
+ var json = JSON.parse( contents );
+
+ var loader = new THREE.BabylonLoader();
+ var scene = loader.parse( json );
+
+ editor.setScene( scene );
+
+ }, false );
+ reader.readAsText( file );
+
+ break;
+
+ case 'babylonmeshdata':
+
+ var reader = new FileReader();
+ reader.addEventListener( 'load', function ( event ) {
+
+ var contents = event.target.result;
+ var json = JSON.parse( contents );
+
+ var loader = new THREE.BabylonLoader();
+
+ var geometry = loader.parseGeometry( json );
+ var material = new THREE.MeshPhongMaterial();
+
+ var mesh = new THREE.Mesh( geometry, material );
+ mesh.name = filename;
+
+ editor.addObject( mesh );
+ editor.select( mesh );
+
+ }, false );
+ reader.readAsText( file );
+
+ break;
+
+ case 'ctm':
+
+ var reader = new FileReader();
+ reader.addEventListener( 'load', function ( event ) {
+
+ var data = new Uint8Array( event.target.result );
+
+ var stream = new CTM.Stream( data );
+ stream.offset = 0;
+
+ var loader = new THREE.CTMLoader();
+ loader.createModel( new CTM.File( stream ), function( geometry ) {
+
+ geometry.sourceType = "ctm";
+ geometry.sourceFile = file.name;
+
+ var material = new THREE.MeshPhongMaterial();
+
+ var mesh = new THREE.Mesh( geometry, material );
+ mesh.name = filename;
+
+ editor.addObject( mesh );
+ editor.select( mesh );
+
+ } );
+
+ }, false );
+ reader.readAsArrayBuffer( file );
+
+ break;
+
+ case 'dae':
+
+ var reader = new FileReader();
+ reader.addEventListener( 'load', function ( event ) {
+
+ var contents = event.target.result;
+
+ var parser = new DOMParser();
+ var xml = parser.parseFromString( contents, 'text/xml' );
+
+ var loader = new THREE.ColladaLoader();
+ loader.parse( xml, function ( collada ) {
+
+ collada.scene.name = filename;
+
+ editor.addObject( collada.scene );
+ editor.select( collada.scene );
+
+ } );
+
+ }, false );
+ reader.readAsText( file );
+
+ break;
+
+ case 'js':
+ case 'json':
+
+ case '3geo':
+ case '3mat':
+ case '3obj':
+ case '3scn':
+
+ var reader = new FileReader();
+ reader.addEventListener( 'load', function ( event ) {
+
+ var contents = event.target.result;
+
+ // 2.0
+
+ if ( contents.indexOf( 'postMessage' ) !== -1 ) {
+
+ var blob = new Blob( [ contents ], { type: 'text/javascript' } );
+ var url = URL.createObjectURL( blob );
+
+ var worker = new Worker( url );
+
+ worker.onmessage = function ( event ) {
+
+ event.data.metadata = { version: 2 };
+ handleJSON( event.data, file, filename );
+
+ };
+
+ worker.postMessage( Date.now() );
+
+ return;
+
+ }
+
+ // >= 3.0
+
+ var data;
+
+ try {
+
+ data = JSON.parse( contents );
+
+ } catch ( error ) {
+
+ alert( error );
+ return;
+
+ }
+
+ handleJSON( data, file, filename );
+
+ }, false );
+ reader.readAsText( file );
+
+ break;
+
+ case 'obj':
+
+ var reader = new FileReader();
+ reader.addEventListener( 'load', function ( event ) {
+
+ var contents = event.target.result;
+
+ var object = new THREE.OBJLoader().parse( contents );
+ object.name = filename;
+
+ editor.addObject( object );
+ editor.select( object );
+
+ }, false );
+ reader.readAsText( file );
+
+ break;
+
+ case 'ply':
+
+ var reader = new FileReader();
+ reader.addEventListener( 'load', function ( event ) {
+
+ var contents = event.target.result;
+
+ var geometry = new THREE.PLYLoader().parse( contents );
+ geometry.sourceType = "ply";
+ geometry.sourceFile = file.name;
+
+ var material = new THREE.MeshPhongMaterial();
+
+ var mesh = new THREE.Mesh( geometry, material );
+ mesh.name = filename;
+
+ editor.addObject( mesh );
+ editor.select( mesh );
+
+ }, false );
+ reader.readAsText( file );
+
+ break;
+
+ case 'stl':
+
+ var reader = new FileReader();
+ reader.addEventListener( 'load', function ( event ) {
+
+ var contents = event.target.result;
+
+ var geometry = new THREE.STLLoader().parse( contents );
+ geometry.sourceType = "stl";
+ geometry.sourceFile = file.name;
+
+ var material = new THREE.MeshPhongMaterial();
+
+ var mesh = new THREE.Mesh( geometry, material );
+ mesh.name = filename;
+
+ editor.addObject( mesh );
+ editor.select( mesh );
+
+ }, false );
+
+ if ( reader.readAsBinaryString !== undefined ) {
+
+ reader.readAsBinaryString( file );
+
+ } else {
+
+ reader.readAsArrayBuffer( file );
+
+ }
+
+ break;
+
+ /*
+ case 'utf8':
+
+ var reader = new FileReader();
+ reader.addEventListener( 'load', function ( event ) {
+
+ var contents = event.target.result;
+
+ var geometry = new THREE.UTF8Loader().parse( contents );
+ var material = new THREE.MeshLambertMaterial();
+
+ var mesh = new THREE.Mesh( geometry, material );
+
+ editor.addObject( mesh );
+ editor.select( mesh );
+
+ }, false );
+ reader.readAsBinaryString( file );
+
+ break;
+ */
+
+ case 'vtk':
+
+ var reader = new FileReader();
+ reader.addEventListener( 'load', function ( event ) {
+
+ var contents = event.target.result;
+
+ var geometry = new THREE.VTKLoader().parse( contents );
+ geometry.sourceType = "vtk";
+ geometry.sourceFile = file.name;
+
+ var material = new THREE.MeshPhongMaterial();
+
+ var mesh = new THREE.Mesh( geometry, material );
+ mesh.name = filename;
+
+ editor.addObject( mesh );
+ editor.select( mesh );
+
+ }, false );
+ reader.readAsText( file );
+
+ break;
+
+ case 'wrl':
+
+ var reader = new FileReader();
+ reader.addEventListener( 'load', function ( event ) {
+
+ var contents = event.target.result;
+
+ var result = new THREE.VRMLLoader().parse( contents );
+
+ editor.setScene( result );
+
+ }, false );
+ reader.readAsText( file );
+
+ break;
+
+ default:
+
+ alert( 'Unsupported file format (' + extension + ').' );
+
+ break;
+
+ }
+
+ }
+
+ var handleJSON = function ( data, file, filename ) {
+
+ if ( data.metadata === undefined ) { // 2.0
+
+ data.metadata = { type: 'Geometry' };
+
+ }
+
+ if ( data.metadata.type === undefined ) { // 3.0
+
+ data.metadata.type = 'Geometry';
+
+ }
+
+ if ( data.metadata.version === undefined ) {
+
+ data.metadata.version = data.metadata.formatVersion;
+
+ }
+
+ if ( data.metadata.type === 'BufferGeometry' ) {
+
+ var loader = new THREE.BufferGeometryLoader();
+ var result = loader.parse( data );
+
+ var mesh = new THREE.Mesh( result );
+
+ editor.addObject( mesh );
+ editor.select( mesh );
+
+ } else if ( data.metadata.type.toLowerCase() === 'geometry' ) {
+
+ var loader = new THREE.JSONLoader();
+ var result = loader.parse( data );
+
+ var geometry = result.geometry;
+ var material;
+
+ if ( result.materials !== undefined ) {
+
+ if ( result.materials.length > 1 ) {
+
+ material = new THREE.MeshFaceMaterial( result.materials );
+
+ } else {
+
+ material = result.materials[ 0 ];
+
+ }
+
+ } else {
+
+ material = new THREE.MeshPhongMaterial();
+
+ }
+
+ geometry.sourceType = "ascii";
+ geometry.sourceFile = file.name;
+
+ var mesh;
+
+ if ( geometry.animation && geometry.animation.hierarchy ) {
+
+ mesh = new THREE.SkinnedMesh( geometry, material );
+
+ } else {
+
+ mesh = new THREE.Mesh( geometry, material );
+
+ }
+
+ mesh.name = filename;
+
+ editor.addObject( mesh );
+ editor.select( mesh );
+
+ } else if ( data.metadata.type.toLowerCase() === 'object' ) {
+
+ var loader = new THREE.ObjectLoader();
+ var result = loader.parse( data );
+
+ if ( result instanceof THREE.Scene ) {
+
+ editor.setScene( result );
+
+ } else {
+
+ editor.addObject( result );
+ editor.select( result );
+
+ }
+
+ } else if ( data.metadata.type.toLowerCase() === 'scene' ) {
+
+ // DEPRECATED
+
+ var loader = new THREE.SceneLoader();
+ loader.parse( data, function ( result ) {
+
+ editor.setScene( result.scene );
+
+ }, '' );
+
+ }
+
+ };
+
+}
diff --git a/doodle_app/ui/Preview.js b/doodle_app/ui/Preview.js
new file mode 100755
index 0000000..c39154a
--- /dev/null
+++ b/doodle_app/ui/Preview.js
@@ -0,0 +1,558 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+var Preview = function ( editor ) {
+
+ var signals = editor.signals;
+
+ var container = new UI.Panel();
+ container.setId( 'preview' );
+ container.setPosition( 'absolute' );
+ container.setWidth( '50%' );
+ container.setTop( '0px' );
+ container.setRight( '0px' );
+ container.setBottom( '0px' );
+
+ var scene = editor.scene;
+ var sceneHelpers = editor.sceneHelpers;
+
+ var objects = [];
+
+ // helpers
+
+ var grid = new THREE.GridHelper( 200, 10 );
+ grid.setColors( 0x444444, 0x888888 );
+ sceneHelpers.add( grid );
+
+ var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+ directionalLight.position.set(0, 1, 0);
+ scene.add(directionalLight);
+
+ var light = new THREE.AmbientLight(0x404040); // soft white light
+ scene.add(light);
+
+ //
+
+ var camera = editor.camera;
+ camera.position.fromArray( editor.config.getKey( 'camera/position' ) );
+ camera.lookAt( new THREE.Vector3().fromArray( editor.config.getKey( 'camera/target' ) ) );
+
+ //
+
+ var selectionBox = new THREE.BoxHelper();
+ selectionBox.material.depthTest = false;
+ selectionBox.material.transparent = true;
+ selectionBox.visible = false;
+ sceneHelpers.add( selectionBox );
+
+ var transformControls = new THREE.TransformControls( camera, container.dom );
+ transformControls.addEventListener( 'change', function () {
+
+ var object = transformControls.object;
+
+ if ( object !== undefined ) {
+
+ if ( editor.helpers[ object.id ] !== undefined ) {
+
+ editor.helpers[ object.id ].update();
+
+ }
+
+ }
+
+ render();
+
+ } );
+ transformControls.addEventListener( 'mouseDown', function () {
+
+ controls.enabled = false;
+
+ } );
+ transformControls.addEventListener( 'mouseUp', function () {
+
+ signals.objectChanged.dispatch( transformControls.object );
+ controls.enabled = true;
+
+ } );
+
+ sceneHelpers.add( transformControls );
+
+ // fog
+
+ var oldFogType = "None";
+ var oldFogColor = 0xaaaaaa;
+ var oldFogNear = 1;
+ var oldFogFar = 5000;
+ var oldFogDensity = 0.00025;
+
+ // object picking
+
+ var raycaster = new THREE.Raycaster();
+ var mouse = new THREE.Vector2();
+
+ // events
+
+ var getIntersects = function ( point, object ) {
+
+ mouse.set( ( point.x * 2 ) - 1, - ( point.y * 2 ) + 1 );
+
+ raycaster.setFromCamera( mouse, camera );
+
+ if ( object instanceof Array ) {
+
+ return raycaster.intersectObjects( object );
+
+ }
+
+ return raycaster.intersectObject( object );
+
+ };
+
+ var onDownPosition = new THREE.Vector2();
+ var onUpPosition = new THREE.Vector2();
+ var onDoubleClickPosition = new THREE.Vector2();
+
+ var getMousePosition = function ( dom, x, y ) {
+
+ var rect = dom.getBoundingClientRect();
+ return [ ( x - rect.left ) / rect.width, ( y - rect.top ) / rect.height ];
+
+ };
+
+ var handleClick = function () {
+
+ if ( onDownPosition.distanceTo( onUpPosition ) == 0 ) {
+
+ var intersects = getIntersects( onUpPosition, objects );
+
+ if ( intersects.length > 0 ) {
+
+ var object = intersects[ 0 ].object;
+
+ if ( object.userData.object !== undefined ) {
+
+ // helper
+
+ editor.select( object.userData.object );
+
+ } else {
+
+ editor.select( object );
+
+ }
+
+ } else {
+
+ editor.select( null );
+
+ }
+
+ render();
+
+ }
+
+ };
+
+ var onMouseDown = function ( event ) {
+
+ event.preventDefault();
+
+ var array = getMousePosition( container.dom, event.clientX, event.clientY );
+ onDownPosition.fromArray( array );
+
+ document.addEventListener( 'mouseup', onMouseUp, false );
+
+ };
+
+ var onMouseUp = function ( event ) {
+
+ var array = getMousePosition( container.dom, event.clientX, event.clientY );
+ onUpPosition.fromArray( array );
+
+ handleClick();
+
+ document.removeEventListener( 'mouseup', onMouseUp, false );
+
+ };
+
+ var onTouchStart = function ( event ) {
+
+ var touch = event.changedTouches[ 0 ];
+
+ var array = getMousePosition( container.dom, touch.clientX, touch.clientY );
+ onDownPosition.fromArray( array );
+
+ document.addEventListener( 'touchend', onTouchEnd, false );
+
+ };
+
+ var onTouchEnd = function ( event ) {
+
+ var touch = event.changedTouches[ 0 ];
+
+ var array = getMousePosition( container.dom, touch.clientX, touch.clientY );
+ onUpPosition.fromArray( array );
+
+ handleClick();
+
+ document.removeEventListener( 'touchend', onTouchEnd, false );
+
+ };
+
+ var onDoubleClick = function ( event ) {
+
+ var array = getMousePosition( container.dom, event.clientX, event.clientY );
+ onDoubleClickPosition.fromArray( array );
+
+ var intersects = getIntersects( onDoubleClickPosition, objects );
+
+ if ( intersects.length > 0 ) {
+
+ var intersect = intersects[ 0 ];
+
+ signals.objectFocused.dispatch( intersect.object );
+
+ }
+
+ };
+
+ container.dom.addEventListener( 'mousedown', onMouseDown, false );
+ container.dom.addEventListener( 'touchstart', onTouchStart, false );
+ container.dom.addEventListener( 'dblclick', onDoubleClick, false );
+
+ // controls need to be added *after* main logic,
+ // otherwise controls.enabled doesn't work.
+
+ var controls = new THREE.EditorControls( camera, container.dom );
+ controls.center.fromArray( editor.config.getKey( 'camera/target' ) );
+ controls.addEventListener( 'change', function () {
+
+ transformControls.update();
+ signals.cameraChanged.dispatch( camera );
+
+ } );
+
+ // signals
+
+ signals.editorCleared.add( function () {
+
+ controls.center.set( 0, 0, 0 );
+ render();
+
+ } );
+
+ signals.transformModeChanged.add( function ( mode ) {
+
+ transformControls.setMode( mode );
+
+ } );
+
+ signals.snapChanged.add( function ( dist ) {
+
+ transformControls.setSnap( dist );
+
+ } );
+
+ signals.spaceChanged.add( function ( space ) {
+
+ transformControls.setSpace( space );
+
+ } );
+
+ signals.rendererChanged.add( function ( type, antialias ) {
+
+ container.dom.removeChild( renderer.domElement );
+
+ renderer = createRenderer( type, antialias );
+ renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
+
+ container.dom.appendChild( renderer.domElement );
+
+ render();
+
+ } );
+
+ signals.sceneGraphChanged.add( function () {
+
+ render();
+
+ } );
+
+ var saveTimeout;
+
+ signals.cameraChanged.add( function () {
+
+ if ( saveTimeout !== undefined ) {
+
+ clearTimeout( saveTimeout );
+
+ }
+
+ saveTimeout = setTimeout( function () {
+
+ editor.config.setKey(
+ 'camera/position', camera.position.toArray(),
+ 'camera/target', controls.center.toArray()
+ );
+
+ }, 1000 );
+
+ render();
+
+ } );
+
+ signals.objectSelected.add( function ( object ) {
+
+ selectionBox.visible = false;
+ transformControls.detach();
+
+ if ( object !== null ) {
+
+ if ( object.geometry !== undefined &&
+ object instanceof THREE.Sprite === false ) {
+
+ selectionBox.update( object );
+ selectionBox.visible = true;
+
+ }
+
+ transformControls.attach( object );
+
+ }
+
+ render();
+
+ } );
+
+ signals.objectFocused.add( function ( object ) {
+
+ controls.focus( object );
+
+ } );
+
+ signals.geometryChanged.add( function ( geometry ) {
+
+ selectionBox.update( editor.selected );
+
+ render();
+
+ } );
+
+ signals.objectAdded.add( function ( object ) {
+
+ var materialsNeedUpdate = false;
+
+ object.traverse( function ( child ) {
+
+ if ( child instanceof THREE.Light ) materialsNeedUpdate = true;
+
+ objects.push( child );
+
+ } );
+
+ if ( materialsNeedUpdate === true ) updateMaterials();
+
+ } );
+
+ signals.objectChanged.add( function ( object ) {
+
+ transformControls.update();
+
+ if ( object instanceof THREE.PerspectiveCamera ) {
+
+ object.updateProjectionMatrix();
+
+ }
+
+ if ( editor.helpers[ object.id ] !== undefined ) {
+
+ editor.helpers[ object.id ].update();
+
+ }
+
+ render();
+
+ } );
+
+ signals.objectRemoved.add( function ( object ) {
+
+ var materialsNeedUpdate = false;
+
+ object.traverse( function ( child ) {
+
+ if ( child instanceof THREE.Light ) materialsNeedUpdate = true;
+
+ objects.splice( objects.indexOf( child ), 1 );
+
+ } );
+
+ if ( materialsNeedUpdate === true ) updateMaterials();
+
+ } );
+
+ signals.helperAdded.add( function ( object ) {
+
+ objects.push( object.getObjectByName( 'picker' ) );
+
+ } );
+
+ signals.helperRemoved.add( function ( object ) {
+
+ objects.splice( objects.indexOf( object.getObjectByName( 'picker' ) ), 1 );
+
+ } );
+
+ signals.materialChanged.add( function ( material ) {
+
+ render();
+
+ } );
+
+ signals.fogTypeChanged.add( function ( fogType ) {
+
+ if ( fogType !== oldFogType ) {
+
+ if ( fogType === "None" ) {
+
+ scene.fog = null;
+
+ } else if ( fogType === "Fog" ) {
+
+ scene.fog = new THREE.Fog( oldFogColor, oldFogNear, oldFogFar );
+
+ } else if ( fogType === "FogExp2" ) {
+
+ scene.fog = new THREE.FogExp2( oldFogColor, oldFogDensity );
+
+ }
+
+ updateMaterials();
+
+ oldFogType = fogType;
+
+ }
+
+ render();
+
+ } );
+
+ signals.fogColorChanged.add( function ( fogColor ) {
+
+ oldFogColor = fogColor;
+
+ updateFog( scene );
+
+ render();
+
+ } );
+
+ signals.fogParametersChanged.add( function ( near, far, density ) {
+
+ oldFogNear = near;
+ oldFogFar = far;
+ oldFogDensity = density;
+
+ updateFog( scene );
+
+ render();
+
+ } );
+
+ signals.windowResize.add( function () {
+
+ camera.aspect = container.dom.offsetWidth / container.dom.offsetHeight;
+ camera.updateProjectionMatrix();
+
+ renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
+
+ render();
+
+ } );
+
+ signals.showGridChanged.add( function ( showGrid ) {
+
+ grid.visible = showGrid;
+ render();
+
+ } );
+
+ //
+
+ var createRenderer = function ( type, antialias ) {
+
+ if ( type === 'WebGLRenderer' && System.support.webgl === false ) {
+
+ type = 'CanvasRenderer';
+
+ }
+
+ var renderer = new THREE[ type ]( { antialias: antialias } );
+ renderer.setClearColor( clearColor );
+ renderer.setPixelRatio( window.devicePixelRatio );
+ renderer.autoClear = false;
+ renderer.autoUpdateScene = false;
+
+ return renderer;
+
+ };
+
+ var clearColor = 0xaaaaaa;
+ var renderer = createRenderer( editor.config.getKey( 'project/renderer' ), editor.config.getKey( 'project/renderer/antialias' ) );
+ container.dom.appendChild( renderer.domElement );
+
+
+ function updateMaterials() {
+
+ editor.scene.traverse( function ( node ) {
+
+ if ( node.material ) {
+
+ node.material.needsUpdate = true;
+
+ if ( node.material instanceof THREE.MeshFaceMaterial ) {
+
+ for ( var i = 0; i < node.material.materials.length; i ++ ) {
+
+ node.material.materials[ i ].needsUpdate = true;
+
+ }
+
+ }
+
+ }
+
+ } );
+
+ }
+
+ function updateFog( root ) {
+
+ if ( root.fog ) {
+
+ root.fog.color.setHex( oldFogColor );
+
+ if ( root.fog.near !== undefined ) root.fog.near = oldFogNear;
+ if ( root.fog.far !== undefined ) root.fog.far = oldFogFar;
+ if ( root.fog.density !== undefined ) root.fog.density = oldFogDensity;
+
+ }
+
+ }
+
+
+ function render() {
+
+ sceneHelpers.updateMatrixWorld();
+ scene.updateMatrixWorld();
+
+ renderer.clear();
+ renderer.render( scene, camera );
+
+ renderer.render( sceneHelpers, camera );
+
+ }
+
+ return container;
+
+}
diff --git a/models/sewing_machine.stl b/models/sewing_machine.stl
new file mode 100644
index 0000000..98e3b27
Binary files /dev/null and b/models/sewing_machine.stl differ
diff --git a/src/paths.js b/src/paths.js
index 26a66b8..2a6dcfa 100644
--- a/src/paths.js
+++ b/src/paths.js
@@ -66,7 +66,7 @@ D3D.Paths.prototype.offset = function (offset) {
var solution = new ClipperLib.Paths();
var co = new ClipperLib.ClipperOffset(1, 1);
- co.AddPaths(this, ClipperLib.JoinType.jtRound, ClipperLib.EndType.etClosedPolygon);
+ co.AddPaths(this, ClipperLib.JoinType.jtMiter, ClipperLib.EndType.etClosedPolygon);
co.Execute(solution, offset);
return new D3D.Paths(solution);
diff --git a/src/slicer.js b/src/slicer.js
index 395435f..80e10b2 100644
--- a/src/slicer.js
+++ b/src/slicer.js
@@ -167,12 +167,11 @@ D3D.Slicer.prototype.slice = function (layerHeight, height) {
}
var slices = [];
+ var testPoints = [];
for (var layer = 1; layer < layersIntersections.length; layer ++) {
var layerIntersections = layersIntersections[layer];
- var testPoints = [];
-
if (layerIntersections.length > 0) {
var y = layer * layerHeight;
@@ -428,7 +427,7 @@ D3D.Slicer.prototype.generateSupport = function (slices, printer) {
var supportAreas = new D3D.Paths([], true);
for (var layer = slices.length - 1 - supportDistanceLayers; layer >= 0; layer --) {
- if (supportAreas.length > 1) {
+ if (supportAreas.length > 0) {
if (layer >= supportDistanceLayers) {
var sliceSkin = slices[layer - supportDistanceLayers].getOutline();
diff --git a/three.js-master/editor/js/Config.js b/three.js-master/editor/js/Config.js
index 274691c..0922263 100755
--- a/three.js-master/editor/js/Config.js
+++ b/three.js-master/editor/js/Config.js
@@ -8,7 +8,7 @@ var Config = function () {
var storage = {
'autosave': true,
- 'theme': 'css/light.css',
+ 'theme': '../three.js-master/editor/css/light.css',
'project/renderer': 'WebGLRenderer',
'project/renderer/antialias': true,
@@ -46,6 +46,8 @@ var Config = function () {
getKey: function ( key ) {
+ console.log(storage);
+
return storage[ key ];
},
diff --git a/three.js-master/editor/js/Viewport.js b/three.js-master/editor/js/Viewport.js
index c646308..271e3ae 100755
--- a/three.js-master/editor/js/Viewport.js
+++ b/three.js-master/editor/js/Viewport.js
@@ -19,7 +19,7 @@ var Viewport = function ( editor ) {
// helpers
- var grid = new THREE.GridHelper( 500, 25 );
+ var grid = new THREE.GridHelper( 200, 10 );
sceneHelpers.add( grid );
//
@@ -236,11 +236,11 @@ var Viewport = function ( editor ) {
switch ( value ) {
- case 'css/light.css':
+ case '../three.js-master/editor/css/light.css':
grid.setColors( 0x444444, 0x888888 );
clearColor = 0xaaaaaa;
break;
- case 'css/dark.css':
+ case '../three.js-master/editor/css/dark.css':
grid.setColors( 0xbbbbbb, 0x888888 );
clearColor = 0x333333;
break;