Usage of CSS scale transform produce ugly results in many browsers, so the best solution for zooming is sizing of chart with item templates. It gives us two advantages:
1. We can tune our CSS styles, so we can be sure that text is readable at any zoom level we provide.
2. We automatically change content of items at different zoom levels.
See item template use case for more details about templates usage.
Comments
Draggable & Droppable cannot be built in, since their usage depends on specific application framework.
function onScale(scale) {
if (scale != null) {
$("#basicdiagram").famDiagram({sca le: scale });
}
$("#basicdiagram").famDiagram("update");
}
$('#basicdiagram').bind('mousewheel', function(e){
e.preventDefault( );
if(e.originalEvent.wheelDelta /120 > 0) {
onScale(3);
}
else{
onScale(0.8)
}
});
See Zoom Using CSS Scale Transform "How to use". This issue requires use of scale option. You cannot scale the whole widget, it should scale its content itself. It was fixed in 3.0.0 update.
Use "Redraw" or no option, see "First Organizational Chart Sample"
jQuery("#basicdiagram").orgDiagram("update", primitives.orgdiagram.UpdateMode.Redraw);
It forces templates update. But in this case Widget does not reuse existing HTML elements in DOM, so you enforce full widget update.
Take into account that large items simply don't fit into screen, so showing one item in viewport does not make sense. The goal of diagram is to show diagram structure and make convenient navigation around the chart.
So we have to predict items user is focused on and show only them in full size
When user edits item it is focused on editing so we can place edit template on top of diagram and hide it on save. That template minimal size should be constrained by item size and maximum size by view port size.
We don't need to re-layout diagram in item edit mode.
Is it possible to have dynamic template?
For example, I have template with primitives.common.Size(100,100) defined.
The thing is in "onItemRender", I put some data binding, and inner content height of the template is becoming more than 100px. What I want is to redraw the item, making it higher to fit the content.
What I thought would work is the following:
- loop through the items, find the one I want to change and set different template name (items updated)
- push a new template with the corresponding name options.template.push(generateNe wTemplate())
- jQuery("#basicdiagram").orgDiagram({ite ms: options.items, templates: options.templates});
jQuery("#basicdiagram").orgDiagram("update", primitives.orgdiagram.UpdateMode.Refresh);
But this unfortunately does not work, as if the templates are not being updated.
Please help, if you have any idea.
Thanks.
Here is default template renderer:
var itemConfig = data.context,
itemTitleColor = itemConfig.itemTitleColor != null ? itemConfig.itemTitleColor : primitives.common.Colors.RoyalBlue,
color = primitives.common.highestContrast (itemTitleColor , this.options.itemTitleSecond FontColor, this.options.itemTitleFirstF ontColor);
data.element.find("[name=titleBackground ]").css({ "background": itemTitleColor });
data.element.find("[name=photo]").attr({ "src": itemConfig.image, "alt": itemConfig.title });
data.element.find("[name=title]").css({ "color": color }).text(itemConfig .title);
data.element.find("[name=description]").text(itemConfig .description);
when you change template render you overwrite it including title color.
Add this options to the orgchart code.
options.itemTitleFirstF ontColor = "#424242";
options.itemTitleSecond FontColor = "#000000";