search

cocopon / tweakpane

:control_knobs: Compact GUI for fine-tuning parameters and monitoring value changes
https://tweakpane.github.io/docs/
MIT License
3.57k stars 90 forks source link

Panel doesn't collapse #573

Closed diramazioni closed 1 year ago

diramazioni commented 1 year ago

The pane or folder doesn't collapse when clicked

        const pane = new Pane({title: 'control'})
        const panel = pane.addFolder({title: 'folder'})
cocopon commented 1 year ago

The latest version works fine in the official document: https://tweakpane.github.io/docs/

Please share your environment (Tweakpane version, web browser, more code, screencasts, etc.) to reproduce the issue.

diramazioni commented 1 year ago

Hi, thanks for looking into this. The version that got downloaded is "tweakpane": "^4.0.1", The version present on the doc does work also with my browser (Firefox 117 on Linux Mint) and correctly collapse. I think this might be related to svelte... I've made a stackblitz svelte example project where you can see the issue: recorded

cocopon commented 1 year ago

I can only see the welcome screen... is it a correct URL?

image

BTW the pane in the screencast seems to be duplicated. Could it be that multiple panes are instanciated and are overlapping?

image
diramazioni commented 1 year ago

Sorry I guess it got reset now it should work again this is the added code in +page.svelte


    import { browser } from '$app/environment'
    import { Pane } from 'tweakpane'

    if(browser) {
        let PAR = {
            theme: 'dark',
            bgColor: '#2b665b',
            fgColor: '#000000',
        }
        const pane = new Pane({title: '3D graph control'})
        const panel = pane.addFolder({title: 'colors'}) 

        panel.addBinding( PAR, 'theme', {
            options: {Dark: 'dark', Light: 'light'}
        }).on('change', ({value}) => {
            PAR.theme = value
        });     
        panel.addBinding(PAR, 'bgColor').on('change', ({value}) => {
            PAR.bgColor = value
        });

        panel.addBinding(PAR, 'fgColor').on('change', ({value}) => {
            PAR.fgColor = value
        });
    }
cocopon commented 1 year ago

Hmm, it looks fine in my environment:

https://github.com/cocopon/tweakpane/assets/602961/2978ad09-7905-4cd7-9850-65e659ba9d6b

diramazioni commented 1 year ago

Interestingly, I've checked and in Linux works correctly in Chromium but not in Firefox. recorded

cocopon commented 1 year ago

Interesting. I modified the code a bit, and how about the result of running the page below?

https://stackblitz.com/edit/sveltejs-kit-template-default-h7jpdj?file=src%2Froutes%2F%2Bpage.svelte

If you get a message pane created: # multiple times, or a number greater than 1, it means that the code is executed repeatedly and created multiple panes. In this case, it's caused by Svelte or StackBlitz, not Tweakpane.

diramazioni commented 1 year ago

nope, only one time. (Firefox 117.0.1 (64 bit))

diramazioni commented 1 year ago

I remind you that I wrote "The version present on the doc does work also with my browser" (Firefox) I don't know if you introduced some breaking changes in the shipped version. Generally speaking I tend to exclude Svelte in the equation, especially when code is run inside if (browser) {} is client-side related only

cocopon commented 1 year ago

I remind you that I wrote "The version present on the doc does work also with my browser" (Firefox)

Thank you for pointing that out, I missed it.

I don't know if you introduced some breaking changes in the shipped version.

The code that is used in the document is completely the same as the shipped version.

Generally speaking I tend to exclude Svelte in the equation

I'm not familiar with Svelte, but the screencast shows that multiple panes are stacked in one location. It may come from something in your environment e.g. live-reloading...?

image

If you can reproduce the issue, can you open the browser inspector and check the DOM structure? In my estimation, this is not a bug related by folder expansion, and multiple panes will be found on the DOM tree.

diramazioni commented 1 year ago

I checked that without using an inside folder, collapsing work (like in the docs that doesn't use a folder) With the folder inside I do see repeated elements in the DOM

cocopon commented 1 year ago

Could you share a screenshot and the entire DOM when the problem occurs? You can copy the code by right clicking <html> in DevTools and choosing Copy -> Outer HTML.

image

diramazioni commented 1 year ago

Dear Hiroki Kokubun, I swaped my branch and run pnpm i again, and the problem is suddenly gone, I think this might depends on the live rebuild / caching I don't know. I close this for now, If I find again the problem I'll let you know. Thanks again for developing tweakpane and taking seriously bug reports, it's not an easy job I know