Anyone by chance have any luck implementing fontawesome pro icons in a diagram? I was shown how to use the fontawesome free library icons like this:
g.append(
new
dataviz.diagram.TextBlock({
text: String.fromCharCode(0xf005) +
" "
+ dataItem.firstName +
" "
+ dataItem.lastName,
x: 85,
y: 20,
fill:
"#fff"
,
fontFamily:
"FontAwesome"
}));
... but this doesn't work:
g.append(
new
dataviz.diagram.TextBlock({
text: String.fromCharCode(0xf82c) +
" "
+ dataItem.firstName +
" "
+ dataItem.lastName,
x: 85,
y: 20,
fill:
"#fff"
,
fontFamily:
"FontAwesome"
}));
FontAwesome Icon Cheatsheet: https://fontawesome.com/cheatsheet/pro/regular
Zooming In and Out works well in Chrome, but I just realised it never zooms In in Firefox. By scrolling the mouse wheel both ways it always zooms Out.
Any Idea what could affect that issue? Thanks in advance!
Here is my diagram, I also tried to remove all properties, but that didn't change the described on top behaviour, nothing specific:
var kendoDiagram = diagram.kendoDiagram({
dataSource: shapesDataSource,
connectionsDataSource: connectionsDataSource,
shapeDefaults: {
editable: {
tools: false
},
visual: visualTemplate,
content: {
template: '#= typeof dataItem.customData === "undefined" || typeof dataItem.customData.status === "undefined" || dataItem.customData.status === "" ? dataItem.text : dataItem.customData.status #'
}
},
connectionDefaults: {
editable: {
tools: false
},
startCap: "FilledCircle",
endCap: 'ArrowEnd',
type: "polyline"
},
dragEnd: function(e) {
var el = e.connections[0];
if (typeof el !== 'undefined') {
var source = el.sourceConnector,
target = el.targetConnector;
if( typeof source == 'undefined' || typeof target == 'undefined') {
//console.log('connection is not connected both sides!');
el.options.stroke.color = '#ff0000';
el.options.hover.stroke.color = '#ff0000';
} else {
el.options.stroke.color = '#2e2e2e';
el.options.hover.stroke.color = '#2e2e2e';
}
}
},
change: function (e) {
var element = e.added[0];
if (element && element instanceof kendo.dataviz.diagram.Shape) {
var dataItem = element.dataItem;
var point = new kendo.dataviz.diagram.Point(dataItem.x, dataItem.y);
element.position(point);
}
},
pannable: {
key: "shift"
},
editable: {
resize: false,
tools: false
},
zoomMax: 3.5,
zoomMin: 0.2,
click: function(e) {
e.preventDefault();
console.log('click...');
}
}).getKendoDiagram();
Hello,
I'm having trouble with bringIntoView.
I'd like to pan a diagram so that a shape to be the center of the diagram.
It works when the first time calling bringIntoView() with a shape.
However after the first call, calling bringIntoView() with a shape does not move that shape to the center of the diagram.
I created a Dojo snippet.
To reproduce this problem, first click the shape1 button and click the shape2 button.
You will see the shape1 becomes the center of diagram, however when the shape2 button is clicked, the shape2 will be positioned at a weird place.
https://dojo.telerik.com/@jshin@hcim.com/ICANObOz
Or click the shape1 button and click the shape1 button once again.
I created this snippet based on the pan example in the API reference (https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/methods/pan).
How can I make a shape to be at the center of the diagram every time I call bringIntoView ()?
Attached is a recording of the steps to reproduce this issue.
Thank you!
Hello.
I'm trying to allow users to choose the mouse left click and drag behavior.
The default behavior of mouse left click and drag is selecting shapes and connections.
But I want the user to choose to select shapes and connection or pan the diagram using mouse left click and drag.
I found a thread about this, and I used diagram.scroller.enabled = true to change the mouse left click and drag behavior.
But there are some minor issues.
First issue is the mouse cursor. I want the mouse cursor to be the grab cursor, but it looks like diagram forces the cursor to be pointer.
I tried changing the cursor manually after the diagram is initialized, but it looks like the cursor inline style changes whenever the mouse hovers the diagram.
How can I change the cursor?
Another issue is the selection rectangle is still being rendered when diagram.scroller.enabled is set to true.
As you can see in the attachment, when diagram.scroller.enabled is true, and mouse left is clicked and dragged, the diagram pans as expected, but it renders a small selection rectangle.
How can I remove this selection rectangle? when diagram.scroller.enabled == true?
Or is using diagram.scroller.enabled the right way?
Thank you!
I'm trying to customize the shape hover template and add edit and delete buttons to allow users to click like the screenshot, and these buttons must display only when the mouse hovers on the shape.
I also need to capture user's click events from these buttons, because I need to open a custom window for edit and popup a confirm dialog.
Is there a way I can do this?
Hello,
How can I change shapes and connections text after adding them to the diagram?
For example, when a user creates a connection, an add event is called which contain a newly created connection object.
And I assigned text to the newly created connection object like this.
e.connection.options.content.text = "True"
But this text change did not apply.
Is there a way to redraw the options? after changing it? or is there any ways to change text dynamically?
Thank you!
Hello.
There is a bug with diagram.addConnection();
I followed the sample in this page (https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram/methods/addconnection), and I'm getting an error when clicking on the connection.
I created a Dojo snippet (https://dojo.telerik.com/eluKEMOn) and you can reproduce the bug by
1. Clicking the Run button.
2. Clicking the connection that connects the shapes.
This generates an Uncaught TypeError: Cannot read property 'tools' of undefined, and this messes up the diagram.
Is there a workaround to this? I need to add connections after the diagram is initialized.
And addShape() takes both kendo.dataviz.diagram.Shape() and a plan object like this.
{
id:
"2"
,
content: {
text:
"State 2"
},
x: 300,
y: 20
}
But addConnection only takes kendo.dataviz.diagram.Connection().
Do you have any plans to accept a pure javascript object for addConnection()?
Attached is the screenshot of an error produced by the Dojo snippet.
Thank you!