pxt-core
Version:
Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors
1 lines • 370 kB
JavaScript
!function e(t,n,i){function r(s,o){if(!n[s]){if(!t[s]){var l="function"==typeof require&&require;if(!o&&l)return l(s,!0);if(a)return a(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var u=n[s]={exports:{}};t[s][0].call(u.exports,(function(e){return r(t[s][1][e]||e)}),u,u.exports,e,t,n,i)}return n[s].exports}for(var a="function"==typeof require&&require,s=0;s<i.length;s++)r(i[s]);return r}({1:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Button=void 0;const i=e("react/jsx-runtime"),r=e("../util");n.Button=e=>{const{id:t,className:n,style:a,ariaLabel:s,ariaHidden:o,ariaDescribedBy:l,ariaControls:c,ariaExpanded:u,ariaHasPopup:d,ariaPosInSet:p,ariaSetSize:f,ariaSelected:h,role:m,onClick:g,onKeydown:v,onBlur:y,buttonRef:b,title:E,label:k,leftIcon:T,rightIcon:C,hardDisabled:w,href:x,target:S,tabIndex:O}=e;let{disabled:_}=e;_=_||w;const j=(0,r.classList)("common-button",n,_&&"disabled");return(0,i.jsx)("button",Object.assign({id:t,className:j,style:a,title:E,ref:b,onClick:_?void 0:e=>{g&&g(),x&&window.open(x,S||"_blank","noopener,noreferrer"),e.stopPropagation(),e.preventDefault()},onKeyDown:v||r.fireClickOnEnter,onBlur:y,role:m||"button",tabIndex:O||(_?-1:0),disabled:w,"aria-label":s,"aria-hidden":o,"aria-controls":c,"aria-expanded":u,"aria-haspopup":d,"aria-posinset":p,"aria-setsize":f,"aria-describedby":l,"aria-selected":h},{children:(0,i.jsxs)("span",Object.assign({className:"common-button-flex"},{children:[T&&(0,i.jsx)("i",{className:T,"aria-hidden":!0}),(0,i.jsx)("span",Object.assign({className:"common-button-label"},{children:k})),C&&(0,i.jsx)("i",{className:"right "+C,"aria-hidden":!0})]}))}))}},{"../util":9,"react/jsx-runtime":108}],2:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Checkbox=void 0;const i=e("react/jsx-runtime"),r=e("../util");n.Checkbox=e=>{const{id:t,className:n,ariaHidden:a,ariaLabel:s,role:o,isChecked:l,onChange:c,label:u}=e;return(0,i.jsxs)("div",Object.assign({className:(0,r.classList)("common-checkbox",n)},{children:[(0,i.jsx)("input",{id:t,tabIndex:0,type:"checkbox",checked:l,onChange:()=>{c(!l)},onKeyDown:r.fireClickOnEnter,role:o,"aria-hidden":a,"aria-label":s}),u&&(0,i.jsx)("label",Object.assign({htmlFor:t},{children:u}))]}))}},{"../util":9,"react/jsx-runtime":108}],3:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Dropdown=void 0;const i=e("react/jsx-runtime"),r=e("react"),a=e("../util"),s=e("./Button"),o=e("./FocusList");n.Dropdown=e=>{const{id:t,className:n,ariaHidden:l,ariaLabel:c,role:u,items:d,tabIndex:p,selectedId:f,onItemSelected:h}=e,[m,g]=r.useState(!1);let v;const y=(0,a.classList)("common-dropdown",n),b=d.find((e=>e.id===f))||d[0];return(0,i.jsxs)("div",Object.assign({className:y,ref:e=>{e&&(v=e)},onBlur:e=>{v&&m&&!v.contains(e.relatedTarget)&&g(!1)}},{children:[(0,i.jsx)(s.Button,Object.assign({},b,{id:t,tabIndex:p,rightIcon:m?"fas fa-chevron-up":"fas fa-chevron-down",role:u,className:(0,a.classList)("common-dropdown-button",m&&"expanded",b.className),onClick:()=>{g(!m)},onKeydown:e=>{const t=d.indexOf(b);"ArrowDown"===e.key?t<d.length-1&&(h(d[t+1].id),e.preventDefault(),e.stopPropagation()):"ArrowUp"===e.key?t>0&&(h(d[t-1].id),e.preventDefault(),e.stopPropagation()):"Enter"===e.key&&(g(!0),e.preventDefault(),e.stopPropagation())},ariaHasPopup:"listbox",ariaExpanded:m,ariaLabel:c,ariaHidden:l})),m&&(0,i.jsx)(o.FocusList,Object.assign({role:"listbox",className:"common-menu-dropdown-pane common-dropdown-shadow",childTabStopId:f,"aria-labelledby":t,useUpAndDownArrowKeys:!0,onItemReceivedFocus:e=>{e.id&&d.some((t=>t.id===e.id))&&h(e.id)}},{children:(0,i.jsx)("ul",Object.assign({role:"presentation"},{children:d.map((e=>(0,i.jsx)("li",Object.assign({role:"presentation"},{children:(0,i.jsx)(s.Button,Object.assign({},e,{className:(0,a.classList)("common-dropdown-item",e.className),onClick:()=>{g(!1),h(e.id)},ariaSelected:e.id===f,role:"option"}))}),e.id)))}))}))]}))}},{"../util":9,"./Button":1,"./FocusList":5,react:107,"react/jsx-runtime":108}],4:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.EditorToggle=void 0;const i=e("react/jsx-runtime"),r=e("../util"),a=e("./Button"),s=e("./FocusList"),o=e("./MenuDropdown");n.EditorToggle=e=>{const{id:t,className:n,ariaHidden:a,ariaLabel:s,role:d,items:p,selected:f}=e,h=p.some((e=>u(e))),m=e=>{};return(0,i.jsxs)("div",Object.assign({className:"common-editor-toggle-outer"},{children:[(0,i.jsx)(c,Object.assign({},e)),(0,i.jsxs)("div",Object.assign({id:t,className:(0,r.classList)("common-editor-toggle",h&&"has-dropdown",n),role:d||"tablist","aria-hidden":!0,"aria-label":s},{children:[p.map(((e,t)=>{const n=f===t;return(0,i.jsxs)("div",Object.assign({className:(0,r.classList)("common-editor-toggle-item",n&&"selected",u(e)&&"common-editor-toggle-item-dropdown")},{children:[(0,i.jsx)(l,{item:e,isSelected:n,onKeydown:m}),u(e)&&(0,i.jsx)(o.MenuDropdown,{id:"toggle-dropdown",className:"toggle-dropdown",icon:"fas fa-chevron-down",title:lf("More options"),tabIndex:-1,ariaHidden:!0,items:e.items.map((e=>({title:e.title,label:e.label,onClick:e.onClick,leftIcon:e.icon})))})]}),t)})),(0,i.jsx)("div",{className:"common-editor-toggle-handle","aria-hidden":!0})]}))]}))};const l=e=>{const{item:t,isSelected:n,onKeydown:r}=e,{label:s,title:o,onClick:l,icon:c,focusable:u}=t;return(0,i.jsx)(a.Button,{className:c?void 0:"no-icon",role:u?"tab":void 0,tabIndex:-1,onKeydown:r,label:s,title:o,onClick:l,leftIcon:c,ariaHidden:!0})},c=e=>{const{items:t,id:n,selected:r,ariaHidden:o}=e,l=t.reduce(((e,t,n)=>{const i=[...e];return i.push(Object.assign({},t)),r===n&&(i[i.length-1].selected=!0),u(t)&&i.push(...t.items.filter((e=>e.focusable))),i}),[]);return(0,i.jsx)(s.FocusList,Object.assign({id:n,role:"tablist",className:"common-toggle-accessibility",childTabStopId:n+"-selected"},{children:l.map(((e,t)=>(0,i.jsx)(a.Button,{className:e.selected?"selected":void 0,id:e.selected?n+"-selected":void 0,role:"tab",title:e.title,label:e.label,onClick:e.onClick,ariaSelected:e.selected,ariaHidden:o},t)))}))};function u(e){var t;return!!(null===(t=e.items)||void 0===t?void 0:t.length)}},{"../util":9,"./Button":1,"./FocusList":5,"./MenuDropdown":8,"react/jsx-runtime":108}],5:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.FocusList=void 0;const i=e("react/jsx-runtime");n.FocusList=e=>{const{id:t,className:n,role:r,ariaHidden:a,ariaLabel:s,childTabStopId:o,children:l,onItemReceivedFocus:c,useUpAndDownArrowKeys:u}=e;let d,p;return(0,i.jsx)("div",Object.assign({id:t,className:n,role:r,tabIndex:o?void 0:0,onKeyDown:e=>{if(!(null==d?void 0:d.length))return;const t=document.activeElement,n=d.indexOf(t),i=e=>{e.focus(),c&&c(e)};-1===n&&t!==p||("Enter"===e.key||" "===e.key?(e.preventDefault(),e.stopPropagation(),t.click?t.click():t.dispatchEvent(new Event("click"))):e.key===(u?"ArrowDown":"ArrowRight")?(n===d.length-1||t===p?i(d[0]):i(d[n+1]),e.preventDefault(),e.stopPropagation()):e.key===(u?"ArrowUp":"ArrowLeft")?(i(0===n||t===p?d[d.length-1]:d[Math.max(n-1,0)]),e.preventDefault(),e.stopPropagation()):"Home"===e.key?(i(d[0]),e.preventDefault(),e.stopPropagation()):"End"===e.key&&(i(d[d.length-1]),e.preventDefault(),e.stopPropagation()))},ref:e=>{if(!e||p)return;p=e;const t=e.querySelectorAll('[tabindex]:not([tabindex="-1"]),[data-isfocusable]');d=[];for(const e of t.values())d.push(e),e.setAttribute("tabindex","-1"),e.setAttribute("data-isfocusable","true");if(o){const e=p.querySelector("#"+o);e&&e.setAttribute("tabindex","0")}},"aria-hidden":a,"aria-label":s},{children:l}))}},{"react/jsx-runtime":108}],6:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.FocusTrap=void 0;const i=e("react/jsx-runtime"),r=e("react"),a=e("../util");n.FocusTrap=e=>{const{children:t,id:n,className:s,onEscape:o,arrowKeyNavigation:l,dontStealFocus:c,includeOutsideTabOrder:u}=e;let d;const[p,f]=r.useState(!1),h=()=>(0,a.nodeListToArray)(u?d.querySelectorAll("[tabindex]"):d.querySelectorAll('[tabindex]:not([tabindex="-1"])'));return(0,i.jsx)("div",Object.assign({id:n,className:(0,a.classList)("common-focus-trap",s),ref:e=>{e&&(d=e,c||p||e.contains(document.activeElement)||!h().length||(d.focus(),f(!0)))},onKeyDown:e=>{if(!d)return;const t=(t,n)=>{const i=h();if(!i.length)return;const r=i.indexOf(e.target);t?n?i[i.length-1].focus():r===i.length-1?i[0].focus():i[r+1].focus():n?i[0].focus():0===r?i[i.length-1].focus():i[Math.max(r-1,0)].focus(),e.preventDefault(),e.stopPropagation()};"Escape"===e.key?(o(),e.preventDefault(),e.stopPropagation()):"Tab"===e.key?e.shiftKey?t(!1,!1):t(!0,!1):l&&("ArrowDown"===e.key?t(!0,!1):"ArrowUp"===e.key?t(!1,!1):"Home"===e.key?t(!1,!0):"End"===e.key&&t(!0,!0))},tabIndex:-1},{children:t}))}},{"../util":9,react:107,"react/jsx-runtime":108}],7:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Input=void 0;const i=e("react/jsx-runtime"),r=e("react"),a=e("../util"),s=e("./Button");n.Input=e=>{const{id:t,className:n,inputClassName:o,groupClassName:l,role:c,ariaHidden:u,ariaLabel:d,initialValue:p,label:f,title:h,placeholder:m,icon:g,iconTitle:v,disabled:y,type:b,readOnly:E,autoComplete:k,selectOnClick:T,onChange:C,onEnterKey:w,onIconClick:x,onBlur:S,handleInputRef:O,preserveValueOnBlur:_}=e,[j,I]=r.useState(void 0);return(0,i.jsxs)("div",Object.assign({className:(0,a.classList)("common-input-wrapper",y&&"disabled",n)},{children:[f&&(0,i.jsx)("label",Object.assign({className:"common-input-label",htmlFor:t},{children:f})),(0,i.jsxs)("div",Object.assign({className:(0,a.classList)("common-input-group",l)},{children:[(0,i.jsx)("input",{id:t,className:(0,a.classList)("common-input",g&&"has-icon",o),title:h,role:c||"textbox",tabIndex:y?-1:0,"aria-label":d,"aria-hidden":u,type:b||"text",placeholder:m,value:void 0!==j?j:p||"",readOnly:!!E,onClick:e=>{T&&e.target.select()},onChange:e=>{const t=e.target.value;E||j===t||I(t),C&&C(t)},onKeyDown:t=>{const n="number"==typeof t.which?t.which:t.keyCode;(13===n||e.treatSpaceAsEnter&&32===n)&&w&&(t.preventDefault(),w(j))},onBlur:()=>{S&&S(j),_||I(void 0)},autoComplete:k?"":"off",autoCorrect:k?"":"off",autoCapitalize:k?"":"off",spellCheck:k,disabled:y,ref:O}),g&&(x?(0,i.jsx)(s.Button,{leftIcon:g,title:v,disabled:y,onClick:()=>{x&&x(j)}}):(0,i.jsx)("i",{className:g,"aria-hidden":!0}))]}))]}))}},{"../util":9,"./Button":1,react:107,"react/jsx-runtime":108}],8:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.MenuDropdown=void 0;const i=e("react/jsx-runtime"),r=e("react"),a=e("../util"),s=e("./Button"),o=e("./FocusTrap");n.MenuDropdown=e=>{const{id:t,className:n,ariaHidden:l,ariaLabel:c,role:u,items:d,label:p,title:f,icon:h,tabIndex:m}=e,[g,v]=r.useState(!1);let y,b;const E=(0,a.classList)("common-menu-dropdown",n),k=t+"-menu";return(0,i.jsxs)("div",Object.assign({className:E,ref:e=>{e&&(y=e)},onBlur:e=>{y&&g&&!y.contains(e.relatedTarget)&&v(!1)}},{children:[(0,i.jsx)(s.Button,{id:t,label:p,tabIndex:m,buttonRef:e=>{e&&(b=e)},title:f,leftIcon:h,role:u||"menuitem",className:(0,a.classList)("menu-button",g&&"expanded"),onClick:()=>{v(!g)},ariaHasPopup:"true",ariaExpanded:g,ariaControls:g?k:void 0,ariaLabel:c,ariaHidden:l}),g&&(0,i.jsx)("div",Object.assign({role:"menu",className:"common-menu-dropdown-pane",tabIndex:0,id:k,"aria-labelledby":t},{children:(0,i.jsx)(o.FocusTrap,Object.assign({arrowKeyNavigation:!0,onEscape:()=>{v(!1),b&&b.focus()}},{children:(0,i.jsx)("ul",Object.assign({role:"presentation"},{children:d.map(((e,t)=>(0,i.jsx)("li",Object.assign({role:"presentation"},{children:(0,i.jsx)(s.Button,Object.assign({},e,{className:(0,a.classList)("common-menu-dropdown-item",e.className),onClick:()=>{v(!1),e.onClick()},role:"menuitem",ariaPosInSet:t+1,ariaSetSize:d.length}))}),t)))}))}))}))]}))}},{"../util":9,"./Button":1,"./FocusTrap":6,react:107,"react/jsx-runtime":108}],9:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.screenToSVGCoord=n.clientCoord=n.CheckboxStatus=n.nodeListToArray=n.classList=n.fireClickOnEnter=n.jsxLF=void 0;const i=e("react/jsx-runtime");var r;n.jsxLF=function(e,...t){const n=[];e.replace(/\{\d\}/g,(e=>(n.push(parseInt(e.substr(1,1))),e)));const r=[];let a,s=0;for(const o of n)a=e.split(`{${o}}`),pxt.U.assert(2===a.length),r.push((0,i.jsx)("span",{children:a[0]},s++)),r.push((0,i.jsx)("span",{children:t[o]},s++)),e=a[1];return r.push((0,i.jsx)("span",{children:e},s++)),r},n.fireClickOnEnter=function(e){const t="number"==typeof e.which?e.which:e.keyCode;13!==t&&32!==t||(e.preventDefault(),e.currentTarget.click())},n.classList=function(...e){return e.filter((e=>"string"==typeof e)).reduce(((e,t)=>e.concat(t.split(" "))),[]).map((e=>e.trim())).filter((e=>!!e)).join(" ")},n.nodeListToArray=function(e){const t=[];for(const n of e)t.push(n);return t},(r=n.CheckboxStatus||(n.CheckboxStatus={}))[r.Selected=0]="Selected",r[r.Unselected=1]="Unselected",r[r.Waiting=2]="Waiting",n.clientCoord=function(e){if(e.touches){const t=e;return t.touches.length?t.touches[0]:t.changedTouches[0]}return e},n.screenToSVGCoord=function(e,t){const n=e.createSVGPoint();return n.x=t.clientX,n.y=t.clientY,n.matrixTransform(e.getScreenCTM().inverse())}},{"react/jsx-runtime":108}],10:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.AssetEditor=void 0;const i=e("react/jsx-runtime"),r=e("react"),a=e("react-dom"),s=e("./components/ImageFieldEditor"),o=e("./components/ImageEditor/store/imageReducer");document.addEventListener("DOMContentLoaded",(()=>{!function(){const e=document.getElementById("asset-editor-field-div");a.render((0,i.jsx)(l,{}),e)}()}));class l extends r.Component{constructor(e){super(e),this.handleMessage=e=>{const t=e.data;switch(t.type){case"create":this.setPalette(t.palette),this.initTilemapProject(t.files);const e=this.getEmptyAsset(t.assetType,t.displayName);this.setState({editing:e,isEmptyAsset:!0}),this.sendResponse({id:t.id,type:t.type});break;case"open":this.setPalette(t.palette),this.initTilemapProject(t.files);const n=this.lookupAsset(t.assetType,t.assetId);"tilemap"===n.type&&pxt.sprite.addMissingTilemapTilesAndReferences(this.editorProject,n),this.setState({editing:n}),this.sendResponse({id:t.id,type:t.type});break;case"duplicate":this.setPalette(t.palette),this.initTilemapProject(t.files);const i=this.lookupAsset(t.assetType,t.assetId);this.setState({editing:this.editorProject.duplicateAsset(i)}),this.sendResponse({id:t.id,type:t.type});break;case"save":this.sendResponse({id:t.id,type:t.type,files:this.saveProjectFiles()})}},this.refHandler=e=>{e&&(this.editor=e,this.editor.init(this.state.editing,(()=>{}),{galleryTiles:this.galleryTiles,hideMyAssets:!0,hideCloseButton:!0}))},this.handleKeydown=e=>{!e.ctrlKey||"s"!==e.key&&"S"!==e.key||this.sendSaveRequest()},this.pollForUpdates=()=>{this.state.editing&&this.updateAsset()},this.sendSaveRequest=()=>{this.sendEvent({type:"event",kind:"done-clicked"})},this.state={},pxt.react.getTilemapProject=()=>this.editorProject,(0,o.setTelemetryFunction)(c)}componentDidMount(){window.addEventListener("message",this.handleMessage,null),window.addEventListener("keydown",this.handleKeydown,null),this.sendEvent({type:"event",kind:"ready"}),c("asset-editor-shown"),this.pollingInterval=setInterval(this.pollForUpdates,200)}componentWillUnmount(){window.removeEventListener("message",this.handleMessage,null),window.removeEventListener("keydown",this.handleKeydown,null),window.clearInterval(this.pollingInterval)}componentDidUpdate(e,t,n){var i;(null==t?void 0:t.editing)&&t.editing!==this.state.editing&&this.saveProject.removeChangeListener(t.editing.type,this.sendSaveRequest),(null===(i=this.state)||void 0===i?void 0:i.editing)&&this.saveProject.addChangeListener(this.state.editing,this.sendSaveRequest)}render(){return this.state.editing?(0,i.jsx)(s.ImageFieldEditor,{ref:this.refHandler,singleFrame:"animation"!==this.state.editing.type,isMusicEditor:"song"===this.state.editing.type,doneButtonCallback:this.sendSaveRequest,hideDoneButton:!0,includeSpecialTagsInFilter:!0}):(0,i.jsx)("div",{})}sendResponse(e){this.postMessage(e)}sendEvent(e){this.postMessage(e)}postMessage(e){window.acquireVsCodeApi?window.acquireVsCodeApi().postMessage(e):window.parent.postMessage(e,"*")}updateAsset(){var e,t,n,i,r;const a=this.editor.getValue(),s=pxt.cloneAsset(a);if(!this.lastValue||!pxt.assetEquals(this.lastValue,s)){if(this.lastValue=pxt.cloneAsset(a),"tilemap"===s.type&&a.type===s.type&&(s.data.deletedTiles=null===(e=a.data.deletedTiles)||void 0===e?void 0:e.slice(),s.data.editedTiles=null===(t=a.data.editedTiles)||void 0===t?void 0:t.slice(),s.data.projectReferences=null===(n=a.data.projectReferences)||void 0===n?void 0:n.slice(),s.data.tileOrder=null===(i=a.data.tileOrder)||void 0===i?void 0:i.slice()),this.saveProject=this.editorProject.clone(),this.state.isEmptyAsset){const e=null===(r=s.meta)||void 0===r?void 0:r.displayName;let t;switch(s.type){case"image":t=this.saveProject.createNewProjectImage(s.bitmap,e);break;case"tile":t=this.saveProject.createNewTile(s.bitmap,null,e);break;case"tilemap":pxt.sprite.updateTilemapReferencesFromResult(this.saveProject,s);const[n,i]=this.saveProject.createNewTilemapFromData(s.data,e);t=this.saveProject.lookupAssetByName("tilemap",n);break;case"animation":t=this.saveProject.createNewAnimationFromData(s.frames,s.interval,e);break;case"song":t=this.saveProject.createNewSong(s.song,e)}}else"tilemap"===s.type&&pxt.sprite.updateTilemapReferencesFromResult(this.saveProject,s),this.saveProject.updateAsset(s);this.sendSaveRequest()}}saveProjectFiles(){this.updateAsset();const e=pxt.inflateJRes(this.saveProject.getProjectAssetsJRes()),t=pxt.inflateJRes(this.saveProject.getProjectTilesetJRes()),n={};for(const t of Object.keys(e)){const i=this.locateFileForAsset(t)||pxt.IMAGES_JRES;n[i]||(n[i]={}),n[i][t]=e[t]}for(const e of Object.keys(t)){const i=this.locateFileForAsset(e)||pxt.TILEMAP_JRES;n[i]||(n[i]={}),n[i][e]=t[e]}const i=Object.assign({},this.files);for(const e of Object.keys(n)){i[e]=JSON.stringify(n[e],null,4);const t=e.substring(0,e.length-"jres".length)+"ts";(i[t]||e===pxt.IMAGES_JRES||e===pxt.TILEMAP_JRES)&&(i[t]=pxt.emitProjectImages(n[e])+"\n"+pxt.emitTilemapsFromJRes(n[e]))}return i}setPalette(e){e&&Array.isArray(e)&&e.length&&(pxt.appTarget.runtime.palette=e.slice())}initTilemapProject(e){var t;const n={},i={},r={},a={};this.editorProject=new pxt.TilemapProject,this.inflatedJres={},this.commentAttrs={};for(const t of Object.keys(e).filter((e=>!e.endsWith(".jres")))){const n=u(e[t]);for(const e of Object.keys(n))this.commentAttrs[e]=n[e]}for(const s of Object.keys(e).filter((e=>e.endsWith(".jres")))){const o=-1!==s.indexOf("pxt_modules")||-1!==s.indexOf("node_modules"),l=pxt.inflateJRes(JSON.parse(e[s]));this.inflatedJres[s]=l;for(const e of Object.keys(l)){if(null===(t=this.commentAttrs[e])||void 0===t?void 0:t.tags){const t=this.commentAttrs[e].tags.split(" ").filter((e=>!!e));t.length&&(l[e].tags=t)}l[e].mimeType===pxt.TILEMAP_MIME_TYPE||l[e].tilemapTile?o?i[e]=l[e]:n[e]=l[e]:o?a[e]=l[e]:r[e]=l[e]}}this.editorProject.loadAssetsJRes(a,!0),this.editorProject.loadAssetsJRes(r),this.editorProject.loadTilemapJRes(i,!1,!0),this.editorProject.loadTilemapJRes(n),this.galleryTiles=this.editorProject.getGalleryAssets("tile").map((e=>{var t;if(!this.commentAttrs[e.id])return;const n=null===(t=e.meta.tags)||void 0===t?void 0:t.map((e=>pxt.Util.startsWith(e,"category-")?e:e.toLowerCase()));return n&&-1!==n.indexOf("tile")?{qName:e.id,bitmap:e.bitmap,alt:e.id,tags:n}:void 0})).filter((e=>!!e)),this.saveProject=this.editorProject.clone()}locateFileForAsset(e){for(const t of Object.keys(this.inflatedJres))if(this.inflatedJres[t][e])return t}getEmptyAsset(e,t){const n=pxt.react.getTilemapProject(),i=t||pxt.getDefaultAssetDisplayName(e);let r=i,a=0;for(;n.isNameTaken(e,r);)r=i+a++;const s={type:e,id:"",internalID:0,meta:{displayName:r}};switch(e){case"image":case"tile":s.bitmap=new pxt.sprite.Bitmap(16,16).data();break;case"tilemap":const e=s;e.data=n.blankTilemap(16,16,16),pxt.sprite.addMissingTilemapTilesAndReferences(n,e);break;case"animation":const t=s;t.frames=[new pxt.sprite.Bitmap(16,16).data()],t.interval=200;break;case"song":s.song=pxt.assets.music.getEmptySong(2)}return s}lookupAsset(e,t){const n=this.saveProject.lookupAsset(e,t);if(n)return n;const i=t.split(".");return this.saveProject.lookupAsset(e,i[i.length-1])}}function c(e){pxt.tickEvent("asset.editor",{action:e})}function u(e){const t=e.split("\n"),n={};let i,r="";for(const e of t){const t=/^namespace\s+([^\}]+)\s+\{$/.exec(e);if(t){i=t[1],r="";continue}if(/^\s+\/\/%\s/.test(e)){r+=e+"\n";continue}const a=/^\s*export\s+const\s+([^\s]+)\s*=/.exec(e);a&&(n[i+"."+a[1]]=pxtc.parseCommentString(r),r="")}return n}n.AssetEditor=l},{"./components/ImageEditor/store/imageReducer":30,"./components/ImageFieldEditor":36,react:107,"react-dom":75,"react/jsx-runtime":108}],11:[function(e,t,n){"use strict";function i(e,t=new pxt.ImageConverter){var n;switch(e.type){case"image":case"tile":return e.previewURI=t.convert("data:image/x-mkcd-f,"+e.jresData),e;case"tilemap":let i=e.data.tilemap;return e.previewURI=pxtblockly.tilemapToImageURI(e.data,Math.max(i.width,i.height),!1),e;case"animation":return(null===(n=e.frames)||void 0===n?void 0:n.length)<=0?null:(e.framePreviewURIs=e.frames.map((e=>t.convert("data:image/x-mkcd-f,"+pxt.sprite.base64EncodeBitmap(e)))),e.previewURI=e.framePreviewURIs[0],e);case"song":return e.previewURI=pxtblockly.songToDataURI(e.song,32,32,!1,1),e}}function r(e){return function(t,n){const i=-1===e.indexOf(t.meta.package)?0:1,r=-1===e.indexOf(n.meta.package)?0:1;return i===r?function(e,t){return e.internalID-t.internalID}(t,n):i-r}}Object.defineProperty(n,"__esModule",{value:!0}),n.assetToGalleryItem=n.getAssets=n.getNewInternalID=n.lookupAsset=n.createTile=n.createProjectImage=n.createNewImageAsset=n.isNameTaken=void 0,n.isNameTaken=function(e){return pxt.react.getTilemapProject().isNameTaken("image",e)},n.createNewImageAsset=function(e,t,n,i){const r=pxt.react.getTilemapProject();switch(e){case"tile":return r.createNewTile(new pxt.sprite.Bitmap(t,n).data(),null,i);case"image":return r.createNewImage(t,n)}return null},n.createProjectImage=function(e){return pxt.react.getTilemapProject().createNewProjectImage(e)},n.createTile=function(e,t,n){return pxt.react.getTilemapProject().createNewTile(e,t,n)},n.lookupAsset=function(e,t){return pxt.react.getTilemapProject().lookupAsset(e,t)},n.getNewInternalID=function(){return pxt.react.getTilemapProject().getNewInternalId()},n.getAssets=function(e=!1,t="image",n=[]){const a=pxt.react.getTilemapProject(),s=new pxt.ImageConverter,o=e=>i(e,s),l=e?a.getGalleryAssets.bind(a):a.getAssets.bind(a),c=function(){var e;const t=null===(e=pxt.appTarget.blocksprj)||void 0===e?void 0:e.config;if(t)return Object.keys(t.dependencies);return[]}(),u=l("image").map(o).sort(r(c)),d=l("tile").map(o).filter((e=>!e.id.match(/^myTiles.transparency(8|16|32)$/gi))).sort(r(c)),p=l("tilemap").map(o).sort(r(c)),f=l("animation").map(o).sort(r(c)),h=l("song").map(o).sort(r(c));for(const e of n)switch(e.type){case"image":u.push(o(e));break;case"tile":d.push(o(e));break;case"animation":f.push(o(e));break;case"tilemap":p.push(o(e));break;case"song":h.push(o(e))}let m=[];switch(t){case"image":m=u.concat(d).concat(f).concat(p).concat(h);break;case"tile":m=d.concat(u).concat(f).concat(p).concat(h);break;case"animation":m=f.concat(u).concat(d).concat(p).concat(h);break;case"tilemap":m=p.concat(d).concat(u).concat(f).concat(h);break;case"song":m=h.concat(u).concat(d).concat(f).concat(p)}return pxt.tickEvent(e?"assets.gallery":"assets.update",{count:m.length}),m},n.assetToGalleryItem=i},{}],12:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.FilterPanel=n.FilterPanelSubheading=n.FilterTag=void 0;const i=e("react/jsx-runtime"),r=e("react"),a=e("../util");class s extends r.Component{constructor(e){super(e),this.clickHandler=this.clickHandler.bind(this)}render(){return(0,i.jsxs)("div",Object.assign({className:"filter-tag"},{children:[(0,i.jsx)("div",Object.assign({className:"filter-tag-box",role:"checkbox",onClick:this.clickHandler,onKeyDown:a.fireClickOnEnter,"aria-checked":this.props.selected},{children:(0,i.jsx)("i",{className:"icon square outline "+(this.props.selected?"check":"")})})),(0,i.jsx)("div",Object.assign({className:"filter-tag-name",role:"button",onClick:this.clickHandler,onKeyDown:a.fireClickOnEnter},{children:pxtc.U.rlf(this.props.tag)}))]}))}clickHandler(){this.props.onClickHandler(this.props.tag)}}n.FilterTag=s;class o extends r.Component{render(){return(0,i.jsxs)("div",Object.assign({className:"filter-subheading-row"},{children:[(0,i.jsx)("div",Object.assign({className:"filter-subheading-title"},{children:`${this.props.subheading}:`})),this.props.buttonText&&(0,i.jsx)("div",Object.assign({className:"filter-subheading-button",role:"button",style:this.props.buttonStyle,onClick:this.props.buttonAction,onKeyDown:a.fireClickOnEnter},{children:this.props.buttonText}))]}))}}n.FilterPanelSubheading=o;class l extends r.Component{isTagSelected(e){return this.props.enabledTags.indexOf(e.toLowerCase())>=0}render(){const e=this.props.tagOptions;return(0,i.jsxs)("div",Object.assign({className:"filter-panel"},{children:[(0,i.jsx)("div",Object.assign({className:"filter-title"},{children:lf("Filter")})),(0,i.jsx)(o,{subheading:lf("Categories"),buttonText:lf("Clear"),buttonAction:this.props.clearTags,buttonStyle:this.props.enabledTags.length>0?{color:"white"}:{}}),(0,i.jsx)("div",Object.assign({className:"filter-tag-list"},{children:e.map((e=>(0,i.jsx)(s,{tag:e,selected:this.isTagSelected(e),onClickHandler:this.props.tagClickHandler},e)))}))]}))}}n.FilterPanel=l},{"../util":59,react:107,"react/jsx-runtime":108}],13:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Alert=void 0;const i=e("react/jsx-runtime"),r=e("react"),a=e("react-redux"),s=e("./actions/dispatch");class o extends r.Component{constructor(e){super(e)}render(){const{title:e,text:t,options:n,dispatchHideAlert:r}=this.props;return(0,i.jsx)("div",Object.assign({className:"image-editor-alert-container",role:"region",onClick:r},{children:(0,i.jsxs)("div",Object.assign({className:"image-editor-alert",role:"dialog"},{children:[(0,i.jsxs)("div",Object.assign({className:"title"},{children:[(0,i.jsx)("span",{className:"ms-Icon ms-Icon--Warning"}),(0,i.jsx)("span",{children:e}),(0,i.jsx)("span",{className:"ms-Icon ms-Icon--Cancel",role:"button",onClick:r})]})),(0,i.jsx)("div",Object.assign({className:"text"},{children:t})),n&&(0,i.jsx)("div",Object.assign({className:"options"},{children:n.map(((e,t)=>(0,i.jsx)("div",Object.assign({className:"button",role:"button",onClick:e.onClick},{children:e.label}),t)))}))]}))}))}}const l={dispatchHideAlert:s.dispatchHideAlert};n.Alert=(0,a.connect)((function({editor:e},t){return e?t:{}}),l)(o)},{"./actions/dispatch":26,react:107,"react-redux":93,"react/jsx-runtime":108}],14:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.BottomBar=n.BottomBarImpl=void 0;const i=e("react/jsx-runtime"),r=e("react"),a=e("react-redux"),s=e("./actions/dispatch"),o=e("./Button"),l=e("./util"),c=e("../../assets"),u=e("./keyboardShortcuts"),d=e("../../../../react-common/components/util");class p extends r.Component{constructor(e){super(e),this.disableShortcutsOnFocus=()=>{this.setShortcutsEnabled(!1)},this.handleWidthChange=e=>{const t=e.target.value,n=parseInt(t),{aspectRatioLocked:i,imageDimensions:r}=this.props;!isNaN(n)&&i?this.setState({width:n+"",height:Math.floor(n*(r[1]/r[0]))+""}):this.setState({width:t})},this.handleHeightChange=e=>{const t=e.target.value,n=parseInt(t),{aspectRatioLocked:i,imageDimensions:r}=this.props;!isNaN(n)&&i?this.setState({height:n+"",width:Math.floor(n*(r[0]/r[1]))+""}):this.setState({height:t})},this.handleDimensionalBlur=()=>{const{imageDimensions:e,isTilemap:t,dispatchChangeImageDimensions:n}=this.props,i=parseInt(this.state.width),r=parseInt(this.state.height),a=t?255:512,s=isNaN(i)?e[0]:Math.min(Math.max(i,1),a),o=isNaN(r)?e[1]:Math.min(Math.max(r,1),a);s===e[0]&&o===e[1]||n([s,o]),this.setState({width:null,height:null}),this.setShortcutsEnabled(!0)},this.handleDimensionalKeydown=e=>{13===("number"==typeof e.which?e.which:e.keyCode)&&e.currentTarget.blur()},this.handleAssetNameChange=e=>{let t=null;const n=e.target.value||"",i=n.trim();pxt.validateAssetName(i)?(0,c.isNameTaken)(i)&&i!==this.props.assetName&&(t=lf("This name is already used elsewhere in your project")):t=lf("Names may only contain letters, numbers, '-', '_', and space"),this.setState({assetName:n,assetNameMessage:t})},this.handleAssetNameBlur=()=>{const{dispatchChangeAssetName:e,assetName:t}=this.props;if(this.state.assetName){let n=this.state.assetName.trim();n!==t&&pxt.validateAssetName(n)&&!(0,c.isNameTaken)(n)&&e(n)}this.setState({assetName:null,assetNameMessage:null}),this.setShortcutsEnabled(!0)},this.zoomIn=()=>{this.props.dispatchChangeZoom(1)},this.zoomOut=()=>{this.props.dispatchChangeZoom(-1)},this.state={}}render(){const{imageDimensions:e,cursorLocation:t,hasUndo:n,hasRedo:r,dispatchUndoImageEdit:a,dispatchRedoImageEdit:s,aspectRatioLocked:c,onionSkinEnabled:u,dispatchToggleAspectRatioLocked:p,dispatchToggleOnionSkinEnabled:f,resizeDisabled:h,singleFrame:m,onDoneClick:g,assetName:v,hideDoneButton:y}=this.props,{assetNameMessage:b}=this.state,E=null==this.state.width?e[0]:this.state.width,k=null==this.state.height?e[1]:this.state.height,T=null==this.state.assetName?v||"":this.state.assetName;return(0,i.jsxs)("div",Object.assign({className:"image-editor-bottombar"},{children:[!h&&(0,i.jsxs)("div",Object.assign({className:"image-editor-resize"},{children:[(0,i.jsx)("input",{className:"image-editor-input",title:lf("Image Width"),value:E,tabIndex:0,onChange:this.handleWidthChange,onFocus:this.disableShortcutsOnFocus,onBlur:this.handleDimensionalBlur,onKeyDown:this.handleDimensionalKeydown}),(0,i.jsx)(o.IconButton,{onClick:p,iconClass:c?"ms-Icon ms-Icon--Lock":"ms-Icon ms-Icon--Unlock",title:c?lf("Unlock Aspect Ratio"):lf("Lock Aspect Ratio"),toggle:!c,noTab:!0}),(0,i.jsx)("input",{className:"image-editor-input",title:lf("Image Height"),value:k,tabIndex:0,onChange:this.handleHeightChange,onFocus:this.disableShortcutsOnFocus,onBlur:this.handleDimensionalBlur,onKeyDown:this.handleDimensionalKeydown})]})),!m&&(0,i.jsx)("div",{className:"image-editor-seperator"}),!m&&(0,i.jsx)("div",{children:(0,i.jsx)(o.IconButton,{onClick:f,iconClass:"ms-Icon ms-Icon--MapLayers",title:u?lf("Hide Previous Frame"):lf("Show Previous Frame"),toggle:!u})}),!h&&(0,i.jsx)("div",{className:(0,d.classList)("image-editor-seperator",!t&&"transparent")}),(0,i.jsx)("div",Object.assign({className:"image-editor-coordinate-preview"},{children:t&&`${t[0]}, ${t[1]}`})),(0,i.jsxs)("div",Object.assign({className:"image-editor-change-name"},{children:[(0,i.jsx)("input",{className:"image-editor-input",title:lf("Asset Name"),value:T,placeholder:lf("Asset Name"),tabIndex:0,onChange:this.handleAssetNameChange,onFocus:this.disableShortcutsOnFocus,onBlur:this.handleAssetNameBlur,onKeyDown:this.handleDimensionalKeydown}),b&&(0,i.jsx)("div",Object.assign({className:"ui pointing below red basic label"},{children:b}))]})),(0,i.jsxs)("div",Object.assign({className:"image-editor-undo-redo"},{children:[(0,i.jsx)(o.IconButton,{title:lf("Undo"),iconClass:"ms-Icon ms-Icon--Undo",onClick:n?a:null,disabled:!n}),(0,i.jsx)(o.IconButton,{title:lf("Redo"),iconClass:"ms-Icon ms-Icon--Redo",onClick:r?s:null,disabled:!r})]})),(0,i.jsx)("div",{className:"image-editor-seperator"}),(0,i.jsxs)("div",Object.assign({className:"image-editor-zoom-controls"},{children:[(0,i.jsx)(o.IconButton,{onClick:this.zoomOut,iconClass:"ms-Icon ms-Icon--ZoomOut",title:lf("Zoom Out"),toggle:!0}),(0,i.jsx)(o.IconButton,{onClick:this.zoomIn,iconClass:"ms-Icon ms-Icon--ZoomIn",title:lf("Zoom In"),toggle:!0})]})),!y&&(0,i.jsx)("div",Object.assign({role:"button",className:"image-editor-confirm",title:lf("Done"),tabIndex:0,onClick:g,onKeyDown:l.fireClickOnlyOnEnter},{children:lf("Done")}))]}))}setShortcutsEnabled(e){e&&this.shortcutLock?((0,u.releaseShortcutLock)(this.shortcutLock),this.shortcutLock=void 0):e||this.shortcutLock||(this.shortcutLock=(0,u.obtainShortcutLock)())}}n.BottomBarImpl=p;const f={dispatchChangeImageDimensions:s.dispatchChangeImageDimensions,dispatchUndoImageEdit:s.dispatchUndoImageEdit,dispatchRedoImageEdit:s.dispatchRedoImageEdit,dispatchToggleAspectRatioLocked:s.dispatchToggleAspectRatioLocked,dispatchToggleOnionSkinEnabled:s.dispatchToggleOnionSkinEnabled,dispatchChangeZoom:s.dispatchChangeZoom,dispatchChangeAssetName:s.dispatchChangeAssetName};n.BottomBar=(0,a.connect)((function({store:{present:e,past:t,future:n},editor:i},r){var a,s,o;if(!e)return{};const l=i.isTilemap?e.tilemap.bitmap:e.frames[e.currentFrame].bitmap;return{imageDimensions:[l.width,l.height],aspectRatioLocked:e.aspectRatioLocked,onionSkinEnabled:i.onionSkinEnabled,cursorLocation:i.cursorLocation,resizeDisabled:"tile"===(null===(a=e.asset)||void 0===a?void 0:a.type),assetName:null===(o=null===(s=e.asset)||void 0===s?void 0:s.meta)||void 0===o?void 0:o.displayName,hasUndo:!!t.length,hasRedo:!!n.length,isTilemap:i.isTilemap}}),f)(p)},{"../../../../react-common/components/util":9,"../../assets":11,"./Button":15,"./actions/dispatch":26,"./keyboardShortcuts":28,"./util":35,react:107,"react-redux":93,"react/jsx-runtime":108}],15:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.IconButton=void 0;const i=e("react/jsx-runtime"),r=e("react"),a=e("./util");class s extends r.Component{render(){const{title:e,iconClass:t,onClick:n,toggle:r,disabled:s,noTab:o}=this.props;return(0,i.jsx)("div",Object.assign({role:"button",className:`image-editor-button ${r?"toggle":""} ${s?"disabled":""}`,title:e,tabIndex:o||s?-1:0,onClick:n,onKeyDown:a.fireClickOnlyOnEnter},{children:(0,i.jsx)("span",{className:t})}))}}n.IconButton=s},{"./util":35,react:107,"react/jsx-runtime":108}],16:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.CursorSizes=void 0;const i=e("react/jsx-runtime"),r=e("react"),a=e("./actions/dispatch"),s=e("react-redux");class o extends r.Component{constructor(){super(...arguments),this.handlers=[]}render(){const{selected:e}=this.props;return(0,i.jsxs)("div",Object.assign({className:"cursor-buttons"},{children:[(0,i.jsx)("div",Object.assign({className:"cursor-button-outer "+(1===e?"selected":""),title:lf("Small Cursor (1px)"),role:"button",onClick:this.clickHandler(1)},{children:(0,i.jsx)("div",{className:"cursor-button small"})})),(0,i.jsx)("div",Object.assign({className:"cursor-button-outer "+(3===e?"selected":""),title:lf("Medium Cursor (3px)"),role:"button",onClick:this.clickHandler(3)},{children:(0,i.jsx)("div",{className:"cursor-button medium"})})),(0,i.jsx)("div",Object.assign({className:"cursor-button-outer "+(5===e?"selected":""),title:lf("Large Cursor (5px)"),role:"button",onClick:this.clickHandler(5)},{children:(0,i.jsx)("div",{className:"cursor-button large"})}))]}))}clickHandler(e){return this.handlers[e]||(this.handlers[e]=()=>{const{dispatchChangeCursorSize:t}=this.props;t(e)}),this.handlers[e]}}const l={dispatchChangeCursorSize:a.dispatchChangeCursorSize};n.CursorSizes=(0,s.connect)((function({editor:e},t){return e?{selected:e.cursorSize}:{}}),l)(o)},{"./actions/dispatch":26,react:107,"react-redux":93,"react/jsx-runtime":108}],17:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.Dropdown=void 0;const i=e("react/jsx-runtime"),r=e("react");class a extends r.Component{constructor(e){super(e),this.handlers=[],this.handleDropdownClick=()=>{this.setState({open:!this.state.open})},this.state={open:!1}}componentDidUpdate(){this.handlers=[]}componentWillUnmount(){this.handlers=null}render(){const{options:e,selected:t}=this.props,{open:n}=this.state,r=e[t];return(0,i.jsxs)("div",Object.assign({className:"image-editor-dropdown-outer"},{children:[(0,i.jsxs)("button",Object.assign({className:"image-editor-dropdown","aria-haspopup":"listbox",onClick:this.handleDropdownClick,tabIndex:-1},{children:[(null==r?void 0:r.text)||"",(0,i.jsx)("span",{className:"image-editor-dropdown-chevron ms-Icon ms-Icon--ChevronDown"})]})),(0,i.jsx)("ul",Object.assign({tabIndex:-1,role:"listbox","aria-activedescendant":null==r?void 0:r.id,className:n&&e.length?"":"hidden"},{children:e.map(((e,n)=>(0,i.jsx)("li",Object.assign({role:"option","aria-selected":n===t,className:n===t?"selected":"",onClick:this.clickHandler(n)},{children:e.text}),e.id)))}))]}))}clickHandler(e){if(!this.handlers[e]){const{onChange:t,options:n}=this.props;this.handlers[e]=()=>{this.setState({open:!1}),t(n[e],e)}}return this.handlers[e]}}n.Dropdown=a},{react:107,"react/jsx-runtime":108}],18:[function(e,t,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.ImageCanvas=n.ImageCanvasImpl=void 0;const i=e("react/jsx-runtime"),r=e("react"),a=e("react-redux"),s=e("./store/imageReducer"),o=e("./actions/dispatch"),l=e("./util"),c=e("./toolDefinitions"),u=e("../../assets"),d=e("./keyboardShortcuts"),p=e("./ImageEditor"),f=[s.TileDrawingMode.Wall];class h extends r.Component{constructor(){super(...arguments),this.cursor=c.ToolCursor.Crosshair,this.zoom=2.5,this.panX=0,this.panY=0,this.hasInteracted=!1,this.tileCache={},this.onKeyDown=e=>{var t,n,i,r,a,o;if((0,d.areShortcutsEnabled)()){if(this.hasInteracted=!0,this.shouldHandleCanvasShortcut()&&(null===(n=null===(t=this.editState)||void 0===t?void 0:t.floating)||void 0===n?void 0:n.image)){let t=!1;switch(e.key){case"ArrowLeft":this.editState.layerOffsetX=Math.max(this.editState.layerOffsetX-1,-this.editState.floating.image.width),t=!0;break;case"ArrowUp":this.editState.layerOffsetY=Math.max(this.editState.layerOffsetY-1,-this.editState.floating.image.height),t=!0;break;case"ArrowRight":this.editState.layerOffsetX=Math.min(this.editState.layerOffsetX+1,this.editState.width),t=!0;break;case"ArrowDown":this.editState.layerOffsetY=Math.min(this.editState.layerOffsetY+1,this.editState.height),t=!0}t&&(this.props.dispatchImageEdit(this.editState.toImageState()),e.preventDefault())}if(!e.repeat){switch(!e.ctrlKey&&!e.metaKey||"c"!==e.key&&"v"!==e.key||e.stopPropagation(),(e.ctrlKey||e.metaKey)&&"a"===e.key&&this.shouldHandleCanvasShortcut()&&(this.selectAll(),e.preventDefault()),"Escape"==e.key&&(null===(r=null===(i=this.editState)||void 0===i?void 0:i.floating)||void 0===r?void 0:r.image)&&this.shouldHandleCanvasShortcut()&&(this.cancelSelection(),e.preventDefault()),("Backspace"===e.key||"Delete"===e.key)&&(null===(o=null===(a=this.editState)||void 0===a?void 0:a.floating)||void 0===o?void 0:o.image)&&this.shouldHandleCanvasShortcut()&&(this.deleteSelection(),e.preventDefault()),this.lastTool=this.props.tool,e.keyCode){case 18:this.props.dispatchChangeImageTool(s.ImageEditorTool.ColorSelect),e.preventDefault();break;case 32:this.props.dispatchChangeImageTool(s.ImageEditorTool.Pan);break;default:this.lastTool=null}this.updateCursor(!1,!1)}}},this.onKeyUp=e=>{null!=this.lastTool&&(this.props.dispatchChangeImageTool(this.lastTool),this.lastTool=null,this.updateCursor(!1,!1))},this.onCopy=e=>{var t,n;if(this.props.tool===s.ImageEditorTool.Marquee&&(null===(n=null===(t=this.editState)||void 0===t?void 0:t.floating)||void 0===n?void 0:n.image))if(e.preventDefault(),this.props.isTilemap)e.clipboardData.setData("application/makecode-tilemap",JSON.stringify((0,l.createTilemapPatchFromFloatingLayer)(this.editState,this.props.tilemapState.tileset)));else{const t=pxt.sprite.bitmapToImageLiteral(this.editState.floating.image,"typescript");e.clipboardData.setData("application/makecode-image",t),e.clipboardData.setData("text/plain",t)}},this.onPaste=e=>{if(this.props.isTilemap){const t=e.clipboardData.getData("application/makecode-tilemap");let n;try{n=JSON.parse(t)}catch(e){}if(!(n&&n.map&&n.layers&&n.tiles))return;return e.preventDefault(),void this.applyTilemapPatch(n)}let t=e.clipboardData.getData("application/makecode-image");if(!t){const n=e.clipboardData.getData("text/plain"),i=/img(`|\(""")[\s\da-f.#tngrpoyw]+(`|"""\))/im.exec(n);i&&(t=i[0])}const n=t&&pxt.sprite.imageLiteralToBitmap(t);n&&n.width&&n.height&&(e.preventDefault(),this.props.tool!==s.ImageEditorTool.Marquee&&this.props.dispatchChangeImageTool(s.ImageEditorTool.Marquee),this.editState.mergeFloatingLayer(),this.editState.setFloatingLayer(n),this.props.dispatchImageEdit(this.editState.toImageState()))},this.preventContextMenu=e=>e.preventDefault()}render(){const e=this.getImageState(),t=!e||e.bitmap.height>e.bitmap.width,n=!this.props.isTilemap&&this.props.tool==s.ImageEditorTool.Marquee;return(0,i.jsx)("div",Object.assign({ref:"canvas-bounds",className:"image-editor-canvas "+(t?"portrait":"landscape"),onContextMenu:this.preventContextMenu,tabIndex:0},{children:(0,i.jsxs)("div",Object.assign({className:"paint-container"},{children:[!this.props.lightMode&&(0,i.jsx)("canvas",{ref:"paint-surface-bg",className:"paint-surface"}),(0,i.jsx)("canvas",{ref:"paint-surface",className:"paint-surface main"}),f.map(((e,t)=>(0,i.jsx)("canvas",{ref:`paint-surface-${e.toString()}`,className:"paint-surface overlay "+(this.props.overlayEnabled?"":"hide")},t))),(0,i.jsx)("div",{ref:"floating-layer-border",className:"image-editor-floating-layer"}),n&&(0,i.jsx)("div",{ref:"floating-layer-nw-corner",className:"image-editor-floating-layer-corner"}),n&&(0,i.jsx)("div",{ref:"floating-layer-ne-corner",className:"image-editor-floating-layer-corner"}),n&&(0,i.jsx)("div",{ref:"floating-layer-se-corner",className:"image-editor-floating-layer-corner"}),n&&(0,i.jsx)("div",{ref:"floating-layer-sw-corner",className:"image-editor-floating-layer-corner"})]}))}))}componentDidMount(){document.activeElement instanceof HTMLElement&&document.activeElement.blur(),this.tileCache={},this.cellWidth=this.props.isTilemap?this.props.tilemapState.tileset.tileWidth:1,this.canvas=this.refs["paint-surface"],this.background=this.refs["paint-surface-bg"],this.floatingLayer=this.refs["floating-layer-border"],this.canvasLayers=f.map((e=>this.refs[`paint-surface-${e.toString()}`])),(0,l.bindGestureEvents)(this.refs["canvas-bounds"],this);const e=this.refs["canvas-bounds"];e.addEventListener("wheel",(e=>{this.hasInteracted=!0,this.updateZoom(e.deltaY/30,e.clientX,e.clientY),e.preventDefault()})),e.addEventListener("mousemove",(e=>{e.button||(this.hasHover=!0),this.edit||this.updateCursorLocation(e)})),e.addEventListener("mouseout",(e=>{this.edit||this.updateCursorLocation(null)})),document.addEventListener("keydown",this.onKeyDown,!0),document.addEventListener("keyup",this.onKeyUp),document.addEventListener("copy",this.onCopy),document.addEventListener("paste",this.onPaste);const t=this.getImageState();this.editState=(0,c.getEditState)(t,this.props.isTilemap,this.props.drawingMode),this.redraw(),this.updateBackground()}componentDidUpdate(){if(!this.edit||!this.editState){const e=this.getImageState();this.editState=(0,c.getEditState)(e,this.props.isTilemap,this.props.drawingMode)}if(this.props.isTilemap||(this.tileCache={}),this.cellWidth=this.props.isTilemap?this.props.tilemapState.tileset.tileWidth:1,this.props.zoomDelta||0===this.props.zoomDelta)return 0===this.props.zoomDelta?this.hasInteracted||this.zoomToCanvas():(this.hasInteracted=!0,this.updateZoom(this.props.zoomDelta)),void this.props.dispatchChangeZoom(null);this.redraw(),this.updateBackground()}componentWillUnmount(){this.tileCache={},document.removeEventListener("keydown",this.onKeyDown,!0),document.removeEventListener("keyup",this.onKeyUp),document.removeEventListener("copy",this.onCopy),document.removeEventListener("paste",this.onPaste)}onClick(e,t){var n,i;this.hasInteracted=!0,this.isPanning()||(document.activeElement instanceof HTMLElement&&document.activeElement!==this.refs["canvas-bounds"]&&document.activeElement.blur(),this.refs["canvas-bounds"].focus(),this.isColorSelect()?this.selectCanvasColor(e,t):(this.updateCursorLocation(e),this.inBounds(this.cursorLocation[0],this.cursorLocation[1])?(this.touchesResize(e.clientX,e.clientY)&&(this.isResizing=!0),this.startEdit(!!t),this.updateEdit(this.cursorLocation[0],this.cursorLocation[1]),this.commitEdit()):(null===(i=null===(n=this.editState)||void 0===n?void 0:n.floating)||void 0===i?void 0:i.image)&&(this.editState.mergeFloatingLayer(),this.props.dispatchImageEdit(this.editState.toImageState()))))}onDragStart(e,t){this.hasInteracted=!0,this.touchesResize(e.clientX,e.clientY)&&(this.isResizing=!0),this.isPanning()?(this.lastPanX=e.clientX,this.lastPanY=e.clientY,this.updateCursor(!0,!1)):this.isColorSelect()?this.selectCanvasColor(e,t):(this.updateCursorLocation(e),this.startEdit(!!t))}onDragMove(e){if(this.isPanning()&&null!=this.lastPanX&&null!=this.lastPanY)this.panX+=this.lastPanX-e.clientX,this.panY+=this.lastPanY-e.clientY,this.lastPanX=e.clientX,this.lastPanY=e.clientY,this.updateCursor(!0,!1);else{if(!this.edit)return;this.updateCursorLocation(e)&&this.updateEdit(this.cursorLocation[0],this.cursorLocation[1])}}onDragEnd(e){if(this.isPanning()&&null!=this.lastPanX&&null!=this.lastPanY)this.panX+=this.lastPanX-e.clientX,this.panY+=this.lastPanY-e.clientY,this.lastPanX=void 0,this.lastPanY=void 0,this.updateCursor(!1,!1);else if(this.isResizing){if(!this.edit)return;this.updateCursorLocation(e)&&this.updateEdit(this.cursorLocation[0],this.cursorLocation[1]),this.commitEdit(!1),this.updateCursor(!1,!1)}else{if(!this.edit)return;this.updateCursorLocation(e)&&this.updateEdit(this.cursorLocation[0],this.cursorLocation[1]),this.commitEdit()}this.isResizing=!1}updateCursorLocation(e){if(!e)return this.cursorLocation&&(this.cursorLocation=null,this.props.dispatchChangeCursorLocation(null),this.edit||this.redraw()),!1;if(this.canvas){const t=this.canvas.getBoundingClientRect(),n=Math.floor((e.clientX-t.left)/t.width*this.imageWidth),i=Math.floor((e.clientY-t.top)/t.height*this.imageHeight);return!(this.cursorLocation&&n===this.cursorLocation[0]&&i===this.cursorLocation[1]||(this.cursorLocation=[n,i,e.clientX,e.clientY],this.hasHover&&this.props.dispatchChangeCursorLocation(this.cursorLocation),this.edit||this.redraw(),this.updateCursor(!!this.edit,this.editState.inFloatingLayer(n,i)),0))}return this.cursorLocation=[0,0,e.clientX,e.clientY],!1}updateCursor(e,t){const{tool:n}=this.props,i=c.tools.find((e=>e.tool===n));i?t?e?this.updateCursorCore(i.downLayerCursor||i.hoverLayerCursor||i.downCursor||i.hoverCursor):this.updateCursorCore(i.hoverLayerCursor||i.hoverCursor):e?this.updateCursorCore(i.downCursor||i.hoverCursor):this.updateCursorCore(i.hoverCursor):this.updateCursorCore(c.ToolCursor.Default)}updateCursorCore(e){this.cursor=e||c.ToolCursor.Default,this.updateBackground()}startEdit(e){const{tool:t,toolWidth:n,selectedColor:i,backgroundColor:r,drawingMode:a}=this.props,[o,l]=this.cursorLocation;if(this.inBounds(o,l)||this.isResizing){let o=a==s.TileDrawingMode.Wall?2:e?r:i;this.edit=(0,c.getEdit)(t,this.editState,o,n),this.edit.originalImage=this.originalImage,this.edit.start(this.cursorLocation[0],this.cursorLocation[1],this.cursorLocation[2],this.cursorLocation[3],this.editState)}}updateEdit(e,t){this.edit&&(this.edit.inBounds(e,t)||this.isResizing)&&(this.edit.update(e,t),this.redraw())}commitEdit(e=!0){const{dispatchImageEdit:t}=this.props,n=this.getImageState();this.edit&&(this.editState=(0,c.getEditState)(n,this.props.isTilemap,this.props.drawingMode),this.edit.doEdit(this.editState),this.originalImage=e?void 0:this.edit.originalImage,this.edit=void 0,t(this.editState.toImageState()))}redraw(){const{prevFrame:e,onionSkinEnabled:t,selectedColor:n,toolWidth:i,drawingMode:r,tool:a}=this.props,o=this.getImageState(),l=r==s.TileDrawingMode.Wall?2:n;let u=!1;if(this.canvas){if(this.imageWidth=o.bitmap.width,this.imageHeight=o.bitmap.height,u=this.canvas.width!=o.bitmap.width*this.cellWidth||this.canvas.height!=o.bitmap.height*this.cellWidth,this.canvas.width=o.bitmap.width*this.cellWidth,this.canvas.height=o.bitmap.height*this.cellWidth,this.canvasLayers.forEach((e=>{e.width=this.canvas.width/this.cellWidth,e.height=this.canvas.height/this.cellWidth})),t&&e){const t=(0,c.getEditState)(e,this.props.isTilemap,r),n=this.canvas.getContext("2d");n.globalAlpha=.5,this.drawImage(t.image),t.floating&&t.floating.image&&this.drawImage(t.floating.image,t.layerOffsetX,t.layerOffsetY,!0),n.globalAlpha=1}if(this.edit){const n=this.editState.copy();n.setActiveLayer(r),this.edit.doEdit(n),this.drawImage(n.image,0,0,!(!t||!e)),this.drawOverlayLayers(n.overlayLayers),this.redrawFloatingLayer(n)}else if(this.drawImage(this.editState.image,0,0,!(!t||!e)),this.drawOverlayLayers(this.editState.overlayLayers),this.redrawFloatingLayer(this.editState),this.cursorLocation&&this.shouldDrawCursor()){const e=a===s.ImageEditorTool.Erase?0:l;this.drawCursor(this.cursorLocation[0]-(i>>1),this.cursorLocation[1]-(i>>1),i,e)}if(this.background&&(this.background.width!=this.canvas.width<<1||this.background.height!=this.canvas.height<<1)){this.background.width=this.canvas.width<<1,this.background.height=this.canvas.height<<1;const e=this.background.getContext("2d");e.imageSmoothingEnabled=!1,e.fillStyle="#aeaeae",e.fillRect(0,0,this.background.width,this.background.height),e.fillStyle="#dedede";const t=this.imageHeight<<1,n=this.imageWidth<<1;for(let i=0;i<n;i++)for(let n=0;n<t;n++)i+n&1&&e.fillRect(i*this.cellWidth,n*this.cellWidth,this.cellWidth,this.cellWidth)}}u&&this.zoomToCanvas()}drawImage(e,t=0,n=0,i=!1,r=!this.props.lightMode){this.props.isTilemap?this.drawTilemap(e,t,n,i,r):this.drawBitmap(e,t,n,i,r)}redrawFloatingLayer(e,t=!1){const n=this.refs["floating-layer-border"],i=this.refs["floating-layer-nw-corner"],r=this.refs["floating-layer-ne-corner"],a=this.refs["floating-layer-se-corner"],s=this.refs["floating-layer-sw-corner"],o=[i,r,a,s];if(e.floa