Have SVGImport respect the current PaperScope's applyMatrix setting.

This commit is contained in:
Jürg Lehni 2015-01-02 14:19:17 +01:00
parent 54d959df1f
commit 3c31c0e482
5 changed files with 32 additions and 24 deletions

View file

@ -11,7 +11,7 @@
svg.visible = true; // Turn off display: none;
// Resize the tiger to fit within the window:
project.activeLayer.fitBounds(view.bounds);
svg.fitBounds(view.bounds);
var items = project.activeLayer.firstChild.children;
var mouseIsDown = false;

View file

@ -6,22 +6,19 @@
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
// Imported SVG Groups have their applyMatrix flag turned off by
// default. This is required for SVG importing to work correctly. Turn
// it on now, so we don't have to deal with nested coordinate spaces.
var words = project.importSVG(document.getElementById('svg'));
words.visible = true; // Turn off the effect of display:none;
words.fillColor = null;
words.strokeColor = 'black';
var yesGroup = words.children.yes;
var noGroup = words.children.no;
// Imported SVG Groups have their applyMatrix flag turned off by
// default. This is required for SVG importing to work correctly. Turn
// it on now, so we don't have to deal with nested coordinate spaces.
yesGroup.applyMatrix = true;
noGroup.applyMatrix = true;
var noGroup = words.children.no;
// Resize the words to fit snugly inside the view:
project.activeLayer.fitBounds(view.bounds);
project.activeLayer.scale(0.8);
words.fitBounds(view.bounds);
words.scale(0.8);
yesGroup.position = view.center;
noGroup.position = [-900, -900];

View file

@ -102,7 +102,7 @@ var Matrix = Base.extend(/** @lends Matrix# */{
_changed: function() {
var owner = this._owner;
if (owner) {
// If owner has #applyMatrix set, directly bake it in now.
// If owner has #applyMatrix set, directly bake the change in now.
if (owner._applyMatrix) {
owner.transform(null, true);
} else {
@ -156,16 +156,17 @@ var Matrix = Base.extend(/** @lends Matrix# */{
},
/**
* Applies the matrix to the content of item that it belongs to, if
* possible, meaning it bakes it into the item's content or children.
* Attempts to apply the matrix to the content of item that it belongs to,
* meaning its transformation is baked into the item's content or children.
* @param {Boolean} recursively controls whether to apply transformations
* recursively on children
* @return {Boolean} {@true if the matrix was applied}
*/
apply: function(recursively) {
apply: function(recursively, _setApplyMatrix) {
var owner = this._owner;
if (owner) {
owner.transform(null, true, Base.pick(recursively, true));
owner.transform(null, true, Base.pick(recursively, true),
_setApplyMatrix);
// If the matrix was successfully applied, it will be reset now.
return this.isIdentity();
}

View file

@ -3021,11 +3021,12 @@ var Item = Base.extend(Emitter, /** @lends Item# */{
*
* @param {Matrix} matrix the matrix by which the item shall be transformed.
*/
// Remove this for now:
// TODO: Implement flags:
// @param {String[]} flags Array of any of the following: 'objects',
// 'children', 'fill-gradients', 'fill-patterns', 'stroke-patterns',
// 'lines'. Default: ['objects', 'children']
transform: function(matrix, _applyMatrix, _applyRecursively) {
transform: function(matrix, _applyMatrix, _applyRecursively,
_setApplyMatrix) {
// If no matrix is provided, or the matrix is the identity, we might
// still have some work to do in case _applyMatrix is true
if (matrix && matrix.isIdentity())
@ -3048,8 +3049,8 @@ var Item = Base.extend(Emitter, /** @lends Item# */{
// internal _matrix transformations to the item's content.
// Application is not possible on Raster, PointText, PlacedSymbol, since
// the matrix is where the actual transformation state is stored.
if (applyMatrix = applyMatrix
&& this._transformContent(_matrix, _applyRecursively)) {
if (applyMatrix = applyMatrix && this._transformContent(_matrix,
_applyRecursively, _setApplyMatrix)) {
// When the _matrix could be applied, we also need to transform
// color styles (only gradients so far) and pivot point:
var pivot = this._pivot,
@ -3067,6 +3068,9 @@ var Item = Base.extend(Emitter, /** @lends Item# */{
// Reset the internal matrix to the identity transformation if it
// was possible to apply it.
_matrix.reset(true);
// Set the internal _applyMatrix flag to true if we're told to do so
if (_setApplyMatrix && this._canApplyMatrix)
this._applyMatrix = true;
}
// Calling _changed will clear _bounds and _position, but depending
// on matrix we can calculate and set them again, so preserve them.
@ -3105,11 +3109,12 @@ var Item = Base.extend(Emitter, /** @lends Item# */{
return this;
},
_transformContent: function(matrix, applyRecursively) {
_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);
children[i].transform(matrix, true, applyRecursively,
setApplyMatrix);
return true;
}
},

View file

@ -587,13 +587,13 @@ new function() {
item,
data = node.getAttribute && node.getAttribute('data-paper-data'),
settings = scope.settings,
prevApplyMatrix = settings.applyMatrix;
applyMatrix = settings.applyMatrix;
// Have items imported from SVG not bake in all transformations to their
// content and children, as this is how SVG works too, but preserve the
// current setting so we can restore it after.
settings.applyMatrix = false;
item = importer && importer(node, type, options, isRoot) || null;
settings.applyMatrix = prevApplyMatrix;
settings.applyMatrix = applyMatrix;
if (item) {
// Do not apply attributes if this is a #document node.
// See importGroup() for an explanation of filtering for Group:
@ -612,8 +612,13 @@ new function() {
item._data = JSON.parse(data);
}
// Clear definitions at the end of import?
if (isRoot)
if (isRoot) {
definitions = {};
// Now if settings.applyMatrix was set, apply recursively and set
// #applyMatrix = true on the item and all children.
if (applyMatrix && item)
item.matrix.apply(true, true);
}
return item;
}