Merge pull request #5 from biglyderv/develop

jwklong · web-flow · commit 75f07b4c86c3 · 2025-05-30T11:08:26.000+01:00
Add stars to triangle mode, fix non-integers in triangle mode
diff --git a/src/components/mode-tools/mode-tools.jsx b/src/components/mode-tools/mode-tools.jsx
@@ -11,7 +11,7 @@ import layout from '../../lib/layout-constants';
 import { changeBrushSize, changeSegSize } from '../../reducers/brush-mode';
 import { changeBrushSize as changeEraserSize } from '../../reducers/eraser-mode';
 import { changeRoundedCornerSize } from '../../reducers/rounded-rect-mode';
-import { changeTrianglePolyCount } from '../../reducers/triangle-mode';
+import { changeTrianglePolyCount, changeTrianglePointCount } from '../../reducers/triangle-mode';
 import { changeCurrentlySelectedShape } from '../../reducers/sussy-mode';
 import { changeBitBrushSize } from '../../reducers/bit-brush-size';
 import { changeBitEraserSize } from '../../reducers/bit-eraser-size';
@@ -270,6 +270,8 @@ const ModeToolsComponent = props => {
                 const currentIcon = triangleIcon;
                 const currentSideValue = props.trianglePolyValue;
                 const changeFunction = props.onPolyCountSliderChange;
+                const currentPointValue = props.trianglePointValue;
+                const changeFunctionPoint = props.onPointCountSliderChange;
                 return (
                     <div className={classNames(props.className, styles.modeTools)}>
                         <div>
@@ -289,6 +291,15 @@ const ModeToolsComponent = props => {
                             value={currentSideValue}
                             onSubmit={changeFunction}
                         />
+                        <LiveInput
+                            range
+                            small
+                            max={1000}
+                            min="1"
+                            type="number"
+                            value={currentPointValue}
+                            onSubmit={changeFunctionPoint}
+                        />
                     </div>
                 );
             }
@@ -706,6 +717,7 @@ ModeToolsComponent.propTypes = {
     eraserValue: PropTypes.number,
     roundedCornerValue: PropTypes.number,
     trianglePolyValue: PropTypes.number,
+    trianglePointValue: PropTypes.number,
     currentlySelectedShape: PropTypes.string,
     fillBitmapShapes: PropTypes.bool,
     format: PropTypes.oneOf(Object.keys(Formats)),
@@ -753,6 +765,7 @@ const mapStateToProps = state => ({
     eraserValue: state.scratchPaint.eraserMode.brushSize,
     roundedCornerValue: state.scratchPaint.roundedRectMode.roundedCornerSize,
     trianglePolyValue: state.scratchPaint.triangleMode.trianglePolyCount,
+    trianglePointValue: state.scratchPaint.triangleMode.trianglePointCount,
     currentlySelectedShape: state.scratchPaint.sussyMode.currentlySelectedShape
 });
 const mapDispatchToProps = dispatch => ({
@@ -768,6 +781,9 @@ const mapDispatchToProps = dispatch => ({
     onPolyCountSliderChange: polyCount => {
         dispatch(changeTrianglePolyCount(polyCount));
     },
+    onPointCountSliderChange: polyCount => {
+        dispatch(changeTrianglePointCount(polyCount));
+    },
     onCurrentlySelectedShapeChange: shape => {
         dispatch(changeCurrentlySelectedShape(shape));
     },
diff --git a/src/helper/selection-tools/reshape-tool.js b/src/helper/selection-tools/reshape-tool.js
@@ -3,10 +3,10 @@ import log from '../../log/log';
 import keyMirror from 'keymirror';
 
 import Modes from '../../lib/modes';
-import {isBoundsItem} from '../item';
-import {hoverBounds, hoverItem} from '../guides';
-import {sortItemsByZIndex} from '../math';
-import {getSelectedLeafItems, getSelectedSegments} from '../selection';
+import { isBoundsItem } from '../item';
+import { hoverBounds, hoverItem } from '../guides';
+import { sortItemsByZIndex } from '../math';
+import { getSelectedLeafItems, getSelectedSegments } from '../selection';
 import MoveTool from './move-tool';
 import PointTool from './point-tool';
 import HandleTool from './handle-tool';
@@ -32,23 +32,23 @@ const ReshapeModes = keyMirror({
  */
 class ReshapeTool extends paper.Tool {
     /** Distance within which mouse is considered to be hitting an item */
-    static get TOLERANCE () {
+    static get TOLERANCE() {
         return ReshapeTool.HANDLE_RADIUS + ReshapeTool.HANDLE_PADDING;
     }
     /**
      * Units of padding around the visible handle area that will still register clicks as "touching the handle"
      */
-    static get HANDLE_PADDING () {
+    static get HANDLE_PADDING() {
         return 1;
     }
     /**
      * Handles' radius, including the stroke
      */
-    static get HANDLE_RADIUS () {
+    static get HANDLE_RADIUS() {
         return 5.25;
     }
     /** Clicks registered within this amount of time are registered as double clicks */
-    static get DOUBLE_CLICK_MILLIS () {
+    static get DOUBLE_CLICK_MILLIS() {
         return 250;
     }
     /**
@@ -59,7 +59,7 @@ class ReshapeTool extends paper.Tool {
      * @param {!function} onUpdateImage A callback to call when the image visibly changes
      * @param {!function} switchToTextTool A callback to call to switch to the text tool
      */
-    constructor (setHoveredItem, clearHoveredItem, setSelectedItems, clearSelectedItems, onUpdateImage,
+    constructor(setHoveredItem, clearHoveredItem, setSelectedItems, clearSelectedItems, onUpdateImage,
         switchToTextTool) {
         super();
         this.setHoveredItem = setHoveredItem;
@@ -97,7 +97,7 @@ class ReshapeTool extends paper.Tool {
      * to be grabbable. (Segments are the little circles)
      * @return {object} See paper.Item.hitTest for definition of options
      */
-    getSelectedSegmentHitOptions () {
+    getSelectedSegmentHitOptions() {
         const hitOptions = {
             segments: true,
             tolerance: ReshapeTool.TOLERANCE / paper.view.zoom,
@@ -116,7 +116,7 @@ class ReshapeTool extends paper.Tool {
      * legitimate hits on other things (like if the handle is over part of the fill). (Handles are the diamonds)
      * @return {object} See paper.Item.hitTest for definition of options
      */
-    getHandleHitOptions () {
+    getHandleHitOptions() {
         const hitOptions = {
             handles: true,
             tolerance: ReshapeTool.TOLERANCE / paper.view.zoom,
@@ -137,7 +137,7 @@ class ReshapeTool extends paper.Tool {
      * unselected things and fills.
      * @return {object} See paper.Item.hitTest for definition of options
      */
-    getSelectedStrokeHitOptions () {
+    getSelectedStrokeHitOptions() {
         const hitOptions = {
             segments: false,
             stroke: false,
@@ -161,7 +161,7 @@ class ReshapeTool extends paper.Tool {
      *     selected.
      * @return {object} See paper.Item.hitTest for definition of options
      */
-    getUnselectedAndFillHitOptions () {
+    getUnselectedAndFillHitOptions() {
         const hitOptions = {
             fill: true,
             stroke: true,
@@ -181,15 +181,15 @@ class ReshapeTool extends paper.Tool {
      * @param {paper.Item} prevHoveredItemId ID of the highlight item that indicates the mouse is
      *     over a given item currently
      */
-    setPrevHoveredItemId (prevHoveredItemId) {
+    setPrevHoveredItemId(prevHoveredItemId) {
         this.prevHoveredItemId = prevHoveredItemId;
     }
     /**
      * Given the point at which the mouse is, return the prioritized hit result, or null if nothing was hit.
      * @param {paper.Point} point Point to hit test on canvas
      * @return {?paper.HitResult} hitResult
      */
-    getHitResult (point) {
+    getHitResult(point) {
         // Prefer hits on segments to other types of hits, since segments always overlap curves.
         let hitResults =
             paper.project.hitTestAll(point, this.getSelectedSegmentHitOptions());
@@ -215,7 +215,7 @@ class ReshapeTool extends paper.Tool {
         }
         return hitResult;
     }
-    handleMouseDown (event) {
+    handleMouseDown(event) {
         if (event.event.button > 0) return; // only first mouse button
         this.active = true;
         this.clearHoveredItem();
@@ -248,9 +248,9 @@ class ReshapeTool extends paper.Tool {
         // If item is not yet selected, don't behave differently depending on if they clicked a segment
         // (since those were invisible), just select the whole thing as if they clicked the fill.
         if (!hitResult.item.selected ||
-                hitResult.type === 'fill' ||
-                hitResult.type === 'stroke' ||
-                (hitResult.type !== 'segment' && doubleClicked)) {
+            hitResult.type === 'fill' ||
+            hitResult.type === 'stroke' ||
+            (hitResult.type !== 'segment' && doubleClicked)) {
             this.mode = ReshapeModes.FILL;
             this._modeMap[this.mode].onMouseDown(hitProperties);
         } else if (hitResult.type === 'segment') {
@@ -273,7 +273,7 @@ class ReshapeTool extends paper.Tool {
             this._modeMap[this.mode].onMouseDown(hitProperties);
         }
     }
-    handleMouseMove (event) {
+    handleMouseMove(event) {
         const hitResult = this.getHitResult(event.point);
         let hoveredItem;
 
@@ -289,17 +289,17 @@ class ReshapeTool extends paper.Tool {
         }
 
         if ((!hoveredItem && this.prevHoveredItemId) || // There is no longer a hovered item
-                (hoveredItem && !this.prevHoveredItemId) || // There is now a hovered item
-                (hoveredItem && this.prevHoveredItemId &&
-                    hoveredItem.id !== this.prevHoveredItemId)) { // hovered item changed
+            (hoveredItem && !this.prevHoveredItemId) || // There is now a hovered item
+            (hoveredItem && this.prevHoveredItemId &&
+                hoveredItem.id !== this.prevHoveredItemId)) { // hovered item changed
             this.setHoveredItem(hoveredItem ? hoveredItem.id : null);
         }
     }
-    handleMouseDrag (event) {
+    handleMouseDrag(event) {
         if (event.event.button > 0 || !this.active) return; // only first mouse button
         this._modeMap[this.mode].onMouseDrag(event);
     }
-    handleMouseUp (event) {
+    handleMouseUp(event) {
         if (event.event.button > 0 || !this.active) return; // only first mouse button
         if (this.mode === ReshapeModes.SELECTION_BOX) {
             this._modeMap[this.mode].onMouseUpVector(event);
@@ -309,7 +309,7 @@ class ReshapeTool extends paper.Tool {
         this.mode = ReshapeModes.SELECTION_BOX;
         this.active = false;
     }
-    handleKeyDown (event) {
+    handleKeyDown(event) {
         if (event.event.target instanceof HTMLInputElement || event.event.target instanceof HTMLTextAreaElement) {
             // Ignore nudge if a text input field is focused
             return;
@@ -329,15 +329,19 @@ class ReshapeTool extends paper.Tool {
         } 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;
+                let o = parent.getOffsetOf(p);
+                let o1 = o + 0.01;
+                let o2 = o + (parent.length - 0.01);
+                let n = (parent.getNormalAt(o1 % parent.length).add(parent.getNormalAt(o2 % parent.length))).divide(2);
                 if (event.key == 'o') {
-                    seg.point = p.add(parent.getNormalAt(parent.getOffsetOf(p)));
+                    seg.point = p.add(n);
                 } else {
-                    seg.point = p.subtract(parent.getNormalAt(parent.getOffsetOf(p)));
+                    seg.point = p.subtract(n);
                 }
             }
         }
@@ -356,15 +360,15 @@ class ReshapeTool extends paper.Tool {
             }
         }
     }
-    handleKeyUp (event) {
+    handleKeyUp(event) {
         const selected = getSelectedLeafItems();
         if (selected.length === 0) return;
 
         if (event.key === 'up' || event.key === 'down' || event.key === 'left' || event.key === 'right') {
             this.onUpdateImage();
         }
     }
-    deactivateTool () {
+    deactivateTool() {
         paper.settings.handleSize = 0;
         this.clearHoveredItem();
         this.setHoveredItem = null;
diff --git a/src/helper/tools/triangle-tool.js b/src/helper/tools/triangle-tool.js
@@ -10,16 +10,26 @@ const sideCount = {
     value: 3
 };
 
+const pointCount = {
+    value: 1
+};
+
 /**
  * Tool for drawing triangles.
  */
 class TriangleTool extends paper.Tool {
-    static set sideCount (value) {
+    static set sideCount(value) {
         sideCount.value = value;
     }
-    static get sideCount () {
+    static get sideCount() {
         return sideCount.value;
     }
+    static set pointCount(value) {
+        pointCount.value = value;
+    }
+    static get pointCount() {
+        return pointCount.value;
+    }
 
     static get TOLERANCE() {
         return 2;
@@ -123,6 +133,41 @@ class TriangleTool extends paper.Tool {
             this.tri.position = event.downPoint.add(dimensions.multiply(0.5));
         }
 
+        let seg = this.tri.segments;
+        let newSeg = [[]];
+
+        let j = 0;
+        let oj = 0;
+        let wasOj = true;
+
+        let l = seg.length;
+
+        // this is the worst code ever
+        for (let i = 0; i < l; i++) {
+            newSeg[newSeg.length - 1].push(seg[j]);
+            j += TriangleTool.pointCount;
+            j = j % (seg.length);
+            if (j == oj && !wasOj) {
+                j = oj + 1;
+                oj++;
+                wasOj = true;
+                newSeg.push([]);
+            }
+            wasOj = false;
+        }
+
+        this.tri.remove();
+
+        this.tri = new paper.Path();
+
+        for (let s of newSeg) {
+            let t2 = new paper.Path({ segments: s, closed: true });          
+            let otri = this.tri;
+            this.tri = otri.unite(t2); 
+            t2.remove();
+            otri.remove();
+        }
+
         styleShape(this.tri, this.colorState);
     }
     handleMouseUp(event) {
diff --git a/src/playground/index.ejs b/src/playground/index.ejs
@@ -6,6 +6,5 @@
         <title><%= htmlWebpackPlugin.options.title %></title>
     </head>
     <body>
-        <script src="/playground/playground.js"></script>
     </body>
 </html>
diff --git a/src/reducers/triangle-mode.js b/src/reducers/triangle-mode.js
@@ -2,7 +2,8 @@ import log from '../log/log';
 import TriangleTool from '../helper/tools/triangle-tool';
 
 const CHANGE_TRIANGLE_SIDE_COUNT = 'scratch-paint/triangle-mode/CHANGE_TRIANGLE_SIDE_COUNT';
-const initialState = { trianglePolyCount: 3 };
+const CHANGE_TRIANGLE_POINT_COUNT = 'scratch-paint/triangle-mode/CHANGE_TRIANGLE_POINT_COUNT';
+const initialState = { trianglePolyCount: 3, trianglePointCount: 1 };
 
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;
@@ -12,9 +13,18 @@ const reducer = function (state, action) {
                 log.warn(`Invalid side count: ${action.trianglePolyCount}`);
                 return state;
             }
-            const value = Math.max(3, action.trianglePolyCount);
+            const value = Math.floor(Math.max(3, action.trianglePolyCount));
             TriangleTool.sideCount = value;
-            return { trianglePolyCount: value };
+            return { trianglePolyCount: value, trianglePointCount: state.trianglePointCount };
+
+        case CHANGE_TRIANGLE_POINT_COUNT:
+            if (isNaN(action.trianglePointCount)) {
+                log.warn(`Invalid side count: ${action.trianglePointCount}`);
+                return state;
+            }
+            const value2 = Math.floor(Math.max(1, action.trianglePointCount));
+            TriangleTool.pointCount = value2;
+            return { trianglePointCount: value2, trianglePolyCount: state.trianglePolyCount };
         default:
             return state;
     }
@@ -28,7 +38,15 @@ const changeTrianglePolyCount = function (trianglePolyCount) {
     };
 };
 
+const changeTrianglePointCount = function (trianglePointCount) {
+    return {
+        type: CHANGE_TRIANGLE_POINT_COUNT,
+        trianglePointCount: trianglePointCount
+    };
+};
+
 export {
     reducer as default,
-    changeTrianglePolyCount
+    changeTrianglePolyCount,
+    changeTrianglePointCount
 };
