Comments (19)
Honsly i had this thought. Will check closer today
from blazorgooglemaps.
Objects are released from memory cache, but like you said not from JavaScript.
How you come with this conclusions? I mean i would like to monitor and to reproduce by myself.
from blazorgooglemaps.
from blazorgooglemaps.
It is not that it is impossible for me, i just dont want to waste time where someone already had done everything and know where to click and see bug.
I will wait for screenshots. Screenshots are always great :).
from blazorgooglemaps.
The attached screen shots are a series of actions...
home page 1.png
Fresh DOM starting at home page. Node count about 800
map page 2.png
Navigate to the map page whihc has heavy usage of your google map component. Node count about 3200
home page 3 before garbage collector.png as the file suggests, this is navigating away from map page back to the home page where we would expect a node count of about 800 again. but remains on about 3200.
home page 4 after gabage collector.png. clicking the garbage collector button in Chrome Dev Tools to trigger garbage collection, would expect the node count to return to 800. but instead remains high.
home page 4 after garbage collector - with JS Hack - I'e included one extra screen shot, following the same steps as aboive, but with my JS hack to delte the object array on Dispose() of Map Page. can see the node count returns to 850 (a little higher than before, but I can live).
from blazorgooglemaps.
Big thumb up for description. Also bug is very good catch. I would give you medal if i could :). Great work.
Back to topic. It is a bit complicated to remove. Just to clear all array it is a bit risky and could break a lot of people apps. So here is my suggestion. Map dispose is always called as expected. So when it is called then iterate through all array items and check if item have property map and map guid is same as disposed map. If true then remove. Problem that it finds only elements. Events isnt catched since they are promises.
I found some way but need more testing.
In a while you could inherit map component and on dispose call js function similar like this with map guid.
disposeMapElements(mapGuid) {
var keysToRemove = [];
for (var key in _blazorGoogleMapsObjects) {
if (_blazorGoogleMapsObjects.hasOwnProperty(key)) {
var element = _blazorGoogleMapsObjects[key];
if (element.hasOwnProperty("map")
&& element.hasOwnProperty("guidString")
&& element.map.guidString === mapGuid) {
keysToRemove.push(element.guidString);
}
}
}
for (var keyToRemove in keysToRemove) {
if (keysToRemove.hasOwnProperty(keyToRemove)) {
var elementToRemove = keysToRemove[keyToRemove];
delete window._blazorGoogleMapsObjects[elementToRemove];
}
}
},
from blazorgooglemaps.
I will try to test and release in week period.
from blazorgooglemaps.
from blazorgooglemaps.
You said code bellow solves your problem. So does it solve on app or while testing and clicking garbage collector button?
dispose: function () {
delete window._blazorGoogleMapsObjects;
},
from blazorgooglemaps.
from blazorgooglemaps.
Hope will not ruin anything big :).
So removed part where promises(events) was added to array and part where elements is removed by they dependency of map. Code bellow.
Like you said you have to waith for garbage collector to fire. I have sense that there is better way to remove them faster.
Please check if all you functionality works as expected with package 0.6.6. Finger crossed.
https://www.nuget.org/packages/BlazorGoogleMaps/0.6.6
disposeMapElements(mapGuid) {
var keysToRemove = [];
for (var key in _blazorGoogleMapsObjects) {
if (_blazorGoogleMapsObjects.hasOwnProperty(key)) {
var element = _blazorGoogleMapsObjects[key];
if (element.hasOwnProperty("map")
&& element.hasOwnProperty("guidString")
&& element.map.guidString === mapGuid) {
keysToRemove.push(element.guidString);
}
}
}
for (var keyToRemove in keysToRemove) {
if (keysToRemove.hasOwnProperty(keyToRemove)) {
var elementToRemove = keysToRemove[keyToRemove];
delete window._blazorGoogleMapsObjects[elementToRemove];
}
}
},
from blazorgooglemaps.
Have you tried @FlySpray316
Could you confirm that all good and i could close?
from blazorgooglemaps.
from blazorgooglemaps.
I've tested the 0.6.6 release... unfortunately the DOM Node count still seems to be increasing. :-(
Just to confirm, on dispose of the page, I'm calling Map.Dispose(); am I meant to be calling anything/something else to dispose?? if yes, let me know; I can re-run the test.
screenshots attached...
Home page with Fresh DOM Node Count...
Map Page with high DOM Node Count...
Home page with Hich DOM Node count BEFORE calling Garbage Collector...
Home page with High DOM Node count AFTER calling Garbage Collector...
While the node count does drop, it seems there are still references that are not getting released. If i was better with JS i would dive in and have a look, but I'd probably make it worse!! haha :)
This screenshot is me navigating to the map page and back to the home page several times, calling the Garbage Collector after each time.
from blazorgooglemaps.
Could you check number of element before and after with Object.keys(_blazorGoogleMapsObjects).length
Also after check what kind elements left in array _blazorGoogleMapsObjects . I assume removing it form array dont make dom node dissapear from stack. Aslo could you try to redirect from other page with refresh. As much as i read this is most reliable way to clear dom nodes.
Let my know your test results
from blazorgooglemaps.
@FlySpray316 did you make a new finding? Have you tried my suggestions?
from blazorgooglemaps.
Sorry i have not tired your suggestion yet, I've got to finish some other tasks first.
But in 3 weeks I can dedicate a full week to solving this. Will send you a note when I start work on it.
from blazorgooglemaps.
No rush. You are only one (i assume) which have such issue.
from blazorgooglemaps.
I will close this issue in couple weeks if i wont get any response.
from blazorgooglemaps.
Related Issues (20)
- Enabling Dependabot for repository
- AdvancedMarkerElementOptions - Content Invalid (not an instance of Node) HOT 13
- New method services.AddBlazorGoogleMaps("YOUR_KEY_GOES_HERE"); only is used in Maps, not other components HOT 1
- Blazor web app demo HOT 1
- Removed map HTMLElement from DOM still try to render map HOT 14
- Add Support for PinElement (AdvancedMarkerElement Customization) HOT 8
- AdvancedMarker from svg HOT 4
- Add way to set AdvancedMarker properties HOT 6
- Feature: Traffic, Transit and Bicycle Layer HOT 3
- Add support for rotation on Marker icon HOT 2
- Run js quality check with ChatGpt or similar quality tool HOT 4
- Incompatible with "Blazor Web App" Template HOT 7
- Property 'marker' not found Error HOT 4
- How to locate Label on top of Icon HOT 4
- AdvancedMarkerElement needs GetPosition or equivalent. HOT 4
- Long Click Listener HOT 2
- Feature. Add AdvancedMarkerElement Clustering HOT 3
- Add ability to set AdvancedMarkerElement Draggable Property HOT 2
- PlaceService GetDetails crash that JSON value could not be converted to GoogleMapsComponents.Maps.Places.PlaceResult[] HOT 3
- Blazor United HOT 10
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from blazorgooglemaps.