paper 0.13.0 → 0.14.0

package/dist/paper-core.js

@@ -1,5 +1,5 @@
 /*!
- * Paper.js v0.13.0 - The Swiss Army Knife of Vector Graphics Scripting.
+ * Paper.js v0.14.0 - The Swiss Army Knife of Vector Graphics Scripting.
  * http://paperjs.org/
  *
  * Copyright (c) 2011 - 2020, Jürg Lehni & Jonathan Puckey
@@ -9,7 +9,7 @@
  *
  * All rights reserved.
  *
- * Date: Mon Oct 19 15:31:53 2026 +0200
+ * Date: Tue Oct 20 01:20:31 2026 +0200
  *
  ***
  *
@@ -780,7 +780,8 @@ var PaperScope = Base.extend({
 			applyMatrix: true,
 			insertItems: true,
 			handleSize: 4,
-			hitTolerance: 0
+			hitTolerance: 0,
+			scaleStrokes: false
 		});
 		this.project = null;
 		this.projects = [];
@@ -824,7 +825,7 @@ var PaperScope = Base.extend({
 		}
 	},
 
-	version: "0.13.0",
+	version: "0.14.0",
 
 	getView: function() {
 		var project = this.project;
@@ -848,9 +849,10 @@ var PaperScope = Base.extend({
 				}
 			});
 		});
-		for (var key in this)
-			if (!/^_/.test(key) && this[key])
+		for (var key in this) {
+			if (!/^_/.test(key) && this[key] && !(key in scope))
 				scope[key] = this[key];
+		}
 	},
 
 	setup: function(element) {
@@ -927,6 +929,10 @@ var PaperScopeItem = Base.extend(Emitter, {
 		return this._scope[this._reference] === this;
 	},
 
+	getScope: function() {
+		return this._scope;
+	},
+
 	remove: function() {
 		if (this._index == null)
 			return false;
@@ -2643,6 +2649,10 @@ var Matrix = Base.extend({
 		return det && !isNaN(det) && isFinite(this._tx) && isFinite(this._ty);
 	},
 
+	_getMeanScale: function() {
+		return Math.sqrt(Math.abs(this._a * this._d - this._b * this._c));
+	},
+
 	isSingular: function() {
 		return !this.isInvertible();
 	},
@@ -2931,6 +2941,48 @@ var Line = Base.extend({
 	}
 });
 
+var ChangeFlag = {
+	APPEARANCE: 0x1,
+
+	CHILDREN: 0x2,
+
+	INSERTION: 0x4,
+
+	GEOMETRY: 0x8,
+
+	MATRIX: 0x10,
+
+	SEGMENTS: 0x20,
+
+	STROKE: 0x40,
+
+	STYLE: 0x80,
+
+	ATTRIBUTE: 0x100,
+
+	CONTENT: 0x200,
+
+	PIXELS: 0x400,
+
+	CLIPPING: 0x800,
+
+	VIEW: 0x1000
+};
+
+var Change = {
+	CHILDREN: ChangeFlag.CHILDREN | ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
+	INSERTION: ChangeFlag.INSERTION | ChangeFlag.APPEARANCE,
+	GEOMETRY: ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
+	MATRIX: ChangeFlag.MATRIX | ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
+	SEGMENTS: ChangeFlag.SEGMENTS | ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
+	STROKE: ChangeFlag.STROKE | ChangeFlag.STYLE | ChangeFlag.APPEARANCE,
+	STYLE: ChangeFlag.STYLE | ChangeFlag.APPEARANCE,
+	ATTRIBUTE: ChangeFlag.ATTRIBUTE | ChangeFlag.APPEARANCE,
+	CONTENT: ChangeFlag.CONTENT | ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
+	PIXELS: ChangeFlag.PIXELS | ChangeFlag.APPEARANCE,
+	VIEW: ChangeFlag.VIEW | ChangeFlag.APPEARANCE
+};
+
 var Project = PaperScopeItem.extend({
 	_class: 'Project',
 	_list: 'projects',
@@ -2964,7 +3016,7 @@ var Project = PaperScopeItem.extend({
 			}
 		}
 		var changes = this._changes;
-		if (changes && item) {
+		if (changes && item && item.isInserted()) {
 			var changesById = this._changesById,
 				id = item._id,
 				entry = changesById[id];
@@ -2976,6 +3028,26 @@ var Project = PaperScopeItem.extend({
 		}
 	},
 
+	getTrackChanges: function() {
+		return !!this._changes;
+	},
+
+	setTrackChanges: function(trackChanges) {
+		if (!this._changes ^ !trackChanges) {
+			this._changes = trackChanges ? [] : null;
+			this._changesById = trackChanges ? {} : null;
+		}
+	},
+
+	takeChanges: function() {
+		var changes = this._changes;
+		if (changes) {
+			this._changes = [];
+			this._changesById = {};
+		}
+		return changes || null;
+	},
+
 	clear: function() {
 		var children = this._children;
 		for (var i = children.length - 1; i >= 0; i--)
@@ -3271,6 +3343,10 @@ new function() {
 			matrix = this._matrix = new Matrix(),
 			project = hasProps && props.project || paper.project,
 			settings = paper.settings;
+		if (!project) {
+			throw new Error('Unable to create an item without a project. '
+					+ 'Call paper.setup() or create a Project first.');
+		}
 		this._id = internal ? null : UID.get();
 		this._parent = this._index = null;
 		this._applyMatrix = this._canApplyMatrix && settings.applyMatrix;
@@ -3804,6 +3880,10 @@ new function() {
 		return this._project._view;
 	},
 
+	getScope: function() {
+		return this._project._scope;
+	},
+
 	_installEvents: function _installEvents(install) {
 		_installEvents.base.call(this, install);
 		if (this._selection)
@@ -4076,7 +4156,7 @@ new function() {
 
 	_hitTest: function(point, options, parentViewMatrix) {
 		if (this._locked || !this._visible || this._guide && !options.guides
-				|| this.isEmpty()) {
+				|| !this._shell && this.isEmpty()) {
 			return null;
 		}
 
@@ -4091,7 +4171,7 @@ new function() {
 						.prepended(this.getView()._matrix.inverted())
 						._shiftless().invert()));
 		point = pointMatrix._inverseTransform(point);
-		if (!point || !this._children &&
+		if (!point || (this._shell || !this._children) &&
 			!this.getBounds({ internal: true, stroke: true, handle: true })
 				.expand(tolerancePadding.multiply(2))._containsPoint(point)) {
 			return null;
@@ -4107,10 +4187,21 @@ new function() {
 			res;
 
 		function filter(hit) {
+			if (Array.isArray(hit)) {
+				var first = null;
+				for (var i = 0, l = hit.length; i < l; i++) {
+					var res = filter(hit[i]);
+					first = first || res;
+				}
+				return first;
+			}
 			if (hit && match && !match(hit))
 				hit = null;
-			if (hit && options.all)
+			if (hit && options.all) {
+				if (hit.point)
+					hit.point = that.getGlobalMatrix().transform(hit.point);
 				options.all.push(hit);
+			}
 			return hit;
 		}
 
@@ -4154,14 +4245,14 @@ new function() {
 							: viewMatrix._shiftless().invert()))
 				|| null;
 		}
-		if (res && res.point) {
+		if (res && res.point && !options.all) {
 			res.point = pointMatrix.transform(res.point);
 		}
 		return res;
 	},
 
 	_hitTestSelf: function(point, options) {
-		if (options.fill && this.hasFill() && this._contains(point))
+		if (options.fill && this.getFillColor() && this._contains(point))
 			return new HitResult('fill', this);
 	},
 
@@ -4284,6 +4375,19 @@ new function() {
 }, {
 
 	importJSON: function(json) {
+		json = typeof json === 'string' ? JSON.parse(json) : json;
+		var props = json && json[0] === this._class && json[1];
+		if (Base.isPlainObject(props)) {
+			var item = new this.constructor(Item.NO_INSERT),
+				fields = Base.set({}, this._serializeFields,
+					this instanceof Group ? null : this._style._defaults),
+				defaults = {};
+			for (var key in fields) {
+				if (!(key in props) && !Base.equals(this[key], item[key]))
+					defaults[key] = item[key];
+			}
+			this.set(defaults);
+		}
 		var res = Base.importJSON(json, this);
 		return res !== this ? this.addChild(res) : res;
 	},
@@ -4430,14 +4534,14 @@ new function() {
 			if (this._name)
 				this._removeNamed();
 			this._installEvents(false);
+			if (notifySelf && project._changes)
+				this._changed(5);
 			if (index != null) {
 				if (project._activeLayer === this)
 					project._activeLayer = this.getNextSibling()
 							|| this.getPreviousSibling();
 				Base.splice(owner._children, null, index, 1);
 			}
-			if (notifySelf && project._changes)
-				this._changed(5);
 			if (notifyParent)
 				owner._changed(11, this);
 			this._parent = null;
@@ -4796,7 +4900,7 @@ new function() {
 			opacity = Numerical.clamp(this._opacity, 0, 1),
 			normalBlend = blendMode === 'normal',
 			nativeBlend = BlendMode.nativeModes[blendMode],
-			direct = normalBlend && opacity === 1
+			direct = normalBlend && opacity === 1 && !this._isolated
 					|| param.dontStart
 					|| param.clip
 					|| (nativeBlend || normalBlend && opacity < 1)
@@ -5012,8 +5116,10 @@ var Group = Item.extend({
 	_selectBounds: false,
 	_selectChildren: true,
 	_serializeFields: {
+		isolated: false,
 		children: []
 	},
+	_isolated: false,
 
 	initialize: function Group(arg) {
 		this._children = [];
@@ -5055,6 +5161,15 @@ var Group = Item.extend({
 			child.setClipMask(clipped);
 	},
 
+	isIsolated: function() {
+		return this._isolated;
+	},
+
+	setIsolated: function(isolated) {
+		this._isolated = !!isolated;
+		this._changed(257);
+	},
+
 	_getBounds: function _getBounds(matrix, options) {
 		var clipItem = this._getClipItem();
 		return clipItem
@@ -5399,7 +5514,7 @@ new function() {
 			var hit = false,
 				style = this._style,
 				hitStroke = options.stroke && style.hasStroke(),
-				hitFill = options.fill && style.hasFill();
+				hitFill = options.fill && !!style.getFillColor();
 			if (hitStroke || hitFill) {
 				var type = this._type,
 					radius = this._radius,
@@ -5489,6 +5604,7 @@ var Raster = Item.extend({
 	_boundsOptions: { stroke: false, handle: false },
 	_serializeFields: {
 		crossOrigin: null,
+		size: new Size(),
 		source: null
 	},
 	_prioritize: ['crossOrigin'],
@@ -5638,6 +5754,14 @@ var Raster = Item.extend({
 		}
 	},
 
+	set: function set(props, exclude) {
+		if (props && props.source && props.size) {
+			this._size = new Size(props.size);
+			exclude = Base.set({ size: true }, exclude);
+		}
+		return set.base.call(this, props, exclude);
+	},
+
 	_setImage: function(image) {
 		if (this._canvas)
 			CanvasProvider.release(this._canvas);
@@ -5650,9 +5774,11 @@ var Raster = Item.extend({
 			this._canvas = null;
 			this._loaded = !!(image && image.src && image.complete);
 		}
-		this._size = new Size(
-				image ? image.naturalWidth || image.width : 0,
-				image ? image.naturalHeight || image.height : 0);
+		this._size = image && !this._loaded
+				? this._size || new Size()
+				: new Size(
+					image ? image.naturalWidth || image.width : 0,
+					image ? image.naturalHeight || image.height : 0);
 		this._context = null;
 		this._changed(1033);
 	},
@@ -8227,6 +8353,15 @@ var PathItem = Item.extend({
 	initialize: function PathItem() {
 	},
 
+	_scaleStroke: function(matrix) {
+		var style = this._style;
+		if (this._project._scope.settings.scaleStrokes
+				&& style.getStrokeScaling()) {
+			style.setStrokeWidth(style.getStrokeWidth()
+					* matrix._getMeanScale());
+		}
+	},
+
 	statics: {
 		create: function(arg) {
 			var data,
@@ -8695,6 +8830,7 @@ var Path = PathItem.extend({
 			coords = new Array(6);
 		for (var i = 0, l = segments.length; i < l; i++)
 			segments[i]._transformCoordinates(matrix, coords, true);
+		this._scaleStroke(matrix);
 		return true;
 	},
 
@@ -9325,8 +9461,9 @@ var Path = PathItem.extend({
 			strokePadding = tolerancePadding,
 			join, cap, miterLimit,
 			area, loc, res,
+			hits = options.all && [],
 			hitStroke = options.stroke && style.hasStroke(),
-			hitFill = options.fill && style.hasFill(),
+			hitFill = options.fill && !!style.getFillColor(),
 			hitCurves = options.curves,
 			strokeRadius = hitStroke
 					? style.getStrokeWidth() / 2
@@ -9354,10 +9491,13 @@ var Path = PathItem.extend({
 				if (pt !== anchor)
 					pt = pt.add(anchor);
 				if (isCloseEnough(pt, strokePadding)) {
-					return new HitResult(name, that, {
+					var hit = new HitResult(name, that, {
 						segment: seg,
 						point: pt
 					});
+					if (!hits)
+						return hit;
+					hits.push(hit);
 				}
 			}
 		}
@@ -9431,7 +9571,7 @@ var Path = PathItem.extend({
 				}
 			}
 		}
-		return !loc && hitFill && this._contains(point)
+		res = !loc && hitFill && this._contains(point)
 				|| loc && !hitStroke && !hitCurves
 					? new HitResult('fill', this)
 					: loc
@@ -9440,6 +9580,16 @@ var Path = PathItem.extend({
 							point: loc.getPoint()
 						})
 						: null;
+		if (hits) {
+			hits.sort(function(hit1, hit2) {
+				return hit1.point.getDistance(point)
+						- hit2.point.getDistance(point);
+			});
+			if (res)
+				hits.push(res);
+			return hits;
+		}
+		return res;
 	}
 
 }, Base.each(Curve._evaluateMethods,
@@ -10231,10 +10381,9 @@ Path.inject({ statics: new function() {
 				center = Point.readNamed(args, 'center'),
 				sides = Base.readNamed(args, 'sides'),
 				radius = Base.readNamed(args, 'radius'),
-				step = 360 / sides,
-				three = sides % 3 === 0,
-				vector = new Point(0, three ? -radius : radius),
-				offset = three ? -1 : 0.5,
+				step = -360 / sides,
+				offset = sides % 2 ? 0 : -0.5,
+				vector = new Point(0, -radius),
 				segments = new Array(sides);
 			for (var i = 0; i < sides; i++)
 				segments[i] = new Segment(center.add(
@@ -10278,6 +10427,11 @@ var CompoundPath = PathItem.extend({
 		}
 	},
 
+	_transformContent: function _transformContent(matrix) {
+		this._scaleStroke(matrix);
+		return _transformContent.base.apply(this, arguments);
+	},
+
 	insertChildren: function insertChildren(index, items) {
 		var list = items,
 			first = list[0];
@@ -11765,6 +11919,16 @@ var PointText = TextItem.extend({
 				hasStroke = style.hasStroke(),
 				leading = style.getLeading(),
 				shadowColor = ctx.shadowColor;
+			if (hasStroke && !style.getStrokeScaling()) {
+				var scale = viewMatrix._getMeanScale();
+				ctx.lineWidth /= scale;
+				if ('setLineDash' in ctx) {
+					ctx.setLineDash(ctx.getLineDash().map(function(dash) {
+						return dash / scale;
+					}));
+					ctx.lineDashOffset /= scale;
+				}
+			}
 			ctx.font = style.getFontStyle();
 			ctx.textAlign = style.getJustification();
 			ctx.letterSpacing = style.getTrackingStyle();
@@ -11802,7 +11966,7 @@ var PointText = TextItem.extend({
 	},
 
 	_hitTestSelf: function(point, options) {
-		if (options.fill && this.hasFill()) {
+		if (options.fill && this.getFillColor()) {
 			var bounds = this.getInternalBounds(),
 				closest = point.clamp(bounds.getTopLeft(true),
 						bounds.getBottomRight(true));
@@ -13002,8 +13166,12 @@ DomEvent.requestAnimationFrame = new function() {
 		for (var i = 0, l = functions.length; i < l; i++)
 			functions[i]();
 		requested = nativeRequest && callbacks.length;
-		if (requested)
+		if (requested) {
 			nativeRequest(handleCallbacks);
+		} else if (timer && !callbacks.length) {
+			clearInterval(timer);
+			timer = null;
+		}
 	}
 
 	return function(callback) {
@@ -13029,7 +13197,7 @@ var View = Base.extend(Emitter, {
 		}
 
 		function getCanvasSize() {
-			var size = DomElement.getSize(element);
+			var size = new Size(element.offsetWidth, element.offsetHeight);
 			return size.isNaN() || size.isZero()
 					? new Size(getSize('width'), getSize('height'))
 					: size.subtract(DomElement.getInsets(element));
@@ -13160,7 +13328,8 @@ var View = Base.extend(Emitter, {
 				if (that._animate) {
 					that.requestUpdate();
 					var element = that._element;
-					if ((!DomElement.getPrefixed(document, 'hidden')
+					if (!element
+							|| (!DomElement.getPrefixed(document, 'hidden')
 							|| PaperScope.getAttribute(element, 'keepalive')
 								=== 'true') && DomElement.isInView(element)) {
 						that._handleFrame();
@@ -13237,6 +13406,10 @@ var View = Base.extend(Emitter, {
 		return this._project;
 	},
 
+	getScope: function() {
+		return this._scope;
+	},
+
 	getPixelRatio: function() {
 		return this._pixelRatio;
 	},
@@ -13457,8 +13630,6 @@ var View = Base.extend(Emitter, {
 	}
 },
 new function() {
-	if (!window)
-		return;
 	var prevFocus,
 		tempFocus,
 		dragging = false,
@@ -13486,26 +13657,28 @@ new function() {
 		view._handleMouseEvent('mousemove', event, point);
 	}
 
-	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 = {};
+
+	if (window) {
+		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 = {},
-		docEvents = {
+		var docEvents = {
 			mouseout: function(event) {
 				var view = View._focused,
 					target = DomEvent.getRelatedTarget(event);
@@ -13516,54 +13689,55 @@ new function() {
 			scroll: updateFocus
 		};
 
-	viewEvents[mousedown] = function(event) {
-		var view = View._focused = getView(event);
-		if (!dragging) {
-			dragging = true;
-			view._handleMouseEvent('mousedown', event);
-		}
-	};
+		viewEvents[mousedown] = function(event) {
+			var view = View._focused = getView(event);
+			if (!dragging) {
+				dragging = true;
+				view._handleMouseEvent('mousedown', event);
+			}
+		};
 
-	docEvents[mousemove] = function(event) {
-		var view = View._focused;
-		if (!mouseDown) {
-			var target = getView(event);
-			if (target) {
-				if (view !== target) {
-					if (view)
-						handleMouseMove(view, event);
-					if (!prevFocus)
-						prevFocus = view;
-					view = View._focused = tempFocus = target;
-				}
-			} else if (tempFocus && tempFocus === view) {
-				if (prevFocus && !prevFocus.isInserted())
+		docEvents[mousemove] = function(event) {
+			var view = View._focused;
+			if (!mouseDown) {
+				var target = getView(event);
+				if (target) {
+					if (view !== target) {
+						if (view)
+							handleMouseMove(view, event);
+						if (!prevFocus)
+							prevFocus = view;
+						view = View._focused = tempFocus = target;
+					}
+				} else if (tempFocus && tempFocus === view) {
+					if (prevFocus && !prevFocus.isInserted())
+						prevFocus = null;
+					view = View._focused = prevFocus;
 					prevFocus = null;
-				view = View._focused = prevFocus;
-				prevFocus = null;
-				updateFocus();
+					updateFocus();
+				}
 			}
-		}
-		if (view)
-			handleMouseMove(view, event);
-	};
+			if (view)
+				handleMouseMove(view, event);
+		};
 
-	docEvents[mousedown] = function() {
-		mouseDown = true;
-	};
+		docEvents[mousedown] = function() {
+			mouseDown = true;
+		};
 
-	docEvents[mouseup] = function(event) {
-		var view = View._focused;
-		if (view && dragging)
-			view._handleMouseEvent('mouseup', event);
-		mouseDown = dragging = false;
-	};
+		docEvents[mouseup] = function(event) {
+			var view = View._focused;
+			if (view && dragging)
+				view._handleMouseEvent('mouseup', event);
+			mouseDown = dragging = false;
+		};
 
-	DomEvent.add(document, docEvents);
+		DomEvent.add(document, docEvents);
 
-	DomEvent.add(window, {
-		load: updateFocus
-	});
+		DomEvent.add(window, {
+			load: updateFocus
+		});
+	}
 
 	var called = false,
 		prevented = false,
@@ -13629,9 +13803,27 @@ new function() {
 					point, prevPoint));
 	}
 
+	function createEvent(type, options) {
+		if (options.modifiers)
+			Key.modifiers.set(options.modifiers);
+		return {
+			type: type,
+			timeStamp: options.timeStamp != null ? options.timeStamp
+					: Date.now(),
+			button: options.button || 0,
+			cancelable: true,
+			defaultPrevented: false,
+			preventDefault: function() {
+				this.defaultPrevented = true;
+			},
+			stopPropagation: function() {}
+		};
+	}
+
 	var itemEventsMap = {
 		mousedown: {
 			mousedown: 1,
+			mouseup: 1,
 			mousedrag: 1,
 			click: 1,
 			doubleclick: 1
@@ -13653,6 +13845,28 @@ new function() {
 	return {
 		_viewEvents: viewEvents,
 
+		dispatchMouseEvent: function(type, point, options) {
+			if (!/^mouse(down|move|up)$/.test(type))
+				throw new Error('Unknown mouse event type: \'' + type + '\'.');
+			var event = createEvent(type, options || {});
+			if (type === 'mousedown') {
+				View._focused = this;
+				mouseDown = dragging = true;
+			}
+			this._handleMouseEvent(type, event, new Point(point));
+			if (type === 'mouseup')
+				mouseDown = dragging = false;
+			return event.defaultPrevented;
+		},
+
+		dispatchKeyEvent: function(type, key, options) {
+			if (!/^key(down|up)$/.test(type))
+				throw new Error('Unknown key event type: \'' + type + '\'.');
+			options = options || {};
+			Key._handleKey(type === 'keydown', key, options.character,
+					createEvent(type, options), this);
+		},
+
 		_handleMouseEvent: function(type, event, point) {
 			var itemEvents = this._itemEvents,
 				hitItems = itemEvents.native[type],
@@ -13665,12 +13879,37 @@ new function() {
 						|| tool && tool.responds(type);
 			}
 
+			function needsUp(hitItem) {
+				if (view.responds('mouseup')
+						|| tool && tool.responds('mouseup'))
+					return true;
+				for (var item = hitItem; item; item = item._parent) {
+					for (var key in itemEventsMap.mouseup) {
+						if (item.responds(key))
+							return true;
+					}
+				}
+				return false;
+			}
+
+			if (event.shiftKey !== undefined) {
+				Key.modifiers.set({
+					shift: event.shiftKey,
+					control: event.ctrlKey,
+					alt: event.altKey,
+					meta: event.metaKey
+				});
+			}
 			if (nativeMove && dragging && responds('mousedrag'))
 				type = 'mousedrag';
 			if (!point)
 				point = this.getEventPoint(event);
 
-			var inView = this.getBounds().contains(point),
+			var target = DomEvent.getTarget(event),
+				isCovered = nativeMove && !dragging && target
+						&& target.nodeType === 1
+						&& !target.contains(this._element),
+				inView = !isCovered && this.getBounds().contains(point),
 				hit = hitItems && inView && view._project.hitTest(point, {
 					tolerance: 0,
 					fill: true,
@@ -13737,7 +13976,7 @@ new function() {
 
 			if (
 				event.cancelable !== false
-				&& (called && !mouse.move || mouse.down && responds('mouseup'))
+				&& (called && !mouse.move || mouse.down && needsUp(hitItem))
 			) {
 				event.preventDefault();
 			}
@@ -13756,11 +13995,9 @@ new function() {
 				}
 			}
 
-			if (this.isVisible()) {
-				emit(this);
-				if (tool && tool.responds(type))
-					emit(tool);
-			}
+			emit(this);
+			if (tool && tool.responds(type))
+				emit(tool);
 		},
 
 		_countItemEvent: function(type, sign) {
@@ -13818,20 +14055,20 @@ var CanvasView = View.extend({
 	},
 
 	_setElementSize: function _setElementSize(width, height) {
-		var pixelRatio = this._pixelRatio;
+		var pixelRatio = this._pixelRatio,
+			element = this._element;
 		_setElementSize.base.call(this, width * pixelRatio, height * pixelRatio);
+		if (!PaperScope.hasAttribute(element, 'resize')) {
+			var style = element.style,
+				insets = DomElement.getStyles(element).boxSizing
+					=== 'border-box'
+						? DomElement.getInsets(element)
+						: new Size();
+			style.width = (width + insets.width) + 'px';
+			style.height = (height + insets.height) + 'px';
+		}
 		if (pixelRatio !== 1) {
-			var element = this._element,
-				ctx = this._context;
-			if (!PaperScope.hasAttribute(element, 'resize')) {
-				var style = element.style,
-					insets = DomElement.getStyles(element).boxSizing
-						=== 'border-box'
-							? DomElement.getInsets(element)
-							: new Size();
-				style.width = (width + insets.width) + 'px';
-				style.height = (height + insets.height) + 'px';
-			}
+			var ctx = this._context;
 			ctx.restore();
 			ctx.save();
 			ctx.scale(pixelRatio, pixelRatio);
@@ -13997,11 +14234,16 @@ var Key = new function() {
 				(key.length > 1 ? Base.hyphenate(key) : key.toLowerCase());
 	}
 
-	function handleKey(down, key, character, event) {
-		View.updateFocus();
-		var type = down ? 'keydown' : 'keyup',
-			view = View._focused,
-			name;
+	function handleKey(down, key, character, event, view) {
+		if (!view) {
+			View.updateFocus();
+			view = View._focused;
+			if (view && !view.isVisible())
+				view = null;
+		}
+		if (character == null)
+			character = down ? key.length > 1 ? '' : key : charMap[key] || '';
+		var name;
 		keyMap[key] = down;
 		if (down) {
 			charMap[key] = character;
@@ -14017,7 +14259,7 @@ var Key = new function() {
 				} else {
 					for (var k in metaFixMap) {
 						if (k in charMap)
-							handleKey(false, k, metaFixMap[k], event);
+							handleKey(false, k, metaFixMap[k], event, view);
 					}
 					metaFixMap = null;
 				}
@@ -14072,6 +14314,8 @@ var Key = new function() {
 	});
 
 	return {
+		_handleKey: handleKey,
+
 		modifiers: modifiers,
 
 		isDown: function(key) {
@@ -14238,6 +14482,14 @@ var Tool = PaperScopeItem.extend({
 		}
 	},
 
+	getEventInterval: function() {
+		return this._eventInterval;
+	},
+
+	setEventInterval: function(interval) {
+		this._eventInterval = interval;
+	},
+
 	getFixedDistance: function() {
 		return this._minDistance == this._maxDistance
 			? this._minDistance : null;
@@ -14294,7 +14546,24 @@ var Tool = PaperScopeItem.extend({
 		if (mouse.down) {
 			update();
 			emit();
+			if (this._eventInterval > 0) {
+				clearInterval(this._timer);
+				this._timer = setInterval(function() {
+					if (tool.isActive()) {
+						paper = tool._scope;
+						tool._lastPoint = tool._point;
+						tool._moveCount++;
+						if (tool.responds('mousedrag')) {
+							tool.emit('mousedrag',
+									new ToolEvent(tool, 'mousedrag', event));
+						}
+					} else {
+						clearInterval(tool._timer);
+					}
+				}, this._eventInterval);
+			}
 		} else if (mouse.up) {
+			clearInterval(this._timer);
 			update(null, this._maxDistance);
 			emit();
 		} else if (responds) {
@@ -14671,8 +14940,9 @@ var CanvasProvider = Base.exports.CanvasProvider = {
 	release: function(obj) {
 		var canvas = obj && obj.canvas ? obj.canvas : obj;
 		if (canvas && canvas.getContext) {
-			canvas.getContext('2d').restore();
-			this.canvases.push(canvas);
+			canvas.width = canvas.height = 0;
+			if (this.canvases.length < 8)
+				this.canvases.push(canvas);
 		}
 	}
 };
@@ -15004,7 +15274,7 @@ var SvgStyles = Base.each({
 	dashArray: ['stroke-dasharray', 'array'],
 	dashOffset: ['stroke-dashoffset', 'number'],
 	fontFamily: ['font-family', 'string'],
-	fontWeight: ['font-weight', 'string'],
+	fontWeight: ['font-weight', 'font'],
 	fontSize: ['font-size', 'number'],
 	tracking: ['letter-spacing', 'tracking'],
 	justification: ['text-anchor', 'lookup', {
@@ -15326,6 +15596,13 @@ new function() {
 		PointText: exportText
 	};
 
+	var cssBlendModes = Base.each(['normal', 'multiply', 'screen', 'overlay',
+			'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light',
+			'soft-light', 'difference', 'exclusion', 'hue', 'saturation',
+			'color', 'luminosity'], function(mode) {
+		this[mode] = true;
+	}, {});
+
 	function applyStyle(item, node, options, isRoot) {
 		var attrs = {},
 			parent = !isRoot && item.getParent(),
@@ -15352,7 +15629,19 @@ new function() {
 						attrs[entry.attribute + '-opacity'] = alpha;
 				}
 				if (type === 'style') {
-					style.push(entry.attribute + ': ' + value);
+					if (cssBlendModes[value]) {
+						style.push(entry.attribute + ': ' + value);
+					} else {
+						attrs['data-paper-blend-mode'] = value;
+					}
+				} else if (type === 'font') {
+					var font = ('' + value).match(
+							/^(.*?)\s*\b(italic|oblique)\b\s*(.*)$/i);
+					attrs[entry.attribute] = font
+							? (font[1] + ' ' + font[3]).trim() || 'normal'
+							: value;
+					if (font)
+						attrs['font-style'] = font[2].toLowerCase();
 				} else {
 					attrs[entry.attribute] = value == null ? 'none'
 							: type === 'color' ? value.gradient
@@ -15865,6 +16154,20 @@ new function() {
 				item.setVisible(value !== null);
 		},
 
+		'data-paper-blend-mode': function(item, value) {
+			if (item.setBlendMode)
+				item.setBlendMode(value);
+		},
+
+		'font-style': function(item, value) {
+			if (item.setFontWeight && /^(italic|oblique)$/.test(value)) {
+				var weight = ('' + item.getFontWeight())
+						.replace(/\s*\b(italic|oblique)\b/gi, '');
+				item.setFontWeight(/^(normal|400)$/.test(weight) ? value
+						: weight + ' ' + value);
+			}
+		},
+
 		'letter-spacing': function(item, value) {
 			if (item.setTracking) {
 				var amount = parseFloat(value) || 0;
@@ -16141,14 +16444,13 @@ new function() {
 var paper = new (PaperScope.inject(Base.exports, {
 	Base: Base,
 	Numerical: Numerical,
+	ChangeFlag: ChangeFlag,
 	Key: Key,
 	DomEvent: DomEvent,
 	DomElement: DomElement,
 	document: document,
 	window: window,
-	PlacedSymbol: SymbolItem
-}).inject({
-	enumerable: false,
+	PlacedSymbol: SymbolItem,
 	Symbol: SymbolDefinition
 }))();