Merge pull request #386 from fsih/doubleRes

Double resolution of canvas

src/containers/paint-editor.jsx

@@ -17,6 +17,7 @@ import {trim} from '../helper/bitmap';
 import {performUndo, performRedo, performSnapshot, shouldShowUndo, shouldShowRedo} from '../helper/undo';
 import {bringToFront, sendBackward, sendToBack, bringForward} from '../helper/order';
 import {groupSelection, ungroupSelection} from '../helper/group';
+import {scaleWithStrokes} from '../helper/math';
 import {getSelectedLeafItems} from '../helper/selection';
 import {resetZoom, zoomOnSelection} from '../helper/view';
 import EyeDropperTool from '../helper/tools/eye-dropper';
@@ -112,6 +113,9 @@ class PaintEditor extends React.Component {
         }
         
         const guideLayers = hideGuideLayers(true /* includeRaster */);
+
+        // Export at 0.5x
+        scaleWithStrokes(paper.project.activeLayer, .5, new paper.Point());
         const bounds = paper.project.activeLayer.bounds;
 
         this.props.onUpdateSvg(
@@ -120,8 +124,11 @@ class PaintEditor extends React.Component {
                 bounds: 'content',
                 matrix: new paper.Matrix().translate(-bounds.x, -bounds.y)
             }),
-            paper.project.view.center.x - bounds.x,
+            (paper.project.view.center.x / 2) - bounds.x,
-            paper.project.view.center.y - bounds.y);
+            (paper.project.view.center.y / 2) - bounds.y);
+
+        scaleWithStrokes(paper.project.activeLayer, 2, new paper.Point());
+        paper.project.activeLayer.applyMatrix = true;
 
         showGuideLayers(guideLayers);
         if (raster) raster.remove();

src/containers/paper-canvas.jsx

@@ -14,8 +14,8 @@ import {isGroup, ungroupItems} from '../helper/group';
 import {clearRaster, getRaster, setupLayers, hideGuideLayers, showGuideLayers} from '../helper/layer';
 import {deleteSelection, getSelectedLeafItems} from '../helper/selection';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
-import {pan, resetZoom, zoomOnFixedPoint} from '../helper/view';
+import {clampViewBounds, pan, resetZoom, zoomOnFixedPoint} from '../helper/view';
-import {ensureClockwise} from '../helper/math';
+import {ensureClockwise, scaleWithStrokes} from '../helper/math';
 import {clearHoveredItem} from '../reducers/hover';
 import {clearPasteOffset} from '../reducers/clipboard';
 import {updateViewBounds} from '../reducers/view-bounds';
@@ -41,6 +41,8 @@ class PaperCanvas extends React.Component {
     componentDidMount () {
         document.addEventListener('keydown', this.handleKeyDown);
         paper.setup(this.canvas);
+        paper.view.zoom = .5;
+        clampViewBounds();
 
         const context = this.canvas.getContext('2d');
         context.webkitImageSmoothingEnabled = false;
@@ -85,6 +87,12 @@ class PaperCanvas extends React.Component {
         // @todo if the active layer contains only rasters, drawing them directly to the raster layer
         // would be more efficient.
         // Export svg
+    
+        // Store the zoom/pan and restore it after snapshotting
+        const oldZoom = paper.project.view.zoom;
+        const oldCenter = paper.project.view.center.clone();
+        paper.project.view.zoom = 1;
+
         const guideLayers = hideGuideLayers(true /* includeRaster */);
         const bounds = paper.project.activeLayer.bounds;
         const svg = paper.project.exportSVG({
@@ -112,6 +120,10 @@ class PaperCanvas extends React.Component {
             };
         };
         img.src = `data:image/svg+xml;charset=utf-8,${svgString}`;
+
+        // Restore old zoom
+        paper.project.view.zoom = oldZoom;
+        paper.project.view.center = oldCenter;
     }
     convertToVector () {
         this.props.clearSelectedItems();
@@ -207,6 +219,7 @@ class PaperCanvas extends React.Component {
                 }
 
                 ensureClockwise(item);
+                scaleWithStrokes(item, 2, new paper.Point()); // Import at 2x
                 
                 if (typeof rotationCenterX !== 'undefined' && typeof rotationCenterY !== 'undefined') {
                     let rotationPoint = new paper.Point(rotationCenterX, rotationCenterY);
@@ -214,7 +227,7 @@ class PaperCanvas extends React.Component {
                         rotationPoint = rotationPoint.subtract(viewBox[0], viewBox[1]);
                     }
                     item.translate(paper.project.view.center
-                        .subtract(rotationPoint));
+                        .subtract(rotationPoint.multiply(2)));
                 } else {
                     // Center
                     item.translate(paper.project.view.center

src/helper/layer.js

@@ -1,6 +1,6 @@
 import paper from '@scratch/paper';
-import rasterSrc from './transparent.png';
 import log from '../log/log';
+import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from './view';
 
 const _getLayer = function (layerString) {
     for (const layer of paper.project.layers) {
@@ -19,7 +19,10 @@ const clearRaster = function () {
     layer.removeChildren();
     
     // Generate blank raster
-    const raster = new paper.Raster(rasterSrc);
+    const tmpCanvas = document.createElement('canvas');
+    tmpCanvas.width = ART_BOARD_WIDTH;
+    tmpCanvas.height = ART_BOARD_HEIGHT;
+    const raster = new paper.Raster(tmpCanvas);
     raster.parent = layer;
     raster.guide = true;
     raster.locked = true;
@@ -30,7 +33,10 @@ const getRaster = function () {
     const layer = _getLayer('isRasterLayer');
     // Generate blank raster
     if (layer.children.length === 0) {
-        const raster = new paper.Raster(rasterSrc);
+        const tmpCanvas = document.createElement('canvas');
+        tmpCanvas.width = ART_BOARD_WIDTH;
+        tmpCanvas.height = ART_BOARD_HEIGHT;
+        const raster = new paper.Raster(tmpCanvas);
         raster.parent = layer;
         raster.guide = true;
         raster.locked = true;
@@ -158,7 +164,7 @@ const _makeBackgroundGuideLayer = function () {
 
     const vBackground = _makeBackgroundPaper(120, 90, '#E5E5E5');
     vBackground.position = paper.view.center;
-    vBackground.scaling = new paper.Point(4, 4);
+    vBackground.scaling = new paper.Point(8, 8);
     vBackground.guide = true;
     vBackground.locked = true;
 

src/helper/math.js

@@ -97,15 +97,34 @@ const expandBy = function (path, amount) {
     }
 };
 
-// Make item clockwise. Drill down into groups.
+// Do for all nested items in groups
-const ensureClockwise = function (item) {
+const _doRecursively = function (item, func) {
     if (item instanceof paper.Group) {
         for (const child of item.children) {
-            ensureClockwise(child);
+            _doRecursively(child, func);
         }
-    } else if (item instanceof paper.PathItem) {
+    } else {
+        func(item);
+    }
+};
+
+// Make item clockwise. Drill down into groups.
+const ensureClockwise = function (root) {
+    _doRecursively(root, item => {
+        if (item instanceof paper.PathItem) {
             item.clockwise = true;
         }
+    });
+};
+
+// Scale item and its strokes by factor
+const scaleWithStrokes = function (root, factor, pivot) {
+    _doRecursively(root, item => {
+        if (item.strokeWidth) {
+            item.strokeWidth = item.strokeWidth * factor;
+        }
+    });
+    root.scale(factor, pivot);
 };
 
 export {
@@ -115,6 +134,7 @@ export {
     expandBy,
     getRandomInt,
     getRandomBoolean,
+    scaleWithStrokes,
     snapDeltaToAngle,
     sortItemsByZIndex
 };

src/helper/view.js

@@ -1,6 +1,9 @@
 import paper from '@scratch/paper';
 import {getSelectedRootItems} from './selection';
 
+const ART_BOARD_WIDTH = 480 * 2;
+const ART_BOARD_HEIGHT = 360 * 2;
+
 const clampViewBounds = () => {
     const {left, right, top, bottom} = paper.project.view.bounds;
     if (left < 0) {
@@ -9,11 +12,11 @@ const clampViewBounds = () => {
     if (top < 0) {
         paper.project.view.scrollBy(new paper.Point(0, -top));
     }
-    if (bottom > 360) {
+    if (bottom > ART_BOARD_HEIGHT) {
-        paper.project.view.scrollBy(new paper.Point(0, 360 - bottom));
+        paper.project.view.scrollBy(new paper.Point(0, ART_BOARD_HEIGHT - bottom));
     }
-    if (right > 480) {
+    if (right > ART_BOARD_WIDTH) {
-        paper.project.view.scrollBy(new paper.Point(480 - right, 0));
+        paper.project.view.scrollBy(new paper.Point(ART_BOARD_WIDTH - right, 0));
     }
 };
 
@@ -22,7 +25,7 @@ const clampViewBounds = () => {
 const zoomOnFixedPoint = (deltaZoom, fixedPoint) => {
     const {view} = paper.project;
     const preZoomCenter = view.center;
-    const newZoom = Math.max(1, view.zoom + deltaZoom);
+    const newZoom = Math.max(0.5, view.zoom + deltaZoom);
     const scaling = view.zoom / newZoom;
     const preZoomOffset = fixedPoint.subtract(preZoomCenter);
     const postZoomOffset = fixedPoint.subtract(preZoomOffset.multiply(scaling))
@@ -53,7 +56,7 @@ const zoomOnSelection = deltaZoom => {
 };
 
 const resetZoom = () => {
-    paper.project.view.zoom = 1;
+    paper.project.view.zoom = .5;
     clampViewBounds();
 };
 
@@ -63,6 +66,9 @@ const pan = (dx, dy) => {
 };
 
 export {
+    ART_BOARD_HEIGHT,
+    ART_BOARD_WIDTH,
+    clampViewBounds,
     pan,
     resetZoom,
     zoomOnSelection,

src/reducers/brush-mode.js

@@ -1,7 +1,7 @@
 import log from '../log/log';
 
 const CHANGE_BRUSH_SIZE = 'scratch-paint/brush-mode/CHANGE_BRUSH_SIZE';
-const initialState = {brushSize: 5};
+const initialState = {brushSize: 10};
 
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;

src/reducers/eraser-mode.js

@@ -1,7 +1,7 @@
 import log from '../log/log';
 
 const CHANGE_ERASER_SIZE = 'scratch-paint/eraser-mode/CHANGE_ERASER_SIZE';
-const initialState = {brushSize: 20};
+const initialState = {brushSize: 40};
 
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;

src/reducers/stroke-width.js

@@ -3,8 +3,8 @@ import {CHANGE_SELECTED_ITEMS} from './selected-items';
 import {getColorsFromSelection} from '../helper/style-path';
 
 const CHANGE_STROKE_WIDTH = 'scratch-paint/stroke-width/CHANGE_STROKE_WIDTH';
-const MAX_STROKE_WIDTH = 400;
+const MAX_STROKE_WIDTH = 800;
-const initialState = 2;
+const initialState = 4;
 
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;