scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2025-01-25 13:51:06 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Make the guide stay in the shape of the text when text is rotated

Browse source
This commit is contained in:
DD 2018-03-14 16:01:20 -04:00
parent f0b570dc51
commit 240282f9d2
3 changed files with 17 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/helper/math.js
View file

@ -82,17 +82,17 @@ const sortItemsByZIndex = function (a, b) {
return null; return null;
}; };
// Expand the size of the path by approx one pixel all around // Expand the size of the path by amount all around
const expandByOne = function (path) { const expandBy = function (path, amount) {
const center = path.position; const center = path.position;
let pathArea = path.area; let pathArea = path.area;
for (const seg of path.segments) { for (const seg of path.segments) {
const halfNorm = seg.point.subtract(center) const halfDelta = seg.point.subtract(center)
.normalize() .normalize()
.divide(2); .multiply(amount);
seg.point = seg.point.add(halfNorm); seg.point = seg.point.add(halfDelta);
// If that made the path area smaller, go the other way. // If that made the path area smaller, go the other way.
if (path.area < pathArea) seg.point = seg.point.subtract(halfNorm.multiply(2)); if (path.area < pathArea) seg.point = seg.point.subtract(halfDelta.multiply(2));
pathArea = path.area; pathArea = path.area;
} }
}; };
@ -112,7 +112,7 @@ export {
HANDLE_RATIO, HANDLE_RATIO,
checkPointsClose, checkPointsClose,
ensureClockwise, ensureClockwise,
expandByOne, expandBy,
getRandomInt, getRandomInt,
getRandomBoolean, getRandomBoolean,
snapDeltaToAngle, snapDeltaToAngle,

4
src/helper/tools/fill-tool.js
View file

@ -1,6 +1,6 @@
import paper from '@scratch/paper'; import paper from '@scratch/paper';
import {getHoveredItem} from '../hover'; import {getHoveredItem} from '../hover';
import {expandByOne} from '../math'; import {expandBy} from '../math';
class FillTool extends paper.Tool { class FillTool extends paper.Tool {
static get TOLERANCE () { static get TOLERANCE () {
@ -104,7 +104,7 @@ class FillTool extends paper.Tool {
this.addedFillItem.data.origItem = hitItem; this.addedFillItem.data.origItem = hitItem;
// This usually fixes it so there isn't a teeny tiny gap in between the fill and the outline // This usually fixes it so there isn't a teeny tiny gap in between the fill and the outline
// when filling in a hole // when filling in a hole
expandByOne(this.addedFillItem); expandBy(this.addedFillItem, .5);
this.addedFillItem.insertAbove(hitItem.parent); this.addedFillItem.insertAbove(hitItem.parent);
} else if (this.fillItem.parent instanceof paper.CompoundPath) { } else if (this.fillItem.parent instanceof paper.CompoundPath) {
this.fillItemOrigColor = hitItem.parent.fillColor; this.fillItemOrigColor = hitItem.parent.fillColor;

17
src/helper/tools/text-tool.js
View file

@ -4,8 +4,8 @@ import {styleShape} from '../style-path';
import {clearSelection} from '../selection'; import {clearSelection} from '../selection';
import BoundingBoxTool from '../selection-tools/bounding-box-tool'; import BoundingBoxTool from '../selection-tools/bounding-box-tool';
import NudgeTool from '../selection-tools/nudge-tool'; import NudgeTool from '../selection-tools/nudge-tool';
import {getGuideLayer} from '../layer'; import {hoverBounds} from '../guides';
import {getGuideColor} from '../guides'; import {expandBy} from '../math';
/** /**
* Tool for adding text. Text elements have limited editability; they can't be reshaped, * Tool for adding text. Text elements have limited editability; they can't be reshaped,
@ -148,7 +148,6 @@ class TextTool extends paper.Tool {
} else if (this.mode === TextTool.TEXT_EDIT_MODE) { } else if (this.mode === TextTool.TEXT_EDIT_MODE) {
// In text mode clicking away to begin select mode // In text mode clicking away to begin select mode
this.mode = TextTool.SELECT_MODE; this.mode = TextTool.SELECT_MODE;
// this.guide.reomve();
this.textBox.selected = true; this.textBox.selected = true;
this.setSelectedItems(); this.setSelectedItems();
} else { } else {
@ -166,11 +165,9 @@ class TextTool extends paper.Tool {
} }
if (this.mode === TextTool.TEXT_EDIT_MODE) { if (this.mode === TextTool.TEXT_EDIT_MODE) {
this.guide = new paper.Shape.Rectangle(this.textBox.bounds.expand(TextTool.TEXT_PADDING)); this.guide = hoverBounds(this.textBox);
this.guide.strokeColor = getGuideColor(); expandBy(this.guide, TextTool.TEXT_PADDING);
this.guide.dashArray = [4, 4]; this.guide.dashArray = [4, 4];
this.guide.strokeWidth = 2;
this.guide.parent = getGuideLayer();
} else if (this.guide) { } else if (this.guide) {
this.guide.remove(); this.guide.remove();
this.guide = null; this.guide = null;
@ -213,8 +210,10 @@ class TextTool extends paper.Tool {
} else if (!(event.modifiers.alt || event.modifiers.comand || event.modifiers.control || } else if (!(event.modifiers.alt || event.modifiers.comand || event.modifiers.control ||
event.modifiers.meta || event.modifiers.option)) { event.modifiers.meta || event.modifiers.option)) {
this.textBox.content = this.textBox.content + event.character; this.textBox.content = this.textBox.content + event.character;
this.guide.size = this.textBox.bounds.expand(TextTool.TEXT_PADDING); if (this.guide) this.guide.remove();
this.guide.position = this.textBox.position; this.guide = hoverBounds(this.textBox);
expandBy(this.guide, TextTool.TEXT_PADDING);
this.guide.dashArray = [4, 4];
} }
} }
} }