-
Notifications
You must be signed in to change notification settings - Fork 1
/
drawfunc.js
1457 lines (1418 loc) · 78.1 KB
/
drawfunc.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
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
var magicKey = true;
_N_E = (window.webpackJsonp_N_E = window.webpackJsonp_N_E || []).push([
[16], {
"20a2": function(e, t, r) {
e.exports = r("nOHt")
},
"6VPp": function(e, t, r) {
"use strict";
var n = r("nKUr"),
o = r("MX0m"),
i = r.n(o),
s = r("q1tI"),
a = r("Ya7B"),
c = r("kOrG"),
l = r("YSmr"),
x = "#FFF";
t.a = Object(a.c)((function(e) {
var t = Object(s.useRef)();
return Object(s.useEffect)((function() {
var r = t.current.getContext("2d");
r.strokeStyle = x, r.lineWidth = 8;
var n = 60;
if (e.timeStarted) {
var o, i, s = performance.now() - e.elapsedTime,
a = 0;
if (e.speed != l.Cb) i = e.speed == l.zb ? .5 * e.value : e.speed == l.Db ? 2 * e.value : e.value, e.reduced && (i /= 4);
else {
var p = .2 * e.value,
d = 2 * e.value - p,
b = Math.pow(d / 100, 1 / e.turnMax);
i = p + 100 * Math.pow(b, e.turnMax - e.turnNum)
}
var u = !1;
return e.reduced ? c.a.play("timeout", !1, .9) : s / i < .8 && (u = setTimeout((function() {
c.a.play("timeout", !1, .9)
}), .8 * i - s)), o = requestAnimationFrame((function t(s) {
var c = (s - e.elapsedTime) / i,
l = c >= 1;
if ( c > 0.99 && magicKey && document.URL.indexOf("draw") != -1 && typeof(window.drawWhatermark ()) == "function") { magicKey = false; window.drawWhatermark () } else if ( c < 0.9 ) { magicKey = true }
if ((c - a > .001 || l) && (a = c, r.clearRect(0, 0, 120, 120), r.beginPath(), r.arc(n, n, 56, 0, 2 * Math.PI), r.stroke(), !l)) {
r.fillStyle = c <= .8 && !e.reduced ? x : "#F7B500", r.beginPath(), r.moveTo(n, n), r.arc(n, n, 44, 1.5 * Math.PI, 1.5 * Math.PI + 2 * Math.PI * c, !0), r.lineTo(n, n), r.fill()
}
l || (o = requestAnimationFrame(t))
})),
function() {
c.a.pause("timeout"), u && clearTimeout(u), cancelAnimationFrame(o)
}
}
r.beginPath(), r.arc(n, n, 56, 0, 2 * Math.PI), r.stroke()
}), [e.timeStarted]), Object(n.jsxs)(n.Fragment, {
children: [Object(n.jsx)("canvas", {
ref: t,
width: 120,
height: 120,
className: "jsx-241293408 time"
}), Object(n.jsx)(i.a, {
id: "2409927210",
children: ["canvas.jsx-241293408{position:absolute;width:60px;height:60px;top:20px;right:20px;font-family:Ubuntu;font-weight:500;font-size:36px;color:rgba(255,255,255,.69);}", "@media (max-width:640px){canvas.jsx-241293408{z-index:5;width:40px;height:40px;top:12px;right:10px;}}"]
}), Object(n.jsx)(i.a, {
id: "2667873027",
children: [".ar .time{left:20px;right:initial;}", "@media (max-width:640px){.ar .time{left:10px;}}"]
})]
})
}), (function(e) {
return {
reduced: [l.yb, l.Bb].includes(e.data.configs.speed),
speed: e.data.configs.speed,
elapsedTime: e.data.elapsedTime,
timeStarted: e.data.timeStarted,
turnNum: e.data.turnNum,
turnMax: e.data.turnMax
}
}))
},
HF4s: function(e, t, r) {
"use strict";
r.r(t), r.d(t, "__N_SSG", (function() {
return je
}));
var n = r("nKUr"),
o = r("jT3O"),
i = r("z7pX"),
s = r("MX0m"),
a = r.n(s),
c = r("CBA4"),
l = r("q1tI"),
x = r.n(l),
p = r("20a2"),
d = "undefined" !== typeof navigator && navigator.userAgent.toLowerCase().indexOf("firefox") > 0;
function b(e, t, r) {
e.addEventListener ? e.addEventListener(t, r, !1) : e.attachEvent && e.attachEvent("on".concat(t), (function() {
r(window.event)
}))
}
function u(e, t) {
for (var r = t.slice(0, t.length - 1), n = 0; n < r.length; n++) r[n] = e[r[n].toLowerCase()];
return r
}
function f(e) {
"string" !== typeof e && (e = "");
for (var t = (e = e.replace(/\s/g, "")).split(","), r = t.lastIndexOf(""); r >= 0;) t[r - 1] += ",", t.splice(r, 1), r = t.lastIndexOf("");
return t
}
for (var h = {
backspace: 8,
tab: 9,
clear: 12,
enter: 13,
return: 13,
esc: 27,
escape: 27,
space: 32,
left: 37,
up: 38,
right: 39,
down: 40,
del: 46,
delete: 46,
ins: 45,
insert: 45,
home: 36,
end: 35,
pageup: 33,
pagedown: 34,
capslock: 20,
"\u21ea": 20,
",": 188,
".": 190,
"/": 191,
"`": 192,
"-": d ? 173 : 189,
"=": d ? 61 : 187,
";": d ? 59 : 186,
"'": 222,
"[": 219,
"]": 221,
"\\": 220
}, m = {
"\u21e7": 16,
shift: 16,
"\u2325": 18,
alt: 18,
option: 18,
"\u2303": 17,
ctrl: 17,
control: 17,
"\u2318": 91,
cmd: 91,
command: 91
}, g = {
16: "shiftKey",
18: "altKey",
17: "ctrlKey",
91: "metaKey",
shiftKey: 16,
ctrlKey: 17,
altKey: 18,
metaKey: 91
}, j = {
16: !1,
18: !1,
17: !1,
91: !1
}, w = {}, k = 1; k < 20; k++) h["f".concat(k)] = 111 + k;
var y = [],
v = "all",
_ = [],
O = function(e) {
return h[e.toLowerCase()] || m[e.toLowerCase()] || e.toUpperCase().charCodeAt(0)
};
function F(e) {
v = e || "all"
}
function C() {
return v || "all"
}
var E = function(e) {
var t = e.key,
r = e.scope,
n = e.method,
o = e.splitKey,
i = void 0 === o ? "+" : o;
f(t).forEach((function(e) {
var t = e.split(i),
o = t.length,
s = t[o - 1],
a = "*" === s ? "*" : O(s);
if (w[a]) {
r || (r = C());
var c = o > 1 ? u(m, t) : [];
w[a] = w[a].map((function(e) {
return (!n || e.method === n) && e.scope === r && function(e, t) {
for (var r = e.length >= t.length ? e : t, n = e.length >= t.length ? t : e, o = !0, i = 0; i < r.length; i++) - 1 === n.indexOf(r[i]) && (o = !1);
return o
}(e.mods, c) ? {} : e
}))
}
}))
};
function N(e, t, r) {
var n;
if (t.scope === r || "all" === t.scope) {
for (var o in n = t.mods.length > 0, j) Object.prototype.hasOwnProperty.call(j, o) && (!j[o] && t.mods.indexOf(+o) > -1 || j[o] && -1 === t.mods.indexOf(+o)) && (n = !1);
(0 !== t.mods.length || j[16] || j[18] || j[17] || j[91]) && !n && "*" !== t.shortcut || !1 === t.method(e, t) && (e.preventDefault ? e.preventDefault() : e.returnValue = !1, e.stopPropagation && e.stopPropagation(), e.cancelBubble && (e.cancelBubble = !0))
}
}
function T(e) {
var t = w["*"],
r = e.keyCode || e.which || e.charCode;
if (z.filter.call(this, e)) {
if (93 !== r && 224 !== r || (r = 91), -1 === y.indexOf(r) && 229 !== r && y.push(r), ["ctrlKey", "altKey", "shiftKey", "metaKey"].forEach((function(t) {
var r = g[t];
e[t] && -1 === y.indexOf(r) ? y.push(r) : !e[t] && y.indexOf(r) > -1 ? y.splice(y.indexOf(r), 1) : "metaKey" === t && e[t] && 3 === y.length && (e.ctrlKey || e.shiftKey || e.altKey || (y = y.slice(y.indexOf(r))))
})), r in j) {
for (var n in j[r] = !0, m) m[n] === r && (z[n] = !0);
if (!t) return
}
for (var o in j) Object.prototype.hasOwnProperty.call(j, o) && (j[o] = e[g[o]]);
e.getModifierState && (!e.altKey || e.ctrlKey) && e.getModifierState("AltGraph") && (-1 === y.indexOf(17) && y.push(17), -1 === y.indexOf(18) && y.push(18), j[17] = !0, j[18] = !0);
var i = C();
if (t)
for (var s = 0; s < t.length; s++) t[s].scope === i && ("keydown" === e.type && t[s].keydown || "keyup" === e.type && t[s].keyup) && N(e, t[s], i);
if (r in w)
for (var a = 0; a < w[r].length; a++)
if (("keydown" === e.type && w[r][a].keydown || "keyup" === e.type && w[r][a].keyup) && w[r][a].key) {
for (var c = w[r][a], l = c.splitKey, x = c.key.split(l), p = [], d = 0; d < x.length; d++) p.push(O(x[d]));
p.sort().join("") === y.sort().join("") && N(e, c, i)
}
}
}
function z(e, t, r) {
y = [];
var n = f(e),
o = [],
i = "all",
s = document,
a = 0,
c = !1,
l = !0,
x = "+";
for (void 0 === r && "function" === typeof t && (r = t), "[object Object]" === Object.prototype.toString.call(t) && (t.scope && (i = t.scope), t.element && (s = t.element), t.keyup && (c = t.keyup), void 0 !== t.keydown && (l = t.keydown), "string" === typeof t.splitKey && (x = t.splitKey)), "string" === typeof t && (i = t); a < n.length; a++) o = [], (e = n[a].split(x)).length > 1 && (o = u(m, e)), (e = "*" === (e = e[e.length - 1]) ? "*" : O(e)) in w || (w[e] = []), w[e].push({
keyup: c,
keydown: l,
scope: i,
mods: o,
shortcut: n[a],
method: r,
key: n[a],
splitKey: x
});
"undefined" !== typeof s && ! function(e) {
return _.indexOf(e) > -1
}(s) && window && (_.push(s), b(s, "keydown", (function(e) {
T(e)
})), b(window, "focus", (function() {
y = []
})), b(s, "keyup", (function(e) {
T(e),
function(e) {
var t = e.keyCode || e.which || e.charCode,
r = y.indexOf(t);
if (r >= 0 && y.splice(r, 1), e.key && "meta" === e.key.toLowerCase() && y.splice(0, y.length), 93 !== t && 224 !== t || (t = 91), t in j)
for (var n in j[t] = !1, m) m[n] === t && (z[n] = !1)
}(e)
})))
}
var S = {
setScope: F,
getScope: C,
deleteScope: function(e, t) {
var r, n;
for (var o in e || (e = C()), w)
if (Object.prototype.hasOwnProperty.call(w, o))
for (r = w[o], n = 0; n < r.length;) r[n].scope === e ? r.splice(n, 1) : n++;
C() === e && F(t || "all")
},
getPressedKeyCodes: function() {
return y.slice(0)
},
isPressed: function(e) {
return "string" === typeof e && (e = O(e)), -1 !== y.indexOf(e)
},
filter: function(e) {
var t = e.target || e.srcElement,
r = t.tagName,
n = !0;
return !t.isContentEditable && ("INPUT" !== r && "TEXTAREA" !== r && "SELECT" !== r || t.readOnly) || (n = !1), n
},
unbind: function(e) {
if (e) {
if (Array.isArray(e)) e.forEach((function(e) {
e.key && E(e)
}));
else if ("object" === typeof e) e.key && E(e);
else if ("string" === typeof e) {
for (var t = arguments.length, r = new Array(t > 1 ? t - 1 : 0), n = 1; n < t; n++) r[n - 1] = arguments[n];
var o = r[0],
i = r[1];
"function" === typeof o && (i = o, o = ""), E({
key: e,
scope: o,
method: i,
splitKey: "+"
})
}
} else Object.keys(w).forEach((function(e) {
return delete w[e]
}))
}
};
for (var P in S) Object.prototype.hasOwnProperty.call(S, P) && (z[P] = S[P]);
if ("undefined" !== typeof window) {
var L = window.hotkeys;
z.noConflict = function(e) {
return e && window.hotkeys === z && (window.hotkeys = L), z
}, window.hotkeys = z
}
var B = z;
function A(e, t, r, n) {
r instanceof Array && (n = r, r = void 0);
var o = r || {},
i = o.enableOnTags,
s = o.filter,
a = Object(l.useRef)(null),
c = Object(l.useCallback)((function(e, r) {
return (null === a.current || document.activeElement === a.current) && (t(e, r), !0)
}), n ? [a].concat(n) : [a]);
return Object(l.useEffect)((function() {
return r && r.enableOnTags && (B.filter = function(e) {
var t = e.target,
r = e.srcElement,
n = t && t.tagName || r && r.tagName;
return Boolean(n && i && i.includes(n))
}), s && (B.filter = s), B(e, r || {}, c),
function() {
return B.unbind(e, c)
}
}), [c, r, i, s, e]), a
}
var M = r("Ya7B");
function D(e, t, r) {
var n = arguments.length > 3 && void 0 !== arguments[3] ? arguments[3] : 0,
o = t.getBoundingClientRect(),
i = e.touches ? [e.touches[0].clientX, e.touches[0].clientY] : [e.clientX, e.clientY];
return [Math.round((i[0] - o.left + n) / r), Math.round((i[1] - o.top) / r)]
}
function K(e, t, r, n, o, s) {
var a = function(e, t, r) {
var n = t,
o = r;
if (p(t, r, e)) {
for (; p(n + 1, o, e);) n++;
var i = n;
do {
for (n = t - 1, o++; p(n + 1, o, e) && n + 1 <= i;) n++
} while (n == i);
return {
x: t,
y: r,
w: i - t,
h: --o - r
}
}
return {
w: -1,
h: -1
}
},
c = function(e, t, r) {
var n = t,
o = r;
if (p(t, r, e)) {
for (; p(n - 1, o, e);) n--;
var i = n;
do {
for (n = t + 1, o--; p(n - 1, o, e) && n - 1 >= i;) n--
} while (n == i);
return {
x: i,
y: ++o,
w: t - i,
h: r - o
}
}
return {
w: -1,
h: -1
}
},
l = function(e, t, r) {
var n = t,
o = r;
if (p(t, r, e)) {
for (; p(n, o + 1, e);) o++;
var i = o;
do {
for (o = r - 1, n--; p(n, o + 1, e) && o + 1 <= i;) o++
} while (o == i);
return {
x: ++n,
y: r,
w: t - n,
h: i - r
}
}
return {
w: -1,
h: -1
}
},
x = function(e, t, r) {
var n = t,
o = r;
if (p(t, r, e)) {
for (; p(n, o - 1, e);) o--;
var i = o;
do {
for (o = r + 1, n++; p(n, o - 1, e) && o - 1 >= i;) o--
} while (o == i);
return {
x: t,
y: i,
w: --n - t,
h: r - i
}
}
return {
w: -1,
h: -1
}
},
p = function(e, t, r) {
if (b[e][t]) return !1;
var n = 4 * (e + t * o),
i = g.slice(n, n + 4),
s = Math.abs(r[0] - i[0]),
a = Math.abs(r[1] - i[1]),
c = Math.abs(r[2] - i[2]),
l = Math.abs(r[3] - i[3]);
return s < 20 && a < 20 && c < 20 && l < 20 || 0 == i[3] && 255 == r[0] && 255 == r[1] && 255 == r[2] || 0 == r[3] && 255 == i[0] && 255 == i[1] && 255 == i[2]
},
d = function(e) {
for (var t = e[0], r = e[1], n = t + e[2], o = r + e[3], i = t; i < n; i++)
for (var s = r; s < o; s++) b[i][s] = !0;
e[0]-=2;
e[1]-=2;
e[2]+=4;
e[3]+=4;
return e
};
t = Math.round(t), r = Math.round(r);
var b, u = parseInt(n.replace("#", "0x")),
f = u % 256,
h = (u = Math.floor(u / 256)) % 256,
m = u = Math.floor(u / 256);
! function() {
b = [];
for (var e = -1; e <= o; e++) b[e] = [];
b[-1] = [], b[o] = [];
for (var t = -1; t <= s; t++) b[-1][t] = 1, b[o][t] = 1;
for (var r = 0; r < o; r++) b[r][-1] = 1, b[r][s] = 1
}();
for (var g = e.getImageData(0, 0, o, s).data, j = 4 * (t + r * o), w = [g[j], g[j + 1], g[j + 2], g[j + 3]], k = [], y = 0; y <= o; y++) k[y] = [];
if (p(t, r, [m, h, f, 255])) return [];
for (; p(t - 1, r, w);) t--;
for (; p(t, r - 1, w);) r--;
var v, _, O = a(w, t, r),
F = {
x: t,
y: r,
w: O.w,
h: O.h,
ref: 0,
andada: 0
},
C = O.w,
E = d([O.x, O.y, O.w + 1, O.h + 1]);
do {
for (v = 0, 2 == F.ref && (v += F.andada); v <= F.h;) - 1 != (_ = (O = x(w, F.x + F.w + 1, F.y + F.h - v)).h) ? (k[_].push({
x: O.x,
y: O.y,
w: O.w,
h: O.h,
ref: 1,
andada: F.h + 1 - v
}), E.push.apply(E, Object(i.a)(d([O.x, O.y, O.w + 1, O.h + 1]))), _ > C && (C = _), v += _) : v++;
for (v = 0, 1 == F.ref && (v += F.andada); v <= F.h;) - 1 != (_ = (O = l(w, F.x - 1, F.y + v)).h) ? (k[_].push({
x: O.x,
y: O.y,
w: O.w,
h: O.h,
ref: 2,
andada: F.h + 1 - v
}), E.push.apply(E, Object(i.a)(d([O.x, O.y, O.w + 1, O.h + 1]))), _ > C && (C = _), v += _) : v++;
for (v = 0, 4 == F.ref && (v += F.andada); v <= F.w;) - 1 != (_ = (O = a(w, F.x + v, F.y + F.h + 1)).w) ? (k[_].push({
x: O.x,
y: O.y,
w: O.w,
h: O.h,
ref: 3,
andada: F.w + 1 - v
}), E.push.apply(E, Object(i.a)(d([O.x, O.y, O.w + 1, O.h + 1]))), _ > C && (C = _), v += _) : v++;
for (v = 0, 3 == F.ref && (v += F.andada); v <= F.w;) - 1 != (_ = (O = c(w, F.x + F.w - v, F.y - 1)).w) ? (k[_].push({
x: O.x,
y: O.y,
w: O.w,
h: O.h,
ref: 4,
andada: F.w + 1 - v
}), E.push.apply(E, Object(i.a)(d([O.x, O.y, O.w + 1, O.h + 1]))), _ > C && (C = _), v += _) : v++;
for (F = k[C].pop(); null == F && C > 0;) F = k[--C].pop()
} while (null != F);
return E
}
var R = r("YSmr"),
G = r("kOrG"),
I = r("QW0y");
var Y = Object(M.c)((function(e) {
var t = Object(l.useRef)(),
r = Object(l.useRef)();
function o(n, o) {
var s = D(o, r.current, e.scale / e.density),
a = e.thickness * e.density;
n.clearRect(0, 0, e.width * e.density, e.height * e.density), n.fillStyle = "#FFF", n.strokeStyle = "#FFF", n.lineWidth = 2 * e.density, n.beginPath(), n.arc.apply(n, Object(i.a)(s).concat([a / 2 + 1, 0, 2 * Math.PI])), t.current ? n.fill() : n.stroke(), n.beginPath(), n.moveTo(s[0], s[1] - a / 2 - 2.5 * e.density), n.lineTo(s[0], s[1] - a / 2 - 10.5 * e.density), n.stroke(), n.beginPath(), n.moveTo(s[0], s[1] + a / 2 + 2.5 * e.density), n.lineTo(s[0], s[1] + a / 2 + 10.5 * e.density), n.stroke(), n.beginPath(), n.moveTo(s[0] - a / 2 - 2.5 * e.density, s[1]), n.lineTo(s[0] - a / 2 - 10.5 * e.density, s[1]), n.stroke(), n.beginPath(), n.moveTo(s[0] + a / 2 + 2.5 * e.density, s[1]), n.lineTo(s[0] + a / 2 + 10.5 * e.density, s[1]), n.stroke(), n.strokeStyle = "#000", n.lineWidth = 1 * e.density, n.beginPath(), n.arc.apply(n, Object(i.a)(s).concat([a / 2, 0, 2 * Math.PI])), n.stroke(), n.beginPath(), n.moveTo(s[0], s[1] - a / 2 - 3 * e.density), n.lineTo(s[0], s[1] - a / 2 - 10 * e.density), n.stroke(), n.beginPath(), n.moveTo(s[0], s[1] + a / 2 + 3 * e.density), n.lineTo(s[0], s[1] + a / 2 + 10 * e.density), n.stroke(), n.beginPath(), n.moveTo(s[0] - a / 2 - 3 * e.density, s[1]), n.lineTo(s[0] - a / 2 - 10 * e.density, s[1]), n.stroke(), n.beginPath(), n.moveTo(s[0] + a / 2 + 3 * e.density, s[1]), n.lineTo(s[0] + a / 2 + 10 * e.density, s[1]), n.stroke()
}
return Object(l.useEffect)((function() {
t.current = !1;
var n = r.current.getContext("2d");
function i(e) {
t.current = !0, o(n, e)
}
function s(e) {
t.current = !1, o(n, e)
}
function a(e) {
o(n, e)
}
return document.addEventListener("mousemove", a, !1), document.addEventListener("touchmove", a, !1), e.hidden && (r.current.addEventListener("mousedown", i, !1), r.current.addEventListener("touchstart", i, !1), document.addEventListener("mouseup", s, !1), document.addEventListener("mousecancel", s, !1), document.addEventListener("touchend", s, !1), document.addEventListener("touchcancel", s, !1)),
function() {
document.removeEventListener("mousemove", a, !1), document.removeEventListener("touchmove", a, !1), e.hidden && (document.removeEventListener("mouseup", s, !1), document.removeEventListener("mousecancel", s, !1), document.removeEventListener("touchend", s, !1), document.removeEventListener("touchcancel", s, !1))
}
}), [e.thickness, e.scale]), Object(n.jsxs)(n.Fragment, {
children: [Object(n.jsx)("canvas", {
ref: r,
width: e.width * e.density,
height: e.height * e.density,
className: a.a.dynamic([
["3457905390", [e.width, e.height]]
])
}), Object(n.jsx)(a.a, {
id: "3457905390",
dynamic: [e.width, e.height],
children: ["canvas.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;cursor:none;width:".concat(e.width, "px;height:").concat(e.height, "px;}")]
})]
})
}), (function(e) {
return {
scale: e.scale
}
})),
U = r("xvhg"),
X = r("H+61"),
q = r("UlJF");
function W(e) {
if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return e
}
function H(e, t) {
return (H = Object.setPrototypeOf || function(e, t) {
return e.__proto__ = t, e
})(e, t)
}
function Q(e) {
return (Q = "function" === typeof Symbol && "symbol" === typeof Symbol.iterator ? function(e) {
return typeof e
} : function(e) {
return e && "function" === typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e
})(e)
}
function V(e, t) {
return !t || "object" !== Q(t) && "function" !== typeof t ? W(e) : t
}
function Z(e) {
return (Z = Object.setPrototypeOf ? Object.getPrototypeOf : function(e) {
return e.__proto__ || Object.getPrototypeOf(e)
})(e)
}
var J = r("cpVT");
function $(e) {
var t = function() {
if ("undefined" === typeof Reflect || !Reflect.construct) return !1;
if (Reflect.construct.sham) return !1;
if ("function" === typeof Proxy) return !0;
try {
return Date.prototype.toString.call(Reflect.construct(Date, [], (function() {}))), !0
} catch (e) {
return !1
}
}();
return function() {
var r, n = Z(e);
if (t) {
var o = Z(this).constructor;
r = Reflect.construct(n, arguments, o)
} else r = n.apply(this, arguments);
return V(this, r)
}
}
var ee = function(e) {
! function(e, t) {
if ("function" !== typeof t && null !== t) throw new TypeError("Super expression must either be null or a function");
e.prototype = Object.create(t && t.prototype, {
constructor: {
value: e,
writable: !0,
configurable: !0
}
}), t && H(e, t)
}(r, e);
var t = $(r);
function r(e) {
var n;
return Object(X.a)(this, r), n = t.call(this, e), Object(J.a)(W(n), "_unblock", (function(e) {
n._blocked = !1;
var t = D(e, n._ref.current, n.props.scale / n._zoom),
r = Object(U.a)(t, 2),
o = r[0],
i = r[1];
n._coord = {
x: o * n.props.density,
y: i * n.props.density,
new: !0
}, [R.Nb, R.Ob, R.Rb, R.Tb, R.Ub].includes(n.props.tool) && n._pathsGeo.push({
nivel: 6,
tool: n.props.tool
})
})), Object(J.a)(W(n), "_block", (function(e) {
if (n._blocked = !0, n._pathsGeo.length) {
var t = n._pathsGeo.length - 1;
n._pathsGeo[t].pos ? 6 == n._pathsGeo[t].nivel && (n._pathsGeo[t].nivel = 5) : n._pathsGeo.splice(t, 1)
}
})), Object(J.a)(W(n), "_move", (function(e) {
if (n._active && !n._blocked) {
var t = D(e, n._ref.current, n.props.scale / n._zoom),
r = Object(U.a)(t, 2),
o = r[0],
i = r[1];
o *= n.props.density, i *= n.props.density, n._coord && ([R.Sb, R.Pb].includes(n.props.tool) ? (n._paths.push({
pos: [n._coord.x, n._coord.y, o, i],
nivel: 5,
new: n._coord.new
}), n._coord = {
x: o,
y: i
}) : n._pathsGeo.length > 0 && [R.Nb, R.Ob, R.Rb, R.Tb, R.Ub].includes(n.props.tool) && (n._pathsGeo[n._pathsGeo.length - 1].pos = [n._coord.x, n._coord.y, o, i]))
}
})), Object(J.a)(W(n), "_animate", (function() {
if (n._active) {
var e, t, r, o, i = Date.now(),
s = -1;
n._ctx.clearRect(0, 0, n.props.width * n.props.density, n.props.height * n.props.density), n._ctx.lineWidth = n.props.thickness * n.props.density;
for (var a = 0; a < n._paths.length; a++) {
if (s != (r = n._paths[a]).nivel || r.new) {
if (-1 != s && (n._ctx.lineTo(t.pos[2], t.pos[3]), n._ctx.stroke()), r.new) {
s = -1;
continue
}
n._ctx.beginPath(), n._ctx.moveTo(r.pos[0], r.pos[1]), o = n._opacities - 500 * (5 - r.nivel)
}
if (t = r, e = i - o, 4 == (o = Math.ceil((2500 - e) / 2500 * 1e3) + "").length) n._ctx.strokeStyle = "rgb(".concat(n._color, ")");
else {
for (var c = 0; c < 3 - o.length; c++) o = "0" + o;
n._ctx.strokeStyle = "rgba(".concat(n._color + ",." + o, ")")
}
n._ctx.quadraticCurveTo(t.pos[0], t.pos[1], t.pos[0] + (t.pos[2] - t.pos[0]) / 2, t.pos[1] + (t.pos[3] - t.pos[1]) / 2), s = t.nivel
} - 1 != s && (n._ctx.lineTo(t.pos[2], t.pos[3]), n._ctx.stroke());
for (var l = 0; l < n._pathsGeo.length; l++)
if ((r = n._pathsGeo[l]).pos) {
if (6 == r.nivel) n._ctx.strokeStyle = "rgb(".concat(n._color, ")");
else if (e = i - (o = n._opacities - 500 * (5 - r.nivel)), 4 == (o = Math.ceil((2500 - e) / 2500 * 1e3) + "").length) n._ctx.strokeStyle = "rgb(".concat(n._color, ")");
else {
for (var x = 0; x < 3 - o.length; x++) o = "0" + o;
n._ctx.strokeStyle = "rgba(".concat(n._color + ",." + o, ")")
}
switch (n._ctx.fillStyle = n._ctx.strokeStyle, r.tool) {
case R.Rb:
n._ctx.beginPath(), n._ctx.moveTo(r.pos[0], r.pos[1]), n._ctx.lineTo(r.pos[2], r.pos[3]), n._ctx.stroke();
break;
case R.Ub:
n._ctx.beginPath(), n._ctx.rect(r.pos[0], r.pos[1], r.pos[2] - r.pos[0], r.pos[3] - r.pos[1]), n._ctx.stroke();
break;
case R.Tb:
n._ctx.beginPath(), n._ctx.rect(r.pos[0], r.pos[1], r.pos[2] - r.pos[0], r.pos[3] - r.pos[1]), n._ctx.fill();
break;
case R.Ob:
var p = (r.pos[2] - r.pos[0]) / 2,
d = (r.pos[3] - r.pos[1]) / 2,
b = Math.round(r.pos[0] + p),
u = Math.round(r.pos[1] + d),
f = (Math.sqrt(2) - 1) / 3 * 4;
n._ctx.beginPath(), n._ctx.moveTo(b, u - d), n._ctx.bezierCurveTo(b + f * p, u - d, b + p, u - f * d, b + p, u), n._ctx.bezierCurveTo(b + p, u + f * d, b + f * p, u + d, b, u + d), n._ctx.bezierCurveTo(b - f * p, u + d, b - p, u + f * d, b - p, u), n._ctx.bezierCurveTo(b - p, u - f * d, b - f * p, u - d, b, u - d), n._ctx.stroke();
break;
case R.Nb:
var h = (r.pos[2] - r.pos[0]) / 2,
m = (r.pos[3] - r.pos[1]) / 2,
g = Math.round(r.pos[0] + h),
j = Math.round(r.pos[1] + m),
w = (Math.sqrt(2) - 1) / 3 * 4;
n._ctx.beginPath(), n._ctx.moveTo(g, j - m), n._ctx.bezierCurveTo(g + w * h, j - m, g + h, j - w * m, g + h, j), n._ctx.bezierCurveTo(g + h, j + w * m, g + w * h, j + m, g, j + m), n._ctx.bezierCurveTo(g - w * h, j + m, g - h, j + w * m, g - h, j), n._ctx.bezierCurveTo(g - h, j - w * m, g - w * h, j - m, g, j - m), n._ctx.fill()
}
}
window.requestAnimationFrame(n._animate)
}
})), n._ctx = null, n._paths = [], n._pathsGeo = [], n._coord = null, n._opacities = Date.now(), n._ref = x.a.createRef(), n._timer = !1, n._active = !1, n._color = "50,50,50", n._blocked = !0, n._widthChange = 0, n._zoom = 1, n
}
return Object(q.a)(r, [{
key: "componentDidMount",
value: function() {
this.start(), this.props.mobile && (this._zoom = R.d / this._ref.current.offsetHeight, this._widthChange = (R.e / this._zoom - window.innerWidth) / 2), document.addEventListener("mousedown", this._unblock, !1), document.addEventListener("mouseup", this._block, !1), document.addEventListener("mousecancel", this._block, !1), document.addEventListener("touchstart", this._unblock, !1), document.addEventListener("touchend", this._block, !1), document.addEventListener("touchcancel", this._block, !1)
}
}, {
key: "componentWillUnmount",
value: function() {
this.stop(), document.removeEventListener("mousedown", this._unblock, !1), document.removeEventListener("mouseup", this._block, !1), document.removeEventListener("mousecancel", this._block, !1), document.removeEventListener("touchstart", this._unblock, !1), document.removeEventListener("touchend", this._block, !1), document.removeEventListener("touchcancel", this._block, !1)
}
}, {
key: "start",
value: function() {
var e = this;
if (!this._active) {
var t = this._ref.current;
this._paths = [], this._coord = null, this._opacities = Date.now(), this._ctx = t.getContext("2d"), this._ctx.strokeStyle = "rgb(".concat(this._color, ")"), this._ctx.lineCap = "round", window.requestAnimationFrame(this._animate), document.addEventListener("mousemove", this._move, !0), document.addEventListener("touchmove", this._move, !0), this._timer = setInterval((function() {
for (var t, r = 0; r < e._paths.length; r++)(t = e._paths[r]).nivel--, 0 === t.nivel && e._paths.splice(r--, 1);
for (var n = 0; n < e._pathsGeo.length; n++) 6 != (t = e._pathsGeo[n]).nivel && (t.nivel--, 0 === t.nivel && e._pathsGeo.splice(n--, 1));
e._opacities = Date.now()
}), 500), this._active = !0
}
}
}, {
key: "stop",
value: function() {
this._active && (this._active = !1, document.removeEventListener("mousemove", this._move, !0), document.removeEventListener("touchmove", this._move, !0), this._timer && clearInterval(this._timer))
}
}, {
key: "render",
value: function() {
return Object(n.jsxs)(n.Fragment, {
children: [Object(n.jsx)("canvas", {
ref: this._ref,
width: this.props.width * this.props.density,
height: this.props.height * this.props.density,
className: a.a.dynamic([
["3798211712", [this.props.width, this.props.height]]
])
}), Object(n.jsx)(a.a, {
id: "3798211712",
dynamic: [this.props.width, this.props.height],
children: ["canvas.__jsx-style-dynamic-selector{position:absolute;cursor:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:".concat(this.props.width, "px;height:").concat(this.props.height, "px;}")]
})]
})
}
}]), r
}(x.a.Component);
var te = Object(M.c)(ee, (function(e) {
return {
scale: e.scale,
mobile: e.mobile
}
})),
re = r("TSYQ"),
ne = r.n(re),
oe = [
[R.Sb, "pen"],
[R.Pb, "ers"],
[R.Ub, "reb"],
[R.Ob, "ellb"],
[R.Tb, "rec"],
[R.Nb, "ell"],
[R.Rb, "lin"],
[R.Qb, "fil"]
];
var ie = function(e) {
return Object(n.jsxs)("div", {
className: "jsx-4206980828 " + (ne()("tools", {
disabled: e.disabled,
submenu: e.submenu
}) || ""),
children: [Object(n.jsxs)("div", {
className: "jsx-4206980828",
children: [oe.map((function(t) {
var r = Object(U.a)(t, 2),
o = r[0],
i = r[1];
return e.fillBlock && [R.Qb, R.Tb, R.Nb].includes(o) && !e.disabled ? Object(n.jsx)("div", {
className: "jsx-4206980828 " + (ne()("tool", "block", i, {
sel: o == e.value
}) || "")
}, o) : Object(n.jsx)("div", {
onClick: e.disabled ? null : function() {
return e.onChange(o)
},
className: "jsx-4206980828 " + (ne()("tool", i, {
sel: o == e.value
}) || "")
}, o)
})), Object(n.jsx)("div", {
onClick: function() {
return e.onUndo()
},
className: "jsx-4206980828 tool undo"
}), Object(n.jsx)("div", {
onClick: function() {
return e.onRedo()
},
className: "jsx-4206980828 tool redo"
})]
}), Object(n.jsx)(a.a, {
id: "2569901839",
children: [".tools.jsx-4206980828{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".tools.jsx-4206980828>div.jsx-4206980828{padding:8px;width:106px;height:298px;border-radius:9px;border:2px rgba(255,142,175,.0) solid;background-color:rgba(94,25,51,.5);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;}", ".tool.jsx-4206980828{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;position:relative;cursor:pointer;width:46px;height:50px;border:2px rgba(255,142,175,0.6) solid;border-radius:5px;margin:0 0 7px;}", ".tool.jsx-4206980828:hover{border-color:rgba(255,142,175,1);}", ".tool.jsx-4206980828:hover.jsx-4206980828:after{color:rgba(255,142,175,1);}", ".tool.jsx-4206980828:hover.jsx-4206980828:before{background-color:rgba(216,216,216,.15);}", ".tool.jsx-4206980828:before{content:'';margin:2px;-webkit-flex:1;-ms-flex:1;flex:1;border-radius:3px;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;}", ".tool.block.jsx-4206980828{opacity:.5;}", ".tool.sel.jsx-4206980828,.tool.jsx-4206980828:active{border-color:#FFF;}", ".sel.jsx-4206980828:before,.sel.jsx-4206980828:hover.jsx-4206980828:before,.tool.jsx-4206980828:active.jsx-4206980828:before{background-color:rgba(216,216,216,.5);}", ".tool.sel.jsx-4206980828:after,.tool.sel.jsx-4206980828:hover.jsx-4206980828:after,.tool.jsx-4206980828:active.jsx-4206980828:after{color:#FFF;}", ".tool.jsx-4206980828:after{position:absolute;font-family:ico;font-size:25px;color:rgba(255,142,175,0.6);}", ".undo.jsx-4206980828,.redo.jsx-4206980828{margin:0;}", ".pen.jsx-4206980828:after{font-size:29px;content:'\\e905';}", ".ers.jsx-4206980828:after{font-size:30px;content:'\\e903';}", ".lin.jsx-4206980828:after{font-size:30px;content:'\\e902';}", ".reb.jsx-4206980828:after{content:'\\e90a';}", ".ellb.jsx-4206980828:after{content:'\\e90c';}", ".rec.jsx-4206980828:after{content:'\\e909';}", ".ell.jsx-4206980828:after{content:'\\e90b';}", ".fil.jsx-4206980828:after{font-size:29px;content:'\\e904';}", ".undo.jsx-4206980828:after{content:'\\e901';}", ".redo.jsx-4206980828:after{content:'\\e900';}", ".disabled.jsx-4206980828>div.jsx-4206980828{background-color:rgba(94,25,51,.4);border-color:rgba(255,142,175,.3);}", ".disabled.jsx-4206980828 .tool.jsx-4206980828,.disabled.jsx-4206980828 .tool.jsx-4206980828:hover{border-color:rgba(255,142,175,.3);background-color:rgba(255,142,175,.1) !important;cursor:initial;}", ".disabled.jsx-4206980828 .tool.jsx-4206980828:after,.disabled.jsx-4206980828 .tool.jsx-4206980828:hover.jsx-4206980828:after{color:rgba(255,142,175,.3);}", ".disabled.jsx-4206980828 .tool.sel.jsx-4206980828:before,.disabled.jsx-4206980828 .tool.jsx-4206980828:active.jsx-4206980828:before,.disabled.jsx-4206980828 .tool.jsx-4206980828:hover.jsx-4206980828:before{display:none;}", "@media (max-width:640px){.tools.jsx-4206980828{position:absolute;bottom:85px;left:0;display:none;}.tools.submenu.jsx-4206980828{display:inherit;}.tools.jsx-4206980828>div.jsx-4206980828{padding:5px;width:96px;height:254px;border-width:0;background:transparent;}.tool.jsx-4206980828{width:42px;height:44px;border:2px #9C81CB solid;border-radius:4px;margin:0 0 3px;}.tool.jsx-4206980828:before{margin:1px;background-color:rgba(255,255,255,.75);}.tool.jsx-4206980828:after{color:#9C81CB;}.tool.jsx-4206980828:hover{border-color:#9C81CB;}.tool.jsx-4206980828:hover.jsx-4206980828:after{color:#FFF;}.tool.jsx-4206980828:hover.jsx-4206980828:before{background-color:rgba(156,129,203,.8);}.tool.sel.jsx-4206980828,.tool.jsx-4206980828:active{border-color:#9C81CB;}.sel.jsx-4206980828:before,.sel.jsx-4206980828:hover.jsx-4206980828:before,.tool.jsx-4206980828:active.jsx-4206980828:before{background-color:rgba(156,129,203,.8);}.tool.sel.jsx-4206980828:after,.tool.sel.jsx-4206980828:hover.jsx-4206980828:after,.tool.jsx-4206980828:active.jsx-4206980828:after{color:#FFF;}}"]
}), Object(n.jsx)(a.a, {
id: "3185328314",
children: ["@media (max-width:640px){.ar .tools{left:initial;right:0;}}"]
})]
})
},
se = ["#000000", "#666666", "#0050CD", "#FFFFFF", "#AAAAAA", "#26C9FF", "#017420", "#691506", "#964112", "#11B03C", "#FF0013", "#FF7829", "#B0701C", "#99004E", "#CB5A57", "#FFC126", "#FF008F", "#FEAFA8"];
var ae = function(e) {
var t = e.value,
r = e.disabled,
o = e.onChange;
return Object(n.jsxs)("div", {
className: "jsx-3071142060 " + (ne()("colors", {
disabled: r
}) || ""),
children: [Object(n.jsxs)("div", {
className: "jsx-3071142060",
children: [se.map((function(e) {
return Object(n.jsx)("div", {
style: {
backgroundColor: e
},
onClick: r ? null : function() {
return o(e)
},
className: "jsx-3071142060 " + (ne()("color", {
sel: e == t
}) || "")
}, e)
})), Object(n.jsx)("input", {
disabled: r,
type: "color",
value: r ? "#AF3B4E" : t,
onChange: function(e) {
return o(e.target.value)
},
className: "jsx-3071142060"
})]
}), Object(n.jsx)(a.a, {
id: "3071142060",
children: [".colors.jsx-3071142060{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".colors.jsx-3071142060>div.jsx-3071142060{padding:10px 8px;width:106px;height:296px;border-radius:9px;background-color:rgba(94,25,51,.5);border:2px rgba(94,25,51,0) solid;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;}", ".color.jsx-3071142060{border:2px solid #4F163A;width:28px;height:29px;border-radius:4px;cursor:pointer;margin:0 0 7px;}", "input.jsx-3071142060{border:2px solid #4F163A;border-radius:5px;width:102px;height:52px;padding:0;-webkit-appearance:none;cursor:pointer;background:none;}", 'input[type="color"].jsx-3071142060::-webkit-color-swatch-wrapper{padding:0;border-radius:4px;}', 'input[type="color"].jsx-3071142060::-webkit-color-swatch{border:none;border-radius:4px;}', ".disabled.jsx-3071142060>div.jsx-3071142060{background-color:rgba(94,25,51,.4);border-color:rgba(255,142,175,.3);}", ".disabled.jsx-3071142060 .color.jsx-3071142060{border-color:rgba(255,142,175,.3);background-color:rgba(255,142,175,.1) !important;cursor:initial;}", "input.jsx-3071142060:disabled{cursor:initial;border-color:rgba(255,142,175,.3);}", "@media (max-width:640px){input.jsx-3071142060{display:none;}.colors.jsx-3071142060{overflow:scroll;margin:0 5px;width:124px;height:52px;border-radius:4px;background-color:rgba(94,25,51,.5);border:2px rgba(94,25,51,0) solid;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}.disabled.jsx-3071142060{background-color:rgba(94,25,51,.4);border-color:rgba(255,142,175,.3);}.disabled.jsx-3071142060>div.jsx-3071142060{background-color:transparent;border-color:transparent;}.colors.jsx-3071142060>div.jsx-3071142060{width:217px;height:auto;background-color:transparent;padding:0;border-radius:0;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;}.color.jsx-3071142060{border:1px solid #4F163A;width:18px;height:18px;border-radius:2px;margin:2px;}.sel.jsx-3071142060{box-shadow:0 0 0 1px rgba(255,255,255,.6);}.disabled.jsx-3071142060>div.jsx-3071142060 .sel.jsx-3071142060{box-shadow:none;}}"]
})]
})
},
ce = [2, 6, 10, 14, 18];
var le = function(e) {
return Object(n.jsxs)("div", {
className: "jsx-340028725 " + (ne()("options", {
disabled: e.disabled,
submenu: e.submenu
}) || ""),
children: [Object(n.jsx)("div", {
className: "jsx-340028725",
children: [ce.map((function(t) {
return Object(n.jsx)("div", {
onClick: e.disabled ? null : function() {
document.getElementsByClassName("thikness-input")[0].value=t;
return e.onChangeThickness(t)
},
className: "jsx-340028725 " + (ne()("thickness", {
sel: e.thickness == t
}) || "")
}, t)
})), Object(n.jsx)("input", {
maxLength: 3,
type: "text",
onChange: function(t) {
if (t.target.value>500){t.target.value=500;}
if (t.target.value=="00" || t.target.value=="000"){t.target.value=0;}
t.target.value = t.target.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1')
return e.onChangeThickness(t.target.value);
},
className: "thikness-input"
})]
}), Object(n.jsxs)("div", {
className: "jsx-340028725 bxopacity",
children: [Object(n.jsx)("span", {
className: "jsx-340028725"
}), Object(n.jsx)("input", {
disabled: e.disabled,
type: "range",
value: e.opacity,
min: "0.1",
max: "1",
step: "0.1",
onChange: function(t) {
return e.onChangeOpacity(t.target.value)
},
className: "jsx-340028725"
}), Object(n.jsx)("span", {
className: "jsx-340028725"
})]
}), Object(n.jsx)(a.a, {
id: "2464861888",
children: [".options.jsx-340028725{width:560px;height:54px;padding:3px;border-radius:9px;background-color:rgba(94,25,51,.5);border:2px rgba(94,25,51,0) solid;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}", ".options.jsx-340028725>div.jsx-340028725{padding:0 15px;-webkit-flex:1;-ms-flex:1;flex:1;border:2px rgba(255,142,175,.6) solid;border-radius:9px;margin:4px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".thickness.jsx-340028725{cursor:pointer;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:2px rgba(255,142,175,0.6) solid;width:28px;height:28px;border-radius:100%;}", ".thickness.jsx-340028725:hover{border-color:rgba(255,142,175,1);}", ".thickness.jsx-340028725:hover.jsx-340028725:before{background-color:rgba(255,142,175,1);}", ".thickness.jsx-340028725:hover.jsx-340028725:after{background-color:rgba(216,216,216,.15);}", ".thickness.jsx-340028725:before{position:absolute;content:'';background-color:rgba(255,142,175,0.6);border-radius:100%;}", ".thickness.jsx-340028725:after{content:'';margin:2px;-webkit-flex:1;-ms-flex:1;flex:1;border-radius:3px;-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;border-radius:50%;}", ".thickness.sel.jsx-340028725,.thickness.sel.jsx-340028725:hover{border-color:#FFF;}", ".thickness.sel.jsx-340028725:before,.thickness.sel.jsx-340028725:hover.jsx-340028725:before{background-color:#FFF;}", ".thickness.sel.jsx-340028725:after,.thickness.sel.jsx-340028725:hover.jsx-340028725:after{background-color:rgba(216,216,216,.5);}", ".thickness.jsx-340028725:nth-child(1):before{width:2px;height:2px;}", ".thickness.jsx-340028725:nth-child(2):before{width:6px;height:6px;}", ".thickness.jsx-340028725:nth-child(3):before{width:10px;height:10px;}", ".thickness.jsx-340028725:nth-child(4):before{width:14px;height:14px;}", ".thickness.jsx-340028725:nth-child(5):before{width:18px;height:18px;}", ".bxopacity.jsx-340028725 span.jsx-340028725{width:18px;height:18px;border:2px #FFF solid;border-radius:50%;}", ".bxopacity.jsx-340028725 span.jsx-340028725:nth-of-type(1){background-color:rgba(255,255,255,.34);}", ".bxopacity.jsx-340028725 span.jsx-340028725:nth-of-type(2){background-color:#FFF;}", "input[type=range].jsx-340028725{background:none;-webkit-appearance:none;width:170px;}", "input[type=range].jsx-340028725:focus{outline:none;}", "input[type=range].jsx-340028725::-webkit-slider-runnable-track{width:100%;height:5px;cursor:pointer;-webkit-animate:0.2s-jsx-340028725;animate:0.2s-jsx-340028725;box-shadow:0px 0px 0px #000000;background:#4F163A;border-radius:5px;border:0px solid #000000;}", "input[type=range].jsx-340028725:disabled.jsx-340028725::-webkit-slider-runnable-track{background:rgba(255,142,175,.3);}", "input[type=range].jsx-340028725::-webkit-slider-thumb{border:none;height:20px;width:20px;border-radius:50px;background:#E16D8F;cursor:pointer;-webkit-appearance:none;margin-top:-8px;}", "input[type=range].jsx-340028725:hover.jsx-340028725::-webkit-slider-thumb{background:#F8A8BF;}", "input[type=range].jsx-340028725:disabled.jsx-340028725::-webkit-slider-thumb{display:none;}", "input[type=range].jsx-340028725:focus.jsx-340028725::-webkit-slider-runnable-track{background:#4F163A;}", "input[type=range].jsx-340028725::-moz-range-track{width:100%;height:5px;cursor:pointer;-webkit-animate:0.2s-jsx-340028725;animate:0.2s-jsx-340028725;box-shadow:0px 0px 0px #000000;background:#4F163A;border-radius:5px;border:0px solid #000000;}", "input[type=range].jsx-340028725:disabled.jsx-340028725::-moz-range-track{background:rgba(255,142,175,.3);}", "input[type=range].jsx-340028725::-moz-range-thumb{border:none;height:20px;width:20px;border-radius:50px;background:#E16D8F;cursor:pointer;}", "input[type=range].jsx-340028725:hover.jsx-340028725::-moz-range-thumb{background:#F8A8BF;}", "input[type=range].jsx-340028725:disabled.jsx-340028725::-moz-range-thumb{display:none;}", "input[type=range].jsx-340028725::-ms-track{width:100%;height:5px;cursor:pointer;-webkit-animate:0.2s-jsx-340028725;animate:0.2s-jsx-340028725;background:transparent;border-color:transparent;color:transparent;}", "input[type=range].jsx-340028725::-ms-fill-lower{background:#4F163A;border:0px solid #000000;border-radius:10px;box-shadow:0px 0px 0px #000000;}", "input[type=range].jsx-340028725:disabled.jsx-340028725::-ms-fill-lower{background:rgba(255,142,175,.3);}", "input[type=range].jsx-340028725::-ms-fill-upper{background:#4F163A;border:0px solid #000000;border-radius:10px;box-shadow:0px 0px 0px #000000;}", "input[type=range].jsx-340028725::-ms-thumb{border:none;height:20px;width:20px;border-radius:50px;background:#E16D8F;cursor:pointer;}", "input[type=range].jsx-340028725:hover.jsx-340028725::-ms-thumb{background:#F8A8BF;}", "input[type=range].jsx-340028725:disabled.jsx-340028725::-ms-thumb{display:none;}", "input[type=range].jsx-340028725:focus.jsx-340028725::-ms-fill-lower{background:#4F163A;}", "input[type=range].jsx-340028725:focus.jsx-340028725::-ms-fill-upper{background:#4F163A;}", ".disabled.jsx-340028725{background-color:rgba(94,25,51,.4);border-color:rgba(255,142,175,.3);}", ".disabled.jsx-340028725>div.jsx-340028725,.disabled.jsx-340028725 .thickness.jsx-340028725,.disabled.jsx-340028725 .thickness.jsx-340028725:hover{cursor:initial;border-color:rgba(255,142,175,.3);}", ".disabled.jsx-340028725 .thickness.sel.jsx-340028725:after,.disabled.jsx-340028725 .thickness.sel.jsx-340028725:hover.jsx-340028725:after,.disabled.jsx-340028725 .thickness.jsx-340028725:hover.jsx-340028725:after{display:none;}", ".disabled.jsx-340028725 .thickness.jsx-340028725:before,.disabled.jsx-340028725 .thickness.jsx-340028725:hover.jsx-340028725:before{background-color:rgba(255,142,175,.3);}", ".disabled.jsx-340028725 .bxopacity.jsx-340028725 span.jsx-340028725{border-color:rgba(255,142,175,0);background-color:rgba(255,142,175,.3);}", ".disabled.jsx-340028725 .bxopacity.jsx-340028725 span.jsx-340028725:nth-of-type(1){border-color:rgba(255,142,175,.3);background-color:rgba(255,142,175,0);}", "@media (max-width:640px){.options.jsx-340028725{width:90px;height:197px;border-radius:0;border-width:0;background:transparent;display:none;}.options.submenu.jsx-340028725{display:inherit;}.options.jsx-340028725>div.jsx-340028725{background-color:rgba(255,255,255,.75);padding:5px;border-color:#9C81CB;border-radius:5px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:calc(100% - 10px);margin:0 4px;}.thickness.jsx-340028725{border-color:#9C81CB;width:26px;height:26px;}.thickness.jsx-340028725:before{background-color:#9C81CB;}.thickness.jsx-340028725:hover{border-color:#9C81CB;}.thickness.jsx-340028725:hover.jsx-340028725:before{background-color:#9C81CB;}.thickness.jsx-340028725:hover.jsx-340028725:after{background-color:rgba(156,129,203,.7);}.thickness.sel.jsx-340028725,.thickness.sel.jsx-340028725:hover{border-color:#9C81CB;}.thickness.sel.jsx-340028725:before,.thickness.sel.jsx-340028725:hover.jsx-340028725:before{background-color:#9C81CB;}.thickness.sel.jsx-340028725:after,.thickness.sel.jsx-340028725:hover.jsx-340028725:after{background-color:rgba(156,129,203,.7);}.bxopacity.jsx-340028725{width:30px;}.bxopacity.jsx-340028725 span.jsx-340028725{border-color:#9C81CB;}.bxopacity.jsx-340028725 span.jsx-340028725:nth-of-type(1){background-color:#9C81CB;}.bxopacity.jsx-340028725 span.jsx-340028725:nth-of-type(2){background-color:transparent;}input[type=range].jsx-340028725{width:120px;-webkit-transform:rotateZ(-90deg);-ms-transform:rotateZ(-90deg);transform:rotateZ(-90deg);}input[type=range].jsx-340028725::-webkit-slider-runnable-track{background:#9C81CB;}input[type=range].jsx-340028725::-webkit-slider-thumb{border:2px #9C81CB solid;background:#FFF;}input[type=range].jsx-340028725:hover.jsx-340028725::-webkit-slider-thumb{background:#9C81CB;}}"]
}), Object(n.jsx)(a.a, {
id: "4060568284",
children: ["@media (max-width:640px){.ar .options .bxopacity span:nth-of-type(1){background-color:transparent;}.ar .options .bxopacity span:nth-of-type(2){background-color:#9C81CB;}}"]
})]
})
},
xe = r("cXB8"),
pe = r("6VPp"),
de = r("umcP"),
be = r("WZCv");
var ue = function(e) {
return Object(n.jsxs)("div", {
className: "jsx-1759433088 toolsmobile",
children: [Object(n.jsx)("button", {
onClick: function() {
return e.onChange(R.Hb)
},
disabled: e.disabled,
className: "jsx-1759433088 " + ("tool " + ["pen", "ers", "lin", "reb", "ellb", "rec", "ell", "fil"][e.value - 1] || !1)
}), Object(n.jsx)("button", {
onClick: function() {
return e.onChange(R.Gb)
},
disabled: e.disabled,
className: "jsx-1759433088 opacity"
}), e.children, Object(n.jsx)(a.a, {
id: "241478012",
children: [".toolsmobile.jsx-1759433088{-webkit-align-self:stretch;-ms-flex-item-align:stretch;align-self:stretch;padding:10px 5px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", "button.jsx-1759433088{margin:0 0 0 5px;width:50px;height:52px;border-radius:3px;background:#FFFFFF;border:none;box-shadow:0 3px 0 #CBC6D8;color:#481D92;}", "button.jsx-1759433088:active{-webkit-transform:translateY(2px);-ms-transform:translateY(2px);transform:translateY(2px);background-color:#C2AEE3;box-shadow:0 1px 0 #CBC6D8;}", "button.jsx-1759433088:disabled{opacity:.47;cursor:none;}", "button.jsx-1759433088:nth-of-type(1){margin:0;}", ".toolsmobile.jsx-1759433088>.small{width:50px;height:52px;border-radius:3px;background:#FFFFFF;border:none;box-shadow:0 3px 0 #CBC6D8;padding:0;}", ".toolsmobile.jsx-1759433088>.small:active{margin:0;-webkit-transform:translateY(2px);-ms-transform:translateY(2px);transform:translateY(2px);background-color:#C2AEE3;box-shadow:0 1px 0 #CBC6D8;}", ".toolsmobile.jsx-1759433088>.small strong{display:none;}", ".toolsmobile.jsx-1759433088>.small .pencil{width:27px;height:28px;background-image:url(/images/edit_m.svg);}", ".toolsmobile.jsx-1759433088>.small .ready{width:27px;height:22px;background-image:url(/images/check_m.svg);}", ".opacity.jsx-1759433088:before{content:'\\e913';font-family:ico;font-size:30px;}", ".tool.jsx-1759433088:after{font-family:ico;font-size:25px;}", ".pen.jsx-1759433088:after{font-size:29px;content:'\\e905';}", ".ers.jsx-1759433088:after{font-size:30px;content:'\\e903';}", ".lin.jsx-1759433088:after{font-size:30px;content:'\\e902';}", ".reb.jsx-1759433088:after{content:'\\e90a';}", ".ellb.jsx-1759433088:after{content:'\\e90c';}", ".rec.jsx-1759433088:after{content:'\\e909';}", ".ell.jsx-1759433088:after{content:'\\e90b';}", ".fil.jsx-1759433088:after{font-size:29px;content:'\\e904';}"]
}), Object(n.jsx)(a.a, {
id: "3760199605",
children: [".ar .toolsmobile button{margin:0;}", ".ar .toolsmobile button:nth-of-type(2){margin-right:5px;}"]
})]
})
};
function fe() {
var e = Object(o.a)(["drawtxt4"]);
return fe = function() {
return e
}, e
}
function he() {
var e = Object(o.a)(["drawtxt3"]);
return he = function() {
return e
}, e
}
function me() {
var e = Object(o.a)(["drawtxt2"]);
return me = function() {
return e
}, e
}
function ge() {
var e = Object(o.a)(["drawtxt1"]);
return ge = function() {
return e
}, e
}