From 72284ce2e0e378d353b3573a6216ad6f6dcd4425 Mon Sep 17 00:00:00 2001 From: Jaime A Torrealba C <63722373+JaimeTorrealba@users.noreply.github.com> Date: Tue, 21 May 2024 10:56:46 +0100 Subject: [PATCH] feat: re-remove tweakpane (#425) * feat(app)!: 313 re-uninstall tweakpane * chore: fix lint --- docs/.vitepress/config.ts | 1 - docs/component-list/components.ts | 1 - docs/guide/misc/use-tweakpane.md | 63 ------------------- package.json | 3 - playground/components.d.ts | 2 +- playground/src/pages/abstractions/Sampler.vue | 26 ++++---- pnpm-lock.yaml | 14 ----- src/core/misc/index.ts | 4 +- src/core/misc/useTweakPane/index.ts | 44 ------------- 9 files changed, 14 insertions(+), 144 deletions(-) delete mode 100644 docs/guide/misc/use-tweakpane.md delete mode 100644 src/core/misc/useTweakPane/index.ts diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index 5f1e13a8..1a38885d 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -151,7 +151,6 @@ export default defineConfig({ text: 'Misc', collapsed: true, items: [ - { text: 'useTweakpane', link: '/guide/misc/use-tweakpane' }, { text: 'Stats', link: '/guide/misc/stats' }, { text: 'Html', link: '/guide/misc/html-component' }, { text: 'StatsGl', link: '/guide/misc/stats-gl' }, diff --git a/docs/component-list/components.ts b/docs/component-list/components.ts index 0328e5d4..491a9a1e 100644 --- a/docs/component-list/components.ts +++ b/docs/component-list/components.ts @@ -102,7 +102,6 @@ export default [ { text: 'Misc', items: [ - { text: 'useTweakpane', link: '/guide/misc/use-tweakpane' }, { text: 'Stats', link: '/guide/misc/stats' }, { text: 'Html', link: '/guide/misc/html-component' }, { text: 'StatsGl', link: '/guide/misc/stats-gl' }, diff --git a/docs/guide/misc/use-tweakpane.md b/docs/guide/misc/use-tweakpane.md deleted file mode 100644 index e7cda032..00000000 --- a/docs/guide/misc/use-tweakpane.md +++ /dev/null @@ -1,63 +0,0 @@ -# useTweakPane - -::: warning - -useTweakPane is deprecated as of Cientos v3.7.0 and will no longer be part of this package. Please migrate to [`@tresjs/leches` package](https://github.com/Tresjs/leches) or [v-tweakpane](https://github.com/vinayakkulkarni/v-tweakpane) instead. - -::: - -[TweakPane](https://cocopon.github.io/tweakpane/) is a JavaScript library for creating a user interface for tweaking values of JavaScript variables. It's a great tool for fine-tuning parameters and monitoring value changes on your three.js applications. - -::: code-group - -```bash [pnpm] -pnpm add @tweakpane/core @tweakpane/essentials -D -``` - -```bash [npm] -npm install @tweakpane/core @tweakpane/essentials -D - -``` - -```bash [yarn] -yarn add @tweakpane/core @tweakpane/plugin-essentials -D -``` - -::: - -**TresJS** provides a composables called `useTweakPane` that creates a Tweakpane panel to your container so you can add tweaks to it. By default, the panel is created on the top right corner of the canvas and includes a FPS graph monitor to keep and eye on the performance of your scene. - -::: info -You can change the container of the panel by passing the `selector` option to the `useTweakPane` function. -::: - -## Basic usage - -```ts -import { useTweakPane } from '@tresjs/cientos' - -const { pane } = useTweakPane() - -const experiment = reactive({ - clearColor: '#000000', - alpha: true, - shadow: true, -}) - -pane.addInput(experiment, 'clearColor', { - label: 'Clear Color', - colorMode: 'hex', -}) - -pane.addInput(experiment, 'alpha') -``` - -The result will be something like this: - -![](/use-tweakpane.png) - -## Options - -| Name | Type | Default | Description | -| :----------- | -------- | ----------- | -------------------------------------------------------------- | -| **selector** | `string` | `undefined` | The selector of the container where the panel will be created. | diff --git a/package.json b/package.json index d1369ced..7347366a 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,6 @@ "peerDependencies": { "@tresjs/core": ">=3.2", "three": ">=0.133", - "tweakpane": ">=3.0.0", "vue": ">=3.3" }, "dependencies": { @@ -70,7 +69,6 @@ "@release-it/conventional-changelog": "^8.0.1", "@tresjs/core": "4.0.0-next.1", "@tresjs/eslint-config": "^1.0.0", - "@tweakpane/core": "^1.1.9", "@types/node": "^20.12.10", "@types/three": "^0.164.0", "@typescript-eslint/eslint-plugin": "^7.8.0", @@ -86,7 +84,6 @@ "rollup-plugin-analyzer": "^4.0.0", "rollup-plugin-visualizer": "^5.12.0", "three": "^0.164.1", - "tweakpane": "^3.1.10", "typescript": "^5.4.5", "unocss": "^0.59.4", "vite": "^5.2.11", diff --git a/playground/components.d.ts b/playground/components.d.ts index b8e54cdd..d54b8cdb 100644 --- a/playground/components.d.ts +++ b/playground/components.d.ts @@ -1,10 +1,10 @@ /* eslint-disable */ -/* prettier-ignore */ // @ts-nocheck // Generated by unplugin-vue-components // Read more: https://github.com/vuejs/core/pull/3399 export {} +/* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { AkuAku: typeof import('./src/components/AkuAku.vue')['default'] diff --git a/playground/src/pages/abstractions/Sampler.vue b/playground/src/pages/abstractions/Sampler.vue index 1e103e0e..907bd53b 100644 --- a/playground/src/pages/abstractions/Sampler.vue +++ b/playground/src/pages/abstractions/Sampler.vue @@ -1,7 +1,9 @@ @@ -36,7 +34,7 @@ pane.addInput(state, 'count', { - + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4cdeb62b..ad6c9c9a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,9 +39,6 @@ importers: '@tresjs/eslint-config': specifier: ^1.0.0 version: 1.0.0(@vue/compiler-sfc@3.4.27)(eslint@9.2.0)(typescript@5.4.5) - '@tweakpane/core': - specifier: ^1.1.9 - version: 1.1.9 '@types/node': specifier: ^20.12.10 version: 20.12.12 @@ -87,9 +84,6 @@ importers: three: specifier: ^0.164.1 version: 0.164.1 - tweakpane: - specifier: ^3.1.10 - version: 3.1.10 typescript: specifier: ^5.4.5 version: 5.4.5 @@ -1780,10 +1774,6 @@ packages: engines: {node: '>=10.13.0'} dev: true - /@tweakpane/core@1.1.9: - resolution: {integrity: sha512-9tq+KAhaqPiOgsFyLPAz1IMXkVfhRqxGzAgy1ps3As6o3W7XjnU7sev6OlD/Z+Pzw8uZVMukkSHf2e0uCU6u0A==} - dev: true - /@tweenjs/tween.js@23.1.2: resolution: {integrity: sha512-kMCNaZCJugWI86xiEHaY338CU5JpD0B97p1j1IKNn/Zto8PgACjQx0UxbHjmOcLl/dDOBnItwD07KmCs75pxtQ==} @@ -7128,10 +7118,6 @@ packages: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} dev: true - /tweakpane@3.1.10: - resolution: {integrity: sha512-rqwnl/pUa7+inhI2E9ayGTqqP0EPOOn/wVvSWjZsRbZUItzNShny7pzwL3hVlaN4m9t/aZhsP0aFQ9U5VVR2VQ==} - dev: true - /type-check@0.4.0: resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} engines: {node: '>= 0.8.0'} diff --git a/src/core/misc/index.ts b/src/core/misc/index.ts index 7bbcc888..501110f3 100644 --- a/src/core/misc/index.ts +++ b/src/core/misc/index.ts @@ -1,9 +1,7 @@ -import { useTweakPane } from './useTweakPane' - import { Stats } from './Stats' import { StatsGl } from './StatsGl' import { BakeShadows } from './BakeShadows' import Html from './html/HTML.vue' import { useGLTFExporter } from './useGLTFExporter' -export { useTweakPane, Html, Stats, StatsGl, BakeShadows, useGLTFExporter } +export { Html, Stats, StatsGl, BakeShadows, useGLTFExporter } diff --git a/src/core/misc/useTweakPane/index.ts b/src/core/misc/useTweakPane/index.ts deleted file mode 100644 index 0a7dda9d..00000000 --- a/src/core/misc/useTweakPane/index.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { onMounted, onUnmounted } from 'vue' -import { Pane } from 'tweakpane' -import { useRenderLoop } from '@tresjs/core' -import { useLogger } from '../../../composables/useLogger' - -type TweakPane = Pane & { addBlade: (blade: any) => void, addInput: (blade: any) => void } -let pane: TweakPane - -export const useTweakPane = (selector = 'body') => { - if (!pane) { - pane = new Pane({ - container: document.querySelector(selector) as HTMLElement, - }) as TweakPane - pane.element.style.position = 'absolute' - pane.element.style.top = '1rem' - pane.element.style.right = '1rem' - pane.element.style.zIndex = '9999' - } - - const { logWarning } = useLogger() - - logWarning('useTweakPane is deprecated as of Cientos v3.7.0 and will no longer be part of this package. Please migrate to @tresjs/leches package https://github.com/Tresjs/leches or v-tweakpane https://github.com/vinayakkulkarni/v-tweakpane instead.') - // eslint-enabled - - /** - * Disposes the TweakPane instance. - * - */ - function disposeTweakPane() { - if (pane) { - pane.dispose() - } - } - - onMounted(() => { - const { resume } = useRenderLoop() - resume() - }) - onUnmounted(() => { - disposeTweakPane() - }) - - return { pane, disposeTweakPane } -}