Ver código fonte

Improve comments on draw

main
Steve Ruiz 4 anos atrás
pai
commit
fe833b6e3b
1 arquivos alterados com 28 adições e 11 exclusões
  1. 28
    11
      state/sessions/draw-session.ts

+ 28
- 11
state/sessions/draw-session.ts Ver arquivo

22
     this.origin = point
22
     this.origin = point
23
     this.previous = point
23
     this.previous = point
24
     this.last = point
24
     this.last = point
25
-    this.points = [[0, 0]]
26
     this.snapshot = getDrawSnapshot(data, id)
25
     this.snapshot = getDrawSnapshot(data, id)
27
 
26
 
28
-    const page = getPage(data)
29
-    const shape = page.shapes[id] as DrawShape
27
+    // Add a first point but don't update the shape yet. We'll update
28
+    // when the draw session ends; if the user hasn't added additional
29
+    // points, this single point will be interpreted as a "dot" shape.
30
+    this.points = [[0, 0]]
31
+
32
+    const shape = getPage(data).shapes[id]
33
+
30
     getShapeUtils(shape).translateTo(shape, point)
34
     getShapeUtils(shape).translateTo(shape, point)
31
 
35
 
32
     updateParents(data, [shape.id])
36
     updateParents(data, [shape.id])
42
 
46
 
43
     const delta = vec.vec(this.origin, point)
47
     const delta = vec.vec(this.origin, point)
44
 
48
 
49
+    // Drawing while holding shift will "lock" the pen to either the
50
+    // x or y axis, depending on which direction has the greater
51
+    // delta. Pressing shift will also add more points to "return"
52
+    // the pen to the axis.
45
     if (isLocked) {
53
     if (isLocked) {
46
       if (!this.isLocked && this.points.length > 1) {
54
       if (!this.isLocked && this.points.length > 1) {
47
         this.isLocked = true
55
         this.isLocked = true
48
         const returning = [...this.previous]
56
         const returning = [...this.previous]
49
 
57
 
50
-        if (Math.abs(delta[0]) < Math.abs(delta[1])) {
58
+        const isVertical = Math.abs(delta[0]) < Math.abs(delta[1])
59
+
60
+        if (isVertical) {
51
           this.lockedDirection = 'vertical'
61
           this.lockedDirection = 'vertical'
52
           returning[0] = this.origin[0]
62
           returning[0] = this.origin[0]
53
         } else {
63
         } else {
58
         this.previous = returning
68
         this.previous = returning
59
         this.points.push(vec.sub(returning, this.origin))
69
         this.points.push(vec.sub(returning, this.origin))
60
       }
70
       }
61
-    } else {
62
-      if (this.isLocked) {
63
-        this.isLocked = false
64
-      }
71
+    } else if (this.isLocked) {
72
+      this.isLocked = false
65
     }
73
     }
66
 
74
 
67
     if (this.isLocked) {
75
     if (this.isLocked) {
72
       }
80
       }
73
     }
81
     }
74
 
82
 
83
+    // Low pass the current input point against the previous one
75
     point = vec.med(this.previous, point)
84
     point = vec.med(this.previous, point)
76
 
85
 
86
+    this.previous = point
87
+
88
+    // Round the new point (helps keep our data tidy)
77
     const next = vec.round([...vec.sub(point, this.origin), pressure])
89
     const next = vec.round([...vec.sub(point, this.origin), pressure])
78
 
90
 
79
-    // Don't add duplicate points
91
+    // Don't add duplicate points. It's important to test against the
92
+    // adjusted (low-passed) point rather than the input point.
80
     if (vec.isEqual(this.last, next)) return
93
     if (vec.isEqual(this.last, next)) return
81
 
94
 
95
+    this.last = next
96
+
82
     this.points.push(next)
97
     this.points.push(next)
83
 
98
 
84
-    this.last = next
85
-    this.previous = point
99
+    // We draw a dot when the number of points is 1 or 2, so this guard
100
+    // prevents a "flash" of a dot when a user begins drawing a line.
101
+    if (this.points.length <= 2) return
86
 
102
 
103
+    // ...otherwise, update the points and update the shape's parents.
87
     const shape = getShape(data, snapshot.id) as DrawShape
104
     const shape = getShape(data, snapshot.id) as DrawShape
88
     getShapeUtils(shape).setProperty(shape, 'points', [...this.points])
105
     getShapeUtils(shape).setProperty(shape, 'points', [...this.points])
89
     updateParents(data, [shape.id])
106
     updateParents(data, [shape.id])

Carregando…
Cancelar
Salvar