Improves stroke width

components/canvas/shape.tsx

@@ -66,16 +66,20 @@ function Shape({ id }: { id: string }) {
     >
       <defs>{getShapeUtils(shape).render(shape)}</defs>
       <HoverIndicator as="use" xlinkHref={"#" + id} />
-      <use xlinkHref={"#" + id} {...shape.style} />
+      <MainShape as="use" xlinkHref={"#" + id} {...shape.style} />
       <Indicator as="use" xlinkHref={"#" + id} />
     </StyledGroup>
   )
 }
 
+const MainShape = styled("use", {
+  zStrokeWidth: 1,
+})
+
 const Indicator = styled("path", {
   fill: "none",
   stroke: "transparent",
-  zStrokeWidth: [1, 1],
+  zStrokeWidth: 1,
   pointerEvents: "none",
   strokeLineCap: "round",
   strokeLinejoin: "round",

lib/code/line.ts

@@ -12,7 +12,7 @@ export default class Line extends CodeShape<LineShape> {
       parentId: "page0",
       childIndex: 0,
       point: [0, 0],
-      direction: [0, 0],
+      direction: [-0.5, 0.5],
       rotation: 0,
       style: {
         fill: "#777",

lib/shapes/circle.tsx

@@ -20,7 +20,10 @@ const circle = createShape<CircleShape>({
       point: [0, 0],
       rotation: 0,
       radius: 20,
-      style: {},
+      style: {
+        fill: "#777",
+        stroke: "#000",
+      },
       ...props,
     }
   },

lib/shapes/dot.tsx

@@ -18,7 +18,10 @@ const dot = createShape<DotShape>({
       childIndex: 0,
       point: [0, 0],
       rotation: 0,
-      style: {},
+      style: {
+        fill: "#777",
+        stroke: "#000",
+      },
       ...props,
     }
   },

lib/shapes/ellipse.tsx

@@ -21,7 +21,10 @@ const ellipse = createShape<EllipseShape>({
       radiusX: 20,
       radiusY: 20,
       rotation: 0,
-      style: {},
+      style: {
+        fill: "#777",
+        stroke: "#000",
+      },
       ...props,
     }
   },

lib/shapes/line.tsx

@@ -19,7 +19,10 @@ const line = createShape<LineShape>({
       point: [0, 0],
       direction: [0, 0],
       rotation: 0,
-      style: {},
+      style: {
+        fill: "#777",
+        stroke: "#000",
+      },
       ...props,
     }
   },

lib/shapes/ray.tsx

@@ -4,6 +4,7 @@ import { RayShape, ShapeType } from "types"
 import { createShape } from "./index"
 import { boundsContained } from "utils/bounds"
 import { intersectCircleBounds } from "utils/intersections"
+import styled from "styles"
 
 const ray = createShape<RayShape>({
   boundsCache: new WeakMap([]),
@@ -20,6 +21,7 @@ const ray = createShape<RayShape>({
       direction: [0, 1],
       rotation: 0,
       style: {
+        fill: "#777",
         stroke: "#000",
         strokeWidth: 1,
       },

lib/shapes/rectangle.tsx

@@ -18,7 +18,10 @@ const rectangle = createShape<RectangleShape>({
       point: [0, 0],
       size: [1, 1],
       rotation: 0,
-      style: {},
+      style: {
+        fill: "#777",
+        stroke: "#000",
+      },
       ...props,
     }
   },
@@ -76,11 +79,6 @@ const rectangle = createShape<RectangleShape>({
     return shape
   },
 
-  stretch(shape, scaleX, scaleY) {
-    shape.size = vec.mulV(shape.size, [scaleX, scaleY])
-    return shape
-  },
-
   transform(shape, bounds) {
     shape.point = [bounds.minX, bounds.minY]
     shape.size = [bounds.width, bounds.height]

state/data.ts

@@ -32,31 +32,31 @@ export const defaultDocument: Data["document"] = {
         //     strokeWidth: 1,
         //   },
         // }),
-        // shape0: shapeUtils[ShapeType.Circle].create({
-        //   id: "shape0",
-        //   name: "Shape 0",
-        //   childIndex: 1,
-        //   point: [100, 600],
-        //   radius: 50,
-        //   style: {
-        //     fill: "#AAA",
-        //     stroke: "#777",
-        //     strokeWidth: 1,
-        //   },
-        // }),
-        // shape5: shapeUtils[ShapeType.Ellipse].create({
-        //   id: "shape5",
-        //   name: "Shape 5",
-        //   childIndex: 5,
-        //   point: [400, 600],
-        //   radiusX: 50,
-        //   radiusY: 30,
-        //   style: {
-        //     fill: "#AAA",
-        //     stroke: "#777",
-        //     strokeWidth: 1,
-        //   },
-        // }),
+        shape0: shapeUtils[ShapeType.Circle].create({
+          id: "shape0",
+          name: "Shape 0",
+          childIndex: 1,
+          point: [100, 600],
+          radius: 50,
+          style: {
+            fill: "#AAA",
+            stroke: "#777",
+            strokeWidth: 1,
+          },
+        }),
+        shape5: shapeUtils[ShapeType.Ellipse].create({
+          id: "shape5",
+          name: "Shape 5",
+          childIndex: 5,
+          point: [400, 600],
+          radiusX: 50,
+          radiusY: 30,
+          style: {
+            fill: "#AAA",
+            stroke: "#777",
+            strokeWidth: 1,
+          },
+        }),
         // shape7: shapeUtils[ShapeType.Ellipse].create({
         //   id: "shape7",
         //   name: "Shape 7",
@@ -88,18 +88,18 @@ export const defaultDocument: Data["document"] = {
         //     strokeLinejoin: "round",
         //   },
         // }),
-        // shape1: shapeUtils[ShapeType.Rectangle].create({
-        //   id: "shape1",
-        //   name: "Shape 1",
-        //   childIndex: 1,
-        //   point: [400, 600],
-        //   size: [200, 200],
-        //   style: {
-        //     fill: "#AAA",
-        //     stroke: "#777",
-        //     strokeWidth: 1,
-        //   },
-        // }),
+        shape1: shapeUtils[ShapeType.Rectangle].create({
+          id: "shape1",
+          name: "Shape 1",
+          childIndex: 1,
+          point: [400, 600],
+          size: [200, 200],
+          style: {
+            fill: "#AAA",
+            stroke: "#777",
+            strokeWidth: 1,
+          },
+        }),
         // shape6: shapeUtils[ShapeType.Line].create({
         //   id: "shape6",
         //   name: "Shape 6",

state/state.ts

@@ -166,16 +166,31 @@ const state = createState({
           },
         },
         editing: {
-          onEnter: "startTranslateSession",
           on: {
-            MOVED_POINTER: "updateTranslateSession",
-            PANNED_CAMERA: "updateTranslateSession",
             STOPPED_POINTING: { do: "completeSession", to: "selecting" },
             CANCELLED: {
               do: ["cancelSession", "deleteSelectedIds"],
               to: "selecting",
             },
           },
+          initial: "inactive",
+          states: {
+            inactive: {
+              on: {
+                MOVED_POINTER: {
+                  if: "distanceImpliesDrag",
+                  to: "dot.editing.active",
+                },
+              },
+            },
+            active: {
+              onEnter: "startTranslateSession",
+              on: {
+                MOVED_POINTER: "updateTranslateSession",
+                PANNED_CAMERA: "updateTranslateSession",
+              },
+            },
+          },
         },
       },
     },
@@ -193,20 +208,74 @@ const state = createState({
           },
         },
         editing: {
-          onEnter: "startDirectionSession",
           on: {
-            MOVED_POINTER: "updateDirectionSession",
-            PANNED_CAMERA: "updateDirectionSession",
             STOPPED_POINTING: { do: "completeSession", to: "selecting" },
             CANCELLED: {
               do: ["cancelSession", "deleteSelectedIds"],
               to: "selecting",
             },
           },
+          initial: "inactive",
+          states: {
+            inactive: {
+              on: {
+                MOVED_POINTER: {
+                  if: "distanceImpliesDrag",
+                  to: "ray.editing.active",
+                },
+              },
+            },
+            active: {
+              onEnter: "startDirectionSession",
+              on: {
+                MOVED_POINTER: "updateDirectionSession",
+                PANNED_CAMERA: "updateDirectionSession",
+              },
+            },
+          },
+        },
+      },
+    },
+    line: {
+      initial: "creating",
+      states: {
+        creating: {
+          on: {
+            POINTED_CANVAS: {
+              do: "createLine",
+              to: "line.editing",
+            },
+          },
+        },
+        editing: {
+          on: {
+            STOPPED_POINTING: { do: "completeSession", to: "selecting" },
+            CANCELLED: {
+              do: ["cancelSession", "deleteSelectedIds"],
+              to: "selecting",
+            },
+          },
+          initial: "inactive",
+          states: {
+            inactive: {
+              on: {
+                MOVED_POINTER: {
+                  if: "distanceImpliesDrag",
+                  to: "line.editing.active",
+                },
+              },
+            },
+            active: {
+              onEnter: "startDirectionSession",
+              on: {
+                MOVED_POINTER: "updateDirectionSession",
+                PANNED_CAMERA: "updateDirectionSession",
+              },
+            },
+          },
         },
       },
     },
-    line: {},
     polyline: {},
     rectangle: {},
   },
@@ -262,15 +331,26 @@ const state = createState({
       data.selectedIds.add(shape.id)
     },
 
+    // Line
+    createLine(data, payload: PointerInfo) {
+      const shape = shapeUtilityMap[ShapeType.Line].create({
+        point: screenToWorld(payload.point, data),
+        direction: [0, 1],
+      })
+
+      commands.createShape(data, shape)
+      data.selectedIds.add(shape.id)
+    },
+
     /* -------------------- Sessions -------------------- */
 
     // Shared
     cancelSession(data) {
-      session.cancel(data)
+      session?.cancel(data)
       session = undefined
     },
     completeSession(data) {
-      session.complete(data)
+      session?.complete(data)
       session = undefined
     },