@yuebai008/cli/dist/cli-server/client/front_end/ui/legacy/Icon.js

Command line interface for rapid qg-minigame development

import*as Utils from"./utils/utils.js";let iconConstructor=null;export class Icon extends HTMLSpanElement{descriptor;spriteSheet;iconType;constructor(){super(),this.descriptor=null,this.spriteSheet=null,this.iconType=""}static create(e,i){iconConstructor||(iconConstructor=Utils.registerCustomElement("span","ui-icon",Icon));const t=iconConstructor();return i&&(t.className=i),e&&t.setIconType(e),t}setIconType(e){this.descriptor&&(this.style.removeProperty("--spritesheet-position"),this.style.removeProperty("width"),this.style.removeProperty("height"),this.toggleClasses(!1),this.iconType="",this.descriptor=null,this.spriteSheet=null);const i=descriptors.get(e)||null;if(i){if(this.iconType=e,this.descriptor=i,this.spriteSheet=spriteSheets.get(this.descriptor.spritesheet)||null,!this.spriteSheet)throw new Error(`ERROR: icon ${this.iconType} has unknown spritesheet: ${this.descriptor.spritesheet}`);this.style.setProperty("--spritesheet-position",this.propertyValue()),this.style.setProperty("width",this.spriteSheet.cellWidth+"px"),this.style.setProperty("height",this.spriteSheet.cellHeight+"px"),this.toggleClasses(!0)}else if(e)throw new Error(`ERROR: failed to find icon descriptor for type: ${e}`)}setIconColor(e){this.style.setProperty("background-color",e)}toggleClasses(e){this.descriptor&&(this.classList.toggle("spritesheet-"+this.descriptor.spritesheet,e),this.classList.toggle(this.iconType,e),this.classList.toggle("icon-mask",e&&Boolean(this.descriptor.isMask)),this.classList.toggle("icon-invert",e&&Boolean(this.descriptor.invert)))}propertyValue(){if(!this.descriptor||!this.spriteSheet)throw new Error("Descriptor and spriteSheet expected to be present");if(!this.descriptor.coordinates){if(!this.descriptor.position||!_positionRegex.test(this.descriptor.position))throw new Error(`ERROR: icon '${this.iconType}' has malformed position: '${this.descriptor.position}'`);const e=this.descriptor.position[0].toLowerCase().charCodeAt(0)-97,i=parseInt(this.descriptor.position.substring(1),10)-1;this.descriptor.coordinates={x:-(this.spriteSheet.cellWidth+this.spriteSheet.padding)*e,y:(this.spriteSheet.cellHeight+this.spriteSheet.padding)*(i+1)-this.spriteSheet.padding}}return`${this.descriptor.coordinates.x}px ${this.descriptor.coordinates.y}px`}}const _positionRegex=/^[a-z][1-9][0-9]*$/,spriteSheets=new Map([["smallicons",{cellWidth:10,cellHeight:10,padding:10}],["mediumicons",{cellWidth:16,cellHeight:16,padding:0}],["largeicons",{cellWidth:28,cellHeight:24,padding:0}],["arrowicons",{cellWidth:19,cellHeight:19,padding:0}],["3d-center",{cellWidth:20,cellHeight:20,padding:0}],["3d-pan",{cellWidth:20,cellHeight:20,padding:0}],["3d-rotate",{cellWidth:20,cellHeight:20,padding:0}],["arrow-up-down-circle",{cellWidth:20,cellHeight:20,padding:0}],["arrow-up-down",{cellWidth:20,cellHeight:20,padding:0}],["bell",{cellWidth:20,cellHeight:20,padding:0}],["bezier-curve-filled",{cellWidth:20,cellHeight:20,padding:0}],["bin",{cellWidth:20,cellHeight:20,padding:0}],["bottom-panel-close",{cellWidth:20,cellHeight:20,padding:0}],["bottom-panel-open",{cellWidth:20,cellHeight:20,padding:0}],["brackets",{cellWidth:20,cellHeight:20,padding:0}],["breakpoint-crossed-filled",{cellWidth:20,cellHeight:20,padding:0}],["breakpoint-crossed",{cellWidth:20,cellHeight:20,padding:0}],["brush-filled",{cellWidth:20,cellHeight:20,padding:0}],["brush",{cellWidth:20,cellHeight:20,padding:0}],["bug",{cellWidth:20,cellHeight:20,padding:0}],["check-double",{cellWidth:20,cellHeight:20,padding:0}],["checkmark",{cellWidth:20,cellHeight:20,padding:0}],["chevron-double-right",{cellWidth:20,cellHeight:20,padding:0}],["chevron-down",{cellWidth:20,cellHeight:20,padding:0}],["chevron-up",{cellWidth:20,cellHeight:20,padding:0}],["clear-list",{cellWidth:20,cellHeight:20,padding:0}],["clear",{cellWidth:20,cellHeight:20,padding:0}],["cloud",{cellWidth:20,cellHeight:20,padding:0}],["code-circle",{cellWidth:20,cellHeight:20,padding:0}],["color-picker-filled",{cellWidth:20,cellHeight:20,padding:0}],["color-picker",{cellWidth:20,cellHeight:20,padding:0}],["cookie",{cellWidth:20,cellHeight:20,padding:0}],["copy",{cellWidth:20,cellHeight:20,padding:0}],["credit-card",{cellWidth:20,cellHeight:20,padding:0}],["cross-circle",{cellWidth:20,cellHeight:20,padding:0}],["cross",{cellWidth:20,cellHeight:20,padding:0}],["custom-typography",{cellWidth:20,cellHeight:20,padding:0}],["database",{cellWidth:20,cellHeight:20,padding:0}],["device-fold",{cellWidth:20,cellHeight:20,padding:0}],["devices",{cellWidth:20,cellHeight:20,padding:0}],["dock-bottom",{cellWidth:20,cellHeight:20,padding:0}],["dock-left",{cellWidth:20,cellHeight:20,padding:0}],["dock-right",{cellWidth:20,cellHeight:20,padding:0}],["dock-window",{cellWidth:20,cellHeight:20,padding:0}],["document",{cellWidth:20,cellHeight:20,padding:0}],["dots-vertical",{cellWidth:20,cellHeight:20,padding:0}],["download",{cellWidth:20,cellHeight:20,padding:0}],["edit",{cellWidth:20,cellHeight:20,padding:0}],["experiment-check",{cellWidth:20,cellHeight:20,padding:0}],["eye",{cellWidth:20,cellHeight:20,padding:0}],["filter-clear",{cellWidth:20,cellHeight:20,padding:0}],["filter-filled",{cellWidth:20,cellHeight:20,padding:0}],["filter",{cellWidth:20,cellHeight:20,padding:0}],["frame-crossed",{cellWidth:20,cellHeight:20,padding:0}],["frame",{cellWidth:20,cellHeight:20,padding:0}],["gear-filled",{cellWidth:20,cellHeight:20,padding:0}],["gear",{cellWidth:20,cellHeight:20,padding:0}],["gears",{cellWidth:20,cellHeight:20,padding:0}],["heap-snapshot",{cellWidth:20,cellHeight:20,padding:0}],["heap-snapshots",{cellWidth:20,cellHeight:20,padding:0}],["iframe-crossed",{cellWidth:20,cellHeight:20,padding:0}],["iframe",{cellWidth:20,cellHeight:20,padding:0}],["import",{cellWidth:20,cellHeight:20,padding:0}],["info",{cellWidth:20,cellHeight:20,padding:0}],["keyboard-pen",{cellWidth:20,cellHeight:20,padding:0}],["layers-filled",{cellWidth:20,cellHeight:20,padding:0}],["layers",{cellWidth:20,cellHeight:20,padding:0}],["left-panel-close",{cellWidth:20,cellHeight:20,padding:0}],["left-panel-open",{cellWidth:20,cellHeight:20,padding:0}],["list",{cellWidth:20,cellHeight:20,padding:0}],["pause",{cellWidth:20,cellHeight:20,padding:0}],["play",{cellWidth:20,cellHeight:20,padding:0}],["plus",{cellWidth:20,cellHeight:20,padding:0}],["popup",{cellWidth:20,cellHeight:20,padding:0}],["profile",{cellWidth:20,cellHeight:20,padding:0}],["record-start",{cellWidth:20,cellHeight:20,padding:0}],["record-stop",{cellWidth:20,cellHeight:20,padding:0}],["refresh",{cellWidth:20,cellHeight:20,padding:0}],["replace",{cellWidth:20,cellHeight:20,padding:0}],["replay",{cellWidth:20,cellHeight:20,padding:0}],["resume",{cellWidth:20,cellHeight:20,padding:0}],["right-panel-close",{cellWidth:20,cellHeight:20,padding:0}],["right-panel-open",{cellWidth:20,cellHeight:20,padding:0}],["screen-rotation",{cellWidth:20,cellHeight:20,padding:0}],["search",{cellWidth:20,cellHeight:20,padding:0}],["select-element",{cellWidth:20,cellHeight:20,padding:0}],["shadow",{cellWidth:20,cellHeight:20,padding:0}],["step-into",{cellWidth:20,cellHeight:20,padding:0}],["step-out",{cellWidth:20,cellHeight:20,padding:0}],["step-over",{cellWidth:20,cellHeight:20,padding:0}],["step",{cellWidth:20,cellHeight:20,padding:0}],["stop",{cellWidth:20,cellHeight:20,padding:0}],["sync",{cellWidth:20,cellHeight:20,padding:0}],["table",{cellWidth:20,cellHeight:20,padding:0}],["top-panel-close",{cellWidth:20,cellHeight:20,padding:0}],["top-panel-open",{cellWidth:20,cellHeight:20,padding:0}],["triangle-bottom-right",{cellWidth:20,cellHeight:20,padding:0}],["triangle-down",{cellWidth:14,cellHeight:14,padding:0}],["triangle-left",{cellWidth:14,cellHeight:14,padding:0}],["triangle-right",{cellWidth:14,cellHeight:14,padding:0}],["triangle-up",{cellWidth:14,cellHeight:14,padding:0}],["undo",{cellWidth:20,cellHeight:20,padding:0}],["warning",{cellWidth:20,cellHeight:20,padding:0}],["watch",{cellWidth:20,cellHeight:20,padding:0}]]),initialDescriptors=new Map([["mediumicon-arrow-top",{position:"a4",spritesheet:"arrowicons"}],["mediumicon-arrow-bottom",{position:"a3",spritesheet:"arrowicons"}],["mediumicon-arrow-left",{position:"a2",spritesheet:"arrowicons"}],["mediumicon-arrow-right",{position:"a1",spritesheet:"arrowicons"}],["3d-center",{position:"a1",spritesheet:"3d-center",isMask:!0}],["3d-pan",{position:"a1",spritesheet:"3d-pan",isMask:!0}],["3d-rotate",{position:"a1",spritesheet:"3d-rotate",isMask:!0}],["arrow-up-down",{position:"a1",spritesheet:"arrow-up-down",isMask:!0}],["arrow-up-down-circle",{position:"a1",spritesheet:"arrow-up-down-circle",isMask:!0}],["bell",{position:"a1",spritesheet:"bell",isMask:!0}],["bezier-curve-filled",{position:"a1",spritesheet:"bezier-curve-filled",isMask:!0}],["bin",{position:"a1",spritesheet:"bin",isMask:!0}],["bottom-panel-close",{position:"a1",spritesheet:"bottom-panel-close",isMask:!0}],["bottom-panel-open",{position:"a1",spritesheet:"bottom-panel-open",isMask:!0}],["brackets",{position:"a1",spritesheet:"brackets",isMask:!0}],["breakpoint-crossed-filled",{position:"a1",spritesheet:"breakpoint-crossed-filled",isMask:!0}],["breakpoint-crossed",{position:"a1",spritesheet:"breakpoint-crossed",isMask:!0}],["brush-filled",{position:"a1",spritesheet:"brush-filled",isMask:!0}],["brush",{position:"a1",spritesheet:"brush",isMask:!0}],["bug",{position:"a1",spritesheet:"bug",isMask:!0}],["check-double",{position:"a1",spritesheet:"check-double",isMask:!0}],["checkmark",{position:"a1",spritesheet:"checkmark",isMask:!0}],["chevron-double-right",{position:"a1",spritesheet:"chevron-double-right",isMask:!0}],["chevron-down",{position:"a1",spritesheet:"chevron-down",isMask:!0}],["chevron-up",{position:"a1",spritesheet:"chevron-up",isMask:!0}],["clear-list",{position:"a1",spritesheet:"clear-list",isMask:!0}],["clear",{position:"a1",spritesheet:"clear",isMask:!0}],["cloud",{position:"a1",spritesheet:"cloud",isMask:!0}],["code-circle",{position:"a1",spritesheet:"code-circle",isMask:!0}],["color-picker-filled",{position:"a1",spritesheet:"color-picker-filled",isMask:!0}],["color-picker",{position:"a1",spritesheet:"color-picker",isMask:!0}],["cookie",{position:"a1",spritesheet:"cookie",isMask:!0}],["copy",{position:"a1",spritesheet:"copy",isMask:!0}],["credit-card",{position:"a1",spritesheet:"credit-card",isMask:!0}],["cross-circle",{position:"a1",spritesheet:"cross-circle",isMask:!0}],["cross",{position:"a1",spritesheet:"cross",isMask:!0}],["custom-typography",{position:"a1",spritesheet:"custom-typography",isMask:!0}],["database",{position:"a1",spritesheet:"database",isMask:!0}],["device-fold",{position:"a1",spritesheet:"device-fold",isMask:!0}],["devices",{position:"a1",spritesheet:"devices",isMask:!0}],["dock-bottom",{position:"a1",spritesheet:"dock-bottom",isMask:!0}],["dock-left",{position:"a1",spritesheet:"dock-left",isMask:!0}],["dock-right",{position:"a1",spritesheet:"dock-right",isMask:!0}],["dock-window",{position:"a1",spritesheet:"dock-window",isMask:!0}],["document",{position:"a1",spritesheet:"document",isMask:!0}],["dots-vertical",{position:"a1",spritesheet:"dots-vertical",isMask:!0}],["download",{position:"a1",spritesheet:"download",isMask:!0}],["edit",{position:"a1",spritesheet:"edit",isMask:!0}],["experiment-check",{position:"a1",spritesheet:"experiment-check",isMask:!0}],["eye",{position:"a1",spritesheet:"eye",isMask:!0}],["filter-clear",{position:"a1",spritesheet:"filter-clear",isMask:!0}],["filter-filled",{position:"a1",spritesheet:"filter-filled",isMask:!0}],["filter",{position:"a1",spritesheet:"filter",isMask:!0}],["frame-crossed",{position:"a1",spritesheet:"frame-crossed",isMask:!0}],["frame",{position:"a1",spritesheet:"frame",isMask:!0}],["gear-filled",{position:"a1",spritesheet:"gear-filled",isMask:!0}],["gear",{position:"a1",spritesheet:"gear",isMask:!0}],["gears",{position:"a1",spritesheet:"gears",isMask:!0}],["heap-snapshot",{position:"a1",spritesheet:"heap-snapshot",isMask:!0}],["heap-snapshots",{position:"a1",spritesheet:"heap-snapshots",isMask:!0}],["iframe-crossed",{position:"a1",spritesheet:"iframe-crossed",isMask:!0}],["iframe",{position:"a1",spritesheet:"iframe",isMask:!0}],["import",{position:"a1",spritesheet:"import",isMask:!0}],["info",{position:"a1",spritesheet:"info",isMask:!0}],["keyboard-pen",{position:"a1",spritesheet:"keyboard-pen",isMask:!0}],["layers-filled",{position:"a1",spritesheet:"layers-filled",isMask:!0}],["layers",{position:"a1",spritesheet:"layers",isMask:!0}],["left-panel-close",{position:"a1",spritesheet:"left-panel-close",isMask:!0}],["left-panel-open",{position:"a1",spritesheet:"left-panel-open",isMask:!0}],["list",{position:"a1",spritesheet:"list",isMask:!0}],["pause",{position:"a1",spritesheet:"pause",isMask:!0}],["play",{position:"a1",spritesheet:"play",isMask:!0}],["plus",{position:"a1",spritesheet:"plus",isMask:!0}],["popup",{position:"a1",spritesheet:"popup",isMask:!0}],["profile",{position:"a1",spritesheet:"profile",isMask:!0}],["record-start",{position:"a1",spritesheet:"record-start",isMask:!0}],["record-stop",{position:"a1",spritesheet:"record-stop",isMask:!0}],["refresh",{position:"a1",spritesheet:"refresh",isMask:!0}],["replace",{position:"a1",spritesheet:"replace",isMask:!0}],["replay",{position:"a1",spritesheet:"replay",isMask:!0}],["resume",{position:"a1",spritesheet:"resume",isMask:!0}],["right-panel-close",{position:"a1",spritesheet:"right-panel-close",isMask:!0}],["right-panel-open",{position:"a1",spritesheet:"right-panel-open",isMask:!0}],["screen-rotation",{position:"a1",spritesheet:"screen-rotation",isMask:!0}],["search",{position:"a1",spritesheet:"search",isMask:!0}],["select-element",{position:"a1",spritesheet:"select-element",isMask:!0}],["shadow",{position:"a1",spritesheet:"shadow",isMask:!0}],["step-into",{position:"a1",spritesheet:"step-into",isMask:!0}],["step-out",{position:"a1",spritesheet:"step-out",isMask:!0}],["step-over",{position:"a1",spritesheet:"step-over",isMask:!0}],["step",{position:"a1",spritesheet:"step",isMask:!0}],["stop",{position:"a1",spritesheet:"stop",isMask:!0}],["sync",{position:"a1",spritesheet:"sync",isMask:!0}],["table",{position:"a1",spritesheet:"table",isMask:!0}],["top-panel-close",{position:"a1",spritesheet:"top-panel-close",isMask:!0}],["top-panel-open",{position:"a1",spritesheet:"top-panel-open",isMask:!0}],["triangle-bottom-right",{position:"a1",spritesheet:"triangle-bottom-right",isMask:!0}],["triangle-down",{position:"a1",spritesheet:"triangle-down",isMask:!0}],["triangle-left",{position:"a1",spritesheet:"triangle-left",isMask:!0}],["triangle-right",{position:"a1",spritesheet:"triangle-right",isMask:!0}],["triangle-up",{position:"a1",spritesheet:"triangle-up",isMask:!0}],["undo",{position:"a1",spritesheet:"undo",isMask:!0}],["warning",{position:"a1",spritesheet:"warning",isMask:!0}],["watch",{position:"a1",spritesheet:"watch",isMask:!0}]]),descriptors=initialDescriptors;