Commit 047672a2 authored by techird's avatar techird

stash

parent c21187a3
...@@ -174,13 +174,13 @@ var utils = Utils = KityMinder.Utils = { ...@@ -174,13 +174,13 @@ var utils = Utils = KityMinder.Utils = {
}, },
getNodeCommonAncestor: function(nodeA, nodeB) { getNodeCommonAncestor: function(nodeA, nodeB) {
if (nodeA === nodeB) { if (nodeA === nodeB) {
return nodeA.parent return nodeA.parent;
} }
if (nodeA.contains(nodeB)) { if (nodeA.contains(nodeB)) {
return this return nodeB;
} }
if (nodeB.contains(nodeA)) { if (nodeB.contains(nodeA)) {
return nodeB return nodeB;
} }
var parent = nodeA.parent; var parent = nodeA.parent;
while (!parent.contains(nodeB)) { while (!parent.contains(nodeB)) {
......
...@@ -66,6 +66,25 @@ var DragBox = kity.createClass('DragBox', { ...@@ -66,6 +66,25 @@ var DragBox = kity.createClass('DragBox', {
this.addShapes([this._rect, this._text]); this.addShapes([this._rect, this._text]);
}, },
// 进入拖放模式:
// 1. 计算拖放源和允许的拖放目标
// 2. 渲染拖放盒子
// 3. 启动收缩动画
// 4. 标记已启动
_enterDragMode: function() {
this._calcDragSources();
if (!this._dragSources.length) {
this._startPosition = null;
return false;
}
this._calcDropTargets();
if (this._dragSources.length > 1) {
this._shrink();
this._drawForDragMode();
}
this._dragMode = true;
return true;
},
// 从选中的节点计算拖放源 // 从选中的节点计算拖放源
// 并不是所有选中的节点都作为拖放源,如果选中节点中存在 A 和 B, // 并不是所有选中的节点都作为拖放源,如果选中节点中存在 A 和 B,
...@@ -108,34 +127,6 @@ var DragBox = kity.createClass('DragBox', { ...@@ -108,34 +127,6 @@ var DragBox = kity.createClass('DragBox', {
this._dropTargetBoxes = this._dropTargets.map(boxMapper); this._dropTargetBoxes = this._dropTargets.map(boxMapper);
}, },
// 进入拖放模式:
// 1. 计算拖放源和允许的拖放目标
// 2. 渲染拖放盒子
// 3. 启动收缩动画
// 4. 标记已启动
_enterDragMode: function() {
this._calcDragSources();
if (!this._dragSources.length) {
this._startPosition = null;
return false;
}
this._calcDropTargets();
this._drawForDragMode();
this._shrink();
this._dragMode = true;
return true;
},
_leaveDragMode: function() {
this.remove();
this._dragMode = false;
this._dropSucceedTarget = null;
this._removeDropHint();
},
_drawForDragMode: function() {
this._text.setContent(this._dragSources.length + ' items');
this._text.setPosition(this._startPosition.x, this._startPosition.y + 5);
this._minder.getRenderContainer().addShape(this);
},
_shrink: function() { _shrink: function() {
// 合并所有拖放源图形的矩形即可 // 合并所有拖放源图形的矩形即可
function calcSourceArea(boxArray) { function calcSourceArea(boxArray) {
...@@ -167,6 +158,20 @@ var DragBox = kity.createClass('DragBox', { ...@@ -167,6 +158,20 @@ var DragBox = kity.createClass('DragBox', {
var animator = new AreaAnimator(sourceArea, focusArea); var animator = new AreaAnimator(sourceArea, focusArea);
animator.start(this._rect, 400, 'easeOutQuint'); animator.start(this._rect, 400, 'easeOutQuint');
}, },
_leaveDragMode: function() {
this.remove();
this._dragMode = false;
this._dropSucceedTarget = null;
this._removeDropHint();
},
_drawForDragMode: function() {
this._text.setContent(this._dragSources.length + ' items');
this._text.setPosition(this._startPosition.x, this._startPosition.y + 5);
this._minder.getRenderContainer().addShape(this);
},
// 此处可用线段树优化,但考虑到节点不多,必要性不到,就用暴力测试 // 此处可用线段树优化,但考虑到节点不多,必要性不到,就用暴力测试
_dropTest: function() { _dropTest: function() {
var dragBox = this.getRenderBox(), var dragBox = this.getRenderBox(),
...@@ -235,10 +240,11 @@ var DragBox = kity.createClass('DragBox', { ...@@ -235,10 +240,11 @@ var DragBox = kity.createClass('DragBox', {
var movement = kity.Vector.fromPoints(this._startPosition, this._dragPosition); var movement = kity.Vector.fromPoints(this._startPosition, this._dragPosition);
var minder = this._minder; var minder = this._minder;
this._dragSources.forEach(function(source) { this._dragSources.forEach(function(source) {
source.setLayoutOffset(movement); source.setLayoutOffset(movement);
minder.layout();
}); });
minder.layout();
this.setTranslate(movement); this.setTranslate(movement);
......
KityMinder.registerProtocal( "png", function () { KityMinder.registerProtocal("png", function() {
function loadImage( url, callback ) { function loadImage(url, callback) {
var image = new Image(); var image = new Image();
image.onload = callback; image.onload = callback;
console.log( url ); console.log(url);
image.src = url; image.src = url;
} }
return { return {
fileDescription: 'PNG 图片(暂不支持IE)', fileDescription: 'PNG 图片(暂不支持IE)',
fileExtension: '.png', fileExtension: '.png',
encode: function ( json, km ) { encode: function(json, km) {
var domContainer = km.getPaper().container, var domContainer = km.getPaper().container,
svgXml, svgXml,
$svg, $svg,
bgDeclare = getComputedStyle( domContainer ).backgroundImage, bgDeclare = getComputedStyle(domContainer).backgroundImage,
bgUrl = /url\((.+)\)$/.exec( bgDeclare )[ 1 ], bgUrl = /url\((.+)\)$/.exec(bgDeclare)[1],
renderContainer = km.getRenderContainer(), renderContainer = km.getRenderContainer(),
renderBox = renderContainer.getRenderBox(), renderBox = renderContainer.getRenderBox(),
transform = renderContainer.getTransform(), transform = renderContainer.getTransform(),
width = renderBox.width, width = renderBox.width,
height = renderBox.height, height = renderBox.height,
padding = 20, padding = 20,
canvas = document.createElement( 'canvas' ), canvas = document.createElement('canvas'),
ctx = canvas.getContext( '2d' ), ctx = canvas.getContext('2d'),
blob, DomURL, url, img, finishCallback; blob, DomURL, url, img, finishCallback;
bgUrl = bgUrl.replace( /"/g, '' ); bgUrl = bgUrl.replace(/"/g, '');
renderContainer.translate( -renderBox.x, -renderBox.y ); renderContainer.translate(-renderBox.x, -renderBox.y);
svgXml = km.getPaper().container.innerHTML; svgXml = km.getPaper().container.innerHTML;
renderContainer.translate( renderBox.x, renderBox.y ); renderContainer.translate(renderBox.x, renderBox.y);
$svg = $( svgXml ); $svg = $(svgXml).filter('svg');
$svg.attr( { $svg.attr({
width: renderBox.width, width: renderBox.width,
height: renderBox.height, height: renderBox.height,
style: 'font-family: Arial, "Microsoft Yahei","Heiti SC";' style: 'font-family: Arial, "Microsoft Yahei","Heiti SC";'
} ); });
// need a xml with width and height // need a xml with width and height
svgXml = $( '<div></div>' ).append( $svg ).html(); svgXml = $('<div></div>').append($svg).html();
// svg 含有 &nbsp; 符号导出报错 Entity 'nbsp' not defined // svg 含有 &nbsp; 符号导出报错 Entity 'nbsp' not defined
svgXml = svgXml.replace( /&nbsp;/g, '&#xa0;' ); svgXml = svgXml.replace(/&nbsp;/g, '&#xa0;');
blob = new Blob( [ svgXml ], { blob = new Blob([svgXml], {
type: "image/svg+xml;charset=utf-8" type: "image/svg+xml;charset=utf-8"
} ); });
DomURL = window.URL || window.webkitURL || window; DomURL = window.URL || window.webkitURL || window;
url = DomURL.createObjectURL( blob ); url = DomURL.createObjectURL(blob);
canvas.width = width + padding * 2; canvas.width = width + padding * 2;
canvas.height = height + padding * 2; canvas.height = height + padding * 2;
function fillBackground( ctx, image, width, height ) { function fillBackground(ctx, image, width, height) {
ctx.save(); ctx.save();
ctx.fillStyle = ctx.createPattern( image, "repeat" ); ctx.fillStyle = ctx.createPattern(image, "repeat");
ctx.fillRect( 0, 0, width, height ); ctx.fillRect(0, 0, width, height);
ctx.restore(); ctx.restore();
} }
function drawImage( ctx, image, x, y ) { function drawImage(ctx, image, x, y) {
ctx.drawImage( image, x, y ); ctx.drawImage(image, x, y);
} }
function generateDataUrl( canvas ) { function generateDataUrl(canvas) {
var url = canvas.toDataURL( 'png' ); var url = canvas.toDataURL('png');
return url; return url;
} }
loadImage( url, function () { loadImage(url, function() {
var svgImage = this; var svgImage = this;
loadImage( bgUrl, function () { loadImage(bgUrl, function() {
var downloadUrl; var downloadUrl;
fillBackground( ctx, this, canvas.width, canvas.height ); fillBackground(ctx, this, canvas.width, canvas.height);
drawImage( ctx, svgImage, padding, padding ); drawImage(ctx, svgImage, padding, padding);
DomURL.revokeObjectURL( url ); DomURL.revokeObjectURL(url);
downloadUrl = generateDataUrl( canvas ); downloadUrl = generateDataUrl(canvas);
if ( finishCallback ) { if (finishCallback) {
finishCallback( downloadUrl ); finishCallback(downloadUrl);
} }
} ); });
} ); });
return { return {
then: function ( callback ) { then: function(callback) {
finishCallback = callback; finishCallback = callback;
} }
}; };
}, },
recognizePriority: -1 recognizePriority: -1
}; };
} ); });
\ No newline at end of file \ No newline at end of file
KityMinder.registerProtocal( "svg", function () { KityMinder.registerProtocal("svg", function() {
return { return {
fileDescription: 'SVG 矢量图(暂不支持IE)', fileDescription: 'SVG 矢量图(暂不支持IE)',
fileExtension: '.svg', fileExtension: '.svg',
mineType: 'image/svg+xml', mineType: 'image/svg+xml',
encode: function ( json, km ) { encode: function(json, km) {
// svg 含有 &nbsp; 符号导出报错 Entity 'nbsp' not defined var domContainer = km.getPaper().container,
return km.getPaper().container.innerHTML.replace( /&nbsp;/g, '&#xa0;' ); svgXml,
}, $svg,
recognizePriority: -1
}; renderContainer = km.getRenderContainer(),
} ); renderBox = renderContainer.getRenderBox(),
\ No newline at end of file transform = renderContainer.getTransform(),
width = renderBox.width,
height = renderBox.height,
padding = 20;
svgXml = km.getPaper().container.innerHTML;
$svg = $(svgXml).filter('svg');
$svg.attr({
width: width + padding * 2 | 0,
height: height + padding * 2 | 0,
style: 'font-family: Arial, "Microsoft Yahei","Heiti SC";'
});
$svg[0].setAttribute('viewBox', [renderBox.x - padding | 0,
renderBox.y - padding | 0,
width + padding * 2 | 0,
height + padding * 2 | 0
].join(' '));
// need a xml with width and height
svgXml = $('<div></div>').append($svg).html();
// svg 含有 &nbsp; 符号导出报错 Entity 'nbsp' not defined
svgXml = svgXml.replace(/&nbsp;/g, '&#xa0;');
// svg 含有 &nbsp; 符号导出报错 Entity 'nbsp' not defined
return svgXml;
},
recognizePriority: -1
};
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment