From bd80c6f8086112c1f6f74b6103859a9806d9feb9 Mon Sep 17 00:00:00 2001 From: BarsoumRose Date: Tue, 4 Oct 2022 12:24:54 -0400 Subject: [PATCH 1/2] initial update --- class_data.json | 1 + data.json | 5 + index.html | 16 + main.js | 52 + node_modules/.package-lock.json | 15 + node_modules/tweakpane/dist/tweakpane.js | 7463 +++++++++++++++++ node_modules/tweakpane/dist/tweakpane.min.js | 2 + .../dist/types/blade/list/api/list.d.ts | 12 + .../dist/types/blade/list/plugin.d.ts | 8 + .../dist/types/blade/root/api/preset.d.ts | 12 + .../dist/types/blade/root/api/root.d.ts | 24 + .../types/blade/root/controller/root.d.ts | 12 + .../dist/types/blade/slider/api/slider.d.ts | 14 + .../dist/types/blade/slider/plugin.d.ts | 10 + .../dist/types/blade/text/api/text.d.ts | 12 + .../dist/types/blade/text/plugin.d.ts | 9 + node_modules/tweakpane/dist/types/index.d.ts | 10 + .../tweakpane/dist/types/misc/semver.d.ts | 14 + .../tweakpane/dist/types/misc/test-util.d.ts | 14 + .../dist/types/pane/pane-config.d.ts | 18 + .../tweakpane/dist/types/pane/pane.d.ts | 18 + node_modules/tweakpane/package.json | 110 + package-lock.json | 27 + package.json | 5 + 24 files changed, 7883 insertions(+) create mode 100644 class_data.json create mode 100644 data.json create mode 100644 index.html create mode 100644 main.js create mode 100644 node_modules/.package-lock.json create mode 100644 node_modules/tweakpane/dist/tweakpane.js create mode 100644 node_modules/tweakpane/dist/tweakpane.min.js create mode 100644 node_modules/tweakpane/dist/types/blade/list/api/list.d.ts create mode 100644 node_modules/tweakpane/dist/types/blade/list/plugin.d.ts create mode 100644 node_modules/tweakpane/dist/types/blade/root/api/preset.d.ts create mode 100644 node_modules/tweakpane/dist/types/blade/root/api/root.d.ts create mode 100644 node_modules/tweakpane/dist/types/blade/root/controller/root.d.ts create mode 100644 node_modules/tweakpane/dist/types/blade/slider/api/slider.d.ts create mode 100644 node_modules/tweakpane/dist/types/blade/slider/plugin.d.ts create mode 100644 node_modules/tweakpane/dist/types/blade/text/api/text.d.ts create mode 100644 node_modules/tweakpane/dist/types/blade/text/plugin.d.ts create mode 100644 node_modules/tweakpane/dist/types/index.d.ts create mode 100644 node_modules/tweakpane/dist/types/misc/semver.d.ts create mode 100644 node_modules/tweakpane/dist/types/misc/test-util.d.ts create mode 100644 node_modules/tweakpane/dist/types/pane/pane-config.d.ts create mode 100644 node_modules/tweakpane/dist/types/pane/pane.d.ts create mode 100644 node_modules/tweakpane/package.json create mode 100644 package-lock.json create mode 100644 package.json diff --git a/class_data.json b/class_data.json new file mode 100644 index 00000000..961e2aa7 --- /dev/null +++ b/class_data.json @@ -0,0 +1 @@ +{"provider":"https://www.exchangerate-api.com","WARNING_UPGRADE_TO_V6":"https://www.exchangerate-api.com/docs/free","terms":"https://www.exchangerate-api.com/terms","base":"USD","date":"2022-10-01","time_last_updated":1664582402,"rates":{"USD":1,"AED":3.67,"AFN":87.65,"ALL":120.46,"AMD":405.92,"ANG":1.79,"AOA":434.51,"ARS":146.18,"AUD":1.55,"AWG":1.79,"AZN":1.7,"BAM":2,"BBD":2,"BDT":100.34,"BGN":2,"BHD":0.376,"BIF":2037.79,"BMD":1,"BND":1.43,"BOB":6.9,"BRL":5.4,"BSD":1,"BTN":81.49,"BWP":13.39,"BYN":2.62,"BZD":2,"CAD":1.38,"CDF":2010.9,"CHF":0.984,"CLP":963.59,"CNY":7.13,"COP":4517.02,"CRC":631.29,"CUP":24,"CVE":112.7,"CZK":25.09,"DJF":177.72,"DKK":7.63,"DOP":52.9,"DZD":140.71,"EGP":19.5,"ERN":15,"ETB":52.73,"EUR":1.02,"FJD":2.3,"FKP":0.899,"FOK":7.63,"GBP":0.9,"GEL":2.83,"GGP":0.899,"GHS":10.71,"GIP":0.899,"GMD":56.69,"GNF":8601.42,"GTQ":7.82,"GYD":208.34,"HKD":7.85,"HNL":24.5,"HRK":7.7,"HTG":120.05,"HUF":430.19,"IDR":15219.31,"ILS":3.57,"IMP":0.899,"INR":81.49,"IQD":1453.55,"IRR":41892.82,"ISK":143.77,"JEP":0.899,"JMD":151.9,"JOD":0.709,"JPY":144.72,"KES":121.17,"KGS":81.68,"KHR":4103.3,"KID":1.55,"KMF":502.83,"KRW":1435.15,"KWD":0.3,"KYD":0.833,"KZT":476.63,"LAK":16422.03,"LBP":1507.5,"LKR":359.04,"LRD":153.18,"LSL":18.03,"LYD":5.03,"MAD":10.99,"MDL":19.5,"MGA":4179.37,"MKD":63.51,"MMK":2681.72,"MNT":3306.49,"MOP":8.09,"MRU":37.72,"MUR":44.67,"MVR":15.39,"MWK":1033.19,"MXN":20.16,"MYR":4.63,"MZN":64.45,"NAD":18.03,"NGN":431.04,"NIO":35.66,"NOK":10.85,"NPR":130.39,"NZD":1.78,"OMR":0.384,"PAB":1,"PEN":3.95,"PGK":3.51,"PHP":58.7,"PKR":229.97,"PLN":4.95,"PYG":7007.03,"QAR":3.64,"RON":5.05,"RSD":120.17,"RUB":57.34,"RWF":1072.82,"SAR":3.75,"SBD":8.08,"SCR":12.95,"SDG":564.65,"SEK":11.12,"SGD":1.43,"SHP":0.899,"SLE":15.7,"SLL":15702.71,"SOS":566.1,"SRD":27.87,"SSP":634.66,"STN":25.04,"SYP":2504.8,"SZL":18.03,"THB":37.83,"TJS":10.22,"TMT":3.5,"TND":2.92,"TOP":2.42,"TRY":18.52,"TTD":6.74,"TVD":1.55,"TWD":31.71,"TZS":2331.01,"UAH":37.9,"UGX":3859.19,"UYU":40.89,"UZS":10985.28,"VES":8.2,"VND":23848.02,"VUV":122.47,"WST":2.83,"XAF":670.43,"XCD":2.7,"XDR":0.778,"XOF":670.43,"XPF":121.97,"YER":249.43,"ZAR":18.04,"ZMW":15.77,"ZWL":621.19}} \ No newline at end of file diff --git a/data.json b/data.json new file mode 100644 index 00000000..6e51439f --- /dev/null +++ b/data.json @@ -0,0 +1,5 @@ +{"type":"FeatureCollection","metadata":{"generated":1664664110000,"url":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson","title":"USGS All Earthquakes, Past Hour","status":200,"api":"1.10.3","count":5},"features":[{"type":"Feature","properties":{"mag":0.89,"place":"6km NW of The Geysers, CA","time":1664663838460,"updated":1664663933898,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/nc73788156","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nc73788156.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":12,"net":"nc","code":"73788156","ids":",nc73788156,","sources":",nc,","types":",nearby-cities,origin,phase-data,","nst":25,"dmin":0.008138,"rms":0.02,"gap":51,"magType":"md","type":"earthquake","title":"M 0.9 - 6km NW of The Geysers, CA"},"geometry":{"type":"Point","coordinates":[-122.7996674,38.8230019,2.86]},"id":"nc73788156"}, +{"type":"Feature","properties":{"mag":0.9,"place":"8km NW of The Geysers, CA","time":1664663817460,"updated":1664663914792,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/nc73788151","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nc73788151.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":12,"net":"nc","code":"73788151","ids":",nc73788151,","sources":",nc,","types":",nearby-cities,origin,phase-data,","nst":20,"dmin":0.01148,"rms":0.02,"gap":76,"magType":"md","type":"earthquake","title":"M 0.9 - 8km NW of The Geysers, CA"},"geometry":{"type":"Point","coordinates":[-122.8166656,38.8336678,1.96]},"id":"nc73788151"}, +{"type":"Feature","properties":{"mag":0.58,"place":"8km NW of The Geysers, CA","time":1664663450950,"updated":1664663543695,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/nc73788141","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nc73788141.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":5,"net":"nc","code":"73788141","ids":",nc73788141,","sources":",nc,","types":",nearby-cities,origin,phase-data,","nst":14,"dmin":0.01082,"rms":0.01,"gap":95,"magType":"md","type":"earthquake","title":"M 0.6 - 8km NW of The Geysers, CA"},"geometry":{"type":"Point","coordinates":[-122.8195038,38.8313332,1.78]},"id":"nc73788141"}, +{"type":"Feature","properties":{"mag":1.5,"place":"87 km S of McCarthy, Alaska","time":1664662904179,"updated":1664663026699,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/ak022clih829","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak022clih829.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":35,"net":"ak","code":"022clih829","ids":",ak022clih829,","sources":",ak,","types":",origin,phase-data,","nst":null,"dmin":null,"rms":0.63,"gap":null,"magType":"ml","type":"earthquake","title":"M 1.5 - 87 km S of McCarthy, Alaska"},"geometry":{"type":"Point","coordinates":[-143.0963,60.6508,10.9]},"id":"ak022clih829"}, +{"type":"Feature","properties":{"mag":2.4,"place":"southern Idaho","time":1664662692065,"updated":1664663438040,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/us6000iq2y","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/us6000iq2y.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"reviewed","tsunami":0,"sig":89,"net":"us","code":"6000iq2y","ids":",us6000iq2y,","sources":",us,","types":",origin,phase-data,","nst":32,"dmin":0.807,"rms":0.58,"gap":62,"magType":"ml","type":"earthquake","title":"M 2.4 - southern Idaho"},"geometry":{"type":"Point","coordinates":[-114.4024,44.6922,10]},"id":"us6000iq2y"}],"bbox":[-143.0963,38.8230019,1.78,-114.4024,60.6508,10.9]} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..ce1b3e42 --- /dev/null +++ b/index.html @@ -0,0 +1,16 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 00000000..4f85c589 --- /dev/null +++ b/main.js @@ -0,0 +1,52 @@ + +window.addEventListener( 'load', () => { + const radius = 40, + y = 50 + let color = 0 + + const svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ) + svg.setAttribute( 'width', 1000 ) + + document.body.appendChild( svg ) + + const pane = new Tweakpane.Pane(); + + const PARAMS = { + RGB: 0, + }; + + pane.addInput(PARAMS, 'RGB', { + options: { + Red: 0, + Green: 1, + Blue: 2, + }, + }).on('change', (val) => { + color = val.value}); + + console.log(color) + + fetch( "https://api.exchangerate-api.com/v4/latest/GBP" ) + .then( data => data.json() ) + .then( jsonData => { + //console.log( d3.select('body').selectAll('div') ) + + + const group = d3.select( 'svg' ).selectAll( 'circle' ) + .data( d3.entries( jsonData.rates ) ) + .join( 'g' ) + + group.append('circle') + .attr( 'fill', d => `rgba( ${ Math.floor(d.value) }, 100, 100, .5 )` ) + .attr( 'cx', (d,i) => i * radius ) + .attr( 'cy', y ) + .attr( 'r', radius ) + + group.append( 'text' ) + .text( d => d.key ) + .attr( 'fill', 'white' ) + .attr( 'x', (d,i) => i * radius - radius / 2 ) + .attr( 'y', y + radius + 25 ) + + }) +}) \ No newline at end of file diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json new file mode 100644 index 00000000..8632d487 --- /dev/null +++ b/node_modules/.package-lock.json @@ -0,0 +1,15 @@ +{ + "name": "a4-creative-coding", + "lockfileVersion": 2, + "requires": true, + "packages": { + "node_modules/tweakpane": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/tweakpane/-/tweakpane-3.1.0.tgz", + "integrity": "sha512-PGAp/LPQdHwzL7/iAW4lV1p9iPQTti7YMjMWO48CoYjvZRS59RmgQnhEGzKzqST1JnmOYmQUjTe8bdhlZRJs5A==", + "funding": { + "url": "https://github.com/sponsors/cocopon" + } + } + } +} diff --git a/node_modules/tweakpane/dist/tweakpane.js b/node_modules/tweakpane/dist/tweakpane.js new file mode 100644 index 00000000..efd77fe4 --- /dev/null +++ b/node_modules/tweakpane/dist/tweakpane.js @@ -0,0 +1,7463 @@ +/*! Tweakpane 3.1.0 (c) 2016 cocopon, licensed under the MIT license. */ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : + typeof define === 'function' && define.amd ? define(['exports'], factory) : + (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Tweakpane = {})); +})(this, (function (exports) { 'use strict'; + + /*** + * A simple semantic versioning perser. + */ + class Semver { + /** + * @hidden + */ + constructor(text) { + const [core, prerelease] = text.split('-'); + const coreComps = core.split('.'); + this.major = parseInt(coreComps[0], 10); + this.minor = parseInt(coreComps[1], 10); + this.patch = parseInt(coreComps[2], 10); + this.prerelease = prerelease !== null && prerelease !== void 0 ? prerelease : null; + } + toString() { + const core = [this.major, this.minor, this.patch].join('.'); + return this.prerelease !== null ? [core, this.prerelease].join('-') : core; + } + } + + class BladeApi { + constructor(controller) { + this.controller_ = controller; + } + get element() { + return this.controller_.view.element; + } + get disabled() { + return this.controller_.viewProps.get('disabled'); + } + set disabled(disabled) { + this.controller_.viewProps.set('disabled', disabled); + } + get hidden() { + return this.controller_.viewProps.get('hidden'); + } + set hidden(hidden) { + this.controller_.viewProps.set('hidden', hidden); + } + dispose() { + this.controller_.viewProps.set('disposed', true); + } + } + + class TpEvent { + constructor(target) { + this.target = target; + } + } + class TpChangeEvent extends TpEvent { + constructor(target, value, presetKey, last) { + super(target); + this.value = value; + this.presetKey = presetKey; + this.last = last !== null && last !== void 0 ? last : true; + } + } + class TpUpdateEvent extends TpEvent { + constructor(target, value, presetKey) { + super(target); + this.value = value; + this.presetKey = presetKey; + } + } + class TpFoldEvent extends TpEvent { + constructor(target, expanded) { + super(target); + this.expanded = expanded; + } + } + class TpTabSelectEvent extends TpEvent { + constructor(target, index) { + super(target); + this.index = index; + } + } + + function forceCast(v) { + return v; + } + function isEmpty(value) { + return value === null || value === undefined; + } + function deepEqualsArray(a1, a2) { + if (a1.length !== a2.length) { + return false; + } + for (let i = 0; i < a1.length; i++) { + if (a1[i] !== a2[i]) { + return false; + } + } + return true; + } + + const CREATE_MESSAGE_MAP = { + alreadydisposed: () => 'View has been already disposed', + invalidparams: (context) => `Invalid parameters for '${context.name}'`, + nomatchingcontroller: (context) => `No matching controller for '${context.key}'`, + nomatchingview: (context) => `No matching view for '${JSON.stringify(context.params)}'`, + notbindable: () => `Value is not bindable`, + propertynotfound: (context) => `Property '${context.name}' not found`, + shouldneverhappen: () => 'This error should never happen', + }; + class TpError { + constructor(config) { + var _a; + this.message = + (_a = CREATE_MESSAGE_MAP[config.type](forceCast(config.context))) !== null && _a !== void 0 ? _a : 'Unexpected error'; + this.name = this.constructor.name; + this.stack = new Error(this.message).stack; + this.type = config.type; + } + static alreadyDisposed() { + return new TpError({ type: 'alreadydisposed' }); + } + static notBindable() { + return new TpError({ + type: 'notbindable', + }); + } + static propertyNotFound(name) { + return new TpError({ + type: 'propertynotfound', + context: { + name: name, + }, + }); + } + static shouldNeverHappen() { + return new TpError({ type: 'shouldneverhappen' }); + } + } + + class BindingTarget { + constructor(obj, key, opt_id) { + this.obj_ = obj; + this.key_ = key; + this.presetKey_ = opt_id !== null && opt_id !== void 0 ? opt_id : key; + } + static isBindable(obj) { + if (obj === null) { + return false; + } + if (typeof obj !== 'object') { + return false; + } + return true; + } + get key() { + return this.key_; + } + get presetKey() { + return this.presetKey_; + } + read() { + return this.obj_[this.key_]; + } + write(value) { + this.obj_[this.key_] = value; + } + writeProperty(name, value) { + const valueObj = this.read(); + if (!BindingTarget.isBindable(valueObj)) { + throw TpError.notBindable(); + } + if (!(name in valueObj)) { + throw TpError.propertyNotFound(name); + } + valueObj[name] = value; + } + } + + class ButtonApi extends BladeApi { + get label() { + return this.controller_.props.get('label'); + } + set label(label) { + this.controller_.props.set('label', label); + } + get title() { + var _a; + return (_a = this.controller_.valueController.props.get('title')) !== null && _a !== void 0 ? _a : ''; + } + set title(title) { + this.controller_.valueController.props.set('title', title); + } + on(eventName, handler) { + const bh = handler.bind(this); + const emitter = this.controller_.valueController.emitter; + emitter.on(eventName, () => { + bh(new TpEvent(this)); + }); + return this; + } + } + + class Emitter { + constructor() { + this.observers_ = {}; + } + on(eventName, handler) { + let observers = this.observers_[eventName]; + if (!observers) { + observers = this.observers_[eventName] = []; + } + observers.push({ + handler: handler, + }); + return this; + } + off(eventName, handler) { + const observers = this.observers_[eventName]; + if (observers) { + this.observers_[eventName] = observers.filter((observer) => { + return observer.handler !== handler; + }); + } + return this; + } + emit(eventName, event) { + const observers = this.observers_[eventName]; + if (!observers) { + return; + } + observers.forEach((observer) => { + observer.handler(event); + }); + } + } + + const PREFIX = 'tp'; + function ClassName(viewName) { + const fn = (opt_elementName, opt_modifier) => { + return [ + PREFIX, + '-', + viewName, + 'v', + opt_elementName ? `_${opt_elementName}` : '', + opt_modifier ? `-${opt_modifier}` : '', + ].join(''); + }; + return fn; + } + + function compose(h1, h2) { + return (input) => h2(h1(input)); + } + function extractValue(ev) { + return ev.rawValue; + } + function bindValue(value, applyValue) { + value.emitter.on('change', compose(extractValue, applyValue)); + applyValue(value.rawValue); + } + function bindValueMap(valueMap, key, applyValue) { + bindValue(valueMap.value(key), applyValue); + } + + function applyClass(elem, className, active) { + if (active) { + elem.classList.add(className); + } + else { + elem.classList.remove(className); + } + } + function valueToClassName(elem, className) { + return (value) => { + applyClass(elem, className, value); + }; + } + function bindValueToTextContent(value, elem) { + bindValue(value, (text) => { + elem.textContent = text !== null && text !== void 0 ? text : ''; + }); + } + + const className$q = ClassName('btn'); + class ButtonView { + constructor(doc, config) { + this.element = doc.createElement('div'); + this.element.classList.add(className$q()); + config.viewProps.bindClassModifiers(this.element); + const buttonElem = doc.createElement('button'); + buttonElem.classList.add(className$q('b')); + config.viewProps.bindDisabled(buttonElem); + this.element.appendChild(buttonElem); + this.buttonElement = buttonElem; + const titleElem = doc.createElement('div'); + titleElem.classList.add(className$q('t')); + bindValueToTextContent(config.props.value('title'), titleElem); + this.buttonElement.appendChild(titleElem); + } + } + + class ButtonController { + constructor(doc, config) { + this.emitter = new Emitter(); + this.onClick_ = this.onClick_.bind(this); + this.props = config.props; + this.viewProps = config.viewProps; + this.view = new ButtonView(doc, { + props: this.props, + viewProps: this.viewProps, + }); + this.view.buttonElement.addEventListener('click', this.onClick_); + } + onClick_() { + this.emitter.emit('click', { + sender: this, + }); + } + } + + class BoundValue { + constructor(initialValue, config) { + var _a; + this.constraint_ = config === null || config === void 0 ? void 0 : config.constraint; + this.equals_ = (_a = config === null || config === void 0 ? void 0 : config.equals) !== null && _a !== void 0 ? _a : ((v1, v2) => v1 === v2); + this.emitter = new Emitter(); + this.rawValue_ = initialValue; + } + get constraint() { + return this.constraint_; + } + get rawValue() { + return this.rawValue_; + } + set rawValue(rawValue) { + this.setRawValue(rawValue, { + forceEmit: false, + last: true, + }); + } + setRawValue(rawValue, options) { + const opts = options !== null && options !== void 0 ? options : { + forceEmit: false, + last: true, + }; + const constrainedValue = this.constraint_ + ? this.constraint_.constrain(rawValue) + : rawValue; + const changed = !this.equals_(this.rawValue_, constrainedValue); + if (!changed && !opts.forceEmit) { + return; + } + this.emitter.emit('beforechange', { + sender: this, + }); + this.rawValue_ = constrainedValue; + this.emitter.emit('change', { + options: opts, + rawValue: constrainedValue, + sender: this, + }); + } + } + + class PrimitiveValue { + constructor(initialValue) { + this.emitter = new Emitter(); + this.value_ = initialValue; + } + get rawValue() { + return this.value_; + } + set rawValue(value) { + this.setRawValue(value, { + forceEmit: false, + last: true, + }); + } + setRawValue(value, options) { + const opts = options !== null && options !== void 0 ? options : { + forceEmit: false, + last: true, + }; + if (this.value_ === value && !opts.forceEmit) { + return; + } + this.emitter.emit('beforechange', { + sender: this, + }); + this.value_ = value; + this.emitter.emit('change', { + options: opts, + rawValue: this.value_, + sender: this, + }); + } + } + + function createValue(initialValue, config) { + const constraint = config === null || config === void 0 ? void 0 : config.constraint; + const equals = config === null || config === void 0 ? void 0 : config.equals; + if (!constraint && !equals) { + return new PrimitiveValue(initialValue); + } + return new BoundValue(initialValue, config); + } + + class ValueMap { + constructor(valueMap) { + this.emitter = new Emitter(); + this.valMap_ = valueMap; + for (const key in this.valMap_) { + const v = this.valMap_[key]; + v.emitter.on('change', () => { + this.emitter.emit('change', { + key: key, + sender: this, + }); + }); + } + } + static createCore(initialValue) { + const keys = Object.keys(initialValue); + return keys.reduce((o, key) => { + return Object.assign(o, { + [key]: createValue(initialValue[key]), + }); + }, {}); + } + static fromObject(initialValue) { + const core = this.createCore(initialValue); + return new ValueMap(core); + } + get(key) { + return this.valMap_[key].rawValue; + } + set(key, value) { + this.valMap_[key].rawValue = value; + } + value(key) { + return this.valMap_[key]; + } + } + + function parseObject(value, keyToParserMap) { + const keys = Object.keys(keyToParserMap); + const result = keys.reduce((tmp, key) => { + if (tmp === undefined) { + return undefined; + } + const parser = keyToParserMap[key]; + const result = parser(value[key]); + return result.succeeded + ? Object.assign(Object.assign({}, tmp), { [key]: result.value }) : undefined; + }, {}); + return forceCast(result); + } + function parseArray(value, parseItem) { + return value.reduce((tmp, item) => { + if (tmp === undefined) { + return undefined; + } + const result = parseItem(item); + if (!result.succeeded || result.value === undefined) { + return undefined; + } + return [...tmp, result.value]; + }, []); + } + function isObject(value) { + if (value === null) { + return false; + } + return typeof value === 'object'; + } + function createParamsParserBuilder(parse) { + return (optional) => (v) => { + if (!optional && v === undefined) { + return { + succeeded: false, + value: undefined, + }; + } + if (optional && v === undefined) { + return { + succeeded: true, + value: undefined, + }; + } + const result = parse(v); + return result !== undefined + ? { + succeeded: true, + value: result, + } + : { + succeeded: false, + value: undefined, + }; + }; + } + function createParamsParserBuilders(optional) { + return { + custom: (parse) => createParamsParserBuilder(parse)(optional), + boolean: createParamsParserBuilder((v) => typeof v === 'boolean' ? v : undefined)(optional), + number: createParamsParserBuilder((v) => typeof v === 'number' ? v : undefined)(optional), + string: createParamsParserBuilder((v) => typeof v === 'string' ? v : undefined)(optional), + function: createParamsParserBuilder((v) => + typeof v === 'function' ? v : undefined)(optional), + constant: (value) => createParamsParserBuilder((v) => (v === value ? value : undefined))(optional), + raw: createParamsParserBuilder((v) => v)(optional), + object: (keyToParserMap) => createParamsParserBuilder((v) => { + if (!isObject(v)) { + return undefined; + } + return parseObject(v, keyToParserMap); + })(optional), + array: (itemParser) => createParamsParserBuilder((v) => { + if (!Array.isArray(v)) { + return undefined; + } + return parseArray(v, itemParser); + })(optional), + }; + } + const ParamsParsers = { + optional: createParamsParserBuilders(true), + required: createParamsParserBuilders(false), + }; + function parseParams(value, keyToParserMap) { + const result = ParamsParsers.required.object(keyToParserMap)(value); + return result.succeeded ? result.value : undefined; + } + + function disposeElement(elem) { + if (elem && elem.parentElement) { + elem.parentElement.removeChild(elem); + } + return null; + } + + function getAllBladePositions() { + return ['veryfirst', 'first', 'last', 'verylast']; + } + + const className$p = ClassName(''); + const POS_TO_CLASS_NAME_MAP = { + veryfirst: 'vfst', + first: 'fst', + last: 'lst', + verylast: 'vlst', + }; + class BladeController { + constructor(config) { + this.parent_ = null; + this.blade = config.blade; + this.view = config.view; + this.viewProps = config.viewProps; + const elem = this.view.element; + this.blade.value('positions').emitter.on('change', () => { + getAllBladePositions().forEach((pos) => { + elem.classList.remove(className$p(undefined, POS_TO_CLASS_NAME_MAP[pos])); + }); + this.blade.get('positions').forEach((pos) => { + elem.classList.add(className$p(undefined, POS_TO_CLASS_NAME_MAP[pos])); + }); + }); + this.viewProps.handleDispose(() => { + disposeElement(elem); + }); + } + get parent() { + return this.parent_; + } + } + + const SVG_NS = 'http://www.w3.org/2000/svg'; + function forceReflow(element) { + element.offsetHeight; + } + function disableTransitionTemporarily(element, callback) { + const t = element.style.transition; + element.style.transition = 'none'; + callback(); + element.style.transition = t; + } + function supportsTouch(doc) { + return doc.ontouchstart !== undefined; + } + function getGlobalObject() { + return new Function('return this')(); + } + function getWindowDocument() { + const globalObj = forceCast(getGlobalObject()); + return globalObj.document; + } + function getCanvasContext(canvasElement) { + const win = canvasElement.ownerDocument.defaultView; + if (!win) { + return null; + } + const isBrowser = 'document' in win; + return isBrowser ? canvasElement.getContext('2d') : null; + } + const ICON_ID_TO_INNER_HTML_MAP = { + check: '', + dropdown: '', + p2dpad: '', + }; + function createSvgIconElement(document, iconId) { + const elem = document.createElementNS(SVG_NS, 'svg'); + elem.innerHTML = ICON_ID_TO_INNER_HTML_MAP[iconId]; + return elem; + } + function insertElementAt(parentElement, element, index) { + parentElement.insertBefore(element, parentElement.children[index]); + } + function removeElement(element) { + if (element.parentElement) { + element.parentElement.removeChild(element); + } + } + function removeChildElements(element) { + while (element.children.length > 0) { + element.removeChild(element.children[0]); + } + } + function removeChildNodes(element) { + while (element.childNodes.length > 0) { + element.removeChild(element.childNodes[0]); + } + } + function findNextTarget(ev) { + if (ev.relatedTarget) { + return forceCast(ev.relatedTarget); + } + if ('explicitOriginalTarget' in ev) { + return ev.explicitOriginalTarget; + } + return null; + } + + const className$o = ClassName('lbl'); + function createLabelNode(doc, label) { + const frag = doc.createDocumentFragment(); + const lineNodes = label.split('\n').map((line) => { + return doc.createTextNode(line); + }); + lineNodes.forEach((lineNode, index) => { + if (index > 0) { + frag.appendChild(doc.createElement('br')); + } + frag.appendChild(lineNode); + }); + return frag; + } + class LabelView { + constructor(doc, config) { + this.element = doc.createElement('div'); + this.element.classList.add(className$o()); + config.viewProps.bindClassModifiers(this.element); + const labelElem = doc.createElement('div'); + labelElem.classList.add(className$o('l')); + bindValueMap(config.props, 'label', (value) => { + if (isEmpty(value)) { + this.element.classList.add(className$o(undefined, 'nol')); + } + else { + this.element.classList.remove(className$o(undefined, 'nol')); + removeChildNodes(labelElem); + labelElem.appendChild(createLabelNode(doc, value)); + } + }); + this.element.appendChild(labelElem); + this.labelElement = labelElem; + const valueElem = doc.createElement('div'); + valueElem.classList.add(className$o('v')); + this.element.appendChild(valueElem); + this.valueElement = valueElem; + } + } + + class LabelController extends BladeController { + constructor(doc, config) { + const viewProps = config.valueController.viewProps; + super(Object.assign(Object.assign({}, config), { view: new LabelView(doc, { + props: config.props, + viewProps: viewProps, + }), viewProps: viewProps })); + this.props = config.props; + this.valueController = config.valueController; + this.view.valueElement.appendChild(this.valueController.view.element); + } + } + + const ButtonBladePlugin = { + id: 'button', + type: 'blade', + accept(params) { + const p = ParamsParsers; + const result = parseParams(params, { + title: p.required.string, + view: p.required.constant('button'), + label: p.optional.string, + }); + return result ? { params: result } : null; + }, + controller(args) { + return new LabelController(args.document, { + blade: args.blade, + props: ValueMap.fromObject({ + label: args.params.label, + }), + valueController: new ButtonController(args.document, { + props: ValueMap.fromObject({ + title: args.params.title, + }), + viewProps: args.viewProps, + }), + }); + }, + api(args) { + if (!(args.controller instanceof LabelController)) { + return null; + } + if (!(args.controller.valueController instanceof ButtonController)) { + return null; + } + return new ButtonApi(args.controller); + }, + }; + + class ValueBladeController extends BladeController { + constructor(config) { + super(config); + this.value = config.value; + } + } + + function createBlade() { + return new ValueMap({ + positions: createValue([], { + equals: deepEqualsArray, + }), + }); + } + + class Foldable extends ValueMap { + constructor(valueMap) { + super(valueMap); + } + static create(expanded) { + const coreObj = { + completed: true, + expanded: expanded, + expandedHeight: null, + shouldFixHeight: false, + temporaryExpanded: null, + }; + const core = ValueMap.createCore(coreObj); + return new Foldable(core); + } + get styleExpanded() { + var _a; + return (_a = this.get('temporaryExpanded')) !== null && _a !== void 0 ? _a : this.get('expanded'); + } + get styleHeight() { + if (!this.styleExpanded) { + return '0'; + } + const exHeight = this.get('expandedHeight'); + if (this.get('shouldFixHeight') && !isEmpty(exHeight)) { + return `${exHeight}px`; + } + return 'auto'; + } + bindExpandedClass(elem, expandedClassName) { + const onExpand = () => { + const expanded = this.styleExpanded; + if (expanded) { + elem.classList.add(expandedClassName); + } + else { + elem.classList.remove(expandedClassName); + } + }; + bindValueMap(this, 'expanded', onExpand); + bindValueMap(this, 'temporaryExpanded', onExpand); + } + cleanUpTransition() { + this.set('shouldFixHeight', false); + this.set('expandedHeight', null); + this.set('completed', true); + } + } + function computeExpandedFolderHeight(folder, containerElement) { + let height = 0; + disableTransitionTemporarily(containerElement, () => { + folder.set('expandedHeight', null); + folder.set('temporaryExpanded', true); + forceReflow(containerElement); + height = containerElement.clientHeight; + folder.set('temporaryExpanded', null); + forceReflow(containerElement); + }); + return height; + } + function applyHeight(foldable, elem) { + elem.style.height = foldable.styleHeight; + } + function bindFoldable(foldable, elem) { + foldable.value('expanded').emitter.on('beforechange', () => { + foldable.set('completed', false); + if (isEmpty(foldable.get('expandedHeight'))) { + foldable.set('expandedHeight', computeExpandedFolderHeight(foldable, elem)); + } + foldable.set('shouldFixHeight', true); + forceReflow(elem); + }); + foldable.emitter.on('change', () => { + applyHeight(foldable, elem); + }); + applyHeight(foldable, elem); + elem.addEventListener('transitionend', (ev) => { + if (ev.propertyName !== 'height') { + return; + } + foldable.cleanUpTransition(); + }); + } + + class RackLikeApi extends BladeApi { + constructor(controller, rackApi) { + super(controller); + this.rackApi_ = rackApi; + } + } + + function addButtonAsBlade(api, params) { + return api.addBlade(Object.assign(Object.assign({}, params), { view: 'button' })); + } + function addFolderAsBlade(api, params) { + return api.addBlade(Object.assign(Object.assign({}, params), { view: 'folder' })); + } + function addSeparatorAsBlade(api, opt_params) { + const params = opt_params !== null && opt_params !== void 0 ? opt_params : {}; + return api.addBlade(Object.assign(Object.assign({}, params), { view: 'separator' })); + } + function addTabAsBlade(api, params) { + return api.addBlade(Object.assign(Object.assign({}, params), { view: 'tab' })); + } + + class NestedOrderedSet { + constructor(extract) { + this.emitter = new Emitter(); + this.items_ = []; + this.cache_ = new Set(); + this.onSubListAdd_ = this.onSubListAdd_.bind(this); + this.onSubListRemove_ = this.onSubListRemove_.bind(this); + this.extract_ = extract; + } + get items() { + return this.items_; + } + allItems() { + return Array.from(this.cache_); + } + find(callback) { + for (const item of this.allItems()) { + if (callback(item)) { + return item; + } + } + return null; + } + includes(item) { + return this.cache_.has(item); + } + add(item, opt_index) { + if (this.includes(item)) { + throw TpError.shouldNeverHappen(); + } + const index = opt_index !== undefined ? opt_index : this.items_.length; + this.items_.splice(index, 0, item); + this.cache_.add(item); + const subList = this.extract_(item); + if (subList) { + subList.emitter.on('add', this.onSubListAdd_); + subList.emitter.on('remove', this.onSubListRemove_); + subList.allItems().forEach((item) => { + this.cache_.add(item); + }); + } + this.emitter.emit('add', { + index: index, + item: item, + root: this, + target: this, + }); + } + remove(item) { + const index = this.items_.indexOf(item); + if (index < 0) { + return; + } + this.items_.splice(index, 1); + this.cache_.delete(item); + const subList = this.extract_(item); + if (subList) { + subList.emitter.off('add', this.onSubListAdd_); + subList.emitter.off('remove', this.onSubListRemove_); + } + this.emitter.emit('remove', { + index: index, + item: item, + root: this, + target: this, + }); + } + onSubListAdd_(ev) { + this.cache_.add(ev.item); + this.emitter.emit('add', { + index: ev.index, + item: ev.item, + root: this, + target: ev.target, + }); + } + onSubListRemove_(ev) { + this.cache_.delete(ev.item); + this.emitter.emit('remove', { + index: ev.index, + item: ev.item, + root: this, + target: ev.target, + }); + } + } + + class InputBindingApi extends BladeApi { + constructor(controller) { + super(controller); + this.onBindingChange_ = this.onBindingChange_.bind(this); + this.emitter_ = new Emitter(); + this.controller_.binding.emitter.on('change', this.onBindingChange_); + } + get label() { + return this.controller_.props.get('label'); + } + set label(label) { + this.controller_.props.set('label', label); + } + on(eventName, handler) { + const bh = handler.bind(this); + this.emitter_.on(eventName, (ev) => { + bh(ev.event); + }); + return this; + } + refresh() { + this.controller_.binding.read(); + } + onBindingChange_(ev) { + const value = ev.sender.target.read(); + this.emitter_.emit('change', { + event: new TpChangeEvent(this, forceCast(value), this.controller_.binding.target.presetKey, ev.options.last), + }); + } + } + + class InputBindingController extends LabelController { + constructor(doc, config) { + super(doc, config); + this.binding = config.binding; + } + } + + class MonitorBindingApi extends BladeApi { + constructor(controller) { + super(controller); + this.onBindingUpdate_ = this.onBindingUpdate_.bind(this); + this.emitter_ = new Emitter(); + this.controller_.binding.emitter.on('update', this.onBindingUpdate_); + } + get label() { + return this.controller_.props.get('label'); + } + set label(label) { + this.controller_.props.set('label', label); + } + on(eventName, handler) { + const bh = handler.bind(this); + this.emitter_.on(eventName, (ev) => { + bh(ev.event); + }); + return this; + } + refresh() { + this.controller_.binding.read(); + } + onBindingUpdate_(ev) { + const value = ev.sender.target.read(); + this.emitter_.emit('update', { + event: new TpUpdateEvent(this, forceCast(value), this.controller_.binding.target.presetKey), + }); + } + } + + class MonitorBindingController extends LabelController { + constructor(doc, config) { + super(doc, config); + this.binding = config.binding; + this.viewProps.bindDisabled(this.binding.ticker); + this.viewProps.handleDispose(() => { + this.binding.dispose(); + }); + } + } + + function findSubBladeApiSet(api) { + if (api instanceof RackApi) { + return api['apiSet_']; + } + if (api instanceof RackLikeApi) { + return api['rackApi_']['apiSet_']; + } + return null; + } + function getApiByController(apiSet, controller) { + const api = apiSet.find((api) => api.controller_ === controller); + if (!api) { + throw TpError.shouldNeverHappen(); + } + return api; + } + function createBindingTarget(obj, key, opt_id) { + if (!BindingTarget.isBindable(obj)) { + throw TpError.notBindable(); + } + return new BindingTarget(obj, key, opt_id); + } + class RackApi extends BladeApi { + constructor(controller, pool) { + super(controller); + this.onRackAdd_ = this.onRackAdd_.bind(this); + this.onRackRemove_ = this.onRackRemove_.bind(this); + this.onRackInputChange_ = this.onRackInputChange_.bind(this); + this.onRackMonitorUpdate_ = this.onRackMonitorUpdate_.bind(this); + this.emitter_ = new Emitter(); + this.apiSet_ = new NestedOrderedSet(findSubBladeApiSet); + this.pool_ = pool; + const rack = this.controller_.rack; + rack.emitter.on('add', this.onRackAdd_); + rack.emitter.on('remove', this.onRackRemove_); + rack.emitter.on('inputchange', this.onRackInputChange_); + rack.emitter.on('monitorupdate', this.onRackMonitorUpdate_); + rack.children.forEach((bc) => { + this.setUpApi_(bc); + }); + } + get children() { + return this.controller_.rack.children.map((bc) => getApiByController(this.apiSet_, bc)); + } + addInput(object, key, opt_params) { + const params = opt_params !== null && opt_params !== void 0 ? opt_params : {}; + const doc = this.controller_.view.element.ownerDocument; + const bc = this.pool_.createInput(doc, createBindingTarget(object, key, params.presetKey), params); + const api = new InputBindingApi(bc); + return this.add(api, params.index); + } + addMonitor(object, key, opt_params) { + const params = opt_params !== null && opt_params !== void 0 ? opt_params : {}; + const doc = this.controller_.view.element.ownerDocument; + const bc = this.pool_.createMonitor(doc, createBindingTarget(object, key), params); + const api = new MonitorBindingApi(bc); + return forceCast(this.add(api, params.index)); + } + addFolder(params) { + return addFolderAsBlade(this, params); + } + addButton(params) { + return addButtonAsBlade(this, params); + } + addSeparator(opt_params) { + return addSeparatorAsBlade(this, opt_params); + } + addTab(params) { + return addTabAsBlade(this, params); + } + add(api, opt_index) { + this.controller_.rack.add(api.controller_, opt_index); + const gapi = this.apiSet_.find((a) => a.controller_ === api.controller_); + if (gapi) { + this.apiSet_.remove(gapi); + } + this.apiSet_.add(api); + return api; + } + remove(api) { + this.controller_.rack.remove(api.controller_); + } + addBlade(params) { + const doc = this.controller_.view.element.ownerDocument; + const bc = this.pool_.createBlade(doc, params); + const api = this.pool_.createBladeApi(bc); + return this.add(api, params.index); + } + on(eventName, handler) { + const bh = handler.bind(this); + this.emitter_.on(eventName, (ev) => { + bh(ev.event); + }); + return this; + } + setUpApi_(bc) { + const api = this.apiSet_.find((api) => api.controller_ === bc); + if (!api) { + this.apiSet_.add(this.pool_.createBladeApi(bc)); + } + } + onRackAdd_(ev) { + this.setUpApi_(ev.bladeController); + } + onRackRemove_(ev) { + if (ev.isRoot) { + const api = getApiByController(this.apiSet_, ev.bladeController); + this.apiSet_.remove(api); + } + } + onRackInputChange_(ev) { + const bc = ev.bladeController; + if (bc instanceof InputBindingController) { + const api = getApiByController(this.apiSet_, bc); + const binding = bc.binding; + this.emitter_.emit('change', { + event: new TpChangeEvent(api, forceCast(binding.target.read()), binding.target.presetKey, ev.options.last), + }); + } + else if (bc instanceof ValueBladeController) { + const api = getApiByController(this.apiSet_, bc); + this.emitter_.emit('change', { + event: new TpChangeEvent(api, bc.value.rawValue, undefined, ev.options.last), + }); + } + } + onRackMonitorUpdate_(ev) { + if (!(ev.bladeController instanceof MonitorBindingController)) { + throw TpError.shouldNeverHappen(); + } + const api = getApiByController(this.apiSet_, ev.bladeController); + const binding = ev.bladeController.binding; + this.emitter_.emit('update', { + event: new TpUpdateEvent(api, forceCast(binding.target.read()), binding.target.presetKey), + }); + } + } + + class FolderApi extends RackLikeApi { + constructor(controller, pool) { + super(controller, new RackApi(controller.rackController, pool)); + this.emitter_ = new Emitter(); + this.controller_.foldable + .value('expanded') + .emitter.on('change', (ev) => { + this.emitter_.emit('fold', { + event: new TpFoldEvent(this, ev.sender.rawValue), + }); + }); + this.rackApi_.on('change', (ev) => { + this.emitter_.emit('change', { + event: ev, + }); + }); + this.rackApi_.on('update', (ev) => { + this.emitter_.emit('update', { + event: ev, + }); + }); + } + get expanded() { + return this.controller_.foldable.get('expanded'); + } + set expanded(expanded) { + this.controller_.foldable.set('expanded', expanded); + } + get title() { + return this.controller_.props.get('title'); + } + set title(title) { + this.controller_.props.set('title', title); + } + get children() { + return this.rackApi_.children; + } + addInput(object, key, opt_params) { + return this.rackApi_.addInput(object, key, opt_params); + } + addMonitor(object, key, opt_params) { + return this.rackApi_.addMonitor(object, key, opt_params); + } + addFolder(params) { + return this.rackApi_.addFolder(params); + } + addButton(params) { + return this.rackApi_.addButton(params); + } + addSeparator(opt_params) { + return this.rackApi_.addSeparator(opt_params); + } + addTab(params) { + return this.rackApi_.addTab(params); + } + add(api, opt_index) { + return this.rackApi_.add(api, opt_index); + } + remove(api) { + this.rackApi_.remove(api); + } + addBlade(params) { + return this.rackApi_.addBlade(params); + } + on(eventName, handler) { + const bh = handler.bind(this); + this.emitter_.on(eventName, (ev) => { + bh(ev.event); + }); + return this; + } + } + + class RackLikeController extends BladeController { + constructor(config) { + super({ + blade: config.blade, + view: config.view, + viewProps: config.rackController.viewProps, + }); + this.rackController = config.rackController; + } + } + + class PlainView { + constructor(doc, config) { + const className = ClassName(config.viewName); + this.element = doc.createElement('div'); + this.element.classList.add(className()); + config.viewProps.bindClassModifiers(this.element); + } + } + + function findInputBindingController(bcs, b) { + for (let i = 0; i < bcs.length; i++) { + const bc = bcs[i]; + if (bc instanceof InputBindingController && bc.binding === b) { + return bc; + } + } + return null; + } + function findMonitorBindingController(bcs, b) { + for (let i = 0; i < bcs.length; i++) { + const bc = bcs[i]; + if (bc instanceof MonitorBindingController && bc.binding === b) { + return bc; + } + } + return null; + } + function findValueBladeController(bcs, v) { + for (let i = 0; i < bcs.length; i++) { + const bc = bcs[i]; + if (bc instanceof ValueBladeController && bc.value === v) { + return bc; + } + } + return null; + } + function findSubRack(bc) { + if (bc instanceof RackController) { + return bc.rack; + } + if (bc instanceof RackLikeController) { + return bc.rackController.rack; + } + return null; + } + function findSubBladeControllerSet(bc) { + const rack = findSubRack(bc); + return rack ? rack['bcSet_'] : null; + } + class BladeRack { + constructor(blade) { + var _a; + this.onBladePositionsChange_ = this.onBladePositionsChange_.bind(this); + this.onSetAdd_ = this.onSetAdd_.bind(this); + this.onSetRemove_ = this.onSetRemove_.bind(this); + this.onChildDispose_ = this.onChildDispose_.bind(this); + this.onChildPositionsChange_ = this.onChildPositionsChange_.bind(this); + this.onChildInputChange_ = this.onChildInputChange_.bind(this); + this.onChildMonitorUpdate_ = this.onChildMonitorUpdate_.bind(this); + this.onChildValueChange_ = this.onChildValueChange_.bind(this); + this.onChildViewPropsChange_ = this.onChildViewPropsChange_.bind(this); + this.onDescendantLayout_ = this.onDescendantLayout_.bind(this); + this.onDescendantInputChange_ = this.onDescendantInputChange_.bind(this); + this.onDescendantMonitorUpdate_ = + this.onDescendantMonitorUpdate_.bind(this); + this.emitter = new Emitter(); + this.blade_ = blade !== null && blade !== void 0 ? blade : null; + (_a = this.blade_) === null || _a === void 0 ? void 0 : _a.value('positions').emitter.on('change', this.onBladePositionsChange_); + this.bcSet_ = new NestedOrderedSet(findSubBladeControllerSet); + this.bcSet_.emitter.on('add', this.onSetAdd_); + this.bcSet_.emitter.on('remove', this.onSetRemove_); + } + get children() { + return this.bcSet_.items; + } + add(bc, opt_index) { + if (bc.parent) { + bc.parent.remove(bc); + } + bc['parent_'] = this; + this.bcSet_.add(bc, opt_index); + } + remove(bc) { + bc['parent_'] = null; + this.bcSet_.remove(bc); + } + find(controllerClass) { + return forceCast(this.bcSet_.allItems().filter((bc) => { + return bc instanceof controllerClass; + })); + } + onSetAdd_(ev) { + this.updatePositions_(); + const isRoot = ev.target === ev.root; + this.emitter.emit('add', { + bladeController: ev.item, + index: ev.index, + isRoot: isRoot, + sender: this, + }); + if (!isRoot) { + return; + } + const bc = ev.item; + bc.viewProps.emitter.on('change', this.onChildViewPropsChange_); + bc.blade + .value('positions') + .emitter.on('change', this.onChildPositionsChange_); + bc.viewProps.handleDispose(this.onChildDispose_); + if (bc instanceof InputBindingController) { + bc.binding.emitter.on('change', this.onChildInputChange_); + } + else if (bc instanceof MonitorBindingController) { + bc.binding.emitter.on('update', this.onChildMonitorUpdate_); + } + else if (bc instanceof ValueBladeController) { + bc.value.emitter.on('change', this.onChildValueChange_); + } + else { + const rack = findSubRack(bc); + if (rack) { + const emitter = rack.emitter; + emitter.on('layout', this.onDescendantLayout_); + emitter.on('inputchange', this.onDescendantInputChange_); + emitter.on('monitorupdate', this.onDescendantMonitorUpdate_); + } + } + } + onSetRemove_(ev) { + this.updatePositions_(); + const isRoot = ev.target === ev.root; + this.emitter.emit('remove', { + bladeController: ev.item, + isRoot: isRoot, + sender: this, + }); + if (!isRoot) { + return; + } + const bc = ev.item; + if (bc instanceof InputBindingController) { + bc.binding.emitter.off('change', this.onChildInputChange_); + } + else if (bc instanceof MonitorBindingController) { + bc.binding.emitter.off('update', this.onChildMonitorUpdate_); + } + else if (bc instanceof ValueBladeController) { + bc.value.emitter.off('change', this.onChildValueChange_); + } + else { + const rack = findSubRack(bc); + if (rack) { + const emitter = rack.emitter; + emitter.off('layout', this.onDescendantLayout_); + emitter.off('inputchange', this.onDescendantInputChange_); + emitter.off('monitorupdate', this.onDescendantMonitorUpdate_); + } + } + } + updatePositions_() { + const visibleItems = this.bcSet_.items.filter((bc) => !bc.viewProps.get('hidden')); + const firstVisibleItem = visibleItems[0]; + const lastVisibleItem = visibleItems[visibleItems.length - 1]; + this.bcSet_.items.forEach((bc) => { + const ps = []; + if (bc === firstVisibleItem) { + ps.push('first'); + if (!this.blade_ || + this.blade_.get('positions').includes('veryfirst')) { + ps.push('veryfirst'); + } + } + if (bc === lastVisibleItem) { + ps.push('last'); + if (!this.blade_ || this.blade_.get('positions').includes('verylast')) { + ps.push('verylast'); + } + } + bc.blade.set('positions', ps); + }); + } + onChildPositionsChange_() { + this.updatePositions_(); + this.emitter.emit('layout', { + sender: this, + }); + } + onChildViewPropsChange_(_ev) { + this.updatePositions_(); + this.emitter.emit('layout', { + sender: this, + }); + } + onChildDispose_() { + const disposedUcs = this.bcSet_.items.filter((bc) => { + return bc.viewProps.get('disposed'); + }); + disposedUcs.forEach((bc) => { + this.bcSet_.remove(bc); + }); + } + onChildInputChange_(ev) { + const bc = findInputBindingController(this.find(InputBindingController), ev.sender); + if (!bc) { + throw TpError.shouldNeverHappen(); + } + this.emitter.emit('inputchange', { + bladeController: bc, + options: ev.options, + sender: this, + }); + } + onChildMonitorUpdate_(ev) { + const bc = findMonitorBindingController(this.find(MonitorBindingController), ev.sender); + if (!bc) { + throw TpError.shouldNeverHappen(); + } + this.emitter.emit('monitorupdate', { + bladeController: bc, + sender: this, + }); + } + onChildValueChange_(ev) { + const bc = findValueBladeController(this.find(ValueBladeController), ev.sender); + if (!bc) { + throw TpError.shouldNeverHappen(); + } + this.emitter.emit('inputchange', { + bladeController: bc, + options: ev.options, + sender: this, + }); + } + onDescendantLayout_(_) { + this.updatePositions_(); + this.emitter.emit('layout', { + sender: this, + }); + } + onDescendantInputChange_(ev) { + this.emitter.emit('inputchange', { + bladeController: ev.bladeController, + options: ev.options, + sender: this, + }); + } + onDescendantMonitorUpdate_(ev) { + this.emitter.emit('monitorupdate', { + bladeController: ev.bladeController, + sender: this, + }); + } + onBladePositionsChange_() { + this.updatePositions_(); + } + } + + class RackController extends BladeController { + constructor(doc, config) { + super(Object.assign(Object.assign({}, config), { view: new PlainView(doc, { + viewName: 'brk', + viewProps: config.viewProps, + }) })); + this.onRackAdd_ = this.onRackAdd_.bind(this); + this.onRackRemove_ = this.onRackRemove_.bind(this); + const rack = new BladeRack(config.root ? undefined : config.blade); + rack.emitter.on('add', this.onRackAdd_); + rack.emitter.on('remove', this.onRackRemove_); + this.rack = rack; + this.viewProps.handleDispose(() => { + for (let i = this.rack.children.length - 1; i >= 0; i--) { + const bc = this.rack.children[i]; + bc.viewProps.set('disposed', true); + } + }); + } + onRackAdd_(ev) { + if (!ev.isRoot) { + return; + } + insertElementAt(this.view.element, ev.bladeController.view.element, ev.index); + } + onRackRemove_(ev) { + if (!ev.isRoot) { + return; + } + removeElement(ev.bladeController.view.element); + } + } + + const bladeContainerClassName = ClassName('cnt'); + + class FolderView { + constructor(doc, config) { + var _a; + this.className_ = ClassName((_a = config.viewName) !== null && _a !== void 0 ? _a : 'fld'); + this.element = doc.createElement('div'); + this.element.classList.add(this.className_(), bladeContainerClassName()); + config.viewProps.bindClassModifiers(this.element); + this.foldable_ = config.foldable; + this.foldable_.bindExpandedClass(this.element, this.className_(undefined, 'expanded')); + bindValueMap(this.foldable_, 'completed', valueToClassName(this.element, this.className_(undefined, 'cpl'))); + const buttonElem = doc.createElement('button'); + buttonElem.classList.add(this.className_('b')); + bindValueMap(config.props, 'title', (title) => { + if (isEmpty(title)) { + this.element.classList.add(this.className_(undefined, 'not')); + } + else { + this.element.classList.remove(this.className_(undefined, 'not')); + } + }); + config.viewProps.bindDisabled(buttonElem); + this.element.appendChild(buttonElem); + this.buttonElement = buttonElem; + const titleElem = doc.createElement('div'); + titleElem.classList.add(this.className_('t')); + bindValueToTextContent(config.props.value('title'), titleElem); + this.buttonElement.appendChild(titleElem); + this.titleElement = titleElem; + const markElem = doc.createElement('div'); + markElem.classList.add(this.className_('m')); + this.buttonElement.appendChild(markElem); + const containerElem = config.containerElement; + containerElem.classList.add(this.className_('c')); + this.element.appendChild(containerElem); + this.containerElement = containerElem; + } + } + + class FolderController extends RackLikeController { + constructor(doc, config) { + var _a; + const foldable = Foldable.create((_a = config.expanded) !== null && _a !== void 0 ? _a : true); + const rc = new RackController(doc, { + blade: config.blade, + root: config.root, + viewProps: config.viewProps, + }); + super(Object.assign(Object.assign({}, config), { rackController: rc, view: new FolderView(doc, { + containerElement: rc.view.element, + foldable: foldable, + props: config.props, + viewName: config.root ? 'rot' : undefined, + viewProps: config.viewProps, + }) })); + this.onTitleClick_ = this.onTitleClick_.bind(this); + this.props = config.props; + this.foldable = foldable; + bindFoldable(this.foldable, this.view.containerElement); + this.rackController.rack.emitter.on('add', () => { + this.foldable.cleanUpTransition(); + }); + this.rackController.rack.emitter.on('remove', () => { + this.foldable.cleanUpTransition(); + }); + this.view.buttonElement.addEventListener('click', this.onTitleClick_); + } + get document() { + return this.view.element.ownerDocument; + } + onTitleClick_() { + this.foldable.set('expanded', !this.foldable.get('expanded')); + } + } + + const FolderBladePlugin = { + id: 'folder', + type: 'blade', + accept(params) { + const p = ParamsParsers; + const result = parseParams(params, { + title: p.required.string, + view: p.required.constant('folder'), + expanded: p.optional.boolean, + }); + return result ? { params: result } : null; + }, + controller(args) { + return new FolderController(args.document, { + blade: args.blade, + expanded: args.params.expanded, + props: ValueMap.fromObject({ + title: args.params.title, + }), + viewProps: args.viewProps, + }); + }, + api(args) { + if (!(args.controller instanceof FolderController)) { + return null; + } + return new FolderApi(args.controller, args.pool); + }, + }; + + class LabeledValueController extends ValueBladeController { + constructor(doc, config) { + const viewProps = config.valueController.viewProps; + super(Object.assign(Object.assign({}, config), { value: config.valueController.value, view: new LabelView(doc, { + props: config.props, + viewProps: viewProps, + }), viewProps: viewProps })); + this.props = config.props; + this.valueController = config.valueController; + this.view.valueElement.appendChild(this.valueController.view.element); + } + } + + class SeparatorApi extends BladeApi { + } + + const className$n = ClassName('spr'); + class SeparatorView { + constructor(doc, config) { + this.element = doc.createElement('div'); + this.element.classList.add(className$n()); + config.viewProps.bindClassModifiers(this.element); + const hrElem = doc.createElement('hr'); + hrElem.classList.add(className$n('r')); + this.element.appendChild(hrElem); + } + } + + class SeparatorController extends BladeController { + constructor(doc, config) { + super(Object.assign(Object.assign({}, config), { view: new SeparatorView(doc, { + viewProps: config.viewProps, + }) })); + } + } + + const SeparatorBladePlugin = { + id: 'separator', + type: 'blade', + accept(params) { + const p = ParamsParsers; + const result = parseParams(params, { + view: p.required.constant('separator'), + }); + return result ? { params: result } : null; + }, + controller(args) { + return new SeparatorController(args.document, { + blade: args.blade, + viewProps: args.viewProps, + }); + }, + api(args) { + if (!(args.controller instanceof SeparatorController)) { + return null; + } + return new SeparatorApi(args.controller); + }, + }; + + const className$m = ClassName(''); + function valueToModifier(elem, modifier) { + return valueToClassName(elem, className$m(undefined, modifier)); + } + class ViewProps extends ValueMap { + constructor(valueMap) { + super(valueMap); + } + static create(opt_initialValue) { + var _a, _b; + const initialValue = opt_initialValue !== null && opt_initialValue !== void 0 ? opt_initialValue : {}; + const coreObj = { + disabled: (_a = initialValue.disabled) !== null && _a !== void 0 ? _a : false, + disposed: false, + hidden: (_b = initialValue.hidden) !== null && _b !== void 0 ? _b : false, + }; + const core = ValueMap.createCore(coreObj); + return new ViewProps(core); + } + bindClassModifiers(elem) { + bindValueMap(this, 'disabled', valueToModifier(elem, 'disabled')); + bindValueMap(this, 'hidden', valueToModifier(elem, 'hidden')); + } + bindDisabled(target) { + bindValueMap(this, 'disabled', (disabled) => { + target.disabled = disabled; + }); + } + bindTabIndex(elem) { + bindValueMap(this, 'disabled', (disabled) => { + elem.tabIndex = disabled ? -1 : 0; + }); + } + handleDispose(callback) { + this.value('disposed').emitter.on('change', (disposed) => { + if (disposed) { + callback(); + } + }); + } + } + + const className$l = ClassName('tbi'); + class TabItemView { + constructor(doc, config) { + this.element = doc.createElement('div'); + this.element.classList.add(className$l()); + config.viewProps.bindClassModifiers(this.element); + bindValueMap(config.props, 'selected', (selected) => { + if (selected) { + this.element.classList.add(className$l(undefined, 'sel')); + } + else { + this.element.classList.remove(className$l(undefined, 'sel')); + } + }); + const buttonElem = doc.createElement('button'); + buttonElem.classList.add(className$l('b')); + config.viewProps.bindDisabled(buttonElem); + this.element.appendChild(buttonElem); + this.buttonElement = buttonElem; + const titleElem = doc.createElement('div'); + titleElem.classList.add(className$l('t')); + bindValueToTextContent(config.props.value('title'), titleElem); + this.buttonElement.appendChild(titleElem); + this.titleElement = titleElem; + } + } + + class TabItemController { + constructor(doc, config) { + this.emitter = new Emitter(); + this.onClick_ = this.onClick_.bind(this); + this.props = config.props; + this.viewProps = config.viewProps; + this.view = new TabItemView(doc, { + props: config.props, + viewProps: config.viewProps, + }); + this.view.buttonElement.addEventListener('click', this.onClick_); + } + onClick_() { + this.emitter.emit('click', { + sender: this, + }); + } + } + + class TabPageController { + constructor(doc, config) { + this.onItemClick_ = this.onItemClick_.bind(this); + this.ic_ = new TabItemController(doc, { + props: config.itemProps, + viewProps: ViewProps.create(), + }); + this.ic_.emitter.on('click', this.onItemClick_); + this.cc_ = new RackController(doc, { + blade: createBlade(), + viewProps: ViewProps.create(), + }); + this.props = config.props; + bindValueMap(this.props, 'selected', (selected) => { + this.itemController.props.set('selected', selected); + this.contentController.viewProps.set('hidden', !selected); + }); + } + get itemController() { + return this.ic_; + } + get contentController() { + return this.cc_; + } + onItemClick_() { + this.props.set('selected', true); + } + } + + class TabPageApi { + constructor(controller, contentRackApi) { + this.controller_ = controller; + this.rackApi_ = contentRackApi; + } + get title() { + var _a; + return (_a = this.controller_.itemController.props.get('title')) !== null && _a !== void 0 ? _a : ''; + } + set title(title) { + this.controller_.itemController.props.set('title', title); + } + get selected() { + return this.controller_.props.get('selected'); + } + set selected(selected) { + this.controller_.props.set('selected', selected); + } + get children() { + return this.rackApi_.children; + } + addButton(params) { + return this.rackApi_.addButton(params); + } + addFolder(params) { + return this.rackApi_.addFolder(params); + } + addSeparator(opt_params) { + return this.rackApi_.addSeparator(opt_params); + } + addTab(params) { + return this.rackApi_.addTab(params); + } + add(api, opt_index) { + this.rackApi_.add(api, opt_index); + } + remove(api) { + this.rackApi_.remove(api); + } + addInput(object, key, opt_params) { + return this.rackApi_.addInput(object, key, opt_params); + } + addMonitor(object, key, opt_params) { + return this.rackApi_.addMonitor(object, key, opt_params); + } + addBlade(params) { + return this.rackApi_.addBlade(params); + } + } + + class TabApi extends RackLikeApi { + constructor(controller, pool) { + super(controller, new RackApi(controller.rackController, pool)); + this.onPageAdd_ = this.onPageAdd_.bind(this); + this.onPageRemove_ = this.onPageRemove_.bind(this); + this.onSelect_ = this.onSelect_.bind(this); + this.emitter_ = new Emitter(); + this.pageApiMap_ = new Map(); + this.rackApi_.on('change', (ev) => { + this.emitter_.emit('change', { + event: ev, + }); + }); + this.rackApi_.on('update', (ev) => { + this.emitter_.emit('update', { + event: ev, + }); + }); + this.controller_.tab.selectedIndex.emitter.on('change', this.onSelect_); + this.controller_.pageSet.emitter.on('add', this.onPageAdd_); + this.controller_.pageSet.emitter.on('remove', this.onPageRemove_); + this.controller_.pageSet.items.forEach((pc) => { + this.setUpPageApi_(pc); + }); + } + get pages() { + return this.controller_.pageSet.items.map((pc) => { + const api = this.pageApiMap_.get(pc); + if (!api) { + throw TpError.shouldNeverHappen(); + } + return api; + }); + } + addPage(params) { + const doc = this.controller_.view.element.ownerDocument; + const pc = new TabPageController(doc, { + itemProps: ValueMap.fromObject({ + selected: false, + title: params.title, + }), + props: ValueMap.fromObject({ + selected: false, + }), + }); + this.controller_.add(pc, params.index); + const api = this.pageApiMap_.get(pc); + if (!api) { + throw TpError.shouldNeverHappen(); + } + return api; + } + removePage(index) { + this.controller_.remove(index); + } + on(eventName, handler) { + const bh = handler.bind(this); + this.emitter_.on(eventName, (ev) => { + bh(ev.event); + }); + return this; + } + setUpPageApi_(pc) { + const rackApi = this.rackApi_['apiSet_'].find((api) => api.controller_ === pc.contentController); + if (!rackApi) { + throw TpError.shouldNeverHappen(); + } + const api = new TabPageApi(pc, rackApi); + this.pageApiMap_.set(pc, api); + } + onPageAdd_(ev) { + this.setUpPageApi_(ev.item); + } + onPageRemove_(ev) { + const api = this.pageApiMap_.get(ev.item); + if (!api) { + throw TpError.shouldNeverHappen(); + } + this.pageApiMap_.delete(ev.item); + } + onSelect_(ev) { + this.emitter_.emit('select', { + event: new TpTabSelectEvent(this, ev.rawValue), + }); + } + } + + const INDEX_NOT_SELECTED = -1; + class Tab { + constructor() { + this.onItemSelectedChange_ = this.onItemSelectedChange_.bind(this); + this.empty = createValue(true); + this.selectedIndex = createValue(INDEX_NOT_SELECTED); + this.items_ = []; + } + add(item, opt_index) { + const index = opt_index !== null && opt_index !== void 0 ? opt_index : this.items_.length; + this.items_.splice(index, 0, item); + item.emitter.on('change', this.onItemSelectedChange_); + this.keepSelection_(); + } + remove(item) { + const index = this.items_.indexOf(item); + if (index < 0) { + return; + } + this.items_.splice(index, 1); + item.emitter.off('change', this.onItemSelectedChange_); + this.keepSelection_(); + } + keepSelection_() { + if (this.items_.length === 0) { + this.selectedIndex.rawValue = INDEX_NOT_SELECTED; + this.empty.rawValue = true; + return; + } + const firstSelIndex = this.items_.findIndex((s) => s.rawValue); + if (firstSelIndex < 0) { + this.items_.forEach((s, i) => { + s.rawValue = i === 0; + }); + this.selectedIndex.rawValue = 0; + } + else { + this.items_.forEach((s, i) => { + s.rawValue = i === firstSelIndex; + }); + this.selectedIndex.rawValue = firstSelIndex; + } + this.empty.rawValue = false; + } + onItemSelectedChange_(ev) { + if (ev.rawValue) { + const index = this.items_.findIndex((s) => s === ev.sender); + this.items_.forEach((s, i) => { + s.rawValue = i === index; + }); + this.selectedIndex.rawValue = index; + } + else { + this.keepSelection_(); + } + } + } + + const className$k = ClassName('tab'); + class TabView { + constructor(doc, config) { + this.element = doc.createElement('div'); + this.element.classList.add(className$k(), bladeContainerClassName()); + config.viewProps.bindClassModifiers(this.element); + bindValue(config.empty, valueToClassName(this.element, className$k(undefined, 'nop'))); + const itemsElem = doc.createElement('div'); + itemsElem.classList.add(className$k('i')); + this.element.appendChild(itemsElem); + this.itemsElement = itemsElem; + const contentsElem = config.contentsElement; + contentsElem.classList.add(className$k('c')); + this.element.appendChild(contentsElem); + this.contentsElement = contentsElem; + } + } + + class TabController extends RackLikeController { + constructor(doc, config) { + const cr = new RackController(doc, { + blade: config.blade, + viewProps: config.viewProps, + }); + const tab = new Tab(); + super({ + blade: config.blade, + rackController: cr, + view: new TabView(doc, { + contentsElement: cr.view.element, + empty: tab.empty, + viewProps: config.viewProps, + }), + }); + this.onPageAdd_ = this.onPageAdd_.bind(this); + this.onPageRemove_ = this.onPageRemove_.bind(this); + this.pageSet_ = new NestedOrderedSet(() => null); + this.pageSet_.emitter.on('add', this.onPageAdd_); + this.pageSet_.emitter.on('remove', this.onPageRemove_); + this.tab = tab; + } + get pageSet() { + return this.pageSet_; + } + add(pc, opt_index) { + this.pageSet_.add(pc, opt_index); + } + remove(index) { + this.pageSet_.remove(this.pageSet_.items[index]); + } + onPageAdd_(ev) { + const pc = ev.item; + insertElementAt(this.view.itemsElement, pc.itemController.view.element, ev.index); + this.rackController.rack.add(pc.contentController, ev.index); + this.tab.add(pc.props.value('selected')); + } + onPageRemove_(ev) { + const pc = ev.item; + removeElement(pc.itemController.view.element); + this.rackController.rack.remove(pc.contentController); + this.tab.remove(pc.props.value('selected')); + } + } + + const TabBladePlugin = { + id: 'tab', + type: 'blade', + accept(params) { + const p = ParamsParsers; + const result = parseParams(params, { + pages: p.required.array(p.required.object({ title: p.required.string })), + view: p.required.constant('tab'), + }); + if (!result || result.pages.length === 0) { + return null; + } + return { params: result }; + }, + controller(args) { + const c = new TabController(args.document, { + blade: args.blade, + viewProps: args.viewProps, + }); + args.params.pages.forEach((p) => { + const pc = new TabPageController(args.document, { + itemProps: ValueMap.fromObject({ + selected: false, + title: p.title, + }), + props: ValueMap.fromObject({ + selected: false, + }), + }); + c.add(pc); + }); + return c; + }, + api(args) { + if (!(args.controller instanceof TabController)) { + return null; + } + return new TabApi(args.controller, args.pool); + }, + }; + + function createBladeController(plugin, args) { + const ac = plugin.accept(args.params); + if (!ac) { + return null; + } + const disabled = ParamsParsers.optional.boolean(args.params['disabled']).value; + const hidden = ParamsParsers.optional.boolean(args.params['hidden']).value; + return plugin.controller({ + blade: createBlade(), + document: args.document, + params: forceCast(Object.assign(Object.assign({}, ac.params), { disabled: disabled, hidden: hidden })), + viewProps: ViewProps.create({ + disabled: disabled, + hidden: hidden, + }), + }); + } + + class ManualTicker { + constructor() { + this.disabled = false; + this.emitter = new Emitter(); + } + dispose() { } + tick() { + if (this.disabled) { + return; + } + this.emitter.emit('tick', { + sender: this, + }); + } + } + + class IntervalTicker { + constructor(doc, interval) { + this.disabled_ = false; + this.timerId_ = null; + this.onTick_ = this.onTick_.bind(this); + this.doc_ = doc; + this.emitter = new Emitter(); + this.interval_ = interval; + this.setTimer_(); + } + get disabled() { + return this.disabled_; + } + set disabled(inactive) { + this.disabled_ = inactive; + if (this.disabled_) { + this.clearTimer_(); + } + else { + this.setTimer_(); + } + } + dispose() { + this.clearTimer_(); + } + clearTimer_() { + if (this.timerId_ === null) { + return; + } + const win = this.doc_.defaultView; + if (win) { + win.clearInterval(this.timerId_); + } + this.timerId_ = null; + } + setTimer_() { + this.clearTimer_(); + if (this.interval_ <= 0) { + return; + } + const win = this.doc_.defaultView; + if (win) { + this.timerId_ = win.setInterval(this.onTick_, this.interval_); + } + } + onTick_() { + if (this.disabled_) { + return; + } + this.emitter.emit('tick', { + sender: this, + }); + } + } + + class CompositeConstraint { + constructor(constraints) { + this.constraints = constraints; + } + constrain(value) { + return this.constraints.reduce((result, c) => { + return c.constrain(result); + }, value); + } + } + function findConstraint(c, constraintClass) { + if (c instanceof constraintClass) { + return c; + } + if (c instanceof CompositeConstraint) { + const result = c.constraints.reduce((tmpResult, sc) => { + if (tmpResult) { + return tmpResult; + } + return sc instanceof constraintClass ? sc : null; + }, null); + if (result) { + return result; + } + } + return null; + } + + class ListConstraint { + constructor(options) { + this.options = options; + } + constrain(value) { + const opts = this.options; + if (opts.length === 0) { + return value; + } + const matched = opts.filter((item) => { + return item.value === value; + }).length > 0; + return matched ? value : opts[0].value; + } + } + + class RangeConstraint { + constructor(config) { + this.maxValue = config.max; + this.minValue = config.min; + } + constrain(value) { + let result = value; + if (!isEmpty(this.minValue)) { + result = Math.max(result, this.minValue); + } + if (!isEmpty(this.maxValue)) { + result = Math.min(result, this.maxValue); + } + return result; + } + } + + class StepConstraint { + constructor(step, origin = 0) { + this.step = step; + this.origin = origin; + } + constrain(value) { + const o = this.origin % this.step; + const r = Math.round((value - o) / this.step); + return o + r * this.step; + } + } + + const className$j = ClassName('lst'); + class ListView { + constructor(doc, config) { + this.onValueChange_ = this.onValueChange_.bind(this); + this.props_ = config.props; + this.element = doc.createElement('div'); + this.element.classList.add(className$j()); + config.viewProps.bindClassModifiers(this.element); + const selectElem = doc.createElement('select'); + selectElem.classList.add(className$j('s')); + bindValueMap(this.props_, 'options', (opts) => { + removeChildElements(selectElem); + opts.forEach((item, index) => { + const optionElem = doc.createElement('option'); + optionElem.dataset.index = String(index); + optionElem.textContent = item.text; + optionElem.value = String(item.value); + selectElem.appendChild(optionElem); + }); + }); + config.viewProps.bindDisabled(selectElem); + this.element.appendChild(selectElem); + this.selectElement = selectElem; + const markElem = doc.createElement('div'); + markElem.classList.add(className$j('m')); + markElem.appendChild(createSvgIconElement(doc, 'dropdown')); + this.element.appendChild(markElem); + config.value.emitter.on('change', this.onValueChange_); + this.value_ = config.value; + this.update_(); + } + update_() { + this.selectElement.value = String(this.value_.rawValue); + } + onValueChange_() { + this.update_(); + } + } + + class ListController { + constructor(doc, config) { + this.onSelectChange_ = this.onSelectChange_.bind(this); + this.props = config.props; + this.value = config.value; + this.viewProps = config.viewProps; + this.view = new ListView(doc, { + props: this.props, + value: this.value, + viewProps: this.viewProps, + }); + this.view.selectElement.addEventListener('change', this.onSelectChange_); + } + onSelectChange_(e) { + const selectElem = forceCast(e.currentTarget); + const optElem = selectElem.selectedOptions.item(0); + if (!optElem) { + return; + } + const itemIndex = Number(optElem.dataset.index); + this.value.rawValue = this.props.get('options')[itemIndex].value; + } + } + + const className$i = ClassName('pop'); + class PopupView { + constructor(doc, config) { + this.element = doc.createElement('div'); + this.element.classList.add(className$i()); + config.viewProps.bindClassModifiers(this.element); + bindValue(config.shows, valueToClassName(this.element, className$i(undefined, 'v'))); + } + } + + class PopupController { + constructor(doc, config) { + this.shows = createValue(false); + this.viewProps = config.viewProps; + this.view = new PopupView(doc, { + shows: this.shows, + viewProps: this.viewProps, + }); + } + } + + const className$h = ClassName('txt'); + class TextView { + constructor(doc, config) { + this.onChange_ = this.onChange_.bind(this); + this.element = doc.createElement('div'); + this.element.classList.add(className$h()); + config.viewProps.bindClassModifiers(this.element); + this.props_ = config.props; + this.props_.emitter.on('change', this.onChange_); + const inputElem = doc.createElement('input'); + inputElem.classList.add(className$h('i')); + inputElem.type = 'text'; + config.viewProps.bindDisabled(inputElem); + this.element.appendChild(inputElem); + this.inputElement = inputElem; + config.value.emitter.on('change', this.onChange_); + this.value_ = config.value; + this.refresh(); + } + refresh() { + const formatter = this.props_.get('formatter'); + this.inputElement.value = formatter(this.value_.rawValue); + } + onChange_() { + this.refresh(); + } + } + + class TextController { + constructor(doc, config) { + this.onInputChange_ = this.onInputChange_.bind(this); + this.parser_ = config.parser; + this.props = config.props; + this.value = config.value; + this.viewProps = config.viewProps; + this.view = new TextView(doc, { + props: config.props, + value: this.value, + viewProps: this.viewProps, + }); + this.view.inputElement.addEventListener('change', this.onInputChange_); + } + onInputChange_(e) { + const inputElem = forceCast(e.currentTarget); + const value = inputElem.value; + const parsedValue = this.parser_(value); + if (!isEmpty(parsedValue)) { + this.value.rawValue = parsedValue; + } + this.view.refresh(); + } + } + + function boolToString(value) { + return String(value); + } + function boolFromUnknown(value) { + if (value === 'false') { + return false; + } + return !!value; + } + function BooleanFormatter(value) { + return boolToString(value); + } + + class NumberLiteralNode { + constructor(text) { + this.text = text; + } + evaluate() { + return Number(this.text); + } + toString() { + return this.text; + } + } + const BINARY_OPERATION_MAP = { + '**': (v1, v2) => Math.pow(v1, v2), + '*': (v1, v2) => v1 * v2, + '/': (v1, v2) => v1 / v2, + '%': (v1, v2) => v1 % v2, + '+': (v1, v2) => v1 + v2, + '-': (v1, v2) => v1 - v2, + '<<': (v1, v2) => v1 << v2, + '>>': (v1, v2) => v1 >> v2, + '>>>': (v1, v2) => v1 >>> v2, + '&': (v1, v2) => v1 & v2, + '^': (v1, v2) => v1 ^ v2, + '|': (v1, v2) => v1 | v2, + }; + class BinaryOperationNode { + constructor(operator, left, right) { + this.left = left; + this.operator = operator; + this.right = right; + } + evaluate() { + const op = BINARY_OPERATION_MAP[this.operator]; + if (!op) { + throw new Error(`unexpected binary operator: '${this.operator}`); + } + return op(this.left.evaluate(), this.right.evaluate()); + } + toString() { + return [ + 'b(', + this.left.toString(), + this.operator, + this.right.toString(), + ')', + ].join(' '); + } + } + const UNARY_OPERATION_MAP = { + '+': (v) => v, + '-': (v) => -v, + '~': (v) => ~v, + }; + class UnaryOperationNode { + constructor(operator, expr) { + this.operator = operator; + this.expression = expr; + } + evaluate() { + const op = UNARY_OPERATION_MAP[this.operator]; + if (!op) { + throw new Error(`unexpected unary operator: '${this.operator}`); + } + return op(this.expression.evaluate()); + } + toString() { + return ['u(', this.operator, this.expression.toString(), ')'].join(' '); + } + } + + function combineReader(parsers) { + return (text, cursor) => { + for (let i = 0; i < parsers.length; i++) { + const result = parsers[i](text, cursor); + if (result !== '') { + return result; + } + } + return ''; + }; + } + function readWhitespace(text, cursor) { + var _a; + const m = text.substr(cursor).match(/^\s+/); + return (_a = (m && m[0])) !== null && _a !== void 0 ? _a : ''; + } + function readNonZeroDigit(text, cursor) { + const ch = text.substr(cursor, 1); + return ch.match(/^[1-9]$/) ? ch : ''; + } + function readDecimalDigits(text, cursor) { + var _a; + const m = text.substr(cursor).match(/^[0-9]+/); + return (_a = (m && m[0])) !== null && _a !== void 0 ? _a : ''; + } + function readSignedInteger(text, cursor) { + const ds = readDecimalDigits(text, cursor); + if (ds !== '') { + return ds; + } + const sign = text.substr(cursor, 1); + cursor += 1; + if (sign !== '-' && sign !== '+') { + return ''; + } + const sds = readDecimalDigits(text, cursor); + if (sds === '') { + return ''; + } + return sign + sds; + } + function readExponentPart(text, cursor) { + const e = text.substr(cursor, 1); + cursor += 1; + if (e.toLowerCase() !== 'e') { + return ''; + } + const si = readSignedInteger(text, cursor); + if (si === '') { + return ''; + } + return e + si; + } + function readDecimalIntegerLiteral(text, cursor) { + const ch = text.substr(cursor, 1); + if (ch === '0') { + return ch; + } + const nzd = readNonZeroDigit(text, cursor); + cursor += nzd.length; + if (nzd === '') { + return ''; + } + return nzd + readDecimalDigits(text, cursor); + } + function readDecimalLiteral1(text, cursor) { + const dil = readDecimalIntegerLiteral(text, cursor); + cursor += dil.length; + if (dil === '') { + return ''; + } + const dot = text.substr(cursor, 1); + cursor += dot.length; + if (dot !== '.') { + return ''; + } + const dds = readDecimalDigits(text, cursor); + cursor += dds.length; + return dil + dot + dds + readExponentPart(text, cursor); + } + function readDecimalLiteral2(text, cursor) { + const dot = text.substr(cursor, 1); + cursor += dot.length; + if (dot !== '.') { + return ''; + } + const dds = readDecimalDigits(text, cursor); + cursor += dds.length; + if (dds === '') { + return ''; + } + return dot + dds + readExponentPart(text, cursor); + } + function readDecimalLiteral3(text, cursor) { + const dil = readDecimalIntegerLiteral(text, cursor); + cursor += dil.length; + if (dil === '') { + return ''; + } + return dil + readExponentPart(text, cursor); + } + const readDecimalLiteral = combineReader([ + readDecimalLiteral1, + readDecimalLiteral2, + readDecimalLiteral3, + ]); + function parseBinaryDigits(text, cursor) { + var _a; + const m = text.substr(cursor).match(/^[01]+/); + return (_a = (m && m[0])) !== null && _a !== void 0 ? _a : ''; + } + function readBinaryIntegerLiteral(text, cursor) { + const prefix = text.substr(cursor, 2); + cursor += prefix.length; + if (prefix.toLowerCase() !== '0b') { + return ''; + } + const bds = parseBinaryDigits(text, cursor); + if (bds === '') { + return ''; + } + return prefix + bds; + } + function readOctalDigits(text, cursor) { + var _a; + const m = text.substr(cursor).match(/^[0-7]+/); + return (_a = (m && m[0])) !== null && _a !== void 0 ? _a : ''; + } + function readOctalIntegerLiteral(text, cursor) { + const prefix = text.substr(cursor, 2); + cursor += prefix.length; + if (prefix.toLowerCase() !== '0o') { + return ''; + } + const ods = readOctalDigits(text, cursor); + if (ods === '') { + return ''; + } + return prefix + ods; + } + function readHexDigits(text, cursor) { + var _a; + const m = text.substr(cursor).match(/^[0-9a-f]+/i); + return (_a = (m && m[0])) !== null && _a !== void 0 ? _a : ''; + } + function readHexIntegerLiteral(text, cursor) { + const prefix = text.substr(cursor, 2); + cursor += prefix.length; + if (prefix.toLowerCase() !== '0x') { + return ''; + } + const hds = readHexDigits(text, cursor); + if (hds === '') { + return ''; + } + return prefix + hds; + } + const readNonDecimalIntegerLiteral = combineReader([ + readBinaryIntegerLiteral, + readOctalIntegerLiteral, + readHexIntegerLiteral, + ]); + const readNumericLiteral = combineReader([ + readNonDecimalIntegerLiteral, + readDecimalLiteral, + ]); + + function parseLiteral(text, cursor) { + const num = readNumericLiteral(text, cursor); + cursor += num.length; + if (num === '') { + return null; + } + return { + evaluable: new NumberLiteralNode(num), + cursor: cursor, + }; + } + function parseParenthesizedExpression(text, cursor) { + const op = text.substr(cursor, 1); + cursor += op.length; + if (op !== '(') { + return null; + } + const expr = parseExpression(text, cursor); + if (!expr) { + return null; + } + cursor = expr.cursor; + cursor += readWhitespace(text, cursor).length; + const cl = text.substr(cursor, 1); + cursor += cl.length; + if (cl !== ')') { + return null; + } + return { + evaluable: expr.evaluable, + cursor: cursor, + }; + } + function parsePrimaryExpression(text, cursor) { + var _a; + return ((_a = parseLiteral(text, cursor)) !== null && _a !== void 0 ? _a : parseParenthesizedExpression(text, cursor)); + } + function parseUnaryExpression(text, cursor) { + const expr = parsePrimaryExpression(text, cursor); + if (expr) { + return expr; + } + const op = text.substr(cursor, 1); + cursor += op.length; + if (op !== '+' && op !== '-' && op !== '~') { + return null; + } + const num = parseUnaryExpression(text, cursor); + if (!num) { + return null; + } + cursor = num.cursor; + return { + cursor: cursor, + evaluable: new UnaryOperationNode(op, num.evaluable), + }; + } + function readBinaryOperator(ops, text, cursor) { + cursor += readWhitespace(text, cursor).length; + const op = ops.filter((op) => text.startsWith(op, cursor))[0]; + if (!op) { + return null; + } + cursor += op.length; + cursor += readWhitespace(text, cursor).length; + return { + cursor: cursor, + operator: op, + }; + } + function createBinaryOperationExpressionParser(exprParser, ops) { + return (text, cursor) => { + const firstExpr = exprParser(text, cursor); + if (!firstExpr) { + return null; + } + cursor = firstExpr.cursor; + let expr = firstExpr.evaluable; + for (;;) { + const op = readBinaryOperator(ops, text, cursor); + if (!op) { + break; + } + cursor = op.cursor; + const nextExpr = exprParser(text, cursor); + if (!nextExpr) { + return null; + } + cursor = nextExpr.cursor; + expr = new BinaryOperationNode(op.operator, expr, nextExpr.evaluable); + } + return expr + ? { + cursor: cursor, + evaluable: expr, + } + : null; + }; + } + const parseBinaryOperationExpression = [ + ['**'], + ['*', '/', '%'], + ['+', '-'], + ['<<', '>>>', '>>'], + ['&'], + ['^'], + ['|'], + ].reduce((parser, ops) => { + return createBinaryOperationExpressionParser(parser, ops); + }, parseUnaryExpression); + function parseExpression(text, cursor) { + cursor += readWhitespace(text, cursor).length; + return parseBinaryOperationExpression(text, cursor); + } + function parseEcmaNumberExpression(text) { + const expr = parseExpression(text, 0); + if (!expr) { + return null; + } + const cursor = expr.cursor + readWhitespace(text, expr.cursor).length; + if (cursor !== text.length) { + return null; + } + return expr.evaluable; + } + + function parseNumber(text) { + var _a; + const r = parseEcmaNumberExpression(text); + return (_a = r === null || r === void 0 ? void 0 : r.evaluate()) !== null && _a !== void 0 ? _a : null; + } + function numberFromUnknown(value) { + if (typeof value === 'number') { + return value; + } + if (typeof value === 'string') { + const pv = parseNumber(value); + if (!isEmpty(pv)) { + return pv; + } + } + return 0; + } + function numberToString(value) { + return String(value); + } + function createNumberFormatter(digits) { + return (value) => { + return value.toFixed(Math.max(Math.min(digits, 20), 0)); + }; + } + + const innerFormatter = createNumberFormatter(0); + function formatPercentage(value) { + return innerFormatter(value) + '%'; + } + + function stringFromUnknown(value) { + return String(value); + } + function formatString(value) { + return value; + } + + function fillBuffer(buffer, bufferSize) { + while (buffer.length < bufferSize) { + buffer.push(undefined); + } + } + function initializeBuffer(bufferSize) { + const buffer = []; + fillBuffer(buffer, bufferSize); + return createValue(buffer); + } + function createTrimmedBuffer(buffer) { + const index = buffer.indexOf(undefined); + return forceCast(index < 0 ? buffer : buffer.slice(0, index)); + } + function createPushedBuffer(buffer, newValue) { + const newBuffer = [...createTrimmedBuffer(buffer), newValue]; + if (newBuffer.length > buffer.length) { + newBuffer.splice(0, newBuffer.length - buffer.length); + } + else { + fillBuffer(newBuffer, buffer.length); + } + return newBuffer; + } + + function connectValues({ primary, secondary, forward, backward, }) { + let changing = false; + function preventFeedback(callback) { + if (changing) { + return; + } + changing = true; + callback(); + changing = false; + } + primary.emitter.on('change', (ev) => { + preventFeedback(() => { + secondary.setRawValue(forward(primary, secondary), ev.options); + }); + }); + secondary.emitter.on('change', (ev) => { + preventFeedback(() => { + primary.setRawValue(backward(primary, secondary), ev.options); + }); + preventFeedback(() => { + secondary.setRawValue(forward(primary, secondary), ev.options); + }); + }); + preventFeedback(() => { + secondary.setRawValue(forward(primary, secondary), { + forceEmit: false, + last: true, + }); + }); + } + + function getStepForKey(baseStep, keys) { + const step = baseStep * (keys.altKey ? 0.1 : 1) * (keys.shiftKey ? 10 : 1); + if (keys.upKey) { + return +step; + } + else if (keys.downKey) { + return -step; + } + return 0; + } + function getVerticalStepKeys(ev) { + return { + altKey: ev.altKey, + downKey: ev.key === 'ArrowDown', + shiftKey: ev.shiftKey, + upKey: ev.key === 'ArrowUp', + }; + } + function getHorizontalStepKeys(ev) { + return { + altKey: ev.altKey, + downKey: ev.key === 'ArrowLeft', + shiftKey: ev.shiftKey, + upKey: ev.key === 'ArrowRight', + }; + } + function isVerticalArrowKey(key) { + return key === 'ArrowUp' || key === 'ArrowDown'; + } + function isArrowKey(key) { + return isVerticalArrowKey(key) || key === 'ArrowLeft' || key === 'ArrowRight'; + } + + function computeOffset$1(ev, elem) { + var _a, _b; + const win = elem.ownerDocument.defaultView; + const rect = elem.getBoundingClientRect(); + return { + x: ev.pageX - (((_a = (win && win.scrollX)) !== null && _a !== void 0 ? _a : 0) + rect.left), + y: ev.pageY - (((_b = (win && win.scrollY)) !== null && _b !== void 0 ? _b : 0) + rect.top), + }; + } + class PointerHandler { + constructor(element) { + this.lastTouch_ = null; + this.onDocumentMouseMove_ = this.onDocumentMouseMove_.bind(this); + this.onDocumentMouseUp_ = this.onDocumentMouseUp_.bind(this); + this.onMouseDown_ = this.onMouseDown_.bind(this); + this.onTouchEnd_ = this.onTouchEnd_.bind(this); + this.onTouchMove_ = this.onTouchMove_.bind(this); + this.onTouchStart_ = this.onTouchStart_.bind(this); + this.elem_ = element; + this.emitter = new Emitter(); + element.addEventListener('touchstart', this.onTouchStart_, { + passive: false, + }); + element.addEventListener('touchmove', this.onTouchMove_, { + passive: true, + }); + element.addEventListener('touchend', this.onTouchEnd_); + element.addEventListener('mousedown', this.onMouseDown_); + } + computePosition_(offset) { + const rect = this.elem_.getBoundingClientRect(); + return { + bounds: { + width: rect.width, + height: rect.height, + }, + point: offset + ? { + x: offset.x, + y: offset.y, + } + : null, + }; + } + onMouseDown_(ev) { + var _a; + ev.preventDefault(); + (_a = ev.currentTarget) === null || _a === void 0 ? void 0 : _a.focus(); + const doc = this.elem_.ownerDocument; + doc.addEventListener('mousemove', this.onDocumentMouseMove_); + doc.addEventListener('mouseup', this.onDocumentMouseUp_); + this.emitter.emit('down', { + altKey: ev.altKey, + data: this.computePosition_(computeOffset$1(ev, this.elem_)), + sender: this, + shiftKey: ev.shiftKey, + }); + } + onDocumentMouseMove_(ev) { + this.emitter.emit('move', { + altKey: ev.altKey, + data: this.computePosition_(computeOffset$1(ev, this.elem_)), + sender: this, + shiftKey: ev.shiftKey, + }); + } + onDocumentMouseUp_(ev) { + const doc = this.elem_.ownerDocument; + doc.removeEventListener('mousemove', this.onDocumentMouseMove_); + doc.removeEventListener('mouseup', this.onDocumentMouseUp_); + this.emitter.emit('up', { + altKey: ev.altKey, + data: this.computePosition_(computeOffset$1(ev, this.elem_)), + sender: this, + shiftKey: ev.shiftKey, + }); + } + onTouchStart_(ev) { + ev.preventDefault(); + const touch = ev.targetTouches.item(0); + const rect = this.elem_.getBoundingClientRect(); + this.emitter.emit('down', { + altKey: ev.altKey, + data: this.computePosition_(touch + ? { + x: touch.clientX - rect.left, + y: touch.clientY - rect.top, + } + : undefined), + sender: this, + shiftKey: ev.shiftKey, + }); + this.lastTouch_ = touch; + } + onTouchMove_(ev) { + const touch = ev.targetTouches.item(0); + const rect = this.elem_.getBoundingClientRect(); + this.emitter.emit('move', { + altKey: ev.altKey, + data: this.computePosition_(touch + ? { + x: touch.clientX - rect.left, + y: touch.clientY - rect.top, + } + : undefined), + sender: this, + shiftKey: ev.shiftKey, + }); + this.lastTouch_ = touch; + } + onTouchEnd_(ev) { + var _a; + const touch = (_a = ev.targetTouches.item(0)) !== null && _a !== void 0 ? _a : this.lastTouch_; + const rect = this.elem_.getBoundingClientRect(); + this.emitter.emit('up', { + altKey: ev.altKey, + data: this.computePosition_(touch + ? { + x: touch.clientX - rect.left, + y: touch.clientY - rect.top, + } + : undefined), + sender: this, + shiftKey: ev.shiftKey, + }); + } + } + + function mapRange(value, start1, end1, start2, end2) { + const p = (value - start1) / (end1 - start1); + return start2 + p * (end2 - start2); + } + function getDecimalDigits(value) { + const text = String(value.toFixed(10)); + const frac = text.split('.')[1]; + return frac.replace(/0+$/, '').length; + } + function constrainRange(value, min, max) { + return Math.min(Math.max(value, min), max); + } + function loopRange(value, max) { + return ((value % max) + max) % max; + } + + const className$g = ClassName('txt'); + class NumberTextView { + constructor(doc, config) { + this.onChange_ = this.onChange_.bind(this); + this.props_ = config.props; + this.props_.emitter.on('change', this.onChange_); + this.element = doc.createElement('div'); + this.element.classList.add(className$g(), className$g(undefined, 'num')); + if (config.arrayPosition) { + this.element.classList.add(className$g(undefined, config.arrayPosition)); + } + config.viewProps.bindClassModifiers(this.element); + const inputElem = doc.createElement('input'); + inputElem.classList.add(className$g('i')); + inputElem.type = 'text'; + config.viewProps.bindDisabled(inputElem); + this.element.appendChild(inputElem); + this.inputElement = inputElem; + this.onDraggingChange_ = this.onDraggingChange_.bind(this); + this.dragging_ = config.dragging; + this.dragging_.emitter.on('change', this.onDraggingChange_); + this.element.classList.add(className$g()); + this.inputElement.classList.add(className$g('i')); + const knobElem = doc.createElement('div'); + knobElem.classList.add(className$g('k')); + this.element.appendChild(knobElem); + this.knobElement = knobElem; + const guideElem = doc.createElementNS(SVG_NS, 'svg'); + guideElem.classList.add(className$g('g')); + this.knobElement.appendChild(guideElem); + const bodyElem = doc.createElementNS(SVG_NS, 'path'); + bodyElem.classList.add(className$g('gb')); + guideElem.appendChild(bodyElem); + this.guideBodyElem_ = bodyElem; + const headElem = doc.createElementNS(SVG_NS, 'path'); + headElem.classList.add(className$g('gh')); + guideElem.appendChild(headElem); + this.guideHeadElem_ = headElem; + const tooltipElem = doc.createElement('div'); + tooltipElem.classList.add(ClassName('tt')()); + this.knobElement.appendChild(tooltipElem); + this.tooltipElem_ = tooltipElem; + config.value.emitter.on('change', this.onChange_); + this.value = config.value; + this.refresh(); + } + onDraggingChange_(ev) { + if (ev.rawValue === null) { + this.element.classList.remove(className$g(undefined, 'drg')); + return; + } + this.element.classList.add(className$g(undefined, 'drg')); + const x = ev.rawValue / this.props_.get('draggingScale'); + const aox = x + (x > 0 ? -1 : x < 0 ? +1 : 0); + const adx = constrainRange(-aox, -4, +4); + this.guideHeadElem_.setAttributeNS(null, 'd', [`M ${aox + adx},0 L${aox},4 L${aox + adx},8`, `M ${x},-1 L${x},9`].join(' ')); + this.guideBodyElem_.setAttributeNS(null, 'd', `M 0,4 L${x},4`); + const formatter = this.props_.get('formatter'); + this.tooltipElem_.textContent = formatter(this.value.rawValue); + this.tooltipElem_.style.left = `${x}px`; + } + refresh() { + const formatter = this.props_.get('formatter'); + this.inputElement.value = formatter(this.value.rawValue); + } + onChange_() { + this.refresh(); + } + } + + class NumberTextController { + constructor(doc, config) { + var _a; + this.originRawValue_ = 0; + this.onInputChange_ = this.onInputChange_.bind(this); + this.onInputKeyDown_ = this.onInputKeyDown_.bind(this); + this.onInputKeyUp_ = this.onInputKeyUp_.bind(this); + this.onPointerDown_ = this.onPointerDown_.bind(this); + this.onPointerMove_ = this.onPointerMove_.bind(this); + this.onPointerUp_ = this.onPointerUp_.bind(this); + this.baseStep_ = config.baseStep; + this.parser_ = config.parser; + this.props = config.props; + this.sliderProps_ = (_a = config.sliderProps) !== null && _a !== void 0 ? _a : null; + this.value = config.value; + this.viewProps = config.viewProps; + this.dragging_ = createValue(null); + this.view = new NumberTextView(doc, { + arrayPosition: config.arrayPosition, + dragging: this.dragging_, + props: this.props, + value: this.value, + viewProps: this.viewProps, + }); + this.view.inputElement.addEventListener('change', this.onInputChange_); + this.view.inputElement.addEventListener('keydown', this.onInputKeyDown_); + this.view.inputElement.addEventListener('keyup', this.onInputKeyUp_); + const ph = new PointerHandler(this.view.knobElement); + ph.emitter.on('down', this.onPointerDown_); + ph.emitter.on('move', this.onPointerMove_); + ph.emitter.on('up', this.onPointerUp_); + } + constrainValue_(value) { + var _a, _b; + const min = (_a = this.sliderProps_) === null || _a === void 0 ? void 0 : _a.get('minValue'); + const max = (_b = this.sliderProps_) === null || _b === void 0 ? void 0 : _b.get('maxValue'); + let v = value; + if (min !== undefined) { + v = Math.max(v, min); + } + if (max !== undefined) { + v = Math.min(v, max); + } + return v; + } + onInputChange_(e) { + const inputElem = forceCast(e.currentTarget); + const value = inputElem.value; + const parsedValue = this.parser_(value); + if (!isEmpty(parsedValue)) { + this.value.rawValue = this.constrainValue_(parsedValue); + } + this.view.refresh(); + } + onInputKeyDown_(ev) { + const step = getStepForKey(this.baseStep_, getVerticalStepKeys(ev)); + if (step === 0) { + return; + } + this.value.setRawValue(this.constrainValue_(this.value.rawValue + step), { + forceEmit: false, + last: false, + }); + } + onInputKeyUp_(ev) { + const step = getStepForKey(this.baseStep_, getVerticalStepKeys(ev)); + if (step === 0) { + return; + } + this.value.setRawValue(this.value.rawValue, { + forceEmit: true, + last: true, + }); + } + onPointerDown_() { + this.originRawValue_ = this.value.rawValue; + this.dragging_.rawValue = 0; + } + computeDraggingValue_(data) { + if (!data.point) { + return null; + } + const dx = data.point.x - data.bounds.width / 2; + return this.constrainValue_(this.originRawValue_ + dx * this.props.get('draggingScale')); + } + onPointerMove_(ev) { + const v = this.computeDraggingValue_(ev.data); + if (v === null) { + return; + } + this.value.setRawValue(v, { + forceEmit: false, + last: false, + }); + this.dragging_.rawValue = this.value.rawValue - this.originRawValue_; + } + onPointerUp_(ev) { + const v = this.computeDraggingValue_(ev.data); + if (v === null) { + return; + } + this.value.setRawValue(v, { + forceEmit: true, + last: true, + }); + this.dragging_.rawValue = null; + } + } + + const className$f = ClassName('sld'); + class SliderView { + constructor(doc, config) { + this.onChange_ = this.onChange_.bind(this); + this.props_ = config.props; + this.props_.emitter.on('change', this.onChange_); + this.element = doc.createElement('div'); + this.element.classList.add(className$f()); + config.viewProps.bindClassModifiers(this.element); + const trackElem = doc.createElement('div'); + trackElem.classList.add(className$f('t')); + config.viewProps.bindTabIndex(trackElem); + this.element.appendChild(trackElem); + this.trackElement = trackElem; + const knobElem = doc.createElement('div'); + knobElem.classList.add(className$f('k')); + this.trackElement.appendChild(knobElem); + this.knobElement = knobElem; + config.value.emitter.on('change', this.onChange_); + this.value = config.value; + this.update_(); + } + update_() { + const p = constrainRange(mapRange(this.value.rawValue, this.props_.get('minValue'), this.props_.get('maxValue'), 0, 100), 0, 100); + this.knobElement.style.width = `${p}%`; + } + onChange_() { + this.update_(); + } + } + + class SliderController { + constructor(doc, config) { + this.onKeyDown_ = this.onKeyDown_.bind(this); + this.onKeyUp_ = this.onKeyUp_.bind(this); + this.onPointerDownOrMove_ = this.onPointerDownOrMove_.bind(this); + this.onPointerUp_ = this.onPointerUp_.bind(this); + this.baseStep_ = config.baseStep; + this.value = config.value; + this.viewProps = config.viewProps; + this.props = config.props; + this.view = new SliderView(doc, { + props: this.props, + value: this.value, + viewProps: this.viewProps, + }); + this.ptHandler_ = new PointerHandler(this.view.trackElement); + this.ptHandler_.emitter.on('down', this.onPointerDownOrMove_); + this.ptHandler_.emitter.on('move', this.onPointerDownOrMove_); + this.ptHandler_.emitter.on('up', this.onPointerUp_); + this.view.trackElement.addEventListener('keydown', this.onKeyDown_); + this.view.trackElement.addEventListener('keyup', this.onKeyUp_); + } + handlePointerEvent_(d, opts) { + if (!d.point) { + return; + } + this.value.setRawValue(mapRange(constrainRange(d.point.x, 0, d.bounds.width), 0, d.bounds.width, this.props.get('minValue'), this.props.get('maxValue')), opts); + } + onPointerDownOrMove_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: false, + last: false, + }); + } + onPointerUp_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: true, + last: true, + }); + } + onKeyDown_(ev) { + const step = getStepForKey(this.baseStep_, getHorizontalStepKeys(ev)); + if (step === 0) { + return; + } + this.value.setRawValue(this.value.rawValue + step, { + forceEmit: false, + last: false, + }); + } + onKeyUp_(ev) { + const step = getStepForKey(this.baseStep_, getHorizontalStepKeys(ev)); + if (step === 0) { + return; + } + this.value.setRawValue(this.value.rawValue, { + forceEmit: true, + last: true, + }); + } + } + + const className$e = ClassName('sldtxt'); + class SliderTextView { + constructor(doc, config) { + this.element = doc.createElement('div'); + this.element.classList.add(className$e()); + const sliderElem = doc.createElement('div'); + sliderElem.classList.add(className$e('s')); + this.sliderView_ = config.sliderView; + sliderElem.appendChild(this.sliderView_.element); + this.element.appendChild(sliderElem); + const textElem = doc.createElement('div'); + textElem.classList.add(className$e('t')); + this.textView_ = config.textView; + textElem.appendChild(this.textView_.element); + this.element.appendChild(textElem); + } + } + + class SliderTextController { + constructor(doc, config) { + this.value = config.value; + this.viewProps = config.viewProps; + this.sliderC_ = new SliderController(doc, { + baseStep: config.baseStep, + props: config.sliderProps, + value: config.value, + viewProps: this.viewProps, + }); + this.textC_ = new NumberTextController(doc, { + baseStep: config.baseStep, + parser: config.parser, + props: config.textProps, + sliderProps: config.sliderProps, + value: config.value, + viewProps: config.viewProps, + }); + this.view = new SliderTextView(doc, { + sliderView: this.sliderC_.view, + textView: this.textC_.view, + }); + } + get sliderController() { + return this.sliderC_; + } + get textController() { + return this.textC_; + } + } + + function writePrimitive(target, value) { + target.write(value); + } + + function parseListOptions(value) { + const p = ParamsParsers; + if (Array.isArray(value)) { + return p.required.array(p.required.object({ + text: p.required.string, + value: p.required.raw, + }))(value).value; + } + if (typeof value === 'object') { + return p.required.raw(value) + .value; + } + return undefined; + } + function parsePickerLayout(value) { + if (value === 'inline' || value === 'popup') { + return value; + } + return undefined; + } + function parsePointDimensionParams(value) { + const p = ParamsParsers; + return p.required.object({ + max: p.optional.number, + min: p.optional.number, + step: p.optional.number, + })(value).value; + } + function normalizeListOptions(options) { + if (Array.isArray(options)) { + return options; + } + const items = []; + Object.keys(options).forEach((text) => { + items.push({ text: text, value: options[text] }); + }); + return items; + } + function createListConstraint(options) { + return !isEmpty(options) + ? new ListConstraint(normalizeListOptions(forceCast(options))) + : null; + } + function findListItems(constraint) { + const c = constraint + ? findConstraint(constraint, ListConstraint) + : null; + if (!c) { + return null; + } + return c.options; + } + function findStep(constraint) { + const c = constraint ? findConstraint(constraint, StepConstraint) : null; + if (!c) { + return null; + } + return c.step; + } + function getSuitableDecimalDigits(constraint, rawValue) { + const sc = constraint && findConstraint(constraint, StepConstraint); + if (sc) { + return getDecimalDigits(sc.step); + } + return Math.max(getDecimalDigits(rawValue), 2); + } + function getBaseStep(constraint) { + const step = findStep(constraint); + return step !== null && step !== void 0 ? step : 1; + } + function getSuitableDraggingScale(constraint, rawValue) { + var _a; + const sc = constraint && findConstraint(constraint, StepConstraint); + const base = Math.abs((_a = sc === null || sc === void 0 ? void 0 : sc.step) !== null && _a !== void 0 ? _a : rawValue); + return base === 0 ? 0.1 : Math.pow(10, Math.floor(Math.log10(base)) - 1); + } + + const className$d = ClassName('ckb'); + class CheckboxView { + constructor(doc, config) { + this.onValueChange_ = this.onValueChange_.bind(this); + this.element = doc.createElement('div'); + this.element.classList.add(className$d()); + config.viewProps.bindClassModifiers(this.element); + const labelElem = doc.createElement('label'); + labelElem.classList.add(className$d('l')); + this.element.appendChild(labelElem); + const inputElem = doc.createElement('input'); + inputElem.classList.add(className$d('i')); + inputElem.type = 'checkbox'; + labelElem.appendChild(inputElem); + this.inputElement = inputElem; + config.viewProps.bindDisabled(this.inputElement); + const wrapperElem = doc.createElement('div'); + wrapperElem.classList.add(className$d('w')); + labelElem.appendChild(wrapperElem); + const markElem = createSvgIconElement(doc, 'check'); + wrapperElem.appendChild(markElem); + config.value.emitter.on('change', this.onValueChange_); + this.value = config.value; + this.update_(); + } + update_() { + this.inputElement.checked = this.value.rawValue; + } + onValueChange_() { + this.update_(); + } + } + + class CheckboxController { + constructor(doc, config) { + this.onInputChange_ = this.onInputChange_.bind(this); + this.value = config.value; + this.viewProps = config.viewProps; + this.view = new CheckboxView(doc, { + value: this.value, + viewProps: this.viewProps, + }); + this.view.inputElement.addEventListener('change', this.onInputChange_); + } + onInputChange_(e) { + const inputElem = forceCast(e.currentTarget); + this.value.rawValue = inputElem.checked; + } + } + + function createConstraint$6(params) { + const constraints = []; + const lc = createListConstraint(params.options); + if (lc) { + constraints.push(lc); + } + return new CompositeConstraint(constraints); + } + const BooleanInputPlugin = { + id: 'input-bool', + type: 'input', + accept: (value, params) => { + if (typeof value !== 'boolean') { + return null; + } + const p = ParamsParsers; + const result = parseParams(params, { + options: p.optional.custom(parseListOptions), + }); + return result + ? { + initialValue: value, + params: result, + } + : null; + }, + binding: { + reader: (_args) => boolFromUnknown, + constraint: (args) => createConstraint$6(args.params), + writer: (_args) => writePrimitive, + }, + controller: (args) => { + var _a; + const doc = args.document; + const value = args.value; + const c = args.constraint; + if (c && findConstraint(c, ListConstraint)) { + return new ListController(doc, { + props: ValueMap.fromObject({ + options: (_a = findListItems(c)) !== null && _a !== void 0 ? _a : [], + }), + value: value, + viewProps: args.viewProps, + }); + } + return new CheckboxController(doc, { + value: value, + viewProps: args.viewProps, + }); + }, + }; + + const className$c = ClassName('col'); + class ColorView { + constructor(doc, config) { + this.element = doc.createElement('div'); + this.element.classList.add(className$c()); + config.foldable.bindExpandedClass(this.element, className$c(undefined, 'expanded')); + bindValueMap(config.foldable, 'completed', valueToClassName(this.element, className$c(undefined, 'cpl'))); + const headElem = doc.createElement('div'); + headElem.classList.add(className$c('h')); + this.element.appendChild(headElem); + const swatchElem = doc.createElement('div'); + swatchElem.classList.add(className$c('s')); + headElem.appendChild(swatchElem); + this.swatchElement = swatchElem; + const textElem = doc.createElement('div'); + textElem.classList.add(className$c('t')); + headElem.appendChild(textElem); + this.textElement = textElem; + if (config.pickerLayout === 'inline') { + const pickerElem = doc.createElement('div'); + pickerElem.classList.add(className$c('p')); + this.element.appendChild(pickerElem); + this.pickerElement = pickerElem; + } + else { + this.pickerElement = null; + } + } + } + + function rgbToHslInt(r, g, b) { + const rp = constrainRange(r / 255, 0, 1); + const gp = constrainRange(g / 255, 0, 1); + const bp = constrainRange(b / 255, 0, 1); + const cmax = Math.max(rp, gp, bp); + const cmin = Math.min(rp, gp, bp); + const c = cmax - cmin; + let h = 0; + let s = 0; + const l = (cmin + cmax) / 2; + if (c !== 0) { + s = c / (1 - Math.abs(cmax + cmin - 1)); + if (rp === cmax) { + h = (gp - bp) / c; + } + else if (gp === cmax) { + h = 2 + (bp - rp) / c; + } + else { + h = 4 + (rp - gp) / c; + } + h = h / 6 + (h < 0 ? 1 : 0); + } + return [h * 360, s * 100, l * 100]; + } + function hslToRgbInt(h, s, l) { + const hp = ((h % 360) + 360) % 360; + const sp = constrainRange(s / 100, 0, 1); + const lp = constrainRange(l / 100, 0, 1); + const c = (1 - Math.abs(2 * lp - 1)) * sp; + const x = c * (1 - Math.abs(((hp / 60) % 2) - 1)); + const m = lp - c / 2; + let rp, gp, bp; + if (hp >= 0 && hp < 60) { + [rp, gp, bp] = [c, x, 0]; + } + else if (hp >= 60 && hp < 120) { + [rp, gp, bp] = [x, c, 0]; + } + else if (hp >= 120 && hp < 180) { + [rp, gp, bp] = [0, c, x]; + } + else if (hp >= 180 && hp < 240) { + [rp, gp, bp] = [0, x, c]; + } + else if (hp >= 240 && hp < 300) { + [rp, gp, bp] = [x, 0, c]; + } + else { + [rp, gp, bp] = [c, 0, x]; + } + return [(rp + m) * 255, (gp + m) * 255, (bp + m) * 255]; + } + function rgbToHsvInt(r, g, b) { + const rp = constrainRange(r / 255, 0, 1); + const gp = constrainRange(g / 255, 0, 1); + const bp = constrainRange(b / 255, 0, 1); + const cmax = Math.max(rp, gp, bp); + const cmin = Math.min(rp, gp, bp); + const d = cmax - cmin; + let h; + if (d === 0) { + h = 0; + } + else if (cmax === rp) { + h = 60 * (((((gp - bp) / d) % 6) + 6) % 6); + } + else if (cmax === gp) { + h = 60 * ((bp - rp) / d + 2); + } + else { + h = 60 * ((rp - gp) / d + 4); + } + const s = cmax === 0 ? 0 : d / cmax; + const v = cmax; + return [h, s * 100, v * 100]; + } + function hsvToRgbInt(h, s, v) { + const hp = loopRange(h, 360); + const sp = constrainRange(s / 100, 0, 1); + const vp = constrainRange(v / 100, 0, 1); + const c = vp * sp; + const x = c * (1 - Math.abs(((hp / 60) % 2) - 1)); + const m = vp - c; + let rp, gp, bp; + if (hp >= 0 && hp < 60) { + [rp, gp, bp] = [c, x, 0]; + } + else if (hp >= 60 && hp < 120) { + [rp, gp, bp] = [x, c, 0]; + } + else if (hp >= 120 && hp < 180) { + [rp, gp, bp] = [0, c, x]; + } + else if (hp >= 180 && hp < 240) { + [rp, gp, bp] = [0, x, c]; + } + else if (hp >= 240 && hp < 300) { + [rp, gp, bp] = [x, 0, c]; + } + else { + [rp, gp, bp] = [c, 0, x]; + } + return [(rp + m) * 255, (gp + m) * 255, (bp + m) * 255]; + } + function hslToHsvInt(h, s, l) { + const sd = l + (s * (100 - Math.abs(2 * l - 100))) / (2 * 100); + return [ + h, + sd !== 0 ? (s * (100 - Math.abs(2 * l - 100))) / sd : 0, + l + (s * (100 - Math.abs(2 * l - 100))) / (2 * 100), + ]; + } + function hsvToHslInt(h, s, v) { + const sd = 100 - Math.abs((v * (200 - s)) / 100 - 100); + return [h, sd !== 0 ? (s * v) / sd : 0, (v * (200 - s)) / (2 * 100)]; + } + function removeAlphaComponent(comps) { + return [comps[0], comps[1], comps[2]]; + } + function appendAlphaComponent(comps, alpha) { + return [comps[0], comps[1], comps[2], alpha]; + } + const MODE_CONVERTER_MAP = { + hsl: { + hsl: (h, s, l) => [h, s, l], + hsv: hslToHsvInt, + rgb: hslToRgbInt, + }, + hsv: { + hsl: hsvToHslInt, + hsv: (h, s, v) => [h, s, v], + rgb: hsvToRgbInt, + }, + rgb: { + hsl: rgbToHslInt, + hsv: rgbToHsvInt, + rgb: (r, g, b) => [r, g, b], + }, + }; + function getColorMaxComponents(mode, type) { + return [ + type === 'float' ? 1 : mode === 'rgb' ? 255 : 360, + type === 'float' ? 1 : mode === 'rgb' ? 255 : 100, + type === 'float' ? 1 : mode === 'rgb' ? 255 : 100, + ]; + } + function constrainColorComponents(components, mode, type) { + var _a; + const ms = getColorMaxComponents(mode, type); + return [ + mode === 'rgb' + ? constrainRange(components[0], 0, ms[0]) + : loopRange(components[0], ms[0]), + constrainRange(components[1], 0, ms[1]), + constrainRange(components[2], 0, ms[2]), + constrainRange((_a = components[3]) !== null && _a !== void 0 ? _a : 1, 0, 1), + ]; + } + function convertColorType(comps, mode, from, to) { + const fms = getColorMaxComponents(mode, from); + const tms = getColorMaxComponents(mode, to); + return comps.map((c, index) => (c / fms[index]) * tms[index]); + } + function convertColor(components, from, to) { + const intComps = convertColorType(components, from.mode, from.type, 'int'); + const result = MODE_CONVERTER_MAP[from.mode][to.mode](...intComps); + return convertColorType(result, to.mode, 'int', to.type); + } + + function isRgbColorComponent(obj, key) { + if (typeof obj !== 'object' || isEmpty(obj)) { + return false; + } + return key in obj && typeof obj[key] === 'number'; + } + class Color { + constructor(comps, mode, type = 'int') { + this.mode = mode; + this.type = type; + this.comps_ = constrainColorComponents(comps, mode, type); + } + static black(type = 'int') { + return new Color([0, 0, 0], 'rgb', type); + } + static fromObject(obj, type = 'int') { + const comps = 'a' in obj ? [obj.r, obj.g, obj.b, obj.a] : [obj.r, obj.g, obj.b]; + return new Color(comps, 'rgb', type); + } + static toRgbaObject(color, type = 'int') { + return color.toRgbaObject(type); + } + static isRgbColorObject(obj) { + return (isRgbColorComponent(obj, 'r') && + isRgbColorComponent(obj, 'g') && + isRgbColorComponent(obj, 'b')); + } + static isRgbaColorObject(obj) { + return this.isRgbColorObject(obj) && isRgbColorComponent(obj, 'a'); + } + static isColorObject(obj) { + return this.isRgbColorObject(obj); + } + static equals(v1, v2) { + if (v1.mode !== v2.mode) { + return false; + } + const comps1 = v1.comps_; + const comps2 = v2.comps_; + for (let i = 0; i < comps1.length; i++) { + if (comps1[i] !== comps2[i]) { + return false; + } + } + return true; + } + getComponents(opt_mode, type = 'int') { + return appendAlphaComponent(convertColor(removeAlphaComponent(this.comps_), { mode: this.mode, type: this.type }, { mode: opt_mode !== null && opt_mode !== void 0 ? opt_mode : this.mode, type }), this.comps_[3]); + } + toRgbaObject(type = 'int') { + const rgbComps = this.getComponents('rgb', type); + return { + r: rgbComps[0], + g: rgbComps[1], + b: rgbComps[2], + a: rgbComps[3], + }; + } + } + + const className$b = ClassName('colp'); + class ColorPickerView { + constructor(doc, config) { + this.alphaViews_ = null; + this.element = doc.createElement('div'); + this.element.classList.add(className$b()); + const hsvElem = doc.createElement('div'); + hsvElem.classList.add(className$b('hsv')); + const svElem = doc.createElement('div'); + svElem.classList.add(className$b('sv')); + this.svPaletteView_ = config.svPaletteView; + svElem.appendChild(this.svPaletteView_.element); + hsvElem.appendChild(svElem); + const hElem = doc.createElement('div'); + hElem.classList.add(className$b('h')); + this.hPaletteView_ = config.hPaletteView; + hElem.appendChild(this.hPaletteView_.element); + hsvElem.appendChild(hElem); + this.element.appendChild(hsvElem); + const rgbElem = doc.createElement('div'); + rgbElem.classList.add(className$b('rgb')); + this.textView_ = config.textView; + rgbElem.appendChild(this.textView_.element); + this.element.appendChild(rgbElem); + if (config.alphaViews) { + this.alphaViews_ = { + palette: config.alphaViews.palette, + text: config.alphaViews.text, + }; + const aElem = doc.createElement('div'); + aElem.classList.add(className$b('a')); + const apElem = doc.createElement('div'); + apElem.classList.add(className$b('ap')); + apElem.appendChild(this.alphaViews_.palette.element); + aElem.appendChild(apElem); + const atElem = doc.createElement('div'); + atElem.classList.add(className$b('at')); + atElem.appendChild(this.alphaViews_.text.element); + aElem.appendChild(atElem); + this.element.appendChild(aElem); + } + } + get allFocusableElements() { + const elems = [ + this.svPaletteView_.element, + this.hPaletteView_.element, + this.textView_.modeSelectElement, + ...this.textView_.textViews.map((v) => v.inputElement), + ]; + if (this.alphaViews_) { + elems.push(this.alphaViews_.palette.element, this.alphaViews_.text.inputElement); + } + return elems; + } + } + + function parseColorType(value) { + return value === 'int' ? 'int' : value === 'float' ? 'float' : undefined; + } + function parseColorInputParams(params) { + const p = ParamsParsers; + return parseParams(params, { + alpha: p.optional.boolean, + color: p.optional.object({ + alpha: p.optional.boolean, + type: p.optional.custom(parseColorType), + }), + expanded: p.optional.boolean, + picker: p.optional.custom(parsePickerLayout), + }); + } + function getBaseStepForColor(forAlpha) { + return forAlpha ? 0.1 : 1; + } + function extractColorType(params) { + var _a; + return (_a = params.color) === null || _a === void 0 ? void 0 : _a.type; + } + + function equalsStringColorFormat(f1, f2) { + return (f1.alpha === f2.alpha && + f1.mode === f2.mode && + f1.notation === f2.notation && + f1.type === f2.type); + } + function parseCssNumberOrPercentage(text, maxValue) { + const m = text.match(/^(.+)%$/); + if (!m) { + return Math.min(parseFloat(text), maxValue); + } + return Math.min(parseFloat(m[1]) * 0.01 * maxValue, maxValue); + } + const ANGLE_TO_DEG_MAP = { + deg: (angle) => angle, + grad: (angle) => (angle * 360) / 400, + rad: (angle) => (angle * 360) / (2 * Math.PI), + turn: (angle) => angle * 360, + }; + function parseCssNumberOrAngle(text) { + const m = text.match(/^([0-9.]+?)(deg|grad|rad|turn)$/); + if (!m) { + return parseFloat(text); + } + const angle = parseFloat(m[1]); + const unit = m[2]; + return ANGLE_TO_DEG_MAP[unit](angle); + } + function parseFunctionalRgbColorComponents(text) { + const m = text.match(/^rgb\(\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/); + if (!m) { + return null; + } + const comps = [ + parseCssNumberOrPercentage(m[1], 255), + parseCssNumberOrPercentage(m[2], 255), + parseCssNumberOrPercentage(m[3], 255), + ]; + if (isNaN(comps[0]) || isNaN(comps[1]) || isNaN(comps[2])) { + return null; + } + return comps; + } + function createFunctionalRgbColorParser(type) { + return (text) => { + const comps = parseFunctionalRgbColorComponents(text); + return comps ? new Color(comps, 'rgb', type) : null; + }; + } + function parseFunctionalRgbaColorComponents(text) { + const m = text.match(/^rgba\(\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/); + if (!m) { + return null; + } + const comps = [ + parseCssNumberOrPercentage(m[1], 255), + parseCssNumberOrPercentage(m[2], 255), + parseCssNumberOrPercentage(m[3], 255), + parseCssNumberOrPercentage(m[4], 1), + ]; + if (isNaN(comps[0]) || + isNaN(comps[1]) || + isNaN(comps[2]) || + isNaN(comps[3])) { + return null; + } + return comps; + } + function createFunctionalRgbaColorParser(type) { + return (text) => { + const comps = parseFunctionalRgbaColorComponents(text); + return comps ? new Color(comps, 'rgb', type) : null; + }; + } + function parseHslColorComponents(text) { + const m = text.match(/^hsl\(\s*([0-9A-Fa-f.]+(?:deg|grad|rad|turn)?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/); + if (!m) { + return null; + } + const comps = [ + parseCssNumberOrAngle(m[1]), + parseCssNumberOrPercentage(m[2], 100), + parseCssNumberOrPercentage(m[3], 100), + ]; + if (isNaN(comps[0]) || isNaN(comps[1]) || isNaN(comps[2])) { + return null; + } + return comps; + } + function createHslColorParser(type) { + return (text) => { + const comps = parseHslColorComponents(text); + return comps ? new Color(comps, 'hsl', type) : null; + }; + } + function parseHslaColorComponents(text) { + const m = text.match(/^hsla\(\s*([0-9A-Fa-f.]+(?:deg|grad|rad|turn)?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/); + if (!m) { + return null; + } + const comps = [ + parseCssNumberOrAngle(m[1]), + parseCssNumberOrPercentage(m[2], 100), + parseCssNumberOrPercentage(m[3], 100), + parseCssNumberOrPercentage(m[4], 1), + ]; + if (isNaN(comps[0]) || + isNaN(comps[1]) || + isNaN(comps[2]) || + isNaN(comps[3])) { + return null; + } + return comps; + } + function createHslaColorParser(type) { + return (text) => { + const comps = parseHslaColorComponents(text); + return comps ? new Color(comps, 'hsl', type) : null; + }; + } + function parseHexRgbColorComponents(text) { + const mRgb = text.match(/^#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])$/); + if (mRgb) { + return [ + parseInt(mRgb[1] + mRgb[1], 16), + parseInt(mRgb[2] + mRgb[2], 16), + parseInt(mRgb[3] + mRgb[3], 16), + ]; + } + const mRrggbb = text.match(/^(?:#|0x)([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/); + if (mRrggbb) { + return [ + parseInt(mRrggbb[1], 16), + parseInt(mRrggbb[2], 16), + parseInt(mRrggbb[3], 16), + ]; + } + return null; + } + function parseHexRgbColor(text) { + const comps = parseHexRgbColorComponents(text); + return comps ? new Color(comps, 'rgb', 'int') : null; + } + function parseHexRgbaColorComponents(text) { + const mRgb = text.match(/^#?([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])$/); + if (mRgb) { + return [ + parseInt(mRgb[1] + mRgb[1], 16), + parseInt(mRgb[2] + mRgb[2], 16), + parseInt(mRgb[3] + mRgb[3], 16), + mapRange(parseInt(mRgb[4] + mRgb[4], 16), 0, 255, 0, 1), + ]; + } + const mRrggbb = text.match(/^(?:#|0x)?([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/); + if (mRrggbb) { + return [ + parseInt(mRrggbb[1], 16), + parseInt(mRrggbb[2], 16), + parseInt(mRrggbb[3], 16), + mapRange(parseInt(mRrggbb[4], 16), 0, 255, 0, 1), + ]; + } + return null; + } + function parseHexRgbaColor(text) { + const comps = parseHexRgbaColorComponents(text); + return comps ? new Color(comps, 'rgb', 'int') : null; + } + function parseObjectRgbColorComponents(text) { + const m = text.match(/^\{\s*r\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*g\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*b\s*:\s*([0-9A-Fa-f.]+%?)\s*\}$/); + if (!m) { + return null; + } + const comps = [ + parseFloat(m[1]), + parseFloat(m[2]), + parseFloat(m[3]), + ]; + if (isNaN(comps[0]) || isNaN(comps[1]) || isNaN(comps[2])) { + return null; + } + return comps; + } + function createObjectRgbColorParser(type) { + return (text) => { + const comps = parseObjectRgbColorComponents(text); + return comps ? new Color(comps, 'rgb', type) : null; + }; + } + function parseObjectRgbaColorComponents(text) { + const m = text.match(/^\{\s*r\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*g\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*b\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*a\s*:\s*([0-9A-Fa-f.]+%?)\s*\}$/); + if (!m) { + return null; + } + const comps = [ + parseFloat(m[1]), + parseFloat(m[2]), + parseFloat(m[3]), + parseFloat(m[4]), + ]; + if (isNaN(comps[0]) || + isNaN(comps[1]) || + isNaN(comps[2]) || + isNaN(comps[3])) { + return null; + } + return comps; + } + function createObjectRgbaColorParser(type) { + return (text) => { + const comps = parseObjectRgbaColorComponents(text); + return comps ? new Color(comps, 'rgb', type) : null; + }; + } + const PARSER_AND_RESULT = [ + { + parser: parseHexRgbColorComponents, + result: { + alpha: false, + mode: 'rgb', + notation: 'hex', + }, + }, + { + parser: parseHexRgbaColorComponents, + result: { + alpha: true, + mode: 'rgb', + notation: 'hex', + }, + }, + { + parser: parseFunctionalRgbColorComponents, + result: { + alpha: false, + mode: 'rgb', + notation: 'func', + }, + }, + { + parser: parseFunctionalRgbaColorComponents, + result: { + alpha: true, + mode: 'rgb', + notation: 'func', + }, + }, + { + parser: parseHslColorComponents, + result: { + alpha: false, + mode: 'hsl', + notation: 'func', + }, + }, + { + parser: parseHslaColorComponents, + result: { + alpha: true, + mode: 'hsl', + notation: 'func', + }, + }, + { + parser: parseObjectRgbColorComponents, + result: { + alpha: false, + mode: 'rgb', + notation: 'object', + }, + }, + { + parser: parseObjectRgbaColorComponents, + result: { + alpha: true, + mode: 'rgb', + notation: 'object', + }, + }, + ]; + function detectStringColor(text) { + return PARSER_AND_RESULT.reduce((prev, { parser, result: detection }) => { + if (prev) { + return prev; + } + return parser(text) ? detection : null; + }, null); + } + function detectStringColorFormat(text, type = 'int') { + const r = detectStringColor(text); + if (!r) { + return null; + } + if (r.notation === 'hex' && type !== 'float') { + return Object.assign(Object.assign({}, r), { type: 'int' }); + } + if (r.notation === 'func') { + return Object.assign(Object.assign({}, r), { type: type }); + } + return null; + } + const TYPE_TO_PARSERS = { + int: [ + parseHexRgbColor, + parseHexRgbaColor, + createFunctionalRgbColorParser('int'), + createFunctionalRgbaColorParser('int'), + createHslColorParser('int'), + createHslaColorParser('int'), + createObjectRgbColorParser('int'), + createObjectRgbaColorParser('int'), + ], + float: [ + createFunctionalRgbColorParser('float'), + createFunctionalRgbaColorParser('float'), + createHslColorParser('float'), + createHslaColorParser('float'), + createObjectRgbColorParser('float'), + createObjectRgbaColorParser('float'), + ], + }; + function createColorStringBindingReader(type) { + const parsers = TYPE_TO_PARSERS[type]; + return (value) => { + if (typeof value !== 'string') { + return Color.black(type); + } + const result = parsers.reduce((prev, parser) => { + if (prev) { + return prev; + } + return parser(value); + }, null); + return result !== null && result !== void 0 ? result : Color.black(type); + }; + } + function createColorStringParser(type) { + const parsers = TYPE_TO_PARSERS[type]; + return (value) => { + return parsers.reduce((prev, parser) => { + if (prev) { + return prev; + } + return parser(value); + }, null); + }; + } + function zerofill(comp) { + const hex = constrainRange(Math.floor(comp), 0, 255).toString(16); + return hex.length === 1 ? `0${hex}` : hex; + } + function colorToHexRgbString(value, prefix = '#') { + const hexes = removeAlphaComponent(value.getComponents('rgb')) + .map(zerofill) + .join(''); + return `${prefix}${hexes}`; + } + function colorToHexRgbaString(value, prefix = '#') { + const rgbaComps = value.getComponents('rgb'); + const hexes = [rgbaComps[0], rgbaComps[1], rgbaComps[2], rgbaComps[3] * 255] + .map(zerofill) + .join(''); + return `${prefix}${hexes}`; + } + function colorToFunctionalRgbString(value, opt_type) { + const formatter = createNumberFormatter(opt_type === 'float' ? 2 : 0); + const comps = removeAlphaComponent(value.getComponents('rgb', opt_type)).map((comp) => formatter(comp)); + return `rgb(${comps.join(', ')})`; + } + function createFunctionalRgbColorFormatter(type) { + return (value) => { + return colorToFunctionalRgbString(value, type); + }; + } + function colorToFunctionalRgbaString(value, opt_type) { + const aFormatter = createNumberFormatter(2); + const rgbFormatter = createNumberFormatter(opt_type === 'float' ? 2 : 0); + const comps = value.getComponents('rgb', opt_type).map((comp, index) => { + const formatter = index === 3 ? aFormatter : rgbFormatter; + return formatter(comp); + }); + return `rgba(${comps.join(', ')})`; + } + function createFunctionalRgbaColorFormatter(type) { + return (value) => { + return colorToFunctionalRgbaString(value, type); + }; + } + function colorToFunctionalHslString(value) { + const formatters = [ + createNumberFormatter(0), + formatPercentage, + formatPercentage, + ]; + const comps = removeAlphaComponent(value.getComponents('hsl')).map((comp, index) => formatters[index](comp)); + return `hsl(${comps.join(', ')})`; + } + function colorToFunctionalHslaString(value) { + const formatters = [ + createNumberFormatter(0), + formatPercentage, + formatPercentage, + createNumberFormatter(2), + ]; + const comps = value + .getComponents('hsl') + .map((comp, index) => formatters[index](comp)); + return `hsla(${comps.join(', ')})`; + } + function colorToObjectRgbString(value, type) { + const formatter = createNumberFormatter(type === 'float' ? 2 : 0); + const names = ['r', 'g', 'b']; + const comps = removeAlphaComponent(value.getComponents('rgb', type)).map((comp, index) => `${names[index]}: ${formatter(comp)}`); + return `{${comps.join(', ')}}`; + } + function createObjectRgbColorFormatter(type) { + return (value) => colorToObjectRgbString(value, type); + } + function colorToObjectRgbaString(value, type) { + const aFormatter = createNumberFormatter(2); + const rgbFormatter = createNumberFormatter(type === 'float' ? 2 : 0); + const names = ['r', 'g', 'b', 'a']; + const comps = value.getComponents('rgb', type).map((comp, index) => { + const formatter = index === 3 ? aFormatter : rgbFormatter; + return `${names[index]}: ${formatter(comp)}`; + }); + return `{${comps.join(', ')}}`; + } + function createObjectRgbaColorFormatter(type) { + return (value) => colorToObjectRgbaString(value, type); + } + const FORMAT_AND_STRINGIFIERS = [ + { + format: { + alpha: false, + mode: 'rgb', + notation: 'hex', + type: 'int', + }, + stringifier: colorToHexRgbString, + }, + { + format: { + alpha: true, + mode: 'rgb', + notation: 'hex', + type: 'int', + }, + stringifier: colorToHexRgbaString, + }, + { + format: { + alpha: false, + mode: 'hsl', + notation: 'func', + type: 'int', + }, + stringifier: colorToFunctionalHslString, + }, + { + format: { + alpha: true, + mode: 'hsl', + notation: 'func', + type: 'int', + }, + stringifier: colorToFunctionalHslaString, + }, + ...['int', 'float'].reduce((prev, type) => { + return [ + ...prev, + { + format: { + alpha: false, + mode: 'rgb', + notation: 'func', + type: type, + }, + stringifier: createFunctionalRgbColorFormatter(type), + }, + { + format: { + alpha: true, + mode: 'rgb', + notation: 'func', + type: type, + }, + stringifier: createFunctionalRgbaColorFormatter(type), + }, + { + format: { + alpha: false, + mode: 'rgb', + notation: 'object', + type: type, + }, + stringifier: createObjectRgbColorFormatter(type), + }, + { + format: { + alpha: true, + mode: 'rgb', + notation: 'object', + type: type, + }, + stringifier: createObjectRgbaColorFormatter(type), + }, + ]; + }, []), + ]; + function findColorStringifier(format) { + return FORMAT_AND_STRINGIFIERS.reduce((prev, fas) => { + if (prev) { + return prev; + } + return equalsStringColorFormat(fas.format, format) + ? fas.stringifier + : null; + }, null); + } + + const className$a = ClassName('apl'); + class APaletteView { + constructor(doc, config) { + this.onValueChange_ = this.onValueChange_.bind(this); + this.value = config.value; + this.value.emitter.on('change', this.onValueChange_); + this.element = doc.createElement('div'); + this.element.classList.add(className$a()); + config.viewProps.bindTabIndex(this.element); + const barElem = doc.createElement('div'); + barElem.classList.add(className$a('b')); + this.element.appendChild(barElem); + const colorElem = doc.createElement('div'); + colorElem.classList.add(className$a('c')); + barElem.appendChild(colorElem); + this.colorElem_ = colorElem; + const markerElem = doc.createElement('div'); + markerElem.classList.add(className$a('m')); + this.element.appendChild(markerElem); + this.markerElem_ = markerElem; + const previewElem = doc.createElement('div'); + previewElem.classList.add(className$a('p')); + this.markerElem_.appendChild(previewElem); + this.previewElem_ = previewElem; + this.update_(); + } + update_() { + const c = this.value.rawValue; + const rgbaComps = c.getComponents('rgb'); + const leftColor = new Color([rgbaComps[0], rgbaComps[1], rgbaComps[2], 0], 'rgb'); + const rightColor = new Color([rgbaComps[0], rgbaComps[1], rgbaComps[2], 255], 'rgb'); + const gradientComps = [ + 'to right', + colorToFunctionalRgbaString(leftColor), + colorToFunctionalRgbaString(rightColor), + ]; + this.colorElem_.style.background = `linear-gradient(${gradientComps.join(',')})`; + this.previewElem_.style.backgroundColor = colorToFunctionalRgbaString(c); + const left = mapRange(rgbaComps[3], 0, 1, 0, 100); + this.markerElem_.style.left = `${left}%`; + } + onValueChange_() { + this.update_(); + } + } + + class APaletteController { + constructor(doc, config) { + this.onKeyDown_ = this.onKeyDown_.bind(this); + this.onKeyUp_ = this.onKeyUp_.bind(this); + this.onPointerDown_ = this.onPointerDown_.bind(this); + this.onPointerMove_ = this.onPointerMove_.bind(this); + this.onPointerUp_ = this.onPointerUp_.bind(this); + this.value = config.value; + this.viewProps = config.viewProps; + this.view = new APaletteView(doc, { + value: this.value, + viewProps: this.viewProps, + }); + this.ptHandler_ = new PointerHandler(this.view.element); + this.ptHandler_.emitter.on('down', this.onPointerDown_); + this.ptHandler_.emitter.on('move', this.onPointerMove_); + this.ptHandler_.emitter.on('up', this.onPointerUp_); + this.view.element.addEventListener('keydown', this.onKeyDown_); + this.view.element.addEventListener('keyup', this.onKeyUp_); + } + handlePointerEvent_(d, opts) { + if (!d.point) { + return; + } + const alpha = d.point.x / d.bounds.width; + const c = this.value.rawValue; + const [h, s, v] = c.getComponents('hsv'); + this.value.setRawValue(new Color([h, s, v, alpha], 'hsv'), opts); + } + onPointerDown_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: false, + last: false, + }); + } + onPointerMove_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: false, + last: false, + }); + } + onPointerUp_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: true, + last: true, + }); + } + onKeyDown_(ev) { + const step = getStepForKey(getBaseStepForColor(true), getHorizontalStepKeys(ev)); + if (step === 0) { + return; + } + const c = this.value.rawValue; + const [h, s, v, a] = c.getComponents('hsv'); + this.value.setRawValue(new Color([h, s, v, a + step], 'hsv'), { + forceEmit: false, + last: false, + }); + } + onKeyUp_(ev) { + const step = getStepForKey(getBaseStepForColor(true), getHorizontalStepKeys(ev)); + if (step === 0) { + return; + } + this.value.setRawValue(this.value.rawValue, { + forceEmit: true, + last: true, + }); + } + } + + const className$9 = ClassName('coltxt'); + function createModeSelectElement(doc) { + const selectElem = doc.createElement('select'); + const items = [ + { text: 'RGB', value: 'rgb' }, + { text: 'HSL', value: 'hsl' }, + { text: 'HSV', value: 'hsv' }, + ]; + selectElem.appendChild(items.reduce((frag, item) => { + const optElem = doc.createElement('option'); + optElem.textContent = item.text; + optElem.value = item.value; + frag.appendChild(optElem); + return frag; + }, doc.createDocumentFragment())); + return selectElem; + } + class ColorTextView { + constructor(doc, config) { + this.element = doc.createElement('div'); + this.element.classList.add(className$9()); + const modeElem = doc.createElement('div'); + modeElem.classList.add(className$9('m')); + this.modeElem_ = createModeSelectElement(doc); + this.modeElem_.classList.add(className$9('ms')); + modeElem.appendChild(this.modeSelectElement); + const modeMarkerElem = doc.createElement('div'); + modeMarkerElem.classList.add(className$9('mm')); + modeMarkerElem.appendChild(createSvgIconElement(doc, 'dropdown')); + modeElem.appendChild(modeMarkerElem); + this.element.appendChild(modeElem); + const textsElem = doc.createElement('div'); + textsElem.classList.add(className$9('w')); + this.element.appendChild(textsElem); + this.textsElem_ = textsElem; + this.textViews_ = config.textViews; + this.applyTextViews_(); + bindValue(config.colorMode, (mode) => { + this.modeElem_.value = mode; + }); + } + get modeSelectElement() { + return this.modeElem_; + } + get textViews() { + return this.textViews_; + } + set textViews(textViews) { + this.textViews_ = textViews; + this.applyTextViews_(); + } + applyTextViews_() { + removeChildElements(this.textsElem_); + const doc = this.element.ownerDocument; + this.textViews_.forEach((v) => { + const compElem = doc.createElement('div'); + compElem.classList.add(className$9('c')); + compElem.appendChild(v.element); + this.textsElem_.appendChild(compElem); + }); + } + } + + function createFormatter$2(type) { + return createNumberFormatter(type === 'float' ? 2 : 0); + } + function createConstraint$5(mode, type, index) { + const max = getColorMaxComponents(mode, type)[index]; + return new RangeConstraint({ + min: 0, + max: max, + }); + } + function createComponentController(doc, config, index) { + return new NumberTextController(doc, { + arrayPosition: index === 0 ? 'fst' : index === 3 - 1 ? 'lst' : 'mid', + baseStep: getBaseStepForColor(false), + parser: config.parser, + props: ValueMap.fromObject({ + draggingScale: config.colorType === 'float' ? 0.01 : 1, + formatter: createFormatter$2(config.colorType), + }), + value: createValue(0, { + constraint: createConstraint$5(config.colorMode, config.colorType, index), + }), + viewProps: config.viewProps, + }); + } + class ColorTextController { + constructor(doc, config) { + this.onModeSelectChange_ = this.onModeSelectChange_.bind(this); + this.colorType_ = config.colorType; + this.parser_ = config.parser; + this.value = config.value; + this.viewProps = config.viewProps; + this.colorMode = createValue(this.value.rawValue.mode); + this.ccs_ = this.createComponentControllers_(doc); + this.view = new ColorTextView(doc, { + colorMode: this.colorMode, + textViews: [this.ccs_[0].view, this.ccs_[1].view, this.ccs_[2].view], + }); + this.view.modeSelectElement.addEventListener('change', this.onModeSelectChange_); + } + createComponentControllers_(doc) { + const cc = { + colorMode: this.colorMode.rawValue, + colorType: this.colorType_, + parser: this.parser_, + viewProps: this.viewProps, + }; + const ccs = [ + createComponentController(doc, cc, 0), + createComponentController(doc, cc, 1), + createComponentController(doc, cc, 2), + ]; + ccs.forEach((cs, index) => { + connectValues({ + primary: this.value, + secondary: cs.value, + forward: (p) => { + return p.rawValue.getComponents(this.colorMode.rawValue, this.colorType_)[index]; + }, + backward: (p, s) => { + const pickedMode = this.colorMode.rawValue; + const comps = p.rawValue.getComponents(pickedMode, this.colorType_); + comps[index] = s.rawValue; + return new Color(appendAlphaComponent(removeAlphaComponent(comps), comps[3]), pickedMode, this.colorType_); + }, + }); + }); + return ccs; + } + onModeSelectChange_(ev) { + const selectElem = ev.currentTarget; + this.colorMode.rawValue = selectElem.value; + this.ccs_ = this.createComponentControllers_(this.view.element.ownerDocument); + this.view.textViews = [ + this.ccs_[0].view, + this.ccs_[1].view, + this.ccs_[2].view, + ]; + } + } + + const className$8 = ClassName('hpl'); + class HPaletteView { + constructor(doc, config) { + this.onValueChange_ = this.onValueChange_.bind(this); + this.value = config.value; + this.value.emitter.on('change', this.onValueChange_); + this.element = doc.createElement('div'); + this.element.classList.add(className$8()); + config.viewProps.bindTabIndex(this.element); + const colorElem = doc.createElement('div'); + colorElem.classList.add(className$8('c')); + this.element.appendChild(colorElem); + const markerElem = doc.createElement('div'); + markerElem.classList.add(className$8('m')); + this.element.appendChild(markerElem); + this.markerElem_ = markerElem; + this.update_(); + } + update_() { + const c = this.value.rawValue; + const [h] = c.getComponents('hsv'); + this.markerElem_.style.backgroundColor = colorToFunctionalRgbString(new Color([h, 100, 100], 'hsv')); + const left = mapRange(h, 0, 360, 0, 100); + this.markerElem_.style.left = `${left}%`; + } + onValueChange_() { + this.update_(); + } + } + + class HPaletteController { + constructor(doc, config) { + this.onKeyDown_ = this.onKeyDown_.bind(this); + this.onKeyUp_ = this.onKeyUp_.bind(this); + this.onPointerDown_ = this.onPointerDown_.bind(this); + this.onPointerMove_ = this.onPointerMove_.bind(this); + this.onPointerUp_ = this.onPointerUp_.bind(this); + this.value = config.value; + this.viewProps = config.viewProps; + this.view = new HPaletteView(doc, { + value: this.value, + viewProps: this.viewProps, + }); + this.ptHandler_ = new PointerHandler(this.view.element); + this.ptHandler_.emitter.on('down', this.onPointerDown_); + this.ptHandler_.emitter.on('move', this.onPointerMove_); + this.ptHandler_.emitter.on('up', this.onPointerUp_); + this.view.element.addEventListener('keydown', this.onKeyDown_); + this.view.element.addEventListener('keyup', this.onKeyUp_); + } + handlePointerEvent_(d, opts) { + if (!d.point) { + return; + } + const hue = mapRange(constrainRange(d.point.x, 0, d.bounds.width), 0, d.bounds.width, 0, 359); + const c = this.value.rawValue; + const [, s, v, a] = c.getComponents('hsv'); + this.value.setRawValue(new Color([hue, s, v, a], 'hsv'), opts); + } + onPointerDown_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: false, + last: false, + }); + } + onPointerMove_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: false, + last: false, + }); + } + onPointerUp_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: true, + last: true, + }); + } + onKeyDown_(ev) { + const step = getStepForKey(getBaseStepForColor(false), getHorizontalStepKeys(ev)); + if (step === 0) { + return; + } + const c = this.value.rawValue; + const [h, s, v, a] = c.getComponents('hsv'); + this.value.setRawValue(new Color([h + step, s, v, a], 'hsv'), { + forceEmit: false, + last: false, + }); + } + onKeyUp_(ev) { + const step = getStepForKey(getBaseStepForColor(false), getHorizontalStepKeys(ev)); + if (step === 0) { + return; + } + this.value.setRawValue(this.value.rawValue, { + forceEmit: true, + last: true, + }); + } + } + + const className$7 = ClassName('svp'); + const CANVAS_RESOL = 64; + class SvPaletteView { + constructor(doc, config) { + this.onValueChange_ = this.onValueChange_.bind(this); + this.value = config.value; + this.value.emitter.on('change', this.onValueChange_); + this.element = doc.createElement('div'); + this.element.classList.add(className$7()); + config.viewProps.bindTabIndex(this.element); + const canvasElem = doc.createElement('canvas'); + canvasElem.height = CANVAS_RESOL; + canvasElem.width = CANVAS_RESOL; + canvasElem.classList.add(className$7('c')); + this.element.appendChild(canvasElem); + this.canvasElement = canvasElem; + const markerElem = doc.createElement('div'); + markerElem.classList.add(className$7('m')); + this.element.appendChild(markerElem); + this.markerElem_ = markerElem; + this.update_(); + } + update_() { + const ctx = getCanvasContext(this.canvasElement); + if (!ctx) { + return; + } + const c = this.value.rawValue; + const hsvComps = c.getComponents('hsv'); + const width = this.canvasElement.width; + const height = this.canvasElement.height; + const imgData = ctx.getImageData(0, 0, width, height); + const data = imgData.data; + for (let iy = 0; iy < height; iy++) { + for (let ix = 0; ix < width; ix++) { + const s = mapRange(ix, 0, width, 0, 100); + const v = mapRange(iy, 0, height, 100, 0); + const rgbComps = hsvToRgbInt(hsvComps[0], s, v); + const i = (iy * width + ix) * 4; + data[i] = rgbComps[0]; + data[i + 1] = rgbComps[1]; + data[i + 2] = rgbComps[2]; + data[i + 3] = 255; + } + } + ctx.putImageData(imgData, 0, 0); + const left = mapRange(hsvComps[1], 0, 100, 0, 100); + this.markerElem_.style.left = `${left}%`; + const top = mapRange(hsvComps[2], 0, 100, 100, 0); + this.markerElem_.style.top = `${top}%`; + } + onValueChange_() { + this.update_(); + } + } + + class SvPaletteController { + constructor(doc, config) { + this.onKeyDown_ = this.onKeyDown_.bind(this); + this.onKeyUp_ = this.onKeyUp_.bind(this); + this.onPointerDown_ = this.onPointerDown_.bind(this); + this.onPointerMove_ = this.onPointerMove_.bind(this); + this.onPointerUp_ = this.onPointerUp_.bind(this); + this.value = config.value; + this.viewProps = config.viewProps; + this.view = new SvPaletteView(doc, { + value: this.value, + viewProps: this.viewProps, + }); + this.ptHandler_ = new PointerHandler(this.view.element); + this.ptHandler_.emitter.on('down', this.onPointerDown_); + this.ptHandler_.emitter.on('move', this.onPointerMove_); + this.ptHandler_.emitter.on('up', this.onPointerUp_); + this.view.element.addEventListener('keydown', this.onKeyDown_); + this.view.element.addEventListener('keyup', this.onKeyUp_); + } + handlePointerEvent_(d, opts) { + if (!d.point) { + return; + } + const saturation = mapRange(d.point.x, 0, d.bounds.width, 0, 100); + const value = mapRange(d.point.y, 0, d.bounds.height, 100, 0); + const [h, , , a] = this.value.rawValue.getComponents('hsv'); + this.value.setRawValue(new Color([h, saturation, value, a], 'hsv'), opts); + } + onPointerDown_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: false, + last: false, + }); + } + onPointerMove_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: false, + last: false, + }); + } + onPointerUp_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: true, + last: true, + }); + } + onKeyDown_(ev) { + if (isArrowKey(ev.key)) { + ev.preventDefault(); + } + const [h, s, v, a] = this.value.rawValue.getComponents('hsv'); + const baseStep = getBaseStepForColor(false); + const ds = getStepForKey(baseStep, getHorizontalStepKeys(ev)); + const dv = getStepForKey(baseStep, getVerticalStepKeys(ev)); + if (ds === 0 && dv === 0) { + return; + } + this.value.setRawValue(new Color([h, s + ds, v + dv, a], 'hsv'), { + forceEmit: false, + last: false, + }); + } + onKeyUp_(ev) { + const baseStep = getBaseStepForColor(false); + const ds = getStepForKey(baseStep, getHorizontalStepKeys(ev)); + const dv = getStepForKey(baseStep, getVerticalStepKeys(ev)); + if (ds === 0 && dv === 0) { + return; + } + this.value.setRawValue(this.value.rawValue, { + forceEmit: true, + last: true, + }); + } + } + + class ColorPickerController { + constructor(doc, config) { + this.value = config.value; + this.viewProps = config.viewProps; + this.hPaletteC_ = new HPaletteController(doc, { + value: this.value, + viewProps: this.viewProps, + }); + this.svPaletteC_ = new SvPaletteController(doc, { + value: this.value, + viewProps: this.viewProps, + }); + this.alphaIcs_ = config.supportsAlpha + ? { + palette: new APaletteController(doc, { + value: this.value, + viewProps: this.viewProps, + }), + text: new NumberTextController(doc, { + parser: parseNumber, + baseStep: 0.1, + props: ValueMap.fromObject({ + draggingScale: 0.01, + formatter: createNumberFormatter(2), + }), + value: createValue(0, { + constraint: new RangeConstraint({ min: 0, max: 1 }), + }), + viewProps: this.viewProps, + }), + } + : null; + if (this.alphaIcs_) { + connectValues({ + primary: this.value, + secondary: this.alphaIcs_.text.value, + forward: (p) => { + return p.rawValue.getComponents()[3]; + }, + backward: (p, s) => { + const comps = p.rawValue.getComponents(); + comps[3] = s.rawValue; + return new Color(comps, p.rawValue.mode); + }, + }); + } + this.textC_ = new ColorTextController(doc, { + colorType: config.colorType, + parser: parseNumber, + value: this.value, + viewProps: this.viewProps, + }); + this.view = new ColorPickerView(doc, { + alphaViews: this.alphaIcs_ + ? { + palette: this.alphaIcs_.palette.view, + text: this.alphaIcs_.text.view, + } + : null, + hPaletteView: this.hPaletteC_.view, + supportsAlpha: config.supportsAlpha, + svPaletteView: this.svPaletteC_.view, + textView: this.textC_.view, + }); + } + get textController() { + return this.textC_; + } + } + + const className$6 = ClassName('colsw'); + class ColorSwatchView { + constructor(doc, config) { + this.onValueChange_ = this.onValueChange_.bind(this); + config.value.emitter.on('change', this.onValueChange_); + this.value = config.value; + this.element = doc.createElement('div'); + this.element.classList.add(className$6()); + config.viewProps.bindClassModifiers(this.element); + const swatchElem = doc.createElement('div'); + swatchElem.classList.add(className$6('sw')); + this.element.appendChild(swatchElem); + this.swatchElem_ = swatchElem; + const buttonElem = doc.createElement('button'); + buttonElem.classList.add(className$6('b')); + config.viewProps.bindDisabled(buttonElem); + this.element.appendChild(buttonElem); + this.buttonElement = buttonElem; + this.update_(); + } + update_() { + const value = this.value.rawValue; + this.swatchElem_.style.backgroundColor = colorToHexRgbaString(value); + } + onValueChange_() { + this.update_(); + } + } + + class ColorSwatchController { + constructor(doc, config) { + this.value = config.value; + this.viewProps = config.viewProps; + this.view = new ColorSwatchView(doc, { + value: this.value, + viewProps: this.viewProps, + }); + } + } + + class ColorController { + constructor(doc, config) { + this.onButtonBlur_ = this.onButtonBlur_.bind(this); + this.onButtonClick_ = this.onButtonClick_.bind(this); + this.onPopupChildBlur_ = this.onPopupChildBlur_.bind(this); + this.onPopupChildKeydown_ = this.onPopupChildKeydown_.bind(this); + this.value = config.value; + this.viewProps = config.viewProps; + this.foldable_ = Foldable.create(config.expanded); + this.swatchC_ = new ColorSwatchController(doc, { + value: this.value, + viewProps: this.viewProps, + }); + const buttonElem = this.swatchC_.view.buttonElement; + buttonElem.addEventListener('blur', this.onButtonBlur_); + buttonElem.addEventListener('click', this.onButtonClick_); + this.textC_ = new TextController(doc, { + parser: config.parser, + props: ValueMap.fromObject({ + formatter: config.formatter, + }), + value: this.value, + viewProps: this.viewProps, + }); + this.view = new ColorView(doc, { + foldable: this.foldable_, + pickerLayout: config.pickerLayout, + }); + this.view.swatchElement.appendChild(this.swatchC_.view.element); + this.view.textElement.appendChild(this.textC_.view.element); + this.popC_ = + config.pickerLayout === 'popup' + ? new PopupController(doc, { + viewProps: this.viewProps, + }) + : null; + const pickerC = new ColorPickerController(doc, { + colorType: config.colorType, + supportsAlpha: config.supportsAlpha, + value: this.value, + viewProps: this.viewProps, + }); + pickerC.view.allFocusableElements.forEach((elem) => { + elem.addEventListener('blur', this.onPopupChildBlur_); + elem.addEventListener('keydown', this.onPopupChildKeydown_); + }); + this.pickerC_ = pickerC; + if (this.popC_) { + this.view.element.appendChild(this.popC_.view.element); + this.popC_.view.element.appendChild(pickerC.view.element); + connectValues({ + primary: this.foldable_.value('expanded'), + secondary: this.popC_.shows, + forward: (p) => p.rawValue, + backward: (_, s) => s.rawValue, + }); + } + else if (this.view.pickerElement) { + this.view.pickerElement.appendChild(this.pickerC_.view.element); + bindFoldable(this.foldable_, this.view.pickerElement); + } + } + get textController() { + return this.textC_; + } + onButtonBlur_(e) { + if (!this.popC_) { + return; + } + const elem = this.view.element; + const nextTarget = forceCast(e.relatedTarget); + if (!nextTarget || !elem.contains(nextTarget)) { + this.popC_.shows.rawValue = false; + } + } + onButtonClick_() { + this.foldable_.set('expanded', !this.foldable_.get('expanded')); + if (this.foldable_.get('expanded')) { + this.pickerC_.view.allFocusableElements[0].focus(); + } + } + onPopupChildBlur_(ev) { + if (!this.popC_) { + return; + } + const elem = this.popC_.view.element; + const nextTarget = findNextTarget(ev); + if (nextTarget && elem.contains(nextTarget)) { + return; + } + if (nextTarget && + nextTarget === this.swatchC_.view.buttonElement && + !supportsTouch(elem.ownerDocument)) { + return; + } + this.popC_.shows.rawValue = false; + } + onPopupChildKeydown_(ev) { + if (this.popC_) { + if (ev.key === 'Escape') { + this.popC_.shows.rawValue = false; + } + } + else if (this.view.pickerElement) { + if (ev.key === 'Escape') { + this.swatchC_.view.buttonElement.focus(); + } + } + } + } + + function colorFromObject(value, opt_type) { + if (Color.isColorObject(value)) { + return Color.fromObject(value, opt_type); + } + return Color.black(opt_type); + } + function colorToRgbNumber(value) { + return removeAlphaComponent(value.getComponents('rgb')).reduce((result, comp) => { + return (result << 8) | (Math.floor(comp) & 0xff); + }, 0); + } + function colorToRgbaNumber(value) { + return (value.getComponents('rgb').reduce((result, comp, index) => { + const hex = Math.floor(index === 3 ? comp * 255 : comp) & 0xff; + return (result << 8) | hex; + }, 0) >>> 0); + } + function numberToRgbColor(num) { + return new Color([(num >> 16) & 0xff, (num >> 8) & 0xff, num & 0xff], 'rgb'); + } + function numberToRgbaColor(num) { + return new Color([ + (num >> 24) & 0xff, + (num >> 16) & 0xff, + (num >> 8) & 0xff, + mapRange(num & 0xff, 0, 255, 0, 1), + ], 'rgb'); + } + function colorFromRgbNumber(value) { + if (typeof value !== 'number') { + return Color.black(); + } + return numberToRgbColor(value); + } + function colorFromRgbaNumber(value) { + if (typeof value !== 'number') { + return Color.black(); + } + return numberToRgbaColor(value); + } + + function createColorStringWriter(format) { + const stringify = findColorStringifier(format); + return stringify + ? (target, value) => { + writePrimitive(target, stringify(value)); + } + : null; + } + function createColorNumberWriter(supportsAlpha) { + const colorToNumber = supportsAlpha ? colorToRgbaNumber : colorToRgbNumber; + return (target, value) => { + writePrimitive(target, colorToNumber(value)); + }; + } + function writeRgbaColorObject(target, value, opt_type) { + const obj = value.toRgbaObject(opt_type); + target.writeProperty('r', obj.r); + target.writeProperty('g', obj.g); + target.writeProperty('b', obj.b); + target.writeProperty('a', obj.a); + } + function writeRgbColorObject(target, value, opt_type) { + const obj = value.toRgbaObject(opt_type); + target.writeProperty('r', obj.r); + target.writeProperty('g', obj.g); + target.writeProperty('b', obj.b); + } + function createColorObjectWriter(supportsAlpha, opt_type) { + return (target, inValue) => { + if (supportsAlpha) { + writeRgbaColorObject(target, inValue, opt_type); + } + else { + writeRgbColorObject(target, inValue, opt_type); + } + }; + } + + function shouldSupportAlpha$1(inputParams) { + var _a; + if ((inputParams === null || inputParams === void 0 ? void 0 : inputParams.alpha) || ((_a = inputParams === null || inputParams === void 0 ? void 0 : inputParams.color) === null || _a === void 0 ? void 0 : _a.alpha)) { + return true; + } + return false; + } + function createFormatter$1(supportsAlpha) { + return supportsAlpha + ? (v) => colorToHexRgbaString(v, '0x') + : (v) => colorToHexRgbString(v, '0x'); + } + function isForColor(params) { + if ('color' in params) { + return true; + } + if ('view' in params && params.view === 'color') { + return true; + } + return false; + } + const NumberColorInputPlugin = { + id: 'input-color-number', + type: 'input', + accept: (value, params) => { + if (typeof value !== 'number') { + return null; + } + if (!isForColor(params)) { + return null; + } + const result = parseColorInputParams(params); + return result + ? { + initialValue: value, + params: result, + } + : null; + }, + binding: { + reader: (args) => { + return shouldSupportAlpha$1(args.params) + ? colorFromRgbaNumber + : colorFromRgbNumber; + }, + equals: Color.equals, + writer: (args) => { + return createColorNumberWriter(shouldSupportAlpha$1(args.params)); + }, + }, + controller: (args) => { + const supportsAlpha = shouldSupportAlpha$1(args.params); + const expanded = 'expanded' in args.params ? args.params.expanded : undefined; + const picker = 'picker' in args.params ? args.params.picker : undefined; + return new ColorController(args.document, { + colorType: 'int', + expanded: expanded !== null && expanded !== void 0 ? expanded : false, + formatter: createFormatter$1(supportsAlpha), + parser: createColorStringParser('int'), + pickerLayout: picker !== null && picker !== void 0 ? picker : 'popup', + supportsAlpha: supportsAlpha, + value: args.value, + viewProps: args.viewProps, + }); + }, + }; + + function shouldSupportAlpha(initialValue) { + return Color.isRgbaColorObject(initialValue); + } + function createColorObjectReader(opt_type) { + return (value) => { + return colorFromObject(value, opt_type); + }; + } + function createColorObjectFormatter(supportsAlpha, type) { + return (value) => { + if (supportsAlpha) { + return colorToObjectRgbaString(value, type); + } + return colorToObjectRgbString(value, type); + }; + } + const ObjectColorInputPlugin = { + id: 'input-color-object', + type: 'input', + accept: (value, params) => { + if (!Color.isColorObject(value)) { + return null; + } + const result = parseColorInputParams(params); + return result + ? { + initialValue: value, + params: result, + } + : null; + }, + binding: { + reader: (args) => createColorObjectReader(extractColorType(args.params)), + equals: Color.equals, + writer: (args) => createColorObjectWriter(shouldSupportAlpha(args.initialValue), extractColorType(args.params)), + }, + controller: (args) => { + var _a; + const supportsAlpha = Color.isRgbaColorObject(args.initialValue); + const expanded = 'expanded' in args.params ? args.params.expanded : undefined; + const picker = 'picker' in args.params ? args.params.picker : undefined; + const type = (_a = extractColorType(args.params)) !== null && _a !== void 0 ? _a : 'int'; + return new ColorController(args.document, { + colorType: type, + expanded: expanded !== null && expanded !== void 0 ? expanded : false, + formatter: createColorObjectFormatter(supportsAlpha, type), + parser: createColorStringParser(type), + pickerLayout: picker !== null && picker !== void 0 ? picker : 'popup', + supportsAlpha: supportsAlpha, + value: args.value, + viewProps: args.viewProps, + }); + }, + }; + + const StringColorInputPlugin = { + id: 'input-color-string', + type: 'input', + accept: (value, params) => { + if (typeof value !== 'string') { + return null; + } + if ('view' in params && params.view === 'text') { + return null; + } + const format = detectStringColorFormat(value, extractColorType(params)); + if (!format) { + return null; + } + const stringifier = findColorStringifier(format); + if (!stringifier) { + return null; + } + const result = parseColorInputParams(params); + return result + ? { + initialValue: value, + params: result, + } + : null; + }, + binding: { + reader: (args) => { var _a; return createColorStringBindingReader((_a = extractColorType(args.params)) !== null && _a !== void 0 ? _a : 'int'); }, + equals: Color.equals, + writer: (args) => { + const format = detectStringColorFormat(args.initialValue, extractColorType(args.params)); + if (!format) { + throw TpError.shouldNeverHappen(); + } + const writer = createColorStringWriter(format); + if (!writer) { + throw TpError.notBindable(); + } + return writer; + }, + }, + controller: (args) => { + const format = detectStringColorFormat(args.initialValue, extractColorType(args.params)); + if (!format) { + throw TpError.shouldNeverHappen(); + } + const stringifier = findColorStringifier(format); + if (!stringifier) { + throw TpError.shouldNeverHappen(); + } + const expanded = 'expanded' in args.params ? args.params.expanded : undefined; + const picker = 'picker' in args.params ? args.params.picker : undefined; + return new ColorController(args.document, { + colorType: format.type, + expanded: expanded !== null && expanded !== void 0 ? expanded : false, + formatter: stringifier, + parser: createColorStringParser(format.type), + pickerLayout: picker !== null && picker !== void 0 ? picker : 'popup', + supportsAlpha: format.alpha, + value: args.value, + viewProps: args.viewProps, + }); + }, + }; + + class PointNdConstraint { + constructor(config) { + this.components = config.components; + this.asm_ = config.assembly; + } + constrain(value) { + const comps = this.asm_ + .toComponents(value) + .map((comp, index) => { var _a, _b; return (_b = (_a = this.components[index]) === null || _a === void 0 ? void 0 : _a.constrain(comp)) !== null && _b !== void 0 ? _b : comp; }); + return this.asm_.fromComponents(comps); + } + } + + const className$5 = ClassName('pndtxt'); + class PointNdTextView { + constructor(doc, config) { + this.textViews = config.textViews; + this.element = doc.createElement('div'); + this.element.classList.add(className$5()); + this.textViews.forEach((v) => { + const axisElem = doc.createElement('div'); + axisElem.classList.add(className$5('a')); + axisElem.appendChild(v.element); + this.element.appendChild(axisElem); + }); + } + } + + function createAxisController(doc, config, index) { + return new NumberTextController(doc, { + arrayPosition: index === 0 ? 'fst' : index === config.axes.length - 1 ? 'lst' : 'mid', + baseStep: config.axes[index].baseStep, + parser: config.parser, + props: config.axes[index].textProps, + value: createValue(0, { + constraint: config.axes[index].constraint, + }), + viewProps: config.viewProps, + }); + } + class PointNdTextController { + constructor(doc, config) { + this.value = config.value; + this.viewProps = config.viewProps; + this.acs_ = config.axes.map((_, index) => createAxisController(doc, config, index)); + this.acs_.forEach((c, index) => { + connectValues({ + primary: this.value, + secondary: c.value, + forward: (p) => { + return config.assembly.toComponents(p.rawValue)[index]; + }, + backward: (p, s) => { + const comps = config.assembly.toComponents(p.rawValue); + comps[index] = s.rawValue; + return config.assembly.fromComponents(comps); + }, + }); + }); + this.view = new PointNdTextView(doc, { + textViews: this.acs_.map((ac) => ac.view), + }); + } + } + + function createStepConstraint(params, initialValue) { + if ('step' in params && !isEmpty(params.step)) { + return new StepConstraint(params.step, initialValue); + } + return null; + } + function createRangeConstraint(params) { + if (('max' in params && !isEmpty(params.max)) || + ('min' in params && !isEmpty(params.min))) { + return new RangeConstraint({ + max: params.max, + min: params.min, + }); + } + return null; + } + function createConstraint$4(params, + initialValue) { + const constraints = []; + const sc = createStepConstraint(params, initialValue); + if (sc) { + constraints.push(sc); + } + const rc = createRangeConstraint(params); + if (rc) { + constraints.push(rc); + } + const lc = createListConstraint(params.options); + if (lc) { + constraints.push(lc); + } + return new CompositeConstraint(constraints); + } + function findRange(constraint) { + const c = constraint ? findConstraint(constraint, RangeConstraint) : null; + if (!c) { + return [undefined, undefined]; + } + return [c.minValue, c.maxValue]; + } + function estimateSuitableRange(constraint) { + const [min, max] = findRange(constraint); + return [min !== null && min !== void 0 ? min : 0, max !== null && max !== void 0 ? max : 100]; + } + const NumberInputPlugin = { + id: 'input-number', + type: 'input', + accept: (value, params) => { + if (typeof value !== 'number') { + return null; + } + const p = ParamsParsers; + const result = parseParams(params, { + format: p.optional.function, + max: p.optional.number, + min: p.optional.number, + options: p.optional.custom(parseListOptions), + step: p.optional.number, + }); + return result + ? { + initialValue: value, + params: result, + } + : null; + }, + binding: { + reader: (_args) => numberFromUnknown, + constraint: (args) => createConstraint$4(args.params, args.initialValue), + writer: (_args) => writePrimitive, + }, + controller: (args) => { + var _a, _b; + const value = args.value; + const c = args.constraint; + if (c && findConstraint(c, ListConstraint)) { + return new ListController(args.document, { + props: ValueMap.fromObject({ + options: (_a = findListItems(c)) !== null && _a !== void 0 ? _a : [], + }), + value: value, + viewProps: args.viewProps, + }); + } + const formatter = (_b = ('format' in args.params ? args.params.format : undefined)) !== null && _b !== void 0 ? _b : createNumberFormatter(getSuitableDecimalDigits(c, value.rawValue)); + if (c && findConstraint(c, RangeConstraint)) { + const [min, max] = estimateSuitableRange(c); + return new SliderTextController(args.document, { + baseStep: getBaseStep(c), + parser: parseNumber, + sliderProps: ValueMap.fromObject({ + maxValue: max, + minValue: min, + }), + textProps: ValueMap.fromObject({ + draggingScale: getSuitableDraggingScale(c, value.rawValue), + formatter: formatter, + }), + value: value, + viewProps: args.viewProps, + }); + } + return new NumberTextController(args.document, { + baseStep: getBaseStep(c), + parser: parseNumber, + props: ValueMap.fromObject({ + draggingScale: getSuitableDraggingScale(c, value.rawValue), + formatter: formatter, + }), + value: value, + viewProps: args.viewProps, + }); + }, + }; + + class Point2d { + constructor(x = 0, y = 0) { + this.x = x; + this.y = y; + } + getComponents() { + return [this.x, this.y]; + } + static isObject(obj) { + if (isEmpty(obj)) { + return false; + } + const x = obj.x; + const y = obj.y; + if (typeof x !== 'number' || typeof y !== 'number') { + return false; + } + return true; + } + static equals(v1, v2) { + return v1.x === v2.x && v1.y === v2.y; + } + toObject() { + return { + x: this.x, + y: this.y, + }; + } + } + const Point2dAssembly = { + toComponents: (p) => p.getComponents(), + fromComponents: (comps) => new Point2d(...comps), + }; + + const className$4 = ClassName('p2d'); + class Point2dView { + constructor(doc, config) { + this.element = doc.createElement('div'); + this.element.classList.add(className$4()); + config.viewProps.bindClassModifiers(this.element); + bindValue(config.expanded, valueToClassName(this.element, className$4(undefined, 'expanded'))); + const headElem = doc.createElement('div'); + headElem.classList.add(className$4('h')); + this.element.appendChild(headElem); + const buttonElem = doc.createElement('button'); + buttonElem.classList.add(className$4('b')); + buttonElem.appendChild(createSvgIconElement(doc, 'p2dpad')); + config.viewProps.bindDisabled(buttonElem); + headElem.appendChild(buttonElem); + this.buttonElement = buttonElem; + const textElem = doc.createElement('div'); + textElem.classList.add(className$4('t')); + headElem.appendChild(textElem); + this.textElement = textElem; + if (config.pickerLayout === 'inline') { + const pickerElem = doc.createElement('div'); + pickerElem.classList.add(className$4('p')); + this.element.appendChild(pickerElem); + this.pickerElement = pickerElem; + } + else { + this.pickerElement = null; + } + } + } + + const className$3 = ClassName('p2dp'); + class Point2dPickerView { + constructor(doc, config) { + this.onFoldableChange_ = this.onFoldableChange_.bind(this); + this.onValueChange_ = this.onValueChange_.bind(this); + this.invertsY_ = config.invertsY; + this.maxValue_ = config.maxValue; + this.element = doc.createElement('div'); + this.element.classList.add(className$3()); + if (config.layout === 'popup') { + this.element.classList.add(className$3(undefined, 'p')); + } + const padElem = doc.createElement('div'); + padElem.classList.add(className$3('p')); + config.viewProps.bindTabIndex(padElem); + this.element.appendChild(padElem); + this.padElement = padElem; + const svgElem = doc.createElementNS(SVG_NS, 'svg'); + svgElem.classList.add(className$3('g')); + this.padElement.appendChild(svgElem); + this.svgElem_ = svgElem; + const xAxisElem = doc.createElementNS(SVG_NS, 'line'); + xAxisElem.classList.add(className$3('ax')); + xAxisElem.setAttributeNS(null, 'x1', '0'); + xAxisElem.setAttributeNS(null, 'y1', '50%'); + xAxisElem.setAttributeNS(null, 'x2', '100%'); + xAxisElem.setAttributeNS(null, 'y2', '50%'); + this.svgElem_.appendChild(xAxisElem); + const yAxisElem = doc.createElementNS(SVG_NS, 'line'); + yAxisElem.classList.add(className$3('ax')); + yAxisElem.setAttributeNS(null, 'x1', '50%'); + yAxisElem.setAttributeNS(null, 'y1', '0'); + yAxisElem.setAttributeNS(null, 'x2', '50%'); + yAxisElem.setAttributeNS(null, 'y2', '100%'); + this.svgElem_.appendChild(yAxisElem); + const lineElem = doc.createElementNS(SVG_NS, 'line'); + lineElem.classList.add(className$3('l')); + lineElem.setAttributeNS(null, 'x1', '50%'); + lineElem.setAttributeNS(null, 'y1', '50%'); + this.svgElem_.appendChild(lineElem); + this.lineElem_ = lineElem; + const markerElem = doc.createElement('div'); + markerElem.classList.add(className$3('m')); + this.padElement.appendChild(markerElem); + this.markerElem_ = markerElem; + config.value.emitter.on('change', this.onValueChange_); + this.value = config.value; + this.update_(); + } + get allFocusableElements() { + return [this.padElement]; + } + update_() { + const [x, y] = this.value.rawValue.getComponents(); + const max = this.maxValue_; + const px = mapRange(x, -max, +max, 0, 100); + const py = mapRange(y, -max, +max, 0, 100); + const ipy = this.invertsY_ ? 100 - py : py; + this.lineElem_.setAttributeNS(null, 'x2', `${px}%`); + this.lineElem_.setAttributeNS(null, 'y2', `${ipy}%`); + this.markerElem_.style.left = `${px}%`; + this.markerElem_.style.top = `${ipy}%`; + } + onValueChange_() { + this.update_(); + } + onFoldableChange_() { + this.update_(); + } + } + + function computeOffset(ev, baseSteps, invertsY) { + return [ + getStepForKey(baseSteps[0], getHorizontalStepKeys(ev)), + getStepForKey(baseSteps[1], getVerticalStepKeys(ev)) * (invertsY ? 1 : -1), + ]; + } + class Point2dPickerController { + constructor(doc, config) { + this.onPadKeyDown_ = this.onPadKeyDown_.bind(this); + this.onPadKeyUp_ = this.onPadKeyUp_.bind(this); + this.onPointerDown_ = this.onPointerDown_.bind(this); + this.onPointerMove_ = this.onPointerMove_.bind(this); + this.onPointerUp_ = this.onPointerUp_.bind(this); + this.value = config.value; + this.viewProps = config.viewProps; + this.baseSteps_ = config.baseSteps; + this.maxValue_ = config.maxValue; + this.invertsY_ = config.invertsY; + this.view = new Point2dPickerView(doc, { + invertsY: this.invertsY_, + layout: config.layout, + maxValue: this.maxValue_, + value: this.value, + viewProps: this.viewProps, + }); + this.ptHandler_ = new PointerHandler(this.view.padElement); + this.ptHandler_.emitter.on('down', this.onPointerDown_); + this.ptHandler_.emitter.on('move', this.onPointerMove_); + this.ptHandler_.emitter.on('up', this.onPointerUp_); + this.view.padElement.addEventListener('keydown', this.onPadKeyDown_); + this.view.padElement.addEventListener('keyup', this.onPadKeyUp_); + } + handlePointerEvent_(d, opts) { + if (!d.point) { + return; + } + const max = this.maxValue_; + const px = mapRange(d.point.x, 0, d.bounds.width, -max, +max); + const py = mapRange(this.invertsY_ ? d.bounds.height - d.point.y : d.point.y, 0, d.bounds.height, -max, +max); + this.value.setRawValue(new Point2d(px, py), opts); + } + onPointerDown_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: false, + last: false, + }); + } + onPointerMove_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: false, + last: false, + }); + } + onPointerUp_(ev) { + this.handlePointerEvent_(ev.data, { + forceEmit: true, + last: true, + }); + } + onPadKeyDown_(ev) { + if (isArrowKey(ev.key)) { + ev.preventDefault(); + } + const [dx, dy] = computeOffset(ev, this.baseSteps_, this.invertsY_); + if (dx === 0 && dy === 0) { + return; + } + this.value.setRawValue(new Point2d(this.value.rawValue.x + dx, this.value.rawValue.y + dy), { + forceEmit: false, + last: false, + }); + } + onPadKeyUp_(ev) { + const [dx, dy] = computeOffset(ev, this.baseSteps_, this.invertsY_); + if (dx === 0 && dy === 0) { + return; + } + this.value.setRawValue(this.value.rawValue, { + forceEmit: true, + last: true, + }); + } + } + + class Point2dController { + constructor(doc, config) { + var _a, _b; + this.onPopupChildBlur_ = this.onPopupChildBlur_.bind(this); + this.onPopupChildKeydown_ = this.onPopupChildKeydown_.bind(this); + this.onPadButtonBlur_ = this.onPadButtonBlur_.bind(this); + this.onPadButtonClick_ = this.onPadButtonClick_.bind(this); + this.value = config.value; + this.viewProps = config.viewProps; + this.foldable_ = Foldable.create(config.expanded); + this.popC_ = + config.pickerLayout === 'popup' + ? new PopupController(doc, { + viewProps: this.viewProps, + }) + : null; + const padC = new Point2dPickerController(doc, { + baseSteps: [config.axes[0].baseStep, config.axes[1].baseStep], + invertsY: config.invertsY, + layout: config.pickerLayout, + maxValue: config.maxValue, + value: this.value, + viewProps: this.viewProps, + }); + padC.view.allFocusableElements.forEach((elem) => { + elem.addEventListener('blur', this.onPopupChildBlur_); + elem.addEventListener('keydown', this.onPopupChildKeydown_); + }); + this.pickerC_ = padC; + this.textC_ = new PointNdTextController(doc, { + assembly: Point2dAssembly, + axes: config.axes, + parser: config.parser, + value: this.value, + viewProps: this.viewProps, + }); + this.view = new Point2dView(doc, { + expanded: this.foldable_.value('expanded'), + pickerLayout: config.pickerLayout, + viewProps: this.viewProps, + }); + this.view.textElement.appendChild(this.textC_.view.element); + (_a = this.view.buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', this.onPadButtonBlur_); + (_b = this.view.buttonElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.onPadButtonClick_); + if (this.popC_) { + this.view.element.appendChild(this.popC_.view.element); + this.popC_.view.element.appendChild(this.pickerC_.view.element); + connectValues({ + primary: this.foldable_.value('expanded'), + secondary: this.popC_.shows, + forward: (p) => p.rawValue, + backward: (_, s) => s.rawValue, + }); + } + else if (this.view.pickerElement) { + this.view.pickerElement.appendChild(this.pickerC_.view.element); + bindFoldable(this.foldable_, this.view.pickerElement); + } + } + onPadButtonBlur_(e) { + if (!this.popC_) { + return; + } + const elem = this.view.element; + const nextTarget = forceCast(e.relatedTarget); + if (!nextTarget || !elem.contains(nextTarget)) { + this.popC_.shows.rawValue = false; + } + } + onPadButtonClick_() { + this.foldable_.set('expanded', !this.foldable_.get('expanded')); + if (this.foldable_.get('expanded')) { + this.pickerC_.view.allFocusableElements[0].focus(); + } + } + onPopupChildBlur_(ev) { + if (!this.popC_) { + return; + } + const elem = this.popC_.view.element; + const nextTarget = findNextTarget(ev); + if (nextTarget && elem.contains(nextTarget)) { + return; + } + if (nextTarget && + nextTarget === this.view.buttonElement && + !supportsTouch(elem.ownerDocument)) { + return; + } + this.popC_.shows.rawValue = false; + } + onPopupChildKeydown_(ev) { + if (this.popC_) { + if (ev.key === 'Escape') { + this.popC_.shows.rawValue = false; + } + } + else if (this.view.pickerElement) { + if (ev.key === 'Escape') { + this.view.buttonElement.focus(); + } + } + } + } + + function point2dFromUnknown(value) { + return Point2d.isObject(value) + ? new Point2d(value.x, value.y) + : new Point2d(); + } + function writePoint2d(target, value) { + target.writeProperty('x', value.x); + target.writeProperty('y', value.y); + } + + function createDimensionConstraint(params, initialValue) { + if (!params) { + return undefined; + } + const constraints = []; + const cs = createStepConstraint(params, initialValue); + if (cs) { + constraints.push(cs); + } + const rs = createRangeConstraint(params); + if (rs) { + constraints.push(rs); + } + return new CompositeConstraint(constraints); + } + function createConstraint$3(params, initialValue) { + return new PointNdConstraint({ + assembly: Point2dAssembly, + components: [ + createDimensionConstraint('x' in params ? params.x : undefined, initialValue.x), + createDimensionConstraint('y' in params ? params.y : undefined, initialValue.y), + ], + }); + } + function getSuitableMaxDimensionValue(constraint, rawValue) { + var _a, _b; + const rc = constraint && findConstraint(constraint, RangeConstraint); + if (rc) { + return Math.max(Math.abs((_a = rc.minValue) !== null && _a !== void 0 ? _a : 0), Math.abs((_b = rc.maxValue) !== null && _b !== void 0 ? _b : 0)); + } + const step = getBaseStep(constraint); + return Math.max(Math.abs(step) * 10, Math.abs(rawValue) * 10); + } + function getSuitableMaxValue(initialValue, constraint) { + const xc = constraint instanceof PointNdConstraint + ? constraint.components[0] + : undefined; + const yc = constraint instanceof PointNdConstraint + ? constraint.components[1] + : undefined; + const xr = getSuitableMaxDimensionValue(xc, initialValue.x); + const yr = getSuitableMaxDimensionValue(yc, initialValue.y); + return Math.max(xr, yr); + } + function createAxis$2(initialValue, constraint) { + return { + baseStep: getBaseStep(constraint), + constraint: constraint, + textProps: ValueMap.fromObject({ + draggingScale: getSuitableDraggingScale(constraint, initialValue), + formatter: createNumberFormatter(getSuitableDecimalDigits(constraint, initialValue)), + }), + }; + } + function shouldInvertY(params) { + if (!('y' in params)) { + return false; + } + const yParams = params.y; + if (!yParams) { + return false; + } + return 'inverted' in yParams ? !!yParams.inverted : false; + } + const Point2dInputPlugin = { + id: 'input-point2d', + type: 'input', + accept: (value, params) => { + if (!Point2d.isObject(value)) { + return null; + } + const p = ParamsParsers; + const result = parseParams(params, { + expanded: p.optional.boolean, + picker: p.optional.custom(parsePickerLayout), + x: p.optional.custom(parsePointDimensionParams), + y: p.optional.object({ + inverted: p.optional.boolean, + max: p.optional.number, + min: p.optional.number, + step: p.optional.number, + }), + }); + return result + ? { + initialValue: value, + params: result, + } + : null; + }, + binding: { + reader: (_args) => point2dFromUnknown, + constraint: (args) => createConstraint$3(args.params, args.initialValue), + equals: Point2d.equals, + writer: (_args) => writePoint2d, + }, + controller: (args) => { + const doc = args.document; + const value = args.value; + const c = args.constraint; + if (!(c instanceof PointNdConstraint)) { + throw TpError.shouldNeverHappen(); + } + const expanded = 'expanded' in args.params ? args.params.expanded : undefined; + const picker = 'picker' in args.params ? args.params.picker : undefined; + return new Point2dController(doc, { + axes: [ + createAxis$2(value.rawValue.x, c.components[0]), + createAxis$2(value.rawValue.y, c.components[1]), + ], + expanded: expanded !== null && expanded !== void 0 ? expanded : false, + invertsY: shouldInvertY(args.params), + maxValue: getSuitableMaxValue(value.rawValue, c), + parser: parseNumber, + pickerLayout: picker !== null && picker !== void 0 ? picker : 'popup', + value: value, + viewProps: args.viewProps, + }); + }, + }; + + class Point3d { + constructor(x = 0, y = 0, z = 0) { + this.x = x; + this.y = y; + this.z = z; + } + getComponents() { + return [this.x, this.y, this.z]; + } + static isObject(obj) { + if (isEmpty(obj)) { + return false; + } + const x = obj.x; + const y = obj.y; + const z = obj.z; + if (typeof x !== 'number' || + typeof y !== 'number' || + typeof z !== 'number') { + return false; + } + return true; + } + static equals(v1, v2) { + return v1.x === v2.x && v1.y === v2.y && v1.z === v2.z; + } + toObject() { + return { + x: this.x, + y: this.y, + z: this.z, + }; + } + } + const Point3dAssembly = { + toComponents: (p) => p.getComponents(), + fromComponents: (comps) => new Point3d(...comps), + }; + + function point3dFromUnknown(value) { + return Point3d.isObject(value) + ? new Point3d(value.x, value.y, value.z) + : new Point3d(); + } + function writePoint3d(target, value) { + target.writeProperty('x', value.x); + target.writeProperty('y', value.y); + target.writeProperty('z', value.z); + } + + function createConstraint$2(params, initialValue) { + return new PointNdConstraint({ + assembly: Point3dAssembly, + components: [ + createDimensionConstraint('x' in params ? params.x : undefined, initialValue.x), + createDimensionConstraint('y' in params ? params.y : undefined, initialValue.y), + createDimensionConstraint('z' in params ? params.z : undefined, initialValue.z), + ], + }); + } + function createAxis$1(initialValue, constraint) { + return { + baseStep: getBaseStep(constraint), + constraint: constraint, + textProps: ValueMap.fromObject({ + draggingScale: getSuitableDraggingScale(constraint, initialValue), + formatter: createNumberFormatter(getSuitableDecimalDigits(constraint, initialValue)), + }), + }; + } + const Point3dInputPlugin = { + id: 'input-point3d', + type: 'input', + accept: (value, params) => { + if (!Point3d.isObject(value)) { + return null; + } + const p = ParamsParsers; + const result = parseParams(params, { + x: p.optional.custom(parsePointDimensionParams), + y: p.optional.custom(parsePointDimensionParams), + z: p.optional.custom(parsePointDimensionParams), + }); + return result + ? { + initialValue: value, + params: result, + } + : null; + }, + binding: { + reader: (_args) => point3dFromUnknown, + constraint: (args) => createConstraint$2(args.params, args.initialValue), + equals: Point3d.equals, + writer: (_args) => writePoint3d, + }, + controller: (args) => { + const value = args.value; + const c = args.constraint; + if (!(c instanceof PointNdConstraint)) { + throw TpError.shouldNeverHappen(); + } + return new PointNdTextController(args.document, { + assembly: Point3dAssembly, + axes: [ + createAxis$1(value.rawValue.x, c.components[0]), + createAxis$1(value.rawValue.y, c.components[1]), + createAxis$1(value.rawValue.z, c.components[2]), + ], + parser: parseNumber, + value: value, + viewProps: args.viewProps, + }); + }, + }; + + class Point4d { + constructor(x = 0, y = 0, z = 0, w = 0) { + this.x = x; + this.y = y; + this.z = z; + this.w = w; + } + getComponents() { + return [this.x, this.y, this.z, this.w]; + } + static isObject(obj) { + if (isEmpty(obj)) { + return false; + } + const x = obj.x; + const y = obj.y; + const z = obj.z; + const w = obj.w; + if (typeof x !== 'number' || + typeof y !== 'number' || + typeof z !== 'number' || + typeof w !== 'number') { + return false; + } + return true; + } + static equals(v1, v2) { + return v1.x === v2.x && v1.y === v2.y && v1.z === v2.z && v1.w === v2.w; + } + toObject() { + return { + x: this.x, + y: this.y, + z: this.z, + w: this.w, + }; + } + } + const Point4dAssembly = { + toComponents: (p) => p.getComponents(), + fromComponents: (comps) => new Point4d(...comps), + }; + + function point4dFromUnknown(value) { + return Point4d.isObject(value) + ? new Point4d(value.x, value.y, value.z, value.w) + : new Point4d(); + } + function writePoint4d(target, value) { + target.writeProperty('x', value.x); + target.writeProperty('y', value.y); + target.writeProperty('z', value.z); + target.writeProperty('w', value.w); + } + + function createConstraint$1(params, initialValue) { + return new PointNdConstraint({ + assembly: Point4dAssembly, + components: [ + createDimensionConstraint('x' in params ? params.x : undefined, initialValue.x), + createDimensionConstraint('y' in params ? params.y : undefined, initialValue.y), + createDimensionConstraint('z' in params ? params.z : undefined, initialValue.z), + createDimensionConstraint('w' in params ? params.w : undefined, initialValue.w), + ], + }); + } + function createAxis(initialValue, constraint) { + return { + baseStep: getBaseStep(constraint), + constraint: constraint, + textProps: ValueMap.fromObject({ + draggingScale: getSuitableDraggingScale(constraint, initialValue), + formatter: createNumberFormatter(getSuitableDecimalDigits(constraint, initialValue)), + }), + }; + } + const Point4dInputPlugin = { + id: 'input-point4d', + type: 'input', + accept: (value, params) => { + if (!Point4d.isObject(value)) { + return null; + } + const p = ParamsParsers; + const result = parseParams(params, { + x: p.optional.custom(parsePointDimensionParams), + y: p.optional.custom(parsePointDimensionParams), + z: p.optional.custom(parsePointDimensionParams), + w: p.optional.custom(parsePointDimensionParams), + }); + return result + ? { + initialValue: value, + params: result, + } + : null; + }, + binding: { + reader: (_args) => point4dFromUnknown, + constraint: (args) => createConstraint$1(args.params, args.initialValue), + equals: Point4d.equals, + writer: (_args) => writePoint4d, + }, + controller: (args) => { + const value = args.value; + const c = args.constraint; + if (!(c instanceof PointNdConstraint)) { + throw TpError.shouldNeverHappen(); + } + return new PointNdTextController(args.document, { + assembly: Point4dAssembly, + axes: value.rawValue + .getComponents() + .map((comp, index) => createAxis(comp, c.components[index])), + parser: parseNumber, + value: value, + viewProps: args.viewProps, + }); + }, + }; + + function createConstraint(params) { + const constraints = []; + const lc = createListConstraint(params.options); + if (lc) { + constraints.push(lc); + } + return new CompositeConstraint(constraints); + } + const StringInputPlugin = { + id: 'input-string', + type: 'input', + accept: (value, params) => { + if (typeof value !== 'string') { + return null; + } + const p = ParamsParsers; + const result = parseParams(params, { + options: p.optional.custom(parseListOptions), + }); + return result + ? { + initialValue: value, + params: result, + } + : null; + }, + binding: { + reader: (_args) => stringFromUnknown, + constraint: (args) => createConstraint(args.params), + writer: (_args) => writePrimitive, + }, + controller: (args) => { + var _a; + const doc = args.document; + const value = args.value; + const c = args.constraint; + if (c && findConstraint(c, ListConstraint)) { + return new ListController(doc, { + props: ValueMap.fromObject({ + options: (_a = findListItems(c)) !== null && _a !== void 0 ? _a : [], + }), + value: value, + viewProps: args.viewProps, + }); + } + return new TextController(doc, { + parser: (v) => v, + props: ValueMap.fromObject({ + formatter: formatString, + }), + value: value, + viewProps: args.viewProps, + }); + }, + }; + + const Constants = { + monitor: { + defaultInterval: 200, + defaultLineCount: 3, + }, + }; + + const className$2 = ClassName('mll'); + class MultiLogView { + constructor(doc, config) { + this.onValueUpdate_ = this.onValueUpdate_.bind(this); + this.formatter_ = config.formatter; + this.element = doc.createElement('div'); + this.element.classList.add(className$2()); + config.viewProps.bindClassModifiers(this.element); + const textareaElem = doc.createElement('textarea'); + textareaElem.classList.add(className$2('i')); + textareaElem.style.height = `calc(var(--bld-us) * ${config.lineCount})`; + textareaElem.readOnly = true; + config.viewProps.bindDisabled(textareaElem); + this.element.appendChild(textareaElem); + this.textareaElem_ = textareaElem; + config.value.emitter.on('change', this.onValueUpdate_); + this.value = config.value; + this.update_(); + } + update_() { + const elem = this.textareaElem_; + const shouldScroll = elem.scrollTop === elem.scrollHeight - elem.clientHeight; + const lines = []; + this.value.rawValue.forEach((value) => { + if (value !== undefined) { + lines.push(this.formatter_(value)); + } + }); + elem.textContent = lines.join('\n'); + if (shouldScroll) { + elem.scrollTop = elem.scrollHeight; + } + } + onValueUpdate_() { + this.update_(); + } + } + + class MultiLogController { + constructor(doc, config) { + this.value = config.value; + this.viewProps = config.viewProps; + this.view = new MultiLogView(doc, { + formatter: config.formatter, + lineCount: config.lineCount, + value: this.value, + viewProps: this.viewProps, + }); + } + } + + const className$1 = ClassName('sgl'); + class SingleLogView { + constructor(doc, config) { + this.onValueUpdate_ = this.onValueUpdate_.bind(this); + this.formatter_ = config.formatter; + this.element = doc.createElement('div'); + this.element.classList.add(className$1()); + config.viewProps.bindClassModifiers(this.element); + const inputElem = doc.createElement('input'); + inputElem.classList.add(className$1('i')); + inputElem.readOnly = true; + inputElem.type = 'text'; + config.viewProps.bindDisabled(inputElem); + this.element.appendChild(inputElem); + this.inputElement = inputElem; + config.value.emitter.on('change', this.onValueUpdate_); + this.value = config.value; + this.update_(); + } + update_() { + const values = this.value.rawValue; + const lastValue = values[values.length - 1]; + this.inputElement.value = + lastValue !== undefined ? this.formatter_(lastValue) : ''; + } + onValueUpdate_() { + this.update_(); + } + } + + class SingleLogController { + constructor(doc, config) { + this.value = config.value; + this.viewProps = config.viewProps; + this.view = new SingleLogView(doc, { + formatter: config.formatter, + value: this.value, + viewProps: this.viewProps, + }); + } + } + + const BooleanMonitorPlugin = { + id: 'monitor-bool', + type: 'monitor', + accept: (value, params) => { + if (typeof value !== 'boolean') { + return null; + } + const p = ParamsParsers; + const result = parseParams(params, { + lineCount: p.optional.number, + }); + return result + ? { + initialValue: value, + params: result, + } + : null; + }, + binding: { + reader: (_args) => boolFromUnknown, + }, + controller: (args) => { + var _a; + if (args.value.rawValue.length === 1) { + return new SingleLogController(args.document, { + formatter: BooleanFormatter, + value: args.value, + viewProps: args.viewProps, + }); + } + return new MultiLogController(args.document, { + formatter: BooleanFormatter, + lineCount: (_a = args.params.lineCount) !== null && _a !== void 0 ? _a : Constants.monitor.defaultLineCount, + value: args.value, + viewProps: args.viewProps, + }); + }, + }; + + const className = ClassName('grl'); + class GraphLogView { + constructor(doc, config) { + this.onCursorChange_ = this.onCursorChange_.bind(this); + this.onValueUpdate_ = this.onValueUpdate_.bind(this); + this.element = doc.createElement('div'); + this.element.classList.add(className()); + config.viewProps.bindClassModifiers(this.element); + this.formatter_ = config.formatter; + this.props_ = config.props; + this.cursor_ = config.cursor; + this.cursor_.emitter.on('change', this.onCursorChange_); + const svgElem = doc.createElementNS(SVG_NS, 'svg'); + svgElem.classList.add(className('g')); + svgElem.style.height = `calc(var(--bld-us) * ${config.lineCount})`; + this.element.appendChild(svgElem); + this.svgElem_ = svgElem; + const lineElem = doc.createElementNS(SVG_NS, 'polyline'); + this.svgElem_.appendChild(lineElem); + this.lineElem_ = lineElem; + const tooltipElem = doc.createElement('div'); + tooltipElem.classList.add(className('t'), ClassName('tt')()); + this.element.appendChild(tooltipElem); + this.tooltipElem_ = tooltipElem; + config.value.emitter.on('change', this.onValueUpdate_); + this.value = config.value; + this.update_(); + } + get graphElement() { + return this.svgElem_; + } + update_() { + const bounds = this.svgElem_.getBoundingClientRect(); + const maxIndex = this.value.rawValue.length - 1; + const min = this.props_.get('minValue'); + const max = this.props_.get('maxValue'); + const points = []; + this.value.rawValue.forEach((v, index) => { + if (v === undefined) { + return; + } + const x = mapRange(index, 0, maxIndex, 0, bounds.width); + const y = mapRange(v, min, max, bounds.height, 0); + points.push([x, y].join(',')); + }); + this.lineElem_.setAttributeNS(null, 'points', points.join(' ')); + const tooltipElem = this.tooltipElem_; + const value = this.value.rawValue[this.cursor_.rawValue]; + if (value === undefined) { + tooltipElem.classList.remove(className('t', 'a')); + return; + } + const tx = mapRange(this.cursor_.rawValue, 0, maxIndex, 0, bounds.width); + const ty = mapRange(value, min, max, bounds.height, 0); + tooltipElem.style.left = `${tx}px`; + tooltipElem.style.top = `${ty}px`; + tooltipElem.textContent = `${this.formatter_(value)}`; + if (!tooltipElem.classList.contains(className('t', 'a'))) { + tooltipElem.classList.add(className('t', 'a'), className('t', 'in')); + forceReflow(tooltipElem); + tooltipElem.classList.remove(className('t', 'in')); + } + } + onValueUpdate_() { + this.update_(); + } + onCursorChange_() { + this.update_(); + } + } + + class GraphLogController { + constructor(doc, config) { + this.onGraphMouseMove_ = this.onGraphMouseMove_.bind(this); + this.onGraphMouseLeave_ = this.onGraphMouseLeave_.bind(this); + this.onGraphPointerDown_ = this.onGraphPointerDown_.bind(this); + this.onGraphPointerMove_ = this.onGraphPointerMove_.bind(this); + this.onGraphPointerUp_ = this.onGraphPointerUp_.bind(this); + this.props_ = config.props; + this.value = config.value; + this.viewProps = config.viewProps; + this.cursor_ = createValue(-1); + this.view = new GraphLogView(doc, { + cursor: this.cursor_, + formatter: config.formatter, + lineCount: config.lineCount, + props: this.props_, + value: this.value, + viewProps: this.viewProps, + }); + if (!supportsTouch(doc)) { + this.view.element.addEventListener('mousemove', this.onGraphMouseMove_); + this.view.element.addEventListener('mouseleave', this.onGraphMouseLeave_); + } + else { + const ph = new PointerHandler(this.view.element); + ph.emitter.on('down', this.onGraphPointerDown_); + ph.emitter.on('move', this.onGraphPointerMove_); + ph.emitter.on('up', this.onGraphPointerUp_); + } + } + onGraphMouseLeave_() { + this.cursor_.rawValue = -1; + } + onGraphMouseMove_(ev) { + const bounds = this.view.element.getBoundingClientRect(); + this.cursor_.rawValue = Math.floor(mapRange(ev.offsetX, 0, bounds.width, 0, this.value.rawValue.length)); + } + onGraphPointerDown_(ev) { + this.onGraphPointerMove_(ev); + } + onGraphPointerMove_(ev) { + if (!ev.data.point) { + this.cursor_.rawValue = -1; + return; + } + this.cursor_.rawValue = Math.floor(mapRange(ev.data.point.x, 0, ev.data.bounds.width, 0, this.value.rawValue.length)); + } + onGraphPointerUp_() { + this.cursor_.rawValue = -1; + } + } + + function createFormatter(params) { + return 'format' in params && !isEmpty(params.format) + ? params.format + : createNumberFormatter(2); + } + function createTextMonitor(args) { + var _a; + if (args.value.rawValue.length === 1) { + return new SingleLogController(args.document, { + formatter: createFormatter(args.params), + value: args.value, + viewProps: args.viewProps, + }); + } + return new MultiLogController(args.document, { + formatter: createFormatter(args.params), + lineCount: (_a = args.params.lineCount) !== null && _a !== void 0 ? _a : Constants.monitor.defaultLineCount, + value: args.value, + viewProps: args.viewProps, + }); + } + function createGraphMonitor(args) { + var _a, _b, _c; + return new GraphLogController(args.document, { + formatter: createFormatter(args.params), + lineCount: (_a = args.params.lineCount) !== null && _a !== void 0 ? _a : Constants.monitor.defaultLineCount, + props: ValueMap.fromObject({ + maxValue: (_b = ('max' in args.params ? args.params.max : null)) !== null && _b !== void 0 ? _b : 100, + minValue: (_c = ('min' in args.params ? args.params.min : null)) !== null && _c !== void 0 ? _c : 0, + }), + value: args.value, + viewProps: args.viewProps, + }); + } + function shouldShowGraph(params) { + return 'view' in params && params.view === 'graph'; + } + const NumberMonitorPlugin = { + id: 'monitor-number', + type: 'monitor', + accept: (value, params) => { + if (typeof value !== 'number') { + return null; + } + const p = ParamsParsers; + const result = parseParams(params, { + format: p.optional.function, + lineCount: p.optional.number, + max: p.optional.number, + min: p.optional.number, + view: p.optional.string, + }); + return result + ? { + initialValue: value, + params: result, + } + : null; + }, + binding: { + defaultBufferSize: (params) => (shouldShowGraph(params) ? 64 : 1), + reader: (_args) => numberFromUnknown, + }, + controller: (args) => { + if (shouldShowGraph(args.params)) { + return createGraphMonitor(args); + } + return createTextMonitor(args); + }, + }; + + const StringMonitorPlugin = { + id: 'monitor-string', + type: 'monitor', + accept: (value, params) => { + if (typeof value !== 'string') { + return null; + } + const p = ParamsParsers; + const result = parseParams(params, { + lineCount: p.optional.number, + multiline: p.optional.boolean, + }); + return result + ? { + initialValue: value, + params: result, + } + : null; + }, + binding: { + reader: (_args) => stringFromUnknown, + }, + controller: (args) => { + var _a; + const value = args.value; + const multiline = value.rawValue.length > 1 || + ('multiline' in args.params && args.params.multiline); + if (multiline) { + return new MultiLogController(args.document, { + formatter: formatString, + lineCount: (_a = args.params.lineCount) !== null && _a !== void 0 ? _a : Constants.monitor.defaultLineCount, + value: value, + viewProps: args.viewProps, + }); + } + return new SingleLogController(args.document, { + formatter: formatString, + value: value, + viewProps: args.viewProps, + }); + }, + }; + + class InputBinding { + constructor(config) { + this.onValueChange_ = this.onValueChange_.bind(this); + this.reader = config.reader; + this.writer = config.writer; + this.emitter = new Emitter(); + this.value = config.value; + this.value.emitter.on('change', this.onValueChange_); + this.target = config.target; + this.read(); + } + read() { + const targetValue = this.target.read(); + if (targetValue !== undefined) { + this.value.rawValue = this.reader(targetValue); + } + } + write_(rawValue) { + this.writer(this.target, rawValue); + } + onValueChange_(ev) { + this.write_(ev.rawValue); + this.emitter.emit('change', { + options: ev.options, + rawValue: ev.rawValue, + sender: this, + }); + } + } + + function createInputBindingController(plugin, args) { + const result = plugin.accept(args.target.read(), args.params); + if (isEmpty(result)) { + return null; + } + const p = ParamsParsers; + const valueArgs = { + target: args.target, + initialValue: result.initialValue, + params: result.params, + }; + const reader = plugin.binding.reader(valueArgs); + const constraint = plugin.binding.constraint + ? plugin.binding.constraint(valueArgs) + : undefined; + const value = createValue(reader(result.initialValue), { + constraint: constraint, + equals: plugin.binding.equals, + }); + const binding = new InputBinding({ + reader: reader, + target: args.target, + value: value, + writer: plugin.binding.writer(valueArgs), + }); + const disabled = p.optional.boolean(args.params.disabled).value; + const hidden = p.optional.boolean(args.params.hidden).value; + const controller = plugin.controller({ + constraint: constraint, + document: args.document, + initialValue: result.initialValue, + params: result.params, + value: binding.value, + viewProps: ViewProps.create({ + disabled: disabled, + hidden: hidden, + }), + }); + const label = p.optional.string(args.params.label).value; + return new InputBindingController(args.document, { + binding: binding, + blade: createBlade(), + props: ValueMap.fromObject({ + label: label !== null && label !== void 0 ? label : args.target.key, + }), + valueController: controller, + }); + } + + class MonitorBinding { + constructor(config) { + this.onTick_ = this.onTick_.bind(this); + this.reader_ = config.reader; + this.target = config.target; + this.emitter = new Emitter(); + this.value = config.value; + this.ticker = config.ticker; + this.ticker.emitter.on('tick', this.onTick_); + this.read(); + } + dispose() { + this.ticker.dispose(); + } + read() { + const targetValue = this.target.read(); + if (targetValue === undefined) { + return; + } + const buffer = this.value.rawValue; + const newValue = this.reader_(targetValue); + this.value.rawValue = createPushedBuffer(buffer, newValue); + this.emitter.emit('update', { + rawValue: newValue, + sender: this, + }); + } + onTick_(_) { + this.read(); + } + } + + function createTicker(document, interval) { + return interval === 0 + ? new ManualTicker() + : new IntervalTicker(document, interval !== null && interval !== void 0 ? interval : Constants.monitor.defaultInterval); + } + function createMonitorBindingController(plugin, args) { + var _a, _b, _c; + const P = ParamsParsers; + const result = plugin.accept(args.target.read(), args.params); + if (isEmpty(result)) { + return null; + } + const bindingArgs = { + target: args.target, + initialValue: result.initialValue, + params: result.params, + }; + const reader = plugin.binding.reader(bindingArgs); + const bufferSize = (_b = (_a = P.optional.number(args.params.bufferSize).value) !== null && _a !== void 0 ? _a : (plugin.binding.defaultBufferSize && + plugin.binding.defaultBufferSize(result.params))) !== null && _b !== void 0 ? _b : 1; + const interval = P.optional.number(args.params.interval).value; + const binding = new MonitorBinding({ + reader: reader, + target: args.target, + ticker: createTicker(args.document, interval), + value: initializeBuffer(bufferSize), + }); + const disabled = P.optional.boolean(args.params.disabled).value; + const hidden = P.optional.boolean(args.params.hidden).value; + const controller = plugin.controller({ + document: args.document, + params: result.params, + value: binding.value, + viewProps: ViewProps.create({ + disabled: disabled, + hidden: hidden, + }), + }); + const label = (_c = P.optional.string(args.params.label).value) !== null && _c !== void 0 ? _c : args.target.key; + return new MonitorBindingController(args.document, { + binding: binding, + blade: createBlade(), + props: ValueMap.fromObject({ + label: label, + }), + valueController: controller, + }); + } + + class PluginPool { + constructor() { + this.pluginsMap_ = { + blades: [], + inputs: [], + monitors: [], + }; + } + getAll() { + return [ + ...this.pluginsMap_.blades, + ...this.pluginsMap_.inputs, + ...this.pluginsMap_.monitors, + ]; + } + register(r) { + if (r.type === 'blade') { + this.pluginsMap_.blades.unshift(r); + } + else if (r.type === 'input') { + this.pluginsMap_.inputs.unshift(r); + } + else if (r.type === 'monitor') { + this.pluginsMap_.monitors.unshift(r); + } + } + createInput(document, target, params) { + const initialValue = target.read(); + if (isEmpty(initialValue)) { + throw new TpError({ + context: { + key: target.key, + }, + type: 'nomatchingcontroller', + }); + } + const bc = this.pluginsMap_.inputs.reduce((result, plugin) => result !== null && result !== void 0 ? result : createInputBindingController(plugin, { + document: document, + target: target, + params: params, + }), null); + if (bc) { + return bc; + } + throw new TpError({ + context: { + key: target.key, + }, + type: 'nomatchingcontroller', + }); + } + createMonitor(document, target, params) { + const bc = this.pluginsMap_.monitors.reduce((result, plugin) => result !== null && result !== void 0 ? result : createMonitorBindingController(plugin, { + document: document, + params: params, + target: target, + }), null); + if (bc) { + return bc; + } + throw new TpError({ + context: { + key: target.key, + }, + type: 'nomatchingcontroller', + }); + } + createBlade(document, params) { + const bc = this.pluginsMap_.blades.reduce((result, plugin) => result !== null && result !== void 0 ? result : createBladeController(plugin, { + document: document, + params: params, + }), null); + if (!bc) { + throw new TpError({ + type: 'nomatchingview', + context: { + params: params, + }, + }); + } + return bc; + } + createBladeApi(bc) { + if (bc instanceof InputBindingController) { + return new InputBindingApi(bc); + } + if (bc instanceof MonitorBindingController) { + return new MonitorBindingApi(bc); + } + if (bc instanceof RackController) { + return new RackApi(bc, this); + } + const api = this.pluginsMap_.blades.reduce((result, plugin) => result !== null && result !== void 0 ? result : plugin.api({ + controller: bc, + pool: this, + }), null); + if (!api) { + throw TpError.shouldNeverHappen(); + } + return api; + } + } + + function createDefaultPluginPool() { + const pool = new PluginPool(); + [ + Point2dInputPlugin, + Point3dInputPlugin, + Point4dInputPlugin, + StringInputPlugin, + NumberInputPlugin, + StringColorInputPlugin, + ObjectColorInputPlugin, + NumberColorInputPlugin, + BooleanInputPlugin, + BooleanMonitorPlugin, + StringMonitorPlugin, + NumberMonitorPlugin, + ButtonBladePlugin, + FolderBladePlugin, + SeparatorBladePlugin, + TabBladePlugin, + ].forEach((p) => { + pool.register(p); + }); + return pool; + } + + class ListApi extends BladeApi { + constructor(controller) { + super(controller); + this.emitter_ = new Emitter(); + this.controller_.valueController.value.emitter.on('change', (ev) => { + this.emitter_.emit('change', { + event: new TpChangeEvent(this, ev.rawValue), + }); + }); + } + get label() { + return this.controller_.props.get('label'); + } + set label(label) { + this.controller_.props.set('label', label); + } + get options() { + return this.controller_.valueController.props.get('options'); + } + set options(options) { + this.controller_.valueController.props.set('options', options); + } + get value() { + return this.controller_.valueController.value.rawValue; + } + set value(value) { + this.controller_.valueController.value.rawValue = value; + } + on(eventName, handler) { + const bh = handler.bind(this); + this.emitter_.on(eventName, (ev) => { + bh(ev.event); + }); + return this; + } + } + + class SliderApi extends BladeApi { + constructor(controller) { + super(controller); + this.emitter_ = new Emitter(); + this.controller_.valueController.value.emitter.on('change', (ev) => { + this.emitter_.emit('change', { + event: new TpChangeEvent(this, ev.rawValue), + }); + }); + } + get label() { + return this.controller_.props.get('label'); + } + set label(label) { + this.controller_.props.set('label', label); + } + get maxValue() { + return this.controller_.valueController.sliderController.props.get('maxValue'); + } + set maxValue(maxValue) { + this.controller_.valueController.sliderController.props.set('maxValue', maxValue); + } + get minValue() { + return this.controller_.valueController.sliderController.props.get('minValue'); + } + set minValue(minValue) { + this.controller_.valueController.sliderController.props.set('minValue', minValue); + } + get value() { + return this.controller_.valueController.value.rawValue; + } + set value(value) { + this.controller_.valueController.value.rawValue = value; + } + on(eventName, handler) { + const bh = handler.bind(this); + this.emitter_.on(eventName, (ev) => { + bh(ev.event); + }); + return this; + } + } + + class TextApi extends BladeApi { + constructor(controller) { + super(controller); + this.emitter_ = new Emitter(); + this.controller_.valueController.value.emitter.on('change', (ev) => { + this.emitter_.emit('change', { + event: new TpChangeEvent(this, ev.rawValue), + }); + }); + } + get label() { + return this.controller_.props.get('label'); + } + set label(label) { + this.controller_.props.set('label', label); + } + get formatter() { + return this.controller_.valueController.props.get('formatter'); + } + set formatter(formatter) { + this.controller_.valueController.props.set('formatter', formatter); + } + get value() { + return this.controller_.valueController.value.rawValue; + } + set value(value) { + this.controller_.valueController.value.rawValue = value; + } + on(eventName, handler) { + const bh = handler.bind(this); + this.emitter_.on(eventName, (ev) => { + bh(ev.event); + }); + return this; + } + } + + const ListBladePlugin = (function () { + return { + id: 'list', + type: 'blade', + accept(params) { + const p = ParamsParsers; + const result = parseParams(params, { + options: p.required.custom(parseListOptions), + value: p.required.raw, + view: p.required.constant('list'), + label: p.optional.string, + }); + return result ? { params: result } : null; + }, + controller(args) { + const ic = new ListController(args.document, { + props: ValueMap.fromObject({ + options: normalizeListOptions(args.params.options), + }), + value: createValue(args.params.value), + viewProps: args.viewProps, + }); + return new LabeledValueController(args.document, { + blade: args.blade, + props: ValueMap.fromObject({ + label: args.params.label, + }), + valueController: ic, + }); + }, + api(args) { + if (!(args.controller instanceof LabeledValueController)) { + return null; + } + if (!(args.controller.valueController instanceof ListController)) { + return null; + } + return new ListApi(args.controller); + }, + }; + })(); + + /** + * @hidden + */ + function exportPresetJson(targets) { + return targets.reduce((result, target) => { + return Object.assign(result, { + [target.presetKey]: target.read(), + }); + }, {}); + } + /** + * @hidden + */ + function importPresetJson(targets, preset) { + targets.forEach((target) => { + const value = preset[target.presetKey]; + if (value !== undefined) { + target.write(value); + } + }); + } + + class RootApi extends FolderApi { + /** + * @hidden + */ + constructor(controller, pool) { + super(controller, pool); + } + get element() { + return this.controller_.view.element; + } + /** + * Imports a preset of all inputs. + * @param preset The preset object to import. + */ + importPreset(preset) { + const targets = this.controller_.rackController.rack + .find(InputBindingController) + .map((ibc) => { + return ibc.binding.target; + }); + importPresetJson(targets, preset); + this.refresh(); + } + /** + * Exports a preset of all inputs. + * @return An exported preset object. + */ + exportPreset() { + const targets = this.controller_.rackController.rack + .find(InputBindingController) + .map((ibc) => { + return ibc.binding.target; + }); + return exportPresetJson(targets); + } + /** + * Refreshes all bindings of the pane. + */ + refresh() { + // Force-read all input bindings + this.controller_.rackController.rack + .find(InputBindingController) + .forEach((ibc) => { + ibc.binding.read(); + }); + // Force-read all monitor bindings + this.controller_.rackController.rack + .find(MonitorBindingController) + .forEach((mbc) => { + mbc.binding.read(); + }); + } + } + + class RootController extends FolderController { + constructor(doc, config) { + super(doc, { + expanded: config.expanded, + blade: config.blade, + props: config.props, + root: true, + viewProps: config.viewProps, + }); + } + } + + const SliderBladePlugin = { + id: 'slider', + type: 'blade', + accept(params) { + const p = ParamsParsers; + const result = parseParams(params, { + max: p.required.number, + min: p.required.number, + view: p.required.constant('slider'), + format: p.optional.function, + label: p.optional.string, + value: p.optional.number, + }); + return result ? { params: result } : null; + }, + controller(args) { + var _a, _b; + const v = (_a = args.params.value) !== null && _a !== void 0 ? _a : 0; + const vc = new SliderTextController(args.document, { + baseStep: 1, + parser: parseNumber, + sliderProps: ValueMap.fromObject({ + maxValue: args.params.max, + minValue: args.params.min, + }), + textProps: ValueMap.fromObject({ + draggingScale: getSuitableDraggingScale(undefined, v), + formatter: (_b = args.params.format) !== null && _b !== void 0 ? _b : numberToString, + }), + value: createValue(v), + viewProps: args.viewProps, + }); + return new LabeledValueController(args.document, { + blade: args.blade, + props: ValueMap.fromObject({ + label: args.params.label, + }), + valueController: vc, + }); + }, + api(args) { + if (!(args.controller instanceof LabeledValueController)) { + return null; + } + if (!(args.controller.valueController instanceof SliderTextController)) { + return null; + } + return new SliderApi(args.controller); + }, + }; + + const TextBladePlugin = (function () { + return { + id: 'text', + type: 'blade', + accept(params) { + const p = ParamsParsers; + const result = parseParams(params, { + parse: p.required.function, + value: p.required.raw, + view: p.required.constant('text'), + format: p.optional.function, + label: p.optional.string, + }); + return result ? { params: result } : null; + }, + controller(args) { + var _a; + const ic = new TextController(args.document, { + parser: args.params.parse, + props: ValueMap.fromObject({ + formatter: (_a = args.params.format) !== null && _a !== void 0 ? _a : ((v) => String(v)), + }), + value: createValue(args.params.value), + viewProps: args.viewProps, + }); + return new LabeledValueController(args.document, { + blade: args.blade, + props: ValueMap.fromObject({ + label: args.params.label, + }), + valueController: ic, + }); + }, + api(args) { + if (!(args.controller instanceof LabeledValueController)) { + return null; + } + if (!(args.controller.valueController instanceof TextController)) { + return null; + } + return new TextApi(args.controller); + }, + }; + })(); + + function createDefaultWrapperElement(doc) { + const elem = doc.createElement('div'); + elem.classList.add(ClassName('dfw')()); + if (doc.body) { + doc.body.appendChild(elem); + } + return elem; + } + function embedStyle(doc, id, css) { + if (doc.querySelector(`style[data-tp-style=${id}]`)) { + return; + } + const styleElem = doc.createElement('style'); + styleElem.dataset.tpStyle = id; + styleElem.textContent = css; + doc.head.appendChild(styleElem); + } + /** + * The root pane of Tweakpane. + */ + class Pane extends RootApi { + constructor(opt_config) { + var _a, _b; + const config = opt_config !== null && opt_config !== void 0 ? opt_config : {}; + const doc = (_a = config.document) !== null && _a !== void 0 ? _a : getWindowDocument(); + const pool = createDefaultPluginPool(); + const rootController = new RootController(doc, { + expanded: config.expanded, + blade: createBlade(), + props: ValueMap.fromObject({ + title: config.title, + }), + viewProps: ViewProps.create(), + }); + super(rootController, pool); + this.pool_ = pool; + this.containerElem_ = (_b = config.container) !== null && _b !== void 0 ? _b : createDefaultWrapperElement(doc); + this.containerElem_.appendChild(this.element); + this.doc_ = doc; + this.usesDefaultWrapper_ = !config.container; + this.setUpDefaultPlugins_(); + } + get document() { + if (!this.doc_) { + throw TpError.alreadyDisposed(); + } + return this.doc_; + } + dispose() { + const containerElem = this.containerElem_; + if (!containerElem) { + throw TpError.alreadyDisposed(); + } + if (this.usesDefaultWrapper_) { + const parentElem = containerElem.parentElement; + if (parentElem) { + parentElem.removeChild(containerElem); + } + } + this.containerElem_ = null; + this.doc_ = null; + super.dispose(); + } + registerPlugin(bundle) { + const plugins = 'plugin' in bundle + ? [bundle.plugin] + : 'plugins' in bundle + ? bundle.plugins + : []; + plugins.forEach((p) => { + this.pool_.register(p); + this.embedPluginStyle_(p); + }); + } + embedPluginStyle_(plugin) { + if (plugin.css) { + embedStyle(this.document, `plugin-${plugin.id}`, plugin.css); + } + } + setUpDefaultPlugins_() { + // NOTE: This string literal will be replaced with the default CSS by Rollup at the compilation time + embedStyle(this.document, 'default', '.tp-tbiv_b,.tp-coltxtv_ms,.tp-ckbv_i,.tp-rotv_b,.tp-fldv_b,.tp-mllv_i,.tp-sglv_i,.tp-grlv_g,.tp-txtv_i,.tp-p2dpv_p,.tp-colswv_sw,.tp-p2dv_b,.tp-btnv_b,.tp-lstv_s{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;font-family:inherit;font-size:inherit;font-weight:inherit;margin:0;outline:none;padding:0}.tp-p2dv_b,.tp-btnv_b,.tp-lstv_s{background-color:var(--btn-bg);border-radius:var(--elm-br);color:var(--btn-fg);cursor:pointer;display:block;font-weight:bold;height:var(--bld-us);line-height:var(--bld-us);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tp-p2dv_b:hover,.tp-btnv_b:hover,.tp-lstv_s:hover{background-color:var(--btn-bg-h)}.tp-p2dv_b:focus,.tp-btnv_b:focus,.tp-lstv_s:focus{background-color:var(--btn-bg-f)}.tp-p2dv_b:active,.tp-btnv_b:active,.tp-lstv_s:active{background-color:var(--btn-bg-a)}.tp-p2dv_b:disabled,.tp-btnv_b:disabled,.tp-lstv_s:disabled{opacity:.5}.tp-txtv_i,.tp-p2dpv_p,.tp-colswv_sw{background-color:var(--in-bg);border-radius:var(--elm-br);box-sizing:border-box;color:var(--in-fg);font-family:inherit;height:var(--bld-us);line-height:var(--bld-us);min-width:0;width:100%}.tp-txtv_i:hover,.tp-p2dpv_p:hover,.tp-colswv_sw:hover{background-color:var(--in-bg-h)}.tp-txtv_i:focus,.tp-p2dpv_p:focus,.tp-colswv_sw:focus{background-color:var(--in-bg-f)}.tp-txtv_i:active,.tp-p2dpv_p:active,.tp-colswv_sw:active{background-color:var(--in-bg-a)}.tp-txtv_i:disabled,.tp-p2dpv_p:disabled,.tp-colswv_sw:disabled{opacity:.5}.tp-mllv_i,.tp-sglv_i,.tp-grlv_g{background-color:var(--mo-bg);border-radius:var(--elm-br);box-sizing:border-box;color:var(--mo-fg);height:var(--bld-us);scrollbar-color:currentColor transparent;scrollbar-width:thin;width:100%}.tp-mllv_i::-webkit-scrollbar,.tp-sglv_i::-webkit-scrollbar,.tp-grlv_g::-webkit-scrollbar{height:8px;width:8px}.tp-mllv_i::-webkit-scrollbar-corner,.tp-sglv_i::-webkit-scrollbar-corner,.tp-grlv_g::-webkit-scrollbar-corner{background-color:transparent}.tp-mllv_i::-webkit-scrollbar-thumb,.tp-sglv_i::-webkit-scrollbar-thumb,.tp-grlv_g::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:currentColor;border:transparent solid 2px;border-radius:4px}.tp-rotv{--font-family: var(--tp-font-family, Roboto Mono, Source Code Pro, Menlo, Courier, monospace);--bs-br: var(--tp-base-border-radius, 6px);--cnt-h-p: var(--tp-container-horizontal-padding, 4px);--cnt-v-p: var(--tp-container-vertical-padding, 4px);--elm-br: var(--tp-element-border-radius, 2px);--bld-s: var(--tp-blade-spacing, 4px);--bld-us: var(--tp-blade-unit-size, 20px);--bs-bg: var(--tp-base-background-color, #28292e);--bs-sh: var(--tp-base-shadow-color, rgba(0, 0, 0, 0.2));--btn-bg: var(--tp-button-background-color, #adafb8);--btn-bg-a: var(--tp-button-background-color-active, #d6d7db);--btn-bg-f: var(--tp-button-background-color-focus, #c8cad0);--btn-bg-h: var(--tp-button-background-color-hover, #bbbcc4);--btn-fg: var(--tp-button-foreground-color, #28292e);--cnt-bg: var(--tp-container-background-color, rgba(187, 188, 196, 0.1));--cnt-bg-a: var(--tp-container-background-color-active, rgba(187, 188, 196, 0.25));--cnt-bg-f: var(--tp-container-background-color-focus, rgba(187, 188, 196, 0.2));--cnt-bg-h: var(--tp-container-background-color-hover, rgba(187, 188, 196, 0.15));--cnt-fg: var(--tp-container-foreground-color, #bbbcc4);--in-bg: var(--tp-input-background-color, rgba(187, 188, 196, 0.1));--in-bg-a: var(--tp-input-background-color-active, rgba(187, 188, 196, 0.25));--in-bg-f: var(--tp-input-background-color-focus, rgba(187, 188, 196, 0.2));--in-bg-h: var(--tp-input-background-color-hover, rgba(187, 188, 196, 0.15));--in-fg: var(--tp-input-foreground-color, #bbbcc4);--lbl-fg: var(--tp-label-foreground-color, rgba(187, 188, 196, 0.7));--mo-bg: var(--tp-monitor-background-color, rgba(0, 0, 0, 0.2));--mo-fg: var(--tp-monitor-foreground-color, rgba(187, 188, 196, 0.7));--grv-fg: var(--tp-groove-foreground-color, rgba(187, 188, 196, 0.1))}.tp-rotv_c>.tp-cntv.tp-v-lst,.tp-tabv_c .tp-brkv>.tp-cntv.tp-v-lst,.tp-fldv_c>.tp-cntv.tp-v-lst{margin-bottom:calc(-1*var(--cnt-v-p))}.tp-rotv_c>.tp-fldv.tp-v-lst .tp-fldv_c,.tp-tabv_c .tp-brkv>.tp-fldv.tp-v-lst .tp-fldv_c,.tp-fldv_c>.tp-fldv.tp-v-lst .tp-fldv_c{border-bottom-left-radius:0}.tp-rotv_c>.tp-fldv.tp-v-lst .tp-fldv_b,.tp-tabv_c .tp-brkv>.tp-fldv.tp-v-lst .tp-fldv_b,.tp-fldv_c>.tp-fldv.tp-v-lst .tp-fldv_b{border-bottom-left-radius:0}.tp-rotv_c>*:not(.tp-v-fst),.tp-tabv_c .tp-brkv>*:not(.tp-v-fst),.tp-fldv_c>*:not(.tp-v-fst){margin-top:var(--bld-s)}.tp-rotv_c>.tp-sprv:not(.tp-v-fst),.tp-tabv_c .tp-brkv>.tp-sprv:not(.tp-v-fst),.tp-fldv_c>.tp-sprv:not(.tp-v-fst),.tp-rotv_c>.tp-cntv:not(.tp-v-fst),.tp-tabv_c .tp-brkv>.tp-cntv:not(.tp-v-fst),.tp-fldv_c>.tp-cntv:not(.tp-v-fst){margin-top:var(--cnt-v-p)}.tp-rotv_c>.tp-sprv+*:not(.tp-v-hidden),.tp-tabv_c .tp-brkv>.tp-sprv+*:not(.tp-v-hidden),.tp-fldv_c>.tp-sprv+*:not(.tp-v-hidden),.tp-rotv_c>.tp-cntv+*:not(.tp-v-hidden),.tp-tabv_c .tp-brkv>.tp-cntv+*:not(.tp-v-hidden),.tp-fldv_c>.tp-cntv+*:not(.tp-v-hidden){margin-top:var(--cnt-v-p)}.tp-rotv_c>.tp-sprv:not(.tp-v-hidden)+.tp-sprv,.tp-tabv_c .tp-brkv>.tp-sprv:not(.tp-v-hidden)+.tp-sprv,.tp-fldv_c>.tp-sprv:not(.tp-v-hidden)+.tp-sprv,.tp-rotv_c>.tp-cntv:not(.tp-v-hidden)+.tp-cntv,.tp-tabv_c .tp-brkv>.tp-cntv:not(.tp-v-hidden)+.tp-cntv,.tp-fldv_c>.tp-cntv:not(.tp-v-hidden)+.tp-cntv{margin-top:0}.tp-tabv_c .tp-brkv>.tp-cntv,.tp-fldv_c>.tp-cntv{margin-left:4px}.tp-tabv_c .tp-brkv>.tp-fldv>.tp-fldv_b,.tp-fldv_c>.tp-fldv>.tp-fldv_b{border-top-left-radius:var(--elm-br);border-bottom-left-radius:var(--elm-br)}.tp-tabv_c .tp-brkv>.tp-fldv.tp-fldv-expanded>.tp-fldv_b,.tp-fldv_c>.tp-fldv.tp-fldv-expanded>.tp-fldv_b{border-bottom-left-radius:0}.tp-tabv_c .tp-brkv .tp-fldv>.tp-fldv_c,.tp-fldv_c .tp-fldv>.tp-fldv_c{border-bottom-left-radius:var(--elm-br)}.tp-tabv_c .tp-brkv>.tp-tabv>.tp-tabv_i,.tp-fldv_c>.tp-tabv>.tp-tabv_i{border-top-left-radius:var(--elm-br)}.tp-tabv_c .tp-brkv .tp-tabv>.tp-tabv_c,.tp-fldv_c .tp-tabv>.tp-tabv_c{border-bottom-left-radius:var(--elm-br)}.tp-rotv_b,.tp-fldv_b{background-color:var(--cnt-bg);color:var(--cnt-fg);cursor:pointer;display:block;height:calc(var(--bld-us) + 4px);line-height:calc(var(--bld-us) + 4px);overflow:hidden;padding-left:var(--cnt-h-p);padding-right:calc(4px + var(--bld-us) + var(--cnt-h-p));position:relative;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;transition:border-radius .2s ease-in-out .2s}.tp-rotv_b:hover,.tp-fldv_b:hover{background-color:var(--cnt-bg-h)}.tp-rotv_b:focus,.tp-fldv_b:focus{background-color:var(--cnt-bg-f)}.tp-rotv_b:active,.tp-fldv_b:active{background-color:var(--cnt-bg-a)}.tp-rotv_b:disabled,.tp-fldv_b:disabled{opacity:.5}.tp-rotv_m,.tp-fldv_m{background:linear-gradient(to left, var(--cnt-fg), var(--cnt-fg) 2px, transparent 2px, transparent 4px, var(--cnt-fg) 4px);border-radius:2px;bottom:0;content:"";display:block;height:6px;right:calc(var(--cnt-h-p) + (var(--bld-us) + 4px - 6px)/2 - 2px);margin:auto;opacity:.5;position:absolute;top:0;transform:rotate(90deg);transition:transform .2s ease-in-out;width:6px}.tp-rotv.tp-rotv-expanded .tp-rotv_m,.tp-fldv.tp-fldv-expanded>.tp-fldv_b>.tp-fldv_m{transform:none}.tp-rotv_c,.tp-fldv_c{box-sizing:border-box;height:0;opacity:0;overflow:hidden;padding-bottom:0;padding-top:0;position:relative;transition:height .2s ease-in-out,opacity .2s linear,padding .2s ease-in-out}.tp-rotv.tp-rotv-cpl:not(.tp-rotv-expanded) .tp-rotv_c,.tp-fldv.tp-fldv-cpl:not(.tp-fldv-expanded)>.tp-fldv_c{display:none}.tp-rotv.tp-rotv-expanded .tp-rotv_c,.tp-fldv.tp-fldv-expanded>.tp-fldv_c{opacity:1;padding-bottom:var(--cnt-v-p);padding-top:var(--cnt-v-p);transform:none;overflow:visible;transition:height .2s ease-in-out,opacity .2s linear .2s,padding .2s ease-in-out}.tp-lstv,.tp-coltxtv_m{position:relative}.tp-lstv_s{padding:0 20px 0 4px;width:100%}.tp-lstv_m,.tp-coltxtv_mm{bottom:0;margin:auto;pointer-events:none;position:absolute;right:2px;top:0}.tp-lstv_m svg,.tp-coltxtv_mm svg{bottom:0;height:16px;margin:auto;position:absolute;right:0;top:0;width:16px}.tp-lstv_m svg path,.tp-coltxtv_mm svg path{fill:currentColor}.tp-pndtxtv,.tp-coltxtv_w{display:flex}.tp-pndtxtv_a,.tp-coltxtv_c{width:100%}.tp-pndtxtv_a+.tp-pndtxtv_a,.tp-coltxtv_c+.tp-pndtxtv_a,.tp-pndtxtv_a+.tp-coltxtv_c,.tp-coltxtv_c+.tp-coltxtv_c{margin-left:2px}.tp-btnv_b{width:100%}.tp-btnv_t{text-align:center}.tp-ckbv_l{display:block;position:relative}.tp-ckbv_i{left:0;opacity:0;position:absolute;top:0}.tp-ckbv_w{background-color:var(--in-bg);border-radius:var(--elm-br);cursor:pointer;display:block;height:var(--bld-us);position:relative;width:var(--bld-us)}.tp-ckbv_w svg{bottom:0;display:block;height:16px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;width:16px}.tp-ckbv_w svg path{fill:none;stroke:var(--in-fg);stroke-width:2}.tp-ckbv_i:hover+.tp-ckbv_w{background-color:var(--in-bg-h)}.tp-ckbv_i:focus+.tp-ckbv_w{background-color:var(--in-bg-f)}.tp-ckbv_i:active+.tp-ckbv_w{background-color:var(--in-bg-a)}.tp-ckbv_i:checked+.tp-ckbv_w svg{opacity:1}.tp-ckbv.tp-v-disabled .tp-ckbv_w{opacity:.5}.tp-colv{position:relative}.tp-colv_h{display:flex}.tp-colv_s{flex-grow:0;flex-shrink:0;width:var(--bld-us)}.tp-colv_t{flex:1;margin-left:4px}.tp-colv_p{height:0;margin-top:0;opacity:0;overflow:hidden;transition:height .2s ease-in-out,opacity .2s linear,margin .2s ease-in-out}.tp-colv.tp-colv-cpl .tp-colv_p{overflow:visible}.tp-colv.tp-colv-expanded .tp-colv_p{margin-top:var(--bld-s);opacity:1}.tp-colv .tp-popv{left:calc(-1*var(--cnt-h-p));right:calc(-1*var(--cnt-h-p));top:var(--bld-us)}.tp-colpv_h,.tp-colpv_ap{margin-left:6px;margin-right:6px}.tp-colpv_h{margin-top:var(--bld-s)}.tp-colpv_rgb{display:flex;margin-top:var(--bld-s);width:100%}.tp-colpv_a{display:flex;margin-top:var(--cnt-v-p);padding-top:calc(var(--cnt-v-p) + 2px);position:relative}.tp-colpv_a:before{background-color:var(--grv-fg);content:"";height:2px;left:calc(-1*var(--cnt-h-p));position:absolute;right:calc(-1*var(--cnt-h-p));top:0}.tp-colpv_ap{align-items:center;display:flex;flex:3}.tp-colpv_at{flex:1;margin-left:4px}.tp-svpv{border-radius:var(--elm-br);outline:none;overflow:hidden;position:relative}.tp-svpv_c{cursor:crosshair;display:block;height:calc(var(--bld-us)*4);width:100%}.tp-svpv_m{border-radius:100%;border:rgba(255,255,255,.75) solid 2px;box-sizing:border-box;filter:drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));height:12px;margin-left:-6px;margin-top:-6px;pointer-events:none;position:absolute;width:12px}.tp-svpv:focus .tp-svpv_m{border-color:#fff}.tp-hplv{cursor:pointer;height:var(--bld-us);outline:none;position:relative}.tp-hplv_c{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAABCAYAAABubagXAAAAQ0lEQVQoU2P8z8Dwn0GCgQEDi2OK/RBgYHjBgIpfovFh8j8YBIgzFGQxuqEgPhaDOT5gOhPkdCxOZeBg+IDFZZiGAgCaSSMYtcRHLgAAAABJRU5ErkJggg==);background-position:left top;background-repeat:no-repeat;background-size:100% 100%;border-radius:2px;display:block;height:4px;left:0;margin-top:-2px;position:absolute;top:50%;width:100%}.tp-hplv_m{border-radius:var(--elm-br);border:rgba(255,255,255,.75) solid 2px;box-shadow:0 0 2px rgba(0,0,0,.1);box-sizing:border-box;height:12px;left:50%;margin-left:-6px;margin-top:-6px;pointer-events:none;position:absolute;top:50%;width:12px}.tp-hplv:focus .tp-hplv_m{border-color:#fff}.tp-aplv{cursor:pointer;height:var(--bld-us);outline:none;position:relative;width:100%}.tp-aplv_b{background-color:#fff;background-image:linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);background-size:4px 4px;background-position:0 0,2px 2px;border-radius:2px;display:block;height:4px;left:0;margin-top:-2px;overflow:hidden;position:absolute;top:50%;width:100%}.tp-aplv_c{bottom:0;left:0;position:absolute;right:0;top:0}.tp-aplv_m{background-color:#fff;background-image:linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);background-size:12px 12px;background-position:0 0,6px 6px;border-radius:var(--elm-br);box-shadow:0 0 2px rgba(0,0,0,.1);height:12px;left:50%;margin-left:-6px;margin-top:-6px;overflow:hidden;pointer-events:none;position:absolute;top:50%;width:12px}.tp-aplv_p{border-radius:var(--elm-br);border:rgba(255,255,255,.75) solid 2px;box-sizing:border-box;bottom:0;left:0;position:absolute;right:0;top:0}.tp-aplv:focus .tp-aplv_p{border-color:#fff}.tp-colswv{background-color:#fff;background-image:linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);background-size:10px 10px;background-position:0 0,5px 5px;border-radius:var(--elm-br);overflow:hidden}.tp-colswv.tp-v-disabled{opacity:.5}.tp-colswv_sw{border-radius:0}.tp-colswv_b{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;cursor:pointer;display:block;height:var(--bld-us);left:0;margin:0;outline:none;padding:0;position:absolute;top:0;width:var(--bld-us)}.tp-colswv_b:focus::after{border:rgba(255,255,255,.75) solid 2px;border-radius:var(--elm-br);bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}.tp-coltxtv{display:flex;width:100%}.tp-coltxtv_m{margin-right:4px}.tp-coltxtv_ms{border-radius:var(--elm-br);color:var(--lbl-fg);cursor:pointer;height:var(--bld-us);line-height:var(--bld-us);padding:0 18px 0 4px}.tp-coltxtv_ms:hover{background-color:var(--in-bg-h)}.tp-coltxtv_ms:focus{background-color:var(--in-bg-f)}.tp-coltxtv_ms:active{background-color:var(--in-bg-a)}.tp-coltxtv_mm{color:var(--lbl-fg)}.tp-coltxtv_w{flex:1}.tp-dfwv{position:absolute;top:8px;right:8px;width:256px}.tp-fldv.tp-fldv-not .tp-fldv_b{display:none}.tp-fldv_t{padding-left:4px}.tp-fldv_c{border-left:var(--cnt-bg) solid 4px}.tp-fldv_b:hover+.tp-fldv_c{border-left-color:var(--cnt-bg-h)}.tp-fldv_b:focus+.tp-fldv_c{border-left-color:var(--cnt-bg-f)}.tp-fldv_b:active+.tp-fldv_c{border-left-color:var(--cnt-bg-a)}.tp-grlv{position:relative}.tp-grlv_g{display:block;height:calc(var(--bld-us)*3)}.tp-grlv_g polyline{fill:none;stroke:var(--mo-fg);stroke-linejoin:round}.tp-grlv_t{margin-top:-4px;transition:left .05s,top .05s;visibility:hidden}.tp-grlv_t.tp-grlv_t-a{visibility:visible}.tp-grlv_t.tp-grlv_t-in{transition:none}.tp-grlv.tp-v-disabled .tp-grlv_g{opacity:.5}.tp-grlv .tp-ttv{background-color:var(--mo-fg)}.tp-grlv .tp-ttv::before{border-top-color:var(--mo-fg)}.tp-lblv{align-items:center;display:flex;line-height:1.3;padding-left:var(--cnt-h-p);padding-right:var(--cnt-h-p)}.tp-lblv.tp-lblv-nol{display:block}.tp-lblv_l{color:var(--lbl-fg);flex:1;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;padding-left:4px;padding-right:16px}.tp-lblv.tp-v-disabled .tp-lblv_l{opacity:.5}.tp-lblv.tp-lblv-nol .tp-lblv_l{display:none}.tp-lblv_v{align-self:flex-start;flex-grow:0;flex-shrink:0;width:160px}.tp-lblv.tp-lblv-nol .tp-lblv_v{width:100%}.tp-lstv_s{padding:0 20px 0 4px;width:100%}.tp-lstv_m{color:var(--btn-fg)}.tp-sglv_i{padding:0 4px}.tp-sglv.tp-v-disabled .tp-sglv_i{opacity:.5}.tp-mllv_i{display:block;height:calc(var(--bld-us)*3);line-height:var(--bld-us);padding:0 4px;resize:none;white-space:pre}.tp-mllv.tp-v-disabled .tp-mllv_i{opacity:.5}.tp-p2dv{position:relative}.tp-p2dv_h{display:flex}.tp-p2dv_b{height:var(--bld-us);margin-right:4px;position:relative;width:var(--bld-us)}.tp-p2dv_b svg{display:block;height:16px;left:50%;margin-left:-8px;margin-top:-8px;position:absolute;top:50%;width:16px}.tp-p2dv_b svg path{stroke:currentColor;stroke-width:2}.tp-p2dv_b svg circle{fill:currentColor}.tp-p2dv_t{flex:1}.tp-p2dv_p{height:0;margin-top:0;opacity:0;overflow:hidden;transition:height .2s ease-in-out,opacity .2s linear,margin .2s ease-in-out}.tp-p2dv.tp-p2dv-expanded .tp-p2dv_p{margin-top:var(--bld-s);opacity:1}.tp-p2dv .tp-popv{left:calc(-1*var(--cnt-h-p));right:calc(-1*var(--cnt-h-p));top:var(--bld-us)}.tp-p2dpv{padding-left:calc(var(--bld-us) + 4px)}.tp-p2dpv_p{cursor:crosshair;height:0;overflow:hidden;padding-bottom:100%;position:relative}.tp-p2dpv_g{display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.tp-p2dpv_ax{opacity:.1;stroke:var(--in-fg);stroke-dasharray:1}.tp-p2dpv_l{opacity:.5;stroke:var(--in-fg);stroke-dasharray:1}.tp-p2dpv_m{border:var(--in-fg) solid 1px;border-radius:50%;box-sizing:border-box;height:4px;margin-left:-2px;margin-top:-2px;position:absolute;width:4px}.tp-p2dpv_p:focus .tp-p2dpv_m{background-color:var(--in-fg);border-width:0}.tp-popv{background-color:var(--bs-bg);border-radius:6px;box-shadow:0 2px 4px var(--bs-sh);display:none;max-width:168px;padding:var(--cnt-v-p) var(--cnt-h-p);position:absolute;visibility:hidden;z-index:1000}.tp-popv.tp-popv-v{display:block;visibility:visible}.tp-sprv_r{background-color:var(--grv-fg);border-width:0;display:block;height:2px;margin:0;width:100%}.tp-sldv.tp-v-disabled{opacity:.5}.tp-sldv_t{box-sizing:border-box;cursor:pointer;height:var(--bld-us);margin:0 6px;outline:none;position:relative}.tp-sldv_t::before{background-color:var(--in-bg);border-radius:1px;bottom:0;content:"";display:block;height:2px;left:0;margin:auto;position:absolute;right:0;top:0}.tp-sldv_k{height:100%;left:0;position:absolute;top:0}.tp-sldv_k::before{background-color:var(--in-fg);border-radius:1px;bottom:0;content:"";display:block;height:2px;left:0;margin-bottom:auto;margin-top:auto;position:absolute;right:0;top:0}.tp-sldv_k::after{background-color:var(--btn-bg);border-radius:var(--elm-br);bottom:0;content:"";display:block;height:12px;margin-bottom:auto;margin-top:auto;position:absolute;right:-6px;top:0;width:12px}.tp-sldv_t:hover .tp-sldv_k::after{background-color:var(--btn-bg-h)}.tp-sldv_t:focus .tp-sldv_k::after{background-color:var(--btn-bg-f)}.tp-sldv_t:active .tp-sldv_k::after{background-color:var(--btn-bg-a)}.tp-sldtxtv{display:flex}.tp-sldtxtv_s{flex:2}.tp-sldtxtv_t{flex:1;margin-left:4px}.tp-tabv.tp-v-disabled{opacity:.5}.tp-tabv_i{align-items:flex-end;display:flex;overflow:hidden}.tp-tabv.tp-tabv-nop .tp-tabv_i{height:calc(var(--bld-us) + 4px);position:relative}.tp-tabv.tp-tabv-nop .tp-tabv_i::before{background-color:var(--cnt-bg);bottom:0;content:"";height:2px;left:0;position:absolute;right:0}.tp-tabv_c{border-left:var(--cnt-bg) solid 4px;padding-bottom:var(--cnt-v-p);padding-top:var(--cnt-v-p)}.tp-tbiv{flex:1;min-width:0;position:relative}.tp-tbiv+.tp-tbiv{margin-left:2px}.tp-tbiv+.tp-tbiv::before{background-color:var(--cnt-bg);bottom:0;content:"";height:2px;left:-2px;position:absolute;width:2px}.tp-tbiv_b{background-color:var(--cnt-bg);display:block;padding-left:calc(var(--cnt-h-p) + 4px);padding-right:calc(var(--cnt-h-p) + 4px);width:100%}.tp-tbiv_b:hover{background-color:var(--cnt-bg-h)}.tp-tbiv_b:focus{background-color:var(--cnt-bg-f)}.tp-tbiv_b:active{background-color:var(--cnt-bg-a)}.tp-tbiv_b:disabled{opacity:.5}.tp-tbiv_t{color:var(--cnt-fg);height:calc(var(--bld-us) + 4px);line-height:calc(var(--bld-us) + 4px);opacity:.5;overflow:hidden;text-overflow:ellipsis}.tp-tbiv.tp-tbiv-sel .tp-tbiv_t{opacity:1}.tp-txtv{position:relative}.tp-txtv_i{padding:0 4px}.tp-txtv.tp-txtv-fst .tp-txtv_i{border-bottom-right-radius:0;border-top-right-radius:0}.tp-txtv.tp-txtv-mid .tp-txtv_i{border-radius:0}.tp-txtv.tp-txtv-lst .tp-txtv_i{border-bottom-left-radius:0;border-top-left-radius:0}.tp-txtv.tp-txtv-num .tp-txtv_i{text-align:right}.tp-txtv.tp-txtv-drg .tp-txtv_i{opacity:.3}.tp-txtv_k{cursor:pointer;height:100%;left:-3px;position:absolute;top:0;width:12px}.tp-txtv_k::before{background-color:var(--in-fg);border-radius:1px;bottom:0;content:"";height:calc(var(--bld-us) - 4px);left:50%;margin-bottom:auto;margin-left:-1px;margin-top:auto;opacity:.1;position:absolute;top:0;transition:border-radius .1s,height .1s,transform .1s,width .1s;width:2px}.tp-txtv_k:hover::before,.tp-txtv.tp-txtv-drg .tp-txtv_k::before{opacity:1}.tp-txtv.tp-txtv-drg .tp-txtv_k::before{border-radius:50%;height:4px;transform:translateX(-1px);width:4px}.tp-txtv_g{bottom:0;display:block;height:8px;left:50%;margin:auto;overflow:visible;pointer-events:none;position:absolute;top:0;visibility:hidden;width:100%}.tp-txtv.tp-txtv-drg .tp-txtv_g{visibility:visible}.tp-txtv_gb{fill:none;stroke:var(--in-fg);stroke-dasharray:1}.tp-txtv_gh{fill:none;stroke:var(--in-fg)}.tp-txtv .tp-ttv{margin-left:6px;visibility:hidden}.tp-txtv.tp-txtv-drg .tp-ttv{visibility:visible}.tp-ttv{background-color:var(--in-fg);border-radius:var(--elm-br);color:var(--bs-bg);padding:2px 4px;pointer-events:none;position:absolute;transform:translate(-50%, -100%)}.tp-ttv::before{border-color:var(--in-fg) transparent transparent transparent;border-style:solid;border-width:2px;box-sizing:border-box;content:"";font-size:.9em;height:4px;left:50%;margin-left:-2px;position:absolute;top:100%;width:4px}.tp-rotv{background-color:var(--bs-bg);border-radius:var(--bs-br);box-shadow:0 2px 4px var(--bs-sh);font-family:var(--font-family);font-size:11px;font-weight:500;line-height:1;text-align:left}.tp-rotv_b{border-bottom-left-radius:var(--bs-br);border-bottom-right-radius:var(--bs-br);border-top-left-radius:var(--bs-br);border-top-right-radius:var(--bs-br);padding-left:calc(4px + var(--bld-us) + var(--cnt-h-p));text-align:center}.tp-rotv.tp-rotv-expanded .tp-rotv_b{border-bottom-left-radius:0;border-bottom-right-radius:0}.tp-rotv.tp-rotv-not .tp-rotv_b{display:none}.tp-rotv_c>.tp-fldv.tp-v-lst>.tp-fldv_c,.tp-rotv_c>.tp-tabv.tp-v-lst>.tp-tabv_c{border-bottom-left-radius:var(--bs-br);border-bottom-right-radius:var(--bs-br)}.tp-rotv_c>.tp-fldv.tp-v-lst:not(.tp-fldv-expanded)>.tp-fldv_b{border-bottom-left-radius:var(--bs-br);border-bottom-right-radius:var(--bs-br)}.tp-rotv_c .tp-fldv.tp-v-vlst:not(.tp-fldv-expanded)>.tp-fldv_b{border-bottom-right-radius:var(--bs-br)}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-fldv.tp-v-fst{margin-top:calc(-1*var(--cnt-v-p))}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-fldv.tp-v-fst>.tp-fldv_b{border-top-left-radius:var(--bs-br);border-top-right-radius:var(--bs-br)}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-tabv.tp-v-fst{margin-top:calc(-1*var(--cnt-v-p))}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-tabv.tp-v-fst>.tp-tabv_i{border-top-left-radius:var(--bs-br);border-top-right-radius:var(--bs-br)}.tp-rotv.tp-v-disabled,.tp-rotv .tp-v-disabled{pointer-events:none}.tp-rotv.tp-v-hidden,.tp-rotv .tp-v-hidden{display:none}'); + this.pool_.getAll().forEach((plugin) => { + this.embedPluginStyle_(plugin); + }); + this.registerPlugin({ + plugins: [ + SliderBladePlugin, + ListBladePlugin, + TabBladePlugin, + TextBladePlugin, + ], + }); + } + } + + const VERSION = new Semver('3.1.0'); + + exports.BladeApi = BladeApi; + exports.ButtonApi = ButtonApi; + exports.FolderApi = FolderApi; + exports.InputBindingApi = InputBindingApi; + exports.ListApi = ListApi; + exports.MonitorBindingApi = MonitorBindingApi; + exports.Pane = Pane; + exports.SeparatorApi = SeparatorApi; + exports.SliderApi = SliderApi; + exports.TabApi = TabApi; + exports.TabPageApi = TabPageApi; + exports.TextApi = TextApi; + exports.TpChangeEvent = TpChangeEvent; + exports.VERSION = VERSION; + + Object.defineProperty(exports, '__esModule', { value: true }); + +})); diff --git a/node_modules/tweakpane/dist/tweakpane.min.js b/node_modules/tweakpane/dist/tweakpane.min.js new file mode 100644 index 00000000..b50fb1b0 --- /dev/null +++ b/node_modules/tweakpane/dist/tweakpane.min.js @@ -0,0 +1,2 @@ +/*! Tweakpane 3.1.0 (c) 2016 cocopon, licensed under the MIT license. */ +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Tweakpane={})}(this,(function(t){"use strict";class e{constructor(t){this.controller_=t}get element(){return this.controller_.view.element}get disabled(){return this.controller_.viewProps.get("disabled")}set disabled(t){this.controller_.viewProps.set("disabled",t)}get hidden(){return this.controller_.viewProps.get("hidden")}set hidden(t){this.controller_.viewProps.set("hidden",t)}dispose(){this.controller_.viewProps.set("disposed",!0)}}class n{constructor(t){this.target=t}}class i extends n{constructor(t,e,n,i){super(t),this.value=e,this.presetKey=n,this.last=null==i||i}}class s extends n{constructor(t,e,n){super(t),this.value=e,this.presetKey=n}}class o extends n{constructor(t,e){super(t),this.expanded=e}}class r extends n{constructor(t,e){super(t),this.index=e}}function a(t){return null==t}function l(t,e){if(t.length!==e.length)return!1;for(let n=0;n"View has been already disposed",invalidparams:t=>`Invalid parameters for '${t.name}'`,nomatchingcontroller:t=>`No matching controller for '${t.key}'`,nomatchingview:t=>`No matching view for '${JSON.stringify(t.params)}'`,notbindable:()=>"Value is not bindable",propertynotfound:t=>`Property '${t.name}' not found`,shouldneverhappen:()=>"This error should never happen"};class d{constructor(t){var e;this.message=null!==(e=p[t.type](t.context))&&void 0!==e?e:"Unexpected error",this.name=this.constructor.name,this.stack=new Error(this.message).stack,this.type=t.type}static alreadyDisposed(){return new d({type:"alreadydisposed"})}static notBindable(){return new d({type:"notbindable"})}static propertyNotFound(t){return new d({type:"propertynotfound",context:{name:t}})}static shouldNeverHappen(){return new d({type:"shouldneverhappen"})}}class c{constructor(t,e,n){this.obj_=t,this.key_=e,this.presetKey_=null!=n?n:e}static isBindable(t){return null!==t&&"object"==typeof t}get key(){return this.key_}get presetKey(){return this.presetKey_}read(){return this.obj_[this.key_]}write(t){this.obj_[this.key_]=t}writeProperty(t,e){const n=this.read();if(!c.isBindable(n))throw d.notBindable();if(!(t in n))throw d.propertyNotFound(t);n[t]=e}}class h extends e{get label(){return this.controller_.props.get("label")}set label(t){this.controller_.props.set("label",t)}get title(){var t;return null!==(t=this.controller_.valueController.props.get("title"))&&void 0!==t?t:""}set title(t){this.controller_.valueController.props.set("title",t)}on(t,e){const i=e.bind(this);return this.controller_.valueController.emitter.on(t,(()=>{i(new n(this))})),this}}class u{constructor(){this.observers_={}}on(t,e){let n=this.observers_[t];return n||(n=this.observers_[t]=[]),n.push({handler:e}),this}off(t,e){const n=this.observers_[t];return n&&(this.observers_[t]=n.filter((t=>t.handler!==e))),this}emit(t,e){const n=this.observers_[t];n&&n.forEach((t=>{t.handler(e)}))}}const v="tp";function m(t){return(e,n)=>[v,"-",t,"v",e?`_${e}`:"",n?`-${n}`:""].join("")}function b(t){return t.rawValue}function _(t,e){var n,i;t.emitter.on("change",(n=b,i=e,t=>i(n(t)))),e(t.rawValue)}function g(t,e,n){_(t.value(e),n)}function f(t,e){return n=>{!function(t,e,n){n?t.classList.add(e):t.classList.remove(e)}(t,e,n)}}function w(t,e){_(t,(t=>{e.textContent=null!=t?t:""}))}const x=m("btn");class C{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(x()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("button");n.classList.add(x("b")),e.viewProps.bindDisabled(n),this.element.appendChild(n),this.buttonElement=n;const i=t.createElement("div");i.classList.add(x("t")),w(e.props.value("title"),i),this.buttonElement.appendChild(i)}}class y{constructor(t,e){this.emitter=new u,this.onClick_=this.onClick_.bind(this),this.props=e.props,this.viewProps=e.viewProps,this.view=new C(t,{props:this.props,viewProps:this.viewProps}),this.view.buttonElement.addEventListener("click",this.onClick_)}onClick_(){this.emitter.emit("click",{sender:this})}}class P{constructor(t,e){var n;this.constraint_=null==e?void 0:e.constraint,this.equals_=null!==(n=null==e?void 0:e.equals)&&void 0!==n?n:(t,e)=>t===e,this.emitter=new u,this.rawValue_=t}get constraint(){return this.constraint_}get rawValue(){return this.rawValue_}set rawValue(t){this.setRawValue(t,{forceEmit:!1,last:!0})}setRawValue(t,e){const n=null!=e?e:{forceEmit:!1,last:!0},i=this.constraint_?this.constraint_.constrain(t):t;(!this.equals_(this.rawValue_,i)||n.forceEmit)&&(this.emitter.emit("beforechange",{sender:this}),this.rawValue_=i,this.emitter.emit("change",{options:n,rawValue:i,sender:this}))}}class k{constructor(t){this.emitter=new u,this.value_=t}get rawValue(){return this.value_}set rawValue(t){this.setRawValue(t,{forceEmit:!1,last:!0})}setRawValue(t,e){const n=null!=e?e:{forceEmit:!1,last:!0};(this.value_!==t||n.forceEmit)&&(this.emitter.emit("beforechange",{sender:this}),this.value_=t,this.emitter.emit("change",{options:n,rawValue:this.value_,sender:this}))}}function E(t,e){const n=null==e?void 0:e.constraint,i=null==e?void 0:e.equals;return n||i?new P(t,e):new k(t)}class V{constructor(t){this.emitter=new u,this.valMap_=t;for(const t in this.valMap_){this.valMap_[t].emitter.on("change",(()=>{this.emitter.emit("change",{key:t,sender:this})}))}}static createCore(t){return Object.keys(t).reduce(((e,n)=>Object.assign(e,{[n]:E(t[n])})),{})}static fromObject(t){const e=this.createCore(t);return new V(e)}get(t){return this.valMap_[t].rawValue}set(t,e){this.valMap_[t].rawValue=e}value(t){return this.valMap_[t]}}function L(t){return e=>n=>{if(!e&&void 0===n)return{succeeded:!1,value:void 0};if(e&&void 0===n)return{succeeded:!0,value:void 0};const i=t(n);return void 0!==i?{succeeded:!0,value:i}:{succeeded:!1,value:void 0}}}function M(t){return{custom:e=>L(e)(t),boolean:L((t=>"boolean"==typeof t?t:void 0))(t),number:L((t=>"number"==typeof t?t:void 0))(t),string:L((t=>"string"==typeof t?t:void 0))(t),function:L((t=>"function"==typeof t?t:void 0))(t),constant:e=>L((t=>t===e?e:void 0))(t),raw:L((t=>t))(t),object:e=>L((t=>{var n;if(null!==(n=t)&&"object"==typeof n)return function(t,e){return Object.keys(e).reduce(((n,i)=>{if(void 0===n)return;const s=(0,e[i])(t[i]);return s.succeeded?Object.assign(Object.assign({},n),{[i]:s.value}):void 0}),{})}(t,e)}))(t),array:e=>L((t=>{var n;if(Array.isArray(t))return n=e,t.reduce(((t,e)=>{if(void 0===t)return;const i=n(e);return i.succeeded&&void 0!==i.value?[...t,i.value]:void 0}),[])}))(t)}}const S={optional:M(!0),required:M(!1)};function A(t,e){const n=S.required.object(e)(t);return n.succeeded?n.value:void 0}const D=m(""),j={veryfirst:"vfst",first:"fst",last:"lst",verylast:"vlst"};class N{constructor(t){this.parent_=null,this.blade=t.blade,this.view=t.view,this.viewProps=t.viewProps;const e=this.view.element;this.blade.value("positions").emitter.on("change",(()=>{["veryfirst","first","last","verylast"].forEach((t=>{e.classList.remove(D(void 0,j[t]))})),this.blade.get("positions").forEach((t=>{e.classList.add(D(void 0,j[t]))}))})),this.viewProps.handleDispose((()=>{!function(t){t&&t.parentElement&&t.parentElement.removeChild(t)}(e)}))}get parent(){return this.parent_}}const O="http://www.w3.org/2000/svg";function R(t){t.offsetHeight}function I(t){return void 0!==t.ontouchstart}function K(){return new Function("return this")().document}const U={check:'',dropdown:'',p2dpad:''};function T(t,e){const n=t.createElementNS(O,"svg");return n.innerHTML=U[e],n}function B(t,e,n){t.insertBefore(e,t.children[n])}function F(t){t.parentElement&&t.parentElement.removeChild(t)}function H(t){for(;t.children.length>0;)t.removeChild(t.children[0])}function $(t){return t.relatedTarget?t.relatedTarget:"explicitOriginalTarget"in t?t.explicitOriginalTarget:null}const z=m("lbl");class q{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(z()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("div");n.classList.add(z("l")),g(e.props,"label",(e=>{a(e)?this.element.classList.add(z(void 0,"nol")):(this.element.classList.remove(z(void 0,"nol")),function(t){for(;t.childNodes.length>0;)t.removeChild(t.childNodes[0])}(n),n.appendChild(function(t,e){const n=t.createDocumentFragment();return e.split("\n").map((e=>t.createTextNode(e))).forEach(((e,i)=>{i>0&&n.appendChild(t.createElement("br")),n.appendChild(e)})),n}(t,e)))})),this.element.appendChild(n),this.labelElement=n;const i=t.createElement("div");i.classList.add(z("v")),this.element.appendChild(i),this.valueElement=i}}class G extends N{constructor(t,e){const n=e.valueController.viewProps;super(Object.assign(Object.assign({},e),{view:new q(t,{props:e.props,viewProps:n}),viewProps:n})),this.props=e.props,this.valueController=e.valueController,this.view.valueElement.appendChild(this.valueController.view.element)}}const Y={id:"button",type:"blade",accept(t){const e=S,n=A(t,{title:e.required.string,view:e.required.constant("button"),label:e.optional.string});return n?{params:n}:null},controller:t=>new G(t.document,{blade:t.blade,props:V.fromObject({label:t.params.label}),valueController:new y(t.document,{props:V.fromObject({title:t.params.title}),viewProps:t.viewProps})}),api:t=>t.controller instanceof G&&t.controller.valueController instanceof y?new h(t.controller):null};class X extends N{constructor(t){super(t),this.value=t.value}}function Q(){return new V({positions:E([],{equals:l})})}class J extends V{constructor(t){super(t)}static create(t){const e={completed:!0,expanded:t,expandedHeight:null,shouldFixHeight:!1,temporaryExpanded:null},n=V.createCore(e);return new J(n)}get styleExpanded(){var t;return null!==(t=this.get("temporaryExpanded"))&&void 0!==t?t:this.get("expanded")}get styleHeight(){if(!this.styleExpanded)return"0";const t=this.get("expandedHeight");return this.get("shouldFixHeight")&&!a(t)?`${t}px`:"auto"}bindExpandedClass(t,e){const n=()=>{this.styleExpanded?t.classList.add(e):t.classList.remove(e)};g(this,"expanded",n),g(this,"temporaryExpanded",n)}cleanUpTransition(){this.set("shouldFixHeight",!1),this.set("expandedHeight",null),this.set("completed",!0)}}function W(t,e){e.style.height=t.styleHeight}function Z(t,e){t.value("expanded").emitter.on("beforechange",(()=>{t.set("completed",!1),a(t.get("expandedHeight"))&&t.set("expandedHeight",function(t,e){let n=0;return function(t,e){const n=t.style.transition;t.style.transition="none",e(),t.style.transition=n}(e,(()=>{t.set("expandedHeight",null),t.set("temporaryExpanded",!0),R(e),n=e.clientHeight,t.set("temporaryExpanded",null),R(e)})),n}(t,e)),t.set("shouldFixHeight",!0),R(e)})),t.emitter.on("change",(()=>{W(t,e)})),W(t,e),e.addEventListener("transitionend",(e=>{"height"===e.propertyName&&t.cleanUpTransition()}))}class tt extends e{constructor(t,e){super(t),this.rackApi_=e}}class et{constructor(t){this.emitter=new u,this.items_=[],this.cache_=new Set,this.onSubListAdd_=this.onSubListAdd_.bind(this),this.onSubListRemove_=this.onSubListRemove_.bind(this),this.extract_=t}get items(){return this.items_}allItems(){return Array.from(this.cache_)}find(t){for(const e of this.allItems())if(t(e))return e;return null}includes(t){return this.cache_.has(t)}add(t,e){if(this.includes(t))throw d.shouldNeverHappen();const n=void 0!==e?e:this.items_.length;this.items_.splice(n,0,t),this.cache_.add(t);const i=this.extract_(t);i&&(i.emitter.on("add",this.onSubListAdd_),i.emitter.on("remove",this.onSubListRemove_),i.allItems().forEach((t=>{this.cache_.add(t)}))),this.emitter.emit("add",{index:n,item:t,root:this,target:this})}remove(t){const e=this.items_.indexOf(t);if(e<0)return;this.items_.splice(e,1),this.cache_.delete(t);const n=this.extract_(t);n&&(n.emitter.off("add",this.onSubListAdd_),n.emitter.off("remove",this.onSubListRemove_)),this.emitter.emit("remove",{index:e,item:t,root:this,target:this})}onSubListAdd_(t){this.cache_.add(t.item),this.emitter.emit("add",{index:t.index,item:t.item,root:this,target:t.target})}onSubListRemove_(t){this.cache_.delete(t.item),this.emitter.emit("remove",{index:t.index,item:t.item,root:this,target:t.target})}}class nt extends e{constructor(t){super(t),this.onBindingChange_=this.onBindingChange_.bind(this),this.emitter_=new u,this.controller_.binding.emitter.on("change",this.onBindingChange_)}get label(){return this.controller_.props.get("label")}set label(t){this.controller_.props.set("label",t)}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}refresh(){this.controller_.binding.read()}onBindingChange_(t){const e=t.sender.target.read();this.emitter_.emit("change",{event:new i(this,e,this.controller_.binding.target.presetKey,t.options.last)})}}class it extends G{constructor(t,e){super(t,e),this.binding=e.binding}}class st extends e{constructor(t){super(t),this.onBindingUpdate_=this.onBindingUpdate_.bind(this),this.emitter_=new u,this.controller_.binding.emitter.on("update",this.onBindingUpdate_)}get label(){return this.controller_.props.get("label")}set label(t){this.controller_.props.set("label",t)}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}refresh(){this.controller_.binding.read()}onBindingUpdate_(t){const e=t.sender.target.read();this.emitter_.emit("update",{event:new s(this,e,this.controller_.binding.target.presetKey)})}}class ot extends G{constructor(t,e){super(t,e),this.binding=e.binding,this.viewProps.bindDisabled(this.binding.ticker),this.viewProps.handleDispose((()=>{this.binding.dispose()}))}}function rt(t){return t instanceof pt?t.apiSet_:t instanceof tt?t.rackApi_.apiSet_:null}function at(t,e){const n=t.find((t=>t.controller_===e));if(!n)throw d.shouldNeverHappen();return n}function lt(t,e,n){if(!c.isBindable(t))throw d.notBindable();return new c(t,e,n)}class pt extends e{constructor(t,e){super(t),this.onRackAdd_=this.onRackAdd_.bind(this),this.onRackRemove_=this.onRackRemove_.bind(this),this.onRackInputChange_=this.onRackInputChange_.bind(this),this.onRackMonitorUpdate_=this.onRackMonitorUpdate_.bind(this),this.emitter_=new u,this.apiSet_=new et(rt),this.pool_=e;const n=this.controller_.rack;n.emitter.on("add",this.onRackAdd_),n.emitter.on("remove",this.onRackRemove_),n.emitter.on("inputchange",this.onRackInputChange_),n.emitter.on("monitorupdate",this.onRackMonitorUpdate_),n.children.forEach((t=>{this.setUpApi_(t)}))}get children(){return this.controller_.rack.children.map((t=>at(this.apiSet_,t)))}addInput(t,e,n){const i=null!=n?n:{},s=this.controller_.view.element.ownerDocument,o=this.pool_.createInput(s,lt(t,e,i.presetKey),i),r=new nt(o);return this.add(r,i.index)}addMonitor(t,e,n){const i=null!=n?n:{},s=this.controller_.view.element.ownerDocument,o=this.pool_.createMonitor(s,lt(t,e),i),r=new st(o);return this.add(r,i.index)}addFolder(t){return function(t,e){return t.addBlade(Object.assign(Object.assign({},e),{view:"folder"}))}(this,t)}addButton(t){return function(t,e){return t.addBlade(Object.assign(Object.assign({},e),{view:"button"}))}(this,t)}addSeparator(t){return function(t,e){const n=null!=e?e:{};return t.addBlade(Object.assign(Object.assign({},n),{view:"separator"}))}(this,t)}addTab(t){return function(t,e){return t.addBlade(Object.assign(Object.assign({},e),{view:"tab"}))}(this,t)}add(t,e){this.controller_.rack.add(t.controller_,e);const n=this.apiSet_.find((e=>e.controller_===t.controller_));return n&&this.apiSet_.remove(n),this.apiSet_.add(t),t}remove(t){this.controller_.rack.remove(t.controller_)}addBlade(t){const e=this.controller_.view.element.ownerDocument,n=this.pool_.createBlade(e,t),i=this.pool_.createBladeApi(n);return this.add(i,t.index)}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}setUpApi_(t){this.apiSet_.find((e=>e.controller_===t))||this.apiSet_.add(this.pool_.createBladeApi(t))}onRackAdd_(t){this.setUpApi_(t.bladeController)}onRackRemove_(t){if(t.isRoot){const e=at(this.apiSet_,t.bladeController);this.apiSet_.remove(e)}}onRackInputChange_(t){const e=t.bladeController;if(e instanceof it){const n=at(this.apiSet_,e),s=e.binding;this.emitter_.emit("change",{event:new i(n,s.target.read(),s.target.presetKey,t.options.last)})}else if(e instanceof X){const n=at(this.apiSet_,e);this.emitter_.emit("change",{event:new i(n,e.value.rawValue,void 0,t.options.last)})}}onRackMonitorUpdate_(t){if(!(t.bladeController instanceof ot))throw d.shouldNeverHappen();const e=at(this.apiSet_,t.bladeController),n=t.bladeController.binding;this.emitter_.emit("update",{event:new s(e,n.target.read(),n.target.presetKey)})}}class dt extends tt{constructor(t,e){super(t,new pt(t.rackController,e)),this.emitter_=new u,this.controller_.foldable.value("expanded").emitter.on("change",(t=>{this.emitter_.emit("fold",{event:new o(this,t.sender.rawValue)})})),this.rackApi_.on("change",(t=>{this.emitter_.emit("change",{event:t})})),this.rackApi_.on("update",(t=>{this.emitter_.emit("update",{event:t})}))}get expanded(){return this.controller_.foldable.get("expanded")}set expanded(t){this.controller_.foldable.set("expanded",t)}get title(){return this.controller_.props.get("title")}set title(t){this.controller_.props.set("title",t)}get children(){return this.rackApi_.children}addInput(t,e,n){return this.rackApi_.addInput(t,e,n)}addMonitor(t,e,n){return this.rackApi_.addMonitor(t,e,n)}addFolder(t){return this.rackApi_.addFolder(t)}addButton(t){return this.rackApi_.addButton(t)}addSeparator(t){return this.rackApi_.addSeparator(t)}addTab(t){return this.rackApi_.addTab(t)}add(t,e){return this.rackApi_.add(t,e)}remove(t){this.rackApi_.remove(t)}addBlade(t){return this.rackApi_.addBlade(t)}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}}class ct extends N{constructor(t){super({blade:t.blade,view:t.view,viewProps:t.rackController.viewProps}),this.rackController=t.rackController}}class ht{constructor(t,e){const n=m(e.viewName);this.element=t.createElement("div"),this.element.classList.add(n()),e.viewProps.bindClassModifiers(this.element)}}function ut(t){return t instanceof bt?t.rack:t instanceof ct?t.rackController.rack:null}function vt(t){const e=ut(t);return e?e.bcSet_:null}class mt{constructor(t){var e;this.onBladePositionsChange_=this.onBladePositionsChange_.bind(this),this.onSetAdd_=this.onSetAdd_.bind(this),this.onSetRemove_=this.onSetRemove_.bind(this),this.onChildDispose_=this.onChildDispose_.bind(this),this.onChildPositionsChange_=this.onChildPositionsChange_.bind(this),this.onChildInputChange_=this.onChildInputChange_.bind(this),this.onChildMonitorUpdate_=this.onChildMonitorUpdate_.bind(this),this.onChildValueChange_=this.onChildValueChange_.bind(this),this.onChildViewPropsChange_=this.onChildViewPropsChange_.bind(this),this.onDescendantLayout_=this.onDescendantLayout_.bind(this),this.onDescendantInputChange_=this.onDescendantInputChange_.bind(this),this.onDescendantMonitorUpdate_=this.onDescendantMonitorUpdate_.bind(this),this.emitter=new u,this.blade_=null!=t?t:null,null===(e=this.blade_)||void 0===e||e.value("positions").emitter.on("change",this.onBladePositionsChange_),this.bcSet_=new et(vt),this.bcSet_.emitter.on("add",this.onSetAdd_),this.bcSet_.emitter.on("remove",this.onSetRemove_)}get children(){return this.bcSet_.items}add(t,e){t.parent&&t.parent.remove(t),t.parent_=this,this.bcSet_.add(t,e)}remove(t){t.parent_=null,this.bcSet_.remove(t)}find(t){return this.bcSet_.allItems().filter((e=>e instanceof t))}onSetAdd_(t){this.updatePositions_();const e=t.target===t.root;if(this.emitter.emit("add",{bladeController:t.item,index:t.index,isRoot:e,sender:this}),!e)return;const n=t.item;if(n.viewProps.emitter.on("change",this.onChildViewPropsChange_),n.blade.value("positions").emitter.on("change",this.onChildPositionsChange_),n.viewProps.handleDispose(this.onChildDispose_),n instanceof it)n.binding.emitter.on("change",this.onChildInputChange_);else if(n instanceof ot)n.binding.emitter.on("update",this.onChildMonitorUpdate_);else if(n instanceof X)n.value.emitter.on("change",this.onChildValueChange_);else{const t=ut(n);if(t){const e=t.emitter;e.on("layout",this.onDescendantLayout_),e.on("inputchange",this.onDescendantInputChange_),e.on("monitorupdate",this.onDescendantMonitorUpdate_)}}}onSetRemove_(t){this.updatePositions_();const e=t.target===t.root;if(this.emitter.emit("remove",{bladeController:t.item,isRoot:e,sender:this}),!e)return;const n=t.item;if(n instanceof it)n.binding.emitter.off("change",this.onChildInputChange_);else if(n instanceof ot)n.binding.emitter.off("update",this.onChildMonitorUpdate_);else if(n instanceof X)n.value.emitter.off("change",this.onChildValueChange_);else{const t=ut(n);if(t){const e=t.emitter;e.off("layout",this.onDescendantLayout_),e.off("inputchange",this.onDescendantInputChange_),e.off("monitorupdate",this.onDescendantMonitorUpdate_)}}}updatePositions_(){const t=this.bcSet_.items.filter((t=>!t.viewProps.get("hidden"))),e=t[0],n=t[t.length-1];this.bcSet_.items.forEach((t=>{const i=[];t===e&&(i.push("first"),this.blade_&&!this.blade_.get("positions").includes("veryfirst")||i.push("veryfirst")),t===n&&(i.push("last"),this.blade_&&!this.blade_.get("positions").includes("verylast")||i.push("verylast")),t.blade.set("positions",i)}))}onChildPositionsChange_(){this.updatePositions_(),this.emitter.emit("layout",{sender:this})}onChildViewPropsChange_(t){this.updatePositions_(),this.emitter.emit("layout",{sender:this})}onChildDispose_(){this.bcSet_.items.filter((t=>t.viewProps.get("disposed"))).forEach((t=>{this.bcSet_.remove(t)}))}onChildInputChange_(t){const e=function(t,e){for(let n=0;n{for(let t=this.rack.children.length-1;t>=0;t--){this.rack.children[t].viewProps.set("disposed",!0)}}))}onRackAdd_(t){t.isRoot&&B(this.view.element,t.bladeController.view.element,t.index)}onRackRemove_(t){t.isRoot&&F(t.bladeController.view.element)}}const _t=m("cnt");class gt{constructor(t,e){var n;this.className_=m(null!==(n=e.viewName)&&void 0!==n?n:"fld"),this.element=t.createElement("div"),this.element.classList.add(this.className_(),_t()),e.viewProps.bindClassModifiers(this.element),this.foldable_=e.foldable,this.foldable_.bindExpandedClass(this.element,this.className_(void 0,"expanded")),g(this.foldable_,"completed",f(this.element,this.className_(void 0,"cpl")));const i=t.createElement("button");i.classList.add(this.className_("b")),g(e.props,"title",(t=>{a(t)?this.element.classList.add(this.className_(void 0,"not")):this.element.classList.remove(this.className_(void 0,"not"))})),e.viewProps.bindDisabled(i),this.element.appendChild(i),this.buttonElement=i;const s=t.createElement("div");s.classList.add(this.className_("t")),w(e.props.value("title"),s),this.buttonElement.appendChild(s),this.titleElement=s;const o=t.createElement("div");o.classList.add(this.className_("m")),this.buttonElement.appendChild(o);const r=e.containerElement;r.classList.add(this.className_("c")),this.element.appendChild(r),this.containerElement=r}}class ft extends ct{constructor(t,e){var n;const i=J.create(null===(n=e.expanded)||void 0===n||n),s=new bt(t,{blade:e.blade,root:e.root,viewProps:e.viewProps});super(Object.assign(Object.assign({},e),{rackController:s,view:new gt(t,{containerElement:s.view.element,foldable:i,props:e.props,viewName:e.root?"rot":void 0,viewProps:e.viewProps})})),this.onTitleClick_=this.onTitleClick_.bind(this),this.props=e.props,this.foldable=i,Z(this.foldable,this.view.containerElement),this.rackController.rack.emitter.on("add",(()=>{this.foldable.cleanUpTransition()})),this.rackController.rack.emitter.on("remove",(()=>{this.foldable.cleanUpTransition()})),this.view.buttonElement.addEventListener("click",this.onTitleClick_)}get document(){return this.view.element.ownerDocument}onTitleClick_(){this.foldable.set("expanded",!this.foldable.get("expanded"))}}const wt={id:"folder",type:"blade",accept(t){const e=S,n=A(t,{title:e.required.string,view:e.required.constant("folder"),expanded:e.optional.boolean});return n?{params:n}:null},controller:t=>new ft(t.document,{blade:t.blade,expanded:t.params.expanded,props:V.fromObject({title:t.params.title}),viewProps:t.viewProps}),api:t=>t.controller instanceof ft?new dt(t.controller,t.pool):null};class xt extends X{constructor(t,e){const n=e.valueController.viewProps;super(Object.assign(Object.assign({},e),{value:e.valueController.value,view:new q(t,{props:e.props,viewProps:n}),viewProps:n})),this.props=e.props,this.valueController=e.valueController,this.view.valueElement.appendChild(this.valueController.view.element)}}class Ct extends e{}const yt=m("spr");class Pt{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(yt()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("hr");n.classList.add(yt("r")),this.element.appendChild(n)}}class kt extends N{constructor(t,e){super(Object.assign(Object.assign({},e),{view:new Pt(t,{viewProps:e.viewProps})}))}}const Et={id:"separator",type:"blade",accept(t){const e=A(t,{view:S.required.constant("separator")});return e?{params:e}:null},controller:t=>new kt(t.document,{blade:t.blade,viewProps:t.viewProps}),api:t=>t.controller instanceof kt?new Ct(t.controller):null},Vt=m("");function Lt(t,e){return f(t,Vt(void 0,e))}class Mt extends V{constructor(t){super(t)}static create(t){var e,n;const i=null!=t?t:{},s={disabled:null!==(e=i.disabled)&&void 0!==e&&e,disposed:!1,hidden:null!==(n=i.hidden)&&void 0!==n&&n},o=V.createCore(s);return new Mt(o)}bindClassModifiers(t){g(this,"disabled",Lt(t,"disabled")),g(this,"hidden",Lt(t,"hidden"))}bindDisabled(t){g(this,"disabled",(e=>{t.disabled=e}))}bindTabIndex(t){g(this,"disabled",(e=>{t.tabIndex=e?-1:0}))}handleDispose(t){this.value("disposed").emitter.on("change",(e=>{e&&t()}))}}const St=m("tbi");class At{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(St()),e.viewProps.bindClassModifiers(this.element),g(e.props,"selected",(t=>{t?this.element.classList.add(St(void 0,"sel")):this.element.classList.remove(St(void 0,"sel"))}));const n=t.createElement("button");n.classList.add(St("b")),e.viewProps.bindDisabled(n),this.element.appendChild(n),this.buttonElement=n;const i=t.createElement("div");i.classList.add(St("t")),w(e.props.value("title"),i),this.buttonElement.appendChild(i),this.titleElement=i}}class Dt{constructor(t,e){this.emitter=new u,this.onClick_=this.onClick_.bind(this),this.props=e.props,this.viewProps=e.viewProps,this.view=new At(t,{props:e.props,viewProps:e.viewProps}),this.view.buttonElement.addEventListener("click",this.onClick_)}onClick_(){this.emitter.emit("click",{sender:this})}}class jt{constructor(t,e){this.onItemClick_=this.onItemClick_.bind(this),this.ic_=new Dt(t,{props:e.itemProps,viewProps:Mt.create()}),this.ic_.emitter.on("click",this.onItemClick_),this.cc_=new bt(t,{blade:Q(),viewProps:Mt.create()}),this.props=e.props,g(this.props,"selected",(t=>{this.itemController.props.set("selected",t),this.contentController.viewProps.set("hidden",!t)}))}get itemController(){return this.ic_}get contentController(){return this.cc_}onItemClick_(){this.props.set("selected",!0)}}class Nt{constructor(t,e){this.controller_=t,this.rackApi_=e}get title(){var t;return null!==(t=this.controller_.itemController.props.get("title"))&&void 0!==t?t:""}set title(t){this.controller_.itemController.props.set("title",t)}get selected(){return this.controller_.props.get("selected")}set selected(t){this.controller_.props.set("selected",t)}get children(){return this.rackApi_.children}addButton(t){return this.rackApi_.addButton(t)}addFolder(t){return this.rackApi_.addFolder(t)}addSeparator(t){return this.rackApi_.addSeparator(t)}addTab(t){return this.rackApi_.addTab(t)}add(t,e){this.rackApi_.add(t,e)}remove(t){this.rackApi_.remove(t)}addInput(t,e,n){return this.rackApi_.addInput(t,e,n)}addMonitor(t,e,n){return this.rackApi_.addMonitor(t,e,n)}addBlade(t){return this.rackApi_.addBlade(t)}}class Ot extends tt{constructor(t,e){super(t,new pt(t.rackController,e)),this.onPageAdd_=this.onPageAdd_.bind(this),this.onPageRemove_=this.onPageRemove_.bind(this),this.onSelect_=this.onSelect_.bind(this),this.emitter_=new u,this.pageApiMap_=new Map,this.rackApi_.on("change",(t=>{this.emitter_.emit("change",{event:t})})),this.rackApi_.on("update",(t=>{this.emitter_.emit("update",{event:t})})),this.controller_.tab.selectedIndex.emitter.on("change",this.onSelect_),this.controller_.pageSet.emitter.on("add",this.onPageAdd_),this.controller_.pageSet.emitter.on("remove",this.onPageRemove_),this.controller_.pageSet.items.forEach((t=>{this.setUpPageApi_(t)}))}get pages(){return this.controller_.pageSet.items.map((t=>{const e=this.pageApiMap_.get(t);if(!e)throw d.shouldNeverHappen();return e}))}addPage(t){const e=this.controller_.view.element.ownerDocument,n=new jt(e,{itemProps:V.fromObject({selected:!1,title:t.title}),props:V.fromObject({selected:!1})});this.controller_.add(n,t.index);const i=this.pageApiMap_.get(n);if(!i)throw d.shouldNeverHappen();return i}removePage(t){this.controller_.remove(t)}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}setUpPageApi_(t){const e=this.rackApi_.apiSet_.find((e=>e.controller_===t.contentController));if(!e)throw d.shouldNeverHappen();const n=new Nt(t,e);this.pageApiMap_.set(t,n)}onPageAdd_(t){this.setUpPageApi_(t.item)}onPageRemove_(t){if(!this.pageApiMap_.get(t.item))throw d.shouldNeverHappen();this.pageApiMap_.delete(t.item)}onSelect_(t){this.emitter_.emit("select",{event:new r(this,t.rawValue)})}}class Rt{constructor(){this.onItemSelectedChange_=this.onItemSelectedChange_.bind(this),this.empty=E(!0),this.selectedIndex=E(-1),this.items_=[]}add(t,e){const n=null!=e?e:this.items_.length;this.items_.splice(n,0,t),t.emitter.on("change",this.onItemSelectedChange_),this.keepSelection_()}remove(t){const e=this.items_.indexOf(t);e<0||(this.items_.splice(e,1),t.emitter.off("change",this.onItemSelectedChange_),this.keepSelection_())}keepSelection_(){if(0===this.items_.length)return this.selectedIndex.rawValue=-1,void(this.empty.rawValue=!0);const t=this.items_.findIndex((t=>t.rawValue));t<0?(this.items_.forEach(((t,e)=>{t.rawValue=0===e})),this.selectedIndex.rawValue=0):(this.items_.forEach(((e,n)=>{e.rawValue=n===t})),this.selectedIndex.rawValue=t),this.empty.rawValue=!1}onItemSelectedChange_(t){if(t.rawValue){const e=this.items_.findIndex((e=>e===t.sender));this.items_.forEach(((t,n)=>{t.rawValue=n===e})),this.selectedIndex.rawValue=e}else this.keepSelection_()}}const It=m("tab");class Kt{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(It(),_t()),e.viewProps.bindClassModifiers(this.element),_(e.empty,f(this.element,It(void 0,"nop")));const n=t.createElement("div");n.classList.add(It("i")),this.element.appendChild(n),this.itemsElement=n;const i=e.contentsElement;i.classList.add(It("c")),this.element.appendChild(i),this.contentsElement=i}}class Ut extends ct{constructor(t,e){const n=new bt(t,{blade:e.blade,viewProps:e.viewProps}),i=new Rt;super({blade:e.blade,rackController:n,view:new Kt(t,{contentsElement:n.view.element,empty:i.empty,viewProps:e.viewProps})}),this.onPageAdd_=this.onPageAdd_.bind(this),this.onPageRemove_=this.onPageRemove_.bind(this),this.pageSet_=new et((()=>null)),this.pageSet_.emitter.on("add",this.onPageAdd_),this.pageSet_.emitter.on("remove",this.onPageRemove_),this.tab=i}get pageSet(){return this.pageSet_}add(t,e){this.pageSet_.add(t,e)}remove(t){this.pageSet_.remove(this.pageSet_.items[t])}onPageAdd_(t){const e=t.item;B(this.view.itemsElement,e.itemController.view.element,t.index),this.rackController.rack.add(e.contentController,t.index),this.tab.add(e.props.value("selected"))}onPageRemove_(t){const e=t.item;F(e.itemController.view.element),this.rackController.rack.remove(e.contentController),this.tab.remove(e.props.value("selected"))}}const Tt={id:"tab",type:"blade",accept(t){const e=S,n=A(t,{pages:e.required.array(e.required.object({title:e.required.string})),view:e.required.constant("tab")});return n&&0!==n.pages.length?{params:n}:null},controller(t){const e=new Ut(t.document,{blade:t.blade,viewProps:t.viewProps});return t.params.pages.forEach((n=>{const i=new jt(t.document,{itemProps:V.fromObject({selected:!1,title:n.title}),props:V.fromObject({selected:!1})});e.add(i)})),e},api:t=>t.controller instanceof Ut?new Ot(t.controller,t.pool):null};class Bt{constructor(){this.disabled=!1,this.emitter=new u}dispose(){}tick(){this.disabled||this.emitter.emit("tick",{sender:this})}}class Ft{constructor(t,e){this.disabled_=!1,this.timerId_=null,this.onTick_=this.onTick_.bind(this),this.doc_=t,this.emitter=new u,this.interval_=e,this.setTimer_()}get disabled(){return this.disabled_}set disabled(t){this.disabled_=t,this.disabled_?this.clearTimer_():this.setTimer_()}dispose(){this.clearTimer_()}clearTimer_(){if(null===this.timerId_)return;const t=this.doc_.defaultView;t&&t.clearInterval(this.timerId_),this.timerId_=null}setTimer_(){if(this.clearTimer_(),this.interval_<=0)return;const t=this.doc_.defaultView;t&&(this.timerId_=t.setInterval(this.onTick_,this.interval_))}onTick_(){this.disabled_||this.emitter.emit("tick",{sender:this})}}class Ht{constructor(t){this.constraints=t}constrain(t){return this.constraints.reduce(((t,e)=>e.constrain(t)),t)}}function $t(t,e){if(t instanceof e)return t;if(t instanceof Ht){const n=t.constraints.reduce(((t,n)=>t||(n instanceof e?n:null)),null);if(n)return n}return null}class zt{constructor(t){this.options=t}constrain(t){const e=this.options;if(0===e.length)return t;return e.filter((e=>e.value===t)).length>0?t:e[0].value}}class qt{constructor(t){this.maxValue=t.max,this.minValue=t.min}constrain(t){let e=t;return a(this.minValue)||(e=Math.max(e,this.minValue)),a(this.maxValue)||(e=Math.min(e,this.maxValue)),e}}class Gt{constructor(t,e=0){this.step=t,this.origin=e}constrain(t){const e=this.origin%this.step;return e+Math.round((t-e)/this.step)*this.step}}const Yt=m("lst");class Xt{constructor(t,e){this.onValueChange_=this.onValueChange_.bind(this),this.props_=e.props,this.element=t.createElement("div"),this.element.classList.add(Yt()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("select");n.classList.add(Yt("s")),g(this.props_,"options",(e=>{H(n),e.forEach(((e,i)=>{const s=t.createElement("option");s.dataset.index=String(i),s.textContent=e.text,s.value=String(e.value),n.appendChild(s)}))})),e.viewProps.bindDisabled(n),this.element.appendChild(n),this.selectElement=n;const i=t.createElement("div");i.classList.add(Yt("m")),i.appendChild(T(t,"dropdown")),this.element.appendChild(i),e.value.emitter.on("change",this.onValueChange_),this.value_=e.value,this.update_()}update_(){this.selectElement.value=String(this.value_.rawValue)}onValueChange_(){this.update_()}}class Qt{constructor(t,e){this.onSelectChange_=this.onSelectChange_.bind(this),this.props=e.props,this.value=e.value,this.viewProps=e.viewProps,this.view=new Xt(t,{props:this.props,value:this.value,viewProps:this.viewProps}),this.view.selectElement.addEventListener("change",this.onSelectChange_)}onSelectChange_(t){const e=t.currentTarget.selectedOptions.item(0);if(!e)return;const n=Number(e.dataset.index);this.value.rawValue=this.props.get("options")[n].value}}const Jt=m("pop");class Wt{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(Jt()),e.viewProps.bindClassModifiers(this.element),_(e.shows,f(this.element,Jt(void 0,"v")))}}class Zt{constructor(t,e){this.shows=E(!1),this.viewProps=e.viewProps,this.view=new Wt(t,{shows:this.shows,viewProps:this.viewProps})}}const te=m("txt");class ee{constructor(t,e){this.onChange_=this.onChange_.bind(this),this.element=t.createElement("div"),this.element.classList.add(te()),e.viewProps.bindClassModifiers(this.element),this.props_=e.props,this.props_.emitter.on("change",this.onChange_);const n=t.createElement("input");n.classList.add(te("i")),n.type="text",e.viewProps.bindDisabled(n),this.element.appendChild(n),this.inputElement=n,e.value.emitter.on("change",this.onChange_),this.value_=e.value,this.refresh()}refresh(){const t=this.props_.get("formatter");this.inputElement.value=t(this.value_.rawValue)}onChange_(){this.refresh()}}class ne{constructor(t,e){this.onInputChange_=this.onInputChange_.bind(this),this.parser_=e.parser,this.props=e.props,this.value=e.value,this.viewProps=e.viewProps,this.view=new ee(t,{props:e.props,value:this.value,viewProps:this.viewProps}),this.view.inputElement.addEventListener("change",this.onInputChange_)}onInputChange_(t){const e=t.currentTarget.value,n=this.parser_(e);a(n)||(this.value.rawValue=n),this.view.refresh()}}function ie(t){return"false"!==t&&!!t}function se(t){return function(t){return String(t)}(t)}class oe{constructor(t){this.text=t}evaluate(){return Number(this.text)}toString(){return this.text}}const re={"**":(t,e)=>Math.pow(t,e),"*":(t,e)=>t*e,"/":(t,e)=>t/e,"%":(t,e)=>t%e,"+":(t,e)=>t+e,"-":(t,e)=>t-e,"<<":(t,e)=>t<>":(t,e)=>t>>e,">>>":(t,e)=>t>>>e,"&":(t,e)=>t&e,"^":(t,e)=>t^e,"|":(t,e)=>t|e};class ae{constructor(t,e,n){this.left=e,this.operator=t,this.right=n}evaluate(){const t=re[this.operator];if(!t)throw new Error(`unexpected binary operator: '${this.operator}`);return t(this.left.evaluate(),this.right.evaluate())}toString(){return["b(",this.left.toString(),this.operator,this.right.toString(),")"].join(" ")}}const le={"+":t=>t,"-":t=>-t,"~":t=>~t};class pe{constructor(t,e){this.operator=t,this.expression=e}evaluate(){const t=le[this.operator];if(!t)throw new Error(`unexpected unary operator: '${this.operator}`);return t(this.expression.evaluate())}toString(){return["u(",this.operator,this.expression.toString(),")"].join(" ")}}function de(t){return(e,n)=>{for(let i=0;ie.startsWith(t,n)))[0];return i?(n+=i.length,{cursor:n+=ce(e,n).length,operator:i}):null}const we=[["**"],["*","/","%"],["+","-"],["<<",">>>",">>"],["&"],["^"],["|"]].reduce(((t,e)=>function(t,e){return(n,i)=>{const s=t(n,i);if(!s)return null;i=s.cursor;let o=s.evaluable;for(;;){const s=fe(e,n,i);if(!s)break;i=s.cursor;const r=t(n,i);if(!r)return null;i=r.cursor,o=new ae(s.operator,o,r.evaluable)}return o?{cursor:i,evaluable:o}:null}}(t,e)),(function t(e,n){const i=ge(e,n);if(i)return i;const s=e.substr(n,1);if(n+=s.length,"+"!==s&&"-"!==s&&"~"!==s)return null;const o=t(e,n);return o?{cursor:n=o.cursor,evaluable:new pe(s,o.evaluable)}:null}));function xe(t,e){return e+=ce(t,e).length,we(t,e)}function Ce(t){var e;const n=function(t){const e=xe(t,0);return e?e.cursor+ce(t,e.cursor).length!==t.length?null:e.evaluable:null}(t);return null!==(e=null==n?void 0:n.evaluate())&&void 0!==e?e:null}function ye(t){if("number"==typeof t)return t;if("string"==typeof t){const e=Ce(t);if(!a(e))return e}return 0}function Pe(t){return String(t)}function ke(t){return e=>e.toFixed(Math.max(Math.min(t,20),0))}const Ee=ke(0);function Ve(t){return Ee(t)+"%"}function Le(t){return String(t)}function Me(t){return t}function Se(t,e){for(;t.length{o((()=>{e.setRawValue(n(t,e),i.options)}))})),e.emitter.on("change",(s=>{o((()=>{t.setRawValue(i(t,e),s.options)})),o((()=>{e.setRawValue(n(t,e),s.options)}))})),o((()=>{e.setRawValue(n(t,e),{forceEmit:!1,last:!0})}))}function Ne(t,e){const n=t*(e.altKey?.1:1)*(e.shiftKey?10:1);return e.upKey?+n:e.downKey?-n:0}function Oe(t){return{altKey:t.altKey,downKey:"ArrowDown"===t.key,shiftKey:t.shiftKey,upKey:"ArrowUp"===t.key}}function Re(t){return{altKey:t.altKey,downKey:"ArrowLeft"===t.key,shiftKey:t.shiftKey,upKey:"ArrowRight"===t.key}}function Ie(t){return function(t){return"ArrowUp"===t||"ArrowDown"===t}(t)||"ArrowLeft"===t||"ArrowRight"===t}function Ke(t,e){var n,i;const s=e.ownerDocument.defaultView,o=e.getBoundingClientRect();return{x:t.pageX-((null!==(n=s&&s.scrollX)&&void 0!==n?n:0)+o.left),y:t.pageY-((null!==(i=s&&s.scrollY)&&void 0!==i?i:0)+o.top)}}class Ue{constructor(t){this.lastTouch_=null,this.onDocumentMouseMove_=this.onDocumentMouseMove_.bind(this),this.onDocumentMouseUp_=this.onDocumentMouseUp_.bind(this),this.onMouseDown_=this.onMouseDown_.bind(this),this.onTouchEnd_=this.onTouchEnd_.bind(this),this.onTouchMove_=this.onTouchMove_.bind(this),this.onTouchStart_=this.onTouchStart_.bind(this),this.elem_=t,this.emitter=new u,t.addEventListener("touchstart",this.onTouchStart_,{passive:!1}),t.addEventListener("touchmove",this.onTouchMove_,{passive:!0}),t.addEventListener("touchend",this.onTouchEnd_),t.addEventListener("mousedown",this.onMouseDown_)}computePosition_(t){const e=this.elem_.getBoundingClientRect();return{bounds:{width:e.width,height:e.height},point:t?{x:t.x,y:t.y}:null}}onMouseDown_(t){var e;t.preventDefault(),null===(e=t.currentTarget)||void 0===e||e.focus();const n=this.elem_.ownerDocument;n.addEventListener("mousemove",this.onDocumentMouseMove_),n.addEventListener("mouseup",this.onDocumentMouseUp_),this.emitter.emit("down",{altKey:t.altKey,data:this.computePosition_(Ke(t,this.elem_)),sender:this,shiftKey:t.shiftKey})}onDocumentMouseMove_(t){this.emitter.emit("move",{altKey:t.altKey,data:this.computePosition_(Ke(t,this.elem_)),sender:this,shiftKey:t.shiftKey})}onDocumentMouseUp_(t){const e=this.elem_.ownerDocument;e.removeEventListener("mousemove",this.onDocumentMouseMove_),e.removeEventListener("mouseup",this.onDocumentMouseUp_),this.emitter.emit("up",{altKey:t.altKey,data:this.computePosition_(Ke(t,this.elem_)),sender:this,shiftKey:t.shiftKey})}onTouchStart_(t){t.preventDefault();const e=t.targetTouches.item(0),n=this.elem_.getBoundingClientRect();this.emitter.emit("down",{altKey:t.altKey,data:this.computePosition_(e?{x:e.clientX-n.left,y:e.clientY-n.top}:void 0),sender:this,shiftKey:t.shiftKey}),this.lastTouch_=e}onTouchMove_(t){const e=t.targetTouches.item(0),n=this.elem_.getBoundingClientRect();this.emitter.emit("move",{altKey:t.altKey,data:this.computePosition_(e?{x:e.clientX-n.left,y:e.clientY-n.top}:void 0),sender:this,shiftKey:t.shiftKey}),this.lastTouch_=e}onTouchEnd_(t){var e;const n=null!==(e=t.targetTouches.item(0))&&void 0!==e?e:this.lastTouch_,i=this.elem_.getBoundingClientRect();this.emitter.emit("up",{altKey:t.altKey,data:this.computePosition_(n?{x:n.clientX-i.left,y:n.clientY-i.top}:void 0),sender:this,shiftKey:t.shiftKey})}}function Te(t,e,n,i,s){return i+(t-e)/(n-e)*(s-i)}function Be(t){return String(t.toFixed(10)).split(".")[1].replace(/0+$/,"").length}function Fe(t,e,n){return Math.min(Math.max(t,e),n)}function He(t,e){return(t%e+e)%e}const $e=m("txt");class ze{constructor(t,e){this.onChange_=this.onChange_.bind(this),this.props_=e.props,this.props_.emitter.on("change",this.onChange_),this.element=t.createElement("div"),this.element.classList.add($e(),$e(void 0,"num")),e.arrayPosition&&this.element.classList.add($e(void 0,e.arrayPosition)),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("input");n.classList.add($e("i")),n.type="text",e.viewProps.bindDisabled(n),this.element.appendChild(n),this.inputElement=n,this.onDraggingChange_=this.onDraggingChange_.bind(this),this.dragging_=e.dragging,this.dragging_.emitter.on("change",this.onDraggingChange_),this.element.classList.add($e()),this.inputElement.classList.add($e("i"));const i=t.createElement("div");i.classList.add($e("k")),this.element.appendChild(i),this.knobElement=i;const s=t.createElementNS(O,"svg");s.classList.add($e("g")),this.knobElement.appendChild(s);const o=t.createElementNS(O,"path");o.classList.add($e("gb")),s.appendChild(o),this.guideBodyElem_=o;const r=t.createElementNS(O,"path");r.classList.add($e("gh")),s.appendChild(r),this.guideHeadElem_=r;const a=t.createElement("div");a.classList.add(m("tt")()),this.knobElement.appendChild(a),this.tooltipElem_=a,e.value.emitter.on("change",this.onChange_),this.value=e.value,this.refresh()}onDraggingChange_(t){if(null===t.rawValue)return void this.element.classList.remove($e(void 0,"drg"));this.element.classList.add($e(void 0,"drg"));const e=t.rawValue/this.props_.get("draggingScale"),n=e+(e>0?-1:e<0?1:0),i=Fe(-n,-4,4);this.guideHeadElem_.setAttributeNS(null,"d",[`M ${n+i},0 L${n},4 L${n+i},8`,`M ${e},-1 L${e},9`].join(" ")),this.guideBodyElem_.setAttributeNS(null,"d",`M 0,4 L${e},4`);const s=this.props_.get("formatter");this.tooltipElem_.textContent=s(this.value.rawValue),this.tooltipElem_.style.left=`${e}px`}refresh(){const t=this.props_.get("formatter");this.inputElement.value=t(this.value.rawValue)}onChange_(){this.refresh()}}class qe{constructor(t,e){var n;this.originRawValue_=0,this.onInputChange_=this.onInputChange_.bind(this),this.onInputKeyDown_=this.onInputKeyDown_.bind(this),this.onInputKeyUp_=this.onInputKeyUp_.bind(this),this.onPointerDown_=this.onPointerDown_.bind(this),this.onPointerMove_=this.onPointerMove_.bind(this),this.onPointerUp_=this.onPointerUp_.bind(this),this.baseStep_=e.baseStep,this.parser_=e.parser,this.props=e.props,this.sliderProps_=null!==(n=e.sliderProps)&&void 0!==n?n:null,this.value=e.value,this.viewProps=e.viewProps,this.dragging_=E(null),this.view=new ze(t,{arrayPosition:e.arrayPosition,dragging:this.dragging_,props:this.props,value:this.value,viewProps:this.viewProps}),this.view.inputElement.addEventListener("change",this.onInputChange_),this.view.inputElement.addEventListener("keydown",this.onInputKeyDown_),this.view.inputElement.addEventListener("keyup",this.onInputKeyUp_);const i=new Ue(this.view.knobElement);i.emitter.on("down",this.onPointerDown_),i.emitter.on("move",this.onPointerMove_),i.emitter.on("up",this.onPointerUp_)}constrainValue_(t){var e,n;const i=null===(e=this.sliderProps_)||void 0===e?void 0:e.get("minValue"),s=null===(n=this.sliderProps_)||void 0===n?void 0:n.get("maxValue");let o=t;return void 0!==i&&(o=Math.max(o,i)),void 0!==s&&(o=Math.min(o,s)),o}onInputChange_(t){const e=t.currentTarget.value,n=this.parser_(e);a(n)||(this.value.rawValue=this.constrainValue_(n)),this.view.refresh()}onInputKeyDown_(t){const e=Ne(this.baseStep_,Oe(t));0!==e&&this.value.setRawValue(this.constrainValue_(this.value.rawValue+e),{forceEmit:!1,last:!1})}onInputKeyUp_(t){0!==Ne(this.baseStep_,Oe(t))&&this.value.setRawValue(this.value.rawValue,{forceEmit:!0,last:!0})}onPointerDown_(){this.originRawValue_=this.value.rawValue,this.dragging_.rawValue=0}computeDraggingValue_(t){if(!t.point)return null;const e=t.point.x-t.bounds.width/2;return this.constrainValue_(this.originRawValue_+e*this.props.get("draggingScale"))}onPointerMove_(t){const e=this.computeDraggingValue_(t.data);null!==e&&(this.value.setRawValue(e,{forceEmit:!1,last:!1}),this.dragging_.rawValue=this.value.rawValue-this.originRawValue_)}onPointerUp_(t){const e=this.computeDraggingValue_(t.data);null!==e&&(this.value.setRawValue(e,{forceEmit:!0,last:!0}),this.dragging_.rawValue=null)}}const Ge=m("sld");class Ye{constructor(t,e){this.onChange_=this.onChange_.bind(this),this.props_=e.props,this.props_.emitter.on("change",this.onChange_),this.element=t.createElement("div"),this.element.classList.add(Ge()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("div");n.classList.add(Ge("t")),e.viewProps.bindTabIndex(n),this.element.appendChild(n),this.trackElement=n;const i=t.createElement("div");i.classList.add(Ge("k")),this.trackElement.appendChild(i),this.knobElement=i,e.value.emitter.on("change",this.onChange_),this.value=e.value,this.update_()}update_(){const t=Fe(Te(this.value.rawValue,this.props_.get("minValue"),this.props_.get("maxValue"),0,100),0,100);this.knobElement.style.width=`${t}%`}onChange_(){this.update_()}}class Xe{constructor(t,e){this.onKeyDown_=this.onKeyDown_.bind(this),this.onKeyUp_=this.onKeyUp_.bind(this),this.onPointerDownOrMove_=this.onPointerDownOrMove_.bind(this),this.onPointerUp_=this.onPointerUp_.bind(this),this.baseStep_=e.baseStep,this.value=e.value,this.viewProps=e.viewProps,this.props=e.props,this.view=new Ye(t,{props:this.props,value:this.value,viewProps:this.viewProps}),this.ptHandler_=new Ue(this.view.trackElement),this.ptHandler_.emitter.on("down",this.onPointerDownOrMove_),this.ptHandler_.emitter.on("move",this.onPointerDownOrMove_),this.ptHandler_.emitter.on("up",this.onPointerUp_),this.view.trackElement.addEventListener("keydown",this.onKeyDown_),this.view.trackElement.addEventListener("keyup",this.onKeyUp_)}handlePointerEvent_(t,e){t.point&&this.value.setRawValue(Te(Fe(t.point.x,0,t.bounds.width),0,t.bounds.width,this.props.get("minValue"),this.props.get("maxValue")),e)}onPointerDownOrMove_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerUp_(t){this.handlePointerEvent_(t.data,{forceEmit:!0,last:!0})}onKeyDown_(t){const e=Ne(this.baseStep_,Re(t));0!==e&&this.value.setRawValue(this.value.rawValue+e,{forceEmit:!1,last:!1})}onKeyUp_(t){0!==Ne(this.baseStep_,Re(t))&&this.value.setRawValue(this.value.rawValue,{forceEmit:!0,last:!0})}}const Qe=m("sldtxt");class Je{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(Qe());const n=t.createElement("div");n.classList.add(Qe("s")),this.sliderView_=e.sliderView,n.appendChild(this.sliderView_.element),this.element.appendChild(n);const i=t.createElement("div");i.classList.add(Qe("t")),this.textView_=e.textView,i.appendChild(this.textView_.element),this.element.appendChild(i)}}class We{constructor(t,e){this.value=e.value,this.viewProps=e.viewProps,this.sliderC_=new Xe(t,{baseStep:e.baseStep,props:e.sliderProps,value:e.value,viewProps:this.viewProps}),this.textC_=new qe(t,{baseStep:e.baseStep,parser:e.parser,props:e.textProps,sliderProps:e.sliderProps,value:e.value,viewProps:e.viewProps}),this.view=new Je(t,{sliderView:this.sliderC_.view,textView:this.textC_.view})}get sliderController(){return this.sliderC_}get textController(){return this.textC_}}function Ze(t,e){t.write(e)}function tn(t){const e=S;return Array.isArray(t)?e.required.array(e.required.object({text:e.required.string,value:e.required.raw}))(t).value:"object"==typeof t?e.required.raw(t).value:void 0}function en(t){if("inline"===t||"popup"===t)return t}function nn(t){const e=S;return e.required.object({max:e.optional.number,min:e.optional.number,step:e.optional.number})(t).value}function sn(t){if(Array.isArray(t))return t;const e=[];return Object.keys(t).forEach((n=>{e.push({text:n,value:t[n]})})),e}function on(t){return a(t)?null:new zt(sn(t))}function rn(t){const e=t?$t(t,zt):null;return e?e.options:null}function an(t,e){const n=t&&$t(t,Gt);return n?Be(n.step):Math.max(Be(e),2)}function ln(t){const e=function(t){const e=t?$t(t,Gt):null;return e?e.step:null}(t);return null!=e?e:1}function pn(t,e){var n;const i=t&&$t(t,Gt),s=Math.abs(null!==(n=null==i?void 0:i.step)&&void 0!==n?n:e);return 0===s?.1:Math.pow(10,Math.floor(Math.log10(s))-1)}const dn=m("ckb");class cn{constructor(t,e){this.onValueChange_=this.onValueChange_.bind(this),this.element=t.createElement("div"),this.element.classList.add(dn()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("label");n.classList.add(dn("l")),this.element.appendChild(n);const i=t.createElement("input");i.classList.add(dn("i")),i.type="checkbox",n.appendChild(i),this.inputElement=i,e.viewProps.bindDisabled(this.inputElement);const s=t.createElement("div");s.classList.add(dn("w")),n.appendChild(s);const o=T(t,"check");s.appendChild(o),e.value.emitter.on("change",this.onValueChange_),this.value=e.value,this.update_()}update_(){this.inputElement.checked=this.value.rawValue}onValueChange_(){this.update_()}}class hn{constructor(t,e){this.onInputChange_=this.onInputChange_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.view=new cn(t,{value:this.value,viewProps:this.viewProps}),this.view.inputElement.addEventListener("change",this.onInputChange_)}onInputChange_(t){const e=t.currentTarget;this.value.rawValue=e.checked}}const un={id:"input-bool",type:"input",accept:(t,e)=>{if("boolean"!=typeof t)return null;const n=A(e,{options:S.optional.custom(tn)});return n?{initialValue:t,params:n}:null},binding:{reader:t=>ie,constraint:t=>function(t){const e=[],n=on(t.options);return n&&e.push(n),new Ht(e)}(t.params),writer:t=>Ze},controller:t=>{var e;const n=t.document,i=t.value,s=t.constraint;return s&&$t(s,zt)?new Qt(n,{props:V.fromObject({options:null!==(e=rn(s))&&void 0!==e?e:[]}),value:i,viewProps:t.viewProps}):new hn(n,{value:i,viewProps:t.viewProps})}},vn=m("col");class mn{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(vn()),e.foldable.bindExpandedClass(this.element,vn(void 0,"expanded")),g(e.foldable,"completed",f(this.element,vn(void 0,"cpl")));const n=t.createElement("div");n.classList.add(vn("h")),this.element.appendChild(n);const i=t.createElement("div");i.classList.add(vn("s")),n.appendChild(i),this.swatchElement=i;const s=t.createElement("div");if(s.classList.add(vn("t")),n.appendChild(s),this.textElement=s,"inline"===e.pickerLayout){const e=t.createElement("div");e.classList.add(vn("p")),this.element.appendChild(e),this.pickerElement=e}else this.pickerElement=null}}function bn(t,e,n){const i=He(t,360),s=Fe(e/100,0,1),o=Fe(n/100,0,1),r=o*s,a=r*(1-Math.abs(i/60%2-1)),l=o-r;let p,d,c;return[p,d,c]=i>=0&&i<60?[r,a,0]:i>=60&&i<120?[a,r,0]:i>=120&&i<180?[0,r,a]:i>=180&&i<240?[0,a,r]:i>=240&&i<300?[a,0,r]:[r,0,a],[255*(p+l),255*(d+l),255*(c+l)]}function _n(t){return[t[0],t[1],t[2]]}function gn(t,e){return[t[0],t[1],t[2],e]}const fn={hsl:{hsl:(t,e,n)=>[t,e,n],hsv:function(t,e,n){const i=n+e*(100-Math.abs(2*n-100))/200;return[t,0!==i?e*(100-Math.abs(2*n-100))/i:0,n+e*(100-Math.abs(2*n-100))/200]},rgb:function(t,e,n){const i=(t%360+360)%360,s=Fe(e/100,0,1),o=Fe(n/100,0,1),r=(1-Math.abs(2*o-1))*s,a=r*(1-Math.abs(i/60%2-1)),l=o-r/2;let p,d,c;return[p,d,c]=i>=0&&i<60?[r,a,0]:i>=60&&i<120?[a,r,0]:i>=120&&i<180?[0,r,a]:i>=180&&i<240?[0,a,r]:i>=240&&i<300?[a,0,r]:[r,0,a],[255*(p+l),255*(d+l),255*(c+l)]}},hsv:{hsl:function(t,e,n){const i=100-Math.abs(n*(200-e)/100-100);return[t,0!==i?e*n/i:0,n*(200-e)/200]},hsv:(t,e,n)=>[t,e,n],rgb:bn},rgb:{hsl:function(t,e,n){const i=Fe(t/255,0,1),s=Fe(e/255,0,1),o=Fe(n/255,0,1),r=Math.max(i,s,o),a=Math.min(i,s,o),l=r-a;let p=0,d=0;const c=(a+r)/2;return 0!==l&&(d=l/(1-Math.abs(r+a-1)),p=i===r?(s-o)/l:s===r?2+(o-i)/l:4+(i-s)/l,p=p/6+(p<0?1:0)),[360*p,100*d,100*c]},hsv:function(t,e,n){const i=Fe(t/255,0,1),s=Fe(e/255,0,1),o=Fe(n/255,0,1),r=Math.max(i,s,o),a=r-Math.min(i,s,o);let l;return l=0===a?0:r===i?((s-o)/a%6+6)%6*60:r===s?60*((o-i)/a+2):60*((i-s)/a+4),[l,100*(0===r?0:a/r),100*r]},rgb:(t,e,n)=>[t,e,n]}};function wn(t,e){return["float"===e?1:"rgb"===t?255:360,"float"===e?1:"rgb"===t?255:100,"float"===e?1:"rgb"===t?255:100]}function xn(t,e,n,i){const s=wn(e,n),o=wn(e,i);return t.map(((t,e)=>t/s[e]*o[e]))}function Cn(t,e){return"object"==typeof t&&!a(t)&&(e in t&&"number"==typeof t[e])}class yn{constructor(t,e,n="int"){this.mode=e,this.type=n,this.comps_=function(t,e,n){var i;const s=wn(e,n);return["rgb"===e?Fe(t[0],0,s[0]):He(t[0],s[0]),Fe(t[1],0,s[1]),Fe(t[2],0,s[2]),Fe(null!==(i=t[3])&&void 0!==i?i:1,0,1)]}(t,e,n)}static black(t="int"){return new yn([0,0,0],"rgb",t)}static fromObject(t,e="int"){const n="a"in t?[t.r,t.g,t.b,t.a]:[t.r,t.g,t.b];return new yn(n,"rgb",e)}static toRgbaObject(t,e="int"){return t.toRgbaObject(e)}static isRgbColorObject(t){return Cn(t,"r")&&Cn(t,"g")&&Cn(t,"b")}static isRgbaColorObject(t){return this.isRgbColorObject(t)&&Cn(t,"a")}static isColorObject(t){return this.isRgbColorObject(t)}static equals(t,e){if(t.mode!==e.mode)return!1;const n=t.comps_,i=e.comps_;for(let t=0;tt.inputElement))];return this.alphaViews_&&t.push(this.alphaViews_.palette.element,this.alphaViews_.text.inputElement),t}}function En(t){return"int"===t?"int":"float"===t?"float":void 0}function Vn(t){const e=S;return A(t,{alpha:e.optional.boolean,color:e.optional.object({alpha:e.optional.boolean,type:e.optional.custom(En)}),expanded:e.optional.boolean,picker:e.optional.custom(en)})}function Ln(t){return t?.1:1}function Mn(t){var e;return null===(e=t.color)||void 0===e?void 0:e.type}function Sn(t,e){const n=t.match(/^(.+)%$/);return n?Math.min(.01*parseFloat(n[1])*e,e):Math.min(parseFloat(t),e)}const An={deg:t=>t,grad:t=>360*t/400,rad:t=>360*t/(2*Math.PI),turn:t=>360*t};function Dn(t){const e=t.match(/^([0-9.]+?)(deg|grad|rad|turn)$/);if(!e)return parseFloat(t);const n=parseFloat(e[1]),i=e[2];return An[i](n)}function jn(t){const e=t.match(/^rgb\(\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/);if(!e)return null;const n=[Sn(e[1],255),Sn(e[2],255),Sn(e[3],255)];return isNaN(n[0])||isNaN(n[1])||isNaN(n[2])?null:n}function Nn(t){return e=>{const n=jn(e);return n?new yn(n,"rgb",t):null}}function On(t){const e=t.match(/^rgba\(\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/);if(!e)return null;const n=[Sn(e[1],255),Sn(e[2],255),Sn(e[3],255),Sn(e[4],1)];return isNaN(n[0])||isNaN(n[1])||isNaN(n[2])||isNaN(n[3])?null:n}function Rn(t){return e=>{const n=On(e);return n?new yn(n,"rgb",t):null}}function In(t){const e=t.match(/^hsl\(\s*([0-9A-Fa-f.]+(?:deg|grad|rad|turn)?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/);if(!e)return null;const n=[Dn(e[1]),Sn(e[2],100),Sn(e[3],100)];return isNaN(n[0])||isNaN(n[1])||isNaN(n[2])?null:n}function Kn(t){return e=>{const n=In(e);return n?new yn(n,"hsl",t):null}}function Un(t){const e=t.match(/^hsla\(\s*([0-9A-Fa-f.]+(?:deg|grad|rad|turn)?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/);if(!e)return null;const n=[Dn(e[1]),Sn(e[2],100),Sn(e[3],100),Sn(e[4],1)];return isNaN(n[0])||isNaN(n[1])||isNaN(n[2])||isNaN(n[3])?null:n}function Tn(t){return e=>{const n=Un(e);return n?new yn(n,"hsl",t):null}}function Bn(t){const e=t.match(/^#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])$/);if(e)return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)];const n=t.match(/^(?:#|0x)([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/);return n?[parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)]:null}function Fn(t){const e=t.match(/^#?([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])$/);if(e)return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16),Te(parseInt(e[4]+e[4],16),0,255,0,1)];const n=t.match(/^(?:#|0x)?([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/);return n?[parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16),Te(parseInt(n[4],16),0,255,0,1)]:null}function Hn(t){const e=t.match(/^\{\s*r\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*g\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*b\s*:\s*([0-9A-Fa-f.]+%?)\s*\}$/);if(!e)return null;const n=[parseFloat(e[1]),parseFloat(e[2]),parseFloat(e[3])];return isNaN(n[0])||isNaN(n[1])||isNaN(n[2])?null:n}function $n(t){return e=>{const n=Hn(e);return n?new yn(n,"rgb",t):null}}function zn(t){const e=t.match(/^\{\s*r\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*g\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*b\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*a\s*:\s*([0-9A-Fa-f.]+%?)\s*\}$/);if(!e)return null;const n=[parseFloat(e[1]),parseFloat(e[2]),parseFloat(e[3]),parseFloat(e[4])];return isNaN(n[0])||isNaN(n[1])||isNaN(n[2])||isNaN(n[3])?null:n}function qn(t){return e=>{const n=zn(e);return n?new yn(n,"rgb",t):null}}const Gn=[{parser:Bn,result:{alpha:!1,mode:"rgb",notation:"hex"}},{parser:Fn,result:{alpha:!0,mode:"rgb",notation:"hex"}},{parser:jn,result:{alpha:!1,mode:"rgb",notation:"func"}},{parser:On,result:{alpha:!0,mode:"rgb",notation:"func"}},{parser:In,result:{alpha:!1,mode:"hsl",notation:"func"}},{parser:Un,result:{alpha:!0,mode:"hsl",notation:"func"}},{parser:Hn,result:{alpha:!1,mode:"rgb",notation:"object"}},{parser:zn,result:{alpha:!0,mode:"rgb",notation:"object"}}];function Yn(t,e="int"){const n=function(t){return Gn.reduce(((e,{parser:n,result:i})=>e||(n(t)?i:null)),null)}(t);return n?"hex"===n.notation&&"float"!==e?Object.assign(Object.assign({},n),{type:"int"}):"func"===n.notation?Object.assign(Object.assign({},n),{type:e}):null:null}const Xn={int:[function(t){const e=Bn(t);return e?new yn(e,"rgb","int"):null},function(t){const e=Fn(t);return e?new yn(e,"rgb","int"):null},Nn("int"),Rn("int"),Kn("int"),Tn("int"),$n("int"),qn("int")],float:[Nn("float"),Rn("float"),Kn("float"),Tn("float"),$n("float"),qn("float")]};function Qn(t){const e=Xn[t];return t=>e.reduce(((e,n)=>e||n(t)),null)}function Jn(t){const e=Fe(Math.floor(t),0,255).toString(16);return 1===e.length?`0${e}`:e}function Wn(t,e="#"){return`${e}${_n(t.getComponents("rgb")).map(Jn).join("")}`}function Zn(t,e="#"){const n=t.getComponents("rgb");return`${e}${[n[0],n[1],n[2],255*n[3]].map(Jn).join("")}`}function ti(t,e){const n=ke("float"===e?2:0);return`rgb(${_n(t.getComponents("rgb",e)).map((t=>n(t))).join(", ")})`}function ei(t){return e=>ti(e,t)}function ni(t,e){const n=ke(2),i=ke("float"===e?2:0);return`rgba(${t.getComponents("rgb",e).map(((t,e)=>(3===e?n:i)(t))).join(", ")})`}function ii(t){return e=>ni(e,t)}function si(t,e){const n=ke("float"===e?2:0),i=["r","g","b"];return`{${_n(t.getComponents("rgb",e)).map(((t,e)=>`${i[e]}: ${n(t)}`)).join(", ")}}`}function oi(t){return e=>si(e,t)}function ri(t,e){const n=ke(2),i=ke("float"===e?2:0),s=["r","g","b","a"];return`{${t.getComponents("rgb",e).map(((t,e)=>`${s[e]}: ${(3===e?n:i)(t)}`)).join(", ")}}`}function ai(t){return e=>ri(e,t)}const li=[{format:{alpha:!1,mode:"rgb",notation:"hex",type:"int"},stringifier:Wn},{format:{alpha:!0,mode:"rgb",notation:"hex",type:"int"},stringifier:Zn},{format:{alpha:!1,mode:"hsl",notation:"func",type:"int"},stringifier:function(t){const e=[ke(0),Ve,Ve];return`hsl(${_n(t.getComponents("hsl")).map(((t,n)=>e[n](t))).join(", ")})`}},{format:{alpha:!0,mode:"hsl",notation:"func",type:"int"},stringifier:function(t){const e=[ke(0),Ve,Ve,ke(2)];return`hsla(${t.getComponents("hsl").map(((t,n)=>e[n](t))).join(", ")})`}},...["int","float"].reduce(((t,e)=>[...t,{format:{alpha:!1,mode:"rgb",notation:"func",type:e},stringifier:ei(e)},{format:{alpha:!0,mode:"rgb",notation:"func",type:e},stringifier:ii(e)},{format:{alpha:!1,mode:"rgb",notation:"object",type:e},stringifier:oi(e)},{format:{alpha:!0,mode:"rgb",notation:"object",type:e},stringifier:ai(e)}]),[])];function pi(t){return li.reduce(((e,n)=>{return e||(i=n.format,s=t,i.alpha===s.alpha&&i.mode===s.mode&&i.notation===s.notation&&i.type===s.type?n.stringifier:null);var i,s}),null)}const di=m("apl");class ci{constructor(t,e){this.onValueChange_=this.onValueChange_.bind(this),this.value=e.value,this.value.emitter.on("change",this.onValueChange_),this.element=t.createElement("div"),this.element.classList.add(di()),e.viewProps.bindTabIndex(this.element);const n=t.createElement("div");n.classList.add(di("b")),this.element.appendChild(n);const i=t.createElement("div");i.classList.add(di("c")),n.appendChild(i),this.colorElem_=i;const s=t.createElement("div");s.classList.add(di("m")),this.element.appendChild(s),this.markerElem_=s;const o=t.createElement("div");o.classList.add(di("p")),this.markerElem_.appendChild(o),this.previewElem_=o,this.update_()}update_(){const t=this.value.rawValue,e=t.getComponents("rgb"),n=new yn([e[0],e[1],e[2],0],"rgb"),i=new yn([e[0],e[1],e[2],255],"rgb"),s=["to right",ni(n),ni(i)];this.colorElem_.style.background=`linear-gradient(${s.join(",")})`,this.previewElem_.style.backgroundColor=ni(t);const o=Te(e[3],0,1,0,100);this.markerElem_.style.left=`${o}%`}onValueChange_(){this.update_()}}class hi{constructor(t,e){this.onKeyDown_=this.onKeyDown_.bind(this),this.onKeyUp_=this.onKeyUp_.bind(this),this.onPointerDown_=this.onPointerDown_.bind(this),this.onPointerMove_=this.onPointerMove_.bind(this),this.onPointerUp_=this.onPointerUp_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.view=new ci(t,{value:this.value,viewProps:this.viewProps}),this.ptHandler_=new Ue(this.view.element),this.ptHandler_.emitter.on("down",this.onPointerDown_),this.ptHandler_.emitter.on("move",this.onPointerMove_),this.ptHandler_.emitter.on("up",this.onPointerUp_),this.view.element.addEventListener("keydown",this.onKeyDown_),this.view.element.addEventListener("keyup",this.onKeyUp_)}handlePointerEvent_(t,e){if(!t.point)return;const n=t.point.x/t.bounds.width,i=this.value.rawValue,[s,o,r]=i.getComponents("hsv");this.value.setRawValue(new yn([s,o,r,n],"hsv"),e)}onPointerDown_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerMove_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerUp_(t){this.handlePointerEvent_(t.data,{forceEmit:!0,last:!0})}onKeyDown_(t){const e=Ne(Ln(!0),Re(t));if(0===e)return;const n=this.value.rawValue,[i,s,o,r]=n.getComponents("hsv");this.value.setRawValue(new yn([i,s,o,r+e],"hsv"),{forceEmit:!1,last:!1})}onKeyUp_(t){0!==Ne(Ln(!0),Re(t))&&this.value.setRawValue(this.value.rawValue,{forceEmit:!0,last:!0})}}const ui=m("coltxt");class vi{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(ui());const n=t.createElement("div");n.classList.add(ui("m")),this.modeElem_=function(t){const e=t.createElement("select");return e.appendChild([{text:"RGB",value:"rgb"},{text:"HSL",value:"hsl"},{text:"HSV",value:"hsv"}].reduce(((e,n)=>{const i=t.createElement("option");return i.textContent=n.text,i.value=n.value,e.appendChild(i),e}),t.createDocumentFragment())),e}(t),this.modeElem_.classList.add(ui("ms")),n.appendChild(this.modeSelectElement);const i=t.createElement("div");i.classList.add(ui("mm")),i.appendChild(T(t,"dropdown")),n.appendChild(i),this.element.appendChild(n);const s=t.createElement("div");s.classList.add(ui("w")),this.element.appendChild(s),this.textsElem_=s,this.textViews_=e.textViews,this.applyTextViews_(),_(e.colorMode,(t=>{this.modeElem_.value=t}))}get modeSelectElement(){return this.modeElem_}get textViews(){return this.textViews_}set textViews(t){this.textViews_=t,this.applyTextViews_()}applyTextViews_(){H(this.textsElem_);const t=this.element.ownerDocument;this.textViews_.forEach((e=>{const n=t.createElement("div");n.classList.add(ui("c")),n.appendChild(e.element),this.textsElem_.appendChild(n)}))}}function mi(t,e,n){const i=wn(t,e)[n];return new qt({min:0,max:i})}function bi(t,e,n){return new qe(t,{arrayPosition:0===n?"fst":2===n?"lst":"mid",baseStep:Ln(!1),parser:e.parser,props:V.fromObject({draggingScale:"float"===e.colorType?.01:1,formatter:(i=e.colorType,ke("float"===i?2:0))}),value:E(0,{constraint:mi(e.colorMode,e.colorType,n)}),viewProps:e.viewProps});var i}class _i{constructor(t,e){this.onModeSelectChange_=this.onModeSelectChange_.bind(this),this.colorType_=e.colorType,this.parser_=e.parser,this.value=e.value,this.viewProps=e.viewProps,this.colorMode=E(this.value.rawValue.mode),this.ccs_=this.createComponentControllers_(t),this.view=new vi(t,{colorMode:this.colorMode,textViews:[this.ccs_[0].view,this.ccs_[1].view,this.ccs_[2].view]}),this.view.modeSelectElement.addEventListener("change",this.onModeSelectChange_)}createComponentControllers_(t){const e={colorMode:this.colorMode.rawValue,colorType:this.colorType_,parser:this.parser_,viewProps:this.viewProps},n=[bi(t,e,0),bi(t,e,1),bi(t,e,2)];return n.forEach(((t,e)=>{je({primary:this.value,secondary:t.value,forward:t=>t.rawValue.getComponents(this.colorMode.rawValue,this.colorType_)[e],backward:(t,n)=>{const i=this.colorMode.rawValue,s=t.rawValue.getComponents(i,this.colorType_);return s[e]=n.rawValue,new yn(gn(_n(s),s[3]),i,this.colorType_)}})})),n}onModeSelectChange_(t){const e=t.currentTarget;this.colorMode.rawValue=e.value,this.ccs_=this.createComponentControllers_(this.view.element.ownerDocument),this.view.textViews=[this.ccs_[0].view,this.ccs_[1].view,this.ccs_[2].view]}}const gi=m("hpl");class fi{constructor(t,e){this.onValueChange_=this.onValueChange_.bind(this),this.value=e.value,this.value.emitter.on("change",this.onValueChange_),this.element=t.createElement("div"),this.element.classList.add(gi()),e.viewProps.bindTabIndex(this.element);const n=t.createElement("div");n.classList.add(gi("c")),this.element.appendChild(n);const i=t.createElement("div");i.classList.add(gi("m")),this.element.appendChild(i),this.markerElem_=i,this.update_()}update_(){const t=this.value.rawValue,[e]=t.getComponents("hsv");this.markerElem_.style.backgroundColor=ti(new yn([e,100,100],"hsv"));const n=Te(e,0,360,0,100);this.markerElem_.style.left=`${n}%`}onValueChange_(){this.update_()}}class wi{constructor(t,e){this.onKeyDown_=this.onKeyDown_.bind(this),this.onKeyUp_=this.onKeyUp_.bind(this),this.onPointerDown_=this.onPointerDown_.bind(this),this.onPointerMove_=this.onPointerMove_.bind(this),this.onPointerUp_=this.onPointerUp_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.view=new fi(t,{value:this.value,viewProps:this.viewProps}),this.ptHandler_=new Ue(this.view.element),this.ptHandler_.emitter.on("down",this.onPointerDown_),this.ptHandler_.emitter.on("move",this.onPointerMove_),this.ptHandler_.emitter.on("up",this.onPointerUp_),this.view.element.addEventListener("keydown",this.onKeyDown_),this.view.element.addEventListener("keyup",this.onKeyUp_)}handlePointerEvent_(t,e){if(!t.point)return;const n=Te(Fe(t.point.x,0,t.bounds.width),0,t.bounds.width,0,359),i=this.value.rawValue,[,s,o,r]=i.getComponents("hsv");this.value.setRawValue(new yn([n,s,o,r],"hsv"),e)}onPointerDown_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerMove_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerUp_(t){this.handlePointerEvent_(t.data,{forceEmit:!0,last:!0})}onKeyDown_(t){const e=Ne(Ln(!1),Re(t));if(0===e)return;const n=this.value.rawValue,[i,s,o,r]=n.getComponents("hsv");this.value.setRawValue(new yn([i+e,s,o,r],"hsv"),{forceEmit:!1,last:!1})}onKeyUp_(t){0!==Ne(Ln(!1),Re(t))&&this.value.setRawValue(this.value.rawValue,{forceEmit:!0,last:!0})}}const xi=m("svp");class Ci{constructor(t,e){this.onValueChange_=this.onValueChange_.bind(this),this.value=e.value,this.value.emitter.on("change",this.onValueChange_),this.element=t.createElement("div"),this.element.classList.add(xi()),e.viewProps.bindTabIndex(this.element);const n=t.createElement("canvas");n.height=64,n.width=64,n.classList.add(xi("c")),this.element.appendChild(n),this.canvasElement=n;const i=t.createElement("div");i.classList.add(xi("m")),this.element.appendChild(i),this.markerElem_=i,this.update_()}update_(){const t=function(t){const e=t.ownerDocument.defaultView;return e&&"document"in e?t.getContext("2d"):null}(this.canvasElement);if(!t)return;const e=this.value.rawValue.getComponents("hsv"),n=this.canvasElement.width,i=this.canvasElement.height,s=t.getImageData(0,0,n,i),o=s.data;for(let t=0;tt.rawValue.getComponents()[3],backward:(t,e)=>{const n=t.rawValue.getComponents();return n[3]=e.rawValue,new yn(n,t.rawValue.mode)}}),this.textC_=new _i(t,{colorType:e.colorType,parser:Ce,value:this.value,viewProps:this.viewProps}),this.view=new kn(t,{alphaViews:this.alphaIcs_?{palette:this.alphaIcs_.palette.view,text:this.alphaIcs_.text.view}:null,hPaletteView:this.hPaletteC_.view,supportsAlpha:e.supportsAlpha,svPaletteView:this.svPaletteC_.view,textView:this.textC_.view})}get textController(){return this.textC_}}const ki=m("colsw");class Ei{constructor(t,e){this.onValueChange_=this.onValueChange_.bind(this),e.value.emitter.on("change",this.onValueChange_),this.value=e.value,this.element=t.createElement("div"),this.element.classList.add(ki()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("div");n.classList.add(ki("sw")),this.element.appendChild(n),this.swatchElem_=n;const i=t.createElement("button");i.classList.add(ki("b")),e.viewProps.bindDisabled(i),this.element.appendChild(i),this.buttonElement=i,this.update_()}update_(){const t=this.value.rawValue;this.swatchElem_.style.backgroundColor=Zn(t)}onValueChange_(){this.update_()}}class Vi{constructor(t,e){this.value=e.value,this.viewProps=e.viewProps,this.view=new Ei(t,{value:this.value,viewProps:this.viewProps})}}class Li{constructor(t,e){this.onButtonBlur_=this.onButtonBlur_.bind(this),this.onButtonClick_=this.onButtonClick_.bind(this),this.onPopupChildBlur_=this.onPopupChildBlur_.bind(this),this.onPopupChildKeydown_=this.onPopupChildKeydown_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.foldable_=J.create(e.expanded),this.swatchC_=new Vi(t,{value:this.value,viewProps:this.viewProps});const n=this.swatchC_.view.buttonElement;n.addEventListener("blur",this.onButtonBlur_),n.addEventListener("click",this.onButtonClick_),this.textC_=new ne(t,{parser:e.parser,props:V.fromObject({formatter:e.formatter}),value:this.value,viewProps:this.viewProps}),this.view=new mn(t,{foldable:this.foldable_,pickerLayout:e.pickerLayout}),this.view.swatchElement.appendChild(this.swatchC_.view.element),this.view.textElement.appendChild(this.textC_.view.element),this.popC_="popup"===e.pickerLayout?new Zt(t,{viewProps:this.viewProps}):null;const i=new Pi(t,{colorType:e.colorType,supportsAlpha:e.supportsAlpha,value:this.value,viewProps:this.viewProps});i.view.allFocusableElements.forEach((t=>{t.addEventListener("blur",this.onPopupChildBlur_),t.addEventListener("keydown",this.onPopupChildKeydown_)})),this.pickerC_=i,this.popC_?(this.view.element.appendChild(this.popC_.view.element),this.popC_.view.element.appendChild(i.view.element),je({primary:this.foldable_.value("expanded"),secondary:this.popC_.shows,forward:t=>t.rawValue,backward:(t,e)=>e.rawValue})):this.view.pickerElement&&(this.view.pickerElement.appendChild(this.pickerC_.view.element),Z(this.foldable_,this.view.pickerElement))}get textController(){return this.textC_}onButtonBlur_(t){if(!this.popC_)return;const e=this.view.element,n=t.relatedTarget;n&&e.contains(n)||(this.popC_.shows.rawValue=!1)}onButtonClick_(){this.foldable_.set("expanded",!this.foldable_.get("expanded")),this.foldable_.get("expanded")&&this.pickerC_.view.allFocusableElements[0].focus()}onPopupChildBlur_(t){if(!this.popC_)return;const e=this.popC_.view.element,n=$(t);n&&e.contains(n)||n&&n===this.swatchC_.view.buttonElement&&!I(e.ownerDocument)||(this.popC_.shows.rawValue=!1)}onPopupChildKeydown_(t){this.popC_?"Escape"===t.key&&(this.popC_.shows.rawValue=!1):this.view.pickerElement&&"Escape"===t.key&&this.swatchC_.view.buttonElement.focus()}}function Mi(t){return _n(t.getComponents("rgb")).reduce(((t,e)=>t<<8|255&Math.floor(e)),0)}function Si(t){return t.getComponents("rgb").reduce(((t,e,n)=>t<<8|255&Math.floor(3===n?255*e:e)),0)>>>0}function Ai(t){return"number"!=typeof t?yn.black():new yn([(e=t)>>16&255,e>>8&255,255&e],"rgb");var e}function Di(t){return"number"!=typeof t?yn.black():new yn([(e=t)>>24&255,e>>16&255,e>>8&255,Te(255&e,0,255,0,1)],"rgb");var e}function ji(t){var e;return!(!(null==t?void 0:t.alpha)&&!(null===(e=null==t?void 0:t.color)||void 0===e?void 0:e.alpha))}function Ni(t){return t?t=>Zn(t,"0x"):t=>Wn(t,"0x")}const Oi={id:"input-color-number",type:"input",accept:(t,e)=>{if("number"!=typeof t)return null;if(!function(t){return"color"in t||"view"in t&&"color"===t.view}(e))return null;const n=Vn(e);return n?{initialValue:t,params:n}:null},binding:{reader:t=>ji(t.params)?Di:Ai,equals:yn.equals,writer:t=>function(t){const e=t?Si:Mi;return(t,n)=>{Ze(t,e(n))}}(ji(t.params))},controller:t=>{const e=ji(t.params),n="expanded"in t.params?t.params.expanded:void 0,i="picker"in t.params?t.params.picker:void 0;return new Li(t.document,{colorType:"int",expanded:null!=n&&n,formatter:Ni(e),parser:Qn("int"),pickerLayout:null!=i?i:"popup",supportsAlpha:e,value:t.value,viewProps:t.viewProps})}};function Ri(t){return e=>function(t,e){return yn.isColorObject(t)?yn.fromObject(t,e):yn.black(e)}(e,t)}function Ii(t,e){return n=>t?ri(n,e):si(n,e)}const Ki={id:"input-color-object",type:"input",accept:(t,e)=>{if(!yn.isColorObject(t))return null;const n=Vn(e);return n?{initialValue:t,params:n}:null},binding:{reader:t=>Ri(Mn(t.params)),equals:yn.equals,writer:t=>{return i=t.initialValue,e=yn.isRgbaColorObject(i),n=Mn(t.params),(t,i)=>{e?function(t,e,n){const i=e.toRgbaObject(n);t.writeProperty("r",i.r),t.writeProperty("g",i.g),t.writeProperty("b",i.b),t.writeProperty("a",i.a)}(t,i,n):function(t,e,n){const i=e.toRgbaObject(n);t.writeProperty("r",i.r),t.writeProperty("g",i.g),t.writeProperty("b",i.b)}(t,i,n)};var e,n,i}},controller:t=>{var e;const n=yn.isRgbaColorObject(t.initialValue),i="expanded"in t.params?t.params.expanded:void 0,s="picker"in t.params?t.params.picker:void 0,o=null!==(e=Mn(t.params))&&void 0!==e?e:"int";return new Li(t.document,{colorType:o,expanded:null!=i&&i,formatter:Ii(n,o),parser:Qn(o),pickerLayout:null!=s?s:"popup",supportsAlpha:n,value:t.value,viewProps:t.viewProps})}},Ui={id:"input-color-string",type:"input",accept:(t,e)=>{if("string"!=typeof t)return null;if("view"in e&&"text"===e.view)return null;const n=Yn(t,Mn(e));if(!n)return null;if(!pi(n))return null;const i=Vn(e);return i?{initialValue:t,params:i}:null},binding:{reader:t=>{var e;return function(t){const e=Xn[t];return n=>{if("string"!=typeof n)return yn.black(t);const i=e.reduce(((t,e)=>t||e(n)),null);return null!=i?i:yn.black(t)}}(null!==(e=Mn(t.params))&&void 0!==e?e:"int")},equals:yn.equals,writer:t=>{const e=Yn(t.initialValue,Mn(t.params));if(!e)throw d.shouldNeverHappen();const n=function(t){const e=pi(t);return e?(t,n)=>{Ze(t,e(n))}:null}(e);if(!n)throw d.notBindable();return n}},controller:t=>{const e=Yn(t.initialValue,Mn(t.params));if(!e)throw d.shouldNeverHappen();const n=pi(e);if(!n)throw d.shouldNeverHappen();const i="expanded"in t.params?t.params.expanded:void 0,s="picker"in t.params?t.params.picker:void 0;return new Li(t.document,{colorType:e.type,expanded:null!=i&&i,formatter:n,parser:Qn(e.type),pickerLayout:null!=s?s:"popup",supportsAlpha:e.alpha,value:t.value,viewProps:t.viewProps})}};class Ti{constructor(t){this.components=t.components,this.asm_=t.assembly}constrain(t){const e=this.asm_.toComponents(t).map(((t,e)=>{var n,i;return null!==(i=null===(n=this.components[e])||void 0===n?void 0:n.constrain(t))&&void 0!==i?i:t}));return this.asm_.fromComponents(e)}}const Bi=m("pndtxt");class Fi{constructor(t,e){this.textViews=e.textViews,this.element=t.createElement("div"),this.element.classList.add(Bi()),this.textViews.forEach((e=>{const n=t.createElement("div");n.classList.add(Bi("a")),n.appendChild(e.element),this.element.appendChild(n)}))}}class Hi{constructor(t,e){this.value=e.value,this.viewProps=e.viewProps,this.acs_=e.axes.map(((n,i)=>function(t,e,n){return new qe(t,{arrayPosition:0===n?"fst":n===e.axes.length-1?"lst":"mid",baseStep:e.axes[n].baseStep,parser:e.parser,props:e.axes[n].textProps,value:E(0,{constraint:e.axes[n].constraint}),viewProps:e.viewProps})}(t,e,i))),this.acs_.forEach(((t,n)=>{je({primary:this.value,secondary:t.value,forward:t=>e.assembly.toComponents(t.rawValue)[n],backward:(t,i)=>{const s=e.assembly.toComponents(t.rawValue);return s[n]=i.rawValue,e.assembly.fromComponents(s)}})})),this.view=new Fi(t,{textViews:this.acs_.map((t=>t.view))})}}function $i(t,e){return"step"in t&&!a(t.step)?new Gt(t.step,e):null}function zi(t){return"max"in t&&!a(t.max)||"min"in t&&!a(t.min)?new qt({max:t.max,min:t.min}):null}function qi(t){const[e,n]=function(t){const e=t?$t(t,qt):null;return e?[e.minValue,e.maxValue]:[void 0,void 0]}(t);return[null!=e?e:0,null!=n?n:100]}const Gi={id:"input-number",type:"input",accept:(t,e)=>{if("number"!=typeof t)return null;const n=S,i=A(e,{format:n.optional.function,max:n.optional.number,min:n.optional.number,options:n.optional.custom(tn),step:n.optional.number});return i?{initialValue:t,params:i}:null},binding:{reader:t=>ye,constraint:t=>function(t,e){const n=[],i=$i(t,e);i&&n.push(i);const s=zi(t);s&&n.push(s);const o=on(t.options);return o&&n.push(o),new Ht(n)}(t.params,t.initialValue),writer:t=>Ze},controller:t=>{var e,n;const i=t.value,s=t.constraint;if(s&&$t(s,zt))return new Qt(t.document,{props:V.fromObject({options:null!==(e=rn(s))&&void 0!==e?e:[]}),value:i,viewProps:t.viewProps});const o=null!==(n="format"in t.params?t.params.format:void 0)&&void 0!==n?n:ke(an(s,i.rawValue));if(s&&$t(s,qt)){const[e,n]=qi(s);return new We(t.document,{baseStep:ln(s),parser:Ce,sliderProps:V.fromObject({maxValue:n,minValue:e}),textProps:V.fromObject({draggingScale:pn(s,i.rawValue),formatter:o}),value:i,viewProps:t.viewProps})}return new qe(t.document,{baseStep:ln(s),parser:Ce,props:V.fromObject({draggingScale:pn(s,i.rawValue),formatter:o}),value:i,viewProps:t.viewProps})}};class Yi{constructor(t=0,e=0){this.x=t,this.y=e}getComponents(){return[this.x,this.y]}static isObject(t){if(a(t))return!1;const e=t.x,n=t.y;return"number"==typeof e&&"number"==typeof n}static equals(t,e){return t.x===e.x&&t.y===e.y}toObject(){return{x:this.x,y:this.y}}}const Xi={toComponents:t=>t.getComponents(),fromComponents:t=>new Yi(...t)},Qi=m("p2d");class Ji{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(Qi()),e.viewProps.bindClassModifiers(this.element),_(e.expanded,f(this.element,Qi(void 0,"expanded")));const n=t.createElement("div");n.classList.add(Qi("h")),this.element.appendChild(n);const i=t.createElement("button");i.classList.add(Qi("b")),i.appendChild(T(t,"p2dpad")),e.viewProps.bindDisabled(i),n.appendChild(i),this.buttonElement=i;const s=t.createElement("div");if(s.classList.add(Qi("t")),n.appendChild(s),this.textElement=s,"inline"===e.pickerLayout){const e=t.createElement("div");e.classList.add(Qi("p")),this.element.appendChild(e),this.pickerElement=e}else this.pickerElement=null}}const Wi=m("p2dp");class Zi{constructor(t,e){this.onFoldableChange_=this.onFoldableChange_.bind(this),this.onValueChange_=this.onValueChange_.bind(this),this.invertsY_=e.invertsY,this.maxValue_=e.maxValue,this.element=t.createElement("div"),this.element.classList.add(Wi()),"popup"===e.layout&&this.element.classList.add(Wi(void 0,"p"));const n=t.createElement("div");n.classList.add(Wi("p")),e.viewProps.bindTabIndex(n),this.element.appendChild(n),this.padElement=n;const i=t.createElementNS(O,"svg");i.classList.add(Wi("g")),this.padElement.appendChild(i),this.svgElem_=i;const s=t.createElementNS(O,"line");s.classList.add(Wi("ax")),s.setAttributeNS(null,"x1","0"),s.setAttributeNS(null,"y1","50%"),s.setAttributeNS(null,"x2","100%"),s.setAttributeNS(null,"y2","50%"),this.svgElem_.appendChild(s);const o=t.createElementNS(O,"line");o.classList.add(Wi("ax")),o.setAttributeNS(null,"x1","50%"),o.setAttributeNS(null,"y1","0"),o.setAttributeNS(null,"x2","50%"),o.setAttributeNS(null,"y2","100%"),this.svgElem_.appendChild(o);const r=t.createElementNS(O,"line");r.classList.add(Wi("l")),r.setAttributeNS(null,"x1","50%"),r.setAttributeNS(null,"y1","50%"),this.svgElem_.appendChild(r),this.lineElem_=r;const a=t.createElement("div");a.classList.add(Wi("m")),this.padElement.appendChild(a),this.markerElem_=a,e.value.emitter.on("change",this.onValueChange_),this.value=e.value,this.update_()}get allFocusableElements(){return[this.padElement]}update_(){const[t,e]=this.value.rawValue.getComponents(),n=this.maxValue_,i=Te(t,-n,+n,0,100),s=Te(e,-n,+n,0,100),o=this.invertsY_?100-s:s;this.lineElem_.setAttributeNS(null,"x2",`${i}%`),this.lineElem_.setAttributeNS(null,"y2",`${o}%`),this.markerElem_.style.left=`${i}%`,this.markerElem_.style.top=`${o}%`}onValueChange_(){this.update_()}onFoldableChange_(){this.update_()}}function ts(t,e,n){return[Ne(e[0],Re(t)),Ne(e[1],Oe(t))*(n?1:-1)]}class es{constructor(t,e){this.onPadKeyDown_=this.onPadKeyDown_.bind(this),this.onPadKeyUp_=this.onPadKeyUp_.bind(this),this.onPointerDown_=this.onPointerDown_.bind(this),this.onPointerMove_=this.onPointerMove_.bind(this),this.onPointerUp_=this.onPointerUp_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.baseSteps_=e.baseSteps,this.maxValue_=e.maxValue,this.invertsY_=e.invertsY,this.view=new Zi(t,{invertsY:this.invertsY_,layout:e.layout,maxValue:this.maxValue_,value:this.value,viewProps:this.viewProps}),this.ptHandler_=new Ue(this.view.padElement),this.ptHandler_.emitter.on("down",this.onPointerDown_),this.ptHandler_.emitter.on("move",this.onPointerMove_),this.ptHandler_.emitter.on("up",this.onPointerUp_),this.view.padElement.addEventListener("keydown",this.onPadKeyDown_),this.view.padElement.addEventListener("keyup",this.onPadKeyUp_)}handlePointerEvent_(t,e){if(!t.point)return;const n=this.maxValue_,i=Te(t.point.x,0,t.bounds.width,-n,+n),s=Te(this.invertsY_?t.bounds.height-t.point.y:t.point.y,0,t.bounds.height,-n,+n);this.value.setRawValue(new Yi(i,s),e)}onPointerDown_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerMove_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerUp_(t){this.handlePointerEvent_(t.data,{forceEmit:!0,last:!0})}onPadKeyDown_(t){Ie(t.key)&&t.preventDefault();const[e,n]=ts(t,this.baseSteps_,this.invertsY_);0===e&&0===n||this.value.setRawValue(new Yi(this.value.rawValue.x+e,this.value.rawValue.y+n),{forceEmit:!1,last:!1})}onPadKeyUp_(t){const[e,n]=ts(t,this.baseSteps_,this.invertsY_);0===e&&0===n||this.value.setRawValue(this.value.rawValue,{forceEmit:!0,last:!0})}}class ns{constructor(t,e){var n,i;this.onPopupChildBlur_=this.onPopupChildBlur_.bind(this),this.onPopupChildKeydown_=this.onPopupChildKeydown_.bind(this),this.onPadButtonBlur_=this.onPadButtonBlur_.bind(this),this.onPadButtonClick_=this.onPadButtonClick_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.foldable_=J.create(e.expanded),this.popC_="popup"===e.pickerLayout?new Zt(t,{viewProps:this.viewProps}):null;const s=new es(t,{baseSteps:[e.axes[0].baseStep,e.axes[1].baseStep],invertsY:e.invertsY,layout:e.pickerLayout,maxValue:e.maxValue,value:this.value,viewProps:this.viewProps});s.view.allFocusableElements.forEach((t=>{t.addEventListener("blur",this.onPopupChildBlur_),t.addEventListener("keydown",this.onPopupChildKeydown_)})),this.pickerC_=s,this.textC_=new Hi(t,{assembly:Xi,axes:e.axes,parser:e.parser,value:this.value,viewProps:this.viewProps}),this.view=new Ji(t,{expanded:this.foldable_.value("expanded"),pickerLayout:e.pickerLayout,viewProps:this.viewProps}),this.view.textElement.appendChild(this.textC_.view.element),null===(n=this.view.buttonElement)||void 0===n||n.addEventListener("blur",this.onPadButtonBlur_),null===(i=this.view.buttonElement)||void 0===i||i.addEventListener("click",this.onPadButtonClick_),this.popC_?(this.view.element.appendChild(this.popC_.view.element),this.popC_.view.element.appendChild(this.pickerC_.view.element),je({primary:this.foldable_.value("expanded"),secondary:this.popC_.shows,forward:t=>t.rawValue,backward:(t,e)=>e.rawValue})):this.view.pickerElement&&(this.view.pickerElement.appendChild(this.pickerC_.view.element),Z(this.foldable_,this.view.pickerElement))}onPadButtonBlur_(t){if(!this.popC_)return;const e=this.view.element,n=t.relatedTarget;n&&e.contains(n)||(this.popC_.shows.rawValue=!1)}onPadButtonClick_(){this.foldable_.set("expanded",!this.foldable_.get("expanded")),this.foldable_.get("expanded")&&this.pickerC_.view.allFocusableElements[0].focus()}onPopupChildBlur_(t){if(!this.popC_)return;const e=this.popC_.view.element,n=$(t);n&&e.contains(n)||n&&n===this.view.buttonElement&&!I(e.ownerDocument)||(this.popC_.shows.rawValue=!1)}onPopupChildKeydown_(t){this.popC_?"Escape"===t.key&&(this.popC_.shows.rawValue=!1):this.view.pickerElement&&"Escape"===t.key&&this.view.buttonElement.focus()}}function is(t){return Yi.isObject(t)?new Yi(t.x,t.y):new Yi}function ss(t,e){t.writeProperty("x",e.x),t.writeProperty("y",e.y)}function os(t,e){if(!t)return;const n=[],i=$i(t,e);i&&n.push(i);const s=zi(t);return s&&n.push(s),new Ht(n)}function rs(t,e){var n,i;const s=t&&$t(t,qt);if(s)return Math.max(Math.abs(null!==(n=s.minValue)&&void 0!==n?n:0),Math.abs(null!==(i=s.maxValue)&&void 0!==i?i:0));const o=ln(t);return Math.max(10*Math.abs(o),10*Math.abs(e))}function as(t,e){const n=e instanceof Ti?e.components[0]:void 0,i=e instanceof Ti?e.components[1]:void 0,s=rs(n,t.x),o=rs(i,t.y);return Math.max(s,o)}function ls(t,e){return{baseStep:ln(e),constraint:e,textProps:V.fromObject({draggingScale:pn(e,t),formatter:ke(an(e,t))})}}function ps(t){if(!("y"in t))return!1;const e=t.y;return!!e&&("inverted"in e&&!!e.inverted)}const ds={id:"input-point2d",type:"input",accept:(t,e)=>{if(!Yi.isObject(t))return null;const n=S,i=A(e,{expanded:n.optional.boolean,picker:n.optional.custom(en),x:n.optional.custom(nn),y:n.optional.object({inverted:n.optional.boolean,max:n.optional.number,min:n.optional.number,step:n.optional.number})});return i?{initialValue:t,params:i}:null},binding:{reader:t=>is,constraint:t=>{return e=t.params,n=t.initialValue,new Ti({assembly:Xi,components:[os("x"in e?e.x:void 0,n.x),os("y"in e?e.y:void 0,n.y)]});var e,n},equals:Yi.equals,writer:t=>ss},controller:t=>{const e=t.document,n=t.value,i=t.constraint;if(!(i instanceof Ti))throw d.shouldNeverHappen();const s="expanded"in t.params?t.params.expanded:void 0,o="picker"in t.params?t.params.picker:void 0;return new ns(e,{axes:[ls(n.rawValue.x,i.components[0]),ls(n.rawValue.y,i.components[1])],expanded:null!=s&&s,invertsY:ps(t.params),maxValue:as(n.rawValue,i),parser:Ce,pickerLayout:null!=o?o:"popup",value:n,viewProps:t.viewProps})}};class cs{constructor(t=0,e=0,n=0){this.x=t,this.y=e,this.z=n}getComponents(){return[this.x,this.y,this.z]}static isObject(t){if(a(t))return!1;const e=t.x,n=t.y,i=t.z;return"number"==typeof e&&"number"==typeof n&&"number"==typeof i}static equals(t,e){return t.x===e.x&&t.y===e.y&&t.z===e.z}toObject(){return{x:this.x,y:this.y,z:this.z}}}const hs={toComponents:t=>t.getComponents(),fromComponents:t=>new cs(...t)};function us(t){return cs.isObject(t)?new cs(t.x,t.y,t.z):new cs}function vs(t,e){t.writeProperty("x",e.x),t.writeProperty("y",e.y),t.writeProperty("z",e.z)}function ms(t,e){return{baseStep:ln(e),constraint:e,textProps:V.fromObject({draggingScale:pn(e,t),formatter:ke(an(e,t))})}}const bs={id:"input-point3d",type:"input",accept:(t,e)=>{if(!cs.isObject(t))return null;const n=S,i=A(e,{x:n.optional.custom(nn),y:n.optional.custom(nn),z:n.optional.custom(nn)});return i?{initialValue:t,params:i}:null},binding:{reader:t=>us,constraint:t=>{return e=t.params,n=t.initialValue,new Ti({assembly:hs,components:[os("x"in e?e.x:void 0,n.x),os("y"in e?e.y:void 0,n.y),os("z"in e?e.z:void 0,n.z)]});var e,n},equals:cs.equals,writer:t=>vs},controller:t=>{const e=t.value,n=t.constraint;if(!(n instanceof Ti))throw d.shouldNeverHappen();return new Hi(t.document,{assembly:hs,axes:[ms(e.rawValue.x,n.components[0]),ms(e.rawValue.y,n.components[1]),ms(e.rawValue.z,n.components[2])],parser:Ce,value:e,viewProps:t.viewProps})}};class _s{constructor(t=0,e=0,n=0,i=0){this.x=t,this.y=e,this.z=n,this.w=i}getComponents(){return[this.x,this.y,this.z,this.w]}static isObject(t){if(a(t))return!1;const e=t.x,n=t.y,i=t.z,s=t.w;return"number"==typeof e&&"number"==typeof n&&"number"==typeof i&&"number"==typeof s}static equals(t,e){return t.x===e.x&&t.y===e.y&&t.z===e.z&&t.w===e.w}toObject(){return{x:this.x,y:this.y,z:this.z,w:this.w}}}const gs={toComponents:t=>t.getComponents(),fromComponents:t=>new _s(...t)};function fs(t){return _s.isObject(t)?new _s(t.x,t.y,t.z,t.w):new _s}function ws(t,e){t.writeProperty("x",e.x),t.writeProperty("y",e.y),t.writeProperty("z",e.z),t.writeProperty("w",e.w)}const xs={id:"input-point4d",type:"input",accept:(t,e)=>{if(!_s.isObject(t))return null;const n=S,i=A(e,{x:n.optional.custom(nn),y:n.optional.custom(nn),z:n.optional.custom(nn),w:n.optional.custom(nn)});return i?{initialValue:t,params:i}:null},binding:{reader:t=>fs,constraint:t=>{return e=t.params,n=t.initialValue,new Ti({assembly:gs,components:[os("x"in e?e.x:void 0,n.x),os("y"in e?e.y:void 0,n.y),os("z"in e?e.z:void 0,n.z),os("w"in e?e.w:void 0,n.w)]});var e,n},equals:_s.equals,writer:t=>ws},controller:t=>{const e=t.value,n=t.constraint;if(!(n instanceof Ti))throw d.shouldNeverHappen();return new Hi(t.document,{assembly:gs,axes:e.rawValue.getComponents().map(((t,e)=>{return i=t,{baseStep:ln(s=n.components[e]),constraint:s,textProps:V.fromObject({draggingScale:pn(s,i),formatter:ke(an(s,i))})};var i,s})),parser:Ce,value:e,viewProps:t.viewProps})}};const Cs={id:"input-string",type:"input",accept:(t,e)=>{if("string"!=typeof t)return null;const n=A(e,{options:S.optional.custom(tn)});return n?{initialValue:t,params:n}:null},binding:{reader:t=>Le,constraint:t=>function(t){const e=[],n=on(t.options);return n&&e.push(n),new Ht(e)}(t.params),writer:t=>Ze},controller:t=>{var e;const n=t.document,i=t.value,s=t.constraint;return s&&$t(s,zt)?new Qt(n,{props:V.fromObject({options:null!==(e=rn(s))&&void 0!==e?e:[]}),value:i,viewProps:t.viewProps}):new ne(n,{parser:t=>t,props:V.fromObject({formatter:Me}),value:i,viewProps:t.viewProps})}},ys={defaultInterval:200,defaultLineCount:3},Ps=m("mll");class ks{constructor(t,e){this.onValueUpdate_=this.onValueUpdate_.bind(this),this.formatter_=e.formatter,this.element=t.createElement("div"),this.element.classList.add(Ps()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("textarea");n.classList.add(Ps("i")),n.style.height=`calc(var(--bld-us) * ${e.lineCount})`,n.readOnly=!0,e.viewProps.bindDisabled(n),this.element.appendChild(n),this.textareaElem_=n,e.value.emitter.on("change",this.onValueUpdate_),this.value=e.value,this.update_()}update_(){const t=this.textareaElem_,e=t.scrollTop===t.scrollHeight-t.clientHeight,n=[];this.value.rawValue.forEach((t=>{void 0!==t&&n.push(this.formatter_(t))})),t.textContent=n.join("\n"),e&&(t.scrollTop=t.scrollHeight)}onValueUpdate_(){this.update_()}}class Es{constructor(t,e){this.value=e.value,this.viewProps=e.viewProps,this.view=new ks(t,{formatter:e.formatter,lineCount:e.lineCount,value:this.value,viewProps:this.viewProps})}}const Vs=m("sgl");class Ls{constructor(t,e){this.onValueUpdate_=this.onValueUpdate_.bind(this),this.formatter_=e.formatter,this.element=t.createElement("div"),this.element.classList.add(Vs()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("input");n.classList.add(Vs("i")),n.readOnly=!0,n.type="text",e.viewProps.bindDisabled(n),this.element.appendChild(n),this.inputElement=n,e.value.emitter.on("change",this.onValueUpdate_),this.value=e.value,this.update_()}update_(){const t=this.value.rawValue,e=t[t.length-1];this.inputElement.value=void 0!==e?this.formatter_(e):""}onValueUpdate_(){this.update_()}}class Ms{constructor(t,e){this.value=e.value,this.viewProps=e.viewProps,this.view=new Ls(t,{formatter:e.formatter,value:this.value,viewProps:this.viewProps})}}const Ss={id:"monitor-bool",type:"monitor",accept:(t,e)=>{if("boolean"!=typeof t)return null;const n=A(e,{lineCount:S.optional.number});return n?{initialValue:t,params:n}:null},binding:{reader:t=>ie},controller:t=>{var e;return 1===t.value.rawValue.length?new Ms(t.document,{formatter:se,value:t.value,viewProps:t.viewProps}):new Es(t.document,{formatter:se,lineCount:null!==(e=t.params.lineCount)&&void 0!==e?e:ys.defaultLineCount,value:t.value,viewProps:t.viewProps})}},As=m("grl");class Ds{constructor(t,e){this.onCursorChange_=this.onCursorChange_.bind(this),this.onValueUpdate_=this.onValueUpdate_.bind(this),this.element=t.createElement("div"),this.element.classList.add(As()),e.viewProps.bindClassModifiers(this.element),this.formatter_=e.formatter,this.props_=e.props,this.cursor_=e.cursor,this.cursor_.emitter.on("change",this.onCursorChange_);const n=t.createElementNS(O,"svg");n.classList.add(As("g")),n.style.height=`calc(var(--bld-us) * ${e.lineCount})`,this.element.appendChild(n),this.svgElem_=n;const i=t.createElementNS(O,"polyline");this.svgElem_.appendChild(i),this.lineElem_=i;const s=t.createElement("div");s.classList.add(As("t"),m("tt")()),this.element.appendChild(s),this.tooltipElem_=s,e.value.emitter.on("change",this.onValueUpdate_),this.value=e.value,this.update_()}get graphElement(){return this.svgElem_}update_(){const t=this.svgElem_.getBoundingClientRect(),e=this.value.rawValue.length-1,n=this.props_.get("minValue"),i=this.props_.get("maxValue"),s=[];this.value.rawValue.forEach(((o,r)=>{if(void 0===o)return;const a=Te(r,0,e,0,t.width),l=Te(o,n,i,t.height,0);s.push([a,l].join(","))})),this.lineElem_.setAttributeNS(null,"points",s.join(" "));const o=this.tooltipElem_,r=this.value.rawValue[this.cursor_.rawValue];if(void 0===r)return void o.classList.remove(As("t","a"));const a=Te(this.cursor_.rawValue,0,e,0,t.width),l=Te(r,n,i,t.height,0);o.style.left=`${a}px`,o.style.top=`${l}px`,o.textContent=`${this.formatter_(r)}`,o.classList.contains(As("t","a"))||(o.classList.add(As("t","a"),As("t","in")),R(o),o.classList.remove(As("t","in")))}onValueUpdate_(){this.update_()}onCursorChange_(){this.update_()}}class js{constructor(t,e){if(this.onGraphMouseMove_=this.onGraphMouseMove_.bind(this),this.onGraphMouseLeave_=this.onGraphMouseLeave_.bind(this),this.onGraphPointerDown_=this.onGraphPointerDown_.bind(this),this.onGraphPointerMove_=this.onGraphPointerMove_.bind(this),this.onGraphPointerUp_=this.onGraphPointerUp_.bind(this),this.props_=e.props,this.value=e.value,this.viewProps=e.viewProps,this.cursor_=E(-1),this.view=new Ds(t,{cursor:this.cursor_,formatter:e.formatter,lineCount:e.lineCount,props:this.props_,value:this.value,viewProps:this.viewProps}),I(t)){const t=new Ue(this.view.element);t.emitter.on("down",this.onGraphPointerDown_),t.emitter.on("move",this.onGraphPointerMove_),t.emitter.on("up",this.onGraphPointerUp_)}else this.view.element.addEventListener("mousemove",this.onGraphMouseMove_),this.view.element.addEventListener("mouseleave",this.onGraphMouseLeave_)}onGraphMouseLeave_(){this.cursor_.rawValue=-1}onGraphMouseMove_(t){const e=this.view.element.getBoundingClientRect();this.cursor_.rawValue=Math.floor(Te(t.offsetX,0,e.width,0,this.value.rawValue.length))}onGraphPointerDown_(t){this.onGraphPointerMove_(t)}onGraphPointerMove_(t){t.data.point?this.cursor_.rawValue=Math.floor(Te(t.data.point.x,0,t.data.bounds.width,0,this.value.rawValue.length)):this.cursor_.rawValue=-1}onGraphPointerUp_(){this.cursor_.rawValue=-1}}function Ns(t){return"format"in t&&!a(t.format)?t.format:ke(2)}function Os(t){return"view"in t&&"graph"===t.view}const Rs={id:"monitor-number",type:"monitor",accept:(t,e)=>{if("number"!=typeof t)return null;const n=S,i=A(e,{format:n.optional.function,lineCount:n.optional.number,max:n.optional.number,min:n.optional.number,view:n.optional.string});return i?{initialValue:t,params:i}:null},binding:{defaultBufferSize:t=>Os(t)?64:1,reader:t=>ye},controller:t=>Os(t.params)?function(t){var e,n,i;return new js(t.document,{formatter:Ns(t.params),lineCount:null!==(e=t.params.lineCount)&&void 0!==e?e:ys.defaultLineCount,props:V.fromObject({maxValue:null!==(n="max"in t.params?t.params.max:null)&&void 0!==n?n:100,minValue:null!==(i="min"in t.params?t.params.min:null)&&void 0!==i?i:0}),value:t.value,viewProps:t.viewProps})}(t):function(t){var e;return 1===t.value.rawValue.length?new Ms(t.document,{formatter:Ns(t.params),value:t.value,viewProps:t.viewProps}):new Es(t.document,{formatter:Ns(t.params),lineCount:null!==(e=t.params.lineCount)&&void 0!==e?e:ys.defaultLineCount,value:t.value,viewProps:t.viewProps})}(t)},Is={id:"monitor-string",type:"monitor",accept:(t,e)=>{if("string"!=typeof t)return null;const n=S,i=A(e,{lineCount:n.optional.number,multiline:n.optional.boolean});return i?{initialValue:t,params:i}:null},binding:{reader:t=>Le},controller:t=>{var e;const n=t.value;return n.rawValue.length>1||"multiline"in t.params&&t.params.multiline?new Es(t.document,{formatter:Me,lineCount:null!==(e=t.params.lineCount)&&void 0!==e?e:ys.defaultLineCount,value:n,viewProps:t.viewProps}):new Ms(t.document,{formatter:Me,value:n,viewProps:t.viewProps})}};class Ks{constructor(t){this.onValueChange_=this.onValueChange_.bind(this),this.reader=t.reader,this.writer=t.writer,this.emitter=new u,this.value=t.value,this.value.emitter.on("change",this.onValueChange_),this.target=t.target,this.read()}read(){const t=this.target.read();void 0!==t&&(this.value.rawValue=this.reader(t))}write_(t){this.writer(this.target,t)}onValueChange_(t){this.write_(t.rawValue),this.emitter.emit("change",{options:t.options,rawValue:t.rawValue,sender:this})}}class Us{constructor(t){this.onTick_=this.onTick_.bind(this),this.reader_=t.reader,this.target=t.target,this.emitter=new u,this.value=t.value,this.ticker=t.ticker,this.ticker.emitter.on("tick",this.onTick_),this.read()}dispose(){this.ticker.dispose()}read(){const t=this.target.read();if(void 0===t)return;const e=this.value.rawValue,n=this.reader_(t);this.value.rawValue=function(t,e){const n=[...De(t),e];return n.length>t.length?n.splice(0,n.length-t.length):Se(n,t.length),n}(e,n),this.emitter.emit("update",{rawValue:n,sender:this})}onTick_(t){this.read()}}function Ts(t,e){return 0===e?new Bt:new Ft(t,null!=e?e:ys.defaultInterval)}class Bs{constructor(){this.pluginsMap_={blades:[],inputs:[],monitors:[]}}getAll(){return[...this.pluginsMap_.blades,...this.pluginsMap_.inputs,...this.pluginsMap_.monitors]}register(t){"blade"===t.type?this.pluginsMap_.blades.unshift(t):"input"===t.type?this.pluginsMap_.inputs.unshift(t):"monitor"===t.type&&this.pluginsMap_.monitors.unshift(t)}createInput(t,e,n){if(a(e.read()))throw new d({context:{key:e.key},type:"nomatchingcontroller"});const i=this.pluginsMap_.inputs.reduce(((i,s)=>null!=i?i:function(t,e){const n=t.accept(e.target.read(),e.params);if(a(n))return null;const i=S,s={target:e.target,initialValue:n.initialValue,params:n.params},o=t.binding.reader(s),r=t.binding.constraint?t.binding.constraint(s):void 0,l=E(o(n.initialValue),{constraint:r,equals:t.binding.equals}),p=new Ks({reader:o,target:e.target,value:l,writer:t.binding.writer(s)}),d=i.optional.boolean(e.params.disabled).value,c=i.optional.boolean(e.params.hidden).value,h=t.controller({constraint:r,document:e.document,initialValue:n.initialValue,params:n.params,value:p.value,viewProps:Mt.create({disabled:d,hidden:c})}),u=i.optional.string(e.params.label).value;return new it(e.document,{binding:p,blade:Q(),props:V.fromObject({label:null!=u?u:e.target.key}),valueController:h})}(s,{document:t,target:e,params:n})),null);if(i)return i;throw new d({context:{key:e.key},type:"nomatchingcontroller"})}createMonitor(t,e,n){const i=this.pluginsMap_.monitors.reduce(((i,s)=>null!=i?i:function(t,e){var n,i,s;const o=S,r=t.accept(e.target.read(),e.params);if(a(r))return null;const l={target:e.target,initialValue:r.initialValue,params:r.params},p=t.binding.reader(l),d=null!==(i=null!==(n=o.optional.number(e.params.bufferSize).value)&&void 0!==n?n:t.binding.defaultBufferSize&&t.binding.defaultBufferSize(r.params))&&void 0!==i?i:1,c=o.optional.number(e.params.interval).value,h=new Us({reader:p,target:e.target,ticker:Ts(e.document,c),value:Ae(d)}),u=o.optional.boolean(e.params.disabled).value,v=o.optional.boolean(e.params.hidden).value,m=t.controller({document:e.document,params:r.params,value:h.value,viewProps:Mt.create({disabled:u,hidden:v})}),b=null!==(s=o.optional.string(e.params.label).value)&&void 0!==s?s:e.target.key;return new ot(e.document,{binding:h,blade:Q(),props:V.fromObject({label:b}),valueController:m})}(s,{document:t,params:n,target:e})),null);if(i)return i;throw new d({context:{key:e.key},type:"nomatchingcontroller"})}createBlade(t,e){const n=this.pluginsMap_.blades.reduce(((n,i)=>null!=n?n:function(t,e){const n=t.accept(e.params);if(!n)return null;const i=S.optional.boolean(e.params.disabled).value,s=S.optional.boolean(e.params.hidden).value;return t.controller({blade:Q(),document:e.document,params:Object.assign(Object.assign({},n.params),{disabled:i,hidden:s}),viewProps:Mt.create({disabled:i,hidden:s})})}(i,{document:t,params:e})),null);if(!n)throw new d({type:"nomatchingview",context:{params:e}});return n}createBladeApi(t){if(t instanceof it)return new nt(t);if(t instanceof ot)return new st(t);if(t instanceof bt)return new pt(t,this);const e=this.pluginsMap_.blades.reduce(((e,n)=>null!=e?e:n.api({controller:t,pool:this})),null);if(!e)throw d.shouldNeverHappen();return e}}class Fs extends e{constructor(t){super(t),this.emitter_=new u,this.controller_.valueController.value.emitter.on("change",(t=>{this.emitter_.emit("change",{event:new i(this,t.rawValue)})}))}get label(){return this.controller_.props.get("label")}set label(t){this.controller_.props.set("label",t)}get options(){return this.controller_.valueController.props.get("options")}set options(t){this.controller_.valueController.props.set("options",t)}get value(){return this.controller_.valueController.value.rawValue}set value(t){this.controller_.valueController.value.rawValue=t}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}}class Hs extends e{constructor(t){super(t),this.emitter_=new u,this.controller_.valueController.value.emitter.on("change",(t=>{this.emitter_.emit("change",{event:new i(this,t.rawValue)})}))}get label(){return this.controller_.props.get("label")}set label(t){this.controller_.props.set("label",t)}get maxValue(){return this.controller_.valueController.sliderController.props.get("maxValue")}set maxValue(t){this.controller_.valueController.sliderController.props.set("maxValue",t)}get minValue(){return this.controller_.valueController.sliderController.props.get("minValue")}set minValue(t){this.controller_.valueController.sliderController.props.set("minValue",t)}get value(){return this.controller_.valueController.value.rawValue}set value(t){this.controller_.valueController.value.rawValue=t}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}}class $s extends e{constructor(t){super(t),this.emitter_=new u,this.controller_.valueController.value.emitter.on("change",(t=>{this.emitter_.emit("change",{event:new i(this,t.rawValue)})}))}get label(){return this.controller_.props.get("label")}set label(t){this.controller_.props.set("label",t)}get formatter(){return this.controller_.valueController.props.get("formatter")}set formatter(t){this.controller_.valueController.props.set("formatter",t)}get value(){return this.controller_.valueController.value.rawValue}set value(t){this.controller_.valueController.value.rawValue=t}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}}const zs={id:"list",type:"blade",accept(t){const e=S,n=A(t,{options:e.required.custom(tn),value:e.required.raw,view:e.required.constant("list"),label:e.optional.string});return n?{params:n}:null},controller(t){const e=new Qt(t.document,{props:V.fromObject({options:sn(t.params.options)}),value:E(t.params.value),viewProps:t.viewProps});return new xt(t.document,{blade:t.blade,props:V.fromObject({label:t.params.label}),valueController:e})},api:t=>t.controller instanceof xt&&t.controller.valueController instanceof Qt?new Fs(t.controller):null};class qs extends dt{constructor(t,e){super(t,e)}get element(){return this.controller_.view.element}importPreset(t){!function(t,e){t.forEach((t=>{const n=e[t.presetKey];void 0!==n&&t.write(n)}))}(this.controller_.rackController.rack.find(it).map((t=>t.binding.target)),t),this.refresh()}exportPreset(){return function(t){return t.reduce(((t,e)=>Object.assign(t,{[e.presetKey]:e.read()})),{})}(this.controller_.rackController.rack.find(it).map((t=>t.binding.target)))}refresh(){this.controller_.rackController.rack.find(it).forEach((t=>{t.binding.read()})),this.controller_.rackController.rack.find(ot).forEach((t=>{t.binding.read()}))}}class Gs extends ft{constructor(t,e){super(t,{expanded:e.expanded,blade:e.blade,props:e.props,root:!0,viewProps:e.viewProps})}}const Ys={id:"slider",type:"blade",accept(t){const e=S,n=A(t,{max:e.required.number,min:e.required.number,view:e.required.constant("slider"),format:e.optional.function,label:e.optional.string,value:e.optional.number});return n?{params:n}:null},controller(t){var e,n;const i=null!==(e=t.params.value)&&void 0!==e?e:0,s=new We(t.document,{baseStep:1,parser:Ce,sliderProps:V.fromObject({maxValue:t.params.max,minValue:t.params.min}),textProps:V.fromObject({draggingScale:pn(void 0,i),formatter:null!==(n=t.params.format)&&void 0!==n?n:Pe}),value:E(i),viewProps:t.viewProps});return new xt(t.document,{blade:t.blade,props:V.fromObject({label:t.params.label}),valueController:s})},api:t=>t.controller instanceof xt&&t.controller.valueController instanceof We?new Hs(t.controller):null},Xs={id:"text",type:"blade",accept(t){const e=S,n=A(t,{parse:e.required.function,value:e.required.raw,view:e.required.constant("text"),format:e.optional.function,label:e.optional.string});return n?{params:n}:null},controller(t){var e;const n=new ne(t.document,{parser:t.params.parse,props:V.fromObject({formatter:null!==(e=t.params.format)&&void 0!==e?e:t=>String(t)}),value:E(t.params.value),viewProps:t.viewProps});return new xt(t.document,{blade:t.blade,props:V.fromObject({label:t.params.label}),valueController:n})},api:t=>t.controller instanceof xt&&t.controller.valueController instanceof ne?new $s(t.controller):null};function Qs(t,e,n){if(t.querySelector(`style[data-tp-style=${e}]`))return;const i=t.createElement("style");i.dataset.tpStyle=e,i.textContent=n,t.head.appendChild(i)}const Js=new class{constructor(t){const[e,n]=t.split("-"),i=e.split(".");this.major=parseInt(i[0],10),this.minor=parseInt(i[1],10),this.patch=parseInt(i[2],10),this.prerelease=null!=n?n:null}toString(){const t=[this.major,this.minor,this.patch].join(".");return null!==this.prerelease?[t,this.prerelease].join("-"):t}}("3.1.0");t.BladeApi=e,t.ButtonApi=h,t.FolderApi=dt,t.InputBindingApi=nt,t.ListApi=Fs,t.MonitorBindingApi=st,t.Pane=class extends qs{constructor(t){var e,n;const i=null!=t?t:{},s=null!==(e=i.document)&&void 0!==e?e:K(),o=function(){const t=new Bs;return[ds,bs,xs,Cs,Gi,Ui,Ki,Oi,un,Ss,Is,Rs,Y,wt,Et,Tt].forEach((e=>{t.register(e)})),t}();super(new Gs(s,{expanded:i.expanded,blade:Q(),props:V.fromObject({title:i.title}),viewProps:Mt.create()}),o),this.pool_=o,this.containerElem_=null!==(n=i.container)&&void 0!==n?n:function(t){const e=t.createElement("div");return e.classList.add(m("dfw")()),t.body&&t.body.appendChild(e),e}(s),this.containerElem_.appendChild(this.element),this.doc_=s,this.usesDefaultWrapper_=!i.container,this.setUpDefaultPlugins_()}get document(){if(!this.doc_)throw d.alreadyDisposed();return this.doc_}dispose(){const t=this.containerElem_;if(!t)throw d.alreadyDisposed();if(this.usesDefaultWrapper_){const e=t.parentElement;e&&e.removeChild(t)}this.containerElem_=null,this.doc_=null,super.dispose()}registerPlugin(t){("plugin"in t?[t.plugin]:"plugins"in t?t.plugins:[]).forEach((t=>{this.pool_.register(t),this.embedPluginStyle_(t)}))}embedPluginStyle_(t){t.css&&Qs(this.document,`plugin-${t.id}`,t.css)}setUpDefaultPlugins_(){Qs(this.document,"default",'.tp-tbiv_b,.tp-coltxtv_ms,.tp-ckbv_i,.tp-rotv_b,.tp-fldv_b,.tp-mllv_i,.tp-sglv_i,.tp-grlv_g,.tp-txtv_i,.tp-p2dpv_p,.tp-colswv_sw,.tp-p2dv_b,.tp-btnv_b,.tp-lstv_s{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;font-family:inherit;font-size:inherit;font-weight:inherit;margin:0;outline:none;padding:0}.tp-p2dv_b,.tp-btnv_b,.tp-lstv_s{background-color:var(--btn-bg);border-radius:var(--elm-br);color:var(--btn-fg);cursor:pointer;display:block;font-weight:bold;height:var(--bld-us);line-height:var(--bld-us);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tp-p2dv_b:hover,.tp-btnv_b:hover,.tp-lstv_s:hover{background-color:var(--btn-bg-h)}.tp-p2dv_b:focus,.tp-btnv_b:focus,.tp-lstv_s:focus{background-color:var(--btn-bg-f)}.tp-p2dv_b:active,.tp-btnv_b:active,.tp-lstv_s:active{background-color:var(--btn-bg-a)}.tp-p2dv_b:disabled,.tp-btnv_b:disabled,.tp-lstv_s:disabled{opacity:.5}.tp-txtv_i,.tp-p2dpv_p,.tp-colswv_sw{background-color:var(--in-bg);border-radius:var(--elm-br);box-sizing:border-box;color:var(--in-fg);font-family:inherit;height:var(--bld-us);line-height:var(--bld-us);min-width:0;width:100%}.tp-txtv_i:hover,.tp-p2dpv_p:hover,.tp-colswv_sw:hover{background-color:var(--in-bg-h)}.tp-txtv_i:focus,.tp-p2dpv_p:focus,.tp-colswv_sw:focus{background-color:var(--in-bg-f)}.tp-txtv_i:active,.tp-p2dpv_p:active,.tp-colswv_sw:active{background-color:var(--in-bg-a)}.tp-txtv_i:disabled,.tp-p2dpv_p:disabled,.tp-colswv_sw:disabled{opacity:.5}.tp-mllv_i,.tp-sglv_i,.tp-grlv_g{background-color:var(--mo-bg);border-radius:var(--elm-br);box-sizing:border-box;color:var(--mo-fg);height:var(--bld-us);scrollbar-color:currentColor transparent;scrollbar-width:thin;width:100%}.tp-mllv_i::-webkit-scrollbar,.tp-sglv_i::-webkit-scrollbar,.tp-grlv_g::-webkit-scrollbar{height:8px;width:8px}.tp-mllv_i::-webkit-scrollbar-corner,.tp-sglv_i::-webkit-scrollbar-corner,.tp-grlv_g::-webkit-scrollbar-corner{background-color:transparent}.tp-mllv_i::-webkit-scrollbar-thumb,.tp-sglv_i::-webkit-scrollbar-thumb,.tp-grlv_g::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:currentColor;border:transparent solid 2px;border-radius:4px}.tp-rotv{--font-family: var(--tp-font-family, Roboto Mono, Source Code Pro, Menlo, Courier, monospace);--bs-br: var(--tp-base-border-radius, 6px);--cnt-h-p: var(--tp-container-horizontal-padding, 4px);--cnt-v-p: var(--tp-container-vertical-padding, 4px);--elm-br: var(--tp-element-border-radius, 2px);--bld-s: var(--tp-blade-spacing, 4px);--bld-us: var(--tp-blade-unit-size, 20px);--bs-bg: var(--tp-base-background-color, #28292e);--bs-sh: var(--tp-base-shadow-color, rgba(0, 0, 0, 0.2));--btn-bg: var(--tp-button-background-color, #adafb8);--btn-bg-a: var(--tp-button-background-color-active, #d6d7db);--btn-bg-f: var(--tp-button-background-color-focus, #c8cad0);--btn-bg-h: var(--tp-button-background-color-hover, #bbbcc4);--btn-fg: var(--tp-button-foreground-color, #28292e);--cnt-bg: var(--tp-container-background-color, rgba(187, 188, 196, 0.1));--cnt-bg-a: var(--tp-container-background-color-active, rgba(187, 188, 196, 0.25));--cnt-bg-f: var(--tp-container-background-color-focus, rgba(187, 188, 196, 0.2));--cnt-bg-h: var(--tp-container-background-color-hover, rgba(187, 188, 196, 0.15));--cnt-fg: var(--tp-container-foreground-color, #bbbcc4);--in-bg: var(--tp-input-background-color, rgba(187, 188, 196, 0.1));--in-bg-a: var(--tp-input-background-color-active, rgba(187, 188, 196, 0.25));--in-bg-f: var(--tp-input-background-color-focus, rgba(187, 188, 196, 0.2));--in-bg-h: var(--tp-input-background-color-hover, rgba(187, 188, 196, 0.15));--in-fg: var(--tp-input-foreground-color, #bbbcc4);--lbl-fg: var(--tp-label-foreground-color, rgba(187, 188, 196, 0.7));--mo-bg: var(--tp-monitor-background-color, rgba(0, 0, 0, 0.2));--mo-fg: var(--tp-monitor-foreground-color, rgba(187, 188, 196, 0.7));--grv-fg: var(--tp-groove-foreground-color, rgba(187, 188, 196, 0.1))}.tp-rotv_c>.tp-cntv.tp-v-lst,.tp-tabv_c .tp-brkv>.tp-cntv.tp-v-lst,.tp-fldv_c>.tp-cntv.tp-v-lst{margin-bottom:calc(-1*var(--cnt-v-p))}.tp-rotv_c>.tp-fldv.tp-v-lst .tp-fldv_c,.tp-tabv_c .tp-brkv>.tp-fldv.tp-v-lst .tp-fldv_c,.tp-fldv_c>.tp-fldv.tp-v-lst .tp-fldv_c{border-bottom-left-radius:0}.tp-rotv_c>.tp-fldv.tp-v-lst .tp-fldv_b,.tp-tabv_c .tp-brkv>.tp-fldv.tp-v-lst .tp-fldv_b,.tp-fldv_c>.tp-fldv.tp-v-lst .tp-fldv_b{border-bottom-left-radius:0}.tp-rotv_c>*:not(.tp-v-fst),.tp-tabv_c .tp-brkv>*:not(.tp-v-fst),.tp-fldv_c>*:not(.tp-v-fst){margin-top:var(--bld-s)}.tp-rotv_c>.tp-sprv:not(.tp-v-fst),.tp-tabv_c .tp-brkv>.tp-sprv:not(.tp-v-fst),.tp-fldv_c>.tp-sprv:not(.tp-v-fst),.tp-rotv_c>.tp-cntv:not(.tp-v-fst),.tp-tabv_c .tp-brkv>.tp-cntv:not(.tp-v-fst),.tp-fldv_c>.tp-cntv:not(.tp-v-fst){margin-top:var(--cnt-v-p)}.tp-rotv_c>.tp-sprv+*:not(.tp-v-hidden),.tp-tabv_c .tp-brkv>.tp-sprv+*:not(.tp-v-hidden),.tp-fldv_c>.tp-sprv+*:not(.tp-v-hidden),.tp-rotv_c>.tp-cntv+*:not(.tp-v-hidden),.tp-tabv_c .tp-brkv>.tp-cntv+*:not(.tp-v-hidden),.tp-fldv_c>.tp-cntv+*:not(.tp-v-hidden){margin-top:var(--cnt-v-p)}.tp-rotv_c>.tp-sprv:not(.tp-v-hidden)+.tp-sprv,.tp-tabv_c .tp-brkv>.tp-sprv:not(.tp-v-hidden)+.tp-sprv,.tp-fldv_c>.tp-sprv:not(.tp-v-hidden)+.tp-sprv,.tp-rotv_c>.tp-cntv:not(.tp-v-hidden)+.tp-cntv,.tp-tabv_c .tp-brkv>.tp-cntv:not(.tp-v-hidden)+.tp-cntv,.tp-fldv_c>.tp-cntv:not(.tp-v-hidden)+.tp-cntv{margin-top:0}.tp-tabv_c .tp-brkv>.tp-cntv,.tp-fldv_c>.tp-cntv{margin-left:4px}.tp-tabv_c .tp-brkv>.tp-fldv>.tp-fldv_b,.tp-fldv_c>.tp-fldv>.tp-fldv_b{border-top-left-radius:var(--elm-br);border-bottom-left-radius:var(--elm-br)}.tp-tabv_c .tp-brkv>.tp-fldv.tp-fldv-expanded>.tp-fldv_b,.tp-fldv_c>.tp-fldv.tp-fldv-expanded>.tp-fldv_b{border-bottom-left-radius:0}.tp-tabv_c .tp-brkv .tp-fldv>.tp-fldv_c,.tp-fldv_c .tp-fldv>.tp-fldv_c{border-bottom-left-radius:var(--elm-br)}.tp-tabv_c .tp-brkv>.tp-tabv>.tp-tabv_i,.tp-fldv_c>.tp-tabv>.tp-tabv_i{border-top-left-radius:var(--elm-br)}.tp-tabv_c .tp-brkv .tp-tabv>.tp-tabv_c,.tp-fldv_c .tp-tabv>.tp-tabv_c{border-bottom-left-radius:var(--elm-br)}.tp-rotv_b,.tp-fldv_b{background-color:var(--cnt-bg);color:var(--cnt-fg);cursor:pointer;display:block;height:calc(var(--bld-us) + 4px);line-height:calc(var(--bld-us) + 4px);overflow:hidden;padding-left:var(--cnt-h-p);padding-right:calc(4px + var(--bld-us) + var(--cnt-h-p));position:relative;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;transition:border-radius .2s ease-in-out .2s}.tp-rotv_b:hover,.tp-fldv_b:hover{background-color:var(--cnt-bg-h)}.tp-rotv_b:focus,.tp-fldv_b:focus{background-color:var(--cnt-bg-f)}.tp-rotv_b:active,.tp-fldv_b:active{background-color:var(--cnt-bg-a)}.tp-rotv_b:disabled,.tp-fldv_b:disabled{opacity:.5}.tp-rotv_m,.tp-fldv_m{background:linear-gradient(to left, var(--cnt-fg), var(--cnt-fg) 2px, transparent 2px, transparent 4px, var(--cnt-fg) 4px);border-radius:2px;bottom:0;content:"";display:block;height:6px;right:calc(var(--cnt-h-p) + (var(--bld-us) + 4px - 6px)/2 - 2px);margin:auto;opacity:.5;position:absolute;top:0;transform:rotate(90deg);transition:transform .2s ease-in-out;width:6px}.tp-rotv.tp-rotv-expanded .tp-rotv_m,.tp-fldv.tp-fldv-expanded>.tp-fldv_b>.tp-fldv_m{transform:none}.tp-rotv_c,.tp-fldv_c{box-sizing:border-box;height:0;opacity:0;overflow:hidden;padding-bottom:0;padding-top:0;position:relative;transition:height .2s ease-in-out,opacity .2s linear,padding .2s ease-in-out}.tp-rotv.tp-rotv-cpl:not(.tp-rotv-expanded) .tp-rotv_c,.tp-fldv.tp-fldv-cpl:not(.tp-fldv-expanded)>.tp-fldv_c{display:none}.tp-rotv.tp-rotv-expanded .tp-rotv_c,.tp-fldv.tp-fldv-expanded>.tp-fldv_c{opacity:1;padding-bottom:var(--cnt-v-p);padding-top:var(--cnt-v-p);transform:none;overflow:visible;transition:height .2s ease-in-out,opacity .2s linear .2s,padding .2s ease-in-out}.tp-lstv,.tp-coltxtv_m{position:relative}.tp-lstv_s{padding:0 20px 0 4px;width:100%}.tp-lstv_m,.tp-coltxtv_mm{bottom:0;margin:auto;pointer-events:none;position:absolute;right:2px;top:0}.tp-lstv_m svg,.tp-coltxtv_mm svg{bottom:0;height:16px;margin:auto;position:absolute;right:0;top:0;width:16px}.tp-lstv_m svg path,.tp-coltxtv_mm svg path{fill:currentColor}.tp-pndtxtv,.tp-coltxtv_w{display:flex}.tp-pndtxtv_a,.tp-coltxtv_c{width:100%}.tp-pndtxtv_a+.tp-pndtxtv_a,.tp-coltxtv_c+.tp-pndtxtv_a,.tp-pndtxtv_a+.tp-coltxtv_c,.tp-coltxtv_c+.tp-coltxtv_c{margin-left:2px}.tp-btnv_b{width:100%}.tp-btnv_t{text-align:center}.tp-ckbv_l{display:block;position:relative}.tp-ckbv_i{left:0;opacity:0;position:absolute;top:0}.tp-ckbv_w{background-color:var(--in-bg);border-radius:var(--elm-br);cursor:pointer;display:block;height:var(--bld-us);position:relative;width:var(--bld-us)}.tp-ckbv_w svg{bottom:0;display:block;height:16px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;width:16px}.tp-ckbv_w svg path{fill:none;stroke:var(--in-fg);stroke-width:2}.tp-ckbv_i:hover+.tp-ckbv_w{background-color:var(--in-bg-h)}.tp-ckbv_i:focus+.tp-ckbv_w{background-color:var(--in-bg-f)}.tp-ckbv_i:active+.tp-ckbv_w{background-color:var(--in-bg-a)}.tp-ckbv_i:checked+.tp-ckbv_w svg{opacity:1}.tp-ckbv.tp-v-disabled .tp-ckbv_w{opacity:.5}.tp-colv{position:relative}.tp-colv_h{display:flex}.tp-colv_s{flex-grow:0;flex-shrink:0;width:var(--bld-us)}.tp-colv_t{flex:1;margin-left:4px}.tp-colv_p{height:0;margin-top:0;opacity:0;overflow:hidden;transition:height .2s ease-in-out,opacity .2s linear,margin .2s ease-in-out}.tp-colv.tp-colv-cpl .tp-colv_p{overflow:visible}.tp-colv.tp-colv-expanded .tp-colv_p{margin-top:var(--bld-s);opacity:1}.tp-colv .tp-popv{left:calc(-1*var(--cnt-h-p));right:calc(-1*var(--cnt-h-p));top:var(--bld-us)}.tp-colpv_h,.tp-colpv_ap{margin-left:6px;margin-right:6px}.tp-colpv_h{margin-top:var(--bld-s)}.tp-colpv_rgb{display:flex;margin-top:var(--bld-s);width:100%}.tp-colpv_a{display:flex;margin-top:var(--cnt-v-p);padding-top:calc(var(--cnt-v-p) + 2px);position:relative}.tp-colpv_a:before{background-color:var(--grv-fg);content:"";height:2px;left:calc(-1*var(--cnt-h-p));position:absolute;right:calc(-1*var(--cnt-h-p));top:0}.tp-colpv_ap{align-items:center;display:flex;flex:3}.tp-colpv_at{flex:1;margin-left:4px}.tp-svpv{border-radius:var(--elm-br);outline:none;overflow:hidden;position:relative}.tp-svpv_c{cursor:crosshair;display:block;height:calc(var(--bld-us)*4);width:100%}.tp-svpv_m{border-radius:100%;border:rgba(255,255,255,.75) solid 2px;box-sizing:border-box;filter:drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));height:12px;margin-left:-6px;margin-top:-6px;pointer-events:none;position:absolute;width:12px}.tp-svpv:focus .tp-svpv_m{border-color:#fff}.tp-hplv{cursor:pointer;height:var(--bld-us);outline:none;position:relative}.tp-hplv_c{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAABCAYAAABubagXAAAAQ0lEQVQoU2P8z8Dwn0GCgQEDi2OK/RBgYHjBgIpfovFh8j8YBIgzFGQxuqEgPhaDOT5gOhPkdCxOZeBg+IDFZZiGAgCaSSMYtcRHLgAAAABJRU5ErkJggg==);background-position:left top;background-repeat:no-repeat;background-size:100% 100%;border-radius:2px;display:block;height:4px;left:0;margin-top:-2px;position:absolute;top:50%;width:100%}.tp-hplv_m{border-radius:var(--elm-br);border:rgba(255,255,255,.75) solid 2px;box-shadow:0 0 2px rgba(0,0,0,.1);box-sizing:border-box;height:12px;left:50%;margin-left:-6px;margin-top:-6px;pointer-events:none;position:absolute;top:50%;width:12px}.tp-hplv:focus .tp-hplv_m{border-color:#fff}.tp-aplv{cursor:pointer;height:var(--bld-us);outline:none;position:relative;width:100%}.tp-aplv_b{background-color:#fff;background-image:linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);background-size:4px 4px;background-position:0 0,2px 2px;border-radius:2px;display:block;height:4px;left:0;margin-top:-2px;overflow:hidden;position:absolute;top:50%;width:100%}.tp-aplv_c{bottom:0;left:0;position:absolute;right:0;top:0}.tp-aplv_m{background-color:#fff;background-image:linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);background-size:12px 12px;background-position:0 0,6px 6px;border-radius:var(--elm-br);box-shadow:0 0 2px rgba(0,0,0,.1);height:12px;left:50%;margin-left:-6px;margin-top:-6px;overflow:hidden;pointer-events:none;position:absolute;top:50%;width:12px}.tp-aplv_p{border-radius:var(--elm-br);border:rgba(255,255,255,.75) solid 2px;box-sizing:border-box;bottom:0;left:0;position:absolute;right:0;top:0}.tp-aplv:focus .tp-aplv_p{border-color:#fff}.tp-colswv{background-color:#fff;background-image:linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);background-size:10px 10px;background-position:0 0,5px 5px;border-radius:var(--elm-br);overflow:hidden}.tp-colswv.tp-v-disabled{opacity:.5}.tp-colswv_sw{border-radius:0}.tp-colswv_b{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;cursor:pointer;display:block;height:var(--bld-us);left:0;margin:0;outline:none;padding:0;position:absolute;top:0;width:var(--bld-us)}.tp-colswv_b:focus::after{border:rgba(255,255,255,.75) solid 2px;border-radius:var(--elm-br);bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}.tp-coltxtv{display:flex;width:100%}.tp-coltxtv_m{margin-right:4px}.tp-coltxtv_ms{border-radius:var(--elm-br);color:var(--lbl-fg);cursor:pointer;height:var(--bld-us);line-height:var(--bld-us);padding:0 18px 0 4px}.tp-coltxtv_ms:hover{background-color:var(--in-bg-h)}.tp-coltxtv_ms:focus{background-color:var(--in-bg-f)}.tp-coltxtv_ms:active{background-color:var(--in-bg-a)}.tp-coltxtv_mm{color:var(--lbl-fg)}.tp-coltxtv_w{flex:1}.tp-dfwv{position:absolute;top:8px;right:8px;width:256px}.tp-fldv.tp-fldv-not .tp-fldv_b{display:none}.tp-fldv_t{padding-left:4px}.tp-fldv_c{border-left:var(--cnt-bg) solid 4px}.tp-fldv_b:hover+.tp-fldv_c{border-left-color:var(--cnt-bg-h)}.tp-fldv_b:focus+.tp-fldv_c{border-left-color:var(--cnt-bg-f)}.tp-fldv_b:active+.tp-fldv_c{border-left-color:var(--cnt-bg-a)}.tp-grlv{position:relative}.tp-grlv_g{display:block;height:calc(var(--bld-us)*3)}.tp-grlv_g polyline{fill:none;stroke:var(--mo-fg);stroke-linejoin:round}.tp-grlv_t{margin-top:-4px;transition:left .05s,top .05s;visibility:hidden}.tp-grlv_t.tp-grlv_t-a{visibility:visible}.tp-grlv_t.tp-grlv_t-in{transition:none}.tp-grlv.tp-v-disabled .tp-grlv_g{opacity:.5}.tp-grlv .tp-ttv{background-color:var(--mo-fg)}.tp-grlv .tp-ttv::before{border-top-color:var(--mo-fg)}.tp-lblv{align-items:center;display:flex;line-height:1.3;padding-left:var(--cnt-h-p);padding-right:var(--cnt-h-p)}.tp-lblv.tp-lblv-nol{display:block}.tp-lblv_l{color:var(--lbl-fg);flex:1;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;padding-left:4px;padding-right:16px}.tp-lblv.tp-v-disabled .tp-lblv_l{opacity:.5}.tp-lblv.tp-lblv-nol .tp-lblv_l{display:none}.tp-lblv_v{align-self:flex-start;flex-grow:0;flex-shrink:0;width:160px}.tp-lblv.tp-lblv-nol .tp-lblv_v{width:100%}.tp-lstv_s{padding:0 20px 0 4px;width:100%}.tp-lstv_m{color:var(--btn-fg)}.tp-sglv_i{padding:0 4px}.tp-sglv.tp-v-disabled .tp-sglv_i{opacity:.5}.tp-mllv_i{display:block;height:calc(var(--bld-us)*3);line-height:var(--bld-us);padding:0 4px;resize:none;white-space:pre}.tp-mllv.tp-v-disabled .tp-mllv_i{opacity:.5}.tp-p2dv{position:relative}.tp-p2dv_h{display:flex}.tp-p2dv_b{height:var(--bld-us);margin-right:4px;position:relative;width:var(--bld-us)}.tp-p2dv_b svg{display:block;height:16px;left:50%;margin-left:-8px;margin-top:-8px;position:absolute;top:50%;width:16px}.tp-p2dv_b svg path{stroke:currentColor;stroke-width:2}.tp-p2dv_b svg circle{fill:currentColor}.tp-p2dv_t{flex:1}.tp-p2dv_p{height:0;margin-top:0;opacity:0;overflow:hidden;transition:height .2s ease-in-out,opacity .2s linear,margin .2s ease-in-out}.tp-p2dv.tp-p2dv-expanded .tp-p2dv_p{margin-top:var(--bld-s);opacity:1}.tp-p2dv .tp-popv{left:calc(-1*var(--cnt-h-p));right:calc(-1*var(--cnt-h-p));top:var(--bld-us)}.tp-p2dpv{padding-left:calc(var(--bld-us) + 4px)}.tp-p2dpv_p{cursor:crosshair;height:0;overflow:hidden;padding-bottom:100%;position:relative}.tp-p2dpv_g{display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.tp-p2dpv_ax{opacity:.1;stroke:var(--in-fg);stroke-dasharray:1}.tp-p2dpv_l{opacity:.5;stroke:var(--in-fg);stroke-dasharray:1}.tp-p2dpv_m{border:var(--in-fg) solid 1px;border-radius:50%;box-sizing:border-box;height:4px;margin-left:-2px;margin-top:-2px;position:absolute;width:4px}.tp-p2dpv_p:focus .tp-p2dpv_m{background-color:var(--in-fg);border-width:0}.tp-popv{background-color:var(--bs-bg);border-radius:6px;box-shadow:0 2px 4px var(--bs-sh);display:none;max-width:168px;padding:var(--cnt-v-p) var(--cnt-h-p);position:absolute;visibility:hidden;z-index:1000}.tp-popv.tp-popv-v{display:block;visibility:visible}.tp-sprv_r{background-color:var(--grv-fg);border-width:0;display:block;height:2px;margin:0;width:100%}.tp-sldv.tp-v-disabled{opacity:.5}.tp-sldv_t{box-sizing:border-box;cursor:pointer;height:var(--bld-us);margin:0 6px;outline:none;position:relative}.tp-sldv_t::before{background-color:var(--in-bg);border-radius:1px;bottom:0;content:"";display:block;height:2px;left:0;margin:auto;position:absolute;right:0;top:0}.tp-sldv_k{height:100%;left:0;position:absolute;top:0}.tp-sldv_k::before{background-color:var(--in-fg);border-radius:1px;bottom:0;content:"";display:block;height:2px;left:0;margin-bottom:auto;margin-top:auto;position:absolute;right:0;top:0}.tp-sldv_k::after{background-color:var(--btn-bg);border-radius:var(--elm-br);bottom:0;content:"";display:block;height:12px;margin-bottom:auto;margin-top:auto;position:absolute;right:-6px;top:0;width:12px}.tp-sldv_t:hover .tp-sldv_k::after{background-color:var(--btn-bg-h)}.tp-sldv_t:focus .tp-sldv_k::after{background-color:var(--btn-bg-f)}.tp-sldv_t:active .tp-sldv_k::after{background-color:var(--btn-bg-a)}.tp-sldtxtv{display:flex}.tp-sldtxtv_s{flex:2}.tp-sldtxtv_t{flex:1;margin-left:4px}.tp-tabv.tp-v-disabled{opacity:.5}.tp-tabv_i{align-items:flex-end;display:flex;overflow:hidden}.tp-tabv.tp-tabv-nop .tp-tabv_i{height:calc(var(--bld-us) + 4px);position:relative}.tp-tabv.tp-tabv-nop .tp-tabv_i::before{background-color:var(--cnt-bg);bottom:0;content:"";height:2px;left:0;position:absolute;right:0}.tp-tabv_c{border-left:var(--cnt-bg) solid 4px;padding-bottom:var(--cnt-v-p);padding-top:var(--cnt-v-p)}.tp-tbiv{flex:1;min-width:0;position:relative}.tp-tbiv+.tp-tbiv{margin-left:2px}.tp-tbiv+.tp-tbiv::before{background-color:var(--cnt-bg);bottom:0;content:"";height:2px;left:-2px;position:absolute;width:2px}.tp-tbiv_b{background-color:var(--cnt-bg);display:block;padding-left:calc(var(--cnt-h-p) + 4px);padding-right:calc(var(--cnt-h-p) + 4px);width:100%}.tp-tbiv_b:hover{background-color:var(--cnt-bg-h)}.tp-tbiv_b:focus{background-color:var(--cnt-bg-f)}.tp-tbiv_b:active{background-color:var(--cnt-bg-a)}.tp-tbiv_b:disabled{opacity:.5}.tp-tbiv_t{color:var(--cnt-fg);height:calc(var(--bld-us) + 4px);line-height:calc(var(--bld-us) + 4px);opacity:.5;overflow:hidden;text-overflow:ellipsis}.tp-tbiv.tp-tbiv-sel .tp-tbiv_t{opacity:1}.tp-txtv{position:relative}.tp-txtv_i{padding:0 4px}.tp-txtv.tp-txtv-fst .tp-txtv_i{border-bottom-right-radius:0;border-top-right-radius:0}.tp-txtv.tp-txtv-mid .tp-txtv_i{border-radius:0}.tp-txtv.tp-txtv-lst .tp-txtv_i{border-bottom-left-radius:0;border-top-left-radius:0}.tp-txtv.tp-txtv-num .tp-txtv_i{text-align:right}.tp-txtv.tp-txtv-drg .tp-txtv_i{opacity:.3}.tp-txtv_k{cursor:pointer;height:100%;left:-3px;position:absolute;top:0;width:12px}.tp-txtv_k::before{background-color:var(--in-fg);border-radius:1px;bottom:0;content:"";height:calc(var(--bld-us) - 4px);left:50%;margin-bottom:auto;margin-left:-1px;margin-top:auto;opacity:.1;position:absolute;top:0;transition:border-radius .1s,height .1s,transform .1s,width .1s;width:2px}.tp-txtv_k:hover::before,.tp-txtv.tp-txtv-drg .tp-txtv_k::before{opacity:1}.tp-txtv.tp-txtv-drg .tp-txtv_k::before{border-radius:50%;height:4px;transform:translateX(-1px);width:4px}.tp-txtv_g{bottom:0;display:block;height:8px;left:50%;margin:auto;overflow:visible;pointer-events:none;position:absolute;top:0;visibility:hidden;width:100%}.tp-txtv.tp-txtv-drg .tp-txtv_g{visibility:visible}.tp-txtv_gb{fill:none;stroke:var(--in-fg);stroke-dasharray:1}.tp-txtv_gh{fill:none;stroke:var(--in-fg)}.tp-txtv .tp-ttv{margin-left:6px;visibility:hidden}.tp-txtv.tp-txtv-drg .tp-ttv{visibility:visible}.tp-ttv{background-color:var(--in-fg);border-radius:var(--elm-br);color:var(--bs-bg);padding:2px 4px;pointer-events:none;position:absolute;transform:translate(-50%, -100%)}.tp-ttv::before{border-color:var(--in-fg) transparent transparent transparent;border-style:solid;border-width:2px;box-sizing:border-box;content:"";font-size:.9em;height:4px;left:50%;margin-left:-2px;position:absolute;top:100%;width:4px}.tp-rotv{background-color:var(--bs-bg);border-radius:var(--bs-br);box-shadow:0 2px 4px var(--bs-sh);font-family:var(--font-family);font-size:11px;font-weight:500;line-height:1;text-align:left}.tp-rotv_b{border-bottom-left-radius:var(--bs-br);border-bottom-right-radius:var(--bs-br);border-top-left-radius:var(--bs-br);border-top-right-radius:var(--bs-br);padding-left:calc(4px + var(--bld-us) + var(--cnt-h-p));text-align:center}.tp-rotv.tp-rotv-expanded .tp-rotv_b{border-bottom-left-radius:0;border-bottom-right-radius:0}.tp-rotv.tp-rotv-not .tp-rotv_b{display:none}.tp-rotv_c>.tp-fldv.tp-v-lst>.tp-fldv_c,.tp-rotv_c>.tp-tabv.tp-v-lst>.tp-tabv_c{border-bottom-left-radius:var(--bs-br);border-bottom-right-radius:var(--bs-br)}.tp-rotv_c>.tp-fldv.tp-v-lst:not(.tp-fldv-expanded)>.tp-fldv_b{border-bottom-left-radius:var(--bs-br);border-bottom-right-radius:var(--bs-br)}.tp-rotv_c .tp-fldv.tp-v-vlst:not(.tp-fldv-expanded)>.tp-fldv_b{border-bottom-right-radius:var(--bs-br)}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-fldv.tp-v-fst{margin-top:calc(-1*var(--cnt-v-p))}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-fldv.tp-v-fst>.tp-fldv_b{border-top-left-radius:var(--bs-br);border-top-right-radius:var(--bs-br)}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-tabv.tp-v-fst{margin-top:calc(-1*var(--cnt-v-p))}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-tabv.tp-v-fst>.tp-tabv_i{border-top-left-radius:var(--bs-br);border-top-right-radius:var(--bs-br)}.tp-rotv.tp-v-disabled,.tp-rotv .tp-v-disabled{pointer-events:none}.tp-rotv.tp-v-hidden,.tp-rotv .tp-v-hidden{display:none}'),this.pool_.getAll().forEach((t=>{this.embedPluginStyle_(t)})),this.registerPlugin({plugins:[Ys,zs,Tt,Xs]})}},t.SeparatorApi=Ct,t.SliderApi=Hs,t.TabApi=Ot,t.TabPageApi=Nt,t.TextApi=$s,t.TpChangeEvent=i,t.VERSION=Js,Object.defineProperty(t,"__esModule",{value:!0})})); diff --git a/node_modules/tweakpane/dist/types/blade/list/api/list.d.ts b/node_modules/tweakpane/dist/types/blade/list/api/list.d.ts new file mode 100644 index 00000000..ac7d365f --- /dev/null +++ b/node_modules/tweakpane/dist/types/blade/list/api/list.d.ts @@ -0,0 +1,12 @@ +import { ApiChangeEvents, BladeApi, LabelController, ListController, ListItem } from '@tweakpane/core'; +export declare class ListApi extends BladeApi>> { + private readonly emitter_; + constructor(controller: LabelController>); + get label(): string | undefined; + set label(label: string | undefined); + get options(): ListItem[]; + set options(options: ListItem[]); + get value(): T; + set value(value: T); + on>(eventName: EventName, handler: (ev: ApiChangeEvents[EventName]['event']) => void): this; +} diff --git a/node_modules/tweakpane/dist/types/blade/list/plugin.d.ts b/node_modules/tweakpane/dist/types/blade/list/plugin.d.ts new file mode 100644 index 00000000..3ac38705 --- /dev/null +++ b/node_modules/tweakpane/dist/types/blade/list/plugin.d.ts @@ -0,0 +1,8 @@ +import { BaseBladeParams, BladePlugin, ListParamsOptions } from '@tweakpane/core'; +export interface ListBladeParams extends BaseBladeParams { + options: ListParamsOptions; + value: T; + view: 'list'; + label?: string; +} +export declare const ListBladePlugin: BladePlugin>; diff --git a/node_modules/tweakpane/dist/types/blade/root/api/preset.d.ts b/node_modules/tweakpane/dist/types/blade/root/api/preset.d.ts new file mode 100644 index 00000000..f95428a3 --- /dev/null +++ b/node_modules/tweakpane/dist/types/blade/root/api/preset.d.ts @@ -0,0 +1,12 @@ +import { BindingTarget } from '@tweakpane/core'; +export interface PresetObject { + [key: string]: unknown; +} +/** + * @hidden + */ +export declare function exportPresetJson(targets: BindingTarget[]): PresetObject; +/** + * @hidden + */ +export declare function importPresetJson(targets: BindingTarget[], preset: PresetObject): void; diff --git a/node_modules/tweakpane/dist/types/blade/root/api/root.d.ts b/node_modules/tweakpane/dist/types/blade/root/api/root.d.ts new file mode 100644 index 00000000..6eae4ac1 --- /dev/null +++ b/node_modules/tweakpane/dist/types/blade/root/api/root.d.ts @@ -0,0 +1,24 @@ +import { FolderApi, PluginPool } from '@tweakpane/core'; +import { RootController } from '../controller/root'; +import { PresetObject } from './preset'; +export declare class RootApi extends FolderApi { + /** + * @hidden + */ + constructor(controller: RootController, pool: PluginPool); + get element(): HTMLElement; + /** + * Imports a preset of all inputs. + * @param preset The preset object to import. + */ + importPreset(preset: PresetObject): void; + /** + * Exports a preset of all inputs. + * @return An exported preset object. + */ + exportPreset(): PresetObject; + /** + * Refreshes all bindings of the pane. + */ + refresh(): void; +} diff --git a/node_modules/tweakpane/dist/types/blade/root/controller/root.d.ts b/node_modules/tweakpane/dist/types/blade/root/controller/root.d.ts new file mode 100644 index 00000000..088c7653 --- /dev/null +++ b/node_modules/tweakpane/dist/types/blade/root/controller/root.d.ts @@ -0,0 +1,12 @@ +import { Blade, FolderController, FolderProps, ViewProps } from '@tweakpane/core'; +interface Config { + blade: Blade; + props: FolderProps; + viewProps: ViewProps; + expanded?: boolean; + title?: string; +} +export declare class RootController extends FolderController { + constructor(doc: Document, config: Config); +} +export {}; diff --git a/node_modules/tweakpane/dist/types/blade/slider/api/slider.d.ts b/node_modules/tweakpane/dist/types/blade/slider/api/slider.d.ts new file mode 100644 index 00000000..702dd1b0 --- /dev/null +++ b/node_modules/tweakpane/dist/types/blade/slider/api/slider.d.ts @@ -0,0 +1,14 @@ +import { ApiChangeEvents, BladeApi, LabelController, SliderTextController } from '@tweakpane/core'; +export declare class SliderApi extends BladeApi> { + private readonly emitter_; + constructor(controller: LabelController); + get label(): string | undefined; + set label(label: string | undefined); + get maxValue(): number; + set maxValue(maxValue: number); + get minValue(): number; + set minValue(minValue: number); + get value(): number; + set value(value: number); + on>(eventName: EventName, handler: (ev: ApiChangeEvents[EventName]['event']) => void): this; +} diff --git a/node_modules/tweakpane/dist/types/blade/slider/plugin.d.ts b/node_modules/tweakpane/dist/types/blade/slider/plugin.d.ts new file mode 100644 index 00000000..f1cdfceb --- /dev/null +++ b/node_modules/tweakpane/dist/types/blade/slider/plugin.d.ts @@ -0,0 +1,10 @@ +import { BaseBladeParams, BladePlugin, Formatter } from '@tweakpane/core'; +export interface SliderBladeParams extends BaseBladeParams { + max: number; + min: number; + view: 'slider'; + format?: Formatter; + label?: string; + value?: number; +} +export declare const SliderBladePlugin: BladePlugin; diff --git a/node_modules/tweakpane/dist/types/blade/text/api/text.d.ts b/node_modules/tweakpane/dist/types/blade/text/api/text.d.ts new file mode 100644 index 00000000..d614867c --- /dev/null +++ b/node_modules/tweakpane/dist/types/blade/text/api/text.d.ts @@ -0,0 +1,12 @@ +import { ApiChangeEvents, BladeApi, Formatter, LabelController, TextController } from '@tweakpane/core'; +export declare class TextApi extends BladeApi>> { + private readonly emitter_; + constructor(controller: LabelController>); + get label(): string | undefined; + set label(label: string | undefined); + get formatter(): Formatter; + set formatter(formatter: Formatter); + get value(): T; + set value(value: T); + on>(eventName: EventName, handler: (ev: ApiChangeEvents[EventName]['event']) => void): this; +} diff --git a/node_modules/tweakpane/dist/types/blade/text/plugin.d.ts b/node_modules/tweakpane/dist/types/blade/text/plugin.d.ts new file mode 100644 index 00000000..e4b8b5be --- /dev/null +++ b/node_modules/tweakpane/dist/types/blade/text/plugin.d.ts @@ -0,0 +1,9 @@ +import { BaseBladeParams, BladePlugin, Formatter, Parser } from '@tweakpane/core'; +export interface TextBladeParams extends BaseBladeParams { + parse: Parser; + value: T; + view: 'text'; + format?: Formatter; + label?: string; +} +export declare const TextBladePlugin: BladePlugin>; diff --git a/node_modules/tweakpane/dist/types/index.d.ts b/node_modules/tweakpane/dist/types/index.d.ts new file mode 100644 index 00000000..3f7f426e --- /dev/null +++ b/node_modules/tweakpane/dist/types/index.d.ts @@ -0,0 +1,10 @@ +import { Semver } from './misc/semver'; +export { ArrayStyleListOptions, BaseParams, BaseBladeParams, BladeApi, BooleanInputParams, BooleanMonitorParams, ButtonApi, ButtonParams, ColorInputParams, FolderApi, FolderParams, InputBindingApi, InputBindingApiEvents, InputParams, ListParamsOptions, MonitorBindingApi, MonitorBindingApiEvents, MonitorParams, NumberInputParams, NumberMonitorParams, ObjectStyleListOptions, Point2dInputParams, Point3dInputParams, Point4dInputParams, SeparatorApi, SeparatorParams, StringInputParams, StringMonitorParams, TabApi, TabPageApi, TabPageParams, TabParams, TpChangeEvent, TpPlugin, TpPluginBundle, } from '@tweakpane/core'; +export { ListApi } from './blade/list/api/list'; +export { ListBladeParams } from './blade/list/plugin'; +export { SliderApi } from './blade/slider/api/slider'; +export { SliderBladeParams } from './blade/slider/plugin'; +export { TextApi } from './blade/text/api/text'; +export { TextBladeParams } from './blade/text/plugin'; +export { Pane } from './pane/pane'; +export declare const VERSION: Semver; diff --git a/node_modules/tweakpane/dist/types/misc/semver.d.ts b/node_modules/tweakpane/dist/types/misc/semver.d.ts new file mode 100644 index 00000000..42db7179 --- /dev/null +++ b/node_modules/tweakpane/dist/types/misc/semver.d.ts @@ -0,0 +1,14 @@ +/*** + * A simple semantic versioning perser. + */ +export declare class Semver { + readonly major: number; + readonly minor: number; + readonly patch: number; + readonly prerelease: string | null; + /** + * @hidden + */ + constructor(text: string); + toString(): string; +} diff --git a/node_modules/tweakpane/dist/types/misc/test-util.d.ts b/node_modules/tweakpane/dist/types/misc/test-util.d.ts new file mode 100644 index 00000000..75c7cd40 --- /dev/null +++ b/node_modules/tweakpane/dist/types/misc/test-util.d.ts @@ -0,0 +1,14 @@ +import { BladeApi, BladeController, Controller, LabelController, PlainView, View, ViewProps } from '@tweakpane/core'; +export declare function createTestWindow(): Window; +declare class LabelableController implements Controller { + readonly viewProps: ViewProps; + readonly view: PlainView; + constructor(doc: Document); +} +export declare function createEmptyLabelableController(doc: Document): LabelableController; +export declare function createLabelController(doc: Document, vc: LabelableController): LabelController; +export declare function createEmptyBladeController(doc: Document): BladeController; +export declare function assertInitialState(api: BladeApi>): void; +export declare function assertDisposes(api: BladeApi>): void; +export declare function assertUpdates(api: BladeApi>): void; +export {}; diff --git a/node_modules/tweakpane/dist/types/pane/pane-config.d.ts b/node_modules/tweakpane/dist/types/pane/pane-config.d.ts new file mode 100644 index 00000000..bac039a7 --- /dev/null +++ b/node_modules/tweakpane/dist/types/pane/pane-config.d.ts @@ -0,0 +1,18 @@ +export interface PaneConfig { + /** + * The custom container element of the pane. + */ + container?: HTMLElement; + /** + * The default expansion of the pane. + */ + expanded?: boolean; + /** + * The pane title that can expand/collapse the entire pane. + */ + title?: string; + /** + * @hidden + */ + document?: Document; +} diff --git a/node_modules/tweakpane/dist/types/pane/pane.d.ts b/node_modules/tweakpane/dist/types/pane/pane.d.ts new file mode 100644 index 00000000..0f39169f --- /dev/null +++ b/node_modules/tweakpane/dist/types/pane/pane.d.ts @@ -0,0 +1,18 @@ +import { TpPluginBundle } from '@tweakpane/core'; +import { RootApi } from '../blade/root/api/root'; +import { PaneConfig } from './pane-config'; +/** + * The root pane of Tweakpane. + */ +export declare class Pane extends RootApi { + private readonly pool_; + private readonly usesDefaultWrapper_; + private doc_; + private containerElem_; + constructor(opt_config?: PaneConfig); + get document(): Document; + dispose(): void; + registerPlugin(bundle: TpPluginBundle): void; + private embedPluginStyle_; + private setUpDefaultPlugins_; +} diff --git a/node_modules/tweakpane/package.json b/node_modules/tweakpane/package.json new file mode 100644 index 00000000..4e7891ad --- /dev/null +++ b/node_modules/tweakpane/package.json @@ -0,0 +1,110 @@ +{ + "name": "tweakpane", + "version": "3.1.0", + "description": "A compact pane for fine-tuning parameters and monitoring value changes", + "author": "cocopon", + "license": "MIT", + "homepage": "https://cocopon.github.io/tweakpane/", + "main": "dist/tweakpane.js", + "types": "dist/types/index.d.ts", + "prettier": "../../prettier.config.js", + "repository": { + "type": "git", + "url": "https://github.com/cocopon/tweakpane.git" + }, + "funding": "https://github.com/sponsors/cocopon", + "files": [ + "dist" + ], + "scripts": { + "prepack": "run-s clean main:prepare", + "prepublishOnly": "npm test", + "start": "npm-run-all main:build:dev doc:build --parallel main:watch doc:watch doc:server", + "test": "run-s doc:test main:test", + "assets": "npm-run-all clean main:build --serial assets:dist assets:version assets:zip", + "assets:dist": "mkdirp dist && cp docs/assets/tweakpane*.js dist", + "assets:version": "node scripts/assets-version.js", + "assets:zip": "zip -x \"*types*\" -j -r tweakpane-$(cat package.json | npx json version).zip dist", + "build": "run-s main:build doc:build", + "clean": "rimraf .nyc_output dist docs test tweakpane-*.tgz tweakpane-*.zip test-module/node_modules", + "coverage": "nyc --reporter=none --extension \".ts\" --exclude \"**/*-test.ts\" npm run main:test:ts:dynamic", + "format": "run-p main:format doc:format", + "doc:build": "run-p doc:build:*", + "doc:build:scss": "mkdirp docs/assets && sass src/doc/sass/bundle.scss | postcss --config postcss.config.js > docs/assets/bundle.css", + "doc:build:html": "node scripts/doc-build-html.js", + "doc:build:img": "mkdirp docs/assets && cp -r src/doc/img/* docs/assets", + "doc:build:ts": "rollup --config rollup-doc.config.js", + "doc:build:refs": "typedoc --options src/doc/typedoc.json", + "doc:format": "run-p doc:format:*", + "doc:format:scss": "prettier --parser scss --write \"src/doc/sass/**/*.scss\"", + "doc:format:ts": "eslint --ext .ts --fix \"src/doc/ts/**/*.ts\"", + "doc:lint": "run-p doc:test:scss doc:test:ts", + "doc:server": "http-server -c-1 ./docs", + "doc:test": "run-p doc:test:*", + "doc:test:scss": "prettier --parser scss --list-different \"src/doc/sass/**/*.scss\"", + "doc:test:ts": "eslint --ext .ts \"src/doc/ts/**/*.ts\"", + "doc:watch": "run-p doc:watch:*", + "doc:watch:scss": "onchange --initial --kill \"src/doc/sass/**/*.scss\" -- npm run doc:build:scss", + "doc:watch:html": "onchange --initial --kill \"src/doc/template/**/*.html\" -- npm run doc:build:html", + "doc:watch:ts": "onchange --initial --kill \"src/doc/ts/**/*.ts\" -- npm run doc:build:ts", + "lint": "run-p doc:lint main:lint", + "main:build": "run-p main:build:*", + "main:build:dts": "tsc --project src/main/tsconfig-dts.json", + "main:build:dev": "rollup --config rollup.config.js", + "main:build:prod": "rollup --config rollup.config.js --environment BUILD:production", + "main:format": "run-p main:format:*", + "main:format:scss": "prettier --parser scss --write \"src/main/sass/**/*.scss\"", + "main:format:ts": "eslint --ext .ts --fix \"src/main/ts/**/*.ts\"", + "main:lint": "run-p main:test:scss main:test:ts:static", + "main:prepare": "run-s main:build assets:dist", + "main:test": "run-s main:test:scss main:test:ts", + "main:test:scss": "prettier --parser scss --list-different \"src/main/sass/**/*.scss\"", + "main:test:ts": "run-s main:test:ts:static main:test:ts:dynamic main:test:ts:module", + "main:test:ts:dynamic": "TS_NODE_PROJECT=\"src/main/tsconfig.json\" mocha --require ts-node/register \"src/main/ts/**/*-test.ts\"", + "main:test:ts:dynamic:inspect": "TS_NODE_PROJECT=\"src/main/tsconfig.json\" mocha --require ts-node/register \"src/main/ts/**/*-test.ts\" --inspect-brk", + "main:test:ts:module": "npm pack && node scripts/main-test-ts-module-pre.js && (cd test-module && rimraf ./node_modules/tweakpane && npm install && npm test)", + "main:test:ts:static": "eslint --ext .ts \"src/main/ts/**/*.ts\"", + "main:watch": "run-p main:watch:*", + "main:watch:ts": "onchange --initial --kill \"src/main/ts/**/*.ts\" \"../core/dist/**/*\" -- npm run main:build:dev", + "main:watch:scss": "onchange --initial --kill \"src/main/sass/**/*.scss\" \"../core/lib/sass/**/*.scss\" -- npm run main:build:dev" + }, + "devDependencies": { + "@rollup/plugin-alias": "^3.1.2", + "@rollup/plugin-node-resolve": "^13.0.0", + "@rollup/plugin-replace": "^2.3.4", + "@rollup/plugin-typescript": "^8.2.0", + "@tweakpane/core": "^1.1.0", + "@types/assert": "^1.5.4", + "@types/jsdom": "^16.2.13", + "@types/mocha": "^8.2.1", + "@types/node": "^10.12.18", + "@typescript-eslint/parser": "^4.16.1", + "assert": "^2.0.0", + "autoprefixer": "^9.1.5", + "canvas": "^2.9.1", + "eslint": "^7.21.0", + "fs-extra": "^7.0.0", + "glob": "^7.1.3", + "http-server": "^0.12.3", + "jsdom": "^16.7.0", + "json": "^11.0.0", + "mkdirp": "^0.5.5", + "mocha": "^8.3.0", + "npm-run-all": "^4.1.5", + "nunjucks": "^3.1.3", + "nyc": "^15.1.0", + "onchange": "^5.0.2", + "postcss": "^8.2.6", + "postcss-cli": "^8.3.1", + "prettier": "^2.4.0", + "rimraf": "^3.0.2", + "rollup": "^2.38.5", + "rollup-plugin-cleanup": "^3.2.1", + "rollup-plugin-terser": "^7.0.2", + "sass": "^1.49.9", + "ts-node": "^7.0.1", + "tslib": "^2.1.0", + "typedoc": "^0.20.36", + "typescript": "^4.1.5" + } +} diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..64987ba5 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,27 @@ +{ + "name": "a4-creative-coding", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "dependencies": { + "tweakpane": "^3.1.0" + } + }, + "node_modules/tweakpane": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/tweakpane/-/tweakpane-3.1.0.tgz", + "integrity": "sha512-PGAp/LPQdHwzL7/iAW4lV1p9iPQTti7YMjMWO48CoYjvZRS59RmgQnhEGzKzqST1JnmOYmQUjTe8bdhlZRJs5A==", + "funding": { + "url": "https://github.com/sponsors/cocopon" + } + } + }, + "dependencies": { + "tweakpane": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/tweakpane/-/tweakpane-3.1.0.tgz", + "integrity": "sha512-PGAp/LPQdHwzL7/iAW4lV1p9iPQTti7YMjMWO48CoYjvZRS59RmgQnhEGzKzqST1JnmOYmQUjTe8bdhlZRJs5A==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..67c48660 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "tweakpane": "^3.1.0" + } +} From c76e20817a211f0e54128659dcbd16bfb33a9452 Mon Sep 17 00:00:00 2001 From: "Glitch (a4-barsoumrose-creative-coding)" Date: Tue, 4 Oct 2022 23:16:46 +0000 Subject: [PATCH 2/2] final A4 --- .glitch-assets | 6 + README.md | 66 +- class_data.json | 1 - data.json | 5 - index.html | 16 - main.js | 52 - node_modules/.package-lock.json | 15 - node_modules/tweakpane/dist/tweakpane.js | 7463 ----------------- node_modules/tweakpane/dist/tweakpane.min.js | 2 - .../dist/types/blade/list/api/list.d.ts | 12 - .../dist/types/blade/list/plugin.d.ts | 8 - .../dist/types/blade/root/api/preset.d.ts | 12 - .../dist/types/blade/root/api/root.d.ts | 24 - .../types/blade/root/controller/root.d.ts | 12 - .../dist/types/blade/slider/api/slider.d.ts | 14 - .../dist/types/blade/slider/plugin.d.ts | 10 - .../dist/types/blade/text/api/text.d.ts | 12 - .../dist/types/blade/text/plugin.d.ts | 9 - node_modules/tweakpane/dist/types/index.d.ts | 10 - .../tweakpane/dist/types/misc/semver.d.ts | 14 - .../tweakpane/dist/types/misc/test-util.d.ts | 14 - .../dist/types/pane/pane-config.d.ts | 18 - .../tweakpane/dist/types/pane/pane.d.ts | 18 - node_modules/tweakpane/package.json | 110 - package-lock.json | 387 +- package.json | 28 +- public/script.js | 157 + public/style.css | 14 + server.js | 34 + shrinkwrap.yaml | 434 + views/index.html | 35 + 31 files changed, 1081 insertions(+), 7931 deletions(-) create mode 100644 .glitch-assets delete mode 100644 class_data.json delete mode 100644 data.json delete mode 100644 index.html delete mode 100644 main.js delete mode 100644 node_modules/.package-lock.json delete mode 100644 node_modules/tweakpane/dist/tweakpane.js delete mode 100644 node_modules/tweakpane/dist/tweakpane.min.js delete mode 100644 node_modules/tweakpane/dist/types/blade/list/api/list.d.ts delete mode 100644 node_modules/tweakpane/dist/types/blade/list/plugin.d.ts delete mode 100644 node_modules/tweakpane/dist/types/blade/root/api/preset.d.ts delete mode 100644 node_modules/tweakpane/dist/types/blade/root/api/root.d.ts delete mode 100644 node_modules/tweakpane/dist/types/blade/root/controller/root.d.ts delete mode 100644 node_modules/tweakpane/dist/types/blade/slider/api/slider.d.ts delete mode 100644 node_modules/tweakpane/dist/types/blade/slider/plugin.d.ts delete mode 100644 node_modules/tweakpane/dist/types/blade/text/api/text.d.ts delete mode 100644 node_modules/tweakpane/dist/types/blade/text/plugin.d.ts delete mode 100644 node_modules/tweakpane/dist/types/index.d.ts delete mode 100644 node_modules/tweakpane/dist/types/misc/semver.d.ts delete mode 100644 node_modules/tweakpane/dist/types/misc/test-util.d.ts delete mode 100644 node_modules/tweakpane/dist/types/pane/pane-config.d.ts delete mode 100644 node_modules/tweakpane/dist/types/pane/pane.d.ts delete mode 100644 node_modules/tweakpane/package.json create mode 100644 public/script.js create mode 100644 public/style.css create mode 100644 server.js create mode 100644 shrinkwrap.yaml create mode 100644 views/index.html diff --git a/.glitch-assets b/.glitch-assets new file mode 100644 index 00000000..954626f6 --- /dev/null +++ b/.glitch-assets @@ -0,0 +1,6 @@ +{"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"} +{"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"} +{"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"} +{"uuid":"adSBq97hhhpFNUna","deleted":true} +{"uuid":"adSBq97hhhpFNUnb","deleted":true} +{"uuid":"adSBq97hhhpFNUnc","deleted":true} diff --git a/README.md b/README.md index 4ac8bbff..0dfe5740 100644 --- a/README.md +++ b/README.md @@ -1,61 +1,13 @@ -Assignment 4 - Creative Coding: Interactive Multimedia Experiences -=== +# A4 - creative coding -Due: October 4th, by 11:59 AM. +Mary Barsoum: https://a4-barsoumrose-creative-coding.glitch.me -For this assignment we will focus on client-side development using popular audio/graphics/visualization technologies. The goal of this assignment is to refine our JavaScript knowledge while exploring the multimedia capabilities of the browser. +Using the exmaple we did in class, I wanted to analyze a different currency. Instead of USD I looked at GBP. +based on how big the conversion rate is between currencies, the color of the circle intensifies. -[WebAudio + Canvas Tutorial](https://github.com/cs4241-22a/cs4241-22a.github.io/blob/main/using_webaudio_canvas.md) -[SVG + D3 tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/using_svg_and_d3.md) +when thinking of how to implement tweakpane I wanted to focus on color blind individuals. Here, the user can adjust +the background color of the body, and change which color intensifies with the circles (red, green, or blue). -Baseline Requirements ---- - -Your application is required to implement the following functionalities: - -- A server created using Express. This server can be as simple as needed. -- A client-side interactive experience using at least one of the following web technologies frameworks. - - [Three.js](https://threejs.org/): A library for 3D graphics / VR experiences - - [D3.js](https://d3js.org): A library that is primarily used for interactive data visualizations - - [Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D raster drawing API included in all modern browsers - - [SVG](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API): A 2D vector drawing framework that enables shapes to be defined via XML. - - [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API): An API for audio synthesis, analysis, processing, and file playback. -- A user interface for interaction with your project, which must expose at least four parameters for user control. [tweakpane](https://cocopon.github.io/tweakpane/) is highly recommended for this, but you can also use regular HTML `` tags (the `range` type is useful to create sliders). You might also explore interaction by tracking mouse movement via the `window.onmousemove` event handler in tandem with the `event.clientX` and `event.clientY` properties. Consider using the [Pointer Events API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) to ensure that that both mouse and touch events will both be supported in your app. -- Your application should display basic documentation for the user interface when the application first loads. - -The interactive experience should possess a reasonable level of complexity. Some examples: -### Three.js -- A generative algorithm creates simple agents that move through a virtual world. Your interface controls the behavior / appearance of these agents. -- A simple 3D game... you really want this to be a simple as possible or it will be outside the scope of this assignment. -- An 3D audio visualization of a song of your choosing. User interaction should control aspects of the visualization. -### Canvas -- Implement a generative algorithm such as [Conway's Game of Life](https://bitstorm.org/gameoflife/) (or 1D cellular automata) and provide interactive controls. Note that the Game of Life has been created by 100s of people using ; we'll be checking to ensure that your implementation is not a copy of these. -- Design a 2D audio visualizer of a song of your choosing. User interaction should control visual aspects of the experience. -### Web Audio API -- Create a screen-based musical instrument using the Web Audio API. You can use projects such as [Interface.js](http://charlie-roberts.com/interface/) or [Nexus UI](https://nexus-js.github.io/ui/api/#Piano) to provide common musical interface elements, or use dat.GUI in combination with mouse/touch events (use the Pointer Events API). Your GUI should enable users to control aspects of sound synthesis. If you want to use higher-level instruments instead of the raw WebAudio API sounds, consider trying the instruments provided by [Tone.js]() or [Gibber](https://github.com/charlieroberts/gibber.audio.lib). -### D3.js -- Create visualizations using the datasets found at [Awesome JSON Datasets](https://github.com/jdorfman/Awesome-JSON-Datasets). Experiment with providing different visualizations of the same data set, and providing users interactive control over visualization parameters and/or data filtering. Alternatively, create a single visualization with using one of the more complicated techniques shown at [d3js.org](d3js.org) and provide meaningful points of interaction for users. - -Deliverables ---- - -Do the following to complete this assignment: - -1. Implement your project with the above requirements. -3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly. -4. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it. -5. Fork this repository and modify the README to the specifications below. *NOTE: If you don't use Glitch for hosting (where we can see the files) then you must include all project files that you author in your repo for this assignment*. -6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`. - -Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions) ---- - -## Your Web Application Title - -your hosting link e.g. http://a4-charlieroberts.glitch.me - -Include a very brief summary of your project here. Images are encouraged when needed, along with concise, high-level text. Be sure to include: - -- the goal of the application -- challenges you faced in realizing the application -- the instructions you present in the website should be clear enough to use the application, but if you feel any need to provide additional instructions please do so here. +the big challange I faced was loading the data from the json. I was initially going to do a different data set but +loading nested json values proved to be difficult. I also struggled with figuring out how to update the page in real +time based on the values in tweakpane. diff --git a/class_data.json b/class_data.json deleted file mode 100644 index 961e2aa7..00000000 --- a/class_data.json +++ /dev/null @@ -1 +0,0 @@ -{"provider":"https://www.exchangerate-api.com","WARNING_UPGRADE_TO_V6":"https://www.exchangerate-api.com/docs/free","terms":"https://www.exchangerate-api.com/terms","base":"USD","date":"2022-10-01","time_last_updated":1664582402,"rates":{"USD":1,"AED":3.67,"AFN":87.65,"ALL":120.46,"AMD":405.92,"ANG":1.79,"AOA":434.51,"ARS":146.18,"AUD":1.55,"AWG":1.79,"AZN":1.7,"BAM":2,"BBD":2,"BDT":100.34,"BGN":2,"BHD":0.376,"BIF":2037.79,"BMD":1,"BND":1.43,"BOB":6.9,"BRL":5.4,"BSD":1,"BTN":81.49,"BWP":13.39,"BYN":2.62,"BZD":2,"CAD":1.38,"CDF":2010.9,"CHF":0.984,"CLP":963.59,"CNY":7.13,"COP":4517.02,"CRC":631.29,"CUP":24,"CVE":112.7,"CZK":25.09,"DJF":177.72,"DKK":7.63,"DOP":52.9,"DZD":140.71,"EGP":19.5,"ERN":15,"ETB":52.73,"EUR":1.02,"FJD":2.3,"FKP":0.899,"FOK":7.63,"GBP":0.9,"GEL":2.83,"GGP":0.899,"GHS":10.71,"GIP":0.899,"GMD":56.69,"GNF":8601.42,"GTQ":7.82,"GYD":208.34,"HKD":7.85,"HNL":24.5,"HRK":7.7,"HTG":120.05,"HUF":430.19,"IDR":15219.31,"ILS":3.57,"IMP":0.899,"INR":81.49,"IQD":1453.55,"IRR":41892.82,"ISK":143.77,"JEP":0.899,"JMD":151.9,"JOD":0.709,"JPY":144.72,"KES":121.17,"KGS":81.68,"KHR":4103.3,"KID":1.55,"KMF":502.83,"KRW":1435.15,"KWD":0.3,"KYD":0.833,"KZT":476.63,"LAK":16422.03,"LBP":1507.5,"LKR":359.04,"LRD":153.18,"LSL":18.03,"LYD":5.03,"MAD":10.99,"MDL":19.5,"MGA":4179.37,"MKD":63.51,"MMK":2681.72,"MNT":3306.49,"MOP":8.09,"MRU":37.72,"MUR":44.67,"MVR":15.39,"MWK":1033.19,"MXN":20.16,"MYR":4.63,"MZN":64.45,"NAD":18.03,"NGN":431.04,"NIO":35.66,"NOK":10.85,"NPR":130.39,"NZD":1.78,"OMR":0.384,"PAB":1,"PEN":3.95,"PGK":3.51,"PHP":58.7,"PKR":229.97,"PLN":4.95,"PYG":7007.03,"QAR":3.64,"RON":5.05,"RSD":120.17,"RUB":57.34,"RWF":1072.82,"SAR":3.75,"SBD":8.08,"SCR":12.95,"SDG":564.65,"SEK":11.12,"SGD":1.43,"SHP":0.899,"SLE":15.7,"SLL":15702.71,"SOS":566.1,"SRD":27.87,"SSP":634.66,"STN":25.04,"SYP":2504.8,"SZL":18.03,"THB":37.83,"TJS":10.22,"TMT":3.5,"TND":2.92,"TOP":2.42,"TRY":18.52,"TTD":6.74,"TVD":1.55,"TWD":31.71,"TZS":2331.01,"UAH":37.9,"UGX":3859.19,"UYU":40.89,"UZS":10985.28,"VES":8.2,"VND":23848.02,"VUV":122.47,"WST":2.83,"XAF":670.43,"XCD":2.7,"XDR":0.778,"XOF":670.43,"XPF":121.97,"YER":249.43,"ZAR":18.04,"ZMW":15.77,"ZWL":621.19}} \ No newline at end of file diff --git a/data.json b/data.json deleted file mode 100644 index 6e51439f..00000000 --- a/data.json +++ /dev/null @@ -1,5 +0,0 @@ -{"type":"FeatureCollection","metadata":{"generated":1664664110000,"url":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson","title":"USGS All Earthquakes, Past Hour","status":200,"api":"1.10.3","count":5},"features":[{"type":"Feature","properties":{"mag":0.89,"place":"6km NW of The Geysers, CA","time":1664663838460,"updated":1664663933898,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/nc73788156","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nc73788156.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":12,"net":"nc","code":"73788156","ids":",nc73788156,","sources":",nc,","types":",nearby-cities,origin,phase-data,","nst":25,"dmin":0.008138,"rms":0.02,"gap":51,"magType":"md","type":"earthquake","title":"M 0.9 - 6km NW of The Geysers, CA"},"geometry":{"type":"Point","coordinates":[-122.7996674,38.8230019,2.86]},"id":"nc73788156"}, -{"type":"Feature","properties":{"mag":0.9,"place":"8km NW of The Geysers, CA","time":1664663817460,"updated":1664663914792,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/nc73788151","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nc73788151.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":12,"net":"nc","code":"73788151","ids":",nc73788151,","sources":",nc,","types":",nearby-cities,origin,phase-data,","nst":20,"dmin":0.01148,"rms":0.02,"gap":76,"magType":"md","type":"earthquake","title":"M 0.9 - 8km NW of The Geysers, CA"},"geometry":{"type":"Point","coordinates":[-122.8166656,38.8336678,1.96]},"id":"nc73788151"}, -{"type":"Feature","properties":{"mag":0.58,"place":"8km NW of The Geysers, CA","time":1664663450950,"updated":1664663543695,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/nc73788141","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/nc73788141.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":5,"net":"nc","code":"73788141","ids":",nc73788141,","sources":",nc,","types":",nearby-cities,origin,phase-data,","nst":14,"dmin":0.01082,"rms":0.01,"gap":95,"magType":"md","type":"earthquake","title":"M 0.6 - 8km NW of The Geysers, CA"},"geometry":{"type":"Point","coordinates":[-122.8195038,38.8313332,1.78]},"id":"nc73788141"}, -{"type":"Feature","properties":{"mag":1.5,"place":"87 km S of McCarthy, Alaska","time":1664662904179,"updated":1664663026699,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/ak022clih829","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/ak022clih829.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"automatic","tsunami":0,"sig":35,"net":"ak","code":"022clih829","ids":",ak022clih829,","sources":",ak,","types":",origin,phase-data,","nst":null,"dmin":null,"rms":0.63,"gap":null,"magType":"ml","type":"earthquake","title":"M 1.5 - 87 km S of McCarthy, Alaska"},"geometry":{"type":"Point","coordinates":[-143.0963,60.6508,10.9]},"id":"ak022clih829"}, -{"type":"Feature","properties":{"mag":2.4,"place":"southern Idaho","time":1664662692065,"updated":1664663438040,"tz":null,"url":"https://earthquake.usgs.gov/earthquakes/eventpage/us6000iq2y","detail":"https://earthquake.usgs.gov/earthquakes/feed/v1.0/detail/us6000iq2y.geojson","felt":null,"cdi":null,"mmi":null,"alert":null,"status":"reviewed","tsunami":0,"sig":89,"net":"us","code":"6000iq2y","ids":",us6000iq2y,","sources":",us,","types":",origin,phase-data,","nst":32,"dmin":0.807,"rms":0.58,"gap":62,"magType":"ml","type":"earthquake","title":"M 2.4 - southern Idaho"},"geometry":{"type":"Point","coordinates":[-114.4024,44.6922,10]},"id":"us6000iq2y"}],"bbox":[-143.0963,38.8230019,1.78,-114.4024,60.6508,10.9]} \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index ce1b3e42..00000000 --- a/index.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/main.js b/main.js deleted file mode 100644 index 4f85c589..00000000 --- a/main.js +++ /dev/null @@ -1,52 +0,0 @@ - -window.addEventListener( 'load', () => { - const radius = 40, - y = 50 - let color = 0 - - const svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ) - svg.setAttribute( 'width', 1000 ) - - document.body.appendChild( svg ) - - const pane = new Tweakpane.Pane(); - - const PARAMS = { - RGB: 0, - }; - - pane.addInput(PARAMS, 'RGB', { - options: { - Red: 0, - Green: 1, - Blue: 2, - }, - }).on('change', (val) => { - color = val.value}); - - console.log(color) - - fetch( "https://api.exchangerate-api.com/v4/latest/GBP" ) - .then( data => data.json() ) - .then( jsonData => { - //console.log( d3.select('body').selectAll('div') ) - - - const group = d3.select( 'svg' ).selectAll( 'circle' ) - .data( d3.entries( jsonData.rates ) ) - .join( 'g' ) - - group.append('circle') - .attr( 'fill', d => `rgba( ${ Math.floor(d.value) }, 100, 100, .5 )` ) - .attr( 'cx', (d,i) => i * radius ) - .attr( 'cy', y ) - .attr( 'r', radius ) - - group.append( 'text' ) - .text( d => d.key ) - .attr( 'fill', 'white' ) - .attr( 'x', (d,i) => i * radius - radius / 2 ) - .attr( 'y', y + radius + 25 ) - - }) -}) \ No newline at end of file diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json deleted file mode 100644 index 8632d487..00000000 --- a/node_modules/.package-lock.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "a4-creative-coding", - "lockfileVersion": 2, - "requires": true, - "packages": { - "node_modules/tweakpane": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/tweakpane/-/tweakpane-3.1.0.tgz", - "integrity": "sha512-PGAp/LPQdHwzL7/iAW4lV1p9iPQTti7YMjMWO48CoYjvZRS59RmgQnhEGzKzqST1JnmOYmQUjTe8bdhlZRJs5A==", - "funding": { - "url": "https://github.com/sponsors/cocopon" - } - } - } -} diff --git a/node_modules/tweakpane/dist/tweakpane.js b/node_modules/tweakpane/dist/tweakpane.js deleted file mode 100644 index efd77fe4..00000000 --- a/node_modules/tweakpane/dist/tweakpane.js +++ /dev/null @@ -1,7463 +0,0 @@ -/*! Tweakpane 3.1.0 (c) 2016 cocopon, licensed under the MIT license. */ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : - typeof define === 'function' && define.amd ? define(['exports'], factory) : - (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Tweakpane = {})); -})(this, (function (exports) { 'use strict'; - - /*** - * A simple semantic versioning perser. - */ - class Semver { - /** - * @hidden - */ - constructor(text) { - const [core, prerelease] = text.split('-'); - const coreComps = core.split('.'); - this.major = parseInt(coreComps[0], 10); - this.minor = parseInt(coreComps[1], 10); - this.patch = parseInt(coreComps[2], 10); - this.prerelease = prerelease !== null && prerelease !== void 0 ? prerelease : null; - } - toString() { - const core = [this.major, this.minor, this.patch].join('.'); - return this.prerelease !== null ? [core, this.prerelease].join('-') : core; - } - } - - class BladeApi { - constructor(controller) { - this.controller_ = controller; - } - get element() { - return this.controller_.view.element; - } - get disabled() { - return this.controller_.viewProps.get('disabled'); - } - set disabled(disabled) { - this.controller_.viewProps.set('disabled', disabled); - } - get hidden() { - return this.controller_.viewProps.get('hidden'); - } - set hidden(hidden) { - this.controller_.viewProps.set('hidden', hidden); - } - dispose() { - this.controller_.viewProps.set('disposed', true); - } - } - - class TpEvent { - constructor(target) { - this.target = target; - } - } - class TpChangeEvent extends TpEvent { - constructor(target, value, presetKey, last) { - super(target); - this.value = value; - this.presetKey = presetKey; - this.last = last !== null && last !== void 0 ? last : true; - } - } - class TpUpdateEvent extends TpEvent { - constructor(target, value, presetKey) { - super(target); - this.value = value; - this.presetKey = presetKey; - } - } - class TpFoldEvent extends TpEvent { - constructor(target, expanded) { - super(target); - this.expanded = expanded; - } - } - class TpTabSelectEvent extends TpEvent { - constructor(target, index) { - super(target); - this.index = index; - } - } - - function forceCast(v) { - return v; - } - function isEmpty(value) { - return value === null || value === undefined; - } - function deepEqualsArray(a1, a2) { - if (a1.length !== a2.length) { - return false; - } - for (let i = 0; i < a1.length; i++) { - if (a1[i] !== a2[i]) { - return false; - } - } - return true; - } - - const CREATE_MESSAGE_MAP = { - alreadydisposed: () => 'View has been already disposed', - invalidparams: (context) => `Invalid parameters for '${context.name}'`, - nomatchingcontroller: (context) => `No matching controller for '${context.key}'`, - nomatchingview: (context) => `No matching view for '${JSON.stringify(context.params)}'`, - notbindable: () => `Value is not bindable`, - propertynotfound: (context) => `Property '${context.name}' not found`, - shouldneverhappen: () => 'This error should never happen', - }; - class TpError { - constructor(config) { - var _a; - this.message = - (_a = CREATE_MESSAGE_MAP[config.type](forceCast(config.context))) !== null && _a !== void 0 ? _a : 'Unexpected error'; - this.name = this.constructor.name; - this.stack = new Error(this.message).stack; - this.type = config.type; - } - static alreadyDisposed() { - return new TpError({ type: 'alreadydisposed' }); - } - static notBindable() { - return new TpError({ - type: 'notbindable', - }); - } - static propertyNotFound(name) { - return new TpError({ - type: 'propertynotfound', - context: { - name: name, - }, - }); - } - static shouldNeverHappen() { - return new TpError({ type: 'shouldneverhappen' }); - } - } - - class BindingTarget { - constructor(obj, key, opt_id) { - this.obj_ = obj; - this.key_ = key; - this.presetKey_ = opt_id !== null && opt_id !== void 0 ? opt_id : key; - } - static isBindable(obj) { - if (obj === null) { - return false; - } - if (typeof obj !== 'object') { - return false; - } - return true; - } - get key() { - return this.key_; - } - get presetKey() { - return this.presetKey_; - } - read() { - return this.obj_[this.key_]; - } - write(value) { - this.obj_[this.key_] = value; - } - writeProperty(name, value) { - const valueObj = this.read(); - if (!BindingTarget.isBindable(valueObj)) { - throw TpError.notBindable(); - } - if (!(name in valueObj)) { - throw TpError.propertyNotFound(name); - } - valueObj[name] = value; - } - } - - class ButtonApi extends BladeApi { - get label() { - return this.controller_.props.get('label'); - } - set label(label) { - this.controller_.props.set('label', label); - } - get title() { - var _a; - return (_a = this.controller_.valueController.props.get('title')) !== null && _a !== void 0 ? _a : ''; - } - set title(title) { - this.controller_.valueController.props.set('title', title); - } - on(eventName, handler) { - const bh = handler.bind(this); - const emitter = this.controller_.valueController.emitter; - emitter.on(eventName, () => { - bh(new TpEvent(this)); - }); - return this; - } - } - - class Emitter { - constructor() { - this.observers_ = {}; - } - on(eventName, handler) { - let observers = this.observers_[eventName]; - if (!observers) { - observers = this.observers_[eventName] = []; - } - observers.push({ - handler: handler, - }); - return this; - } - off(eventName, handler) { - const observers = this.observers_[eventName]; - if (observers) { - this.observers_[eventName] = observers.filter((observer) => { - return observer.handler !== handler; - }); - } - return this; - } - emit(eventName, event) { - const observers = this.observers_[eventName]; - if (!observers) { - return; - } - observers.forEach((observer) => { - observer.handler(event); - }); - } - } - - const PREFIX = 'tp'; - function ClassName(viewName) { - const fn = (opt_elementName, opt_modifier) => { - return [ - PREFIX, - '-', - viewName, - 'v', - opt_elementName ? `_${opt_elementName}` : '', - opt_modifier ? `-${opt_modifier}` : '', - ].join(''); - }; - return fn; - } - - function compose(h1, h2) { - return (input) => h2(h1(input)); - } - function extractValue(ev) { - return ev.rawValue; - } - function bindValue(value, applyValue) { - value.emitter.on('change', compose(extractValue, applyValue)); - applyValue(value.rawValue); - } - function bindValueMap(valueMap, key, applyValue) { - bindValue(valueMap.value(key), applyValue); - } - - function applyClass(elem, className, active) { - if (active) { - elem.classList.add(className); - } - else { - elem.classList.remove(className); - } - } - function valueToClassName(elem, className) { - return (value) => { - applyClass(elem, className, value); - }; - } - function bindValueToTextContent(value, elem) { - bindValue(value, (text) => { - elem.textContent = text !== null && text !== void 0 ? text : ''; - }); - } - - const className$q = ClassName('btn'); - class ButtonView { - constructor(doc, config) { - this.element = doc.createElement('div'); - this.element.classList.add(className$q()); - config.viewProps.bindClassModifiers(this.element); - const buttonElem = doc.createElement('button'); - buttonElem.classList.add(className$q('b')); - config.viewProps.bindDisabled(buttonElem); - this.element.appendChild(buttonElem); - this.buttonElement = buttonElem; - const titleElem = doc.createElement('div'); - titleElem.classList.add(className$q('t')); - bindValueToTextContent(config.props.value('title'), titleElem); - this.buttonElement.appendChild(titleElem); - } - } - - class ButtonController { - constructor(doc, config) { - this.emitter = new Emitter(); - this.onClick_ = this.onClick_.bind(this); - this.props = config.props; - this.viewProps = config.viewProps; - this.view = new ButtonView(doc, { - props: this.props, - viewProps: this.viewProps, - }); - this.view.buttonElement.addEventListener('click', this.onClick_); - } - onClick_() { - this.emitter.emit('click', { - sender: this, - }); - } - } - - class BoundValue { - constructor(initialValue, config) { - var _a; - this.constraint_ = config === null || config === void 0 ? void 0 : config.constraint; - this.equals_ = (_a = config === null || config === void 0 ? void 0 : config.equals) !== null && _a !== void 0 ? _a : ((v1, v2) => v1 === v2); - this.emitter = new Emitter(); - this.rawValue_ = initialValue; - } - get constraint() { - return this.constraint_; - } - get rawValue() { - return this.rawValue_; - } - set rawValue(rawValue) { - this.setRawValue(rawValue, { - forceEmit: false, - last: true, - }); - } - setRawValue(rawValue, options) { - const opts = options !== null && options !== void 0 ? options : { - forceEmit: false, - last: true, - }; - const constrainedValue = this.constraint_ - ? this.constraint_.constrain(rawValue) - : rawValue; - const changed = !this.equals_(this.rawValue_, constrainedValue); - if (!changed && !opts.forceEmit) { - return; - } - this.emitter.emit('beforechange', { - sender: this, - }); - this.rawValue_ = constrainedValue; - this.emitter.emit('change', { - options: opts, - rawValue: constrainedValue, - sender: this, - }); - } - } - - class PrimitiveValue { - constructor(initialValue) { - this.emitter = new Emitter(); - this.value_ = initialValue; - } - get rawValue() { - return this.value_; - } - set rawValue(value) { - this.setRawValue(value, { - forceEmit: false, - last: true, - }); - } - setRawValue(value, options) { - const opts = options !== null && options !== void 0 ? options : { - forceEmit: false, - last: true, - }; - if (this.value_ === value && !opts.forceEmit) { - return; - } - this.emitter.emit('beforechange', { - sender: this, - }); - this.value_ = value; - this.emitter.emit('change', { - options: opts, - rawValue: this.value_, - sender: this, - }); - } - } - - function createValue(initialValue, config) { - const constraint = config === null || config === void 0 ? void 0 : config.constraint; - const equals = config === null || config === void 0 ? void 0 : config.equals; - if (!constraint && !equals) { - return new PrimitiveValue(initialValue); - } - return new BoundValue(initialValue, config); - } - - class ValueMap { - constructor(valueMap) { - this.emitter = new Emitter(); - this.valMap_ = valueMap; - for (const key in this.valMap_) { - const v = this.valMap_[key]; - v.emitter.on('change', () => { - this.emitter.emit('change', { - key: key, - sender: this, - }); - }); - } - } - static createCore(initialValue) { - const keys = Object.keys(initialValue); - return keys.reduce((o, key) => { - return Object.assign(o, { - [key]: createValue(initialValue[key]), - }); - }, {}); - } - static fromObject(initialValue) { - const core = this.createCore(initialValue); - return new ValueMap(core); - } - get(key) { - return this.valMap_[key].rawValue; - } - set(key, value) { - this.valMap_[key].rawValue = value; - } - value(key) { - return this.valMap_[key]; - } - } - - function parseObject(value, keyToParserMap) { - const keys = Object.keys(keyToParserMap); - const result = keys.reduce((tmp, key) => { - if (tmp === undefined) { - return undefined; - } - const parser = keyToParserMap[key]; - const result = parser(value[key]); - return result.succeeded - ? Object.assign(Object.assign({}, tmp), { [key]: result.value }) : undefined; - }, {}); - return forceCast(result); - } - function parseArray(value, parseItem) { - return value.reduce((tmp, item) => { - if (tmp === undefined) { - return undefined; - } - const result = parseItem(item); - if (!result.succeeded || result.value === undefined) { - return undefined; - } - return [...tmp, result.value]; - }, []); - } - function isObject(value) { - if (value === null) { - return false; - } - return typeof value === 'object'; - } - function createParamsParserBuilder(parse) { - return (optional) => (v) => { - if (!optional && v === undefined) { - return { - succeeded: false, - value: undefined, - }; - } - if (optional && v === undefined) { - return { - succeeded: true, - value: undefined, - }; - } - const result = parse(v); - return result !== undefined - ? { - succeeded: true, - value: result, - } - : { - succeeded: false, - value: undefined, - }; - }; - } - function createParamsParserBuilders(optional) { - return { - custom: (parse) => createParamsParserBuilder(parse)(optional), - boolean: createParamsParserBuilder((v) => typeof v === 'boolean' ? v : undefined)(optional), - number: createParamsParserBuilder((v) => typeof v === 'number' ? v : undefined)(optional), - string: createParamsParserBuilder((v) => typeof v === 'string' ? v : undefined)(optional), - function: createParamsParserBuilder((v) => - typeof v === 'function' ? v : undefined)(optional), - constant: (value) => createParamsParserBuilder((v) => (v === value ? value : undefined))(optional), - raw: createParamsParserBuilder((v) => v)(optional), - object: (keyToParserMap) => createParamsParserBuilder((v) => { - if (!isObject(v)) { - return undefined; - } - return parseObject(v, keyToParserMap); - })(optional), - array: (itemParser) => createParamsParserBuilder((v) => { - if (!Array.isArray(v)) { - return undefined; - } - return parseArray(v, itemParser); - })(optional), - }; - } - const ParamsParsers = { - optional: createParamsParserBuilders(true), - required: createParamsParserBuilders(false), - }; - function parseParams(value, keyToParserMap) { - const result = ParamsParsers.required.object(keyToParserMap)(value); - return result.succeeded ? result.value : undefined; - } - - function disposeElement(elem) { - if (elem && elem.parentElement) { - elem.parentElement.removeChild(elem); - } - return null; - } - - function getAllBladePositions() { - return ['veryfirst', 'first', 'last', 'verylast']; - } - - const className$p = ClassName(''); - const POS_TO_CLASS_NAME_MAP = { - veryfirst: 'vfst', - first: 'fst', - last: 'lst', - verylast: 'vlst', - }; - class BladeController { - constructor(config) { - this.parent_ = null; - this.blade = config.blade; - this.view = config.view; - this.viewProps = config.viewProps; - const elem = this.view.element; - this.blade.value('positions').emitter.on('change', () => { - getAllBladePositions().forEach((pos) => { - elem.classList.remove(className$p(undefined, POS_TO_CLASS_NAME_MAP[pos])); - }); - this.blade.get('positions').forEach((pos) => { - elem.classList.add(className$p(undefined, POS_TO_CLASS_NAME_MAP[pos])); - }); - }); - this.viewProps.handleDispose(() => { - disposeElement(elem); - }); - } - get parent() { - return this.parent_; - } - } - - const SVG_NS = 'http://www.w3.org/2000/svg'; - function forceReflow(element) { - element.offsetHeight; - } - function disableTransitionTemporarily(element, callback) { - const t = element.style.transition; - element.style.transition = 'none'; - callback(); - element.style.transition = t; - } - function supportsTouch(doc) { - return doc.ontouchstart !== undefined; - } - function getGlobalObject() { - return new Function('return this')(); - } - function getWindowDocument() { - const globalObj = forceCast(getGlobalObject()); - return globalObj.document; - } - function getCanvasContext(canvasElement) { - const win = canvasElement.ownerDocument.defaultView; - if (!win) { - return null; - } - const isBrowser = 'document' in win; - return isBrowser ? canvasElement.getContext('2d') : null; - } - const ICON_ID_TO_INNER_HTML_MAP = { - check: '', - dropdown: '', - p2dpad: '', - }; - function createSvgIconElement(document, iconId) { - const elem = document.createElementNS(SVG_NS, 'svg'); - elem.innerHTML = ICON_ID_TO_INNER_HTML_MAP[iconId]; - return elem; - } - function insertElementAt(parentElement, element, index) { - parentElement.insertBefore(element, parentElement.children[index]); - } - function removeElement(element) { - if (element.parentElement) { - element.parentElement.removeChild(element); - } - } - function removeChildElements(element) { - while (element.children.length > 0) { - element.removeChild(element.children[0]); - } - } - function removeChildNodes(element) { - while (element.childNodes.length > 0) { - element.removeChild(element.childNodes[0]); - } - } - function findNextTarget(ev) { - if (ev.relatedTarget) { - return forceCast(ev.relatedTarget); - } - if ('explicitOriginalTarget' in ev) { - return ev.explicitOriginalTarget; - } - return null; - } - - const className$o = ClassName('lbl'); - function createLabelNode(doc, label) { - const frag = doc.createDocumentFragment(); - const lineNodes = label.split('\n').map((line) => { - return doc.createTextNode(line); - }); - lineNodes.forEach((lineNode, index) => { - if (index > 0) { - frag.appendChild(doc.createElement('br')); - } - frag.appendChild(lineNode); - }); - return frag; - } - class LabelView { - constructor(doc, config) { - this.element = doc.createElement('div'); - this.element.classList.add(className$o()); - config.viewProps.bindClassModifiers(this.element); - const labelElem = doc.createElement('div'); - labelElem.classList.add(className$o('l')); - bindValueMap(config.props, 'label', (value) => { - if (isEmpty(value)) { - this.element.classList.add(className$o(undefined, 'nol')); - } - else { - this.element.classList.remove(className$o(undefined, 'nol')); - removeChildNodes(labelElem); - labelElem.appendChild(createLabelNode(doc, value)); - } - }); - this.element.appendChild(labelElem); - this.labelElement = labelElem; - const valueElem = doc.createElement('div'); - valueElem.classList.add(className$o('v')); - this.element.appendChild(valueElem); - this.valueElement = valueElem; - } - } - - class LabelController extends BladeController { - constructor(doc, config) { - const viewProps = config.valueController.viewProps; - super(Object.assign(Object.assign({}, config), { view: new LabelView(doc, { - props: config.props, - viewProps: viewProps, - }), viewProps: viewProps })); - this.props = config.props; - this.valueController = config.valueController; - this.view.valueElement.appendChild(this.valueController.view.element); - } - } - - const ButtonBladePlugin = { - id: 'button', - type: 'blade', - accept(params) { - const p = ParamsParsers; - const result = parseParams(params, { - title: p.required.string, - view: p.required.constant('button'), - label: p.optional.string, - }); - return result ? { params: result } : null; - }, - controller(args) { - return new LabelController(args.document, { - blade: args.blade, - props: ValueMap.fromObject({ - label: args.params.label, - }), - valueController: new ButtonController(args.document, { - props: ValueMap.fromObject({ - title: args.params.title, - }), - viewProps: args.viewProps, - }), - }); - }, - api(args) { - if (!(args.controller instanceof LabelController)) { - return null; - } - if (!(args.controller.valueController instanceof ButtonController)) { - return null; - } - return new ButtonApi(args.controller); - }, - }; - - class ValueBladeController extends BladeController { - constructor(config) { - super(config); - this.value = config.value; - } - } - - function createBlade() { - return new ValueMap({ - positions: createValue([], { - equals: deepEqualsArray, - }), - }); - } - - class Foldable extends ValueMap { - constructor(valueMap) { - super(valueMap); - } - static create(expanded) { - const coreObj = { - completed: true, - expanded: expanded, - expandedHeight: null, - shouldFixHeight: false, - temporaryExpanded: null, - }; - const core = ValueMap.createCore(coreObj); - return new Foldable(core); - } - get styleExpanded() { - var _a; - return (_a = this.get('temporaryExpanded')) !== null && _a !== void 0 ? _a : this.get('expanded'); - } - get styleHeight() { - if (!this.styleExpanded) { - return '0'; - } - const exHeight = this.get('expandedHeight'); - if (this.get('shouldFixHeight') && !isEmpty(exHeight)) { - return `${exHeight}px`; - } - return 'auto'; - } - bindExpandedClass(elem, expandedClassName) { - const onExpand = () => { - const expanded = this.styleExpanded; - if (expanded) { - elem.classList.add(expandedClassName); - } - else { - elem.classList.remove(expandedClassName); - } - }; - bindValueMap(this, 'expanded', onExpand); - bindValueMap(this, 'temporaryExpanded', onExpand); - } - cleanUpTransition() { - this.set('shouldFixHeight', false); - this.set('expandedHeight', null); - this.set('completed', true); - } - } - function computeExpandedFolderHeight(folder, containerElement) { - let height = 0; - disableTransitionTemporarily(containerElement, () => { - folder.set('expandedHeight', null); - folder.set('temporaryExpanded', true); - forceReflow(containerElement); - height = containerElement.clientHeight; - folder.set('temporaryExpanded', null); - forceReflow(containerElement); - }); - return height; - } - function applyHeight(foldable, elem) { - elem.style.height = foldable.styleHeight; - } - function bindFoldable(foldable, elem) { - foldable.value('expanded').emitter.on('beforechange', () => { - foldable.set('completed', false); - if (isEmpty(foldable.get('expandedHeight'))) { - foldable.set('expandedHeight', computeExpandedFolderHeight(foldable, elem)); - } - foldable.set('shouldFixHeight', true); - forceReflow(elem); - }); - foldable.emitter.on('change', () => { - applyHeight(foldable, elem); - }); - applyHeight(foldable, elem); - elem.addEventListener('transitionend', (ev) => { - if (ev.propertyName !== 'height') { - return; - } - foldable.cleanUpTransition(); - }); - } - - class RackLikeApi extends BladeApi { - constructor(controller, rackApi) { - super(controller); - this.rackApi_ = rackApi; - } - } - - function addButtonAsBlade(api, params) { - return api.addBlade(Object.assign(Object.assign({}, params), { view: 'button' })); - } - function addFolderAsBlade(api, params) { - return api.addBlade(Object.assign(Object.assign({}, params), { view: 'folder' })); - } - function addSeparatorAsBlade(api, opt_params) { - const params = opt_params !== null && opt_params !== void 0 ? opt_params : {}; - return api.addBlade(Object.assign(Object.assign({}, params), { view: 'separator' })); - } - function addTabAsBlade(api, params) { - return api.addBlade(Object.assign(Object.assign({}, params), { view: 'tab' })); - } - - class NestedOrderedSet { - constructor(extract) { - this.emitter = new Emitter(); - this.items_ = []; - this.cache_ = new Set(); - this.onSubListAdd_ = this.onSubListAdd_.bind(this); - this.onSubListRemove_ = this.onSubListRemove_.bind(this); - this.extract_ = extract; - } - get items() { - return this.items_; - } - allItems() { - return Array.from(this.cache_); - } - find(callback) { - for (const item of this.allItems()) { - if (callback(item)) { - return item; - } - } - return null; - } - includes(item) { - return this.cache_.has(item); - } - add(item, opt_index) { - if (this.includes(item)) { - throw TpError.shouldNeverHappen(); - } - const index = opt_index !== undefined ? opt_index : this.items_.length; - this.items_.splice(index, 0, item); - this.cache_.add(item); - const subList = this.extract_(item); - if (subList) { - subList.emitter.on('add', this.onSubListAdd_); - subList.emitter.on('remove', this.onSubListRemove_); - subList.allItems().forEach((item) => { - this.cache_.add(item); - }); - } - this.emitter.emit('add', { - index: index, - item: item, - root: this, - target: this, - }); - } - remove(item) { - const index = this.items_.indexOf(item); - if (index < 0) { - return; - } - this.items_.splice(index, 1); - this.cache_.delete(item); - const subList = this.extract_(item); - if (subList) { - subList.emitter.off('add', this.onSubListAdd_); - subList.emitter.off('remove', this.onSubListRemove_); - } - this.emitter.emit('remove', { - index: index, - item: item, - root: this, - target: this, - }); - } - onSubListAdd_(ev) { - this.cache_.add(ev.item); - this.emitter.emit('add', { - index: ev.index, - item: ev.item, - root: this, - target: ev.target, - }); - } - onSubListRemove_(ev) { - this.cache_.delete(ev.item); - this.emitter.emit('remove', { - index: ev.index, - item: ev.item, - root: this, - target: ev.target, - }); - } - } - - class InputBindingApi extends BladeApi { - constructor(controller) { - super(controller); - this.onBindingChange_ = this.onBindingChange_.bind(this); - this.emitter_ = new Emitter(); - this.controller_.binding.emitter.on('change', this.onBindingChange_); - } - get label() { - return this.controller_.props.get('label'); - } - set label(label) { - this.controller_.props.set('label', label); - } - on(eventName, handler) { - const bh = handler.bind(this); - this.emitter_.on(eventName, (ev) => { - bh(ev.event); - }); - return this; - } - refresh() { - this.controller_.binding.read(); - } - onBindingChange_(ev) { - const value = ev.sender.target.read(); - this.emitter_.emit('change', { - event: new TpChangeEvent(this, forceCast(value), this.controller_.binding.target.presetKey, ev.options.last), - }); - } - } - - class InputBindingController extends LabelController { - constructor(doc, config) { - super(doc, config); - this.binding = config.binding; - } - } - - class MonitorBindingApi extends BladeApi { - constructor(controller) { - super(controller); - this.onBindingUpdate_ = this.onBindingUpdate_.bind(this); - this.emitter_ = new Emitter(); - this.controller_.binding.emitter.on('update', this.onBindingUpdate_); - } - get label() { - return this.controller_.props.get('label'); - } - set label(label) { - this.controller_.props.set('label', label); - } - on(eventName, handler) { - const bh = handler.bind(this); - this.emitter_.on(eventName, (ev) => { - bh(ev.event); - }); - return this; - } - refresh() { - this.controller_.binding.read(); - } - onBindingUpdate_(ev) { - const value = ev.sender.target.read(); - this.emitter_.emit('update', { - event: new TpUpdateEvent(this, forceCast(value), this.controller_.binding.target.presetKey), - }); - } - } - - class MonitorBindingController extends LabelController { - constructor(doc, config) { - super(doc, config); - this.binding = config.binding; - this.viewProps.bindDisabled(this.binding.ticker); - this.viewProps.handleDispose(() => { - this.binding.dispose(); - }); - } - } - - function findSubBladeApiSet(api) { - if (api instanceof RackApi) { - return api['apiSet_']; - } - if (api instanceof RackLikeApi) { - return api['rackApi_']['apiSet_']; - } - return null; - } - function getApiByController(apiSet, controller) { - const api = apiSet.find((api) => api.controller_ === controller); - if (!api) { - throw TpError.shouldNeverHappen(); - } - return api; - } - function createBindingTarget(obj, key, opt_id) { - if (!BindingTarget.isBindable(obj)) { - throw TpError.notBindable(); - } - return new BindingTarget(obj, key, opt_id); - } - class RackApi extends BladeApi { - constructor(controller, pool) { - super(controller); - this.onRackAdd_ = this.onRackAdd_.bind(this); - this.onRackRemove_ = this.onRackRemove_.bind(this); - this.onRackInputChange_ = this.onRackInputChange_.bind(this); - this.onRackMonitorUpdate_ = this.onRackMonitorUpdate_.bind(this); - this.emitter_ = new Emitter(); - this.apiSet_ = new NestedOrderedSet(findSubBladeApiSet); - this.pool_ = pool; - const rack = this.controller_.rack; - rack.emitter.on('add', this.onRackAdd_); - rack.emitter.on('remove', this.onRackRemove_); - rack.emitter.on('inputchange', this.onRackInputChange_); - rack.emitter.on('monitorupdate', this.onRackMonitorUpdate_); - rack.children.forEach((bc) => { - this.setUpApi_(bc); - }); - } - get children() { - return this.controller_.rack.children.map((bc) => getApiByController(this.apiSet_, bc)); - } - addInput(object, key, opt_params) { - const params = opt_params !== null && opt_params !== void 0 ? opt_params : {}; - const doc = this.controller_.view.element.ownerDocument; - const bc = this.pool_.createInput(doc, createBindingTarget(object, key, params.presetKey), params); - const api = new InputBindingApi(bc); - return this.add(api, params.index); - } - addMonitor(object, key, opt_params) { - const params = opt_params !== null && opt_params !== void 0 ? opt_params : {}; - const doc = this.controller_.view.element.ownerDocument; - const bc = this.pool_.createMonitor(doc, createBindingTarget(object, key), params); - const api = new MonitorBindingApi(bc); - return forceCast(this.add(api, params.index)); - } - addFolder(params) { - return addFolderAsBlade(this, params); - } - addButton(params) { - return addButtonAsBlade(this, params); - } - addSeparator(opt_params) { - return addSeparatorAsBlade(this, opt_params); - } - addTab(params) { - return addTabAsBlade(this, params); - } - add(api, opt_index) { - this.controller_.rack.add(api.controller_, opt_index); - const gapi = this.apiSet_.find((a) => a.controller_ === api.controller_); - if (gapi) { - this.apiSet_.remove(gapi); - } - this.apiSet_.add(api); - return api; - } - remove(api) { - this.controller_.rack.remove(api.controller_); - } - addBlade(params) { - const doc = this.controller_.view.element.ownerDocument; - const bc = this.pool_.createBlade(doc, params); - const api = this.pool_.createBladeApi(bc); - return this.add(api, params.index); - } - on(eventName, handler) { - const bh = handler.bind(this); - this.emitter_.on(eventName, (ev) => { - bh(ev.event); - }); - return this; - } - setUpApi_(bc) { - const api = this.apiSet_.find((api) => api.controller_ === bc); - if (!api) { - this.apiSet_.add(this.pool_.createBladeApi(bc)); - } - } - onRackAdd_(ev) { - this.setUpApi_(ev.bladeController); - } - onRackRemove_(ev) { - if (ev.isRoot) { - const api = getApiByController(this.apiSet_, ev.bladeController); - this.apiSet_.remove(api); - } - } - onRackInputChange_(ev) { - const bc = ev.bladeController; - if (bc instanceof InputBindingController) { - const api = getApiByController(this.apiSet_, bc); - const binding = bc.binding; - this.emitter_.emit('change', { - event: new TpChangeEvent(api, forceCast(binding.target.read()), binding.target.presetKey, ev.options.last), - }); - } - else if (bc instanceof ValueBladeController) { - const api = getApiByController(this.apiSet_, bc); - this.emitter_.emit('change', { - event: new TpChangeEvent(api, bc.value.rawValue, undefined, ev.options.last), - }); - } - } - onRackMonitorUpdate_(ev) { - if (!(ev.bladeController instanceof MonitorBindingController)) { - throw TpError.shouldNeverHappen(); - } - const api = getApiByController(this.apiSet_, ev.bladeController); - const binding = ev.bladeController.binding; - this.emitter_.emit('update', { - event: new TpUpdateEvent(api, forceCast(binding.target.read()), binding.target.presetKey), - }); - } - } - - class FolderApi extends RackLikeApi { - constructor(controller, pool) { - super(controller, new RackApi(controller.rackController, pool)); - this.emitter_ = new Emitter(); - this.controller_.foldable - .value('expanded') - .emitter.on('change', (ev) => { - this.emitter_.emit('fold', { - event: new TpFoldEvent(this, ev.sender.rawValue), - }); - }); - this.rackApi_.on('change', (ev) => { - this.emitter_.emit('change', { - event: ev, - }); - }); - this.rackApi_.on('update', (ev) => { - this.emitter_.emit('update', { - event: ev, - }); - }); - } - get expanded() { - return this.controller_.foldable.get('expanded'); - } - set expanded(expanded) { - this.controller_.foldable.set('expanded', expanded); - } - get title() { - return this.controller_.props.get('title'); - } - set title(title) { - this.controller_.props.set('title', title); - } - get children() { - return this.rackApi_.children; - } - addInput(object, key, opt_params) { - return this.rackApi_.addInput(object, key, opt_params); - } - addMonitor(object, key, opt_params) { - return this.rackApi_.addMonitor(object, key, opt_params); - } - addFolder(params) { - return this.rackApi_.addFolder(params); - } - addButton(params) { - return this.rackApi_.addButton(params); - } - addSeparator(opt_params) { - return this.rackApi_.addSeparator(opt_params); - } - addTab(params) { - return this.rackApi_.addTab(params); - } - add(api, opt_index) { - return this.rackApi_.add(api, opt_index); - } - remove(api) { - this.rackApi_.remove(api); - } - addBlade(params) { - return this.rackApi_.addBlade(params); - } - on(eventName, handler) { - const bh = handler.bind(this); - this.emitter_.on(eventName, (ev) => { - bh(ev.event); - }); - return this; - } - } - - class RackLikeController extends BladeController { - constructor(config) { - super({ - blade: config.blade, - view: config.view, - viewProps: config.rackController.viewProps, - }); - this.rackController = config.rackController; - } - } - - class PlainView { - constructor(doc, config) { - const className = ClassName(config.viewName); - this.element = doc.createElement('div'); - this.element.classList.add(className()); - config.viewProps.bindClassModifiers(this.element); - } - } - - function findInputBindingController(bcs, b) { - for (let i = 0; i < bcs.length; i++) { - const bc = bcs[i]; - if (bc instanceof InputBindingController && bc.binding === b) { - return bc; - } - } - return null; - } - function findMonitorBindingController(bcs, b) { - for (let i = 0; i < bcs.length; i++) { - const bc = bcs[i]; - if (bc instanceof MonitorBindingController && bc.binding === b) { - return bc; - } - } - return null; - } - function findValueBladeController(bcs, v) { - for (let i = 0; i < bcs.length; i++) { - const bc = bcs[i]; - if (bc instanceof ValueBladeController && bc.value === v) { - return bc; - } - } - return null; - } - function findSubRack(bc) { - if (bc instanceof RackController) { - return bc.rack; - } - if (bc instanceof RackLikeController) { - return bc.rackController.rack; - } - return null; - } - function findSubBladeControllerSet(bc) { - const rack = findSubRack(bc); - return rack ? rack['bcSet_'] : null; - } - class BladeRack { - constructor(blade) { - var _a; - this.onBladePositionsChange_ = this.onBladePositionsChange_.bind(this); - this.onSetAdd_ = this.onSetAdd_.bind(this); - this.onSetRemove_ = this.onSetRemove_.bind(this); - this.onChildDispose_ = this.onChildDispose_.bind(this); - this.onChildPositionsChange_ = this.onChildPositionsChange_.bind(this); - this.onChildInputChange_ = this.onChildInputChange_.bind(this); - this.onChildMonitorUpdate_ = this.onChildMonitorUpdate_.bind(this); - this.onChildValueChange_ = this.onChildValueChange_.bind(this); - this.onChildViewPropsChange_ = this.onChildViewPropsChange_.bind(this); - this.onDescendantLayout_ = this.onDescendantLayout_.bind(this); - this.onDescendantInputChange_ = this.onDescendantInputChange_.bind(this); - this.onDescendantMonitorUpdate_ = - this.onDescendantMonitorUpdate_.bind(this); - this.emitter = new Emitter(); - this.blade_ = blade !== null && blade !== void 0 ? blade : null; - (_a = this.blade_) === null || _a === void 0 ? void 0 : _a.value('positions').emitter.on('change', this.onBladePositionsChange_); - this.bcSet_ = new NestedOrderedSet(findSubBladeControllerSet); - this.bcSet_.emitter.on('add', this.onSetAdd_); - this.bcSet_.emitter.on('remove', this.onSetRemove_); - } - get children() { - return this.bcSet_.items; - } - add(bc, opt_index) { - if (bc.parent) { - bc.parent.remove(bc); - } - bc['parent_'] = this; - this.bcSet_.add(bc, opt_index); - } - remove(bc) { - bc['parent_'] = null; - this.bcSet_.remove(bc); - } - find(controllerClass) { - return forceCast(this.bcSet_.allItems().filter((bc) => { - return bc instanceof controllerClass; - })); - } - onSetAdd_(ev) { - this.updatePositions_(); - const isRoot = ev.target === ev.root; - this.emitter.emit('add', { - bladeController: ev.item, - index: ev.index, - isRoot: isRoot, - sender: this, - }); - if (!isRoot) { - return; - } - const bc = ev.item; - bc.viewProps.emitter.on('change', this.onChildViewPropsChange_); - bc.blade - .value('positions') - .emitter.on('change', this.onChildPositionsChange_); - bc.viewProps.handleDispose(this.onChildDispose_); - if (bc instanceof InputBindingController) { - bc.binding.emitter.on('change', this.onChildInputChange_); - } - else if (bc instanceof MonitorBindingController) { - bc.binding.emitter.on('update', this.onChildMonitorUpdate_); - } - else if (bc instanceof ValueBladeController) { - bc.value.emitter.on('change', this.onChildValueChange_); - } - else { - const rack = findSubRack(bc); - if (rack) { - const emitter = rack.emitter; - emitter.on('layout', this.onDescendantLayout_); - emitter.on('inputchange', this.onDescendantInputChange_); - emitter.on('monitorupdate', this.onDescendantMonitorUpdate_); - } - } - } - onSetRemove_(ev) { - this.updatePositions_(); - const isRoot = ev.target === ev.root; - this.emitter.emit('remove', { - bladeController: ev.item, - isRoot: isRoot, - sender: this, - }); - if (!isRoot) { - return; - } - const bc = ev.item; - if (bc instanceof InputBindingController) { - bc.binding.emitter.off('change', this.onChildInputChange_); - } - else if (bc instanceof MonitorBindingController) { - bc.binding.emitter.off('update', this.onChildMonitorUpdate_); - } - else if (bc instanceof ValueBladeController) { - bc.value.emitter.off('change', this.onChildValueChange_); - } - else { - const rack = findSubRack(bc); - if (rack) { - const emitter = rack.emitter; - emitter.off('layout', this.onDescendantLayout_); - emitter.off('inputchange', this.onDescendantInputChange_); - emitter.off('monitorupdate', this.onDescendantMonitorUpdate_); - } - } - } - updatePositions_() { - const visibleItems = this.bcSet_.items.filter((bc) => !bc.viewProps.get('hidden')); - const firstVisibleItem = visibleItems[0]; - const lastVisibleItem = visibleItems[visibleItems.length - 1]; - this.bcSet_.items.forEach((bc) => { - const ps = []; - if (bc === firstVisibleItem) { - ps.push('first'); - if (!this.blade_ || - this.blade_.get('positions').includes('veryfirst')) { - ps.push('veryfirst'); - } - } - if (bc === lastVisibleItem) { - ps.push('last'); - if (!this.blade_ || this.blade_.get('positions').includes('verylast')) { - ps.push('verylast'); - } - } - bc.blade.set('positions', ps); - }); - } - onChildPositionsChange_() { - this.updatePositions_(); - this.emitter.emit('layout', { - sender: this, - }); - } - onChildViewPropsChange_(_ev) { - this.updatePositions_(); - this.emitter.emit('layout', { - sender: this, - }); - } - onChildDispose_() { - const disposedUcs = this.bcSet_.items.filter((bc) => { - return bc.viewProps.get('disposed'); - }); - disposedUcs.forEach((bc) => { - this.bcSet_.remove(bc); - }); - } - onChildInputChange_(ev) { - const bc = findInputBindingController(this.find(InputBindingController), ev.sender); - if (!bc) { - throw TpError.shouldNeverHappen(); - } - this.emitter.emit('inputchange', { - bladeController: bc, - options: ev.options, - sender: this, - }); - } - onChildMonitorUpdate_(ev) { - const bc = findMonitorBindingController(this.find(MonitorBindingController), ev.sender); - if (!bc) { - throw TpError.shouldNeverHappen(); - } - this.emitter.emit('monitorupdate', { - bladeController: bc, - sender: this, - }); - } - onChildValueChange_(ev) { - const bc = findValueBladeController(this.find(ValueBladeController), ev.sender); - if (!bc) { - throw TpError.shouldNeverHappen(); - } - this.emitter.emit('inputchange', { - bladeController: bc, - options: ev.options, - sender: this, - }); - } - onDescendantLayout_(_) { - this.updatePositions_(); - this.emitter.emit('layout', { - sender: this, - }); - } - onDescendantInputChange_(ev) { - this.emitter.emit('inputchange', { - bladeController: ev.bladeController, - options: ev.options, - sender: this, - }); - } - onDescendantMonitorUpdate_(ev) { - this.emitter.emit('monitorupdate', { - bladeController: ev.bladeController, - sender: this, - }); - } - onBladePositionsChange_() { - this.updatePositions_(); - } - } - - class RackController extends BladeController { - constructor(doc, config) { - super(Object.assign(Object.assign({}, config), { view: new PlainView(doc, { - viewName: 'brk', - viewProps: config.viewProps, - }) })); - this.onRackAdd_ = this.onRackAdd_.bind(this); - this.onRackRemove_ = this.onRackRemove_.bind(this); - const rack = new BladeRack(config.root ? undefined : config.blade); - rack.emitter.on('add', this.onRackAdd_); - rack.emitter.on('remove', this.onRackRemove_); - this.rack = rack; - this.viewProps.handleDispose(() => { - for (let i = this.rack.children.length - 1; i >= 0; i--) { - const bc = this.rack.children[i]; - bc.viewProps.set('disposed', true); - } - }); - } - onRackAdd_(ev) { - if (!ev.isRoot) { - return; - } - insertElementAt(this.view.element, ev.bladeController.view.element, ev.index); - } - onRackRemove_(ev) { - if (!ev.isRoot) { - return; - } - removeElement(ev.bladeController.view.element); - } - } - - const bladeContainerClassName = ClassName('cnt'); - - class FolderView { - constructor(doc, config) { - var _a; - this.className_ = ClassName((_a = config.viewName) !== null && _a !== void 0 ? _a : 'fld'); - this.element = doc.createElement('div'); - this.element.classList.add(this.className_(), bladeContainerClassName()); - config.viewProps.bindClassModifiers(this.element); - this.foldable_ = config.foldable; - this.foldable_.bindExpandedClass(this.element, this.className_(undefined, 'expanded')); - bindValueMap(this.foldable_, 'completed', valueToClassName(this.element, this.className_(undefined, 'cpl'))); - const buttonElem = doc.createElement('button'); - buttonElem.classList.add(this.className_('b')); - bindValueMap(config.props, 'title', (title) => { - if (isEmpty(title)) { - this.element.classList.add(this.className_(undefined, 'not')); - } - else { - this.element.classList.remove(this.className_(undefined, 'not')); - } - }); - config.viewProps.bindDisabled(buttonElem); - this.element.appendChild(buttonElem); - this.buttonElement = buttonElem; - const titleElem = doc.createElement('div'); - titleElem.classList.add(this.className_('t')); - bindValueToTextContent(config.props.value('title'), titleElem); - this.buttonElement.appendChild(titleElem); - this.titleElement = titleElem; - const markElem = doc.createElement('div'); - markElem.classList.add(this.className_('m')); - this.buttonElement.appendChild(markElem); - const containerElem = config.containerElement; - containerElem.classList.add(this.className_('c')); - this.element.appendChild(containerElem); - this.containerElement = containerElem; - } - } - - class FolderController extends RackLikeController { - constructor(doc, config) { - var _a; - const foldable = Foldable.create((_a = config.expanded) !== null && _a !== void 0 ? _a : true); - const rc = new RackController(doc, { - blade: config.blade, - root: config.root, - viewProps: config.viewProps, - }); - super(Object.assign(Object.assign({}, config), { rackController: rc, view: new FolderView(doc, { - containerElement: rc.view.element, - foldable: foldable, - props: config.props, - viewName: config.root ? 'rot' : undefined, - viewProps: config.viewProps, - }) })); - this.onTitleClick_ = this.onTitleClick_.bind(this); - this.props = config.props; - this.foldable = foldable; - bindFoldable(this.foldable, this.view.containerElement); - this.rackController.rack.emitter.on('add', () => { - this.foldable.cleanUpTransition(); - }); - this.rackController.rack.emitter.on('remove', () => { - this.foldable.cleanUpTransition(); - }); - this.view.buttonElement.addEventListener('click', this.onTitleClick_); - } - get document() { - return this.view.element.ownerDocument; - } - onTitleClick_() { - this.foldable.set('expanded', !this.foldable.get('expanded')); - } - } - - const FolderBladePlugin = { - id: 'folder', - type: 'blade', - accept(params) { - const p = ParamsParsers; - const result = parseParams(params, { - title: p.required.string, - view: p.required.constant('folder'), - expanded: p.optional.boolean, - }); - return result ? { params: result } : null; - }, - controller(args) { - return new FolderController(args.document, { - blade: args.blade, - expanded: args.params.expanded, - props: ValueMap.fromObject({ - title: args.params.title, - }), - viewProps: args.viewProps, - }); - }, - api(args) { - if (!(args.controller instanceof FolderController)) { - return null; - } - return new FolderApi(args.controller, args.pool); - }, - }; - - class LabeledValueController extends ValueBladeController { - constructor(doc, config) { - const viewProps = config.valueController.viewProps; - super(Object.assign(Object.assign({}, config), { value: config.valueController.value, view: new LabelView(doc, { - props: config.props, - viewProps: viewProps, - }), viewProps: viewProps })); - this.props = config.props; - this.valueController = config.valueController; - this.view.valueElement.appendChild(this.valueController.view.element); - } - } - - class SeparatorApi extends BladeApi { - } - - const className$n = ClassName('spr'); - class SeparatorView { - constructor(doc, config) { - this.element = doc.createElement('div'); - this.element.classList.add(className$n()); - config.viewProps.bindClassModifiers(this.element); - const hrElem = doc.createElement('hr'); - hrElem.classList.add(className$n('r')); - this.element.appendChild(hrElem); - } - } - - class SeparatorController extends BladeController { - constructor(doc, config) { - super(Object.assign(Object.assign({}, config), { view: new SeparatorView(doc, { - viewProps: config.viewProps, - }) })); - } - } - - const SeparatorBladePlugin = { - id: 'separator', - type: 'blade', - accept(params) { - const p = ParamsParsers; - const result = parseParams(params, { - view: p.required.constant('separator'), - }); - return result ? { params: result } : null; - }, - controller(args) { - return new SeparatorController(args.document, { - blade: args.blade, - viewProps: args.viewProps, - }); - }, - api(args) { - if (!(args.controller instanceof SeparatorController)) { - return null; - } - return new SeparatorApi(args.controller); - }, - }; - - const className$m = ClassName(''); - function valueToModifier(elem, modifier) { - return valueToClassName(elem, className$m(undefined, modifier)); - } - class ViewProps extends ValueMap { - constructor(valueMap) { - super(valueMap); - } - static create(opt_initialValue) { - var _a, _b; - const initialValue = opt_initialValue !== null && opt_initialValue !== void 0 ? opt_initialValue : {}; - const coreObj = { - disabled: (_a = initialValue.disabled) !== null && _a !== void 0 ? _a : false, - disposed: false, - hidden: (_b = initialValue.hidden) !== null && _b !== void 0 ? _b : false, - }; - const core = ValueMap.createCore(coreObj); - return new ViewProps(core); - } - bindClassModifiers(elem) { - bindValueMap(this, 'disabled', valueToModifier(elem, 'disabled')); - bindValueMap(this, 'hidden', valueToModifier(elem, 'hidden')); - } - bindDisabled(target) { - bindValueMap(this, 'disabled', (disabled) => { - target.disabled = disabled; - }); - } - bindTabIndex(elem) { - bindValueMap(this, 'disabled', (disabled) => { - elem.tabIndex = disabled ? -1 : 0; - }); - } - handleDispose(callback) { - this.value('disposed').emitter.on('change', (disposed) => { - if (disposed) { - callback(); - } - }); - } - } - - const className$l = ClassName('tbi'); - class TabItemView { - constructor(doc, config) { - this.element = doc.createElement('div'); - this.element.classList.add(className$l()); - config.viewProps.bindClassModifiers(this.element); - bindValueMap(config.props, 'selected', (selected) => { - if (selected) { - this.element.classList.add(className$l(undefined, 'sel')); - } - else { - this.element.classList.remove(className$l(undefined, 'sel')); - } - }); - const buttonElem = doc.createElement('button'); - buttonElem.classList.add(className$l('b')); - config.viewProps.bindDisabled(buttonElem); - this.element.appendChild(buttonElem); - this.buttonElement = buttonElem; - const titleElem = doc.createElement('div'); - titleElem.classList.add(className$l('t')); - bindValueToTextContent(config.props.value('title'), titleElem); - this.buttonElement.appendChild(titleElem); - this.titleElement = titleElem; - } - } - - class TabItemController { - constructor(doc, config) { - this.emitter = new Emitter(); - this.onClick_ = this.onClick_.bind(this); - this.props = config.props; - this.viewProps = config.viewProps; - this.view = new TabItemView(doc, { - props: config.props, - viewProps: config.viewProps, - }); - this.view.buttonElement.addEventListener('click', this.onClick_); - } - onClick_() { - this.emitter.emit('click', { - sender: this, - }); - } - } - - class TabPageController { - constructor(doc, config) { - this.onItemClick_ = this.onItemClick_.bind(this); - this.ic_ = new TabItemController(doc, { - props: config.itemProps, - viewProps: ViewProps.create(), - }); - this.ic_.emitter.on('click', this.onItemClick_); - this.cc_ = new RackController(doc, { - blade: createBlade(), - viewProps: ViewProps.create(), - }); - this.props = config.props; - bindValueMap(this.props, 'selected', (selected) => { - this.itemController.props.set('selected', selected); - this.contentController.viewProps.set('hidden', !selected); - }); - } - get itemController() { - return this.ic_; - } - get contentController() { - return this.cc_; - } - onItemClick_() { - this.props.set('selected', true); - } - } - - class TabPageApi { - constructor(controller, contentRackApi) { - this.controller_ = controller; - this.rackApi_ = contentRackApi; - } - get title() { - var _a; - return (_a = this.controller_.itemController.props.get('title')) !== null && _a !== void 0 ? _a : ''; - } - set title(title) { - this.controller_.itemController.props.set('title', title); - } - get selected() { - return this.controller_.props.get('selected'); - } - set selected(selected) { - this.controller_.props.set('selected', selected); - } - get children() { - return this.rackApi_.children; - } - addButton(params) { - return this.rackApi_.addButton(params); - } - addFolder(params) { - return this.rackApi_.addFolder(params); - } - addSeparator(opt_params) { - return this.rackApi_.addSeparator(opt_params); - } - addTab(params) { - return this.rackApi_.addTab(params); - } - add(api, opt_index) { - this.rackApi_.add(api, opt_index); - } - remove(api) { - this.rackApi_.remove(api); - } - addInput(object, key, opt_params) { - return this.rackApi_.addInput(object, key, opt_params); - } - addMonitor(object, key, opt_params) { - return this.rackApi_.addMonitor(object, key, opt_params); - } - addBlade(params) { - return this.rackApi_.addBlade(params); - } - } - - class TabApi extends RackLikeApi { - constructor(controller, pool) { - super(controller, new RackApi(controller.rackController, pool)); - this.onPageAdd_ = this.onPageAdd_.bind(this); - this.onPageRemove_ = this.onPageRemove_.bind(this); - this.onSelect_ = this.onSelect_.bind(this); - this.emitter_ = new Emitter(); - this.pageApiMap_ = new Map(); - this.rackApi_.on('change', (ev) => { - this.emitter_.emit('change', { - event: ev, - }); - }); - this.rackApi_.on('update', (ev) => { - this.emitter_.emit('update', { - event: ev, - }); - }); - this.controller_.tab.selectedIndex.emitter.on('change', this.onSelect_); - this.controller_.pageSet.emitter.on('add', this.onPageAdd_); - this.controller_.pageSet.emitter.on('remove', this.onPageRemove_); - this.controller_.pageSet.items.forEach((pc) => { - this.setUpPageApi_(pc); - }); - } - get pages() { - return this.controller_.pageSet.items.map((pc) => { - const api = this.pageApiMap_.get(pc); - if (!api) { - throw TpError.shouldNeverHappen(); - } - return api; - }); - } - addPage(params) { - const doc = this.controller_.view.element.ownerDocument; - const pc = new TabPageController(doc, { - itemProps: ValueMap.fromObject({ - selected: false, - title: params.title, - }), - props: ValueMap.fromObject({ - selected: false, - }), - }); - this.controller_.add(pc, params.index); - const api = this.pageApiMap_.get(pc); - if (!api) { - throw TpError.shouldNeverHappen(); - } - return api; - } - removePage(index) { - this.controller_.remove(index); - } - on(eventName, handler) { - const bh = handler.bind(this); - this.emitter_.on(eventName, (ev) => { - bh(ev.event); - }); - return this; - } - setUpPageApi_(pc) { - const rackApi = this.rackApi_['apiSet_'].find((api) => api.controller_ === pc.contentController); - if (!rackApi) { - throw TpError.shouldNeverHappen(); - } - const api = new TabPageApi(pc, rackApi); - this.pageApiMap_.set(pc, api); - } - onPageAdd_(ev) { - this.setUpPageApi_(ev.item); - } - onPageRemove_(ev) { - const api = this.pageApiMap_.get(ev.item); - if (!api) { - throw TpError.shouldNeverHappen(); - } - this.pageApiMap_.delete(ev.item); - } - onSelect_(ev) { - this.emitter_.emit('select', { - event: new TpTabSelectEvent(this, ev.rawValue), - }); - } - } - - const INDEX_NOT_SELECTED = -1; - class Tab { - constructor() { - this.onItemSelectedChange_ = this.onItemSelectedChange_.bind(this); - this.empty = createValue(true); - this.selectedIndex = createValue(INDEX_NOT_SELECTED); - this.items_ = []; - } - add(item, opt_index) { - const index = opt_index !== null && opt_index !== void 0 ? opt_index : this.items_.length; - this.items_.splice(index, 0, item); - item.emitter.on('change', this.onItemSelectedChange_); - this.keepSelection_(); - } - remove(item) { - const index = this.items_.indexOf(item); - if (index < 0) { - return; - } - this.items_.splice(index, 1); - item.emitter.off('change', this.onItemSelectedChange_); - this.keepSelection_(); - } - keepSelection_() { - if (this.items_.length === 0) { - this.selectedIndex.rawValue = INDEX_NOT_SELECTED; - this.empty.rawValue = true; - return; - } - const firstSelIndex = this.items_.findIndex((s) => s.rawValue); - if (firstSelIndex < 0) { - this.items_.forEach((s, i) => { - s.rawValue = i === 0; - }); - this.selectedIndex.rawValue = 0; - } - else { - this.items_.forEach((s, i) => { - s.rawValue = i === firstSelIndex; - }); - this.selectedIndex.rawValue = firstSelIndex; - } - this.empty.rawValue = false; - } - onItemSelectedChange_(ev) { - if (ev.rawValue) { - const index = this.items_.findIndex((s) => s === ev.sender); - this.items_.forEach((s, i) => { - s.rawValue = i === index; - }); - this.selectedIndex.rawValue = index; - } - else { - this.keepSelection_(); - } - } - } - - const className$k = ClassName('tab'); - class TabView { - constructor(doc, config) { - this.element = doc.createElement('div'); - this.element.classList.add(className$k(), bladeContainerClassName()); - config.viewProps.bindClassModifiers(this.element); - bindValue(config.empty, valueToClassName(this.element, className$k(undefined, 'nop'))); - const itemsElem = doc.createElement('div'); - itemsElem.classList.add(className$k('i')); - this.element.appendChild(itemsElem); - this.itemsElement = itemsElem; - const contentsElem = config.contentsElement; - contentsElem.classList.add(className$k('c')); - this.element.appendChild(contentsElem); - this.contentsElement = contentsElem; - } - } - - class TabController extends RackLikeController { - constructor(doc, config) { - const cr = new RackController(doc, { - blade: config.blade, - viewProps: config.viewProps, - }); - const tab = new Tab(); - super({ - blade: config.blade, - rackController: cr, - view: new TabView(doc, { - contentsElement: cr.view.element, - empty: tab.empty, - viewProps: config.viewProps, - }), - }); - this.onPageAdd_ = this.onPageAdd_.bind(this); - this.onPageRemove_ = this.onPageRemove_.bind(this); - this.pageSet_ = new NestedOrderedSet(() => null); - this.pageSet_.emitter.on('add', this.onPageAdd_); - this.pageSet_.emitter.on('remove', this.onPageRemove_); - this.tab = tab; - } - get pageSet() { - return this.pageSet_; - } - add(pc, opt_index) { - this.pageSet_.add(pc, opt_index); - } - remove(index) { - this.pageSet_.remove(this.pageSet_.items[index]); - } - onPageAdd_(ev) { - const pc = ev.item; - insertElementAt(this.view.itemsElement, pc.itemController.view.element, ev.index); - this.rackController.rack.add(pc.contentController, ev.index); - this.tab.add(pc.props.value('selected')); - } - onPageRemove_(ev) { - const pc = ev.item; - removeElement(pc.itemController.view.element); - this.rackController.rack.remove(pc.contentController); - this.tab.remove(pc.props.value('selected')); - } - } - - const TabBladePlugin = { - id: 'tab', - type: 'blade', - accept(params) { - const p = ParamsParsers; - const result = parseParams(params, { - pages: p.required.array(p.required.object({ title: p.required.string })), - view: p.required.constant('tab'), - }); - if (!result || result.pages.length === 0) { - return null; - } - return { params: result }; - }, - controller(args) { - const c = new TabController(args.document, { - blade: args.blade, - viewProps: args.viewProps, - }); - args.params.pages.forEach((p) => { - const pc = new TabPageController(args.document, { - itemProps: ValueMap.fromObject({ - selected: false, - title: p.title, - }), - props: ValueMap.fromObject({ - selected: false, - }), - }); - c.add(pc); - }); - return c; - }, - api(args) { - if (!(args.controller instanceof TabController)) { - return null; - } - return new TabApi(args.controller, args.pool); - }, - }; - - function createBladeController(plugin, args) { - const ac = plugin.accept(args.params); - if (!ac) { - return null; - } - const disabled = ParamsParsers.optional.boolean(args.params['disabled']).value; - const hidden = ParamsParsers.optional.boolean(args.params['hidden']).value; - return plugin.controller({ - blade: createBlade(), - document: args.document, - params: forceCast(Object.assign(Object.assign({}, ac.params), { disabled: disabled, hidden: hidden })), - viewProps: ViewProps.create({ - disabled: disabled, - hidden: hidden, - }), - }); - } - - class ManualTicker { - constructor() { - this.disabled = false; - this.emitter = new Emitter(); - } - dispose() { } - tick() { - if (this.disabled) { - return; - } - this.emitter.emit('tick', { - sender: this, - }); - } - } - - class IntervalTicker { - constructor(doc, interval) { - this.disabled_ = false; - this.timerId_ = null; - this.onTick_ = this.onTick_.bind(this); - this.doc_ = doc; - this.emitter = new Emitter(); - this.interval_ = interval; - this.setTimer_(); - } - get disabled() { - return this.disabled_; - } - set disabled(inactive) { - this.disabled_ = inactive; - if (this.disabled_) { - this.clearTimer_(); - } - else { - this.setTimer_(); - } - } - dispose() { - this.clearTimer_(); - } - clearTimer_() { - if (this.timerId_ === null) { - return; - } - const win = this.doc_.defaultView; - if (win) { - win.clearInterval(this.timerId_); - } - this.timerId_ = null; - } - setTimer_() { - this.clearTimer_(); - if (this.interval_ <= 0) { - return; - } - const win = this.doc_.defaultView; - if (win) { - this.timerId_ = win.setInterval(this.onTick_, this.interval_); - } - } - onTick_() { - if (this.disabled_) { - return; - } - this.emitter.emit('tick', { - sender: this, - }); - } - } - - class CompositeConstraint { - constructor(constraints) { - this.constraints = constraints; - } - constrain(value) { - return this.constraints.reduce((result, c) => { - return c.constrain(result); - }, value); - } - } - function findConstraint(c, constraintClass) { - if (c instanceof constraintClass) { - return c; - } - if (c instanceof CompositeConstraint) { - const result = c.constraints.reduce((tmpResult, sc) => { - if (tmpResult) { - return tmpResult; - } - return sc instanceof constraintClass ? sc : null; - }, null); - if (result) { - return result; - } - } - return null; - } - - class ListConstraint { - constructor(options) { - this.options = options; - } - constrain(value) { - const opts = this.options; - if (opts.length === 0) { - return value; - } - const matched = opts.filter((item) => { - return item.value === value; - }).length > 0; - return matched ? value : opts[0].value; - } - } - - class RangeConstraint { - constructor(config) { - this.maxValue = config.max; - this.minValue = config.min; - } - constrain(value) { - let result = value; - if (!isEmpty(this.minValue)) { - result = Math.max(result, this.minValue); - } - if (!isEmpty(this.maxValue)) { - result = Math.min(result, this.maxValue); - } - return result; - } - } - - class StepConstraint { - constructor(step, origin = 0) { - this.step = step; - this.origin = origin; - } - constrain(value) { - const o = this.origin % this.step; - const r = Math.round((value - o) / this.step); - return o + r * this.step; - } - } - - const className$j = ClassName('lst'); - class ListView { - constructor(doc, config) { - this.onValueChange_ = this.onValueChange_.bind(this); - this.props_ = config.props; - this.element = doc.createElement('div'); - this.element.classList.add(className$j()); - config.viewProps.bindClassModifiers(this.element); - const selectElem = doc.createElement('select'); - selectElem.classList.add(className$j('s')); - bindValueMap(this.props_, 'options', (opts) => { - removeChildElements(selectElem); - opts.forEach((item, index) => { - const optionElem = doc.createElement('option'); - optionElem.dataset.index = String(index); - optionElem.textContent = item.text; - optionElem.value = String(item.value); - selectElem.appendChild(optionElem); - }); - }); - config.viewProps.bindDisabled(selectElem); - this.element.appendChild(selectElem); - this.selectElement = selectElem; - const markElem = doc.createElement('div'); - markElem.classList.add(className$j('m')); - markElem.appendChild(createSvgIconElement(doc, 'dropdown')); - this.element.appendChild(markElem); - config.value.emitter.on('change', this.onValueChange_); - this.value_ = config.value; - this.update_(); - } - update_() { - this.selectElement.value = String(this.value_.rawValue); - } - onValueChange_() { - this.update_(); - } - } - - class ListController { - constructor(doc, config) { - this.onSelectChange_ = this.onSelectChange_.bind(this); - this.props = config.props; - this.value = config.value; - this.viewProps = config.viewProps; - this.view = new ListView(doc, { - props: this.props, - value: this.value, - viewProps: this.viewProps, - }); - this.view.selectElement.addEventListener('change', this.onSelectChange_); - } - onSelectChange_(e) { - const selectElem = forceCast(e.currentTarget); - const optElem = selectElem.selectedOptions.item(0); - if (!optElem) { - return; - } - const itemIndex = Number(optElem.dataset.index); - this.value.rawValue = this.props.get('options')[itemIndex].value; - } - } - - const className$i = ClassName('pop'); - class PopupView { - constructor(doc, config) { - this.element = doc.createElement('div'); - this.element.classList.add(className$i()); - config.viewProps.bindClassModifiers(this.element); - bindValue(config.shows, valueToClassName(this.element, className$i(undefined, 'v'))); - } - } - - class PopupController { - constructor(doc, config) { - this.shows = createValue(false); - this.viewProps = config.viewProps; - this.view = new PopupView(doc, { - shows: this.shows, - viewProps: this.viewProps, - }); - } - } - - const className$h = ClassName('txt'); - class TextView { - constructor(doc, config) { - this.onChange_ = this.onChange_.bind(this); - this.element = doc.createElement('div'); - this.element.classList.add(className$h()); - config.viewProps.bindClassModifiers(this.element); - this.props_ = config.props; - this.props_.emitter.on('change', this.onChange_); - const inputElem = doc.createElement('input'); - inputElem.classList.add(className$h('i')); - inputElem.type = 'text'; - config.viewProps.bindDisabled(inputElem); - this.element.appendChild(inputElem); - this.inputElement = inputElem; - config.value.emitter.on('change', this.onChange_); - this.value_ = config.value; - this.refresh(); - } - refresh() { - const formatter = this.props_.get('formatter'); - this.inputElement.value = formatter(this.value_.rawValue); - } - onChange_() { - this.refresh(); - } - } - - class TextController { - constructor(doc, config) { - this.onInputChange_ = this.onInputChange_.bind(this); - this.parser_ = config.parser; - this.props = config.props; - this.value = config.value; - this.viewProps = config.viewProps; - this.view = new TextView(doc, { - props: config.props, - value: this.value, - viewProps: this.viewProps, - }); - this.view.inputElement.addEventListener('change', this.onInputChange_); - } - onInputChange_(e) { - const inputElem = forceCast(e.currentTarget); - const value = inputElem.value; - const parsedValue = this.parser_(value); - if (!isEmpty(parsedValue)) { - this.value.rawValue = parsedValue; - } - this.view.refresh(); - } - } - - function boolToString(value) { - return String(value); - } - function boolFromUnknown(value) { - if (value === 'false') { - return false; - } - return !!value; - } - function BooleanFormatter(value) { - return boolToString(value); - } - - class NumberLiteralNode { - constructor(text) { - this.text = text; - } - evaluate() { - return Number(this.text); - } - toString() { - return this.text; - } - } - const BINARY_OPERATION_MAP = { - '**': (v1, v2) => Math.pow(v1, v2), - '*': (v1, v2) => v1 * v2, - '/': (v1, v2) => v1 / v2, - '%': (v1, v2) => v1 % v2, - '+': (v1, v2) => v1 + v2, - '-': (v1, v2) => v1 - v2, - '<<': (v1, v2) => v1 << v2, - '>>': (v1, v2) => v1 >> v2, - '>>>': (v1, v2) => v1 >>> v2, - '&': (v1, v2) => v1 & v2, - '^': (v1, v2) => v1 ^ v2, - '|': (v1, v2) => v1 | v2, - }; - class BinaryOperationNode { - constructor(operator, left, right) { - this.left = left; - this.operator = operator; - this.right = right; - } - evaluate() { - const op = BINARY_OPERATION_MAP[this.operator]; - if (!op) { - throw new Error(`unexpected binary operator: '${this.operator}`); - } - return op(this.left.evaluate(), this.right.evaluate()); - } - toString() { - return [ - 'b(', - this.left.toString(), - this.operator, - this.right.toString(), - ')', - ].join(' '); - } - } - const UNARY_OPERATION_MAP = { - '+': (v) => v, - '-': (v) => -v, - '~': (v) => ~v, - }; - class UnaryOperationNode { - constructor(operator, expr) { - this.operator = operator; - this.expression = expr; - } - evaluate() { - const op = UNARY_OPERATION_MAP[this.operator]; - if (!op) { - throw new Error(`unexpected unary operator: '${this.operator}`); - } - return op(this.expression.evaluate()); - } - toString() { - return ['u(', this.operator, this.expression.toString(), ')'].join(' '); - } - } - - function combineReader(parsers) { - return (text, cursor) => { - for (let i = 0; i < parsers.length; i++) { - const result = parsers[i](text, cursor); - if (result !== '') { - return result; - } - } - return ''; - }; - } - function readWhitespace(text, cursor) { - var _a; - const m = text.substr(cursor).match(/^\s+/); - return (_a = (m && m[0])) !== null && _a !== void 0 ? _a : ''; - } - function readNonZeroDigit(text, cursor) { - const ch = text.substr(cursor, 1); - return ch.match(/^[1-9]$/) ? ch : ''; - } - function readDecimalDigits(text, cursor) { - var _a; - const m = text.substr(cursor).match(/^[0-9]+/); - return (_a = (m && m[0])) !== null && _a !== void 0 ? _a : ''; - } - function readSignedInteger(text, cursor) { - const ds = readDecimalDigits(text, cursor); - if (ds !== '') { - return ds; - } - const sign = text.substr(cursor, 1); - cursor += 1; - if (sign !== '-' && sign !== '+') { - return ''; - } - const sds = readDecimalDigits(text, cursor); - if (sds === '') { - return ''; - } - return sign + sds; - } - function readExponentPart(text, cursor) { - const e = text.substr(cursor, 1); - cursor += 1; - if (e.toLowerCase() !== 'e') { - return ''; - } - const si = readSignedInteger(text, cursor); - if (si === '') { - return ''; - } - return e + si; - } - function readDecimalIntegerLiteral(text, cursor) { - const ch = text.substr(cursor, 1); - if (ch === '0') { - return ch; - } - const nzd = readNonZeroDigit(text, cursor); - cursor += nzd.length; - if (nzd === '') { - return ''; - } - return nzd + readDecimalDigits(text, cursor); - } - function readDecimalLiteral1(text, cursor) { - const dil = readDecimalIntegerLiteral(text, cursor); - cursor += dil.length; - if (dil === '') { - return ''; - } - const dot = text.substr(cursor, 1); - cursor += dot.length; - if (dot !== '.') { - return ''; - } - const dds = readDecimalDigits(text, cursor); - cursor += dds.length; - return dil + dot + dds + readExponentPart(text, cursor); - } - function readDecimalLiteral2(text, cursor) { - const dot = text.substr(cursor, 1); - cursor += dot.length; - if (dot !== '.') { - return ''; - } - const dds = readDecimalDigits(text, cursor); - cursor += dds.length; - if (dds === '') { - return ''; - } - return dot + dds + readExponentPart(text, cursor); - } - function readDecimalLiteral3(text, cursor) { - const dil = readDecimalIntegerLiteral(text, cursor); - cursor += dil.length; - if (dil === '') { - return ''; - } - return dil + readExponentPart(text, cursor); - } - const readDecimalLiteral = combineReader([ - readDecimalLiteral1, - readDecimalLiteral2, - readDecimalLiteral3, - ]); - function parseBinaryDigits(text, cursor) { - var _a; - const m = text.substr(cursor).match(/^[01]+/); - return (_a = (m && m[0])) !== null && _a !== void 0 ? _a : ''; - } - function readBinaryIntegerLiteral(text, cursor) { - const prefix = text.substr(cursor, 2); - cursor += prefix.length; - if (prefix.toLowerCase() !== '0b') { - return ''; - } - const bds = parseBinaryDigits(text, cursor); - if (bds === '') { - return ''; - } - return prefix + bds; - } - function readOctalDigits(text, cursor) { - var _a; - const m = text.substr(cursor).match(/^[0-7]+/); - return (_a = (m && m[0])) !== null && _a !== void 0 ? _a : ''; - } - function readOctalIntegerLiteral(text, cursor) { - const prefix = text.substr(cursor, 2); - cursor += prefix.length; - if (prefix.toLowerCase() !== '0o') { - return ''; - } - const ods = readOctalDigits(text, cursor); - if (ods === '') { - return ''; - } - return prefix + ods; - } - function readHexDigits(text, cursor) { - var _a; - const m = text.substr(cursor).match(/^[0-9a-f]+/i); - return (_a = (m && m[0])) !== null && _a !== void 0 ? _a : ''; - } - function readHexIntegerLiteral(text, cursor) { - const prefix = text.substr(cursor, 2); - cursor += prefix.length; - if (prefix.toLowerCase() !== '0x') { - return ''; - } - const hds = readHexDigits(text, cursor); - if (hds === '') { - return ''; - } - return prefix + hds; - } - const readNonDecimalIntegerLiteral = combineReader([ - readBinaryIntegerLiteral, - readOctalIntegerLiteral, - readHexIntegerLiteral, - ]); - const readNumericLiteral = combineReader([ - readNonDecimalIntegerLiteral, - readDecimalLiteral, - ]); - - function parseLiteral(text, cursor) { - const num = readNumericLiteral(text, cursor); - cursor += num.length; - if (num === '') { - return null; - } - return { - evaluable: new NumberLiteralNode(num), - cursor: cursor, - }; - } - function parseParenthesizedExpression(text, cursor) { - const op = text.substr(cursor, 1); - cursor += op.length; - if (op !== '(') { - return null; - } - const expr = parseExpression(text, cursor); - if (!expr) { - return null; - } - cursor = expr.cursor; - cursor += readWhitespace(text, cursor).length; - const cl = text.substr(cursor, 1); - cursor += cl.length; - if (cl !== ')') { - return null; - } - return { - evaluable: expr.evaluable, - cursor: cursor, - }; - } - function parsePrimaryExpression(text, cursor) { - var _a; - return ((_a = parseLiteral(text, cursor)) !== null && _a !== void 0 ? _a : parseParenthesizedExpression(text, cursor)); - } - function parseUnaryExpression(text, cursor) { - const expr = parsePrimaryExpression(text, cursor); - if (expr) { - return expr; - } - const op = text.substr(cursor, 1); - cursor += op.length; - if (op !== '+' && op !== '-' && op !== '~') { - return null; - } - const num = parseUnaryExpression(text, cursor); - if (!num) { - return null; - } - cursor = num.cursor; - return { - cursor: cursor, - evaluable: new UnaryOperationNode(op, num.evaluable), - }; - } - function readBinaryOperator(ops, text, cursor) { - cursor += readWhitespace(text, cursor).length; - const op = ops.filter((op) => text.startsWith(op, cursor))[0]; - if (!op) { - return null; - } - cursor += op.length; - cursor += readWhitespace(text, cursor).length; - return { - cursor: cursor, - operator: op, - }; - } - function createBinaryOperationExpressionParser(exprParser, ops) { - return (text, cursor) => { - const firstExpr = exprParser(text, cursor); - if (!firstExpr) { - return null; - } - cursor = firstExpr.cursor; - let expr = firstExpr.evaluable; - for (;;) { - const op = readBinaryOperator(ops, text, cursor); - if (!op) { - break; - } - cursor = op.cursor; - const nextExpr = exprParser(text, cursor); - if (!nextExpr) { - return null; - } - cursor = nextExpr.cursor; - expr = new BinaryOperationNode(op.operator, expr, nextExpr.evaluable); - } - return expr - ? { - cursor: cursor, - evaluable: expr, - } - : null; - }; - } - const parseBinaryOperationExpression = [ - ['**'], - ['*', '/', '%'], - ['+', '-'], - ['<<', '>>>', '>>'], - ['&'], - ['^'], - ['|'], - ].reduce((parser, ops) => { - return createBinaryOperationExpressionParser(parser, ops); - }, parseUnaryExpression); - function parseExpression(text, cursor) { - cursor += readWhitespace(text, cursor).length; - return parseBinaryOperationExpression(text, cursor); - } - function parseEcmaNumberExpression(text) { - const expr = parseExpression(text, 0); - if (!expr) { - return null; - } - const cursor = expr.cursor + readWhitespace(text, expr.cursor).length; - if (cursor !== text.length) { - return null; - } - return expr.evaluable; - } - - function parseNumber(text) { - var _a; - const r = parseEcmaNumberExpression(text); - return (_a = r === null || r === void 0 ? void 0 : r.evaluate()) !== null && _a !== void 0 ? _a : null; - } - function numberFromUnknown(value) { - if (typeof value === 'number') { - return value; - } - if (typeof value === 'string') { - const pv = parseNumber(value); - if (!isEmpty(pv)) { - return pv; - } - } - return 0; - } - function numberToString(value) { - return String(value); - } - function createNumberFormatter(digits) { - return (value) => { - return value.toFixed(Math.max(Math.min(digits, 20), 0)); - }; - } - - const innerFormatter = createNumberFormatter(0); - function formatPercentage(value) { - return innerFormatter(value) + '%'; - } - - function stringFromUnknown(value) { - return String(value); - } - function formatString(value) { - return value; - } - - function fillBuffer(buffer, bufferSize) { - while (buffer.length < bufferSize) { - buffer.push(undefined); - } - } - function initializeBuffer(bufferSize) { - const buffer = []; - fillBuffer(buffer, bufferSize); - return createValue(buffer); - } - function createTrimmedBuffer(buffer) { - const index = buffer.indexOf(undefined); - return forceCast(index < 0 ? buffer : buffer.slice(0, index)); - } - function createPushedBuffer(buffer, newValue) { - const newBuffer = [...createTrimmedBuffer(buffer), newValue]; - if (newBuffer.length > buffer.length) { - newBuffer.splice(0, newBuffer.length - buffer.length); - } - else { - fillBuffer(newBuffer, buffer.length); - } - return newBuffer; - } - - function connectValues({ primary, secondary, forward, backward, }) { - let changing = false; - function preventFeedback(callback) { - if (changing) { - return; - } - changing = true; - callback(); - changing = false; - } - primary.emitter.on('change', (ev) => { - preventFeedback(() => { - secondary.setRawValue(forward(primary, secondary), ev.options); - }); - }); - secondary.emitter.on('change', (ev) => { - preventFeedback(() => { - primary.setRawValue(backward(primary, secondary), ev.options); - }); - preventFeedback(() => { - secondary.setRawValue(forward(primary, secondary), ev.options); - }); - }); - preventFeedback(() => { - secondary.setRawValue(forward(primary, secondary), { - forceEmit: false, - last: true, - }); - }); - } - - function getStepForKey(baseStep, keys) { - const step = baseStep * (keys.altKey ? 0.1 : 1) * (keys.shiftKey ? 10 : 1); - if (keys.upKey) { - return +step; - } - else if (keys.downKey) { - return -step; - } - return 0; - } - function getVerticalStepKeys(ev) { - return { - altKey: ev.altKey, - downKey: ev.key === 'ArrowDown', - shiftKey: ev.shiftKey, - upKey: ev.key === 'ArrowUp', - }; - } - function getHorizontalStepKeys(ev) { - return { - altKey: ev.altKey, - downKey: ev.key === 'ArrowLeft', - shiftKey: ev.shiftKey, - upKey: ev.key === 'ArrowRight', - }; - } - function isVerticalArrowKey(key) { - return key === 'ArrowUp' || key === 'ArrowDown'; - } - function isArrowKey(key) { - return isVerticalArrowKey(key) || key === 'ArrowLeft' || key === 'ArrowRight'; - } - - function computeOffset$1(ev, elem) { - var _a, _b; - const win = elem.ownerDocument.defaultView; - const rect = elem.getBoundingClientRect(); - return { - x: ev.pageX - (((_a = (win && win.scrollX)) !== null && _a !== void 0 ? _a : 0) + rect.left), - y: ev.pageY - (((_b = (win && win.scrollY)) !== null && _b !== void 0 ? _b : 0) + rect.top), - }; - } - class PointerHandler { - constructor(element) { - this.lastTouch_ = null; - this.onDocumentMouseMove_ = this.onDocumentMouseMove_.bind(this); - this.onDocumentMouseUp_ = this.onDocumentMouseUp_.bind(this); - this.onMouseDown_ = this.onMouseDown_.bind(this); - this.onTouchEnd_ = this.onTouchEnd_.bind(this); - this.onTouchMove_ = this.onTouchMove_.bind(this); - this.onTouchStart_ = this.onTouchStart_.bind(this); - this.elem_ = element; - this.emitter = new Emitter(); - element.addEventListener('touchstart', this.onTouchStart_, { - passive: false, - }); - element.addEventListener('touchmove', this.onTouchMove_, { - passive: true, - }); - element.addEventListener('touchend', this.onTouchEnd_); - element.addEventListener('mousedown', this.onMouseDown_); - } - computePosition_(offset) { - const rect = this.elem_.getBoundingClientRect(); - return { - bounds: { - width: rect.width, - height: rect.height, - }, - point: offset - ? { - x: offset.x, - y: offset.y, - } - : null, - }; - } - onMouseDown_(ev) { - var _a; - ev.preventDefault(); - (_a = ev.currentTarget) === null || _a === void 0 ? void 0 : _a.focus(); - const doc = this.elem_.ownerDocument; - doc.addEventListener('mousemove', this.onDocumentMouseMove_); - doc.addEventListener('mouseup', this.onDocumentMouseUp_); - this.emitter.emit('down', { - altKey: ev.altKey, - data: this.computePosition_(computeOffset$1(ev, this.elem_)), - sender: this, - shiftKey: ev.shiftKey, - }); - } - onDocumentMouseMove_(ev) { - this.emitter.emit('move', { - altKey: ev.altKey, - data: this.computePosition_(computeOffset$1(ev, this.elem_)), - sender: this, - shiftKey: ev.shiftKey, - }); - } - onDocumentMouseUp_(ev) { - const doc = this.elem_.ownerDocument; - doc.removeEventListener('mousemove', this.onDocumentMouseMove_); - doc.removeEventListener('mouseup', this.onDocumentMouseUp_); - this.emitter.emit('up', { - altKey: ev.altKey, - data: this.computePosition_(computeOffset$1(ev, this.elem_)), - sender: this, - shiftKey: ev.shiftKey, - }); - } - onTouchStart_(ev) { - ev.preventDefault(); - const touch = ev.targetTouches.item(0); - const rect = this.elem_.getBoundingClientRect(); - this.emitter.emit('down', { - altKey: ev.altKey, - data: this.computePosition_(touch - ? { - x: touch.clientX - rect.left, - y: touch.clientY - rect.top, - } - : undefined), - sender: this, - shiftKey: ev.shiftKey, - }); - this.lastTouch_ = touch; - } - onTouchMove_(ev) { - const touch = ev.targetTouches.item(0); - const rect = this.elem_.getBoundingClientRect(); - this.emitter.emit('move', { - altKey: ev.altKey, - data: this.computePosition_(touch - ? { - x: touch.clientX - rect.left, - y: touch.clientY - rect.top, - } - : undefined), - sender: this, - shiftKey: ev.shiftKey, - }); - this.lastTouch_ = touch; - } - onTouchEnd_(ev) { - var _a; - const touch = (_a = ev.targetTouches.item(0)) !== null && _a !== void 0 ? _a : this.lastTouch_; - const rect = this.elem_.getBoundingClientRect(); - this.emitter.emit('up', { - altKey: ev.altKey, - data: this.computePosition_(touch - ? { - x: touch.clientX - rect.left, - y: touch.clientY - rect.top, - } - : undefined), - sender: this, - shiftKey: ev.shiftKey, - }); - } - } - - function mapRange(value, start1, end1, start2, end2) { - const p = (value - start1) / (end1 - start1); - return start2 + p * (end2 - start2); - } - function getDecimalDigits(value) { - const text = String(value.toFixed(10)); - const frac = text.split('.')[1]; - return frac.replace(/0+$/, '').length; - } - function constrainRange(value, min, max) { - return Math.min(Math.max(value, min), max); - } - function loopRange(value, max) { - return ((value % max) + max) % max; - } - - const className$g = ClassName('txt'); - class NumberTextView { - constructor(doc, config) { - this.onChange_ = this.onChange_.bind(this); - this.props_ = config.props; - this.props_.emitter.on('change', this.onChange_); - this.element = doc.createElement('div'); - this.element.classList.add(className$g(), className$g(undefined, 'num')); - if (config.arrayPosition) { - this.element.classList.add(className$g(undefined, config.arrayPosition)); - } - config.viewProps.bindClassModifiers(this.element); - const inputElem = doc.createElement('input'); - inputElem.classList.add(className$g('i')); - inputElem.type = 'text'; - config.viewProps.bindDisabled(inputElem); - this.element.appendChild(inputElem); - this.inputElement = inputElem; - this.onDraggingChange_ = this.onDraggingChange_.bind(this); - this.dragging_ = config.dragging; - this.dragging_.emitter.on('change', this.onDraggingChange_); - this.element.classList.add(className$g()); - this.inputElement.classList.add(className$g('i')); - const knobElem = doc.createElement('div'); - knobElem.classList.add(className$g('k')); - this.element.appendChild(knobElem); - this.knobElement = knobElem; - const guideElem = doc.createElementNS(SVG_NS, 'svg'); - guideElem.classList.add(className$g('g')); - this.knobElement.appendChild(guideElem); - const bodyElem = doc.createElementNS(SVG_NS, 'path'); - bodyElem.classList.add(className$g('gb')); - guideElem.appendChild(bodyElem); - this.guideBodyElem_ = bodyElem; - const headElem = doc.createElementNS(SVG_NS, 'path'); - headElem.classList.add(className$g('gh')); - guideElem.appendChild(headElem); - this.guideHeadElem_ = headElem; - const tooltipElem = doc.createElement('div'); - tooltipElem.classList.add(ClassName('tt')()); - this.knobElement.appendChild(tooltipElem); - this.tooltipElem_ = tooltipElem; - config.value.emitter.on('change', this.onChange_); - this.value = config.value; - this.refresh(); - } - onDraggingChange_(ev) { - if (ev.rawValue === null) { - this.element.classList.remove(className$g(undefined, 'drg')); - return; - } - this.element.classList.add(className$g(undefined, 'drg')); - const x = ev.rawValue / this.props_.get('draggingScale'); - const aox = x + (x > 0 ? -1 : x < 0 ? +1 : 0); - const adx = constrainRange(-aox, -4, +4); - this.guideHeadElem_.setAttributeNS(null, 'd', [`M ${aox + adx},0 L${aox},4 L${aox + adx},8`, `M ${x},-1 L${x},9`].join(' ')); - this.guideBodyElem_.setAttributeNS(null, 'd', `M 0,4 L${x},4`); - const formatter = this.props_.get('formatter'); - this.tooltipElem_.textContent = formatter(this.value.rawValue); - this.tooltipElem_.style.left = `${x}px`; - } - refresh() { - const formatter = this.props_.get('formatter'); - this.inputElement.value = formatter(this.value.rawValue); - } - onChange_() { - this.refresh(); - } - } - - class NumberTextController { - constructor(doc, config) { - var _a; - this.originRawValue_ = 0; - this.onInputChange_ = this.onInputChange_.bind(this); - this.onInputKeyDown_ = this.onInputKeyDown_.bind(this); - this.onInputKeyUp_ = this.onInputKeyUp_.bind(this); - this.onPointerDown_ = this.onPointerDown_.bind(this); - this.onPointerMove_ = this.onPointerMove_.bind(this); - this.onPointerUp_ = this.onPointerUp_.bind(this); - this.baseStep_ = config.baseStep; - this.parser_ = config.parser; - this.props = config.props; - this.sliderProps_ = (_a = config.sliderProps) !== null && _a !== void 0 ? _a : null; - this.value = config.value; - this.viewProps = config.viewProps; - this.dragging_ = createValue(null); - this.view = new NumberTextView(doc, { - arrayPosition: config.arrayPosition, - dragging: this.dragging_, - props: this.props, - value: this.value, - viewProps: this.viewProps, - }); - this.view.inputElement.addEventListener('change', this.onInputChange_); - this.view.inputElement.addEventListener('keydown', this.onInputKeyDown_); - this.view.inputElement.addEventListener('keyup', this.onInputKeyUp_); - const ph = new PointerHandler(this.view.knobElement); - ph.emitter.on('down', this.onPointerDown_); - ph.emitter.on('move', this.onPointerMove_); - ph.emitter.on('up', this.onPointerUp_); - } - constrainValue_(value) { - var _a, _b; - const min = (_a = this.sliderProps_) === null || _a === void 0 ? void 0 : _a.get('minValue'); - const max = (_b = this.sliderProps_) === null || _b === void 0 ? void 0 : _b.get('maxValue'); - let v = value; - if (min !== undefined) { - v = Math.max(v, min); - } - if (max !== undefined) { - v = Math.min(v, max); - } - return v; - } - onInputChange_(e) { - const inputElem = forceCast(e.currentTarget); - const value = inputElem.value; - const parsedValue = this.parser_(value); - if (!isEmpty(parsedValue)) { - this.value.rawValue = this.constrainValue_(parsedValue); - } - this.view.refresh(); - } - onInputKeyDown_(ev) { - const step = getStepForKey(this.baseStep_, getVerticalStepKeys(ev)); - if (step === 0) { - return; - } - this.value.setRawValue(this.constrainValue_(this.value.rawValue + step), { - forceEmit: false, - last: false, - }); - } - onInputKeyUp_(ev) { - const step = getStepForKey(this.baseStep_, getVerticalStepKeys(ev)); - if (step === 0) { - return; - } - this.value.setRawValue(this.value.rawValue, { - forceEmit: true, - last: true, - }); - } - onPointerDown_() { - this.originRawValue_ = this.value.rawValue; - this.dragging_.rawValue = 0; - } - computeDraggingValue_(data) { - if (!data.point) { - return null; - } - const dx = data.point.x - data.bounds.width / 2; - return this.constrainValue_(this.originRawValue_ + dx * this.props.get('draggingScale')); - } - onPointerMove_(ev) { - const v = this.computeDraggingValue_(ev.data); - if (v === null) { - return; - } - this.value.setRawValue(v, { - forceEmit: false, - last: false, - }); - this.dragging_.rawValue = this.value.rawValue - this.originRawValue_; - } - onPointerUp_(ev) { - const v = this.computeDraggingValue_(ev.data); - if (v === null) { - return; - } - this.value.setRawValue(v, { - forceEmit: true, - last: true, - }); - this.dragging_.rawValue = null; - } - } - - const className$f = ClassName('sld'); - class SliderView { - constructor(doc, config) { - this.onChange_ = this.onChange_.bind(this); - this.props_ = config.props; - this.props_.emitter.on('change', this.onChange_); - this.element = doc.createElement('div'); - this.element.classList.add(className$f()); - config.viewProps.bindClassModifiers(this.element); - const trackElem = doc.createElement('div'); - trackElem.classList.add(className$f('t')); - config.viewProps.bindTabIndex(trackElem); - this.element.appendChild(trackElem); - this.trackElement = trackElem; - const knobElem = doc.createElement('div'); - knobElem.classList.add(className$f('k')); - this.trackElement.appendChild(knobElem); - this.knobElement = knobElem; - config.value.emitter.on('change', this.onChange_); - this.value = config.value; - this.update_(); - } - update_() { - const p = constrainRange(mapRange(this.value.rawValue, this.props_.get('minValue'), this.props_.get('maxValue'), 0, 100), 0, 100); - this.knobElement.style.width = `${p}%`; - } - onChange_() { - this.update_(); - } - } - - class SliderController { - constructor(doc, config) { - this.onKeyDown_ = this.onKeyDown_.bind(this); - this.onKeyUp_ = this.onKeyUp_.bind(this); - this.onPointerDownOrMove_ = this.onPointerDownOrMove_.bind(this); - this.onPointerUp_ = this.onPointerUp_.bind(this); - this.baseStep_ = config.baseStep; - this.value = config.value; - this.viewProps = config.viewProps; - this.props = config.props; - this.view = new SliderView(doc, { - props: this.props, - value: this.value, - viewProps: this.viewProps, - }); - this.ptHandler_ = new PointerHandler(this.view.trackElement); - this.ptHandler_.emitter.on('down', this.onPointerDownOrMove_); - this.ptHandler_.emitter.on('move', this.onPointerDownOrMove_); - this.ptHandler_.emitter.on('up', this.onPointerUp_); - this.view.trackElement.addEventListener('keydown', this.onKeyDown_); - this.view.trackElement.addEventListener('keyup', this.onKeyUp_); - } - handlePointerEvent_(d, opts) { - if (!d.point) { - return; - } - this.value.setRawValue(mapRange(constrainRange(d.point.x, 0, d.bounds.width), 0, d.bounds.width, this.props.get('minValue'), this.props.get('maxValue')), opts); - } - onPointerDownOrMove_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: false, - last: false, - }); - } - onPointerUp_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: true, - last: true, - }); - } - onKeyDown_(ev) { - const step = getStepForKey(this.baseStep_, getHorizontalStepKeys(ev)); - if (step === 0) { - return; - } - this.value.setRawValue(this.value.rawValue + step, { - forceEmit: false, - last: false, - }); - } - onKeyUp_(ev) { - const step = getStepForKey(this.baseStep_, getHorizontalStepKeys(ev)); - if (step === 0) { - return; - } - this.value.setRawValue(this.value.rawValue, { - forceEmit: true, - last: true, - }); - } - } - - const className$e = ClassName('sldtxt'); - class SliderTextView { - constructor(doc, config) { - this.element = doc.createElement('div'); - this.element.classList.add(className$e()); - const sliderElem = doc.createElement('div'); - sliderElem.classList.add(className$e('s')); - this.sliderView_ = config.sliderView; - sliderElem.appendChild(this.sliderView_.element); - this.element.appendChild(sliderElem); - const textElem = doc.createElement('div'); - textElem.classList.add(className$e('t')); - this.textView_ = config.textView; - textElem.appendChild(this.textView_.element); - this.element.appendChild(textElem); - } - } - - class SliderTextController { - constructor(doc, config) { - this.value = config.value; - this.viewProps = config.viewProps; - this.sliderC_ = new SliderController(doc, { - baseStep: config.baseStep, - props: config.sliderProps, - value: config.value, - viewProps: this.viewProps, - }); - this.textC_ = new NumberTextController(doc, { - baseStep: config.baseStep, - parser: config.parser, - props: config.textProps, - sliderProps: config.sliderProps, - value: config.value, - viewProps: config.viewProps, - }); - this.view = new SliderTextView(doc, { - sliderView: this.sliderC_.view, - textView: this.textC_.view, - }); - } - get sliderController() { - return this.sliderC_; - } - get textController() { - return this.textC_; - } - } - - function writePrimitive(target, value) { - target.write(value); - } - - function parseListOptions(value) { - const p = ParamsParsers; - if (Array.isArray(value)) { - return p.required.array(p.required.object({ - text: p.required.string, - value: p.required.raw, - }))(value).value; - } - if (typeof value === 'object') { - return p.required.raw(value) - .value; - } - return undefined; - } - function parsePickerLayout(value) { - if (value === 'inline' || value === 'popup') { - return value; - } - return undefined; - } - function parsePointDimensionParams(value) { - const p = ParamsParsers; - return p.required.object({ - max: p.optional.number, - min: p.optional.number, - step: p.optional.number, - })(value).value; - } - function normalizeListOptions(options) { - if (Array.isArray(options)) { - return options; - } - const items = []; - Object.keys(options).forEach((text) => { - items.push({ text: text, value: options[text] }); - }); - return items; - } - function createListConstraint(options) { - return !isEmpty(options) - ? new ListConstraint(normalizeListOptions(forceCast(options))) - : null; - } - function findListItems(constraint) { - const c = constraint - ? findConstraint(constraint, ListConstraint) - : null; - if (!c) { - return null; - } - return c.options; - } - function findStep(constraint) { - const c = constraint ? findConstraint(constraint, StepConstraint) : null; - if (!c) { - return null; - } - return c.step; - } - function getSuitableDecimalDigits(constraint, rawValue) { - const sc = constraint && findConstraint(constraint, StepConstraint); - if (sc) { - return getDecimalDigits(sc.step); - } - return Math.max(getDecimalDigits(rawValue), 2); - } - function getBaseStep(constraint) { - const step = findStep(constraint); - return step !== null && step !== void 0 ? step : 1; - } - function getSuitableDraggingScale(constraint, rawValue) { - var _a; - const sc = constraint && findConstraint(constraint, StepConstraint); - const base = Math.abs((_a = sc === null || sc === void 0 ? void 0 : sc.step) !== null && _a !== void 0 ? _a : rawValue); - return base === 0 ? 0.1 : Math.pow(10, Math.floor(Math.log10(base)) - 1); - } - - const className$d = ClassName('ckb'); - class CheckboxView { - constructor(doc, config) { - this.onValueChange_ = this.onValueChange_.bind(this); - this.element = doc.createElement('div'); - this.element.classList.add(className$d()); - config.viewProps.bindClassModifiers(this.element); - const labelElem = doc.createElement('label'); - labelElem.classList.add(className$d('l')); - this.element.appendChild(labelElem); - const inputElem = doc.createElement('input'); - inputElem.classList.add(className$d('i')); - inputElem.type = 'checkbox'; - labelElem.appendChild(inputElem); - this.inputElement = inputElem; - config.viewProps.bindDisabled(this.inputElement); - const wrapperElem = doc.createElement('div'); - wrapperElem.classList.add(className$d('w')); - labelElem.appendChild(wrapperElem); - const markElem = createSvgIconElement(doc, 'check'); - wrapperElem.appendChild(markElem); - config.value.emitter.on('change', this.onValueChange_); - this.value = config.value; - this.update_(); - } - update_() { - this.inputElement.checked = this.value.rawValue; - } - onValueChange_() { - this.update_(); - } - } - - class CheckboxController { - constructor(doc, config) { - this.onInputChange_ = this.onInputChange_.bind(this); - this.value = config.value; - this.viewProps = config.viewProps; - this.view = new CheckboxView(doc, { - value: this.value, - viewProps: this.viewProps, - }); - this.view.inputElement.addEventListener('change', this.onInputChange_); - } - onInputChange_(e) { - const inputElem = forceCast(e.currentTarget); - this.value.rawValue = inputElem.checked; - } - } - - function createConstraint$6(params) { - const constraints = []; - const lc = createListConstraint(params.options); - if (lc) { - constraints.push(lc); - } - return new CompositeConstraint(constraints); - } - const BooleanInputPlugin = { - id: 'input-bool', - type: 'input', - accept: (value, params) => { - if (typeof value !== 'boolean') { - return null; - } - const p = ParamsParsers; - const result = parseParams(params, { - options: p.optional.custom(parseListOptions), - }); - return result - ? { - initialValue: value, - params: result, - } - : null; - }, - binding: { - reader: (_args) => boolFromUnknown, - constraint: (args) => createConstraint$6(args.params), - writer: (_args) => writePrimitive, - }, - controller: (args) => { - var _a; - const doc = args.document; - const value = args.value; - const c = args.constraint; - if (c && findConstraint(c, ListConstraint)) { - return new ListController(doc, { - props: ValueMap.fromObject({ - options: (_a = findListItems(c)) !== null && _a !== void 0 ? _a : [], - }), - value: value, - viewProps: args.viewProps, - }); - } - return new CheckboxController(doc, { - value: value, - viewProps: args.viewProps, - }); - }, - }; - - const className$c = ClassName('col'); - class ColorView { - constructor(doc, config) { - this.element = doc.createElement('div'); - this.element.classList.add(className$c()); - config.foldable.bindExpandedClass(this.element, className$c(undefined, 'expanded')); - bindValueMap(config.foldable, 'completed', valueToClassName(this.element, className$c(undefined, 'cpl'))); - const headElem = doc.createElement('div'); - headElem.classList.add(className$c('h')); - this.element.appendChild(headElem); - const swatchElem = doc.createElement('div'); - swatchElem.classList.add(className$c('s')); - headElem.appendChild(swatchElem); - this.swatchElement = swatchElem; - const textElem = doc.createElement('div'); - textElem.classList.add(className$c('t')); - headElem.appendChild(textElem); - this.textElement = textElem; - if (config.pickerLayout === 'inline') { - const pickerElem = doc.createElement('div'); - pickerElem.classList.add(className$c('p')); - this.element.appendChild(pickerElem); - this.pickerElement = pickerElem; - } - else { - this.pickerElement = null; - } - } - } - - function rgbToHslInt(r, g, b) { - const rp = constrainRange(r / 255, 0, 1); - const gp = constrainRange(g / 255, 0, 1); - const bp = constrainRange(b / 255, 0, 1); - const cmax = Math.max(rp, gp, bp); - const cmin = Math.min(rp, gp, bp); - const c = cmax - cmin; - let h = 0; - let s = 0; - const l = (cmin + cmax) / 2; - if (c !== 0) { - s = c / (1 - Math.abs(cmax + cmin - 1)); - if (rp === cmax) { - h = (gp - bp) / c; - } - else if (gp === cmax) { - h = 2 + (bp - rp) / c; - } - else { - h = 4 + (rp - gp) / c; - } - h = h / 6 + (h < 0 ? 1 : 0); - } - return [h * 360, s * 100, l * 100]; - } - function hslToRgbInt(h, s, l) { - const hp = ((h % 360) + 360) % 360; - const sp = constrainRange(s / 100, 0, 1); - const lp = constrainRange(l / 100, 0, 1); - const c = (1 - Math.abs(2 * lp - 1)) * sp; - const x = c * (1 - Math.abs(((hp / 60) % 2) - 1)); - const m = lp - c / 2; - let rp, gp, bp; - if (hp >= 0 && hp < 60) { - [rp, gp, bp] = [c, x, 0]; - } - else if (hp >= 60 && hp < 120) { - [rp, gp, bp] = [x, c, 0]; - } - else if (hp >= 120 && hp < 180) { - [rp, gp, bp] = [0, c, x]; - } - else if (hp >= 180 && hp < 240) { - [rp, gp, bp] = [0, x, c]; - } - else if (hp >= 240 && hp < 300) { - [rp, gp, bp] = [x, 0, c]; - } - else { - [rp, gp, bp] = [c, 0, x]; - } - return [(rp + m) * 255, (gp + m) * 255, (bp + m) * 255]; - } - function rgbToHsvInt(r, g, b) { - const rp = constrainRange(r / 255, 0, 1); - const gp = constrainRange(g / 255, 0, 1); - const bp = constrainRange(b / 255, 0, 1); - const cmax = Math.max(rp, gp, bp); - const cmin = Math.min(rp, gp, bp); - const d = cmax - cmin; - let h; - if (d === 0) { - h = 0; - } - else if (cmax === rp) { - h = 60 * (((((gp - bp) / d) % 6) + 6) % 6); - } - else if (cmax === gp) { - h = 60 * ((bp - rp) / d + 2); - } - else { - h = 60 * ((rp - gp) / d + 4); - } - const s = cmax === 0 ? 0 : d / cmax; - const v = cmax; - return [h, s * 100, v * 100]; - } - function hsvToRgbInt(h, s, v) { - const hp = loopRange(h, 360); - const sp = constrainRange(s / 100, 0, 1); - const vp = constrainRange(v / 100, 0, 1); - const c = vp * sp; - const x = c * (1 - Math.abs(((hp / 60) % 2) - 1)); - const m = vp - c; - let rp, gp, bp; - if (hp >= 0 && hp < 60) { - [rp, gp, bp] = [c, x, 0]; - } - else if (hp >= 60 && hp < 120) { - [rp, gp, bp] = [x, c, 0]; - } - else if (hp >= 120 && hp < 180) { - [rp, gp, bp] = [0, c, x]; - } - else if (hp >= 180 && hp < 240) { - [rp, gp, bp] = [0, x, c]; - } - else if (hp >= 240 && hp < 300) { - [rp, gp, bp] = [x, 0, c]; - } - else { - [rp, gp, bp] = [c, 0, x]; - } - return [(rp + m) * 255, (gp + m) * 255, (bp + m) * 255]; - } - function hslToHsvInt(h, s, l) { - const sd = l + (s * (100 - Math.abs(2 * l - 100))) / (2 * 100); - return [ - h, - sd !== 0 ? (s * (100 - Math.abs(2 * l - 100))) / sd : 0, - l + (s * (100 - Math.abs(2 * l - 100))) / (2 * 100), - ]; - } - function hsvToHslInt(h, s, v) { - const sd = 100 - Math.abs((v * (200 - s)) / 100 - 100); - return [h, sd !== 0 ? (s * v) / sd : 0, (v * (200 - s)) / (2 * 100)]; - } - function removeAlphaComponent(comps) { - return [comps[0], comps[1], comps[2]]; - } - function appendAlphaComponent(comps, alpha) { - return [comps[0], comps[1], comps[2], alpha]; - } - const MODE_CONVERTER_MAP = { - hsl: { - hsl: (h, s, l) => [h, s, l], - hsv: hslToHsvInt, - rgb: hslToRgbInt, - }, - hsv: { - hsl: hsvToHslInt, - hsv: (h, s, v) => [h, s, v], - rgb: hsvToRgbInt, - }, - rgb: { - hsl: rgbToHslInt, - hsv: rgbToHsvInt, - rgb: (r, g, b) => [r, g, b], - }, - }; - function getColorMaxComponents(mode, type) { - return [ - type === 'float' ? 1 : mode === 'rgb' ? 255 : 360, - type === 'float' ? 1 : mode === 'rgb' ? 255 : 100, - type === 'float' ? 1 : mode === 'rgb' ? 255 : 100, - ]; - } - function constrainColorComponents(components, mode, type) { - var _a; - const ms = getColorMaxComponents(mode, type); - return [ - mode === 'rgb' - ? constrainRange(components[0], 0, ms[0]) - : loopRange(components[0], ms[0]), - constrainRange(components[1], 0, ms[1]), - constrainRange(components[2], 0, ms[2]), - constrainRange((_a = components[3]) !== null && _a !== void 0 ? _a : 1, 0, 1), - ]; - } - function convertColorType(comps, mode, from, to) { - const fms = getColorMaxComponents(mode, from); - const tms = getColorMaxComponents(mode, to); - return comps.map((c, index) => (c / fms[index]) * tms[index]); - } - function convertColor(components, from, to) { - const intComps = convertColorType(components, from.mode, from.type, 'int'); - const result = MODE_CONVERTER_MAP[from.mode][to.mode](...intComps); - return convertColorType(result, to.mode, 'int', to.type); - } - - function isRgbColorComponent(obj, key) { - if (typeof obj !== 'object' || isEmpty(obj)) { - return false; - } - return key in obj && typeof obj[key] === 'number'; - } - class Color { - constructor(comps, mode, type = 'int') { - this.mode = mode; - this.type = type; - this.comps_ = constrainColorComponents(comps, mode, type); - } - static black(type = 'int') { - return new Color([0, 0, 0], 'rgb', type); - } - static fromObject(obj, type = 'int') { - const comps = 'a' in obj ? [obj.r, obj.g, obj.b, obj.a] : [obj.r, obj.g, obj.b]; - return new Color(comps, 'rgb', type); - } - static toRgbaObject(color, type = 'int') { - return color.toRgbaObject(type); - } - static isRgbColorObject(obj) { - return (isRgbColorComponent(obj, 'r') && - isRgbColorComponent(obj, 'g') && - isRgbColorComponent(obj, 'b')); - } - static isRgbaColorObject(obj) { - return this.isRgbColorObject(obj) && isRgbColorComponent(obj, 'a'); - } - static isColorObject(obj) { - return this.isRgbColorObject(obj); - } - static equals(v1, v2) { - if (v1.mode !== v2.mode) { - return false; - } - const comps1 = v1.comps_; - const comps2 = v2.comps_; - for (let i = 0; i < comps1.length; i++) { - if (comps1[i] !== comps2[i]) { - return false; - } - } - return true; - } - getComponents(opt_mode, type = 'int') { - return appendAlphaComponent(convertColor(removeAlphaComponent(this.comps_), { mode: this.mode, type: this.type }, { mode: opt_mode !== null && opt_mode !== void 0 ? opt_mode : this.mode, type }), this.comps_[3]); - } - toRgbaObject(type = 'int') { - const rgbComps = this.getComponents('rgb', type); - return { - r: rgbComps[0], - g: rgbComps[1], - b: rgbComps[2], - a: rgbComps[3], - }; - } - } - - const className$b = ClassName('colp'); - class ColorPickerView { - constructor(doc, config) { - this.alphaViews_ = null; - this.element = doc.createElement('div'); - this.element.classList.add(className$b()); - const hsvElem = doc.createElement('div'); - hsvElem.classList.add(className$b('hsv')); - const svElem = doc.createElement('div'); - svElem.classList.add(className$b('sv')); - this.svPaletteView_ = config.svPaletteView; - svElem.appendChild(this.svPaletteView_.element); - hsvElem.appendChild(svElem); - const hElem = doc.createElement('div'); - hElem.classList.add(className$b('h')); - this.hPaletteView_ = config.hPaletteView; - hElem.appendChild(this.hPaletteView_.element); - hsvElem.appendChild(hElem); - this.element.appendChild(hsvElem); - const rgbElem = doc.createElement('div'); - rgbElem.classList.add(className$b('rgb')); - this.textView_ = config.textView; - rgbElem.appendChild(this.textView_.element); - this.element.appendChild(rgbElem); - if (config.alphaViews) { - this.alphaViews_ = { - palette: config.alphaViews.palette, - text: config.alphaViews.text, - }; - const aElem = doc.createElement('div'); - aElem.classList.add(className$b('a')); - const apElem = doc.createElement('div'); - apElem.classList.add(className$b('ap')); - apElem.appendChild(this.alphaViews_.palette.element); - aElem.appendChild(apElem); - const atElem = doc.createElement('div'); - atElem.classList.add(className$b('at')); - atElem.appendChild(this.alphaViews_.text.element); - aElem.appendChild(atElem); - this.element.appendChild(aElem); - } - } - get allFocusableElements() { - const elems = [ - this.svPaletteView_.element, - this.hPaletteView_.element, - this.textView_.modeSelectElement, - ...this.textView_.textViews.map((v) => v.inputElement), - ]; - if (this.alphaViews_) { - elems.push(this.alphaViews_.palette.element, this.alphaViews_.text.inputElement); - } - return elems; - } - } - - function parseColorType(value) { - return value === 'int' ? 'int' : value === 'float' ? 'float' : undefined; - } - function parseColorInputParams(params) { - const p = ParamsParsers; - return parseParams(params, { - alpha: p.optional.boolean, - color: p.optional.object({ - alpha: p.optional.boolean, - type: p.optional.custom(parseColorType), - }), - expanded: p.optional.boolean, - picker: p.optional.custom(parsePickerLayout), - }); - } - function getBaseStepForColor(forAlpha) { - return forAlpha ? 0.1 : 1; - } - function extractColorType(params) { - var _a; - return (_a = params.color) === null || _a === void 0 ? void 0 : _a.type; - } - - function equalsStringColorFormat(f1, f2) { - return (f1.alpha === f2.alpha && - f1.mode === f2.mode && - f1.notation === f2.notation && - f1.type === f2.type); - } - function parseCssNumberOrPercentage(text, maxValue) { - const m = text.match(/^(.+)%$/); - if (!m) { - return Math.min(parseFloat(text), maxValue); - } - return Math.min(parseFloat(m[1]) * 0.01 * maxValue, maxValue); - } - const ANGLE_TO_DEG_MAP = { - deg: (angle) => angle, - grad: (angle) => (angle * 360) / 400, - rad: (angle) => (angle * 360) / (2 * Math.PI), - turn: (angle) => angle * 360, - }; - function parseCssNumberOrAngle(text) { - const m = text.match(/^([0-9.]+?)(deg|grad|rad|turn)$/); - if (!m) { - return parseFloat(text); - } - const angle = parseFloat(m[1]); - const unit = m[2]; - return ANGLE_TO_DEG_MAP[unit](angle); - } - function parseFunctionalRgbColorComponents(text) { - const m = text.match(/^rgb\(\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/); - if (!m) { - return null; - } - const comps = [ - parseCssNumberOrPercentage(m[1], 255), - parseCssNumberOrPercentage(m[2], 255), - parseCssNumberOrPercentage(m[3], 255), - ]; - if (isNaN(comps[0]) || isNaN(comps[1]) || isNaN(comps[2])) { - return null; - } - return comps; - } - function createFunctionalRgbColorParser(type) { - return (text) => { - const comps = parseFunctionalRgbColorComponents(text); - return comps ? new Color(comps, 'rgb', type) : null; - }; - } - function parseFunctionalRgbaColorComponents(text) { - const m = text.match(/^rgba\(\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/); - if (!m) { - return null; - } - const comps = [ - parseCssNumberOrPercentage(m[1], 255), - parseCssNumberOrPercentage(m[2], 255), - parseCssNumberOrPercentage(m[3], 255), - parseCssNumberOrPercentage(m[4], 1), - ]; - if (isNaN(comps[0]) || - isNaN(comps[1]) || - isNaN(comps[2]) || - isNaN(comps[3])) { - return null; - } - return comps; - } - function createFunctionalRgbaColorParser(type) { - return (text) => { - const comps = parseFunctionalRgbaColorComponents(text); - return comps ? new Color(comps, 'rgb', type) : null; - }; - } - function parseHslColorComponents(text) { - const m = text.match(/^hsl\(\s*([0-9A-Fa-f.]+(?:deg|grad|rad|turn)?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/); - if (!m) { - return null; - } - const comps = [ - parseCssNumberOrAngle(m[1]), - parseCssNumberOrPercentage(m[2], 100), - parseCssNumberOrPercentage(m[3], 100), - ]; - if (isNaN(comps[0]) || isNaN(comps[1]) || isNaN(comps[2])) { - return null; - } - return comps; - } - function createHslColorParser(type) { - return (text) => { - const comps = parseHslColorComponents(text); - return comps ? new Color(comps, 'hsl', type) : null; - }; - } - function parseHslaColorComponents(text) { - const m = text.match(/^hsla\(\s*([0-9A-Fa-f.]+(?:deg|grad|rad|turn)?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/); - if (!m) { - return null; - } - const comps = [ - parseCssNumberOrAngle(m[1]), - parseCssNumberOrPercentage(m[2], 100), - parseCssNumberOrPercentage(m[3], 100), - parseCssNumberOrPercentage(m[4], 1), - ]; - if (isNaN(comps[0]) || - isNaN(comps[1]) || - isNaN(comps[2]) || - isNaN(comps[3])) { - return null; - } - return comps; - } - function createHslaColorParser(type) { - return (text) => { - const comps = parseHslaColorComponents(text); - return comps ? new Color(comps, 'hsl', type) : null; - }; - } - function parseHexRgbColorComponents(text) { - const mRgb = text.match(/^#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])$/); - if (mRgb) { - return [ - parseInt(mRgb[1] + mRgb[1], 16), - parseInt(mRgb[2] + mRgb[2], 16), - parseInt(mRgb[3] + mRgb[3], 16), - ]; - } - const mRrggbb = text.match(/^(?:#|0x)([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/); - if (mRrggbb) { - return [ - parseInt(mRrggbb[1], 16), - parseInt(mRrggbb[2], 16), - parseInt(mRrggbb[3], 16), - ]; - } - return null; - } - function parseHexRgbColor(text) { - const comps = parseHexRgbColorComponents(text); - return comps ? new Color(comps, 'rgb', 'int') : null; - } - function parseHexRgbaColorComponents(text) { - const mRgb = text.match(/^#?([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])$/); - if (mRgb) { - return [ - parseInt(mRgb[1] + mRgb[1], 16), - parseInt(mRgb[2] + mRgb[2], 16), - parseInt(mRgb[3] + mRgb[3], 16), - mapRange(parseInt(mRgb[4] + mRgb[4], 16), 0, 255, 0, 1), - ]; - } - const mRrggbb = text.match(/^(?:#|0x)?([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/); - if (mRrggbb) { - return [ - parseInt(mRrggbb[1], 16), - parseInt(mRrggbb[2], 16), - parseInt(mRrggbb[3], 16), - mapRange(parseInt(mRrggbb[4], 16), 0, 255, 0, 1), - ]; - } - return null; - } - function parseHexRgbaColor(text) { - const comps = parseHexRgbaColorComponents(text); - return comps ? new Color(comps, 'rgb', 'int') : null; - } - function parseObjectRgbColorComponents(text) { - const m = text.match(/^\{\s*r\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*g\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*b\s*:\s*([0-9A-Fa-f.]+%?)\s*\}$/); - if (!m) { - return null; - } - const comps = [ - parseFloat(m[1]), - parseFloat(m[2]), - parseFloat(m[3]), - ]; - if (isNaN(comps[0]) || isNaN(comps[1]) || isNaN(comps[2])) { - return null; - } - return comps; - } - function createObjectRgbColorParser(type) { - return (text) => { - const comps = parseObjectRgbColorComponents(text); - return comps ? new Color(comps, 'rgb', type) : null; - }; - } - function parseObjectRgbaColorComponents(text) { - const m = text.match(/^\{\s*r\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*g\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*b\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*a\s*:\s*([0-9A-Fa-f.]+%?)\s*\}$/); - if (!m) { - return null; - } - const comps = [ - parseFloat(m[1]), - parseFloat(m[2]), - parseFloat(m[3]), - parseFloat(m[4]), - ]; - if (isNaN(comps[0]) || - isNaN(comps[1]) || - isNaN(comps[2]) || - isNaN(comps[3])) { - return null; - } - return comps; - } - function createObjectRgbaColorParser(type) { - return (text) => { - const comps = parseObjectRgbaColorComponents(text); - return comps ? new Color(comps, 'rgb', type) : null; - }; - } - const PARSER_AND_RESULT = [ - { - parser: parseHexRgbColorComponents, - result: { - alpha: false, - mode: 'rgb', - notation: 'hex', - }, - }, - { - parser: parseHexRgbaColorComponents, - result: { - alpha: true, - mode: 'rgb', - notation: 'hex', - }, - }, - { - parser: parseFunctionalRgbColorComponents, - result: { - alpha: false, - mode: 'rgb', - notation: 'func', - }, - }, - { - parser: parseFunctionalRgbaColorComponents, - result: { - alpha: true, - mode: 'rgb', - notation: 'func', - }, - }, - { - parser: parseHslColorComponents, - result: { - alpha: false, - mode: 'hsl', - notation: 'func', - }, - }, - { - parser: parseHslaColorComponents, - result: { - alpha: true, - mode: 'hsl', - notation: 'func', - }, - }, - { - parser: parseObjectRgbColorComponents, - result: { - alpha: false, - mode: 'rgb', - notation: 'object', - }, - }, - { - parser: parseObjectRgbaColorComponents, - result: { - alpha: true, - mode: 'rgb', - notation: 'object', - }, - }, - ]; - function detectStringColor(text) { - return PARSER_AND_RESULT.reduce((prev, { parser, result: detection }) => { - if (prev) { - return prev; - } - return parser(text) ? detection : null; - }, null); - } - function detectStringColorFormat(text, type = 'int') { - const r = detectStringColor(text); - if (!r) { - return null; - } - if (r.notation === 'hex' && type !== 'float') { - return Object.assign(Object.assign({}, r), { type: 'int' }); - } - if (r.notation === 'func') { - return Object.assign(Object.assign({}, r), { type: type }); - } - return null; - } - const TYPE_TO_PARSERS = { - int: [ - parseHexRgbColor, - parseHexRgbaColor, - createFunctionalRgbColorParser('int'), - createFunctionalRgbaColorParser('int'), - createHslColorParser('int'), - createHslaColorParser('int'), - createObjectRgbColorParser('int'), - createObjectRgbaColorParser('int'), - ], - float: [ - createFunctionalRgbColorParser('float'), - createFunctionalRgbaColorParser('float'), - createHslColorParser('float'), - createHslaColorParser('float'), - createObjectRgbColorParser('float'), - createObjectRgbaColorParser('float'), - ], - }; - function createColorStringBindingReader(type) { - const parsers = TYPE_TO_PARSERS[type]; - return (value) => { - if (typeof value !== 'string') { - return Color.black(type); - } - const result = parsers.reduce((prev, parser) => { - if (prev) { - return prev; - } - return parser(value); - }, null); - return result !== null && result !== void 0 ? result : Color.black(type); - }; - } - function createColorStringParser(type) { - const parsers = TYPE_TO_PARSERS[type]; - return (value) => { - return parsers.reduce((prev, parser) => { - if (prev) { - return prev; - } - return parser(value); - }, null); - }; - } - function zerofill(comp) { - const hex = constrainRange(Math.floor(comp), 0, 255).toString(16); - return hex.length === 1 ? `0${hex}` : hex; - } - function colorToHexRgbString(value, prefix = '#') { - const hexes = removeAlphaComponent(value.getComponents('rgb')) - .map(zerofill) - .join(''); - return `${prefix}${hexes}`; - } - function colorToHexRgbaString(value, prefix = '#') { - const rgbaComps = value.getComponents('rgb'); - const hexes = [rgbaComps[0], rgbaComps[1], rgbaComps[2], rgbaComps[3] * 255] - .map(zerofill) - .join(''); - return `${prefix}${hexes}`; - } - function colorToFunctionalRgbString(value, opt_type) { - const formatter = createNumberFormatter(opt_type === 'float' ? 2 : 0); - const comps = removeAlphaComponent(value.getComponents('rgb', opt_type)).map((comp) => formatter(comp)); - return `rgb(${comps.join(', ')})`; - } - function createFunctionalRgbColorFormatter(type) { - return (value) => { - return colorToFunctionalRgbString(value, type); - }; - } - function colorToFunctionalRgbaString(value, opt_type) { - const aFormatter = createNumberFormatter(2); - const rgbFormatter = createNumberFormatter(opt_type === 'float' ? 2 : 0); - const comps = value.getComponents('rgb', opt_type).map((comp, index) => { - const formatter = index === 3 ? aFormatter : rgbFormatter; - return formatter(comp); - }); - return `rgba(${comps.join(', ')})`; - } - function createFunctionalRgbaColorFormatter(type) { - return (value) => { - return colorToFunctionalRgbaString(value, type); - }; - } - function colorToFunctionalHslString(value) { - const formatters = [ - createNumberFormatter(0), - formatPercentage, - formatPercentage, - ]; - const comps = removeAlphaComponent(value.getComponents('hsl')).map((comp, index) => formatters[index](comp)); - return `hsl(${comps.join(', ')})`; - } - function colorToFunctionalHslaString(value) { - const formatters = [ - createNumberFormatter(0), - formatPercentage, - formatPercentage, - createNumberFormatter(2), - ]; - const comps = value - .getComponents('hsl') - .map((comp, index) => formatters[index](comp)); - return `hsla(${comps.join(', ')})`; - } - function colorToObjectRgbString(value, type) { - const formatter = createNumberFormatter(type === 'float' ? 2 : 0); - const names = ['r', 'g', 'b']; - const comps = removeAlphaComponent(value.getComponents('rgb', type)).map((comp, index) => `${names[index]}: ${formatter(comp)}`); - return `{${comps.join(', ')}}`; - } - function createObjectRgbColorFormatter(type) { - return (value) => colorToObjectRgbString(value, type); - } - function colorToObjectRgbaString(value, type) { - const aFormatter = createNumberFormatter(2); - const rgbFormatter = createNumberFormatter(type === 'float' ? 2 : 0); - const names = ['r', 'g', 'b', 'a']; - const comps = value.getComponents('rgb', type).map((comp, index) => { - const formatter = index === 3 ? aFormatter : rgbFormatter; - return `${names[index]}: ${formatter(comp)}`; - }); - return `{${comps.join(', ')}}`; - } - function createObjectRgbaColorFormatter(type) { - return (value) => colorToObjectRgbaString(value, type); - } - const FORMAT_AND_STRINGIFIERS = [ - { - format: { - alpha: false, - mode: 'rgb', - notation: 'hex', - type: 'int', - }, - stringifier: colorToHexRgbString, - }, - { - format: { - alpha: true, - mode: 'rgb', - notation: 'hex', - type: 'int', - }, - stringifier: colorToHexRgbaString, - }, - { - format: { - alpha: false, - mode: 'hsl', - notation: 'func', - type: 'int', - }, - stringifier: colorToFunctionalHslString, - }, - { - format: { - alpha: true, - mode: 'hsl', - notation: 'func', - type: 'int', - }, - stringifier: colorToFunctionalHslaString, - }, - ...['int', 'float'].reduce((prev, type) => { - return [ - ...prev, - { - format: { - alpha: false, - mode: 'rgb', - notation: 'func', - type: type, - }, - stringifier: createFunctionalRgbColorFormatter(type), - }, - { - format: { - alpha: true, - mode: 'rgb', - notation: 'func', - type: type, - }, - stringifier: createFunctionalRgbaColorFormatter(type), - }, - { - format: { - alpha: false, - mode: 'rgb', - notation: 'object', - type: type, - }, - stringifier: createObjectRgbColorFormatter(type), - }, - { - format: { - alpha: true, - mode: 'rgb', - notation: 'object', - type: type, - }, - stringifier: createObjectRgbaColorFormatter(type), - }, - ]; - }, []), - ]; - function findColorStringifier(format) { - return FORMAT_AND_STRINGIFIERS.reduce((prev, fas) => { - if (prev) { - return prev; - } - return equalsStringColorFormat(fas.format, format) - ? fas.stringifier - : null; - }, null); - } - - const className$a = ClassName('apl'); - class APaletteView { - constructor(doc, config) { - this.onValueChange_ = this.onValueChange_.bind(this); - this.value = config.value; - this.value.emitter.on('change', this.onValueChange_); - this.element = doc.createElement('div'); - this.element.classList.add(className$a()); - config.viewProps.bindTabIndex(this.element); - const barElem = doc.createElement('div'); - barElem.classList.add(className$a('b')); - this.element.appendChild(barElem); - const colorElem = doc.createElement('div'); - colorElem.classList.add(className$a('c')); - barElem.appendChild(colorElem); - this.colorElem_ = colorElem; - const markerElem = doc.createElement('div'); - markerElem.classList.add(className$a('m')); - this.element.appendChild(markerElem); - this.markerElem_ = markerElem; - const previewElem = doc.createElement('div'); - previewElem.classList.add(className$a('p')); - this.markerElem_.appendChild(previewElem); - this.previewElem_ = previewElem; - this.update_(); - } - update_() { - const c = this.value.rawValue; - const rgbaComps = c.getComponents('rgb'); - const leftColor = new Color([rgbaComps[0], rgbaComps[1], rgbaComps[2], 0], 'rgb'); - const rightColor = new Color([rgbaComps[0], rgbaComps[1], rgbaComps[2], 255], 'rgb'); - const gradientComps = [ - 'to right', - colorToFunctionalRgbaString(leftColor), - colorToFunctionalRgbaString(rightColor), - ]; - this.colorElem_.style.background = `linear-gradient(${gradientComps.join(',')})`; - this.previewElem_.style.backgroundColor = colorToFunctionalRgbaString(c); - const left = mapRange(rgbaComps[3], 0, 1, 0, 100); - this.markerElem_.style.left = `${left}%`; - } - onValueChange_() { - this.update_(); - } - } - - class APaletteController { - constructor(doc, config) { - this.onKeyDown_ = this.onKeyDown_.bind(this); - this.onKeyUp_ = this.onKeyUp_.bind(this); - this.onPointerDown_ = this.onPointerDown_.bind(this); - this.onPointerMove_ = this.onPointerMove_.bind(this); - this.onPointerUp_ = this.onPointerUp_.bind(this); - this.value = config.value; - this.viewProps = config.viewProps; - this.view = new APaletteView(doc, { - value: this.value, - viewProps: this.viewProps, - }); - this.ptHandler_ = new PointerHandler(this.view.element); - this.ptHandler_.emitter.on('down', this.onPointerDown_); - this.ptHandler_.emitter.on('move', this.onPointerMove_); - this.ptHandler_.emitter.on('up', this.onPointerUp_); - this.view.element.addEventListener('keydown', this.onKeyDown_); - this.view.element.addEventListener('keyup', this.onKeyUp_); - } - handlePointerEvent_(d, opts) { - if (!d.point) { - return; - } - const alpha = d.point.x / d.bounds.width; - const c = this.value.rawValue; - const [h, s, v] = c.getComponents('hsv'); - this.value.setRawValue(new Color([h, s, v, alpha], 'hsv'), opts); - } - onPointerDown_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: false, - last: false, - }); - } - onPointerMove_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: false, - last: false, - }); - } - onPointerUp_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: true, - last: true, - }); - } - onKeyDown_(ev) { - const step = getStepForKey(getBaseStepForColor(true), getHorizontalStepKeys(ev)); - if (step === 0) { - return; - } - const c = this.value.rawValue; - const [h, s, v, a] = c.getComponents('hsv'); - this.value.setRawValue(new Color([h, s, v, a + step], 'hsv'), { - forceEmit: false, - last: false, - }); - } - onKeyUp_(ev) { - const step = getStepForKey(getBaseStepForColor(true), getHorizontalStepKeys(ev)); - if (step === 0) { - return; - } - this.value.setRawValue(this.value.rawValue, { - forceEmit: true, - last: true, - }); - } - } - - const className$9 = ClassName('coltxt'); - function createModeSelectElement(doc) { - const selectElem = doc.createElement('select'); - const items = [ - { text: 'RGB', value: 'rgb' }, - { text: 'HSL', value: 'hsl' }, - { text: 'HSV', value: 'hsv' }, - ]; - selectElem.appendChild(items.reduce((frag, item) => { - const optElem = doc.createElement('option'); - optElem.textContent = item.text; - optElem.value = item.value; - frag.appendChild(optElem); - return frag; - }, doc.createDocumentFragment())); - return selectElem; - } - class ColorTextView { - constructor(doc, config) { - this.element = doc.createElement('div'); - this.element.classList.add(className$9()); - const modeElem = doc.createElement('div'); - modeElem.classList.add(className$9('m')); - this.modeElem_ = createModeSelectElement(doc); - this.modeElem_.classList.add(className$9('ms')); - modeElem.appendChild(this.modeSelectElement); - const modeMarkerElem = doc.createElement('div'); - modeMarkerElem.classList.add(className$9('mm')); - modeMarkerElem.appendChild(createSvgIconElement(doc, 'dropdown')); - modeElem.appendChild(modeMarkerElem); - this.element.appendChild(modeElem); - const textsElem = doc.createElement('div'); - textsElem.classList.add(className$9('w')); - this.element.appendChild(textsElem); - this.textsElem_ = textsElem; - this.textViews_ = config.textViews; - this.applyTextViews_(); - bindValue(config.colorMode, (mode) => { - this.modeElem_.value = mode; - }); - } - get modeSelectElement() { - return this.modeElem_; - } - get textViews() { - return this.textViews_; - } - set textViews(textViews) { - this.textViews_ = textViews; - this.applyTextViews_(); - } - applyTextViews_() { - removeChildElements(this.textsElem_); - const doc = this.element.ownerDocument; - this.textViews_.forEach((v) => { - const compElem = doc.createElement('div'); - compElem.classList.add(className$9('c')); - compElem.appendChild(v.element); - this.textsElem_.appendChild(compElem); - }); - } - } - - function createFormatter$2(type) { - return createNumberFormatter(type === 'float' ? 2 : 0); - } - function createConstraint$5(mode, type, index) { - const max = getColorMaxComponents(mode, type)[index]; - return new RangeConstraint({ - min: 0, - max: max, - }); - } - function createComponentController(doc, config, index) { - return new NumberTextController(doc, { - arrayPosition: index === 0 ? 'fst' : index === 3 - 1 ? 'lst' : 'mid', - baseStep: getBaseStepForColor(false), - parser: config.parser, - props: ValueMap.fromObject({ - draggingScale: config.colorType === 'float' ? 0.01 : 1, - formatter: createFormatter$2(config.colorType), - }), - value: createValue(0, { - constraint: createConstraint$5(config.colorMode, config.colorType, index), - }), - viewProps: config.viewProps, - }); - } - class ColorTextController { - constructor(doc, config) { - this.onModeSelectChange_ = this.onModeSelectChange_.bind(this); - this.colorType_ = config.colorType; - this.parser_ = config.parser; - this.value = config.value; - this.viewProps = config.viewProps; - this.colorMode = createValue(this.value.rawValue.mode); - this.ccs_ = this.createComponentControllers_(doc); - this.view = new ColorTextView(doc, { - colorMode: this.colorMode, - textViews: [this.ccs_[0].view, this.ccs_[1].view, this.ccs_[2].view], - }); - this.view.modeSelectElement.addEventListener('change', this.onModeSelectChange_); - } - createComponentControllers_(doc) { - const cc = { - colorMode: this.colorMode.rawValue, - colorType: this.colorType_, - parser: this.parser_, - viewProps: this.viewProps, - }; - const ccs = [ - createComponentController(doc, cc, 0), - createComponentController(doc, cc, 1), - createComponentController(doc, cc, 2), - ]; - ccs.forEach((cs, index) => { - connectValues({ - primary: this.value, - secondary: cs.value, - forward: (p) => { - return p.rawValue.getComponents(this.colorMode.rawValue, this.colorType_)[index]; - }, - backward: (p, s) => { - const pickedMode = this.colorMode.rawValue; - const comps = p.rawValue.getComponents(pickedMode, this.colorType_); - comps[index] = s.rawValue; - return new Color(appendAlphaComponent(removeAlphaComponent(comps), comps[3]), pickedMode, this.colorType_); - }, - }); - }); - return ccs; - } - onModeSelectChange_(ev) { - const selectElem = ev.currentTarget; - this.colorMode.rawValue = selectElem.value; - this.ccs_ = this.createComponentControllers_(this.view.element.ownerDocument); - this.view.textViews = [ - this.ccs_[0].view, - this.ccs_[1].view, - this.ccs_[2].view, - ]; - } - } - - const className$8 = ClassName('hpl'); - class HPaletteView { - constructor(doc, config) { - this.onValueChange_ = this.onValueChange_.bind(this); - this.value = config.value; - this.value.emitter.on('change', this.onValueChange_); - this.element = doc.createElement('div'); - this.element.classList.add(className$8()); - config.viewProps.bindTabIndex(this.element); - const colorElem = doc.createElement('div'); - colorElem.classList.add(className$8('c')); - this.element.appendChild(colorElem); - const markerElem = doc.createElement('div'); - markerElem.classList.add(className$8('m')); - this.element.appendChild(markerElem); - this.markerElem_ = markerElem; - this.update_(); - } - update_() { - const c = this.value.rawValue; - const [h] = c.getComponents('hsv'); - this.markerElem_.style.backgroundColor = colorToFunctionalRgbString(new Color([h, 100, 100], 'hsv')); - const left = mapRange(h, 0, 360, 0, 100); - this.markerElem_.style.left = `${left}%`; - } - onValueChange_() { - this.update_(); - } - } - - class HPaletteController { - constructor(doc, config) { - this.onKeyDown_ = this.onKeyDown_.bind(this); - this.onKeyUp_ = this.onKeyUp_.bind(this); - this.onPointerDown_ = this.onPointerDown_.bind(this); - this.onPointerMove_ = this.onPointerMove_.bind(this); - this.onPointerUp_ = this.onPointerUp_.bind(this); - this.value = config.value; - this.viewProps = config.viewProps; - this.view = new HPaletteView(doc, { - value: this.value, - viewProps: this.viewProps, - }); - this.ptHandler_ = new PointerHandler(this.view.element); - this.ptHandler_.emitter.on('down', this.onPointerDown_); - this.ptHandler_.emitter.on('move', this.onPointerMove_); - this.ptHandler_.emitter.on('up', this.onPointerUp_); - this.view.element.addEventListener('keydown', this.onKeyDown_); - this.view.element.addEventListener('keyup', this.onKeyUp_); - } - handlePointerEvent_(d, opts) { - if (!d.point) { - return; - } - const hue = mapRange(constrainRange(d.point.x, 0, d.bounds.width), 0, d.bounds.width, 0, 359); - const c = this.value.rawValue; - const [, s, v, a] = c.getComponents('hsv'); - this.value.setRawValue(new Color([hue, s, v, a], 'hsv'), opts); - } - onPointerDown_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: false, - last: false, - }); - } - onPointerMove_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: false, - last: false, - }); - } - onPointerUp_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: true, - last: true, - }); - } - onKeyDown_(ev) { - const step = getStepForKey(getBaseStepForColor(false), getHorizontalStepKeys(ev)); - if (step === 0) { - return; - } - const c = this.value.rawValue; - const [h, s, v, a] = c.getComponents('hsv'); - this.value.setRawValue(new Color([h + step, s, v, a], 'hsv'), { - forceEmit: false, - last: false, - }); - } - onKeyUp_(ev) { - const step = getStepForKey(getBaseStepForColor(false), getHorizontalStepKeys(ev)); - if (step === 0) { - return; - } - this.value.setRawValue(this.value.rawValue, { - forceEmit: true, - last: true, - }); - } - } - - const className$7 = ClassName('svp'); - const CANVAS_RESOL = 64; - class SvPaletteView { - constructor(doc, config) { - this.onValueChange_ = this.onValueChange_.bind(this); - this.value = config.value; - this.value.emitter.on('change', this.onValueChange_); - this.element = doc.createElement('div'); - this.element.classList.add(className$7()); - config.viewProps.bindTabIndex(this.element); - const canvasElem = doc.createElement('canvas'); - canvasElem.height = CANVAS_RESOL; - canvasElem.width = CANVAS_RESOL; - canvasElem.classList.add(className$7('c')); - this.element.appendChild(canvasElem); - this.canvasElement = canvasElem; - const markerElem = doc.createElement('div'); - markerElem.classList.add(className$7('m')); - this.element.appendChild(markerElem); - this.markerElem_ = markerElem; - this.update_(); - } - update_() { - const ctx = getCanvasContext(this.canvasElement); - if (!ctx) { - return; - } - const c = this.value.rawValue; - const hsvComps = c.getComponents('hsv'); - const width = this.canvasElement.width; - const height = this.canvasElement.height; - const imgData = ctx.getImageData(0, 0, width, height); - const data = imgData.data; - for (let iy = 0; iy < height; iy++) { - for (let ix = 0; ix < width; ix++) { - const s = mapRange(ix, 0, width, 0, 100); - const v = mapRange(iy, 0, height, 100, 0); - const rgbComps = hsvToRgbInt(hsvComps[0], s, v); - const i = (iy * width + ix) * 4; - data[i] = rgbComps[0]; - data[i + 1] = rgbComps[1]; - data[i + 2] = rgbComps[2]; - data[i + 3] = 255; - } - } - ctx.putImageData(imgData, 0, 0); - const left = mapRange(hsvComps[1], 0, 100, 0, 100); - this.markerElem_.style.left = `${left}%`; - const top = mapRange(hsvComps[2], 0, 100, 100, 0); - this.markerElem_.style.top = `${top}%`; - } - onValueChange_() { - this.update_(); - } - } - - class SvPaletteController { - constructor(doc, config) { - this.onKeyDown_ = this.onKeyDown_.bind(this); - this.onKeyUp_ = this.onKeyUp_.bind(this); - this.onPointerDown_ = this.onPointerDown_.bind(this); - this.onPointerMove_ = this.onPointerMove_.bind(this); - this.onPointerUp_ = this.onPointerUp_.bind(this); - this.value = config.value; - this.viewProps = config.viewProps; - this.view = new SvPaletteView(doc, { - value: this.value, - viewProps: this.viewProps, - }); - this.ptHandler_ = new PointerHandler(this.view.element); - this.ptHandler_.emitter.on('down', this.onPointerDown_); - this.ptHandler_.emitter.on('move', this.onPointerMove_); - this.ptHandler_.emitter.on('up', this.onPointerUp_); - this.view.element.addEventListener('keydown', this.onKeyDown_); - this.view.element.addEventListener('keyup', this.onKeyUp_); - } - handlePointerEvent_(d, opts) { - if (!d.point) { - return; - } - const saturation = mapRange(d.point.x, 0, d.bounds.width, 0, 100); - const value = mapRange(d.point.y, 0, d.bounds.height, 100, 0); - const [h, , , a] = this.value.rawValue.getComponents('hsv'); - this.value.setRawValue(new Color([h, saturation, value, a], 'hsv'), opts); - } - onPointerDown_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: false, - last: false, - }); - } - onPointerMove_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: false, - last: false, - }); - } - onPointerUp_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: true, - last: true, - }); - } - onKeyDown_(ev) { - if (isArrowKey(ev.key)) { - ev.preventDefault(); - } - const [h, s, v, a] = this.value.rawValue.getComponents('hsv'); - const baseStep = getBaseStepForColor(false); - const ds = getStepForKey(baseStep, getHorizontalStepKeys(ev)); - const dv = getStepForKey(baseStep, getVerticalStepKeys(ev)); - if (ds === 0 && dv === 0) { - return; - } - this.value.setRawValue(new Color([h, s + ds, v + dv, a], 'hsv'), { - forceEmit: false, - last: false, - }); - } - onKeyUp_(ev) { - const baseStep = getBaseStepForColor(false); - const ds = getStepForKey(baseStep, getHorizontalStepKeys(ev)); - const dv = getStepForKey(baseStep, getVerticalStepKeys(ev)); - if (ds === 0 && dv === 0) { - return; - } - this.value.setRawValue(this.value.rawValue, { - forceEmit: true, - last: true, - }); - } - } - - class ColorPickerController { - constructor(doc, config) { - this.value = config.value; - this.viewProps = config.viewProps; - this.hPaletteC_ = new HPaletteController(doc, { - value: this.value, - viewProps: this.viewProps, - }); - this.svPaletteC_ = new SvPaletteController(doc, { - value: this.value, - viewProps: this.viewProps, - }); - this.alphaIcs_ = config.supportsAlpha - ? { - palette: new APaletteController(doc, { - value: this.value, - viewProps: this.viewProps, - }), - text: new NumberTextController(doc, { - parser: parseNumber, - baseStep: 0.1, - props: ValueMap.fromObject({ - draggingScale: 0.01, - formatter: createNumberFormatter(2), - }), - value: createValue(0, { - constraint: new RangeConstraint({ min: 0, max: 1 }), - }), - viewProps: this.viewProps, - }), - } - : null; - if (this.alphaIcs_) { - connectValues({ - primary: this.value, - secondary: this.alphaIcs_.text.value, - forward: (p) => { - return p.rawValue.getComponents()[3]; - }, - backward: (p, s) => { - const comps = p.rawValue.getComponents(); - comps[3] = s.rawValue; - return new Color(comps, p.rawValue.mode); - }, - }); - } - this.textC_ = new ColorTextController(doc, { - colorType: config.colorType, - parser: parseNumber, - value: this.value, - viewProps: this.viewProps, - }); - this.view = new ColorPickerView(doc, { - alphaViews: this.alphaIcs_ - ? { - palette: this.alphaIcs_.palette.view, - text: this.alphaIcs_.text.view, - } - : null, - hPaletteView: this.hPaletteC_.view, - supportsAlpha: config.supportsAlpha, - svPaletteView: this.svPaletteC_.view, - textView: this.textC_.view, - }); - } - get textController() { - return this.textC_; - } - } - - const className$6 = ClassName('colsw'); - class ColorSwatchView { - constructor(doc, config) { - this.onValueChange_ = this.onValueChange_.bind(this); - config.value.emitter.on('change', this.onValueChange_); - this.value = config.value; - this.element = doc.createElement('div'); - this.element.classList.add(className$6()); - config.viewProps.bindClassModifiers(this.element); - const swatchElem = doc.createElement('div'); - swatchElem.classList.add(className$6('sw')); - this.element.appendChild(swatchElem); - this.swatchElem_ = swatchElem; - const buttonElem = doc.createElement('button'); - buttonElem.classList.add(className$6('b')); - config.viewProps.bindDisabled(buttonElem); - this.element.appendChild(buttonElem); - this.buttonElement = buttonElem; - this.update_(); - } - update_() { - const value = this.value.rawValue; - this.swatchElem_.style.backgroundColor = colorToHexRgbaString(value); - } - onValueChange_() { - this.update_(); - } - } - - class ColorSwatchController { - constructor(doc, config) { - this.value = config.value; - this.viewProps = config.viewProps; - this.view = new ColorSwatchView(doc, { - value: this.value, - viewProps: this.viewProps, - }); - } - } - - class ColorController { - constructor(doc, config) { - this.onButtonBlur_ = this.onButtonBlur_.bind(this); - this.onButtonClick_ = this.onButtonClick_.bind(this); - this.onPopupChildBlur_ = this.onPopupChildBlur_.bind(this); - this.onPopupChildKeydown_ = this.onPopupChildKeydown_.bind(this); - this.value = config.value; - this.viewProps = config.viewProps; - this.foldable_ = Foldable.create(config.expanded); - this.swatchC_ = new ColorSwatchController(doc, { - value: this.value, - viewProps: this.viewProps, - }); - const buttonElem = this.swatchC_.view.buttonElement; - buttonElem.addEventListener('blur', this.onButtonBlur_); - buttonElem.addEventListener('click', this.onButtonClick_); - this.textC_ = new TextController(doc, { - parser: config.parser, - props: ValueMap.fromObject({ - formatter: config.formatter, - }), - value: this.value, - viewProps: this.viewProps, - }); - this.view = new ColorView(doc, { - foldable: this.foldable_, - pickerLayout: config.pickerLayout, - }); - this.view.swatchElement.appendChild(this.swatchC_.view.element); - this.view.textElement.appendChild(this.textC_.view.element); - this.popC_ = - config.pickerLayout === 'popup' - ? new PopupController(doc, { - viewProps: this.viewProps, - }) - : null; - const pickerC = new ColorPickerController(doc, { - colorType: config.colorType, - supportsAlpha: config.supportsAlpha, - value: this.value, - viewProps: this.viewProps, - }); - pickerC.view.allFocusableElements.forEach((elem) => { - elem.addEventListener('blur', this.onPopupChildBlur_); - elem.addEventListener('keydown', this.onPopupChildKeydown_); - }); - this.pickerC_ = pickerC; - if (this.popC_) { - this.view.element.appendChild(this.popC_.view.element); - this.popC_.view.element.appendChild(pickerC.view.element); - connectValues({ - primary: this.foldable_.value('expanded'), - secondary: this.popC_.shows, - forward: (p) => p.rawValue, - backward: (_, s) => s.rawValue, - }); - } - else if (this.view.pickerElement) { - this.view.pickerElement.appendChild(this.pickerC_.view.element); - bindFoldable(this.foldable_, this.view.pickerElement); - } - } - get textController() { - return this.textC_; - } - onButtonBlur_(e) { - if (!this.popC_) { - return; - } - const elem = this.view.element; - const nextTarget = forceCast(e.relatedTarget); - if (!nextTarget || !elem.contains(nextTarget)) { - this.popC_.shows.rawValue = false; - } - } - onButtonClick_() { - this.foldable_.set('expanded', !this.foldable_.get('expanded')); - if (this.foldable_.get('expanded')) { - this.pickerC_.view.allFocusableElements[0].focus(); - } - } - onPopupChildBlur_(ev) { - if (!this.popC_) { - return; - } - const elem = this.popC_.view.element; - const nextTarget = findNextTarget(ev); - if (nextTarget && elem.contains(nextTarget)) { - return; - } - if (nextTarget && - nextTarget === this.swatchC_.view.buttonElement && - !supportsTouch(elem.ownerDocument)) { - return; - } - this.popC_.shows.rawValue = false; - } - onPopupChildKeydown_(ev) { - if (this.popC_) { - if (ev.key === 'Escape') { - this.popC_.shows.rawValue = false; - } - } - else if (this.view.pickerElement) { - if (ev.key === 'Escape') { - this.swatchC_.view.buttonElement.focus(); - } - } - } - } - - function colorFromObject(value, opt_type) { - if (Color.isColorObject(value)) { - return Color.fromObject(value, opt_type); - } - return Color.black(opt_type); - } - function colorToRgbNumber(value) { - return removeAlphaComponent(value.getComponents('rgb')).reduce((result, comp) => { - return (result << 8) | (Math.floor(comp) & 0xff); - }, 0); - } - function colorToRgbaNumber(value) { - return (value.getComponents('rgb').reduce((result, comp, index) => { - const hex = Math.floor(index === 3 ? comp * 255 : comp) & 0xff; - return (result << 8) | hex; - }, 0) >>> 0); - } - function numberToRgbColor(num) { - return new Color([(num >> 16) & 0xff, (num >> 8) & 0xff, num & 0xff], 'rgb'); - } - function numberToRgbaColor(num) { - return new Color([ - (num >> 24) & 0xff, - (num >> 16) & 0xff, - (num >> 8) & 0xff, - mapRange(num & 0xff, 0, 255, 0, 1), - ], 'rgb'); - } - function colorFromRgbNumber(value) { - if (typeof value !== 'number') { - return Color.black(); - } - return numberToRgbColor(value); - } - function colorFromRgbaNumber(value) { - if (typeof value !== 'number') { - return Color.black(); - } - return numberToRgbaColor(value); - } - - function createColorStringWriter(format) { - const stringify = findColorStringifier(format); - return stringify - ? (target, value) => { - writePrimitive(target, stringify(value)); - } - : null; - } - function createColorNumberWriter(supportsAlpha) { - const colorToNumber = supportsAlpha ? colorToRgbaNumber : colorToRgbNumber; - return (target, value) => { - writePrimitive(target, colorToNumber(value)); - }; - } - function writeRgbaColorObject(target, value, opt_type) { - const obj = value.toRgbaObject(opt_type); - target.writeProperty('r', obj.r); - target.writeProperty('g', obj.g); - target.writeProperty('b', obj.b); - target.writeProperty('a', obj.a); - } - function writeRgbColorObject(target, value, opt_type) { - const obj = value.toRgbaObject(opt_type); - target.writeProperty('r', obj.r); - target.writeProperty('g', obj.g); - target.writeProperty('b', obj.b); - } - function createColorObjectWriter(supportsAlpha, opt_type) { - return (target, inValue) => { - if (supportsAlpha) { - writeRgbaColorObject(target, inValue, opt_type); - } - else { - writeRgbColorObject(target, inValue, opt_type); - } - }; - } - - function shouldSupportAlpha$1(inputParams) { - var _a; - if ((inputParams === null || inputParams === void 0 ? void 0 : inputParams.alpha) || ((_a = inputParams === null || inputParams === void 0 ? void 0 : inputParams.color) === null || _a === void 0 ? void 0 : _a.alpha)) { - return true; - } - return false; - } - function createFormatter$1(supportsAlpha) { - return supportsAlpha - ? (v) => colorToHexRgbaString(v, '0x') - : (v) => colorToHexRgbString(v, '0x'); - } - function isForColor(params) { - if ('color' in params) { - return true; - } - if ('view' in params && params.view === 'color') { - return true; - } - return false; - } - const NumberColorInputPlugin = { - id: 'input-color-number', - type: 'input', - accept: (value, params) => { - if (typeof value !== 'number') { - return null; - } - if (!isForColor(params)) { - return null; - } - const result = parseColorInputParams(params); - return result - ? { - initialValue: value, - params: result, - } - : null; - }, - binding: { - reader: (args) => { - return shouldSupportAlpha$1(args.params) - ? colorFromRgbaNumber - : colorFromRgbNumber; - }, - equals: Color.equals, - writer: (args) => { - return createColorNumberWriter(shouldSupportAlpha$1(args.params)); - }, - }, - controller: (args) => { - const supportsAlpha = shouldSupportAlpha$1(args.params); - const expanded = 'expanded' in args.params ? args.params.expanded : undefined; - const picker = 'picker' in args.params ? args.params.picker : undefined; - return new ColorController(args.document, { - colorType: 'int', - expanded: expanded !== null && expanded !== void 0 ? expanded : false, - formatter: createFormatter$1(supportsAlpha), - parser: createColorStringParser('int'), - pickerLayout: picker !== null && picker !== void 0 ? picker : 'popup', - supportsAlpha: supportsAlpha, - value: args.value, - viewProps: args.viewProps, - }); - }, - }; - - function shouldSupportAlpha(initialValue) { - return Color.isRgbaColorObject(initialValue); - } - function createColorObjectReader(opt_type) { - return (value) => { - return colorFromObject(value, opt_type); - }; - } - function createColorObjectFormatter(supportsAlpha, type) { - return (value) => { - if (supportsAlpha) { - return colorToObjectRgbaString(value, type); - } - return colorToObjectRgbString(value, type); - }; - } - const ObjectColorInputPlugin = { - id: 'input-color-object', - type: 'input', - accept: (value, params) => { - if (!Color.isColorObject(value)) { - return null; - } - const result = parseColorInputParams(params); - return result - ? { - initialValue: value, - params: result, - } - : null; - }, - binding: { - reader: (args) => createColorObjectReader(extractColorType(args.params)), - equals: Color.equals, - writer: (args) => createColorObjectWriter(shouldSupportAlpha(args.initialValue), extractColorType(args.params)), - }, - controller: (args) => { - var _a; - const supportsAlpha = Color.isRgbaColorObject(args.initialValue); - const expanded = 'expanded' in args.params ? args.params.expanded : undefined; - const picker = 'picker' in args.params ? args.params.picker : undefined; - const type = (_a = extractColorType(args.params)) !== null && _a !== void 0 ? _a : 'int'; - return new ColorController(args.document, { - colorType: type, - expanded: expanded !== null && expanded !== void 0 ? expanded : false, - formatter: createColorObjectFormatter(supportsAlpha, type), - parser: createColorStringParser(type), - pickerLayout: picker !== null && picker !== void 0 ? picker : 'popup', - supportsAlpha: supportsAlpha, - value: args.value, - viewProps: args.viewProps, - }); - }, - }; - - const StringColorInputPlugin = { - id: 'input-color-string', - type: 'input', - accept: (value, params) => { - if (typeof value !== 'string') { - return null; - } - if ('view' in params && params.view === 'text') { - return null; - } - const format = detectStringColorFormat(value, extractColorType(params)); - if (!format) { - return null; - } - const stringifier = findColorStringifier(format); - if (!stringifier) { - return null; - } - const result = parseColorInputParams(params); - return result - ? { - initialValue: value, - params: result, - } - : null; - }, - binding: { - reader: (args) => { var _a; return createColorStringBindingReader((_a = extractColorType(args.params)) !== null && _a !== void 0 ? _a : 'int'); }, - equals: Color.equals, - writer: (args) => { - const format = detectStringColorFormat(args.initialValue, extractColorType(args.params)); - if (!format) { - throw TpError.shouldNeverHappen(); - } - const writer = createColorStringWriter(format); - if (!writer) { - throw TpError.notBindable(); - } - return writer; - }, - }, - controller: (args) => { - const format = detectStringColorFormat(args.initialValue, extractColorType(args.params)); - if (!format) { - throw TpError.shouldNeverHappen(); - } - const stringifier = findColorStringifier(format); - if (!stringifier) { - throw TpError.shouldNeverHappen(); - } - const expanded = 'expanded' in args.params ? args.params.expanded : undefined; - const picker = 'picker' in args.params ? args.params.picker : undefined; - return new ColorController(args.document, { - colorType: format.type, - expanded: expanded !== null && expanded !== void 0 ? expanded : false, - formatter: stringifier, - parser: createColorStringParser(format.type), - pickerLayout: picker !== null && picker !== void 0 ? picker : 'popup', - supportsAlpha: format.alpha, - value: args.value, - viewProps: args.viewProps, - }); - }, - }; - - class PointNdConstraint { - constructor(config) { - this.components = config.components; - this.asm_ = config.assembly; - } - constrain(value) { - const comps = this.asm_ - .toComponents(value) - .map((comp, index) => { var _a, _b; return (_b = (_a = this.components[index]) === null || _a === void 0 ? void 0 : _a.constrain(comp)) !== null && _b !== void 0 ? _b : comp; }); - return this.asm_.fromComponents(comps); - } - } - - const className$5 = ClassName('pndtxt'); - class PointNdTextView { - constructor(doc, config) { - this.textViews = config.textViews; - this.element = doc.createElement('div'); - this.element.classList.add(className$5()); - this.textViews.forEach((v) => { - const axisElem = doc.createElement('div'); - axisElem.classList.add(className$5('a')); - axisElem.appendChild(v.element); - this.element.appendChild(axisElem); - }); - } - } - - function createAxisController(doc, config, index) { - return new NumberTextController(doc, { - arrayPosition: index === 0 ? 'fst' : index === config.axes.length - 1 ? 'lst' : 'mid', - baseStep: config.axes[index].baseStep, - parser: config.parser, - props: config.axes[index].textProps, - value: createValue(0, { - constraint: config.axes[index].constraint, - }), - viewProps: config.viewProps, - }); - } - class PointNdTextController { - constructor(doc, config) { - this.value = config.value; - this.viewProps = config.viewProps; - this.acs_ = config.axes.map((_, index) => createAxisController(doc, config, index)); - this.acs_.forEach((c, index) => { - connectValues({ - primary: this.value, - secondary: c.value, - forward: (p) => { - return config.assembly.toComponents(p.rawValue)[index]; - }, - backward: (p, s) => { - const comps = config.assembly.toComponents(p.rawValue); - comps[index] = s.rawValue; - return config.assembly.fromComponents(comps); - }, - }); - }); - this.view = new PointNdTextView(doc, { - textViews: this.acs_.map((ac) => ac.view), - }); - } - } - - function createStepConstraint(params, initialValue) { - if ('step' in params && !isEmpty(params.step)) { - return new StepConstraint(params.step, initialValue); - } - return null; - } - function createRangeConstraint(params) { - if (('max' in params && !isEmpty(params.max)) || - ('min' in params && !isEmpty(params.min))) { - return new RangeConstraint({ - max: params.max, - min: params.min, - }); - } - return null; - } - function createConstraint$4(params, - initialValue) { - const constraints = []; - const sc = createStepConstraint(params, initialValue); - if (sc) { - constraints.push(sc); - } - const rc = createRangeConstraint(params); - if (rc) { - constraints.push(rc); - } - const lc = createListConstraint(params.options); - if (lc) { - constraints.push(lc); - } - return new CompositeConstraint(constraints); - } - function findRange(constraint) { - const c = constraint ? findConstraint(constraint, RangeConstraint) : null; - if (!c) { - return [undefined, undefined]; - } - return [c.minValue, c.maxValue]; - } - function estimateSuitableRange(constraint) { - const [min, max] = findRange(constraint); - return [min !== null && min !== void 0 ? min : 0, max !== null && max !== void 0 ? max : 100]; - } - const NumberInputPlugin = { - id: 'input-number', - type: 'input', - accept: (value, params) => { - if (typeof value !== 'number') { - return null; - } - const p = ParamsParsers; - const result = parseParams(params, { - format: p.optional.function, - max: p.optional.number, - min: p.optional.number, - options: p.optional.custom(parseListOptions), - step: p.optional.number, - }); - return result - ? { - initialValue: value, - params: result, - } - : null; - }, - binding: { - reader: (_args) => numberFromUnknown, - constraint: (args) => createConstraint$4(args.params, args.initialValue), - writer: (_args) => writePrimitive, - }, - controller: (args) => { - var _a, _b; - const value = args.value; - const c = args.constraint; - if (c && findConstraint(c, ListConstraint)) { - return new ListController(args.document, { - props: ValueMap.fromObject({ - options: (_a = findListItems(c)) !== null && _a !== void 0 ? _a : [], - }), - value: value, - viewProps: args.viewProps, - }); - } - const formatter = (_b = ('format' in args.params ? args.params.format : undefined)) !== null && _b !== void 0 ? _b : createNumberFormatter(getSuitableDecimalDigits(c, value.rawValue)); - if (c && findConstraint(c, RangeConstraint)) { - const [min, max] = estimateSuitableRange(c); - return new SliderTextController(args.document, { - baseStep: getBaseStep(c), - parser: parseNumber, - sliderProps: ValueMap.fromObject({ - maxValue: max, - minValue: min, - }), - textProps: ValueMap.fromObject({ - draggingScale: getSuitableDraggingScale(c, value.rawValue), - formatter: formatter, - }), - value: value, - viewProps: args.viewProps, - }); - } - return new NumberTextController(args.document, { - baseStep: getBaseStep(c), - parser: parseNumber, - props: ValueMap.fromObject({ - draggingScale: getSuitableDraggingScale(c, value.rawValue), - formatter: formatter, - }), - value: value, - viewProps: args.viewProps, - }); - }, - }; - - class Point2d { - constructor(x = 0, y = 0) { - this.x = x; - this.y = y; - } - getComponents() { - return [this.x, this.y]; - } - static isObject(obj) { - if (isEmpty(obj)) { - return false; - } - const x = obj.x; - const y = obj.y; - if (typeof x !== 'number' || typeof y !== 'number') { - return false; - } - return true; - } - static equals(v1, v2) { - return v1.x === v2.x && v1.y === v2.y; - } - toObject() { - return { - x: this.x, - y: this.y, - }; - } - } - const Point2dAssembly = { - toComponents: (p) => p.getComponents(), - fromComponents: (comps) => new Point2d(...comps), - }; - - const className$4 = ClassName('p2d'); - class Point2dView { - constructor(doc, config) { - this.element = doc.createElement('div'); - this.element.classList.add(className$4()); - config.viewProps.bindClassModifiers(this.element); - bindValue(config.expanded, valueToClassName(this.element, className$4(undefined, 'expanded'))); - const headElem = doc.createElement('div'); - headElem.classList.add(className$4('h')); - this.element.appendChild(headElem); - const buttonElem = doc.createElement('button'); - buttonElem.classList.add(className$4('b')); - buttonElem.appendChild(createSvgIconElement(doc, 'p2dpad')); - config.viewProps.bindDisabled(buttonElem); - headElem.appendChild(buttonElem); - this.buttonElement = buttonElem; - const textElem = doc.createElement('div'); - textElem.classList.add(className$4('t')); - headElem.appendChild(textElem); - this.textElement = textElem; - if (config.pickerLayout === 'inline') { - const pickerElem = doc.createElement('div'); - pickerElem.classList.add(className$4('p')); - this.element.appendChild(pickerElem); - this.pickerElement = pickerElem; - } - else { - this.pickerElement = null; - } - } - } - - const className$3 = ClassName('p2dp'); - class Point2dPickerView { - constructor(doc, config) { - this.onFoldableChange_ = this.onFoldableChange_.bind(this); - this.onValueChange_ = this.onValueChange_.bind(this); - this.invertsY_ = config.invertsY; - this.maxValue_ = config.maxValue; - this.element = doc.createElement('div'); - this.element.classList.add(className$3()); - if (config.layout === 'popup') { - this.element.classList.add(className$3(undefined, 'p')); - } - const padElem = doc.createElement('div'); - padElem.classList.add(className$3('p')); - config.viewProps.bindTabIndex(padElem); - this.element.appendChild(padElem); - this.padElement = padElem; - const svgElem = doc.createElementNS(SVG_NS, 'svg'); - svgElem.classList.add(className$3('g')); - this.padElement.appendChild(svgElem); - this.svgElem_ = svgElem; - const xAxisElem = doc.createElementNS(SVG_NS, 'line'); - xAxisElem.classList.add(className$3('ax')); - xAxisElem.setAttributeNS(null, 'x1', '0'); - xAxisElem.setAttributeNS(null, 'y1', '50%'); - xAxisElem.setAttributeNS(null, 'x2', '100%'); - xAxisElem.setAttributeNS(null, 'y2', '50%'); - this.svgElem_.appendChild(xAxisElem); - const yAxisElem = doc.createElementNS(SVG_NS, 'line'); - yAxisElem.classList.add(className$3('ax')); - yAxisElem.setAttributeNS(null, 'x1', '50%'); - yAxisElem.setAttributeNS(null, 'y1', '0'); - yAxisElem.setAttributeNS(null, 'x2', '50%'); - yAxisElem.setAttributeNS(null, 'y2', '100%'); - this.svgElem_.appendChild(yAxisElem); - const lineElem = doc.createElementNS(SVG_NS, 'line'); - lineElem.classList.add(className$3('l')); - lineElem.setAttributeNS(null, 'x1', '50%'); - lineElem.setAttributeNS(null, 'y1', '50%'); - this.svgElem_.appendChild(lineElem); - this.lineElem_ = lineElem; - const markerElem = doc.createElement('div'); - markerElem.classList.add(className$3('m')); - this.padElement.appendChild(markerElem); - this.markerElem_ = markerElem; - config.value.emitter.on('change', this.onValueChange_); - this.value = config.value; - this.update_(); - } - get allFocusableElements() { - return [this.padElement]; - } - update_() { - const [x, y] = this.value.rawValue.getComponents(); - const max = this.maxValue_; - const px = mapRange(x, -max, +max, 0, 100); - const py = mapRange(y, -max, +max, 0, 100); - const ipy = this.invertsY_ ? 100 - py : py; - this.lineElem_.setAttributeNS(null, 'x2', `${px}%`); - this.lineElem_.setAttributeNS(null, 'y2', `${ipy}%`); - this.markerElem_.style.left = `${px}%`; - this.markerElem_.style.top = `${ipy}%`; - } - onValueChange_() { - this.update_(); - } - onFoldableChange_() { - this.update_(); - } - } - - function computeOffset(ev, baseSteps, invertsY) { - return [ - getStepForKey(baseSteps[0], getHorizontalStepKeys(ev)), - getStepForKey(baseSteps[1], getVerticalStepKeys(ev)) * (invertsY ? 1 : -1), - ]; - } - class Point2dPickerController { - constructor(doc, config) { - this.onPadKeyDown_ = this.onPadKeyDown_.bind(this); - this.onPadKeyUp_ = this.onPadKeyUp_.bind(this); - this.onPointerDown_ = this.onPointerDown_.bind(this); - this.onPointerMove_ = this.onPointerMove_.bind(this); - this.onPointerUp_ = this.onPointerUp_.bind(this); - this.value = config.value; - this.viewProps = config.viewProps; - this.baseSteps_ = config.baseSteps; - this.maxValue_ = config.maxValue; - this.invertsY_ = config.invertsY; - this.view = new Point2dPickerView(doc, { - invertsY: this.invertsY_, - layout: config.layout, - maxValue: this.maxValue_, - value: this.value, - viewProps: this.viewProps, - }); - this.ptHandler_ = new PointerHandler(this.view.padElement); - this.ptHandler_.emitter.on('down', this.onPointerDown_); - this.ptHandler_.emitter.on('move', this.onPointerMove_); - this.ptHandler_.emitter.on('up', this.onPointerUp_); - this.view.padElement.addEventListener('keydown', this.onPadKeyDown_); - this.view.padElement.addEventListener('keyup', this.onPadKeyUp_); - } - handlePointerEvent_(d, opts) { - if (!d.point) { - return; - } - const max = this.maxValue_; - const px = mapRange(d.point.x, 0, d.bounds.width, -max, +max); - const py = mapRange(this.invertsY_ ? d.bounds.height - d.point.y : d.point.y, 0, d.bounds.height, -max, +max); - this.value.setRawValue(new Point2d(px, py), opts); - } - onPointerDown_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: false, - last: false, - }); - } - onPointerMove_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: false, - last: false, - }); - } - onPointerUp_(ev) { - this.handlePointerEvent_(ev.data, { - forceEmit: true, - last: true, - }); - } - onPadKeyDown_(ev) { - if (isArrowKey(ev.key)) { - ev.preventDefault(); - } - const [dx, dy] = computeOffset(ev, this.baseSteps_, this.invertsY_); - if (dx === 0 && dy === 0) { - return; - } - this.value.setRawValue(new Point2d(this.value.rawValue.x + dx, this.value.rawValue.y + dy), { - forceEmit: false, - last: false, - }); - } - onPadKeyUp_(ev) { - const [dx, dy] = computeOffset(ev, this.baseSteps_, this.invertsY_); - if (dx === 0 && dy === 0) { - return; - } - this.value.setRawValue(this.value.rawValue, { - forceEmit: true, - last: true, - }); - } - } - - class Point2dController { - constructor(doc, config) { - var _a, _b; - this.onPopupChildBlur_ = this.onPopupChildBlur_.bind(this); - this.onPopupChildKeydown_ = this.onPopupChildKeydown_.bind(this); - this.onPadButtonBlur_ = this.onPadButtonBlur_.bind(this); - this.onPadButtonClick_ = this.onPadButtonClick_.bind(this); - this.value = config.value; - this.viewProps = config.viewProps; - this.foldable_ = Foldable.create(config.expanded); - this.popC_ = - config.pickerLayout === 'popup' - ? new PopupController(doc, { - viewProps: this.viewProps, - }) - : null; - const padC = new Point2dPickerController(doc, { - baseSteps: [config.axes[0].baseStep, config.axes[1].baseStep], - invertsY: config.invertsY, - layout: config.pickerLayout, - maxValue: config.maxValue, - value: this.value, - viewProps: this.viewProps, - }); - padC.view.allFocusableElements.forEach((elem) => { - elem.addEventListener('blur', this.onPopupChildBlur_); - elem.addEventListener('keydown', this.onPopupChildKeydown_); - }); - this.pickerC_ = padC; - this.textC_ = new PointNdTextController(doc, { - assembly: Point2dAssembly, - axes: config.axes, - parser: config.parser, - value: this.value, - viewProps: this.viewProps, - }); - this.view = new Point2dView(doc, { - expanded: this.foldable_.value('expanded'), - pickerLayout: config.pickerLayout, - viewProps: this.viewProps, - }); - this.view.textElement.appendChild(this.textC_.view.element); - (_a = this.view.buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener('blur', this.onPadButtonBlur_); - (_b = this.view.buttonElement) === null || _b === void 0 ? void 0 : _b.addEventListener('click', this.onPadButtonClick_); - if (this.popC_) { - this.view.element.appendChild(this.popC_.view.element); - this.popC_.view.element.appendChild(this.pickerC_.view.element); - connectValues({ - primary: this.foldable_.value('expanded'), - secondary: this.popC_.shows, - forward: (p) => p.rawValue, - backward: (_, s) => s.rawValue, - }); - } - else if (this.view.pickerElement) { - this.view.pickerElement.appendChild(this.pickerC_.view.element); - bindFoldable(this.foldable_, this.view.pickerElement); - } - } - onPadButtonBlur_(e) { - if (!this.popC_) { - return; - } - const elem = this.view.element; - const nextTarget = forceCast(e.relatedTarget); - if (!nextTarget || !elem.contains(nextTarget)) { - this.popC_.shows.rawValue = false; - } - } - onPadButtonClick_() { - this.foldable_.set('expanded', !this.foldable_.get('expanded')); - if (this.foldable_.get('expanded')) { - this.pickerC_.view.allFocusableElements[0].focus(); - } - } - onPopupChildBlur_(ev) { - if (!this.popC_) { - return; - } - const elem = this.popC_.view.element; - const nextTarget = findNextTarget(ev); - if (nextTarget && elem.contains(nextTarget)) { - return; - } - if (nextTarget && - nextTarget === this.view.buttonElement && - !supportsTouch(elem.ownerDocument)) { - return; - } - this.popC_.shows.rawValue = false; - } - onPopupChildKeydown_(ev) { - if (this.popC_) { - if (ev.key === 'Escape') { - this.popC_.shows.rawValue = false; - } - } - else if (this.view.pickerElement) { - if (ev.key === 'Escape') { - this.view.buttonElement.focus(); - } - } - } - } - - function point2dFromUnknown(value) { - return Point2d.isObject(value) - ? new Point2d(value.x, value.y) - : new Point2d(); - } - function writePoint2d(target, value) { - target.writeProperty('x', value.x); - target.writeProperty('y', value.y); - } - - function createDimensionConstraint(params, initialValue) { - if (!params) { - return undefined; - } - const constraints = []; - const cs = createStepConstraint(params, initialValue); - if (cs) { - constraints.push(cs); - } - const rs = createRangeConstraint(params); - if (rs) { - constraints.push(rs); - } - return new CompositeConstraint(constraints); - } - function createConstraint$3(params, initialValue) { - return new PointNdConstraint({ - assembly: Point2dAssembly, - components: [ - createDimensionConstraint('x' in params ? params.x : undefined, initialValue.x), - createDimensionConstraint('y' in params ? params.y : undefined, initialValue.y), - ], - }); - } - function getSuitableMaxDimensionValue(constraint, rawValue) { - var _a, _b; - const rc = constraint && findConstraint(constraint, RangeConstraint); - if (rc) { - return Math.max(Math.abs((_a = rc.minValue) !== null && _a !== void 0 ? _a : 0), Math.abs((_b = rc.maxValue) !== null && _b !== void 0 ? _b : 0)); - } - const step = getBaseStep(constraint); - return Math.max(Math.abs(step) * 10, Math.abs(rawValue) * 10); - } - function getSuitableMaxValue(initialValue, constraint) { - const xc = constraint instanceof PointNdConstraint - ? constraint.components[0] - : undefined; - const yc = constraint instanceof PointNdConstraint - ? constraint.components[1] - : undefined; - const xr = getSuitableMaxDimensionValue(xc, initialValue.x); - const yr = getSuitableMaxDimensionValue(yc, initialValue.y); - return Math.max(xr, yr); - } - function createAxis$2(initialValue, constraint) { - return { - baseStep: getBaseStep(constraint), - constraint: constraint, - textProps: ValueMap.fromObject({ - draggingScale: getSuitableDraggingScale(constraint, initialValue), - formatter: createNumberFormatter(getSuitableDecimalDigits(constraint, initialValue)), - }), - }; - } - function shouldInvertY(params) { - if (!('y' in params)) { - return false; - } - const yParams = params.y; - if (!yParams) { - return false; - } - return 'inverted' in yParams ? !!yParams.inverted : false; - } - const Point2dInputPlugin = { - id: 'input-point2d', - type: 'input', - accept: (value, params) => { - if (!Point2d.isObject(value)) { - return null; - } - const p = ParamsParsers; - const result = parseParams(params, { - expanded: p.optional.boolean, - picker: p.optional.custom(parsePickerLayout), - x: p.optional.custom(parsePointDimensionParams), - y: p.optional.object({ - inverted: p.optional.boolean, - max: p.optional.number, - min: p.optional.number, - step: p.optional.number, - }), - }); - return result - ? { - initialValue: value, - params: result, - } - : null; - }, - binding: { - reader: (_args) => point2dFromUnknown, - constraint: (args) => createConstraint$3(args.params, args.initialValue), - equals: Point2d.equals, - writer: (_args) => writePoint2d, - }, - controller: (args) => { - const doc = args.document; - const value = args.value; - const c = args.constraint; - if (!(c instanceof PointNdConstraint)) { - throw TpError.shouldNeverHappen(); - } - const expanded = 'expanded' in args.params ? args.params.expanded : undefined; - const picker = 'picker' in args.params ? args.params.picker : undefined; - return new Point2dController(doc, { - axes: [ - createAxis$2(value.rawValue.x, c.components[0]), - createAxis$2(value.rawValue.y, c.components[1]), - ], - expanded: expanded !== null && expanded !== void 0 ? expanded : false, - invertsY: shouldInvertY(args.params), - maxValue: getSuitableMaxValue(value.rawValue, c), - parser: parseNumber, - pickerLayout: picker !== null && picker !== void 0 ? picker : 'popup', - value: value, - viewProps: args.viewProps, - }); - }, - }; - - class Point3d { - constructor(x = 0, y = 0, z = 0) { - this.x = x; - this.y = y; - this.z = z; - } - getComponents() { - return [this.x, this.y, this.z]; - } - static isObject(obj) { - if (isEmpty(obj)) { - return false; - } - const x = obj.x; - const y = obj.y; - const z = obj.z; - if (typeof x !== 'number' || - typeof y !== 'number' || - typeof z !== 'number') { - return false; - } - return true; - } - static equals(v1, v2) { - return v1.x === v2.x && v1.y === v2.y && v1.z === v2.z; - } - toObject() { - return { - x: this.x, - y: this.y, - z: this.z, - }; - } - } - const Point3dAssembly = { - toComponents: (p) => p.getComponents(), - fromComponents: (comps) => new Point3d(...comps), - }; - - function point3dFromUnknown(value) { - return Point3d.isObject(value) - ? new Point3d(value.x, value.y, value.z) - : new Point3d(); - } - function writePoint3d(target, value) { - target.writeProperty('x', value.x); - target.writeProperty('y', value.y); - target.writeProperty('z', value.z); - } - - function createConstraint$2(params, initialValue) { - return new PointNdConstraint({ - assembly: Point3dAssembly, - components: [ - createDimensionConstraint('x' in params ? params.x : undefined, initialValue.x), - createDimensionConstraint('y' in params ? params.y : undefined, initialValue.y), - createDimensionConstraint('z' in params ? params.z : undefined, initialValue.z), - ], - }); - } - function createAxis$1(initialValue, constraint) { - return { - baseStep: getBaseStep(constraint), - constraint: constraint, - textProps: ValueMap.fromObject({ - draggingScale: getSuitableDraggingScale(constraint, initialValue), - formatter: createNumberFormatter(getSuitableDecimalDigits(constraint, initialValue)), - }), - }; - } - const Point3dInputPlugin = { - id: 'input-point3d', - type: 'input', - accept: (value, params) => { - if (!Point3d.isObject(value)) { - return null; - } - const p = ParamsParsers; - const result = parseParams(params, { - x: p.optional.custom(parsePointDimensionParams), - y: p.optional.custom(parsePointDimensionParams), - z: p.optional.custom(parsePointDimensionParams), - }); - return result - ? { - initialValue: value, - params: result, - } - : null; - }, - binding: { - reader: (_args) => point3dFromUnknown, - constraint: (args) => createConstraint$2(args.params, args.initialValue), - equals: Point3d.equals, - writer: (_args) => writePoint3d, - }, - controller: (args) => { - const value = args.value; - const c = args.constraint; - if (!(c instanceof PointNdConstraint)) { - throw TpError.shouldNeverHappen(); - } - return new PointNdTextController(args.document, { - assembly: Point3dAssembly, - axes: [ - createAxis$1(value.rawValue.x, c.components[0]), - createAxis$1(value.rawValue.y, c.components[1]), - createAxis$1(value.rawValue.z, c.components[2]), - ], - parser: parseNumber, - value: value, - viewProps: args.viewProps, - }); - }, - }; - - class Point4d { - constructor(x = 0, y = 0, z = 0, w = 0) { - this.x = x; - this.y = y; - this.z = z; - this.w = w; - } - getComponents() { - return [this.x, this.y, this.z, this.w]; - } - static isObject(obj) { - if (isEmpty(obj)) { - return false; - } - const x = obj.x; - const y = obj.y; - const z = obj.z; - const w = obj.w; - if (typeof x !== 'number' || - typeof y !== 'number' || - typeof z !== 'number' || - typeof w !== 'number') { - return false; - } - return true; - } - static equals(v1, v2) { - return v1.x === v2.x && v1.y === v2.y && v1.z === v2.z && v1.w === v2.w; - } - toObject() { - return { - x: this.x, - y: this.y, - z: this.z, - w: this.w, - }; - } - } - const Point4dAssembly = { - toComponents: (p) => p.getComponents(), - fromComponents: (comps) => new Point4d(...comps), - }; - - function point4dFromUnknown(value) { - return Point4d.isObject(value) - ? new Point4d(value.x, value.y, value.z, value.w) - : new Point4d(); - } - function writePoint4d(target, value) { - target.writeProperty('x', value.x); - target.writeProperty('y', value.y); - target.writeProperty('z', value.z); - target.writeProperty('w', value.w); - } - - function createConstraint$1(params, initialValue) { - return new PointNdConstraint({ - assembly: Point4dAssembly, - components: [ - createDimensionConstraint('x' in params ? params.x : undefined, initialValue.x), - createDimensionConstraint('y' in params ? params.y : undefined, initialValue.y), - createDimensionConstraint('z' in params ? params.z : undefined, initialValue.z), - createDimensionConstraint('w' in params ? params.w : undefined, initialValue.w), - ], - }); - } - function createAxis(initialValue, constraint) { - return { - baseStep: getBaseStep(constraint), - constraint: constraint, - textProps: ValueMap.fromObject({ - draggingScale: getSuitableDraggingScale(constraint, initialValue), - formatter: createNumberFormatter(getSuitableDecimalDigits(constraint, initialValue)), - }), - }; - } - const Point4dInputPlugin = { - id: 'input-point4d', - type: 'input', - accept: (value, params) => { - if (!Point4d.isObject(value)) { - return null; - } - const p = ParamsParsers; - const result = parseParams(params, { - x: p.optional.custom(parsePointDimensionParams), - y: p.optional.custom(parsePointDimensionParams), - z: p.optional.custom(parsePointDimensionParams), - w: p.optional.custom(parsePointDimensionParams), - }); - return result - ? { - initialValue: value, - params: result, - } - : null; - }, - binding: { - reader: (_args) => point4dFromUnknown, - constraint: (args) => createConstraint$1(args.params, args.initialValue), - equals: Point4d.equals, - writer: (_args) => writePoint4d, - }, - controller: (args) => { - const value = args.value; - const c = args.constraint; - if (!(c instanceof PointNdConstraint)) { - throw TpError.shouldNeverHappen(); - } - return new PointNdTextController(args.document, { - assembly: Point4dAssembly, - axes: value.rawValue - .getComponents() - .map((comp, index) => createAxis(comp, c.components[index])), - parser: parseNumber, - value: value, - viewProps: args.viewProps, - }); - }, - }; - - function createConstraint(params) { - const constraints = []; - const lc = createListConstraint(params.options); - if (lc) { - constraints.push(lc); - } - return new CompositeConstraint(constraints); - } - const StringInputPlugin = { - id: 'input-string', - type: 'input', - accept: (value, params) => { - if (typeof value !== 'string') { - return null; - } - const p = ParamsParsers; - const result = parseParams(params, { - options: p.optional.custom(parseListOptions), - }); - return result - ? { - initialValue: value, - params: result, - } - : null; - }, - binding: { - reader: (_args) => stringFromUnknown, - constraint: (args) => createConstraint(args.params), - writer: (_args) => writePrimitive, - }, - controller: (args) => { - var _a; - const doc = args.document; - const value = args.value; - const c = args.constraint; - if (c && findConstraint(c, ListConstraint)) { - return new ListController(doc, { - props: ValueMap.fromObject({ - options: (_a = findListItems(c)) !== null && _a !== void 0 ? _a : [], - }), - value: value, - viewProps: args.viewProps, - }); - } - return new TextController(doc, { - parser: (v) => v, - props: ValueMap.fromObject({ - formatter: formatString, - }), - value: value, - viewProps: args.viewProps, - }); - }, - }; - - const Constants = { - monitor: { - defaultInterval: 200, - defaultLineCount: 3, - }, - }; - - const className$2 = ClassName('mll'); - class MultiLogView { - constructor(doc, config) { - this.onValueUpdate_ = this.onValueUpdate_.bind(this); - this.formatter_ = config.formatter; - this.element = doc.createElement('div'); - this.element.classList.add(className$2()); - config.viewProps.bindClassModifiers(this.element); - const textareaElem = doc.createElement('textarea'); - textareaElem.classList.add(className$2('i')); - textareaElem.style.height = `calc(var(--bld-us) * ${config.lineCount})`; - textareaElem.readOnly = true; - config.viewProps.bindDisabled(textareaElem); - this.element.appendChild(textareaElem); - this.textareaElem_ = textareaElem; - config.value.emitter.on('change', this.onValueUpdate_); - this.value = config.value; - this.update_(); - } - update_() { - const elem = this.textareaElem_; - const shouldScroll = elem.scrollTop === elem.scrollHeight - elem.clientHeight; - const lines = []; - this.value.rawValue.forEach((value) => { - if (value !== undefined) { - lines.push(this.formatter_(value)); - } - }); - elem.textContent = lines.join('\n'); - if (shouldScroll) { - elem.scrollTop = elem.scrollHeight; - } - } - onValueUpdate_() { - this.update_(); - } - } - - class MultiLogController { - constructor(doc, config) { - this.value = config.value; - this.viewProps = config.viewProps; - this.view = new MultiLogView(doc, { - formatter: config.formatter, - lineCount: config.lineCount, - value: this.value, - viewProps: this.viewProps, - }); - } - } - - const className$1 = ClassName('sgl'); - class SingleLogView { - constructor(doc, config) { - this.onValueUpdate_ = this.onValueUpdate_.bind(this); - this.formatter_ = config.formatter; - this.element = doc.createElement('div'); - this.element.classList.add(className$1()); - config.viewProps.bindClassModifiers(this.element); - const inputElem = doc.createElement('input'); - inputElem.classList.add(className$1('i')); - inputElem.readOnly = true; - inputElem.type = 'text'; - config.viewProps.bindDisabled(inputElem); - this.element.appendChild(inputElem); - this.inputElement = inputElem; - config.value.emitter.on('change', this.onValueUpdate_); - this.value = config.value; - this.update_(); - } - update_() { - const values = this.value.rawValue; - const lastValue = values[values.length - 1]; - this.inputElement.value = - lastValue !== undefined ? this.formatter_(lastValue) : ''; - } - onValueUpdate_() { - this.update_(); - } - } - - class SingleLogController { - constructor(doc, config) { - this.value = config.value; - this.viewProps = config.viewProps; - this.view = new SingleLogView(doc, { - formatter: config.formatter, - value: this.value, - viewProps: this.viewProps, - }); - } - } - - const BooleanMonitorPlugin = { - id: 'monitor-bool', - type: 'monitor', - accept: (value, params) => { - if (typeof value !== 'boolean') { - return null; - } - const p = ParamsParsers; - const result = parseParams(params, { - lineCount: p.optional.number, - }); - return result - ? { - initialValue: value, - params: result, - } - : null; - }, - binding: { - reader: (_args) => boolFromUnknown, - }, - controller: (args) => { - var _a; - if (args.value.rawValue.length === 1) { - return new SingleLogController(args.document, { - formatter: BooleanFormatter, - value: args.value, - viewProps: args.viewProps, - }); - } - return new MultiLogController(args.document, { - formatter: BooleanFormatter, - lineCount: (_a = args.params.lineCount) !== null && _a !== void 0 ? _a : Constants.monitor.defaultLineCount, - value: args.value, - viewProps: args.viewProps, - }); - }, - }; - - const className = ClassName('grl'); - class GraphLogView { - constructor(doc, config) { - this.onCursorChange_ = this.onCursorChange_.bind(this); - this.onValueUpdate_ = this.onValueUpdate_.bind(this); - this.element = doc.createElement('div'); - this.element.classList.add(className()); - config.viewProps.bindClassModifiers(this.element); - this.formatter_ = config.formatter; - this.props_ = config.props; - this.cursor_ = config.cursor; - this.cursor_.emitter.on('change', this.onCursorChange_); - const svgElem = doc.createElementNS(SVG_NS, 'svg'); - svgElem.classList.add(className('g')); - svgElem.style.height = `calc(var(--bld-us) * ${config.lineCount})`; - this.element.appendChild(svgElem); - this.svgElem_ = svgElem; - const lineElem = doc.createElementNS(SVG_NS, 'polyline'); - this.svgElem_.appendChild(lineElem); - this.lineElem_ = lineElem; - const tooltipElem = doc.createElement('div'); - tooltipElem.classList.add(className('t'), ClassName('tt')()); - this.element.appendChild(tooltipElem); - this.tooltipElem_ = tooltipElem; - config.value.emitter.on('change', this.onValueUpdate_); - this.value = config.value; - this.update_(); - } - get graphElement() { - return this.svgElem_; - } - update_() { - const bounds = this.svgElem_.getBoundingClientRect(); - const maxIndex = this.value.rawValue.length - 1; - const min = this.props_.get('minValue'); - const max = this.props_.get('maxValue'); - const points = []; - this.value.rawValue.forEach((v, index) => { - if (v === undefined) { - return; - } - const x = mapRange(index, 0, maxIndex, 0, bounds.width); - const y = mapRange(v, min, max, bounds.height, 0); - points.push([x, y].join(',')); - }); - this.lineElem_.setAttributeNS(null, 'points', points.join(' ')); - const tooltipElem = this.tooltipElem_; - const value = this.value.rawValue[this.cursor_.rawValue]; - if (value === undefined) { - tooltipElem.classList.remove(className('t', 'a')); - return; - } - const tx = mapRange(this.cursor_.rawValue, 0, maxIndex, 0, bounds.width); - const ty = mapRange(value, min, max, bounds.height, 0); - tooltipElem.style.left = `${tx}px`; - tooltipElem.style.top = `${ty}px`; - tooltipElem.textContent = `${this.formatter_(value)}`; - if (!tooltipElem.classList.contains(className('t', 'a'))) { - tooltipElem.classList.add(className('t', 'a'), className('t', 'in')); - forceReflow(tooltipElem); - tooltipElem.classList.remove(className('t', 'in')); - } - } - onValueUpdate_() { - this.update_(); - } - onCursorChange_() { - this.update_(); - } - } - - class GraphLogController { - constructor(doc, config) { - this.onGraphMouseMove_ = this.onGraphMouseMove_.bind(this); - this.onGraphMouseLeave_ = this.onGraphMouseLeave_.bind(this); - this.onGraphPointerDown_ = this.onGraphPointerDown_.bind(this); - this.onGraphPointerMove_ = this.onGraphPointerMove_.bind(this); - this.onGraphPointerUp_ = this.onGraphPointerUp_.bind(this); - this.props_ = config.props; - this.value = config.value; - this.viewProps = config.viewProps; - this.cursor_ = createValue(-1); - this.view = new GraphLogView(doc, { - cursor: this.cursor_, - formatter: config.formatter, - lineCount: config.lineCount, - props: this.props_, - value: this.value, - viewProps: this.viewProps, - }); - if (!supportsTouch(doc)) { - this.view.element.addEventListener('mousemove', this.onGraphMouseMove_); - this.view.element.addEventListener('mouseleave', this.onGraphMouseLeave_); - } - else { - const ph = new PointerHandler(this.view.element); - ph.emitter.on('down', this.onGraphPointerDown_); - ph.emitter.on('move', this.onGraphPointerMove_); - ph.emitter.on('up', this.onGraphPointerUp_); - } - } - onGraphMouseLeave_() { - this.cursor_.rawValue = -1; - } - onGraphMouseMove_(ev) { - const bounds = this.view.element.getBoundingClientRect(); - this.cursor_.rawValue = Math.floor(mapRange(ev.offsetX, 0, bounds.width, 0, this.value.rawValue.length)); - } - onGraphPointerDown_(ev) { - this.onGraphPointerMove_(ev); - } - onGraphPointerMove_(ev) { - if (!ev.data.point) { - this.cursor_.rawValue = -1; - return; - } - this.cursor_.rawValue = Math.floor(mapRange(ev.data.point.x, 0, ev.data.bounds.width, 0, this.value.rawValue.length)); - } - onGraphPointerUp_() { - this.cursor_.rawValue = -1; - } - } - - function createFormatter(params) { - return 'format' in params && !isEmpty(params.format) - ? params.format - : createNumberFormatter(2); - } - function createTextMonitor(args) { - var _a; - if (args.value.rawValue.length === 1) { - return new SingleLogController(args.document, { - formatter: createFormatter(args.params), - value: args.value, - viewProps: args.viewProps, - }); - } - return new MultiLogController(args.document, { - formatter: createFormatter(args.params), - lineCount: (_a = args.params.lineCount) !== null && _a !== void 0 ? _a : Constants.monitor.defaultLineCount, - value: args.value, - viewProps: args.viewProps, - }); - } - function createGraphMonitor(args) { - var _a, _b, _c; - return new GraphLogController(args.document, { - formatter: createFormatter(args.params), - lineCount: (_a = args.params.lineCount) !== null && _a !== void 0 ? _a : Constants.monitor.defaultLineCount, - props: ValueMap.fromObject({ - maxValue: (_b = ('max' in args.params ? args.params.max : null)) !== null && _b !== void 0 ? _b : 100, - minValue: (_c = ('min' in args.params ? args.params.min : null)) !== null && _c !== void 0 ? _c : 0, - }), - value: args.value, - viewProps: args.viewProps, - }); - } - function shouldShowGraph(params) { - return 'view' in params && params.view === 'graph'; - } - const NumberMonitorPlugin = { - id: 'monitor-number', - type: 'monitor', - accept: (value, params) => { - if (typeof value !== 'number') { - return null; - } - const p = ParamsParsers; - const result = parseParams(params, { - format: p.optional.function, - lineCount: p.optional.number, - max: p.optional.number, - min: p.optional.number, - view: p.optional.string, - }); - return result - ? { - initialValue: value, - params: result, - } - : null; - }, - binding: { - defaultBufferSize: (params) => (shouldShowGraph(params) ? 64 : 1), - reader: (_args) => numberFromUnknown, - }, - controller: (args) => { - if (shouldShowGraph(args.params)) { - return createGraphMonitor(args); - } - return createTextMonitor(args); - }, - }; - - const StringMonitorPlugin = { - id: 'monitor-string', - type: 'monitor', - accept: (value, params) => { - if (typeof value !== 'string') { - return null; - } - const p = ParamsParsers; - const result = parseParams(params, { - lineCount: p.optional.number, - multiline: p.optional.boolean, - }); - return result - ? { - initialValue: value, - params: result, - } - : null; - }, - binding: { - reader: (_args) => stringFromUnknown, - }, - controller: (args) => { - var _a; - const value = args.value; - const multiline = value.rawValue.length > 1 || - ('multiline' in args.params && args.params.multiline); - if (multiline) { - return new MultiLogController(args.document, { - formatter: formatString, - lineCount: (_a = args.params.lineCount) !== null && _a !== void 0 ? _a : Constants.monitor.defaultLineCount, - value: value, - viewProps: args.viewProps, - }); - } - return new SingleLogController(args.document, { - formatter: formatString, - value: value, - viewProps: args.viewProps, - }); - }, - }; - - class InputBinding { - constructor(config) { - this.onValueChange_ = this.onValueChange_.bind(this); - this.reader = config.reader; - this.writer = config.writer; - this.emitter = new Emitter(); - this.value = config.value; - this.value.emitter.on('change', this.onValueChange_); - this.target = config.target; - this.read(); - } - read() { - const targetValue = this.target.read(); - if (targetValue !== undefined) { - this.value.rawValue = this.reader(targetValue); - } - } - write_(rawValue) { - this.writer(this.target, rawValue); - } - onValueChange_(ev) { - this.write_(ev.rawValue); - this.emitter.emit('change', { - options: ev.options, - rawValue: ev.rawValue, - sender: this, - }); - } - } - - function createInputBindingController(plugin, args) { - const result = plugin.accept(args.target.read(), args.params); - if (isEmpty(result)) { - return null; - } - const p = ParamsParsers; - const valueArgs = { - target: args.target, - initialValue: result.initialValue, - params: result.params, - }; - const reader = plugin.binding.reader(valueArgs); - const constraint = plugin.binding.constraint - ? plugin.binding.constraint(valueArgs) - : undefined; - const value = createValue(reader(result.initialValue), { - constraint: constraint, - equals: plugin.binding.equals, - }); - const binding = new InputBinding({ - reader: reader, - target: args.target, - value: value, - writer: plugin.binding.writer(valueArgs), - }); - const disabled = p.optional.boolean(args.params.disabled).value; - const hidden = p.optional.boolean(args.params.hidden).value; - const controller = plugin.controller({ - constraint: constraint, - document: args.document, - initialValue: result.initialValue, - params: result.params, - value: binding.value, - viewProps: ViewProps.create({ - disabled: disabled, - hidden: hidden, - }), - }); - const label = p.optional.string(args.params.label).value; - return new InputBindingController(args.document, { - binding: binding, - blade: createBlade(), - props: ValueMap.fromObject({ - label: label !== null && label !== void 0 ? label : args.target.key, - }), - valueController: controller, - }); - } - - class MonitorBinding { - constructor(config) { - this.onTick_ = this.onTick_.bind(this); - this.reader_ = config.reader; - this.target = config.target; - this.emitter = new Emitter(); - this.value = config.value; - this.ticker = config.ticker; - this.ticker.emitter.on('tick', this.onTick_); - this.read(); - } - dispose() { - this.ticker.dispose(); - } - read() { - const targetValue = this.target.read(); - if (targetValue === undefined) { - return; - } - const buffer = this.value.rawValue; - const newValue = this.reader_(targetValue); - this.value.rawValue = createPushedBuffer(buffer, newValue); - this.emitter.emit('update', { - rawValue: newValue, - sender: this, - }); - } - onTick_(_) { - this.read(); - } - } - - function createTicker(document, interval) { - return interval === 0 - ? new ManualTicker() - : new IntervalTicker(document, interval !== null && interval !== void 0 ? interval : Constants.monitor.defaultInterval); - } - function createMonitorBindingController(plugin, args) { - var _a, _b, _c; - const P = ParamsParsers; - const result = plugin.accept(args.target.read(), args.params); - if (isEmpty(result)) { - return null; - } - const bindingArgs = { - target: args.target, - initialValue: result.initialValue, - params: result.params, - }; - const reader = plugin.binding.reader(bindingArgs); - const bufferSize = (_b = (_a = P.optional.number(args.params.bufferSize).value) !== null && _a !== void 0 ? _a : (plugin.binding.defaultBufferSize && - plugin.binding.defaultBufferSize(result.params))) !== null && _b !== void 0 ? _b : 1; - const interval = P.optional.number(args.params.interval).value; - const binding = new MonitorBinding({ - reader: reader, - target: args.target, - ticker: createTicker(args.document, interval), - value: initializeBuffer(bufferSize), - }); - const disabled = P.optional.boolean(args.params.disabled).value; - const hidden = P.optional.boolean(args.params.hidden).value; - const controller = plugin.controller({ - document: args.document, - params: result.params, - value: binding.value, - viewProps: ViewProps.create({ - disabled: disabled, - hidden: hidden, - }), - }); - const label = (_c = P.optional.string(args.params.label).value) !== null && _c !== void 0 ? _c : args.target.key; - return new MonitorBindingController(args.document, { - binding: binding, - blade: createBlade(), - props: ValueMap.fromObject({ - label: label, - }), - valueController: controller, - }); - } - - class PluginPool { - constructor() { - this.pluginsMap_ = { - blades: [], - inputs: [], - monitors: [], - }; - } - getAll() { - return [ - ...this.pluginsMap_.blades, - ...this.pluginsMap_.inputs, - ...this.pluginsMap_.monitors, - ]; - } - register(r) { - if (r.type === 'blade') { - this.pluginsMap_.blades.unshift(r); - } - else if (r.type === 'input') { - this.pluginsMap_.inputs.unshift(r); - } - else if (r.type === 'monitor') { - this.pluginsMap_.monitors.unshift(r); - } - } - createInput(document, target, params) { - const initialValue = target.read(); - if (isEmpty(initialValue)) { - throw new TpError({ - context: { - key: target.key, - }, - type: 'nomatchingcontroller', - }); - } - const bc = this.pluginsMap_.inputs.reduce((result, plugin) => result !== null && result !== void 0 ? result : createInputBindingController(plugin, { - document: document, - target: target, - params: params, - }), null); - if (bc) { - return bc; - } - throw new TpError({ - context: { - key: target.key, - }, - type: 'nomatchingcontroller', - }); - } - createMonitor(document, target, params) { - const bc = this.pluginsMap_.monitors.reduce((result, plugin) => result !== null && result !== void 0 ? result : createMonitorBindingController(plugin, { - document: document, - params: params, - target: target, - }), null); - if (bc) { - return bc; - } - throw new TpError({ - context: { - key: target.key, - }, - type: 'nomatchingcontroller', - }); - } - createBlade(document, params) { - const bc = this.pluginsMap_.blades.reduce((result, plugin) => result !== null && result !== void 0 ? result : createBladeController(plugin, { - document: document, - params: params, - }), null); - if (!bc) { - throw new TpError({ - type: 'nomatchingview', - context: { - params: params, - }, - }); - } - return bc; - } - createBladeApi(bc) { - if (bc instanceof InputBindingController) { - return new InputBindingApi(bc); - } - if (bc instanceof MonitorBindingController) { - return new MonitorBindingApi(bc); - } - if (bc instanceof RackController) { - return new RackApi(bc, this); - } - const api = this.pluginsMap_.blades.reduce((result, plugin) => result !== null && result !== void 0 ? result : plugin.api({ - controller: bc, - pool: this, - }), null); - if (!api) { - throw TpError.shouldNeverHappen(); - } - return api; - } - } - - function createDefaultPluginPool() { - const pool = new PluginPool(); - [ - Point2dInputPlugin, - Point3dInputPlugin, - Point4dInputPlugin, - StringInputPlugin, - NumberInputPlugin, - StringColorInputPlugin, - ObjectColorInputPlugin, - NumberColorInputPlugin, - BooleanInputPlugin, - BooleanMonitorPlugin, - StringMonitorPlugin, - NumberMonitorPlugin, - ButtonBladePlugin, - FolderBladePlugin, - SeparatorBladePlugin, - TabBladePlugin, - ].forEach((p) => { - pool.register(p); - }); - return pool; - } - - class ListApi extends BladeApi { - constructor(controller) { - super(controller); - this.emitter_ = new Emitter(); - this.controller_.valueController.value.emitter.on('change', (ev) => { - this.emitter_.emit('change', { - event: new TpChangeEvent(this, ev.rawValue), - }); - }); - } - get label() { - return this.controller_.props.get('label'); - } - set label(label) { - this.controller_.props.set('label', label); - } - get options() { - return this.controller_.valueController.props.get('options'); - } - set options(options) { - this.controller_.valueController.props.set('options', options); - } - get value() { - return this.controller_.valueController.value.rawValue; - } - set value(value) { - this.controller_.valueController.value.rawValue = value; - } - on(eventName, handler) { - const bh = handler.bind(this); - this.emitter_.on(eventName, (ev) => { - bh(ev.event); - }); - return this; - } - } - - class SliderApi extends BladeApi { - constructor(controller) { - super(controller); - this.emitter_ = new Emitter(); - this.controller_.valueController.value.emitter.on('change', (ev) => { - this.emitter_.emit('change', { - event: new TpChangeEvent(this, ev.rawValue), - }); - }); - } - get label() { - return this.controller_.props.get('label'); - } - set label(label) { - this.controller_.props.set('label', label); - } - get maxValue() { - return this.controller_.valueController.sliderController.props.get('maxValue'); - } - set maxValue(maxValue) { - this.controller_.valueController.sliderController.props.set('maxValue', maxValue); - } - get minValue() { - return this.controller_.valueController.sliderController.props.get('minValue'); - } - set minValue(minValue) { - this.controller_.valueController.sliderController.props.set('minValue', minValue); - } - get value() { - return this.controller_.valueController.value.rawValue; - } - set value(value) { - this.controller_.valueController.value.rawValue = value; - } - on(eventName, handler) { - const bh = handler.bind(this); - this.emitter_.on(eventName, (ev) => { - bh(ev.event); - }); - return this; - } - } - - class TextApi extends BladeApi { - constructor(controller) { - super(controller); - this.emitter_ = new Emitter(); - this.controller_.valueController.value.emitter.on('change', (ev) => { - this.emitter_.emit('change', { - event: new TpChangeEvent(this, ev.rawValue), - }); - }); - } - get label() { - return this.controller_.props.get('label'); - } - set label(label) { - this.controller_.props.set('label', label); - } - get formatter() { - return this.controller_.valueController.props.get('formatter'); - } - set formatter(formatter) { - this.controller_.valueController.props.set('formatter', formatter); - } - get value() { - return this.controller_.valueController.value.rawValue; - } - set value(value) { - this.controller_.valueController.value.rawValue = value; - } - on(eventName, handler) { - const bh = handler.bind(this); - this.emitter_.on(eventName, (ev) => { - bh(ev.event); - }); - return this; - } - } - - const ListBladePlugin = (function () { - return { - id: 'list', - type: 'blade', - accept(params) { - const p = ParamsParsers; - const result = parseParams(params, { - options: p.required.custom(parseListOptions), - value: p.required.raw, - view: p.required.constant('list'), - label: p.optional.string, - }); - return result ? { params: result } : null; - }, - controller(args) { - const ic = new ListController(args.document, { - props: ValueMap.fromObject({ - options: normalizeListOptions(args.params.options), - }), - value: createValue(args.params.value), - viewProps: args.viewProps, - }); - return new LabeledValueController(args.document, { - blade: args.blade, - props: ValueMap.fromObject({ - label: args.params.label, - }), - valueController: ic, - }); - }, - api(args) { - if (!(args.controller instanceof LabeledValueController)) { - return null; - } - if (!(args.controller.valueController instanceof ListController)) { - return null; - } - return new ListApi(args.controller); - }, - }; - })(); - - /** - * @hidden - */ - function exportPresetJson(targets) { - return targets.reduce((result, target) => { - return Object.assign(result, { - [target.presetKey]: target.read(), - }); - }, {}); - } - /** - * @hidden - */ - function importPresetJson(targets, preset) { - targets.forEach((target) => { - const value = preset[target.presetKey]; - if (value !== undefined) { - target.write(value); - } - }); - } - - class RootApi extends FolderApi { - /** - * @hidden - */ - constructor(controller, pool) { - super(controller, pool); - } - get element() { - return this.controller_.view.element; - } - /** - * Imports a preset of all inputs. - * @param preset The preset object to import. - */ - importPreset(preset) { - const targets = this.controller_.rackController.rack - .find(InputBindingController) - .map((ibc) => { - return ibc.binding.target; - }); - importPresetJson(targets, preset); - this.refresh(); - } - /** - * Exports a preset of all inputs. - * @return An exported preset object. - */ - exportPreset() { - const targets = this.controller_.rackController.rack - .find(InputBindingController) - .map((ibc) => { - return ibc.binding.target; - }); - return exportPresetJson(targets); - } - /** - * Refreshes all bindings of the pane. - */ - refresh() { - // Force-read all input bindings - this.controller_.rackController.rack - .find(InputBindingController) - .forEach((ibc) => { - ibc.binding.read(); - }); - // Force-read all monitor bindings - this.controller_.rackController.rack - .find(MonitorBindingController) - .forEach((mbc) => { - mbc.binding.read(); - }); - } - } - - class RootController extends FolderController { - constructor(doc, config) { - super(doc, { - expanded: config.expanded, - blade: config.blade, - props: config.props, - root: true, - viewProps: config.viewProps, - }); - } - } - - const SliderBladePlugin = { - id: 'slider', - type: 'blade', - accept(params) { - const p = ParamsParsers; - const result = parseParams(params, { - max: p.required.number, - min: p.required.number, - view: p.required.constant('slider'), - format: p.optional.function, - label: p.optional.string, - value: p.optional.number, - }); - return result ? { params: result } : null; - }, - controller(args) { - var _a, _b; - const v = (_a = args.params.value) !== null && _a !== void 0 ? _a : 0; - const vc = new SliderTextController(args.document, { - baseStep: 1, - parser: parseNumber, - sliderProps: ValueMap.fromObject({ - maxValue: args.params.max, - minValue: args.params.min, - }), - textProps: ValueMap.fromObject({ - draggingScale: getSuitableDraggingScale(undefined, v), - formatter: (_b = args.params.format) !== null && _b !== void 0 ? _b : numberToString, - }), - value: createValue(v), - viewProps: args.viewProps, - }); - return new LabeledValueController(args.document, { - blade: args.blade, - props: ValueMap.fromObject({ - label: args.params.label, - }), - valueController: vc, - }); - }, - api(args) { - if (!(args.controller instanceof LabeledValueController)) { - return null; - } - if (!(args.controller.valueController instanceof SliderTextController)) { - return null; - } - return new SliderApi(args.controller); - }, - }; - - const TextBladePlugin = (function () { - return { - id: 'text', - type: 'blade', - accept(params) { - const p = ParamsParsers; - const result = parseParams(params, { - parse: p.required.function, - value: p.required.raw, - view: p.required.constant('text'), - format: p.optional.function, - label: p.optional.string, - }); - return result ? { params: result } : null; - }, - controller(args) { - var _a; - const ic = new TextController(args.document, { - parser: args.params.parse, - props: ValueMap.fromObject({ - formatter: (_a = args.params.format) !== null && _a !== void 0 ? _a : ((v) => String(v)), - }), - value: createValue(args.params.value), - viewProps: args.viewProps, - }); - return new LabeledValueController(args.document, { - blade: args.blade, - props: ValueMap.fromObject({ - label: args.params.label, - }), - valueController: ic, - }); - }, - api(args) { - if (!(args.controller instanceof LabeledValueController)) { - return null; - } - if (!(args.controller.valueController instanceof TextController)) { - return null; - } - return new TextApi(args.controller); - }, - }; - })(); - - function createDefaultWrapperElement(doc) { - const elem = doc.createElement('div'); - elem.classList.add(ClassName('dfw')()); - if (doc.body) { - doc.body.appendChild(elem); - } - return elem; - } - function embedStyle(doc, id, css) { - if (doc.querySelector(`style[data-tp-style=${id}]`)) { - return; - } - const styleElem = doc.createElement('style'); - styleElem.dataset.tpStyle = id; - styleElem.textContent = css; - doc.head.appendChild(styleElem); - } - /** - * The root pane of Tweakpane. - */ - class Pane extends RootApi { - constructor(opt_config) { - var _a, _b; - const config = opt_config !== null && opt_config !== void 0 ? opt_config : {}; - const doc = (_a = config.document) !== null && _a !== void 0 ? _a : getWindowDocument(); - const pool = createDefaultPluginPool(); - const rootController = new RootController(doc, { - expanded: config.expanded, - blade: createBlade(), - props: ValueMap.fromObject({ - title: config.title, - }), - viewProps: ViewProps.create(), - }); - super(rootController, pool); - this.pool_ = pool; - this.containerElem_ = (_b = config.container) !== null && _b !== void 0 ? _b : createDefaultWrapperElement(doc); - this.containerElem_.appendChild(this.element); - this.doc_ = doc; - this.usesDefaultWrapper_ = !config.container; - this.setUpDefaultPlugins_(); - } - get document() { - if (!this.doc_) { - throw TpError.alreadyDisposed(); - } - return this.doc_; - } - dispose() { - const containerElem = this.containerElem_; - if (!containerElem) { - throw TpError.alreadyDisposed(); - } - if (this.usesDefaultWrapper_) { - const parentElem = containerElem.parentElement; - if (parentElem) { - parentElem.removeChild(containerElem); - } - } - this.containerElem_ = null; - this.doc_ = null; - super.dispose(); - } - registerPlugin(bundle) { - const plugins = 'plugin' in bundle - ? [bundle.plugin] - : 'plugins' in bundle - ? bundle.plugins - : []; - plugins.forEach((p) => { - this.pool_.register(p); - this.embedPluginStyle_(p); - }); - } - embedPluginStyle_(plugin) { - if (plugin.css) { - embedStyle(this.document, `plugin-${plugin.id}`, plugin.css); - } - } - setUpDefaultPlugins_() { - // NOTE: This string literal will be replaced with the default CSS by Rollup at the compilation time - embedStyle(this.document, 'default', '.tp-tbiv_b,.tp-coltxtv_ms,.tp-ckbv_i,.tp-rotv_b,.tp-fldv_b,.tp-mllv_i,.tp-sglv_i,.tp-grlv_g,.tp-txtv_i,.tp-p2dpv_p,.tp-colswv_sw,.tp-p2dv_b,.tp-btnv_b,.tp-lstv_s{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;font-family:inherit;font-size:inherit;font-weight:inherit;margin:0;outline:none;padding:0}.tp-p2dv_b,.tp-btnv_b,.tp-lstv_s{background-color:var(--btn-bg);border-radius:var(--elm-br);color:var(--btn-fg);cursor:pointer;display:block;font-weight:bold;height:var(--bld-us);line-height:var(--bld-us);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tp-p2dv_b:hover,.tp-btnv_b:hover,.tp-lstv_s:hover{background-color:var(--btn-bg-h)}.tp-p2dv_b:focus,.tp-btnv_b:focus,.tp-lstv_s:focus{background-color:var(--btn-bg-f)}.tp-p2dv_b:active,.tp-btnv_b:active,.tp-lstv_s:active{background-color:var(--btn-bg-a)}.tp-p2dv_b:disabled,.tp-btnv_b:disabled,.tp-lstv_s:disabled{opacity:.5}.tp-txtv_i,.tp-p2dpv_p,.tp-colswv_sw{background-color:var(--in-bg);border-radius:var(--elm-br);box-sizing:border-box;color:var(--in-fg);font-family:inherit;height:var(--bld-us);line-height:var(--bld-us);min-width:0;width:100%}.tp-txtv_i:hover,.tp-p2dpv_p:hover,.tp-colswv_sw:hover{background-color:var(--in-bg-h)}.tp-txtv_i:focus,.tp-p2dpv_p:focus,.tp-colswv_sw:focus{background-color:var(--in-bg-f)}.tp-txtv_i:active,.tp-p2dpv_p:active,.tp-colswv_sw:active{background-color:var(--in-bg-a)}.tp-txtv_i:disabled,.tp-p2dpv_p:disabled,.tp-colswv_sw:disabled{opacity:.5}.tp-mllv_i,.tp-sglv_i,.tp-grlv_g{background-color:var(--mo-bg);border-radius:var(--elm-br);box-sizing:border-box;color:var(--mo-fg);height:var(--bld-us);scrollbar-color:currentColor transparent;scrollbar-width:thin;width:100%}.tp-mllv_i::-webkit-scrollbar,.tp-sglv_i::-webkit-scrollbar,.tp-grlv_g::-webkit-scrollbar{height:8px;width:8px}.tp-mllv_i::-webkit-scrollbar-corner,.tp-sglv_i::-webkit-scrollbar-corner,.tp-grlv_g::-webkit-scrollbar-corner{background-color:transparent}.tp-mllv_i::-webkit-scrollbar-thumb,.tp-sglv_i::-webkit-scrollbar-thumb,.tp-grlv_g::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:currentColor;border:transparent solid 2px;border-radius:4px}.tp-rotv{--font-family: var(--tp-font-family, Roboto Mono, Source Code Pro, Menlo, Courier, monospace);--bs-br: var(--tp-base-border-radius, 6px);--cnt-h-p: var(--tp-container-horizontal-padding, 4px);--cnt-v-p: var(--tp-container-vertical-padding, 4px);--elm-br: var(--tp-element-border-radius, 2px);--bld-s: var(--tp-blade-spacing, 4px);--bld-us: var(--tp-blade-unit-size, 20px);--bs-bg: var(--tp-base-background-color, #28292e);--bs-sh: var(--tp-base-shadow-color, rgba(0, 0, 0, 0.2));--btn-bg: var(--tp-button-background-color, #adafb8);--btn-bg-a: var(--tp-button-background-color-active, #d6d7db);--btn-bg-f: var(--tp-button-background-color-focus, #c8cad0);--btn-bg-h: var(--tp-button-background-color-hover, #bbbcc4);--btn-fg: var(--tp-button-foreground-color, #28292e);--cnt-bg: var(--tp-container-background-color, rgba(187, 188, 196, 0.1));--cnt-bg-a: var(--tp-container-background-color-active, rgba(187, 188, 196, 0.25));--cnt-bg-f: var(--tp-container-background-color-focus, rgba(187, 188, 196, 0.2));--cnt-bg-h: var(--tp-container-background-color-hover, rgba(187, 188, 196, 0.15));--cnt-fg: var(--tp-container-foreground-color, #bbbcc4);--in-bg: var(--tp-input-background-color, rgba(187, 188, 196, 0.1));--in-bg-a: var(--tp-input-background-color-active, rgba(187, 188, 196, 0.25));--in-bg-f: var(--tp-input-background-color-focus, rgba(187, 188, 196, 0.2));--in-bg-h: var(--tp-input-background-color-hover, rgba(187, 188, 196, 0.15));--in-fg: var(--tp-input-foreground-color, #bbbcc4);--lbl-fg: var(--tp-label-foreground-color, rgba(187, 188, 196, 0.7));--mo-bg: var(--tp-monitor-background-color, rgba(0, 0, 0, 0.2));--mo-fg: var(--tp-monitor-foreground-color, rgba(187, 188, 196, 0.7));--grv-fg: var(--tp-groove-foreground-color, rgba(187, 188, 196, 0.1))}.tp-rotv_c>.tp-cntv.tp-v-lst,.tp-tabv_c .tp-brkv>.tp-cntv.tp-v-lst,.tp-fldv_c>.tp-cntv.tp-v-lst{margin-bottom:calc(-1*var(--cnt-v-p))}.tp-rotv_c>.tp-fldv.tp-v-lst .tp-fldv_c,.tp-tabv_c .tp-brkv>.tp-fldv.tp-v-lst .tp-fldv_c,.tp-fldv_c>.tp-fldv.tp-v-lst .tp-fldv_c{border-bottom-left-radius:0}.tp-rotv_c>.tp-fldv.tp-v-lst .tp-fldv_b,.tp-tabv_c .tp-brkv>.tp-fldv.tp-v-lst .tp-fldv_b,.tp-fldv_c>.tp-fldv.tp-v-lst .tp-fldv_b{border-bottom-left-radius:0}.tp-rotv_c>*:not(.tp-v-fst),.tp-tabv_c .tp-brkv>*:not(.tp-v-fst),.tp-fldv_c>*:not(.tp-v-fst){margin-top:var(--bld-s)}.tp-rotv_c>.tp-sprv:not(.tp-v-fst),.tp-tabv_c .tp-brkv>.tp-sprv:not(.tp-v-fst),.tp-fldv_c>.tp-sprv:not(.tp-v-fst),.tp-rotv_c>.tp-cntv:not(.tp-v-fst),.tp-tabv_c .tp-brkv>.tp-cntv:not(.tp-v-fst),.tp-fldv_c>.tp-cntv:not(.tp-v-fst){margin-top:var(--cnt-v-p)}.tp-rotv_c>.tp-sprv+*:not(.tp-v-hidden),.tp-tabv_c .tp-brkv>.tp-sprv+*:not(.tp-v-hidden),.tp-fldv_c>.tp-sprv+*:not(.tp-v-hidden),.tp-rotv_c>.tp-cntv+*:not(.tp-v-hidden),.tp-tabv_c .tp-brkv>.tp-cntv+*:not(.tp-v-hidden),.tp-fldv_c>.tp-cntv+*:not(.tp-v-hidden){margin-top:var(--cnt-v-p)}.tp-rotv_c>.tp-sprv:not(.tp-v-hidden)+.tp-sprv,.tp-tabv_c .tp-brkv>.tp-sprv:not(.tp-v-hidden)+.tp-sprv,.tp-fldv_c>.tp-sprv:not(.tp-v-hidden)+.tp-sprv,.tp-rotv_c>.tp-cntv:not(.tp-v-hidden)+.tp-cntv,.tp-tabv_c .tp-brkv>.tp-cntv:not(.tp-v-hidden)+.tp-cntv,.tp-fldv_c>.tp-cntv:not(.tp-v-hidden)+.tp-cntv{margin-top:0}.tp-tabv_c .tp-brkv>.tp-cntv,.tp-fldv_c>.tp-cntv{margin-left:4px}.tp-tabv_c .tp-brkv>.tp-fldv>.tp-fldv_b,.tp-fldv_c>.tp-fldv>.tp-fldv_b{border-top-left-radius:var(--elm-br);border-bottom-left-radius:var(--elm-br)}.tp-tabv_c .tp-brkv>.tp-fldv.tp-fldv-expanded>.tp-fldv_b,.tp-fldv_c>.tp-fldv.tp-fldv-expanded>.tp-fldv_b{border-bottom-left-radius:0}.tp-tabv_c .tp-brkv .tp-fldv>.tp-fldv_c,.tp-fldv_c .tp-fldv>.tp-fldv_c{border-bottom-left-radius:var(--elm-br)}.tp-tabv_c .tp-brkv>.tp-tabv>.tp-tabv_i,.tp-fldv_c>.tp-tabv>.tp-tabv_i{border-top-left-radius:var(--elm-br)}.tp-tabv_c .tp-brkv .tp-tabv>.tp-tabv_c,.tp-fldv_c .tp-tabv>.tp-tabv_c{border-bottom-left-radius:var(--elm-br)}.tp-rotv_b,.tp-fldv_b{background-color:var(--cnt-bg);color:var(--cnt-fg);cursor:pointer;display:block;height:calc(var(--bld-us) + 4px);line-height:calc(var(--bld-us) + 4px);overflow:hidden;padding-left:var(--cnt-h-p);padding-right:calc(4px + var(--bld-us) + var(--cnt-h-p));position:relative;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;transition:border-radius .2s ease-in-out .2s}.tp-rotv_b:hover,.tp-fldv_b:hover{background-color:var(--cnt-bg-h)}.tp-rotv_b:focus,.tp-fldv_b:focus{background-color:var(--cnt-bg-f)}.tp-rotv_b:active,.tp-fldv_b:active{background-color:var(--cnt-bg-a)}.tp-rotv_b:disabled,.tp-fldv_b:disabled{opacity:.5}.tp-rotv_m,.tp-fldv_m{background:linear-gradient(to left, var(--cnt-fg), var(--cnt-fg) 2px, transparent 2px, transparent 4px, var(--cnt-fg) 4px);border-radius:2px;bottom:0;content:"";display:block;height:6px;right:calc(var(--cnt-h-p) + (var(--bld-us) + 4px - 6px)/2 - 2px);margin:auto;opacity:.5;position:absolute;top:0;transform:rotate(90deg);transition:transform .2s ease-in-out;width:6px}.tp-rotv.tp-rotv-expanded .tp-rotv_m,.tp-fldv.tp-fldv-expanded>.tp-fldv_b>.tp-fldv_m{transform:none}.tp-rotv_c,.tp-fldv_c{box-sizing:border-box;height:0;opacity:0;overflow:hidden;padding-bottom:0;padding-top:0;position:relative;transition:height .2s ease-in-out,opacity .2s linear,padding .2s ease-in-out}.tp-rotv.tp-rotv-cpl:not(.tp-rotv-expanded) .tp-rotv_c,.tp-fldv.tp-fldv-cpl:not(.tp-fldv-expanded)>.tp-fldv_c{display:none}.tp-rotv.tp-rotv-expanded .tp-rotv_c,.tp-fldv.tp-fldv-expanded>.tp-fldv_c{opacity:1;padding-bottom:var(--cnt-v-p);padding-top:var(--cnt-v-p);transform:none;overflow:visible;transition:height .2s ease-in-out,opacity .2s linear .2s,padding .2s ease-in-out}.tp-lstv,.tp-coltxtv_m{position:relative}.tp-lstv_s{padding:0 20px 0 4px;width:100%}.tp-lstv_m,.tp-coltxtv_mm{bottom:0;margin:auto;pointer-events:none;position:absolute;right:2px;top:0}.tp-lstv_m svg,.tp-coltxtv_mm svg{bottom:0;height:16px;margin:auto;position:absolute;right:0;top:0;width:16px}.tp-lstv_m svg path,.tp-coltxtv_mm svg path{fill:currentColor}.tp-pndtxtv,.tp-coltxtv_w{display:flex}.tp-pndtxtv_a,.tp-coltxtv_c{width:100%}.tp-pndtxtv_a+.tp-pndtxtv_a,.tp-coltxtv_c+.tp-pndtxtv_a,.tp-pndtxtv_a+.tp-coltxtv_c,.tp-coltxtv_c+.tp-coltxtv_c{margin-left:2px}.tp-btnv_b{width:100%}.tp-btnv_t{text-align:center}.tp-ckbv_l{display:block;position:relative}.tp-ckbv_i{left:0;opacity:0;position:absolute;top:0}.tp-ckbv_w{background-color:var(--in-bg);border-radius:var(--elm-br);cursor:pointer;display:block;height:var(--bld-us);position:relative;width:var(--bld-us)}.tp-ckbv_w svg{bottom:0;display:block;height:16px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;width:16px}.tp-ckbv_w svg path{fill:none;stroke:var(--in-fg);stroke-width:2}.tp-ckbv_i:hover+.tp-ckbv_w{background-color:var(--in-bg-h)}.tp-ckbv_i:focus+.tp-ckbv_w{background-color:var(--in-bg-f)}.tp-ckbv_i:active+.tp-ckbv_w{background-color:var(--in-bg-a)}.tp-ckbv_i:checked+.tp-ckbv_w svg{opacity:1}.tp-ckbv.tp-v-disabled .tp-ckbv_w{opacity:.5}.tp-colv{position:relative}.tp-colv_h{display:flex}.tp-colv_s{flex-grow:0;flex-shrink:0;width:var(--bld-us)}.tp-colv_t{flex:1;margin-left:4px}.tp-colv_p{height:0;margin-top:0;opacity:0;overflow:hidden;transition:height .2s ease-in-out,opacity .2s linear,margin .2s ease-in-out}.tp-colv.tp-colv-cpl .tp-colv_p{overflow:visible}.tp-colv.tp-colv-expanded .tp-colv_p{margin-top:var(--bld-s);opacity:1}.tp-colv .tp-popv{left:calc(-1*var(--cnt-h-p));right:calc(-1*var(--cnt-h-p));top:var(--bld-us)}.tp-colpv_h,.tp-colpv_ap{margin-left:6px;margin-right:6px}.tp-colpv_h{margin-top:var(--bld-s)}.tp-colpv_rgb{display:flex;margin-top:var(--bld-s);width:100%}.tp-colpv_a{display:flex;margin-top:var(--cnt-v-p);padding-top:calc(var(--cnt-v-p) + 2px);position:relative}.tp-colpv_a:before{background-color:var(--grv-fg);content:"";height:2px;left:calc(-1*var(--cnt-h-p));position:absolute;right:calc(-1*var(--cnt-h-p));top:0}.tp-colpv_ap{align-items:center;display:flex;flex:3}.tp-colpv_at{flex:1;margin-left:4px}.tp-svpv{border-radius:var(--elm-br);outline:none;overflow:hidden;position:relative}.tp-svpv_c{cursor:crosshair;display:block;height:calc(var(--bld-us)*4);width:100%}.tp-svpv_m{border-radius:100%;border:rgba(255,255,255,.75) solid 2px;box-sizing:border-box;filter:drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));height:12px;margin-left:-6px;margin-top:-6px;pointer-events:none;position:absolute;width:12px}.tp-svpv:focus .tp-svpv_m{border-color:#fff}.tp-hplv{cursor:pointer;height:var(--bld-us);outline:none;position:relative}.tp-hplv_c{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAABCAYAAABubagXAAAAQ0lEQVQoU2P8z8Dwn0GCgQEDi2OK/RBgYHjBgIpfovFh8j8YBIgzFGQxuqEgPhaDOT5gOhPkdCxOZeBg+IDFZZiGAgCaSSMYtcRHLgAAAABJRU5ErkJggg==);background-position:left top;background-repeat:no-repeat;background-size:100% 100%;border-radius:2px;display:block;height:4px;left:0;margin-top:-2px;position:absolute;top:50%;width:100%}.tp-hplv_m{border-radius:var(--elm-br);border:rgba(255,255,255,.75) solid 2px;box-shadow:0 0 2px rgba(0,0,0,.1);box-sizing:border-box;height:12px;left:50%;margin-left:-6px;margin-top:-6px;pointer-events:none;position:absolute;top:50%;width:12px}.tp-hplv:focus .tp-hplv_m{border-color:#fff}.tp-aplv{cursor:pointer;height:var(--bld-us);outline:none;position:relative;width:100%}.tp-aplv_b{background-color:#fff;background-image:linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);background-size:4px 4px;background-position:0 0,2px 2px;border-radius:2px;display:block;height:4px;left:0;margin-top:-2px;overflow:hidden;position:absolute;top:50%;width:100%}.tp-aplv_c{bottom:0;left:0;position:absolute;right:0;top:0}.tp-aplv_m{background-color:#fff;background-image:linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);background-size:12px 12px;background-position:0 0,6px 6px;border-radius:var(--elm-br);box-shadow:0 0 2px rgba(0,0,0,.1);height:12px;left:50%;margin-left:-6px;margin-top:-6px;overflow:hidden;pointer-events:none;position:absolute;top:50%;width:12px}.tp-aplv_p{border-radius:var(--elm-br);border:rgba(255,255,255,.75) solid 2px;box-sizing:border-box;bottom:0;left:0;position:absolute;right:0;top:0}.tp-aplv:focus .tp-aplv_p{border-color:#fff}.tp-colswv{background-color:#fff;background-image:linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);background-size:10px 10px;background-position:0 0,5px 5px;border-radius:var(--elm-br);overflow:hidden}.tp-colswv.tp-v-disabled{opacity:.5}.tp-colswv_sw{border-radius:0}.tp-colswv_b{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;cursor:pointer;display:block;height:var(--bld-us);left:0;margin:0;outline:none;padding:0;position:absolute;top:0;width:var(--bld-us)}.tp-colswv_b:focus::after{border:rgba(255,255,255,.75) solid 2px;border-radius:var(--elm-br);bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}.tp-coltxtv{display:flex;width:100%}.tp-coltxtv_m{margin-right:4px}.tp-coltxtv_ms{border-radius:var(--elm-br);color:var(--lbl-fg);cursor:pointer;height:var(--bld-us);line-height:var(--bld-us);padding:0 18px 0 4px}.tp-coltxtv_ms:hover{background-color:var(--in-bg-h)}.tp-coltxtv_ms:focus{background-color:var(--in-bg-f)}.tp-coltxtv_ms:active{background-color:var(--in-bg-a)}.tp-coltxtv_mm{color:var(--lbl-fg)}.tp-coltxtv_w{flex:1}.tp-dfwv{position:absolute;top:8px;right:8px;width:256px}.tp-fldv.tp-fldv-not .tp-fldv_b{display:none}.tp-fldv_t{padding-left:4px}.tp-fldv_c{border-left:var(--cnt-bg) solid 4px}.tp-fldv_b:hover+.tp-fldv_c{border-left-color:var(--cnt-bg-h)}.tp-fldv_b:focus+.tp-fldv_c{border-left-color:var(--cnt-bg-f)}.tp-fldv_b:active+.tp-fldv_c{border-left-color:var(--cnt-bg-a)}.tp-grlv{position:relative}.tp-grlv_g{display:block;height:calc(var(--bld-us)*3)}.tp-grlv_g polyline{fill:none;stroke:var(--mo-fg);stroke-linejoin:round}.tp-grlv_t{margin-top:-4px;transition:left .05s,top .05s;visibility:hidden}.tp-grlv_t.tp-grlv_t-a{visibility:visible}.tp-grlv_t.tp-grlv_t-in{transition:none}.tp-grlv.tp-v-disabled .tp-grlv_g{opacity:.5}.tp-grlv .tp-ttv{background-color:var(--mo-fg)}.tp-grlv .tp-ttv::before{border-top-color:var(--mo-fg)}.tp-lblv{align-items:center;display:flex;line-height:1.3;padding-left:var(--cnt-h-p);padding-right:var(--cnt-h-p)}.tp-lblv.tp-lblv-nol{display:block}.tp-lblv_l{color:var(--lbl-fg);flex:1;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;padding-left:4px;padding-right:16px}.tp-lblv.tp-v-disabled .tp-lblv_l{opacity:.5}.tp-lblv.tp-lblv-nol .tp-lblv_l{display:none}.tp-lblv_v{align-self:flex-start;flex-grow:0;flex-shrink:0;width:160px}.tp-lblv.tp-lblv-nol .tp-lblv_v{width:100%}.tp-lstv_s{padding:0 20px 0 4px;width:100%}.tp-lstv_m{color:var(--btn-fg)}.tp-sglv_i{padding:0 4px}.tp-sglv.tp-v-disabled .tp-sglv_i{opacity:.5}.tp-mllv_i{display:block;height:calc(var(--bld-us)*3);line-height:var(--bld-us);padding:0 4px;resize:none;white-space:pre}.tp-mllv.tp-v-disabled .tp-mllv_i{opacity:.5}.tp-p2dv{position:relative}.tp-p2dv_h{display:flex}.tp-p2dv_b{height:var(--bld-us);margin-right:4px;position:relative;width:var(--bld-us)}.tp-p2dv_b svg{display:block;height:16px;left:50%;margin-left:-8px;margin-top:-8px;position:absolute;top:50%;width:16px}.tp-p2dv_b svg path{stroke:currentColor;stroke-width:2}.tp-p2dv_b svg circle{fill:currentColor}.tp-p2dv_t{flex:1}.tp-p2dv_p{height:0;margin-top:0;opacity:0;overflow:hidden;transition:height .2s ease-in-out,opacity .2s linear,margin .2s ease-in-out}.tp-p2dv.tp-p2dv-expanded .tp-p2dv_p{margin-top:var(--bld-s);opacity:1}.tp-p2dv .tp-popv{left:calc(-1*var(--cnt-h-p));right:calc(-1*var(--cnt-h-p));top:var(--bld-us)}.tp-p2dpv{padding-left:calc(var(--bld-us) + 4px)}.tp-p2dpv_p{cursor:crosshair;height:0;overflow:hidden;padding-bottom:100%;position:relative}.tp-p2dpv_g{display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.tp-p2dpv_ax{opacity:.1;stroke:var(--in-fg);stroke-dasharray:1}.tp-p2dpv_l{opacity:.5;stroke:var(--in-fg);stroke-dasharray:1}.tp-p2dpv_m{border:var(--in-fg) solid 1px;border-radius:50%;box-sizing:border-box;height:4px;margin-left:-2px;margin-top:-2px;position:absolute;width:4px}.tp-p2dpv_p:focus .tp-p2dpv_m{background-color:var(--in-fg);border-width:0}.tp-popv{background-color:var(--bs-bg);border-radius:6px;box-shadow:0 2px 4px var(--bs-sh);display:none;max-width:168px;padding:var(--cnt-v-p) var(--cnt-h-p);position:absolute;visibility:hidden;z-index:1000}.tp-popv.tp-popv-v{display:block;visibility:visible}.tp-sprv_r{background-color:var(--grv-fg);border-width:0;display:block;height:2px;margin:0;width:100%}.tp-sldv.tp-v-disabled{opacity:.5}.tp-sldv_t{box-sizing:border-box;cursor:pointer;height:var(--bld-us);margin:0 6px;outline:none;position:relative}.tp-sldv_t::before{background-color:var(--in-bg);border-radius:1px;bottom:0;content:"";display:block;height:2px;left:0;margin:auto;position:absolute;right:0;top:0}.tp-sldv_k{height:100%;left:0;position:absolute;top:0}.tp-sldv_k::before{background-color:var(--in-fg);border-radius:1px;bottom:0;content:"";display:block;height:2px;left:0;margin-bottom:auto;margin-top:auto;position:absolute;right:0;top:0}.tp-sldv_k::after{background-color:var(--btn-bg);border-radius:var(--elm-br);bottom:0;content:"";display:block;height:12px;margin-bottom:auto;margin-top:auto;position:absolute;right:-6px;top:0;width:12px}.tp-sldv_t:hover .tp-sldv_k::after{background-color:var(--btn-bg-h)}.tp-sldv_t:focus .tp-sldv_k::after{background-color:var(--btn-bg-f)}.tp-sldv_t:active .tp-sldv_k::after{background-color:var(--btn-bg-a)}.tp-sldtxtv{display:flex}.tp-sldtxtv_s{flex:2}.tp-sldtxtv_t{flex:1;margin-left:4px}.tp-tabv.tp-v-disabled{opacity:.5}.tp-tabv_i{align-items:flex-end;display:flex;overflow:hidden}.tp-tabv.tp-tabv-nop .tp-tabv_i{height:calc(var(--bld-us) + 4px);position:relative}.tp-tabv.tp-tabv-nop .tp-tabv_i::before{background-color:var(--cnt-bg);bottom:0;content:"";height:2px;left:0;position:absolute;right:0}.tp-tabv_c{border-left:var(--cnt-bg) solid 4px;padding-bottom:var(--cnt-v-p);padding-top:var(--cnt-v-p)}.tp-tbiv{flex:1;min-width:0;position:relative}.tp-tbiv+.tp-tbiv{margin-left:2px}.tp-tbiv+.tp-tbiv::before{background-color:var(--cnt-bg);bottom:0;content:"";height:2px;left:-2px;position:absolute;width:2px}.tp-tbiv_b{background-color:var(--cnt-bg);display:block;padding-left:calc(var(--cnt-h-p) + 4px);padding-right:calc(var(--cnt-h-p) + 4px);width:100%}.tp-tbiv_b:hover{background-color:var(--cnt-bg-h)}.tp-tbiv_b:focus{background-color:var(--cnt-bg-f)}.tp-tbiv_b:active{background-color:var(--cnt-bg-a)}.tp-tbiv_b:disabled{opacity:.5}.tp-tbiv_t{color:var(--cnt-fg);height:calc(var(--bld-us) + 4px);line-height:calc(var(--bld-us) + 4px);opacity:.5;overflow:hidden;text-overflow:ellipsis}.tp-tbiv.tp-tbiv-sel .tp-tbiv_t{opacity:1}.tp-txtv{position:relative}.tp-txtv_i{padding:0 4px}.tp-txtv.tp-txtv-fst .tp-txtv_i{border-bottom-right-radius:0;border-top-right-radius:0}.tp-txtv.tp-txtv-mid .tp-txtv_i{border-radius:0}.tp-txtv.tp-txtv-lst .tp-txtv_i{border-bottom-left-radius:0;border-top-left-radius:0}.tp-txtv.tp-txtv-num .tp-txtv_i{text-align:right}.tp-txtv.tp-txtv-drg .tp-txtv_i{opacity:.3}.tp-txtv_k{cursor:pointer;height:100%;left:-3px;position:absolute;top:0;width:12px}.tp-txtv_k::before{background-color:var(--in-fg);border-radius:1px;bottom:0;content:"";height:calc(var(--bld-us) - 4px);left:50%;margin-bottom:auto;margin-left:-1px;margin-top:auto;opacity:.1;position:absolute;top:0;transition:border-radius .1s,height .1s,transform .1s,width .1s;width:2px}.tp-txtv_k:hover::before,.tp-txtv.tp-txtv-drg .tp-txtv_k::before{opacity:1}.tp-txtv.tp-txtv-drg .tp-txtv_k::before{border-radius:50%;height:4px;transform:translateX(-1px);width:4px}.tp-txtv_g{bottom:0;display:block;height:8px;left:50%;margin:auto;overflow:visible;pointer-events:none;position:absolute;top:0;visibility:hidden;width:100%}.tp-txtv.tp-txtv-drg .tp-txtv_g{visibility:visible}.tp-txtv_gb{fill:none;stroke:var(--in-fg);stroke-dasharray:1}.tp-txtv_gh{fill:none;stroke:var(--in-fg)}.tp-txtv .tp-ttv{margin-left:6px;visibility:hidden}.tp-txtv.tp-txtv-drg .tp-ttv{visibility:visible}.tp-ttv{background-color:var(--in-fg);border-radius:var(--elm-br);color:var(--bs-bg);padding:2px 4px;pointer-events:none;position:absolute;transform:translate(-50%, -100%)}.tp-ttv::before{border-color:var(--in-fg) transparent transparent transparent;border-style:solid;border-width:2px;box-sizing:border-box;content:"";font-size:.9em;height:4px;left:50%;margin-left:-2px;position:absolute;top:100%;width:4px}.tp-rotv{background-color:var(--bs-bg);border-radius:var(--bs-br);box-shadow:0 2px 4px var(--bs-sh);font-family:var(--font-family);font-size:11px;font-weight:500;line-height:1;text-align:left}.tp-rotv_b{border-bottom-left-radius:var(--bs-br);border-bottom-right-radius:var(--bs-br);border-top-left-radius:var(--bs-br);border-top-right-radius:var(--bs-br);padding-left:calc(4px + var(--bld-us) + var(--cnt-h-p));text-align:center}.tp-rotv.tp-rotv-expanded .tp-rotv_b{border-bottom-left-radius:0;border-bottom-right-radius:0}.tp-rotv.tp-rotv-not .tp-rotv_b{display:none}.tp-rotv_c>.tp-fldv.tp-v-lst>.tp-fldv_c,.tp-rotv_c>.tp-tabv.tp-v-lst>.tp-tabv_c{border-bottom-left-radius:var(--bs-br);border-bottom-right-radius:var(--bs-br)}.tp-rotv_c>.tp-fldv.tp-v-lst:not(.tp-fldv-expanded)>.tp-fldv_b{border-bottom-left-radius:var(--bs-br);border-bottom-right-radius:var(--bs-br)}.tp-rotv_c .tp-fldv.tp-v-vlst:not(.tp-fldv-expanded)>.tp-fldv_b{border-bottom-right-radius:var(--bs-br)}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-fldv.tp-v-fst{margin-top:calc(-1*var(--cnt-v-p))}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-fldv.tp-v-fst>.tp-fldv_b{border-top-left-radius:var(--bs-br);border-top-right-radius:var(--bs-br)}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-tabv.tp-v-fst{margin-top:calc(-1*var(--cnt-v-p))}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-tabv.tp-v-fst>.tp-tabv_i{border-top-left-radius:var(--bs-br);border-top-right-radius:var(--bs-br)}.tp-rotv.tp-v-disabled,.tp-rotv .tp-v-disabled{pointer-events:none}.tp-rotv.tp-v-hidden,.tp-rotv .tp-v-hidden{display:none}'); - this.pool_.getAll().forEach((plugin) => { - this.embedPluginStyle_(plugin); - }); - this.registerPlugin({ - plugins: [ - SliderBladePlugin, - ListBladePlugin, - TabBladePlugin, - TextBladePlugin, - ], - }); - } - } - - const VERSION = new Semver('3.1.0'); - - exports.BladeApi = BladeApi; - exports.ButtonApi = ButtonApi; - exports.FolderApi = FolderApi; - exports.InputBindingApi = InputBindingApi; - exports.ListApi = ListApi; - exports.MonitorBindingApi = MonitorBindingApi; - exports.Pane = Pane; - exports.SeparatorApi = SeparatorApi; - exports.SliderApi = SliderApi; - exports.TabApi = TabApi; - exports.TabPageApi = TabPageApi; - exports.TextApi = TextApi; - exports.TpChangeEvent = TpChangeEvent; - exports.VERSION = VERSION; - - Object.defineProperty(exports, '__esModule', { value: true }); - -})); diff --git a/node_modules/tweakpane/dist/tweakpane.min.js b/node_modules/tweakpane/dist/tweakpane.min.js deleted file mode 100644 index b50fb1b0..00000000 --- a/node_modules/tweakpane/dist/tweakpane.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! Tweakpane 3.1.0 (c) 2016 cocopon, licensed under the MIT license. */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Tweakpane={})}(this,(function(t){"use strict";class e{constructor(t){this.controller_=t}get element(){return this.controller_.view.element}get disabled(){return this.controller_.viewProps.get("disabled")}set disabled(t){this.controller_.viewProps.set("disabled",t)}get hidden(){return this.controller_.viewProps.get("hidden")}set hidden(t){this.controller_.viewProps.set("hidden",t)}dispose(){this.controller_.viewProps.set("disposed",!0)}}class n{constructor(t){this.target=t}}class i extends n{constructor(t,e,n,i){super(t),this.value=e,this.presetKey=n,this.last=null==i||i}}class s extends n{constructor(t,e,n){super(t),this.value=e,this.presetKey=n}}class o extends n{constructor(t,e){super(t),this.expanded=e}}class r extends n{constructor(t,e){super(t),this.index=e}}function a(t){return null==t}function l(t,e){if(t.length!==e.length)return!1;for(let n=0;n"View has been already disposed",invalidparams:t=>`Invalid parameters for '${t.name}'`,nomatchingcontroller:t=>`No matching controller for '${t.key}'`,nomatchingview:t=>`No matching view for '${JSON.stringify(t.params)}'`,notbindable:()=>"Value is not bindable",propertynotfound:t=>`Property '${t.name}' not found`,shouldneverhappen:()=>"This error should never happen"};class d{constructor(t){var e;this.message=null!==(e=p[t.type](t.context))&&void 0!==e?e:"Unexpected error",this.name=this.constructor.name,this.stack=new Error(this.message).stack,this.type=t.type}static alreadyDisposed(){return new d({type:"alreadydisposed"})}static notBindable(){return new d({type:"notbindable"})}static propertyNotFound(t){return new d({type:"propertynotfound",context:{name:t}})}static shouldNeverHappen(){return new d({type:"shouldneverhappen"})}}class c{constructor(t,e,n){this.obj_=t,this.key_=e,this.presetKey_=null!=n?n:e}static isBindable(t){return null!==t&&"object"==typeof t}get key(){return this.key_}get presetKey(){return this.presetKey_}read(){return this.obj_[this.key_]}write(t){this.obj_[this.key_]=t}writeProperty(t,e){const n=this.read();if(!c.isBindable(n))throw d.notBindable();if(!(t in n))throw d.propertyNotFound(t);n[t]=e}}class h extends e{get label(){return this.controller_.props.get("label")}set label(t){this.controller_.props.set("label",t)}get title(){var t;return null!==(t=this.controller_.valueController.props.get("title"))&&void 0!==t?t:""}set title(t){this.controller_.valueController.props.set("title",t)}on(t,e){const i=e.bind(this);return this.controller_.valueController.emitter.on(t,(()=>{i(new n(this))})),this}}class u{constructor(){this.observers_={}}on(t,e){let n=this.observers_[t];return n||(n=this.observers_[t]=[]),n.push({handler:e}),this}off(t,e){const n=this.observers_[t];return n&&(this.observers_[t]=n.filter((t=>t.handler!==e))),this}emit(t,e){const n=this.observers_[t];n&&n.forEach((t=>{t.handler(e)}))}}const v="tp";function m(t){return(e,n)=>[v,"-",t,"v",e?`_${e}`:"",n?`-${n}`:""].join("")}function b(t){return t.rawValue}function _(t,e){var n,i;t.emitter.on("change",(n=b,i=e,t=>i(n(t)))),e(t.rawValue)}function g(t,e,n){_(t.value(e),n)}function f(t,e){return n=>{!function(t,e,n){n?t.classList.add(e):t.classList.remove(e)}(t,e,n)}}function w(t,e){_(t,(t=>{e.textContent=null!=t?t:""}))}const x=m("btn");class C{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(x()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("button");n.classList.add(x("b")),e.viewProps.bindDisabled(n),this.element.appendChild(n),this.buttonElement=n;const i=t.createElement("div");i.classList.add(x("t")),w(e.props.value("title"),i),this.buttonElement.appendChild(i)}}class y{constructor(t,e){this.emitter=new u,this.onClick_=this.onClick_.bind(this),this.props=e.props,this.viewProps=e.viewProps,this.view=new C(t,{props:this.props,viewProps:this.viewProps}),this.view.buttonElement.addEventListener("click",this.onClick_)}onClick_(){this.emitter.emit("click",{sender:this})}}class P{constructor(t,e){var n;this.constraint_=null==e?void 0:e.constraint,this.equals_=null!==(n=null==e?void 0:e.equals)&&void 0!==n?n:(t,e)=>t===e,this.emitter=new u,this.rawValue_=t}get constraint(){return this.constraint_}get rawValue(){return this.rawValue_}set rawValue(t){this.setRawValue(t,{forceEmit:!1,last:!0})}setRawValue(t,e){const n=null!=e?e:{forceEmit:!1,last:!0},i=this.constraint_?this.constraint_.constrain(t):t;(!this.equals_(this.rawValue_,i)||n.forceEmit)&&(this.emitter.emit("beforechange",{sender:this}),this.rawValue_=i,this.emitter.emit("change",{options:n,rawValue:i,sender:this}))}}class k{constructor(t){this.emitter=new u,this.value_=t}get rawValue(){return this.value_}set rawValue(t){this.setRawValue(t,{forceEmit:!1,last:!0})}setRawValue(t,e){const n=null!=e?e:{forceEmit:!1,last:!0};(this.value_!==t||n.forceEmit)&&(this.emitter.emit("beforechange",{sender:this}),this.value_=t,this.emitter.emit("change",{options:n,rawValue:this.value_,sender:this}))}}function E(t,e){const n=null==e?void 0:e.constraint,i=null==e?void 0:e.equals;return n||i?new P(t,e):new k(t)}class V{constructor(t){this.emitter=new u,this.valMap_=t;for(const t in this.valMap_){this.valMap_[t].emitter.on("change",(()=>{this.emitter.emit("change",{key:t,sender:this})}))}}static createCore(t){return Object.keys(t).reduce(((e,n)=>Object.assign(e,{[n]:E(t[n])})),{})}static fromObject(t){const e=this.createCore(t);return new V(e)}get(t){return this.valMap_[t].rawValue}set(t,e){this.valMap_[t].rawValue=e}value(t){return this.valMap_[t]}}function L(t){return e=>n=>{if(!e&&void 0===n)return{succeeded:!1,value:void 0};if(e&&void 0===n)return{succeeded:!0,value:void 0};const i=t(n);return void 0!==i?{succeeded:!0,value:i}:{succeeded:!1,value:void 0}}}function M(t){return{custom:e=>L(e)(t),boolean:L((t=>"boolean"==typeof t?t:void 0))(t),number:L((t=>"number"==typeof t?t:void 0))(t),string:L((t=>"string"==typeof t?t:void 0))(t),function:L((t=>"function"==typeof t?t:void 0))(t),constant:e=>L((t=>t===e?e:void 0))(t),raw:L((t=>t))(t),object:e=>L((t=>{var n;if(null!==(n=t)&&"object"==typeof n)return function(t,e){return Object.keys(e).reduce(((n,i)=>{if(void 0===n)return;const s=(0,e[i])(t[i]);return s.succeeded?Object.assign(Object.assign({},n),{[i]:s.value}):void 0}),{})}(t,e)}))(t),array:e=>L((t=>{var n;if(Array.isArray(t))return n=e,t.reduce(((t,e)=>{if(void 0===t)return;const i=n(e);return i.succeeded&&void 0!==i.value?[...t,i.value]:void 0}),[])}))(t)}}const S={optional:M(!0),required:M(!1)};function A(t,e){const n=S.required.object(e)(t);return n.succeeded?n.value:void 0}const D=m(""),j={veryfirst:"vfst",first:"fst",last:"lst",verylast:"vlst"};class N{constructor(t){this.parent_=null,this.blade=t.blade,this.view=t.view,this.viewProps=t.viewProps;const e=this.view.element;this.blade.value("positions").emitter.on("change",(()=>{["veryfirst","first","last","verylast"].forEach((t=>{e.classList.remove(D(void 0,j[t]))})),this.blade.get("positions").forEach((t=>{e.classList.add(D(void 0,j[t]))}))})),this.viewProps.handleDispose((()=>{!function(t){t&&t.parentElement&&t.parentElement.removeChild(t)}(e)}))}get parent(){return this.parent_}}const O="http://www.w3.org/2000/svg";function R(t){t.offsetHeight}function I(t){return void 0!==t.ontouchstart}function K(){return new Function("return this")().document}const U={check:'',dropdown:'',p2dpad:''};function T(t,e){const n=t.createElementNS(O,"svg");return n.innerHTML=U[e],n}function B(t,e,n){t.insertBefore(e,t.children[n])}function F(t){t.parentElement&&t.parentElement.removeChild(t)}function H(t){for(;t.children.length>0;)t.removeChild(t.children[0])}function $(t){return t.relatedTarget?t.relatedTarget:"explicitOriginalTarget"in t?t.explicitOriginalTarget:null}const z=m("lbl");class q{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(z()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("div");n.classList.add(z("l")),g(e.props,"label",(e=>{a(e)?this.element.classList.add(z(void 0,"nol")):(this.element.classList.remove(z(void 0,"nol")),function(t){for(;t.childNodes.length>0;)t.removeChild(t.childNodes[0])}(n),n.appendChild(function(t,e){const n=t.createDocumentFragment();return e.split("\n").map((e=>t.createTextNode(e))).forEach(((e,i)=>{i>0&&n.appendChild(t.createElement("br")),n.appendChild(e)})),n}(t,e)))})),this.element.appendChild(n),this.labelElement=n;const i=t.createElement("div");i.classList.add(z("v")),this.element.appendChild(i),this.valueElement=i}}class G extends N{constructor(t,e){const n=e.valueController.viewProps;super(Object.assign(Object.assign({},e),{view:new q(t,{props:e.props,viewProps:n}),viewProps:n})),this.props=e.props,this.valueController=e.valueController,this.view.valueElement.appendChild(this.valueController.view.element)}}const Y={id:"button",type:"blade",accept(t){const e=S,n=A(t,{title:e.required.string,view:e.required.constant("button"),label:e.optional.string});return n?{params:n}:null},controller:t=>new G(t.document,{blade:t.blade,props:V.fromObject({label:t.params.label}),valueController:new y(t.document,{props:V.fromObject({title:t.params.title}),viewProps:t.viewProps})}),api:t=>t.controller instanceof G&&t.controller.valueController instanceof y?new h(t.controller):null};class X extends N{constructor(t){super(t),this.value=t.value}}function Q(){return new V({positions:E([],{equals:l})})}class J extends V{constructor(t){super(t)}static create(t){const e={completed:!0,expanded:t,expandedHeight:null,shouldFixHeight:!1,temporaryExpanded:null},n=V.createCore(e);return new J(n)}get styleExpanded(){var t;return null!==(t=this.get("temporaryExpanded"))&&void 0!==t?t:this.get("expanded")}get styleHeight(){if(!this.styleExpanded)return"0";const t=this.get("expandedHeight");return this.get("shouldFixHeight")&&!a(t)?`${t}px`:"auto"}bindExpandedClass(t,e){const n=()=>{this.styleExpanded?t.classList.add(e):t.classList.remove(e)};g(this,"expanded",n),g(this,"temporaryExpanded",n)}cleanUpTransition(){this.set("shouldFixHeight",!1),this.set("expandedHeight",null),this.set("completed",!0)}}function W(t,e){e.style.height=t.styleHeight}function Z(t,e){t.value("expanded").emitter.on("beforechange",(()=>{t.set("completed",!1),a(t.get("expandedHeight"))&&t.set("expandedHeight",function(t,e){let n=0;return function(t,e){const n=t.style.transition;t.style.transition="none",e(),t.style.transition=n}(e,(()=>{t.set("expandedHeight",null),t.set("temporaryExpanded",!0),R(e),n=e.clientHeight,t.set("temporaryExpanded",null),R(e)})),n}(t,e)),t.set("shouldFixHeight",!0),R(e)})),t.emitter.on("change",(()=>{W(t,e)})),W(t,e),e.addEventListener("transitionend",(e=>{"height"===e.propertyName&&t.cleanUpTransition()}))}class tt extends e{constructor(t,e){super(t),this.rackApi_=e}}class et{constructor(t){this.emitter=new u,this.items_=[],this.cache_=new Set,this.onSubListAdd_=this.onSubListAdd_.bind(this),this.onSubListRemove_=this.onSubListRemove_.bind(this),this.extract_=t}get items(){return this.items_}allItems(){return Array.from(this.cache_)}find(t){for(const e of this.allItems())if(t(e))return e;return null}includes(t){return this.cache_.has(t)}add(t,e){if(this.includes(t))throw d.shouldNeverHappen();const n=void 0!==e?e:this.items_.length;this.items_.splice(n,0,t),this.cache_.add(t);const i=this.extract_(t);i&&(i.emitter.on("add",this.onSubListAdd_),i.emitter.on("remove",this.onSubListRemove_),i.allItems().forEach((t=>{this.cache_.add(t)}))),this.emitter.emit("add",{index:n,item:t,root:this,target:this})}remove(t){const e=this.items_.indexOf(t);if(e<0)return;this.items_.splice(e,1),this.cache_.delete(t);const n=this.extract_(t);n&&(n.emitter.off("add",this.onSubListAdd_),n.emitter.off("remove",this.onSubListRemove_)),this.emitter.emit("remove",{index:e,item:t,root:this,target:this})}onSubListAdd_(t){this.cache_.add(t.item),this.emitter.emit("add",{index:t.index,item:t.item,root:this,target:t.target})}onSubListRemove_(t){this.cache_.delete(t.item),this.emitter.emit("remove",{index:t.index,item:t.item,root:this,target:t.target})}}class nt extends e{constructor(t){super(t),this.onBindingChange_=this.onBindingChange_.bind(this),this.emitter_=new u,this.controller_.binding.emitter.on("change",this.onBindingChange_)}get label(){return this.controller_.props.get("label")}set label(t){this.controller_.props.set("label",t)}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}refresh(){this.controller_.binding.read()}onBindingChange_(t){const e=t.sender.target.read();this.emitter_.emit("change",{event:new i(this,e,this.controller_.binding.target.presetKey,t.options.last)})}}class it extends G{constructor(t,e){super(t,e),this.binding=e.binding}}class st extends e{constructor(t){super(t),this.onBindingUpdate_=this.onBindingUpdate_.bind(this),this.emitter_=new u,this.controller_.binding.emitter.on("update",this.onBindingUpdate_)}get label(){return this.controller_.props.get("label")}set label(t){this.controller_.props.set("label",t)}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}refresh(){this.controller_.binding.read()}onBindingUpdate_(t){const e=t.sender.target.read();this.emitter_.emit("update",{event:new s(this,e,this.controller_.binding.target.presetKey)})}}class ot extends G{constructor(t,e){super(t,e),this.binding=e.binding,this.viewProps.bindDisabled(this.binding.ticker),this.viewProps.handleDispose((()=>{this.binding.dispose()}))}}function rt(t){return t instanceof pt?t.apiSet_:t instanceof tt?t.rackApi_.apiSet_:null}function at(t,e){const n=t.find((t=>t.controller_===e));if(!n)throw d.shouldNeverHappen();return n}function lt(t,e,n){if(!c.isBindable(t))throw d.notBindable();return new c(t,e,n)}class pt extends e{constructor(t,e){super(t),this.onRackAdd_=this.onRackAdd_.bind(this),this.onRackRemove_=this.onRackRemove_.bind(this),this.onRackInputChange_=this.onRackInputChange_.bind(this),this.onRackMonitorUpdate_=this.onRackMonitorUpdate_.bind(this),this.emitter_=new u,this.apiSet_=new et(rt),this.pool_=e;const n=this.controller_.rack;n.emitter.on("add",this.onRackAdd_),n.emitter.on("remove",this.onRackRemove_),n.emitter.on("inputchange",this.onRackInputChange_),n.emitter.on("monitorupdate",this.onRackMonitorUpdate_),n.children.forEach((t=>{this.setUpApi_(t)}))}get children(){return this.controller_.rack.children.map((t=>at(this.apiSet_,t)))}addInput(t,e,n){const i=null!=n?n:{},s=this.controller_.view.element.ownerDocument,o=this.pool_.createInput(s,lt(t,e,i.presetKey),i),r=new nt(o);return this.add(r,i.index)}addMonitor(t,e,n){const i=null!=n?n:{},s=this.controller_.view.element.ownerDocument,o=this.pool_.createMonitor(s,lt(t,e),i),r=new st(o);return this.add(r,i.index)}addFolder(t){return function(t,e){return t.addBlade(Object.assign(Object.assign({},e),{view:"folder"}))}(this,t)}addButton(t){return function(t,e){return t.addBlade(Object.assign(Object.assign({},e),{view:"button"}))}(this,t)}addSeparator(t){return function(t,e){const n=null!=e?e:{};return t.addBlade(Object.assign(Object.assign({},n),{view:"separator"}))}(this,t)}addTab(t){return function(t,e){return t.addBlade(Object.assign(Object.assign({},e),{view:"tab"}))}(this,t)}add(t,e){this.controller_.rack.add(t.controller_,e);const n=this.apiSet_.find((e=>e.controller_===t.controller_));return n&&this.apiSet_.remove(n),this.apiSet_.add(t),t}remove(t){this.controller_.rack.remove(t.controller_)}addBlade(t){const e=this.controller_.view.element.ownerDocument,n=this.pool_.createBlade(e,t),i=this.pool_.createBladeApi(n);return this.add(i,t.index)}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}setUpApi_(t){this.apiSet_.find((e=>e.controller_===t))||this.apiSet_.add(this.pool_.createBladeApi(t))}onRackAdd_(t){this.setUpApi_(t.bladeController)}onRackRemove_(t){if(t.isRoot){const e=at(this.apiSet_,t.bladeController);this.apiSet_.remove(e)}}onRackInputChange_(t){const e=t.bladeController;if(e instanceof it){const n=at(this.apiSet_,e),s=e.binding;this.emitter_.emit("change",{event:new i(n,s.target.read(),s.target.presetKey,t.options.last)})}else if(e instanceof X){const n=at(this.apiSet_,e);this.emitter_.emit("change",{event:new i(n,e.value.rawValue,void 0,t.options.last)})}}onRackMonitorUpdate_(t){if(!(t.bladeController instanceof ot))throw d.shouldNeverHappen();const e=at(this.apiSet_,t.bladeController),n=t.bladeController.binding;this.emitter_.emit("update",{event:new s(e,n.target.read(),n.target.presetKey)})}}class dt extends tt{constructor(t,e){super(t,new pt(t.rackController,e)),this.emitter_=new u,this.controller_.foldable.value("expanded").emitter.on("change",(t=>{this.emitter_.emit("fold",{event:new o(this,t.sender.rawValue)})})),this.rackApi_.on("change",(t=>{this.emitter_.emit("change",{event:t})})),this.rackApi_.on("update",(t=>{this.emitter_.emit("update",{event:t})}))}get expanded(){return this.controller_.foldable.get("expanded")}set expanded(t){this.controller_.foldable.set("expanded",t)}get title(){return this.controller_.props.get("title")}set title(t){this.controller_.props.set("title",t)}get children(){return this.rackApi_.children}addInput(t,e,n){return this.rackApi_.addInput(t,e,n)}addMonitor(t,e,n){return this.rackApi_.addMonitor(t,e,n)}addFolder(t){return this.rackApi_.addFolder(t)}addButton(t){return this.rackApi_.addButton(t)}addSeparator(t){return this.rackApi_.addSeparator(t)}addTab(t){return this.rackApi_.addTab(t)}add(t,e){return this.rackApi_.add(t,e)}remove(t){this.rackApi_.remove(t)}addBlade(t){return this.rackApi_.addBlade(t)}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}}class ct extends N{constructor(t){super({blade:t.blade,view:t.view,viewProps:t.rackController.viewProps}),this.rackController=t.rackController}}class ht{constructor(t,e){const n=m(e.viewName);this.element=t.createElement("div"),this.element.classList.add(n()),e.viewProps.bindClassModifiers(this.element)}}function ut(t){return t instanceof bt?t.rack:t instanceof ct?t.rackController.rack:null}function vt(t){const e=ut(t);return e?e.bcSet_:null}class mt{constructor(t){var e;this.onBladePositionsChange_=this.onBladePositionsChange_.bind(this),this.onSetAdd_=this.onSetAdd_.bind(this),this.onSetRemove_=this.onSetRemove_.bind(this),this.onChildDispose_=this.onChildDispose_.bind(this),this.onChildPositionsChange_=this.onChildPositionsChange_.bind(this),this.onChildInputChange_=this.onChildInputChange_.bind(this),this.onChildMonitorUpdate_=this.onChildMonitorUpdate_.bind(this),this.onChildValueChange_=this.onChildValueChange_.bind(this),this.onChildViewPropsChange_=this.onChildViewPropsChange_.bind(this),this.onDescendantLayout_=this.onDescendantLayout_.bind(this),this.onDescendantInputChange_=this.onDescendantInputChange_.bind(this),this.onDescendantMonitorUpdate_=this.onDescendantMonitorUpdate_.bind(this),this.emitter=new u,this.blade_=null!=t?t:null,null===(e=this.blade_)||void 0===e||e.value("positions").emitter.on("change",this.onBladePositionsChange_),this.bcSet_=new et(vt),this.bcSet_.emitter.on("add",this.onSetAdd_),this.bcSet_.emitter.on("remove",this.onSetRemove_)}get children(){return this.bcSet_.items}add(t,e){t.parent&&t.parent.remove(t),t.parent_=this,this.bcSet_.add(t,e)}remove(t){t.parent_=null,this.bcSet_.remove(t)}find(t){return this.bcSet_.allItems().filter((e=>e instanceof t))}onSetAdd_(t){this.updatePositions_();const e=t.target===t.root;if(this.emitter.emit("add",{bladeController:t.item,index:t.index,isRoot:e,sender:this}),!e)return;const n=t.item;if(n.viewProps.emitter.on("change",this.onChildViewPropsChange_),n.blade.value("positions").emitter.on("change",this.onChildPositionsChange_),n.viewProps.handleDispose(this.onChildDispose_),n instanceof it)n.binding.emitter.on("change",this.onChildInputChange_);else if(n instanceof ot)n.binding.emitter.on("update",this.onChildMonitorUpdate_);else if(n instanceof X)n.value.emitter.on("change",this.onChildValueChange_);else{const t=ut(n);if(t){const e=t.emitter;e.on("layout",this.onDescendantLayout_),e.on("inputchange",this.onDescendantInputChange_),e.on("monitorupdate",this.onDescendantMonitorUpdate_)}}}onSetRemove_(t){this.updatePositions_();const e=t.target===t.root;if(this.emitter.emit("remove",{bladeController:t.item,isRoot:e,sender:this}),!e)return;const n=t.item;if(n instanceof it)n.binding.emitter.off("change",this.onChildInputChange_);else if(n instanceof ot)n.binding.emitter.off("update",this.onChildMonitorUpdate_);else if(n instanceof X)n.value.emitter.off("change",this.onChildValueChange_);else{const t=ut(n);if(t){const e=t.emitter;e.off("layout",this.onDescendantLayout_),e.off("inputchange",this.onDescendantInputChange_),e.off("monitorupdate",this.onDescendantMonitorUpdate_)}}}updatePositions_(){const t=this.bcSet_.items.filter((t=>!t.viewProps.get("hidden"))),e=t[0],n=t[t.length-1];this.bcSet_.items.forEach((t=>{const i=[];t===e&&(i.push("first"),this.blade_&&!this.blade_.get("positions").includes("veryfirst")||i.push("veryfirst")),t===n&&(i.push("last"),this.blade_&&!this.blade_.get("positions").includes("verylast")||i.push("verylast")),t.blade.set("positions",i)}))}onChildPositionsChange_(){this.updatePositions_(),this.emitter.emit("layout",{sender:this})}onChildViewPropsChange_(t){this.updatePositions_(),this.emitter.emit("layout",{sender:this})}onChildDispose_(){this.bcSet_.items.filter((t=>t.viewProps.get("disposed"))).forEach((t=>{this.bcSet_.remove(t)}))}onChildInputChange_(t){const e=function(t,e){for(let n=0;n{for(let t=this.rack.children.length-1;t>=0;t--){this.rack.children[t].viewProps.set("disposed",!0)}}))}onRackAdd_(t){t.isRoot&&B(this.view.element,t.bladeController.view.element,t.index)}onRackRemove_(t){t.isRoot&&F(t.bladeController.view.element)}}const _t=m("cnt");class gt{constructor(t,e){var n;this.className_=m(null!==(n=e.viewName)&&void 0!==n?n:"fld"),this.element=t.createElement("div"),this.element.classList.add(this.className_(),_t()),e.viewProps.bindClassModifiers(this.element),this.foldable_=e.foldable,this.foldable_.bindExpandedClass(this.element,this.className_(void 0,"expanded")),g(this.foldable_,"completed",f(this.element,this.className_(void 0,"cpl")));const i=t.createElement("button");i.classList.add(this.className_("b")),g(e.props,"title",(t=>{a(t)?this.element.classList.add(this.className_(void 0,"not")):this.element.classList.remove(this.className_(void 0,"not"))})),e.viewProps.bindDisabled(i),this.element.appendChild(i),this.buttonElement=i;const s=t.createElement("div");s.classList.add(this.className_("t")),w(e.props.value("title"),s),this.buttonElement.appendChild(s),this.titleElement=s;const o=t.createElement("div");o.classList.add(this.className_("m")),this.buttonElement.appendChild(o);const r=e.containerElement;r.classList.add(this.className_("c")),this.element.appendChild(r),this.containerElement=r}}class ft extends ct{constructor(t,e){var n;const i=J.create(null===(n=e.expanded)||void 0===n||n),s=new bt(t,{blade:e.blade,root:e.root,viewProps:e.viewProps});super(Object.assign(Object.assign({},e),{rackController:s,view:new gt(t,{containerElement:s.view.element,foldable:i,props:e.props,viewName:e.root?"rot":void 0,viewProps:e.viewProps})})),this.onTitleClick_=this.onTitleClick_.bind(this),this.props=e.props,this.foldable=i,Z(this.foldable,this.view.containerElement),this.rackController.rack.emitter.on("add",(()=>{this.foldable.cleanUpTransition()})),this.rackController.rack.emitter.on("remove",(()=>{this.foldable.cleanUpTransition()})),this.view.buttonElement.addEventListener("click",this.onTitleClick_)}get document(){return this.view.element.ownerDocument}onTitleClick_(){this.foldable.set("expanded",!this.foldable.get("expanded"))}}const wt={id:"folder",type:"blade",accept(t){const e=S,n=A(t,{title:e.required.string,view:e.required.constant("folder"),expanded:e.optional.boolean});return n?{params:n}:null},controller:t=>new ft(t.document,{blade:t.blade,expanded:t.params.expanded,props:V.fromObject({title:t.params.title}),viewProps:t.viewProps}),api:t=>t.controller instanceof ft?new dt(t.controller,t.pool):null};class xt extends X{constructor(t,e){const n=e.valueController.viewProps;super(Object.assign(Object.assign({},e),{value:e.valueController.value,view:new q(t,{props:e.props,viewProps:n}),viewProps:n})),this.props=e.props,this.valueController=e.valueController,this.view.valueElement.appendChild(this.valueController.view.element)}}class Ct extends e{}const yt=m("spr");class Pt{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(yt()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("hr");n.classList.add(yt("r")),this.element.appendChild(n)}}class kt extends N{constructor(t,e){super(Object.assign(Object.assign({},e),{view:new Pt(t,{viewProps:e.viewProps})}))}}const Et={id:"separator",type:"blade",accept(t){const e=A(t,{view:S.required.constant("separator")});return e?{params:e}:null},controller:t=>new kt(t.document,{blade:t.blade,viewProps:t.viewProps}),api:t=>t.controller instanceof kt?new Ct(t.controller):null},Vt=m("");function Lt(t,e){return f(t,Vt(void 0,e))}class Mt extends V{constructor(t){super(t)}static create(t){var e,n;const i=null!=t?t:{},s={disabled:null!==(e=i.disabled)&&void 0!==e&&e,disposed:!1,hidden:null!==(n=i.hidden)&&void 0!==n&&n},o=V.createCore(s);return new Mt(o)}bindClassModifiers(t){g(this,"disabled",Lt(t,"disabled")),g(this,"hidden",Lt(t,"hidden"))}bindDisabled(t){g(this,"disabled",(e=>{t.disabled=e}))}bindTabIndex(t){g(this,"disabled",(e=>{t.tabIndex=e?-1:0}))}handleDispose(t){this.value("disposed").emitter.on("change",(e=>{e&&t()}))}}const St=m("tbi");class At{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(St()),e.viewProps.bindClassModifiers(this.element),g(e.props,"selected",(t=>{t?this.element.classList.add(St(void 0,"sel")):this.element.classList.remove(St(void 0,"sel"))}));const n=t.createElement("button");n.classList.add(St("b")),e.viewProps.bindDisabled(n),this.element.appendChild(n),this.buttonElement=n;const i=t.createElement("div");i.classList.add(St("t")),w(e.props.value("title"),i),this.buttonElement.appendChild(i),this.titleElement=i}}class Dt{constructor(t,e){this.emitter=new u,this.onClick_=this.onClick_.bind(this),this.props=e.props,this.viewProps=e.viewProps,this.view=new At(t,{props:e.props,viewProps:e.viewProps}),this.view.buttonElement.addEventListener("click",this.onClick_)}onClick_(){this.emitter.emit("click",{sender:this})}}class jt{constructor(t,e){this.onItemClick_=this.onItemClick_.bind(this),this.ic_=new Dt(t,{props:e.itemProps,viewProps:Mt.create()}),this.ic_.emitter.on("click",this.onItemClick_),this.cc_=new bt(t,{blade:Q(),viewProps:Mt.create()}),this.props=e.props,g(this.props,"selected",(t=>{this.itemController.props.set("selected",t),this.contentController.viewProps.set("hidden",!t)}))}get itemController(){return this.ic_}get contentController(){return this.cc_}onItemClick_(){this.props.set("selected",!0)}}class Nt{constructor(t,e){this.controller_=t,this.rackApi_=e}get title(){var t;return null!==(t=this.controller_.itemController.props.get("title"))&&void 0!==t?t:""}set title(t){this.controller_.itemController.props.set("title",t)}get selected(){return this.controller_.props.get("selected")}set selected(t){this.controller_.props.set("selected",t)}get children(){return this.rackApi_.children}addButton(t){return this.rackApi_.addButton(t)}addFolder(t){return this.rackApi_.addFolder(t)}addSeparator(t){return this.rackApi_.addSeparator(t)}addTab(t){return this.rackApi_.addTab(t)}add(t,e){this.rackApi_.add(t,e)}remove(t){this.rackApi_.remove(t)}addInput(t,e,n){return this.rackApi_.addInput(t,e,n)}addMonitor(t,e,n){return this.rackApi_.addMonitor(t,e,n)}addBlade(t){return this.rackApi_.addBlade(t)}}class Ot extends tt{constructor(t,e){super(t,new pt(t.rackController,e)),this.onPageAdd_=this.onPageAdd_.bind(this),this.onPageRemove_=this.onPageRemove_.bind(this),this.onSelect_=this.onSelect_.bind(this),this.emitter_=new u,this.pageApiMap_=new Map,this.rackApi_.on("change",(t=>{this.emitter_.emit("change",{event:t})})),this.rackApi_.on("update",(t=>{this.emitter_.emit("update",{event:t})})),this.controller_.tab.selectedIndex.emitter.on("change",this.onSelect_),this.controller_.pageSet.emitter.on("add",this.onPageAdd_),this.controller_.pageSet.emitter.on("remove",this.onPageRemove_),this.controller_.pageSet.items.forEach((t=>{this.setUpPageApi_(t)}))}get pages(){return this.controller_.pageSet.items.map((t=>{const e=this.pageApiMap_.get(t);if(!e)throw d.shouldNeverHappen();return e}))}addPage(t){const e=this.controller_.view.element.ownerDocument,n=new jt(e,{itemProps:V.fromObject({selected:!1,title:t.title}),props:V.fromObject({selected:!1})});this.controller_.add(n,t.index);const i=this.pageApiMap_.get(n);if(!i)throw d.shouldNeverHappen();return i}removePage(t){this.controller_.remove(t)}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}setUpPageApi_(t){const e=this.rackApi_.apiSet_.find((e=>e.controller_===t.contentController));if(!e)throw d.shouldNeverHappen();const n=new Nt(t,e);this.pageApiMap_.set(t,n)}onPageAdd_(t){this.setUpPageApi_(t.item)}onPageRemove_(t){if(!this.pageApiMap_.get(t.item))throw d.shouldNeverHappen();this.pageApiMap_.delete(t.item)}onSelect_(t){this.emitter_.emit("select",{event:new r(this,t.rawValue)})}}class Rt{constructor(){this.onItemSelectedChange_=this.onItemSelectedChange_.bind(this),this.empty=E(!0),this.selectedIndex=E(-1),this.items_=[]}add(t,e){const n=null!=e?e:this.items_.length;this.items_.splice(n,0,t),t.emitter.on("change",this.onItemSelectedChange_),this.keepSelection_()}remove(t){const e=this.items_.indexOf(t);e<0||(this.items_.splice(e,1),t.emitter.off("change",this.onItemSelectedChange_),this.keepSelection_())}keepSelection_(){if(0===this.items_.length)return this.selectedIndex.rawValue=-1,void(this.empty.rawValue=!0);const t=this.items_.findIndex((t=>t.rawValue));t<0?(this.items_.forEach(((t,e)=>{t.rawValue=0===e})),this.selectedIndex.rawValue=0):(this.items_.forEach(((e,n)=>{e.rawValue=n===t})),this.selectedIndex.rawValue=t),this.empty.rawValue=!1}onItemSelectedChange_(t){if(t.rawValue){const e=this.items_.findIndex((e=>e===t.sender));this.items_.forEach(((t,n)=>{t.rawValue=n===e})),this.selectedIndex.rawValue=e}else this.keepSelection_()}}const It=m("tab");class Kt{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(It(),_t()),e.viewProps.bindClassModifiers(this.element),_(e.empty,f(this.element,It(void 0,"nop")));const n=t.createElement("div");n.classList.add(It("i")),this.element.appendChild(n),this.itemsElement=n;const i=e.contentsElement;i.classList.add(It("c")),this.element.appendChild(i),this.contentsElement=i}}class Ut extends ct{constructor(t,e){const n=new bt(t,{blade:e.blade,viewProps:e.viewProps}),i=new Rt;super({blade:e.blade,rackController:n,view:new Kt(t,{contentsElement:n.view.element,empty:i.empty,viewProps:e.viewProps})}),this.onPageAdd_=this.onPageAdd_.bind(this),this.onPageRemove_=this.onPageRemove_.bind(this),this.pageSet_=new et((()=>null)),this.pageSet_.emitter.on("add",this.onPageAdd_),this.pageSet_.emitter.on("remove",this.onPageRemove_),this.tab=i}get pageSet(){return this.pageSet_}add(t,e){this.pageSet_.add(t,e)}remove(t){this.pageSet_.remove(this.pageSet_.items[t])}onPageAdd_(t){const e=t.item;B(this.view.itemsElement,e.itemController.view.element,t.index),this.rackController.rack.add(e.contentController,t.index),this.tab.add(e.props.value("selected"))}onPageRemove_(t){const e=t.item;F(e.itemController.view.element),this.rackController.rack.remove(e.contentController),this.tab.remove(e.props.value("selected"))}}const Tt={id:"tab",type:"blade",accept(t){const e=S,n=A(t,{pages:e.required.array(e.required.object({title:e.required.string})),view:e.required.constant("tab")});return n&&0!==n.pages.length?{params:n}:null},controller(t){const e=new Ut(t.document,{blade:t.blade,viewProps:t.viewProps});return t.params.pages.forEach((n=>{const i=new jt(t.document,{itemProps:V.fromObject({selected:!1,title:n.title}),props:V.fromObject({selected:!1})});e.add(i)})),e},api:t=>t.controller instanceof Ut?new Ot(t.controller,t.pool):null};class Bt{constructor(){this.disabled=!1,this.emitter=new u}dispose(){}tick(){this.disabled||this.emitter.emit("tick",{sender:this})}}class Ft{constructor(t,e){this.disabled_=!1,this.timerId_=null,this.onTick_=this.onTick_.bind(this),this.doc_=t,this.emitter=new u,this.interval_=e,this.setTimer_()}get disabled(){return this.disabled_}set disabled(t){this.disabled_=t,this.disabled_?this.clearTimer_():this.setTimer_()}dispose(){this.clearTimer_()}clearTimer_(){if(null===this.timerId_)return;const t=this.doc_.defaultView;t&&t.clearInterval(this.timerId_),this.timerId_=null}setTimer_(){if(this.clearTimer_(),this.interval_<=0)return;const t=this.doc_.defaultView;t&&(this.timerId_=t.setInterval(this.onTick_,this.interval_))}onTick_(){this.disabled_||this.emitter.emit("tick",{sender:this})}}class Ht{constructor(t){this.constraints=t}constrain(t){return this.constraints.reduce(((t,e)=>e.constrain(t)),t)}}function $t(t,e){if(t instanceof e)return t;if(t instanceof Ht){const n=t.constraints.reduce(((t,n)=>t||(n instanceof e?n:null)),null);if(n)return n}return null}class zt{constructor(t){this.options=t}constrain(t){const e=this.options;if(0===e.length)return t;return e.filter((e=>e.value===t)).length>0?t:e[0].value}}class qt{constructor(t){this.maxValue=t.max,this.minValue=t.min}constrain(t){let e=t;return a(this.minValue)||(e=Math.max(e,this.minValue)),a(this.maxValue)||(e=Math.min(e,this.maxValue)),e}}class Gt{constructor(t,e=0){this.step=t,this.origin=e}constrain(t){const e=this.origin%this.step;return e+Math.round((t-e)/this.step)*this.step}}const Yt=m("lst");class Xt{constructor(t,e){this.onValueChange_=this.onValueChange_.bind(this),this.props_=e.props,this.element=t.createElement("div"),this.element.classList.add(Yt()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("select");n.classList.add(Yt("s")),g(this.props_,"options",(e=>{H(n),e.forEach(((e,i)=>{const s=t.createElement("option");s.dataset.index=String(i),s.textContent=e.text,s.value=String(e.value),n.appendChild(s)}))})),e.viewProps.bindDisabled(n),this.element.appendChild(n),this.selectElement=n;const i=t.createElement("div");i.classList.add(Yt("m")),i.appendChild(T(t,"dropdown")),this.element.appendChild(i),e.value.emitter.on("change",this.onValueChange_),this.value_=e.value,this.update_()}update_(){this.selectElement.value=String(this.value_.rawValue)}onValueChange_(){this.update_()}}class Qt{constructor(t,e){this.onSelectChange_=this.onSelectChange_.bind(this),this.props=e.props,this.value=e.value,this.viewProps=e.viewProps,this.view=new Xt(t,{props:this.props,value:this.value,viewProps:this.viewProps}),this.view.selectElement.addEventListener("change",this.onSelectChange_)}onSelectChange_(t){const e=t.currentTarget.selectedOptions.item(0);if(!e)return;const n=Number(e.dataset.index);this.value.rawValue=this.props.get("options")[n].value}}const Jt=m("pop");class Wt{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(Jt()),e.viewProps.bindClassModifiers(this.element),_(e.shows,f(this.element,Jt(void 0,"v")))}}class Zt{constructor(t,e){this.shows=E(!1),this.viewProps=e.viewProps,this.view=new Wt(t,{shows:this.shows,viewProps:this.viewProps})}}const te=m("txt");class ee{constructor(t,e){this.onChange_=this.onChange_.bind(this),this.element=t.createElement("div"),this.element.classList.add(te()),e.viewProps.bindClassModifiers(this.element),this.props_=e.props,this.props_.emitter.on("change",this.onChange_);const n=t.createElement("input");n.classList.add(te("i")),n.type="text",e.viewProps.bindDisabled(n),this.element.appendChild(n),this.inputElement=n,e.value.emitter.on("change",this.onChange_),this.value_=e.value,this.refresh()}refresh(){const t=this.props_.get("formatter");this.inputElement.value=t(this.value_.rawValue)}onChange_(){this.refresh()}}class ne{constructor(t,e){this.onInputChange_=this.onInputChange_.bind(this),this.parser_=e.parser,this.props=e.props,this.value=e.value,this.viewProps=e.viewProps,this.view=new ee(t,{props:e.props,value:this.value,viewProps:this.viewProps}),this.view.inputElement.addEventListener("change",this.onInputChange_)}onInputChange_(t){const e=t.currentTarget.value,n=this.parser_(e);a(n)||(this.value.rawValue=n),this.view.refresh()}}function ie(t){return"false"!==t&&!!t}function se(t){return function(t){return String(t)}(t)}class oe{constructor(t){this.text=t}evaluate(){return Number(this.text)}toString(){return this.text}}const re={"**":(t,e)=>Math.pow(t,e),"*":(t,e)=>t*e,"/":(t,e)=>t/e,"%":(t,e)=>t%e,"+":(t,e)=>t+e,"-":(t,e)=>t-e,"<<":(t,e)=>t<>":(t,e)=>t>>e,">>>":(t,e)=>t>>>e,"&":(t,e)=>t&e,"^":(t,e)=>t^e,"|":(t,e)=>t|e};class ae{constructor(t,e,n){this.left=e,this.operator=t,this.right=n}evaluate(){const t=re[this.operator];if(!t)throw new Error(`unexpected binary operator: '${this.operator}`);return t(this.left.evaluate(),this.right.evaluate())}toString(){return["b(",this.left.toString(),this.operator,this.right.toString(),")"].join(" ")}}const le={"+":t=>t,"-":t=>-t,"~":t=>~t};class pe{constructor(t,e){this.operator=t,this.expression=e}evaluate(){const t=le[this.operator];if(!t)throw new Error(`unexpected unary operator: '${this.operator}`);return t(this.expression.evaluate())}toString(){return["u(",this.operator,this.expression.toString(),")"].join(" ")}}function de(t){return(e,n)=>{for(let i=0;ie.startsWith(t,n)))[0];return i?(n+=i.length,{cursor:n+=ce(e,n).length,operator:i}):null}const we=[["**"],["*","/","%"],["+","-"],["<<",">>>",">>"],["&"],["^"],["|"]].reduce(((t,e)=>function(t,e){return(n,i)=>{const s=t(n,i);if(!s)return null;i=s.cursor;let o=s.evaluable;for(;;){const s=fe(e,n,i);if(!s)break;i=s.cursor;const r=t(n,i);if(!r)return null;i=r.cursor,o=new ae(s.operator,o,r.evaluable)}return o?{cursor:i,evaluable:o}:null}}(t,e)),(function t(e,n){const i=ge(e,n);if(i)return i;const s=e.substr(n,1);if(n+=s.length,"+"!==s&&"-"!==s&&"~"!==s)return null;const o=t(e,n);return o?{cursor:n=o.cursor,evaluable:new pe(s,o.evaluable)}:null}));function xe(t,e){return e+=ce(t,e).length,we(t,e)}function Ce(t){var e;const n=function(t){const e=xe(t,0);return e?e.cursor+ce(t,e.cursor).length!==t.length?null:e.evaluable:null}(t);return null!==(e=null==n?void 0:n.evaluate())&&void 0!==e?e:null}function ye(t){if("number"==typeof t)return t;if("string"==typeof t){const e=Ce(t);if(!a(e))return e}return 0}function Pe(t){return String(t)}function ke(t){return e=>e.toFixed(Math.max(Math.min(t,20),0))}const Ee=ke(0);function Ve(t){return Ee(t)+"%"}function Le(t){return String(t)}function Me(t){return t}function Se(t,e){for(;t.length{o((()=>{e.setRawValue(n(t,e),i.options)}))})),e.emitter.on("change",(s=>{o((()=>{t.setRawValue(i(t,e),s.options)})),o((()=>{e.setRawValue(n(t,e),s.options)}))})),o((()=>{e.setRawValue(n(t,e),{forceEmit:!1,last:!0})}))}function Ne(t,e){const n=t*(e.altKey?.1:1)*(e.shiftKey?10:1);return e.upKey?+n:e.downKey?-n:0}function Oe(t){return{altKey:t.altKey,downKey:"ArrowDown"===t.key,shiftKey:t.shiftKey,upKey:"ArrowUp"===t.key}}function Re(t){return{altKey:t.altKey,downKey:"ArrowLeft"===t.key,shiftKey:t.shiftKey,upKey:"ArrowRight"===t.key}}function Ie(t){return function(t){return"ArrowUp"===t||"ArrowDown"===t}(t)||"ArrowLeft"===t||"ArrowRight"===t}function Ke(t,e){var n,i;const s=e.ownerDocument.defaultView,o=e.getBoundingClientRect();return{x:t.pageX-((null!==(n=s&&s.scrollX)&&void 0!==n?n:0)+o.left),y:t.pageY-((null!==(i=s&&s.scrollY)&&void 0!==i?i:0)+o.top)}}class Ue{constructor(t){this.lastTouch_=null,this.onDocumentMouseMove_=this.onDocumentMouseMove_.bind(this),this.onDocumentMouseUp_=this.onDocumentMouseUp_.bind(this),this.onMouseDown_=this.onMouseDown_.bind(this),this.onTouchEnd_=this.onTouchEnd_.bind(this),this.onTouchMove_=this.onTouchMove_.bind(this),this.onTouchStart_=this.onTouchStart_.bind(this),this.elem_=t,this.emitter=new u,t.addEventListener("touchstart",this.onTouchStart_,{passive:!1}),t.addEventListener("touchmove",this.onTouchMove_,{passive:!0}),t.addEventListener("touchend",this.onTouchEnd_),t.addEventListener("mousedown",this.onMouseDown_)}computePosition_(t){const e=this.elem_.getBoundingClientRect();return{bounds:{width:e.width,height:e.height},point:t?{x:t.x,y:t.y}:null}}onMouseDown_(t){var e;t.preventDefault(),null===(e=t.currentTarget)||void 0===e||e.focus();const n=this.elem_.ownerDocument;n.addEventListener("mousemove",this.onDocumentMouseMove_),n.addEventListener("mouseup",this.onDocumentMouseUp_),this.emitter.emit("down",{altKey:t.altKey,data:this.computePosition_(Ke(t,this.elem_)),sender:this,shiftKey:t.shiftKey})}onDocumentMouseMove_(t){this.emitter.emit("move",{altKey:t.altKey,data:this.computePosition_(Ke(t,this.elem_)),sender:this,shiftKey:t.shiftKey})}onDocumentMouseUp_(t){const e=this.elem_.ownerDocument;e.removeEventListener("mousemove",this.onDocumentMouseMove_),e.removeEventListener("mouseup",this.onDocumentMouseUp_),this.emitter.emit("up",{altKey:t.altKey,data:this.computePosition_(Ke(t,this.elem_)),sender:this,shiftKey:t.shiftKey})}onTouchStart_(t){t.preventDefault();const e=t.targetTouches.item(0),n=this.elem_.getBoundingClientRect();this.emitter.emit("down",{altKey:t.altKey,data:this.computePosition_(e?{x:e.clientX-n.left,y:e.clientY-n.top}:void 0),sender:this,shiftKey:t.shiftKey}),this.lastTouch_=e}onTouchMove_(t){const e=t.targetTouches.item(0),n=this.elem_.getBoundingClientRect();this.emitter.emit("move",{altKey:t.altKey,data:this.computePosition_(e?{x:e.clientX-n.left,y:e.clientY-n.top}:void 0),sender:this,shiftKey:t.shiftKey}),this.lastTouch_=e}onTouchEnd_(t){var e;const n=null!==(e=t.targetTouches.item(0))&&void 0!==e?e:this.lastTouch_,i=this.elem_.getBoundingClientRect();this.emitter.emit("up",{altKey:t.altKey,data:this.computePosition_(n?{x:n.clientX-i.left,y:n.clientY-i.top}:void 0),sender:this,shiftKey:t.shiftKey})}}function Te(t,e,n,i,s){return i+(t-e)/(n-e)*(s-i)}function Be(t){return String(t.toFixed(10)).split(".")[1].replace(/0+$/,"").length}function Fe(t,e,n){return Math.min(Math.max(t,e),n)}function He(t,e){return(t%e+e)%e}const $e=m("txt");class ze{constructor(t,e){this.onChange_=this.onChange_.bind(this),this.props_=e.props,this.props_.emitter.on("change",this.onChange_),this.element=t.createElement("div"),this.element.classList.add($e(),$e(void 0,"num")),e.arrayPosition&&this.element.classList.add($e(void 0,e.arrayPosition)),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("input");n.classList.add($e("i")),n.type="text",e.viewProps.bindDisabled(n),this.element.appendChild(n),this.inputElement=n,this.onDraggingChange_=this.onDraggingChange_.bind(this),this.dragging_=e.dragging,this.dragging_.emitter.on("change",this.onDraggingChange_),this.element.classList.add($e()),this.inputElement.classList.add($e("i"));const i=t.createElement("div");i.classList.add($e("k")),this.element.appendChild(i),this.knobElement=i;const s=t.createElementNS(O,"svg");s.classList.add($e("g")),this.knobElement.appendChild(s);const o=t.createElementNS(O,"path");o.classList.add($e("gb")),s.appendChild(o),this.guideBodyElem_=o;const r=t.createElementNS(O,"path");r.classList.add($e("gh")),s.appendChild(r),this.guideHeadElem_=r;const a=t.createElement("div");a.classList.add(m("tt")()),this.knobElement.appendChild(a),this.tooltipElem_=a,e.value.emitter.on("change",this.onChange_),this.value=e.value,this.refresh()}onDraggingChange_(t){if(null===t.rawValue)return void this.element.classList.remove($e(void 0,"drg"));this.element.classList.add($e(void 0,"drg"));const e=t.rawValue/this.props_.get("draggingScale"),n=e+(e>0?-1:e<0?1:0),i=Fe(-n,-4,4);this.guideHeadElem_.setAttributeNS(null,"d",[`M ${n+i},0 L${n},4 L${n+i},8`,`M ${e},-1 L${e},9`].join(" ")),this.guideBodyElem_.setAttributeNS(null,"d",`M 0,4 L${e},4`);const s=this.props_.get("formatter");this.tooltipElem_.textContent=s(this.value.rawValue),this.tooltipElem_.style.left=`${e}px`}refresh(){const t=this.props_.get("formatter");this.inputElement.value=t(this.value.rawValue)}onChange_(){this.refresh()}}class qe{constructor(t,e){var n;this.originRawValue_=0,this.onInputChange_=this.onInputChange_.bind(this),this.onInputKeyDown_=this.onInputKeyDown_.bind(this),this.onInputKeyUp_=this.onInputKeyUp_.bind(this),this.onPointerDown_=this.onPointerDown_.bind(this),this.onPointerMove_=this.onPointerMove_.bind(this),this.onPointerUp_=this.onPointerUp_.bind(this),this.baseStep_=e.baseStep,this.parser_=e.parser,this.props=e.props,this.sliderProps_=null!==(n=e.sliderProps)&&void 0!==n?n:null,this.value=e.value,this.viewProps=e.viewProps,this.dragging_=E(null),this.view=new ze(t,{arrayPosition:e.arrayPosition,dragging:this.dragging_,props:this.props,value:this.value,viewProps:this.viewProps}),this.view.inputElement.addEventListener("change",this.onInputChange_),this.view.inputElement.addEventListener("keydown",this.onInputKeyDown_),this.view.inputElement.addEventListener("keyup",this.onInputKeyUp_);const i=new Ue(this.view.knobElement);i.emitter.on("down",this.onPointerDown_),i.emitter.on("move",this.onPointerMove_),i.emitter.on("up",this.onPointerUp_)}constrainValue_(t){var e,n;const i=null===(e=this.sliderProps_)||void 0===e?void 0:e.get("minValue"),s=null===(n=this.sliderProps_)||void 0===n?void 0:n.get("maxValue");let o=t;return void 0!==i&&(o=Math.max(o,i)),void 0!==s&&(o=Math.min(o,s)),o}onInputChange_(t){const e=t.currentTarget.value,n=this.parser_(e);a(n)||(this.value.rawValue=this.constrainValue_(n)),this.view.refresh()}onInputKeyDown_(t){const e=Ne(this.baseStep_,Oe(t));0!==e&&this.value.setRawValue(this.constrainValue_(this.value.rawValue+e),{forceEmit:!1,last:!1})}onInputKeyUp_(t){0!==Ne(this.baseStep_,Oe(t))&&this.value.setRawValue(this.value.rawValue,{forceEmit:!0,last:!0})}onPointerDown_(){this.originRawValue_=this.value.rawValue,this.dragging_.rawValue=0}computeDraggingValue_(t){if(!t.point)return null;const e=t.point.x-t.bounds.width/2;return this.constrainValue_(this.originRawValue_+e*this.props.get("draggingScale"))}onPointerMove_(t){const e=this.computeDraggingValue_(t.data);null!==e&&(this.value.setRawValue(e,{forceEmit:!1,last:!1}),this.dragging_.rawValue=this.value.rawValue-this.originRawValue_)}onPointerUp_(t){const e=this.computeDraggingValue_(t.data);null!==e&&(this.value.setRawValue(e,{forceEmit:!0,last:!0}),this.dragging_.rawValue=null)}}const Ge=m("sld");class Ye{constructor(t,e){this.onChange_=this.onChange_.bind(this),this.props_=e.props,this.props_.emitter.on("change",this.onChange_),this.element=t.createElement("div"),this.element.classList.add(Ge()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("div");n.classList.add(Ge("t")),e.viewProps.bindTabIndex(n),this.element.appendChild(n),this.trackElement=n;const i=t.createElement("div");i.classList.add(Ge("k")),this.trackElement.appendChild(i),this.knobElement=i,e.value.emitter.on("change",this.onChange_),this.value=e.value,this.update_()}update_(){const t=Fe(Te(this.value.rawValue,this.props_.get("minValue"),this.props_.get("maxValue"),0,100),0,100);this.knobElement.style.width=`${t}%`}onChange_(){this.update_()}}class Xe{constructor(t,e){this.onKeyDown_=this.onKeyDown_.bind(this),this.onKeyUp_=this.onKeyUp_.bind(this),this.onPointerDownOrMove_=this.onPointerDownOrMove_.bind(this),this.onPointerUp_=this.onPointerUp_.bind(this),this.baseStep_=e.baseStep,this.value=e.value,this.viewProps=e.viewProps,this.props=e.props,this.view=new Ye(t,{props:this.props,value:this.value,viewProps:this.viewProps}),this.ptHandler_=new Ue(this.view.trackElement),this.ptHandler_.emitter.on("down",this.onPointerDownOrMove_),this.ptHandler_.emitter.on("move",this.onPointerDownOrMove_),this.ptHandler_.emitter.on("up",this.onPointerUp_),this.view.trackElement.addEventListener("keydown",this.onKeyDown_),this.view.trackElement.addEventListener("keyup",this.onKeyUp_)}handlePointerEvent_(t,e){t.point&&this.value.setRawValue(Te(Fe(t.point.x,0,t.bounds.width),0,t.bounds.width,this.props.get("minValue"),this.props.get("maxValue")),e)}onPointerDownOrMove_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerUp_(t){this.handlePointerEvent_(t.data,{forceEmit:!0,last:!0})}onKeyDown_(t){const e=Ne(this.baseStep_,Re(t));0!==e&&this.value.setRawValue(this.value.rawValue+e,{forceEmit:!1,last:!1})}onKeyUp_(t){0!==Ne(this.baseStep_,Re(t))&&this.value.setRawValue(this.value.rawValue,{forceEmit:!0,last:!0})}}const Qe=m("sldtxt");class Je{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(Qe());const n=t.createElement("div");n.classList.add(Qe("s")),this.sliderView_=e.sliderView,n.appendChild(this.sliderView_.element),this.element.appendChild(n);const i=t.createElement("div");i.classList.add(Qe("t")),this.textView_=e.textView,i.appendChild(this.textView_.element),this.element.appendChild(i)}}class We{constructor(t,e){this.value=e.value,this.viewProps=e.viewProps,this.sliderC_=new Xe(t,{baseStep:e.baseStep,props:e.sliderProps,value:e.value,viewProps:this.viewProps}),this.textC_=new qe(t,{baseStep:e.baseStep,parser:e.parser,props:e.textProps,sliderProps:e.sliderProps,value:e.value,viewProps:e.viewProps}),this.view=new Je(t,{sliderView:this.sliderC_.view,textView:this.textC_.view})}get sliderController(){return this.sliderC_}get textController(){return this.textC_}}function Ze(t,e){t.write(e)}function tn(t){const e=S;return Array.isArray(t)?e.required.array(e.required.object({text:e.required.string,value:e.required.raw}))(t).value:"object"==typeof t?e.required.raw(t).value:void 0}function en(t){if("inline"===t||"popup"===t)return t}function nn(t){const e=S;return e.required.object({max:e.optional.number,min:e.optional.number,step:e.optional.number})(t).value}function sn(t){if(Array.isArray(t))return t;const e=[];return Object.keys(t).forEach((n=>{e.push({text:n,value:t[n]})})),e}function on(t){return a(t)?null:new zt(sn(t))}function rn(t){const e=t?$t(t,zt):null;return e?e.options:null}function an(t,e){const n=t&&$t(t,Gt);return n?Be(n.step):Math.max(Be(e),2)}function ln(t){const e=function(t){const e=t?$t(t,Gt):null;return e?e.step:null}(t);return null!=e?e:1}function pn(t,e){var n;const i=t&&$t(t,Gt),s=Math.abs(null!==(n=null==i?void 0:i.step)&&void 0!==n?n:e);return 0===s?.1:Math.pow(10,Math.floor(Math.log10(s))-1)}const dn=m("ckb");class cn{constructor(t,e){this.onValueChange_=this.onValueChange_.bind(this),this.element=t.createElement("div"),this.element.classList.add(dn()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("label");n.classList.add(dn("l")),this.element.appendChild(n);const i=t.createElement("input");i.classList.add(dn("i")),i.type="checkbox",n.appendChild(i),this.inputElement=i,e.viewProps.bindDisabled(this.inputElement);const s=t.createElement("div");s.classList.add(dn("w")),n.appendChild(s);const o=T(t,"check");s.appendChild(o),e.value.emitter.on("change",this.onValueChange_),this.value=e.value,this.update_()}update_(){this.inputElement.checked=this.value.rawValue}onValueChange_(){this.update_()}}class hn{constructor(t,e){this.onInputChange_=this.onInputChange_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.view=new cn(t,{value:this.value,viewProps:this.viewProps}),this.view.inputElement.addEventListener("change",this.onInputChange_)}onInputChange_(t){const e=t.currentTarget;this.value.rawValue=e.checked}}const un={id:"input-bool",type:"input",accept:(t,e)=>{if("boolean"!=typeof t)return null;const n=A(e,{options:S.optional.custom(tn)});return n?{initialValue:t,params:n}:null},binding:{reader:t=>ie,constraint:t=>function(t){const e=[],n=on(t.options);return n&&e.push(n),new Ht(e)}(t.params),writer:t=>Ze},controller:t=>{var e;const n=t.document,i=t.value,s=t.constraint;return s&&$t(s,zt)?new Qt(n,{props:V.fromObject({options:null!==(e=rn(s))&&void 0!==e?e:[]}),value:i,viewProps:t.viewProps}):new hn(n,{value:i,viewProps:t.viewProps})}},vn=m("col");class mn{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(vn()),e.foldable.bindExpandedClass(this.element,vn(void 0,"expanded")),g(e.foldable,"completed",f(this.element,vn(void 0,"cpl")));const n=t.createElement("div");n.classList.add(vn("h")),this.element.appendChild(n);const i=t.createElement("div");i.classList.add(vn("s")),n.appendChild(i),this.swatchElement=i;const s=t.createElement("div");if(s.classList.add(vn("t")),n.appendChild(s),this.textElement=s,"inline"===e.pickerLayout){const e=t.createElement("div");e.classList.add(vn("p")),this.element.appendChild(e),this.pickerElement=e}else this.pickerElement=null}}function bn(t,e,n){const i=He(t,360),s=Fe(e/100,0,1),o=Fe(n/100,0,1),r=o*s,a=r*(1-Math.abs(i/60%2-1)),l=o-r;let p,d,c;return[p,d,c]=i>=0&&i<60?[r,a,0]:i>=60&&i<120?[a,r,0]:i>=120&&i<180?[0,r,a]:i>=180&&i<240?[0,a,r]:i>=240&&i<300?[a,0,r]:[r,0,a],[255*(p+l),255*(d+l),255*(c+l)]}function _n(t){return[t[0],t[1],t[2]]}function gn(t,e){return[t[0],t[1],t[2],e]}const fn={hsl:{hsl:(t,e,n)=>[t,e,n],hsv:function(t,e,n){const i=n+e*(100-Math.abs(2*n-100))/200;return[t,0!==i?e*(100-Math.abs(2*n-100))/i:0,n+e*(100-Math.abs(2*n-100))/200]},rgb:function(t,e,n){const i=(t%360+360)%360,s=Fe(e/100,0,1),o=Fe(n/100,0,1),r=(1-Math.abs(2*o-1))*s,a=r*(1-Math.abs(i/60%2-1)),l=o-r/2;let p,d,c;return[p,d,c]=i>=0&&i<60?[r,a,0]:i>=60&&i<120?[a,r,0]:i>=120&&i<180?[0,r,a]:i>=180&&i<240?[0,a,r]:i>=240&&i<300?[a,0,r]:[r,0,a],[255*(p+l),255*(d+l),255*(c+l)]}},hsv:{hsl:function(t,e,n){const i=100-Math.abs(n*(200-e)/100-100);return[t,0!==i?e*n/i:0,n*(200-e)/200]},hsv:(t,e,n)=>[t,e,n],rgb:bn},rgb:{hsl:function(t,e,n){const i=Fe(t/255,0,1),s=Fe(e/255,0,1),o=Fe(n/255,0,1),r=Math.max(i,s,o),a=Math.min(i,s,o),l=r-a;let p=0,d=0;const c=(a+r)/2;return 0!==l&&(d=l/(1-Math.abs(r+a-1)),p=i===r?(s-o)/l:s===r?2+(o-i)/l:4+(i-s)/l,p=p/6+(p<0?1:0)),[360*p,100*d,100*c]},hsv:function(t,e,n){const i=Fe(t/255,0,1),s=Fe(e/255,0,1),o=Fe(n/255,0,1),r=Math.max(i,s,o),a=r-Math.min(i,s,o);let l;return l=0===a?0:r===i?((s-o)/a%6+6)%6*60:r===s?60*((o-i)/a+2):60*((i-s)/a+4),[l,100*(0===r?0:a/r),100*r]},rgb:(t,e,n)=>[t,e,n]}};function wn(t,e){return["float"===e?1:"rgb"===t?255:360,"float"===e?1:"rgb"===t?255:100,"float"===e?1:"rgb"===t?255:100]}function xn(t,e,n,i){const s=wn(e,n),o=wn(e,i);return t.map(((t,e)=>t/s[e]*o[e]))}function Cn(t,e){return"object"==typeof t&&!a(t)&&(e in t&&"number"==typeof t[e])}class yn{constructor(t,e,n="int"){this.mode=e,this.type=n,this.comps_=function(t,e,n){var i;const s=wn(e,n);return["rgb"===e?Fe(t[0],0,s[0]):He(t[0],s[0]),Fe(t[1],0,s[1]),Fe(t[2],0,s[2]),Fe(null!==(i=t[3])&&void 0!==i?i:1,0,1)]}(t,e,n)}static black(t="int"){return new yn([0,0,0],"rgb",t)}static fromObject(t,e="int"){const n="a"in t?[t.r,t.g,t.b,t.a]:[t.r,t.g,t.b];return new yn(n,"rgb",e)}static toRgbaObject(t,e="int"){return t.toRgbaObject(e)}static isRgbColorObject(t){return Cn(t,"r")&&Cn(t,"g")&&Cn(t,"b")}static isRgbaColorObject(t){return this.isRgbColorObject(t)&&Cn(t,"a")}static isColorObject(t){return this.isRgbColorObject(t)}static equals(t,e){if(t.mode!==e.mode)return!1;const n=t.comps_,i=e.comps_;for(let t=0;tt.inputElement))];return this.alphaViews_&&t.push(this.alphaViews_.palette.element,this.alphaViews_.text.inputElement),t}}function En(t){return"int"===t?"int":"float"===t?"float":void 0}function Vn(t){const e=S;return A(t,{alpha:e.optional.boolean,color:e.optional.object({alpha:e.optional.boolean,type:e.optional.custom(En)}),expanded:e.optional.boolean,picker:e.optional.custom(en)})}function Ln(t){return t?.1:1}function Mn(t){var e;return null===(e=t.color)||void 0===e?void 0:e.type}function Sn(t,e){const n=t.match(/^(.+)%$/);return n?Math.min(.01*parseFloat(n[1])*e,e):Math.min(parseFloat(t),e)}const An={deg:t=>t,grad:t=>360*t/400,rad:t=>360*t/(2*Math.PI),turn:t=>360*t};function Dn(t){const e=t.match(/^([0-9.]+?)(deg|grad|rad|turn)$/);if(!e)return parseFloat(t);const n=parseFloat(e[1]),i=e[2];return An[i](n)}function jn(t){const e=t.match(/^rgb\(\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/);if(!e)return null;const n=[Sn(e[1],255),Sn(e[2],255),Sn(e[3],255)];return isNaN(n[0])||isNaN(n[1])||isNaN(n[2])?null:n}function Nn(t){return e=>{const n=jn(e);return n?new yn(n,"rgb",t):null}}function On(t){const e=t.match(/^rgba\(\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/);if(!e)return null;const n=[Sn(e[1],255),Sn(e[2],255),Sn(e[3],255),Sn(e[4],1)];return isNaN(n[0])||isNaN(n[1])||isNaN(n[2])||isNaN(n[3])?null:n}function Rn(t){return e=>{const n=On(e);return n?new yn(n,"rgb",t):null}}function In(t){const e=t.match(/^hsl\(\s*([0-9A-Fa-f.]+(?:deg|grad|rad|turn)?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/);if(!e)return null;const n=[Dn(e[1]),Sn(e[2],100),Sn(e[3],100)];return isNaN(n[0])||isNaN(n[1])||isNaN(n[2])?null:n}function Kn(t){return e=>{const n=In(e);return n?new yn(n,"hsl",t):null}}function Un(t){const e=t.match(/^hsla\(\s*([0-9A-Fa-f.]+(?:deg|grad|rad|turn)?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*,\s*([0-9A-Fa-f.]+%?)\s*\)$/);if(!e)return null;const n=[Dn(e[1]),Sn(e[2],100),Sn(e[3],100),Sn(e[4],1)];return isNaN(n[0])||isNaN(n[1])||isNaN(n[2])||isNaN(n[3])?null:n}function Tn(t){return e=>{const n=Un(e);return n?new yn(n,"hsl",t):null}}function Bn(t){const e=t.match(/^#([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])$/);if(e)return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)];const n=t.match(/^(?:#|0x)([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/);return n?[parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)]:null}function Fn(t){const e=t.match(/^#?([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])([0-9A-Fa-f])$/);if(e)return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16),Te(parseInt(e[4]+e[4],16),0,255,0,1)];const n=t.match(/^(?:#|0x)?([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/);return n?[parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16),Te(parseInt(n[4],16),0,255,0,1)]:null}function Hn(t){const e=t.match(/^\{\s*r\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*g\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*b\s*:\s*([0-9A-Fa-f.]+%?)\s*\}$/);if(!e)return null;const n=[parseFloat(e[1]),parseFloat(e[2]),parseFloat(e[3])];return isNaN(n[0])||isNaN(n[1])||isNaN(n[2])?null:n}function $n(t){return e=>{const n=Hn(e);return n?new yn(n,"rgb",t):null}}function zn(t){const e=t.match(/^\{\s*r\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*g\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*b\s*:\s*([0-9A-Fa-f.]+%?)\s*,\s*a\s*:\s*([0-9A-Fa-f.]+%?)\s*\}$/);if(!e)return null;const n=[parseFloat(e[1]),parseFloat(e[2]),parseFloat(e[3]),parseFloat(e[4])];return isNaN(n[0])||isNaN(n[1])||isNaN(n[2])||isNaN(n[3])?null:n}function qn(t){return e=>{const n=zn(e);return n?new yn(n,"rgb",t):null}}const Gn=[{parser:Bn,result:{alpha:!1,mode:"rgb",notation:"hex"}},{parser:Fn,result:{alpha:!0,mode:"rgb",notation:"hex"}},{parser:jn,result:{alpha:!1,mode:"rgb",notation:"func"}},{parser:On,result:{alpha:!0,mode:"rgb",notation:"func"}},{parser:In,result:{alpha:!1,mode:"hsl",notation:"func"}},{parser:Un,result:{alpha:!0,mode:"hsl",notation:"func"}},{parser:Hn,result:{alpha:!1,mode:"rgb",notation:"object"}},{parser:zn,result:{alpha:!0,mode:"rgb",notation:"object"}}];function Yn(t,e="int"){const n=function(t){return Gn.reduce(((e,{parser:n,result:i})=>e||(n(t)?i:null)),null)}(t);return n?"hex"===n.notation&&"float"!==e?Object.assign(Object.assign({},n),{type:"int"}):"func"===n.notation?Object.assign(Object.assign({},n),{type:e}):null:null}const Xn={int:[function(t){const e=Bn(t);return e?new yn(e,"rgb","int"):null},function(t){const e=Fn(t);return e?new yn(e,"rgb","int"):null},Nn("int"),Rn("int"),Kn("int"),Tn("int"),$n("int"),qn("int")],float:[Nn("float"),Rn("float"),Kn("float"),Tn("float"),$n("float"),qn("float")]};function Qn(t){const e=Xn[t];return t=>e.reduce(((e,n)=>e||n(t)),null)}function Jn(t){const e=Fe(Math.floor(t),0,255).toString(16);return 1===e.length?`0${e}`:e}function Wn(t,e="#"){return`${e}${_n(t.getComponents("rgb")).map(Jn).join("")}`}function Zn(t,e="#"){const n=t.getComponents("rgb");return`${e}${[n[0],n[1],n[2],255*n[3]].map(Jn).join("")}`}function ti(t,e){const n=ke("float"===e?2:0);return`rgb(${_n(t.getComponents("rgb",e)).map((t=>n(t))).join(", ")})`}function ei(t){return e=>ti(e,t)}function ni(t,e){const n=ke(2),i=ke("float"===e?2:0);return`rgba(${t.getComponents("rgb",e).map(((t,e)=>(3===e?n:i)(t))).join(", ")})`}function ii(t){return e=>ni(e,t)}function si(t,e){const n=ke("float"===e?2:0),i=["r","g","b"];return`{${_n(t.getComponents("rgb",e)).map(((t,e)=>`${i[e]}: ${n(t)}`)).join(", ")}}`}function oi(t){return e=>si(e,t)}function ri(t,e){const n=ke(2),i=ke("float"===e?2:0),s=["r","g","b","a"];return`{${t.getComponents("rgb",e).map(((t,e)=>`${s[e]}: ${(3===e?n:i)(t)}`)).join(", ")}}`}function ai(t){return e=>ri(e,t)}const li=[{format:{alpha:!1,mode:"rgb",notation:"hex",type:"int"},stringifier:Wn},{format:{alpha:!0,mode:"rgb",notation:"hex",type:"int"},stringifier:Zn},{format:{alpha:!1,mode:"hsl",notation:"func",type:"int"},stringifier:function(t){const e=[ke(0),Ve,Ve];return`hsl(${_n(t.getComponents("hsl")).map(((t,n)=>e[n](t))).join(", ")})`}},{format:{alpha:!0,mode:"hsl",notation:"func",type:"int"},stringifier:function(t){const e=[ke(0),Ve,Ve,ke(2)];return`hsla(${t.getComponents("hsl").map(((t,n)=>e[n](t))).join(", ")})`}},...["int","float"].reduce(((t,e)=>[...t,{format:{alpha:!1,mode:"rgb",notation:"func",type:e},stringifier:ei(e)},{format:{alpha:!0,mode:"rgb",notation:"func",type:e},stringifier:ii(e)},{format:{alpha:!1,mode:"rgb",notation:"object",type:e},stringifier:oi(e)},{format:{alpha:!0,mode:"rgb",notation:"object",type:e},stringifier:ai(e)}]),[])];function pi(t){return li.reduce(((e,n)=>{return e||(i=n.format,s=t,i.alpha===s.alpha&&i.mode===s.mode&&i.notation===s.notation&&i.type===s.type?n.stringifier:null);var i,s}),null)}const di=m("apl");class ci{constructor(t,e){this.onValueChange_=this.onValueChange_.bind(this),this.value=e.value,this.value.emitter.on("change",this.onValueChange_),this.element=t.createElement("div"),this.element.classList.add(di()),e.viewProps.bindTabIndex(this.element);const n=t.createElement("div");n.classList.add(di("b")),this.element.appendChild(n);const i=t.createElement("div");i.classList.add(di("c")),n.appendChild(i),this.colorElem_=i;const s=t.createElement("div");s.classList.add(di("m")),this.element.appendChild(s),this.markerElem_=s;const o=t.createElement("div");o.classList.add(di("p")),this.markerElem_.appendChild(o),this.previewElem_=o,this.update_()}update_(){const t=this.value.rawValue,e=t.getComponents("rgb"),n=new yn([e[0],e[1],e[2],0],"rgb"),i=new yn([e[0],e[1],e[2],255],"rgb"),s=["to right",ni(n),ni(i)];this.colorElem_.style.background=`linear-gradient(${s.join(",")})`,this.previewElem_.style.backgroundColor=ni(t);const o=Te(e[3],0,1,0,100);this.markerElem_.style.left=`${o}%`}onValueChange_(){this.update_()}}class hi{constructor(t,e){this.onKeyDown_=this.onKeyDown_.bind(this),this.onKeyUp_=this.onKeyUp_.bind(this),this.onPointerDown_=this.onPointerDown_.bind(this),this.onPointerMove_=this.onPointerMove_.bind(this),this.onPointerUp_=this.onPointerUp_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.view=new ci(t,{value:this.value,viewProps:this.viewProps}),this.ptHandler_=new Ue(this.view.element),this.ptHandler_.emitter.on("down",this.onPointerDown_),this.ptHandler_.emitter.on("move",this.onPointerMove_),this.ptHandler_.emitter.on("up",this.onPointerUp_),this.view.element.addEventListener("keydown",this.onKeyDown_),this.view.element.addEventListener("keyup",this.onKeyUp_)}handlePointerEvent_(t,e){if(!t.point)return;const n=t.point.x/t.bounds.width,i=this.value.rawValue,[s,o,r]=i.getComponents("hsv");this.value.setRawValue(new yn([s,o,r,n],"hsv"),e)}onPointerDown_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerMove_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerUp_(t){this.handlePointerEvent_(t.data,{forceEmit:!0,last:!0})}onKeyDown_(t){const e=Ne(Ln(!0),Re(t));if(0===e)return;const n=this.value.rawValue,[i,s,o,r]=n.getComponents("hsv");this.value.setRawValue(new yn([i,s,o,r+e],"hsv"),{forceEmit:!1,last:!1})}onKeyUp_(t){0!==Ne(Ln(!0),Re(t))&&this.value.setRawValue(this.value.rawValue,{forceEmit:!0,last:!0})}}const ui=m("coltxt");class vi{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(ui());const n=t.createElement("div");n.classList.add(ui("m")),this.modeElem_=function(t){const e=t.createElement("select");return e.appendChild([{text:"RGB",value:"rgb"},{text:"HSL",value:"hsl"},{text:"HSV",value:"hsv"}].reduce(((e,n)=>{const i=t.createElement("option");return i.textContent=n.text,i.value=n.value,e.appendChild(i),e}),t.createDocumentFragment())),e}(t),this.modeElem_.classList.add(ui("ms")),n.appendChild(this.modeSelectElement);const i=t.createElement("div");i.classList.add(ui("mm")),i.appendChild(T(t,"dropdown")),n.appendChild(i),this.element.appendChild(n);const s=t.createElement("div");s.classList.add(ui("w")),this.element.appendChild(s),this.textsElem_=s,this.textViews_=e.textViews,this.applyTextViews_(),_(e.colorMode,(t=>{this.modeElem_.value=t}))}get modeSelectElement(){return this.modeElem_}get textViews(){return this.textViews_}set textViews(t){this.textViews_=t,this.applyTextViews_()}applyTextViews_(){H(this.textsElem_);const t=this.element.ownerDocument;this.textViews_.forEach((e=>{const n=t.createElement("div");n.classList.add(ui("c")),n.appendChild(e.element),this.textsElem_.appendChild(n)}))}}function mi(t,e,n){const i=wn(t,e)[n];return new qt({min:0,max:i})}function bi(t,e,n){return new qe(t,{arrayPosition:0===n?"fst":2===n?"lst":"mid",baseStep:Ln(!1),parser:e.parser,props:V.fromObject({draggingScale:"float"===e.colorType?.01:1,formatter:(i=e.colorType,ke("float"===i?2:0))}),value:E(0,{constraint:mi(e.colorMode,e.colorType,n)}),viewProps:e.viewProps});var i}class _i{constructor(t,e){this.onModeSelectChange_=this.onModeSelectChange_.bind(this),this.colorType_=e.colorType,this.parser_=e.parser,this.value=e.value,this.viewProps=e.viewProps,this.colorMode=E(this.value.rawValue.mode),this.ccs_=this.createComponentControllers_(t),this.view=new vi(t,{colorMode:this.colorMode,textViews:[this.ccs_[0].view,this.ccs_[1].view,this.ccs_[2].view]}),this.view.modeSelectElement.addEventListener("change",this.onModeSelectChange_)}createComponentControllers_(t){const e={colorMode:this.colorMode.rawValue,colorType:this.colorType_,parser:this.parser_,viewProps:this.viewProps},n=[bi(t,e,0),bi(t,e,1),bi(t,e,2)];return n.forEach(((t,e)=>{je({primary:this.value,secondary:t.value,forward:t=>t.rawValue.getComponents(this.colorMode.rawValue,this.colorType_)[e],backward:(t,n)=>{const i=this.colorMode.rawValue,s=t.rawValue.getComponents(i,this.colorType_);return s[e]=n.rawValue,new yn(gn(_n(s),s[3]),i,this.colorType_)}})})),n}onModeSelectChange_(t){const e=t.currentTarget;this.colorMode.rawValue=e.value,this.ccs_=this.createComponentControllers_(this.view.element.ownerDocument),this.view.textViews=[this.ccs_[0].view,this.ccs_[1].view,this.ccs_[2].view]}}const gi=m("hpl");class fi{constructor(t,e){this.onValueChange_=this.onValueChange_.bind(this),this.value=e.value,this.value.emitter.on("change",this.onValueChange_),this.element=t.createElement("div"),this.element.classList.add(gi()),e.viewProps.bindTabIndex(this.element);const n=t.createElement("div");n.classList.add(gi("c")),this.element.appendChild(n);const i=t.createElement("div");i.classList.add(gi("m")),this.element.appendChild(i),this.markerElem_=i,this.update_()}update_(){const t=this.value.rawValue,[e]=t.getComponents("hsv");this.markerElem_.style.backgroundColor=ti(new yn([e,100,100],"hsv"));const n=Te(e,0,360,0,100);this.markerElem_.style.left=`${n}%`}onValueChange_(){this.update_()}}class wi{constructor(t,e){this.onKeyDown_=this.onKeyDown_.bind(this),this.onKeyUp_=this.onKeyUp_.bind(this),this.onPointerDown_=this.onPointerDown_.bind(this),this.onPointerMove_=this.onPointerMove_.bind(this),this.onPointerUp_=this.onPointerUp_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.view=new fi(t,{value:this.value,viewProps:this.viewProps}),this.ptHandler_=new Ue(this.view.element),this.ptHandler_.emitter.on("down",this.onPointerDown_),this.ptHandler_.emitter.on("move",this.onPointerMove_),this.ptHandler_.emitter.on("up",this.onPointerUp_),this.view.element.addEventListener("keydown",this.onKeyDown_),this.view.element.addEventListener("keyup",this.onKeyUp_)}handlePointerEvent_(t,e){if(!t.point)return;const n=Te(Fe(t.point.x,0,t.bounds.width),0,t.bounds.width,0,359),i=this.value.rawValue,[,s,o,r]=i.getComponents("hsv");this.value.setRawValue(new yn([n,s,o,r],"hsv"),e)}onPointerDown_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerMove_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerUp_(t){this.handlePointerEvent_(t.data,{forceEmit:!0,last:!0})}onKeyDown_(t){const e=Ne(Ln(!1),Re(t));if(0===e)return;const n=this.value.rawValue,[i,s,o,r]=n.getComponents("hsv");this.value.setRawValue(new yn([i+e,s,o,r],"hsv"),{forceEmit:!1,last:!1})}onKeyUp_(t){0!==Ne(Ln(!1),Re(t))&&this.value.setRawValue(this.value.rawValue,{forceEmit:!0,last:!0})}}const xi=m("svp");class Ci{constructor(t,e){this.onValueChange_=this.onValueChange_.bind(this),this.value=e.value,this.value.emitter.on("change",this.onValueChange_),this.element=t.createElement("div"),this.element.classList.add(xi()),e.viewProps.bindTabIndex(this.element);const n=t.createElement("canvas");n.height=64,n.width=64,n.classList.add(xi("c")),this.element.appendChild(n),this.canvasElement=n;const i=t.createElement("div");i.classList.add(xi("m")),this.element.appendChild(i),this.markerElem_=i,this.update_()}update_(){const t=function(t){const e=t.ownerDocument.defaultView;return e&&"document"in e?t.getContext("2d"):null}(this.canvasElement);if(!t)return;const e=this.value.rawValue.getComponents("hsv"),n=this.canvasElement.width,i=this.canvasElement.height,s=t.getImageData(0,0,n,i),o=s.data;for(let t=0;tt.rawValue.getComponents()[3],backward:(t,e)=>{const n=t.rawValue.getComponents();return n[3]=e.rawValue,new yn(n,t.rawValue.mode)}}),this.textC_=new _i(t,{colorType:e.colorType,parser:Ce,value:this.value,viewProps:this.viewProps}),this.view=new kn(t,{alphaViews:this.alphaIcs_?{palette:this.alphaIcs_.palette.view,text:this.alphaIcs_.text.view}:null,hPaletteView:this.hPaletteC_.view,supportsAlpha:e.supportsAlpha,svPaletteView:this.svPaletteC_.view,textView:this.textC_.view})}get textController(){return this.textC_}}const ki=m("colsw");class Ei{constructor(t,e){this.onValueChange_=this.onValueChange_.bind(this),e.value.emitter.on("change",this.onValueChange_),this.value=e.value,this.element=t.createElement("div"),this.element.classList.add(ki()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("div");n.classList.add(ki("sw")),this.element.appendChild(n),this.swatchElem_=n;const i=t.createElement("button");i.classList.add(ki("b")),e.viewProps.bindDisabled(i),this.element.appendChild(i),this.buttonElement=i,this.update_()}update_(){const t=this.value.rawValue;this.swatchElem_.style.backgroundColor=Zn(t)}onValueChange_(){this.update_()}}class Vi{constructor(t,e){this.value=e.value,this.viewProps=e.viewProps,this.view=new Ei(t,{value:this.value,viewProps:this.viewProps})}}class Li{constructor(t,e){this.onButtonBlur_=this.onButtonBlur_.bind(this),this.onButtonClick_=this.onButtonClick_.bind(this),this.onPopupChildBlur_=this.onPopupChildBlur_.bind(this),this.onPopupChildKeydown_=this.onPopupChildKeydown_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.foldable_=J.create(e.expanded),this.swatchC_=new Vi(t,{value:this.value,viewProps:this.viewProps});const n=this.swatchC_.view.buttonElement;n.addEventListener("blur",this.onButtonBlur_),n.addEventListener("click",this.onButtonClick_),this.textC_=new ne(t,{parser:e.parser,props:V.fromObject({formatter:e.formatter}),value:this.value,viewProps:this.viewProps}),this.view=new mn(t,{foldable:this.foldable_,pickerLayout:e.pickerLayout}),this.view.swatchElement.appendChild(this.swatchC_.view.element),this.view.textElement.appendChild(this.textC_.view.element),this.popC_="popup"===e.pickerLayout?new Zt(t,{viewProps:this.viewProps}):null;const i=new Pi(t,{colorType:e.colorType,supportsAlpha:e.supportsAlpha,value:this.value,viewProps:this.viewProps});i.view.allFocusableElements.forEach((t=>{t.addEventListener("blur",this.onPopupChildBlur_),t.addEventListener("keydown",this.onPopupChildKeydown_)})),this.pickerC_=i,this.popC_?(this.view.element.appendChild(this.popC_.view.element),this.popC_.view.element.appendChild(i.view.element),je({primary:this.foldable_.value("expanded"),secondary:this.popC_.shows,forward:t=>t.rawValue,backward:(t,e)=>e.rawValue})):this.view.pickerElement&&(this.view.pickerElement.appendChild(this.pickerC_.view.element),Z(this.foldable_,this.view.pickerElement))}get textController(){return this.textC_}onButtonBlur_(t){if(!this.popC_)return;const e=this.view.element,n=t.relatedTarget;n&&e.contains(n)||(this.popC_.shows.rawValue=!1)}onButtonClick_(){this.foldable_.set("expanded",!this.foldable_.get("expanded")),this.foldable_.get("expanded")&&this.pickerC_.view.allFocusableElements[0].focus()}onPopupChildBlur_(t){if(!this.popC_)return;const e=this.popC_.view.element,n=$(t);n&&e.contains(n)||n&&n===this.swatchC_.view.buttonElement&&!I(e.ownerDocument)||(this.popC_.shows.rawValue=!1)}onPopupChildKeydown_(t){this.popC_?"Escape"===t.key&&(this.popC_.shows.rawValue=!1):this.view.pickerElement&&"Escape"===t.key&&this.swatchC_.view.buttonElement.focus()}}function Mi(t){return _n(t.getComponents("rgb")).reduce(((t,e)=>t<<8|255&Math.floor(e)),0)}function Si(t){return t.getComponents("rgb").reduce(((t,e,n)=>t<<8|255&Math.floor(3===n?255*e:e)),0)>>>0}function Ai(t){return"number"!=typeof t?yn.black():new yn([(e=t)>>16&255,e>>8&255,255&e],"rgb");var e}function Di(t){return"number"!=typeof t?yn.black():new yn([(e=t)>>24&255,e>>16&255,e>>8&255,Te(255&e,0,255,0,1)],"rgb");var e}function ji(t){var e;return!(!(null==t?void 0:t.alpha)&&!(null===(e=null==t?void 0:t.color)||void 0===e?void 0:e.alpha))}function Ni(t){return t?t=>Zn(t,"0x"):t=>Wn(t,"0x")}const Oi={id:"input-color-number",type:"input",accept:(t,e)=>{if("number"!=typeof t)return null;if(!function(t){return"color"in t||"view"in t&&"color"===t.view}(e))return null;const n=Vn(e);return n?{initialValue:t,params:n}:null},binding:{reader:t=>ji(t.params)?Di:Ai,equals:yn.equals,writer:t=>function(t){const e=t?Si:Mi;return(t,n)=>{Ze(t,e(n))}}(ji(t.params))},controller:t=>{const e=ji(t.params),n="expanded"in t.params?t.params.expanded:void 0,i="picker"in t.params?t.params.picker:void 0;return new Li(t.document,{colorType:"int",expanded:null!=n&&n,formatter:Ni(e),parser:Qn("int"),pickerLayout:null!=i?i:"popup",supportsAlpha:e,value:t.value,viewProps:t.viewProps})}};function Ri(t){return e=>function(t,e){return yn.isColorObject(t)?yn.fromObject(t,e):yn.black(e)}(e,t)}function Ii(t,e){return n=>t?ri(n,e):si(n,e)}const Ki={id:"input-color-object",type:"input",accept:(t,e)=>{if(!yn.isColorObject(t))return null;const n=Vn(e);return n?{initialValue:t,params:n}:null},binding:{reader:t=>Ri(Mn(t.params)),equals:yn.equals,writer:t=>{return i=t.initialValue,e=yn.isRgbaColorObject(i),n=Mn(t.params),(t,i)=>{e?function(t,e,n){const i=e.toRgbaObject(n);t.writeProperty("r",i.r),t.writeProperty("g",i.g),t.writeProperty("b",i.b),t.writeProperty("a",i.a)}(t,i,n):function(t,e,n){const i=e.toRgbaObject(n);t.writeProperty("r",i.r),t.writeProperty("g",i.g),t.writeProperty("b",i.b)}(t,i,n)};var e,n,i}},controller:t=>{var e;const n=yn.isRgbaColorObject(t.initialValue),i="expanded"in t.params?t.params.expanded:void 0,s="picker"in t.params?t.params.picker:void 0,o=null!==(e=Mn(t.params))&&void 0!==e?e:"int";return new Li(t.document,{colorType:o,expanded:null!=i&&i,formatter:Ii(n,o),parser:Qn(o),pickerLayout:null!=s?s:"popup",supportsAlpha:n,value:t.value,viewProps:t.viewProps})}},Ui={id:"input-color-string",type:"input",accept:(t,e)=>{if("string"!=typeof t)return null;if("view"in e&&"text"===e.view)return null;const n=Yn(t,Mn(e));if(!n)return null;if(!pi(n))return null;const i=Vn(e);return i?{initialValue:t,params:i}:null},binding:{reader:t=>{var e;return function(t){const e=Xn[t];return n=>{if("string"!=typeof n)return yn.black(t);const i=e.reduce(((t,e)=>t||e(n)),null);return null!=i?i:yn.black(t)}}(null!==(e=Mn(t.params))&&void 0!==e?e:"int")},equals:yn.equals,writer:t=>{const e=Yn(t.initialValue,Mn(t.params));if(!e)throw d.shouldNeverHappen();const n=function(t){const e=pi(t);return e?(t,n)=>{Ze(t,e(n))}:null}(e);if(!n)throw d.notBindable();return n}},controller:t=>{const e=Yn(t.initialValue,Mn(t.params));if(!e)throw d.shouldNeverHappen();const n=pi(e);if(!n)throw d.shouldNeverHappen();const i="expanded"in t.params?t.params.expanded:void 0,s="picker"in t.params?t.params.picker:void 0;return new Li(t.document,{colorType:e.type,expanded:null!=i&&i,formatter:n,parser:Qn(e.type),pickerLayout:null!=s?s:"popup",supportsAlpha:e.alpha,value:t.value,viewProps:t.viewProps})}};class Ti{constructor(t){this.components=t.components,this.asm_=t.assembly}constrain(t){const e=this.asm_.toComponents(t).map(((t,e)=>{var n,i;return null!==(i=null===(n=this.components[e])||void 0===n?void 0:n.constrain(t))&&void 0!==i?i:t}));return this.asm_.fromComponents(e)}}const Bi=m("pndtxt");class Fi{constructor(t,e){this.textViews=e.textViews,this.element=t.createElement("div"),this.element.classList.add(Bi()),this.textViews.forEach((e=>{const n=t.createElement("div");n.classList.add(Bi("a")),n.appendChild(e.element),this.element.appendChild(n)}))}}class Hi{constructor(t,e){this.value=e.value,this.viewProps=e.viewProps,this.acs_=e.axes.map(((n,i)=>function(t,e,n){return new qe(t,{arrayPosition:0===n?"fst":n===e.axes.length-1?"lst":"mid",baseStep:e.axes[n].baseStep,parser:e.parser,props:e.axes[n].textProps,value:E(0,{constraint:e.axes[n].constraint}),viewProps:e.viewProps})}(t,e,i))),this.acs_.forEach(((t,n)=>{je({primary:this.value,secondary:t.value,forward:t=>e.assembly.toComponents(t.rawValue)[n],backward:(t,i)=>{const s=e.assembly.toComponents(t.rawValue);return s[n]=i.rawValue,e.assembly.fromComponents(s)}})})),this.view=new Fi(t,{textViews:this.acs_.map((t=>t.view))})}}function $i(t,e){return"step"in t&&!a(t.step)?new Gt(t.step,e):null}function zi(t){return"max"in t&&!a(t.max)||"min"in t&&!a(t.min)?new qt({max:t.max,min:t.min}):null}function qi(t){const[e,n]=function(t){const e=t?$t(t,qt):null;return e?[e.minValue,e.maxValue]:[void 0,void 0]}(t);return[null!=e?e:0,null!=n?n:100]}const Gi={id:"input-number",type:"input",accept:(t,e)=>{if("number"!=typeof t)return null;const n=S,i=A(e,{format:n.optional.function,max:n.optional.number,min:n.optional.number,options:n.optional.custom(tn),step:n.optional.number});return i?{initialValue:t,params:i}:null},binding:{reader:t=>ye,constraint:t=>function(t,e){const n=[],i=$i(t,e);i&&n.push(i);const s=zi(t);s&&n.push(s);const o=on(t.options);return o&&n.push(o),new Ht(n)}(t.params,t.initialValue),writer:t=>Ze},controller:t=>{var e,n;const i=t.value,s=t.constraint;if(s&&$t(s,zt))return new Qt(t.document,{props:V.fromObject({options:null!==(e=rn(s))&&void 0!==e?e:[]}),value:i,viewProps:t.viewProps});const o=null!==(n="format"in t.params?t.params.format:void 0)&&void 0!==n?n:ke(an(s,i.rawValue));if(s&&$t(s,qt)){const[e,n]=qi(s);return new We(t.document,{baseStep:ln(s),parser:Ce,sliderProps:V.fromObject({maxValue:n,minValue:e}),textProps:V.fromObject({draggingScale:pn(s,i.rawValue),formatter:o}),value:i,viewProps:t.viewProps})}return new qe(t.document,{baseStep:ln(s),parser:Ce,props:V.fromObject({draggingScale:pn(s,i.rawValue),formatter:o}),value:i,viewProps:t.viewProps})}};class Yi{constructor(t=0,e=0){this.x=t,this.y=e}getComponents(){return[this.x,this.y]}static isObject(t){if(a(t))return!1;const e=t.x,n=t.y;return"number"==typeof e&&"number"==typeof n}static equals(t,e){return t.x===e.x&&t.y===e.y}toObject(){return{x:this.x,y:this.y}}}const Xi={toComponents:t=>t.getComponents(),fromComponents:t=>new Yi(...t)},Qi=m("p2d");class Ji{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(Qi()),e.viewProps.bindClassModifiers(this.element),_(e.expanded,f(this.element,Qi(void 0,"expanded")));const n=t.createElement("div");n.classList.add(Qi("h")),this.element.appendChild(n);const i=t.createElement("button");i.classList.add(Qi("b")),i.appendChild(T(t,"p2dpad")),e.viewProps.bindDisabled(i),n.appendChild(i),this.buttonElement=i;const s=t.createElement("div");if(s.classList.add(Qi("t")),n.appendChild(s),this.textElement=s,"inline"===e.pickerLayout){const e=t.createElement("div");e.classList.add(Qi("p")),this.element.appendChild(e),this.pickerElement=e}else this.pickerElement=null}}const Wi=m("p2dp");class Zi{constructor(t,e){this.onFoldableChange_=this.onFoldableChange_.bind(this),this.onValueChange_=this.onValueChange_.bind(this),this.invertsY_=e.invertsY,this.maxValue_=e.maxValue,this.element=t.createElement("div"),this.element.classList.add(Wi()),"popup"===e.layout&&this.element.classList.add(Wi(void 0,"p"));const n=t.createElement("div");n.classList.add(Wi("p")),e.viewProps.bindTabIndex(n),this.element.appendChild(n),this.padElement=n;const i=t.createElementNS(O,"svg");i.classList.add(Wi("g")),this.padElement.appendChild(i),this.svgElem_=i;const s=t.createElementNS(O,"line");s.classList.add(Wi("ax")),s.setAttributeNS(null,"x1","0"),s.setAttributeNS(null,"y1","50%"),s.setAttributeNS(null,"x2","100%"),s.setAttributeNS(null,"y2","50%"),this.svgElem_.appendChild(s);const o=t.createElementNS(O,"line");o.classList.add(Wi("ax")),o.setAttributeNS(null,"x1","50%"),o.setAttributeNS(null,"y1","0"),o.setAttributeNS(null,"x2","50%"),o.setAttributeNS(null,"y2","100%"),this.svgElem_.appendChild(o);const r=t.createElementNS(O,"line");r.classList.add(Wi("l")),r.setAttributeNS(null,"x1","50%"),r.setAttributeNS(null,"y1","50%"),this.svgElem_.appendChild(r),this.lineElem_=r;const a=t.createElement("div");a.classList.add(Wi("m")),this.padElement.appendChild(a),this.markerElem_=a,e.value.emitter.on("change",this.onValueChange_),this.value=e.value,this.update_()}get allFocusableElements(){return[this.padElement]}update_(){const[t,e]=this.value.rawValue.getComponents(),n=this.maxValue_,i=Te(t,-n,+n,0,100),s=Te(e,-n,+n,0,100),o=this.invertsY_?100-s:s;this.lineElem_.setAttributeNS(null,"x2",`${i}%`),this.lineElem_.setAttributeNS(null,"y2",`${o}%`),this.markerElem_.style.left=`${i}%`,this.markerElem_.style.top=`${o}%`}onValueChange_(){this.update_()}onFoldableChange_(){this.update_()}}function ts(t,e,n){return[Ne(e[0],Re(t)),Ne(e[1],Oe(t))*(n?1:-1)]}class es{constructor(t,e){this.onPadKeyDown_=this.onPadKeyDown_.bind(this),this.onPadKeyUp_=this.onPadKeyUp_.bind(this),this.onPointerDown_=this.onPointerDown_.bind(this),this.onPointerMove_=this.onPointerMove_.bind(this),this.onPointerUp_=this.onPointerUp_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.baseSteps_=e.baseSteps,this.maxValue_=e.maxValue,this.invertsY_=e.invertsY,this.view=new Zi(t,{invertsY:this.invertsY_,layout:e.layout,maxValue:this.maxValue_,value:this.value,viewProps:this.viewProps}),this.ptHandler_=new Ue(this.view.padElement),this.ptHandler_.emitter.on("down",this.onPointerDown_),this.ptHandler_.emitter.on("move",this.onPointerMove_),this.ptHandler_.emitter.on("up",this.onPointerUp_),this.view.padElement.addEventListener("keydown",this.onPadKeyDown_),this.view.padElement.addEventListener("keyup",this.onPadKeyUp_)}handlePointerEvent_(t,e){if(!t.point)return;const n=this.maxValue_,i=Te(t.point.x,0,t.bounds.width,-n,+n),s=Te(this.invertsY_?t.bounds.height-t.point.y:t.point.y,0,t.bounds.height,-n,+n);this.value.setRawValue(new Yi(i,s),e)}onPointerDown_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerMove_(t){this.handlePointerEvent_(t.data,{forceEmit:!1,last:!1})}onPointerUp_(t){this.handlePointerEvent_(t.data,{forceEmit:!0,last:!0})}onPadKeyDown_(t){Ie(t.key)&&t.preventDefault();const[e,n]=ts(t,this.baseSteps_,this.invertsY_);0===e&&0===n||this.value.setRawValue(new Yi(this.value.rawValue.x+e,this.value.rawValue.y+n),{forceEmit:!1,last:!1})}onPadKeyUp_(t){const[e,n]=ts(t,this.baseSteps_,this.invertsY_);0===e&&0===n||this.value.setRawValue(this.value.rawValue,{forceEmit:!0,last:!0})}}class ns{constructor(t,e){var n,i;this.onPopupChildBlur_=this.onPopupChildBlur_.bind(this),this.onPopupChildKeydown_=this.onPopupChildKeydown_.bind(this),this.onPadButtonBlur_=this.onPadButtonBlur_.bind(this),this.onPadButtonClick_=this.onPadButtonClick_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.foldable_=J.create(e.expanded),this.popC_="popup"===e.pickerLayout?new Zt(t,{viewProps:this.viewProps}):null;const s=new es(t,{baseSteps:[e.axes[0].baseStep,e.axes[1].baseStep],invertsY:e.invertsY,layout:e.pickerLayout,maxValue:e.maxValue,value:this.value,viewProps:this.viewProps});s.view.allFocusableElements.forEach((t=>{t.addEventListener("blur",this.onPopupChildBlur_),t.addEventListener("keydown",this.onPopupChildKeydown_)})),this.pickerC_=s,this.textC_=new Hi(t,{assembly:Xi,axes:e.axes,parser:e.parser,value:this.value,viewProps:this.viewProps}),this.view=new Ji(t,{expanded:this.foldable_.value("expanded"),pickerLayout:e.pickerLayout,viewProps:this.viewProps}),this.view.textElement.appendChild(this.textC_.view.element),null===(n=this.view.buttonElement)||void 0===n||n.addEventListener("blur",this.onPadButtonBlur_),null===(i=this.view.buttonElement)||void 0===i||i.addEventListener("click",this.onPadButtonClick_),this.popC_?(this.view.element.appendChild(this.popC_.view.element),this.popC_.view.element.appendChild(this.pickerC_.view.element),je({primary:this.foldable_.value("expanded"),secondary:this.popC_.shows,forward:t=>t.rawValue,backward:(t,e)=>e.rawValue})):this.view.pickerElement&&(this.view.pickerElement.appendChild(this.pickerC_.view.element),Z(this.foldable_,this.view.pickerElement))}onPadButtonBlur_(t){if(!this.popC_)return;const e=this.view.element,n=t.relatedTarget;n&&e.contains(n)||(this.popC_.shows.rawValue=!1)}onPadButtonClick_(){this.foldable_.set("expanded",!this.foldable_.get("expanded")),this.foldable_.get("expanded")&&this.pickerC_.view.allFocusableElements[0].focus()}onPopupChildBlur_(t){if(!this.popC_)return;const e=this.popC_.view.element,n=$(t);n&&e.contains(n)||n&&n===this.view.buttonElement&&!I(e.ownerDocument)||(this.popC_.shows.rawValue=!1)}onPopupChildKeydown_(t){this.popC_?"Escape"===t.key&&(this.popC_.shows.rawValue=!1):this.view.pickerElement&&"Escape"===t.key&&this.view.buttonElement.focus()}}function is(t){return Yi.isObject(t)?new Yi(t.x,t.y):new Yi}function ss(t,e){t.writeProperty("x",e.x),t.writeProperty("y",e.y)}function os(t,e){if(!t)return;const n=[],i=$i(t,e);i&&n.push(i);const s=zi(t);return s&&n.push(s),new Ht(n)}function rs(t,e){var n,i;const s=t&&$t(t,qt);if(s)return Math.max(Math.abs(null!==(n=s.minValue)&&void 0!==n?n:0),Math.abs(null!==(i=s.maxValue)&&void 0!==i?i:0));const o=ln(t);return Math.max(10*Math.abs(o),10*Math.abs(e))}function as(t,e){const n=e instanceof Ti?e.components[0]:void 0,i=e instanceof Ti?e.components[1]:void 0,s=rs(n,t.x),o=rs(i,t.y);return Math.max(s,o)}function ls(t,e){return{baseStep:ln(e),constraint:e,textProps:V.fromObject({draggingScale:pn(e,t),formatter:ke(an(e,t))})}}function ps(t){if(!("y"in t))return!1;const e=t.y;return!!e&&("inverted"in e&&!!e.inverted)}const ds={id:"input-point2d",type:"input",accept:(t,e)=>{if(!Yi.isObject(t))return null;const n=S,i=A(e,{expanded:n.optional.boolean,picker:n.optional.custom(en),x:n.optional.custom(nn),y:n.optional.object({inverted:n.optional.boolean,max:n.optional.number,min:n.optional.number,step:n.optional.number})});return i?{initialValue:t,params:i}:null},binding:{reader:t=>is,constraint:t=>{return e=t.params,n=t.initialValue,new Ti({assembly:Xi,components:[os("x"in e?e.x:void 0,n.x),os("y"in e?e.y:void 0,n.y)]});var e,n},equals:Yi.equals,writer:t=>ss},controller:t=>{const e=t.document,n=t.value,i=t.constraint;if(!(i instanceof Ti))throw d.shouldNeverHappen();const s="expanded"in t.params?t.params.expanded:void 0,o="picker"in t.params?t.params.picker:void 0;return new ns(e,{axes:[ls(n.rawValue.x,i.components[0]),ls(n.rawValue.y,i.components[1])],expanded:null!=s&&s,invertsY:ps(t.params),maxValue:as(n.rawValue,i),parser:Ce,pickerLayout:null!=o?o:"popup",value:n,viewProps:t.viewProps})}};class cs{constructor(t=0,e=0,n=0){this.x=t,this.y=e,this.z=n}getComponents(){return[this.x,this.y,this.z]}static isObject(t){if(a(t))return!1;const e=t.x,n=t.y,i=t.z;return"number"==typeof e&&"number"==typeof n&&"number"==typeof i}static equals(t,e){return t.x===e.x&&t.y===e.y&&t.z===e.z}toObject(){return{x:this.x,y:this.y,z:this.z}}}const hs={toComponents:t=>t.getComponents(),fromComponents:t=>new cs(...t)};function us(t){return cs.isObject(t)?new cs(t.x,t.y,t.z):new cs}function vs(t,e){t.writeProperty("x",e.x),t.writeProperty("y",e.y),t.writeProperty("z",e.z)}function ms(t,e){return{baseStep:ln(e),constraint:e,textProps:V.fromObject({draggingScale:pn(e,t),formatter:ke(an(e,t))})}}const bs={id:"input-point3d",type:"input",accept:(t,e)=>{if(!cs.isObject(t))return null;const n=S,i=A(e,{x:n.optional.custom(nn),y:n.optional.custom(nn),z:n.optional.custom(nn)});return i?{initialValue:t,params:i}:null},binding:{reader:t=>us,constraint:t=>{return e=t.params,n=t.initialValue,new Ti({assembly:hs,components:[os("x"in e?e.x:void 0,n.x),os("y"in e?e.y:void 0,n.y),os("z"in e?e.z:void 0,n.z)]});var e,n},equals:cs.equals,writer:t=>vs},controller:t=>{const e=t.value,n=t.constraint;if(!(n instanceof Ti))throw d.shouldNeverHappen();return new Hi(t.document,{assembly:hs,axes:[ms(e.rawValue.x,n.components[0]),ms(e.rawValue.y,n.components[1]),ms(e.rawValue.z,n.components[2])],parser:Ce,value:e,viewProps:t.viewProps})}};class _s{constructor(t=0,e=0,n=0,i=0){this.x=t,this.y=e,this.z=n,this.w=i}getComponents(){return[this.x,this.y,this.z,this.w]}static isObject(t){if(a(t))return!1;const e=t.x,n=t.y,i=t.z,s=t.w;return"number"==typeof e&&"number"==typeof n&&"number"==typeof i&&"number"==typeof s}static equals(t,e){return t.x===e.x&&t.y===e.y&&t.z===e.z&&t.w===e.w}toObject(){return{x:this.x,y:this.y,z:this.z,w:this.w}}}const gs={toComponents:t=>t.getComponents(),fromComponents:t=>new _s(...t)};function fs(t){return _s.isObject(t)?new _s(t.x,t.y,t.z,t.w):new _s}function ws(t,e){t.writeProperty("x",e.x),t.writeProperty("y",e.y),t.writeProperty("z",e.z),t.writeProperty("w",e.w)}const xs={id:"input-point4d",type:"input",accept:(t,e)=>{if(!_s.isObject(t))return null;const n=S,i=A(e,{x:n.optional.custom(nn),y:n.optional.custom(nn),z:n.optional.custom(nn),w:n.optional.custom(nn)});return i?{initialValue:t,params:i}:null},binding:{reader:t=>fs,constraint:t=>{return e=t.params,n=t.initialValue,new Ti({assembly:gs,components:[os("x"in e?e.x:void 0,n.x),os("y"in e?e.y:void 0,n.y),os("z"in e?e.z:void 0,n.z),os("w"in e?e.w:void 0,n.w)]});var e,n},equals:_s.equals,writer:t=>ws},controller:t=>{const e=t.value,n=t.constraint;if(!(n instanceof Ti))throw d.shouldNeverHappen();return new Hi(t.document,{assembly:gs,axes:e.rawValue.getComponents().map(((t,e)=>{return i=t,{baseStep:ln(s=n.components[e]),constraint:s,textProps:V.fromObject({draggingScale:pn(s,i),formatter:ke(an(s,i))})};var i,s})),parser:Ce,value:e,viewProps:t.viewProps})}};const Cs={id:"input-string",type:"input",accept:(t,e)=>{if("string"!=typeof t)return null;const n=A(e,{options:S.optional.custom(tn)});return n?{initialValue:t,params:n}:null},binding:{reader:t=>Le,constraint:t=>function(t){const e=[],n=on(t.options);return n&&e.push(n),new Ht(e)}(t.params),writer:t=>Ze},controller:t=>{var e;const n=t.document,i=t.value,s=t.constraint;return s&&$t(s,zt)?new Qt(n,{props:V.fromObject({options:null!==(e=rn(s))&&void 0!==e?e:[]}),value:i,viewProps:t.viewProps}):new ne(n,{parser:t=>t,props:V.fromObject({formatter:Me}),value:i,viewProps:t.viewProps})}},ys={defaultInterval:200,defaultLineCount:3},Ps=m("mll");class ks{constructor(t,e){this.onValueUpdate_=this.onValueUpdate_.bind(this),this.formatter_=e.formatter,this.element=t.createElement("div"),this.element.classList.add(Ps()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("textarea");n.classList.add(Ps("i")),n.style.height=`calc(var(--bld-us) * ${e.lineCount})`,n.readOnly=!0,e.viewProps.bindDisabled(n),this.element.appendChild(n),this.textareaElem_=n,e.value.emitter.on("change",this.onValueUpdate_),this.value=e.value,this.update_()}update_(){const t=this.textareaElem_,e=t.scrollTop===t.scrollHeight-t.clientHeight,n=[];this.value.rawValue.forEach((t=>{void 0!==t&&n.push(this.formatter_(t))})),t.textContent=n.join("\n"),e&&(t.scrollTop=t.scrollHeight)}onValueUpdate_(){this.update_()}}class Es{constructor(t,e){this.value=e.value,this.viewProps=e.viewProps,this.view=new ks(t,{formatter:e.formatter,lineCount:e.lineCount,value:this.value,viewProps:this.viewProps})}}const Vs=m("sgl");class Ls{constructor(t,e){this.onValueUpdate_=this.onValueUpdate_.bind(this),this.formatter_=e.formatter,this.element=t.createElement("div"),this.element.classList.add(Vs()),e.viewProps.bindClassModifiers(this.element);const n=t.createElement("input");n.classList.add(Vs("i")),n.readOnly=!0,n.type="text",e.viewProps.bindDisabled(n),this.element.appendChild(n),this.inputElement=n,e.value.emitter.on("change",this.onValueUpdate_),this.value=e.value,this.update_()}update_(){const t=this.value.rawValue,e=t[t.length-1];this.inputElement.value=void 0!==e?this.formatter_(e):""}onValueUpdate_(){this.update_()}}class Ms{constructor(t,e){this.value=e.value,this.viewProps=e.viewProps,this.view=new Ls(t,{formatter:e.formatter,value:this.value,viewProps:this.viewProps})}}const Ss={id:"monitor-bool",type:"monitor",accept:(t,e)=>{if("boolean"!=typeof t)return null;const n=A(e,{lineCount:S.optional.number});return n?{initialValue:t,params:n}:null},binding:{reader:t=>ie},controller:t=>{var e;return 1===t.value.rawValue.length?new Ms(t.document,{formatter:se,value:t.value,viewProps:t.viewProps}):new Es(t.document,{formatter:se,lineCount:null!==(e=t.params.lineCount)&&void 0!==e?e:ys.defaultLineCount,value:t.value,viewProps:t.viewProps})}},As=m("grl");class Ds{constructor(t,e){this.onCursorChange_=this.onCursorChange_.bind(this),this.onValueUpdate_=this.onValueUpdate_.bind(this),this.element=t.createElement("div"),this.element.classList.add(As()),e.viewProps.bindClassModifiers(this.element),this.formatter_=e.formatter,this.props_=e.props,this.cursor_=e.cursor,this.cursor_.emitter.on("change",this.onCursorChange_);const n=t.createElementNS(O,"svg");n.classList.add(As("g")),n.style.height=`calc(var(--bld-us) * ${e.lineCount})`,this.element.appendChild(n),this.svgElem_=n;const i=t.createElementNS(O,"polyline");this.svgElem_.appendChild(i),this.lineElem_=i;const s=t.createElement("div");s.classList.add(As("t"),m("tt")()),this.element.appendChild(s),this.tooltipElem_=s,e.value.emitter.on("change",this.onValueUpdate_),this.value=e.value,this.update_()}get graphElement(){return this.svgElem_}update_(){const t=this.svgElem_.getBoundingClientRect(),e=this.value.rawValue.length-1,n=this.props_.get("minValue"),i=this.props_.get("maxValue"),s=[];this.value.rawValue.forEach(((o,r)=>{if(void 0===o)return;const a=Te(r,0,e,0,t.width),l=Te(o,n,i,t.height,0);s.push([a,l].join(","))})),this.lineElem_.setAttributeNS(null,"points",s.join(" "));const o=this.tooltipElem_,r=this.value.rawValue[this.cursor_.rawValue];if(void 0===r)return void o.classList.remove(As("t","a"));const a=Te(this.cursor_.rawValue,0,e,0,t.width),l=Te(r,n,i,t.height,0);o.style.left=`${a}px`,o.style.top=`${l}px`,o.textContent=`${this.formatter_(r)}`,o.classList.contains(As("t","a"))||(o.classList.add(As("t","a"),As("t","in")),R(o),o.classList.remove(As("t","in")))}onValueUpdate_(){this.update_()}onCursorChange_(){this.update_()}}class js{constructor(t,e){if(this.onGraphMouseMove_=this.onGraphMouseMove_.bind(this),this.onGraphMouseLeave_=this.onGraphMouseLeave_.bind(this),this.onGraphPointerDown_=this.onGraphPointerDown_.bind(this),this.onGraphPointerMove_=this.onGraphPointerMove_.bind(this),this.onGraphPointerUp_=this.onGraphPointerUp_.bind(this),this.props_=e.props,this.value=e.value,this.viewProps=e.viewProps,this.cursor_=E(-1),this.view=new Ds(t,{cursor:this.cursor_,formatter:e.formatter,lineCount:e.lineCount,props:this.props_,value:this.value,viewProps:this.viewProps}),I(t)){const t=new Ue(this.view.element);t.emitter.on("down",this.onGraphPointerDown_),t.emitter.on("move",this.onGraphPointerMove_),t.emitter.on("up",this.onGraphPointerUp_)}else this.view.element.addEventListener("mousemove",this.onGraphMouseMove_),this.view.element.addEventListener("mouseleave",this.onGraphMouseLeave_)}onGraphMouseLeave_(){this.cursor_.rawValue=-1}onGraphMouseMove_(t){const e=this.view.element.getBoundingClientRect();this.cursor_.rawValue=Math.floor(Te(t.offsetX,0,e.width,0,this.value.rawValue.length))}onGraphPointerDown_(t){this.onGraphPointerMove_(t)}onGraphPointerMove_(t){t.data.point?this.cursor_.rawValue=Math.floor(Te(t.data.point.x,0,t.data.bounds.width,0,this.value.rawValue.length)):this.cursor_.rawValue=-1}onGraphPointerUp_(){this.cursor_.rawValue=-1}}function Ns(t){return"format"in t&&!a(t.format)?t.format:ke(2)}function Os(t){return"view"in t&&"graph"===t.view}const Rs={id:"monitor-number",type:"monitor",accept:(t,e)=>{if("number"!=typeof t)return null;const n=S,i=A(e,{format:n.optional.function,lineCount:n.optional.number,max:n.optional.number,min:n.optional.number,view:n.optional.string});return i?{initialValue:t,params:i}:null},binding:{defaultBufferSize:t=>Os(t)?64:1,reader:t=>ye},controller:t=>Os(t.params)?function(t){var e,n,i;return new js(t.document,{formatter:Ns(t.params),lineCount:null!==(e=t.params.lineCount)&&void 0!==e?e:ys.defaultLineCount,props:V.fromObject({maxValue:null!==(n="max"in t.params?t.params.max:null)&&void 0!==n?n:100,minValue:null!==(i="min"in t.params?t.params.min:null)&&void 0!==i?i:0}),value:t.value,viewProps:t.viewProps})}(t):function(t){var e;return 1===t.value.rawValue.length?new Ms(t.document,{formatter:Ns(t.params),value:t.value,viewProps:t.viewProps}):new Es(t.document,{formatter:Ns(t.params),lineCount:null!==(e=t.params.lineCount)&&void 0!==e?e:ys.defaultLineCount,value:t.value,viewProps:t.viewProps})}(t)},Is={id:"monitor-string",type:"monitor",accept:(t,e)=>{if("string"!=typeof t)return null;const n=S,i=A(e,{lineCount:n.optional.number,multiline:n.optional.boolean});return i?{initialValue:t,params:i}:null},binding:{reader:t=>Le},controller:t=>{var e;const n=t.value;return n.rawValue.length>1||"multiline"in t.params&&t.params.multiline?new Es(t.document,{formatter:Me,lineCount:null!==(e=t.params.lineCount)&&void 0!==e?e:ys.defaultLineCount,value:n,viewProps:t.viewProps}):new Ms(t.document,{formatter:Me,value:n,viewProps:t.viewProps})}};class Ks{constructor(t){this.onValueChange_=this.onValueChange_.bind(this),this.reader=t.reader,this.writer=t.writer,this.emitter=new u,this.value=t.value,this.value.emitter.on("change",this.onValueChange_),this.target=t.target,this.read()}read(){const t=this.target.read();void 0!==t&&(this.value.rawValue=this.reader(t))}write_(t){this.writer(this.target,t)}onValueChange_(t){this.write_(t.rawValue),this.emitter.emit("change",{options:t.options,rawValue:t.rawValue,sender:this})}}class Us{constructor(t){this.onTick_=this.onTick_.bind(this),this.reader_=t.reader,this.target=t.target,this.emitter=new u,this.value=t.value,this.ticker=t.ticker,this.ticker.emitter.on("tick",this.onTick_),this.read()}dispose(){this.ticker.dispose()}read(){const t=this.target.read();if(void 0===t)return;const e=this.value.rawValue,n=this.reader_(t);this.value.rawValue=function(t,e){const n=[...De(t),e];return n.length>t.length?n.splice(0,n.length-t.length):Se(n,t.length),n}(e,n),this.emitter.emit("update",{rawValue:n,sender:this})}onTick_(t){this.read()}}function Ts(t,e){return 0===e?new Bt:new Ft(t,null!=e?e:ys.defaultInterval)}class Bs{constructor(){this.pluginsMap_={blades:[],inputs:[],monitors:[]}}getAll(){return[...this.pluginsMap_.blades,...this.pluginsMap_.inputs,...this.pluginsMap_.monitors]}register(t){"blade"===t.type?this.pluginsMap_.blades.unshift(t):"input"===t.type?this.pluginsMap_.inputs.unshift(t):"monitor"===t.type&&this.pluginsMap_.monitors.unshift(t)}createInput(t,e,n){if(a(e.read()))throw new d({context:{key:e.key},type:"nomatchingcontroller"});const i=this.pluginsMap_.inputs.reduce(((i,s)=>null!=i?i:function(t,e){const n=t.accept(e.target.read(),e.params);if(a(n))return null;const i=S,s={target:e.target,initialValue:n.initialValue,params:n.params},o=t.binding.reader(s),r=t.binding.constraint?t.binding.constraint(s):void 0,l=E(o(n.initialValue),{constraint:r,equals:t.binding.equals}),p=new Ks({reader:o,target:e.target,value:l,writer:t.binding.writer(s)}),d=i.optional.boolean(e.params.disabled).value,c=i.optional.boolean(e.params.hidden).value,h=t.controller({constraint:r,document:e.document,initialValue:n.initialValue,params:n.params,value:p.value,viewProps:Mt.create({disabled:d,hidden:c})}),u=i.optional.string(e.params.label).value;return new it(e.document,{binding:p,blade:Q(),props:V.fromObject({label:null!=u?u:e.target.key}),valueController:h})}(s,{document:t,target:e,params:n})),null);if(i)return i;throw new d({context:{key:e.key},type:"nomatchingcontroller"})}createMonitor(t,e,n){const i=this.pluginsMap_.monitors.reduce(((i,s)=>null!=i?i:function(t,e){var n,i,s;const o=S,r=t.accept(e.target.read(),e.params);if(a(r))return null;const l={target:e.target,initialValue:r.initialValue,params:r.params},p=t.binding.reader(l),d=null!==(i=null!==(n=o.optional.number(e.params.bufferSize).value)&&void 0!==n?n:t.binding.defaultBufferSize&&t.binding.defaultBufferSize(r.params))&&void 0!==i?i:1,c=o.optional.number(e.params.interval).value,h=new Us({reader:p,target:e.target,ticker:Ts(e.document,c),value:Ae(d)}),u=o.optional.boolean(e.params.disabled).value,v=o.optional.boolean(e.params.hidden).value,m=t.controller({document:e.document,params:r.params,value:h.value,viewProps:Mt.create({disabled:u,hidden:v})}),b=null!==(s=o.optional.string(e.params.label).value)&&void 0!==s?s:e.target.key;return new ot(e.document,{binding:h,blade:Q(),props:V.fromObject({label:b}),valueController:m})}(s,{document:t,params:n,target:e})),null);if(i)return i;throw new d({context:{key:e.key},type:"nomatchingcontroller"})}createBlade(t,e){const n=this.pluginsMap_.blades.reduce(((n,i)=>null!=n?n:function(t,e){const n=t.accept(e.params);if(!n)return null;const i=S.optional.boolean(e.params.disabled).value,s=S.optional.boolean(e.params.hidden).value;return t.controller({blade:Q(),document:e.document,params:Object.assign(Object.assign({},n.params),{disabled:i,hidden:s}),viewProps:Mt.create({disabled:i,hidden:s})})}(i,{document:t,params:e})),null);if(!n)throw new d({type:"nomatchingview",context:{params:e}});return n}createBladeApi(t){if(t instanceof it)return new nt(t);if(t instanceof ot)return new st(t);if(t instanceof bt)return new pt(t,this);const e=this.pluginsMap_.blades.reduce(((e,n)=>null!=e?e:n.api({controller:t,pool:this})),null);if(!e)throw d.shouldNeverHappen();return e}}class Fs extends e{constructor(t){super(t),this.emitter_=new u,this.controller_.valueController.value.emitter.on("change",(t=>{this.emitter_.emit("change",{event:new i(this,t.rawValue)})}))}get label(){return this.controller_.props.get("label")}set label(t){this.controller_.props.set("label",t)}get options(){return this.controller_.valueController.props.get("options")}set options(t){this.controller_.valueController.props.set("options",t)}get value(){return this.controller_.valueController.value.rawValue}set value(t){this.controller_.valueController.value.rawValue=t}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}}class Hs extends e{constructor(t){super(t),this.emitter_=new u,this.controller_.valueController.value.emitter.on("change",(t=>{this.emitter_.emit("change",{event:new i(this,t.rawValue)})}))}get label(){return this.controller_.props.get("label")}set label(t){this.controller_.props.set("label",t)}get maxValue(){return this.controller_.valueController.sliderController.props.get("maxValue")}set maxValue(t){this.controller_.valueController.sliderController.props.set("maxValue",t)}get minValue(){return this.controller_.valueController.sliderController.props.get("minValue")}set minValue(t){this.controller_.valueController.sliderController.props.set("minValue",t)}get value(){return this.controller_.valueController.value.rawValue}set value(t){this.controller_.valueController.value.rawValue=t}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}}class $s extends e{constructor(t){super(t),this.emitter_=new u,this.controller_.valueController.value.emitter.on("change",(t=>{this.emitter_.emit("change",{event:new i(this,t.rawValue)})}))}get label(){return this.controller_.props.get("label")}set label(t){this.controller_.props.set("label",t)}get formatter(){return this.controller_.valueController.props.get("formatter")}set formatter(t){this.controller_.valueController.props.set("formatter",t)}get value(){return this.controller_.valueController.value.rawValue}set value(t){this.controller_.valueController.value.rawValue=t}on(t,e){const n=e.bind(this);return this.emitter_.on(t,(t=>{n(t.event)})),this}}const zs={id:"list",type:"blade",accept(t){const e=S,n=A(t,{options:e.required.custom(tn),value:e.required.raw,view:e.required.constant("list"),label:e.optional.string});return n?{params:n}:null},controller(t){const e=new Qt(t.document,{props:V.fromObject({options:sn(t.params.options)}),value:E(t.params.value),viewProps:t.viewProps});return new xt(t.document,{blade:t.blade,props:V.fromObject({label:t.params.label}),valueController:e})},api:t=>t.controller instanceof xt&&t.controller.valueController instanceof Qt?new Fs(t.controller):null};class qs extends dt{constructor(t,e){super(t,e)}get element(){return this.controller_.view.element}importPreset(t){!function(t,e){t.forEach((t=>{const n=e[t.presetKey];void 0!==n&&t.write(n)}))}(this.controller_.rackController.rack.find(it).map((t=>t.binding.target)),t),this.refresh()}exportPreset(){return function(t){return t.reduce(((t,e)=>Object.assign(t,{[e.presetKey]:e.read()})),{})}(this.controller_.rackController.rack.find(it).map((t=>t.binding.target)))}refresh(){this.controller_.rackController.rack.find(it).forEach((t=>{t.binding.read()})),this.controller_.rackController.rack.find(ot).forEach((t=>{t.binding.read()}))}}class Gs extends ft{constructor(t,e){super(t,{expanded:e.expanded,blade:e.blade,props:e.props,root:!0,viewProps:e.viewProps})}}const Ys={id:"slider",type:"blade",accept(t){const e=S,n=A(t,{max:e.required.number,min:e.required.number,view:e.required.constant("slider"),format:e.optional.function,label:e.optional.string,value:e.optional.number});return n?{params:n}:null},controller(t){var e,n;const i=null!==(e=t.params.value)&&void 0!==e?e:0,s=new We(t.document,{baseStep:1,parser:Ce,sliderProps:V.fromObject({maxValue:t.params.max,minValue:t.params.min}),textProps:V.fromObject({draggingScale:pn(void 0,i),formatter:null!==(n=t.params.format)&&void 0!==n?n:Pe}),value:E(i),viewProps:t.viewProps});return new xt(t.document,{blade:t.blade,props:V.fromObject({label:t.params.label}),valueController:s})},api:t=>t.controller instanceof xt&&t.controller.valueController instanceof We?new Hs(t.controller):null},Xs={id:"text",type:"blade",accept(t){const e=S,n=A(t,{parse:e.required.function,value:e.required.raw,view:e.required.constant("text"),format:e.optional.function,label:e.optional.string});return n?{params:n}:null},controller(t){var e;const n=new ne(t.document,{parser:t.params.parse,props:V.fromObject({formatter:null!==(e=t.params.format)&&void 0!==e?e:t=>String(t)}),value:E(t.params.value),viewProps:t.viewProps});return new xt(t.document,{blade:t.blade,props:V.fromObject({label:t.params.label}),valueController:n})},api:t=>t.controller instanceof xt&&t.controller.valueController instanceof ne?new $s(t.controller):null};function Qs(t,e,n){if(t.querySelector(`style[data-tp-style=${e}]`))return;const i=t.createElement("style");i.dataset.tpStyle=e,i.textContent=n,t.head.appendChild(i)}const Js=new class{constructor(t){const[e,n]=t.split("-"),i=e.split(".");this.major=parseInt(i[0],10),this.minor=parseInt(i[1],10),this.patch=parseInt(i[2],10),this.prerelease=null!=n?n:null}toString(){const t=[this.major,this.minor,this.patch].join(".");return null!==this.prerelease?[t,this.prerelease].join("-"):t}}("3.1.0");t.BladeApi=e,t.ButtonApi=h,t.FolderApi=dt,t.InputBindingApi=nt,t.ListApi=Fs,t.MonitorBindingApi=st,t.Pane=class extends qs{constructor(t){var e,n;const i=null!=t?t:{},s=null!==(e=i.document)&&void 0!==e?e:K(),o=function(){const t=new Bs;return[ds,bs,xs,Cs,Gi,Ui,Ki,Oi,un,Ss,Is,Rs,Y,wt,Et,Tt].forEach((e=>{t.register(e)})),t}();super(new Gs(s,{expanded:i.expanded,blade:Q(),props:V.fromObject({title:i.title}),viewProps:Mt.create()}),o),this.pool_=o,this.containerElem_=null!==(n=i.container)&&void 0!==n?n:function(t){const e=t.createElement("div");return e.classList.add(m("dfw")()),t.body&&t.body.appendChild(e),e}(s),this.containerElem_.appendChild(this.element),this.doc_=s,this.usesDefaultWrapper_=!i.container,this.setUpDefaultPlugins_()}get document(){if(!this.doc_)throw d.alreadyDisposed();return this.doc_}dispose(){const t=this.containerElem_;if(!t)throw d.alreadyDisposed();if(this.usesDefaultWrapper_){const e=t.parentElement;e&&e.removeChild(t)}this.containerElem_=null,this.doc_=null,super.dispose()}registerPlugin(t){("plugin"in t?[t.plugin]:"plugins"in t?t.plugins:[]).forEach((t=>{this.pool_.register(t),this.embedPluginStyle_(t)}))}embedPluginStyle_(t){t.css&&Qs(this.document,`plugin-${t.id}`,t.css)}setUpDefaultPlugins_(){Qs(this.document,"default",'.tp-tbiv_b,.tp-coltxtv_ms,.tp-ckbv_i,.tp-rotv_b,.tp-fldv_b,.tp-mllv_i,.tp-sglv_i,.tp-grlv_g,.tp-txtv_i,.tp-p2dpv_p,.tp-colswv_sw,.tp-p2dv_b,.tp-btnv_b,.tp-lstv_s{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;font-family:inherit;font-size:inherit;font-weight:inherit;margin:0;outline:none;padding:0}.tp-p2dv_b,.tp-btnv_b,.tp-lstv_s{background-color:var(--btn-bg);border-radius:var(--elm-br);color:var(--btn-fg);cursor:pointer;display:block;font-weight:bold;height:var(--bld-us);line-height:var(--bld-us);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tp-p2dv_b:hover,.tp-btnv_b:hover,.tp-lstv_s:hover{background-color:var(--btn-bg-h)}.tp-p2dv_b:focus,.tp-btnv_b:focus,.tp-lstv_s:focus{background-color:var(--btn-bg-f)}.tp-p2dv_b:active,.tp-btnv_b:active,.tp-lstv_s:active{background-color:var(--btn-bg-a)}.tp-p2dv_b:disabled,.tp-btnv_b:disabled,.tp-lstv_s:disabled{opacity:.5}.tp-txtv_i,.tp-p2dpv_p,.tp-colswv_sw{background-color:var(--in-bg);border-radius:var(--elm-br);box-sizing:border-box;color:var(--in-fg);font-family:inherit;height:var(--bld-us);line-height:var(--bld-us);min-width:0;width:100%}.tp-txtv_i:hover,.tp-p2dpv_p:hover,.tp-colswv_sw:hover{background-color:var(--in-bg-h)}.tp-txtv_i:focus,.tp-p2dpv_p:focus,.tp-colswv_sw:focus{background-color:var(--in-bg-f)}.tp-txtv_i:active,.tp-p2dpv_p:active,.tp-colswv_sw:active{background-color:var(--in-bg-a)}.tp-txtv_i:disabled,.tp-p2dpv_p:disabled,.tp-colswv_sw:disabled{opacity:.5}.tp-mllv_i,.tp-sglv_i,.tp-grlv_g{background-color:var(--mo-bg);border-radius:var(--elm-br);box-sizing:border-box;color:var(--mo-fg);height:var(--bld-us);scrollbar-color:currentColor transparent;scrollbar-width:thin;width:100%}.tp-mllv_i::-webkit-scrollbar,.tp-sglv_i::-webkit-scrollbar,.tp-grlv_g::-webkit-scrollbar{height:8px;width:8px}.tp-mllv_i::-webkit-scrollbar-corner,.tp-sglv_i::-webkit-scrollbar-corner,.tp-grlv_g::-webkit-scrollbar-corner{background-color:transparent}.tp-mllv_i::-webkit-scrollbar-thumb,.tp-sglv_i::-webkit-scrollbar-thumb,.tp-grlv_g::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:currentColor;border:transparent solid 2px;border-radius:4px}.tp-rotv{--font-family: var(--tp-font-family, Roboto Mono, Source Code Pro, Menlo, Courier, monospace);--bs-br: var(--tp-base-border-radius, 6px);--cnt-h-p: var(--tp-container-horizontal-padding, 4px);--cnt-v-p: var(--tp-container-vertical-padding, 4px);--elm-br: var(--tp-element-border-radius, 2px);--bld-s: var(--tp-blade-spacing, 4px);--bld-us: var(--tp-blade-unit-size, 20px);--bs-bg: var(--tp-base-background-color, #28292e);--bs-sh: var(--tp-base-shadow-color, rgba(0, 0, 0, 0.2));--btn-bg: var(--tp-button-background-color, #adafb8);--btn-bg-a: var(--tp-button-background-color-active, #d6d7db);--btn-bg-f: var(--tp-button-background-color-focus, #c8cad0);--btn-bg-h: var(--tp-button-background-color-hover, #bbbcc4);--btn-fg: var(--tp-button-foreground-color, #28292e);--cnt-bg: var(--tp-container-background-color, rgba(187, 188, 196, 0.1));--cnt-bg-a: var(--tp-container-background-color-active, rgba(187, 188, 196, 0.25));--cnt-bg-f: var(--tp-container-background-color-focus, rgba(187, 188, 196, 0.2));--cnt-bg-h: var(--tp-container-background-color-hover, rgba(187, 188, 196, 0.15));--cnt-fg: var(--tp-container-foreground-color, #bbbcc4);--in-bg: var(--tp-input-background-color, rgba(187, 188, 196, 0.1));--in-bg-a: var(--tp-input-background-color-active, rgba(187, 188, 196, 0.25));--in-bg-f: var(--tp-input-background-color-focus, rgba(187, 188, 196, 0.2));--in-bg-h: var(--tp-input-background-color-hover, rgba(187, 188, 196, 0.15));--in-fg: var(--tp-input-foreground-color, #bbbcc4);--lbl-fg: var(--tp-label-foreground-color, rgba(187, 188, 196, 0.7));--mo-bg: var(--tp-monitor-background-color, rgba(0, 0, 0, 0.2));--mo-fg: var(--tp-monitor-foreground-color, rgba(187, 188, 196, 0.7));--grv-fg: var(--tp-groove-foreground-color, rgba(187, 188, 196, 0.1))}.tp-rotv_c>.tp-cntv.tp-v-lst,.tp-tabv_c .tp-brkv>.tp-cntv.tp-v-lst,.tp-fldv_c>.tp-cntv.tp-v-lst{margin-bottom:calc(-1*var(--cnt-v-p))}.tp-rotv_c>.tp-fldv.tp-v-lst .tp-fldv_c,.tp-tabv_c .tp-brkv>.tp-fldv.tp-v-lst .tp-fldv_c,.tp-fldv_c>.tp-fldv.tp-v-lst .tp-fldv_c{border-bottom-left-radius:0}.tp-rotv_c>.tp-fldv.tp-v-lst .tp-fldv_b,.tp-tabv_c .tp-brkv>.tp-fldv.tp-v-lst .tp-fldv_b,.tp-fldv_c>.tp-fldv.tp-v-lst .tp-fldv_b{border-bottom-left-radius:0}.tp-rotv_c>*:not(.tp-v-fst),.tp-tabv_c .tp-brkv>*:not(.tp-v-fst),.tp-fldv_c>*:not(.tp-v-fst){margin-top:var(--bld-s)}.tp-rotv_c>.tp-sprv:not(.tp-v-fst),.tp-tabv_c .tp-brkv>.tp-sprv:not(.tp-v-fst),.tp-fldv_c>.tp-sprv:not(.tp-v-fst),.tp-rotv_c>.tp-cntv:not(.tp-v-fst),.tp-tabv_c .tp-brkv>.tp-cntv:not(.tp-v-fst),.tp-fldv_c>.tp-cntv:not(.tp-v-fst){margin-top:var(--cnt-v-p)}.tp-rotv_c>.tp-sprv+*:not(.tp-v-hidden),.tp-tabv_c .tp-brkv>.tp-sprv+*:not(.tp-v-hidden),.tp-fldv_c>.tp-sprv+*:not(.tp-v-hidden),.tp-rotv_c>.tp-cntv+*:not(.tp-v-hidden),.tp-tabv_c .tp-brkv>.tp-cntv+*:not(.tp-v-hidden),.tp-fldv_c>.tp-cntv+*:not(.tp-v-hidden){margin-top:var(--cnt-v-p)}.tp-rotv_c>.tp-sprv:not(.tp-v-hidden)+.tp-sprv,.tp-tabv_c .tp-brkv>.tp-sprv:not(.tp-v-hidden)+.tp-sprv,.tp-fldv_c>.tp-sprv:not(.tp-v-hidden)+.tp-sprv,.tp-rotv_c>.tp-cntv:not(.tp-v-hidden)+.tp-cntv,.tp-tabv_c .tp-brkv>.tp-cntv:not(.tp-v-hidden)+.tp-cntv,.tp-fldv_c>.tp-cntv:not(.tp-v-hidden)+.tp-cntv{margin-top:0}.tp-tabv_c .tp-brkv>.tp-cntv,.tp-fldv_c>.tp-cntv{margin-left:4px}.tp-tabv_c .tp-brkv>.tp-fldv>.tp-fldv_b,.tp-fldv_c>.tp-fldv>.tp-fldv_b{border-top-left-radius:var(--elm-br);border-bottom-left-radius:var(--elm-br)}.tp-tabv_c .tp-brkv>.tp-fldv.tp-fldv-expanded>.tp-fldv_b,.tp-fldv_c>.tp-fldv.tp-fldv-expanded>.tp-fldv_b{border-bottom-left-radius:0}.tp-tabv_c .tp-brkv .tp-fldv>.tp-fldv_c,.tp-fldv_c .tp-fldv>.tp-fldv_c{border-bottom-left-radius:var(--elm-br)}.tp-tabv_c .tp-brkv>.tp-tabv>.tp-tabv_i,.tp-fldv_c>.tp-tabv>.tp-tabv_i{border-top-left-radius:var(--elm-br)}.tp-tabv_c .tp-brkv .tp-tabv>.tp-tabv_c,.tp-fldv_c .tp-tabv>.tp-tabv_c{border-bottom-left-radius:var(--elm-br)}.tp-rotv_b,.tp-fldv_b{background-color:var(--cnt-bg);color:var(--cnt-fg);cursor:pointer;display:block;height:calc(var(--bld-us) + 4px);line-height:calc(var(--bld-us) + 4px);overflow:hidden;padding-left:var(--cnt-h-p);padding-right:calc(4px + var(--bld-us) + var(--cnt-h-p));position:relative;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%;transition:border-radius .2s ease-in-out .2s}.tp-rotv_b:hover,.tp-fldv_b:hover{background-color:var(--cnt-bg-h)}.tp-rotv_b:focus,.tp-fldv_b:focus{background-color:var(--cnt-bg-f)}.tp-rotv_b:active,.tp-fldv_b:active{background-color:var(--cnt-bg-a)}.tp-rotv_b:disabled,.tp-fldv_b:disabled{opacity:.5}.tp-rotv_m,.tp-fldv_m{background:linear-gradient(to left, var(--cnt-fg), var(--cnt-fg) 2px, transparent 2px, transparent 4px, var(--cnt-fg) 4px);border-radius:2px;bottom:0;content:"";display:block;height:6px;right:calc(var(--cnt-h-p) + (var(--bld-us) + 4px - 6px)/2 - 2px);margin:auto;opacity:.5;position:absolute;top:0;transform:rotate(90deg);transition:transform .2s ease-in-out;width:6px}.tp-rotv.tp-rotv-expanded .tp-rotv_m,.tp-fldv.tp-fldv-expanded>.tp-fldv_b>.tp-fldv_m{transform:none}.tp-rotv_c,.tp-fldv_c{box-sizing:border-box;height:0;opacity:0;overflow:hidden;padding-bottom:0;padding-top:0;position:relative;transition:height .2s ease-in-out,opacity .2s linear,padding .2s ease-in-out}.tp-rotv.tp-rotv-cpl:not(.tp-rotv-expanded) .tp-rotv_c,.tp-fldv.tp-fldv-cpl:not(.tp-fldv-expanded)>.tp-fldv_c{display:none}.tp-rotv.tp-rotv-expanded .tp-rotv_c,.tp-fldv.tp-fldv-expanded>.tp-fldv_c{opacity:1;padding-bottom:var(--cnt-v-p);padding-top:var(--cnt-v-p);transform:none;overflow:visible;transition:height .2s ease-in-out,opacity .2s linear .2s,padding .2s ease-in-out}.tp-lstv,.tp-coltxtv_m{position:relative}.tp-lstv_s{padding:0 20px 0 4px;width:100%}.tp-lstv_m,.tp-coltxtv_mm{bottom:0;margin:auto;pointer-events:none;position:absolute;right:2px;top:0}.tp-lstv_m svg,.tp-coltxtv_mm svg{bottom:0;height:16px;margin:auto;position:absolute;right:0;top:0;width:16px}.tp-lstv_m svg path,.tp-coltxtv_mm svg path{fill:currentColor}.tp-pndtxtv,.tp-coltxtv_w{display:flex}.tp-pndtxtv_a,.tp-coltxtv_c{width:100%}.tp-pndtxtv_a+.tp-pndtxtv_a,.tp-coltxtv_c+.tp-pndtxtv_a,.tp-pndtxtv_a+.tp-coltxtv_c,.tp-coltxtv_c+.tp-coltxtv_c{margin-left:2px}.tp-btnv_b{width:100%}.tp-btnv_t{text-align:center}.tp-ckbv_l{display:block;position:relative}.tp-ckbv_i{left:0;opacity:0;position:absolute;top:0}.tp-ckbv_w{background-color:var(--in-bg);border-radius:var(--elm-br);cursor:pointer;display:block;height:var(--bld-us);position:relative;width:var(--bld-us)}.tp-ckbv_w svg{bottom:0;display:block;height:16px;left:0;margin:auto;opacity:0;position:absolute;right:0;top:0;width:16px}.tp-ckbv_w svg path{fill:none;stroke:var(--in-fg);stroke-width:2}.tp-ckbv_i:hover+.tp-ckbv_w{background-color:var(--in-bg-h)}.tp-ckbv_i:focus+.tp-ckbv_w{background-color:var(--in-bg-f)}.tp-ckbv_i:active+.tp-ckbv_w{background-color:var(--in-bg-a)}.tp-ckbv_i:checked+.tp-ckbv_w svg{opacity:1}.tp-ckbv.tp-v-disabled .tp-ckbv_w{opacity:.5}.tp-colv{position:relative}.tp-colv_h{display:flex}.tp-colv_s{flex-grow:0;flex-shrink:0;width:var(--bld-us)}.tp-colv_t{flex:1;margin-left:4px}.tp-colv_p{height:0;margin-top:0;opacity:0;overflow:hidden;transition:height .2s ease-in-out,opacity .2s linear,margin .2s ease-in-out}.tp-colv.tp-colv-cpl .tp-colv_p{overflow:visible}.tp-colv.tp-colv-expanded .tp-colv_p{margin-top:var(--bld-s);opacity:1}.tp-colv .tp-popv{left:calc(-1*var(--cnt-h-p));right:calc(-1*var(--cnt-h-p));top:var(--bld-us)}.tp-colpv_h,.tp-colpv_ap{margin-left:6px;margin-right:6px}.tp-colpv_h{margin-top:var(--bld-s)}.tp-colpv_rgb{display:flex;margin-top:var(--bld-s);width:100%}.tp-colpv_a{display:flex;margin-top:var(--cnt-v-p);padding-top:calc(var(--cnt-v-p) + 2px);position:relative}.tp-colpv_a:before{background-color:var(--grv-fg);content:"";height:2px;left:calc(-1*var(--cnt-h-p));position:absolute;right:calc(-1*var(--cnt-h-p));top:0}.tp-colpv_ap{align-items:center;display:flex;flex:3}.tp-colpv_at{flex:1;margin-left:4px}.tp-svpv{border-radius:var(--elm-br);outline:none;overflow:hidden;position:relative}.tp-svpv_c{cursor:crosshair;display:block;height:calc(var(--bld-us)*4);width:100%}.tp-svpv_m{border-radius:100%;border:rgba(255,255,255,.75) solid 2px;box-sizing:border-box;filter:drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));height:12px;margin-left:-6px;margin-top:-6px;pointer-events:none;position:absolute;width:12px}.tp-svpv:focus .tp-svpv_m{border-color:#fff}.tp-hplv{cursor:pointer;height:var(--bld-us);outline:none;position:relative}.tp-hplv_c{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAABCAYAAABubagXAAAAQ0lEQVQoU2P8z8Dwn0GCgQEDi2OK/RBgYHjBgIpfovFh8j8YBIgzFGQxuqEgPhaDOT5gOhPkdCxOZeBg+IDFZZiGAgCaSSMYtcRHLgAAAABJRU5ErkJggg==);background-position:left top;background-repeat:no-repeat;background-size:100% 100%;border-radius:2px;display:block;height:4px;left:0;margin-top:-2px;position:absolute;top:50%;width:100%}.tp-hplv_m{border-radius:var(--elm-br);border:rgba(255,255,255,.75) solid 2px;box-shadow:0 0 2px rgba(0,0,0,.1);box-sizing:border-box;height:12px;left:50%;margin-left:-6px;margin-top:-6px;pointer-events:none;position:absolute;top:50%;width:12px}.tp-hplv:focus .tp-hplv_m{border-color:#fff}.tp-aplv{cursor:pointer;height:var(--bld-us);outline:none;position:relative;width:100%}.tp-aplv_b{background-color:#fff;background-image:linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);background-size:4px 4px;background-position:0 0,2px 2px;border-radius:2px;display:block;height:4px;left:0;margin-top:-2px;overflow:hidden;position:absolute;top:50%;width:100%}.tp-aplv_c{bottom:0;left:0;position:absolute;right:0;top:0}.tp-aplv_m{background-color:#fff;background-image:linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);background-size:12px 12px;background-position:0 0,6px 6px;border-radius:var(--elm-br);box-shadow:0 0 2px rgba(0,0,0,.1);height:12px;left:50%;margin-left:-6px;margin-top:-6px;overflow:hidden;pointer-events:none;position:absolute;top:50%;width:12px}.tp-aplv_p{border-radius:var(--elm-br);border:rgba(255,255,255,.75) solid 2px;box-sizing:border-box;bottom:0;left:0;position:absolute;right:0;top:0}.tp-aplv:focus .tp-aplv_p{border-color:#fff}.tp-colswv{background-color:#fff;background-image:linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%),linear-gradient(to top right, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%);background-size:10px 10px;background-position:0 0,5px 5px;border-radius:var(--elm-br);overflow:hidden}.tp-colswv.tp-v-disabled{opacity:.5}.tp-colswv_sw{border-radius:0}.tp-colswv_b{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border-width:0;cursor:pointer;display:block;height:var(--bld-us);left:0;margin:0;outline:none;padding:0;position:absolute;top:0;width:var(--bld-us)}.tp-colswv_b:focus::after{border:rgba(255,255,255,.75) solid 2px;border-radius:var(--elm-br);bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}.tp-coltxtv{display:flex;width:100%}.tp-coltxtv_m{margin-right:4px}.tp-coltxtv_ms{border-radius:var(--elm-br);color:var(--lbl-fg);cursor:pointer;height:var(--bld-us);line-height:var(--bld-us);padding:0 18px 0 4px}.tp-coltxtv_ms:hover{background-color:var(--in-bg-h)}.tp-coltxtv_ms:focus{background-color:var(--in-bg-f)}.tp-coltxtv_ms:active{background-color:var(--in-bg-a)}.tp-coltxtv_mm{color:var(--lbl-fg)}.tp-coltxtv_w{flex:1}.tp-dfwv{position:absolute;top:8px;right:8px;width:256px}.tp-fldv.tp-fldv-not .tp-fldv_b{display:none}.tp-fldv_t{padding-left:4px}.tp-fldv_c{border-left:var(--cnt-bg) solid 4px}.tp-fldv_b:hover+.tp-fldv_c{border-left-color:var(--cnt-bg-h)}.tp-fldv_b:focus+.tp-fldv_c{border-left-color:var(--cnt-bg-f)}.tp-fldv_b:active+.tp-fldv_c{border-left-color:var(--cnt-bg-a)}.tp-grlv{position:relative}.tp-grlv_g{display:block;height:calc(var(--bld-us)*3)}.tp-grlv_g polyline{fill:none;stroke:var(--mo-fg);stroke-linejoin:round}.tp-grlv_t{margin-top:-4px;transition:left .05s,top .05s;visibility:hidden}.tp-grlv_t.tp-grlv_t-a{visibility:visible}.tp-grlv_t.tp-grlv_t-in{transition:none}.tp-grlv.tp-v-disabled .tp-grlv_g{opacity:.5}.tp-grlv .tp-ttv{background-color:var(--mo-fg)}.tp-grlv .tp-ttv::before{border-top-color:var(--mo-fg)}.tp-lblv{align-items:center;display:flex;line-height:1.3;padding-left:var(--cnt-h-p);padding-right:var(--cnt-h-p)}.tp-lblv.tp-lblv-nol{display:block}.tp-lblv_l{color:var(--lbl-fg);flex:1;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;padding-left:4px;padding-right:16px}.tp-lblv.tp-v-disabled .tp-lblv_l{opacity:.5}.tp-lblv.tp-lblv-nol .tp-lblv_l{display:none}.tp-lblv_v{align-self:flex-start;flex-grow:0;flex-shrink:0;width:160px}.tp-lblv.tp-lblv-nol .tp-lblv_v{width:100%}.tp-lstv_s{padding:0 20px 0 4px;width:100%}.tp-lstv_m{color:var(--btn-fg)}.tp-sglv_i{padding:0 4px}.tp-sglv.tp-v-disabled .tp-sglv_i{opacity:.5}.tp-mllv_i{display:block;height:calc(var(--bld-us)*3);line-height:var(--bld-us);padding:0 4px;resize:none;white-space:pre}.tp-mllv.tp-v-disabled .tp-mllv_i{opacity:.5}.tp-p2dv{position:relative}.tp-p2dv_h{display:flex}.tp-p2dv_b{height:var(--bld-us);margin-right:4px;position:relative;width:var(--bld-us)}.tp-p2dv_b svg{display:block;height:16px;left:50%;margin-left:-8px;margin-top:-8px;position:absolute;top:50%;width:16px}.tp-p2dv_b svg path{stroke:currentColor;stroke-width:2}.tp-p2dv_b svg circle{fill:currentColor}.tp-p2dv_t{flex:1}.tp-p2dv_p{height:0;margin-top:0;opacity:0;overflow:hidden;transition:height .2s ease-in-out,opacity .2s linear,margin .2s ease-in-out}.tp-p2dv.tp-p2dv-expanded .tp-p2dv_p{margin-top:var(--bld-s);opacity:1}.tp-p2dv .tp-popv{left:calc(-1*var(--cnt-h-p));right:calc(-1*var(--cnt-h-p));top:var(--bld-us)}.tp-p2dpv{padding-left:calc(var(--bld-us) + 4px)}.tp-p2dpv_p{cursor:crosshair;height:0;overflow:hidden;padding-bottom:100%;position:relative}.tp-p2dpv_g{display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.tp-p2dpv_ax{opacity:.1;stroke:var(--in-fg);stroke-dasharray:1}.tp-p2dpv_l{opacity:.5;stroke:var(--in-fg);stroke-dasharray:1}.tp-p2dpv_m{border:var(--in-fg) solid 1px;border-radius:50%;box-sizing:border-box;height:4px;margin-left:-2px;margin-top:-2px;position:absolute;width:4px}.tp-p2dpv_p:focus .tp-p2dpv_m{background-color:var(--in-fg);border-width:0}.tp-popv{background-color:var(--bs-bg);border-radius:6px;box-shadow:0 2px 4px var(--bs-sh);display:none;max-width:168px;padding:var(--cnt-v-p) var(--cnt-h-p);position:absolute;visibility:hidden;z-index:1000}.tp-popv.tp-popv-v{display:block;visibility:visible}.tp-sprv_r{background-color:var(--grv-fg);border-width:0;display:block;height:2px;margin:0;width:100%}.tp-sldv.tp-v-disabled{opacity:.5}.tp-sldv_t{box-sizing:border-box;cursor:pointer;height:var(--bld-us);margin:0 6px;outline:none;position:relative}.tp-sldv_t::before{background-color:var(--in-bg);border-radius:1px;bottom:0;content:"";display:block;height:2px;left:0;margin:auto;position:absolute;right:0;top:0}.tp-sldv_k{height:100%;left:0;position:absolute;top:0}.tp-sldv_k::before{background-color:var(--in-fg);border-radius:1px;bottom:0;content:"";display:block;height:2px;left:0;margin-bottom:auto;margin-top:auto;position:absolute;right:0;top:0}.tp-sldv_k::after{background-color:var(--btn-bg);border-radius:var(--elm-br);bottom:0;content:"";display:block;height:12px;margin-bottom:auto;margin-top:auto;position:absolute;right:-6px;top:0;width:12px}.tp-sldv_t:hover .tp-sldv_k::after{background-color:var(--btn-bg-h)}.tp-sldv_t:focus .tp-sldv_k::after{background-color:var(--btn-bg-f)}.tp-sldv_t:active .tp-sldv_k::after{background-color:var(--btn-bg-a)}.tp-sldtxtv{display:flex}.tp-sldtxtv_s{flex:2}.tp-sldtxtv_t{flex:1;margin-left:4px}.tp-tabv.tp-v-disabled{opacity:.5}.tp-tabv_i{align-items:flex-end;display:flex;overflow:hidden}.tp-tabv.tp-tabv-nop .tp-tabv_i{height:calc(var(--bld-us) + 4px);position:relative}.tp-tabv.tp-tabv-nop .tp-tabv_i::before{background-color:var(--cnt-bg);bottom:0;content:"";height:2px;left:0;position:absolute;right:0}.tp-tabv_c{border-left:var(--cnt-bg) solid 4px;padding-bottom:var(--cnt-v-p);padding-top:var(--cnt-v-p)}.tp-tbiv{flex:1;min-width:0;position:relative}.tp-tbiv+.tp-tbiv{margin-left:2px}.tp-tbiv+.tp-tbiv::before{background-color:var(--cnt-bg);bottom:0;content:"";height:2px;left:-2px;position:absolute;width:2px}.tp-tbiv_b{background-color:var(--cnt-bg);display:block;padding-left:calc(var(--cnt-h-p) + 4px);padding-right:calc(var(--cnt-h-p) + 4px);width:100%}.tp-tbiv_b:hover{background-color:var(--cnt-bg-h)}.tp-tbiv_b:focus{background-color:var(--cnt-bg-f)}.tp-tbiv_b:active{background-color:var(--cnt-bg-a)}.tp-tbiv_b:disabled{opacity:.5}.tp-tbiv_t{color:var(--cnt-fg);height:calc(var(--bld-us) + 4px);line-height:calc(var(--bld-us) + 4px);opacity:.5;overflow:hidden;text-overflow:ellipsis}.tp-tbiv.tp-tbiv-sel .tp-tbiv_t{opacity:1}.tp-txtv{position:relative}.tp-txtv_i{padding:0 4px}.tp-txtv.tp-txtv-fst .tp-txtv_i{border-bottom-right-radius:0;border-top-right-radius:0}.tp-txtv.tp-txtv-mid .tp-txtv_i{border-radius:0}.tp-txtv.tp-txtv-lst .tp-txtv_i{border-bottom-left-radius:0;border-top-left-radius:0}.tp-txtv.tp-txtv-num .tp-txtv_i{text-align:right}.tp-txtv.tp-txtv-drg .tp-txtv_i{opacity:.3}.tp-txtv_k{cursor:pointer;height:100%;left:-3px;position:absolute;top:0;width:12px}.tp-txtv_k::before{background-color:var(--in-fg);border-radius:1px;bottom:0;content:"";height:calc(var(--bld-us) - 4px);left:50%;margin-bottom:auto;margin-left:-1px;margin-top:auto;opacity:.1;position:absolute;top:0;transition:border-radius .1s,height .1s,transform .1s,width .1s;width:2px}.tp-txtv_k:hover::before,.tp-txtv.tp-txtv-drg .tp-txtv_k::before{opacity:1}.tp-txtv.tp-txtv-drg .tp-txtv_k::before{border-radius:50%;height:4px;transform:translateX(-1px);width:4px}.tp-txtv_g{bottom:0;display:block;height:8px;left:50%;margin:auto;overflow:visible;pointer-events:none;position:absolute;top:0;visibility:hidden;width:100%}.tp-txtv.tp-txtv-drg .tp-txtv_g{visibility:visible}.tp-txtv_gb{fill:none;stroke:var(--in-fg);stroke-dasharray:1}.tp-txtv_gh{fill:none;stroke:var(--in-fg)}.tp-txtv .tp-ttv{margin-left:6px;visibility:hidden}.tp-txtv.tp-txtv-drg .tp-ttv{visibility:visible}.tp-ttv{background-color:var(--in-fg);border-radius:var(--elm-br);color:var(--bs-bg);padding:2px 4px;pointer-events:none;position:absolute;transform:translate(-50%, -100%)}.tp-ttv::before{border-color:var(--in-fg) transparent transparent transparent;border-style:solid;border-width:2px;box-sizing:border-box;content:"";font-size:.9em;height:4px;left:50%;margin-left:-2px;position:absolute;top:100%;width:4px}.tp-rotv{background-color:var(--bs-bg);border-radius:var(--bs-br);box-shadow:0 2px 4px var(--bs-sh);font-family:var(--font-family);font-size:11px;font-weight:500;line-height:1;text-align:left}.tp-rotv_b{border-bottom-left-radius:var(--bs-br);border-bottom-right-radius:var(--bs-br);border-top-left-radius:var(--bs-br);border-top-right-radius:var(--bs-br);padding-left:calc(4px + var(--bld-us) + var(--cnt-h-p));text-align:center}.tp-rotv.tp-rotv-expanded .tp-rotv_b{border-bottom-left-radius:0;border-bottom-right-radius:0}.tp-rotv.tp-rotv-not .tp-rotv_b{display:none}.tp-rotv_c>.tp-fldv.tp-v-lst>.tp-fldv_c,.tp-rotv_c>.tp-tabv.tp-v-lst>.tp-tabv_c{border-bottom-left-radius:var(--bs-br);border-bottom-right-radius:var(--bs-br)}.tp-rotv_c>.tp-fldv.tp-v-lst:not(.tp-fldv-expanded)>.tp-fldv_b{border-bottom-left-radius:var(--bs-br);border-bottom-right-radius:var(--bs-br)}.tp-rotv_c .tp-fldv.tp-v-vlst:not(.tp-fldv-expanded)>.tp-fldv_b{border-bottom-right-radius:var(--bs-br)}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-fldv.tp-v-fst{margin-top:calc(-1*var(--cnt-v-p))}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-fldv.tp-v-fst>.tp-fldv_b{border-top-left-radius:var(--bs-br);border-top-right-radius:var(--bs-br)}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-tabv.tp-v-fst{margin-top:calc(-1*var(--cnt-v-p))}.tp-rotv.tp-rotv-not .tp-rotv_c>.tp-tabv.tp-v-fst>.tp-tabv_i{border-top-left-radius:var(--bs-br);border-top-right-radius:var(--bs-br)}.tp-rotv.tp-v-disabled,.tp-rotv .tp-v-disabled{pointer-events:none}.tp-rotv.tp-v-hidden,.tp-rotv .tp-v-hidden{display:none}'),this.pool_.getAll().forEach((t=>{this.embedPluginStyle_(t)})),this.registerPlugin({plugins:[Ys,zs,Tt,Xs]})}},t.SeparatorApi=Ct,t.SliderApi=Hs,t.TabApi=Ot,t.TabPageApi=Nt,t.TextApi=$s,t.TpChangeEvent=i,t.VERSION=Js,Object.defineProperty(t,"__esModule",{value:!0})})); diff --git a/node_modules/tweakpane/dist/types/blade/list/api/list.d.ts b/node_modules/tweakpane/dist/types/blade/list/api/list.d.ts deleted file mode 100644 index ac7d365f..00000000 --- a/node_modules/tweakpane/dist/types/blade/list/api/list.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ApiChangeEvents, BladeApi, LabelController, ListController, ListItem } from '@tweakpane/core'; -export declare class ListApi extends BladeApi>> { - private readonly emitter_; - constructor(controller: LabelController>); - get label(): string | undefined; - set label(label: string | undefined); - get options(): ListItem[]; - set options(options: ListItem[]); - get value(): T; - set value(value: T); - on>(eventName: EventName, handler: (ev: ApiChangeEvents[EventName]['event']) => void): this; -} diff --git a/node_modules/tweakpane/dist/types/blade/list/plugin.d.ts b/node_modules/tweakpane/dist/types/blade/list/plugin.d.ts deleted file mode 100644 index 3ac38705..00000000 --- a/node_modules/tweakpane/dist/types/blade/list/plugin.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { BaseBladeParams, BladePlugin, ListParamsOptions } from '@tweakpane/core'; -export interface ListBladeParams extends BaseBladeParams { - options: ListParamsOptions; - value: T; - view: 'list'; - label?: string; -} -export declare const ListBladePlugin: BladePlugin>; diff --git a/node_modules/tweakpane/dist/types/blade/root/api/preset.d.ts b/node_modules/tweakpane/dist/types/blade/root/api/preset.d.ts deleted file mode 100644 index f95428a3..00000000 --- a/node_modules/tweakpane/dist/types/blade/root/api/preset.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { BindingTarget } from '@tweakpane/core'; -export interface PresetObject { - [key: string]: unknown; -} -/** - * @hidden - */ -export declare function exportPresetJson(targets: BindingTarget[]): PresetObject; -/** - * @hidden - */ -export declare function importPresetJson(targets: BindingTarget[], preset: PresetObject): void; diff --git a/node_modules/tweakpane/dist/types/blade/root/api/root.d.ts b/node_modules/tweakpane/dist/types/blade/root/api/root.d.ts deleted file mode 100644 index 6eae4ac1..00000000 --- a/node_modules/tweakpane/dist/types/blade/root/api/root.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { FolderApi, PluginPool } from '@tweakpane/core'; -import { RootController } from '../controller/root'; -import { PresetObject } from './preset'; -export declare class RootApi extends FolderApi { - /** - * @hidden - */ - constructor(controller: RootController, pool: PluginPool); - get element(): HTMLElement; - /** - * Imports a preset of all inputs. - * @param preset The preset object to import. - */ - importPreset(preset: PresetObject): void; - /** - * Exports a preset of all inputs. - * @return An exported preset object. - */ - exportPreset(): PresetObject; - /** - * Refreshes all bindings of the pane. - */ - refresh(): void; -} diff --git a/node_modules/tweakpane/dist/types/blade/root/controller/root.d.ts b/node_modules/tweakpane/dist/types/blade/root/controller/root.d.ts deleted file mode 100644 index 088c7653..00000000 --- a/node_modules/tweakpane/dist/types/blade/root/controller/root.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Blade, FolderController, FolderProps, ViewProps } from '@tweakpane/core'; -interface Config { - blade: Blade; - props: FolderProps; - viewProps: ViewProps; - expanded?: boolean; - title?: string; -} -export declare class RootController extends FolderController { - constructor(doc: Document, config: Config); -} -export {}; diff --git a/node_modules/tweakpane/dist/types/blade/slider/api/slider.d.ts b/node_modules/tweakpane/dist/types/blade/slider/api/slider.d.ts deleted file mode 100644 index 702dd1b0..00000000 --- a/node_modules/tweakpane/dist/types/blade/slider/api/slider.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { ApiChangeEvents, BladeApi, LabelController, SliderTextController } from '@tweakpane/core'; -export declare class SliderApi extends BladeApi> { - private readonly emitter_; - constructor(controller: LabelController); - get label(): string | undefined; - set label(label: string | undefined); - get maxValue(): number; - set maxValue(maxValue: number); - get minValue(): number; - set minValue(minValue: number); - get value(): number; - set value(value: number); - on>(eventName: EventName, handler: (ev: ApiChangeEvents[EventName]['event']) => void): this; -} diff --git a/node_modules/tweakpane/dist/types/blade/slider/plugin.d.ts b/node_modules/tweakpane/dist/types/blade/slider/plugin.d.ts deleted file mode 100644 index f1cdfceb..00000000 --- a/node_modules/tweakpane/dist/types/blade/slider/plugin.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { BaseBladeParams, BladePlugin, Formatter } from '@tweakpane/core'; -export interface SliderBladeParams extends BaseBladeParams { - max: number; - min: number; - view: 'slider'; - format?: Formatter; - label?: string; - value?: number; -} -export declare const SliderBladePlugin: BladePlugin; diff --git a/node_modules/tweakpane/dist/types/blade/text/api/text.d.ts b/node_modules/tweakpane/dist/types/blade/text/api/text.d.ts deleted file mode 100644 index d614867c..00000000 --- a/node_modules/tweakpane/dist/types/blade/text/api/text.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { ApiChangeEvents, BladeApi, Formatter, LabelController, TextController } from '@tweakpane/core'; -export declare class TextApi extends BladeApi>> { - private readonly emitter_; - constructor(controller: LabelController>); - get label(): string | undefined; - set label(label: string | undefined); - get formatter(): Formatter; - set formatter(formatter: Formatter); - get value(): T; - set value(value: T); - on>(eventName: EventName, handler: (ev: ApiChangeEvents[EventName]['event']) => void): this; -} diff --git a/node_modules/tweakpane/dist/types/blade/text/plugin.d.ts b/node_modules/tweakpane/dist/types/blade/text/plugin.d.ts deleted file mode 100644 index e4b8b5be..00000000 --- a/node_modules/tweakpane/dist/types/blade/text/plugin.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { BaseBladeParams, BladePlugin, Formatter, Parser } from '@tweakpane/core'; -export interface TextBladeParams extends BaseBladeParams { - parse: Parser; - value: T; - view: 'text'; - format?: Formatter; - label?: string; -} -export declare const TextBladePlugin: BladePlugin>; diff --git a/node_modules/tweakpane/dist/types/index.d.ts b/node_modules/tweakpane/dist/types/index.d.ts deleted file mode 100644 index 3f7f426e..00000000 --- a/node_modules/tweakpane/dist/types/index.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Semver } from './misc/semver'; -export { ArrayStyleListOptions, BaseParams, BaseBladeParams, BladeApi, BooleanInputParams, BooleanMonitorParams, ButtonApi, ButtonParams, ColorInputParams, FolderApi, FolderParams, InputBindingApi, InputBindingApiEvents, InputParams, ListParamsOptions, MonitorBindingApi, MonitorBindingApiEvents, MonitorParams, NumberInputParams, NumberMonitorParams, ObjectStyleListOptions, Point2dInputParams, Point3dInputParams, Point4dInputParams, SeparatorApi, SeparatorParams, StringInputParams, StringMonitorParams, TabApi, TabPageApi, TabPageParams, TabParams, TpChangeEvent, TpPlugin, TpPluginBundle, } from '@tweakpane/core'; -export { ListApi } from './blade/list/api/list'; -export { ListBladeParams } from './blade/list/plugin'; -export { SliderApi } from './blade/slider/api/slider'; -export { SliderBladeParams } from './blade/slider/plugin'; -export { TextApi } from './blade/text/api/text'; -export { TextBladeParams } from './blade/text/plugin'; -export { Pane } from './pane/pane'; -export declare const VERSION: Semver; diff --git a/node_modules/tweakpane/dist/types/misc/semver.d.ts b/node_modules/tweakpane/dist/types/misc/semver.d.ts deleted file mode 100644 index 42db7179..00000000 --- a/node_modules/tweakpane/dist/types/misc/semver.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -/*** - * A simple semantic versioning perser. - */ -export declare class Semver { - readonly major: number; - readonly minor: number; - readonly patch: number; - readonly prerelease: string | null; - /** - * @hidden - */ - constructor(text: string); - toString(): string; -} diff --git a/node_modules/tweakpane/dist/types/misc/test-util.d.ts b/node_modules/tweakpane/dist/types/misc/test-util.d.ts deleted file mode 100644 index 75c7cd40..00000000 --- a/node_modules/tweakpane/dist/types/misc/test-util.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { BladeApi, BladeController, Controller, LabelController, PlainView, View, ViewProps } from '@tweakpane/core'; -export declare function createTestWindow(): Window; -declare class LabelableController implements Controller { - readonly viewProps: ViewProps; - readonly view: PlainView; - constructor(doc: Document); -} -export declare function createEmptyLabelableController(doc: Document): LabelableController; -export declare function createLabelController(doc: Document, vc: LabelableController): LabelController; -export declare function createEmptyBladeController(doc: Document): BladeController; -export declare function assertInitialState(api: BladeApi>): void; -export declare function assertDisposes(api: BladeApi>): void; -export declare function assertUpdates(api: BladeApi>): void; -export {}; diff --git a/node_modules/tweakpane/dist/types/pane/pane-config.d.ts b/node_modules/tweakpane/dist/types/pane/pane-config.d.ts deleted file mode 100644 index bac039a7..00000000 --- a/node_modules/tweakpane/dist/types/pane/pane-config.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -export interface PaneConfig { - /** - * The custom container element of the pane. - */ - container?: HTMLElement; - /** - * The default expansion of the pane. - */ - expanded?: boolean; - /** - * The pane title that can expand/collapse the entire pane. - */ - title?: string; - /** - * @hidden - */ - document?: Document; -} diff --git a/node_modules/tweakpane/dist/types/pane/pane.d.ts b/node_modules/tweakpane/dist/types/pane/pane.d.ts deleted file mode 100644 index 0f39169f..00000000 --- a/node_modules/tweakpane/dist/types/pane/pane.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { TpPluginBundle } from '@tweakpane/core'; -import { RootApi } from '../blade/root/api/root'; -import { PaneConfig } from './pane-config'; -/** - * The root pane of Tweakpane. - */ -export declare class Pane extends RootApi { - private readonly pool_; - private readonly usesDefaultWrapper_; - private doc_; - private containerElem_; - constructor(opt_config?: PaneConfig); - get document(): Document; - dispose(): void; - registerPlugin(bundle: TpPluginBundle): void; - private embedPluginStyle_; - private setUpDefaultPlugins_; -} diff --git a/node_modules/tweakpane/package.json b/node_modules/tweakpane/package.json deleted file mode 100644 index 4e7891ad..00000000 --- a/node_modules/tweakpane/package.json +++ /dev/null @@ -1,110 +0,0 @@ -{ - "name": "tweakpane", - "version": "3.1.0", - "description": "A compact pane for fine-tuning parameters and monitoring value changes", - "author": "cocopon", - "license": "MIT", - "homepage": "https://cocopon.github.io/tweakpane/", - "main": "dist/tweakpane.js", - "types": "dist/types/index.d.ts", - "prettier": "../../prettier.config.js", - "repository": { - "type": "git", - "url": "https://github.com/cocopon/tweakpane.git" - }, - "funding": "https://github.com/sponsors/cocopon", - "files": [ - "dist" - ], - "scripts": { - "prepack": "run-s clean main:prepare", - "prepublishOnly": "npm test", - "start": "npm-run-all main:build:dev doc:build --parallel main:watch doc:watch doc:server", - "test": "run-s doc:test main:test", - "assets": "npm-run-all clean main:build --serial assets:dist assets:version assets:zip", - "assets:dist": "mkdirp dist && cp docs/assets/tweakpane*.js dist", - "assets:version": "node scripts/assets-version.js", - "assets:zip": "zip -x \"*types*\" -j -r tweakpane-$(cat package.json | npx json version).zip dist", - "build": "run-s main:build doc:build", - "clean": "rimraf .nyc_output dist docs test tweakpane-*.tgz tweakpane-*.zip test-module/node_modules", - "coverage": "nyc --reporter=none --extension \".ts\" --exclude \"**/*-test.ts\" npm run main:test:ts:dynamic", - "format": "run-p main:format doc:format", - "doc:build": "run-p doc:build:*", - "doc:build:scss": "mkdirp docs/assets && sass src/doc/sass/bundle.scss | postcss --config postcss.config.js > docs/assets/bundle.css", - "doc:build:html": "node scripts/doc-build-html.js", - "doc:build:img": "mkdirp docs/assets && cp -r src/doc/img/* docs/assets", - "doc:build:ts": "rollup --config rollup-doc.config.js", - "doc:build:refs": "typedoc --options src/doc/typedoc.json", - "doc:format": "run-p doc:format:*", - "doc:format:scss": "prettier --parser scss --write \"src/doc/sass/**/*.scss\"", - "doc:format:ts": "eslint --ext .ts --fix \"src/doc/ts/**/*.ts\"", - "doc:lint": "run-p doc:test:scss doc:test:ts", - "doc:server": "http-server -c-1 ./docs", - "doc:test": "run-p doc:test:*", - "doc:test:scss": "prettier --parser scss --list-different \"src/doc/sass/**/*.scss\"", - "doc:test:ts": "eslint --ext .ts \"src/doc/ts/**/*.ts\"", - "doc:watch": "run-p doc:watch:*", - "doc:watch:scss": "onchange --initial --kill \"src/doc/sass/**/*.scss\" -- npm run doc:build:scss", - "doc:watch:html": "onchange --initial --kill \"src/doc/template/**/*.html\" -- npm run doc:build:html", - "doc:watch:ts": "onchange --initial --kill \"src/doc/ts/**/*.ts\" -- npm run doc:build:ts", - "lint": "run-p doc:lint main:lint", - "main:build": "run-p main:build:*", - "main:build:dts": "tsc --project src/main/tsconfig-dts.json", - "main:build:dev": "rollup --config rollup.config.js", - "main:build:prod": "rollup --config rollup.config.js --environment BUILD:production", - "main:format": "run-p main:format:*", - "main:format:scss": "prettier --parser scss --write \"src/main/sass/**/*.scss\"", - "main:format:ts": "eslint --ext .ts --fix \"src/main/ts/**/*.ts\"", - "main:lint": "run-p main:test:scss main:test:ts:static", - "main:prepare": "run-s main:build assets:dist", - "main:test": "run-s main:test:scss main:test:ts", - "main:test:scss": "prettier --parser scss --list-different \"src/main/sass/**/*.scss\"", - "main:test:ts": "run-s main:test:ts:static main:test:ts:dynamic main:test:ts:module", - "main:test:ts:dynamic": "TS_NODE_PROJECT=\"src/main/tsconfig.json\" mocha --require ts-node/register \"src/main/ts/**/*-test.ts\"", - "main:test:ts:dynamic:inspect": "TS_NODE_PROJECT=\"src/main/tsconfig.json\" mocha --require ts-node/register \"src/main/ts/**/*-test.ts\" --inspect-brk", - "main:test:ts:module": "npm pack && node scripts/main-test-ts-module-pre.js && (cd test-module && rimraf ./node_modules/tweakpane && npm install && npm test)", - "main:test:ts:static": "eslint --ext .ts \"src/main/ts/**/*.ts\"", - "main:watch": "run-p main:watch:*", - "main:watch:ts": "onchange --initial --kill \"src/main/ts/**/*.ts\" \"../core/dist/**/*\" -- npm run main:build:dev", - "main:watch:scss": "onchange --initial --kill \"src/main/sass/**/*.scss\" \"../core/lib/sass/**/*.scss\" -- npm run main:build:dev" - }, - "devDependencies": { - "@rollup/plugin-alias": "^3.1.2", - "@rollup/plugin-node-resolve": "^13.0.0", - "@rollup/plugin-replace": "^2.3.4", - "@rollup/plugin-typescript": "^8.2.0", - "@tweakpane/core": "^1.1.0", - "@types/assert": "^1.5.4", - "@types/jsdom": "^16.2.13", - "@types/mocha": "^8.2.1", - "@types/node": "^10.12.18", - "@typescript-eslint/parser": "^4.16.1", - "assert": "^2.0.0", - "autoprefixer": "^9.1.5", - "canvas": "^2.9.1", - "eslint": "^7.21.0", - "fs-extra": "^7.0.0", - "glob": "^7.1.3", - "http-server": "^0.12.3", - "jsdom": "^16.7.0", - "json": "^11.0.0", - "mkdirp": "^0.5.5", - "mocha": "^8.3.0", - "npm-run-all": "^4.1.5", - "nunjucks": "^3.1.3", - "nyc": "^15.1.0", - "onchange": "^5.0.2", - "postcss": "^8.2.6", - "postcss-cli": "^8.3.1", - "prettier": "^2.4.0", - "rimraf": "^3.0.2", - "rollup": "^2.38.5", - "rollup-plugin-cleanup": "^3.2.1", - "rollup-plugin-terser": "^7.0.2", - "sass": "^1.49.9", - "ts-node": "^7.0.1", - "tslib": "^2.1.0", - "typedoc": "^0.20.36", - "typescript": "^4.1.5" - } -} diff --git a/package-lock.json b/package-lock.json index 64987ba5..cbd8b0c6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,27 +1,374 @@ { - "name": "a4-creative-coding", - "lockfileVersion": 2, + "name": "hello-express", + "version": "0.0.1", + "lockfileVersion": 1, "requires": true, - "packages": { - "": { + "dependencies": { + "express": { + "version": "4.17.1", + "requires": { + "accepts": "~1.3.7", + "array-flatten": "1.1.1", + "body-parser": "1.19.0", + "content-disposition": "0.5.3", + "content-type": "~1.0.4", + "cookie": "0.4.0", + "cookie-signature": "1.0.6", + "debug": "2.6.9", + "depd": "~1.1.2", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "finalhandler": "~1.1.2", + "fresh": "0.5.2", + "merge-descriptors": "1.0.1", + "methods": "~1.1.2", + "on-finished": "~2.3.0", + "parseurl": "~1.3.3", + "path-to-regexp": "0.1.7", + "proxy-addr": "~2.0.5", + "qs": "6.7.0", + "range-parser": "~1.2.1", + "safe-buffer": "5.1.2", + "send": "0.17.1", + "serve-static": "1.14.1", + "setprototypeof": "1.1.1", + "statuses": "~1.5.0", + "type-is": "~1.6.18", + "utils-merge": "1.0.1", + "vary": "~1.1.2" + }, "dependencies": { - "tweakpane": "^3.1.0" - } - }, - "node_modules/tweakpane": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/tweakpane/-/tweakpane-3.1.0.tgz", - "integrity": "sha512-PGAp/LPQdHwzL7/iAW4lV1p9iPQTti7YMjMWO48CoYjvZRS59RmgQnhEGzKzqST1JnmOYmQUjTe8bdhlZRJs5A==", - "funding": { - "url": "https://github.com/sponsors/cocopon" + "accepts": { + "version": "1.3.7", + "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", + "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", + "requires": { + "mime-types": "~2.1.24", + "negotiator": "0.6.2" + } + }, + "array-flatten": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" + }, + "body-parser": { + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz", + "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==", + "requires": { + "bytes": "3.1.0", + "content-type": "~1.0.4", + "debug": "2.6.9", + "depd": "~1.1.2", + "http-errors": "1.7.2", + "iconv-lite": "0.4.24", + "on-finished": "~2.3.0", + "qs": "6.7.0", + "raw-body": "2.4.0", + "type-is": "~1.6.17" + } + }, + "bytes": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", + "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==" + }, + "content-disposition": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz", + "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==", + "requires": { + "safe-buffer": "5.1.2" + } + }, + "content-type": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", + "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" + }, + "cookie": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz", + "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==" + }, + "cookie-signature": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", + "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" + }, + "debug": { + "version": "2.6.9", + "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", + "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "requires": { + "ms": "2.0.0" + } + }, + "depd": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", + "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" + }, + "destroy": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", + "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" + }, + "ee-first": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", + "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" + }, + "encodeurl": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", + "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" + }, + "escape-html": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", + "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" + }, + "etag": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", + "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" + }, + "finalhandler": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", + "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==", + "requires": { + "debug": "2.6.9", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "on-finished": "~2.3.0", + "parseurl": "~1.3.3", + "statuses": "~1.5.0", + "unpipe": "~1.0.0" + } + }, + "forwarded": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", + "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" + }, + "fresh": { + "version": "0.5.2", + "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", + "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" + }, + "http-errors": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", + "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==", + "requires": { + "depd": "~1.1.2", + "inherits": "2.0.3", + "setprototypeof": "1.1.1", + "statuses": ">= 1.5.0 < 2", + "toidentifier": "1.0.0" + } + }, + "iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "requires": { + "safer-buffer": ">= 2.1.2 < 3" + } + }, + "inherits": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" + }, + "ipaddr.js": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", + "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==" + }, + "media-typer": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" + }, + "merge-descriptors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", + "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" + }, + "methods": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", + "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" + }, + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==" + }, + "mime-db": { + "version": "1.44.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz", + "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==" + }, + "mime-types": { + "version": "2.1.27", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz", + "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==", + "requires": { + "mime-db": "1.44.0" + } + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, + "negotiator": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", + "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==" + }, + "on-finished": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", + "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", + "requires": { + "ee-first": "1.1.1" + } + }, + "parseurl": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", + "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==" + }, + "path-to-regexp": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", + "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" + }, + "proxy-addr": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz", + "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==", + "requires": { + "forwarded": "~0.1.2", + "ipaddr.js": "1.9.1" + } + }, + "qs": { + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz", + "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==" + }, + "range-parser": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", + "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==" + }, + "raw-body": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz", + "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==", + "requires": { + "bytes": "3.1.0", + "http-errors": "1.7.2", + "iconv-lite": "0.4.24", + "unpipe": "1.0.0" + } + }, + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, + "send": { + "version": "0.17.1", + "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz", + "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==", + "requires": { + "debug": "2.6.9", + "depd": "~1.1.2", + "destroy": "~1.0.4", + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "0.5.2", + "http-errors": "~1.7.2", + "mime": "1.6.0", + "ms": "2.1.1", + "on-finished": "~2.3.0", + "range-parser": "~1.2.1", + "statuses": "~1.5.0" + }, + "dependencies": { + "ms": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", + "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==" + } + } + }, + "serve-static": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz", + "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==", + "requires": { + "encodeurl": "~1.0.2", + "escape-html": "~1.0.3", + "parseurl": "~1.3.3", + "send": "0.17.1" + } + }, + "setprototypeof": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz", + "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==" + }, + "statuses": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", + "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" + }, + "toidentifier": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", + "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==" + }, + "type-is": { + "version": "1.6.18", + "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", + "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", + "requires": { + "media-typer": "0.3.0", + "mime-types": "~2.1.24" + } + }, + "unpipe": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", + "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" + }, + "utils-merge": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", + "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" + }, + "vary": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", + "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" + } } } - }, - "dependencies": { - "tweakpane": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/tweakpane/-/tweakpane-3.1.0.tgz", - "integrity": "sha512-PGAp/LPQdHwzL7/iAW4lV1p9iPQTti7YMjMWO48CoYjvZRS59RmgQnhEGzKzqST1JnmOYmQUjTe8bdhlZRJs5A==" - } } } diff --git a/package.json b/package.json index 67c48660..bca36eb6 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,27 @@ { + "//1": "describes your app and its dependencies", + "//2": "https://docs.npmjs.com/files/package.json", + "//3": "updating this file will download and update your packages", + "name": "hello-express", + "version": "0.0.1", + "description": "A simple Node app built on Express, instantly up and running.", + "main": "server.js", + "scripts": { + "start": "node server.js" + }, "dependencies": { - "tweakpane": "^3.1.0" - } -} + "express": "^4.18.1" + }, + "engines": { + "node": "12.x" + }, + "repository": { + "url": "https://glitch.com/edit/#!/hello-express" + }, + "license": "MIT", + "keywords": [ + "node", + "glitch", + "express" + ] +} \ No newline at end of file diff --git a/public/script.js b/public/script.js new file mode 100644 index 00000000..18670c42 --- /dev/null +++ b/public/script.js @@ -0,0 +1,157 @@ +// client-side js, loaded by index.html +// run by the browser each time the page is loaded + +console.log("hello world :o"); + +// window.addEventListener("load", () => { +const radius = 40, + y = 50; +let color = 0; +let radius_val = 40; +let backgrnd_color = "#000000"; +let gdp_bool = false; + +const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); +svg.setAttribute("width", 1000); + +document.body.appendChild(svg); + +const pane = new Tweakpane.Pane(); + +const PARAMS = { + key: "#ff0055ff", + RGB: 0, + radius: 50, + GPB: true, +}; + +//color picker for background +pane + .addInput(PARAMS, "key", { + picker: "inline", + expanded: true, + }) + .on("change", (val) => { + backgrnd_color = val.value; + console.log(backgrnd_color); + d3.select("body").style("background-color", backgrnd_color); + }); + +//RGB selector for circles +pane + .addInput(PARAMS, "RGB", { + options: { + Red: 0, + Green: 1, + Blue: 2, + }, + }) + .on("change", (val) => { + color = val.value; + console.log(color); + if (color == 0) { + d3.selectAll("circle").attr( + "fill", + (d) => `rgba( ${Math.floor(d.value)}, 100, 100, .5 )` + ); + } else if (color == 1) { + d3.selectAll("circle").attr( + "fill", + (d) => `rgba( 100, ${Math.floor(d.value)}, 100, .5 )` + ); + } else { + d3.selectAll("circle").attr( + "fill", + (d) => `rgba( 100, 100, ${Math.floor(d.value)}, .5 )` + ); + } + }); + +//Radius for circle +pane + .addInput(PARAMS, "radius", { + step: 10, + min: 10, + max: 100, + }) + .on("change", (val) => { + radius_val = val.value; + d3.selectAll("circle").attr("r", radius_val); + console.log(radius_val); + }); + +fetch("https://api.exchangerate-api.com/v4/latest/GBP") + .then((data) => data.json()) + .then((jsonData) => { + //console.log( d3.select('body').selectAll('div') ) + + const group = d3 + .select("svg") + .selectAll("circle") + .data(d3.entries(jsonData.rates)) + .join("g"); + + pane.addInput(PARAMS, "GPB").on("change", (val) => { + gdp_bool = val.value; + console.log(gdp_bool); + if(gdp_bool == true){ + d3.selectAll("text").text((d) => d.value) + } + else{ + d3.selectAll("text").text((d) => d.key) + } + + }); + + group + .append("circle") + .attr("fill", (d) => `rgba( ${Math.floor(d.value)}, 100, 100, .5 )`) + .attr("cx", (d, i) => i * radius) + .attr("cy", y) + .attr("r", radius); + + group + .append("text") + .text((d) => d.key) + .attr("fill", "white") + .attr("x", (d, i) => i * radius - radius / 2) + .attr("y", y + radius + 25); + }); +// }); + +// // define variables that reference elements on our page +// const dreamsList = document.getElementById("dreams"); +// const dreamsForm = document.querySelector("form"); + +// // a helper function that creates a list item for a given dream +// function appendNewDream(dream) { +// const newListItem = document.createElement("li"); +// newListItem.innerText = dream; +// dreamsList.appendChild(newListItem); +// } + +// // fetch the initial list of dreams +// fetch("/dreams") +// .then(response => response.json()) // parse the JSON from the server +// .then(dreams => { +// // remove the loading text +// dreamsList.firstElementChild.remove(); + +// // iterate through every dream and add it to our page +// dreams.forEach(appendNewDream); + +// // listen for the form to be submitted and add a new dream when it is +// dreamsForm.addEventListener("submit", event => { +// // stop our form submission from refreshing the page +// event.preventDefault(); + +// // get dream value and add it to the list +// let newDream = dreamsForm.elements.dream.value; +// dreams.push(newDream); +// appendNewDream(newDream); + +// // reset form +// dreamsForm.reset(); +// dreamsForm.elements.dream.focus(); +// }); +// }); diff --git a/public/style.css b/public/style.css new file mode 100644 index 00000000..8b5d0222 --- /dev/null +++ b/public/style.css @@ -0,0 +1,14 @@ +body { + margin: 0; + background-color: black; + } + +p{ + color: white; + text-align: center +} + +#par { + height: 150px; + width: 500px; +} \ No newline at end of file diff --git a/server.js b/server.js new file mode 100644 index 00000000..1df72165 --- /dev/null +++ b/server.js @@ -0,0 +1,34 @@ +// server.js +// where your node app starts + +// we've started you off with Express (https://expressjs.com/) +// but feel free to use whatever libraries or frameworks you'd like through `package.json`. +const express = require("express"); +const app = express(); + +// our default array of dreams +const dreams = [ + "Find and count some sheep", + "Climb a really tall mountain", + "Wash the dishes" +]; + +// make all the files in 'public' available +// https://expressjs.com/en/starter/static-files.html +app.use(express.static("public")); + +// https://expressjs.com/en/starter/basic-routing.html +app.get("/", (request, response) => { + response.sendFile(__dirname + "/views/index.html"); +}); + +// send the default array of dreams to the webpage +app.get("/dreams", (request, response) => { + // express helps us take JS objects and send them as JSON + response.json(dreams); +}); + +// listen for requests :) +const listener = app.listen(process.env.PORT, () => { + console.log("Your app is listening on port " + listener.address().port); +}); diff --git a/shrinkwrap.yaml b/shrinkwrap.yaml new file mode 100644 index 00000000..54b314d4 --- /dev/null +++ b/shrinkwrap.yaml @@ -0,0 +1,434 @@ +dependencies: + express: 4.18.1 +packages: + /accepts/1.3.8: + dependencies: + mime-types: 2.1.35 + negotiator: 0.6.3 + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw== + /array-flatten/1.1.1: + dev: false + resolution: + integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg== + /body-parser/1.20.0: + dependencies: + bytes: 3.1.2 + content-type: 1.0.4 + debug: 2.6.9 + depd: 2.0.0 + destroy: 1.2.0 + http-errors: 2.0.0 + iconv-lite: 0.4.24 + on-finished: 2.4.1 + qs: 6.10.3 + raw-body: 2.5.1 + type-is: 1.6.18 + unpipe: 1.0.0 + dev: false + engines: + node: '>= 0.8' + npm: 1.2.8000 || >= 1.4.16 + resolution: + integrity: sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg== + /bytes/3.1.2: + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg== + /call-bind/1.0.2: + dependencies: + function-bind: 1.1.1 + get-intrinsic: 1.1.3 + dev: false + resolution: + integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA== + /content-disposition/0.5.4: + dependencies: + safe-buffer: 5.2.1 + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ== + /content-type/1.0.4: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== + /cookie-signature/1.0.6: + dev: false + resolution: + integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ== + /cookie/0.5.0: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw== + /debug/2.6.9: + dependencies: + ms: 2.0.0 + dev: false + resolution: + integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA== + /depd/2.0.0: + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw== + /destroy/1.2.0: + dev: false + engines: + node: '>= 0.8' + npm: 1.2.8000 || >= 1.4.16 + resolution: + integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg== + /ee-first/1.1.1: + dev: false + resolution: + integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow== + /encodeurl/1.0.2: + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w== + /escape-html/1.0.3: + dev: false + resolution: + integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow== + /etag/1.8.1: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg== + /express/4.18.1: + dependencies: + accepts: 1.3.8 + array-flatten: 1.1.1 + body-parser: 1.20.0 + content-disposition: 0.5.4 + content-type: 1.0.4 + cookie: 0.5.0 + cookie-signature: 1.0.6 + debug: 2.6.9 + depd: 2.0.0 + encodeurl: 1.0.2 + escape-html: 1.0.3 + etag: 1.8.1 + finalhandler: 1.2.0 + fresh: 0.5.2 + http-errors: 2.0.0 + merge-descriptors: 1.0.1 + methods: 1.1.2 + on-finished: 2.4.1 + parseurl: 1.3.3 + path-to-regexp: 0.1.7 + proxy-addr: 2.0.7 + qs: 6.10.3 + range-parser: 1.2.1 + safe-buffer: 5.2.1 + send: 0.18.0 + serve-static: 1.15.0 + setprototypeof: 1.2.0 + statuses: 2.0.1 + type-is: 1.6.18 + utils-merge: 1.0.1 + vary: 1.1.2 + dev: false + engines: + node: '>= 0.10.0' + resolution: + integrity: sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q== + /finalhandler/1.2.0: + dependencies: + debug: 2.6.9 + encodeurl: 1.0.2 + escape-html: 1.0.3 + on-finished: 2.4.1 + parseurl: 1.3.3 + statuses: 2.0.1 + unpipe: 1.0.0 + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg== + /forwarded/0.2.0: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow== + /fresh/0.5.2: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q== + /function-bind/1.1.1: + dev: false + resolution: + integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== + /get-intrinsic/1.1.3: + dependencies: + function-bind: 1.1.1 + has: 1.0.3 + has-symbols: 1.0.3 + dev: false + resolution: + integrity: sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A== + /has-symbols/1.0.3: + dev: false + engines: + node: '>= 0.4' + resolution: + integrity: sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A== + /has/1.0.3: + dependencies: + function-bind: 1.1.1 + dev: false + engines: + node: '>= 0.4.0' + resolution: + integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== + /http-errors/2.0.0: + dependencies: + depd: 2.0.0 + inherits: 2.0.4 + setprototypeof: 1.2.0 + statuses: 2.0.1 + toidentifier: 1.0.1 + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ== + /iconv-lite/0.4.24: + dependencies: + safer-buffer: 2.1.2 + dev: false + engines: + node: '>=0.10.0' + resolution: + integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA== + /inherits/2.0.4: + dev: false + resolution: + integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== + /ipaddr.js/1.9.1: + dev: false + engines: + node: '>= 0.10' + resolution: + integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g== + /media-typer/0.3.0: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ== + /merge-descriptors/1.0.1: + dev: false + resolution: + integrity: sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w== + /methods/1.1.2: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w== + /mime-db/1.52.0: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== + /mime-types/2.1.35: + dependencies: + mime-db: 1.52.0 + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== + /mime/1.6.0: + dev: false + engines: + node: '>=4' + hasBin: true + resolution: + integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg== + /ms/2.0.0: + dev: false + resolution: + integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A== + /ms/2.1.3: + dev: false + resolution: + integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== + /negotiator/0.6.3: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg== + /object-inspect/1.12.2: + dev: false + resolution: + integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ== + /on-finished/2.4.1: + dependencies: + ee-first: 1.1.1 + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg== + /parseurl/1.3.3: + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ== + /path-to-regexp/0.1.7: + dev: false + resolution: + integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ== + /proxy-addr/2.0.7: + dependencies: + forwarded: 0.2.0 + ipaddr.js: 1.9.1 + dev: false + engines: + node: '>= 0.10' + resolution: + integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg== + /qs/6.10.3: + dependencies: + side-channel: 1.0.4 + dev: false + engines: + node: '>=0.6' + resolution: + integrity: sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ== + /range-parser/1.2.1: + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg== + /raw-body/2.5.1: + dependencies: + bytes: 3.1.2 + http-errors: 2.0.0 + iconv-lite: 0.4.24 + unpipe: 1.0.0 + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig== + /safe-buffer/5.2.1: + dev: false + resolution: + integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== + /safer-buffer/2.1.2: + dev: false + resolution: + integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg== + /send/0.18.0: + dependencies: + debug: 2.6.9 + depd: 2.0.0 + destroy: 1.2.0 + encodeurl: 1.0.2 + escape-html: 1.0.3 + etag: 1.8.1 + fresh: 0.5.2 + http-errors: 2.0.0 + mime: 1.6.0 + ms: 2.1.3 + on-finished: 2.4.1 + range-parser: 1.2.1 + statuses: 2.0.1 + dev: false + engines: + node: '>= 0.8.0' + resolution: + integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg== + /serve-static/1.15.0: + dependencies: + encodeurl: 1.0.2 + escape-html: 1.0.3 + parseurl: 1.3.3 + send: 0.18.0 + dev: false + engines: + node: '>= 0.8.0' + resolution: + integrity: sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g== + /setprototypeof/1.2.0: + dev: false + resolution: + integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw== + /side-channel/1.0.4: + dependencies: + call-bind: 1.0.2 + get-intrinsic: 1.1.3 + object-inspect: 1.12.2 + dev: false + resolution: + integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw== + /statuses/2.0.1: + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ== + /toidentifier/1.0.1: + dev: false + engines: + node: '>=0.6' + resolution: + integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA== + /type-is/1.6.18: + dependencies: + media-typer: 0.3.0 + mime-types: 2.1.35 + dev: false + engines: + node: '>= 0.6' + resolution: + integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g== + /unpipe/1.0.0: + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ== + /utils-merge/1.0.1: + dev: false + engines: + node: '>= 0.4.0' + resolution: + integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA== + /vary/1.1.2: + dev: false + engines: + node: '>= 0.8' + resolution: + integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg== +registry: 'https://registry.npmjs.org/' +shrinkwrapMinorVersion: 9 +shrinkwrapVersion: 3 +specifiers: + express: ^4.18.1 diff --git a/views/index.html b/views/index.html new file mode 100644 index 00000000..0c253410 --- /dev/null +++ b/views/index.html @@ -0,0 +1,35 @@ + + + + + + + + + + + Welcome to Glitch! + + + + + + + + + + + + +
+

+ Here you can view the British Pound Sterling in comparison with other currencies around the world. + using tweakpane, you can change the color of the background with the color picker. + you can also select either red, green, or blue, to change the color of the circle in relation to how big the + conversion rate is. You can change the radius of the circle with the slider. and you can choose to display the conversion rate + instead of the currency. Have fun! +

+
+ + +