I try to save the content of my last konva stage object in a Map in window object. My original aim is to minimize the loading time when I want to open the same page that has been drawn. Things are going well within my own frame. However, when I load my frame which has Konva content in another window (which becomes the parent of my Konva frame), the konva frame crashes and the console does not show any errors.
My code snipplet looks like this:
var xjGraph = cachedGraphObject; //Konva graph that already drawn, loaded from a js Map in parent window
var containerDOM = document.getElementById(oldId);
var konvaJsContent = xjGraph.getStage().content; //get the div of "konvajs-content" class
var oldChild = containerDOM.firstChild;
oldChild.remove();
containerDOM.appendChild(konvaJsContent); //remove the old div of "konvajs-content" and replace it with the one that I want to show; I could use replaceChild() here, but I get the same result
PS: If there is another way to save a stage in browser and load it when I need it for later use, please kindly help. Very much appreciated!
Related
I've just started using codepilot today and am going around in circles a bit.
I have written the following in a file called test.html:
//write a simple webpage to ask a user to select between two pictures
//and then display the selected picture
I was hoping to get a boilerplate webpage based on the comment but instead I get single lines which I must accept in turn, as follows:
//create a variable to hold the selected picture
var selectedPicture;
//create a variable to hold the selected picture's name
var selectedPictureName;
//create a variable to hold the selected picture's path
var selectedPicturePath;
//create a variable to hold the selected picture's width
var selectedPictureWidth;
//create a variable to hold the selected picture's height
var selectedPictureHeight;
//create a variable to hold the selected picture's alt text
var selectedPictureAltText;
//create a variable to hold the selected picture's title
var selectedPictureTitle;
//create a variable to hold the selected picture's caption
var selectedPictureCaption;
I'm getting a very very long sequence of variables to hold the picture properties.
Is it possible to just get codepilot to produce a best effort boilerplate of a few hundred lines of code without having to step through every line?
If I ask ChatGPT your question it returns the answer you desire.
So maybe you try ChatGPT for this general questions. I guess Autopilot is more for helping during writing code.
I have an app that uses ExtJS 3.3.0. It uses an EditorGridPanel in which after the store is reloaded - I would like it to preserve the scroll position of the grid rather than sending it back up to the top.
Because this is an earlier version of ExtJS - this DOES NOT work:
viewConfig: {
preserveScrollOnRefresh: true
}
So far the only thing I can come up with is to save the position of the scroll bar prior to loading - and then reset the position once the reload is complete.
I can get as far as saving the position:
var scrollPos;
bodyscroll: function(sl, st) {
scrollPos = st;
},
However I can't figure out how to set the position afterwards.
Any suggestions?
Thanks in advance.
There might be multiple ways to do this but one way is to use the scroller element, which is accessible through the grid's gridview. See fiddle here: Grid scoll save/restore.
To get scroll value (which you've already got figured out):
var top = grid.getView().scroller.getScroll().top;
To restore:
grid.getView().scroller.scrollTo('top',top);
I'm reading an imageOverlay URL from an ArcGIS webserver that uses the leaflet getBound() coordinates as part of the URL (we have large maps that are filtered for the current window 'extent'). Apologies for not including the actual path (I'm working with sensitive client data). Eg:
http://myarcgiswebserver.com/MapServer/export/dpi=96&format=png32&bbox=27.119750976562504%2C-31.194007509998823%2C32.39044189453126%2C-29.692824739380754&size=1719%2C434
[bbox] = current imageBounds
When dragging my map the imageOverlay url is updated correctly but my leaflet window is no longer aligned to the imageBound values that were set when first adding the imageOverlay which results in a skewed output (this is my assumption):
The only workaround is to remove the existing imageOverlay and add a new one (which ruins the user experience as the map disappears then reappears each time the window is dragged or zoomed).
Am i approaching this problem incorrectly or would the introduction of a function to update the current imageBounds resolve this? Perhaps not a new function but the expansion of setUrl with additional parameters...?
Many thanks for any feedback...
As #ghybs pointed out, your use case might be better served by using the WMS
interface of your ArcGIS server.
Anyway, you say
The only workaround is to remove the existing imageOverlay and add a new one (which ruins the user experience as the map disappears then reappears each time the window is dragged or zoomed).
Well, that glitch is due to you probably doing something like:
Remove old overlay
Add new overlay
Wait until the image is received from the network
Wait one frame so the new overlay is shown
and instead you should be doing something like:
Add new overlay
Wait until the image is received from the network
Remove old overlay
Wait one frame so the new overlay is shown
The problem is just the async wait and the possible race conditions there, but should be easy to hack together, e.g.:
var activeOverlay = null;
var overlayInRequest = null;
map.on('moveend zoomend', {
// If we are already requesting a new overlay, ignore it.
// This might need some additional debouncing logic to prevent
// lots of concurrent requests
if (overlayInRequest) {
overlayInRequest.off('load', showOverlay);
}
overlayInRequest = L.imageOverlay( computeUrl( map.getBounds() ), myOverlayOptions );
overlayInRequest.on('load', showOverlay);
});
function showOverlay(ev) {
activeOverlay.remove();
activeOverlay = overlayInRequest;
activeOverlay.addTo(map);
overlayInRequest = undefined;
}
If you use an ImageOverlay but change its url dynamically, with a new image that reflects a new bounding box, then indeed that is the reason for the behaviour you describe: you display an image that has been generated using a new bbox, but positioned in the initial bbox, since the image overlay remains at the same geographical position on the map.
Instead, it sounds to me that you should use a TileLayer.WMS.
It would automatically manage the bounding box update for you. You may need to find the correct options to fit your service provider required URL syntax, though.
Example: http://playground-leaflet.rhcloud.com/yel/1/edit?html,output
I have a long form with comboboxes and buttons that add element to the form. Every time combobox's value gets upldated or elements get added, it scrolls up to the top of the form. I want the scrollbar to retain its position. I tried saving current scroll position by doing
this.myForm.getScrollPosition();
But I get getScrollPosition is not a function error.
Any help on this?
If you are using extjs there is a way to manipulate the scroll using the Ext.dom.Element class, each component in Extjs inherits from it, then if you add a new component that modifies the height or width of your form, you can first get the height and width of that component using:
var newcompwidth = comboboxexample.getWidth();
var newcompheight = comboboxeample.getHeight();
Later you can modify the scroll value using scrollTo method like this:
myformcontainer.getEl().scrollTo('Top',myformcontainer.getEl().getScroll().top - newcompheight);
myformcontainer.getEl().scrollTo('Top',myformcontainer.getEl().getScroll().left - newcompwidth);
there are other methods like scrollBy or scroll but I didn't test it yet, I guess this will help you.
the docs: http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.dom.Element
I am developing a chrome extension (content script) to access web page content. I use the DOM to access all elements in page.
My code does not work correctly when the web page contains "frameset". In this matter I can count the frame number but I can't access to the frame content.
I use this code to count frame objects available on current page :
for frameset :
parent.frames.length
and for iframe :
document.getElementsByTagName("iframe").length
but the following code does not work :
parent.frames[0]
and returns "undefined".
My question:
How can I access to frame set elements inside a chrome extension (for both iframe and frameset)?
Similar to how Jerinaw approached it, I did the following via jQuery:
// Find the frame
var frame = $(document).find("frame[name='nameOfFrame']")[0];
// Callback once frame's internals are loaded
$(frame).load(function() {
accessFrame();
});
function accessFrame() {
// The following line is really important to accessing the frame's content.
var frameContent = frame.contentDocument;
// Notice that $(".objectSelectorClass") won't discover the object you're hunting for. You have to find it within the frame's contentDocument.
var objectInFrame = $(frameContent).find(".objectSelectorClass");
var objectInFrame_AlternateSyntax = $(".objectSelectorClass", frameContent)
// do stuff to objectInFrame
}
I'm running into the same problem. The frames are not iframes and they are in a frameset. What I had to do was an onload (for some reason addEventListener isn't working) to the frame but through it's contentWindow
for example:
From the main document
document.querySelector('#SomeFrameSelector').contentWindow.document.body.onload
Accessing the frame this way got me to the frames document and allowed me to attach the onload. Once fired using the same selector I was able to modify the frames content.