diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index 3937025..0000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,42 +0,0 @@
-module.exports = {
- extends: [
- 'eslint:recommended',
- 'plugin:@typescript-eslint/eslint-recommended',
- 'plugin:@typescript-eslint/recommended',
- 'plugin:prettier/recommended',
- ],
- parser: '@typescript-eslint/parser',
- plugins: ['@typescript-eslint', 'simple-import-sort'],
- root: true,
- rules: {
- camelcase: 'off',
- 'no-unused-vars': 'off',
- 'sort-imports': 'off',
-
- 'prettier/prettier': 'error',
- 'simple-import-sort/imports': 'error',
- '@typescript-eslint/naming-convention': [
- 'error',
- {
- selector: 'variable',
- format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
- custom: {
- regex: '^opt_',
- match: false,
- },
- },
- ],
- '@typescript-eslint/explicit-function-return-type': 'off',
- '@typescript-eslint/no-empty-function': 'off',
- '@typescript-eslint/no-explicit-any': 'off',
- '@typescript-eslint/no-unused-vars': [
- 'error',
- {
- argsIgnorePattern: '^_',
- },
- ],
-
- // TODO: Resolve latest lint warnings
- '@typescript-eslint/explicit-module-boundary-types': 'off',
- },
-};
diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..f233856
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,42 @@
+{
+ "extends": [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/eslint-recommended",
+ "plugin:@typescript-eslint/recommended",
+ "plugin:prettier/recommended"
+ ],
+ "parser": "@typescript-eslint/parser",
+ "plugins": ["@typescript-eslint", "simple-import-sort"],
+ "root": true,
+ "rules": {
+ "camelcase": "off",
+ "no-unused-vars": "off",
+ "sort-imports": "off",
+
+ "prettier/prettier": "error",
+ "simple-import-sort/imports": "error",
+ "@typescript-eslint/naming-convention": [
+ "error",
+ {
+ "selector": "variable",
+ "format": ["camelCase", "PascalCase", "UPPER_CASE"],
+ "custom": {
+ "regex": "^opt_",
+ "match": false
+ }
+ }
+ ],
+ "@typescript-eslint/explicit-function-return-type": "off",
+ "@typescript-eslint/no-empty-function": "off",
+ "@typescript-eslint/no-explicit-any": "off",
+ "@typescript-eslint/no-unused-vars": [
+ "error",
+ {
+ "argsIgnorePattern": "^_"
+ }
+ ],
+
+ // TODO: Resolve latest lint warnings
+ "@typescript-eslint/explicit-module-boundary-types": "off"
+ }
+}
diff --git a/.prettierrc.js b/.prettierrc.js
deleted file mode 100644
index 9aebbb4..0000000
--- a/.prettierrc.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
- arrowParens: 'always',
- bracketSpacing: false,
- singleQuote: true,
- trailingComma: 'all',
- useTabs: true,
-};
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..6c53cb3
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,7 @@
+{
+ "arrowParens": "always",
+ "bracketSpacing": false,
+ "singleQuote": true,
+ "trailingComma": "all",
+ "useTabs": true
+}
diff --git a/README.md b/README.md
index fd4a366..7e70770 100644
--- a/README.md
+++ b/README.md
@@ -9,10 +9,11 @@ Essential components for [Tweakpane][tweakpane].
### Browser
```html
-
-
-
```
@@ -39,7 +40,7 @@ const params = {
range: {min: 16, max: 48},
};
-pane.addInput(params, 'range', {
+pane.addBinding(params, 'range', {
min: 0,
max: 100,
@@ -56,7 +57,7 @@ const fpsGraph = pane.addBlade({
view: 'fpsgraph',
label: 'fpsgraph',
- lineCount: 2,
+ rows: 2,
});
function render() {
@@ -79,7 +80,7 @@ const params = {
};
const scales = [10, 20, 25, 50, 75, 100];
-pane.addInput(params, 'scale', {
+pane.addBinding(params, 'scale', {
view: 'radiogrid',
groupName: 'scale',
size: [3, 2],
diff --git a/package.json b/package.json
index 34ad284..7aee53b 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"version": "0.1.8",
"description": "Essential components for Tweakpane",
"main": "dist/tweakpane-plugin-essentials.js",
+ "type": "module",
"types": "dist/types/index.d.ts",
"author": "cocopon",
"license": "MIT",
@@ -12,7 +13,7 @@
"scripts": {
"prepack": "run-s clean build",
"prepublishOnly": "npm test",
- "start": "npm run watch",
+ "start": "run-p watch server",
"test": "eslint --ext .ts 'src/**/*.ts'",
"assets": "run-s clean build assets:version assets:zip",
"assets:version": "node scripts/assets-append-version.js",
@@ -25,6 +26,7 @@
"format": "run-p format:*",
"format:scss": "prettier --parser scss --write 'src/sass/**/*.scss'",
"format:ts": "eslint --ext .ts --fix 'src/**/*.ts'",
+ "server": "http-server -c-1 -o /test/browser.html",
"watch": "run-p watch:*",
"watch:sass": "onchange --initial --kill 'src/sass/**/*.scss' -- npm run build:dev",
"watch:ts": "onchange --initial --kill 'src/**/*.ts' -- rollup --config rollup.config.js"
@@ -34,14 +36,14 @@
"@rollup/plugin-node-resolve": "^13.0.0",
"@rollup/plugin-replace": "^2.4.1",
"@rollup/plugin-typescript": "^8.2.0",
- "@tweakpane/core": "^1.1.4",
+ "@tweakpane/core": "^2.0.0-alpha.0",
"@types/chai": "^4.2.18",
"@types/mocha": "^8.2.2",
"@typescript-eslint/eslint-plugin": "5.33",
"@typescript-eslint/parser": "^5.33.0",
"autoprefixer": "^10.2.4",
"chai": "^4.3.4",
- "eslint": "^7.20.0",
+ "eslint": "^8.39.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-simple-import-sort": "^7.0.0",
@@ -49,7 +51,7 @@
"npm-run-all": "^4.1.5",
"onchange": "^7.1.0",
"postcss": "^8.2.6",
- "prettier": "^2.2.1",
+ "prettier": "^2.8.8",
"rimraf": "^3.0.2",
"rollup": "^2.39.1",
"rollup-plugin-cleanup": "^3.2.1",
@@ -58,6 +60,6 @@
"typescript": "4.7"
},
"peerDependencies": {
- "tweakpane": "^3.1.4"
+ "tweakpane": "^4.0.0-alpha.0"
}
}
diff --git a/rollup.config.js b/rollup.config.js
index 0b7eb71..1ded5d1 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,3 +1,5 @@
+/* eslint-env node */
+
import Alias from '@rollup/plugin-alias';
import {nodeResolve} from '@rollup/plugin-node-resolve';
import Replace from '@rollup/plugin-replace';
@@ -24,12 +26,11 @@ async function compileCss() {
function getPlugins(css, shouldMinify) {
const plugins = [
- // Use ES6 source files to avoid CommonJS transpiling
Alias({
entries: [
{
find: '@tweakpane/core',
- replacement: './node_modules/@tweakpane/core/dist/es6/index.js',
+ replacement: './node_modules/@tweakpane/core/dist/esm/index.js',
},
],
}),
@@ -63,19 +64,6 @@ function getDistName(packageName) {
.join('-');
}
-function getUmdName(packageName) {
- // `@tweakpane/plugin-foobar` -> `TweakpaneFoobarPlugin`
- // `tweakpane-plugin-foobar` -> `TweakpaneFoobarPlugin`
- return (
- packageName
- .split(/[@/-]/)
- .map((comp) =>
- comp !== 'plugin' ? comp.charAt(0).toUpperCase() + comp.slice(1) : '',
- )
- .join('') + 'Plugin'
- );
-}
-
export default async () => {
const production = process.env.BUILD === 'production';
const postfix = production ? '.min' : '';
@@ -87,11 +75,10 @@ export default async () => {
external: ['tweakpane'],
output: {
file: `dist/${distName}${postfix}.js`,
- format: 'umd',
+ format: 'esm',
globals: {
tweakpane: 'Tweakpane',
},
- name: getUmdName(Package.name),
},
plugins: getPlugins(css, production),
diff --git a/scripts/assets-append-version.js b/scripts/assets-append-version.js
index 811c5cc..61141dc 100644
--- a/scripts/assets-append-version.js
+++ b/scripts/assets-append-version.js
@@ -1,9 +1,13 @@
-'use strict';
+/* eslint-disable no-console */
+/* eslint-env node */
-const Fs = require('fs');
-const Glob = require('glob');
-const Path = require('path');
-const Package = require('../package');
+import Fs from 'fs';
+import Glob from 'glob';
+import Path from 'path';
+
+const Package = JSON.parse(
+ Fs.readFileSync(new URL('../package.json', import.meta.url)),
+);
const PATTERN = 'dist/*';
diff --git a/scripts/dist-name.js b/scripts/dist-name.js
index c575b45..792e8b1 100644
--- a/scripts/dist-name.js
+++ b/scripts/dist-name.js
@@ -1,6 +1,11 @@
-'use strict';
+/* eslint-disable no-console */
+/* eslint-env node */
-const Package = require('../package.json');
+import Fs from 'fs';
+
+const Package = JSON.parse(
+ Fs.readFileSync(new URL('../package.json', import.meta.url)),
+);
// `@tweakpane/plugin-foobar` -> `tweakpane-plugin-foobar`
// `tweakpane-plugin-foobar` -> `tweakpane-plugin-foobar`
diff --git a/src/button-grid/api/button-grid.ts b/src/button-grid/api/button-grid.ts
index 4eba4a8..895a9b9 100644
--- a/src/button-grid/api/button-grid.ts
+++ b/src/button-grid/api/button-grid.ts
@@ -1,13 +1,8 @@
-import {
- BladeApi,
- ButtonController,
- Emitter,
- LabelController,
-} from '@tweakpane/core';
+import {BladeApi, ButtonController, Emitter} from '@tweakpane/core';
-import {ButtonGridController} from '../controller/button-grid';
-import {ButtonCellApi} from './button-cell';
-import {TpButtonGridEvent} from './tp-button-grid-event';
+import {ButtonGridBladeController} from '../controller/button-grid-blade.js';
+import {ButtonCellApi} from './button-cell.js';
+import {TpButtonGridEvent} from './tp-button-grid-event.js';
interface ButtonGridApiEvents {
click: {
@@ -15,18 +10,16 @@ interface ButtonGridApiEvents {
};
}
-export class ButtonGridApi extends BladeApi<
- LabelController
-> {
+export class ButtonGridApi extends BladeApi {
private emitter_: Emitter;
private cellToApiMap_: Map = new Map();
- constructor(controller: LabelController) {
+ constructor(controller: ButtonGridBladeController) {
super(controller);
this.emitter_ = new Emitter();
- const gc = this.controller_.valueController;
+ const gc = this.controller.valueController;
gc.cellControllers.forEach((cc, i) => {
const api = new ButtonCellApi(cc);
this.cellToApiMap_.set(cc, api);
@@ -42,7 +35,7 @@ export class ButtonGridApi extends BladeApi<
}
public cell(x: number, y: number): ButtonCellApi | undefined {
- const gc = this.controller_.valueController;
+ const gc = this.controller.valueController;
const cc = gc.cellControllers[y * gc.size[0] + x];
return this.cellToApiMap_.get(cc);
}
diff --git a/src/button-grid/api/tp-button-grid-event.ts b/src/button-grid/api/tp-button-grid-event.ts
index bf1cb1c..43e8f55 100644
--- a/src/button-grid/api/tp-button-grid-event.ts
+++ b/src/button-grid/api/tp-button-grid-event.ts
@@ -1,6 +1,6 @@
import {TpEvent} from '@tweakpane/core';
-import {ButtonCellApi} from './button-cell';
+import {ButtonCellApi} from './button-cell.js';
export class TpButtonGridEvent extends TpEvent {
public readonly cell: ButtonCellApi;
diff --git a/src/button-grid/controller/button-grid-blade.ts b/src/button-grid/controller/button-grid-blade.ts
new file mode 100644
index 0000000..2ce7a71
--- /dev/null
+++ b/src/button-grid/controller/button-grid-blade.ts
@@ -0,0 +1,37 @@
+import {
+ Blade,
+ BladeController,
+ LabelController,
+ LabelProps,
+ LabelView,
+} from '@tweakpane/core';
+
+import {ButtonGridController} from './button-grid.js';
+
+interface Config {
+ blade: Blade;
+ labelProps: LabelProps;
+ valueController: ButtonGridController;
+}
+
+export class ButtonGridBladeController extends BladeController {
+ public readonly labelController: LabelController;
+ public readonly valueController: ButtonGridController;
+
+ constructor(doc: Document, config: Config) {
+ const bc = config.valueController;
+ const lc = new LabelController(doc, {
+ blade: config.blade,
+ props: config.labelProps,
+ valueController: bc,
+ });
+ super({
+ blade: config.blade,
+ view: lc.view,
+ viewProps: bc.viewProps,
+ });
+
+ this.valueController = bc;
+ this.labelController = lc;
+ }
+}
diff --git a/src/button-grid/controller/button-grid.ts b/src/button-grid/controller/button-grid.ts
index a318a16..87d43eb 100644
--- a/src/button-grid/controller/button-grid.ts
+++ b/src/button-grid/controller/button-grid.ts
@@ -15,6 +15,7 @@ interface Config {
size: [number, number];
cellConfig: (x: number, y: number) => CellConfig;
}
+export type ButtonGridControllerConfig = Config;
export class ButtonGridController implements Controller {
public readonly size: [number, number];
diff --git a/src/button-grid/plugin.ts b/src/button-grid/plugin.ts
index 2ccbfff..74f3a49 100644
--- a/src/button-grid/plugin.ts
+++ b/src/button-grid/plugin.ts
@@ -1,16 +1,16 @@
import {
BaseBladeParams,
BladePlugin,
- LabelController,
LabelPropsObject,
- ParamsParser,
- ParamsParsers,
- parseParams,
+ MicroParser,
+ parseRecord,
ValueMap,
+ VERSION,
} from '@tweakpane/core';
-import {ButtonGridApi} from './api/button-grid';
-import {ButtonGridController} from './controller/button-grid';
+import {ButtonGridApi} from './api/button-grid.js';
+import {ButtonGridController} from './controller/button-grid.js';
+import {ButtonGridBladeController} from './controller/button-grid-blade.js';
export interface ButtonGridBladeParams extends BaseBladeParams {
cells: (x: number, y: number) => {title: string};
@@ -23,28 +23,27 @@ export interface ButtonGridBladeParams extends BaseBladeParams {
export const ButtonGridBladePlugin: BladePlugin = {
id: 'buttongrid',
type: 'blade',
- // TODO:
css: '__css__',
+ core: VERSION,
accept(params) {
- const p = ParamsParsers;
- const result = parseParams(params, {
- cells: p.required.function as ParamsParser<
+ const result = parseRecord(params, (p) => ({
+ cells: p.required.function as MicroParser<
(x: number, y: number) => {title: string}
>,
- size: p.required.array(p.required.number) as ParamsParser<
+ size: p.required.array(p.required.number) as MicroParser<
[number, number]
>,
view: p.required.constant('buttongrid'),
label: p.optional.string,
- });
+ }));
return result ? {params: result} : null;
},
controller(args) {
- return new LabelController(args.document, {
+ return new ButtonGridBladeController(args.document, {
blade: args.blade,
- props: ValueMap.fromObject({
+ labelProps: ValueMap.fromObject({
label: args.params.label,
}),
valueController: new ButtonGridController(args.document, {
@@ -54,12 +53,9 @@ export const ButtonGridBladePlugin: BladePlugin = {
});
},
api(args) {
- if (!(args.controller instanceof LabelController)) {
- return null;
- }
- if (!(args.controller.valueController instanceof ButtonGridController)) {
- return null;
+ if (args.controller instanceof ButtonGridBladeController) {
+ return new ButtonGridApi(args.controller);
}
- return new ButtonGridApi(args.controller);
+ return null;
},
};
diff --git a/src/cubic-bezier/api/cubic-bezier.ts b/src/cubic-bezier/api/cubic-bezier.ts
index 2122244..8b4c87a 100644
--- a/src/cubic-bezier/api/cubic-bezier.ts
+++ b/src/cubic-bezier/api/cubic-bezier.ts
@@ -1,7 +1,11 @@
-import {BladeApi, LabeledValueController, TpChangeEvent} from '@tweakpane/core';
+import {
+ BladeApi,
+ LabeledValueBladeController,
+ TpChangeEvent,
+} from '@tweakpane/core';
-import {CubicBezierController} from '../controller/cubic-bezier';
-import {CubicBezier} from '../model/cubic-bezier';
+import {CubicBezierController} from '../controller/cubic-bezier.js';
+import {CubicBezier} from '../model/cubic-bezier.js';
export interface CubicBezierApiEvents {
change: {
@@ -10,22 +14,22 @@ export interface CubicBezierApiEvents {
}
export class CubicBezierApi extends BladeApi<
- LabeledValueController
+ LabeledValueBladeController
> {
- get label(): string | undefined {
- return this.controller_.props.get('label');
+ get label(): string | null | undefined {
+ return this.controller.labelController.props.get('label');
}
- set label(label: string | undefined) {
- this.controller_.props.set('label', label);
+ set label(label: string | null | undefined) {
+ this.controller.labelController.props.set('label', label);
}
get value(): CubicBezier {
- return this.controller_.valueController.value.rawValue;
+ return this.controller.valueController.value.rawValue;
}
set value(value: CubicBezier) {
- this.controller_.valueController.value.rawValue = value;
+ this.controller.valueController.value.rawValue = value;
}
public on(
@@ -33,8 +37,8 @@ export class CubicBezierApi extends BladeApi<
handler: (ev: CubicBezierApiEvents[EventName]['event']) => void,
): this {
const bh = handler.bind(this);
- this.controller_.valueController.value.emitter.on(eventName, (ev) => {
- bh(new TpChangeEvent(this, ev.rawValue, undefined, ev.options.last));
+ this.controller.valueController.value.emitter.on(eventName, (ev) => {
+ bh(new TpChangeEvent(this, ev.rawValue, ev.options.last));
});
return this;
}
diff --git a/src/cubic-bezier/controller/cubic-bezier-graph.ts b/src/cubic-bezier/controller/cubic-bezier-graph.ts
index 60d1ead..ff85d31 100644
--- a/src/cubic-bezier/controller/cubic-bezier-graph.ts
+++ b/src/cubic-bezier/controller/cubic-bezier-graph.ts
@@ -12,12 +12,12 @@ import {
ViewProps,
} from '@tweakpane/core';
-import {CubicBezier} from '../model/cubic-bezier';
-import {CubicBezierGraphView} from '../view/cubic-bezier-graph';
-import {CubicBezierPreviewView} from '../view/cubic-bezier-preview';
+import {CubicBezier} from '../model/cubic-bezier.js';
+import {CubicBezierGraphView} from '../view/cubic-bezier-graph.js';
+import {CubicBezierPreviewView} from '../view/cubic-bezier-preview.js';
interface Config {
- baseStep: number;
+ keyScale: Value;
value: Value;
viewProps: ViewProps;
}
@@ -51,7 +51,7 @@ export class CubicBezierGraphController
public readonly viewProps: ViewProps;
private readonly prevView_: CubicBezierPreviewView;
private sel_: Value;
- private baseStep_: number;
+ private keyScale_: Value;
constructor(doc: Document, config: Config) {
this.onKeyDown_ = this.onKeyDown_.bind(this);
@@ -60,7 +60,7 @@ export class CubicBezierGraphController
this.onPointerMove_ = this.onPointerMove_.bind(this);
this.onPointerUp_ = this.onPointerUp_.bind(this);
- this.baseStep_ = config.baseStep;
+ this.keyScale_ = config.keyScale;
this.value = config.value;
this.sel_ = createValue(0);
@@ -158,14 +158,9 @@ export class CubicBezierGraphController
const index = this.sel_.rawValue;
const comps = this.value.rawValue.toObject();
- comps[index * 2] += getStepForKey(
- this.baseStep_,
- getHorizontalStepKeys(ev),
- );
- comps[index * 2 + 1] += getStepForKey(
- this.baseStep_,
- getVerticalStepKeys(ev),
- );
+ const keyScale = this.keyScale_.rawValue;
+ comps[index * 2] += getStepForKey(keyScale, getHorizontalStepKeys(ev));
+ comps[index * 2 + 1] += getStepForKey(keyScale, getVerticalStepKeys(ev));
this.value.setRawValue(new CubicBezier(...comps), {
forceEmit: false,
last: false,
@@ -177,8 +172,9 @@ export class CubicBezierGraphController
ev.preventDefault();
}
- const xStep = getStepForKey(this.baseStep_, getHorizontalStepKeys(ev));
- const yStep = getStepForKey(this.baseStep_, getVerticalStepKeys(ev));
+ const keyScale = this.keyScale_.rawValue;
+ const xStep = getStepForKey(keyScale, getHorizontalStepKeys(ev));
+ const yStep = getStepForKey(keyScale, getVerticalStepKeys(ev));
if (xStep === 0 && yStep === 0) {
return;
}
diff --git a/src/cubic-bezier/controller/cubic-bezier-picker.ts b/src/cubic-bezier/controller/cubic-bezier-picker.ts
index 661f0ba..7689303 100644
--- a/src/cubic-bezier/controller/cubic-bezier-picker.ts
+++ b/src/cubic-bezier/controller/cubic-bezier-picker.ts
@@ -8,12 +8,11 @@ import {
ViewProps,
} from '@tweakpane/core';
-import {CubicBezier, CubicBezierAssembly} from '../model/cubic-bezier';
-import {CubicBezierPickerView} from '../view/cubic-bezier-picker';
-import {CubicBezierGraphController} from './cubic-bezier-graph';
+import {CubicBezier, CubicBezierAssembly} from '../model/cubic-bezier.js';
+import {CubicBezierPickerView} from '../view/cubic-bezier-picker.js';
+import {CubicBezierGraphController} from './cubic-bezier-graph.js';
interface Axis {
- baseStep: number;
textProps: NumberTextProps;
}
@@ -41,7 +40,7 @@ export class CubicBezierPickerController
});
this.gc_ = new CubicBezierGraphController(doc, {
- baseStep: config.axis.baseStep,
+ keyScale: config.axis.textProps.value('keyScale'),
value: this.value,
viewProps: this.viewProps,
});
diff --git a/src/cubic-bezier/controller/cubic-bezier.ts b/src/cubic-bezier/controller/cubic-bezier.ts
index 9537282..047d876 100644
--- a/src/cubic-bezier/controller/cubic-bezier.ts
+++ b/src/cubic-bezier/controller/cubic-bezier.ts
@@ -2,7 +2,6 @@ import {
bindFoldable,
bindValue,
connectValues,
- createFoldable,
findNextTarget,
Foldable,
forceCast,
@@ -20,13 +19,12 @@ import {
import {
cubicBezierFromString,
cubicBezierToString,
-} from '../converter/cubic-bezier';
-import {CubicBezier} from '../model/cubic-bezier';
-import {CubicBezierView} from '../view/cubic-bezier';
-import {CubicBezierPickerController} from './cubic-bezier-picker';
+} from '../converter/cubic-bezier.js';
+import {CubicBezier} from '../model/cubic-bezier.js';
+import {CubicBezierView} from '../view/cubic-bezier.js';
+import {CubicBezierPickerController} from './cubic-bezier-picker.js';
interface Axis {
- baseStep: number;
textProps: NumberTextProps;
}
@@ -57,7 +55,7 @@ export class CubicBezierController
this.value = config.value;
this.viewProps = config.viewProps;
- this.foldable_ = createFoldable(config.expanded);
+ this.foldable_ = Foldable.create(config.expanded);
this.view = new CubicBezierView(doc, {
foldable: this.foldable_,
@@ -106,8 +104,8 @@ export class CubicBezierController
connectValues({
primary: this.foldable_.value('expanded'),
secondary: this.popC_.shows,
- forward: (p) => p.rawValue,
- backward: (_, s) => s.rawValue,
+ forward: (p) => p,
+ backward: (_, s) => s,
});
} else if (this.view.pickerElement) {
this.view.pickerElement.appendChild(this.pickerC_.view.element);
diff --git a/src/cubic-bezier/converter/cubic-bezier.ts b/src/cubic-bezier/converter/cubic-bezier.ts
index edac22a..b530f51 100644
--- a/src/cubic-bezier/converter/cubic-bezier.ts
+++ b/src/cubic-bezier/converter/cubic-bezier.ts
@@ -1,6 +1,6 @@
import {createNumberFormatter} from '@tweakpane/core';
-import {CubicBezier} from '../model/cubic-bezier';
+import {CubicBezier} from '../model/cubic-bezier.js';
export function cubicBezierToString(cb: CubicBezier): string {
const formatter = createNumberFormatter(2);
diff --git a/src/cubic-bezier/model/cubic-bezier.ts b/src/cubic-bezier/model/cubic-bezier.ts
index a0b8e66..6b98c7f 100644
--- a/src/cubic-bezier/model/cubic-bezier.ts
+++ b/src/cubic-bezier/model/cubic-bezier.ts
@@ -1,5 +1,5 @@
import {constrainRange, isEmpty, mapRange} from '@tweakpane/core';
-import {PointNdAssembly} from '@tweakpane/core/dist/cjs/input-binding/common/model/point-nd';
+import {PointNdAssembly} from '@tweakpane/core/dist/esm/input-binding/common/model/point-nd.js';
export type CubicBezierObject = [number, number, number, number];
diff --git a/src/cubic-bezier/plugin.ts b/src/cubic-bezier/plugin.ts
index 5638baf..2b274d6 100644
--- a/src/cubic-bezier/plugin.ts
+++ b/src/cubic-bezier/plugin.ts
@@ -3,19 +3,20 @@ import {
Constraint,
createNumberFormatter,
createValue,
- LabeledValueController,
- ParamsParsers,
- parseParams,
+ LabeledValueBladeController,
+ LabelPropsObject,
+ parseRecord,
PickerLayout,
PointNdConstraint,
RangeConstraint,
ValueMap,
+ VERSION,
} from '@tweakpane/core';
import {BaseBladeParams} from 'tweakpane';
-import {CubicBezierApi} from './api/cubic-bezier';
-import {CubicBezierController} from './controller/cubic-bezier';
-import {CubicBezier, CubicBezierAssembly} from './model/cubic-bezier';
+import {CubicBezierApi} from './api/cubic-bezier.js';
+import {CubicBezierController} from './controller/cubic-bezier.js';
+import {CubicBezier, CubicBezierAssembly} from './model/cubic-bezier.js';
export interface CubicBezierBladeParams extends BaseBladeParams {
value: [number, number, number, number];
@@ -43,11 +44,10 @@ function createConstraint(): Constraint {
export const CubicBezierBladePlugin: BladePlugin = {
id: 'cubic-bezier',
type: 'blade',
- css: '__css__',
+ core: VERSION,
accept(params) {
- const p = ParamsParsers;
- const result = parseParams(params, {
+ const result = parseRecord(params, (p) => ({
value: p.required.array(p.required.number),
view: p.required.constant('cubicbezier'),
@@ -56,7 +56,7 @@ export const CubicBezierBladePlugin: BladePlugin = {
picker: p.optional.custom((v) => {
return v === 'inline' || v === 'popup' ? v : undefined;
}),
- });
+ }));
return result ? {params: result} : null;
},
controller(args) {
@@ -67,9 +67,9 @@ export const CubicBezierBladePlugin: BladePlugin = {
});
const vc = new CubicBezierController(args.document, {
axis: {
- baseStep: 0.1,
textProps: ValueMap.fromObject({
- draggingScale: 0.01,
+ keyScale: 0.1,
+ pointerScale: 0.01,
formatter: createNumberFormatter(2),
}),
},
@@ -78,16 +78,17 @@ export const CubicBezierBladePlugin: BladePlugin = {
value: v,
viewProps: args.viewProps,
});
- return new LabeledValueController(args.document, {
+ return new LabeledValueBladeController(args.document, {
blade: args.blade,
props: ValueMap.fromObject({
label: args.params.label,
- }),
+ } as LabelPropsObject),
+ value: v,
valueController: vc,
});
},
api(args) {
- if (!(args.controller instanceof LabeledValueController)) {
+ if (!(args.controller instanceof LabeledValueBladeController)) {
return null;
}
if (!(args.controller.valueController instanceof CubicBezierController)) {
diff --git a/src/cubic-bezier/view/cubic-bezier-graph.ts b/src/cubic-bezier/view/cubic-bezier-graph.ts
index 8e8b76e..16f2533 100644
--- a/src/cubic-bezier/view/cubic-bezier-graph.ts
+++ b/src/cubic-bezier/view/cubic-bezier-graph.ts
@@ -10,8 +10,8 @@ import {
ViewProps,
} from '@tweakpane/core';
-import {CubicBezier} from '../model/cubic-bezier';
-import {waitToBeAddedToDom} from './util';
+import {CubicBezier} from '../model/cubic-bezier.js';
+import {waitToBeAddedToDom} from './util.js';
interface Config {
selection: Value;
diff --git a/src/cubic-bezier/view/cubic-bezier-preview.ts b/src/cubic-bezier/view/cubic-bezier-preview.ts
index ac59d10..e49254f 100644
--- a/src/cubic-bezier/view/cubic-bezier-preview.ts
+++ b/src/cubic-bezier/view/cubic-bezier-preview.ts
@@ -8,8 +8,8 @@ import {
ViewProps,
} from '@tweakpane/core';
-import {CubicBezier} from '../model/cubic-bezier';
-import {waitToBeAddedToDom} from './util';
+import {CubicBezier} from '../model/cubic-bezier.js';
+import {waitToBeAddedToDom} from './util.js';
interface Config {
value: Value;
diff --git a/src/fps-graph/api/fps-graph.ts b/src/fps-graph/api/fps-graph.ts
index d728b50..187a544 100644
--- a/src/fps-graph/api/fps-graph.ts
+++ b/src/fps-graph/api/fps-graph.ts
@@ -1,15 +1,13 @@
-import {BladeApi, LabelController} from '@tweakpane/core';
+import {BladeApi} from '@tweakpane/core';
-import {FpsGraphController} from '../controller/fps-graph';
+import {FpsGraphBladeController} from '../controller/fps-graph-blade.js';
-export class FpsGraphBladeApi extends BladeApi<
- LabelController
-> {
+export class FpsGraphBladeApi extends BladeApi {
public begin(): void {
- this.controller_.valueController.begin();
+ this.controller.valueController.begin();
}
public end(): void {
- this.controller_.valueController.end();
+ this.controller.valueController.end();
}
}
diff --git a/src/fps-graph/controller/fps-graph-blade.ts b/src/fps-graph/controller/fps-graph-blade.ts
new file mode 100644
index 0000000..1ab7f8e
--- /dev/null
+++ b/src/fps-graph/controller/fps-graph-blade.ts
@@ -0,0 +1,38 @@
+import {
+ Blade,
+ BladeController,
+ LabelController,
+ LabelProps,
+ LabelView,
+} from '@tweakpane/core';
+
+import {FpsGraphController} from './fps-graph.js';
+
+interface Config {
+ blade: Blade;
+ labelProps: LabelProps;
+ valueController: FpsGraphController;
+}
+
+export class FpsGraphBladeController extends BladeController {
+ public readonly labelController: LabelController;
+ public readonly valueController: FpsGraphController;
+
+ constructor(doc: Document, config: Config) {
+ const fc = config.valueController;
+ const lc = new LabelController(doc, {
+ blade: config.blade,
+ props: config.labelProps,
+ valueController: fc,
+ });
+
+ super({
+ blade: config.blade,
+ view: lc.view,
+ viewProps: fc.viewProps,
+ });
+
+ this.valueController = fc;
+ this.labelController = lc;
+ }
+}
diff --git a/src/fps-graph/controller/fps-graph.ts b/src/fps-graph/controller/fps-graph.ts
index 99b0ba4..f3eb3b5 100644
--- a/src/fps-graph/controller/fps-graph.ts
+++ b/src/fps-graph/controller/fps-graph.ts
@@ -9,13 +9,13 @@ import {
ViewProps,
} from '@tweakpane/core';
-import {Fpswatch} from '../model/stopwatch';
-import {FpsView} from '../view/fps';
+import {Fpswatch} from '../model/stopwatch.js';
+import {FpsView} from '../view/fps.js';
interface Config {
- lineCount: number;
maxValue: number;
minValue: number;
+ rows: number;
ticker: Ticker;
value: BufferedValue;
viewProps: ViewProps;
@@ -44,11 +44,11 @@ export class FpsGraphController implements Controller {
this.graphC_ = new GraphLogController(doc, {
formatter: createNumberFormatter(0),
- lineCount: config.lineCount,
props: ValueMap.fromObject({
- maxValue: config.maxValue,
- minValue: config.minValue,
+ max: config.maxValue,
+ min: config.minValue,
}),
+ rows: config.rows,
value: this.value_,
viewProps: this.viewProps,
});
diff --git a/src/fps-graph/plugin.ts b/src/fps-graph/plugin.ts
index 3e44378..8be8e4c 100644
--- a/src/fps-graph/plugin.ts
+++ b/src/fps-graph/plugin.ts
@@ -2,28 +2,29 @@ import {
BaseBladeParams,
BladePlugin,
Constants,
+ createValue,
initializeBuffer,
IntervalTicker,
- LabelController,
LabelPropsObject,
ManualTicker,
- ParamsParsers,
- parseParams,
+ parseRecord,
Ticker,
ValueMap,
+ VERSION,
} from '@tweakpane/core';
-import {FpsGraphBladeApi} from './api/fps-graph';
-import {FpsGraphController} from './controller/fps-graph';
+import {FpsGraphBladeApi} from './api/fps-graph.js';
+import {FpsGraphController} from './controller/fps-graph.js';
+import {FpsGraphBladeController} from './controller/fps-graph-blade.js';
export interface FpsGraphBladeParams extends BaseBladeParams {
view: 'fpsgraph';
interval?: number;
label?: string;
- lineCount?: number;
max?: number;
min?: number;
+ rows?: number;
}
function createTicker(
@@ -41,41 +42,39 @@ function createTicker(
export const FpsGraphBladePlugin: BladePlugin = {
id: 'fpsgraph',
type: 'blade',
+ core: VERSION,
+
accept(params) {
- const p = ParamsParsers;
- const result = parseParams(params, {
+ const result = parseRecord(params, (p) => ({
view: p.required.constant('fpsgraph'),
interval: p.optional.number,
label: p.optional.string,
- lineCount: p.optional.number,
+ rows: p.optional.number,
max: p.optional.number,
min: p.optional.number,
- });
+ }));
return result ? {params: result} : null;
},
controller(args) {
const interval = args.params.interval ?? 500;
- return new LabelController(args.document, {
+ return new FpsGraphBladeController(args.document, {
blade: args.blade,
- props: ValueMap.fromObject({
+ labelProps: ValueMap.fromObject({
label: args.params.label,
}),
valueController: new FpsGraphController(args.document, {
- lineCount: args.params.lineCount ?? 2,
+ rows: args.params.rows ?? 2,
maxValue: args.params.max ?? 90,
minValue: args.params.min ?? 0,
ticker: createTicker(args.document, interval),
- value: initializeBuffer(80),
+ value: createValue(initializeBuffer(80)),
viewProps: args.viewProps,
}),
});
},
api(args) {
- if (!(args.controller instanceof LabelController)) {
- return null;
- }
- if (!(args.controller.valueController instanceof FpsGraphController)) {
+ if (!(args.controller instanceof FpsGraphBladeController)) {
return null;
}
return new FpsGraphBladeApi(args.controller);
diff --git a/src/index.ts b/src/index.ts
index 39bbf91..8d21d5c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,15 +1,15 @@
import {TpPlugin} from '@tweakpane/core';
-import {ButtonGridBladePlugin} from './button-grid/plugin';
-import {CubicBezierBladePlugin} from './cubic-bezier/plugin';
-import {FpsGraphBladePlugin} from './fps-graph/plugin';
-import {IntervalInputPlugin} from './interval/plugin';
-import {RadioGridBladePlugin} from './radio-grid/blade-plugin';
+import {ButtonGridBladePlugin} from './button-grid/plugin.js';
+import {CubicBezierBladePlugin} from './cubic-bezier/plugin.js';
+import {FpsGraphBladePlugin} from './fps-graph/plugin.js';
+import {IntervalInputPlugin} from './interval/plugin.js';
+import {RadioGridBladePlugin} from './radio-grid/blade-plugin.js';
import {
RadioGruidBooleanInputPlugin,
RadioGruidNumberInputPlugin,
RadioGruidStringInputPlugin,
-} from './radio-grid/input-plugin';
+} from './radio-grid/input-plugin.js';
export const plugins: TpPlugin[] = [
ButtonGridBladePlugin,
@@ -22,35 +22,35 @@ export const plugins: TpPlugin[] = [
RadioGruidStringInputPlugin,
];
-export * from './button-grid/api/button-cell';
-export * from './button-grid/api/button-grid';
-export * from './button-grid/controller/button-grid';
+export * from './button-grid/api/button-cell.js';
+export * from './button-grid/api/button-grid.js';
+export * from './button-grid/controller/button-grid.js';
-export * from './cubic-bezier/api/cubic-bezier';
-export * from './cubic-bezier/controller/cubic-bezier';
-export * from './cubic-bezier/controller/cubic-bezier-graph';
-export * from './cubic-bezier/controller/cubic-bezier-picker';
-export * from './cubic-bezier/model/cubic-bezier';
-export * from './cubic-bezier/view/cubic-bezier';
-export * from './cubic-bezier/view/cubic-bezier-graph';
-export * from './cubic-bezier/view/cubic-bezier-picker';
-export * from './cubic-bezier/view/cubic-bezier-preview';
+export * from './cubic-bezier/api/cubic-bezier.js';
+export * from './cubic-bezier/controller/cubic-bezier.js';
+export * from './cubic-bezier/controller/cubic-bezier-graph.js';
+export * from './cubic-bezier/controller/cubic-bezier-picker.js';
+export * from './cubic-bezier/model/cubic-bezier.js';
+export * from './cubic-bezier/view/cubic-bezier.js';
+export * from './cubic-bezier/view/cubic-bezier-graph.js';
+export * from './cubic-bezier/view/cubic-bezier-picker.js';
+export * from './cubic-bezier/view/cubic-bezier-preview.js';
-export * from './fps-graph/api/fps-graph';
-export * from './fps-graph/controller/fps-graph';
-export * from './fps-graph/model/stopwatch';
-export * from './fps-graph/view/fps';
+export * from './fps-graph/api/fps-graph.js';
+export * from './fps-graph/controller/fps-graph.js';
+export * from './fps-graph/model/stopwatch.js';
+export * from './fps-graph/view/fps.js';
-export * from './interval/constraint/interval';
-export * from './interval/controller/range-slider';
-export * from './interval/controller/range-slider-text';
-export * from './interval/model/interval';
-export * from './interval/view/range-slider';
-export * from './interval/view/range-slider-text';
+export * from './interval/constraint/interval.js';
+export * from './interval/controller/range-slider.js';
+export * from './interval/controller/range-slider-text.js';
+export * from './interval/model/interval.js';
+export * from './interval/view/range-slider.js';
+export * from './interval/view/range-slider-text.js';
-export * from './radio-grid/api/radio-cell-api';
-export * from './radio-grid/api/radio-grid';
-export * from './radio-grid/api/tp-radio-grid-event';
-export * from './radio-grid/controller/radio';
-export * from './radio-grid/controller/radio-grid';
-export * from './radio-grid/view/radio';
+export * from './radio-grid/api/radio-cell-api.js';
+export * from './radio-grid/api/radio-grid.js';
+export * from './radio-grid/api/tp-radio-grid-event.js';
+export * from './radio-grid/controller/radio.js';
+export * from './radio-grid/controller/radio-grid.js';
+export * from './radio-grid/view/radio.js';
diff --git a/src/interval/constraint/interval.ts b/src/interval/constraint/interval.ts
index 875deec..9773b49 100644
--- a/src/interval/constraint/interval.ts
+++ b/src/interval/constraint/interval.ts
@@ -1,6 +1,6 @@
import {Constraint} from '@tweakpane/core';
-import {Interval} from '../model/interval';
+import {Interval} from '../model/interval.js';
export class IntervalConstraint implements Constraint {
public readonly edge: Constraint | undefined;
diff --git a/src/interval/controller/range-slider-text.ts b/src/interval/controller/range-slider-text.ts
index 5b4c40d..e15f8ae 100644
--- a/src/interval/controller/range-slider-text.ts
+++ b/src/interval/controller/range-slider-text.ts
@@ -1,26 +1,24 @@
import {
Constraint,
- Formatter,
+ NumberTextProps,
Parser,
PointNdTextController,
SliderProps,
Value,
ValueController,
- ValueMap,
ViewProps,
} from '@tweakpane/core';
+import {PointAxis} from '@tweakpane/core/dist/esm/common/point-nd/point-axis.js';
-import {Interval, IntervalAssembly} from '../model/interval';
-import {RangeSliderTextView} from '../view/range-slider-text';
-import {RangeSliderController} from './range-slider';
+import {Interval, IntervalAssembly} from '../model/interval.js';
+import {RangeSliderTextView} from '../view/range-slider-text.js';
+import {RangeSliderController} from './range-slider.js';
interface Config {
- baseStep: number;
constraint: Constraint | undefined;
- draggingScale: number;
- formatter: Formatter;
parser: Parser;
sliderProps: SliderProps;
+ textProps: NumberTextProps;
value: Value;
viewProps: ViewProps;
}
@@ -41,13 +39,9 @@ export class RangeSliderTextController
this.sc_ = new RangeSliderController(doc, config);
const axis = {
- baseStep: config.baseStep,
constraint: config.constraint,
- textProps: ValueMap.fromObject({
- draggingScale: config.draggingScale,
- formatter: config.formatter,
- }),
- };
+ textProps: config.textProps,
+ } as PointAxis;
this.tc_ = new PointNdTextController(doc, {
assembly: IntervalAssembly,
axes: [axis, axis],
diff --git a/src/interval/controller/range-slider.ts b/src/interval/controller/range-slider.ts
index ca00680..29d78fd 100644
--- a/src/interval/controller/range-slider.ts
+++ b/src/interval/controller/range-slider.ts
@@ -10,8 +10,8 @@ import {
ViewProps,
} from '@tweakpane/core';
-import {Interval} from '../model/interval';
-import {RangeSliderView} from '../view/range-slider';
+import {Interval} from '../model/interval.js';
+import {RangeSliderView} from '../view/range-slider.js';
interface Config {
sliderProps: SliderProps;
@@ -68,8 +68,8 @@ export class RangeSliderController
}
const p = (data.point.x + this.ofs_()) / data.bounds.width;
- const min = this.sliderProps.get('minValue');
- const max = this.sliderProps.get('maxValue');
+ const min = this.sliderProps.get('min');
+ const max = this.sliderProps.get('max');
return mapRange(p, 0, 1, min, max);
}
@@ -80,8 +80,8 @@ export class RangeSliderController
const p = ev.data.point.x / ev.data.bounds.width;
const v = this.value.rawValue;
- const min = this.sliderProps.get('minValue');
- const max = this.sliderProps.get('maxValue');
+ const min = this.sliderProps.get('min');
+ const max = this.sliderProps.get('max');
const pmin = mapRange(v.min, min, max, 0, 1);
const pmax = mapRange(v.max, min, max, 0, 1);
@@ -110,8 +110,8 @@ export class RangeSliderController
return;
}
- const rmin = this.sliderProps.get('minValue');
- const rmax = this.sliderProps.get('maxValue');
+ const rmin = this.sliderProps.get('min');
+ const rmax = this.sliderProps.get('max');
if (this.grabbing_ === 'min') {
this.value.setRawValue(new Interval(v, this.value.rawValue.max), opts);
} else if (this.grabbing_ === 'max') {
diff --git a/src/interval/converter/interval.ts b/src/interval/converter/interval.ts
index 28c838f..c64cdb8 100644
--- a/src/interval/converter/interval.ts
+++ b/src/interval/converter/interval.ts
@@ -1,6 +1,6 @@
import {BindingTarget} from '@tweakpane/core';
-import {Interval} from '../model/interval';
+import {Interval} from '../model/interval.js';
export function intervalFromUnknown(value: unknown): Interval {
return Interval.isObject(value)
diff --git a/src/interval/model/interval-test.ts b/src/interval/model/interval-test.ts
index f75b89d..cf42a85 100644
--- a/src/interval/model/interval-test.ts
+++ b/src/interval/model/interval-test.ts
@@ -1,7 +1,7 @@
import {assert} from 'chai';
import {describe as context, describe, it} from 'mocha';
-import {Interval} from './interval';
+import {Interval} from './interval.js';
describe(Interval.name, () => {
[
diff --git a/src/interval/model/interval.ts b/src/interval/model/interval.ts
index e5e2c8d..4d9f1b9 100644
--- a/src/interval/model/interval.ts
+++ b/src/interval/model/interval.ts
@@ -1,4 +1,4 @@
-import {PointNdAssembly} from '@tweakpane/core/dist/cjs/input-binding/common/model/point-nd';
+import {PointNdAssembly} from '@tweakpane/core/dist/esm/input-binding/common/model/point-nd.js';
export interface IntervalObject {
max: number;
diff --git a/src/interval/plugin.ts b/src/interval/plugin.ts
index 8d54de3..3501ef7 100644
--- a/src/interval/plugin.ts
+++ b/src/interval/plugin.ts
@@ -2,36 +2,29 @@ import {
BaseInputParams,
CompositeConstraint,
Constraint,
- createNumberFormatter,
+ createNumberTextInputParamsParser,
+ createNumberTextPropsObject,
createRangeConstraint,
createStepConstraint,
DefiniteRangeConstraint,
findConstraint,
- Formatter,
- getBaseStep,
- getSuitableDecimalDigits,
- getSuitableDraggingScale,
InputBindingPlugin,
- ParamsParser,
- ParamsParsers,
+ NumberInputParams,
parseNumber,
- parseParams,
+ parseRecord,
PointNdTextController,
TpError,
ValueMap,
+ VERSION,
} from '@tweakpane/core';
+import {PointAxis} from '@tweakpane/core/dist/esm/common/point-nd/point-axis.js';
-import {IntervalConstraint} from './constraint/interval';
-import {RangeSliderTextController} from './controller/range-slider-text';
-import {intervalFromUnknown, writeInterval} from './converter/interval';
-import {Interval, IntervalAssembly, IntervalObject} from './model/interval';
+import {IntervalConstraint} from './constraint/interval.js';
+import {RangeSliderTextController} from './controller/range-slider-text.js';
+import {intervalFromUnknown, writeInterval} from './converter/interval.js';
+import {Interval, IntervalAssembly, IntervalObject} from './model/interval.js';
-interface IntervalInputParams extends BaseInputParams {
- format?: Formatter;
- max?: number;
- min?: number;
- step?: number;
-}
+interface IntervalInputParams extends NumberInputParams, BaseInputParams {}
function createConstraint(params: IntervalInputParams): Constraint {
const constraints = [];
@@ -54,20 +47,17 @@ export const IntervalInputPlugin: InputBindingPlugin<
> = {
id: 'input-interval',
type: 'input',
- css: '__css__',
+ core: VERSION,
accept: (exValue, params) => {
if (!Interval.isObject(exValue)) {
return null;
}
- const p = ParamsParsers;
- const result = parseParams(params, {
- format: p.optional.function as ParamsParser>,
- max: p.optional.number,
- min: p.optional.number,
- step: p.optional.number,
- });
+ const result = parseRecord(params, (p) => ({
+ ...createNumberTextInputParamsParser(p),
+ readonly: p.optional.constant(false),
+ }));
return result
? {
initialValue: new Interval(exValue.min, exValue.max),
@@ -89,35 +79,29 @@ export const IntervalInputPlugin: InputBindingPlugin<
}
const midValue = (v.rawValue.min + v.rawValue.max) / 2;
- const formatter =
- args.params.format ??
- createNumberFormatter(getSuitableDecimalDigits(c.edge, midValue));
-
+ const textProps = ValueMap.fromObject(
+ createNumberTextPropsObject(args.params, midValue),
+ );
const drc = c.edge && findConstraint(c.edge, DefiniteRangeConstraint);
if (drc) {
return new RangeSliderTextController(args.document, {
- baseStep: getBaseStep(c.edge),
constraint: c.edge,
- draggingScale: getSuitableDraggingScale(c.edge, midValue),
- formatter: formatter,
parser: parseNumber,
sliderProps: new ValueMap({
- maxValue: drc.values.value('max'),
- minValue: drc.values.value('min'),
+ keyScale: textProps.value('keyScale'),
+ max: drc.values.value('max'),
+ min: drc.values.value('min'),
}),
+ textProps: textProps,
value: v,
viewProps: args.viewProps,
});
}
const axis = {
- baseStep: getBaseStep(c.edge),
constraint: c.edge,
- textProps: ValueMap.fromObject({
- draggingScale: midValue,
- formatter: formatter,
- }),
- };
+ textProps: textProps,
+ } as PointAxis;
return new PointNdTextController(args.document, {
assembly: IntervalAssembly,
axes: [axis, axis],
diff --git a/src/interval/view/range-slider-text.ts b/src/interval/view/range-slider-text.ts
index 3f0b3ba..15dd746 100644
--- a/src/interval/view/range-slider-text.ts
+++ b/src/interval/view/range-slider-text.ts
@@ -1,7 +1,7 @@
import {ClassName, PointNdTextController, View} from '@tweakpane/core';
-import {Interval} from '../model/interval';
-import {RangeSliderView} from './range-slider';
+import {Interval} from '../model/interval.js';
+import {RangeSliderView} from './range-slider.js';
interface Config {
sliderView: RangeSliderView;
diff --git a/src/interval/view/range-slider.ts b/src/interval/view/range-slider.ts
index be45e08..42091c3 100644
--- a/src/interval/view/range-slider.ts
+++ b/src/interval/view/range-slider.ts
@@ -8,7 +8,7 @@ import {
ViewProps,
} from '@tweakpane/core';
-import {Interval} from '../model/interval';
+import {Interval} from '../model/interval.js';
interface Config {
sliderProps: SliderProps;
@@ -62,8 +62,8 @@ export class RangeSliderView implements View {
}
private valueToX_(value: number): number {
- const min = this.sliderProps_.get('minValue');
- const max = this.sliderProps_.get('maxValue');
+ const min = this.sliderProps_.get('min');
+ const max = this.sliderProps_.get('max');
return constrainRange(mapRange(value, min, max, 0, 1), 0, 1) * 100;
}
diff --git a/src/radio-grid/api/radio-cell-api.ts b/src/radio-grid/api/radio-cell-api.ts
index 4b8338a..24b6b82 100644
--- a/src/radio-grid/api/radio-cell-api.ts
+++ b/src/radio-grid/api/radio-cell-api.ts
@@ -1,4 +1,4 @@
-import {RadioController} from '../controller/radio';
+import {RadioController} from '../controller/radio.js';
export class RadioCellApi {
private controller_: RadioController;
diff --git a/src/radio-grid/api/radio-grid.ts b/src/radio-grid/api/radio-grid.ts
index 997b45d..73a0a4c 100644
--- a/src/radio-grid/api/radio-grid.ts
+++ b/src/radio-grid/api/radio-grid.ts
@@ -1,9 +1,9 @@
-import {BladeApi, LabeledValueController, Value} from '@tweakpane/core';
+import {BladeApi, LabeledValueBladeController, Value} from '@tweakpane/core';
-import {RadioController} from '../controller/radio';
-import {RadioGridController} from '../controller/radio-grid';
-import {RadioCellApi} from './radio-cell-api';
-import {TpRadioGridChangeEvent} from './tp-radio-grid-event';
+import {RadioController} from '../controller/radio.js';
+import {RadioGridController} from '../controller/radio-grid.js';
+import {RadioCellApi} from './radio-cell-api.js';
+import {TpRadioGridChangeEvent} from './tp-radio-grid-event.js';
interface RadioGridApiEvents {
change: {
@@ -12,14 +12,16 @@ interface RadioGridApiEvents {
}
export class RadioGridApi extends BladeApi<
- LabeledValueController>
+ LabeledValueBladeController>
> {
private cellToApiMap_: Map = new Map();
- constructor(controller: LabeledValueController>) {
+ constructor(
+ controller: LabeledValueBladeController>,
+ ) {
super(controller);
- const gc = this.controller_.valueController;
+ const gc = this.controller.valueController;
gc.cellControllers.forEach((cc) => {
const api = new RadioCellApi(cc);
this.cellToApiMap_.set(cc, api);
@@ -27,11 +29,11 @@ export class RadioGridApi extends BladeApi<
}
get value(): Value {
- return this.controller_.value;
+ return this.controller.value;
}
public cell(x: number, y: number): RadioCellApi | undefined {
- const gc = this.controller_.valueController;
+ const gc = this.controller.valueController;
const cc = gc.cellControllers[y * gc.size[0] + x];
return this.cellToApiMap_.get(cc);
}
@@ -41,8 +43,8 @@ export class RadioGridApi extends BladeApi<
handler: (ev: RadioGridApiEvents[EventName]['event']) => void,
): void {
const bh = handler.bind(this);
- this.controller_.value.emitter.on(eventName, (ev) => {
- const gc = this.controller_.valueController;
+ this.controller.value.emitter.on(eventName, (ev) => {
+ const gc = this.controller.valueController;
const cc = gc.findCellByValue(ev.rawValue);
if (!cc) {
return;
@@ -58,7 +60,6 @@ export class RadioGridApi extends BladeApi<
capi,
[i % gc.size[0], Math.floor(i / gc.size[0])],
ev.rawValue,
- undefined,
),
);
});
diff --git a/src/radio-grid/api/tp-radio-grid-event.ts b/src/radio-grid/api/tp-radio-grid-event.ts
index b5fa498..a450c83 100644
--- a/src/radio-grid/api/tp-radio-grid-event.ts
+++ b/src/radio-grid/api/tp-radio-grid-event.ts
@@ -1,6 +1,6 @@
import {TpChangeEvent} from '@tweakpane/core';
-import {RadioCellApi} from './radio-cell-api';
+import {RadioCellApi} from './radio-cell-api.js';
export class TpRadioGridChangeEvent extends TpChangeEvent {
public readonly cell: RadioCellApi;
@@ -11,9 +11,9 @@ export class TpRadioGridChangeEvent extends TpChangeEvent {
cell: RadioCellApi,
index: [number, number],
value: T,
- presetKey?: string,
+ last?: boolean,
) {
- super(target, value, presetKey);
+ super(target, value, last);
this.cell = cell;
this.index = index;
diff --git a/src/radio-grid/blade-plugin.ts b/src/radio-grid/blade-plugin.ts
index fef3506..6102e85 100644
--- a/src/radio-grid/blade-plugin.ts
+++ b/src/radio-grid/blade-plugin.ts
@@ -2,16 +2,16 @@ import {
BaseBladeParams,
BladePlugin,
createValue,
- LabeledValueController,
+ LabeledValueBladeController,
LabelPropsObject,
- ParamsParser,
- ParamsParsers,
- parseParams,
+ MicroParser,
+ parseRecord,
ValueMap,
+ VERSION,
} from '@tweakpane/core';
-import {RadioGridApi} from './api/radio-grid';
-import {RadioGridController} from './controller/radio-grid';
+import {RadioGridApi} from './api/radio-grid.js';
+import {RadioGridController} from './controller/radio-grid.js';
export interface RadioGridBladeParams extends BaseBladeParams {
cells: (
@@ -35,11 +35,11 @@ export const RadioGridBladePlugin = (function (): BladePlugin<
return {
id: 'radiogrid',
type: 'blade',
+ core: VERSION,
accept(params) {
- const p = ParamsParsers;
- const result = parseParams>(params, {
- cells: p.required.function as ParamsParser<
+ const result = parseRecord>(params, (p) => ({
+ cells: p.required.function as MicroParser<
(
x: number,
y: number,
@@ -49,32 +49,34 @@ export const RadioGridBladePlugin = (function (): BladePlugin<
}
>,
groupName: p.required.string,
- size: p.required.array(p.required.number) as ParamsParser<
+ size: p.required.array(p.required.number) as MicroParser<
[number, number]
>,
- value: p.required.raw as ParamsParser,
+ value: p.required.raw as MicroParser,
view: p.required.constant('radiogrid'),
label: p.optional.string,
- });
+ }));
return result ? {params: result} : null;
},
controller(args) {
- return new LabeledValueController(args.document, {
+ const value = createValue(args.params.value);
+ return new LabeledValueBladeController(args.document, {
blade: args.blade,
props: ValueMap.fromObject({
label: args.params.label,
}),
+ value: value,
valueController: new RadioGridController(args.document, {
groupName: args.params.groupName,
cellConfig: args.params.cells,
size: args.params.size,
- value: createValue(args.params.value),
+ value: value,
}),
});
},
api(args) {
- if (!(args.controller instanceof LabeledValueController)) {
+ if (!(args.controller instanceof LabeledValueBladeController)) {
return null;
}
if (!(args.controller.valueController instanceof RadioGridController)) {
diff --git a/src/radio-grid/controller/radio-grid.ts b/src/radio-grid/controller/radio-grid.ts
index d933690..742bc64 100644
--- a/src/radio-grid/controller/radio-grid.ts
+++ b/src/radio-grid/controller/radio-grid.ts
@@ -7,8 +7,8 @@ import {
ViewProps,
} from '@tweakpane/core';
-import {RadioPropsObject} from '../view/radio';
-import {RadioController} from './radio';
+import {RadioPropsObject} from '../view/radio.js';
+import {RadioController} from './radio.js';
interface CellConfig {
title: string;
diff --git a/src/radio-grid/controller/radio.ts b/src/radio-grid/controller/radio.ts
index fe7b8ed..18b0f5b 100644
--- a/src/radio-grid/controller/radio.ts
+++ b/src/radio-grid/controller/radio.ts
@@ -1,6 +1,6 @@
import {Controller, ViewProps} from '@tweakpane/core';
-import {RadioProps, RadioView} from '../view/radio';
+import {RadioProps, RadioView} from '../view/radio.js';
interface Config {
name: string;
diff --git a/src/radio-grid/input-plugin.ts b/src/radio-grid/input-plugin.ts
index 82bd16b..40bb440 100644
--- a/src/radio-grid/input-plugin.ts
+++ b/src/radio-grid/input-plugin.ts
@@ -2,15 +2,15 @@ import {
BaseInputParams,
boolFromUnknown,
InputBindingPlugin,
+ MicroParser,
numberFromUnknown,
- ParamsParser,
- ParamsParsers,
- parseParams,
+ parseRecord,
stringFromUnknown,
+ VERSION,
writePrimitive,
} from '@tweakpane/core';
-import {RadioGridController} from './controller/radio-grid';
+import {RadioGridController} from './controller/radio-grid.js';
interface RadioGridInputParams extends BaseInputParams {
cells: (
@@ -32,14 +32,15 @@ function createRadioGridInputPlugin(config: {
return {
id: 'input-radiogrid',
type: 'input',
+ core: VERSION,
+
accept(value, params) {
if (!config.isType(value)) {
return null;
}
- const p = ParamsParsers;
- const result = parseParams>(params, {
- cells: p.required.function as ParamsParser<
+ const result = parseRecord>(params, (p) => ({
+ cells: p.required.function as MicroParser<
(
x: number,
y: number,
@@ -49,11 +50,11 @@ function createRadioGridInputPlugin(config: {
}
>,
groupName: p.required.string,
- size: p.required.array(p.required.number) as ParamsParser<
+ size: p.required.array(p.required.number) as MicroParser<
[number, number]
>,
view: p.required.constant('radiogrid'),
- });
+ }));
return result
? {
initialValue: value,
diff --git a/src/sass/_button-grid.scss b/src/sass/_button-grid.scss
index 1f3fcd0..c6a10e4 100644
--- a/src/sass/_button-grid.scss
+++ b/src/sass/_button-grid.scss
@@ -1,20 +1,22 @@
-.#{$prefix}-btngridv {
- border-radius: var(--elm-br);
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
+
+.#{tp.$prefix}-btngridv {
+ border-radius: tp.cssVar('blade-border-radius');
display: grid;
overflow: hidden;
gap: 2px;
- &.#{$prefix}-v-disabled {
+ &.#{tp.$prefix}-v-disabled {
opacity: 0.5;
}
- & .#{$prefix}-btnv_b:disabled {
+ & .#{tp.$prefix}-btnv_b:disabled {
opacity: 1;
}
- & .#{$prefix}-btnv_b:disabled .#{$prefix}-btnv_t {
+ & .#{tp.$prefix}-btnv_b:disabled .#{tp.$prefix}-btnv_t {
opacity: 0.5;
}
- & .#{$prefix}-btnv_b {
+ & .#{tp.$prefix}-btnv_b {
border-radius: 0;
}
}
diff --git a/src/sass/_cubic-bezier.scss b/src/sass/_cubic-bezier.scss
index f546953..5a6bcef 100644
--- a/src/sass/_cubic-bezier.scss
+++ b/src/sass/_cubic-bezier.scss
@@ -1,4 +1,7 @@
-.#{$prefix}-cbzv {
+@use 'sass:math';
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
+
+.#{tp.$prefix}-cbzv {
position: relative;
// Head
@@ -7,24 +10,24 @@
}
// Button
&_b {
- @extend %button;
+ @extend %tp-button;
margin-right: 4px;
position: relative;
- width: var(--bld-us);
+ width: tp.cssVar('container-unit-size');
svg {
display: block;
height: 16px;
left: 50%;
- margin-left: -(16px / 2);
- margin-top: -(16px / 2);
+ margin-left: math.div(-16px, 2);
+ margin-top: math.div(-16px, 2);
position: absolute;
top: 50%;
width: 16px;
path {
- stroke: var(--bs-bg);
+ stroke: tp.cssVar('base-bg');
stroke-width: 2;
}
}
@@ -39,12 +42,12 @@
margin-top: 0;
opacity: 0;
overflow: hidden;
- transition: height $fold-transition-duration ease-in-out,
- opacity $fold-transition-duration linear,
- margin $fold-transition-duration ease-in-out;
+ transition: height tp.$fold-transition-duration ease-in-out,
+ opacity tp.$fold-transition-duration linear,
+ margin tp.$fold-transition-duration ease-in-out;
}
{&}-expanded &_p {
- margin-top: var(--bld-s);
+ margin-top: tp.cssVar('container-unit-spacing');
opacity: 1;
}
{&}-cpl &_p {
@@ -52,30 +55,30 @@
}
// Popup
- .#{$prefix}-popv {
- left: calc(-1 * var(--cnt-h-p));
+ .#{tp.$prefix}-popv {
+ left: calc(-1 * #{tp.cssVar('container-h-padding')});
position: absolute;
- right: calc(-1 * var(--cnt-h-p));
- top: var(--bld-us);
+ right: calc(-1 * #{tp.cssVar('container-h-padding')});
+ top: tp.cssVar('container-unit-size');
}
}
// Picker
-.#{$prefix}-cbzpv {
+.#{tp.$prefix}-cbzpv {
&_t {
- margin-top: var(--bld-s);
+ margin-top: tp.cssVar('container-unit-spacing');
}
}
// Graph
-.#{$prefix}-cbzgv {
- @extend %input;
+.#{tp.$prefix}-cbzgv {
+ @extend %tp-input;
height: auto;
overflow: hidden;
position: relative;
- &.#{$prefix}-v-disabled {
+ &.#{tp.$prefix}-v-disabled {
opacity: 0.5;
}
@@ -90,29 +93,29 @@
&_g {
cursor: pointer;
display: block;
- height: calc(var(--bld-us) * 5);
+ height: calc(#{tp.cssVar('container-unit-size')} * 5);
width: 100%;
}
// Guide
&_u {
opacity: 0.1;
- stroke: var(--in-fg);
+ stroke: tp.cssVar('input-fg');
stroke-dasharray: 1;
}
// Curve
&_l {
fill: transparent;
- stroke: var(--in-fg);
+ stroke: tp.cssVar('input-fg');
}
// Vectors
&_v {
opacity: 0.5;
- stroke: var(--in-fg);
+ stroke: tp.cssVar('input-fg');
stroke-dasharray: 1;
}
// Handles
&_h {
- border: var(--in-fg) solid 1px;
+ border: tp.cssVar('input-fg') solid 1px;
border-radius: 50%;
box-sizing: border-box;
height: 4px;
@@ -124,13 +127,13 @@
}
&:focus &_h-sel {
- background-color: var(--in-fg);
+ background-color: tp.cssVar('input-fg');
border-width: 0;
}
}
// Preview
-.#{$prefix}-cbzprvv {
+.#{tp.$prefix}-cbzprvv {
cursor: pointer;
height: 4px;
padding: 4px 0;
@@ -146,11 +149,11 @@
// Ticks
&_t {
opacity: 0.5;
- stroke: var(--mo-fg);
+ stroke: tp.cssVar('monitor-fg');
}
// Marker
&_m {
- background-color: var(--mo-fg);
+ background-color: tp.cssVar('monitor-fg');
border-radius: 50%;
height: 4px;
margin-left: -2px;
diff --git a/src/sass/_fps.scss b/src/sass/_fps.scss
index 2818d53..7a7b159 100644
--- a/src/sass/_fps.scss
+++ b/src/sass/_fps.scss
@@ -1,9 +1,11 @@
-.#{$prefix}-fpsv {
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
+
+.#{tp.$prefix}-fpsv {
position: relative;
&_l {
bottom: 4px;
- color: var(--mo-fg);
+ color: tp.cssVar('monitor-fg');
line-height: 1;
right: 4px;
pointer-events: none;
diff --git a/src/sass/_interval.scss b/src/sass/_interval.scss
index 11f8bb9..9dddf63 100644
--- a/src/sass/_interval.scss
+++ b/src/sass/_interval.scss
@@ -1,28 +1,31 @@
-.#{$prefix}-rslv {
+@use 'sass:math';
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
+
+.#{tp.$prefix}-rslv {
$slider-knob-width: 8px;
cursor: pointer;
padding-left: $slider-knob-width;
padding-right: $slider-knob-width;
- &.#{$prefix}-v-disabled {
+ &.#{tp.$prefix}-v-disabled {
opacity: 0.5;
}
&_t {
- height: calc(var(--bld-us));
+ height: calc(#{tp.cssVar('container-unit-size')});
position: relative;
&::before {
- background-color: var(--in-bg);
+ background-color: tp.cssVar('input-bg');
border-radius: 1px;
content: '';
height: 2px;
- margin-top: (-2px / 2);
+ margin-top: math.div(-2px, 2);
position: absolute;
top: 50%;
- left: (-$slider-knob-width / 2);
- right: (-$slider-knob-width / 2);
+ left: math.div(-$slider-knob-width, 2);
+ right: math.div(-$slider-knob-width, 2);
}
}
&_b {
@@ -31,10 +34,10 @@
position: absolute;
&::before {
- background-color: var(--in-fg);
+ background-color: tp.cssVar('input-fg');
content: '';
height: 2px;
- margin-top: (-2px / 2);
+ margin-top: math.div(-2px, 2);
position: absolute;
top: 50%;
left: 0;
@@ -42,10 +45,10 @@
}
}
&_k {
- @extend %button;
+ @extend %tp-button;
- height: calc(var(--bld-us) - 8px);
- margin-top: calc((var(--bld-us) - 8px) / -2);
+ height: calc(#{tp.cssVar('container-unit-size')} - 8px);
+ margin-top: calc((#{tp.cssVar('container-unit-size')} - 8px) / -2);
position: absolute;
top: 50%;
width: $slider-knob-width;
@@ -67,7 +70,7 @@
}
}
-.#{$prefix}-rsltxtv {
+.#{tp.$prefix}-rsltxtv {
display: flex;
&_s {
diff --git a/src/sass/_radio-grid.scss b/src/sass/_radio-grid.scss
index 24976a7..457790b 100644
--- a/src/sass/_radio-grid.scss
+++ b/src/sass/_radio-grid.scss
@@ -1,14 +1,16 @@
-.#{$prefix}-radgridv {
- border-radius: var(--elm-br);
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
+
+.#{tp.$prefix}-radgridv {
+ border-radius: tp.cssVar('blade-border-radius');
display: grid;
overflow: hidden;
gap: 2px;
- &.#{$prefix}-v-disabled {
+ &.#{tp.$prefix}-v-disabled {
opacity: 0.5;
}
- & .#{$prefix}-radv_b {
+ & .#{tp.$prefix}-radv_b {
border-radius: 0;
}
}
diff --git a/src/sass/_radio.scss b/src/sass/_radio.scss
index 611d3be..9b4e2c5 100644
--- a/src/sass/_radio.scss
+++ b/src/sass/_radio.scss
@@ -1,4 +1,6 @@
-.#{$prefix}-radv {
+@use '../../node_modules/@tweakpane/core/lib/sass/tp';
+
+.#{tp.$prefix}-radv {
&_l {
display: block;
position: relative;
@@ -10,18 +12,18 @@
top: 0;
}
&_b {
- @extend %button;
+ @extend %tp-button;
opacity: 0.5;
}
&_i:hover + &_b {
- background-color: var(--btn-bg-h);
+ background-color: tp.cssVar('button-bg-hover');
}
&_i:focus + &_b {
- background-color: var(--btn-bg-f);
+ background-color: tp.cssVar('button-bg-focus');
}
&_i:active + &_b {
- background-color: var(--btn-bg-a);
+ background-color: tp.cssVar('button-bg-active');
}
&_i:checked + &_b {
opacity: 1;
diff --git a/src/sass/plugin.scss b/src/sass/plugin.scss
index bb6feae..95ea49d 100644
--- a/src/sass/plugin.scss
+++ b/src/sass/plugin.scss
@@ -1,9 +1,6 @@
-// Import core styles
-@import '../../node_modules/@tweakpane/core/lib/sass/plugin';
-
-@import './button-grid';
-@import './cubic-bezier';
-@import './fps';
-@import './interval';
-@import './radio';
-@import './radio-grid';
+@use './button-grid';
+@use './cubic-bezier';
+@use './fps';
+@use './interval';
+@use './radio';
+@use './radio-grid';
diff --git a/src/tsconfig.json b/src/tsconfig.json
index f324fce..dbc2b33 100644
--- a/src/tsconfig.json
+++ b/src/tsconfig.json
@@ -1,7 +1,7 @@
{
"compilerOptions": {
"lib": ["DOM", "ES2015"],
- "moduleResolution": "Node",
+ "module": "node16",
"strict": true,
"target": "ES6"
}
diff --git a/test/browser.html b/test/browser.html
index d95b2e9..8a68cec 100644
--- a/test/browser.html
+++ b/test/browser.html
@@ -26,9 +26,10 @@
-
-
-