Skip to content

Instantly share code, notes, and snippets.

@adriatic
Last active July 20, 2016 06:46
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save adriatic/a26388350a9615d9439816ce2a81574d to your computer and use it in GitHub Desktop.
Diagram: events
<template>
<require from="./logger.js"></require>
<div id="example">
<div class="demo-section k-content wide">
<ak-diagram style="height:600px;"
k-data-source.bind="shapesDataSource"
k-connections-data-source.bind="connectionsDataSource"
k-layout.bind="{
type: 'tree',
subtype: 'tipover',
underneathHorizontalOffset: 140
}"
k-shape-defaults.bind="shapeDefaults"
k-connection-defaults.bind="{ stroke: { color: '#586477', width: 2 }}"
k-on-data-bound.delegate="onDataBound()"
k-on-item-rotate.delegate="logger.log('item-rotate')"
k-on-select.delegate="logger.log('select')"
k-on-zoom-start.delegate="logger.log('zoom-start')"
k-on-zoom-end.delegate="logger.log('zoom-end')"
k-on-click.delegate="logger.log('click')"
k-on-edit.delegate="logger.log('edit')"
k-on-add.delegate="logger.log('add')"
k-on-mouse-enter.delegate="logger.log('mouse-enter')"
k-on-mouse-leave.delegate="logger.log('mouse-leave')"
k-on-remove.delegate="logger.log('remove')"
k-on-cancel.delegate="logger.log('cancel')"
k-on-drag-start.delegate="logger.log('drag-start')"
k-on-drag.delegate="logger.log('drag')"
k-on-drag-end.delegate="logger.log('drag-end')"
k-widget.two-way="diagram">
</ak-diagram>
<div class="box">
<h4>Console log</h4>
<logger view-model.ref="logger"></logger>
</div>
</div>
</div>
</template>
export class Editing {
connectionsDataSource = {
batch: false,
transport: {
read: {
url: '//demos.telerik.com/kendo-ui/service/DiagramConnections',
dataType: 'jsonp'
},
update: {
url: '//demos.telerik.com/kendo-ui/service/DiagramConnections/Update',
dataType: 'jsonp'
},
destroy: {
url: '//demos.telerik.com/kendo-ui/service/DiagramConnections/Destroy',
dataType: 'jsonp'
},
create: {
url: '//demos.telerik.com/kendo-ui/service/DiagramConnections/Create',
dataType: 'jsonp'
},
parameterMap: (options, operation) => {
if (operation !== 'read') {
return { models: kendo.stringify(options.models || [options]) };
}
}
},
schema: {
model: {
id: 'id',
fields: {
id: { from: 'Id', type: 'number', editable: false },
from: { from: 'FromShapeId', type: 'number' },
to: { from: 'ToShapeId', type: 'number' },
fromX: { from: 'FromPointX', type: 'number' },
fromY: { from: 'FromPointY', type: 'number' },
toX: { from: 'ToPointX', type: 'number' },
toY: { from: 'ToPointY', type: 'number' }
}
}
}
};
shapesDataSource = {
batch: false,
transport: {
read: {
url: '//demos.telerik.com/kendo-ui/service/DiagramShapes',
dataType: 'jsonp'
},
update: {
url: '//demos.telerik.com/kendo-ui/service/DiagramShapes/Update',
dataType: 'jsonp'
},
destroy: {
url: '//demos.telerik.com/kendo-ui/service/DiagramShapes/Destroy',
dataType: 'jsonp'
},
create: {
url: '//demos.telerik.com/kendo-ui/service/DiagramShapes/Create',
dataType: 'jsonp'
},
parameterMap: (options, operation) => {
if (operation !== 'read') {
return { models: kendo.stringify(options.models || [options]) };
}
}
},
schema: {
model: {
id: 'id',
fields: {
id: { from: 'Id', type: 'number', editable: false },
JobTitle: { type: 'string' },
Color: { type: 'string' }
}
}
}
};
visualTemplate(options) {
let dataviz = kendo.dataviz;
let g = new dataviz.diagram.Group();
let dataItem = options.dataItem;
if (dataItem.JobTitle === 'President') {
g.append(new dataviz.diagram.Circle({
radius: 60,
stroke: {
width: 2,
color: dataItem.Color || '#586477'
},
fill: '#e8eff7'
}));
} else {
g.append(new dataviz.diagram.Rectangle({
width: 240,
height: 67,
stroke: {
width: 0
},
fill: '#e8eff7'
}));
g.append(new dataviz.diagram.Rectangle({
width: 8,
height: 67,
fill: dataItem.Color,
stroke: {
width: 0
}
}));
}
return g;
}
constructor() {
this.shapeDefaults = {
visual: this.visualTemplate,
content: {
template: '#= dataItem.JobTitle #',
fontSize: 17
}
};
}
onDataBound(e) {
setTimeout(() => {
this.diagram.bringIntoView(this.diagram.shapes);
}, 0);
}
}
<!doctype html>
<html>
<head>
<title>Aurelia KendoUI bridge</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
</head>
<body aurelia-app="main">
<h1>Loading...</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
<template>
<div class="console">
</div>
</template>
export class Logger {
attached() {
this.overrideStyles();
}
log(message, isError, container) {
let lastContainer = $('.console div:first', container);
let counter = lastContainer.find('.count').detach();
let lastMessage = lastContainer.text();
let count = 1 * (counter.text() || 1);
lastContainer.append(counter);
if (!lastContainer.length || message !== lastMessage) {
$('<div' + (isError ? ' class=\'error\'' : '') + '/>')
.css({
marginTop: -24,
backgroundColor: isError ? '#ffbbbb' : '#b2ebf2'
})
.html(message)
.prependTo($('.console', container))
.animate({ marginTop: 0 }, 300)
.animate({ backgroundColor: isError ? '#ffdddd' : '#ffffff' }, 800);
} else {
count++;
if (counter.length) {
counter.html(count);
} else {
lastContainer.html(lastMessage)
.append('<span class=\'count\'>' + count + '</span>');
}
}
}
error(message) {
this.log(message, true);
}
overrideStyles() {
jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i, attr) {
jQuery.fx.step[attr] = function(fx) {
if (!fx.state || typeof fx.end === typeof '') {
fx.start = getColor(fx.elem, attr);
fx.end = getRGB(fx.end);
}
fx.elem.style[attr] = ['rgb(', [
Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0),
Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0),
Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0)
].join(','), ')'].join('');
};
});
}
}
// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/
// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
let result;
// Check if we're already dealing with an array of colors
if (color && color.constructor === Array && color.length === 3) {
return color;
}
// Look for rgb(num,num,num)
result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color);
if (result) {
return [parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10)];
}
// Look for #a0b1c2
result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color);
if (result) {
return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
}
// Otherwise, we're most likely dealing with a named color
return jQuery.trim(color).toLowerCase();
}
function getColor(elem, attr) {
let color;
do {
color = jQuery.css(elem, attr);
// Keep going until we find an element that has color, or we hit the body
if (color && color !== 'transparent' || jQuery.nodeName(elem, 'body')) {
break;
}
attr = 'backgroundColor';
elem = elem.parentNode;
} while (elem);
return getRGB(color);
}
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-kendoui-bridge', kendo => kendo.pro());
aurelia.start().then(a => a.setRoot());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment