/
utils.js
256 lines (229 loc) · 8.41 KB
/
utils.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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
import {credsRef} from 'state/firebaseRefs'
var config = require('config')
var pako = require('pako')
var srcDir = config.srcDir
import {Set} from 'Immutable'
import RSVP, {Promise} from 'RSVP'
var s3Endpoint = config.s3Endpoint
var designPreviewSize = config.designPreviewSize
var designDetailSize = config.designDetailSize
var s3BucketName = config.s3BucketName
var imgHostname = config.imgHostname
/**
* From: https://gist.github.com/mikelehen/3596a30bd69384624c11
* Fancy ID generator that creates 20-character string identifiers with the following properties:
*
* 1. They're based on timestamp so that they sort *after* any existing ids.
* 2. They contain 72-bits of random data after the timestamp so that IDs won't
* collide with other clients' IDs.
* 3. They sort *lexicographically* (so the timestamp is converted to characters that will sort properly).
* 4. They're monotonically increasing. Even if you generate more than one in the same timestamp, the
* latter ones will sort after the former ones. We do this by using the previous random bits
* but "incrementing" them by 1 (only in the case of a timestamp collision).
*/
var generateFirebaseID = (function() {
// Modeled after base64 web-safe chars, but ordered by ASCII.
var PUSH_CHARS = '-0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz';
// Timestamp of last push, used to prevent local collisions if you push twice in one ms.
var lastPushTime = 0;
// We generate 72-bits of randomness which get turned into 12 characters and appended to the
// timestamp to prevent collisions with other clients. We store the last characters we
// generated because in the event of a collision, we'll use those same characters except
// "incremented" by one.
var lastRandChars = [];
return function() {
var now = new Date().getTime();
var duplicateTime = (now === lastPushTime);
lastPushTime = now;
var timeStampChars = new Array(8);
for (var i = 7; i >= 0; i--) {
timeStampChars[i] = PUSH_CHARS.charAt(now % 64);
// NOTE: Can't use << here because javascript will convert to int and lose the upper bits.
now = Math.floor(now / 64);
}
if (now !== 0) throw new Error('We should have converted the entire timestamp.');
var id = timeStampChars.join('');
if (!duplicateTime) {
for (i = 0; i < 12; i++) {
lastRandChars[i] = Math.floor(Math.random() * 64);
}
} else {
// If the timestamp hasn't changed since last push, use the same random number, except incremented by 1.
for (i = 11; i >= 0 && lastRandChars[i] === 63; i--) {
lastRandChars[i] = 0;
}
lastRandChars[i]++;
}
for (i = 0; i < 12; i++) {
id += PUSH_CHARS.charAt(lastRandChars[i]);
}
if(id.length != 20) throw new Error('Length should be 20.');
return id;
};
}())
var toA = (list) => Array.prototype.slice.call(list, 0)
var dataUriToBlob = (dataUri) => {
// convert base64/URLEncoded data component to raw binary data held in a string
var byteString = (
(dataUri.split(',')[0].indexOf('base64') >= 0)
? atob(dataUri.split(',')[1])
: unescape(dataUri.split(',')[1])
)
// separate out the mime component
var mimeString = dataUri.split(',')[0].split(':')[1].split(';')[0]
// write the bytes of the string to a typed array
var ia = new Uint8Array(byteString.length)
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i)
}
return new Blob([ia], {type:mimeString});
}
var svgTextToImage = (height, width, svgEl) => {
var svgString = (new window.XMLSerializer()).serializeToString(svgEl)
var imageString = 'data:image/svg+xml;base64,' + window.btoa(svgString)
var img = new Image(width, height)
return new Promise((resolve, reject) => {
img.addEventListener('load', () => resolve(img))
img.src = imageString
})
}
var renderDesignToJpegBlob = (size, svgEls) => {
var w = size, h = size
var canvas = document.createElement('canvas')
canvas.height = h
canvas.width = w
var ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, w, h)
var bgColor = '#fff'
var svgs = (
toA(svgEls).map(svg => {
svg.setAttribute('height', String(h))
svg.setAttribute('width', String(w))
return svg
})
.map(svgTextToImage.bind(null, h, w)))
return RSVP.all(svgs).then(svgImgs => {
svgImgs.forEach(svg => { ctx.drawImage(svg, 0, 0, w, h) })
ctx.globalCompositeOperation = "destination-over"
ctx.fillStyle = bgColor
ctx.fillRect(0, 0, w, h)
return dataUriToBlob(canvas.toDataURL('image/jpeg', 1.0))
})
}
var s3UrlForImage = (filename) => {
return `${s3Endpoint}/${s3BucketName}/${filename}`
}
var urlForImage = (filename) => {
return imgHostname + '/images/' + filename
}
var imageUrlForLayerImage = (layerImage) => {
var filename = layerImage.get('imageUrl').split('/').pop()
return urlForImage(filename)
}
var uploadImgToS3 = (file, filename, imgType) => {
var body = file
if (imgType === 'image/svg+xml') {
body = pako.gzip(file)
}
return new Promise((resolve, reject) => {
credsRef.once('value', snapshot => {
var creds = snapshot.val()
AWS.config.credentials = {
accessKeyId: creds.s3AccessKey,
secretAccessKey: creds.s3SecretKey}
var params = {
Bucket: s3BucketName,
Key: filename,
ACL: 'public-read',
CacheControl: 'max-age: 45792000',
ContentType: imgType,
Body: body}
if (imgType === 'image/svg+xml') {
params.ContentEncoding = 'gzip'
}
var s3 = new AWS.S3()
s3.putObject(params, (err, d) => {
if (err) {
console.log('got error: ',err)
reject(new Error('Failed to upload to s3.'))
} else {
resolve(urlForImage(filename))
}
})
})
})
}
export default {
renderDesignToJpegBlob:renderDesignToJpegBlob,
numTagsInCommon(obj1, obj2) {
var tags1 = Set(obj1.get('tags'))
var tags2 = Set(obj2.get('tags'))
return tags1.intersect(tags2).count()
},
imageUrlForDesign(design, size) {
var filename;
if (size === 'small') {
filename = design.get('smallImageUrl').split('/').pop()
} else if (size === 'large') {
filename = design.get('largeImageUrl').split('/').pop()
} else {
filename = (design.has('title')
? design.get('title')
: design.get('imageUrl').split('/').pop())
}
return urlForImage(filename, 'jpg')
},
imageUrlForLayer(layer) {
return imageUrlForLayerImage(layer.get('selectedLayerImage'))
},
compositeImageUrlForLayer(layer) {
return layer.getIn(['selectedLayerImage', 'compositeImageUrl'])
.replace('/assets/images/new/', '/' + srcDir + '/images/layers/')
},
imageUrlForLayerImage: imageUrlForLayerImage,
imageUrlForSurface(surface) {
if (surface == null) { return null }
return surface.get('imageUrl')
.replace('/assets/surfaces/', '/' + srcDir + '/images/surfaces/')
},
newId: generateFirebaseID,
s3UrlForImage: s3UrlForImage,
uploadImgToS3: uploadImgToS3,
uploadDesignPreview(title, svgEls) {
return RSVP.all([
renderDesignToJpegBlob(designPreviewSize, svgEls),
renderDesignToJpegBlob(designDetailSize, svgEls)
]).then(([designJpgBlobSmall, designJpgBlobLarge]) => {
return RSVP.all([
uploadImgToS3(designJpgBlobSmall, title + '-small.jpg', 'image/jpeg'),
uploadImgToS3(designJpgBlobLarge, title + '-large.jpg', 'image/jpeg')
])
})
},
rotateColorPalette(design, layer, layerIndex) {
var layers = design.get('layers')
layer = layer || layers.get(layerIndex)
var index = typeof layerIndex === 'undefined' ?
layers.findIndex(l => l.get('id') === layer.get('id'))
: layerIndex
var currentRotation = layer.get('paletteRotation')
// 0 - 3
var nextRotation = (currentRotation + 1) % 4
var newLayers = layers.update(index, v => v.set('paletteRotation', nextRotation))
return design.set('layers', newLayers)
},
makeDesignCopy(design) {
// the design will have a new id and the layers will have a new id
return design.update(d => {
var newLayers = d.get('layers').map(l => l.set('id', generateFirebaseID()))
var now = new Date().getTime()
return d.withMutations(d2 => {
d2.set('id', generateFirebaseID())
.set('adminCreated', false)
.set('layers', newLayers)
.set('createdAt', now)
.set('updatedAt', now)
})
})
}
}