Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
Add JSON import/export from 'natemoo-re-feat/graph-json'
+1007
-4
+31
demos/import-graph/import-graph.js
+31
demos/import-graph/import-graph.js
···
1
+
fetch('zdog.json')
2
+
.then(function( res ) {
3
+
return res.json();
4
+
})
5
+
.then(function(model) {
6
+
// ----- variables ----- //
7
+
var sceneSize = 100;
8
+
var TAU = Zdog.TAU;
9
+
var initRotate = { x: 20/360 * TAU, y: -50/360 * TAU };
10
+
11
+
// ----- model ----- //
12
+
var illo = new Zdog.Illustration({
13
+
element: '.illo',
14
+
rotate: initRotate,
15
+
dragRotate: true,
16
+
resize: 'fullscreen',
17
+
importGraph: model,
18
+
onResize: function( width, height ) {
19
+
this.zoom = Math.floor( Math.min( width, height ) * 2 / sceneSize ) / 2;
20
+
},
21
+
});
22
+
23
+
// ----- animate ----- //
24
+
25
+
function animate() {
26
+
illo.updateRenderGraph();
27
+
requestAnimationFrame(animate);
28
+
}
29
+
30
+
animate();
31
+
});
+47
demos/import-graph/index.html
+47
demos/import-graph/index.html
···
1
+
<!doctype html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="utf-8" />
5
+
<meta name="viewport" content="width=device-width" />
6
+
7
+
<title>Import graph</title>
8
+
9
+
<style>
10
+
html { height: 100%; }
11
+
12
+
body {
13
+
min-height: 100%;
14
+
margin: 0;
15
+
}
16
+
17
+
.illo {
18
+
display: block;
19
+
width: 100%;
20
+
height: 100%;
21
+
cursor: move;
22
+
background: #FDB;
23
+
}
24
+
</style>
25
+
26
+
</head>
27
+
<body>
28
+
29
+
<div class="container">
30
+
<canvas class="illo"></canvas>
31
+
</div>
32
+
33
+
<script src="../../js/boilerplate.js"></script>
34
+
<script src="../../js/canvas-renderer.js"></script>
35
+
<script src="../../js/vector.js"></script>
36
+
<script src="../../js/anchor.js"></script>
37
+
<script src="../../js/path-command.js"></script>
38
+
<script src="../../js/shape.js"></script>
39
+
<script src="../../js/ellipse.js"></script>
40
+
<script src="../../js/rect.js"></script>
41
+
<script src="../../js/group.js"></script>
42
+
<script src="../../js/dragger.js"></script>
43
+
<script src="../../js/illustration.js"></script>
44
+
<script src="import-graph.js"></script>
45
+
46
+
</body>
47
+
</html>
+797
demos/import-graph/zdog.json
+797
demos/import-graph/zdog.json
···
1
+
{
2
+
"type": "Illustration",
3
+
"zoom": 8,
4
+
"children": [
5
+
{
6
+
"type": "Group",
7
+
"children": [
8
+
{
9
+
"type": "Group",
10
+
"updateSort": true,
11
+
"children": [
12
+
{
13
+
"type": "Rect",
14
+
"rotate": {
15
+
"x": 1.5707963267948966
16
+
},
17
+
"translate": {
18
+
"y": -20
19
+
},
20
+
"stroke": 8,
21
+
"fill": true,
22
+
"color": "#E62",
23
+
"path": [
24
+
{
25
+
"x": -20,
26
+
"y": -10
27
+
},
28
+
{
29
+
"x": 20,
30
+
"y": -10
31
+
},
32
+
{
33
+
"x": 20,
34
+
"y": 10
35
+
},
36
+
{
37
+
"x": -20,
38
+
"y": 10
39
+
}
40
+
],
41
+
"front": {
42
+
"z": 1
43
+
},
44
+
"width": 40,
45
+
"height": 20
46
+
},
47
+
{
48
+
"type": "Rect",
49
+
"rotate": {
50
+
"x": -1.5707963267948966
51
+
},
52
+
"translate": {
53
+
"y": 20
54
+
},
55
+
"stroke": 8,
56
+
"fill": true,
57
+
"color": "#E62",
58
+
"path": [
59
+
{
60
+
"x": -20,
61
+
"y": -10
62
+
},
63
+
{
64
+
"x": 20,
65
+
"y": -10
66
+
},
67
+
{
68
+
"x": 20,
69
+
"y": 10
70
+
},
71
+
{
72
+
"x": -20,
73
+
"y": 10
74
+
}
75
+
],
76
+
"front": {
77
+
"z": 1
78
+
},
79
+
"width": 40,
80
+
"height": 20
81
+
},
82
+
{
83
+
"type": "Rect",
84
+
"rotate": {
85
+
"y": 1.5707963267948966
86
+
},
87
+
"translate": {
88
+
"x": -20,
89
+
"y": -16
90
+
},
91
+
"stroke": 8,
92
+
"fill": true,
93
+
"color": "#E62",
94
+
"path": [
95
+
{
96
+
"x": -10,
97
+
"y": -4
98
+
},
99
+
{
100
+
"x": 10,
101
+
"y": -4
102
+
},
103
+
{
104
+
"x": 10,
105
+
"y": 4
106
+
},
107
+
{
108
+
"x": -10,
109
+
"y": 4
110
+
}
111
+
],
112
+
"front": {
113
+
"z": 1
114
+
},
115
+
"backface": false,
116
+
"width": 20,
117
+
"height": 8
118
+
},
119
+
{
120
+
"type": "Rect",
121
+
"rotate": {
122
+
"y": -1.5707963267948966
123
+
},
124
+
"translate": {
125
+
"x": 20,
126
+
"y": 16
127
+
},
128
+
"stroke": 8,
129
+
"fill": true,
130
+
"color": "#E62",
131
+
"path": [
132
+
{
133
+
"x": -10,
134
+
"y": -4
135
+
},
136
+
{
137
+
"x": 10,
138
+
"y": -4
139
+
},
140
+
{
141
+
"x": 10,
142
+
"y": 4
143
+
},
144
+
{
145
+
"x": -10,
146
+
"y": 4
147
+
}
148
+
],
149
+
"front": {
150
+
"z": 1
151
+
},
152
+
"backface": false,
153
+
"width": 20,
154
+
"height": 8
155
+
},
156
+
{
157
+
"type": "Rect",
158
+
"rotate": {
159
+
"y": 1.5707963267948966
160
+
},
161
+
"translate": {
162
+
"x": -20,
163
+
"y": 15
164
+
},
165
+
"stroke": 8,
166
+
"fill": true,
167
+
"color": "#E62",
168
+
"path": [
169
+
{
170
+
"x": -10,
171
+
"y": -5
172
+
},
173
+
{
174
+
"x": 10,
175
+
"y": -5
176
+
},
177
+
{
178
+
"x": 10,
179
+
"y": 5
180
+
},
181
+
{
182
+
"x": -10,
183
+
"y": 5
184
+
}
185
+
],
186
+
"front": {
187
+
"z": 1
188
+
},
189
+
"backface": false,
190
+
"width": 20,
191
+
"height": 10
192
+
},
193
+
{
194
+
"type": "Rect",
195
+
"rotate": {
196
+
"y": -1.5707963267948966
197
+
},
198
+
"translate": {
199
+
"x": 20,
200
+
"y": -15
201
+
},
202
+
"stroke": 8,
203
+
"fill": true,
204
+
"color": "#E62",
205
+
"path": [
206
+
{
207
+
"x": -10,
208
+
"y": -5
209
+
},
210
+
{
211
+
"x": 10,
212
+
"y": -5
213
+
},
214
+
{
215
+
"x": 10,
216
+
"y": 5
217
+
},
218
+
{
219
+
"x": -10,
220
+
"y": 5
221
+
}
222
+
],
223
+
"front": {
224
+
"z": 1
225
+
},
226
+
"backface": false,
227
+
"width": 20,
228
+
"height": 10
229
+
},
230
+
{
231
+
"type": "Rect",
232
+
"rotate": {
233
+
"x": -1.5707963267948966
234
+
},
235
+
"translate": {
236
+
"x": -5,
237
+
"y": -12
238
+
},
239
+
"stroke": 8,
240
+
"fill": true,
241
+
"color": "#E62",
242
+
"path": [
243
+
{
244
+
"x": -15,
245
+
"y": -10
246
+
},
247
+
{
248
+
"x": 15,
249
+
"y": -10
250
+
},
251
+
{
252
+
"x": 15,
253
+
"y": 10
254
+
},
255
+
{
256
+
"x": -15,
257
+
"y": 10
258
+
}
259
+
],
260
+
"front": {
261
+
"z": 1
262
+
},
263
+
"width": 30,
264
+
"height": 20
265
+
},
266
+
{
267
+
"type": "Rect",
268
+
"rotate": {
269
+
"x": 1.5707963267948966
270
+
},
271
+
"translate": {
272
+
"x": 5,
273
+
"y": 12
274
+
},
275
+
"stroke": 8,
276
+
"fill": true,
277
+
"color": "#E62",
278
+
"path": [
279
+
{
280
+
"x": -15,
281
+
"y": -10
282
+
},
283
+
{
284
+
"x": 15,
285
+
"y": -10
286
+
},
287
+
{
288
+
"x": 15,
289
+
"y": 10
290
+
},
291
+
{
292
+
"x": -15,
293
+
"y": 10
294
+
}
295
+
],
296
+
"front": {
297
+
"z": 1
298
+
},
299
+
"width": 30,
300
+
"height": 20
301
+
},
302
+
{
303
+
"type": "Rect",
304
+
"rotate": {
305
+
"x": 1.5707963267948966,
306
+
"y": 0.6327488350021832
307
+
},
308
+
"translate": {
309
+
"x": -5,
310
+
"y": -1
311
+
},
312
+
"stroke": 8,
313
+
"fill": true,
314
+
"color": "#E62",
315
+
"path": [
316
+
{
317
+
"x": -18.601075237738275,
318
+
"y": -10
319
+
},
320
+
{
321
+
"x": 18.601075237738275,
322
+
"y": -10
323
+
},
324
+
{
325
+
"x": 18.601075237738275,
326
+
"y": 10
327
+
},
328
+
{
329
+
"x": -18.601075237738275,
330
+
"y": 10
331
+
}
332
+
],
333
+
"front": {
334
+
"z": 1
335
+
},
336
+
"backface": false,
337
+
"width": 37.20215047547655,
338
+
"height": 20
339
+
},
340
+
{
341
+
"type": "Rect",
342
+
"rotate": {
343
+
"x": -1.5707963267948966,
344
+
"y": -0.6327488350021832
345
+
},
346
+
"translate": {
347
+
"x": 5,
348
+
"y": 1
349
+
},
350
+
"stroke": 8,
351
+
"fill": true,
352
+
"color": "#E62",
353
+
"path": [
354
+
{
355
+
"x": -18.601075237738275,
356
+
"y": -10
357
+
},
358
+
{
359
+
"x": 18.601075237738275,
360
+
"y": -10
361
+
},
362
+
{
363
+
"x": 18.601075237738275,
364
+
"y": 10
365
+
},
366
+
{
367
+
"x": -18.601075237738275,
368
+
"y": 10
369
+
}
370
+
],
371
+
"front": {
372
+
"z": 1
373
+
},
374
+
"backface": false,
375
+
"width": 37.20215047547655,
376
+
"height": 20
377
+
},
378
+
{
379
+
"type": "Ellipse",
380
+
"rotate": {
381
+
"z": 1.5707963267948966
382
+
},
383
+
"translate": {
384
+
"x": 22,
385
+
"y": -4
386
+
},
387
+
"stroke": 8,
388
+
"color": "#E62",
389
+
"path": [
390
+
{
391
+
"x": 0,
392
+
"y": -16
393
+
},
394
+
{
395
+
"arc": [
396
+
{
397
+
"x": 16,
398
+
"y": -16
399
+
},
400
+
{
401
+
"x": 16,
402
+
"y": 0
403
+
}
404
+
]
405
+
}
406
+
],
407
+
"front": {
408
+
"z": 1
409
+
},
410
+
"diameter": 32,
411
+
"quarters": 1
412
+
},
413
+
{
414
+
"type": "Anchor",
415
+
"rotate": {
416
+
"y": 1.5707963267948966
417
+
},
418
+
"translate": {
419
+
"x": -6,
420
+
"y": -7
421
+
},
422
+
"children": [
423
+
{
424
+
"type": "Shape",
425
+
"rotate": {
426
+
"x": 0.9420000403794636
427
+
},
428
+
"stroke": 4,
429
+
"fill": true,
430
+
"color": "#636",
431
+
"path": [
432
+
{
433
+
"x": -5,
434
+
"y": 0
435
+
},
436
+
{
437
+
"x": 5,
438
+
"y": 0
439
+
},
440
+
{
441
+
"x": 5,
442
+
"y": 12
443
+
},
444
+
{
445
+
"arc": [
446
+
{
447
+
"x": 5,
448
+
"y": 17
449
+
},
450
+
{
451
+
"x": 0,
452
+
"y": 17
453
+
}
454
+
]
455
+
},
456
+
{
457
+
"arc": [
458
+
{
459
+
"x": -5,
460
+
"y": 17
461
+
},
462
+
{
463
+
"x": -5,
464
+
"y": 12
465
+
}
466
+
]
467
+
}
468
+
],
469
+
"front": {
470
+
"z": 1
471
+
}
472
+
}
473
+
]
474
+
},
475
+
{
476
+
"type": "Ellipse",
477
+
"rotate": {
478
+
"y": 1.5707963267948966,
479
+
"z": 1.5707963267948966
480
+
},
481
+
"translate": {
482
+
"x": -26,
483
+
"y": -20
484
+
},
485
+
"scale": 8,
486
+
"stroke": 5,
487
+
"fill": true,
488
+
"color": "#636",
489
+
"closed": true,
490
+
"path": [
491
+
{
492
+
"x": 0,
493
+
"y": -0.5
494
+
},
495
+
{
496
+
"arc": [
497
+
{
498
+
"x": 0.5,
499
+
"y": -0.5
500
+
},
501
+
{
502
+
"x": 0.5,
503
+
"y": 0
504
+
}
505
+
]
506
+
},
507
+
{
508
+
"arc": [
509
+
{
510
+
"x": 0.5,
511
+
"y": 0.5
512
+
},
513
+
{
514
+
"x": 0,
515
+
"y": 0.5
516
+
}
517
+
]
518
+
}
519
+
],
520
+
"front": {
521
+
"z": 1
522
+
},
523
+
"quarters": 2
524
+
}
525
+
]
526
+
},
527
+
{
528
+
"type": "Group",
529
+
"updateSort": true,
530
+
"children": [
531
+
{
532
+
"type": "Shape",
533
+
"translate": {
534
+
"z": 10
535
+
},
536
+
"stroke": 8,
537
+
"fill": true,
538
+
"color": "#EA0",
539
+
"path": [
540
+
{
541
+
"x": -20,
542
+
"y": -20
543
+
},
544
+
{
545
+
"x": 20,
546
+
"y": -20
547
+
},
548
+
{
549
+
"x": 20,
550
+
"y": -10
551
+
},
552
+
{
553
+
"x": -10,
554
+
"y": 12
555
+
},
556
+
{
557
+
"x": 20,
558
+
"y": 12
559
+
},
560
+
{
561
+
"x": 20,
562
+
"y": 20
563
+
},
564
+
{
565
+
"x": -20,
566
+
"y": 20
567
+
},
568
+
{
569
+
"x": -20,
570
+
"y": 10
571
+
},
572
+
{
573
+
"x": 10,
574
+
"y": -12
575
+
},
576
+
{
577
+
"x": -20,
578
+
"y": -12
579
+
}
580
+
],
581
+
"front": {
582
+
"z": 1
583
+
},
584
+
"backface": false
585
+
},
586
+
{
587
+
"type": "Shape",
588
+
"rotate": {
589
+
"y": 3.141592653589793
590
+
},
591
+
"translate": {
592
+
"z": -10
593
+
},
594
+
"scale": {
595
+
"x": -1,
596
+
"y": 1,
597
+
"z": 1
598
+
},
599
+
"stroke": 8,
600
+
"fill": true,
601
+
"color": "#EA0",
602
+
"path": [
603
+
{
604
+
"x": -20,
605
+
"y": -20
606
+
},
607
+
{
608
+
"x": 20,
609
+
"y": -20
610
+
},
611
+
{
612
+
"x": 20,
613
+
"y": -10
614
+
},
615
+
{
616
+
"x": -10,
617
+
"y": 12
618
+
},
619
+
{
620
+
"x": 20,
621
+
"y": 12
622
+
},
623
+
{
624
+
"x": 20,
625
+
"y": 20
626
+
},
627
+
{
628
+
"x": -20,
629
+
"y": 20
630
+
},
631
+
{
632
+
"x": -20,
633
+
"y": 10
634
+
},
635
+
{
636
+
"x": 10,
637
+
"y": -12
638
+
},
639
+
{
640
+
"x": -20,
641
+
"y": -12
642
+
}
643
+
],
644
+
"front": {
645
+
"z": 1
646
+
},
647
+
"backface": false
648
+
}
649
+
]
650
+
}
651
+
]
652
+
},
653
+
{
654
+
"type": "Group",
655
+
"children": [
656
+
{
657
+
"type": "Ellipse",
658
+
"rotate": {
659
+
"x": 0.39269908169872414,
660
+
"z": -0.39269908169872414
661
+
},
662
+
"translate": {
663
+
"x": 10,
664
+
"y": -14,
665
+
"z": 20
666
+
},
667
+
"scale": 24,
668
+
"stroke": 5,
669
+
"fill": true,
670
+
"color": "#636",
671
+
"closed": true,
672
+
"path": [
673
+
{
674
+
"x": 0,
675
+
"y": -0.5
676
+
},
677
+
{
678
+
"arc": [
679
+
{
680
+
"x": 0.5,
681
+
"y": -0.5
682
+
},
683
+
{
684
+
"x": 0.5,
685
+
"y": 0
686
+
}
687
+
]
688
+
},
689
+
{
690
+
"arc": [
691
+
{
692
+
"x": 0.5,
693
+
"y": 0.5
694
+
},
695
+
{
696
+
"x": 0,
697
+
"y": 0.5
698
+
}
699
+
]
700
+
}
701
+
],
702
+
"front": {
703
+
"z": 1
704
+
},
705
+
"quarters": 2,
706
+
"children": [
707
+
{
708
+
"type": "Shape",
709
+
"translate": {
710
+
"x": -0.5,
711
+
"z": 0.5
712
+
},
713
+
"visible": false,
714
+
"front": {
715
+
"z": 1
716
+
}
717
+
}
718
+
]
719
+
}
720
+
]
721
+
},
722
+
{
723
+
"type": "Group",
724
+
"scale": {
725
+
"x": 1,
726
+
"y": 1,
727
+
"z": -1
728
+
},
729
+
"children": [
730
+
{
731
+
"type": "Ellipse",
732
+
"rotate": {
733
+
"x": 0.39269908169872414,
734
+
"z": -0.39269908169872414
735
+
},
736
+
"translate": {
737
+
"x": 10,
738
+
"y": -14,
739
+
"z": 20
740
+
},
741
+
"scale": 24,
742
+
"stroke": 5,
743
+
"fill": true,
744
+
"color": "#636",
745
+
"closed": true,
746
+
"path": [
747
+
{
748
+
"x": 0,
749
+
"y": -0.5
750
+
},
751
+
{
752
+
"arc": [
753
+
{
754
+
"x": 0.5,
755
+
"y": -0.5
756
+
},
757
+
{
758
+
"x": 0.5,
759
+
"y": 0
760
+
}
761
+
]
762
+
},
763
+
{
764
+
"arc": [
765
+
{
766
+
"x": 0.5,
767
+
"y": 0.5
768
+
},
769
+
{
770
+
"x": 0,
771
+
"y": 0.5
772
+
}
773
+
]
774
+
}
775
+
],
776
+
"front": {
777
+
"z": 1
778
+
},
779
+
"quarters": 2,
780
+
"children": [
781
+
{
782
+
"type": "Shape",
783
+
"translate": {
784
+
"x": -0.5,
785
+
"z": 0.5
786
+
},
787
+
"visible": false,
788
+
"front": {
789
+
"z": 1
790
+
}
791
+
}
792
+
]
793
+
}
794
+
]
795
+
}
796
+
]
797
+
}
+72
-1
js/anchor.js
+72
-1
js/anchor.js
···
22
22
function Anchor( options ) {
23
23
this.create( options || {} );
24
24
}
25
+
Anchor.type = 'Anchor';
25
26
26
27
Anchor.prototype.create = function( options ) {
27
28
this.children = [];
···
40
41
if ( this.addTo ) {
41
42
this.addTo.addChild( this );
42
43
}
44
+
if ( options.importGraph ) {
45
+
this.importGraph( options.importGraph );
46
+
}
43
47
};
44
48
45
49
Anchor.defaults = {};
···
50
54
'scale',
51
55
'addTo',
52
56
]);
57
+
58
+
Anchor.ignoreKeysJSON = [
59
+
'addTo',
60
+
];
53
61
54
62
Anchor.prototype.setOptions = function( options ) {
55
63
var optionKeys = this.constructor.optionKeys;
···
206
214
return clone;
207
215
};
208
216
217
+
Anchor.prototype.importGraph = function( model ) {
218
+
this.addChild( revive( model ) );
219
+
220
+
function revive( graph ) {
221
+
graph = utils.extend( {}, graph );
222
+
// quick hack to avoid nested Illustration items
223
+
var type = graph.type === 'Illustration' ? 'Anchor' : graph.type;
224
+
var children = (graph.children || []).slice( 0 );
225
+
delete graph.children;
226
+
227
+
var Item = utils[ type ];
228
+
var rootGraph;
229
+
if ( Item ) {
230
+
rootGraph = new Item( graph );
231
+
children.forEach( function( child ) {
232
+
revive( utils.extend( child, { addTo: rootGraph } ) );
233
+
} );
234
+
}
235
+
return rootGraph;
236
+
}
237
+
};
238
+
209
239
Anchor.prototype.normalizeRotate = function() {
210
240
this.rotate.x = utils.modulo( this.rotate.x, TAU );
211
241
this.rotate.y = utils.modulo( this.rotate.y, TAU );
212
242
this.rotate.z = utils.modulo( this.rotate.z, TAU );
213
243
};
214
244
245
+
Anchor.prototype.toJSON = function() {
246
+
var type = this.constructor.type;
247
+
var result = { type: type };
248
+
var defaults = this.constructor.defaults;
249
+
var optionKeys = this.constructor.optionKeys.slice(0).concat('children');
250
+
var ignoreKeys = Anchor.ignoreKeysJSON
251
+
.slice(0)
252
+
.concat(this.constructor.ignoreKeysJSON || []);
253
+
254
+
optionKeys.forEach(function( key ) {
255
+
if (ignoreKeys.indexOf(key) > -1) {
256
+
return;
257
+
}
258
+
var value = this[key];
259
+
260
+
if (
261
+
![ 'undefined', 'function' ].indexOf(typeof value) > -1 &&
262
+
value !== defaults[key]
263
+
) {
264
+
if (Array.isArray(value) && value.length === 0) {
265
+
return;
266
+
}
267
+
if (value.toJSON) {
268
+
var serialized = value.toJSON();
269
+
if (typeof serialized !== 'undefined') {
270
+
if (key === 'scale' && serialized === 1) {
271
+
return;
272
+
}
273
+
result[key] = serialized;
274
+
}
275
+
} else {
276
+
result[key] = value;
277
+
}
278
+
}
279
+
}, this);
280
+
281
+
return result;
282
+
};
283
+
215
284
// ----- subclass ----- //
216
285
217
286
function getSubclass( Super ) {
···
233
302
if ( !Item.optionKeys.indexOf( key ) != 1 ) {
234
303
Item.optionKeys.push( key );
235
304
}
236
-
} );
305
+
});
306
+
// create ignoreKeysJSON
307
+
Item.ignoreKeysJSON = Super.ignoreKeysJSON.slice(0);
237
308
238
309
Item.subclass = getSubclass( Item );
239
310
+4
js/boilerplate.js
+4
js/boilerplate.js
+7
-3
js/box.js
+7
-3
js/box.js
···
18
18
// ----- BoxRect ----- //
19
19
20
20
var BoxRect = Rect.subclass();
21
+
21
22
// prevent double-creation in parent.copyGraph()
22
23
// only create in Box.create()
23
-
BoxRect.prototype.copyGraph = function() {};
24
+
BoxRect.prototype.copyGraph = function() { };
24
25
25
26
// ----- Box ----- //
26
27
···
43
44
width: 1,
44
45
height: 1,
45
46
depth: 1,
46
-
fill: true,
47
-
} );
47
+
fill: true
48
+
}, Shape.defaults );
49
+
delete boxDefaults.path;
48
50
49
51
var Box = Anchor.subclass( boxDefaults );
52
+
Box.ignoreKeysJSON = [ 'children' ];
53
+
Box.type = 'Box';
50
54
51
55
/* eslint-disable no-self-assign */
52
56
Box.prototype.create = function( options ) {
+1
js/cone.js
+1
js/cone.js
+5
js/cylinder.js
+5
js/cylinder.js
···
26
26
updateSort: true,
27
27
});
28
28
29
+
CylinderGroup.type = 'CylinderGroup';
30
+
29
31
CylinderGroup.prototype.create = function() {
30
32
Group.prototype.create.apply( this, arguments );
31
33
this.pathCommands = [
···
96
98
frontFace: undefined,
97
99
fill: true,
98
100
});
101
+
102
+
Cylinder.type = 'Cylinder';
103
+
99
104
100
105
var TAU = utils.TAU;
101
106
+2
js/ellipse.js
+2
js/ellipse.js
+3
js/group.js
+3
js/group.js
+2
js/hemisphere.js
+2
js/hemisphere.js
+2
js/illustration.js
+2
js/illustration.js
+2
js/polygon.js
+2
js/polygon.js
+2
js/rect.js
+2
js/rect.js
+2
js/rounded-rect.js
+2
js/rounded-rect.js
+2
js/shape.js
+2
js/shape.js
+26
js/vector.js
+26
js/vector.js
···
156
156
return new Vector( this );
157
157
};
158
158
159
+
function round( num ) {
160
+
return Math.round( num * 1000 ) / 1000;
161
+
}
162
+
163
+
Vector.prototype.toJSON = function() {
164
+
var x = this.x;
165
+
var y = this.y;
166
+
var z = this.z;
167
+
168
+
if ( x === y && y === z ) {
169
+
return x !== 0 ? round( x ) : undefined;
170
+
}
171
+
172
+
var obj = { x: x, y: y, z: z };
173
+
var result = {};
174
+
175
+
Object.keys( obj ).forEach( function( key ) {
176
+
var value = obj[ key ];
177
+
if ( value !== 0 ) {
178
+
result[ key ] = round( value );
179
+
}
180
+
});
181
+
182
+
return Object.keys( result ).length ? result : undefined;
183
+
};
184
+
159
185
return Vector;
160
186
161
187
} ) );