diff --git a/src/containers/paint-editor.jsx b/src/containers/paint-editor.jsx index 2cfec304..bc5d3f0f 100644 --- a/src/containers/paint-editor.jsx +++ b/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 backgroundGuideLayer = getBackgroundGuideLayer(); - guideLayer.remove(); - backgroundGuideLayer.remove(); + + const guideLayers = hideGuideLayers(); + 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; diff --git a/src/helper/layer.js b/src/helper/layer.js index 6d9878ef..61473824 100644 --- a/src/helper/layer.js +++ b/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 () { - for (let i = 0; i < paper.project.layers.length; i++) { - const layer = paper.project.layers[i]; - if (layer.data && layer.data.isGuideLayer) { +const _getLayer = function (layerString) { + for (const layer of paper.project.layers) { + if (layer.data && layer.data[layerString]) { return layer; } } - - // Create if it doesn't exist - const guideLayer = new paper.Layer(); - guideLayer.data.isGuideLayer = true; - guideLayer.bringToFront(); - return guideLayer; + log.error(`Didn't find layer ${layerString}`); }; -const getBackgroundGuideLayer = function () { - for (let i = 0; i < paper.project.layers.length; i++) { - const layer = paper.project.layers[i]; - if (layer.data && layer.data.isBackgroundGuideLayer) { - return layer; - } +const _getPaintingLayer = function () { + return _getLayer('isPaintingLayer'); +}; + +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(); - _makePaintingLayer().activate(); + const backgroundGuideLayer = _makeBackgroundGuideLayer(); + const paintLayer = _makePaintingLayer(); + const guideLayer = _makeGuideLayer(); + backgroundGuideLayer.sendToBack(); + guideLayer.bringToFront(); + paintLayer.activate(); }; export { + hideGuideLayers, + showGuideLayers, getGuideLayer, - getBackgroundGuideLayer, setupLayers }; diff --git a/src/helper/undo.js b/src/helper/undo.js index 59002d71..c9a0a1a2 100644 --- a/src/helper/undo.js +++ b/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(); - if (backgroundGuideLayer) { - backgroundGuideLayer.remove(); - } + const guideLayers = hideGuideLayers(); dispatchPerformSnapshot({ json: paper.project.exportJSON({asString: false}) }); - if (backgroundGuideLayer) { - paper.project.addLayer(backgroundGuideLayer); - backgroundGuideLayer.sendToBack(); - } - - // @todo enable/disable buttons - // updateButtonVisibility(); + showGuideLayers(guideLayers); }; 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(); } };