I am making a flowchart editor using jsplumb. In flowchart connector demo of jsplumb, we could make drag and drop connection from one side of div, i want that div to accept and make connection from all four sides.
Thanks.
use endpointoption
and set isSource:true, isTarget:true
to make each endpoint play both role
If you want endpoints to move to any side of the div, then you should use Dynamic Anchors:
These are Anchors that can be positioned in one of a number of locations, choosing the one that is most appropriate each time something moves or is painted in the UI.
There is no special syntax to creating a DynamicAnchor; you just provide an array of individual Static Anchor specifications
To avoid that you can use Default Dynamic Anchor instead
jsPlumb provides a dynamic anchor called "AutoDefault" that chooses from TopCenter, RightMiddle, BottomCenter and LeftMiddle
For example when adding, endpoint can be specified like this:
var anEndpoint = {
endpoint: "Rectangle",
isSource: true,
isTarget: true,
anchor:"AutoDefault"
};
To try it, use this fiddler
Refer to jsPlumb docs for more info
Related
In my Vaadin (v.23.2.6) application I am creating a bean of class Book. This bean has set of tags.
Tags are retrieved from the database and contain two properties - tagName and tagDescription.
In my UI form I specified MultiSelectComboBox for Tags.
this.tagsField = new MultiSelectComboBox<>("Tags");
this.tagsField.setAllowCustomValue(true);
this.tagsField.setAutoOpen(false);
this.tagsField.setItemLabelGenerator(Tag::getTagName);
It is working, but I do want to display value of tagDescription when cursor is hovering over the tagName in the selection list.
What kind of event listener I can use for that purpose? Shall I use Notification or there is something else that can help me with this implementation?
Please advise.
While it's technically possible, you don't want to listen to hover (mouseover) events on the server. That's overkill and will lead to a lot of unnecessary network traffic. Instead, you can take care of it in the client with a Renderer. For example, using the standard HTML title attribute:
tagsField.setRenderer(LitRenderer.<Tag>of(
"<span title='${item.description}'>${item.name}</span>")
.withProperty("description", Tag::getTagDescription)
.withProperty("name", Tag::getTagName)
);
I've searched thru Corvid docs and Stack, not finding anything.
Is there a way to appendChild() in Wix Corvid(Code)?
EDIT: Wix does not allow DOM access directly. I assumed that people answering this would know i was looking for an alternative to appencChild and knew this method could not be used as is in Wix.
so to clarify: is there a way to add a child to a parent element using Wix's APIs?
It depends what you are trying to achieve,
the only thing off the top of my head is adding more items to a repeater
which you can do by first getting the initial data from the repeater, adding another item to array and reassign the data property of the repeater
const initialData = $w('#repeater').data
const newItem = {
_id: 'newItem1', // Must have an _id property
content: 'some content'
}
const newData = [...initialData, newItem]
$w('#repeater').data = newData
https://www.wix.com/corvid/reference/$w.Repeater.html#data
In Corvid, you cannot use any function which accesses the DOM.
Coming from one of the developers of Corvid:
Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w. One small exception is the $w.HtmlComponent (which is based on an iFrame). This element was designed to contain vanilla HTML and it works just fine. You just can't try to trick it by using parent, window, top, etc.
Javascript files can be added to your site's Public folder, but the same limitations apply - no access to the DOM.
Read more here: https://www.wix.com/corvid/forum/main/comment/5afd2dd4f89ea1001300319e
Lets say I am creating a bar chart using Recharts, how would i create a custom component for each of the following Recharts components:
XAxis, YAxis, Tooltip, Legend, CartesianGrid, Cell, and Bar
The reason for this s because i am planning to create a chart with a lot of props and wish to separate all the default props and customization in their own individual component for the list component above.
I have tried just putting the CartesianGrid in a react component and the grid will not show
Any ideas?
It seems that you want to wrap the existing Recharts provided components in a custom component for better organization of your code.
This is currently not supported directly by Recharts, as they check for the type of element that you are rendering and if it does not match one of the allowed types it does not get rendered.
For ex:
<LineChart>
<Line></Line>
</LineChart>
would display a line correctly,
But
function MyLine(props) {
return <Line></Line>
}
<LineChart>
<MyLine />
<LineChart>
would not render the line.
This is because, recharts figures out that the MyLine component is not allowed and hence would not be displayed.
This is a big problem as it does not allow us to reuse or compose components.
But there are some workarounds, one of them being calling your custom component as a function directly:
<LineChart>
{
MyLine({})
}
</LineChart>
It also seems like there are no plans to provide such an api in future. All such issues on their github are already closed, without providing a solution.
https://github.com/recharts/recharts/issues/412
https://github.com/recharts/recharts/issues/41
https://github.com/recharts/recharts/issues/1470
I'm having a problem using a mat-sidenav with position="end" inside a mat-sidenav-container that is part of a custom component. The custom component is essentially the mat-sidenav-container, the left side mat-sidenav, plus ng-content slots for the left sidenav content, page content, and an optional right mat-sidenav.
Sample: https://stackblitz.com/edit/angular-fxp7dt
The problem is that the right sidenav backdrop does not display. A DOM inspection shows that the right mat-sidenav is added inside the mat-content element which is probably why the backdrop is missing. If the same kind of layout is set up without a custom component for the mat-sidenav-container, the right side mat-sidenav is a sibling of mat-content and the other mat-sidenav.
Can anybody see what I might be doing wrong? Or does this seem like a bug in Angular Material?
Thanks.
According to https://github.com/angular/material2/issues/9438, this usage isn't supported. The workaround is to to include the second mat-sidenav element in the custom component and provide just the content for it instead of the mat-sidenav itself. This kind of thing:
<mat-sidenav-container>
<mat-sidenav #sidenavStart>
<ng-content select="[sidenavStartContent]"></ng-content>
</mat-sidenav>
<ng-content></ng-content>
<mat-sidenav #sidenavEnd position="end">
<ng-content select="[sidenavEndContent]"></ng-content>
</mat-sidenav>
</mat-sidenav-container>
I have the following layout:
ButtonA has a specific left and right side layout, while ButtonB and ButtonC have a common left side but a different right side. My question is how I should determine what needs to updated via ajax when the various Button combinations and their respective Controller/Actions are called?
For example, if the current page is ButtonB and then I click ButtonA (same for current page ButtonA then clicking ButtonB or C) both the left and right sides need to be updated (in this case it would be the entire wrapper div). However, if the current page is ButtonB and then I click ButtonC only the right side would need to be updated. Here are a couple options that might work:
Have a current page layout id and pass that to the controller/action as a parameter. The action would then determine based upon the current layout to either render the right side or both the left and right side. This would work but is it a MVC best practice?
Have the client side ajax know the current page layout and get the left and right side data separately.
Does anyone have any other suggestions or proper ways to do this with MVC?
I'd have something in your content that's in either div.
For exampel
$("#buttonA").click(function() {
var boxA = $(#boxA).find(".myunique");
if (boxA)
... do update
}
Or if it's a matter of what's clicked and not what's in the boxes, then just use global variables:
var lastClicked = "X";
$("#buttonA").click(function() {
if (lastClicked =="A")
... do update
else
... different update
lastClicked = "A";
}