<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<!--<script src="http://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js"></script>-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jsPlumb/1.4.1/jquery.jsPlumb-1.4.1-all-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" >
<div id="editorArea" class="knEditorArea" ng-controller="editorController">
<div id="editorCanvas" class="knEditorCanvas">
<div ng-repeat="(id, viewData) in nodeViews">
<kn-editor-node uuid="{{id}}" top="{{viewData.top}}" left="{{viewData.left}}"></kn-editor-node>
</div>
</div>
</div>
</body>
</html>
'use strict';
var app = angular.module('myApp', []);
app.controller('editorController', ['$scope',
function($scope) {
$scope.nodeViews = {
node0: {
title: 'Node 00',
left: 250,
top: 150
},
node1: {
title: 'Node 01',
left: 50,
top: 100
}
};
}
]);
app.directive('knEditorNode', function() {
return {
restrict: 'E',
replace: true,
scope: {
uuid: '@',
top: '@',
left: '@',
title: '@'
},
template: '<div id="{{uuid}}" class="knNode">{{uuid}}</div>',
link: function(scope, element) {
window.console.log(element);
angular.element(element).css('top', scope.top +"px");
angular.element(element).css('left', scope.left +"px");
angular.element(element).html(scope.title);
angular.element(element).css('position', 'absolute');
jsPlumb.draggable(element, {
start: function() {
console.info('started dragging');
},
drag: function(event, ui) {
console.info('dragging...');
},
stop: function(event, ui) {
console.info('stopped dragging');
}
});
}
};
});
.knEditorArea {
height: 500px;
position: relative;
background-color: #838383;
background-image:linear-gradient(#838383, #585858);
}
.knEditorCanvas {
position: absolute;
height: 100%;
width: 100%;
background-color: transparent;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
background-size:50px 50px;
}
.knNode {
position: absolute;
border: 1px solid;
border-radius: 0.5em;
color: black;
height: 5em;
width: 5em;
z-index:2000;
}
.knNode:hover {
box-shadow: 2px 2px 19px #AAAAAA;
cursor: pointer;
}
.knConnectionDragActive {
box-shadow: 1px 1px 10px #BBBBBB;
cursor: pointer;
}
.knConnectionDropHover {
box-shadow: 2px 2px 19px #AAAAAA;
cursor: pointer;
}
.knConnector {
z-index:4;
}
.knPort {
z-index:5;
}
.knOverlay {
z-index:6;
}