scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2025-01-10 22:47:03 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #195 from fsih/strokeWidthFix

Browse source 
Clean up the scale tool
This commit is contained in:
DD Liu 2017-11-08 13:31:50 -05:00 committed by GitHub
commit 406a212053
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/helper/guides.js
View file

@ -84,8 +84,8 @@ const _removePaperItemsByTags = function (tags) {
}
};
const removeHelperItems = function () {
_removePaperItemsByDataTags(['isHelperItem']);
const removeBoundsPath = function () {
_removePaperItemsByDataTags(['isSelectionBound', 'isRotHandle', 'isScaleHandle']);
};
const removeAllGuides = function () {
@ -113,7 +113,7 @@ export {
hoverBounds,
rectSelect,
removeAllGuides,
removeHelperItems,
removeBoundsPath,
drawHitPoint,
removeHitPoint,
getGuideColor,

10
src/helper/selection-tools/bounding-box-tool.js
View file

@ -2,7 +2,7 @@ import paper from '@scratch/paper';
import keyMirror from 'keymirror';
import {getSelectedRootItems} from '../selection';
import {getGuideColor, removeHelperItems} from '../guides';
import {getGuideColor, removeBoundsPath} from '../guides';
import {getGuideLayer} from '../layer';
import ScaleTool from './scale-tool';
@ -103,13 +103,12 @@ class BoundingBoxTool {
if (this.mode === BoundingBoxModes.MOVE) {
this._modeMap[this.mode].onMouseDown(hitProperties);
} else if (this.mode === BoundingBoxModes.SCALE) {
this._modeMap[this.mode].onMouseDown(
hitResult, this.boundsPath, this.boundsScaleHandles, this.boundsRotHandles, getSelectedRootItems());
this._modeMap[this.mode].onMouseDown(hitResult, this.boundsPath, getSelectedRootItems());
} else if (this.mode === BoundingBoxModes.ROTATE) {
this._modeMap[this.mode].onMouseDown(hitResult, this.boundsPath, getSelectedRootItems());
}
// while transforming object, never show the bounds stuff
// while transforming, don't show bounds
this.removeBoundsPath();
return true;
}
@ -150,7 +149,6 @@ class BoundingBoxTool {
this.boundsPath.data.isSelectionBound = true;
this.boundsPath.data.isHelperItem = true;
this.boundsPath.fillColor = null;
this.boundsPath.strokeScaling = false;
this.boundsPath.fullySelected = true;
this.boundsPath.parent = getGuideLayer();
@ -205,7 +203,7 @@ class BoundingBoxTool {
}
}
removeBoundsPath () {
removeHelperItems();
removeBoundsPath();
this.boundsPath = null;
this.boundsScaleHandles.length = 0;
this.boundsRotHandles.length = 0;

85
src/helper/selection-tools/scale-tool.js
View file

@ -16,52 +16,32 @@ class ScaleTool {
this.origSize = null;
this.origCenter = null;
this.itemGroup = null;
this.boundsPath = null;
// Lowest item above all scale items in z index
this.itemToInsertBelow = null;
this.scaleItems = [];
this.boundsScaleHandles = [];
this.boundsRotHandles = [];
this.onUpdateSvg = onUpdateSvg;
}
/**
* @param {!paper.HitResult} hitResult Data about the location of the mouse click
* @param {!object} boundsPath Where the boundaries of the hit item are
* @param {!object} boundsScaleHandles Bounding box scale handles
* @param {!object} boundsRotHandles Bounding box rotation handle
* @param {!Array.<paper.Item>} selectedItems Set of selected paper.Items
* @param {boolean} clone Whether to clone on mouse down (e.g. alt key held)
* @param {boolean} multiselect Whether to multiselect on mouse down (e.g. shift key held)
*/
onMouseDown (hitResult, boundsPath, boundsScaleHandles, boundsRotHandles, selectedItems) {
onMouseDown (hitResult, boundsPath, selectedItems) {
const index = hitResult.item.data.index;
this.boundsPath = boundsPath;
this.boundsScaleHandles = boundsScaleHandles;
this.boundsRotHandles = boundsRotHandles;
this.pivot = this.boundsPath.bounds[this._getOpposingRectCornerNameByIndex(index)].clone();
this.origPivot = this.boundsPath.bounds[this._getOpposingRectCornerNameByIndex(index)].clone();
this.corner = this.boundsPath.bounds[this._getRectCornerNameByIndex(index)].clone();
this.pivot = boundsPath.bounds[this._getOpposingRectCornerNameByIndex(index)].clone();
this.origPivot = boundsPath.bounds[this._getOpposingRectCornerNameByIndex(index)].clone();
this.corner = boundsPath.bounds[this._getRectCornerNameByIndex(index)].clone();
this.origSize = this.corner.subtract(this.pivot);
this.origCenter = this.boundsPath.bounds.center;
for (const item of selectedItems) {
// Scale only root items
if (item.parent instanceof paper.Layer) {
this.scaleItems.push(item);
}
}
}
onMouseDrag (event) {
const scaleTool = this;
const modOrigSize = this.origSize;
this.origCenter = boundsPath.bounds.center;
this.centered = false;
this.lastSx = 1;
this.lastSy = 1;
// Set itemGroup
// get item to insert below so that scaled items stay in same z position
const items = getItems({
match: function (item) {
if (item instanceof paper.Layer) {
return false;
}
for (const scaleItem of scaleTool.scaleItems) {
for (const scaleItem of selectedItems) {
if (!scaleItem.isBelow(item)) {
return false;
}
@ -73,17 +53,26 @@ class ScaleTool {
this.itemToInsertBelow = items[0];
}
this.itemGroup = new paper.Group(this.scaleItems);
this.itemGroup = new paper.Group(selectedItems);
this.itemGroup.insertBelow(this.itemToInsertBelow);
this.itemGroup.addChild(this.boundsPath);
this.itemGroup.data.isHelperItem = true;
this.itemGroup.strokeScaling = false;
this.itemGroup.applyMatrix = false;
}
onMouseDrag (event) {
const modOrigSize = this.origSize;
if (event.modifiers.alt) {
this.centered = true;
this.itemGroup.position = this.origCenter;
this.pivot = this.origCenter;
this.modOrigSize = this.origSize * 0.5;
} else {
if (this.centered) {
// Reset position if we were just in alt
this.centered = false;
this.itemGroup.scale(1 / this.lastSx, 1 / this.lastSy, this.pivot);
this.lastSx = 1;
this.lastSy = 1;
}
this.pivot = this.origPivot;
}
@ -105,22 +94,9 @@ class ScaleTool {
sx *= signx;
sy *= signy;
}
this.itemGroup.scale(sx, sy, this.pivot);
for (let i = 0; i < this.boundsScaleHandles.length; i++) {
const handle = this.boundsScaleHandles[i];
handle.position = this.itemGroup.bounds[this._getRectCornerNameByIndex(i)];
handle.bringToFront();
}
for (let i = 0; i < this.boundsRotHandles.length; i++) {
const handle = this.boundsRotHandles[i];
if (handle) {
handle.position = this.itemGroup.bounds[this._getRectCornerNameByIndex(i)] + handle.data.offset;
handle.bringToFront();
}
}
this.itemGroup.scale(sx / this.lastSx, sy / this.lastSy, this.pivot);
this.lastSx = sx;
this.lastSy = sy;
}
onMouseUp () {
this.pivot = null;
@ -128,17 +104,14 @@ class ScaleTool {
this.corner = null;
this.origSize = null;
this.origCenter = null;
this.scaleItems.length = 0;
this.boundsPath = null;
this.boundsScaleHandles = [];
this.boundsRotHandles = [];
this.lastSx = 1;
this.lastSy = 1;
this.centered = false;
if (!this.itemGroup) {
return;
}
this.itemGroup.applyMatrix = true;
// mark text items as scaled (for later use on font size calc)
for (let i = 0; i < this.itemGroup.children.length; i++) {
const child = this.itemGroup.children[i];

2
src/helper/selection.js
View file

@ -12,7 +12,7 @@ import {getItemsCompoundPath, isCompoundPath, isCompoundPathChild} from './compo
*/
const getItems = function (options) {
const newMatcher = function (item) {
return !item.locked &&
return !(item instanceof paper.Layer) && !item.locked &&
!(item.data && item.data.isHelperItem) &&
(!options.match || options.match(item));
};