Allow artboard width/height to be changed

src/components/paint-editor/paint-editor.jsx

@@ -43,6 +43,8 @@ import zoomInIcon from './icons/zoom-in.svg';
 import zoomOutIcon from './icons/zoom-out.svg';
 import zoomResetIcon from './icons/zoom-reset.svg';
 
+import {artBoardWidth, artBoardHeight} from '../../helper/view';
+
 const messages = defineMessages({
     bitmap: {
         defaultMessage: 'Convert to Bitmap',
@@ -202,6 +204,7 @@ const PaintEditorComponent = props => (
                     canvas={props.canvas}
                     hideScrollbars={props.isEyeDropping}
                     style={styles.canvasContainer}
+                    height={480 * artBoardHeight() / artBoardWidth() + 'px'}
                 >
                     <PaperCanvas
                         canvasRef={props.setCanvas}

src/components/scrollable-canvas/scrollable-canvas.jsx

@@ -6,6 +6,7 @@ import styles from './scrollable-canvas.css';
 const ScrollableCanvasComponent = props => (
     <div
         className={props.style}
+        style={{height: props.height}}
     >
         {props.children}
         <div

src/containers/paint-editor.jsx

@@ -20,7 +20,7 @@ import {setLayout} from '../reducers/layout';
 
 import {getSelectedLeafItems} from '../helper/selection';
 import {convertToBitmap, convertToVector} from '../helper/bitmap';
-import {resetZoom, zoomOnSelection} from '../helper/view';
+import {setArtBoardSize, resetZoom, zoomOnSelection} from '../helper/view';
 import EyeDropperTool from '../helper/tools/eye-dropper';
 
 import Modes from '../lib/modes';
@@ -94,6 +94,8 @@ class PaintEditor extends React.Component {
             colorInfo: null
         };
         this.props.setLayout(this.props.rtl ? 'rtl' : 'ltr');
+
+        setArtBoardSize(this.props.artBoardWidth, this.props.artBoardHeight);
     }
     componentDidMount () {
         document.addEventListener('keydown', this.props.onKeyPress);

src/containers/paper-canvas.jsx

@@ -11,7 +11,7 @@ import {undoSnapshot, clearUndoState} from '../reducers/undo';
 import {isGroup, ungroupItems} from '../helper/group';
 import {clearRaster, getRaster, setupLayers} from '../helper/layer';
 import {clearSelectedItems} from '../reducers/selected-items';
-import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, resetZoom, zoomToFit} from '../helper/view';
+import {artBoardWidth, artBoardHeight, resetZoom, zoomToFit} from '../helper/view';
 import {ensureClockwise, scaleWithStrokes} from '../helper/math';
 import {clearHoveredItem} from '../reducers/hover';
 import {clearPasteOffset} from '../reducers/clipboard';
@@ -128,12 +128,12 @@ class PaperCanvas extends React.Component {
 
                 getRaster().drawImage(
                     imgElement,
-                    (ART_BOARD_WIDTH / 2) - rotationCenterX,
-                    (ART_BOARD_HEIGHT / 2) - rotationCenterY);
+                    (artBoardWidth() / 2) - rotationCenterX,
+                    (artBoardHeight() / 2) - rotationCenterY);
                 getRaster().drawImage(
                     imgElement,
-                    (ART_BOARD_WIDTH / 2) - rotationCenterX,
-                    (ART_BOARD_HEIGHT / 2) - rotationCenterY);
+                    (artBoardWidth() / 2) - rotationCenterX,
+                    (artBoardHeight() / 2) - rotationCenterY);
                 this.maybeZoomToFit(true /* isBitmap */);
                 performSnapshot(this.props.undoSnapshot, Formats.BITMAP_SKIP_CONVERT);
             };
@@ -235,11 +235,11 @@ class PaperCanvas extends React.Component {
             if (viewBox && viewBox.length >= 2 && !isNaN(viewBox[0]) && !isNaN(viewBox[1])) {
                 rotationPoint = rotationPoint.subtract(viewBox[0], viewBox[1]);
             }
-            item.translate(new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2)
+            item.translate(new paper.Point(artBoardWidth() / 2, artBoardHeight() / 2)
                 .subtract(rotationPoint.multiply(2)));
         } else {
             // Center
-            item.translate(new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2)
+            item.translate(new paper.Point(artBoardWidth() / 2, artBoardHeight() / 2)
                 .subtract(itemWidth, itemHeight));
         }
         paper.project.activeLayer.insertChild(0, item);
@@ -265,10 +265,8 @@ class PaperCanvas extends React.Component {
         return (
             <canvas
                 className={styles.paperCanvas}
-                height="270px"
                 ref={this.setCanvas}
-                style={{cursor: this.props.cursor}}
-                width="480px"
+                style={{cursor: this.props.cursor, height: 480 * artBoardHeight() / artBoardWidth() + 'px'}}
             />
         );
     }

src/containers/scrollable-canvas.jsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import ScrollableCanvasComponent from '../components/scrollable-canvas/scrollable-canvas.jsx';
 
-import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, clampViewBounds, pan, zoomOnFixedPoint} from '../helper/view';
+import {artBoardWidth, artBoardHeight, clampViewBounds, pan, zoomOnFixedPoint} from '../helper/view';
 import {updateViewBounds} from '../reducers/view-bounds';
 import {redrawSelectionBox} from '../reducers/selected-items';
 
@@ -133,10 +133,10 @@ class ScrollableCanvas extends React.Component {
         let leftPercent = 0;
         if (paper.project) {
             const {x, y, width, height} = paper.view.bounds;
-            widthPercent = Math.min(100, 100 * width / ART_BOARD_WIDTH);
-            heightPercent = Math.min(100, 100 * height / ART_BOARD_HEIGHT);
-            const centerX = (x + (width / 2)) / ART_BOARD_WIDTH;
-            const centerY = (y + (height / 2)) / ART_BOARD_HEIGHT;
+            widthPercent = Math.min(100, 100 * width / artBoardWidth());
+            heightPercent = Math.min(100, 100 * height / artBoardHeight());
+            const centerX = (x + (width / 2)) / artBoardWidth();
+            const centerY = (y + (height / 2)) / artBoardHeight();
             topPercent = Math.max(0, (100 * centerY) - (heightPercent / 2));
             leftPercent = Math.max(0, (100 * centerX) - (widthPercent / 2));
         }
@@ -146,6 +146,7 @@ class ScrollableCanvas extends React.Component {
                 horizontalScrollLengthPercent={widthPercent}
                 horizontalScrollStartPercent={leftPercent}
                 style={this.props.style}
+                height={this.props.height}
                 verticalScrollLengthPercent={heightPercent}
                 verticalScrollStartPercent={topPercent}
                 onHorizontalScrollbarMouseDown={this.handleHorizontalScrollbarMouseDown}

src/helper/bit-tools/line-tool.js

@@ -2,7 +2,7 @@ import paper from '@scratch/paper';
 import {getRaster} from '../layer';
 import {forEachLinePoint, getBrushMark} from '../bitmap';
 import {createCanvas, getGuideLayer} from '../layer';
-import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
+import {artBoardWidth, artBoardHeight} from '../view';
 
 /**
  * Tool for drawing lines with the bitmap brush.
@@ -14,7 +14,7 @@ class LineTool extends paper.Tool {
     constructor (onUpdateImage) {
         super();
         this.onUpdateImage = onUpdateImage;
-        
+
         // We have to set these functions instead of just declaring them because
         // paper.js tools hook up the listeners in the setter functions.
         this.onMouseMove = this.handleMouseMove;
@@ -92,13 +92,13 @@ class LineTool extends paper.Tool {
 
         // Clear
         const context = this.drawTarget.canvas.getContext('2d');
-        context.clearRect(0, 0, ART_BOARD_WIDTH, ART_BOARD_HEIGHT);
+        context.clearRect(0, 0, artBoardWidth(), artBoardHeight());
 
         forEachLinePoint(this.startPoint, event.point, this.draw.bind(this));
     }
     handleMouseUp (event) {
         if (event.event.button > 0 || !this.active) return; // only first mouse button
-        
+
         this.drawTarget.remove();
         this.drawTarget = getRaster();
         forEachLinePoint(this.startPoint, event.point, this.draw.bind(this));

src/helper/layer.js

@@ -1,6 +1,6 @@
 import paper from '@scratch/paper';
 import log from '../log/log';
-import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from './view';
+import {artBoardWidth, artBoardHeight} from './view';
 
 const _getLayer = function (layerString) {
     for (const layer of paper.project.layers) {
@@ -16,14 +16,14 @@ const _getPaintingLayer = function () {
 
 /**
  * Creates a canvas with width and height matching the art board size.
- * @param {?number} width Width of the canvas. Defaults to ART_BOARD_WIDTH.
- * @param {?number} height Height of the canvas. Defaults to ART_BOARD_HEIGHT.
+ * @param {?number} width Width of the canvas. Defaults to artBoardWidth().
+ * @param {?number} height Height of the canvas. Defaults to artBoardHeight().
  * @return {HTMLCanvasElement} the canvas
  */
 const createCanvas = function (width, height) {
     const canvas = document.createElement('canvas');
-    canvas.width = width ? width : ART_BOARD_WIDTH;
-    canvas.height = height ? height : ART_BOARD_HEIGHT;
+    canvas.width = width ? width : artBoardWidth();
+    canvas.height = height ? height : artBoardHeight();
     canvas.getContext('2d').imageSmoothingEnabled = false;
     return canvas;
 };
@@ -38,7 +38,7 @@ const clearRaster = function () {
     raster.parent = layer;
     raster.guide = true;
     raster.locked = true;
-    raster.position = new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2);
+    raster.position = new paper.Point(artBoardWidth() / 2, artBoardHeight() / 2);
 };
 
 const getRaster = function () {
@@ -167,30 +167,30 @@ const _makeBackgroundGuideLayer = function () {
     const guideLayer = new paper.Layer();
     guideLayer.locked = true;
 
-    const vBackground = _makeBackgroundPaper(160, 90, '#E5E5E5');
-    vBackground.position = new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2);
+    const vBackground = _makeBackgroundPaper(artBoardWidth() / 8, artBoardHeight() / 8, '#E5E5E5');
+    vBackground.position = new paper.Point(artBoardWidth() / 2, artBoardHeight() / 2);
     vBackground.scaling = new paper.Point(8, 8);
     vBackground.guide = true;
     vBackground.locked = true;
 
     const vLine = new paper.Path.Line(new paper.Point(0, -7), new paper.Point(0, 7));
     vLine.strokeWidth = 2;
     vLine.strokeColor = '#ccc';
-    vLine.position = new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2);
+    vLine.position = new paper.Point(artBoardWidth() / 2, artBoardHeight() / 2);
     vLine.guide = true;
     vLine.locked = true;
 
     const hLine = new paper.Path.Line(new paper.Point(-7, 0), new paper.Point(7, 0));
     hLine.strokeWidth = 2;
     hLine.strokeColor = '#ccc';
-    hLine.position = new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2);
+    hLine.position = new paper.Point(artBoardWidth() / 2, artBoardHeight() / 2);
     hLine.guide = true;
     hLine.locked = true;
 
     const circle = new paper.Shape.Circle(new paper.Point(0, 0), 5);
     circle.strokeWidth = 2;
     circle.strokeColor = '#ccc';
-    circle.position = new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2);
+    circle.position = new paper.Point(artBoardWidth() / 2, artBoardHeight() / 2);
     circle.guide = true;
     circle.locked = true;
 

src/helper/selection-tools/move-tool.js

@@ -3,7 +3,7 @@ import Modes from '../../lib/modes';
 import {isGroup} from '../group';
 import {isCompoundPathItem, getRootItem} from '../item';
 import {snapDeltaToAngle} from '../math';
-import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
+import {artBoardWidth, artBoardHeight} from '../view';
 import {clearSelection, cloneSelection, getSelectedLeafItems, getSelectedRootItems, setItemSelection}
     from '../selection';
 
@@ -99,8 +99,8 @@ class MoveTool {
     }
     onMouseDrag (event) {
         const point = event.point;
-        point.x = Math.max(0, Math.min(point.x, ART_BOARD_WIDTH));
-        point.y = Math.max(0, Math.min(point.y, ART_BOARD_HEIGHT));
+        point.x = Math.max(0, Math.min(point.x, artBoardWidth()));
+        point.y = Math.max(0, Math.min(point.y, artBoardHeight()));
         const dragVector = point.subtract(event.downPoint);
 
         for (const item of this.selectedItems) {

src/helper/selection-tools/nudge-tool.js

@@ -1,6 +1,6 @@
 import paper from '@scratch/paper';
 import {getSelectedRootItems} from '../selection';
-import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
+import {artBoardWidth, artBoardHeight} from '../view';
 
 const NUDGE_MORE_MULTIPLIER = 15;
 
@@ -28,7 +28,7 @@ class NudgeTool {
 
         const selected = getSelectedRootItems();
         if (selected.length === 0) return;
-        
+
         // Get bounds. Don't let item bounds go out of bounds.
         let rect;
         for (const item of selected) {
@@ -43,11 +43,11 @@ class NudgeTool {
         if (event.key === 'up') {
             translation = new paper.Point(0, -Math.min(nudgeAmount, rect.bottom - 1));
         } else if (event.key === 'down') {
-            translation = new paper.Point(0, Math.min(nudgeAmount, ART_BOARD_HEIGHT - rect.top - 1));
+            translation = new paper.Point(0, Math.min(nudgeAmount, artBoardHeight() - rect.top - 1));
         } else if (event.key === 'left') {
             translation = new paper.Point(-Math.min(nudgeAmount, rect.right - 1), 0);
         } else if (event.key === 'right') {
-            translation = new paper.Point(Math.min(nudgeAmount, ART_BOARD_WIDTH - rect.left - 1), 0);
+            translation = new paper.Point(Math.min(nudgeAmount, artBoardWidth() - rect.left - 1), 0);
         }
 
         if (translation) {

src/helper/selection-tools/point-tool.js

@@ -1,6 +1,6 @@
 import paper from '@scratch/paper';
 import {HANDLE_RATIO, snapDeltaToAngle} from '../math';
-import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
+import {artBoardWidth, artBoardHeight} from '../view';
 import {clearSelection, getSelectedLeafItems, getSelectedSegments} from '../selection';
 
 /** Subtool of ReshapeTool for moving control points. */
@@ -59,7 +59,7 @@ class PointTool {
             }
             hitProperties.hitResult.segment.selected = true;
         }
-        
+
         this.selectedItems = getSelectedLeafItems();
     }
     /**
@@ -144,16 +144,16 @@ class PointTool {
         this.deselectOnMouseUp = null;
         this.invertDeselect = false;
         this.deleteOnMouseUp = null;
-        
+
         const point = event.point;
-        point.x = Math.max(0, Math.min(point.x, ART_BOARD_WIDTH));
-        point.y = Math.max(0, Math.min(point.y, ART_BOARD_HEIGHT));
+        point.x = Math.max(0, Math.min(point.x, artBoardWidth()));
+        point.y = Math.max(0, Math.min(point.y, artBoardHeight()));
 
         if (!this.lastPoint) this.lastPoint = event.lastPoint;
         const dragVector = point.subtract(event.downPoint);
         const delta = point.subtract(this.lastPoint);
         this.lastPoint = point;
-        
+
         const selectedSegments = getSelectedSegments();
         for (const seg of selectedSegments) {
             // add the point of the segment before the drag started
@@ -171,7 +171,7 @@ class PointTool {
     }
     onMouseUp () {
         this.lastPoint = null;
-        
+
         // resetting the items and segments origin points for the next usage
         let moved = false;
         const selectedSegments = getSelectedSegments();

src/helper/selection-tools/scale-tool.js

@@ -1,6 +1,6 @@
 import paper from '@scratch/paper';
 import {getItems} from '../selection';
-import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
+import {artBoardWidth, artBoardHeight} from '../view';
 
 /**
  * Tool to handle scaling items by pulling on the handles around the edges of the bounding
@@ -70,8 +70,8 @@ class ScaleTool {
     onMouseDrag (event) {
         if (!this.active) return;
         const point = event.point;
-        point.x = Math.max(0, Math.min(point.x, ART_BOARD_WIDTH));
-        point.y = Math.max(0, Math.min(point.y, ART_BOARD_HEIGHT));
+        point.x = Math.max(0, Math.min(point.x, artBoardWidth()));
+        point.y = Math.max(0, Math.min(point.y, artBoardHeight()));
 
         if (!this.lastPoint) this.lastPoint = event.lastPoint;
         const delta = point.subtract(this.lastPoint);
@@ -135,7 +135,7 @@ class ScaleTool {
         }
         this.boundsPath.remove();
         this.boundsPath = null;
-        
+
         // mark text items as scaled (for later use on font size calc)
         for (let i = 0; i < this.itemGroup.children.length; i++) {
             const child = this.itemGroup.children[i];
@@ -154,7 +154,7 @@ class ScaleTool {
             this.itemGroup.layer.addChildren(this.itemGroup.children);
         }
         this.itemGroup.remove();
-        
+
         this.onUpdateImage();
         this.active = false;
     }

src/helper/selection-tools/selection-box-tool.js

@@ -2,7 +2,7 @@ import paper from '@scratch/paper';
 import {rectSelect} from '../guides';
 import {clearSelection, processRectangularSelection} from '../selection';
 import {getRaster} from '../layer';
-import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
+import {artBoardWidth, artBoardHeight} from '../view';
 
 /** Tool to handle drag selection. A dotted line box appears and everything enclosed is selected. */
 class SelectionBoxTool {
@@ -50,8 +50,8 @@ class SelectionBoxTool {
                     Math.max(0, Math.round(this.selectionRect.bounds.topLeft.x)),
                     Math.max(0, Math.round(this.selectionRect.bounds.topLeft.y))),
                 to: new paper.Point(
-                    Math.min(ART_BOARD_WIDTH, Math.round(this.selectionRect.bounds.bottomRight.x)),
-                    Math.min(ART_BOARD_HEIGHT, Math.round(this.selectionRect.bounds.bottomRight.y)))
+                    Math.min(artBoardWidth(), Math.round(this.selectionRect.bounds.bottomRight.x)),
+                    Math.min(artBoardHeight(), Math.round(this.selectionRect.bounds.bottomRight.y)))
             });
 
             // Remove dotted rectangle