-
Notifications
You must be signed in to change notification settings - Fork 228
/
Canvas.js
135 lines (128 loc) · 3.57 KB
/
Canvas.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import React, { Component } from "react";
import CanvasDraw from "./RCD";
import uuid from 'uuid/v4'
import { API, graphqlOperation } from 'aws-amplify'
import { onUpdateCanvas } from './graphql/subscriptions'
import { updateCanvas, createCanvas } from './graphql/mutations'
const colors = [
'#D50000',
'#AA00FF',
'#2962FF',
'#18FFFF',
'#00C853',
'#FFD600',
'#FF6D00',
'#000000'
]
function rand() {
return colors[~~(colors.length * Math.random())];
}
class Demo extends Component {
state = {
brushColor: rand(),
canvasHeight: 350,
canvasWidth: 380,
brushRadius: 4,
lazyRadius: 8
}
lineLength = 0
id = '123'
clientId = uuid()
canvasInfo = 'tempcanvas'
componentDidMount() {
const canvas = {
id: this.id,
clientId: this.clientId,
data: {
...this.state,
lines: []
}
}
// Create the canvas. If canvas is already created, retrieve the data & draw previous canvas
API.graphql(graphqlOperation(createCanvas, { input: canvas }))
.then(d => console.log('canvas created :', d))
.catch(err => {
if (err.errors[0].data.id === this.id) {
const d = err.errors[0].data.data
this.canvas.loadSaveData(d)
}
})
window.addEventListener('mouseup', (e) => {
// If we are clicking on a button, do not update anything
if (e.target.name === 'clearbutton') return
this.setState({
brushColor: rand()
})
const data = this.canvas.getSaveData()
const p = JSON.parse(data)
const length = p.lines.length
this.lineLength = length
const canvas = {
id: this.id,
clientId: this.clientId,
data
}
// Save updated canvas in the database
API.graphql(graphqlOperation(updateCanvas, { input: canvas }))
.then(c => {
console.log('canvas updated!')
})
.catch(err => console.log('error creating: ', err))
})
API.graphql(graphqlOperation(onUpdateCanvas))
.subscribe({
next: (d) => {
const data = JSON.parse(d.value.data.onUpdateCanvas.data)
const length = data.lines.length
if (length === 0) {
// If there is no canvas data, clear the canvas
const data = this.canvas.getSaveData()
const parsedData = JSON.parse(data)
const newData = {
...parsedData,
lines: []
}
const newCanvas = JSON.stringify(newData)
this.canvas.loadSaveData(newCanvas)
return
}
if (this.lineLength === length || length === Number(0)) return
// Draw new lines to canvas
const last = data.lines[length -1]
this.canvas.simulateDrawingLines({ lines: [last] })
}
})
}
clear = () => {
const data = this.canvas.getSaveData()
const parsedData = JSON.parse(data)
const newData = {
...parsedData,
lines: []
}
const newCanvas = JSON.stringify(newData)
this.canvas.loadSaveData(newCanvas)
const canvas = {
id: this.id,
clientId: this.clientId,
data: newCanvas
}
API.graphql(graphqlOperation(updateCanvas, { input: canvas }))
.then(c => {
console.log('canvas cleared!')
})
.catch(err => console.log('error creating: ', err))
}
render() {
return (
<div>
<button name='clearbutton' onClick={this.clear}>Clear</button>
<CanvasDraw
{...this.state}
ref={canvas => this.canvas = canvas}
/>
</div>
);
}
}
export default Demo