From 04186fd56c546044f736aa18be9707a636778790 Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Tue, 9 Jan 2018 11:21:26 +0100 Subject: [PATCH 1/8] Text can now be edited directly on the canvas --- package-lock.json | 6 --- package.json | 1 - src/actions/index.js | 6 --- src/components/D2Panel.js | 44 ++++++++++------- src/components/InputText.js | 94 ++++++++++++++++++++++++++++++++++++ src/constants/d2Constants.js | 1 + src/shape/shapeToPoints.js | 3 +- src/utils/textUtils.js | 16 +++--- 8 files changed, 131 insertions(+), 40 deletions(-) create mode 100644 src/components/InputText.js diff --git a/package-lock.json b/package-lock.json index 4c1f9a2..11e8644 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11747,12 +11747,6 @@ "prop-types": "15.6.0" } }, - "react-router-redux": { - "version": "4.0.8", - "resolved": "https://registry.npmjs.org/react-router-redux/-/react-router-redux-4.0.8.tgz", - "integrity": "sha1-InQDWWtRUeGCN32rg1tdRfD4BU4=", - "dev": true - }, "react-svg-inline": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/react-svg-inline/-/react-svg-inline-2.0.1.tgz", diff --git a/package.json b/package.json index 8604d69..6a2f517 100755 --- a/package.json +++ b/package.json @@ -82,7 +82,6 @@ "normalize-jss": "^4.0.0", "raw-loader": "^0.5.1", "react-dom": "^16.1.1", - "react-router-redux": "^4.0.8", "react-tap-event-plugin": "^3.0.2", "redux": "^3.7.2", "redux-action-wrapper": "^1.0.1", diff --git a/src/actions/index.js b/src/actions/index.js index 9c6469d..d2eceab 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -1,6 +1,5 @@ import { ActionCreators as undo } from 'redux-undo'; import * as notification from 'react-notification-system-redux'; -import { routerActions as router } from 'react-router-redux'; import * as selectionUtils from '../utils/selectionUtils.js'; import { calculatePointInImage, decomposeMatrix } from '../utils/matrixUtils.js'; import { loadImage, prepareImage } from '../utils/imageUtils.js'; @@ -74,7 +73,6 @@ export const ALIGN = 'ALIGN'; export const ADD_IMAGE = 'ADD_IMAGE'; export const D2_TEXT_INIT = 'D2_TEXT_INIT'; export const D2_TEXT_INPUT_CHANGE = 'D2_TEXT_INPUT_CHANGE'; -export const D2_TEXT_ADD = 'D2_TEXT_ADD'; export const UNION = 'UNION'; export const INTERSECT = 'INTERSECT'; export const MOVE_SELECTION = 'MOVE_SELECTION'; @@ -390,15 +388,11 @@ export function addImage(file) { export function d2textInit(position, textId, screenMatrixContainer, screenMatrixZoom) { return (dispatch) => { dispatch({ type: D2_TEXT_INIT, position, textId, screenMatrixContainer, screenMatrixZoom }); - dispatch(router.push('/sketch/inputtext')); }; } export function d2textInputChange(text, family, weight, style, fill) { return { type: D2_TEXT_INPUT_CHANGE, text, family, weight, style, fill }; } -export function d2textAdd() { - return { type: D2_TEXT_ADD }; -} const traceDragThrottle = createThrottle(); diff --git a/src/components/D2Panel.js b/src/components/D2Panel.js index 83ce0a6..cd9438d 100644 --- a/src/components/D2Panel.js +++ b/src/components/D2Panel.js @@ -23,6 +23,7 @@ import ShapesManager from '../d2/ShapesManager.js'; import EventGroup from '../d2/EventGroup.js'; import ReactResizeDetector from 'react-resize-detector'; import { load as loadPattern } from '../d2/Shape.js'; +import InputText from './InputText.js'; // import createDebug from 'debug'; // const debug = createDebug('d3d:d2'); @@ -63,6 +64,9 @@ class D2Panel extends React.Component { dispatch: PropTypes.func.isRequired, classes: PropTypes.objectOf(PropTypes.string) }; + state = { + screenMatrix: new CAL.Matrix() + }; activeNeedRender = false; inactiveNeedRender = false; @@ -117,7 +121,7 @@ class D2Panel extends React.Component { } switchTool(toolName) { - if (this.state && toolName === this.state.d2.tool) return; + if (this.state.state && toolName === this.state.state.d2.tool) return; // cleanup & remove previous tool if (this.tool) { this.tool.destroy(); @@ -135,18 +139,18 @@ class D2Panel extends React.Component { this.objectContainerActive.add(this.tool); } - update(newState) { - if (this.state === newState) return; + update(state) { + if (this.state.state === state) return; - this.updateTool(newState); + this.updateTool(state); - const shapesNeedRender = this.shapesManager.update(newState); + const shapesNeedRender = this.shapesManager.update(state); if (shapesNeedRender.active) this.activeNeedRender = true; if (shapesNeedRender.inactive) this.inactiveNeedRender = true; // Update Objects Container Space with zoom & panning - const newCanvasMatrix = newState.d2.canvasMatrix; - if (this.state && newCanvasMatrix !== this.state.d2.canvasMatrix) { + const newCanvasMatrix = state.d2.canvasMatrix; + if (this.state.state && newCanvasMatrix !== this.state.state.d2.canvasMatrix) { this.objectContainerActive.copyMatrix(newCanvasMatrix); this.objectContainerInactive.copyMatrix(newCanvasMatrix); @@ -154,9 +158,9 @@ class D2Panel extends React.Component { this.inactiveNeedRender = true; } - const selection = (this.state) ? this.state.selection : null; - const newSelection = newState.selection; - if (!this.state || newSelection !== selection) { + const selection = (this.state.state) ? this.state.state.selection : null; + const newSelection = state.selection; + if (!this.state.state || newSelection !== selection) { const newSelectedObjects = newSelection.objects; if (!selection || selection.objects !== newSelectedObjects) { const selected = newSelectedObjects.map((object) => object.id); @@ -167,25 +171,29 @@ class D2Panel extends React.Component { } } - const dragSelect = (this.state) ? this.state.d2.transform.dragSelect : null; - const newDragSelect = newState.d2.transform.dragSelect; + const dragSelect = (this.state.state) ? this.state.state.d2.transform.dragSelect : null; + const newDragSelect = state.d2.transform.dragSelect; if (!dragSelect || dragSelect !== newDragSelect) { this.activeNeedRender = true; } - this.state = newState; + this.setState({ state }); } resizeHandler = (width, height) => { this.sceneActive.setSize(width, height, PIXEL_RATIO); this.sceneInactive.setSize(width, height, PIXEL_RATIO); - this.sceneInactive.x = this.sceneActive.x = Math.round(width / 2 * PIXEL_RATIO); - this.sceneInactive.y = this.sceneActive.y = Math.round(height / 2 * PIXEL_RATIO); - + const x = Math.round(width / 2 * PIXEL_RATIO); + const y = Math.round(height / 2 * PIXEL_RATIO); const scale = Math.min(width * PIXEL_RATIO / CANVAS_WIDTH, height * PIXEL_RATIO / CANVAS_HEIGHT); - this.sceneInactive.scale = this.sceneActive.scale = scale; + const screenMatrix = new CAL.Matrix({ sx: scale, sy: scale, x, y }); + + this.sceneInactive.copyMatrix(screenMatrix); + this.sceneActive.copyMatrix(screenMatrix); + + this.setState({ screenMatrix }); this.inactiveNeedRender = this.activeNeedRender = true; this.renderRequest(); @@ -210,12 +218,14 @@ class D2Panel extends React.Component { render() { // debug('this.props.state: ', this.props.state); const { state, classes } = this.props; + const { screenMatrix } = this.state; this.update(state); this.renderCanvas(); return (
+
); } diff --git a/src/components/InputText.js b/src/components/InputText.js new file mode 100644 index 0000000..c23610f --- /dev/null +++ b/src/components/InputText.js @@ -0,0 +1,94 @@ +import React from 'react'; +import injectSheet from 'react-jss'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import * as actions from '../actions/index.js'; +import * as CAL from 'cal'; +import { TEXT_TOOL_FONT_SIZE } from '../constants/d2Constants.js'; + +document.createElement('canvas'); + +const styles = { + textInputContainer: { + position: 'absolute', + display: 'flex' + }, + textInput: { + position: 'absolute', + fontSize: `${TEXT_TOOL_FONT_SIZE}px`, + background: 'transparent', + border: 'none', + color: 'black', + textFillColor: 'transparent', + outline: 'none' + } +}; + +class InputText extends React.Component { + static propTypes = { + state: PropTypes.object.isRequired, + classes: PropTypes.objectOf(PropTypes.string), + changeText: PropTypes.func.isRequired, + screenMatrix: PropTypes.instanceOf(CAL.Matrix).isRequired + }; + + onInputChange = () => { + const shapeData = this.getShapeData(); + if (!shapeData) return; + + const { changeText } = this.props; + const { family, weight, style } = shapeData.text; + const text = this.refs.text.value; + + changeText(text, family, weight, style, true); + }; + + getShapeData = () => { + const { state } = this.props; + if (!state.d2.activeShape) return null; + const shapeData = state.objectsById[state.d2.activeShape]; + if (shapeData.type !== 'TEXT') return null; + return shapeData; + } + + componentWillUpdate() { + if (this.refs.text) this.refs.text.focus(); + } + + render() { + const { classes, state, screenMatrix } = this.props; + const shapeData = this.getShapeData(); + + if (shapeData) { + const { _matrix: m } = shapeData.transform + .multiplyMatrix(state.d2.canvasMatrix) + .multiplyMatrix(screenMatrix); + + return ( +
+ +
+ ); + } + return null; + } +} + +export default injectSheet(styles)(connect(state => ({ + state: state.sketcher.present +}), { + changeText: actions.d2textInputChange +})(InputText)); diff --git a/src/constants/d2Constants.js b/src/constants/d2Constants.js index 97777fa..71f9334 100644 --- a/src/constants/d2Constants.js +++ b/src/constants/d2Constants.js @@ -41,3 +41,4 @@ export const BRUSH_SIZES = { }; export const CLIPPER_PRECISION = 100; // accurate to the hundredth +export const TEXT_TOOL_FONT_SIZE = 40; diff --git a/src/shape/shapeToPoints.js b/src/shape/shapeToPoints.js index 730e0af..20cff6b 100644 --- a/src/shape/shapeToPoints.js +++ b/src/shape/shapeToPoints.js @@ -8,6 +8,7 @@ import { MAX_ANGLE } from '../constants/d3Constants.js'; import { SHAPE_CACHE_LIMIT } from '../constants/general.js'; import { createText } from '../utils/textUtils.js'; import { segmentBezierPath } from '../utils/curveUtils.js'; +import { TEXT_TOOL_FONT_SIZE } from '../constants/d2Constants.js'; const setDirection = (clockwise) => (path) => { return (THREE.ShapeUtils.isClockWise(path) === clockwise) ? path : path.reverse(); @@ -120,7 +121,7 @@ function shapeToPointsRaw(shapeData) { } case 'TEXT': { const { text, family, style, weight } = shapeData.text; - const textShapes = createText(text, 400, family, style, weight) + const textShapes = createText(text, TEXT_TOOL_FONT_SIZE, 10, family, style, weight) .map(([points, ...holes]) => ({ points, holes })); shapes.push(...textShapes); diff --git a/src/utils/textUtils.js b/src/utils/textUtils.js index 37b1b73..e0d059a 100644 --- a/src/utils/textUtils.js +++ b/src/utils/textUtils.js @@ -9,19 +9,17 @@ import memoize from 'memoizee'; const MARGIN = 200; export const createText = memoize(createTextRaw, { max: SHAPE_CACHE_LIMIT }); -export function createTextRaw(text, size, family, style, weight) { +export function createTextRaw(text, size, precision, family, style, weight) { if (text === '') return []; - const { width, height, canvas } = createTextCanvas(text, size, family, style, weight); + const canvas = createTextCanvas(text, size * precision, family, style, weight); // TODO merge with potrace in flood fill trace reducer const paths = POTRACE.getPaths(POTRACE.traceCanvas(canvas, POTRACE_OPTIONS)); - const halfWidth = width / 2; - const halfHeight = height / 2; const pathsOffset = paths.map(path => path.map(({ x, y }) => ({ - x: (x - halfWidth) / 10, - y: (y - halfHeight) / 10 + x: (x - MARGIN) / precision, + y: (y - MARGIN) / precision }))); const shapes = new ClipperShape(pathsOffset, true, true, false) @@ -33,7 +31,7 @@ export function createTextRaw(text, size, family, style, weight) { return shapes; } -const textContext = new Text(); +const textContext = new Text({ baseline: 'top' }); export function createTextCanvas(text, size, family, style, weight) { textContext.size = size; textContext.family = family; @@ -52,7 +50,7 @@ export function createTextCanvas(text, size, family, style, weight) { context.fillStyle = 'white'; context.fillRect(0, 0, width, height); - textContext.drawText(context, text, MARGIN, height / 2); + textContext.drawText(context, text, MARGIN, MARGIN); - return { width, height, canvas }; + return canvas; } From 1464a4b74f466b3f67334d21c13ac679ac95352b Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Tue, 9 Jan 2018 11:21:51 +0100 Subject: [PATCH 2/8] remove empty text --- src/reducer/d2/toolReducer.js | 3 ++- src/reducer/d2/tools/textReducer.js | 20 +++++++++++--------- src/reducer/index.js | 3 +-- src/utils/undoFilter.js | 1 - 4 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/reducer/d2/toolReducer.js b/src/reducer/d2/toolReducer.js index 3839b3b..c7c8a6d 100644 --- a/src/reducer/d2/toolReducer.js +++ b/src/reducer/d2/toolReducer.js @@ -8,7 +8,7 @@ import starReducer from './tools/shapes/starReducer.js'; import triangleReducer from './tools/shapes/triangleReducer.js'; import bucketReducer from './tools/bucketReducer.js'; import penReducer from './tools/penReducer.js'; -import textReducer from './tools/textReducer.js'; +import textReducer, { removeEmptyText } from './tools/textReducer.js'; import photoGuideReducer from './tools/photoGuideReducer.js'; import { transformReducer } from './tools/transformReducer.js'; import eraserReducer from './tools/eraserReducer.js'; @@ -44,6 +44,7 @@ export default function toolReducer(state, action) { // change 2D tool after explicit tool change action or on some selection if (action.type === actions.D2_CHANGE_TOOL) { state = updateTool(state, action.tool); + state = removeEmptyText(state); } if (action.category === actions.CAT_SELECTION) { state = updateTool(state, tools.TRANSFORM); diff --git a/src/reducer/d2/tools/textReducer.js b/src/reducer/d2/tools/textReducer.js index b7cb8bb..077c3ac 100644 --- a/src/reducer/d2/tools/textReducer.js +++ b/src/reducer/d2/tools/textReducer.js @@ -8,10 +8,11 @@ const debug = createDebug('d3d:reducer:text'); export default function textReducer(state, action) { if (action.log !== false) debug(action.type); - const activeShape = state.d2.activeShape; switch (action.type) { case actions.D2_TEXT_INIT: { + state = removeEmptyText(state); + const { position, textId, screenMatrixZoom } = action; const screenPosition = (position && screenMatrixZoom) ? position.applyMatrix(screenMatrixZoom.inverseMatrix()) : @@ -29,6 +30,7 @@ export default function textReducer(state, action) { } case actions.D2_TEXT_INPUT_CHANGE: { const { text, family, style, weight, fill } = action; + const { activeShape } = state.d2; return update(state, { objectsById: { [activeShape]: { @@ -43,16 +45,16 @@ export default function textReducer(state, action) { } }); } - case actions.D2_TEXT_ADD: { - if (activeShape && state.objectsById[activeShape].text.text.length === 0) { - return setActive2D(removeObject(state, activeShape), null); - } else { - return setActive2D(state, null); - } - break; - } default: return state; } +} + +export function removeEmptyText(state) { + const { activeShape } = state.d2; + + if (activeShape && state.objectsById[activeShape].text.text === '') { + return setActive2D(removeObject(state, activeShape), null); + } return state; } diff --git a/src/reducer/index.js b/src/reducer/index.js index 9fe70a2..141a060 100644 --- a/src/reducer/index.js +++ b/src/reducer/index.js @@ -142,7 +142,6 @@ function sketcherReducer(state = initialState, action) { case actions.MULTITOUCH_TRANSFORM_END: case actions.D2_TEXT_INIT: case actions.D2_TEXT_INPUT_CHANGE: - case actions.D2_TEXT_ADD: case actions.MOVE_SELECTION: return d2ToolReducer(state, action); @@ -188,11 +187,11 @@ function sketcherReducer(state = initialState, action) { return d3ToolReducer(state, action); case actions.D2_CHANGE_TOOL: - state = setActive2D(state, null); state = selectionReducer(state, action); state = d2ToolReducer(state, action); // switch and initialize tool state = updateMenus(state, action); state = contextReducer(state, action); + state = setActive2D(state, null); return state; case actions.D3_CHANGE_TOOL: diff --git a/src/utils/undoFilter.js b/src/utils/undoFilter.js index 136b56f..0a348f5 100644 --- a/src/utils/undoFilter.js +++ b/src/utils/undoFilter.js @@ -14,7 +14,6 @@ const INCLUDE = [ actions.DESELECT_ALL, actions.STAMP, actions.SELECT, - actions.D2_TEXT_ADD, actions.CLEAR, actions.TWIST_END, actions.SCULPT_END, From 2b5d24048738a3fb59ca6137943e45fa6482d6b3 Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Tue, 9 Jan 2018 11:53:12 +0100 Subject: [PATCH 3/8] increase hit area of text shapes Hit area of text shapes is now the boundingbox --- src/d2/tools/BaseTool.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/d2/tools/BaseTool.js b/src/d2/tools/BaseTool.js index 66d2530..3b723b5 100644 --- a/src/d2/tools/BaseTool.js +++ b/src/d2/tools/BaseTool.js @@ -8,7 +8,7 @@ import { shapeToPoints } from '../../shape/shapeToPoints'; import { LINE_COLLISION_MARGIN } from '../../constants/d2Constants'; import { LINE_WIDTH } from '../../constants/d2Constants'; import { PIXEL_RATIO } from '../../constants/general'; -import { Matrix } from 'cal'; +import { Matrix, Vector } from 'cal'; const HIT_ORDER = { RECT: 0, @@ -132,8 +132,20 @@ export default class BaseTool extends EventGroup { const objects = shapeDatas .filter(shapeData => { const shapeMatrix = shapeData.transform.multiplyMatrix(matrix); + let shapePoints = shapeToPoints(shapeData); - const isHit = shapeToPoints(shapeData) + if (shapeData.type === 'TEXT') { + if (shapeData.text.text === '') return false; + const { min, max } = getPointsBounds(shapePoints); + shapePoints = [{ points: [ + new Vector(min.x, min.y), + new Vector(min.x, max.y), + new Vector(max.x, max.y), + new Vector(max.x, min.y) + ], holes: [] }]; + } + + const isHit = shapePoints .some(({ points, holes }) => { const shape = applyMatrixOnShape([points, ...holes], shapeMatrix); const clipperShape = new ClipperShape(shape, shapeData.fill, true, true); From 01bd55796e0b00ce19f3a6e2496c09f9dd85d974 Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Tue, 9 Jan 2018 12:12:35 +0100 Subject: [PATCH 4/8] formatting --- src/components/InputText.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/InputText.js b/src/components/InputText.js index c23610f..9b31ab2 100644 --- a/src/components/InputText.js +++ b/src/components/InputText.js @@ -71,9 +71,7 @@ class InputText extends React.Component { > Date: Tue, 9 Jan 2018 15:42:25 +0100 Subject: [PATCH 5/8] make font face updatable and add google fonts --- img/contextmenu/btnFont.png | Bin 0 -> 16150 bytes package-lock.json | 54 +++++++++++++++++++++++++++ package.json | 1 + src/actions/index.js | 4 +- src/components/InputText.js | 5 +-- src/components/SketcherToolbars.js | 33 ++++++++++++---- src/constants/contextTools.js | 21 +++++++++++ src/constants/general.js | 11 ++++++ src/constants/menu.js | 5 +++ src/constants/shapeTypeProperties.js | 4 +- src/reducer/contextReducer.js | 34 ++++++++++++++++- src/reducer/d2/tools/textReducer.js | 19 +++++----- src/reducer/index.js | 5 ++- styles/styles.css | 7 ++++ webpack.config.js | 19 ++++++++-- 15 files changed, 193 insertions(+), 29 deletions(-) create mode 100644 img/contextmenu/btnFont.png diff --git a/img/contextmenu/btnFont.png b/img/contextmenu/btnFont.png new file mode 100644 index 0000000000000000000000000000000000000000..6cba1abfa72e928d4a4c3f6e326a14e64dc7310a GIT binary patch literal 16150 zcmeI3eQX@X6~OnbG)gXV8$fBInpVpJrB%G%kNetP-CZ2}Z0wM8EaxCLtrGTj=j^TT zZZEfc_SvD0L(_mkgeH(QN{~W}{0FYmC`xFdw185+1W{0FtB8iGPAQZ`RtqV#jUu44 z_wBj6k&*bLQs*q+?VC66y_w&#3mYAJ07JqIE6k+Tx9Hk#r{*(R(H{VDn^ORGl1ECC#-iIZGKoZ6=Ap^cHfb@uA8Rm%5AY@schgdJLrNy-;1Ql(XuE~7ZEp)iW4zJMV{y>cs!Cn zUJ6*{tR_%z%CwY}3X1d4VGxg?sj)b(!4gyBjK}NtF)@+j7}dx7L`jr{7!OLWtITU$ zhe1Xk16p^+Nao8Ytz=AKr*hC$%H?vs6&dG?LDp->q^Z0rseY0134+FWfaqbQxF#{0 z*CWM%hvRuSA7E?DD`SEI0tGcB`Po;l# zk|Loml3JM^tbbWi?d>XLDv-Plq^hklQz&zuL!6cJ_CNgnB zRNWF#fCiM3|0?swF~&zgDg^g$5vCQxNl{*ai6(RIwf08Nm0aa}HFjbeacf-3fc3+$ z^g@LLqrbF&(4C$30pX{=5m8hD~DRAkuWlFSRmvMu=SejT17$5+Nex`jJdEF^V@5OGQ6rp`58B6dBAf5;7dZG~dHcI)TCGM+hw!G=YSgr1d3#E?LP9Yb z(p+U_-?qv56xs|QRY1t+^}4+Q7Hvi?`t=-042E@hH)q;MrwHejw?P$k4Tl;TRw;^x zg%zuMsK_T~p%p%|z^5g){J2z;v*k?sJTEFU`aHcNzDN)R2wo((@O%(0!G!?9iv$;* z527Ww5FmJw;KK7kv;-Fd1TPX?cs_`h;6i}lMS=^@2hkE-2oStTaN+qNT7nA!f)@!c zJRd|$a3MhOBEf~{gJ=mZ1PERvxbS=sEy0BV!HWbJo)4lWxDX(Ck>JAfL9_%H0t7D- zTzEc+mf%8w;6;K9&j-;GTnG@nNO0l#AX4T@FKy5=YwboE(8c( zB)IT=5G}!l0Ktm{7oHEICAbhEc#+`3^Fg!(7Xkz?VsSYuFCc>yeCv1|zFyoB{qptj z)nr=j8HiBS*T5as#_F^|hIo|CJuaD;bIRDm# zefMxH_gr}K#IDHl!KQPk4?K2r4*vBlzjejI^v~N@JTiB1?&GJp-*E5I>pNfi_tlxV z=?lukl=IDxCRYi;wacg_E8D5%Q&iJ`4i4ShI{)bT2VU9qm!(Hud*_W8X4_|)jvn0* z{^gFR1b53@Ewk#`wf^|n$yn68df%~~JJy_d_@7&^Zgn2|^OgDYXI|a1W%tX;bKjc% z&V?I(@x(^ggZJJ2!t>8K?mY5lUwG`g`{yoBeSF}^eRm%o`t_+3ub$}}U-`J>UoZdY z_>Q-K*Rk@a(k-VY$Lr7Tx^2_bH$DF=|M|Aiv-d`CbIhMwJAG-?ygxK8{_S#0^M)Tg zU;p0e2kzYUr&Z_nZ#_%xnc4f@>ko~8>5k2zquI0i8E4|!?C86PdhT$K{ooPDFoC4`@h|tTKC-a zlBMmG1M+C1A&;IinPs#CGIHERH7%p3me^f>NWm-W+H&WYGU8s>34pA>`D90_1><&@XtE#y63+JQo0=g literal 0 HcmV?d00001 diff --git a/package-lock.json b/package-lock.json index 11e8644..950584e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1932,6 +1932,11 @@ "isarray": "1.0.0" } }, + "buffer-crc32": { + "version": "0.2.13", + "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz", + "integrity": "sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=" + }, "buffer-from": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.1.tgz", @@ -4286,6 +4291,14 @@ } } }, + "fd-slicer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz", + "integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=", + "requires": { + "pend": "1.2.0" + } + }, "figures": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz", @@ -5666,6 +5679,33 @@ "pinkie-promise": "2.0.1" } }, + "google-fonts-webpack-plugin": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/google-fonts-webpack-plugin/-/google-fonts-webpack-plugin-0.4.4.tgz", + "integrity": "sha512-+e2D9/DVBG9EDydRovzoqMZ658SsTBGbC0c65GyZqkwNvdj8vRSYQKXqbz7/yt7QaXsCPT1MpH45r3ivWOitcw==", + "requires": { + "lodash": "4.17.4", + "node-fetch": "1.7.3", + "webpack-sources": "0.2.3", + "yauzl": "2.9.1" + }, + "dependencies": { + "source-list-map": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-1.1.2.tgz", + "integrity": "sha1-mIkBnRAkzOVc3AaUmDN+9hhqEaE=" + }, + "webpack-sources": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-0.2.3.tgz", + "integrity": "sha1-F8Yr+vE8cH+dAsR54Nzd6DgGl/s=", + "requires": { + "source-list-map": "1.1.2", + "source-map": "0.5.7" + } + } + } + }, "got": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/got/-/got-3.3.1.tgz", @@ -10550,6 +10590,11 @@ "integrity": "sha1-z4uvrm7d/0tafvsYUmnqr0YQ3b0=", "dev": true }, + "pend": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", + "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=" + }, "pepjs": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/pepjs/-/pepjs-0.4.3.tgz", @@ -14364,6 +14409,15 @@ } } }, + "yauzl": { + "version": "2.9.1", + "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.9.1.tgz", + "integrity": "sha1-qBmB6nCleUYTOIPwKcWCGok1mn8=", + "requires": { + "buffer-crc32": "0.2.13", + "fd-slicer": "1.0.1" + } + }, "yml-loader": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/yml-loader/-/yml-loader-2.1.0.tgz", diff --git a/package.json b/package.json index 6a2f517..c3076bd 100755 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "blueimp-canvas-to-blob": "^3.14.0", "bowser": "^1.8.1", "fit-curve": "^0.1.6", + "google-fonts-webpack-plugin": "^0.4.4", "imports-loader": "^0.7.1", "jss": "^9.4.0", "keycode": "^2.1.9", diff --git a/src/actions/index.js b/src/actions/index.js index d2eceab..64285fe 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -390,8 +390,8 @@ export function d2textInit(position, textId, screenMatrixContainer, screenMatrix dispatch({ type: D2_TEXT_INIT, position, textId, screenMatrixContainer, screenMatrixZoom }); }; } -export function d2textInputChange(text, family, weight, style, fill) { - return { type: D2_TEXT_INPUT_CHANGE, text, family, weight, style, fill }; +export function d2textInputChange(text) { + return { type: D2_TEXT_INPUT_CHANGE, text }; } const traceDragThrottle = createThrottle(); diff --git a/src/components/InputText.js b/src/components/InputText.js index 9b31ab2..fe8528b 100644 --- a/src/components/InputText.js +++ b/src/components/InputText.js @@ -37,10 +37,9 @@ class InputText extends React.Component { if (!shapeData) return; const { changeText } = this.props; - const { family, weight, style } = shapeData.text; const text = this.refs.text.value; - changeText(text, family, weight, style, true); + changeText(text); }; getShapeData = () => { @@ -71,7 +70,7 @@ class InputText extends React.Component { > 0) { component = ( ); + } else if (FONT_TOOLS.includes(child.value)) { + component = ( + +

{FONT_FACE[child.value]}

+ + ); } else { component = ( = 2; const showIntersect = activeTool === d2Tools.TRANSFORM && numSelectedObjects >= 1; return { @@ -191,11 +206,14 @@ function filterMenus(activeTool, numSelectedObjects, numFilledObjects, numSolidO case contextTools.HOLE_TOGGLE: return numSelectedObjects > 0; + case contextTools.FONT: + return selectionIncludesText || activeTool === d2Tools.TEXT; + default: return true; } }).map(child => { - return filterMenus(activeTool, numSelectedObjects, numFilledObjects, numSolidObjects, child); + return filterMenus(activeTool, numSelectedObjects, numFilledObjects, numSolidObjects, selectionIncludesText, child); }) }; } @@ -217,11 +235,12 @@ const getMenus = createSelector([ state => state.sketcher.present.d2.tool, state => state.sketcher.present.selection.objects.length, state => state.sketcher.present.selection.objects.filter(({ id }) => state.sketcher.present.objectsById[id].fill).length, - state => state.sketcher.present.selection.objects.filter(({ id }) => state.sketcher.present.objectsById[id].solid).length -], (menus, activeTool, numSelectedObjects, numFilledObjects, numSolidObjects) => ({ - toolbar2d: filterMenus(activeTool, numSelectedObjects, numFilledObjects, numSolidObjects, nestChildren(menus, menus[TOOLBAR2D])), - toolbar3d: filterMenus(activeTool, numSelectedObjects, numFilledObjects, numSolidObjects, nestChildren(menus, menus[TOOLBAR3D])), - context: filterMenus(activeTool, numSelectedObjects, numFilledObjects, numSolidObjects, nestChildren(menus, menus[CONTEXT])) + state => state.sketcher.present.selection.objects.filter(({ id }) => state.sketcher.present.objectsById[id].solid).length, + state => state.sketcher.present.selection.objects.some(({ id }) => state.sketcher.present.objectsById[id].type === 'TEXT') +], (menus, activeTool, numSelectedObjects, numFilledObjects, numSolidObjects, selectionIncludesText) => ({ + toolbar2d: filterMenus(activeTool, numSelectedObjects, numFilledObjects, numSolidObjects, selectionIncludesText, nestChildren(menus, menus[TOOLBAR2D])), + toolbar3d: filterMenus(activeTool, numSelectedObjects, numFilledObjects, numSolidObjects, selectionIncludesText, nestChildren(menus, menus[TOOLBAR3D])), + context: filterMenus(activeTool, numSelectedObjects, numFilledObjects, numSolidObjects, selectionIncludesText, nestChildren(menus, menus[CONTEXT])) })); export default injectSheet(styles)(connect(getMenus)(SketcherToolbars)); diff --git a/src/constants/contextTools.js b/src/constants/contextTools.js index 382b2ea..aea829b 100644 --- a/src/constants/contextTools.js +++ b/src/constants/contextTools.js @@ -8,6 +8,7 @@ export const HOLE_TOGGLE = 'hole-toggle-tool'; export const ALIGN = 'align-tool'; export const UNION = 'union-tool'; export const INTERSECT = 'intersect-tool'; +export const FONT = 'font-tool'; export const LIGHT_BLUE_A = 'color-light-blue-a'; export const LIGHT_BLUE_B = 'color-light-blue-b'; @@ -79,3 +80,23 @@ export const ALIGN_TOOLS = [ ALIGN_VERTICAL, ALIGN_BOTTOM ]; + +export const OSWALD = 'oswald'; +export const RANGA = 'ranga'; +export const JOTI_ONE = 'joti-one'; +export const BELLEFAIR = 'bellefair'; +export const LOBSTER = 'lobster'; +export const ABRIL_FATFACE = 'abril-fatface'; +export const PLAY = 'play'; +export const FASCINATE = 'fascinate'; + +export const FONT_TOOLS = [ + OSWALD, + RANGA, + JOTI_ONE, + BELLEFAIR, + LOBSTER, + ABRIL_FATFACE, + PLAY, + FASCINATE +]; diff --git a/src/constants/general.js b/src/constants/general.js index ebb8606..4f84533 100644 --- a/src/constants/general.js +++ b/src/constants/general.js @@ -37,3 +37,14 @@ export const COLOR_STRING_TO_HEX = { [contextTools.BLACK_B]: 0xAAAAAA, [contextTools.BLACK_C]: 0x444444 }; + +export const FONT_FACE = { + [contextTools.OSWALD]: 'Oswald', + [contextTools.RANGA]: 'Ranga', + [contextTools.JOTI_ONE]: 'Joti One', + [contextTools.BELLEFAIR]: 'Bellefair', + [contextTools.LOBSTER]: 'Lobster', + [contextTools.ABRIL_FATFACE]: 'Abril Fatface', + [contextTools.PLAY]: 'Play', + [contextTools.FASCINATE]: 'Fascinate' +}; diff --git a/src/constants/menu.js b/src/constants/menu.js index 680bb66..7377723 100644 --- a/src/constants/menu.js +++ b/src/constants/menu.js @@ -109,6 +109,11 @@ const context = { selected: contextTools.ALIGN_HORIZONTAL, children: contextTools.ALIGN_TOOLS.map(value => ({ value })), ...selectorBehavior + }, { + value: contextTools.FONT, + selected: contextTools.OSWALD, + children: contextTools.FONT_TOOLS.map(value => ({ value })), + ...selectorBehavior }, { value: contextTools.UNION }, { value: contextTools.INTERSECT } diff --git a/src/constants/shapeTypeProperties.js b/src/constants/shapeTypeProperties.js index 4e2f0a4..ca5b2f1 100644 --- a/src/constants/shapeTypeProperties.js +++ b/src/constants/shapeTypeProperties.js @@ -1,6 +1,8 @@ import { Vector, Matrix } from '@doodle3d/cal'; import * as d2Tools from './d2Tools'; import * as d3Tools from './d3Tools'; +import * as contextTools from './contextTools'; +import { FONT_FACE } from '../constants/general.js'; const SHAPE = { D3Visible: true, @@ -58,7 +60,7 @@ export const SHAPE_TYPE_PROPERTIES = { ...SHAPE, defaultProperties: { ...defaultProperties, - text: { text: '', family: 'Arial', weight: 'normal', style: 'normal' }, + text: { text: '', family: FONT_FACE[contextTools.OSWALD], weight: 'normal', style: 'normal' }, fill: true } }, diff --git a/src/reducer/contextReducer.js b/src/reducer/contextReducer.js index 34418b9..087ea76 100644 --- a/src/reducer/contextReducer.js +++ b/src/reducer/contextReducer.js @@ -1,6 +1,6 @@ import update from 'react-addons-update'; import * as contextTools from '../constants/contextTools.js'; -import { COLOR_STRING_TO_HEX } from '../constants/general.js'; +import { COLOR_STRING_TO_HEX, FONT_FACE } from '../constants/general.js'; import { ERASER_SIZES, BRUSH_SIZES } from '../constants/d2Constants.js'; import { SHAPE_TYPE_PROPERTIES } from '../constants/shapeTypeProperties.js'; import * as actions from '../actions/index.js'; @@ -69,6 +69,33 @@ export default function (state, action) { }); } + case contextTools.OSWALD: + case contextTools.RANGA: + case contextTools.JOTI_ONE: + case contextTools.BELLEFAIR: + case contextTools.LOBSTER: + case contextTools.ABRIL_FATFACE: + case contextTools.PLAY: + case contextTools.FASCINATE: { + const family = FONT_FACE[action.tool]; + const { activeShape } = state.d2; + if (activeShape && state.objectsById[activeShape].type === 'TEXT') { + state = update(state, { objectsById: { [activeShape]: { text: { family: { $set: family } } } } }); + } + + return update(state, { + objectsById: state.selection.objects.reduce((updateObject, { id }) => { + if (state.objectsById[id].type === 'TEXT') { + updateObject[id] = { text: { family: { $set: FONT_FACE[action.tool] } } }; + } + return updateObject; + }, {}), + context: { + font: { $set: FONT_FACE[action.tool] } + } + }); + } + case contextTools.LIGHT_BLUE_A: case contextTools.LIGHT_BLUE_B: case contextTools.LIGHT_BLUE_C: @@ -94,6 +121,11 @@ export default function (state, action) { case contextTools.BLACK_B: case contextTools.BLACK_C: { const color = COLOR_STRING_TO_HEX[action.tool]; + const { activeShape } = state.d2; + if (activeShape) { + state = update(state, { objectsById: { [activeShape]: { color: { $set: color } } } }); + } + return updateColor(state, color); } diff --git a/src/reducer/d2/tools/textReducer.js b/src/reducer/d2/tools/textReducer.js index 077c3ac..30fef0a 100644 --- a/src/reducer/d2/tools/textReducer.js +++ b/src/reducer/d2/tools/textReducer.js @@ -8,7 +8,6 @@ const debug = createDebug('d3d:reducer:text'); export default function textReducer(state, action) { if (action.log !== false) debug(action.type); - switch (action.type) { case actions.D2_TEXT_INIT: { state = removeEmptyText(state); @@ -23,24 +22,26 @@ export default function textReducer(state, action) { } else { return addObjectActive2D(state, { transform: new Matrix({ x: screenPosition.x, y: screenPosition.y }), - type: 'TEXT' + type: 'TEXT', + text: { + text: '', + family: state.context.font, + weight: 'normal', + style: 'normal' + } }); } return state; } case actions.D2_TEXT_INPUT_CHANGE: { - const { text, family, style, weight, fill } = action; + const { text } = action; const { activeShape } = state.d2; return update(state, { objectsById: { [activeShape]: { text: { - text: { $set: text }, - family: { $set: family }, - style: { $set: style }, - weight: { $set: weight } - }, - fill: { $set: fill } + text: { $set: text } + } } } }); diff --git a/src/reducer/index.js b/src/reducer/index.js index 141a060..3330090 100644 --- a/src/reducer/index.js +++ b/src/reducer/index.js @@ -4,7 +4,7 @@ import undoFilter from '../utils/undoFilter.js'; import * as actions from '../actions/index.js'; import * as d2Tools from '../constants/d2Tools.js'; import * as d3Tools from '../constants/d3Tools.js'; -import { COLOR_STRING_TO_HEX } from '../constants/general.js'; +import { COLOR_STRING_TO_HEX, FONT_FACE } from '../constants/general.js'; import * as contextTools from '../constants/contextTools.js'; import { ERASER_SIZES, BRUSH_SIZES } from '../constants/d2Constants.js'; import update from 'react-addons-update'; @@ -36,7 +36,8 @@ const initialState = { objectIdCounter: 0, context: { solid: true, - color: COLOR_STRING_TO_HEX[contextTools.LIGHT_BLUE_B] + color: COLOR_STRING_TO_HEX[contextTools.LIGHT_BLUE_B], + font: FONT_FACE[contextTools.OSWALD] }, selection: { transform: new Matrix(), diff --git a/styles/styles.css b/styles/styles.css index 656703f..c937f2b 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -249,6 +249,13 @@ flex-wrap: wrap; } +#font-tool > .button { + background-image: url('../img/contextmenu/btnFont.png'); + background-size: 40px auto; + width: 40px; + height: 40px; +} + #color-light-blue-a { fill: #BCFFFF; } #color-light-blue-b { fill: #68E1FD; } #color-light-blue-c { fill: #01B8FF; } diff --git a/webpack.config.js b/webpack.config.js index c116e80..22b7fc5 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,6 +3,7 @@ const path = require('path'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const HTMLWebpackPlugin = require('html-webpack-plugin'); const CordovaPlugin = require('webpack-cordova-plugin'); +const GoogleFontsPlugin = require('google-fonts-webpack-plugin'); const devMode = process.env.NODE_ENV !== 'production'; const appMode = process.env.TARGET === 'app'; @@ -75,9 +76,7 @@ module.exports = { }, plugins: [ new webpack.DefinePlugin({ - 'process.env': { - 'TARGET': JSON.stringify(process.env.TARGET) - } + 'process.env.TARGET': JSON.stringify(process.env.TARGET) }), new HTMLWebpackPlugin({ title: 'Doodle3D Core - Simple example', @@ -86,6 +85,18 @@ module.exports = { scripts: appMode ? ['cordova.js'] : null, appMountId: 'app' }), + new GoogleFontsPlugin({ + fonts: [ + { family: 'Oswald' }, + { family: 'Ranga' }, + { family: 'Joti One' }, + { family: 'Bellefair' }, + { family: 'Lobster' }, + { family: 'Abril Fatface' }, + { family: 'Play' }, + { family: 'Fascinate' } + ] + }), ...(appMode ? [ new CordovaPlugin({ config: 'config.xml', @@ -95,7 +106,7 @@ module.exports = { }) ] : []) ], - devtool: "source-map", + devtool: 'source-map', devServer: { contentBase: 'dist' } From a4a5afeb08fc21f3ef3b36ff83ec136cd0356a84 Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Tue, 9 Jan 2018 15:42:30 +0100 Subject: [PATCH 6/8] formatting --- src/shape/shapeToPoints.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/shape/shapeToPoints.js b/src/shape/shapeToPoints.js index 20cff6b..0795c4d 100644 --- a/src/shape/shapeToPoints.js +++ b/src/shape/shapeToPoints.js @@ -65,7 +65,7 @@ function shapeToPointsRaw(shapeData) { const points = []; let even = false; const numLines = rays * 2; - for (let i = 0, rad = 0; i <= numLines; i++, rad += Math.PI / rays) { + for (let i = 0, rad = 0; i <= numLines; i ++, rad += Math.PI / rays, even = !even) { if (i === numLines) { // last line? points.push(points[0].clone()); // go to first point } else { @@ -73,7 +73,6 @@ function shapeToPointsRaw(shapeData) { let x = Math.sin(rad) * radius; let y = -Math.cos(rad) * radius; points.push(new Vector(x, y)); - even = !even; } } shapes.push({ points, holes: [] }); From 7b9f647f11df0070db7e527e16203a76c985891d Mon Sep 17 00:00:00 2001 From: casperlamboo Date: Tue, 9 Jan 2018 16:02:04 +0100 Subject: [PATCH 7/8] edit width of input based on number of characters --- src/components/InputText.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/InputText.js b/src/components/InputText.js index fe8528b..73e74bd 100644 --- a/src/components/InputText.js +++ b/src/components/InputText.js @@ -6,7 +6,7 @@ import * as actions from '../actions/index.js'; import * as CAL from 'cal'; import { TEXT_TOOL_FONT_SIZE } from '../constants/d2Constants.js'; -document.createElement('canvas'); +const CONTEXT = document.createElement('canvas').getContext('2d'); const styles = { textInputContainer: { @@ -63,6 +63,11 @@ class InputText extends React.Component { .multiplyMatrix(state.d2.canvasMatrix) .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 (
Date: Tue, 9 Jan 2018 16:28:11 +0100 Subject: [PATCH 8/8] update font menu font menu now places different fonts in a column instead of a row --- styles/styles.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/styles/styles.css b/styles/styles.css index c937f2b..e3d1c51 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -256,6 +256,17 @@ height: 40px; } +#font-tool .menu { + flex-direction: column; + max-height: 170px; + width: 120px; + overflow-y: auto; +} + +#font-tool .menu .menuitem { + text-align: center; +} + #color-light-blue-a { fill: #BCFFFF; } #color-light-blue-b { fill: #68E1FD; } #color-light-blue-c { fill: #01B8FF; }