Hi I need to add number to each of ports as you see in the picture below.
Ps. How ever I looking for resolve the problem on this site https://gojs.net/latest/intro/ports.html and I check solution with portId and TextBlock but it doesn't work :/
You are using a Shape for a port, but any GoJS object can be a port, and you really want to use a Panel (Auto Panel) with a Shape and a TextBlock as your port.
I suggest you read: https://gojs.net/latest/intro/buildingObjects.html
Hi thank you for your Answer :) hmm I try to use a Panel but I don't see change :/ What I do wrong?
this.$(go.Panel, 'Horizontal',
new go.Binding('itemArray', 'bottomArray'),
{
row: 2, column: 1,
itemTemplate:
this.$(go.Panel, 'Vertical',
{
_side: 'bottom',
fromSpot: go.Spot.Bottom, toSpot: go.Spot.Bottom, fromMaxLinks: 1,
fromLinkable: true, toLinkable: false, cursor: 'pointer'
},
new go.Binding('portId', 'portId'),
this.$(go.Shape, 'RoundedRectangle',
{
stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(2, 1, 0, 1)
},
new go.Binding('fill', 'portColor')),
this.$(go.TextBlock,
new go.Binding('text', 'name'))
)
}
),
Related
Im learning sample code from gojs/logic circuit, in that i want to add more ports to logic gates dynamically through context menu or some button, can i do it, i saw dynamic ports example in gojs, but its not working for logic gates, its only working for rectangular box created in that example(dynamic ports), but i want to add more input and out ports to logic gates which are predefined, is that possible ? Im able to add manually by increasing in and out numbers manually in the code(js), but not dynamically, i also want to know is it possible to add 'n' number of ports to predefined logic gates ?
The node templates in the Logic Circuit sample each have a fixed number of ports. For example:
var andTemplate =
$(go.Node, "Spot", nodeStyle(),
$(go.Shape, "AndGate", shapeStyle()),
$(go.Shape, "Rectangle", portStyle(true),
{ portId: "in1", alignment: new go.Spot(0, 0.3) }),
$(go.Shape, "Rectangle", portStyle(true),
{ portId: "in2", alignment: new go.Spot(0, 0.7) }),
$(go.Shape, "Rectangle", portStyle(false),
{ portId: "out", alignment: new go.Spot(1, 0.5) })
);
It is possible to add or remove ports from a particular instance of a Node, but is that really what you want? Adding or removing an element (that happens to be a port) won't modify the model, so when you save and then re-load the model, those changes will have disappeared.
If you want a variable number of ports on a node, you need to define the node template to support a variable number of ports, where the node data object has one or more properties that are Arrays of port descriptor objects. Each port descriptor would have information about identifier, name, shape, color, position, and perhaps other parameters.
Then there would be one or more Panels whose Panel.itemArray is data bound to the corresponding Array property. The Panel.itemTemplate would declare how each item (i.e. port) is visualized. Please read: https://gojs.net/latest/intro/itemArrays.html
For an example of this with four item Arrays, one for each side of a Node, please examine this sample: https://gojs.net/latest/samples/dynamicPorts.html
That sample also demonstrates various ways in which the user can add or remove or move ports dynamically.
In that sample there is only a single node template, but it's more complex because it supports four separate Arrays of port descriptor objects, one for each side of the Node. That node template looks like:
myDiagram.nodeTemplate =
$(go.Node, "Table",
{
locationObjectName: "BODY",
locationSpot: go.Spot.Center,
selectionObjectName: "BODY",
contextMenu: nodeMenu
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
// the body
$(go.Panel, "Auto",
{
row: 1, column: 1, name: "BODY",
stretch: go.GraphObject.Fill
},
$(go.Shape, "Rectangle",
{
fill: "#dbf6cb", stroke: null, strokeWidth: 0,
minSize: new go.Size(60, 60)
}),
$(go.TextBlock,
{ margin: 10, textAlign: "center", font: "bold 14px Segoe UI,sans-serif", stroke: "#484848", editable: true },
new go.Binding("text", "name").makeTwoWay())
), // end Auto Panel body
// the Panel holding the left port elements, which are themselves Panels,
// created for each item in the itemArray, bound to data.leftArray
$(go.Panel, "Vertical",
new go.Binding("itemArray", "leftArray"),
{
row: 1, column: 0,
itemTemplate:
$(go.Panel,
{
_side: "left", // internal property to make it easier to tell which side it's on
fromSpot: go.Spot.Left, toSpot: go.Spot.Left,
fromLinkable: true, toLinkable: true, cursor: "pointer",
contextMenu: portMenu
},
new go.Binding("portId", "portId"),
$(go.Shape, "Rectangle",
{
stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(1, 0)
},
new go.Binding("fill", "portColor"))
) // end itemTemplate
}
), // end Vertical Panel
... three more Panels with itemArray Bindings ...
Im building my first website and currently struggle with making img overlay on hover in my gallery.
I've made masonry layout using macyjs and can't get my css right to make an overlay.
This is also my first post here so If I did screw something up with the code snippet, sorry in advance :)
const msnry = new Macy({
container: '.image-grid',
mobileFirst: true,
columns: 1,
breakAt: {
400: 2,
700: 3,
1100: 4,
},
margin: {
x: 20,
y: 20,
},
});
How to get the text of an editable TextBlock in GoJS?
I'm not sure what you're asking. The literal answer to your question is that you can get the text string from any TextBlock by getting its TextBlock.text property value.
But you mention that the TextBlock is editable, so maybe you are asking about how to get the previous value of the TextBlock.text during editing.
First, the validation predicate is given both the original string as well as the new proposed string: the TextBlock.textValidation and TextEditingTool.textValidation properties and the TextEditingTool.isValidText method.
Second, the "TextEdited" DiagramEvent gets the original string value as the DiagramEvent.parameter: DiagramEvent
Add this to your diagram's nodeTemplate. This helps.
$(go.TextBlock, {
editable: true
})
myDiagram.nodeTemplate =
$(go.Node, "Horizontal", {
isTreeExpanded: false,
click: showDetail
},
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle", {
fill: "#cce6ff", // the default fill, if there is no data-binding
stroke: "#6699ff",
height: 40,
strokeWidth: 2,
portId: "",
cursor: "pointer", // the Shape is the port, not the whole Node
}, new go.Binding("fill", "fill")),
$(go.TextBlock, {
editable: true
},
new go.Binding("text", "text"))
),
$("TreeExpanderButton", { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top }, { visible: true })
);
If you want to trigger edit textblock use below cade
var textBlock = myDiagram.findNodeForKey(nodekey).findObject('TextBlockName');
if (myDiagram.commandHandler.canEditTextBlock(textBlock))
myDiagram.commandHandler.editTextBlock(textBlock);
First of all let me say I'm kind of new to jQuery and I'm definately new to jsPlumb altough I have checked the official documentation I've not been able to get a solution to this problem.
I have 2 draggable div elements that each have an endpoint so I can connect them to each other. The problem is when I make the connection and then drag any of the div elements around the arrow image I'm using isn't properly placed where it should be (I'm using ["RightMiddle", "LeftMiddle"] for the anchors).
Is there a way to make the images stick at the middle-right (or left) side of the div elements and not get out of place?
Here's the jsFiddle link for what I have so far, and here's the code:
$(document).ready(function () {
jsPlumb.draggable($('.table'), {
containment: '#schema'
});
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Image", {
url: "http://i43.tinypic.com/1z31ac2.gif"
}],
style: {
fillStyle: 'gray'
},
maxConnections: -1,
connector: ["Flowchart", {
curviness: 5
}],
connectorStyle: {
lineWidth: 3,
strokeStyle: 'gray'
},
anchors: ["RightMiddle", "LeftMiddle"],
scope: "gray"
};
var ep01 = jsPlumb.addEndpoint("container0", endpointOptions);
var ep02 = jsPlumb.addEndpoint("container1", endpointOptions);
jsPlumb.connect({
source: ep01,
target: ep02
});
});
To make the images stick at the middle-right (or left) side of the div elements, instead of specifying both RightMiddle and LeftMiddle you can simply specify any one.
anchors: "RightMiddle", // For your image Right position suits the best
I am trying to eliminate replies and retweets in the twitter widget. So far the following code is not working:
Starting at line 1967 of widget.js:
var F = /twitter\.com(\:\d{2,4})?\/intent\/(\w+)/,
A = {
tweet: true,
retweet: false,
reply:false,
favorite: true
},
And this code in the body of the html page, likewise is not working:
<script type="text/javascript">
new TWTR.Widget({
version: 2,
type: 'search',
search: 'blahblahblah', // This shows all tweets with the hashtag #blahblahblah.
interval: 3000,
title: '',
subject: '',
width: 'auto',
height: 544,
theme: {
shell: {
background: '#cccccc',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#5e6a71',
links: '#aa0828',
reply:false,
retweet:false
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
}
}).render().start();
</script>
Any help in this would be greatly appreciated.
to eliminate Retweets try adding " -RT " into the search string.
I figured it out. In the search widget just set the search parameter like so:
search: 'from:#blahblahblah',
This limits the search query to only those tweets from the specific user. I hope this helps anyone who runs into this issue.
Just set your search query to :
"from:#blahblahblah -RT"
It will eliminate other replies, retweets and mentions!
I hope it will help you