vmario/Doodle3D-Core
0
0
Fork 0
mirror of https://github.com/Doodle3D/Doodle3D-Core.git synced 2024-06-26 14:41:21 +02:00
Code Issues Projects Releases Wiki Activity

edit width of input based on number of characters

Browse Source
This commit is contained in:
casperlamboo 2018-01-09 16:02:04 +01:00
parent a4a5afeb08
commit 7b9f647f11
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/InputText.js
View File

@ -6,7 +6,7 @@ import * as actions from '../actions/index.js';
import * as CAL from 'cal'; import * as CAL from 'cal';
import { TEXT_TOOL_FONT_SIZE } from '../constants/d2Constants.js'; import { TEXT_TOOL_FONT_SIZE } from '../constants/d2Constants.js';
document.createElement('canvas'); const CONTEXT = document.createElement('canvas').getContext('2d');
const styles = { const styles = {
textInputContainer: { textInputContainer: {
@ -63,6 +63,11 @@ class InputText extends React.Component {
.multiplyMatrix(state.d2.canvasMatrix) .multiplyMatrix(state.d2.canvasMatrix)
.multiplyMatrix(screenMatrix); .multiplyMatrix(screenMatrix);
const { family, style, weight, text } = shapeData.text;
CONTEXT.font = `${style} normal ${weight} ${TEXT_TOOL_FONT_SIZE}px ${family}`;
const width = Math.max(10, CONTEXT.measureText(shapeData.text.text).width);
return ( return (
<div <div
className={classes.textInputContainer} className={classes.textInputContainer}
@ -70,8 +75,13 @@ class InputText extends React.Component {
> >
<input <input
className={classes.textInput} className={classes.textInput}
style={{ fontFamily: shapeData.text.family }} style={{
value={shapeData.text.text} fontFamily: family,
fontStyle: style,
fontWeight: weight,
width: `${width}px`
}}
value={text}
ref="text" ref="text"
spellCheck="false" spellCheck="false"
autoFocus autoFocus