Here is a JSFiddle showing the issue: https://jsfiddle.net/Bronzdragon/xpvt214o/399003/
graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 800,
height: 600,
});
var rect = new joint.shapes.basic.Rect({
attrs: {rect: {fill: 'lightblue'}},
size: { width: 200, height: 100 },
ports: {
groups: {
'inputs': {
position: { name: 'left' },
attrs: {circle: {fill: 'lightgreen'}},
magnet: 'passive'
},
'outputs': {
position: { name: 'right' },
attrs: {circle: {fill: 'pink'}},
magnet: true,
}
},
items:[ { group: 'inputs' }, { group: 'outputs' } ]
}
});
rect.position(100, 50);
rect.addTo(graph);
var rect2 = rect.clone();
rect2.position(400, 100);
rect2.addTo(graph);
I'm defining an JointJS element (called rect), with two ports on it, and adding them to the graph. The elements themselves are functional, but the ports aren't. When dragging off of an active magnet (the pink circle), it should create a link. Instead it moves the element.
I've followed the JointJS guide in creating a shape, and adding ports. These ports I've added seem to be completely inactive though. I do not know what I'm doing wrong.
I have emailed the JointJS team, and they came back to me with the following (Thank you very much, Roman!):
Thank you for reaching out to us! You were nearly there. The magnet attribute meant to be set on a specific shape DOM element. Similar to fill, refX, xlinkHref etc.
var rect = new joint.shapes.basic.Rect({
attrs: {rect: {fill: 'lightblue' }, root: { magnet: false }},
size: { width: 200, height: 100 },
ports: {
groups: {
'inputs': {
position: { name: 'left' },
attrs: {circle: {fill: 'green', magnet: 'passive' }},
},
'outputs': {
position: { name: 'right' },
attrs: {circle: {fill: 'red', magnet: true }},
}
},
items:[ { group: 'inputs' }, { group: 'outputs' } ]
}
});
Also, If you are new to JointJS I recommend you to read our online tutorials (https://resources.jointjs.com/tutorial). I suggest using standard shapes over basic, as the standard shapes are newer and reflecting the best JointJS techniques.
Related
I am trying to plot some heavy data on zing Chart. Zing charts are normally plot inside a div but for my case my page became leggy after loading 200k points inside zing chart div-tag. In the doc it says to load large data in Canvas.
In the performance documentation of zing chart; in the end of document there is Render type, it says to load in canvas but its not working. according to doc
Render Type
The render method is where you can define the output, which can either render Canvas or SVG. If you are rendering a large dataset, the performance of Canvas will benefit you because DOM explosion happens when rendering in SVG.
Here is my code any suggestion or help.
function chart_timeFreq_ff_fh(timeArray, frequency_array_ff, frequency_array_fh) {
zingchart.DEV.SORTTOKENS = 0;
zingchart.DEV.PLOTSTATS = 0;
zingchart.DEV.RESOURCES = 0;
zingchart.DEV.KEEPSOURCE = 0;
zingchart.DEV.COPYDATA = 0;
zingchart.DEV.MEDIARULES = 0;
zingchart.SYNTAX = 'dashed';
$('#lineChart_f').remove();
$('#canvas_div_f').append(
'<canvas id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></canvas>'
);
let configTimeAndAngle = {
"type": "line",
plot: {
mode: 'fast',
'hint-ts': true
},
legend: {
layout: "1x2", //row x column // items means in one two we added two items as legends
x: "35%",
y: "6%",
},
"preview":{
"live":true
},
'scale-x': {
zooming: true,
labels: timeArray,
'max-items':8,
transform: {
type: 'date'
},
item: {
'font-size':10
}
},
'scale-y': {
'auto-fit': true,
guide: {
'line-style': "solid"
},
item: {
'font-size':10
}
},
tooltip: {
// text: 'Time : %kt (X) Freq : %%node-value (Y).',
text: 'Time : %kt (X) Freq : %v (Y).',
alpha: 0.9,
backgroundColor: '#F44336',
borderColor: '#B71C1C',
borderRadius: 2,
borderWidth: 1,
padding: '5 10'
},
gui: {
behaviors: [
{
id: 'ViewDataTable',
enabled: 'none'
},
{
id: 'ViewSource',
enabled: 'none'
},
{
id: 'CrosshairHide',
enabled: 'all'
}
]
},
"series": [
{
"values": frequency_array_ff,
'line-color': "#3366ff",
'background-color': "#3366ff",
text: "Centeral Frequency"
},
{
"values": frequency_array_fh,
'line-color': "#00cc99",
'background-color': "#00cc99",
text: "Frequency Hopping"
}
]
};
zingchart.render({
id: 'lineChart_cob_f',
data: configTimeAndAngle,
height: "100%",
width: "100%",
output: "canvas"
});
}
Updated
I have tried to plot like this but still issue. Above chart is also updated and we i need to change how I pass time ? my time format is like 2022-10-10 23:24:03 an array of time like this so in the 'scale-x': { labels: timeArray} i add time like this
"series": [
{
values: [],
'line-color': "#3366ff",
'background-color': "#3366ff",
text: "Centeral Frequency"
},
{
values: [],
'line-color': "#00cc99",
'background-color': "#00cc99",
text: "Frequency Hopping"
}
]
configTimeAndAngle.series[0].values.push([frequency_array_ff]);
configTimeAndAngle.series[1].values.push([frequency_array_fh]);
configTimeAndAngle.series[0]=values.[frequency_array_ff];
configTimeAndAngle.series[1]=values[frequency_array_fh];
configTimeAndAngle.series[0]=frequency_array_ff;
configTimeAndAngle.series[1]=frequency_array_fh];
I've managed to create you a demo in a studio application with over 200k nodes, maybe you can use this setup with canvas in the render method for reference and see how it goes. I hope this helps.
To be honest I also had the same issue all day, then I saw this and I have found the issue on your question. you have use canvas instead use div and while rendering use
// this is your code
$('#canvas_div_f').append(
'<canvas id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></canvas>'
);
instead just use
$('#canvas_div_f').append(
'<div id="lineChart_f" style="min-height: 400px; height: 550px; max-height: 500px; max-width: 100%;"></div>'
);
and while render set output to canvas.
zingchart.render({
id: 'lineChart_cob_f',
data: configTimeAndAngle,
height: "100%",
width: "100%",
output: "canvas"
});
I created a custom element using the jointjs tutorial like this:
CustomRect = joint.dia.Element.define('example.CustomRect', {
attrs: {
rect: {
refX: 0,
refY: 0,
refWidth: '116',
refHeight: '70',
strokeWidth: 1,
stroke: '#000000',
fill: '#FFFFFF'
},
label: {
textAnchor: 'left',
refX: 10,
fill: 'black',
fontSize: 18,
text: 'text'
},
upperRect: {
strokeWidth: 1,
stroke: '#000000',
fill: 'rgba(255,0,0,0.3)',
cursor: 'pointer'
}
}
}, {
markup: [{
tagName: 'rect',
selector: 'rect'
},
{
tagName: 'text',
selector: 'label'
},
{
tagName: 'rect',
selector: 'upperRect'
}]
})
...
let customRect = new this.CustomRect()
customRect.attr({
upperRect: {
refWidth: '116',
refHeight: '10',
refX: 0,
refY: -11,
event: 'element:upperRect:pointerdown'
}
})
Furthermore, I tried adding Ports with the Port API for joint.dia.Element like this:
customRect.addPorts([
{
args: {
y: 30
},
z: 0
}
]);
This does add Ports to my element, but they don't have the functionality they should have, so they're just some circles that do nothing.
The method shown in the Port Tutorial does not work, since I'm not using joint.shapes.devs.Model for my custom element, because then I can't customize it like the joint.dia.Element element (or at least I think I can't).
So, how can I add Ports to a custom element defined with joint.dia.Element that have the functionality they should have (as shown in the Port Tutorial)?
Unfortunately, the documentation does not explain this clear enough. If you want to make the ports interactive you need to set the magnet attribute on them.
const CustomRect = joint.dia.Element.define('example.CustomRect', {
/* ... */
attrs: {
root: {
// Don't allow the root of the element to be target of a connection
magnet: false
}
},
ports: {
items: [{
id: 'port1',
attrs: {
portBody: {
// The port can be a target of a connection
// The user can create a link from the port by dragging the port
magnet: true
}
}
}, {
id: 'port2',
attrs: {
portBody: {
// The port can only become a target of a connection
// The logic can be modified via paper.options.validateMagnet()
magnet: 'passive'
}
}
}]
}
}, {
/* ... */
portMarkup: [{
tagName: 'circle',
selector: 'portBody',
attributes: {
'r': 10,
'fill': '#FFFFFF',
'stroke': '#000000'
// If all the magnets are `true` / `passive` feel free to define
// the magnet here in the default port markup or per a port group
// 'magnet': true
}
}]
});
I am currently working with Jointjs.
How can we change the shape of ports from circle to rectangle.
I want the other functionalities to work as same.Just change in the way they look.
Is it possible?
We can customize the shapes of port.Following is the code sample for rectangular port , which was working for me.
ports: {
groups: {
'myPorts': {
position: 'top',
attrs: {
'.port-body': {
stroke: 'red',
strokeWidth: 2,
height: 10,
width: 10,
magnet: true
}
},
markup: '<rect class="port-body"/>'
}
},
items: [{
group: 'myPorts'
}],
}
I am working with JointJS ports. By default ports are displayed as circles:
https://resources.jointjs.com/tutorial/ports
Is there any way to format the style from circle to rectangle? Please suggest any class names where I can override this.
the tutorial there is using the devs.Model shapes and it's a bit outdated approach...
There is a markup option in the port configuration, see more at https://resources.jointjs.com/docs/jointjs/v2.1/joint.html#dia.Element.ports
I'd recommend a port demo (https://github.com/clientIO/joint/tree/master/demo/ports). There is even a shape you're might be looking for:
var g6 = new joint.shapes.basic.Circle({
position: { x: 50, y: 50 },
size: { width: 500, height: 300 },
attrs: {
text: { text: 'compensateRotation: true', fill: '#6a6c8a' },
circle: { stroke: '#31d0c6', 'stroke-width': 2 }
},
ports: {
groups: {
'a': {
position: {
name: 'ellipseSpread',
args: { startAngle: 0, dr: 0, compensateRotation: true }
},
label: {
position: 'radial'
},
attrs: {
rect: {
stroke: '#31d0c6',
'stroke-width': 2,
width: 20,
height: 20,
x: -10,
y: -10
},
'.dot': {
fill: '#fe854f',
r: 2
},
text: {
fill: '#6a6c8a'
}
},
markup: '<g><rect/><circle class="dot"/></g>'
}
}
}
});
I want to have two groups which have vertical layout in a diagram, each group have some nodes which can be dragged and dropped into another group, and i want to drop the node on the top of the group.
this is what i want:
beforedrop
afterdrop
I searched gojs api and tried to use go.LayeredDigraphLayout, gojs LayeredDigraphLayout, the api said set the direction to 270 is upwards, but seems not work..
my nodes still layout from top to bottom, and when i drop the node, it moves to the bottom...
this is what i got:
before
after
here is my code:
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
layout: $(go.GridLayout, { wrappingColumn: 2 }),
"undoManager.isEnabled": true
});
myDiagram.groupTemplateMap.add("Group",
$(go.Group, "Auto",
{ resizable: false,
computesBoundsAfterDrag: true,
layout: $(go.LayeredDigraphLayout,
{ columnSpacing: 5, direction: 180}),
mouseDrop: function(e, grp) {
grp.addMembers(grp.diagram.selection, true);
},
},
$(go.Shape, { fill: "white", stroke: "lightgray",width:200 }),
$(go.Placeholder, { padding: 10 })
));
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{
mouseDrop: function(e, grp) {
grp.diagram.currentTool.doCancel();
}
},
$(go.Shape, "RoundedRectangle",
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 3 },
new go.Binding("text", "key"))
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: "G1", isGroup: true, category: "Group" },
{ key: "G2", isGroup: true, category: "Group" },
{ key: "Alpha", color: "lightblue", group: "G1" },
{ key: "Beta", color: "orange", group: "G1" },
{ key: "Gamma", color: "lightgreen", group: "G1" },
{ key: "Delta", color: "pink", group: "G1" },
{ key: "Alpha2", color: "lightblue", group: "G2" },
{ key: "Beta2", color: "orange", group: "G2" },
{ key: "Gamma2", color: "lightgreen", group: "G2" },
{ key: "Delta2", color: "pink", group: "G2" }
]);
}
<script src="https://gojs.net/latest/release/go.js"></script>
<body onload="init()">
<div id="myDiagramDiv" style="flex-grow: 1; height: 500px; border: solid 1px black"></div>
</body>
i put the code on git, just a html: GoJS_Layout_git
can anyone help me with this problem? many thanks
You need to make each Group.layout sort the nodes in the order that you want. LayeredDigraphLayout won't help you there, since it is supposed to re-order the nodes in a layer to reduce link crossings.
Instead, use GridLayout or TreeLayout and set their respective sorting and comparer properties. The latter must be a function that compares two Nodes (when GridLayout) or two LayoutVertexes (when TreeLayout) for sorting purposes. There are examples of this in the documentation, such as at https://gojs.net/latest/api/symbols/TreeLayout.html#comparer