Merge pull request #345 from paulkaplan/scratch-svg-text

Text follow ups: don't strip newlines and use Scratch default size/font
This commit is contained in:
Paul Kaplan 2018-03-29 13:39:38 -04:00 committed by GitHub
commit 8e13c59b8f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 12 additions and 12 deletions

View file

@ -208,8 +208,11 @@ $border-radius: 0.25rem;
background: transparent; background: transparent;
border: none; border: none;
display: none; display: none;
font-family: Times;
font-size: 30px; /* @todo needs to match the text tool font/size */
font-family: Helvetica;
font-size: 22px;
outline: none; outline: none;
overflow: hidden; overflow: hidden;
padding: 0px; padding: 0px;

View file

@ -86,13 +86,10 @@ class PaperCanvas extends React.Component {
importSvg (svg, rotationCenterX, rotationCenterY) { importSvg (svg, rotationCenterX, rotationCenterY) {
const paperCanvas = this; const paperCanvas = this;
// Pre-process SVG to prevent parsing errors (discussion from #213) // Pre-process SVG to prevent parsing errors (discussion from #213)
// 1. Remove newlines and tab characters, chrome will not load urls with them. // 1. Remove svg: namespace on elements.
// https://www.chromestatus.com/feature/5735596811091968
svg = svg.split(/[\n|\r|\t]/).join('');
// 2. Remove svg: namespace on elements.
svg = svg.split(/<\s*svg:/).join('<'); svg = svg.split(/<\s*svg:/).join('<');
svg = svg.split(/<\/\s*svg:/).join('</'); svg = svg.split(/<\/\s*svg:/).join('</');
// 3. Add root svg namespace if it does not exist. // 2. Add root svg namespace if it does not exist.
const svgAttrs = svg.match(/<svg [^>]*>/); const svgAttrs = svg.match(/<svg [^>]*>/);
if (svgAttrs && svgAttrs[0].indexOf('xmlns=') === -1) { if (svgAttrs && svgAttrs[0].indexOf('xmlns=') === -1) {
svg = svg.replace( svg = svg.replace(

View file

@ -47,7 +47,7 @@ class TextTool extends paper.Tool {
this.boundingBoxTool = new BoundingBoxTool(Modes.TEXT, setSelectedItems, clearSelectedItems, onUpdateSvg); this.boundingBoxTool = new BoundingBoxTool(Modes.TEXT, setSelectedItems, clearSelectedItems, onUpdateSvg);
this.nudgeTool = new NudgeTool(this.boundingBoxTool, onUpdateSvg); this.nudgeTool = new NudgeTool(this.boundingBoxTool, onUpdateSvg);
this.lastEvent = null; this.lastEvent = null;
// We have to set these functions instead of just declaring them because // We have to set these functions instead of just declaring them because
// paper.js tools hook up the listeners in the setter functions. // paper.js tools hook up the listeners in the setter functions.
this.onMouseDown = this.handleMouseDown; this.onMouseDown = this.handleMouseDown;
@ -193,8 +193,8 @@ class TextTool extends paper.Tool {
this.textBox = new paper.PointText({ this.textBox = new paper.PointText({
point: event.point, point: event.point,
content: '', content: '',
font: 'Times', font: 'Helvetica',
fontSize: 30, fontSize: 22,
fillColor: this.colorState.fillColor, fillColor: this.colorState.fillColor,
// Default leading for both the HTML text area and paper.PointText // Default leading for both the HTML text area and paper.PointText
// is 120%, but for some reason they are slightly off from each other. // is 120%, but for some reason they are slightly off from each other.
@ -215,7 +215,7 @@ class TextTool extends paper.Tool {
} }
handleMouseUp (event) { handleMouseUp (event) {
if (event.event.button > 0 || !this.active) return; // only first mouse button if (event.event.button > 0 || !this.active) return; // only first mouse button
if (this.mode === TextTool.SELECT_MODE) { if (this.mode === TextTool.SELECT_MODE) {
this.boundingBoxTool.onMouseUp(event); this.boundingBoxTool.onMouseUp(event);
this.isBoundingBoxMode = null; this.isBoundingBoxMode = null;
@ -234,7 +234,7 @@ class TextTool extends paper.Tool {
// Ignore nudge if a text input field is focused // Ignore nudge if a text input field is focused
return; return;
} }
if (this.mode === TextTool.SELECT_MODE) { if (this.mode === TextTool.SELECT_MODE) {
this.nudgeTool.onKeyUp(event); this.nudgeTool.onKeyUp(event);
} }