fix pen tool

RedMan13 · RedMan13 · commit 93e33f39d537 · 2024-08-07T16:16:53.000-07:00
diff --git a/src/containers/fill-color-indicator.jsx b/src/containers/fill-color-indicator.jsx
@@ -24,7 +24,7 @@ const FillColorIndicator = makeColorIndicator(messages.label, false);
 
 const mapStateToProps = state => ({
     colorIndex: state.scratchPaint.fillMode.colorIndex,
-    disabled: state.scratchPaint.mode === Modes.PEN,
+    disabled: state.scratchPaint.mode === Modes.PEN || state.scratchPaint.mode === Modes.LINE,
     color: state.scratchPaint.color.fillColor.primary,
     color2: state.scratchPaint.color.fillColor.secondary,
     colorModalVisible: state.scratchPaint.modals.fillColor,
diff --git a/src/containers/pen-mode.jsx b/src/containers/pen-mode.jsx
@@ -82,7 +82,7 @@ class PenMode extends React.Component {
 PenMode.propTypes = {
     clearSelectedItems: PropTypes.func.isRequired,
     colorState: PropTypes.shape({
-        fillColor: PropTypes.string,
+        fillStyle: PropTypes.string,
         strokeColor: PropTypes.string,
         strokeWidth: PropTypes.number
     }).isRequired,
@@ -96,7 +96,6 @@ PenMode.propTypes = {
 const mapStateToProps = state => ({
     colorState: state.scratchPaint.color,
     isPenModeActive: state.scratchPaint.mode === Modes.PEN
-
 });
 const mapDispatchToProps = dispatch => ({
     clearSelectedItems: () => {
diff --git a/src/helper/tools/pen-tool.js b/src/helper/tools/pen-tool.js
@@ -1,5 +1,5 @@
 import paper from '@scratch/paper';
-import {stylePath} from '../style-path';
+import {styleShape} from '../style-path';
 import {endPointHit, touching} from '../snapping';
 import {drawHitPoint, removeHitPoint} from '../guides';
 
@@ -57,12 +57,17 @@ class PenTool extends paper.Tool {
     handleMouseDown (event) {
         if (event.event.button > 0) return; // only first mouse button
         this.subpath = new paper.Path({insert: false});
+        this.subpath.strokeCap = 'round';
 
         // If you click near a point, continue that line instead of making a new line
         this.hitResult = endPointHit(event.point, PenTool.SNAP_TOLERANCE);
         if (this.hitResult) {
             this.path = this.hitResult.path;
-            stylePath(this.path, this.colorState.strokeColor, this.colorState.strokeWidth);
+            styleShape(this.path, {
+                fillColor: null,
+                strokeColor: this.colorState.strokeColor,
+                strokeWidth: this.colorState.strokeWidth
+            });
             if (this.hitResult.isFirst) {
                 this.path.reverse();
             }
@@ -74,7 +79,12 @@ class PenTool extends paper.Tool {
         // If not near other path, start a new path
         if (!this.path) {
             this.path = new paper.Path();
-            stylePath(this.path, this.colorState.strokeColor, this.colorState.strokeWidth);
+            styleShape(this.path, {
+                fillColor: null,
+                strokeColor: this.colorState.strokeColor,
+                strokeWidth: this.colorState.strokeWidth
+            });
+            this.path.strokeCap = 'round';
             this.path.add(event.point);
             this.subpath.add(event.point);
             paper.view.draw();
diff --git a/src/playground/index.ejs b/src/playground/index.ejs
@@ -6,6 +6,6 @@
         <title><%= htmlWebpackPlugin.options.title %></title>
     </head>
     <body>
-        <script src="/dist/scratch-paint.js"></script>
+        <script src="/playground/playground.js"></script>
     </body>
 </html>
