scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add dotted lines in text edit mode

Browse source
This commit is contained in:
DD 2018-03-14 15:28:22 -04:00
parent 4fd9f991f1
commit f0b570dc51
1 changed files with 26 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -4,6 +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';
/**
* Tool for adding text. Text elements have limited editability; they can't be reshaped,
@ -23,6 +25,9 @@ class TextTool extends paper.Tool {
static get DOUBLE_CLICK_MILLIS () {
return 250;
}
static get TEXT_PADDING () {
return 8;
}
/**
* @param {function} setSelectedItems Callback to set the set of selected items in the Redux state
* @param {function} clearSelectedItems Callback to clear the set of selected items in the Redux state
@ -134,6 +139,10 @@ class TextTool extends paper.Tool {
const hitResults = paper.project.hitTestAll(event.point, this.getTextEditHitOptions());
if (hitResults.length) {
// Clicking a text item to begin text edit mode on that item
if (this.guide) {
this.guide.remove();
this.guide = null;
}
this.textBox = hitResults[0].item;
this.mode = TextTool.TEXT_EDIT_MODE;
} else if (this.mode === TextTool.TEXT_EDIT_MODE) {
@ -155,6 +164,17 @@ class TextTool extends paper.Tool {
styleShape(this.textBox, this.colorState);
}
}
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.dashArray = [4, 4];
this.guide.strokeWidth = 2;
this.guide.parent = getGuideLayer();
} else if (this.guide) {
this.guide.remove();
this.guide = null;
}
}
handleMouseDrag (event) {
if (event.event.button > 0 || !this.active) return; // only first mouse button
@ -193,6 +213,8 @@ 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;
}
}
}
@ -202,6 +224,10 @@ class TextTool extends paper.Tool {
this.textBox.remove();
this.textBox = null;
}
if (this.guide) {
this.guide.remove();
this.guide = null;
}
}
}