scratchfoundation/scratch-paint
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-paint.git synced 2024-12-22 21:42:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #975 from fsih/fillSpace

Browse source 
Stretch to fill available space
This commit is contained in:
DD Liu 2020-05-14 14:25:12 -04:00 committed by GitHub
commit 616ed9b4d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 463 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/button-group/button-group.css
View file

@ -1,6 +1,7 @@
@import "../../css/units";
.button-group {
display: flex;
display: inline-flex;
flex-direction: row;
padding: 0 $grid-unit;
}

2
src/components/dropdown/dropdown.css
View file

@ -9,8 +9,6 @@ $arrow-border-width: 14px;
min-width: 3.5rem;
color: $motion-primary;
padding: .5rem;
display: flex;
align-items: center;
}
.mod-open {

7
src/components/forms/label.css
View file

@ -4,12 +4,7 @@ See https://github.com/LLK/scratch-paint/issues/13 */
@import "../../css/units.css";
@import "../../css/colors.css";
.input-group {
display: inline-flex;
flex-direction: row;
align-items: center;
}
@import "../input-group/input-group.css";
.input-label, .input-label-secondary {
font-size: 0.625rem;

10
src/components/input-group/input-group.css
View file

@ -1,5 +1,11 @@
@import '../../css/units.css';
.input-group {
display: inline-flex;
flex-direction: row;
align-items: center;
}
[dir="ltr"] .input-group + .input-group {
margin-left: calc(2 * $grid-unit);
}
@ -8,10 +14,6 @@
margin-right: calc(2 * $grid-unit);
}
.input-group {
display:flex;
}
.disabled {
opacity: 0.3;
/* Prevent any user actions */

39
src/components/paint-editor/paint-editor.css
View file

@ -2,6 +2,8 @@
@import "../../css/units.css";
.editor-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: calc(3 * $grid-unit);
@ -20,8 +22,10 @@
.top-align-row {
display: flex;
padding-top: calc(5 * $grid-unit);
flex-direction: row;
height: 100%;
padding-top: calc(5 * $grid-unit);
min-width: 524px;
}
.row + .row {
@ -114,9 +118,19 @@ $border-radius: 0.25rem;
margin-left: calc(2 * $grid-unit);
}
.controls-container {
width: 100%;
display: flex;
flex-flow: column;
flex-grow: 1;
margin-left: calc(2 * $grid-unit);
margin-right: calc(2 * $grid-unit);
}
.canvas-container {
width: 480px;
height: 360px;
width: 100%;
flex-grow: 1;
min-width: 402px; /* Leave room for the border */
box-sizing: content-box;
border: 1px solid #e8edf1;
border-radius: .25rem;
@ -126,7 +140,7 @@ $border-radius: 0.25rem;
.mode-selector {
display: flex;
max-width: 6rem;
max-width: 7.5rem;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
@ -134,14 +148,6 @@ $border-radius: 0.25rem;
justify-content: space-between;
}
[dir="ltr"] .mode-selector {
margin-right: calc(2 * $grid-unit);
}
[dir="rtl"] .mode-selector {
margin-left: calc(2 * $grid-unit);
}
.zoom-controls {
display: flex;
flex-direction: row-reverse;
@ -158,7 +164,8 @@ $border-radius: 0.25rem;
.canvas-controls {
display: flex;
margin-top: .25rem;
height: 36px;
margin-top: $grid-unit;
justify-content: space-between;
}
@ -188,10 +195,14 @@ $border-radius: 0.25rem;
}
.mode-selector {
margin-right: $grid-unit;
flex-direction: column;
justify-content: flex-start;
}
.controls-container {
margin-right: $grid-unit;
margin-left: $grid-unit;
}
}
.text-area {

2
src/components/paint-editor/paint-editor.jsx
View file

@ -196,7 +196,7 @@ const PaintEditorComponent = props => (
</div>
) : null}
<div>
<div className={styles.controlsContainer}>
{/* Canvas */}
<ScrollableCanvas
canvas={props.canvas}

10
src/components/scrollable-canvas/scrollable-canvas.css
View file

@ -1,5 +1,5 @@
$scrollbar-size: 8px;
$scrollbar-padding: 1px;
$scrollbar-padding: 4px;
.vertical-scrollbar, .horizontal-scrollbar {
position: absolute;
@ -10,17 +10,17 @@ $scrollbar-padding: 1px;
.vertical-scrollbar-wrapper {
position: absolute;
width: $scrollbar-size;
right: 0;
right: $scrollbar-padding;
top: $scrollbar-padding;
height: calc(100% - $scrollbar-size - $scrollbar-padding);
height: calc(100% - $scrollbar-size - 2 * $scrollbar-padding);
}
.horizontal-scrollbar-wrapper {
position: absolute;
height: $scrollbar-size;
left: $scrollbar-padding;
bottom: 0;
width: calc(100% - $scrollbar-size - $scrollbar-padding);
bottom: $scrollbar-padding;
width: calc(100% - $scrollbar-size - 2 * $scrollbar-padding);
}
.vertical-scrollbar {

1
src/containers/fill-color-indicator.jsx
View file

@ -131,6 +131,7 @@ const mapStateToProps = state => ({
shouldShowGradientTools: state.scratchPaint.mode === Modes.SELECT ||
state.scratchPaint.mode === Modes.RESHAPE ||
state.scratchPaint.mode === Modes.FILL ||
state.scratchPaint.mode === Modes.BIT_SELECT ||
state.scratchPaint.mode === Modes.BIT_FILL,
textEditTarget: state.scratchPaint.textEditTarget
});

10
src/containers/paint-editor.jsx
View file

@ -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 {resetZoom, zoomOnSelection, OUTERMOST_ZOOM_LEVEL} from '../helper/view';
import EyeDropperTool from '../helper/tools/eye-dropper';
import Modes from '../lib/modes';
@ -211,7 +211,13 @@ class PaintEditor extends React.Component {
}
}
handleZoomIn () {
zoomOnSelection(PaintEditor.ZOOM_INCREMENT);
// Make the "next step" after the outermost zoom level be the default
// zoom level (0.5)
let zoomIncrement = PaintEditor.ZOOM_INCREMENT;
if (paper.view.zoom === OUTERMOST_ZOOM_LEVEL) {
zoomIncrement = 0.5 - OUTERMOST_ZOOM_LEVEL;
}
zoomOnSelection(zoomIncrement);
this.props.updateViewBounds(paper.view.matrix);
this.handleSetSelectedItems();
}

8
src/containers/paper-canvas.css
View file

@ -1,7 +1,9 @@
.paper-canvas {
width: 480px;
height: 360px;
top: 1px; /* leave room for the border */
left: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
margin: auto;
position: absolute;
background-color: #fff;
background-color: #D9E3F2;
}

97
src/containers/paper-canvas.jsx
View file

@ -9,9 +9,10 @@ import log from '../log/log';
import {performSnapshot} from '../helper/undo';
import {undoSnapshot, clearUndoState} from '../reducers/undo';
import {isGroup, ungroupItems} from '../helper/group';
import {clearRaster, getRaster, setupLayers} from '../helper/layer';
import {clearRaster, convertBackgroundGuideLayer, getRaster, setupLayers} from '../helper/layer';
import {clearSelectedItems} from '../reducers/selected-items';
import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, resetZoom, resizeCrosshair, zoomToFit} from '../helper/view';
import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER, MAX_WORKSPACE_BOUNDS} from '../helper/view';
import {clampViewBounds, resetZoom, setWorkspaceBounds, zoomToFit, resizeCrosshair} from '../helper/view';
import {ensureClockwise, scaleWithStrokes} from '../helper/math';
import {clearHoveredItem} from '../reducers/hover';
import {clearPasteOffset} from '../reducers/clipboard';
@ -30,13 +31,15 @@ class PaperCanvas extends React.Component {
'importSvg',
'initializeSvg',
'maybeZoomToFit',
'switchCostume'
'switchCostume',
'onViewResize',
'recalibrateSize'
]);
}
componentDidMount () {
paper.setup(this.canvas);
paper.view.on('resize', this.onViewResize);
resetZoom();
this.props.updateViewBounds(paper.view.matrix);
if (this.props.zoomLevelId) {
this.props.setZoomLevelId(this.props.zoomLevelId);
if (this.props.zoomLevels[this.props.zoomLevelId]) {
@ -46,6 +49,8 @@ class PaperCanvas extends React.Component {
// Zoom to fit true means find a comfortable zoom level for viewing the costume
this.shouldZoomToFit = true;
}
} else {
this.props.updateViewBounds(paper.view.matrix);
}
const context = this.canvas.getContext('2d');
@ -55,7 +60,7 @@ class PaperCanvas extends React.Component {
// Don't show handles by default
paper.settings.handleSize = 0;
// Make layers.
setupLayers();
setupLayers(this.props.format);
this.importImage(
this.props.imageFormat, this.props.image, this.props.rotationCenterX, this.props.rotationCenterY);
}
@ -65,10 +70,17 @@ class PaperCanvas extends React.Component {
newProps.rotationCenterX, newProps.rotationCenterY,
this.props.zoomLevelId, newProps.zoomLevelId);
}
if (this.props.format !== newProps.format) {
this.recalibrateSize();
convertBackgroundGuideLayer(newProps.format);
}
}
componentWillUnmount () {
this.clearQueuedImport();
this.props.saveZoomLevel();
// shouldZoomToFit means the zoom level hasn't been initialized yet
if (!this.shouldZoomToFit) {
this.props.saveZoomLevel();
}
paper.remove();
}
clearQueuedImport () {
@ -97,7 +109,9 @@ class PaperCanvas extends React.Component {
for (const layer of paper.project.layers) {
if (layer.data.isRasterLayer) {
clearRaster();
} else if (!layer.data.isBackgroundGuideLayer && !layer.data.isDragCrosshairLayer) {
} else if (!layer.data.isBackgroundGuideLayer &&
!layer.data.isDragCrosshairLayer &&
!layer.data.isOutlineLayer) {
layer.removeChildren();
}
}
@ -114,12 +128,20 @@ class PaperCanvas extends React.Component {
if (!image) {
this.props.changeFormat(Formats.VECTOR_SKIP_CONVERT);
performSnapshot(this.props.undoSnapshot, Formats.VECTOR_SKIP_CONVERT);
this.recalibrateSize();
return;
}
if (format === 'jpg' || format === 'png') {
// import bitmap
this.props.changeFormat(Formats.BITMAP_SKIP_CONVERT);
const mask = new paper.Shape.Rectangle(getRaster().getBounds());
mask.guide = true;
mask.locked = true;
mask.setPosition(CENTER);
mask.clipMask = true;
const imgElement = new Image();
this.queuedImageToLoad = imgElement;
imgElement.onload = () => {
@ -134,8 +156,10 @@ class PaperCanvas extends React.Component {
imgElement,
(ART_BOARD_WIDTH / 2) - rotationCenterX,
(ART_BOARD_HEIGHT / 2) - rotationCenterY);
this.maybeZoomToFit(true /* isBitmap */);
performSnapshot(this.props.undoSnapshot, Formats.BITMAP_SKIP_CONVERT);
this.recalibrateSize();
};
imgElement.src = image;
} else if (format === 'svg') {
@ -145,6 +169,7 @@ class PaperCanvas extends React.Component {
log.error(`Didn't recognize format: ${format}. Use 'jpg', 'png' or 'svg'.`);
this.props.changeFormat(Formats.VECTOR_SKIP_CONVERT);
performSnapshot(this.props.undoSnapshot, Formats.VECTOR_SKIP_CONVERT);
this.recalibrateSize();
}
}
maybeZoomToFit (isBitmapMode) {
@ -154,9 +179,10 @@ class PaperCanvas extends React.Component {
resizeCrosshair();
} else if (this.shouldZoomToFit === true) {
zoomToFit(isBitmapMode);
this.props.updateViewBounds(paper.view.matrix);
}
this.shouldZoomToFit = false;
setWorkspaceBounds();
this.props.updateViewBounds(paper.view.matrix);
}
importSvg (svg, rotationCenterX, rotationCenterY) {
const paperCanvas = this;
@ -200,6 +226,15 @@ class PaperCanvas extends React.Component {
// positioned incorrectly
paperCanvas.queuedImport =
window.setTimeout(() => {
// Detached
if (!paper.view) return;
// Prevent blurriness caused if the "CSS size" of the element is a float--
// setting canvas dimensions to floats floors them, but we need to round instead
const elemSize = paper.DomElement.getSize(paper.view.element);
elemSize.width = Math.round(elemSize.width);
elemSize.height = Math.round(elemSize.height);
paper.view.setViewSize(elemSize);
paperCanvas.props.updateViewBounds(paper.view.matrix);
paperCanvas.initializeSvg(item, rotationCenterX, rotationCenterY, viewBox);
}, 0);
}
@ -210,18 +245,28 @@ class PaperCanvas extends React.Component {
const itemWidth = item.bounds.width;
const itemHeight = item.bounds.height;
// Remove viewbox
// Get reference to viewbox
let mask;
if (item.clipped) {
let mask;
for (const child of item.children) {
if (child.isClipMask()) {
mask = child;
break;
}
}
item.clipped = false;
mask.remove();
mask.clipMask = false;
} else {
mask = new paper.Shape.Rectangle(item.bounds);
}
mask.guide = true;
mask.locked = true;
mask.matrix = new paper.Matrix(); // Identity
// Set the artwork to get clipped at the max costume size
mask.size.height = MAX_WORKSPACE_BOUNDS.height;
mask.size.width = MAX_WORKSPACE_BOUNDS.width;
mask.setPosition(CENTER);
paper.project.activeLayer.addChild(mask);
mask.clipMask = true;
// Reduce single item nested in groups
if (item instanceof paper.Group && item.children.length === 1) {
@ -231,18 +276,18 @@ class PaperCanvas extends React.Component {
ensureClockwise(item);
scaleWithStrokes(item, 2, new paper.Point()); // Import at 2x
// Apply rotation center
if (typeof rotationCenterX !== 'undefined' && typeof rotationCenterY !== 'undefined') {
let rotationPoint = new paper.Point(rotationCenterX, rotationCenterY);
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)
.subtract(rotationPoint.multiply(2)));
item.translate(CENTER.subtract(rotationPoint.multiply(2)));
} else {
// Center
item.translate(new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2)
.subtract(itemWidth, itemHeight));
item.translate(CENTER.subtract(itemWidth, itemHeight));
}
paper.project.activeLayer.insertChild(0, item);
if (isGroup(item)) {
// Fixes an issue where we may export empty groups
@ -253,9 +298,25 @@ class PaperCanvas extends React.Component {
}
ungroupItems([item]);
}
performSnapshot(this.props.undoSnapshot, Formats.VECTOR_SKIP_CONVERT);
this.maybeZoomToFit();
}
onViewResize () {
setWorkspaceBounds(true /* clipEmpty */);
clampViewBounds();
// Fix incorrect paper canvas scale on browser zoom reset
this.recalibrateSize();
this.props.updateViewBounds(paper.view.matrix);
}
recalibrateSize () {
// Sets the size that Paper thinks the canvas is to the size the canvas element actually is.
// When these are out of sync, the mouse events in the paint editor don't line up correctly.
window.setTimeout(() => {
if (!paper.view) return;
paper.view.setViewSize(paper.DomElement.getSize(paper.view.element));
});
}
setCanvas (canvas) {
this.canvas = canvas;
if (this.props.canvasRef) {
@ -266,10 +327,9 @@ class PaperCanvas extends React.Component {
return (
<canvas
className={styles.paperCanvas}
height="360px"
ref={this.setCanvas}
style={{cursor: this.props.cursor}}
width="480px"
resize="true"
/>
);
}
@ -283,6 +343,7 @@ PaperCanvas.propTypes = {
clearSelectedItems: PropTypes.func.isRequired,
clearUndo: PropTypes.func.isRequired,
cursor: PropTypes.string,
format: PropTypes.oneOf(Object.keys(Formats)),
image: PropTypes.oneOfType([
PropTypes.string,
PropTypes.instanceOf(HTMLImageElement)

11
src/containers/scrollable-canvas.jsx
View file

@ -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 {clampViewBounds, pan, zoomOnFixedPoint, getWorkspaceBounds} from '../helper/view';
import {updateViewBounds} from '../reducers/view-bounds';
import {redrawSelectionBox} from '../reducers/selected-items';
@ -132,11 +132,12 @@ class ScrollableCanvas extends React.Component {
let topPercent = 0;
let leftPercent = 0;
if (paper.project) {
const bounds = getWorkspaceBounds();
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 / bounds.width);
heightPercent = Math.min(100, 100 * height / bounds.height);
const centerX = (x + (width / 2) - bounds.x) / bounds.width;
const centerY = (y + (height / 2) - bounds.y) / bounds.height;
topPercent = Math.max(0, (100 * centerY) - (heightPercent / 2));
leftPercent = Math.max(0, (100 * centerX) - (widthPercent / 2));
}

2
src/helper/bit-tools/oval-tool.js
View file

@ -32,7 +32,7 @@ class OvalTool extends paper.Tool {
setCursor,
onUpdateImage
);
const nudgeTool = new NudgeTool(this.boundingBoxTool, onUpdateImage);
const nudgeTool = new NudgeTool(Modes.BIT_OVAL, this.boundingBoxTool, onUpdateImage);
// We have to set these functions instead of just declaring them because
// paper.js tools hook up the listeners in the setter functions.

2
src/helper/bit-tools/rect-tool.js
View file

@ -32,7 +32,7 @@ class RectTool extends paper.Tool {
setCursor,
onUpdateImage
);
const nudgeTool = new NudgeTool(this.boundingBoxTool, onUpdateImage);
const nudgeTool = new NudgeTool(Modes.BIT_RECT, this.boundingBoxTool, onUpdateImage);
// We have to set these functions instead of just declaring them because
// paper.js tools hook up the listeners in the setter functions.

6
src/helper/bit-tools/select-tool.js
View file

@ -30,14 +30,14 @@ class SelectTool extends paper.Tool {
super();
this.onUpdateImage = onUpdateImage;
this.boundingBoxTool = new BoundingBoxTool(
Modes.SELECT,
Modes.BIT_SELECT,
setSelectedItems,
clearSelectedItems,
setCursor,
onUpdateImage
);
const nudgeTool = new NudgeTool(this.boundingBoxTool, onUpdateImage);
this.selectionBoxTool = new SelectionBoxTool(Modes.SELECT, setSelectedItems, clearSelectedItems);
const nudgeTool = new NudgeTool(Modes.BIT_SELECT, this.boundingBoxTool, onUpdateImage);
this.selectionBoxTool = new SelectionBoxTool(Modes.BIT_SELECT, setSelectedItems, clearSelectedItems);
this.selectionBoxMode = false;
this.selection = null;
this.active = false;

22
src/helper/bitmap.js
View file

@ -2,6 +2,7 @@ import paper from '@scratch/paper';
import {createCanvas, clearRaster, getRaster, hideGuideLayers, showGuideLayers} from './layer';
import {getGuideColor} from './guides';
import {clearSelection} from './selection';
import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER, MAX_WORKSPACE_BOUNDS} from './view';
import {inlineSvgFonts} from 'scratch-svg-renderer';
import Formats from '../lib/format';
@ -399,7 +400,17 @@ const convertToBitmap = function (clearSelectedItems, onUpdateImage) {
img,
new paper.Point(Math.floor(bounds.topLeft.x), Math.floor(bounds.topLeft.y)));
}
paper.project.activeLayer.removeChildren();
for (let i = paper.project.activeLayer.children.length - 1; i >= 0; i--) {
const item = paper.project.activeLayer.children[i];
if (item.clipMask === false) {
item.remove();
} else {
// Resize mask for bitmap bounds
item.size.height = ART_BOARD_HEIGHT;
item.size.width = ART_BOARD_WIDTH;
item.setPosition(CENTER);
}
}
onUpdateImage(false /* skipSnapshot */, Formats.BITMAP /* formatOverride */);
};
img.onerror = () => {
@ -420,7 +431,16 @@ const convertToBitmap = function (clearSelectedItems, onUpdateImage) {
const convertToVector = function (clearSelectedItems, onUpdateImage) {
clearSelection(clearSelectedItems);
for (const item of paper.project.activeLayer.children) {
if (item.clipMask === true) {
// Resize mask for vector bounds
item.size.height = MAX_WORKSPACE_BOUNDS.height;
item.size.width = MAX_WORKSPACE_BOUNDS.width;
item.setPosition(CENTER);
}
}
getTrimmedRaster(true /* shouldInsert */);
clearRaster();
onUpdateImage(false /* skipSnapshot */, Formats.VECTOR /* formatOverride */);
};

3
src/helper/blob-tools/blob.js
View file

@ -4,7 +4,7 @@ import BroadBrushHelper from './broad-brush-helper';
import SegmentBrushHelper from './segment-brush-helper';
import {MIXED, styleCursorPreview} from '../../helper/style-path';
import {clearSelection, getItems} from '../../helper/selection';
import {getGuideLayer} from '../../helper/layer';
import {getGuideLayer, setGuideItem} from '../../helper/layer';
import {isCompoundPathChild} from '../compound-path';
/**
@ -182,6 +182,7 @@ class Blobbiness {
});
this.cursorPreview.parent = getGuideLayer();
this.cursorPreview.data.isHelperItem = true;
setGuideItem(this.cursorPreview);
}
this.cursorPreview.position = this.cursorPreviewLastPoint;
this.cursorPreview.radius = this.options.brushSize / 2;

100
src/helper/layer.js
View file

@ -1,8 +1,10 @@
import paper from '@scratch/paper';
import log from '../log/log';
import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER} from './view';
import {ART_BOARD_BOUNDS, ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER, MAX_WORKSPACE_BOUNDS} from './view';
import {isGroupItem} from './item';
import {isBitmap, isVector} from '../lib/format';
const CHECKERBOARD_SIZE = 8;
const CROSSHAIR_SIZE = 16;
const CROSSHAIR_FULL_OPACITY = 0.75;
@ -42,7 +44,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 = CENTER;
};
const getRaster = function () {
@ -62,6 +64,15 @@ const getBackgroundGuideLayer = function () {
return _getLayer('isBackgroundGuideLayer');
};
const _convertLayer = function (layer, format) {
layer.bitmapBackground.visible = isBitmap(format);
layer.vectorBackground.visible = isVector(format);
};
const convertBackgroundGuideLayer = function (format) {
_convertLayer(getBackgroundGuideLayer(), format);
};
const _makeGuideLayer = function () {
const guideLayer = new paper.Layer();
guideLayer.data.isGuideLayer = true;
@ -95,8 +106,10 @@ const setGuideItem = function (item) {
const hideGuideLayers = function (includeRaster) {
const backgroundGuideLayer = getBackgroundGuideLayer();
const dragCrosshairLayer = getDragCrosshairLayer();
const outlineLayer = _getLayer('isOutlineLayer');
const guideLayer = getGuideLayer();
dragCrosshairLayer.remove();
outlineLayer.remove();
guideLayer.remove();
backgroundGuideLayer.remove();
let rasterLayer;
@ -106,6 +119,7 @@ const hideGuideLayers = function (includeRaster) {
}
return {
dragCrosshairLayer: dragCrosshairLayer,
outlineLayer: outlineLayer,
guideLayer: guideLayer,
backgroundGuideLayer: backgroundGuideLayer,
rasterLayer: rasterLayer
@ -120,6 +134,7 @@ const hideGuideLayers = function (includeRaster) {
const showGuideLayers = function (guideLayers) {
const backgroundGuideLayer = guideLayers.backgroundGuideLayer;
const dragCrosshairLayer = guideLayers.dragCrosshairLayer;
const outlineLayer = guideLayers.outlineLayer;
const guideLayer = guideLayers.guideLayer;
const rasterLayer = guideLayers.rasterLayer;
if (rasterLayer && !rasterLayer.index) {
@ -134,6 +149,10 @@ const showGuideLayers = function (guideLayers) {
paper.project.addLayer(dragCrosshairLayer);
dragCrosshairLayer.bringToFront();
}
if (!outlineLayer.index) {
paper.project.addLayer(outlineLayer);
outlineLayer.bringToFront();
}
if (!guideLayer.index) {
paper.project.addLayer(guideLayer);
guideLayer.bringToFront();
@ -157,7 +176,7 @@ const _makeRasterLayer = function () {
return rasterLayer;
};
const _makeBackgroundPaper = function (width, height, color) {
const _makeBackgroundPaper = function (width, height, color, opacity) {
// creates a checkerboard path of width * height squares in color on white
let x = 0;
let y = 0;
@ -176,16 +195,27 @@ const _makeBackgroundPaper = function (width, height, color) {
pathPoints.push(new paper.Point(x, y));
y--;
}
const vRect = new paper.Shape.Rectangle(new paper.Point(0, 0), new paper.Point(120, 90));
const vRect = new paper.Shape.Rectangle(
new paper.Point(0, 0),
new paper.Point(ART_BOARD_WIDTH / CHECKERBOARD_SIZE, ART_BOARD_HEIGHT / CHECKERBOARD_SIZE));
vRect.fillColor = '#fff';
vRect.guide = true;
vRect.locked = true;
vRect.position = CENTER;
const vPath = new paper.Path(pathPoints);
vPath.fillRule = 'evenodd';
vPath.fillColor = color;
vPath.opacity = opacity;
vPath.guide = true;
vPath.locked = true;
const vGroup = new paper.Group([vRect, vPath]);
vPath.position = CENTER;
const mask = new paper.Shape.Rectangle(MAX_WORKSPACE_BOUNDS);
mask.position = CENTER;
mask.guide = true;
mask.locked = true;
mask.scale(1 / CHECKERBOARD_SIZE);
const vGroup = new paper.Group([vRect, vPath, mask]);
mask.clipMask = true;
return vGroup;
};
@ -230,7 +260,6 @@ const _makeCrosshair = function (opacity, parent) {
crosshair.applyMatrix = false;
parent.dragCrosshair = crosshair;
crosshair.scale(CROSSHAIR_SIZE / crosshair.bounds.width / paper.view.zoom);
};
const _makeDragCrosshairLayer = function () {
@ -241,15 +270,55 @@ const _makeDragCrosshairLayer = function () {
return dragCrosshairLayer;
};
const _makeBackgroundGuideLayer = function () {
const _makeOutlineLayer = function () {
const outlineLayer = new paper.Layer();
const whiteRect = new paper.Shape.Rectangle(ART_BOARD_BOUNDS.expand(1));
whiteRect.strokeWidth = 2;
whiteRect.strokeColor = 'white';
setGuideItem(whiteRect);
const blueRect = new paper.Shape.Rectangle(ART_BOARD_BOUNDS.expand(5));
blueRect.strokeWidth = 2;
blueRect.strokeColor = '#4280D7';
blueRect.opacity = 0.25;
setGuideItem(blueRect);
outlineLayer.data.isOutlineLayer = true;
return outlineLayer;
};
const _makeBackgroundGuideLayer = function (format) {
const guideLayer = new paper.Layer();
guideLayer.locked = true;
const vBackground = _makeBackgroundPaper(120, 90, '#E5E5E5');
vBackground.position = new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2);
vBackground.scaling = new paper.Point(8, 8);
vBackground.guide = true;
vBackground.locked = true;
const vWorkspaceBounds = new paper.Shape.Rectangle(MAX_WORKSPACE_BOUNDS);
vWorkspaceBounds.fillColor = '#ECF1F9';
vWorkspaceBounds.position = CENTER;
// Add 1 to the height because it's an odd number otherwise, and we want it to be even
// so the corner of the checkerboard to line up with the center crosshair
const vBackground = _makeBackgroundPaper(
MAX_WORKSPACE_BOUNDS.width / CHECKERBOARD_SIZE,
(MAX_WORKSPACE_BOUNDS.height / CHECKERBOARD_SIZE) + 1,
'#0062ff', 0.05);
vBackground.position = CENTER;
vBackground.scaling = new paper.Point(CHECKERBOARD_SIZE, CHECKERBOARD_SIZE);
const vectorBackground = new paper.Group();
vectorBackground.addChild(vWorkspaceBounds);
vectorBackground.addChild(vBackground);
setGuideItem(vectorBackground);
guideLayer.vectorBackground = vectorBackground;
const bitmapBackground = _makeBackgroundPaper(
ART_BOARD_WIDTH / CHECKERBOARD_SIZE,
ART_BOARD_HEIGHT / CHECKERBOARD_SIZE,
'#0062ff', 0.05);
bitmapBackground.position = CENTER;
bitmapBackground.scaling = new paper.Point(CHECKERBOARD_SIZE, CHECKERBOARD_SIZE);
bitmapBackground.guide = true;
bitmapBackground.locked = true;
guideLayer.bitmapBackground = bitmapBackground;
_convertLayer(guideLayer, format);
_makeCrosshair(0.16, guideLayer);
@ -257,14 +326,16 @@ const _makeBackgroundGuideLayer = function () {
return guideLayer;
};
const setupLayers = function () {
const backgroundGuideLayer = _makeBackgroundGuideLayer();
const setupLayers = function (format) {
const backgroundGuideLayer = _makeBackgroundGuideLayer(format);
_makeRasterLayer();
const paintLayer = _makePaintingLayer();
const dragCrosshairLayer = _makeDragCrosshairLayer();
const outlineLayer = _makeOutlineLayer();
const guideLayer = _makeGuideLayer();
backgroundGuideLayer.sendToBack();
dragCrosshairLayer.bringToFront();
outlineLayer.bringToFront();
guideLayer.bringToFront();
paintLayer.activate();
};
@ -278,6 +349,7 @@ export {
getDragCrosshairLayer,
getGuideLayer,
getBackgroundGuideLayer,
convertBackgroundGuideLayer,
clearRaster,
getRaster,
setGuideItem,

2
src/helper/selection-tools/bounding-box-tool.js
View file

@ -49,7 +49,7 @@ class BoundingBoxTool {
this.boundsScaleHandles = [];
this.boundsRotHandles = [];
this._modeMap = {};
this._modeMap[BoundingBoxModes.SCALE] = new ScaleTool(onUpdateImage);
this._modeMap[BoundingBoxModes.SCALE] = new ScaleTool(mode, onUpdateImage);
this._modeMap[BoundingBoxModes.ROTATE] = new RotateTool(onUpdateImage);
this._modeMap[BoundingBoxModes.MOVE] =
new MoveTool(mode, setSelectedItems, clearSelectedItems, onUpdateImage, switchToTextTool);

11
src/helper/selection-tools/move-tool.js
View file

@ -1,9 +1,10 @@
import paper from '@scratch/paper';
import Modes from '../../lib/modes';
import {BitmapModes} from '../../lib/modes';
import {isGroup} from '../group';
import {isCompoundPathItem, getRootItem} from '../item';
import {checkPointsClose, snapDeltaToAngle} from '../math';
import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, CENTER} from '../view';
import {getActionBounds, CENTER} from '../view';
import {clearSelection, cloneSelection, getSelectedLeafItems, getSelectedRootItems, setItemSelection}
from '../selection';
import {getDragCrosshairLayer, CROSSHAIR_FULL_OPACITY} from '../layer';
@ -123,8 +124,10 @@ 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));
const actionBounds = getActionBounds(this.mode in BitmapModes);
point.x = Math.max(actionBounds.left, Math.min(point.x, actionBounds.right));
point.y = Math.max(actionBounds.top, Math.min(point.y, actionBounds.bottom));
const dragVector = point.subtract(event.downPoint);
let snapVector;
@ -180,6 +183,7 @@ class MoveTool {
(CENTER.y > bounds.bottom && CENTER.x < bounds.left) ||
(CENTER.y < bounds.top && CENTER.x > bounds.right) ||
(CENTER.y > bounds.bottom && CENTER.x > bounds.right)) {
// rotation center is to one of the 4 corners of the selection bounding box
const distX = Math.max(CENTER.x - bounds.right, bounds.left - CENTER.x);
const distY = Math.max(CENTER.y - bounds.bottom, bounds.top - CENTER.y);
@ -196,7 +200,6 @@ class MoveTool {
(1 - ((Math.abs(CENTER.x - newCenter.x) - (bounds.width / 2)) / (FADE_DISTANCE / paper.view.zoom))));
} // else the rotation center is within selection bounds, always show drag crosshair at full opacity
getDragCrosshairLayer().opacity = CROSSHAIR_FULL_OPACITY * opacityMultiplier;
}
onMouseUp () {
this.firstDrag = false;

20
src/helper/selection-tools/nudge-tool.js
View file

@ -1,6 +1,7 @@
import paper from '@scratch/paper';
import {getSelectedRootItems} from '../selection';
import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
import {getActionBounds} from '../view';
import {BitmapModes} from '../../lib/modes';
const NUDGE_MORE_MULTIPLIER = 15;
@ -10,12 +11,14 @@ const NUDGE_MORE_MULTIPLIER = 15;
*/
class NudgeTool {
/**
* @param {Mode} mode Paint editor mode
* @param {function} boundingBoxTool to control the bounding box
* @param {!function} onUpdateImage A callback to call when the image visibly changes
*/
constructor (boundingBoxTool, onUpdateImage) {
constructor (mode, boundingBoxTool, onUpdateImage) {
this.boundingBoxTool = boundingBoxTool;
this.onUpdateImage = onUpdateImage;
this.boundingBoxTool.isBitmap = mode in BitmapModes;
}
onKeyDown (event) {
if (event.event.target instanceof HTMLInputElement) {
@ -38,16 +41,21 @@ class NudgeTool {
rect = item.bounds;
}
}
const bounds = getActionBounds(this.boundingBoxTool.isBitmap);
const bottom = bounds.bottom - rect.top - 1;
const top = bounds.top - rect.bottom + 1;
const left = bounds.left - rect.right + 1;
const right = bounds.right - rect.left - 1;
let translation;
if (event.key === 'up') {
translation = new paper.Point(0, -Math.min(nudgeAmount, rect.bottom - 1));
translation = new paper.Point(0, Math.min(bottom, Math.max(-nudgeAmount, top)));
} 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.max(top, Math.min(nudgeAmount, bottom)));
} else if (event.key === 'left') {
translation = new paper.Point(-Math.min(nudgeAmount, rect.right - 1), 0);
translation = new paper.Point(Math.min(right, Math.max(-nudgeAmount, left)), 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.max(left, Math.min(nudgeAmount, right)), 0);
}
if (translation) {

7
src/helper/selection-tools/point-tool.js
View file

@ -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 {getActionBounds} from '../view';
import {clearSelection, getSelectedLeafItems, getSelectedSegments} from '../selection';
/** Subtool of ReshapeTool for moving control points. */
@ -146,8 +146,9 @@ class PointTool {
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));
const bounds = getActionBounds();
point.x = Math.max(bounds.left, Math.min(point.x, bounds.right));
point.y = Math.max(bounds.top, Math.min(point.y, bounds.bottom));
if (!this.lastPoint) this.lastPoint = event.lastPoint;
const dragVector = point.subtract(event.downPoint);

12
src/helper/selection-tools/scale-tool.js
View file

@ -1,6 +1,7 @@
import paper from '@scratch/paper';
import {getItems} from '../selection';
import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
import {getActionBounds} from '../view';
import {BitmapModes} from '../../lib/modes';
/**
* Tool to handle scaling items by pulling on the handles around the edges of the bounding
@ -8,9 +9,11 @@ import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT} from '../view';
*/
class ScaleTool {
/**
* @param {Mode} mode Paint editor mode
* @param {!function} onUpdateImage A callback to call when the image visibly changes
*/
constructor (onUpdateImage) {
constructor (mode, onUpdateImage) {
this.isBitmap = mode in BitmapModes;
this.active = false;
this.boundsPath = null;
this.pivot = null;
@ -71,8 +74,9 @@ 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));
const bounds = getActionBounds(this.isBitmap);
point.x = Math.max(bounds.left, Math.min(point.x, bounds.right));
point.y = Math.max(bounds.top, Math.min(point.y, bounds.bottom));
if (!this.lastPoint) this.lastPoint = event.lastPoint;
const delta = point.subtract(this.lastPoint);

2
src/helper/selection-tools/select-tool.js
View file

@ -46,7 +46,7 @@ class SelectTool extends paper.Tool {
onUpdateImage,
switchToTextTool
);
const nudgeTool = new NudgeTool(this.boundingBoxTool, onUpdateImage);
const nudgeTool = new NudgeTool(Modes.SELECT, this.boundingBoxTool, onUpdateImage);
this.selectionBoxTool = new SelectionBoxTool(Modes.SELECT, setSelectedItems, clearSelectedItems);
this.selectionBoxMode = false;
this.prevHoveredItemId = null;

11
src/helper/selection-tools/selection-box-tool.js
View file

@ -44,7 +44,7 @@ class SelectionBoxTool {
}
onMouseUpBitmap (event) {
if (event.event.button > 0) return; // only first mouse button
if (this.selectionRect) {
if (this.selectionRect && this.selectionRect.bounds.intersects(getRaster().bounds)) {
const rect = new paper.Rectangle({
from: new paper.Point(
Math.max(0, Math.round(this.selectionRect.bounds.topLeft.x)),
@ -54,10 +54,6 @@ class SelectionBoxTool {
Math.min(ART_BOARD_HEIGHT, Math.round(this.selectionRect.bounds.bottomRight.y)))
});
// Remove dotted rectangle
this.selectionRect.remove();
this.selectionRect = null;
if (rect.area) {
// Pull selected raster to active layer
const raster = getRaster().getSubRaster(rect);
@ -75,6 +71,11 @@ class SelectionBoxTool {
this.setSelectedItems();
}
}
if (this.selectionRect) {
// Remove dotted rectangle
this.selectionRect.remove();
this.selectionRect = null;
}
}
}

2
src/helper/tools/oval-tool.js
View file

@ -31,7 +31,7 @@ class OvalTool extends paper.Tool {
setCursor,
onUpdateImage
);
const nudgeTool = new NudgeTool(this.boundingBoxTool, onUpdateImage);
const nudgeTool = new NudgeTool(Modes.OVAL, this.boundingBoxTool, onUpdateImage);
// We have to set these functions instead of just declaring them because
// paper.js tools hook up the listeners in the setter functions.

2
src/helper/tools/rect-tool.js
View file

@ -31,7 +31,7 @@ class RectTool extends paper.Tool {
setCursor,
onUpdateImage
);
const nudgeTool = new NudgeTool(this.boundingBoxTool, onUpdateImage);
const nudgeTool = new NudgeTool(Modes.RECT, this.boundingBoxTool, onUpdateImage);
// We have to set these functions instead of just declaring them because
// paper.js tools hook up the listeners in the setter functions.

5
src/helper/tools/text-tool.js
View file

@ -50,14 +50,15 @@ class TextTool extends paper.Tool {
this.onUpdateImage = onUpdateImage;
this.setTextEditTarget = setTextEditTarget;
this.changeFont = changeFont;
const paintMode = isBitmap ? Modes.BIT_TEXT : Modes.TEXT;
this.boundingBoxTool = new BoundingBoxTool(
Modes.TEXT,
paintMode,
setSelectedItems,
clearSelectedItems,
setCursor,
onUpdateImage
);
this.nudgeTool = new NudgeTool(this.boundingBoxTool, onUpdateImage);
this.nudgeTool = new NudgeTool(paintMode, this.boundingBoxTool, onUpdateImage);
this.isBitmap = isBitmap;
// We have to set these functions instead of just declaring them because

4
src/helper/undo.js
View file

@ -27,7 +27,9 @@ const performSnapshot = function (dispatchPerformSnapshot, format) {
const _restore = function (entry, setSelectedItems, onUpdateImage, isBitmapMode) {
for (let i = paper.project.layers.length - 1; i >= 0; i--) {
const layer = paper.project.layers[i];
if (!layer.data.isBackgroundGuideLayer && !layer.data.isDragCrosshairLayer) {
if (!layer.data.isBackgroundGuideLayer &&
!layer.data.isDragCrosshairLayer &&
!layer.data.isOutlineLayer) {
layer.removeChildren();
layer.remove();
}

131
src/helper/view.js
View file

@ -1,34 +1,96 @@
import paper from '@scratch/paper';
import {getSelectedRootItems} from './selection';
import {CROSSHAIR_SIZE, getBackgroundGuideLayer, getDragCrosshairLayer, getRaster} from './layer';
import {getAllRootItems, getSelectedRootItems} from './selection';
import {getHitBounds} from './bitmap';
import log from '../log/log';
// Vectors are imported and exported at SVG_ART_BOARD size.
// Once they are imported however, both SVGs and bitmaps are on
// canvases of ART_BOARD size.
// (This is for backwards compatibility, to handle both assets
// designed for 480 x 360, and bitmap resolution 2 bitmaps)
const SVG_ART_BOARD_WIDTH = 480;
const SVG_ART_BOARD_HEIGHT = 360;
const ART_BOARD_WIDTH = 480 * 2;
const ART_BOARD_HEIGHT = 360 * 2;
const ART_BOARD_WIDTH = SVG_ART_BOARD_WIDTH * 2;
const ART_BOARD_HEIGHT = SVG_ART_BOARD_HEIGHT * 2;
const CENTER = new paper.Point(ART_BOARD_WIDTH / 2, ART_BOARD_HEIGHT / 2);
const PADDING_PERCENT = 25; // Padding as a percent of the max of width/height of the sprite
const BUFFER = 50; // Number of pixels of allowance around objects at the edges of the workspace
const MIN_RATIO = .125; // Zoom in to at least 1/8 of the screen. This way you don't end up incredibly
// zoomed in for tiny costumes.
// zoomed in for tiny costumes.
const OUTERMOST_ZOOM_LEVEL = 0.333;
const ART_BOARD_BOUNDS = new paper.Rectangle(0, 0, ART_BOARD_WIDTH, ART_BOARD_HEIGHT);
const MAX_WORKSPACE_BOUNDS = new paper.Rectangle(
-ART_BOARD_WIDTH / 4,
-ART_BOARD_HEIGHT / 4,
ART_BOARD_WIDTH * 1.5,
ART_BOARD_HEIGHT * 1.5);
let _workspaceBounds = ART_BOARD_BOUNDS;
const getWorkspaceBounds = () => _workspaceBounds;
/**
* The workspace bounds define the areas that the scroll bars can access.
* They include at minimum the artboard, and extend to a bit beyond the
* farthest item off tne edge in any given direction (so items can't be
* "lost" off the edge)
*
* @param {boolean} clipEmpty Clip empty space from bounds, even if it
* means discontinuously jumping the viewport. This should probably be
* false unless the viewport is going to move discontinuously anyway
* (such as in a zoom button click)
*/
const setWorkspaceBounds = clipEmpty => {
const items = getAllRootItems();
// Include the artboard and what's visible in the viewport
let bounds = ART_BOARD_BOUNDS;
if (!clipEmpty) {
bounds = bounds.unite(paper.view.bounds);
}
// Include everything the user has drawn and a buffer around it
for (const item of items) {
bounds = bounds.unite(item.bounds.expand(BUFFER));
}
// Limit to max workspace bounds
bounds = bounds.intersect(MAX_WORKSPACE_BOUNDS.expand(BUFFER));
let top = bounds.top;
let left = bounds.left;
let bottom = bounds.bottom;
let right = bounds.right;
// Center in view if viewport is larger than workspace
let hDiff = 0;
let vDiff = 0;
if (bounds.width < paper.view.bounds.width) {
hDiff = (paper.view.bounds.width - bounds.width) / 2;
left -= hDiff;
right += hDiff;
}
if (bounds.height < paper.view.bounds.height) {
vDiff = (paper.view.bounds.height - bounds.height) / 2;
top -= vDiff;
bottom += vDiff;
}
_workspaceBounds = new paper.Rectangle(left, top, right - left, bottom - top);
};
const clampViewBounds = () => {
const {left, right, top, bottom} = paper.project.view.bounds;
if (left < 0) {
paper.project.view.scrollBy(new paper.Point(-left, 0));
if (left < _workspaceBounds.left) {
paper.project.view.scrollBy(new paper.Point(_workspaceBounds.left - left, 0));
}
if (top < 0) {
paper.project.view.scrollBy(new paper.Point(0, -top));
if (top < _workspaceBounds.top) {
paper.project.view.scrollBy(new paper.Point(0, _workspaceBounds.top - top));
}
if (bottom > ART_BOARD_HEIGHT) {
paper.project.view.scrollBy(new paper.Point(0, ART_BOARD_HEIGHT - bottom));
if (bottom > _workspaceBounds.bottom) {
paper.project.view.scrollBy(new paper.Point(0, _workspaceBounds.bottom - bottom));
}
if (right > ART_BOARD_WIDTH) {
paper.project.view.scrollBy(new paper.Point(ART_BOARD_WIDTH - right, 0));
if (right > _workspaceBounds.right) {
paper.project.view.scrollBy(new paper.Point(_workspaceBounds.right - right, 0));
}
setWorkspaceBounds();
};
const resizeCrosshair = () => {
@ -47,13 +109,15 @@ const resizeCrosshair = () => {
const zoomOnFixedPoint = (deltaZoom, fixedPoint) => {
const view = paper.view;
const preZoomCenter = view.center;
const newZoom = Math.max(0.5, view.zoom + deltaZoom);
const newZoom = Math.max(OUTERMOST_ZOOM_LEVEL, view.zoom + deltaZoom);
const scaling = view.zoom / newZoom;
const preZoomOffset = fixedPoint.subtract(preZoomCenter);
const postZoomOffset = fixedPoint.subtract(preZoomOffset.multiply(scaling))
.subtract(preZoomCenter);
view.zoom = newZoom;
view.translate(postZoomOffset.multiply(-1));
setWorkspaceBounds(true /* clipEmpty */);
clampViewBounds();
resizeCrosshair();
};
@ -80,6 +144,7 @@ const zoomOnSelection = deltaZoom => {
const resetZoom = () => {
paper.project.view.zoom = .5;
setWorkspaceBounds(true /* clipEmpty */);
resizeCrosshair();
clampViewBounds();
};
@ -89,18 +154,40 @@ const pan = (dx, dy) => {
clampViewBounds();
};
/**
* Mouse actions are clamped to action bounds
* @param {boolean} isBitmap True if the editor is in bitmap mode, false if it is in vector mode
* @returns {paper.Rectangle} the bounds within which mouse events should work in the paint editor
*/
const getActionBounds = isBitmap => {
if (isBitmap) {
return ART_BOARD_BOUNDS;
}
return paper.view.bounds.unite(ART_BOARD_BOUNDS).intersect(MAX_WORKSPACE_BOUNDS);
};
const zoomToFit = isBitmap => {
resetZoom();
let bounds;
if (isBitmap) {
bounds = getHitBounds(getRaster());
bounds = getHitBounds(getRaster()).expand(BUFFER);
} else {
bounds = paper.project.activeLayer.bounds;
const items = getAllRootItems();
for (const item of items) {
if (bounds) {
bounds = bounds.unite(item.bounds);
} else {
bounds = item.bounds;
}
}
}
if (bounds && bounds.width && bounds.height) {
// Ratio of (sprite length plus padding on all sides) to art board length.
let ratio = Math.max(bounds.width * (1 + (2 * PADDING_PERCENT / 100)) / ART_BOARD_WIDTH,
bounds.height * (1 + (2 * PADDING_PERCENT / 100)) / ART_BOARD_HEIGHT);
const canvas = paper.view.element;
// Ratio of (sprite length plus padding on all sides) to viewport length.
let ratio = paper.view.zoom *
Math.max(
bounds.width * (1 + (2 * PADDING_PERCENT / 100)) / canvas.clientWidth,
bounds.height * (1 + (2 * PADDING_PERCENT / 100)) / canvas.clientHeight);
// Clamp ratio
ratio = Math.max(Math.min(1, ratio), MIN_RATIO);
if (ratio < 1) {
@ -109,18 +196,26 @@ const zoomToFit = isBitmap => {
resizeCrosshair();
clampViewBounds();
}
} else {
log.warn('No bounds!');
}
};
export {
ART_BOARD_BOUNDS,
ART_BOARD_HEIGHT,
ART_BOARD_WIDTH,
CENTER,
OUTERMOST_ZOOM_LEVEL,
SVG_ART_BOARD_WIDTH,
SVG_ART_BOARD_HEIGHT,
MAX_WORKSPACE_BOUNDS,
clampViewBounds,
getActionBounds,
pan,
resetZoom,
setWorkspaceBounds,
getWorkspaceBounds,
resizeCrosshair,
zoomOnSelection,
zoomOnFixedPoint,

32
src/hocs/update-image-hoc.jsx
View file

@ -8,13 +8,16 @@ import {connect} from 'react-redux';
import {undoSnapshot} from '../reducers/undo';
import {setSelectedItems} from '../reducers/selected-items';
import {updateViewBounds} from '../reducers/view-bounds';
import {getSelectedLeafItems} from '../helper/selection';
import {getRaster, hideGuideLayers, showGuideLayers} from '../helper/layer';
import {commitRectToBitmap, commitOvalToBitmap, commitSelectionToBitmap, getHitBounds} from '../helper/bitmap';
import {performSnapshot} from '../helper/undo';
import {scaleWithStrokes} from '../helper/math';
import {ART_BOARD_WIDTH, ART_BOARD_HEIGHT, SVG_ART_BOARD_WIDTH, SVG_ART_BOARD_HEIGHT} from '../helper/view';
import {setWorkspaceBounds} from '../helper/view';
import Modes from '../lib/modes';
import {BitmapModes} from '../lib/modes';
@ -47,6 +50,9 @@ const UpdateImageHOC = function (WrappedComponent) {
} else if (isVector(actualFormat)) {
this.handleUpdateVector(skipSnapshot);
}
// Any time an image update is made, recalculate the bounds of the artwork
setWorkspaceBounds();
this.props.updateViewBounds(paper.view.matrix);
}
handleUpdateBitmap (skipSnapshot) {
if (!getRaster().loaded) {
@ -110,12 +116,24 @@ const UpdateImageHOC = function (WrappedComponent) {
}
}
handleUpdateVector (skipSnapshot) {
// Remove viewbox (this would make it export at MAX_WORKSPACE_BOUNDS)
let workspaceMask;
if (paper.project.activeLayer.clipped) {
for (const child of paper.project.activeLayer.children) {
if (child.isClipMask()) {
workspaceMask = child;
break;
}
}
paper.project.activeLayer.clipped = false;
workspaceMask.remove();
}
const guideLayers = hideGuideLayers(true /* includeRaster */);
// Export at 0.5x
scaleWithStrokes(paper.project.activeLayer, .5, new paper.Point());
const bounds = paper.project.activeLayer.drawnBounds;
// @todo (https://github.com/LLK/scratch-paint/issues/445) generate view box
this.props.onUpdateImage(
true /* isVector */,
paper.project.exportSVG({
@ -130,6 +148,12 @@ const UpdateImageHOC = function (WrappedComponent) {
showGuideLayers(guideLayers);
// Add back viewbox
if (workspaceMask) {
paper.project.activeLayer.addChild(workspaceMask);
workspaceMask.clipMask = true;
}
if (!skipSnapshot) {
performSnapshot(this.props.undoSnapshot, Formats.VECTOR);
}
@ -153,7 +177,8 @@ const UpdateImageHOC = function (WrappedComponent) {
format: PropTypes.oneOf(Object.keys(Formats)),
mode: PropTypes.oneOf(Object.keys(Modes)).isRequired,
onUpdateImage: PropTypes.func.isRequired,
undoSnapshot: PropTypes.func.isRequired
undoSnapshot: PropTypes.func.isRequired,
updateViewBounds: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
@ -167,6 +192,9 @@ const UpdateImageHOC = function (WrappedComponent) {
},
undoSnapshot: snapshot => {
dispatch(undoSnapshot(snapshot));
},
updateViewBounds: matrix => {
dispatch(updateViewBounds(matrix));
}
});

5
src/playground/index.ejs
View file

@ -4,11 +4,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
</body>

15
src/playground/playground.css Normal file
View file

@ -0,0 +1,15 @@
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0px;
}
body, html {
height: 100%
}
.playgroundContainer{
height: 90%;
width: 90%;
margin: auto;
}

2
src/playground/playground.jsx
View file

@ -6,8 +6,10 @@ import {Provider} from 'react-redux';
import {createStore} from 'redux';
import reducer from './reducers/combine-reducers';
import {intlInitialState, IntlProvider} from './reducers/intl.js';
import styles from './playground.css';
const appTarget = document.createElement('div');
appTarget.setAttribute('class', styles.playgroundContainer);
document.body.appendChild(appTarget);
const store = createStore(
reducer,