{"components":[{"name":"App","type":"svelte","source":"\n\n

\n\n

\n"},{"name":"Scene","type":"svelte","source":"\n\n\n\t\n\n\n\n"},{"name":"useTweakpane","type":"js","source":"import { onDestroy } from 'svelte';\nimport { get, writable } from 'svelte/store';\nimport * as tweakpaneDefault from 'tweakpane';\nimport * as tweakpaneCore from '@tweakpane/core';\nconst tp = tweakpaneDefault.default ?? tweakpaneDefault;\nconst tpC = (tweakpaneCore.default ?? tweakpaneCore);\nconst className = tpC.ClassName('ph');\nclass TextView {\n constructor(doc, config) {\n this.element = doc.createElement('div');\n this.element.classList.add(className());\n config.viewProps.bindClassModifiers(this.element);\n const textElement = doc.createElement('div');\n textElement.classList.add(className('t'));\n textElement.textContent = config.text;\n this.element.appendChild(textElement);\n }\n}\n// prettier-ignore\nclass TextController extends (tpC.BladeController) {\n constructor(doc, config) {\n super({\n blade: tpC.createBlade(),\n view: new TextView(doc, config),\n viewProps: config.viewProps\n });\n }\n}\nexport const TextPlugin = {\n id: 'text',\n type: 'blade',\n css: `.tp-phv {\n\talign-items: center;\n\tdisplay: flex;\n\theight: var(--bld-us);\n\tposition: relative;\n}\n.tp-phv::before {\n\tborder: var(--tw-prose-body) dashed 1px;\n\tborder-radius: var(--elm-br);\n\tbottom: 0;\n\tcontent: '';\n\tleft: var(--cnt-v-p);\n\topacity: 0.3;\n\tposition: absolute;\n\tright: var(--cnt-v-p);\n\ttop: 0;\n}\n.tp-phv_t {\n\tbox-sizing: border-box;\n\tcolor: var(--mo-fg);\n\tflex: 1;\n\tpadding: 4px;\n\ttext-align: center;\n}\n`,\n accept(params) {\n const p = tpC.ParamsParsers;\n const r = tpC.parseParams(params, {\n lineCount: p.optional.number,\n text: p.required.string,\n view: p.required.constant('text')\n });\n return r ? { params: r } : null;\n },\n controller(args) {\n return new TextController(args.document, {\n lineCount: args.params.lineCount ?? 1,\n text: args.params.text,\n viewProps: args.viewProps\n });\n },\n api(args) {\n if (!(args.controller instanceof TextController)) {\n return null;\n }\n return new tpC.BladeApi(args.controller);\n }\n};\nexport const useTweakpane = (config) => {\n if (typeof window === 'undefined')\n throw new Error('useTweakpane can only be used in the browser');\n let disposed = false;\n const pane = new tp.Pane(config);\n pane.registerPlugin({\n plugin: TextPlugin\n });\n const unsubscriptions = new Set();\n const action = (node) => {\n node.append(pane.element);\n // THIS IS TO ENSURE THAT CSS IS HANDLED EQUALLY\n // IN A PLAYGROUND AND IN A REGULAR EXAMPLE\n node.style.top = '1.5rem';\n node.style.right = '1.5rem';\n node.style.width = 'calc(100% - 3rem)';\n node.style.maxWidth = '300px';\n node.style.position = 'absolute';\n node.style.setProperty('--tp-base-background-color', 'hsla(230, 0%, 90%, 1.00');\n node.style.setProperty('--tp-base-shadow-color', 'hsla(0, 0%, 0%, 0.0');\n node.style.setProperty('--tp-button-background-color', 'hsla(230, 0%, 75%, 1.00');\n node.style.setProperty('--tp-button-background-color-active', 'hsla(230, 0%, 60%, 1.00');\n node.style.setProperty('--tp-button-background-color-focus', 'hsla(230, 0%, 65%, 1.00');\n node.style.setProperty('--tp-button-background-color-hover', 'hsla(230, 0%, 70%, 1.00');\n node.style.setProperty('--tp-button-foreground-color', 'hsla(230, 10%, 0%, 1.00');\n node.style.setProperty('--tp-container-background-color', 'hsla(230, 0%, 30%, 0.20');\n node.style.setProperty('--tp-container-background-color-active', 'hsla(230, 0%, 30%, 0.32');\n node.style.setProperty('--tp-container-background-color-focus', 'hsla(230, 0%, 30%, 0.28');\n node.style.setProperty('--tp-container-background-color-hover', 'hsla(230, 0%, 30%, 0.24');\n node.style.setProperty('--tp-container-foreground-color', 'hsla(230, 0%, 30%, 1.00');\n node.style.setProperty('--tp-groove-foreground-color', 'hsla(230, 0%, 30%, 0.10');\n node.style.setProperty('--tp-input-background-color', 'hsla(230, 0%, 30%, 0.10');\n node.style.setProperty('--tp-input-background-color-active', 'hsla(230, 0%, 30%, 0.22');\n node.style.setProperty('--tp-input-background-color-focus', 'hsla(230, 0%, 30%, 0.18');\n node.style.setProperty('--tp-input-background-color-hover', 'hsla(230, 0%, 30%, 0.14');\n node.style.setProperty('--tp-input-foreground-color', 'hsla(230, 0%, 30%, 1.00');\n node.style.setProperty('--tp-label-foreground-color', 'hsla(230, 0%, 30%, 0.70');\n node.style.setProperty('--tp-monitor-background-color', 'hsla(230, 0%, 30%, 0.10');\n node.style.setProperty('--tp-monitor-foreground-color', 'hsla(230, 0%, 30%, 1');\n return {\n destroy() {\n if (disposed)\n return;\n pane.dispose();\n unsubscriptions.forEach((unsubscribe) => unsubscribe());\n disposed = true;\n }\n };\n };\n const addButton = (options) => {\n const button = (options.parent ? options.parent : pane).addButton({\n title: options.title,\n label: options.label\n });\n button.on('click', options.onClick);\n };\n // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint\n const addInput = (options) => {\n const store = writable(options.value);\n const input = (options.parent ? options.parent : pane).addInput({\n [options.label]: get(store)\n }, options.label, options.params);\n let initialSubscriptionProcessed = false;\n let ignoreNextSubscriptionEvent = false;\n let ignoreNextInputEvent = false;\n input.on('change', (e) => {\n if (ignoreNextInputEvent) {\n ignoreNextInputEvent = false;\n return;\n }\n ignoreNextSubscriptionEvent = true;\n store.set(e.value);\n });\n const unsubscribe = store.subscribe((v) => {\n if (!initialSubscriptionProcessed) {\n initialSubscriptionProcessed = true;\n return;\n }\n if (ignoreNextSubscriptionEvent) {\n ignoreNextSubscriptionEvent = false;\n return;\n }\n ignoreNextInputEvent = true;\n input.controller_.binding.target.write(v);\n input.refresh();\n });\n unsubscriptions.add(unsubscribe);\n return store;\n };\n onDestroy(() => {\n if (disposed)\n return;\n pane.dispose();\n unsubscriptions.forEach((unsubscribe) => unsubscribe());\n disposed = true;\n });\n return {\n addFolder: pane.addFolder.bind(pane),\n addSeparator: pane.addSeparator.bind(pane),\n addButton,\n addInput,\n action,\n pane\n };\n};\n"}]}

Playground – Extras – Environment