diff --git a/js/file-selector.js b/js/file-selector.js index 2f85ed40..b49eaf39 100644 --- a/js/file-selector.js +++ b/js/file-selector.js @@ -6,6 +6,8 @@ * $config['additional_javascript'][] = 'js/ajax.js'; * $config['additional_javascript'][] = 'js/file-selector.js'; */ + +var FileSelector = {}; function init_file_selector(max_images) { // Temporarily block iOS @@ -52,7 +54,7 @@ var files = []; $('#upload_file').remove(); // remove the original file selector $('.dropzone-wrap').css('user-select', 'none').show(); // let jquery add browser specific prefix -function addFile(file) { +FileSelector.addFile = function addFile(file) { if (files.length == max_images) return; @@ -60,7 +62,8 @@ function addFile(file) { addThumb(file); } -function removeFile(file) { +FileSelector.removeFile = function removeFile(file) { + getThumbElement(file).remove(); files.splice(files.indexOf(file), 1); } @@ -138,7 +141,7 @@ var dropHandlers = { var fileList = e.originalEvent.dataTransfer.files; for (var i=0; i 0) { for (var i=0; i + Tegaki + + x + + + + + + + `); + + document.getElementById('tegaki-start').addEventListener('click', startTegaki); +} + +function afterDraw(blob) { + const edit = document.getElementById('tegaki-edit'); + const clear = document.getElementById('tegaki-clear'); + const start = document.getElementById('tegaki-start'); + + toggleButtonState(clear, true); + toggleButtonState(edit, true); + toggleButtonState(start, false, true); + + edit.addEventListener('click', () => { + clearTegaki(blob); + startTegaki(); + }); + + clear.addEventListener('click', () => { + clearTegaki(blob); + }); +} + +function startTegaki() { + if (typeof Tegaki === 'undefined') { + console.error('Tegaki library is not loaded.'); + return; + } + + Tegaki.open({ + onDone: () => { + Tegaki.flatten().toBlob((blob) => { + const tmp = new File([blob], "Tegaki.png", { type: 'image/png' }); + + if (typeof FileSelector !== 'undefined' && FileSelector.addFile) { + FileSelector.addFile(tmp); + } else { + const fileInput = document.getElementById('upload_file'); + const dataTransfer = new DataTransfer(); + dataTransfer.items.add(tmp); + fileInput.files = dataTransfer.files; + } + + afterDraw(tmp); + }, 'image/png'); + }, + onCancel: () => { + console.log('Closing...'); + }, + width: document.getElementById('width-tegaki')?.value.trim() || '800', + height: document.getElementById('height-tegaki')?.value.trim() || '800' + }); +} + +if (typeof jQuery !== 'undefined') { + $(document).on('ajax_after_post', () => { + clearTegaki(); + }); +} + +onReady(initializeTegaki); diff --git a/js/tegaki/tegaki.css b/js/tegaki/tegaki.css new file mode 100644 index 00000000..31b14a36 --- /dev/null +++ b/js/tegaki/tegaki.css @@ -0,0 +1,670 @@ +/*! Contains fonts from Font Awesome (Copyright (C) 2016 by Dave Gandy), Entypo (Copyright (C) 2012 by Daniel Bruce) */ +@font-face { + font-family: 'tegaki'; + src: url('data:application/octet-stream;base64,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') format('woff'); + font-weight: normal; + font-style: normal; +} + +.tegaki-icon:before { + font-family: 'tegaki'; + font-style: normal; + font-weight: normal; + speak: none; + display: inline-block; + text-align: center; + font-variant: normal; + text-transform: none; + line-height: 1em; +} + +.tegaki-cancel:before { content: '\e800'; } /* '' */ +.tegaki-plus:before { content: '\e801'; } /* '' */ +.tegaki-minus:before { content: '\e802'; } /* '' */ +.tegaki-pen:before { content: '\e803'; } /* '' */ +.tegaki-down-open:before { content: '\e804'; } /* '' */ +.tegaki-up-open:before { content: '\e805'; } /* '' */ +.tegaki-level-down:before { content: '\e806'; } /* '' */ +.tegaki-pencil:before { content: '\e807'; } /* '' */ +.tegaki-play:before { content: '\e808'; } /* '' */ +.tegaki-bucket:before { content: '\e809'; } /* '' */ +.tegaki-pause:before { content: '\e80a'; } /* '' */ +.tegaki-blur:before { content: '\e80b'; } /* '' */ +.tegaki-to-start:before { content: '\e80c'; } /* '' */ +.tegaki-watercolor:before { content: '\e80d'; } /* '' */ +.tegaki-tone:before { content: '\e80e'; } /* '' */ +.tegaki-airbrush:before { content: '\e80f'; } /* '' */ +.tegaki-fast-fw:before { content: '\e810'; } /* '' */ +.tegaki-fast-bw:before { content: '\e811'; } /* '' */ +.tegaki-left-open:before { content: '\e812'; } /* '' */ +.tegaki-right-open:before { content: '\e813'; } /* '' */ +.tegaki-eraser:before { content: '\f12d'; } /* '' */ +.tegaki-pipette:before { content: '\f1fb'; } /* '' */ + +.tegaki-disabled, +.tegaki-disabled::after, +.tegaki-disabled::before { + opacity: 0.45; +} + +.tegaki-hidden { + display: none !important; +} + +.tegaki-invis { + visibility: hidden !important; + width: 0 !important; + height: 0 !important; +} + +.tegaki-replay-mode #tegaki-tools-cnt, +.tegaki-replay-mode #tegaki-toolmode-bar, +.tegaki-replay-mode .tegaki-ctrlgrp, +.tegaki-replay-mode .tegaki-layers-cell, +.tegaki-replay-mode #tegaki-layers-ctrl { + pointer-events: none; +} + +.tegaki-replay-mode #tegaki-ctrlgrp-zoom, +.tegaki-replay-mode #tegaki-ctrlgrp-layers { + pointer-events: auto; +} + +#tegaki { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-color: #a3b1bf; + color: #222; + font-family: arial, sans-serif; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + z-index: 9999; + display: grid; + grid-template-columns: 40px 1fr 160px; + grid-template-rows: 24px 1fr 18px; + grid-gap: 2px; +} + +#tegaki input { + color: inherit; +} + +#tegaki > div { + background-color: #8d99a6; +} + +#tegaki-menu-cnt { + grid-area: 1 / 1 / 2 / 4; + white-space: nowrap; + overflow: hidden; + display: flex; +} + +#tegaki-tools-cnt { + grid-area: 2 / 1 / 4 / 2; + padding: 4px; +} + +#tegaki-canvas-cnt { + grid-area: 2 / 2 / 3 / 3; + overflow: auto; + display: flex; +} + +#tegaki-ctrl-cnt { + grid-area: 2 / 3 / 4 / 4; + padding: 6px; + overflow: hidden auto; +} + +#tegaki-status-cnt { + grid-area: 3 / 2 / 4 / 3; + line-height: 18px; + display: flex; +} + +#tegaki-status-cnt > div { + padding: 0 4px; +} + +#tegaki-status-replay { + color: #a61930; +} + +#tegaki-status-output { + font-size: 11px; + font-weight: bold; +} + +#tegaki-status-version { + color: #adbdcc; + font-size: 11px; + margin-left: auto; +} + +#tegaki-menu-bar { + font-size: 12px; + padding-left: 4px; + padding-right: 18px; + border-right: 2px solid #a3b1bf; +} + +.tegaki-replay-mode #tegaki-menu-bar { + padding-right: 4px; +} + +.tegaki-menu-lbl { + margin: 0 2px; + vertical-align: middle; +} + +#tegaki-replay-controls { + padding-right: 10px; + padding-left: 10px; + border-right: 2px solid #a3b1bf; + font-size: 11px; +} + +#tegaki-replay-timeline { + display: inline-block; + width: 100px; + height: 24px; + margin: 0 4px; + border-left: 1px solid #a3b1bf; + border-right: 1px solid #a3b1bf; + /*background-color: rgba(0, 0, 0, 0.25);*/ +} + +#tegaki-replay-timeline-fill { + display: inline-block; + width: 36px; + height: 100%; + background-color: #a3b1bf; +} + +#tegaki-replay-controls > span { + vertical-align: middle; +} + +#tegaki-replay-controls .tegaki-ui-cb-w { + margin-right: 4px; +} + +#tegaki-replay-speed-lbl { + width: 28px; + display: inline-block; + text-align: center; +} + +#tegaki-replay-speed-lbl::before { + content: '×'; +} + +#tegaki-replay-now-lbl, +#tegaki-replay-end-lbl { + display: inline-block; + max-width: 50px; + min-width: 30px; + overflow: hidden; + text-align: center; + margin: 0 4px; +} + +#tegaki-toolmode-bar { + font-size: 11px; + margin-left: 4px; + line-height: 24px; +} + +.tegaki-toolmode-lbl { + margin-right: 6px; +} + +.tegaki-toolmode-lbl::after { + content: ':'; +} + +.tegaki-toolmode-grp { + border-left: 1px solid #a3b1bf; + padding: 0 18px; +} + +#tegaki canvas { + image-rendering: optimizeSpeed; + image-rendering: -moz-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: pixelated; + -ms-interpolation-mode: nearest-neighbor; +} + +.tegaki-tool-active { + color: #f2f3f4; +} + +.tegaki-tool-btn { + width: 32px; + height: 32px; + display: block; + margin: auto; +} + +.tegaki-tool-btn:hover { + background-color: rgba(0, 0, 0, 0.15); +} + +.tegaki-tool-btn:before { + font-size: 20px; + width: 32px; + height: 32px; + line-height: 32px; +} + +.tegaki-mb-btn { + cursor: default; + text-decoration: none; + display: inline-block; + padding: 0 6px; + word-spacing: -1px; + position: relative; + line-height: 24px; + height: 24px; +} + +.tegaki-mb-btn:hover:not(.tegaki-disabled), +.tegaki-ui-btn:hover:not(.tegaki-disabled) { + background-color: rgba(0, 0, 0, 0.10); +} + +.tegaki-sw-btn { + display: inline; + padding: 2px 6px; + margin: 0 2px; + box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(255, 255, 255, 0.15); +} + +.tegaki-sw-btn:hover:not(.tegaki-sw-btn-a) { + background-color: rgba(0, 0, 0, 0.05); +} + +.tegaki-sw-btn-a { + background-color: rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15), 1px 1px 0 rgba(255, 255, 255, 0.15); +} + +#tegaki-toolmode-bar .tegaki-mb-btn-a { + color: inherit; + background-color: rgba(0, 0, 0, 0.10); +} + +#tegaki-toolmode-bar .tegaki-mb-btn.tegaki-mb-btn-a:hover { + color: inherit; +} + +#tegaki-debug { + position: absolute; + left: 0; + top: 0; +} + +#tegaki-debug canvas { + width: 75px; + height: 75px; + display: block; + border: 1px solid black; +} + +.tegaki-backdrop { + overflow: hidden; +} + +.tegaki-hidden { + display: none !important; +} + +.tegaki-strike { + text-decoration: line-through; +} + +#tegaki-layers { + position: relative; + font-size: 0; + box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.25); + contain: content; +} + +#tegaki-layers canvas { + width: 100%; + height: 100%; +} + +#tegaki-layers:empty { + display: none; +} + +#tegaki-layers-wrap { + margin: auto; + padding: 50px; + pointer-events: none; +} + +#tegaki-layers canvas { + position: absolute; + left: 0; + top: 0; +} + +#tegaki-finish-btn { + font-weight: bold; +} + +#tegaki-cursor-layer { + position: absolute; + mix-blend-mode: difference; + touch-action: none; +} + +/* generic ui */ +.tegaki-alpha-bg, +.tegaki-alpha-bg-xs { + background-color: #fefefe; + background-image: + linear-gradient(45deg, #cacaca 25%, transparent 25%, transparent 75%, #cacaca 75%, #cacaca), + linear-gradient(45deg, #cacaca 25%, transparent 25%, transparent 75%, #cacaca 75%, #cacaca); +} + +.tegaki-alpha-bg { + background-size: 16px 16px; + background-position: 0 0, 8px 8px; +} + +.tegaki-alpha-bg-xs { + background-size: 6px 6px; + background-position: 0 0, 3px 3px; +} + +.tegaki-ellipsis { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.tegaki-ui-cb { + display: inline-block; + vertical-align: middle; + width: 10px; + height: 10px; + border: 1px solid #222; + cursor: default; + margin-right: 4px; +} + +.tegaki-ui-cb::after, +.tegaki-ui-cb-a::after { + display: block; + content: ' '; + width: 6px; + height: 6px; + margin-top: 2px; + margin-left: 2px; +} + +.tegaki-ui-cb-a::after { + background-color: #222; +} + +.tegaki-ui-cb-w:hover .tegaki-ui-cb::after, +.tegaki-ui-cb:hover::after { + background-color: #555; +} + +.tegaki-ui-ellipsis::after { + content: '...'; + letter-spacing: -1px; +} + +.tegaki-ui-borderless { + border: none; +} + +.tegaki-ui-btn { + display: inline-block; +} + +.tegaki-ui-btn:before { + height: 24px; + width: 24px; + line-height: 24px; + font-size: 14px; +} + +.tegaki-stealth-input { + border: 0; + margin: 0; + padding: 0; + background: none; +} + +.tegaki-stealth-input:hover:not(.tegaki-disabled) { + background-color: rgba(0, 0, 0, 0.1); +} + +.tegaki-range-lbl, +.tegaki-range-lbl-xs { + display: inline-block; + text-align: center; + vertical-align: top; +} + +.tegaki-range-lbl { + width: 28px; + font-size: 12px; + margin-left: 4px; +} + +.tegaki-range-lbl-xs { + width: 20px; + font-size: 10px; +} + +.tegaki-label-xs { + font-size: 10px; + vertical-align: top; +} + +.tegaki-lbl-c::after { + content: ':'; +} + +.tegaki-lbl-p::after { + content: '%'; + margin-left: 1px; +} + +.tegaki-drag-lbl:not(.tegaki-disabled) { + cursor: ew-resize; +} + +.tegaki-disabled .tegaki-drag-lbl { + cursor: auto; +} + +/* control groups */ +.tegaki-ctrlgrp { + margin-bottom: 10px; +} + +.tegaki-ctrlgrp:last-child { + margin-bottom: 0; +} + +.tegaki-ctrlgrp-title { + font-size: 12px; + font-weight: bold; + margin-bottom: 6px; + background-color: #a3b1bf; + padding: 1px 4px; +} + +.tegaki-ctrlrow { + font-size: 11px; +} + +.tegaki-ctrlrow:not(:last-child) { + margin-bottom: 6px; +} + +.tegaki-ctrl-range { + width: calc(100% - 34px); + padding: 0; + margin: 0; + height: 14px; +} + +/* zoom ctrl group */ +#tegaki-zoom-lbl { + display: inline-block; + font-size: 12px; + float: right; + height: 24px; + line-height: 24px; +} + +/* color ctrl group */ +#tegaki-color-ctrl { + display: flex; +} + +#tegaki-palette-switcher { + align-self: center; + margin-left: auto; +} + +.tegaki-color-grid { + display: grid; + grid-gap: 4px; + margin-top: 6px; +} + +.tegaki-color-grid-20 { + grid-template-columns: repeat(auto-fill, 20px); + grid-auto-rows: 20px; +} + +.tegaki-color-grid-15 { + grid-template-columns: repeat(auto-fill, 15px); + grid-auto-rows: 15px; +} + +.tegaki-color-btn { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); +} + +#tegaki-color, +#tegaki-colorpicker { + padding: 0; + border: 0; + display: block; + width: 28px; + height: 28px; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); +} + +/* layers ctrl group */ +#tegaki-ctrlgrp-layers { + position: relative; +} + +#tegaki-layers-opts { + height: 18px; + display: flex; +} + +#tegaki-layer-alpha-cell { + margin-left: auto; +} + +#tegaki-layers-ctrl { + margin-top: 4px; +} + +#tegaki-layers-grid { + height: 84px; + min-height: 84px; + overflow: auto; + background-color: #8d99a6; + display: flex; + flex-direction: column; + border: 1px solid #a3b1bf; + resize: vertical; +} + +.tegaki-layers-cell { + box-sizing: border-box; + box-shadow: 0 1px 0 0px #a3b1bf; + padding: 0; + height: 28px; + flex-shrink: 0; + overflow: hidden; + display: flex; + align-items: center; +} + +.tegaki-layers-cell-s, +.tegaki-layers-cell-a { + background-color: #a3b1bf7f; +} + +.tegaki-layers-cell-a { + font-weight: bold; +} + +.tegaki-layers-cell-v { + margin: 0 6px 0 4px; +} + +.tegaki-layers-cell-v .tegaki-ui-cb { + vertical-align: unset; + margin: 0; +} + +.tegaki-layers-cell-p { + margin-right: 6px; +} + +.tegaki-layers-cell-p canvas { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); + vertical-align: middle; +} + +.tegaki-layers-cell-s .tegaki-layers-cell-p canvas { + box-shadow: 0 0 0 1px rgba(0, 0, 0, 1.0); +} + +.tegaki-layers-cell-n { + font-size: 11px; + margin-right: 1px; + min-width: 20px; +} + +.tegaki-layers-cell-d { + box-shadow: inset 0 -2px 0 0 #000; + z-index: 2; +} + +#tegaki-layers-grid.tegaki-layers-cell-d { + box-shadow: 0 -2px 0 0px #000; +} + +#tegaki-layers-cell-dx { + position: absolute; + background: transparent; + width: 100%; + height: 32px; + margin-top: -32px; +} + diff --git a/js/tegaki/tegaki.min.js b/js/tegaki/tegaki.min.js new file mode 100644 index 00000000..ca8071ae --- /dev/null +++ b/js/tegaki/tegaki.min.js @@ -0,0 +1,5 @@ +/*! tegaki.js, MIT License */"use strict";var TegakiStrings={badDimensions:"Invalid dimensions.",promptWidth:"Canvas width in pixels",promptHeight:"Canvas height in pixels",confirmDelLayers:"Delete selected layers?",confirmMergeLayers:"Merge selected layers?",tooManyLayers:"Layer limit reached.",errorLoadImage:"Could not load the image.",noActiveLayer:"No active layer.",hiddenActiveLayer:"The active layer is not visible.",confirmCancel:"Are you sure? Your work will be lost.",confirmChangeCanvas:"Are you sure? Changing the canvas will clear all layers and history and disable replay recording.",color:"Color",size:"Size",alpha:"Opacity",flow:"Flow",zoom:"Zoom",layers:"Layers",switchPalette:"Switch color palette",paletteSlotReplace:"Right click to replace with the current color",layer:"Layer",addLayer:"Add layer",delLayers:"Delete layers",mergeLayers:"Merge layers",moveLayerUp:"Move up",moveLayerDown:"Move down",toggleVisibility:"Toggle visibility",newCanvas:"New",open:"Open",save:"Save",saveAs:"Save As","export":"Export",undo:"Undo",redo:"Redo",close:"Close",finish:"Finish",tip:"Tip",pressure:"Pressure",preserveAlpha:"Preserve Alpha",pen:"Pen",pencil:"Pencil",airbrush:"Airbrush",pipette:"Pipette",blur:"Blur",eraser:"Eraser",bucket:"Bucket",tone:"Tone",gapless:"Gapless",play:"Play",pause:"Pause",rewind:"Rewind",slower:"Slower",faster:"Faster",recordingEnabled:"Recording replay",errorLoadReplay:"Could not load the replay: ",loadingReplay:"Loading replay\u2026"};class TegakiTool{constructor(){this.id=0,this.name=null,this.keybind=null,this.useFlow=!1,this.useSizeDynamics=!1,this.useAlphaDynamics=!1,this.useFlowDynamics=!1,this.usePreserveAlpha=!1,this.step=0,this.size=1,this.alpha=1,this.flow=1,this.useSize=!0,this.useAlpha=!0,this.useFlow=!0,this.noCursor=!1,this.color="#000000",this.rgb=[0,0,0],this.brushSize=0,this.brushAlpha=0,this.brushFlow=0,this.stepSize=0,this.center=0,this.sizeDynamicsEnabled=!1,this.alphaDynamicsEnabled=!1,this.flowDynamicsEnabled=!1,this.preserveAlphaEnabled=!1,this.tip=-1,this.tipList=null,this.stepAcc=0,this.shapeCache=null,this.kernel=null}brushFn(e,t,a,i){}start(e,t){}commit(){}draw(e,t){}usesDynamics(){return this.useSizeDynamics||this.useAlphaDynamics||this.useFlowDynamics}enabledDynamics(){return this.sizeDynamicsEnabled||this.alphaDynamicsEnabled||this.flowDynamicsEnabled}setSize(e){this.size=e}setAlpha(e){this.alpha=e,this.brushAlpha=e}setFlow(e){this.flow=e,this.brushFlow=this.easeFlow(e)}easeFlow(e){return e}setColor(e){this.rgb=$T.hexToRgb(e)}setSizeDynamics(e){this.useSizeDynamics&&(e||this.setSize(this.size),this.sizeDynamicsEnabled=e)}setAlphaDynamics(e){this.useAlphaDynamics&&(e||this.setAlpha(this.alpha),this.alphaDynamicsEnabled=e)}setFlowDynamics(e){this.useFlowDynamics&&(e||this.setFlow(this.flow),this.flowDynamicsEnabled=e)}setPreserveAlpha(e){this.preserveAlphaEnabled=e}set(){this.setAlpha(this.alpha),this.setFlow(this.flow),this.setSize(this.size),this.setColor(Tegaki.toolColor),Tegaki.onToolChanged(this)}}class TegakiBrush extends TegakiTool{constructor(){super()}generateShape(e){}brushFn(e,t,a,i){var s,r,n,o,l,g,d,c,h,p,k,T,u,y,f,v,m,b,L,C,w,S,I,U,P,A,D,E,$;for($=this.preserveAlphaEnabled,g=this.kernel,D=this.brushAlpha,E=this.brushFlow,A=this.brushSize,s=Tegaki.activeLayer.imageData.data,r=Tegaki.ghostBuffer.data,n=Tegaki.blendBuffer.data,o=Tegaki.baseWidth,l=Tegaki.baseHeight,o,f=this.rgb[0],v=this.rgb[1],m=this.rgb[2],c=0;c=l))for(d=0;d=o||(T=g[4*(c*A+d)+3]/255)<=0||(y=n[(U=4*(p*o+h))+3]/255,y+=T*E*(D-y),(P=Math.ceil(255*y))>n[U+3]&&(0===n[U]&&(r[U]=s[U],r[U+1]=s[U+1],r[U+2]=s[U+2],r[U+3]=s[U+3]),n[U]=1,n[U+3]=P,w=r[U],S=r[U+1],I=r[U+2],b=(f*y+w*(k=r[U+3]/255)*(1-y))/(u=k+y-k*y),L=(v*y+S*k*(1-y))/u,C=(m*y+I*k*(1-y))/u,s[U]=f>w?Math.ceil(b):Math.floor(b),s[U+1]=v>S?Math.ceil(L):Math.floor(L),s[U+2]=m>I?Math.ceil(C):Math.floor(C),$||(s[U+3]=Math.ceil(255*u))))}generateShapeCache(e){var t,a;if(this.shapeCache||(this.shapeCache=new Array(Tegaki.maxSize)),!this.shapeCache[0]||e)for(t=0;tg?l:0!==g?-g:0)/2,0!==l&&(l=-l),m=!1,p=s,k=r;h+=Math.max(Math.abs(p-s),Math.abs(k-r)),p=s,k=r,h>=this.stepSize&&(this.enabledDynamics()?(v=T>0?1-Math.sqrt((e-s)*(e-s)+(t-r)*(t-r))/T:0,this.updateDynamics(v)&&(this.brushFn(s-this.center-n,r-this.center-o,n,o),m=!0)):(this.brushFn(s-this.center-n,r-this.center-o,n,o),m=!0),h=0),s!==e||r!==t;)(c=d)>l&&(d-=g,s+=a),c=i;)r[n+a-g+(n+i-g)*e]=o,r[n+i-g+(n+a-g)*e]=o,r[n-i+(n+a-g)*e]=o,r[n-a+(n+i-g)*e]=o,r[n-i+(n-a)*e]=o,r[n-a+(n-i)*e]=o,r[n+i-g+(n-a)*e]=o,r[n+a-g+(n-i)*e]=o,++i,t+=t<=0?2*i+1:2*(i- --a)+1;return l>0&&Tegaki.tools.bucket.fill(s,l,l,this.rgb,1),{center:l,stepSize:Math.ceil(e*this.step),brushSize:e,kernel:s.data}}}class TegakiAirbrush extends TegakiBrush{constructor(){super(),this.id=3,this.name="airbrush",this.keybind="a",this.step=.1,this.size=32,this.alpha=1,this.useSizeDynamics=!0,this.useAlphaDynamics=!0,this.useFlowDynamics=!0,this.usePreserveAlpha=!0}easeFlow(e){return 1-Math.sqrt(1-e)}generateShape(e){var t,a,i,s,r,n,o,l,g,d,c,h;for(a=e,e*=2,i=new ImageData(e,e).data,s=e*e*4,n=Math.sqrt(a*a),l=g=-(o=Math.round(a)),t=0;t=o?(l=-o,++g):(c=g,(d=l)<0&&(d=-d),c<0&&(c=-c),(r=Math.sqrt(d*d+c*c))>=n?h=0:0===r?h=255:((h=r/n+.1)>1&&(h=1),h=255*(1-Math.exp(1-1/h)/h)),i[t+3]=h,t+=4,++l);return{center:a,stepSize:Math.ceil(e*this.step),brushSize:e,kernel:i}}}class TegakiPen extends TegakiBrush{constructor(){super(),this.id=2,this.name="pen",this.keybind="p",this.step=.05,this.size=8,this.alpha=1,this.flow=1,this.useSizeDynamics=!0,this.useAlphaDynamics=!0,this.useFlowDynamics=!0,this.usePreserveAlpha=!0}easeFlow(e){return 1-Math.sqrt(1-Math.pow(e,3))}generateShape(e){var t,a,i,s,r,n,o,l,g,d,c,h,p,k,T,u,y,f;for(y=Math.floor(e/2)+1,c=(d=4)*d,h=(f=e+2)*d,l=Math.floor(h/2),g=Math.floor((h+1)%2),s=new ImageData(h,h),p=new Uint32Array(s.data.buffer),o=1426063360,a=l,i=0,t=1-l,n=l;a>=i;)p[n+a-g+(n+i-g)*h]=o,p[n+i-g+(n+a-g)*h]=o,p[n-i+(n+a-g)*h]=o,p[n-a+(n+i-g)*h]=o,p[n-i+(n-a)*h]=o,p[n-a+(n-i)*h]=o,p[n+i-g+(n-a)*h]=o,p[n+a-g+(n-i)*h]=o,++i,t+=t<=0?2*i+1:2*(i- --a)+1;for(o=4278190080,a=l-3,i=0,t=1-l,n=l;a>=i;)p[n+a-g+(n+i-g)*h]=o,p[n+i-g+(n+a-g)*h]=o,p[n-i+(n+a-g)*h]=o,p[n-a+(n+i-g)*h]=o,p[n-i+(n-a)*h]=o,p[n-a+(n-i)*h]=o,p[n+i-g+(n-a)*h]=o,p[n+a-g+(n-i)*h]=o,++i,t+=t<=0?2*i+1:2*(i- --a)+1;for(l>0&&Tegaki.tools.bucket.fill(s,l,l,this.rgb,1),p=s.data,r=new ImageData(f,f).data,a=0;a=0&&(l=4*(v+L),this.testPixel(C,l,k,g,d,c,h));)this.blendPixel(C,l,r,n,o,s),k[l]=1,y>=0&&(l=4*(m+L),this.testPixel(C,l,k,g,d,c,h)&&(p.push(L),p.push(y))),f=0&&(l=4*(m+L),this.testPixel(C,l,k,g,d,c,h)&&(p.push(L),p.push(y))),f=Tegaki.baseWidth||t>=Tegaki.baseHeight||(this.fill(Tegaki.activeLayer.imageData,e,t,this.rgb,this.alpha),Tegaki.activeLayer.ctx.putImageData(Tegaki.activeLayer.imageData,0,0))}blendPixel(e,t,a,i,s,r){var n,o,l,g,d,c,h,p;n=e[t],o=e[t+1],l=e[t+2],d=(a*r+n*(g=e[t+3]/255)*(1-r))/(p=g+r-g*r),c=(i*r+o*g*(1-r))/p,h=(s*r+l*g*(1-r))/p,e[t]=a>n?Math.ceil(d):Math.floor(d),e[t+1]=i>o?Math.ceil(c):Math.floor(c),e[t+2]=s>l?Math.ceil(h):Math.floor(h),e[t+3]=Math.ceil(255*p)}testPixel(e,t,a,i,s,r,n){return!a[t]&&e[t]==i&&e[++t]==s&&e[++t]==r&&e[++t]==n}start(e,t){this.brushFn(e,t)}draw(e,t){this.brushFn(e,t)}setSize(e){}}class TegakiTone extends TegakiPencil{constructor(){super(),this.id=5,this.name="tone",this.keybind="t",this.step=.01,this.useFlow=!1,this.size=8,this.alpha=.5,this.useSizeDynamics=!0,this.useAlphaDynamics=!0,this.usePreserveAlpha=!0,this.matrix=[[0,8,2,10],[12,4,14,6],[3,11,1,9],[15,7,13,5]],this.mapCache=null,this.mapWidth=0,this.mapHeight=0}start(e,t){this.mapWidth===Tegaki.baseWidth&&this.mapHeight===Tegaki.baseHeight||this.generateMapCache(!0),super.start(e,t)}brushFn(e,t,a,i){var s,r,n,o,l,g,d,c,h,p,k,T,u,y;if(s=Tegaki.activeLayer.imageData.data,u=Tegaki.baseWidth,y=Tegaki.baseHeight,r=this.kernel,n=this.brushSize,this.mapWidth,g=this.preserveAlphaEnabled,!((l=Math.round(16*this.brushAlpha)-1)<0))for(o=this.mapCache[l],p=0;p=y))for(h=0;h=u||0!==r[4*(p*n+h)+3]&&(d=4*(c=T*u+k),0===o[c]&&(s[d]=this.rgb[0],s[d+1]=this.rgb[1],s[d+2]=this.rgb[2],g||(s[d+3]=255)))}generateMap(e,t,a){var i,s,r;for(i=new Uint8Array(e*t),r=0;r=T))for(f=0;f=u||(S=4*(k*T+p),0===d[4*(f*r+y)+3]||p<=0||k<=0||p>=l||k>=g))){for(v=m=b=L=U=0,C=-1;C<2;++C)for(w=-1;w<2;++w)I=n[(s=4*((k-w)*T+(p-C)))+3],0===C&&0===w?(P=I*h,U+=h):(P=I*c,U+=c),v+=n[s]*P,m+=n[++s]*P,b+=n[++s]*P,L+=P;(L/=U)<=0||(o[S]=Math.round(v/U/L),o[S+1]=Math.round(m/U/L),o[S+2]=Math.round(b/U/L),o[S+3]=Math.round(L))}}}TegakiBlur.prototype.generateShape=TegakiPencil.prototype.generateShape;class TegakiEraser extends TegakiBrush{constructor(){super(),this.id=8,this.name="eraser",this.keybind="e",this.step=.1,this.size=8,this.alpha=1,this.useFlow=!1,this.useSizeDynamics=!0,this.useAlphaDynamics=!0,this.usePreserveAlpha=!1,this.tipId=0,this.tipList=["pencil","pen","airbrush"]}brushFn(e,t,a,i){var s,r,n,o,l,g,d,c,h,p,k,T,u,y,f;for(f=this.brushAlpha,y=this.brushSize,o=this.kernel,s=Tegaki.activeLayer.imageData.data,n=Tegaki.ghostBuffer.data,r=Tegaki.blendBuffer.data,l=Tegaki.baseWidth,g=Tegaki.baseHeight,k=0;k=g))for(p=0;p=l||(d=o[4*(k*y+p)+3]/255,0===n[h=4*(u*l+T)+3]&&(n[h]=s[h]),c=r[h]/255,c+=d*(f-c),r[h]=Math.floor(255*c),s[h]=Math.floor(n[h]*(1-c)))}generateShape(e){return 0===this.tipId?this.generateShapePencil(e):1===this.tipId?this.generateShapePen(e):this.generateShapeAirbrush(e)}}TegakiEraser.prototype.generateShapePencil=TegakiPencil.prototype.generateShape,TegakiEraser.prototype.generateShapePen=TegakiPen.prototype.generateShape,TegakiEraser.prototype.generateShapeAirbrush=TegakiAirbrush.prototype.generateShape;var $T={docEl:document.documentElement,id:function(e){return document.getElementById(e)},cls:function(e,t){return(t||document).getElementsByClassName(e)},on:function(e,t,a){e.addEventListener(t,a,!1)},off:function(e,t,a){e.removeEventListener(t,a,!1)},el:function(e){return document.createElement(e)},frag:function(){return document.createDocumentFragment()},copyImageData:e=>new ImageData(new Uint8ClampedArray(e.data),e.width),copyCanvas:function(e,t){var a;return t?a=e.cloneNode(!1):((a=$T.el("canvas")).width=e.width,a.height=e.height),a.getContext("2d").drawImage(e,0,0),a},clearCtx:function(e){e.clearRect(0,0,e.canvas.width,e.canvas.height)},hexToRgb:function(e){var t=e.match(/^#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})$/i);return t?[parseInt(t[1],16),parseInt(t[2],16),parseInt(t[3],16)]:null},RgbToHex:function(e,t,a){return"#"+((1<<24)+(e<<16)+(t<<8)+a).toString(16).slice(1)},getColorAt:function(e,t,a){var i=e.getImageData(t,a,1,1).data;return"#"+("0"+i[0].toString(16)).slice(-2)+("0"+i[1].toString(16)).slice(-2)+("0"+i[2].toString(16)).slice(-2)},generateFilename:function(){return"tegaki_"+(new Date).toISOString().split(".")[0].replace(/[^0-9]/g,"_")},sortAscCb:function(e,t){return e>t?1:et?-1:ea&&(i=a/e,e=a,t*=i),t>a&&(i=a/t,t=a,e*=i),[Math.ceil(e),Math.ceil(t)]}};class TegakiBinReader{constructor(e){this.pos=0,this.view=new DataView(e),this.buf=e}readInt8(){var e=this.view.getInt8(this.pos);return this.pos+=1,e}readUint8(){var e=this.view.getUint8(this.pos);return this.pos+=1,e}readInt16(){var e=this.view.getInt16(this.pos);return this.pos+=2,e}readUint16(){var e=this.view.getUint16(this.pos);return this.pos+=2,e}readUint32(){var e=this.view.getUint32(this.pos);return this.pos+=4,e}readFloat32(){var e=this.view.getFloat32(this.pos);return this.pos+=4,e}}class TegakiBinWriter{constructor(e){this.pos=0,this.view=new DataView(e),this.buf=e}writeInt8(e){this.view.setInt8(this.pos,e),this.pos+=1}writeUint8(e){this.view.setUint8(this.pos,e),this.pos+=1}writeInt16(e){this.view.setInt16(this.pos,e),this.pos+=2}writeUint16(e){this.view.setUint16(this.pos,e),this.pos+=2}writeUint32(e){this.view.setUint32(this.pos,e),this.pos+=4}writeFloat32(e){this.view.setFloat32(this.pos,e),this.pos+=4}}var TegakiCursor={size:0,radius:0,points:null,cursorCtx:null,offsetX:0,offsetY:0,lastX:0,lastY:0,lastSize:0,init:function(){var e;(e=$T.el("canvas")).id="tegaki-cursor-layer",[e.width,e.height]=TegakiCursor.getMaxCanvasSize(),Tegaki.canvasCnt.appendChild(e),this.offsetX=e.offsetLeft,this.offsetY=e.offsetTop,this.cursorCtx=e.getContext("2d")},getCanvas:function(){return this.cursorCtx?this.cursorCtx.canvas:null},getMaxCanvasSize:function(){let e=Tegaki.canvasCnt.offsetWidth,t=Tegaki.canvasCnt.offsetHeight,[a,i]=Tegaki.getScrollbarSizes();return[e-a,t-i]},updateCanvasSize:function(){let e=this.cursorCtx.canvas,[t,a]=this.getMaxCanvasSize();t===e.width&&a===e.height||(e.width=t,e.height=a,this.offsetX=e.offsetLeft,this.offsetY=e.offsetTop)},render:function(e,t){var a,i,s,r,n;for(a=e-this.offsetX-this.radius,i=t-this.offsetY-this.radius,this.clear(),this.lastX=a,this.lastY=i,this.lastSize=this.size,r=this.cursorCtx.createImageData(this.size,this.size),n=new Uint32Array(r.data.buffer),s=0;s=i;)o.push(s+a-n+(s+i-n)*e),o.push(s+i-n+(s+a-n)*e),o.push(s-i+(s+a-n)*e),o.push(s-a+(s+i-n)*e),o.push(s-i+(s-a)*e),o.push(s-a+(s-i)*e),o.push(s+i-n+(s-a)*e),o.push(s+a-n+(s-i)*e),++i,t+=t<=0?2*i+1:2*(i- --a)+1;return this.size=e,this.radius=r,this.points=o,!0}},TegakiHistory={maxSize:50,undoStack:[],redoStack:[],pendingAction:null,clear:function(){this.undoStack=[],this.redoStack=[],this.pendingAction=null,this.onChange(0)},push:function(e){e&&(e.coalesce&&this.undoStack[this.undoStack.length-1]instanceof e.constructor&&this.undoStack[this.undoStack.length-1].coalesce(e)||(this.undoStack.push(e),this.undoStack.length>this.maxSize&&this.undoStack.shift(),this.redoStack.length>0&&(this.redoStack=[]),this.onChange(0)))},undo:function(){var e;this.undoStack.length&&((e=this.undoStack.pop()).undo(),this.redoStack.push(e),this.onChange(-1))},redo:function(){var e;this.redoStack.length&&((e=this.redoStack.pop()).redo(),this.undoStack.push(e),this.onChange(1))},onChange:function(e){Tegaki.onHistoryChange(this.undoStack.length,this.redoStack.length,e)},sortPosLayerCallback:function(e,t){return e[0]>t[0]?1:e[0]=0;e--)t=Tegaki.layers[e],Tegaki.layersCnt.insertBefore(t.canvas,a.nextElementSibling);TegakiLayers.setActiveLayer(this.aLayerId)},TegakiHistoryActions.MoveLayers.prototype.redo=function(){var e,t=new Set;for(e of this.layers.slice().reverse())t.add(e[1].id);TegakiLayers.setActiveLayer(this.aLayerId),TegakiLayers.moveLayers(t,this.belowPos)},TegakiHistoryActions.AddLayer.prototype.undo=function(){TegakiLayers.deleteLayers([this.layer.id]),TegakiLayers.setActiveLayer(this.aLayerIdBefore),Tegaki.layerCounter--},TegakiHistoryActions.AddLayer.prototype.redo=function(){TegakiLayers.setActiveLayer(this.aLayerIdBefore),TegakiLayers.addLayer(this.layer),TegakiLayers.setActiveLayer(this.aLayerIdAfter)},TegakiHistoryActions.SetLayersAlpha.prototype.undo=function(){var e,t,a;for(t of this.layerAlphas)[e,t]=t,(a=TegakiLayers.getLayerById(e))&&TegakiLayers.setLayerAlpha(a,t);TegakiUI.updateLayerAlphaOpt()},TegakiHistoryActions.SetLayersAlpha.prototype.redo=function(){var e,t,a;for(t of this.layerAlphas)[e,t]=t,(a=TegakiLayers.getLayerById(e))&&TegakiLayers.setLayerAlpha(a,this.newAlpha);TegakiUI.updateLayerAlphaOpt()},TegakiHistoryActions.SetLayersAlpha.prototype.coalesce=function(e){var t;if(this.layerAlphas.length!==e.layerAlphas.length)return!1;for(t=0;t=0&&!TegakiLayers.selectedLayersHas(a[e].id);e--);for(e-=1;e>=0&&TegakiLayers.selectedLayersHas(a[e].id);e--);return(t=a[e])?t.id:0},getSelectedEdgeLayerPos:function(e){var t,a=Tegaki.layers;if(e)for(t=Tegaki.layers.length-1;t>=0&&!TegakiLayers.selectedLayersHas(a[t].id);t--);else{for(t=0;t=a.length&&(t=-1)}return t},getTopLayer:function(){return Tegaki.layers[Tegaki.layers.length-1]},getTopLayerId:function(){var e=TegakiLayers.getTopLayer();return e?e.id:0},getLayerBelowId:function(e){var t;return(t=TegakiLayers.getLayerPosById(e))<1?null:Tegaki.layers[t-1]},getLayerById:function(e){return Tegaki.layers[TegakiLayers.getLayerPosById(e)]},isSameLayerOrder:function(e,t){var a,i;if(e.length!==t.length)return!1;for(a=0;i=e[a];++a)if(i.id!==t[a].id)return!1;return!0},addLayer:function(e={}){var t,a,i,s,r,n,o,l,g;Tegaki.activeLayer?(l=Tegaki.activeLayer.id,o=TegakiLayers.getLayerPosById(Tegaki.activeLayer.id),n=$T.cls("tegaki-layer",Tegaki.layersCnt)[o]):(o=-1,n=null),n||(n=Tegaki.layersCnt.firstElementChild),(a=$T.el("canvas")).className="tegaki-layer",a.width=Tegaki.baseWidth,a.height=Tegaki.baseHeight,t=++Tegaki.layerCounter,a.id="tegaki-canvas-"+t,a.setAttribute("data-id",t),s={name:TegakiStrings.layer+" "+t,visible:!0,alpha:1},r={id:t,canvas:a,ctx:g=a.getContext("2d"),imageData:g.getImageData(0,0,a.width,a.height)};for(i in s)e[i]!==undefined&&(s[i]=e[i]),r[i]=s[i];return Tegaki.layers.splice(o+1,0,r),TegakiUI.updateLayersGridAdd(r,l),Tegaki.layersCnt.insertBefore(a,n.nextElementSibling),Tegaki.onLayerStackChanged(),new TegakiHistoryActions.AddLayer(r,l,t)},deleteLayers:function(e,t){var a,i,s,r,n,o;o={aLayerIdBefore:Tegaki.activeLayer?Tegaki.activeLayer.id:-1,aLayerIdAfter:TegakiLayers.getTopFencedLayerId()},r=[],n=[];for(a of e)i=TegakiLayers.getLayerPosById(a),s=Tegaki.layers[i],r.push([i,s]),Tegaki.layersCnt.removeChild(s.canvas),n.push(i),TegakiUI.updateLayersGridRemove(a),TegakiUI.deleteLayerPreviewCtx(s);n=n.sort($T.sortDescCb);for(i of n)Tegaki.layers.splice(i,1);return t&&Object.assign(o,t),Tegaki.onLayerStackChanged(),new TegakiHistoryActions.DeleteLayers(r,o)},mergeLayers:function(e){var t,a,i,s,r,n,o,l,g,d;l=[];for(o of Tegaki.layers)e.has(o.id)&&l.push(o);if(!(l.length<1)){if(1===l.length){if(!(r=TegakiLayers.getLayerBelowId(l[0].id)))return;l.unshift(r),d=!0}else r=l[l.length-1],d=!1;(t=$T.el("canvas")).width=Tegaki.baseWidth,t.height=Tegaki.baseHeight,a=t.getContext("2d"),s=$T.copyImageData(r.imageData),g=[];for(o of l)o.id!==r.id&&g.push(o.id),a.globalAlpha=o.alpha,a.drawImage(o.canvas,0,0);return $T.clearCtx(r.ctx),r.ctx.drawImage(t,0,0),TegakiLayers.syncLayerImageData(r),i=$T.copyImageData(r.imageData),n=TegakiLayers.deleteLayers(g,{tgtLayerId:r.id,tgtLayerAlpha:r.alpha,aLayerIdAfter:r.id,imageDataBefore:s,imageDataAfter:i,mergeDown:d}),TegakiLayers.setLayerAlpha(r,1),TegakiUI.updateLayerAlphaOpt(),TegakiUI.updateLayerPreview(r),Tegaki.onLayerStackChanged(),n}},moveLayers:function(e,t){var a,i,s,r,n,o,l;if(e.size&&Tegaki.layers.length){o=t>=Tegaki.layers.length?TegakiLayers.getTopLayer().canvas.nextElementSibling:(i=Tegaki.layers[t]).canvas,s=[],r=[],n=[],l=t,a=0;for(i of Tegaki.layers)e.has(i.id)?(t>0&&a<=t&&l--,s.push([a,i]),n.push(i)):r.push(i),++a;if(r.splice(l,0,...n),!TegakiLayers.isSameLayerOrder(r,Tegaki.layers)){Tegaki.layers=r;for(i of s)Tegaki.layersCnt.insertBefore(i[1].canvas,o);return TegakiUI.updayeLayersGridOrder(),Tegaki.onLayerStackChanged(),new TegakiHistoryActions.MoveLayers(s,t,Tegaki.activeLayer?Tegaki.activeLayer.id:-1)}}},setLayerVisibility:function(e,t){e.visible=t,t?e.canvas.classList.remove("tegaki-hidden"):e.canvas.classList.add("tegaki-hidden"),Tegaki.onLayerStackChanged(),TegakiUI.updateLayersGridVisibility(e.id,t)},setLayerAlpha:function(e,t){e.alpha=t,e.canvas.style.opacity=t},setActiveLayer:function(e){var t,a;e||(e=TegakiLayers.getTopLayerId())?(t=TegakiLayers.getLayerPosById(e))<0||(a=Tegaki.layers[t],Tegaki.activeLayer&&Tegaki.copyContextState(Tegaki.activeLayer.ctx,a.ctx),Tegaki.activeLayer=a,TegakiLayers.selectedLayersClear(),TegakiLayers.selectedLayersAdd(e),TegakiUI.updateLayersGridActive(e),TegakiUI.updateLayerAlphaOpt(),Tegaki.onLayerStackChanged()):Tegaki.activeLayer=null},syncLayerImageData(e,t=null){e.imageData=t?$T.copyImageData(t):e.ctx.getImageData(0,0,Tegaki.baseWidth,Tegaki.baseHeight)},selectedLayersHas:function(e){return Tegaki.selectedLayers.has(+e)},selectedLayersClear:function(){Tegaki.selectedLayers.clear(),TegakiUI.updateLayerAlphaOpt(),TegakiUI.updateLayersGridSelectedClear()},selectedLayersAdd:function(e){Tegaki.selectedLayers.add(+e),TegakiUI.updateLayerAlphaOpt(),TegakiUI.updateLayersGridSelectedSet(e,!0)},selectedLayersRemove:function(e){Tegaki.selectedLayers["delete"](+e),TegakiUI.updateLayerAlphaOpt(),TegakiUI.updateLayersGridSelectedSet(e,!1)},selectedLayersToggle:function(e){TegakiLayers.selectedLayersHas(e)?TegakiLayers.selectedLayersRemove(e):TegakiLayers.selectedLayersAdd(e)}},Tegaki={VERSION:"0.9.3",startTimeStamp:0,bg:null,canvas:null,ctx:null,layers:[],layersCnt:null,canvasCnt:null,ghostBuffer:null,blendBuffer:null,ghostBuffer32:null,blendBuffer32:null,activeLayer:null,layerCounter:0,selectedLayers:new Set,activePointerId:0,activePointerIsPen:!1,isPainting:!1,offsetX:0,offsetY:0,zoomLevel:0,zoomFactor:1,zoomFactorList:[.5,1,2,4,8,16],zoomBaseLevel:1,hasCustomCanvas:!1,TWOPI:2*Math.PI,toolList:[TegakiPencil,TegakiPen,TegakiAirbrush,TegakiBucket,TegakiTone,TegakiPipette,TegakiBlur,TegakiEraser],tools:{},tool:null,colorPaletteId:0,toolColor:"#000000",defaultTool:"pencil",bgColor:"#ffffff",maxSize:64,maxLayers:25,baseWidth:0,baseHeight:0,replayRecorder:null,replayViewer:null,onDoneCb:null,onCancelCb:null,replayMode:!1,saveReplay:!1,open:function(e={}){var t=Tegaki;if(t.bg){if(t.replayMode===!!e.replayMode)return void t.resume();t.destroy()}t.startTimeStamp=Date.now(),e.bgColor&&(t.bgColor=e.bgColor),t.hasCustomCanvas=!1,t.saveReplay=!!e.saveReplay,t.replayMode=!!e.replayMode,t.onDoneCb=e.onDone,t.onCancelCb=e.onCancel,t.baseWidth=e.width||0,t.baseHeight=e.height||0,t.createTools(),t.initKeybinds(),[t.bg,t.canvasCnt,t.layersCnt]=TegakiUI.buildUI(),document.body.appendChild(t.bg),document.body.classList.add("tegaki-backdrop"),t.replayMode?(TegakiUI.setReplayMode(!0),t.replayViewer=new TegakiReplayViewer,e.replayURL&&t.loadReplayFromURL(e.replayURL)):(t.init(),t.setTool(t.defaultTool),t.saveReplay&&(t.replayRecorder=new TegakiReplayRecorder,t.replayRecorder.start()))},init:function(){var e=Tegaki;e.createCanvas(),e.updateLayersCntSize(),e.createBuffers(),e.updatePosOffset(),e.resetLayers(),TegakiCursor.init(e.baseWidth,e.baseHeight),e.bindGlobalEvents(),TegakiUI.updateUndoRedo(0,0),TegakiUI.updateZoomLevel()},initFromReplay:function(){var e,t;t=(e=Tegaki).replayViewer,e.initToolsFromReplay(),e.baseWidth=t.canvasWidth,e.baseHeight=t.canvasHeight, +e.bgColor=$T.RgbToHex(...t.bgColor),e.toolColor=$T.RgbToHex(...t.toolColor)},initToolsFromReplay:function(){var e,t,a,i,s,r,n;t=(e=Tegaki).replayViewer;for(a in e.tools){(i=e.tools[a]).id===t.toolId&&(e.defaultTool=a),s=t.toolMap[i.id],n=["step","size","alpha","flow","tipId"];for(r of n)s[r]!==undefined&&(i[r]=s[r]);n=["sizeDynamicsEnabled","alphaDynamicsEnabled","flowDynamicsEnabled","usePreserveAlpha"];for(r of n)s[r]!==undefined&&(i[r]=!!s[r])}},resetLayers:function(){var e,t;if(Tegaki.layers.length){for(e=0,t=Tegaki.layers.length;e=TegakiColorPalettes.length||(Tegaki.colorPaletteId=e,TegakiUI.updateColorPalette())},setToolSizeUp:function(){Tegaki.setToolSize(Tegaki.tool.size+1)},setToolSizeDown:function(){Tegaki.setToolSize(Tegaki.tool.size-1)},setToolSize:function(e){e>0&&e<=Tegaki.maxSize&&(Tegaki.tool.setSize(e),Tegaki.updateCursorStatus(),Tegaki.recordEvent(TegakiEventSetToolSize,performance.now(),e),TegakiUI.updateToolSize())},setToolAlpha:function(e){(e=Math.fround(e))>=0&&e<=1&&(Tegaki.tool.setAlpha(e),Tegaki.recordEvent(TegakiEventSetToolAlpha,performance.now(),e),TegakiUI.updateToolAlpha())},setToolFlow:function(e){(e=Math.fround(e))>=0&&e<=1&&(Tegaki.tool.setFlow(e),Tegaki.recordEvent(TegakiEventSetToolFlow,performance.now(),e),TegakiUI.updateToolFlow())},setToolColor:function(e){Tegaki.toolColor=e,$T.id("tegaki-color").style.backgroundColor=e,$T.id("tegaki-colorpicker").value=e,Tegaki.tool.setColor(e),Tegaki.recordEvent(TegakiEventSetColor,performance.now(),Tegaki.tool.rgb)},setToolColorRGB:function(e,t,a){Tegaki.setToolColor($T.RgbToHex(e,t,a))},setTool:function(e){Tegaki.tools[e].set()},setToolById:function(e){var t;for(t in Tegaki.tools)if(Tegaki.tools[t].id===e)return void Tegaki.setTool(t)},setZoom:function(e){var t;(t=e+Tegaki.zoomBaseLevel)>=Tegaki.zoomFactorList.length||t<0||!Tegaki.canvas||(Tegaki.zoomLevel=e,Tegaki.zoomFactor=Tegaki.zoomFactorList[t],TegakiUI.updateZoomLevel(),Tegaki.layersCnt.style.width=Math.ceil(Tegaki.baseWidth*Tegaki.zoomFactor)+"px",Tegaki.layersCnt.style.height=Math.ceil(Tegaki.baseHeight*Tegaki.zoomFactor)+"px",Tegaki.updateCursorStatus(),Tegaki.updatePosOffset())},onZoomChange:function(){this.hasAttribute("data-in")?Tegaki.setZoom(Tegaki.zoomLevel+1):Tegaki.setZoom(Tegaki.zoomLevel-1),TegakiCursor.updateCanvasSize()},onNewClick:function(){var e,t,a,i=Tegaki;(e=prompt(TegakiStrings.promptWidth,i.canvas.width))&&(t=prompt(TegakiStrings.promptHeight,i.canvas.height))&&(t=+t,(e=+e)<1||t<1?TegakiUI.printMsg(TegakiStrings.badDimensions):(a={},i.copyContextState(i.activeLayer.ctx,a),i.resizeCanvas(e,t),i.copyContextState(a,i.activeLayer.ctx),i.setZoom(0),TegakiHistory.clear(),TegakiUI.updateLayerPreviewSize(),i.startTimeStamp=Date.now(),i.saveReplay&&(i.createTools(),i.setTool(i.defaultTool),i.replayRecorder=new TegakiReplayRecorder,i.replayRecorder.start())))},onOpenClick:function(){(!(TegakiHistory.undoStack[0]||TegakiHistory.redoStack[0])&&!Tegaki.saveReplay||confirm(TegakiStrings.confirmChangeCanvas))&&$T.id("tegaki-filepicker").click()},loadReplayFromFile:function(){Tegaki.replayViewer.debugLoadLocal()},loadReplayFromURL:function(e){TegakiUI.printMsg(TegakiStrings.loadingReplay,0),Tegaki.replayViewer.loadFromURL(e)},onExportClick:function(){Tegaki.flatten().toBlob(function(e){var t=$T.el("a");t.className="tegaki-hidden",t.download=$T.generateFilename()+".png",t.href=URL.createObjectURL(e),Tegaki.bg.appendChild(t),t.click(),Tegaki.bg.removeChild(t)},"image/png")},onUndoClick:function(){TegakiHistory.undo()},onRedoClick:function(){TegakiHistory.redo()},onHistoryChange:function(e,t,a=0){TegakiUI.updateUndoRedo(e,t),-1===a?Tegaki.recordEvent(TegakiEventUndo,performance.now()):1===a&&Tegaki.recordEvent(TegakiEventRedo,performance.now())},onDoneClick:function(){Tegaki.hide(),Tegaki.onDoneCb()},onCancelClick:function(){confirm(TegakiStrings.confirmCancel)&&(Tegaki.destroy(),Tegaki.onCancelCb())},onCloseViewerClick:function(){Tegaki.replayViewer.destroy(),Tegaki.destroy()},onToolSizeChange:function(){var e=+this.value;e<1?e=1:e>Tegaki.maxSize&&(e=Tegaki.maxSize),Tegaki.setToolSize(e)},onToolAlphaChange:function(){var e=+this.value;(e/=100)<0?e=0:e>1&&(e=1),Tegaki.setToolAlpha(e)},onToolFlowChange:function(){var e=+this.value;(e/=100)<0?e=0:e>1&&(e=1),Tegaki.setToolFlow(e)},onToolPressureSizeClick:function(){Tegaki.tool.useSizeDynamics&&Tegaki.setToolSizeDynamics(!Tegaki.tool.sizeDynamicsEnabled)},setToolSizeDynamics:function(e){Tegaki.tool.setSizeDynamics(e),TegakiUI.updateToolDynamics(),Tegaki.recordEvent(TegakiEventSetToolSizeDynamics,performance.now(),+e)},onToolPressureAlphaClick:function(){Tegaki.tool.useAlphaDynamics&&Tegaki.setToolAlphaDynamics(!Tegaki.tool.alphaDynamicsEnabled)},setToolAlphaDynamics:function(e){Tegaki.tool.setAlphaDynamics(e),TegakiUI.updateToolDynamics(),Tegaki.recordEvent(TegakiEventSetToolAlphaDynamics,performance.now(),+e)},onToolPressureFlowClick:function(){Tegaki.tool.useFlowDynamics&&Tegaki.setToolFlowDynamics(!Tegaki.tool.flowDynamicsEnabled)},setToolFlowDynamics:function(e){Tegaki.tool.setFlowDynamics(e),TegakiUI.updateToolDynamics(),Tegaki.recordEvent(TegakiEventSetToolFlowDynamics,performance.now(),+e)},onToolPreserveAlphaClick:function(){Tegaki.tool.usePreserveAlpha&&Tegaki.setToolPreserveAlpha(!Tegaki.tool.preserveAlphaEnabled)},setToolPreserveAlpha:function(e){Tegaki.tool.setPreserveAlpha(e),TegakiUI.updateToolPreserveAlpha(),Tegaki.recordEvent(TegakiEventPreserveAlpha,performance.now(),+e)},onToolTipClick:function(e){var t=+e.target.getAttribute("data-id");t!==Tegaki.tool.tipId&&Tegaki.setToolTip(t)},setToolTip:function(e){Tegaki.tool.setTip(e),TegakiUI.updateToolShape(),Tegaki.recordEvent(TegakiEventSetToolTip,performance.now(),e)},onLayerSelectorClick:function(e){var t=+this.getAttribute("data-id");t&&!e.target.classList.contains("tegaki-ui-cb")&&(e.ctrlKey?Tegaki.toggleSelectedLayer(t):Tegaki.setActiveLayer(t))},toggleSelectedLayer:function(e){TegakiLayers.selectedLayersToggle(e),Tegaki.recordEvent(TegakiEventToggleLayerSelection,performance.now(),e)},setActiveLayer:function(e){TegakiLayers.setActiveLayer(e),Tegaki.recordEvent(TegakiEventSetActiveLayer,performance.now(),e)},onLayerAlphaDragStart:function(e){TegakiUI.setupDragLabel(e,Tegaki.onLayerAlphaDragMove)},onLayerAlphaDragMove:function(e){var t;e&&((t=Tegaki.activeLayer.alpha+e/100)<0?t=0:t>1&&(t=1),Tegaki.setSelectedLayersAlpha(t))},onLayerAlphaChange:function(){var e=+this.value;(e/=100)<0?e=0:e>1&&(e=1),Tegaki.setSelectedLayersAlpha(e)},setSelectedLayersAlpha:function(e){var t,a,i;if((e=Math.fround(e))>=0&&e<=1&&Tegaki.selectedLayers.size>0){i=[];for(a of Tegaki.selectedLayers)(t=TegakiLayers.getLayerById(a))&&(i.push([t.id,t.alpha]),TegakiLayers.setLayerAlpha(t,e));TegakiUI.updateLayerAlphaOpt(),TegakiHistory.push(new TegakiHistoryActions.SetLayersAlpha(i,e)),Tegaki.recordEvent(TegakiEventSetSelectedLayersAlpha,performance.now(),e)}},onLayerNameChangeClick:function(){var e,t,a;e=+this.getAttribute("data-id"),(a=TegakiLayers.getLayerById(e))&&(t=prompt(undefined,a.name))&&Tegaki.setLayerName(e,t)},setLayerName:function(e,t){var a,i;t=t.trim().slice(0,25),(i=TegakiLayers.getLayerById(e))&&t&&t!==i.name&&(a=i.name,i.name=t,TegakiUI.updateLayerName(i),TegakiHistory.push(new TegakiHistoryActions.SetLayerName(e,a,t)),Tegaki.recordEvent(TegakiEventHistoryDummy,performance.now()))},onLayerAddClick:function(){Tegaki.addLayer()},addLayer:function(){var e;Tegaki.layers.length>=Tegaki.maxLayers?TegakiUI.printMsg(TegakiStrings.tooManyLayers):(TegakiHistory.push(e=TegakiLayers.addLayer()),TegakiLayers.setActiveLayer(e.aLayerIdAfter),Tegaki.recordEvent(TegakiEventAddLayer,performance.now()))},onLayerDeleteClick:function(){Tegaki.deleteSelectedLayers()},deleteSelectedLayers:function(){var e,t;(t=Tegaki.selectedLayers).size!==Tegaki.layers.length&&(!t.size||Tegaki.layers.length<2||(TegakiHistory.push(e=TegakiLayers.deleteLayers(t)),TegakiLayers.selectedLayersClear(),TegakiLayers.setActiveLayer(e.aLayerIdAfter),Tegaki.recordEvent(TegakiEventDeleteLayers,performance.now())))},onLayerToggleVisibilityClick:function(){Tegaki.toggleLayerVisibility(+this.getAttribute("data-id"))},toggleLayerVisibility:function(e){var t=TegakiLayers.getLayerById(e);TegakiLayers.setLayerVisibility(t,!t.visible),Tegaki.recordEvent(TegakiEventToggleLayerVisibility,performance.now(),e)},onMergeLayersClick:function(){Tegaki.mergeSelectedLayers()},mergeSelectedLayers:function(){var e;Tegaki.selectedLayers.size&&(e=TegakiLayers.mergeLayers(Tegaki.selectedLayers))&&(TegakiHistory.push(e),TegakiLayers.setActiveLayer(e.aLayerIdAfter),Tegaki.recordEvent(TegakiEventMergeLayers,performance.now()))},onMoveLayerClick:function(e){var t,a;Tegaki.selectedLayers.size&&(a=e.target.hasAttribute("data-up"),(t=TegakiLayers.getSelectedEdgeLayerPos(a))<0||(a?t+=2:t>=1&&t--,Tegaki.moveSelectedLayers(t)))},moveSelectedLayers:function(e){TegakiHistory.push(TegakiLayers.moveLayers(Tegaki.selectedLayers,e)),Tegaki.recordEvent(TegakiEventMoveLayers,performance.now(),e)},onToolClick:function(){Tegaki.setTool(this.getAttribute("data-tool"))},onToolChanged:function(e){var t;Tegaki.tool=e,(t=$T.cls("tegaki-tool-active")[0])&&t.classList.remove("tegaki-tool-active"),$T.id("tegaki-tool-btn-"+e.name).classList.add("tegaki-tool-active"),Tegaki.recordEvent(TegakiEventSetTool,performance.now(),Tegaki.tool.id),TegakiUI.onToolChanged(),Tegaki.updateCursorStatus()},onLayerStackChanged:function(){},onOpenFileSelected:function(){var e;this.files&&this.files[0]&&((e=new Image).onload=Tegaki.onOpenImageLoaded,e.onerror=Tegaki.onOpenImageError,e.src=URL.createObjectURL(this.files[0]))},onOpenImageLoaded:function(){var e={},t=Tegaki;t.hasCustomCanvas=!0,t.copyContextState(t.activeLayer.ctx,e),t.resizeCanvas(this.naturalWidth,this.naturalHeight),t.activeLayer.ctx.drawImage(this,0,0),TegakiLayers.syncLayerImageData(t.activeLayer),t.copyContextState(e,t.activeLayer.ctx),t.setZoom(0),TegakiHistory.clear(),TegakiUI.updateLayerPreviewSize(!0),t.startTimeStamp=Date.now(),t.saveReplay&&(t.replayRecorder.stop(),t.replayRecorder=null,t.saveReplay=!1,TegakiUI.setRecordingStatus(!1))},onOpenImageError:function(){TegakiUI.printMsg(TegakiStrings.errorLoadImage)},resizeCanvas:function(e,t){Tegaki.baseWidth=e,Tegaki.baseHeight=t,Tegaki.createBuffers(),Tegaki.canvas.width=e,Tegaki.canvas.height=t,Tegaki.ctx.fillStyle=Tegaki.bgColor,Tegaki.ctx.fillRect(0,0,e,t),Tegaki.activeLayer=null,Tegaki.resetLayers(),Tegaki.updateLayersCntSize(),Tegaki.updatePosOffset(),TegakiCursor.updateCanvasSize()},copyContextState:function(e,t){var a,i,s=["lineCap","lineJoin","strokeStyle","fillStyle","globalAlpha","lineWidth","globalCompositeOperation"];for(a=0;i=s[a];++a)t[i]=e[i]},updateCursorStatus:function(){!Tegaki.tool.noCursor&&Tegaki.tool.size>1?Tegaki.cursor=TegakiCursor.generate(Tegaki.tool.size):(Tegaki.cursor=!1,TegakiCursor.clear())},updatePosOffset:function(){var e=Tegaki.canvas.getBoundingClientRect();Tegaki.offsetX=e.left+window.pageXOffset+Tegaki.canvasCnt.scrollLeft+Tegaki.layersCnt.scrollLeft,Tegaki.offsetY=e.top+window.pageYOffset+Tegaki.canvasCnt.scrollTop+Tegaki.layersCnt.scrollTop},getScrollbarSizes:function(){return[Tegaki.canvasCnt.offsetWidth-Tegaki.canvasCnt.clientWidth,Tegaki.canvasCnt.offsetHeight-Tegaki.canvasCnt.clientHeight]},isScrollbarClick:function(e){var[t,a]=Tegaki.getScrollbarSizes();return t>0&&e.clientX>=Tegaki.canvasCnt.offsetLeft+Tegaki.canvasCnt.clientWidth&&e.clientX<=Tegaki.canvasCnt.offsetLeft+Tegaki.canvasCnt.clientWidth+t||a>0&&e.clientY>=Tegaki.canvasCnt.offsetTop+Tegaki.canvasCnt.clientHeight&&e.clientY<=Tegaki.canvasCnt.offsetTop+Tegaki.canvasCnt.clientHeight+t},onPointerMove:function(e){var t,a,i,s,r,n;if(Tegaki.cursor&&TegakiCursor.render(e.clientX,e.clientY),e.mozInputSource!==undefined){if(Tegaki.activePointerIsPen&&"mouse"===e.pointerType)return}else if(Tegaki.activePointerId!==e.pointerId)return void(Tegaki.activePointerId=e.pointerId);if(Tegaki.isPainting)if(s=Tegaki.tool,Tegaki.activePointerIsPen&&e.getCoalescedEvents){t=e.getCoalescedEvents(),r=e.timeStamp;for(e of t)a=Tegaki.getPointerPos(e,0),i=Tegaki.getPointerPos(e,1),s.enabledDynamics()?(n=TegakiPressure.toShort(e.pressure),TegakiPressure.push(n),Tegaki.recordEvent(TegakiEventDraw,r,a,i,n)):Tegaki.recordEvent(TegakiEventDrawNoP,r,a,i),s.draw(a,i)}else a=Tegaki.getPointerPos(e,0),i=Tegaki.getPointerPos(e,1),n=TegakiPressure.toShort(e.pressure),Tegaki.recordEvent(TegakiEventDraw,e.timeStamp,a,i,n),TegakiPressure.push(n),s.draw(a,i);else a=Tegaki.getPointerPos(e,0),i=Tegaki.getPointerPos(e,1)},onPointerDown:function(e){var t,a,i,s;Tegaki.cursor&&TegakiCursor.render(e.clientX,e.clientY),Tegaki.isScrollbarClick(e)||(Tegaki.activePointerId=e.pointerId,Tegaki.activePointerIsPen="pen"===e.pointerType,null!==Tegaki.activeLayer?TegakiLayers.getActiveLayer().visible?(t=Tegaki.getPointerPos(e,0),a=Tegaki.getPointerPos(e,1),2===e.button||e.altKey?(e.preventDefault(),Tegaki.isPainting=!1,Tegaki.tools.pipette.draw(t,a)):0===e.button&&(e.preventDefault(),(i=Tegaki.tool).enabledDynamics()?(s=TegakiPressure.toShort(e.pressure),TegakiPressure.push(s),Tegaki.recordEvent(TegakiEventDrawStart,e.timeStamp,t,a,s)):Tegaki.recordEvent(TegakiEventDrawStartNoP,e.timeStamp,t,a),Tegaki.isPainting=!0,TegakiHistory.pendingAction=new TegakiHistoryActions.Draw(Tegaki.activeLayer.id),TegakiHistory.pendingAction.addCanvasState(Tegaki.activeLayer.imageData,0),i.start(t,a))):e.target.parentNode===Tegaki.layersCnt&&TegakiUI.printMsg(TegakiStrings.hiddenActiveLayer):e.target.parentNode===Tegaki.layersCnt&&TegakiUI.printMsg(TegakiStrings.noActiveLayer))},onPointerUp:function(e){Tegaki.activePointerId=e.pointerId,Tegaki.activePointerIsPen=!1,Tegaki.isPainting&&(Tegaki.recordEvent(TegakiEventDrawCommit,e.timeStamp),Tegaki.tool.commit(),TegakiUI.updateLayerPreview(Tegaki.activeLayer),TegakiHistory.pendingAction.addCanvasState(Tegaki.activeLayer.imageData,1),TegakiHistory.push(TegakiHistory.pendingAction),Tegaki.isPainting=!1)},onPointerOut:function(){TegakiCursor.clearAll()},onDummy:function(e){e.preventDefault(),e.stopPropagation()},recordEvent(e,...t){Tegaki.replayRecorder&&Tegaki.replayRecorder.push(new e(...t))}},TegakiColorPalettes=[["#ffffff","#000000","#888888","#b47575","#c096c0","#fa9696","#8080ff","#ffb6ff","#e7e58d","#25c7c9","#99cb7b","#e7962d","#f9ddcf","#fcece2"],["#000000","#ffffff","#7f7f7f","#c3c3c3","#880015","#b97a57","#ed1c24","#ffaec9","#ff7f27","#ffc90e","#fff200","#efe4b0","#22b14c","#b5e61d","#00a2e8","#99d9ea","#3f48cc","#7092be","#a349a4","#c8bfe7"],["#000000","#ffffff","#8a8a8a","#cacaca","#fcece2","#f9ddcf","#e0a899","#a05b53","#7a444a","#960018","#c41e3a","#de4537","#ff3300","#ff9800","#ffc107","#ffd700","#ffeb3b","#ffffcc","#f3e5ab","#cddc39","#8bc34a","#4caf50","#3e8948","#355e3b","#3eb489","#f0f8ff","#87ceeb","#6699cc","#007fff","#2d68c4","#364478","#352c4a","#9c27b0","#da70d6","#ff0090","#fa8072","#f19cbb","#c78b95"]],TegakiPressure={pressureNow:0,pressureThen:0,toShort:function(e){return 0|65535*e},get:function(){return this.pressureNow},lerp:function(e){return this.pressureThen*(1-e)+this.pressureNow*e},push:function(e){this.pressureThen=this.pressureNow,this.pressureNow=e/65535},set:function(e){this.pressureThen=this.pressureNow=e/65535}};class TegakiEvent_void{constructor(){this.size=5}pack(e){e.writeUint8(this.type),e.writeUint32(this.timeStamp)}static unpack(e){return new this(e.readUint32())}}class TegakiEvent_c{constructor(){this.size=6}pack(e){e.writeUint8(this.type),e.writeUint32(this.timeStamp),e.writeUint8(this.value)}static unpack(e){return new this(e.readUint32(),e.readUint8())}}class TegakiEventPrelude extends TegakiEvent_void{constructor(e){super(),this.timeStamp=e,this.type=TegakiEvents[this.constructor.name][0]}static unpack(e){return super.unpack(e)}dispatch(){}}class TegakiEventConclusion extends TegakiEvent_void{constructor(e){super(),this.timeStamp=e,this.type=TegakiEvents[this.constructor.name][0]}static unpack(e){return super.unpack(e)}dispatch(){}}class TegakiEventHistoryDummy extends TegakiEvent_void{constructor(e){super(),this.timeStamp=e,this.type=TegakiEvents[this.constructor.name][0]}static unpack(e){return super.unpack(e)}dispatch(){TegakiHistory.push(new TegakiHistoryActions.Dummy)}}class TegakiEventDrawStart{constructor(e,t,a,i){this.timeStamp=e,this.x=t,this.y=a,this.pressure=i,this.type=TegakiEvents[this.constructor.name][0],this.size=11}pack(e){e.writeUint8(this.type),e.writeUint32(this.timeStamp),e.writeInt16(this.x),e.writeInt16(this.y),e.writeUint16(this.pressure)}static unpack(e){var t,a,i,s;return t=e.readUint32(),a=e.readInt16(),i=e.readInt16(),s=e.readUint16(),new TegakiEventDrawStart(t,a,i,s)}dispatch(){TegakiPressure.set(this.pressure),TegakiHistory.pendingAction=new TegakiHistoryActions.Draw(Tegaki.activeLayer.id),TegakiHistory.pendingAction.addCanvasState(Tegaki.activeLayer.imageData,0),Tegaki.tool.start(this.x,this.y)}}class TegakiEventDrawStartNoP{constructor(e,t,a){this.timeStamp=e,this.x=t,this.y=a,this.type=TegakiEvents[this.constructor.name][0],this.size=9}pack(e){e.writeUint8(this.type),e.writeUint32(this.timeStamp),e.writeInt16(this.x),e.writeInt16(this.y)}static unpack(e){var t,a,i;return t=e.readUint32(),a=e.readInt16(),i=e.readInt16(),new TegakiEventDrawStartNoP(t,a,i)}dispatch(){TegakiPressure.set(.5),TegakiHistory.pendingAction=new TegakiHistoryActions.Draw(Tegaki.activeLayer.id),TegakiHistory.pendingAction.addCanvasState(Tegaki.activeLayer.imageData,0),Tegaki.tool.start(this.x,this.y)}}class TegakiEventDraw{constructor(e,t,a,i){this.timeStamp=e,this.x=t,this.y=a,this.pressure=i,this.type=TegakiEvents[this.constructor.name][0],this.size=11}pack(e){e.writeUint8(this.type),e.writeUint32(this.timeStamp),e.writeInt16(this.x),e.writeInt16(this.y),e.writeUint16(this.pressure)}static unpack(e){var t,a,i,s;return t=e.readUint32(),a=e.readInt16(),i=e.readInt16(),s=e.readUint16(),new TegakiEventDraw(t,a,i,s)}dispatch(){TegakiPressure.push(this.pressure),Tegaki.tool.draw(this.x,this.y)}}class TegakiEventDrawNoP{constructor(e,t,a){this.timeStamp=e,this.x=t,this.y=a,this.type=TegakiEvents[this.constructor.name][0],this.size=9}pack(e){e.writeUint8(this.type),e.writeUint32(this.timeStamp),e.writeInt16(this.x),e.writeInt16(this.y)}static unpack(e){var t,a,i;return t=e.readUint32(),a=e.readInt16(),i=e.readInt16(),new TegakiEventDrawNoP(t,a,i)}dispatch(){TegakiPressure.push(.5),Tegaki.tool.draw(this.x,this.y)}}class TegakiEventDrawCommit extends TegakiEvent_void{constructor(e){super(),this.timeStamp=e,this.type=TegakiEvents[this.constructor.name][0]}static unpack(e){return super.unpack(e)}dispatch(){Tegaki.tool.commit(),TegakiUI.updateLayerPreview(Tegaki.activeLayer),TegakiHistory.pendingAction.addCanvasState(Tegaki.activeLayer.imageData,1),TegakiHistory.push(TegakiHistory.pendingAction),Tegaki.isPainting=!1}}class TegakiEventUndo extends TegakiEvent_void{constructor(e){super(),this.timeStamp=e,this.type=TegakiEvents[this.constructor.name][0]}static unpack(e){return super.unpack(e)}dispatch(){TegakiHistory.undo()}}class TegakiEventRedo extends TegakiEvent_void{constructor(e){super(),this.timeStamp=e,this.type=TegakiEvents[this.constructor.name][0]}static unpack(e){return super.unpack(e)}dispatch(){TegakiHistory.redo()}}class TegakiEventSetColor{constructor(e,t){this.timeStamp=e,[this.r,this.g,this.b]=t,this.type=TegakiEvents[this.constructor.name][0],this.size=8,this.coalesce=!0}pack(e){e.writeUint8(this.type),e.writeUint32(this.timeStamp),e.writeUint8(this.r),e.writeUint8(this.g),e.writeUint8(this.b)}static unpack(e){var t,a;return t=e.readUint32(),a=[e.readUint8(),e.readUint8(),e.readUint8()],new TegakiEventSetColor(t,a)}dispatch(){Tegaki.setToolColorRGB(this.r,this.g,this.b)}}class TegakiEventSetTool extends TegakiEvent_c{constructor(e,t){super(),this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0],this.coalesce=!0}dispatch(){Tegaki.setToolById(this.value)}}class TegakiEventSetToolSize extends TegakiEvent_c{constructor(e,t){super(),this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0],this.coalesce=!0}dispatch(){Tegaki.setToolSize(this.value)}}class TegakiEventSetToolAlpha{constructor(e,t){this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0],this.coalesce=!0,this.size=9}pack(e){e.writeUint8(this.type),e.writeUint32(this.timeStamp),e.writeFloat32(this.value)}static unpack(e){return new this(e.readUint32(),e.readFloat32())}dispatch(){Tegaki.setToolAlpha(this.value)}}class TegakiEventSetToolFlow{constructor(e,t){this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0],this.coalesce=!0,this.size=9}pack(e){e.writeUint8(this.type),e.writeUint32(this.timeStamp),e.writeFloat32(this.value)}static unpack(e){return new this(e.readUint32(),e.readFloat32())}dispatch(){Tegaki.setToolFlow(this.value)}}class TegakiEventPreserveAlpha extends TegakiEvent_c{constructor(e,t){super(),this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0],this.coalesce=!0}dispatch(){Tegaki.setToolPreserveAlpha(!!this.value)}}class TegakiEventSetToolSizeDynamics extends TegakiEvent_c{constructor(e,t){super(),this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0],this.coalesce=!0}dispatch(){Tegaki.setToolSizeDynamics(!!this.value)}}class TegakiEventSetToolAlphaDynamics extends TegakiEvent_c{constructor(e,t){super(),this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0],this.coalesce=!0}dispatch(){Tegaki.setToolAlphaDynamics(!!this.value)}}class TegakiEventSetToolFlowDynamics extends TegakiEvent_c{constructor(e,t){super(),this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0],this.coalesce=!0}dispatch(){Tegaki.setToolFlowDynamics(!!this.value)}}class TegakiEventSetToolTip extends TegakiEvent_c{constructor(e,t){super(),this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0],this.coalesce=!0}dispatch(){Tegaki.setToolTip(this.value)}}class TegakiEventAddLayer extends TegakiEvent_void{constructor(e){super(),this.timeStamp=e,this.type=TegakiEvents[this.constructor.name][0]}static unpack(e){return super.unpack(e)}dispatch(){Tegaki.addLayer()}}class TegakiEventDeleteLayers extends TegakiEvent_void{constructor(e){super(),this.timeStamp=e,this.type=TegakiEvents[this.constructor.name][0]}static unpack(e){return super.unpack(e)}dispatch(){Tegaki.deleteSelectedLayers()}}class TegakiEventMoveLayers extends TegakiEvent_c{constructor(e,t){super(),this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0]}dispatch(){Tegaki.moveSelectedLayers(this.value)}}class TegakiEventMergeLayers extends TegakiEvent_void{constructor(e){super(),this.timeStamp=e,this.type=TegakiEvents[this.constructor.name][0]}static unpack(e){return super.unpack(e)}dispatch(){Tegaki.mergeSelectedLayers()}}class TegakiEventToggleLayerVisibility extends TegakiEvent_c{constructor(e,t){super(),this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0]}dispatch(){Tegaki.toggleLayerVisibility(this.value)}}class TegakiEventSetActiveLayer extends TegakiEvent_c{constructor(e,t){super(),this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0]}dispatch(){Tegaki.setActiveLayer(this.value)}}class TegakiEventToggleLayerSelection extends TegakiEvent_c{constructor(e,t){super(),this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0]}dispatch(){Tegaki.toggleSelectedLayer(this.value)}}class TegakiEventSetSelectedLayersAlpha{constructor(e,t){this.timeStamp=e,this.value=t,this.type=TegakiEvents[this.constructor.name][0],this.coalesce=!0,this.size=9}pack(e){e.writeUint8(this.type),e.writeUint32(this.timeStamp),e.writeFloat32(this.value)}static unpack(e){return new this(e.readUint32(),e.readFloat32())}dispatch(){Tegaki.setSelectedLayersAlpha(this.value)}}const TegakiEvents=Object.freeze({TegakiEventPrelude:[0,TegakiEventPrelude],TegakiEventDrawStart:[1,TegakiEventDrawStart],TegakiEventDraw:[2,TegakiEventDraw],TegakiEventDrawCommit:[3,TegakiEventDrawCommit],TegakiEventUndo:[4,TegakiEventUndo],TegakiEventRedo:[5,TegakiEventRedo],TegakiEventSetColor:[6,TegakiEventSetColor],TegakiEventDrawStartNoP:[7,TegakiEventDrawStartNoP],TegakiEventDrawNoP:[8,TegakiEventDrawNoP],TegakiEventSetTool:[10,TegakiEventSetTool],TegakiEventSetToolSize:[11,TegakiEventSetToolSize],TegakiEventSetToolAlpha:[12,TegakiEventSetToolAlpha],TegakiEventSetToolSizeDynamics:[13,TegakiEventSetToolSizeDynamics],TegakiEventSetToolAlphaDynamics:[14,TegakiEventSetToolAlphaDynamics],TegakiEventSetToolTip:[15,TegakiEventSetToolTip],TegakiEventPreserveAlpha:[16,TegakiEventPreserveAlpha],TegakiEventSetToolFlowDynamics:[17,TegakiEventSetToolFlowDynamics],TegakiEventSetToolFlow:[18,TegakiEventSetToolFlow],TegakiEventAddLayer:[20,TegakiEventAddLayer],TegakiEventDeleteLayers:[21,TegakiEventDeleteLayers],TegakiEventMoveLayers:[22,TegakiEventMoveLayers],TegakiEventMergeLayers:[23,TegakiEventMergeLayers],TegakiEventToggleLayerVisibility:[24,TegakiEventToggleLayerVisibility],TegakiEventSetActiveLayer:[25,TegakiEventSetActiveLayer],TegakiEventToggleLayerSelection:[26,TegakiEventToggleLayerSelection],TegakiEventSetSelectedLayersAlpha:[27,TegakiEventSetSelectedLayersAlpha],TegakiEventHistoryDummy:[254,TegakiEventHistoryDummy],TegakiEventConclusion:[255,TegakiEventConclusion]});class TegakiReplayRecorder{constructor(){this.formatVersion=1,this.compressed=!0,this.tegakiVersion=Tegaki.VERSION.split(".").map(e=>+e),this.canvasWidth=Tegaki.baseWidth,this.canvasHeight=Tegaki.baseHeight,this.bgColor=$T.hexToRgb(Tegaki.bgColor),this.toolColor=$T.hexToRgb(Tegaki.toolColor),this.toolId=Tegaki.tools[Tegaki.defaultTool].id,this.toolList=this.buildToolList(Tegaki.tools),this.startTimeStamp=0,this.endTimeStamp=0,this.recording=!1,this.events=[],this.mimeType="application/octet-stream"}buildToolList(e){var t,a,i;i=[];for(t in e)a=e[t],i.push({id:a.id,size:a.size,alpha:a.alpha,flow:a.flow,step:a.step,sizeDynamicsEnabled:+a.sizeDynamicsEnabled,alphaDynamicsEnabled:+a.alphaDynamicsEnabled,flowDynamicsEnabled:+a.flowDynamicsEnabled,usePreserveAlpha:+a.usePreserveAlpha,tipId:a.tipId});return i}start(){this.recording||(this.endTimeStamp>0&&(this.events.pop(),this.endTimeStamp=0),0===this.startTimeStamp&&(this.events.push(new TegakiEventPrelude(performance.now())),this.startTimeStamp=Date.now()),this.recording=!0)}stop(){ +0!==this.startTimeStamp&&this.recording&&(this.events.push(new TegakiEventConclusion(performance.now())),this.endTimeStamp=Date.now(),this.recording=!1)}push(e){this.recording&&(e.coalesce&&this.events[this.events.length-1].type===e.type?this.events[this.events.length-1]=e:this.events.push(e))}getEventStackSize(){var e,t;t=4;for(e of this.events)t+=e.size;return t}getHeaderSize(){return 12}getMetaSize(){return 21}getToolSize(){return 19}getToolListSize(){return 2+this.toolList.length*this.getToolSize()}writeToolList(e){var t,a,i;i=[["id","Uint8"],["size","Uint8"],["alpha","Float32"],["step","Float32"],["sizeDynamicsEnabled","Uint8"],["alphaDynamicsEnabled","Uint8"],["usePreserveAlpha","Uint8"],["tipId","Int8"],["flow","Float32"],["flowDynamicsEnabled","Uint8"]],e.writeUint8(this.toolList.length),e.writeUint8(this.getToolSize());for(t of this.toolList)for(a of i)e["write"+a[1]](t[a[0]])}writeMeta(e){e.writeUint16(this.getMetaSize()),e.writeUint32(Math.ceil(this.startTimeStamp/1e3)),e.writeUint32(Math.ceil(this.endTimeStamp/1e3)),e.writeUint16(this.canvasWidth),e.writeUint16(this.canvasHeight),e.writeUint8(this.bgColor[0]),e.writeUint8(this.bgColor[1]),e.writeUint8(this.bgColor[2]),e.writeUint8(this.toolColor[0]),e.writeUint8(this.toolColor[1]),e.writeUint8(this.toolColor[2]),e.writeUint8(this.toolId)}writeEventStack(e){var t;e.writeUint32(this.events.length);for(t of this.events)t.pack(e)}writeHeader(e,t){e.writeUint8(84),e.writeUint8(71),e.writeUint8(75),e.writeUint8(+this.compressed),e.writeUint32(t),e.writeUint8(this.tegakiVersion[0]),e.writeUint8(this.tegakiVersion[1]),e.writeUint8(this.tegakiVersion[2]),e.writeUint8(this.formatVersion)}compressData(e){return UZIP.deflateRaw(new Uint8Array(e.buf),{level:9})}toUint8Array(){var e,t,a,i,s,r;return this.startTimeStamp&&this.endTimeStamp?(e=this.getHeaderSize(),t=this.getMetaSize()+this.getToolListSize()+this.getEventStackSize(),a=new ArrayBuffer(t),i=new TegakiBinWriter(a),this.writeMeta(i),this.writeToolList(i),this.writeEventStack(i),s=this.compressData(i),i=new TegakiBinWriter(new ArrayBuffer(e+s.length)),this.writeHeader(i,t),(r=new Uint8Array(i.buf)).set(s,e),r):null}toBlob(){var e=this.toUint8Array();return e?new Blob([e.buffer],{type:this.mimeType}):null}}class TegakiReplayViewer{constructor(){this.formatVersion=1,this.compressed=!0,this.tegakiVersion=[0,0,0],this.dataSize=0,this.canvasWidth=0,this.canvasHeight=0,this.bgColor=[0,0,0],this.toolColor=[0,0,0],this.toolId=1,this.toolMap={},this.startTimeStamp=0,this.endTimeStamp=0,this.loaded=!1,this.playing=!1,this.gapless=!0,this.autoPaused=!1,this.destroyed=!1,this.speedIndex=1,this.speedList=[.5,1,2,5,10,25],this.speed=this.speedList[this.speedIndex],this.maxEventsPerFrame=50,this.maxEventCount=864e4,this.events=[],this.preludePos=0,this.currentPos=0,this.conclusionPos=0,this.duration=0,this.playTimeStart=0,this.playTimeCurrent=0,this.eventIndex=0,this.maxCanvasWH=8192,this.maxGapTime=3e3,this.uiAccTime=0,this.onFrameThis=this.onFrame.bind(this)}destroy(){this.destroyed=!0,this.pause(),this.events=null}speedUp(){this.speedIndex+1=0&&(this.speed=this.speedList[--this.speedIndex])}toggleGapless(){this.gapless=!this.gapless}getCurrentPos(){return this.currentPos}getDuration(){return this.duration}loadFromURL(e){fetch(e).then(e=>this.onResponseReady(e))["catch"](e=>this.onLoadError(e))}onResponseReady(e){e.ok?e.arrayBuffer().then(e=>this.onResponseBodyReady(e))["catch"](e=>this.onLoadError(e)):this.onLoadError(e.statusText)}onResponseBodyReady(e){this.loadFromBuffer(e),Tegaki.onReplayLoaded()}onLoadError(e){TegakiUI.printMsg(TegakiStrings.errorLoadReplay+e,0)}autoPause(){this.autoPaused=!0,this.pause()}pause(e){window.cancelAnimationFrame(this.onFrameThis),this.playing=!1,e&&(this.currentPos=0,this.eventIndex=0),Tegaki.onReplayTimeChanged(),Tegaki.onReplayPlayPauseChanged()}rewind(){this.autoPaused=!1,this.pause(!0),Tegaki.onReplayReset()}play(){this.playTimeStart=performance.now(),this.playTimeCurrent=this.playTimeStart,this.playing=!0,this.autoPaused=!1,this.uiAccTime=0,Tegaki.onReplayPlayPauseChanged(),window.requestAnimationFrame(this.onFrameThis)}togglePlayPause(){this.playing?this.pause():this.play()}onFrame(e){var t=e-this.playTimeCurrent;this.playing&&(this.playTimeCurrent=e,this.step(t),this.uiAccTime+=t,this.uiAccTime>1e3&&(Tegaki.onReplayTimeChanged(),this.uiAccTime=0),this.currentPosthis.maxGapTime&&(this.currentPos=t.timeStamp-this.preludePos,a=t.timeStamp),i=0;this.eventIndex=this.maxEventsPerFrame){this.currentPos=t.timeStamp-this.preludePos;break}t.dispatch(),++this.eventIndex,++i}}getEventIdMap(){var e,t,a;e={};for(t in TegakiEvents)e[(a=TegakiEvents[t])[0]]=a[1];return e}readToolMap(e){var t,a,i,s,r,n,o;for(this.toolMap={},n=[["id","Uint8"],["size","Uint8"],["alpha","Float32"],["step","Float32"],["sizeDynamicsEnabled","Uint8"],["alphaDynamicsEnabled","Uint8"],["usePreserveAlpha","Uint8"],["tipId","Int8"],["flow","Float32"],["flowDynamicsEnabled","Uint8"]],a=e.readUint8(),i=e.readUint8(),t=0;t=o)break;s[r[0]]=e["read"+r[1]]()}this.toolMap[s.id]=s,e.pos=o}}readHeader(e){if("TGK"!==String.fromCharCode(e.readUint8(),e.readUint8(),e.readUint8()))throw"invalid header";this.compressed=1===e.readUint8(),this.dataSize=e.readUint32(),this.tegakiVersion[0]=e.readUint8(),this.tegakiVersion[1]=e.readUint8(),this.tegakiVersion[2]=e.readUint8(),this.formatVersion=e.readUint8()}decompressData(e){return UZIP.inflateRaw(new Uint8Array(e.buf,e.pos),new Uint8Array(this.dataSize))}readMeta(e){var t,a;if(a=e.readUint16(),t=e.pos+a-2,this.startTimeStamp=1e3*e.readUint32(),this.endTimeStamp=1e3*e.readUint32(),this.canvasWidth=e.readUint16(),this.canvasHeight=e.readUint16(),this.canvasWidth>this.maxCanvasWH||this.canvasHeight>this.maxCanvasWH)throw"canvas too large";this.bgColor[0]=e.readUint8(),this.bgColor[1]=e.readUint8(),this.bgColor[2]=e.readUint8(),this.toolColor[0]=e.readUint8(),this.toolColor[1]=e.readUint8(),this.toolColor[2]=e.readUint8(),this.toolId=e.readUint8(),e.pos=t}readEventStack(e){var t,a,i,s,r;if(r=this.getEventIdMap(),(a=e.readUint32())<1||a>this.maxEventCount)throw"invalid event count";for(t=0;t0&&(TegakiUI.statusTimeout=setTimeout(TegakiUI.clearMsg,5e3))},clearMsg:function(){TegakiUI.statusTimeout&&(clearTimeout(TegakiUI.statusTimeout),TegakiUI.statusTimeout=0),$T.id("tegaki-status-output").textContent=""},buildUI:function(){var e,t,a,i,s,r;return(e=$T.el("div")).id="tegaki",(a=$T.el("div")).id="tegaki-menu-cnt",Tegaki.replayMode?(a.appendChild(TegakiUI.buildViewerMenuBar()),a.appendChild(TegakiUI.buildReplayControls())):a.appendChild(TegakiUI.buildMenuBar()),a.appendChild(TegakiUI.buildToolModeBar()),e.appendChild(a),e.appendChild(TegakiUI.buildDummyFilePicker()),(t=$T.el("div")).id="tegaki-tools-cnt",t.appendChild(TegakiUI.buildToolsMenu()),e.appendChild(t),[r,s]=TegakiUI.buildCanvasCnt(),e.appendChild(r),(i=$T.el("div")).id="tegaki-ctrl-cnt",i.appendChild(TegakiUI.buildZoomCtrlGroup()),i.appendChild(TegakiUI.buildColorCtrlGroup(Tegaki.toolColor)),i.appendChild(TegakiUI.buildSizeCtrlGroup()),i.appendChild(TegakiUI.buildAlphaCtrlGroup()),i.appendChild(TegakiUI.buildFlowCtrlGroup()),i.appendChild(TegakiUI.buildLayersCtrlGroup()),e.appendChild(i),e.appendChild(TegakiUI.buildStatusCnt()),[e,r,s]},buildDummyFilePicker:function(){var e=$T.el("input");return e.type="file",e.id="tegaki-filepicker",e.className="tegaki-hidden",e.accept="image/png, image/jpeg",$T.on(e,"change",Tegaki.onOpenFileSelected),e},buildMenuBar:function(){var e,t;return(e=$T.el("div")).id="tegaki-menu-bar",(t=$T.el("span")).className="tegaki-mb-btn",t.textContent=TegakiStrings.newCanvas,$T.on(t,"click",Tegaki.onNewClick),e.appendChild(t),(t=$T.el("span")).className="tegaki-mb-btn",t.textContent=TegakiStrings.open,$T.on(t,"click",Tegaki.onOpenClick),e.appendChild(t),(t=$T.el("span")).className="tegaki-mb-btn",t.textContent=TegakiStrings["export"],$T.on(t,"click",Tegaki.onExportClick),e.appendChild(t),(t=$T.el("span")).id="tegaki-undo-btn",t.className="tegaki-mb-btn",t.textContent=TegakiStrings.undo,t.title=TegakiKeybinds.getCaption("undo"),$T.on(t,"click",Tegaki.onUndoClick),e.appendChild(t),(t=$T.el("span")).id="tegaki-redo-btn",t.className="tegaki-mb-btn",t.textContent=TegakiStrings.redo,t.title=TegakiKeybinds.getCaption("redo"),$T.on(t,"click",Tegaki.onRedoClick),e.appendChild(t),(t=$T.el("span")).className="tegaki-mb-btn",t.textContent=TegakiStrings.close,$T.on(t,"click",Tegaki.onCancelClick),e.appendChild(t),(t=$T.el("span")).id="tegaki-finish-btn",t.className="tegaki-mb-btn",t.textContent=TegakiStrings.finish,$T.on(t,"click",Tegaki.onDoneClick),e.appendChild(t),e},buildViewerMenuBar:function(){var e,t;return(e=$T.el("div")).id="tegaki-menu-bar",(t=$T.el("span")).id="tegaki-finish-btn",t.className="tegaki-mb-btn",t.textContent=TegakiStrings.close,$T.on(t,"click",Tegaki.onCloseViewerClick),e.appendChild(t),e},buildToolModeBar:function(){var e,t,a,i;return(e=$T.el("div")).id="tegaki-toolmode-bar",Tegaki.tool||e.classList.add("tegaki-hidden"),(t=$T.el("span")).id="tegaki-tool-mode-dynamics",t.className="tegaki-toolmode-grp",(a=$T.el("span")).className="tegaki-toolmode-lbl",a.textContent=TegakiStrings.pressure,t.appendChild(a),(a=$T.el("span")).id="tegaki-tool-mode-dynamics-ctrl",a.className="tegaki-toolmode-ctrl",(i=$T.el("span")).id="tegaki-tool-mode-dynamics-size",i.className="tegaki-sw-btn",i.textContent=TegakiStrings.size,$T.on(i,"mousedown",Tegaki.onToolPressureSizeClick),a.appendChild(i),(i=$T.el("span")).id="tegaki-tool-mode-dynamics-alpha",i.className="tegaki-sw-btn",i.textContent=TegakiStrings.alpha,$T.on(i,"mousedown",Tegaki.onToolPressureAlphaClick),a.appendChild(i),(i=$T.el("span")).id="tegaki-tool-mode-dynamics-flow",i.className="tegaki-sw-btn",i.textContent=TegakiStrings.flow,$T.on(i,"mousedown",Tegaki.onToolPressureFlowClick),a.appendChild(i),t.appendChild(a),e.appendChild(t),(t=$T.el("span")).id="tegaki-tool-mode-mask",t.className="tegaki-toolmode-grp",(a=$T.el("span")).id="tegaki-toolmode-ctrl-tip",a.className="tegaki-toolmode-ctrl",(i=$T.el("span")).id="tegaki-tool-mode-mask-alpha",i.className="tegaki-sw-btn",i.textContent=TegakiStrings.preserveAlpha,$T.on(i,"mousedown",Tegaki.onToolPreserveAlphaClick),a.appendChild(i),t.appendChild(a),e.appendChild(t),(t=$T.el("span")).id="tegaki-tool-mode-tip",t.className="tegaki-toolmode-grp",(a=$T.el("span")).className="tegaki-toolmode-lbl",a.textContent=TegakiStrings.tip,t.appendChild(a),(a=$T.el("span")).id="tegaki-tool-mode-tip-ctrl",a.className="tegaki-toolmode-ctrl",t.appendChild(a),e.appendChild(t),e},buildToolsMenu:function(){var e,t,a,i;(e=$T.el("div")).id="tegaki-tools-grid";for(i in Tegaki.tools)(t=$T.el("span")).setAttribute("data-tool",i),a=TegakiStrings[i],Tegaki.tools[i].keybind&&(a+=" ("+Tegaki.tools[i].keybind.toUpperCase()+")"),t.setAttribute("title",a),t.id="tegaki-tool-btn-"+i,t.className="tegaki-tool-btn tegaki-icon tegaki-"+i,$T.on(t,"click",Tegaki.onToolClick),e.appendChild(t);return e},buildCanvasCnt:function(){var e,t,a;return(e=$T.el("div")).id="tegaki-canvas-cnt",(t=$T.el("div")).id="tegaki-layers-wrap",(a=$T.el("div")).id="tegaki-layers",t.appendChild(a),e.appendChild(t),[e,a]},buildCtrlGroup:function(e,t){var a,i;return(a=$T.el("div")).className="tegaki-ctrlgrp",e&&(a.id="tegaki-ctrlgrp-"+e),t!==undefined&&((i=$T.el("div")).className="tegaki-ctrlgrp-title",i.textContent=t,a.appendChild(i)),a},buildLayersCtrlGroup:function(){var e,t,a,i;return t=this.buildCtrlGroup("layers",TegakiStrings.layers),(a=$T.el("div")).id="tegaki-layers-opts",(i=$T.el("div")).id="tegaki-layer-alpha-cell",(e=$T.el("span")).className="tegaki-label-xs tegaki-lbl-c tegaki-drag-lbl",e.textContent=TegakiStrings.alpha,$T.on(e,"pointerdown",Tegaki.onLayerAlphaDragStart),i.appendChild(e),(e=$T.el("input")).id="tegaki-layer-alpha-opt",e.className="tegaki-stealth-input tegaki-range-lbl-xs",e.setAttribute("maxlength",3),$T.on(e,"input",Tegaki.onLayerAlphaChange),i.appendChild(e),a.appendChild(i),t.appendChild(a),(e=$T.el("div")).id="tegaki-layers-grid",t.appendChild(e),(a=$T.el("div")).id="tegaki-layers-ctrl",(e=$T.el("span")).title=TegakiStrings.addLayer,e.className="tegaki-ui-btn tegaki-icon tegaki-plus",$T.on(e,"click",Tegaki.onLayerAddClick),a.appendChild(e),(e=$T.el("span")).title=TegakiStrings.delLayers,e.className="tegaki-ui-btn tegaki-icon tegaki-minus",$T.on(e,"click",Tegaki.onLayerDeleteClick),a.appendChild(e),(e=$T.el("span")).id="tegaki-layer-merge",e.title=TegakiStrings.mergeLayers,e.className="tegaki-ui-btn tegaki-icon tegaki-level-down",$T.on(e,"click",Tegaki.onMergeLayersClick),a.appendChild(e),(e=$T.el("span")).id="tegaki-layer-up",e.title=TegakiStrings.moveLayerUp,e.setAttribute("data-up","1"),e.className="tegaki-ui-btn tegaki-icon tegaki-up-open",$T.on(e,"click",Tegaki.onMoveLayerClick),a.appendChild(e),(e=$T.el("span")).id="tegaki-layer-down",e.title=TegakiStrings.moveLayerDown,e.className="tegaki-ui-btn tegaki-icon tegaki-down-open",$T.on(e,"click",Tegaki.onMoveLayerClick),a.appendChild(e),t.appendChild(a),t},buildSizeCtrlGroup:function(){var e,t,a;return t=this.buildCtrlGroup("size",TegakiStrings.size),(a=$T.el("div")).className="tegaki-ctrlrow",(e=$T.el("input")).id="tegaki-size",e.className="tegaki-ctrl-range",e.min=1,e.max=Tegaki.maxSize,e.type="range",e.title=TegakiKeybinds.getCaption("toolSize"),$T.on(e,"input",Tegaki.onToolSizeChange),a.appendChild(e),(e=$T.el("input")).id="tegaki-size-lbl",e.setAttribute("maxlength",3),e.className="tegaki-stealth-input tegaki-range-lbl",$T.on(e,"input",Tegaki.onToolSizeChange),a.appendChild(e),t.appendChild(a),t},buildAlphaCtrlGroup:function(){var e,t,a;return t=this.buildCtrlGroup("alpha",TegakiStrings.alpha),(a=$T.el("div")).className="tegaki-ctrlrow",(e=$T.el("input")).id="tegaki-alpha",e.className="tegaki-ctrl-range",e.min=0,e.max=100,e.step=1,e.type="range",$T.on(e,"input",Tegaki.onToolAlphaChange),a.appendChild(e),(e=$T.el("input")).id="tegaki-alpha-lbl",e.setAttribute("maxlength",3),e.className="tegaki-stealth-input tegaki-range-lbl",$T.on(e,"input",Tegaki.onToolAlphaChange),a.appendChild(e),t.appendChild(a),t},buildFlowCtrlGroup:function(){var e,t,a;return t=this.buildCtrlGroup("flow",TegakiStrings.flow),(a=$T.el("div")).className="tegaki-ctrlrow",(e=$T.el("input")).id="tegaki-flow",e.className="tegaki-ctrl-range",e.min=0,e.max=100,e.step=1,e.type="range",$T.on(e,"input",Tegaki.onToolFlowChange),a.appendChild(e),(e=$T.el("input")).id="tegaki-flow-lbl",e.setAttribute("maxlength",3),e.className="tegaki-stealth-input tegaki-range-lbl",$T.on(e,"input",Tegaki.onToolFlowChange),a.appendChild(e),t.appendChild(a),t},buildZoomCtrlGroup:function(){var e,t,a;return a=this.buildCtrlGroup("zoom",TegakiStrings.zoom),(t=$T.el("div")).className="tegaki-ui-btn tegaki-icon tegaki-plus",t.id="tegaki-zoomin-btn",t.setAttribute("data-in",1),$T.on(t,"click",Tegaki.onZoomChange),a.appendChild(t),(t=$T.el("div")).className="tegaki-ui-btn tegaki-icon tegaki-minus",t.id="tegaki-zoomout-btn",t.setAttribute("data-out",1),$T.on(t,"click",Tegaki.onZoomChange),a.appendChild(t),(e=$T.el("div")).id="tegaki-zoom-lbl",a.appendChild(e),a},buildColorCtrlGroup:function(e){var t,a,i,s,r,n,o,l,g;for(n=/ Edge\//i.test(window.navigator.userAgent),s=this.buildCtrlGroup("color",TegakiStrings.color),(a=$T.el("div")).id="tegaki-color-ctrl",(t=$T.el("div")).id="tegaki-color",n&&t.classList.add("tegaki-hidden"),t.style.backgroundColor=e,$T.on(t,"mousedown",Tegaki.onMainColorClick),a.appendChild(t),(t=$T.el("div")).id="tegaki-palette-switcher",(i=$T.el("span")).id="tegaki-palette-prev-btn",i.title=TegakiStrings.switchPalette,i.setAttribute("data-prev","1"),i.className="tegaki-ui-btn tegaki-icon tegaki-left-open tegaki-disabled",$T.on(i,"click",Tegaki.onSwitchPaletteClick),t.appendChild(i),(i=$T.el("span")).id="tegaki-palette-next-btn",i.title=TegakiStrings.switchPalette,i.className="tegaki-ui-btn tegaki-icon tegaki-right-open",$T.on(i,"click",Tegaki.onSwitchPaletteClick),t.appendChild(i),a.appendChild(t),s.appendChild(a),(a=$T.el("div")).id="tegaki-color-grids",o=0;o0&&(g+=" tegaki-hidden"),t.className=g;for(r of l)(i=$T.el("div")).title=TegakiStrings.paletteSlotReplace,i.className="tegaki-color-btn",i.setAttribute("data-color",r),i.style.backgroundColor=r,$T.on(i,"mousedown",Tegaki.onPaletteColorClick),t.appendChild(i);a.appendChild(t)}return s.appendChild(a),(t=$T.el("input")).id="tegaki-colorpicker",!n&&t.classList.add("tegaki-invis"),t.value=r,t.type="color",$T.on(t,"change",Tegaki.onColorPicked),s.appendChild(t),s},buildStatusCnt:function(){var e,t;return(e=$T.el("div")).id="tegaki-status-cnt",Tegaki.saveReplay&&((t=$T.el("div")).id="tegaki-status-replay",t.textContent="\u2b24",t.setAttribute("title",TegakiStrings.recordingEnabled),e.appendChild(t)),(t=$T.el("div")).id="tegaki-status-output",e.appendChild(t),(t=$T.el("div")).id="tegaki-status-version",t.textContent="tegaki.js v"+Tegaki.VERSION,e.appendChild(t),e},buildReplayControls:function(){var e,t,a;return(e=$T.el("div")).id="tegaki-replay-controls",e.className="tegaki-hidden",(t=$T.el("span")).id="tegaki-replay-gapless-btn",t.className="tegaki-ui-cb-w",$T.on(t,"click",Tegaki.onReplayGaplessClick),(a=$T.el("span")).id="tegaki-replay-gapless-cb",a.className="tegaki-ui-cb",t.appendChild(a),(a=$T.el("span")).className="tegaki-menu-lbl",a.textContent=TegakiStrings.gapless,t.appendChild(a),e.appendChild(t),(t=$T.el("span")).id="tegaki-replay-play-btn",t.className="tegaki-ui-btn tegaki-icon tegaki-play",t.setAttribute("title",TegakiStrings.play),$T.on(t,"click",Tegaki.onReplayPlayPauseClick),e.appendChild(t),(t=$T.el("span")).className="tegaki-ui-btn tegaki-icon tegaki-to-start",t.setAttribute("title",TegakiStrings.rewind),$T.on(t,"click",Tegaki.onReplayRewindClick),e.appendChild(t),(t=$T.el("span")).id="tegaki-replay-slower-btn",t.className="tegaki-ui-btn tegaki-icon tegaki-fast-bw",t.setAttribute("title",TegakiStrings.slower),$T.on(t,"click",Tegaki.onReplaySlowDownClick),e.appendChild(t),(a=$T.el("span")).id="tegaki-replay-speed-lbl",a.className="tegaki-menu-lbl",a.textContent="1.0",e.appendChild(a),(t=$T.el("span")).id="tegaki-replay-faster-btn",t.className="tegaki-ui-btn tegaki-icon tegaki-fast-fw",t.setAttribute("title",TegakiStrings.faster),$T.on(t,"click",Tegaki.onReplaySpeedUpClick),e.appendChild(t),(a=$T.el("span")).id="tegaki-replay-now-lbl",a.className="tegaki-menu-lbl",a.textContent="00:00",e.appendChild(a),(a=$T.el("span")).id="tegaki-replay-end-lbl",a.className="tegaki-menu-lbl",a.textContent="00:00",e.appendChild(a),e},buildLayerGridCell:function(e){var t,a,i;return(t=$T.el("div")).id="tegaki-layers-cell-"+e.id,t.className="tegaki-layers-cell",t.setAttribute("data-id",e.id),t.draggable=!0,t.setAttribute("data-id",e.id),$T.on(t,"pointerdown",TegakiUI.onLayerSelectorPtrDown),$T.on(t,"pointerup",Tegaki.onLayerSelectorClick),$T.on(t,"dragstart",TegakiUI.onLayerDragStart),$T.on(t,"dragover",TegakiUI.onLayerDragOver),$T.on(t,"drop",TegakiUI.onLayerDragDrop),$T.on(t,"dragend",TegakiUI.onLayerDragEnd),$T.on(t,"dragleave",TegakiUI.onLayerDragLeave),$T.on(t,"dragexit",TegakiUI.onLayerDragLeave),(i=$T.el("div")).className="tegaki-layers-cell-v",(a=$T.el("span")).id="tegaki-layers-cb-v-"+e.id,a.className="tegaki-ui-cb",a.setAttribute("data-id",e.id),a.title=TegakiStrings.toggleVisibility,$T.on(a,"click",Tegaki.onLayerToggleVisibilityClick),e.visible&&(a.className+=" tegaki-ui-cb-a"),i.appendChild(a),t.appendChild(i),(i=$T.el("div")).className="tegaki-layers-cell-p",(a=$T.el("canvas")).id="tegaki-layers-p-canvas-"+e.id,a.className="tegaki-alpha-bg-xs",[a.width,a.height]=TegakiUI.getLayerPreviewSize(),i.appendChild(a),t.appendChild(i),(i=$T.el("div")).className="tegaki-layers-cell-n",(a=$T.el("div")).id="tegaki-layer-name-"+e.id,a.className="tegaki-ellipsis",a.setAttribute("data-id",e.id),a.textContent=e.name,$T.on(a,"dblclick",Tegaki.onLayerNameChangeClick),i.appendChild(a),t.appendChild(i),t},onLayerSelectorPtrDown:function(e){"mouse"===e.pointerType?this.hasAttribute("data-nodrag")&&(this.removeAttribute("data-nodrag"),$T.on(this,"dragstart",TegakiUI.onLayerDragStart)):this.hasAttribute("data-nodrag")||(this.setAttribute("data-nodrag",1),$T.off(this,"dragstart",TegakiUI.onLayerDragStart))},onLayerDragStart:function(e){var t,a;e.ctrlKey||(TegakiUI.draggedNode=null,$T.id("tegaki-layers-grid").children[1]?(a=+e.target.getAttribute("data-id"),(t=$T.el("div")).className="tegaki-invis",e.dataTransfer.setDragImage(t,0,0),e.dataTransfer.setData("text/plain",a),e.dataTransfer.effectAllowed="move",TegakiUI.draggedNode=e.target,TegakiUI.updateLayersGridDragExt(!0)):e.preventDefault())},onLayerDragOver:function(e){e.preventDefault(),e.dataTransfer.dropEffect="move",TegakiUI.updateLayersGridDragEffect(e.target,+TegakiUI.draggedNode.getAttribute("data-id"))},onLayerDragLeave:function(){TegakiUI.updateLayersGridDragEffect()},onLayerDragEnd:function(){TegakiUI.draggedNode=null,TegakiUI.updateLayersGridDragExt(!1),TegakiUI.updateLayersGridDragEffect()},onLayerDragDrop:function(e){var t,a,i;e.preventDefault(),TegakiUI.draggedNode=null,[t]=TegakiUI.layersGridFindDropTgt(e.target),a=+e.dataTransfer.getData("text/plain"),TegakiUI.updateLayersGridDragEffect(e.target.parentNode),TegakiUI.updateLayersGridDragExt(!1),TegakiUI.layersGridCanDrop(t,a)&&(i=t?TegakiLayers.getLayerPosById(t):Tegaki.layers.length,TegakiLayers.selectedLayersHas(a)||Tegaki.setActiveLayer(a),Tegaki.moveSelectedLayers(i))},updateLayersGridDragExt:function(e){var t,a;(t=$T.id("tegaki-layers-grid")).children[1]&&(e?((a=$T.el("div")).id="tegaki-layers-cell-dx",a.draggable=!0,$T.on(a,"dragover",TegakiUI.onLayerDragOver),$T.on(a,"drop",TegakiUI.onLayerDragDrop),t.parentNode.insertBefore(a,t)):(a=$T.id("tegaki-layers-cell-dx"))&&a.parentNode.removeChild(a))},updateLayersGridDragEffect:function(e,t){var a,i,s;i=$T.cls("tegaki-layers-cell-d",$T.id("tegaki-ctrlgrp-layers"));for(a of i)a.classList.remove("tegaki-layers-cell-d");e&&t&&([s,e]=TegakiUI.layersGridFindDropTgt(e),TegakiUI.layersGridCanDrop(s,t)&&(e||(e=$T.id("tegaki-layers-grid")),e.classList.add("tegaki-layers-cell-d")))},layersGridFindDropTgt:function(e){var t,a;for(t=+e.getAttribute("data-id"),a=$T.id("tegaki-ctrlgrp-layers");!e.draggable&&e!==a;)t=+(e=e.parentNode).getAttribute("data-id");return e!==a&&e.draggable?[t,e]:[0,null]},layersGridCanDrop:function(e,t){var a;if(e===t)return!1;if((a=$T.id("tegaki-layers-cell-"+t)).previousElementSibling){if(+a.previousElementSibling.getAttribute("data-id")===e)return!1}else if(!e)return!1;return!0},setReplayMode:function(e){Tegaki.bg.classList[e?"add":"remove"]("tegaki-replay-mode")},onToolChanged:function(){$T.id("tegaki-toolmode-bar").classList.remove("tegaki-hidden"),TegakiUI.updateToolSize(),TegakiUI.updateToolAlpha(),TegakiUI.updateToolFlow(),TegakiUI.updateToolModes()},updateLayerAlphaOpt:function(){$T.id("tegaki-layer-alpha-opt").value=Math.round(100*Tegaki.activeLayer.alpha)},updateLayerName:function(e){var t;(t=$T.id("tegaki-layer-name-"+e.id))&&(t.textContent=e.name)},updateLayerPreview:function(e){var t,a;(t=$T.id("tegaki-layers-p-canvas-"+e.id))&&((a=TegakiUI.getLayerPreviewCtx(e))||((a=t.getContext("2d")).imageSmoothingEnabled=!1,TegakiUI.setLayerPreviewCtx(e,a)),$T.clearCtx(a),a.drawImage(e.canvas,0,0,t.width,t.height))},updateLayerPreviewSize:function(e){var t,a,i;i=TegakiUI.getLayerPreviewSize();for(a of Tegaki.layers)(t=$T.id("tegaki-layers-p-canvas-"+a.id))&&([t.width,t.height]=i,e&&TegakiUI.updateLayerPreview(a))},getLayerPreviewCtx:function(e){TegakiUI.layerPreviewCtxCache.get(e)},setLayerPreviewCtx:function(e,t){TegakiUI.layerPreviewCtxCache.set(e,t)},deleteLayerPreviewCtx:function(e){TegakiUI.layerPreviewCtxCache["delete"](e)},updateLayersGridClear:function(){$T.id("tegaki-layers-grid").innerHTML=""},updateLayersGrid:function(){var e,t,a,i;a=$T.frag();for(e of Tegaki.layers)t=TegakiUI.buildLayerGridCell(e),a.insertBefore(t,a.firstElementChild);TegakiUI.updateLayersGridClear(),i.appendChild(a)},updateLayersGridActive:function(e){var t;(t=$T.cls("tegaki-layers-cell-a",$T.id("tegaki-layers-grid"))[0])&&t.classList.remove("tegaki-layers-cell-a"),(t=$T.id("tegaki-layers-cell-"+e))&&t.classList.add("tegaki-layers-cell-a"),TegakiUI.updateLayerAlphaOpt()},updateLayersGridAdd:function(e,t){var a,i,s;a=TegakiUI.buildLayerGridCell(e),i=$T.id("tegaki-layers-grid"),s=t?$T.id("tegaki-layers-cell-"+t):null,i.insertBefore(a,s)},updateLayersGridRemove:function(e){var t;(t=$T.id("tegaki-layers-cell-"+e))&&t.parentNode.removeChild(t)},updayeLayersGridOrder:function(){var e,t,a;t=$T.id("tegaki-layers-grid");for(e of Tegaki.layers)a=$T.id("tegaki-layers-cell-"+e.id),t.insertBefore(a,t.firstElementChild)},updateLayersGridVisibility:function(e,t){var a;(a=$T.id("tegaki-layers-cb-v-"+e))&&(t?a.classList.add("tegaki-ui-cb-a"):a.classList.remove("tegaki-ui-cb-a"))},updateLayersGridSelectedClear:function(){var e,t;for(e of Tegaki.layers)(t=$T.id("tegaki-layers-cell-"+e.id))&&t.classList.remove("tegaki-layers-cell-s")},updateLayersGridSelectedSet:function(e,t){var a;(a=$T.id("tegaki-layers-cell-"+e))&&(t?a.classList.add("tegaki-layers-cell-s"):a.classList.remove("tegaki-layers-cell-s"))},updateToolSize:function(){var e=$T.id("tegaki-ctrlgrp-size");Tegaki.tool.useSize?(e.classList.remove("tegaki-hidden"),$T.id("tegaki-size-lbl").value=Tegaki.tool.size,$T.id("tegaki-size").value=Tegaki.tool.size):e.classList.add("tegaki-hidden")},updateToolAlpha:function(){var e,t=$T.id("tegaki-ctrlgrp-alpha");Tegaki.tool.useAlpha?(t.classList.remove("tegaki-hidden"),e=Math.round(100*Tegaki.tool.alpha),$T.id("tegaki-alpha-lbl").value=e,$T.id("tegaki-alpha").value=e):t.classList.add("tegaki-hidden")},updateToolFlow:function(){var e,t=$T.id("tegaki-ctrlgrp-flow");Tegaki.tool.useFlow?(t.classList.remove("tegaki-hidden"),e=Math.round(100*Tegaki.tool.flow),$T.id("tegaki-flow-lbl").value=e,$T.id("tegaki-flow").value=e):t.classList.add("tegaki-hidden")},updateToolDynamics:function(){var e,t;e=$T.id("tegaki-tool-mode-dynamics"),Tegaki.tool.usesDynamics()?(t=$T.id("tegaki-tool-mode-dynamics-size"),Tegaki.tool.useSizeDynamics?(Tegaki.tool.sizeDynamicsEnabled?t.classList.add("tegaki-sw-btn-a"):t.classList.remove("tegaki-sw-btn-a"),t.classList.remove("tegaki-hidden")):t.classList.add("tegaki-hidden"),t=$T.id("tegaki-tool-mode-dynamics-alpha"),Tegaki.tool.useAlphaDynamics?(Tegaki.tool.alphaDynamicsEnabled?t.classList.add("tegaki-sw-btn-a"):t.classList.remove("tegaki-sw-btn-a"),t.classList.remove("tegaki-hidden")):t.classList.add("tegaki-hidden"),t=$T.id("tegaki-tool-mode-dynamics-flow"),Tegaki.tool.useFlowDynamics?(Tegaki.tool.flowDynamicsEnabled?t.classList.add("tegaki-sw-btn-a"):t.classList.remove("tegaki-sw-btn-a"),t.classList.remove("tegaki-hidden")):t.classList.add("tegaki-hidden"),e.classList.remove("tegaki-hidden")):e.classList.add("tegaki-hidden")},updateToolShape:function(){var e,t,a,i,s;if(t=$T.id("tegaki-tool-mode-tip"),Tegaki.tool.tipList){for(s=Tegaki.tool.tipList,(a=$T.id("tegaki-tool-mode-tip-ctrl")).innerHTML="",e=0;e=Tegaki.zoomFactorList.length?$T.id("tegaki-zoomin-btn").classList.add("tegaki-disabled"):$T.id("tegaki-zoomin-btn").classList.remove("tegaki-disabled"),Tegaki.zoomLevel+Tegaki.zoomBaseLevel<=0?$T.id("tegaki-zoomout-btn").classList.add("tegaki-disabled"):$T.id("tegaki-zoomout-btn").classList.remove("tegaki-disabled")},updateColorPalette:function(){var e,t,a;a=Tegaki.colorPaletteId,t=$T.cls("tegaki-color-grid",$T.id("tegaki-color-grids"));for(e of t)+e.getAttribute("data-id")===a?e.classList.remove("tegaki-hidden"):e.classList.add("tegaki-hidden");e=$T.id("tegaki-palette-prev-btn"),0===a?e.classList.add("tegaki-disabled"):e.classList.remove("tegaki-disabled"),e=$T.id("tegaki-palette-next-btn"),a===TegakiColorPalettes.length-1?e.classList.add("tegaki-disabled"):e.classList.remove("tegaki-disabled")},updateReplayTime:function(e){var t,a,i=Tegaki.replayViewer;(t=i.getCurrentPos())>(a=i.getDuration())&&(t=a),$T.id("tegaki-replay-now-lbl").textContent=$T.msToHms(t),e&&($T.id("tegaki-replay-end-lbl").textContent=$T.msToHms(a))},updateReplayControls:function(){TegakiUI.updateReplayGapless(),TegakiUI.updateReplayPlayPause(),TegakiUI.updateReplaySpeed()},updateReplayGapless:function(){var e,t=Tegaki.replayViewer;e=$T.id("tegaki-replay-gapless-cb"),t.gapless?e.classList.add("tegaki-ui-cb-a"):e.classList.remove("tegaki-ui-cb-a")},updateReplayPlayPause:function(){var e,t=Tegaki.replayViewer;e=$T.id("tegaki-replay-play-btn"),t.playing?(e.classList.remove("tegaki-play"),e.classList.add("tegaki-pause"),e.setAttribute("title",TegakiStrings.pause)):(e.classList.add("tegaki-play"),e.classList.remove("tegaki-pause"),e.setAttribute("title",TegakiStrings.play),t.getCurrentPos()>8&255},readUint:function(e,t){return 16777216*e[t+3]+(e[t+2]<<16|e[t+1]<<8|e[t])},writeUint:function(e,t,a){e[t]=255&a,e[t+1]=a>>8&255,e[t+2]=a>>16&255,e[t+3]=a>>24&255},readASCII:function(e,t,a){for(var i="",s=0;s>6,e[t+s+1]=128|n>>0&63,s+=2;else if(0==(4294901760&n))e[t+s]=224|n>>12,e[t+s+1]=128|n>>6&63,e[t+s+2]=128|n>>0&63,s+=3;else{if(0!=(4292870144&n))throw"e";e[t+s]=240|n>>18,e[t+s+1]=128|n>>12&63,e[t+s+2]=128|n>>6&63,e[t+s+3]=128|n>>0&63,s+=4}}return s},sizeUTF8:function(e){for(var t=e.length,a=0,i=0;i>>3}var h=r.lits,p=r.strt,k=r.prev,T=0,u=0,y=0,f=0,v=0,m=0;c>2&&(p[m=UZIP.F._hash(e,0)]=0);for(l=0;l14e3||u>26697)&&c-l>100&&(d>>16,w=65535&L;if(0!=L){w=65535&L;var S=n(C=L>>>16,r.of0);r.lhst[257+S]++;var I=n(w,r.df0);r.dhst[I]++,f+=r.exb[S]+r.dxb[I],h[T]=C<<23|l-d,h[T+1]=w<<16|S<<8|I,T+=2,d=l+C}else r.lhst[e[l]]++;u++}}for(y==l&&0!=e.length||(d>>3},UZIP.F._bestMatch=function(e,t,a,i,s,r){var n=32767&t,o=a[n],l=n-o+32768&32767;if(o==n||i!=UZIP.F._hash(e,t-l))return 0;for(var g=0,d=0,c=Math.min(32767,t);l<=c&&0!=--r&&o!=n;){if(0==g||e[t+g]==e[t+g-l]){var h=UZIP.F._howLong(e,t,l);if(h>g){if(d=l,(g=h)>=s)break;l+2p&&(p=u,o=T)}}}l+=(n=o)-(o=a[n])+32768&32767}return g<<16|d},UZIP.F._howLong=function(e,t,a){if(e[t]!=e[t-a]||e[t+1]!=e[t+1-a]||e[t+2]!=e[t+2-a])return 0;var i=t,s=Math.min(e.length,t+258);for(t+=3;t>>23,z=A+(8388607&E);A>16,M=x>>8&255,R=255&x;m(o,l=UZIP.F._writeLit(257+M,I,o,l),$-f.of0[M]),l+=f.exb[M],v(o,l=UZIP.F._writeLit(R,U,o,l),F-f.df0[R]),l+=f.dxb[R],A+=$}}l=UZIP.F._writeLit(256,I,o,l)}return l},UZIP.F._copyExact=function(e,t,a,i,s){var r=s>>>3;return i[r]=a,i[r+1]=a>>>8,i[r+2]=255-i[r],i[r+3]=255-i[r+1],r+=4,i.set(new Uint8Array(e.buffer,t,a),r),s+(a+4<<3)},UZIP.F.getTrees=function(){for(var e=UZIP.F.U,t=UZIP.F._hufTree(e.lhst,e.ltree,15),a=UZIP.F._hufTree(e.dhst,e.dtree,15),i=[],s=UZIP.F._lenCodes(e.ltree,i),r=[],n=UZIP.F._lenCodes(e.dtree,r),o=0;o4&&0==e.itree[1+(e.ordr[g-1]<<1)];)g--;return[t,a,l,s,n,g,i,r]},UZIP.F.getSecond=function(e){for(var t=[],a=0;a>1)+",");return t},UZIP.F.contSize=function(e,t){for(var a=0,i=0;i15&&(UZIP.F._putsE(a,i,n,o),i+=o)}return i},UZIP.F._lenCodes=function(e,t){for(var a=e.length;2!=a&&0==e[a-1];)a-=2;for(var i=0;i>>1,138))<11?t.push(17,g-3):t.push(18,g-11),i+=2*g-2}else if(s==o&&r==s&&n==s){for(l=i+5;l+2>>1,6);t.push(16,g-3),i+=2*g-2}else t.push(s,0)}return a>>>1},UZIP.F._hufTree=function(e,t,a){var i=[],s=e.length,r=t.length,n=0;for(n=0;na&&(UZIP.F.restrictDepth(l,a,T),T=a),n=0;nt;i++){var n=e[i].d;e[i].d=t,r+=s-(1<>>=a-t;r>0;){(n=e[i].d)=0;i--)e[i].d==t&&r<0&&(e[i].d--,r++)},UZIP.F._goodIndex=function(e,t){var a=0;return t[16|a]<=e&&(a|=16),t[8|a]<=e&&(a|=8),t[4|a]<=e&&(a|=4),t[2|a]<=e&&(a|=2),t[1|a]<=e&&(a|=1),a},UZIP.F._writeLit=function(e,t,a,i){return UZIP.F._putsF(a,i,t[e<<1]),i+t[1+(e<<1)]},UZIP.F.inflate=function(e,t){var a=Uint8Array;if(3==e[0]&&0==e[1])return t||new a(0);var i=UZIP.F,s=i._bitsF,r=i._bitsE,n=i._decodeTiny,o=i.makeCodes,l=i.codes2map,g=i._get17,d=i.U,c=null==t;c&&(t=new a(e.length>>>2<<3));for(var h,p,k=0,T=0,u=0,y=0,f=0,v=0,m=0,b=0,L=0;0==k;)if(k=s(e,L,1),T=s(e,L+1,2),L+=3,0!=T){if(c&&(t=UZIP.F._check(t,b+(1<<17))),1==T&&(h=d.flmap,p=d.fdmap,v=511,m=31),2==T){u=r(e,L,5)+257,y=r(e,L+5,5)+1,f=r(e,L+10,4)+4;L+=14;for(var C=0;C<38;C+=2)d.itree[C]=0,d.itree[C+1]=0;var w=1;for(C=0;Cw&&(w=S)}L+=3*f,o(d.itree,w),l(d.itree,w,d.imap),h=d.lmap,p=d.dmap,L=n(d.imap,(1<>>4;if(A>>>8==0)t[b++]=A;else{if(256==A)break;var D=b+A-254;if(A>264){var E=d.ldef[A-257];D=b+(E>>>3)+r(e,L,7&E),L+=7&E}var $=p[g(e,L)&m];L+=15&$;var z=$>>>4,x=d.ddef[z],F=(x>>>4)+s(e,L,15&x);for(L+=15&x,c&&(t=UZIP.F._check(t,b+(1<<17)));b>>3),R=e[M-4]|e[M-3]<<8;c&&(t=UZIP.F._check(t,b+R)),t.set(new a(e.buffer,e.byteOffset+M,R),b),L=M+R<<3,b+=R}return t.length==b?t:t.slice(0,b)},UZIP.F._check=function(e,t){var a=e.length;if(t<=a)return e;var i=new Uint8Array(Math.max(a<<1,t));return i.set(e,0),i},UZIP.F._decodeTiny=function(e,t,a,i,s,r){for(var n=UZIP.F._bitsE,o=UZIP.F._get17,l=0;l>>4;if(d<=15)r[l]=d,l++;else{var c=0,h=0;16==d?(h=3+n(i,s,2),s+=2,c=r[l-1]):17==d?(h=3+n(i,s,3),s+=3):18==d&&(h=11+n(i,s,7),s+=7);for(var p=l+h;l>>1;rs&&(s=o),r++}for(;r>1,o=e[r+1],l=n<<4|o,g=t-o,d=e[r]<>>15-t]=l,d++}},UZIP.F.revCodes=function(e,t){for(var a=UZIP.F.U.rev15,i=15-t,s=0;s>>i}},UZIP.F._putsE=function(e,t,a){a<<=7&t;var i=t>>>3;e[i]|=a,e[i+1]|=a>>>8},UZIP.F._putsF=function(e,t,a){a<<=7&t;var i=t>>>3;e[i]|=a,e[i+1]|=a>>>8,e[i+2]|=a>>>16},UZIP.F._bitsE=function(e,t,a){return(e[t>>>3]|e[1+(t>>>3)]<<8)>>>(7&t)&(1<>>3]|e[1+(t>>>3)]<<8|e[2+(t>>>3)]<<16)>>>(7&t)&(1<>>3]|e[1+(t>>>3)]<<8|e[2+(t>>>3)]<<16)>>>(7&t)},UZIP.F._get25=function(e,t){return(e[t>>>3]|e[1+(t>>>3)]<<8|e[2+(t>>>3)]<<16|e[3+(t>>>3)]<<24)>>>(7&t)},UZIP.F.U=function(){var e=Uint16Array,t=Uint32Array;return{next_code:new e(16),bl_count:new e(16),ordr:[16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15],of0:[3,4,5,6,7,8,9,10,11,13,15,17,19,23,27,31,35,43,51,59,67,83,99,115,131,163,195,227,258,999,999,999],exb:[0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0],ldef:new e(32),df0:[1,2,3,4,5,7,9,13,17,25,33,49,65,97,129,193,257,385,513,769,1025,1537,2049,3073,4097,6145,8193,12289,16385,24577,65535,65535],dxb:[0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0],ddef:new t(32),flmap:new e(512),fltree:[],fdmap:new e(32),fdtree:[],lmap:new e(32768),ltree:[],ttree:[],dmap:new e(32768),dtree:[],imap:new e(512),itree:[],rev15:new e(32768),lhst:new t(286),dhst:new t(30),ihst:new t(19),lits:new t(15e3),strt:new e(65536),prev:new e(32768)}}(),function(){function e(e,t,a){for(;0!=t--;)e.push(0,a)}for(var t=UZIP.F.U,a=32768,i=0;i>>1|(1431655765&s)<<1))>>>2|(858993459&s)<<2))>>>4|(252645135&s)<<4))>>>8|(16711935&s)<<8,t.rev15[i]=(s>>>16|s<<16)>>>17}for(i=0;i<32;i++)t.ldef[i]=t.of0[i]<<3|t.exb[i],t.ddef[i]=t.df0[i]<<4|t.dxb[i];e(t.fltree,144,8),e(t.fltree,112,9),e(t.fltree,24,7),e(t.fltree,8,8),UZIP.F.makeCodes(t.fltree,9),UZIP.F.codes2map(t.fltree,9,t.flmap),UZIP.F.revCodes(t.fltree,9),e(t.fdtree,32,5),UZIP.F.makeCodes(t.fdtree,5),UZIP.F.codes2map(t.fdtree,5,t.fdmap),UZIP.F.revCodes(t.fdtree,5),e(t.itree,19,0),e(t.ltree,286,0),e(t.dtree,30,0),e(t.ttree,320,0)}(); \ No newline at end of file diff --git a/js/upload-selection.js b/js/upload-selection.js index b342a134..b5ba2060 100644 --- a/js/upload-selection.js +++ b/js/upload-selection.js @@ -17,6 +17,7 @@ $(function(){ var enabled_url = $("#upload_url").length > 0; var enabled_embed = $("#upload_embed").length > 0; var enabled_oekaki = typeof window.oekaki != "undefined"; + var enabled_tegaki = $("#tegaki-form").length > 0; var disable_all = function() { $("#upload").hide(); @@ -26,6 +27,7 @@ $(function(){ $("#upload_embed").hide(); $(".add_image").hide(); $(".dropzone-wrap").hide(); + $("#tegaki-form").hide(); $('[id^=upload_file]').each(function(i, v) { $(v).val(''); @@ -66,7 +68,12 @@ $(function(){ window.oekaki.init(); }; - if (enabled_url || enabled_embed || enabled_oekaki) { + enable_tegaki = function() { + disable_all(); + $("#tegaki-form").show(); + } + + if (enabled_url || enabled_embed || enabled_oekaki || enabled_tegaki) { $(""+_("Select")+"").insertBefore("#upload"); var my_html = ""+_("File")+""; if (enabled_url) { @@ -80,6 +87,9 @@ $(function(){ $("#confirm_oekaki_label").hide(); } + if (enabled_tegaki) { + my_html += " / "+_("Tegaki")+""; + } $("#upload_selection").html(my_html); enable_file();