Merge pull request #177 from fsih/layerMixing

Try to make layer management more robust

src/containers/paint-editor.jsx

@@ -7,7 +7,7 @@ import {undo, redo, undoSnapshot} from '../reducers/undo';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
 import {incrementPasteOffset, setClipboardItems} from '../reducers/clipboard';
 
-import {getGuideLayer, getBackgroundGuideLayer} from '../helper/layer';
+import {hideGuideLayers, showGuideLayers} from '../helper/layer';
 import {performUndo, performRedo, performSnapshot, shouldShowUndo, shouldShowRedo} from '../helper/undo';
 import {bringToFront, sendBackward, sendToBack, bringForward} from '../helper/order';
 import {groupSelection, ungroupSelection} from '../helper/group';
@@ -53,11 +53,9 @@ class PaintEditor extends React.Component {
         const oldZoom = paper.project.view.zoom;
         const oldCenter = paper.project.view.center.clone();
         resetZoom();
-        // Hide guide layer
+
-        const guideLayer = getGuideLayer();
+        const guideLayers = hideGuideLayers();
-        const backgroundGuideLayer = getBackgroundGuideLayer();
+
-        guideLayer.remove();
-        backgroundGuideLayer.remove();
         const bounds = paper.project.activeLayer.bounds;
         this.props.onUpdateSvg(
             paper.project.exportSVG({
@@ -66,12 +64,13 @@ class PaintEditor extends React.Component {
             }),
             paper.project.view.center.x - bounds.x,
             paper.project.view.center.y - bounds.y);
+
+        showGuideLayers(guideLayers);
+
         if (!skipSnapshot) {
             performSnapshot(this.props.undoSnapshot);
         }
-        paper.project.addLayer(backgroundGuideLayer);
+
-        backgroundGuideLayer.sendToBack();
-        paper.project.addLayer(guideLayer);
         // Restore old zoom
         paper.project.view.zoom = oldZoom;
         paper.project.view.center = oldCenter;

src/helper/layer.js

@@ -1,28 +1,69 @@
 import paper from '@scratch/paper';
 import canvasBg from './background.png';
+import log from '../log/log';
 
-const getGuideLayer = function () {
+const _getLayer = function (layerString) {
-    for (let i = 0; i < paper.project.layers.length; i++) {
+    for (const layer of paper.project.layers) {
-        const layer = paper.project.layers[i];
+        if (layer.data && layer.data[layerString]) {
-        if (layer.data && layer.data.isGuideLayer) {
             return layer;
         }
     }
-
+    log.error(`Didn't find layer ${layerString}`);
-    // Create if it doesn't exist
-    const guideLayer = new paper.Layer();
-    guideLayer.data.isGuideLayer = true;
-    guideLayer.bringToFront();
-    return guideLayer;
 };
 
-const getBackgroundGuideLayer = function () {
+const _getPaintingLayer = function () {
-    for (let i = 0; i < paper.project.layers.length; i++) {
+    return _getLayer('isPaintingLayer');
-        const layer = paper.project.layers[i];
+};
-        if (layer.data && layer.data.isBackgroundGuideLayer) {
+
-            return layer;
+const _getBackgroundGuideLayer = function () {
-        }
+    return _getLayer('isBackgroundGuideLayer');
+};
+
+const getGuideLayer = function () {
+    return _getLayer('isGuideLayer');
+};
+
+/**
+ * Removes the guide layers, e.g. for purposes of exporting the image. Must call showGuideLayers to re-add them.
+ * @return {object} an object of the removed layers, which should be passed to showGuideLayers to re-add them.
+ */
+const hideGuideLayers = function () {
+    const backgroundGuideLayer = _getBackgroundGuideLayer();
+    const guideLayer = getGuideLayer();
+    guideLayer.remove();
+    backgroundGuideLayer.remove();
+    return {
+        guideLayer: guideLayer,
+        backgroundGuideLayer: backgroundGuideLayer
+    };
+};
+
+/**
+ * Add back the guide layers removed by calling hideGuideLayers. This must be done before any editing operations are
+ * taken in the paint editor.
+ * @param {!object} guideLayers object of the removed layers, which was returned by hideGuideLayers
+ */
+const showGuideLayers = function (guideLayers) {
+    const backgroundGuideLayer = guideLayers.backgroundGuideLayer;
+    const guideLayer = guideLayers.guideLayer;
+    if (!backgroundGuideLayer.index) {
+        paper.project.addLayer(backgroundGuideLayer);
+        backgroundGuideLayer.sendToBack();
     }
+    if (!guideLayer.index) {
+        paper.project.addLayer(guideLayer);
+        guideLayer.bringToFront();
+    }
+    if (paper.project.activeLayer !== _getPaintingLayer()) {
+        log.error(`Wrong active layer`);
+        log.error(paper.project.activeLayer.data);
+    }
+};
+
+const _makeGuideLayer = function () {
+    const guideLayer = new paper.Layer();
+    guideLayer.data.isGuideLayer = true;
+    return guideLayer;
 };
 
 const _makePaintingLayer = function () {
@@ -67,17 +108,21 @@ const _makeBackgroundGuideLayer = function () {
     circle.locked = true;
 
     guideLayer.data.isBackgroundGuideLayer = true;
-    guideLayer.sendToBack();
     return guideLayer;
 };
 
 const setupLayers = function () {
-    _makeBackgroundGuideLayer();
+    const backgroundGuideLayer = _makeBackgroundGuideLayer();
-    _makePaintingLayer().activate();
+    const paintLayer = _makePaintingLayer();
+    const guideLayer = _makeGuideLayer();
+    backgroundGuideLayer.sendToBack();
+    guideLayer.bringToFront();
+    paintLayer.activate();
 };
 
 export {
+    hideGuideLayers,
+    showGuideLayers,
     getGuideLayer,
-    getBackgroundGuideLayer,
     setupLayers
 };

src/helper/undo.js

@@ -1,23 +1,14 @@
 // undo functionality
 // modifed from https://github.com/memononen/stylii
 import paper from '@scratch/paper';
-import {getBackgroundGuideLayer} from '../helper/layer';
+import {hideGuideLayers, showGuideLayers} from '../helper/layer';
 
 const performSnapshot = function (dispatchPerformSnapshot) {
-    const backgroundGuideLayer = getBackgroundGuideLayer();
+    const guideLayers = hideGuideLayers();
-    if (backgroundGuideLayer) {
-        backgroundGuideLayer.remove();
-    }
     dispatchPerformSnapshot({
         json: paper.project.exportJSON({asString: false})
     });
-    if (backgroundGuideLayer) {
+    showGuideLayers(guideLayers);
-        paper.project.addLayer(backgroundGuideLayer);
-        backgroundGuideLayer.sendToBack();
-    }
-
-    // @todo enable/disable buttons
-    // updateButtonVisibility();
 };
 
 const _restore = function (entry, setSelectedItems, onUpdateSvg) {
@@ -38,9 +29,6 @@ const performUndo = function (undoState, dispatchPerformUndo, setSelectedItems,
     if (undoState.pointer > 0) {
         _restore(undoState.stack[undoState.pointer - 1], setSelectedItems, onUpdateSvg);
         dispatchPerformUndo();
-
-        // @todo enable/disable buttons
-        // updateButtonVisibility();
     }
 };
 
@@ -49,9 +37,6 @@ const performRedo = function (undoState, dispatchPerformRedo, setSelectedItems,
     if (undoState.pointer >= 0 && undoState.pointer < undoState.stack.length - 1) {
         _restore(undoState.stack[undoState.pointer + 1], setSelectedItems, onUpdateSvg);
         dispatchPerformRedo();
-        
-        // @todo enable/disable buttons
-        // updateButtonVisibility();
     }
 };