thematic-earth/joe/panels/symbol-specifier-panel.class.js

HTML-based, whole-Earth thematic maps using locally hosted data layers

/* Copyright (c) 2023 Read Write Tools. Legal use subject to the Thematic Earth Software License Agreement. */
import BasePanel from'../panels/base-panel.class.js';import SS from'../enum/symbol-specifier-type.enum.js';import FT from'../enum/feature-type.enum.js';import*as MapScale from'../projection/map-scale.js';import*as Color from'../graphics/color.js';import*as TessValidator from'../tess/tess-validator.js';import*as TessGrammar from'../tess/tess-grammar.js';import SymbolSpecifiers from'../tess/symbol-specifiers.class.js';import TessAssignedValue from'../tess/tess-assigned-value.class.js';import TessDefaults from'../tess/tess-defaults.js';import GraphicSymbols from'../menu/graphic-symbols.js';import expect from'../dev/expect.js';import terminal from'../dev/terminal.js';export default class SymbolSpecifierPanel extends BasePanel{constructor(e){super(e),this.visual=e.earth.visual,this.symbolSpecifiers=new SymbolSpecifiers(this.visual),Object.seal(this)}registerBroadcasters(){}registerReceivers(){this.signal.listen('user/chosenFeature',(e=>{this.chosenFeature(e)})),this.signal.listen('carte/mapScale',(e=>{this.showSomething(this.symbolSpecifiers.mruFeature,this.symbolSpecifiers.mruLayer)})),this.signal.listen('catalog/endRender',(()=>{this.showSomething(this.symbolSpecifiers.mruFeature,this.symbolSpecifiers.mruLayer)}))}chosenFeature(e){this.getDockablePanels().toolbar.isExpanded||this.getDockablePanels().detachPanel('symbol-specifier'),this.getDockablePanels().expandPanel('symbol-specifier'),null==e?this.showNothing():this.showSomething(e.feature,e.layer)}showNothing(){this.getElementById('ss-id-section').innerHTML='<div data-instructions=true class=\'chef-center\'>"S" \'n Click —➤ <br>Inspect thematic earth symbol specifiers</div>',this.getElementById('ss-attribute-section').innerHTML='',this.getElementById('ss-command-section').innerHTML='',this.getElementById('ss-add-section').innerHTML='',this.getElementById('ss-export-section').innerHTML='',this.getElementById('ss-overrides-div').innerHTML='',this.getElementById('ss-attribute-section').style.display='none',this.getElementById('ss-command-section').style.display='none',this.getElementById('ss-add-section').style.display='none',this.getElementById('ss-export-section').style.display='none',this.getElementById('ss-overrides-div').style.display='none',this.symbolSpecifiers.mruFeature=null,this.symbolSpecifiers.mruLayer=null}showSomething(e,t){if(null==e||null==t)this.showNothing();else{expect(e,['GeneralFeature','GreatCircleFeature','HemisphereFeature','LabelFeature','LineFeature','PointFeature','PolygonFeature']),expect(t,'Layer'),this.setupIdSection(e,t),this.setupAttributeSection(e,t),this.setupCommandSection(),this.setupAddSection(e,t),this.setupExportSection(),this.getElementById('ss-attribute-section').style.display='block',this.getElementById('ss-command-section').style.display='block';var s=this.getElementById('ss-feature-property-names'),a=Object.getOwnPropertyNames(e.kvPairs);s.innerText=a.join('|');var i=this.getElementById('ss-attribute-value-tbody'),r=!1;for(let e=0;e<i.children.length;e++){var l=i.children[e],n=l.getAttribute('data-grammar-name');null!=this.symbolSpecifiers.mruGrammarName&&n==this.symbolSpecifiers.mruGrammarName&&(r=!0,l.focus())}0==r&&i.children[0].focus()}}setupIdSection(e,t){expect(e,['GeneralFeature','GreatCircleFeature','HemisphereFeature','LabelFeature','LineFeature','PointFeature','PolygonFeature']),expect(t,'Layer');var s=[];s.push(`<p class='chef-center'>Feature Id: ${e.featureId}</p>`),s.push(`<p class='chef-center'>Layer: ${t.layerName}</p>`),''!=e.featureName&&s.push(`<p class='chef-center'>Feature Name: ${e.featureName}</p>`),this.getElementById('ss-id-section').innerHTML=s.join('')}setupAttributeSection(e,t){expect(e,['GeneralFeature','GreatCircleFeature','HemisphereFeature','LabelFeature','LineFeature','PointFeature','PolygonFeature']),expect(t,'Layer');var s=e.getCanvasParamsPerLayerId(t.layerId);expect(s,'CanvasParams');var a=[];a.push('<table id=\'ss-attribute-value-list\' class=\'chef-table\' style=\'width:100%\'>'),a.push('<colgroup><col style=\'width: 6px;\'><col><col></colgroup>'),a.push('<thead>'),a.push('<tr>'),a.push('<th></th><th>Attribute</th><th>Value</th>'),a.push('</tr>'),a.push('</thead>'),a.push('<tbody id=\'ss-attribute-value-tbody\'>');var i=this.symbolSpecifiers.getAllOverridesForFeature(e,t);for(let[v,f]of i){var r=null,l='',n=!1;for(let e=0;e<f.length;e++)if(f[e].isEnabled){r=f[e],n=!0;break}if(null==r&&(r=f[0],l='style=\'text-decoration: line-through;\''),1==n){var o='',d='',u='',h='',c='';if(0==TessValidator.isSpelledCorrectly(v))o=`<img class='exclamation' src='${GraphicSymbols.exclamationTriangle}' title='Misspelled name') />`,l='style=\'text-decoration: line-through;\'';else{var p=TessValidator.isValidPropertyName(e.featureType,v);o=p?'':`<img class='exclamation' src='${GraphicSymbols.exclamationTriangle}' title='${v} has no effect on ${e.featureType} features') />`;if(p){var m=TessValidator.isValidPropertyValue(v,r.value);d=''==m?'':`<img class='exclamation' src='${GraphicSymbols.exclamationTriangle}' title="${m}") />`;var b=TessValidator.checkForPrerequisite(e.featureType,v,s);u=''==b?'':`<img class='exclamation' src='${GraphicSymbols.exclamationTriangle}' title="${b}") />`;var g=TessValidator.checkLabelRequirements(t,v,s);h=''==g?'':`<img class='exclamation' src='${GraphicSymbols.exclamationTriangle}' title="${g}") />`;var y=TessValidator.checkScaleRequirements(t,v,s);c=''==y?'':`<img class='exclamation' src='${GraphicSymbols.exclamationTriangle}' title="${y}") />`}}}TessGrammar.getGroupName(v);let i=TessGrammar.getAssignedRGB(v);a.push(`<tr id='ss-${v}' data-grammar-name='${v}' tabindex=1 class='focusable'>`),a.push(`<td style='background-color: ${i};'></td>`),a.push(`<td ${l}>${v}${o}${h}${c}${u}</td>`),a.push(`<td ${l}>${r.value}${d}</td>`),a.push('</tr>')}a.push('</tbody>'),a.push('</table>'),this.getElementById('ss-attribute-section').innerHTML=a.join('');for(let[e,t]of i){var v=this.getElementById(`ss-${e}`);v.addEventListener('keydown',this.attributeListKeyboardHandler.bind(this)),v.addEventListener('dblclick',this.attributeListDblclickHandler.bind(this)),v.addEventListener('focus',this.setupBottomSection.bind(this))}}attributeListKeyboardHandler(e){if('ArrowUp'==e.key)null!=(t=e.currentTarget.previousElementSibling)&&(t.focus(),e.preventDefault());else if('ArrowDown'==e.key){var t;null!=(t=e.currentTarget.nextElementSibling)&&(t.focus(),e.preventDefault())}else'Tab'==e.key&&(this.setFocusByType(),e.preventDefault())}attributeListDblclickHandler(e){this.setFocusByType(),e.preventDefault()}setFocusByType(){var e=this.getElementById('ss-type').innerHTML;switch(e){case SS.SELECT:var t=this.getElementById('ss-select-0');null!=t&&t.focus();break;case SS.MULTI:var s=this.getElementById('ss-multi-0');null!=s&&s.focus();break;case SS.COLOR:var a=this.getElementById('ss-color-hex-0');null!=a&&(a.focus(),a.select());break;case SS.NUMBER:case SS.RANGE:case SS.MAPSCALE:case SS.TEXT:var i=this.getElementById('ss-text-0');null!=i&&(i.focus(),i.select());break;default:terminal.abnormal(`Unknown ssType ${e}`)}}setupBottomSection(e){var t=this.querySelectorAll('#ss-attribute-value-list tr.focusable[selected]');for(let e=0;e<t.length;e++)t[e].removeAttribute('selected');e.currentTarget.setAttribute('selected','true');var s=e.currentTarget.getAttribute('data-grammar-name'),a=this.symbolSpecifiers.symbolOverrides.get(s);this.showOverrides(s,a,!1),this.getElementById('ss-command-section').style.display='flex',this.getElementById('ss-add-section').style.display='none',this.getElementById('ss-export-section').style.display='none'}setupCommandSection(){var e=[];e.push(`<button id='ss-new-initiate-button' type='button' tabindex=2 class='ss-button' style='width: 28px;' title='Add new attribute'><img src='${GraphicSymbols.commentPlus}' style='height: 17px;' /></button>`),e.push('<label for=\'ss-new-initiate-button\' style=\'margin-right:30px;\' >Add</label>'),e.push(`<button id='ss-export-initiate-button' type='button' tabindex=2 class='ss-button' style='width: 23px;' title='Export declarations'><img src='${GraphicSymbols.download}' style='height: 17px;' /></button>`),e.push('<label for=\'ss-export-initiate-button\'>Export</label>'),this.getElementById('ss-command-section').innerHTML=e.join('')}scrollToBottom(){var e=this.querySelector('#symbol-specifier > .chef-content');e.scrollTop=e.scrollHeight}setupAddSection(e,t){expect(e,['GeneralFeature','GreatCircleFeature','HemisphereFeature','LabelFeature','LineFeature','PointFeature','PolygonFeature']),expect(t,'Layer');var s=[];s.push('<h3 class=\'ss-h3\'>Add new attribute</h3>'),s.push(this.setupListOfRangeRestrictions(e,t)),s.push(this.setupListOfExistingSelectors(e,t)),s.push(this.setupListOfPossibleQualifiers(e)),s.push('<label for=\'ss-new-attribute-table\'>new attribute</label>'),s.push('<div id=\'ss-new-attribute-table-wrapper\'>'),s.push('<table id=\'ss-new-attribute-table\' class=\'chef-table\' tabindex=2 >'),s.push('</table>'),s.push('</div>'),this.getElementById('ss-add-section').innerHTML=s.join(''),s.push(this.setupListOfNewAttributes(e,t)),this.getElementById('ss-new-initiate-button').addEventListener('click',this.newAttributeButton.bind(this)),this.getElementById('ss-declare-new-range-button').addEventListener('click',this.declareNewRangeButton.bind(this)),this.getElementById('ss-new-scale').addEventListener('input',this.showDefaultAttributeOverrideChain.bind(this)),this.getElementById('ss-min-range').addEventListener('input',this.showDefaultAttributeOverrideChain.bind(this)),this.getElementById('ss-max-range').addEventListener('input',this.showDefaultAttributeOverrideChain.bind(this)),this.getElementById('ss-new-selector').addEventListener('input',this.showDefaultAttributeOverrideChain.bind(this)),this.getElementById('ss-new-qualifier').addEventListener('input',this.showDefaultAttributeOverrideChain.bind(this)),this.getElementById('ss-new-attribute-table').addEventListener('focus',this.focusNewAttributeTable.bind(this))}setupListOfRangeRestrictions(e,t){var s=this.symbolSpecifiers.getAllRangeRestrictionsOfFeature(e,t),a=[];a.push('<label for=\'ss-new-scale\'>@scale</label>'),a.push('<div class=\'wrapper\'>'),a.push('<select id=\'ss-new-scale\' tabindex=2 style=\'height:fit-content;\'>');for(let e=0;e<s.length;e++){var i=s[e],r=TessAssignedValue.formatMinMax(i);''==r&&(r='[any scale]'),a.push(`<option data-min-scale='${i.minScale}' data-max-scale='${i.maxScale}'>${r}</option>`)}return a.push('</select>'),a.push(`<button id='ss-declare-new-range-button' class='ss-button' tabindex=2 title='Declare new @scale range'><img src='${GraphicSymbols.atSign}' style='width: 16px;' /></button>`),a.push('</div>'),a.push('<div id=\'ss-range-wrapper\' style=\'display:none;\' class=\'wrapper\'>'),a.push('<div style=\'display:flex;\'>'),a.push('<label for=\'ss-min-range\' style=\'text-align:right; margin-right:10px;\'>from</label>'),a.push(`<input id='ss-min-range' type='number' min='${MapScale.MIN_MAP_SCALE}' max='${MapScale.MAX_MAP_SCALE}' placeholder='${MapScale.MIN_MAP_SCALE}' tabindex=2 style='width:90px'>`),a.push('</div>'),a.push('<div style=\'display:flex;\'>'),a.push('<label for=\'ss-max-range\' style=\'text-align:right; margin-left:20px; margin-right:10px;\'>to</label>'),a.push(`<input id='ss-max-range' type='number' min='${MapScale.MIN_MAP_SCALE}' max='${MapScale.MAX_MAP_SCALE}'  placeholder='${MapScale.MAX_MAP_SCALE}' tabindex=2 style='width:90px'>`),a.push('</div>'),a.push('</div>'),a.join('')}setupListOfExistingSelectors(e,t){var s=this.symbolSpecifiers.getAllSelectorsOfFeature(e,t),a=[];a.push('<label for=\'ss-new-selector\'>selector</label>'),a.push('<select id=\'ss-new-selector\' tabindex=2 >');for(let e=0;e<s.length;e++)a.push(`<option value='${s[e]}'>${s[e]}</option>`);return a.push('</select>'),a.join('')}setupListOfPossibleQualifiers(e){var t=[];t.push('<label for=\'ss-new-qualifier\'>qualifier</label>'),t.push('<select id=\'ss-new-qualifier\' tabindex=2>'),t.push('<option value=\'\'></option>');for(const[s,a]of Object.entries(e.kvPairs))t.push(`<option value='[${s}="${a}"]'>[${s}="${a}"]</option>`);return t.push('</select>'),t.join('')}setupListOfNewAttributes(e,t){var s=[],a=null;switch(e.featureType){case FT.POINT:a=TessGrammar.validPointProperties;break;case FT.LINE:a=TessGrammar.validLineProperties;break;case FT.POLYGON:a=TessGrammar.validPolygonProperties;break;case FT.SPHERE:a=TessGrammar.validSphereProperties;break;case FT.SPACE:a=TessGrammar.validSpaceProperties;break;case FT.LABEL:a=TessGrammar.validLabelProperties;break;default:terminal.logic(`Unknown featureType ${e.featureType}`)}var i=Array.from(a);0==t.isLabelable()&&(i=i.filter((e=>!TessGrammar.allLabelProperties.includes(e)))),i.sort(((e,t)=>{let s=TessGrammar.displayOrder[e],a=TessGrammar.displayOrder[t];return s<a?-1:s>a?1:0})),s.push('<colgroup><col style=\'width: 6px;\'><col style=\'width:100%\'></colgroup>'),s.push('<tbody id=\'ss-new-attribute-tbody\'>');for(let e=0;e<i.length;e++){let t=i[e],a=(TessGrammar.getGroupName(t),TessGrammar.getAssignedRGB(t));s.push(`<tr id='ss-new-${t}' data-grammar-name='${t}' tabindex=1 class='focusable'>`),s.push(`<td style='background-color: ${a};'></td>`),s.push(`<td>${t}</td>`),s.push('</tr>')}s.push('</tbody>'),this.getElementById('ss-new-attribute-table').innerHTML=s.join('');for(let e=0;e<i.length;e++){let t=i[e];var r=this.getElementById(`ss-new-${t}`);r.addEventListener('dblclick',this.attributeListDblclickHandler.bind(this)),r.addEventListener('keydown',this.attributeListKeyboardHandler.bind(this)),r.addEventListener('focus',this.selectNewFocusedAttribute.bind(this))}}selectNewFocusedAttribute(e){var t=this.querySelectorAll('#ss-new-attribute-table tr.focusable[selected]');for(let e=0;e<t.length;e++)t[e].removeAttribute('selected');e.currentTarget.setAttribute('selected','true'),this.showDefaultAttributeOverrideChain(e)}newAttributeButton(e){this.getElementById('ss-command-section').style.display='none',this.getElementById('ss-add-section').style.display='block',this.getElementById('ss-new-scale').focus(),this.getElementById('ss-overrides-div').style.display='none',this.scrollToBottom()}declareNewRangeButton(e){'flex'==this.getElementById('ss-range-wrapper').style.display?this.getElementById('ss-range-wrapper').style.display='none':(this.getElementById('ss-range-wrapper').style.display='flex',this.getElementById('ss-min-range').focus())}focusNewAttributeTable(e){var t=this.getElementById('ss-new-attribute-tbody'),s=!1;for(let e=0;e<t.children.length;e++){var a=t.children[e],i=a.getAttribute('data-grammar-name');null!=this.symbolSpecifiers.mruGrammarName&&i==this.symbolSpecifiers.mruGrammarName&&(s=!0,a.focus())}0==s&&t.children[0].focus()}showDefaultAttributeOverrideChain(e){var{minScale:t,maxScale:s}=this.getNewMinMax(),a=this.getElementById('ss-new-selector').value,i=this.getElementById('ss-new-qualifier').value,r=this.querySelector('#ss-new-attribute-table tr.focusable[selected]'),l=null==r?'unknown':r.getAttribute('data-grammar-name');this.symbolSpecifiers.mruGrammarName=l;var n=TessValidator.getDefaultValue(l),o=[];o.push(this.visual.prepareAssignedValue(t,s,`${a}${i}`,l,n));this.showOverrides(l,o,!0)}getNewMinMax(){var e=this.querySelector('#ss-new-scale option:checked'),t=e.getAttribute('data-min-scale'),s=e.getAttribute('data-max-scale'),a=this.getElementById('ss-min-range'),i=this.getElementById('ss-max-range');return''!=a.value&&''!=i.value&&(t=Math.max(MapScale.MIN_MAP_SCALE,Number(a.value)).toString(),s=Math.min(MapScale.MAX_MAP_SCALE,Number(i.value)).toString()),{minScale:t,maxScale:s}}setupExportSection(){var e=[];e.push('<h3 class=\'ss-h3\'>Export declarations</h3>'),e.push('<label for=\'ss-export-sources\'>Source files to include</label>'),e.push('<select id=\'ss-export-sources\' multiple tabindex=2 style=\'overflow-y: auto;\'>'),e.push('<option value=\'user\' selected>[Locally defined attributes]</option>');for(let a=this.visual.tessSourceFilenames.length-1;a>=0;a--){var t=this.visual.tessSourceFilenames[a],s='thematic-earth.tess'!=t?'selected':'';e.push(`<option value='${t}' ${s}>${t}</option>`)}e.push('</select>'),e.push('<div class=\'wrapper\' style=\'margin-top: 30px;\' margin-bottom: 40px;>'),e.push('<input id=\'ss-export-multiline-declarations\' type=checkbox tabindex=2 checked />'),e.push('<label for=\'ss-export-multiline-declarations\'>Multi-line declarations</label>'),e.push('</div>'),e.push('<div class=\'wrapper\' style=\'margin-top: 30px; margin-bottom: 0;\' >'),e.push('<input id=\'ss-export-alphabetically\' type=radio name=\'ss-export-sort\' value=\'alphabetical\' tabindex=2 checked />'),e.push('<label for=\'ss-export-alphabetically\'>Sort alphabetically</label>'),e.push('</div>'),e.push('<div class=\'wrapper\' style=\'margin-top: 0; margin-bottom: 0;\'>'),e.push('<input id=\'ss-export-category\' type=radio name=\'ss-export-sort\' value=\'category\' tabindex=2 />'),e.push('<label for=\'ss-export-category\'>Group by category</label>'),e.push('</div>'),e.push('<div class=\'wrapper\' style=\'margin-top: 0; margin-bottom: 0;\'>'),e.push('<input id=\'ss-export-original\' type=radio name=\'ss-export-sort\' value=\'original\' tabindex=2 />'),e.push('<label for=\'ss-export-original\'>Keep original order</label>'),e.push('</div>'),e.push('<div class=\'wrapper\' style=\'margin-top: 30px;\' margin-bottom: 40px;>'),e.push('<input id=\'ss-export-keep-disabled\' type=checkbox tabindex=2 checked />'),e.push('<label for=\'ss-export-keep-disabled\'>Keep disabled selectors</label>'),e.push('</div>');var a=this.visual.tessSourceFilenames[this.visual.tessSourceFilenames.length-1];e.push('<label for=\'ss-export-filename\' >Export filename</label>'),e.push(`<input id='ss-export-filename' type='text' tabindex=2 value='${a}' >`),e.push('<button id=\'ss-export-button\' tabindex=2 class=\'chef-command\' style=\'margin: 30px auto; max-width: 120px;\' >Export</button>'),this.getElementById('ss-export-section').innerHTML=e.join(''),this.getElementById('ss-export-initiate-button').addEventListener('click',this.showExportSection.bind(this)),this.getElementById('ss-export-button').addEventListener('click',this.exportButton.bind(this))}showExportSection(e){this.getElementById('ss-command-section').style.display='none',this.getElementById('ss-export-section').style.display='block',this.getElementById('ss-export-sources').focus(),this.getElementById('ss-overrides-div').style.display='none',this.scrollToBottom(),this.getElementById('ss-export-sources').focus()}exportButton(e){var t=this.getElementById('ss-export-button');t.disabled=!0;var s=[],a=this.getElementById('ss-export-sources');for(let e=0;e<a.options.length;e++)a.options[e].selected&&s.push(a.options[e].value);var i=this.getElementById('ss-export-multiline-declarations').checked,r='original';this.getElementById('ss-export-alphabetically').checked?r='alphabetical':this.getElementById('ss-export-category').checked?r='category':this.getElementById('ss-export-original').checked&&(r='original');var l=this.getElementById('ss-export-keep-disabled').checked,n=this.getElementById('ss-export-filename').value,o=this.visual.exportTess(s,i,r,l),d=document.createElement('a');d.download=n,d.href='data:text/plain;charset=utf-8,'+encodeURIComponent(o),d.click(),setTimeout((()=>{t.disabled=!1}),2e3)}showOverrides(e,t,s){expect(e,'String'),expect(t,'Array'),expect(s,'Boolean'),this.symbolSpecifiers.mruGrammarName=e;var a=TessValidator.getSymbolSpecifierType(e);this.getElementById('ss-type').innerHTML=a;var i=s?`${e}<br>(new)`:e,r=TessGrammar.readOnlyProperties.includes(e);r&&(i=`${i}<br>(read-only)`);var l=0==TessValidator.isSpelledCorrectly(e);l&&(i=`${i}<br>(misspelled) <img class='exclamation' src='${GraphicSymbols.exclamationTriangle}' />`,r=!0);var n='',o=[];o.push(`<h3 class='ss-h3' style='border-top: none;'>${i}</h3>`),o.push('<div style=\'display: flex; flex-direction: column; align-items: center;\''),o.push('<dl id=\'ss-overrides-dl\'>');for(let i=0;i<t.length;i++){var d=t[i];if(0==l)var u=TessValidator.isValidPropertyValue(e,d.value),h=''==u?'':`<img class='exclamation' src='${GraphicSymbols.exclamationTriangle}' title="${u}") />`;var c='';if(''!=d.minMaxScale&&(''==n?n=d.minMaxScale:d.minMaxScale!=n&&(c=`<img class='exclamation' src='${GraphicSymbols.exclamationTriangle}' title='Caution: "${n}" takes precedence over "${d.minMaxScale}"') />`)),d.isEnabled)var p='checked',m='Selector enabled for this feature (uncheck to disable)';else p='',m='Selector disabled for this feature (check to enable)';var b=s?'':'disabled',g=s?'Add new attribute':'Refresh using new value';o.push('<hr>'),o.push(`<dt data-which='${i}' data-selector='${d.selectorBase}' data-qualifier='${d.selectorQualifier}' data-min-scale='${d.minScale}' data-max-scale='${d.maxScale}' data-grammar-name='${e}' >`),o.push(`<span>Filename:</span> <b>${d.filename}</b>`),0==d.line&&0==d.column||o.push(`<br><span>Location:</span> <b>[${d.line}:${d.column}]</b>`),o.push(`<br><span>Selector:</span> <b>${d.selectorBase}</b>`),''!=d.selectorQualifier&&o.push(`<br><span>Qualifier:</span> <b>${d.selectorQualifier}</b>`),''!=d.minMaxScale&&o.push(`<br><span>Scale:</span> <b>${d.minMaxScale}</b> ${c}`),o.push('</dt>'),o.push('<dd>'),0==s&&0==r&&o.push(`<input data-which='${i}'  id='ss-checked-${i}' type='checkbox' tabindex=2 style='margin-right: 8px;' ${p} title='${m}' />`),o.push(this.buildInputElement(i,d,a,r)),o.push(h),0==r&&o.push(`<button data-which='${i}' id='ss-refresh-${i}' type='button' tabindex=2 class='ss-button' style='margin-left: 8px;' ${b} title='${g}'><img src='${GraphicSymbols.refresh}' /></button>`),o.push('</dd>')}o.push('</dl>'),o.push('</div>');var y=this.getElementById('ss-overrides-div');y.innerHTML=o.join(''),y.style.display='block';for(let e=0;e<t.length;e++)0==s&&0==r&&this.getElementById(`ss-checked-${e}`).addEventListener('change',this.checkboxEvent.bind(this)),0==r&&this.getElementById(`ss-refresh-${e}`).addEventListener('click',this.refreshEvent.bind(this)),this.setupInputListeners(e,a)}buildInputElement(e,t,s,a){if(expect(e,'Number'),expect(t,'TessAssignedValue'),expect(s,'String'),expect(a,'Boolean'),s==SS.SELECT){if('label-feature-key'==t.tessGrammarName)(i=this.getElementById('ss-feature-property-names').innerHTML.split('|')).push('none');else var i=TessValidator.lookupTable[t.tessGrammarName];var r=Math.max(2,Math.min(i.length,12));(v=[]).push(`<select data-which='${e}' id='ss-select-${e}' size='${r}' tabindex=2 class='symbol-override-value' style='margin: 0; overflow-y: auto; min-width: 119px; width: initial;' title='Choose one of these values'>`);for(let e=0;e<i.length;e++){var l=i[e]==t.value?'selected':'';v.push(`<option value='${i[e]}' ${l}>${i[e]}</option>`)}return v.push('</select>'),v.join('')}if(s==SS.MULTI){var n=TessValidator.multiTable[t.tessGrammarName];(v=[]).push(`<select data-which='${e}' id='ss-multi-${e}' multiple size='4' tabindex=2 class='symbol-override-value' style='overflow-y: auto;' title='Choose one or more of these values'>`),expect(t.value,'Array');for(let e=0;e<n.length;e++){l=t.value.includes(n[e])?'selected':'';v.push(`<option value='${n[e]}' ${l}>${n[e]}</option>`)}return v.push('</select>'),v.join('')}if(s==SS.COLOR){if('none'==t.value)var o='000000',d=255,u='none';else{var{rrggbb:o,alpha:h}=Color.rgbHex2rgbAlpha(t.value);d=Color.hex2decimal(h),u=`#${o}${h}`}return(v=[]).push(`<div data-which='${e}' id='ss-color-group-${e}' style='display:grid;'>`),v.push(`<input data-which='${e}' id='ss-color-hex-${e}' type='text' tabindex=2 class='symbol-override-value' style='font-family: monospace;' title='Enter an RGBA hex color value or the keyword "none"' value='${u}' />`),v.push(`<input data-which='${e}' id='ss-color-picker-${e}' type='color' tabindex=2 class='symbol-override-value' style='margin-top:10px; border:none; padding:0px; min-height:32px;' title='Pick a different color' value='#${o}' />`),v.push(`<input data-which='${e}' id='ss-color-alpha-${e}' type='range' min=0 max=255 tabindex=2 class='symbol-override-value' style='margin-top:10px; border:none; padding:0px;' title='Adjust the alpha channel' value='${d}' />`),v.push('</div>'),v.join('')}if(s==SS.NUMBER){var c=null!=(g=TessValidator.numberTable[t.tessGrammarName]).min?`min='${g.min}'`:'',p=null!=g.max?`max='${g.max}'`:'',m=null!=g.step?`step='${g.step}'`:'';if(null!=g.min&&null!=g.max)var b=`Specify a value from ${g.min} to ${g.max}`;else if(null!=g.min)b=`Specify a value greater than or equal to ${g.min}`;else b='';return`<input data-which='${e}' id='ss-text-${e}' type='number' tabindex=2 class='symbol-override-value' placeholder='none' ${c} ${p} ${m} title='${b}' value='${'none'==t.value?'':t.value}' />`}if(s==SS.RANGE){var g;(g=TessValidator.rangeTable[t.tessGrammarName]).special=g.special??'';b=`Specify a value from ${g.min} to ${g.max} ${g.special}`;var y=-1!=g.special.indexOf('auto')?'auto':'';return(v=[]).push(`<div data-which='${e}' id='ss-range-group-${e}' style='width:139px'>`),v.push(`<input data-which='${e}' id='ss-text-${e}' type='text' tabindex=2 class='symbol-override-value' placeholder='${y}' title='${b}' value='${t.value}' />`),v.push(`<input data-which='${e}' id='ss-range-${e}' type='range' min=${g.min} max=${g.max} step=${g.step} tabindex=2 class='symbol-override-value' style='margin-top:10px; border:none; padding:0px;' title='${b}' value='${t.value}' />`),v.push('</div>'),v.join('')}if(s==SS.MAPSCALE){b=`Specify a value from ${MapScale.MIN_MAP_SCALE} to ${MapScale.MAX_MAP_SCALE}`;var v,f=MapScale.mapScaleToSlider(t.value);return(v=[]).push(`<div data-which='${e}' id='ss-map-scale-group-${e}' style='width:139px'>`),v.push(`<input data-which='${e}' id='ss-text-${e}' type='text' tabindex=2 class='symbol-override-value' title='${b}' value='${t.value}' />`),v.push(`<input data-which='${e}' id='ss-map-scale-${e}' type='range' min=0 max=${MapScale.numStops-1} step=1 tabindex=2 class='symbol-override-value' style='margin-top:10px; border:none; padding:0px;' title='${b}' value='${f}' />`),v.push('</div>'),v.join('')}if(s==SS.TEXT){var x=a?'readonly':'';return`<input data-which='${e}' id='ss-text-${e}' type='text' tabindex=2 class='symbol-override-value' value='${t.value}' ${x} />`}terminal.abnormal(`Unknown ssType ${s}`)}setupInputListeners(e,t){switch(expect(e,'Number'),expect(t,'String'),t){case SS.SELECT:var s=this.getElementById(`ss-select-${e}`);null!=s&&(s.addEventListener('change',this.selectEventChange.bind(this)),s.addEventListener('keydown',this.specialKeydownEventHandler.bind(this)));break;case SS.MULTI:var a=this.getElementById(`ss-multi-${e}`);null!=a&&(a.addEventListener('change',this.multiEventChange.bind(this)),a.addEventListener('keydown',this.specialKeydownEventHandler.bind(this)));break;case SS.COLOR:var i=this.getElementById(`ss-color-hex-${e}`);null!=i&&(i.addEventListener('input',this.colorHexEventInput.bind(this)),i.addEventListener('keydown',this.specialKeydownEventHandler.bind(this)));var r=this.getElementById(`ss-color-picker-${e}`);null!=r&&r.addEventListener('input',this.colorPickerEventInput.bind(this));var l=this.getElementById(`ss-color-alpha-${e}`);null!=l&&(l.addEventListener('input',this.colorAlphaEventInput.bind(this)),l.addEventListener('keydown',this.specialKeydownEventHandler.bind(this)));break;case SS.RANGE:null!=(d=this.getElementById(`ss-text-${e}`))&&(d.addEventListener('input',this.rangeTextEventInput.bind(this)),d.addEventListener('keydown',this.specialKeydownEventHandler.bind(this)));var n=this.getElementById(`ss-range-${e}`);null!=n&&(n.addEventListener('input',this.rangeSliderEventInput.bind(this)),n.addEventListener('keydown',this.specialKeydownEventHandler.bind(this)));break;case SS.MAPSCALE:null!=(d=this.getElementById(`ss-text-${e}`))&&(d.addEventListener('change',this.mapScaleTextEventChange.bind(this)),d.addEventListener('keydown',this.specialKeydownEventHandler.bind(this)));var o=this.getElementById(`ss-map-scale-${e}`);null!=o&&(o.addEventListener('input',this.mapScaleSliderEventInput.bind(this)),o.addEventListener('keydown',this.specialKeydownEventHandler.bind(this)));break;case SS.NUMBER:case SS.TEXT:var d;null!=(d=this.getElementById(`ss-text-${e}`))&&(d.addEventListener('input',this.textEventInput.bind(this)),d.addEventListener('keydown',this.specialKeydownEventHandler.bind(this)));break;default:terminal.abnormal(`Unknown ssType ${t}`)}}checkboxEvent(e){this.getElementById('ss-overrides-dl').style.opacity=.5,window.setTimeout(this.checkboxCallback.bind(this,e.currentTarget),100)}checkboxCallback(e){var t=e.getAttribute('data-which'),s=this.querySelector(`dt[data-which="${t}"]`),a=s.getAttribute('data-selector'),i=s.getAttribute('data-qualifier'),r=s.getAttribute('data-min-scale'),l=s.getAttribute('data-max-scale'),n=s.getAttribute('data-grammar-name'),o=this.visual.tessManager.getRule(r,l).selectorDeclarations.get(`${a}${i}`).get(n);o.isEnabled=e.checked,this.signal.broadcast('symbolSpecifier/valueChanged',{tessAssignedValue:o}),this.visual.allFeaturesNeedRestyling=!0,this.thematicEarthElement.invalidateCanvas()}textEventInput(e){var t=e.currentTarget.getAttribute('data-which');this.getElementById(`ss-refresh-${t}`).disabled=!1}specialKeydownEventHandler(e){if('Tab'==e.key&&1==e.shiftKey)this.querySelector('.chef-table tr.focusable[selected]').focus(),e.preventDefault();else if('Enter'==e.key){var t=e.currentTarget.getAttribute('data-which');this.getElementById(`ss-refresh-${t}`).click()}}selectEventChange(e){var t=e.currentTarget.getAttribute('data-which');this.getElementById(`ss-refresh-${t}`).disabled=!1}multiEventChange(e){var t=e.currentTarget.getAttribute('data-which');this.getElementById(`ss-refresh-${t}`).disabled=!1}colorHexEventInput(e){var t=e.currentTarget.value;if(''==t||'none'==t)var s='000000',a=255;else{var{rrggbb:s,alpha:i}=Color.rgbHex2rgbAlpha(t);a=Color.hex2decimal(i)}var r=e.currentTarget.getAttribute('data-which');this.getElementById(`ss-color-picker-${r}`).value=`#${s}`,this.getElementById(`ss-color-alpha-${r}`).value=a,this.getElementById(`ss-refresh-${r}`).disabled=!1}colorPickerEventInput(e){var t=e.currentTarget.value,s=e.currentTarget.getAttribute('data-which'),a=this.getElementById(`ss-color-alpha-${s}`).value,i=Color.decimal2hex(a);this.getElementById(`ss-color-hex-${s}`).value=`${t}${i}`,this.getElementById(`ss-refresh-${s}`).disabled=!1}colorAlphaEventInput(e){var t=e.currentTarget.value,s=Color.decimal2hex(t),a=e.currentTarget.getAttribute('data-which'),i=this.getElementById(`ss-color-hex-${a}`),r=i.value,{rrggbb:l,alpha:n}=Color.rgbHex2rgbAlpha(r);i.value=`#${l}${s}`,this.getElementById(`ss-refresh-${a}`).disabled=!1}rangeTextEventInput(e){var t=e.currentTarget.getAttribute('data-which'),s=this.getElementById(`ss-range-${t}`);'none'==e.currentTarget.value||'auto'==e.currentTarget.value?(s.disabled=!0,s.value=0):(s.disabled=!1,s.value=e.currentTarget.value),this.getElementById(`ss-refresh-${t}`).disabled=!1}rangeSliderEventInput(e){var t=e.currentTarget.getAttribute('data-which');this.getElementById(`ss-text-${t}`).value=e.currentTarget.value,this.getElementById(`ss-refresh-${t}`).disabled=!1}mapScaleTextEventChange(e){var t=e.currentTarget.getAttribute('data-which'),s=this.getElementById(`ss-map-scale-${t}`),a=e.currentTarget.value,i=MapScale.normalizeMapScale(a),r=MapScale.mapScaleToSlider(i);s.value=r,this.getElementById(`ss-text-${t}`).value=i,this.getElementById(`ss-refresh-${t}`).disabled=!1}mapScaleSliderEventInput(e){var t=e.currentTarget.getAttribute('data-which'),s=this.getElementById(`ss-text-${t}`),a=e.currentTarget.value,i=MapScale.sliderToMapScale(a);s.value=i,this.getElementById(`ss-refresh-${t}`).disabled=!1}refreshEvent(e){this.getElementById('ss-overrides-dl').style.opacity=.5,window.setTimeout(this.refreshCallback.bind(this,e.currentTarget),100)}refreshCallback(e){var t=e.getAttribute('data-which'),s=this.querySelector(`dt[data-which="${t}"]`),a=s.getAttribute('data-selector'),i=s.getAttribute('data-qualifier'),r=s.getAttribute('data-min-scale'),l=s.getAttribute('data-max-scale'),n=s.getAttribute('data-grammar-name'),o=this.visual.tessManager.getRule(r,l).selectorDeclarations.get(`${a}${i}`).get(n);if(null==o){var{minScale:r,maxScale:l}=this.getNewMinMax(),d=(a=this.getElementById('ss-new-selector').value,i=this.getElementById('ss-new-qualifier').value,this.querySelector('#ss-new-attribute-table tr.focusable[selected]')),u=(n=null==d?'unknown':d.getAttribute('data-grammar-name'),TessDefaults[n]);o=this.visual.addPreparsedRule(r,l,`${a}${i}`,n,u)}var h=this.getElementById('ss-type').innerHTML;switch(h){case SS.SELECT:var c=this.getElementById(`ss-select-${t}`);o.value=c.value;break;case SS.MULTI:var p=this.getElementById(`ss-multi-${t}`);o.value=[];for(let e=0;e<p.options.length;e++)1==p.options[e].selected&&o.value.push(p.options[e].value);break;case SS.COLOR:var m=this.getElementById(`ss-color-hex-${t}`);o.value=''==m.value?'none':m.value;break;case SS.NUMBER:if(''==(g=this.getElementById(`ss-text-${t}`)).value)o.value='none';else{var b=Number(g.value);Number.isNaN(b)&&(b=0),o.value=b}break;case SS.RANGE:if('none'==(g=this.getElementById(`ss-text-${t}`)).value||'auto'==g.value)o.value=g.value;else if('auto'==g.placeholder&&''==g.value)o.value='auto';else{b=Number(g.value);Number.isNaN(b)&&(b=0),o.value=b}break;case SS.MAPSCALE:var g=this.getElementById(`ss-text-${t}`);b=Number(g.value);Number.isNaN(b)&&(b=MapScale.MIN_MAP_SCALE),o.value=b;break;case SS.TEXT:g=this.getElementById(`ss-text-${t}`);o.value=g.value;break;default:terminal.abnormal(`Unknown ssType ${h}`)}this.signal.broadcast('symbolSpecifier/valueChanged',{tessAssignedValue:o}),this.visual.allFeaturesNeedRestyling=!0,this.thematicEarthElement.invalidateCanvas()}}