Improves stroke width

components/canvas/shape.tsx

     >
       <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

       parentId: "page0",
       childIndex: 0,
       point: [0, 0],
-      direction: [0, 0],
+      direction: [-0.5, 0.5],
       rotation: 0,
       style: {
         fill: "#777",

lib/shapes/circle.tsx

       point: [0, 0],
       rotation: 0,
       radius: 20,
-      style: {},
+      style: {
+        fill: "#777",
+        stroke: "#000",
+      },
       ...props,
     }
   },

lib/shapes/dot.tsx

       childIndex: 0,
       point: [0, 0],
       rotation: 0,
-      style: {},
+      style: {
+        fill: "#777",
+        stroke: "#000",
+      },
       ...props,
     }
   },

lib/shapes/ellipse.tsx

       radiusX: 20,
       radiusY: 20,
       rotation: 0,
-      style: {},
+      style: {
+        fill: "#777",
+        stroke: "#000",
+      },
       ...props,
     }
   },

lib/shapes/line.tsx

       point: [0, 0],
       direction: [0, 0],
       rotation: 0,
-      style: {},
+      style: {
+        fill: "#777",
+        stroke: "#000",
+      },
       ...props,
     }
   },

lib/shapes/ray.tsx

 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([]),
       direction: [0, 1],
       rotation: 0,
       style: {
+        fill: "#777",
         stroke: "#000",
         strokeWidth: 1,
       },

lib/shapes/rectangle.tsx

       point: [0, 0],
       size: [1, 1],
       rotation: 0,
-      style: {},
+      style: {
+        fill: "#777",
+        stroke: "#000",
+      },
       ...props,
     }
   },
     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

         //     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",
         //     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

           },
         },
         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",
+              },
+            },
+          },
         },
       },
     },
           },
         },
         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: {},
   },
       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
     },