Browse Source

Improves stroke width

main
Steve Ruiz 4 years ago
parent
commit
138e1fa24d

+ 6
- 2
components/canvas/shape.tsx View File

@@ -66,16 +66,20 @@ function Shape({ id }: { id: string }) {
66 66
     >
67 67
       <defs>{getShapeUtils(shape).render(shape)}</defs>
68 68
       <HoverIndicator as="use" xlinkHref={"#" + id} />
69
-      <use xlinkHref={"#" + id} {...shape.style} />
69
+      <MainShape as="use" xlinkHref={"#" + id} {...shape.style} />
70 70
       <Indicator as="use" xlinkHref={"#" + id} />
71 71
     </StyledGroup>
72 72
   )
73 73
 }
74 74
 
75
+const MainShape = styled("use", {
76
+  zStrokeWidth: 1,
77
+})
78
+
75 79
 const Indicator = styled("path", {
76 80
   fill: "none",
77 81
   stroke: "transparent",
78
-  zStrokeWidth: [1, 1],
82
+  zStrokeWidth: 1,
79 83
   pointerEvents: "none",
80 84
   strokeLineCap: "round",
81 85
   strokeLinejoin: "round",

+ 1
- 1
lib/code/line.ts View File

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

+ 4
- 1
lib/shapes/circle.tsx View File

@@ -20,7 +20,10 @@ const circle = createShape<CircleShape>({
20 20
       point: [0, 0],
21 21
       rotation: 0,
22 22
       radius: 20,
23
-      style: {},
23
+      style: {
24
+        fill: "#777",
25
+        stroke: "#000",
26
+      },
24 27
       ...props,
25 28
     }
26 29
   },

+ 4
- 1
lib/shapes/dot.tsx View File

@@ -18,7 +18,10 @@ const dot = createShape<DotShape>({
18 18
       childIndex: 0,
19 19
       point: [0, 0],
20 20
       rotation: 0,
21
-      style: {},
21
+      style: {
22
+        fill: "#777",
23
+        stroke: "#000",
24
+      },
22 25
       ...props,
23 26
     }
24 27
   },

+ 4
- 1
lib/shapes/ellipse.tsx View File

@@ -21,7 +21,10 @@ const ellipse = createShape<EllipseShape>({
21 21
       radiusX: 20,
22 22
       radiusY: 20,
23 23
       rotation: 0,
24
-      style: {},
24
+      style: {
25
+        fill: "#777",
26
+        stroke: "#000",
27
+      },
25 28
       ...props,
26 29
     }
27 30
   },

+ 4
- 1
lib/shapes/line.tsx View File

@@ -19,7 +19,10 @@ const line = createShape<LineShape>({
19 19
       point: [0, 0],
20 20
       direction: [0, 0],
21 21
       rotation: 0,
22
-      style: {},
22
+      style: {
23
+        fill: "#777",
24
+        stroke: "#000",
25
+      },
23 26
       ...props,
24 27
     }
25 28
   },

+ 2
- 0
lib/shapes/ray.tsx View File

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

+ 4
- 6
lib/shapes/rectangle.tsx View File

@@ -18,7 +18,10 @@ const rectangle = createShape<RectangleShape>({
18 18
       point: [0, 0],
19 19
       size: [1, 1],
20 20
       rotation: 0,
21
-      style: {},
21
+      style: {
22
+        fill: "#777",
23
+        stroke: "#000",
24
+      },
22 25
       ...props,
23 26
     }
24 27
   },
@@ -76,11 +79,6 @@ const rectangle = createShape<RectangleShape>({
76 79
     return shape
77 80
   },
78 81
 
79
-  stretch(shape, scaleX, scaleY) {
80
-    shape.size = vec.mulV(shape.size, [scaleX, scaleY])
81
-    return shape
82
-  },
83
-
84 82
   transform(shape, bounds) {
85 83
     shape.point = [bounds.minX, bounds.minY]
86 84
     shape.size = [bounds.width, bounds.height]

+ 37
- 37
state/data.ts View File

@@ -32,31 +32,31 @@ export const defaultDocument: Data["document"] = {
32 32
         //     strokeWidth: 1,
33 33
         //   },
34 34
         // }),
35
-        // shape0: shapeUtils[ShapeType.Circle].create({
36
-        //   id: "shape0",
37
-        //   name: "Shape 0",
38
-        //   childIndex: 1,
39
-        //   point: [100, 600],
40
-        //   radius: 50,
41
-        //   style: {
42
-        //     fill: "#AAA",
43
-        //     stroke: "#777",
44
-        //     strokeWidth: 1,
45
-        //   },
46
-        // }),
47
-        // shape5: shapeUtils[ShapeType.Ellipse].create({
48
-        //   id: "shape5",
49
-        //   name: "Shape 5",
50
-        //   childIndex: 5,
51
-        //   point: [400, 600],
52
-        //   radiusX: 50,
53
-        //   radiusY: 30,
54
-        //   style: {
55
-        //     fill: "#AAA",
56
-        //     stroke: "#777",
57
-        //     strokeWidth: 1,
58
-        //   },
59
-        // }),
35
+        shape0: shapeUtils[ShapeType.Circle].create({
36
+          id: "shape0",
37
+          name: "Shape 0",
38
+          childIndex: 1,
39
+          point: [100, 600],
40
+          radius: 50,
41
+          style: {
42
+            fill: "#AAA",
43
+            stroke: "#777",
44
+            strokeWidth: 1,
45
+          },
46
+        }),
47
+        shape5: shapeUtils[ShapeType.Ellipse].create({
48
+          id: "shape5",
49
+          name: "Shape 5",
50
+          childIndex: 5,
51
+          point: [400, 600],
52
+          radiusX: 50,
53
+          radiusY: 30,
54
+          style: {
55
+            fill: "#AAA",
56
+            stroke: "#777",
57
+            strokeWidth: 1,
58
+          },
59
+        }),
60 60
         // shape7: shapeUtils[ShapeType.Ellipse].create({
61 61
         //   id: "shape7",
62 62
         //   name: "Shape 7",
@@ -88,18 +88,18 @@ export const defaultDocument: Data["document"] = {
88 88
         //     strokeLinejoin: "round",
89 89
         //   },
90 90
         // }),
91
-        // shape1: shapeUtils[ShapeType.Rectangle].create({
92
-        //   id: "shape1",
93
-        //   name: "Shape 1",
94
-        //   childIndex: 1,
95
-        //   point: [400, 600],
96
-        //   size: [200, 200],
97
-        //   style: {
98
-        //     fill: "#AAA",
99
-        //     stroke: "#777",
100
-        //     strokeWidth: 1,
101
-        //   },
102
-        // }),
91
+        shape1: shapeUtils[ShapeType.Rectangle].create({
92
+          id: "shape1",
93
+          name: "Shape 1",
94
+          childIndex: 1,
95
+          point: [400, 600],
96
+          size: [200, 200],
97
+          style: {
98
+            fill: "#AAA",
99
+            stroke: "#777",
100
+            strokeWidth: 1,
101
+          },
102
+        }),
103 103
         // shape6: shapeUtils[ShapeType.Line].create({
104 104
         //   id: "shape6",
105 105
         //   name: "Shape 6",

+ 89
- 9
state/state.ts View File

@@ -166,16 +166,31 @@ const state = createState({
166 166
           },
167 167
         },
168 168
         editing: {
169
-          onEnter: "startTranslateSession",
170 169
           on: {
171
-            MOVED_POINTER: "updateTranslateSession",
172
-            PANNED_CAMERA: "updateTranslateSession",
173 170
             STOPPED_POINTING: { do: "completeSession", to: "selecting" },
174 171
             CANCELLED: {
175 172
               do: ["cancelSession", "deleteSelectedIds"],
176 173
               to: "selecting",
177 174
             },
178 175
           },
176
+          initial: "inactive",
177
+          states: {
178
+            inactive: {
179
+              on: {
180
+                MOVED_POINTER: {
181
+                  if: "distanceImpliesDrag",
182
+                  to: "dot.editing.active",
183
+                },
184
+              },
185
+            },
186
+            active: {
187
+              onEnter: "startTranslateSession",
188
+              on: {
189
+                MOVED_POINTER: "updateTranslateSession",
190
+                PANNED_CAMERA: "updateTranslateSession",
191
+              },
192
+            },
193
+          },
179 194
         },
180 195
       },
181 196
     },
@@ -193,20 +208,74 @@ const state = createState({
193 208
           },
194 209
         },
195 210
         editing: {
196
-          onEnter: "startDirectionSession",
197 211
           on: {
198
-            MOVED_POINTER: "updateDirectionSession",
199
-            PANNED_CAMERA: "updateDirectionSession",
200 212
             STOPPED_POINTING: { do: "completeSession", to: "selecting" },
201 213
             CANCELLED: {
202 214
               do: ["cancelSession", "deleteSelectedIds"],
203 215
               to: "selecting",
204 216
             },
205 217
           },
218
+          initial: "inactive",
219
+          states: {
220
+            inactive: {
221
+              on: {
222
+                MOVED_POINTER: {
223
+                  if: "distanceImpliesDrag",
224
+                  to: "ray.editing.active",
225
+                },
226
+              },
227
+            },
228
+            active: {
229
+              onEnter: "startDirectionSession",
230
+              on: {
231
+                MOVED_POINTER: "updateDirectionSession",
232
+                PANNED_CAMERA: "updateDirectionSession",
233
+              },
234
+            },
235
+          },
236
+        },
237
+      },
238
+    },
239
+    line: {
240
+      initial: "creating",
241
+      states: {
242
+        creating: {
243
+          on: {
244
+            POINTED_CANVAS: {
245
+              do: "createLine",
246
+              to: "line.editing",
247
+            },
248
+          },
249
+        },
250
+        editing: {
251
+          on: {
252
+            STOPPED_POINTING: { do: "completeSession", to: "selecting" },
253
+            CANCELLED: {
254
+              do: ["cancelSession", "deleteSelectedIds"],
255
+              to: "selecting",
256
+            },
257
+          },
258
+          initial: "inactive",
259
+          states: {
260
+            inactive: {
261
+              on: {
262
+                MOVED_POINTER: {
263
+                  if: "distanceImpliesDrag",
264
+                  to: "line.editing.active",
265
+                },
266
+              },
267
+            },
268
+            active: {
269
+              onEnter: "startDirectionSession",
270
+              on: {
271
+                MOVED_POINTER: "updateDirectionSession",
272
+                PANNED_CAMERA: "updateDirectionSession",
273
+              },
274
+            },
275
+          },
206 276
         },
207 277
       },
208 278
     },
209
-    line: {},
210 279
     polyline: {},
211 280
     rectangle: {},
212 281
   },
@@ -262,15 +331,26 @@ const state = createState({
262 331
       data.selectedIds.add(shape.id)
263 332
     },
264 333
 
334
+    // Line
335
+    createLine(data, payload: PointerInfo) {
336
+      const shape = shapeUtilityMap[ShapeType.Line].create({
337
+        point: screenToWorld(payload.point, data),
338
+        direction: [0, 1],
339
+      })
340
+
341
+      commands.createShape(data, shape)
342
+      data.selectedIds.add(shape.id)
343
+    },
344
+
265 345
     /* -------------------- Sessions -------------------- */
266 346
 
267 347
     // Shared
268 348
     cancelSession(data) {
269
-      session.cancel(data)
349
+      session?.cancel(data)
270 350
       session = undefined
271 351
     },
272 352
     completeSession(data) {
273
-      session.complete(data)
353
+      session?.complete(data)
274 354
       session = undefined
275 355
     },
276 356
 

Loading…
Cancel
Save