search

jsplumb / community-edition

The community edition of jsPlumb, versions 1.x - 6.x
https://jsplumbtoolkit.com
Other
225 stars 18 forks source link

Unable to get the right connection popup message when I am connecting all the 5 nodes rightly to each other. #331

Closed piyushraw closed 2 years ago

piyushraw commented 2 years ago

I am unable to get the right connection message when I am connecting the nodes to each other. for example:: LF node to LF circuit node and so on.....

Html file::

`<!DOCTYPE html>

VIRTUAL_LABS
IIT Roorkee Logo

Virtual Labs IIT Roorkee
Biomedical Laboratory

Study of "Monopolar" Recordings

 

STEP 1 : Make all the Correct Connections.

 

1. Connect Left Frontal (LF) point of Frontal Lobe to the point (LF) of Monopolar circuit.

 

2. Connect Left Parietal (LP) point of Parietal Lobe to the point (LP) of Monopolar circuit.

 

3. Connect Left Occipital (LO) point of Occipital Lobe to the point (LO) of Monopolar circuit.

 

4. Connect Left Temporal (LT) point of Temporal Lobe to the point (LT) of Monopolar circuit.

 

5. Connect A1 point of Ear lobe to the point (A1) of Monopolar circuit.

 

STEP 2 : Click on check button to check for Correct Connections.

 

STEP 3 : If Connections are not correct click on reset button to reset the connections.

 

STEP 4 : If Connections are correct click on Graph button to plot the Graph for the particular input connection.

 

STEP 5 : you can zoom in and out the graph as per your requirement and can use other features also like show data on hover, Autoscale etc.

 

STEP 6 : Click on print button to save the observations.

 

Figure 1:     "Monopolar" Recording

Brain left-hemisphere circuits

LF

LP

LO

LT


LF Left Frontal (LF) node of Frontal Lobe

LP Left Parietal (LP) node of Parietal Lobe

LO Left Occipital (LO) node of Occipital Lobe

LT Left Temporal (LT) node of Temporal Lobe

A1 Ear Lobe (A1)

Note:This Graph is for Testing purpose only.

` Javacsript file ; (function (ResetAll) { var xx = document.getElementById("reset") xx.onclick = showAlert; // Add onclick function to element function showAlert(event) { window.location.reload() } var yy=document.getElementById("check") yy.onclick=checkk; function checkk() { if (connections.length<5 || connections.length>5) { swal ({ title:"Try Again!", text:"Make all the connections first!", icon:"warning", button: "Try Again!", closeOnClickOutside: false, }) return } if (connections.length > 0) { var listDiv = [] for (var j = 0; j < connections.length; j++) { listDiv.push(connections[j].sourceId) listDiv.push(connections[j].targetId) } var f=0 for (var i=0;i<6;i+=2) { if (Number(listDiv[i][14])%2==0 && Number(listDiv[i][14])+1 == listDiv[i+1][14]) { f=1 break } if (Number(listDiv[i][14])%2!=0 && Number(listDiv[i][14])-1 == listDiv[i+1][14]) { f=1 break } if (Number(listDiv[i][14])+1 ==listDiv[i+1][14] || Number(listDiv[i][14])-1 == listDiv[i+1][14] ) { continue } else { f=1 break } } if (f==0) swal ({ title: "Connections Established!", text: "Right Connections!", icon: "Success", button: "Aww Yiissss!", closeOnClickOutside: false, }) else swal ({ title: "Connections Error!", text: "Wrong Connections!", icon: "error", button: "Oh noo!", closeOnClickOutside: false }) } } showConnectionInfo = function (listDiv) { console.log(listDiv) }, hideConnectionInfo = function () { listDiv.style.display = "none"; }, connections = [], updateConnections = function (conn, remove) { if (!remove) connections.push(conn); else { var idx = -1; for (var i = 0; i < connections.length; i++) { if (connections[i] == conn) { idx = i; break; } } if (idx != -1) connections.splice(idx, 1); } if (connections.length > 0) { var listDiv = [] for (var j = 0; j < connections.length; j++) { listDiv.push(connections[j].sourceId) listDiv.push(connections[j].targetId) } showConnectionInfo(listDiv); } else hideConnectionInfo(); }; jsPlumb.ready(function () { var instance = jsPlumb.getInstance({ DragOptions: { cursor: 'pointer', zIndex: 2000 }, PaintStyle: { stroke: '#666' }, EndpointHoverStyle: { fill: "orange" }, HoverPaintStyle: { stroke: "orange" }, EndpointStyle: { width: 20, height: 16, stroke: '#666' }, Endpoint: "Rectangle", Anchors: ["TopCenter", "TopCenter"], Container: "canvas" }); // suspend drawing and initialise. instance.batch(function () { // bind to connection/connectionDetached events, and update the list of connections on screen. instance.bind("connection", function (info, originalEvent) { updateConnections(info.connection); }); instance.bind("connectionDetached", function (info, originalEvent) { updateConnections(info.connection, true); }); instance.bind("connectionMoved", function (info, originalEvent) { // only remove here, because a 'connection' event is also fired. // in a future release of jsplumb this extra connection event will not // be fired. updateConnections(info.connection, true); }); instance.bind("click", function (component, originalEvent) { alert("click!") }); // configure some drop options for use by all endpoints. var exampleDropOptions = { tolerance: "touch", hoverClass: "dropHover", activeClass: "dragActive" }; var color2 = "#316b31"; var exampleEndpoint2 = { endpoint: ["Dot", { radius: 9 }], paintStyle: { fill: color2 }, isSource: true, scope: "green", connectorStyle: { stroke: color2, strokeWidth: 5 }, connector: ["Bezier", { curviness: 15 } ], maxConnections:1 , isTarget: true, dropOptions: exampleDropOptions }; var e1 = instance.addEndpoint('control10', { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2); // setup some DynamicAnchors for use with the blue endpoints // and a function to set as the maxConnections callback. var anchors = [ [0, 0.2, 1, 0], [0.8, 1, 0, 1], [0, 0.8, -1, 0], [0.2, 0, 0, -1] ], maxConnectionsCallback = function (info) { alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id); }; e1.bind("maxConnections", maxConnectionsCallback); instance.addEndpoint('control5', { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2); instance.addEndpoint("control11", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2); instance.addEndpoint("control6", { anchor: [0.75,0 , 0, -1] }, exampleEndpoint2); instance.addEndpoint("control12", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2); instance.addEndpoint("control7", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2); instance.addEndpoint("control13", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2); instance.addEndpoint("control8", { anchor: [0.75, 0, 0, -1] }, exampleEndpoint2); instance.addEndpoint("control14", { anchor: [0.75, 0 ,0, -1] },exampleEndpoint2); instance.addEndpoint("control9", { anchor: [0.75, 0, 0, -1] },exampleEndpoint2); instance.draggable(jsPlumb.getSelector(".drag-drop-demo .window")); var hideLinks = jsPlumb.getSelector(".drag-drop-demo .hide"); instance.on(hideLinks, "click", function (e) { instance.toggleVisible(this.getAttribute("rel")); jsPlumbUtil.consume(e); }); var dragLinks = jsPlumb.getSelector(".drag-drop-demo .drag"); instance.on(dragLinks, "click", function (e) { var s = instance.toggleDraggable(this.getAttribute("rel")); this.innerHTML = (s ? 'disable dragging' : 'enable dragging'); jsPlumbUtil.consume(e); }); var detachLinks = jsPlumb.getSelector(".drag-drop-demo .detach"); instance.on(detachLinks, "click", function (e) { instance.deleteConnectionsForElement(this.getAttribute("rel")); jsPlumbUtil.consume(e); }); instance.on(document.getElementById("clear"), "click", function (e) { instance.detachEveryConnection(); showConnectionInfo(""); jsPlumbUtil.consume(e); }); }); jsPlumb.fire("jsPlumbDemoLoaded", instance); }) }) ();
sporritt commented 2 years ago

please provide a codepen or similar.

sporritt commented 2 years ago

there's really nothing actionable here. please provide a codepen or similar. otherwise this issue will be deleted.