Detect view bounds changes and update the edit text matrix in response

src/containers/paint-editor.jsx

@@ -8,6 +8,7 @@ import {undo, redo, undoSnapshot} from '../reducers/undo';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
 import {deactivateEyeDropper} from '../reducers/eye-dropper';
 import {setTextEditTarget} from '../reducers/text-edit-target';
+import {updateViewBounds} from '../reducers/view-bounds';
 
 import {hideGuideLayers, showGuideLayers} from '../helper/layer';
 import {performUndo, performRedo, performSnapshot, shouldShowUndo, shouldShowRedo} from '../helper/undo';
@@ -38,6 +39,9 @@ class PaintEditor extends React.Component {
             'handleSendToFront',
             'handleGroup',
             'handleUngroup',
+            'handleZoomIn',
+            'handleZoomOut',
+            'handleZoomReset',
             'canRedo',
             'canUndo',
             'onMouseDown',
@@ -137,12 +141,15 @@ class PaintEditor extends React.Component {
     }
     handleZoomIn () {
         zoomOnSelection(PaintEditor.ZOOM_INCREMENT);
+        this.props.updateViewBounds(paper.view.matrix);
     }
     handleZoomOut () {
         zoomOnSelection(-PaintEditor.ZOOM_INCREMENT);
+        this.props.updateViewBounds(paper.view.matrix);
     }
     handleZoomReset () {
         resetZoom();
+        this.props.updateViewBounds(paper.view.matrix);
     }
     setCanvas (canvas) {
         this.setState({canvas: canvas});
@@ -158,7 +165,6 @@ class PaintEditor extends React.Component {
         }
 
         if (event.target !== paper.view.element && !event.target.classList.contains(styles.textArea)) {
-            debugger;
             // Exit text edit mode if you click anywhere outside of canvas
             this.props.removeTextEditTarget();
         }
@@ -273,7 +279,8 @@ PaintEditor.propTypes = {
     undoState: PropTypes.shape({
         stack: PropTypes.arrayOf(PropTypes.object).isRequired,
         pointer: PropTypes.number.isRequired
-    })
+    }),
+    updateViewBounds: PropTypes.instanceOf(paper.Matrix).isRequired
 };
 
 const mapStateToProps = state => ({
@@ -317,6 +324,10 @@ const mapDispatchToProps = dispatch => ({
     setSelectedItems: () => {
         dispatch(setSelectedItems(getSelectedLeafItems()));
     },
+    onDeactivateEyeDropper: () => {
+        // set redux values to default for eye dropper reducer
+        dispatch(deactivateEyeDropper());
+    },
     onUndo: () => {
         dispatch(undo());
     },
@@ -326,9 +337,8 @@ const mapDispatchToProps = dispatch => ({
     undoSnapshot: snapshot => {
         dispatch(undoSnapshot(snapshot));
     },
-    onDeactivateEyeDropper: () => {
-        // set redux values to default for eye dropper reducer
-        dispatch(deactivateEyeDropper());
+    updateViewBounds: matrix => {
+        dispatch(updateViewBounds(matrix));
     }
 });
 

src/containers/paper-canvas.jsx

@@ -16,7 +16,7 @@ import {pan, resetZoom, zoomOnFixedPoint} from '../helper/view';
 import {ensureClockwise} from '../helper/math';
 import {clearHoveredItem} from '../reducers/hover';
 import {clearPasteOffset} from '../reducers/clipboard';
-
+import {updateViewBounds} from '../reducers/view-bounds';
 
 import styles from './paper-canvas.css';
 
@@ -59,6 +59,7 @@ class PaperCanvas extends React.Component {
             const oldZoom = paper.project.view.zoom;
             const oldCenter = paper.project.view.center.clone();
             resetZoom();
+            this.props.updateViewBounds(paper.view.matrix);
             this.importSvg(newProps.svg, newProps.rotationCenterX, newProps.rotationCenterY);
             paper.project.view.zoom = oldZoom;
             paper.project.view.center = oldCenter;
@@ -179,16 +180,19 @@ class PaperCanvas extends React.Component {
                 new paper.Point(offsetX, offsetY)
             );
             zoomOnFixedPoint(-event.deltaY / 100, fixedPoint);
+            this.props.updateViewBounds(paper.view.matrix);
         } else if (event.shiftKey && event.deltaX === 0) {
             // Scroll horizontally (based on vertical scroll delta)
             // This is needed as for some browser/system combinations which do not set deltaX.
             // See #156.
             const dx = event.deltaY / paper.project.view.zoom;
             pan(dx, 0);
+            this.props.updateViewBounds(paper.view.matrix);
         } else {
             const dx = event.deltaX / paper.project.view.zoom;
             const dy = event.deltaY / paper.project.view.zoom;
             pan(dx, dy);
+            this.props.updateViewBounds(paper.view.matrix);
         }
         event.preventDefault();
     }
@@ -218,7 +222,8 @@ PaperCanvas.propTypes = {
     setSelectedItems: PropTypes.func.isRequired,
     svg: PropTypes.string,
     svgId: PropTypes.string,
-    undoSnapshot: PropTypes.func.isRequired
+    undoSnapshot: PropTypes.func.isRequired,
+    updateViewBounds: PropTypes.instanceOf(paper.Matrix).isRequired
 };
 const mapStateToProps = state => ({
     mode: state.scratchPaint.mode
@@ -241,6 +246,9 @@ const mapDispatchToProps = dispatch => ({
     },
     clearPasteOffset: () => {
         dispatch(clearPasteOffset());
+    },
+    updateViewBounds: matrix => {
+        dispatch(updateViewBounds(matrix));
     }
 });
 

src/containers/text-mode.jsx

@@ -39,6 +39,9 @@ class TextMode extends React.Component {
         if (this.tool && !nextProps.textEditTarget && this.props.textEditTarget) {
             this.tool.onTextEditCancelled();
         }
+        if (this.tool && !nextProps.viewBounds.equals(this.props.viewBounds)) {
+            this.tool.onViewBoundsChanged(nextProps.viewBounds);
+        }
 
         if (nextProps.isTextModeActive && !this.props.isTextModeActive) {
             this.activateTool();
@@ -114,7 +117,8 @@ const mapStateToProps = state => ({
     colorState: state.scratchPaint.color,
     isTextModeActive: state.scratchPaint.mode === Modes.TEXT,
     selectedItems: state.scratchPaint.selectedItems,
-    textEditTarget: state.scratchPaint.textEditTarget
+    textEditTarget: state.scratchPaint.textEditTarget,
+    viewBounds: state.scratchPaint.viewBounds
 });
 const mapDispatchToProps = dispatch => ({
     clearSelectedItems: () => {

src/helper/tools/text-tool.js

@@ -94,7 +94,7 @@ class TextTool extends paper.Tool {
         };
     }
     /**
-     * Should be called if the selection changes to update the bounds of the bounding box.
+     * Called when the selection changes to update the bounds of the bounding box.
      * @param {Array<paper.Item>} selectedItems Array of selected items.
      */
     onSelectionChanged (selectedItems) {
@@ -104,6 +104,22 @@ class TextTool extends paper.Tool {
     onTextEditCancelled () {
         this.endTextEdit();
     }
+    /**
+     * Called when the view matrix changes
+     * @param {paper.Matrix} viewMtx applied to paper.view
+     */
+    onViewBoundsChanged (viewMtx) {
+        if (this.mode !== TextTool.TEXT_EDIT_MODE) {
+            return;
+        }
+        const matrix = this.textBox.matrix;
+        this.element.style.transform =
+            `translate(0px, ${this.textBox.internalBounds.y}px)
+            matrix(${viewMtx.a}, ${viewMtx.b}, ${viewMtx.c}, ${viewMtx.d},
+            ${viewMtx.tx}, ${viewMtx.ty})
+            matrix(${matrix.a}, ${matrix.b}, ${matrix.c}, ${matrix.d},
+            ${matrix.tx}, ${matrix.ty})`;
+    }
     setColorState (colorState) {
         this.colorState = colorState;
     }

src/reducers/scratch-paint-reducer.js

@@ -8,6 +8,7 @@ import hoverReducer from './hover';
 import modalsReducer from './modals';
 import selectedItemReducer from './selected-items';
 import textEditTargetReducer from './text-edit-target';
+import viewBoundsReducer from './view-bounds';
 import undoReducer from './undo';
 
 export default combineReducers({
@@ -20,5 +21,6 @@ export default combineReducers({
     modals: modalsReducer,
     selectedItems: selectedItemReducer,
     textEditTarget: textEditTargetReducer,
-    undo: undoReducer
+    undo: undoReducer,
+    viewBounds: viewBoundsReducer
 });