Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Docs] - HTML examples are broken #368

Open
5 tasks done
alvarosabu opened this issue Mar 19, 2024 · 8 comments
Open
5 tasks done

[Docs] - HTML examples are broken #368

alvarosabu opened this issue Mar 19, 2024 · 8 comments
Labels
bug Something isn't working docs Improvements or additions to documentation

Comments

@alvarosabu
Copy link
Member

Describe the bug

The examples under https://cientos.tresjs.org/guide/misc/html-component.html#html are currently broken

Reproduction

https://cientos.tresjs.org/guide/misc/html-component.html#html

Steps to reproduce

No response

System Info

No response

Used Package Manager

npm

Code of Conduct
@alvarosabu alvarosabu added bug Something isn't working docs Improvements or additions to documentation labels Mar 19, 2024
@andretchen0
Copy link
Contributor

andretchen0 commented Mar 19, 2024 •
edited
Loading

Edit: Collecting bug symptoms and reproductions here

Symptoms

  • Cientos Html components without the transform prop appear to work properly. Only components with transform exhibit the bug.
  • Looking in the browser's dev tool's Inspector, it appears that the HTML elements are in the DOM. But they're not visible on screen.
  • It appears that the same error occurs in the Cientos playground: on the page /misc/html after running pnpm run playground in Cientos' root.
  • In the demos, the component appears after camera move.
  • In the component code, modifying the css styles between onLoop calls will cause the component to render on-screen.
  • By changing vNode props for the first few ticks of onLoop, the component will appear on screen after a few ticks.

Reproductions

@alvarosabu
Copy link
Member Author

Its weird, now I can see them on the page https://cientos.tresjs.org/guide/misc/html-component.html#html

@andretchen0
Copy link
Contributor

andretchen0 commented Mar 19, 2024 •
edited
Loading

Non-unique HTML id attributes

Fwiw, looking at the DOM, there's an HTML problem. The Cientos Html component uses id attributes. If more than one Html component is created, even in separate TresCanvass, at least these ids will be non-unique: "inner", "outer". HTML id's are designed to be unique in the document.

cientos/src/core/misc/html/HTML.vue

Line 194 in 55ca2bf

vnode.value = createVNode('div', { id: 'outer', style: styles.value }, [

@alvarosabu Do you want this to be opened as a separate issue?

Screenshot 2024-03-19 at 15 40 00

Edit: the child of the 'inner' node uses the Scene's uuid as its id attribute. So it won't be unique unless it's the only Cientos <Html> component in the <TresCanvas />.

cientos/src/core/misc/html/HTML.vue

Line 198 in 55ca2bf

id: scene?.value.uuid,

@alvarosabu
Copy link
Member Author

Ohhh, probably we need to add a hash or a class instead

@andretchen0
Copy link
Contributor

Ohhh, probably we need to add a hash or a class instead

At first glance, it doesn't appear that the id's are used for anything. I can't find any other references to "outer" or "inner" so far anyway.

So maybe they can just be removed.

@andretchen0
Copy link
Contributor

andretchen0 commented Mar 21, 2024 •
edited
Loading

Hey @alvarosabu !

This particular bug appears to come down to the overflow here:

cientos/src/core/misc/html/HTML.vue

Line 178 in 55ca2bf

el.value.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none;overflow:hidden;'

Removing it and reloading causes the items to appear on-screen immediately after creation, as expected.

Fix(?)

Add the above styles to a regular DOM element, rather than an element managed by Vue:

  • create a wrapper for the entire component with const wrapper = document.createElement('div')
  • append el.value to wrapper
  • assign all the CSS above to wrapper
  • append wrapper to the renderer.DOMElement.parent

... then the component seems to work as expected.

The eventual solution will need to remove the wrapper when the component is unmounted.

Tested in Chrome and FF on Mac.

I've come across some other "fixes" by chance, but they're messier.

@MikasaBili
Copy link

The problem occurs when installing dependencies with npm, but it doesn't happen with yarn

@xwillorg
Copy link

Is there an update to this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working docs Improvements or additions to documentation
Projects
Team Board
Status: No status
Milestone
No milestone
Development

No branches or pull requests
4 participants
@alvarosabu @MikasaBili @andretchen0 @xwillorg