import window from "./ElementPrototype";
|
var extend = function (c, o) {
|
if (o == null) {
|
return c;
|
}
|
;
|
if (c == null) {
|
c = {};
|
}
|
;
|
for (var key in o) {
|
c[key] = o[key];
|
}
|
;
|
return c;
|
};
|
|
var svgObject = function () {
|
var elementType = {
|
"svg": "svg",
|
"path": 'path',
|
"rect": "rect",
|
"g": "g",
|
"circle": "circle",
|
"text": "text",
|
"image": "image"
|
};
|
|
var root_node = null;
|
var namespaceURI = "http://www.w3.org/2000/svg";
|
//
|
this.createArea = function (attr, style) {
|
var areaAttr = extend({}, attr);
|
var areaStyle = extend({}, style);
|
var area = document.createElementNS(namespaceURI, elementType.rect);
|
root_node.appendChild(area
|
.setAttr(areaAttr).setStyle(areaStyle));
|
return area;
|
};
|
//
|
this.createRect = function (attr, style, name) {
|
var areaAttr = extend({}, attr);
|
var areaStyle = extend({}, style);
|
var rect = document.createElementNS(namespaceURI, elementType.rect).setAttr(areaAttr).setStyle(areaStyle);
|
rect.createKey(name);
|
//paths[name] = rect.setAttr();
|
root_node.appendChild(rect);
|
return rect;
|
}
|
|
this.createText = function (attr, style, txt, zIndex, name, transform) {
|
var g = document.createElementNS(namespaceURI, elementType.g);
|
var textNode = document.createTextNode(txt);
|
var text = document.createElementNS(namespaceURI, elementType.text);
|
text.createKey(name); //就是ID
|
if (transform != null)
|
text.setAttr("transform", transform);
|
text.setAttr(attr).setAttr("style", style || "").appendChild(textNode);
|
g.setAttr("zIndex", (zIndex || 7)).appendChild(text);
|
root_node.appendChild(g);
|
|
};
|
|
this.createImage = function (attr, style, name, pict_path) {
|
var areaAttr = extend({}, attr);
|
var areaStyle = extend({}, style);
|
areaAttr.href = pict_path;
|
var imag = document.createElementNS(namespaceURI, "image");
|
imag.setAttr(areaAttr);//.setStyle(areaStyle);
|
if(name)
|
imag.createKey(name);
|
root_node.appendChild(imag);
|
}
|
|
this.removeByName = function (name) {
|
var elm = this.getPathByName(name);
|
if (typeof elm === "Element") {
|
root_node.remove(this.getPathByName(name));
|
}
|
//if (paths[name] != null)
|
// root_node.removeChild(paths[name])
|
};
|
|
this.createCircle = function (name, attr, style) {
|
var circle = document.createElementNS(namespaceURI, elementType.circle);
|
if(name)
|
circle.createKey(name);
|
if (style != null) {
|
circle.setAttr(attr);
|
}
|
else {
|
circle.setAttr(attr).setAttr("style", style);
|
}
|
root_node.appendChild(circle);
|
return circle;
|
};
|
|
this.createPath = function (name, value, attr, style) {
|
//console.log(name)
|
var path = document.createElementNS(namespaceURI, elementType.path);
|
if(name)
|
path.createKey(name);
|
root_node.appendChild(path);
|
this.setPathValue(path, value, attr, style)
|
return path;
|
};
|
|
this.getPathByName = function (name) {
|
return document.getElementById(name);
|
};
|
|
this.setPathValue = function (path, value, attr, style) {
|
if (value == null) {
|
return;
|
}
|
path = typeof path === "string" ? this.getPathByName(path) : path;
|
path.setAttr("d", value).setAttr(attr || {}).setStyle(style || {});
|
};
|
|
this.getRootNode = function () {
|
return root_node;
|
};
|
|
this.init = function (divName, divWidth, divHeight, svgClick, svgMove, svgID) {
|
var container = document.getElementById(divName);
|
var size = {
|
"width": divWidth || 800,
|
"height": divHeight || 600
|
};
|
//
|
if (root_node == null) {
|
root_node = document.createElementNS(namespaceURI, elementType.svg);
|
root_node.setAttribute("xmlns", "http://www.w3.org/2000/svg")
|
root_node.setAttribute("shape-rendering", "geometricPrecision");
|
root_node.setAttribute("version", "1.1");
|
if (svgID != null)
|
root_node.setAttribute("id", svgID);
|
|
root_node.on("mousemove", function (e) {
|
if (typeof svgMove == "function") {
|
var e = e || window.event;
|
svgMove(e, root_node);
|
}
|
});
|
|
root_node.on("click", function (e) {
|
if (typeof svgClick == "function") {
|
var e = e || window.event;
|
svgClick(e, root_node);
|
}
|
});
|
//root_node.setAttribute("preserveAspectRatio","xMinYMin meet" );
|
//root_node.setAttribute("viewBox","0 0 "+divWidth*2 +" "+divHeight*2 );
|
}
|
root_node.setAttr(size);
|
//console.log(divName,size,root_node);
|
container.appendChild(root_node);
|
return this;
|
};
|
};
|
export default svgObject
|
