Use mutationObserver to track changes in the page #44

New issue

Closed

opened 2021-11-09 08:42:44 +00:00 by alicericci · 5 comments

alicericci commented

2021-11-09 08:42:44 +00:00

(Migrated from gitlab.com)

Using mutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to change from an active tracking system (checking at every tick every divs and loading all of their properties) system to an event based system (keeping the divs and properties in memory and updating them only when they change) to observe changes in the page.
Having all the divs and their properties could also be usefull for easy export and potentially for building a live broadcasted version of cascade

Using mutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to change from an active tracking system (checking at every tick every divs and loading all of their properties) system to an event based system (keeping the divs and properties in memory and updating them only when they change) to observe changes in the page. Having all the divs and their properties could also be usefull for easy export and potentially for building a live broadcasted version of cascade

alicericci commented

2021-11-09 08:48:01 +00:00

(Migrated from gitlab.com)

changed title from Use mutationObserver to track changes in the page{- /label idea-} to Use mutationObserver to track changes in the page

changed title from **Use mutationObserver to track changes in the page{- /label idea-}** to **Use mutationObserver to track changes in the page**

alicericci commented

2021-11-09 12:57:43 +00:00

(Migrated from gitlab.com)

marked this issue as related to #35

alicericci commented

2021-11-09 13:00:32 +00:00

(Migrated from gitlab.com)

Branch mutationObserver
Structure:
All cascade elements are kept into the els array. This is the cascade “database”.
A cascade element is composed of

the corresponding htmlNode
the css properties
an array containing its eventual children

When the page is loaded, all cascade htmlNode are turned into cascade elements. A mutation observer, listening for style changes is placed on them, as well as an other mutation observer listening for changes in childlist (if a new node is added or removed to them). The same mutation observer, listening for childlist changes, is also added to the body.

On every tick, all the cascade elements are interpreted. When a change is made to the DOM, the mutation observer callbacks are triggered and the corresponding cascade element is updated in the els array.

Branch mutationObserver Structure: All cascade elements are kept into the els array. This is the cascade “database”. A cascade element is composed of - the corresponding htmlNode - the css properties - an array containing its eventual children When the page is loaded, all cascade htmlNode are turned into cascade elements. A mutation observer, listening for style changes is placed on them, as well as an other mutation observer listening for changes in childlist (if a new node is added or removed to them). The same mutation observer, listening for childlist changes, is also added to the body. On every tick, all the cascade elements are interpreted. When a change is made to the DOM, the mutation observer callbacks are triggered and the corresponding cascade element is updated in the els array.

alicericci commented

2021-11-12 09:33:01 +00:00

(Migrated from gitlab.com)

Added computedProperties, an array containing all computed properties like the ratio or the surface, to the structure of the cascade element in commit a2a8e34c

Added computedProperties, an array containing all computed properties like the ratio or the surface, to the structure of the cascade element in commit a2a8e34c

raphaelbastide commented

2021-11-15 16:21:13 +00:00

(Migrated from gitlab.com)

After some tests, this seems to be a good change. The code also make more sense. Will confirm it with more use and tests. Thanks for the work.

raphaelbastide (Migrated from gitlab.com) closed this issue

2021-11-16 14:35:31 +00:00