82 lines
2.7 KiB
JavaScript
82 lines
2.7 KiB
JavaScript
(function() {
|
|
|
|
'use strict';
|
|
|
|
function fcCanvas(flowchartConstants) {
|
|
return {
|
|
restrict: 'E',
|
|
templateUrl: "flowchart/canvas.html",
|
|
replace: true,
|
|
scope: {
|
|
model: "=",
|
|
selectedObjects: "=",
|
|
edgeStyle: '@',
|
|
userCallbacks: '=?callbacks',
|
|
automaticResize: '=?',
|
|
dragAnimation: '=?',
|
|
nodeWidth: '=?',
|
|
nodeHeight: '=?',
|
|
dropTargetId: '=?',
|
|
control: '=?'
|
|
},
|
|
controller: 'canvasController',
|
|
link: function(scope, element) {
|
|
function adjustCanvasSize(fit) {
|
|
if (scope.model) {
|
|
var maxX = 0;
|
|
var maxY = 0;
|
|
angular.forEach(scope.model.nodes, function (node, key) {
|
|
maxX = Math.max(node.x + scope.nodeWidth, maxX);
|
|
maxY = Math.max(node.y + scope.nodeHeight, maxY);
|
|
});
|
|
var width, height;
|
|
if (fit) {
|
|
width = maxX;
|
|
height = maxY;
|
|
} else {
|
|
width = Math.max(maxX, element.prop('offsetWidth'));
|
|
height = Math.max(maxY, element.prop('offsetHeight'));
|
|
}
|
|
element.css('width', width + 'px');
|
|
element.css('height', height + 'px');
|
|
}
|
|
}
|
|
if (!scope.dropTargetId && scope.edgeStyle !== flowchartConstants.curvedStyle && scope.edgeStyle !== flowchartConstants.lineStyle) {
|
|
throw new Error('edgeStyle not supported.');
|
|
}
|
|
scope.nodeHeight = scope.nodeHeight || 200;
|
|
scope.nodeWidth = scope.nodeWidth || 200;
|
|
scope.dragAnimation = scope.dragAnimation || 'repaint';
|
|
|
|
scope.flowchartConstants = flowchartConstants;
|
|
element.addClass(flowchartConstants.canvasClass);
|
|
element.on('dragover', scope.dragover);
|
|
element.on('drop', scope.drop);
|
|
element.on('mousedown', scope.mousedown);
|
|
element.on('mousemove', scope.mousemove);
|
|
element.on('mouseup', scope.mouseup);
|
|
|
|
scope.$watch('model', adjustCanvasSize);
|
|
|
|
scope.internalControl = scope.control || {};
|
|
scope.internalControl.adjustCanvasSize = adjustCanvasSize;
|
|
scope.internalControl.modelservice = scope.modelservice;
|
|
|
|
scope.canvasservice.setCanvasHtmlElement(element[0]);
|
|
scope.modelservice.setCanvasHtmlElement(element[0]);
|
|
scope.modelservice.setSvgHtmlElement(element[0].querySelector('svg'));
|
|
scope.rectangleselectservice.setRectangleSelectHtmlElement(element[0].querySelector('#select-rectangle'));
|
|
if (scope.dropTargetId) {
|
|
scope.modelservice.setDropTargetId(scope.dropTargetId);
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
angular
|
|
.module('flowchart')
|
|
.directive('fcCanvas', fcCanvas);
|
|
|
|
}());
|
|
|