/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { select, event } from "d3-selection";
import { zoom, zoomIdentity } from "d3-zoom";
import { drag } from "d3-drag";
import { line, curveBasis } from "d3-shape";
import platform from "platform";
import Enums from "../Enums";
const LineageUtils = {
/**
* [nodeArrowDistance variable use to define the distance between arrow and node]
* @type {Number}
*/
nodeArrowDistance: 24,
refreshGraphForSafari: function (options) {
var edgePathEl = options.edgeEl,
IEGraphRenderDone = 0;
edgePathEl.each(function (argument) {
var eleRef = this,
childNode = $(this).find("pattern");
setTimeout(function (argument) {
$(eleRef).find("defs").append(childNode);
}, 500);
});
},
refreshGraphForIE: function ({ edgePathEl }) {
var IEGraphRenderDone = 0;
edgePathEl.each(function (argument) {
var childNode = $(this).find("marker");
$(this).find("marker").remove();
var eleRef = this;
++IEGraphRenderDone;
setTimeout(function (argument) {
$(eleRef).find("defs").append(childNode);
--IEGraphRenderDone;
if (IEGraphRenderDone === 0) {
this.$(".fontLoader").hide();
this.$("svg").fadeTo(1000, 1);
}
}, 1000);
});
},
/**
* [dragNode description]
* @param {[type]} options.g [description]
* @param {[type]} options.svg [description]
* @param {[type]} options.guid [description]
* @param {[type]} options.edgePathEl [description]
* @return {[type]} [description]
*/
dragNode: function ({ g, svg, guid, edgePathEl }) {
var dragHelper = {
dragmove: function (el, d) {
var node = select(el),
selectedNode = g.node(d),
prevX = selectedNode.x,
prevY = selectedNode.y;
selectedNode.x += event.dx;
selectedNode.y += event.dy;
node.attr("transform", "translate(" + selectedNode.x + "," + selectedNode.y + ")");
var dx = selectedNode.x - prevX,
dy = selectedNode.y - prevY;
g.edges().forEach((e) => {
if (e.v == d || e.w == d) {
var edge = g.edge(e.v, e.w);
this.translateEdge(edge, dx, dy);
select(edge.elem).select("path").attr("d", this.calcPoints(e));
}
});
//LineageUtils.refreshGraphForIE({ edgePathEl: edgePathEl });
},
translateEdge: function (e, dx, dy) {
e.points.forEach(function (p) {
p.x = p.x + dx;
p.y = p.y + dy;
});
},
calcPoints: function (e) {
var edge = g.edge(e.v, e.w),
tail = g.node(e.v),
head = g.node(e.w),
points = edge.points.slice(1, edge.points.length - 1),
afterslice = edge.points.slice(1, edge.points.length - 1);
points.unshift(this.intersectRect(tail, points[0]));
points.push(this.intersectRect(head, points[points.length - 1]));
return line()
.x(function (d) {
return d.x;
})
.y(function (d) {
return d.y;
})
.curve(curveBasis)(points);
},
intersectRect: (node, point) => {
var x = node.x,
y = node.y,
dx = point.x - x,
dy = point.y - y,
nodeDistance = guid ? this.nodeArrowDistance + 3 : this.nodeArrowDistance,
w = nodeDistance,
h = nodeDistance,
sx = 0,
sy = 0;
if (Math.abs(dy) * w > Math.abs(dx) * h) {
// Intersection is top or bottom of rect.
if (dy < 0) {
h = -h;
}
sx = dy === 0 ? 0 : (h * dx) / dy;
sy = h;
} else {
// Intersection is left or right of rect.
if (dx < 0) {
w = -w;
}
sx = w;
sy = dx === 0 ? 0 : (w * dy) / dx;
}
return {
x: x + sx,
y: y + sy
};
}
};
var dragNodeHandler = drag().on("drag", function (d) {
dragHelper.dragmove.call(dragHelper, this, d);
}),
dragEdgePathHandler = drag().on("drag", function (d) {
dragHelper.translateEdge(g.edge(d.v, d.w), event.dx, event.dy);
var edgeObj = g.edge(d.v, d.w);
select(edgeObj.elem).select("path").attr("d", dragHelper.calcPoints(d));
});
dragNodeHandler(svg.selectAll("g.node"));
dragEdgePathHandler(svg.selectAll("g.edgePath"));
},
zoomIn: function ({ svg, scaleFactor = 1.3 }) {
this.d3Zoom.scaleBy(svg.transition().duration(750), scaleFactor);
},
zoomOut: function ({ svg, scaleFactor = 0.8 }) {
this.d3Zoom.scaleBy(svg.transition().duration(750), scaleFactor);
},
zoom: function ({ svg, xa, ya, scale }) {
svg.transition().duration(750).call(this.d3Zoom.transform, zoomIdentity.translate(xa, ya).scale(scale));
},
fitToScreen: function ({ svg }) {
var node = svg.node();
var bounds = node.getBBox();
var parent = node.parentElement,
fullWidth = parent.clientWidth,
fullHeight = parent.clientHeight;
var width = bounds.width,
height = bounds.height;
var midX = bounds.x + width / 2,
midY = bounds.y + height / 2;
var scale = (scale || 0.95) / Math.max(width / fullWidth, height / fullHeight),
xa = fullWidth / 2 - scale * midX,
ya = fullHeight / 2 - scale * midY;
this.zoom({ svg, xa, ya, scale });
},
/**
* [centerNode description]
* @param {[type]} options.guid [description]
* @param {[type]} options.g [description]
* @param {[type]} options.svg [description]
* @param {[type]} options.svgGroupEl [description]
* @param {[type]} options.edgePathEl [description]
* @param {[type]} options.width [description]
* @param {[type]} options.height [description]
* @param {[type]} options.onCenterZoomed [description]
* @return {[type]} [description]
*/
centerNode: function ({ guid, g, svg, svgGroupEl, edgePathEl, width, height, fitToScreen, onCenterZoomed }) {
this.d3Zoom = zoom();
svg.call(this.d3Zoom).on("dblclick.zoom", null);
// restrict events
let selectedNodeEl = svg.selectAll("g.nodes>g[id='" + guid + "']"),
zoomListener = this.d3Zoom.scaleExtent([0.01, 50]).on("zoom", function () {
svgGroupEl.attr("transform", event.transform);
}),
x = null,
y = null,
scale = 1.2;
if (selectedNodeEl.empty()) {
if (fitToScreen) {
this.fitToScreen({ svg });
return;
} else {
x = g.graph().width / 2;
y = g.graph().height / 2;
}
} else {
var matrix = selectedNodeEl
.attr("transform")
.replace(/[^0-9\-.,]/g, "")
.split(",");
// if (platform.name === "IE" || platform.name === "Microsoft Edge") {
// var matrix = selectedNode
// .attr("transform")
// .replace(/[a-z\()]/g, "")
// .split(" ");
// }
x = matrix[0];
y = matrix[1];
}
var xa = -(x * scale - width / 2),
ya = -(y * scale - height / 2);
this.zoom({ svg, xa, ya, scale });
svg.transition().duration(750).call(this.d3Zoom.transform, zoomIdentity.translate(xa, ya).scale(scale));
if (onCenterZoomed) {
onCenterZoomed({ newScale: scale, newTranslate: [xa, ya], d3Zoom: this.d3Zoom, selectedNodeEl });
}
// if (platform.name === "IE") {
// LineageUtils.refreshGraphForIE({ edgePathEl: edgePathEl });
// }
},
/**
* [getToolTipDirection description]
* @param {[type]} options.el [description]
* @return {[type]} [description]
*/
getToolTipDirection: function ({ el }) {
var width = select("body").node().getBoundingClientRect().width,
currentELWidth = select(el).node().getBoundingClientRect(),
direction = "e";
if (width - currentELWidth.left < 330) {
direction = width - currentELWidth.left < 330 && currentELWidth.top < 400 ? "sw" : "w";
if (width - currentELWidth.left < 330 && currentELWidth.top > 600) {
direction = "nw";
}
} else if (currentELWidth.top > 600) {
direction = width - currentELWidth.left < 330 && currentELWidth.top > 600 ? "nw" : "n";
if (currentELWidth.left < 50) {
direction = "ne";
}
} else if (currentELWidth.top < 400) {
direction = currentELWidth.left < 50 ? "se" : "s";
}
return direction;
},
/**
* [onHoverFade description]
* @param {[type]} options.svg [description]
* @param {[type]} options.g [description]
* @param {[type]} options.mouseenter [description]
* @param {[type]} options.opacity [description]
* @param {[type]} options.nodesToHighlight [description]
* @param {[type]} options.hoveredNode [description]
* @return {[type]} [description]
*/
onHoverFade: function ({ svg, g, mouseenter, nodesToHighlight, hoveredNode }) {
var node = svg.selectAll(".node"),
path = svg.selectAll(".edgePath"),
isConnected = function (a, b, o) {
if (a === o || (b && b.length && b.indexOf(o) != -1)) {
return true;
}
};
if (mouseenter) {
svg.classed("hover", true);
var nextNode = g.successors(hoveredNode),
previousNode = g.predecessors(hoveredNode),
nodesToHighlight = nextNode.concat(previousNode);
node.classed("hover-active-node", function (currentNode, i, nodes) {
if (isConnected(hoveredNode, nodesToHighlight, currentNode)) {
return true;
} else {
return false;
}
});
path.classed("hover-active-path", function (c) {
var _thisOpacity = c.v === hoveredNode || c.w === hoveredNode ? 1 : 0;
if (_thisOpacity) {
return true;
} else {
return false;
}
});
} else {
svg.classed("hover", false);
node.classed("hover-active-node", false);
path.classed("hover-active-path", false);
}
},
/**
* [getBaseUrl description]
* @param {[type]} path [description]
* @return {[type]} [description]
*/
getBaseUrl: function (url = window.location.pathname) {
return url.replace(/\/[\w-]+.(jsp|html)|\/+$/gi, "");
},
getEntityIconPath: function ({ entityData, errorUrl, imgBasePath }) {
var iconBasePath = this.getBaseUrl() + (imgBasePath || "/img/entity-icon/");
if (entityData) {
let { typeName, serviceType, status, isProcess } = entityData;
function getImgPath(imageName) {
return iconBasePath + (Enums.entityStateReadOnly[status] ? "disabled/" + imageName : imageName);
}
function getDefaultImgPath() {
if (isProcess) {
if (Enums.entityStateReadOnly[status]) {
return iconBasePath + "disabled/process.png";
} else {
return iconBasePath + "process.png";
}
} else {
if (Enums.entityStateReadOnly[status]) {
return iconBasePath + "disabled/table.png";
} else {
return iconBasePath + "table.png";
}
}
}
if (errorUrl) {
// Check if the default img path has error, if yes then stop recursion.
if (errorUrl.indexOf("table.png") > -1 || errorUrl.indexOf("process.png") > -1) {
return null;
}
var isErrorInTypeName = errorUrl && errorUrl.match("entity-icon/" + typeName + ".png|disabled/" + typeName + ".png") ? true : false;
if (serviceType && isErrorInTypeName) {
var imageName = serviceType + ".png";
return getImgPath(imageName);
} else {
return getDefaultImgPath();
}
} else if (typeName) {
var imageName = typeName + ".png";
return getImgPath(imageName);
} else if (serviceType) {
var imageName = serviceType + ".png";
return getImgPath(imageName);
} else {
return getDefaultImgPath();
}
}
},
base64Encode: function (file, callback) {
const reader = new FileReader();
reader.addEventListener("load", () => callback(reader.result));
reader.readAsDataURL(file);
},
imgShapeRender: function (parent, bbox, node, { dagreD3, defsEl, imgBasePath, guid, isRankdirToBottom }) {
var that = this,
viewGuid = guid,
imageIconPath = this.getEntityIconPath({ entityData: node, imgBasePath }),
imgName = imageIconPath.split("/").pop();
if (this.imageObject === undefined) {
this.imageObject = {};
}
if (node.isDeleted) {
imgName = "deleted_" + imgName;
}
if (node.id == viewGuid) {
var currentNode = true;
}
var shapeSvg = parent
.append("circle")
.attr("fill", "url(#img_" + imgName + ")")
.attr("r", isRankdirToBottom ? "30px" : "24px")
.attr("data-stroke", node.id)
.attr("stroke-width", "2px")
.attr("class", "nodeImage " + (currentNode ? "currentNode" : node.isProcess ? "process" : "node"));
if (currentNode) {
shapeSvg.attr("stroke", "#fb4200");
}
if (node.isIncomplete === true) {
parent.attr("class", "node isIncomplete show");
parent
.insert("foreignObject")
.attr("x", "-25")
.attr("y", "-25")
.attr("width", "50")
.attr("height", "50")
.append("xhtml:div")
.insert("i")
.attr("class", "fa fa-hourglass-half");
}
if (defsEl.select('pattern[id="img_' + imgName + '"]').empty()) {
defsEl
.append("pattern")
.attr("x", "0%")
.attr("y", "0%")
.attr("patternUnits", "objectBoundingBox")
.attr("id", "img_" + imgName)
.attr("width", "100%")
.attr("height", "100%")
.append("image")
.attr("href", function (d) {
var imgEl = this;
if (node) {
var getImageData = function (options) {
var imagePath = options.imagePath,
ajaxOptions = {
url: imagePath,
method: "GET",
cache: true
};
// if (platform.name !== "IE") {
// ajaxOptions["mimeType"] = "text/plain; charset=x-user-defined";
// }
shapeSvg.attr("data-iconpath", imagePath);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
if (platform.name !== "IE") {
that.base64Encode(this.response, (url) => {
that.imageObject[imageIconPath] = url;
select(imgEl).attr("xlink:href", url);
});
} else {
that.imageObject[imageIconPath] = imagePath;
}
if (imageIconPath !== shapeSvg.attr("data-iconpath")) {
shapeSvg.attr("data-iconpathorigin", imageIconPath);
}
} else if (xhr.status === 404) {
const imgPath = that.getEntityIconPath({ entityData: node, errorUrl: imagePath });
if (imgPath === null) {
const patternEL = select(imgEl.parentElement);
patternEL.select("image").remove();
patternEL
.attr("patternContentUnits", "objectBoundingBox")
.append("circle")
.attr("r", "24px")
.attr("fill", "#e8e8e8");
} else {
getImageData({
imagePath: imgPath
});
}
}
}
};
xhr.responseType = "blob";
xhr.open(ajaxOptions.method, ajaxOptions.url, true);
xhr.send(null);
};
getImageData({
imagePath: imageIconPath
});
}
})
.attr("x", isRankdirToBottom ? "11" : "4")
.attr("y", isRankdirToBottom ? "20" : currentNode ? "3" : "4")
.attr("width", "40")
.attr("height", "40");
}
node.intersect = function (point) {
return dagreD3.intersect.circle(node, currentNode ? that.nodeArrowDistance + 3 : that.nodeArrowDistance, point);
};
return shapeSvg;
},
/**
* [arrowPointRender description]
* @param {[type]} {parent, id, edge, type, viewOptions [description]
* @return {[type]} [description]
*/
arrowPointRender: function (parent, id, edge, type, { dagreD3 }) {
var node = parent.node(),
parentNode = node ? node.parentNode : parent;
select(parentNode)
.select("path.path")
.attr("marker-end", "url(#" + id + ")");
var marker = parent
.append("marker")
.attr("id", id)
.attr("viewBox", "0 0 10 10")
.attr("refX", 8)
.attr("refY", 5)
.attr("markerUnits", "strokeWidth")
.attr("markerWidth", 4)
.attr("markerHeight", 4)
.attr("orient", "auto");
var path = marker.append("path").attr("d", "M 0 0 L 10 5 L 0 10 z").style("fill", edge.styleObj.stroke);
dagreD3.util.applyStyle(path, edge[type + "Style"]);
},
/**
* [saveSvg description]
* @param {[type]} options.svg [description]
* @param {[type]} options.width [description]
* @param {[type]} options.height [description]
* @param {[type]} options.downloadFileName [description]
* @param {[type]} options.onExportLineage [description]
* @return {[type]} [description]
*/
saveSvg: function ({ svg, width, height, downloadFileName, onExportLineage }) {
var that = this,
svgClone = svg.clone(true).node(),
scaleFactor = 1;
setTimeout(function () {
if (platform.name === "Firefox") {
svgClone.setAttribute("width", width);
svgClone.setAttribute("height", height);
}
const hiddenSvgEl = select("body").append("div");
hiddenSvgEl.classed("hidden-svg", true);
hiddenSvgEl.node().appendChild(svgClone);
const svgCloneEl = select(".hidden-svg svg");
svgCloneEl.select("g").attr("transform", "scale(" + scaleFactor + ")");
svgCloneEl.select("foreignObject").remove();
var canvasOffset = { x: 150, y: 150 },
setWidth = svgClone.getBBox().width + canvasOffset.x,
setHeight = svgClone.getBBox().height + canvasOffset.y,
xAxis = svgClone.getBBox().x,
yAxis = svgClone.getBBox().y;
svgClone.attributes.viewBox.value = xAxis + "," + yAxis + "," + setWidth + "," + setHeight;
var canvas = document.createElement("canvas");
canvas.id = "canvas";
canvas.style.display = "none";
canvas.width = svgClone.getBBox().width * scaleFactor + canvasOffset.x;
canvas.height = svgClone.getBBox().height * scaleFactor + canvasOffset.y;
// Append Canvas in DOM
select("body").node().appendChild(canvas);
var ctx = canvas.getContext("2d"),
data = new XMLSerializer().serializeToString(svgClone),
DOMURL = window.URL || window.webkitURL || window;
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeRect(0, 0, canvas.width, canvas.height);
ctx.restore();
var img = new Image(canvas.width, canvas.height);
var svgBlob = new Blob([data], { type: "image/svg+xml;base64" });
if (platform.name === "Safari") {
svgBlob = new Blob([data], { type: "image/svg+xml" });
}
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
try {
var a = document.createElement("a");
a.download = downloadFileName;
document.body.appendChild(a);
ctx.drawImage(img, 50, 50, canvas.width, canvas.height);
canvas.toBlob(function (blob) {
if (!blob) {
onExportLineage({ status: "failed", message: "There was an error in downloading Lineage!" });
return;
}
a.href = DOMURL.createObjectURL(blob);
if (blob.size > 10000000) {
onExportLineage({ status: "failed", message: "The Image size is huge, please open the image in a browser!" });
}
a.click();
onExportLineage({ status: "Success", message: "Successful" });
if (platform.name === "Safari") {
that.refreshGraphForSafari({
edgeEl: that.$("svg g.node")
});
}
}, "image/png");
hiddenSvgEl.remove();
canvas.remove();
} catch (err) {
onExportLineage({ status: "failed", message: "There was an error in downloading Lineage!" });
}
};
img.src = url;
}, 0);
}
};
export default LineageUtils;