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

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

View file

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

View file

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

View file

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