I am using Konva JS, which will have lots of elements added on stage which will be added on different user actions. Sometime I need to destroy this elements on certain user action. My code is working fine, it's destroying the required element, but not from UI. On next user action it will automatically removed from screen/UI. My elements(a rect and a img)are wrapped inside a group , and I am trying to destroy this group.
So I think my issue is : Stage/Layer is not getting refreshed on "Destroy".
Thanks in advance
If you are using Konva JS over ReactJS framework, make sure to retrieve the right list of object before rendering. To delete a node, delete it from state by resetting a new value without the node to delete, so that the view will be automatically rerendered.
Related
We have built custom state saving functionality into our web app, based largely on the "Screenshot Manager" extension that Philippe created. We are having an issue with selection, wherein some components that where hidden when the state was saved are being shown when the state is loaded. I have replicated it on viewer.autodesk.io with the vanilla states manager code.
To be precise, components already visible in the viewer that are hidden by CTRL-clicking them on the model browser initially disappear in the viewer. However, when you save this state and then recall the state at a later time, the components hidden in this way re-appear.
Can you please investigate - is this a bug in the states manager code (we had a look but can't find it - the hidden components are being recorded in the state) or in the viewer itself?
Thanks,
Chris
I check what happen when you select components, those 2 states are incompatible: the child gets hidden but the parent gets isolated, hence it is displaying all its children and hide the rest of the components in the model.
In order to get the behavior you "would" expect, you would need to hide all components without isolating the parent sub-assemlbly, then create your first state, then hide the child, create your second state. You may achieve that by writing your handler when clicking a browser node. For that you would need to implement your own ModelStructurePanel.
I've got a basic example which can help you getting started:
ModelStructurePanel
I will take a look at the click handler and add an example there. For the time being, you can check in the source of the viewer3D.js which methods you need to overwrite.
Hope that helps
I've already asked a similar question, but I really can't figure out how to connect these elements together. I'm still not very good with Handlers, and I guess my question is:
How can I access UI Widgets (and their children) while outside of the doGet() function?
My use case is this: I have a list of projects/IDs. I have all the data I want based on the ID that will populate the Project Details tab of this application. I created 'unique' Buttons for each of these Projects, and threw them into a Grid. Now, I want to generate the Project Details (detailPanel) Widgets specifically for each Button if/when it is clicked.
I have the Project ID attached to each Button (uniquely) through a Hidden, but I can't seem to attach the Project Details tab (detailPanel) to the Button so that, when clicked, I can set the values for the TextBox, DateBox, ListBox, etc. Widgets of the detailPanel.
I think I'm missing something obvious about this. I want to avoid attaching each child Widget of the detailPanel as a callbackElement of the Button at all costs. There are around 40 elements (I've lost count), and it seems really inefficient. I'm almost sure that if I can add one Widget as a callback element, that I get access to all child Widgets. But I tried, and that doesn't seem to be the case.
Here is the link to the public UiApp, which shows the UI. And the sister Script Project (uneditable).
You dont need to add callback elements that you will write to, callback elements are only for reading their data. If the detailspanel id is dynamic have a hidden that has its id stored inside and pass it to the handler. from your handler you getelementbyid and set its data.
I am facing one strange issue in my application.
I want to duplicate UI on two different tabs (i.e two different tabs will hold same VBox Object in its container).
What I am expecting is rather than creating two different VBox object to add to Tab1 & Tab2 I will create one single VBox Object,fill it with desired contents and then add same object to Tab1 & Tab2.
What is currently happening is If I add that UI to Tab1 only then it is displayed properly.But If I add same object to Tab2 then it disappears from Tab1.
Below is sample code I am using.
#FXML
private Tab tab1, tab2;
Label label=new Label("Sample");
tab1.setContent(label);
tab2.setContent(label);
What is my assumption here it in both tab content I will see Sample Text.
But Sample text is only shown in Tab2 and not Tab1.(Tab1 is shown empty.)
I am newbie in Javafx so please bear with me if I am asking a stupid question :)
The Node which is the base class for all JavaFX graphical elements, is a member of a tree structure. As such, each node can have at most one parent. So obviously, under the scenes, when you put your VBox to another tab, JavaFX assigns it to another parent. In the same time it removes it from the old parent, so as to keep the node tree consistent.
I think you would have better chance either:
Implementing a component that encapsulates the creation of the the VBox and its children, if you only want code reuse.
Live with the fact that the VBox will be only at one tab at a time. You will have to listen to some tab activation event and assign the VBox to the activated tab every time.
I have a basic ASP.Net MVC 3 application which has a number of controllers and a number of actions (and subsequently views)
A common feature of the application is to show a pop-up dialog window for basic user input. One of the key features of this dialog process is a faded mask that gets shown behind the dialog box.
Each of these dialog window controls is in a separate Partial View page.
Now, some view pages may use multiple dialog boxes, and therefore include multiple partial views in them - which as is would mean multiple instances of the "mask" element.
What I am trying to find a solution for is to only need to create one instance of a "mask" element regardless of the number of dialog partial views I include, and then the script in each partial dialog will have access to this element (so basically it just needs to be on the page somewhere)
The only real idea I have come up with so far is to add the "mask" element to the master page (or in the original view page) and this will mean it only gets added once. The problem here is that it will be added even when it is not needed (albeit one small single element)
I can live with this, but I would like to know if there is a better way to handle these kinds of scenarios?
A quick idea that came to mind is some kind of master page inheritance hierarchy, So I may have a DialogMasterPage that inherits from the standard current master page. How does that sound for an approach?
Thanks
To do something like this, where each module can register their need for a certain thing in the master page, you can use HttpContext to store a flag of whether you need to write the mask div, and just set that property in each partial. At the end of the master page, if the flag is set, you can then write the mask div if its set to true.
Obviously to make this cleaner you could wrap it all in an HtmlHelper extension or something.
My initial thought is for you to use something like jQuery UI where it handles the masking for you or if you are using something custom you can load the content for the dialog via ajax then show it in the single dialog on the master page.
I'm trying to figure out how to bind a javascript event to a select element in GWT, however the select element isn't being built in GWT, but comes from HTML that I'm scraping from another site (a report site from a different department). First, a bit more detail:
I'm using GWT and on load, I make an ajax call to get some HTML which includes, among other things, a report that I want to put on my page. I'm able to get the HTML and parse out the div that I'm interested in. That's easy to display on my page.
Here's where I get stuck: On the portion of the page I'm using, there's a select element which I can easily locate (it has an id), but would like to capture event if my user changes that value (I want to capture changes to the select box so I can make another ajax call to replace the report, binding to the select on that page, and starting the whole process again).
So, I'm not sure how, once I get the HTML from a remote site, how to bind an event handler to an input on that fragment, and then insert the fragment into my target div. Any advice or pointers would be greatly appreciated!
How about this:
Element domSelect = DOM.getElementById("selectId");
ListBox listBox = ListBox.wrap(domSelect);
listBox.addChangeHandler(new ChangeHandler() {
void onChange(ChangeEvent event) {
// Some stuff, like checking the selected element
// via listBox.getSelectedIndex(), etc.
}
});
You should get the general idea - wrap the <select> element in a ListBox. From there, it's just a matter of adding a ChangeHandler via the addChangeHandler method.