scratch-paint/src/helper/layer.js

172 lines
4.9 KiB
JavaScript
Raw Normal View History

2017-10-12 18:35:30 -04:00
import paper from '@scratch/paper';
import canvasBg from './background.png';
2018-04-05 17:37:40 -04:00
import rasterSrc from './transparent.png';
import log from '../log/log';
2017-09-11 14:23:30 -04:00
const _getLayer = function (layerString) {
for (const layer of paper.project.layers) {
if (layer.data && layer.data[layerString]) {
2017-09-11 14:23:30 -04:00
return layer;
}
}
};
2017-09-11 14:23:30 -04:00
const _getPaintingLayer = function () {
return _getLayer('isPaintingLayer');
2017-09-11 14:23:30 -04:00
};
2018-04-06 14:41:30 -04:00
const clearRaster = function () {
2018-04-05 17:37:40 -04:00
const layer = _getLayer('isRasterLayer');
2018-04-06 14:41:30 -04:00
layer.removeChildren();
2018-04-05 17:37:40 -04:00
// Generate blank raster
2018-04-06 14:41:30 -04:00
const raster = new paper.Raster(rasterSrc);
raster.parent = layer;
raster.guide = true;
raster.locked = true;
raster.position = paper.view.center;
};
const getRaster = function () {
2018-04-05 17:37:40 -04:00
return _getLayer('isRasterLayer').children[0];
};
const _getBackgroundGuideLayer = function () {
return _getLayer('isBackgroundGuideLayer');
};
2018-04-09 17:47:11 -04:00
const _makeGuideLayer = function () {
const guideLayer = new paper.Layer();
guideLayer.data.isGuideLayer = true;
return guideLayer;
};
const getGuideLayer = function () {
2018-04-09 17:47:11 -04:00
let layer = _getLayer('isGuideLayer');
if (!layer) {
layer = _makeGuideLayer();
_getPaintingLayer().activate();
}
return layer;
};
/**
* Removes the guide layers, e.g. for purposes of exporting the image. Must call showGuideLayers to re-add them.
2018-04-09 17:47:11 -04:00
* @param {boolean} includeRaster true if the raster layer should also be hidden
* @return {object} an object of the removed layers, which should be passed to showGuideLayers to re-add them.
*/
2018-04-09 17:47:11 -04:00
const hideGuideLayers = function (includeRaster) {
const backgroundGuideLayer = _getBackgroundGuideLayer();
const guideLayer = getGuideLayer();
guideLayer.remove();
backgroundGuideLayer.remove();
2018-04-09 17:47:11 -04:00
let rasterLayer;
if (includeRaster) {
rasterLayer = _getLayer('isRasterLayer');
rasterLayer.remove();
}
return {
guideLayer: guideLayer,
2018-04-09 17:47:11 -04:00
backgroundGuideLayer: backgroundGuideLayer,
rasterLayer: rasterLayer
};
};
/**
* 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;
2018-04-09 17:47:11 -04:00
const rasterLayer = guideLayers.rasterLayer;
if (rasterLayer && !rasterLayer.index) {
paper.project.addLayer(rasterLayer);
rasterLayer.sendToBack();
}
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);
2017-10-24 13:21:57 -04:00
}
};
const _makePaintingLayer = function () {
const paintingLayer = new paper.Layer();
paintingLayer.data.isPaintingLayer = true;
return paintingLayer;
};
2018-04-05 17:37:40 -04:00
const _makeRasterLayer = function () {
const rasterLayer = new paper.Layer();
rasterLayer.data.isRasterLayer = true;
2018-04-06 14:41:30 -04:00
clearRaster();
2018-04-05 17:37:40 -04:00
return rasterLayer;
};
2017-10-24 13:21:57 -04:00
const _makeBackgroundGuideLayer = function () {
const guideLayer = new paper.Layer();
guideLayer.locked = true;
const img = new Image();
img.src = canvasBg;
img.onload = () => {
const raster = new paper.Raster(img);
raster.parent = guideLayer;
raster.guide = true;
raster.locked = true;
raster.position = paper.view.center;
raster.sendToBack();
};
2017-10-24 13:21:57 -04:00
const vLine = new paper.Path.Line(new paper.Point(0, -7), new paper.Point(0, 7));
vLine.strokeWidth = 2;
vLine.strokeColor = '#ccc';
vLine.position = paper.view.center;
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 = paper.view.center;
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 = paper.view.center;
circle.guide = true;
circle.locked = true;
guideLayer.data.isBackgroundGuideLayer = true;
return guideLayer;
};
const setupLayers = function () {
const backgroundGuideLayer = _makeBackgroundGuideLayer();
2018-04-05 17:37:40 -04:00
_makeRasterLayer();
const paintLayer = _makePaintingLayer();
const guideLayer = _makeGuideLayer();
backgroundGuideLayer.sendToBack();
guideLayer.bringToFront();
paintLayer.activate();
2017-10-24 13:21:57 -04:00
};
export {
hideGuideLayers,
showGuideLayers,
2017-10-24 13:21:57 -04:00
getGuideLayer,
2018-04-06 14:41:30 -04:00
clearRaster,
2018-04-05 17:37:40 -04:00
getRaster,
2017-10-24 13:21:57 -04:00
setupLayers
};