Improves default data

components/editor.tsx

@@ -7,6 +7,7 @@ import CodePanel from "./code-panel/code-panel"
 import ControlsPanel from "./controls-panel/controls-panel"
 import styled from "styles"
 import StylePanel from "./style-panel/style-panel"
+import { useSelector } from "state"
 
 export default function Editor() {
   useKeyboardEvents()

lib/shape-utils/dot.tsx

@@ -29,7 +29,7 @@ const dot = registerShapeUtils<DotShape>({
   },
 
   render({ id }) {
-    return <DotCircle id={id} cx={0} cy={0} r={4} />
+    return <DotCircle id={id} cx={0} cy={0} r={3} />
   },
 
   applyStyles(shape, style) {

lib/shape-utils/polyline.tsx

@@ -9,6 +9,7 @@ import {
   boundsContainPolygon,
 } from "utils/bounds"
 import { getBoundsFromPoints, translateBounds } from "utils/utils"
+import { colors } from "state/data"
 
 const polyline = registerShapeUtils<PolylineShape>({
   boundsCache: new WeakMap([]),
@@ -24,7 +25,11 @@ const polyline = registerShapeUtils<PolylineShape>({
       point: [0, 0],
       points: [[0, 0]],
       rotation: 0,
-      style: {},
+      style: {
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+      },
       ...props,
     }
   },

state/data.ts

@@ -1,6 +1,27 @@
 import { Data, ShapeType } from "types"
 import shapeUtils from "lib/shape-utils"
 
+export const colors = {
+  transparent: "transparent",
+  white: "rgba(248, 249, 250, 1.000)",
+  lightGray: "rgba(224, 226, 230, 1.000)",
+  gray: "rgba(172, 181, 189, 1.000)",
+  darkGray: "rgba(52, 58, 64, 1.000)",
+  black: "rgba(0,0,0, 1.000)",
+  lime: "rgba(115, 184, 23, 1.000)",
+  green: "rgba(54, 178, 77, 1.000)",
+  teal: "rgba(9, 167, 120, 1.000)",
+  cyan: "rgba(14, 152, 173, 1.000)",
+  blue: "rgba(28, 126, 214, 1.000)",
+  indigo: "rgba(66, 99, 235, 1.000)",
+  violet: "rgba(112, 72, 232, 1.000)",
+  grape: "rgba(174, 62, 200, 1.000)",
+  pink: "rgba(214, 51, 108, 1.000)",
+  red: "rgba(240, 63, 63, 1.000)",
+  orange: "rgba(247, 103, 6, 1.000)",
+  yellow: "rgba(245, 159, 0, 1.000)",
+}
+
 export const defaultDocument: Data["document"] = {
   pages: {
     page0: {
@@ -9,94 +30,107 @@ export const defaultDocument: Data["document"] = {
       name: "Page 0",
       childIndex: 0,
       shapes: {
-        rayShape: shapeUtils[ShapeType.Ray].create({
+        shape3: shapeUtils[ShapeType.Dot].create({
-          id: "rayShape",
+          id: "shape3",
-          name: "Ray",
+          name: "Shape 3",
           childIndex: 3,
-          point: [300, 300],
+          point: [400, 500],
-          direction: [0.5, 0.5],
+          style: {
+            stroke: colors.black,
+            fill: colors.lightGray,
+            strokeWidth: 1,
+          },
         }),
-        // shape3: shapeUtils[ShapeType.Dot].create({
-        //   id: "shape3",
-        //   name: "Shape 3",
-        //   childIndex: 3,
-        //   point: [400, 500],
-        //   style: {
-        //     fill: "#AAA",
-        //     stroke: "#c6cacb",
-        //     strokeWidth: 1,
-        //   },
-        // }),
         shape0: shapeUtils[ShapeType.Circle].create({
           id: "shape0",
           name: "Shape 0",
           childIndex: 1,
           point: [100, 600],
           radius: 50,
+          style: {
+            stroke: colors.black,
+            fill: colors.lightGray,
+            strokeWidth: 1,
+          },
         }),
         shape5: shapeUtils[ShapeType.Ellipse].create({
           id: "shape5",
           name: "Shape 5",
           childIndex: 5,
-          point: [400, 600],
+          point: [200, 200],
+          radiusX: 50,
+          radiusY: 100,
+          style: {
+            stroke: colors.black,
+            fill: colors.lightGray,
+            strokeWidth: 1,
+          },
+        }),
+        shape7: shapeUtils[ShapeType.Ellipse].create({
+          id: "shape7",
+          name: "Shape 7",
+          childIndex: 7,
+          point: [100, 100],
           radiusX: 50,
           radiusY: 30,
+          style: {
+            stroke: colors.black,
+            fill: colors.lightGray,
+            strokeWidth: 1,
+          },
+        }),
+        shape6: shapeUtils[ShapeType.Line].create({
+          id: "shape6",
+          name: "Shape 6",
+          childIndex: 1,
+          point: [400, 400],
+          direction: [0.2, 0.2],
+          style: {
+            stroke: colors.black,
+            fill: colors.lightGray,
+            strokeWidth: 1,
+          },
+        }),
+        rayShape: shapeUtils[ShapeType.Ray].create({
+          id: "rayShape",
+          name: "Ray",
+          childIndex: 3,
+          point: [300, 100],
+          direction: [0.5, 0.5],
+          style: {
+            stroke: colors.black,
+            fill: colors.lightGray,
+            strokeWidth: 1,
+          },
+        }),
+        shape2: shapeUtils[ShapeType.Polyline].create({
+          id: "shape2",
+          name: "Shape 2",
+          childIndex: 2,
+          point: [200, 600],
+          points: [
+            [0, 0],
+            [75, 200],
+            [100, 50],
+          ],
+          style: {
+            stroke: colors.black,
+            fill: colors.transparent,
+            strokeWidth: 1,
+          },
+        }),
+        shape1: shapeUtils[ShapeType.Rectangle].create({
+          id: "shape1",
+          name: "Shape 1",
+          childIndex: 1,
+          point: [400, 600],
+          size: [200, 200],
+          style: {
+            stroke: colors.black,
+            fill: colors.lightGray,
+            strokeWidth: 1,
+          },
         }),
-        // shape7: shapeUtils[ShapeType.Ellipse].create({
-        //   id: "shape7",
-        //   name: "Shape 7",
-        //   childIndex: 7,
-        //   point: [100, 100],
-        //   radiusX: 50,
-        //   radiusY: 30,
-        //   style: {
-        //     fill: "#AAA",
-        //     stroke: "#c6cacb",
-        //     strokeWidth: 1,
-        //   },
-        // }),
-        // shape2: shapeUtils[ShapeType.Polyline].create({
-        //   id: "shape2",
-        //   name: "Shape 2",
-        //   childIndex: 2,
-        //   point: [200, 600],
-        //   points: [
-        //     [0, 0],
-        //     [75, 200],
-        //     [100, 50],
-        //   ],
-        //   style: {
-        //     fill: "none",
-        //     stroke: "#c6cacb",
-        //     strokeWidth: 2,
-        //     strokeLinecap: "round",
-        //     strokeLinejoin: "round",
-        //   },
-        // }),
-        // shape1: shapeUtils[ShapeType.Rectangle].create({
-        //   id: "shape1",
-        //   name: "Shape 1",
-        //   childIndex: 1,
-        //   point: [400, 600],
-        //   size: [200, 200],
-        //   style: {
-        //     fill: "#AAA",
-        //     stroke: "#c6cacb",
-        //     strokeWidth: 1,
-        //   },
-        // }),
-        // shape6: shapeUtils[ShapeType.Line].create({
-        //   id: "shape6",
-        //   name: "Shape 6",
-        //   childIndex: 1,
-        //   point: [400, 400],
-        //   direction: [0.2, 0.2],
-        //   style: {
-        //     fill: "#AAA",
-        //     stroke: "#c6cacb",
-        //     strokeWidth: 1,
-        //   },
-        // }),
       },
     },
   },
@@ -137,24 +171,3 @@ new Polyline({
     },
   },
 }
-
-export const colors = {
-  transparent: "transparent",
-  white: "rgba(248, 249, 250, 1.000)",
-  lightGray: "rgba(224, 226, 230, 1.000)",
-  gray: "rgba(172, 181, 189, 1.000)",
-  darkGray: "rgba(52, 58, 64, 1.000)",
-  black: "rgba(0,0,0, 1.000)",
-  lime: "rgba(115, 184, 23, 1.000)",
-  green: "rgba(54, 178, 77, 1.000)",
-  teal: "rgba(9, 167, 120, 1.000)",
-  cyan: "rgba(14, 152, 173, 1.000)",
-  blue: "rgba(28, 126, 214, 1.000)",
-  indigo: "rgba(66, 99, 235, 1.000)",
-  violet: "rgba(112, 72, 232, 1.000)",
-  grape: "rgba(174, 62, 200, 1.000)",
-  pink: "rgba(214, 51, 108, 1.000)",
-  red: "rgba(240, 63, 63, 1.000)",
-  orange: "rgba(247, 103, 6, 1.000)",
-  yellow: "rgba(245, 159, 0, 1.000)",
-}

state/state.ts

@@ -94,7 +94,7 @@ const state = createState({
     loading: {
       on: {
         MOUNTED: {
-          do: "restoreSavedData",
+          do: ["restoreSavedData", "zoomCameraToFit"],
           to: "ready",
         },
       },