Merge pull request TurboWarp#3 from 08draven/develop

fix arrow  position jank and add smoothing option and add inset / outset (IO keys)

Author: RedMan13

src/components/mode-tools/mode-tools.jsx

@@ -2,36 +2,36 @@ import paper from '@scratch/paper';
 import log from '../../log/log';
 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, setGuideItem} from '../../helper/layer';
-import {isCompoundPathChild} from '../compound-path';
+import { MIXED, styleCursorPreview } from '../../helper/style-path';
+import { clearSelection, getItems } from '../../helper/selection';
+import { getGuideLayer, setGuideItem } from '../../helper/layer';
+import { isCompoundPathChild } from '../compound-path';
 
 /**
  * Shared code for the brush and eraser mode. Adds functions on the paper tool object
  * to handle mouse events, which are delegated to broad-brush-helper and segment-brush-helper
  * based on the brushSize in the state.
  */
 class Blobbiness {
-    static get BROAD () {
+    static get BROAD() {
         return 'broadbrush';
     }
-    static get SEGMENT () {
+    static get SEGMENT() {
         return 'segmentbrush';
     }
 
     // If brush size >= threshold use segment brush, else use broadbrush
     // Segment brush has performance issues at low threshold, but broad brush has weird corners
     // which get more obvious the bigger it is
-    static get THRESHOLD () {
+    static get THRESHOLD() {
         return 30 / paper.view.zoom;
     }
 
     /**
      * @param {function} onUpdateImage call when the drawing has changed to let listeners know
      * @param {function} clearSelectedItems Callback to clear the set of selected items in the Redux state
      */
-    constructor (onUpdateImage, clearSelectedItems) {
+    constructor(onUpdateImage, clearSelectedItems) {
         this.broadBrushHelper = new BroadBrushHelper();
         this.segmentBrushHelper = new SegmentBrushHelper();
         this.onUpdateImage = onUpdateImage;
@@ -53,7 +53,7 @@ class Blobbiness {
      * @param {?string} options.strokeColor Color of the brush outline.
      * @param {?number} options.strokeWidth Width of the brush outline.
      */
-    setOptions (options) {
+    setOptions(options) {
         const oldFillColor = this.options ? this.options.fillColor : 'black';
         const oldStrokeColor = this.options ? this.options.strokeColor : null;
         const oldStrokeWidth = this.options ? this.options.strokeWidth : null;
@@ -67,6 +67,7 @@ class Blobbiness {
             strokeWidth: options.strokeWidth === null ? oldStrokeWidth : options.strokeWidth
         };
         this.resizeCursorIfNeeded();
+
     }
 
     /**
@@ -79,14 +80,15 @@ class Blobbiness {
      * @param {?string} options.strokeColor Color of the brush outline.
      * @param {?number} options.strokeWidth Width of the brush outline.
      */
-    activateTool (options) {
+    activateTool(options) {
         this.tool = new paper.Tool();
         this.cursorPreviewLastPoint = new paper.Point(-10000, -10000);
         this.setOptions(options);
         this.tool.active = false;
         this.tool.fixedDistance = 1;
 
         const blob = this;
+
         this.tool.onMouseMove = function (event) {
             blob.resizeCursorIfNeeded(event.point);
             styleCursorPreview(blob.cursorPreview, blob.options);
@@ -125,6 +127,7 @@ class Blobbiness {
         };
 
         this.tool.onMouseUp = function (event) {
+
             if (event.event.button > 0 || !this.active) return; // only first mouse button
 
             let lastPath;
@@ -155,7 +158,7 @@ class Blobbiness {
         this.tool.activate();
     }
 
-    resizeCursorIfNeeded (point) {
+    resizeCursorIfNeeded(point) {
         if (!this.options) {
             return;
         }
@@ -165,10 +168,10 @@ class Blobbiness {
             this.cursorPreview = null;
         }
         if (this.cursorPreview &&
-                this.brushSize === this.options.brushSize &&
-                this.fillColor === this.options.fillColor &&
-                this.strokeColor === this.options.strokeColor &&
-                this.cursorPreviewLastPoint.equals(point)) {
+            this.brushSize === this.options.brushSize &&
+            this.fillColor === this.options.fillColor &&
+            this.strokeColor === this.options.strokeColor &&
+            this.cursorPreviewLastPoint.equals(point)) {
             return;
         }
         if (typeof point !== 'undefined') {
@@ -192,7 +195,7 @@ class Blobbiness {
         styleCursorPreview(this.cursorPreview, this.options);
     }
 
-    mergeBrush (lastPath) {
+    mergeBrush(lastPath) {
         const blob = this;
 
         // Get all path items to merge with
@@ -243,7 +246,7 @@ class Blobbiness {
         }
     }
 
-    mergeEraser (lastPath) {
+    mergeEraser(lastPath) {
         const blob = this;
 
         // Get all path items to merge with
@@ -336,7 +339,7 @@ class Blobbiness {
         lastPath.remove();
     }
 
-    separateCompoundPath (compoundPath) {
+    separateCompoundPath(compoundPath) {
         if (!compoundPath.isClockwise()) {
             compoundPath.reverse();
         }
@@ -381,35 +384,35 @@ class Blobbiness {
         }
     }
 
-    colorMatch (existingPath, addedPath) {
+    colorMatch(existingPath, addedPath) {
         // Note: transparent fill colors do notdetect as touching
         return existingPath.getFillColor().equals(addedPath.getFillColor()) &&
-                (addedPath.getStrokeColor() === existingPath.getStrokeColor() || // both null
-                    (addedPath.getStrokeColor() &&
-                        addedPath.getStrokeColor().equals(existingPath.getStrokeColor()))) &&
-                addedPath.getStrokeWidth() === existingPath.getStrokeWidth() &&
-                this.touches(existingPath, addedPath);
+            (addedPath.getStrokeColor() === existingPath.getStrokeColor() || // both null
+                (addedPath.getStrokeColor() &&
+                    addedPath.getStrokeColor().equals(existingPath.getStrokeColor()))) &&
+            addedPath.getStrokeWidth() === existingPath.getStrokeWidth() &&
+            this.touches(existingPath, addedPath);
     }
 
-    touches (path1, path2) {
+    touches(path1, path2) {
         // Two shapes are touching if their paths intersect
         if (path1 && path2 && path1.intersects(path2)) {
             return true;
         }
         return this.firstEnclosesSecond(path1, path2) || this.firstEnclosesSecond(path2, path1);
     }
 
-    firstEnclosesSecond (path1, path2) {
+    firstEnclosesSecond(path1, path2) {
         // Two shapes are also touching if one is completely inside the other
         if (path1 && path2 && path2.firstSegment && path2.firstSegment.point &&
-                path1.hitTest(path2.firstSegment.point)) {
+            path1.hitTest(path2.firstSegment.point)) {
             return true;
         }
         // TODO: clean up these no point paths
         return false;
     }
 
-    matchesAnyChild (group, path) {
+    matchesAnyChild(group, path) {
         for (const child of group.children) {
             if (child.children && this.matchesAnyChild(path, child)) {
                 return true;
@@ -421,7 +424,7 @@ class Blobbiness {
         return false;
     }
 
-    isMergeable (newPath, existingPath) {
+    isMergeable(newPath, existingPath) {
         // Path or compound path
         if (!(existingPath instanceof paper.PathItem)) {
             return;
@@ -434,7 +437,7 @@ class Blobbiness {
         return existingPath !== newPath; // don't merge with self
     }
 
-    deactivateTool () {
+    deactivateTool() {
         if (this.cursorPreview) {
             this.cursorPreview.remove();
             this.cursorPreview = null;

src/helper/blob-tools/blob.js

@@ -114,7 +114,7 @@ class BroadBrushHelper {
         this.finalPath.insert(0, event.point.subtract(step));
 
         if (this.finalPath.segments.length > this.smoothed + (this.smoothingThreshold * 2)) {
-            this.simplify(1);
+            this.simplify(10 / options.segSize);
         }
 
         this.lastVec = event.delta;

src/helper/blob-tools/broad-brush-helper.js

@@ -71,7 +71,7 @@ class SegmentBrushHelper {
         this.finalPath = newPath;
     }
 
-    onSegmentMouseUp (event) {
+    onSegmentMouseUp (event, options) {
         if (event.event.button > 0) return; // only first mouse button
 
         // TODO: This smoothing tends to cut off large portions of the path! Would like to eventually
@@ -81,7 +81,7 @@ class SegmentBrushHelper {
         // paths tends to cut off the path.
         if (this.finalPath.segments && this.finalPath.segments.length > 4) {
             this.finalPath.closed = false;
-            this.finalPath.simplify(2);
+            this.finalPath.simplify(10 / options.segSize);
             this.finalPath.closed = true;
             // Merge again with the first point, since it gets distorted when we unclose the path.
             const temp = this.finalPath.unite(this.firstCircle);

src/helper/blob-tools/segment-brush-helper.js

@@ -328,6 +328,18 @@ class ReshapeTool extends paper.Tool {
             translation = new paper.Point(-nudgeAmount, 0);
         } else if (event.key === 'right') {
             translation = new paper.Point(nudgeAmount, 0);
+        } else if (event.key == 'i' || event.key == 'o') {
+            
+            const segments = getSelectedSegments();
+            for (const seg of segments) {
+                let parent = seg.path;
+                let p = seg.point;
+                if (event.key == 'o') {
+                    seg.point = p.add(parent.getNormalAt(parent.getOffsetOf(p)));
+                } else {
+                    seg.point = p.subtract(parent.getNormalAt(parent.getOffsetOf(p)));
+                }
+            }
         }
 
         if (translation) {

src/helper/selection-tools/reshape-tool.js

@@ -260,19 +260,20 @@ class ArrowTool extends paper.Tool {
         this.tri = new paper.Path(constructArrowPath(event.modifiers.control, pathOptions.width, pathOptions.length, pathOptions.head.width, pathOptions.head.length));
         // console.log(pathOptions.angle, this.tri)
         // console.log(pathOptions.angle)
-        this.tri.rotate(pathOptions.angle, event.downPoint);
         // this.tri.scale(tri.size.width / 100, tri.size.height / 100, event.downPoint);
 
         // create new position
         if ((!this.arrowPathLocked) && this.arrowPathLockedState) {
             this.tri.position = event.downPoint;
 
-            const dimensions = event.point.subtract(event.downPoint);
+            const dimensions = new paper.Point(event.point.getDistance(event.downPoint),0);
             this.tri.position = event.downPoint.add(dimensions.multiply(0.5));
         } else if (this.arrowPathLocked) {
             this.tri.position = this.arrowPathLockedState;
         }
 
+        this.tri.rotate(pathOptions.angle, event.downPoint);
+
         // add guide text
         // remove first
         if (this.guideText) {

src/helper/tools/arrow-tool.js

@@ -1,19 +1,27 @@
 import log from '../log/log';
 
 const CHANGE_BRUSH_SIZE = 'scratch-paint/brush-mode/CHANGE_BRUSH_SIZE';
-const initialState = {brushSize: 10};
+const CHANGE_SEG_SIZE = CHANGE_BRUSH_SIZE + 1;
+const initialState = { brushSize: 10, segSize: 1 };
 
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;
+    let {segSize, brushSize} = state;
     switch (action.type) {
-    case CHANGE_BRUSH_SIZE:
-        if (isNaN(action.brushSize)) {
-            log.warn(`Invalid brush size: ${action.brushSize}`);
+        case CHANGE_BRUSH_SIZE:
+            if (isNaN(action.brushSize)) {
+                log.warn(`Invalid brush size: ${action.brushSize}`);
+                return state;
+            }
+            return { segSize, brushSize: Math.max(1, action.brushSize) };
+        case CHANGE_SEG_SIZE:
+            if (isNaN(action.segSize)) {
+                log.warn(`Invalid brush size: ${action.segSize}`);
+                return state;
+            }
+            return { brushSize, segSize: Math.max(1, action.segSize) };
+        default:
             return state;
-        }
-        return {brushSize: Math.max(1, action.brushSize)};
-    default:
-        return state;
     }
 };
 
@@ -25,7 +33,15 @@ const changeBrushSize = function (brushSize) {
     };
 };
 
+const changeSegSize = function (segSize) {
+    return {
+        type: CHANGE_SEG_SIZE,
+        segSize: segSize
+    };
+};
+
 export {
     reducer as default,
-    changeBrushSize
+    changeBrushSize,
+    changeSegSize
 };