basicprimitivesreact
Version:
Data visualization diagramming components library for dependencies visualization and analysis that implements organizational chart, family chart, inheritance, dependency trees, and business ownership diagrams provides a reach feature set for automatic lay
387 lines (386 loc) • 17.4 kB
JavaScript
"use strict";
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _basicprimitives = require("basicprimitives");
var _RotatedText = _interopRequireDefault(require("./Templates/RotatedText"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
var Placeholder = /*#__PURE__*/_createClass(function Placeholder(name) {
_classCallCheck(this, Placeholder);
this.name = name;
this.layers = {};
this.activeLayer = null;
this.size = null;
this.rect = null;
this.hasGraphics = true;
this.isVisible = true;
});
;
var Layer = /*#__PURE__*/function () {
function Layer(name) {
_classCallCheck(this, Layer);
this.name = name;
this.items = [];
this.polylines = [];
}
return _createClass(Layer, [{
key: "reset",
value: function reset() {
this.items = [];
this.polylines = [];
}
}]);
}();
;
var Graphics = /*#__PURE__*/function () {
function Graphics(size) {
_classCallCheck(this, Graphics);
this.placeholders = {};
this.activePlaceholder = null;
this.size = size;
this.hasGraphics = true;
this.names = Object.keys(_basicprimitives.Layers).reduce(function (agg, key) {
agg[_basicprimitives.Layers[key]] = key;
return agg;
}, []);
// Set pointer-events: none and make them mouse transparent for the following layers
this.mouseTransparentLayers = {};
this.mouseTransparentLayers["ForegroundAnnotations"] = true;
this.mouseTransparentLayers["ForegroundConnectorAnnotation"] = true;
this.mouseTransparentLayers["Annotation"] = true;
this.orientations = ['Horizontal', 'RotateLeft', 'RotateRight', 'Horizontal'];
this.horizontalAlignments = ['center', 'left', 'right'];
this.verticalAlignments = ['top', 'middle', 'bottom'];
}
return _createClass(Graphics, [{
key: "clean",
value: function clean() {
this.placeholders = {};
this.activePlaceholder = null;
}
}, {
key: "resize",
value: function resize(name, width, height) {
this.activatePlaceholder(name);
this.resizePlaceholder(this.activePlaceholder, 0, 0, width, height);
}
}, {
key: "position",
value: function position(name, left, top, width, height) {
this.activatePlaceholder(name);
this.resizePlaceholder(this.activePlaceholder, left, top, width, height);
}
}, {
key: "show",
value: function show(name) {
var placeholder = this.placeholders[name];
if (placeholder != null) {
placeholder.isVisible = true;
}
}
}, {
key: "hide",
value: function hide(name) {
var placeholder = this.placeholders[name];
if (placeholder != null) {
placeholder.isVisible = false;
}
}
}, {
key: "resizePlaceholder",
value: function resizePlaceholder(placeholder, left, top, width, height) {
placeholder.size = new _basicprimitives.Size(width, height);
placeholder.rect = new _basicprimitives.Rect(left, top, width, height);
}
}, {
key: "reset",
value: function reset(placeholderName, layerKey) {
var layerName = this.names[layerKey];
var placeholder = this.placeholders[placeholderName];
if (placeholder != null) {
var layer = placeholder.layers[layerName];
if (layer != null) {
layer.reset();
}
}
}
}, {
key: "activate",
value: function activate(placeholderName, layerKey) {
this.activatePlaceholder(placeholderName);
this.activateLayer(layerKey);
return this.activePlaceholder;
}
}, {
key: "activatePlaceholder",
value: function activatePlaceholder(name) {
var placeholder = this.placeholders[name];
if (placeholder === undefined) {
placeholder = new Placeholder(name);
placeholder.size = this.size;
placeholder.rect = new _basicprimitives.Rect(0, 0, placeholder.size.width, placeholder.size.height);
this.placeholders[name] = placeholder;
}
this.activePlaceholder = placeholder;
}
}, {
key: "activateLayer",
value: function activateLayer(value) {
var name = this.names[value];
var layer = this.activePlaceholder.layers[name];
if (layer === undefined) {
layer = new Layer(name);
this.activePlaceholder.layers[name] = layer;
}
this.activePlaceholder.activeLayer = layer;
}
}, {
key: "map",
value: function map(thisArg, placeholderName, onLayer) {
var _this = this;
var result = [];
if (onLayer != null) {
var placeholder = this.placeholders[placeholderName];
this.names.forEach(function (layerKey) {
var layer = placeholder.layers[layerKey];
if (layer != null) {
result.push(onLayer.call(thisArg, layerKey, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, layer.polylines.length > 0 ? /*#__PURE__*/_react["default"].createElement("svg", {
style: {
pointerEvents: "none"
},
height: placeholder.size.height,
width: placeholder.size.width
}, layer.polylines) : null, layer.items), _this.mouseTransparentLayers[layerKey]));
}
});
}
return result;
}
}, {
key: "getDefaultLayerElements",
value: function getDefaultLayerElements(thisArg, placeholderName, onLayer) {
var result = [];
if (onLayer != null) {
var placeholder = this.placeholders[placeholderName];
var layerKey = undefined;
var layer = placeholder.layers[layerKey];
if (layer != null) {
result.push(onLayer.call(thisArg, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, layer.polylines.length > 0 ? /*#__PURE__*/_react["default"].createElement("svg", {
style: {
pointerEvents: "none"
},
height: placeholder.size.height,
width: placeholder.size.width
}, layer.polylines) : null, layer.items)));
}
}
return result;
}
}, {
key: "text",
value: function text(x, y, width, height, label, orientation, horizontalAlignment, verticalAlignment, attr) {
this.activePlaceholder.activeLayer.items.push(/*#__PURE__*/_react["default"].createElement("div", {
key: this.activePlaceholder.activeLayer.items.length,
style: _objectSpread(_objectSpread({
position: "absolute",
overflow: "visible",
fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif",
WebkitTapHighlightColor: "rgba(0,0,0,0)",
WebkitUserSelect: "none",
WebkitTouchCallout: "none",
KhtmlUserSelect: "none",
MozUserSelect: "none",
msUserSelect: "none",
userSelect: "none",
boxSizing: "content-box"
}, attr), {}, {
top: y + "px",
left: x + "px"
})
}, /*#__PURE__*/_react["default"].createElement(_RotatedText["default"], {
width: width,
height: height,
orientation: this.orientations[orientation],
horizontalAlignment: this.horizontalAlignments[horizontalAlignment],
verticalAlignment: this.verticalAlignments[verticalAlignment]
}, label)));
}
}, {
key: "polylinesBuffer",
value: function polylinesBuffer(buffer) {
buffer.loop(this, function (polyline) {
if (polyline.length() > 0) {
this.polyline(polyline);
}
});
}
}, {
key: "polyline",
value: function polyline(polylineData) {
var data,
attr = polylineData.paletteItem.toAttr(),
step,
radius,
cornerRadius,
style = {};
if (attr.fillColor !== undefined) {
style.fill = attr.fillColor;
style.fillOpacity = attr.opacity;
} else {
style.fillOpacity = 0;
}
if (attr.lineWidth !== undefined && attr.borderColor !== undefined) {
style.stroke = attr.borderColor;
style.strokeWidth = attr.lineWidth;
if (attr.opacity !== undefined) {
style.strokeOpacity = attr.opacity;
} else {
style.strokeOpacity = 1;
}
} else {
style.stroke = "transparent";
style.strokeWidth = 0;
}
if (attr.lineType != null) {
step = Math.round(attr.lineWidth) || 1;
switch (attr.lineType) {
case _basicprimitives.LineType.Dotted:
style.strokeDasharray = step + "," + step;
break;
case _basicprimitives.LineType.Dashed:
style.strokeDasharray = step * 5 + "," + step * 3;
break;
case _basicprimitives.LineType.Solid:
default:
style.strokeDasharray = "";
break;
}
}
data = "";
polylineData.loop(this, function (segment) {
switch (segment.segmentType) {
case _basicprimitives.SegmentType.Move:
data += "M" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
break;
case _basicprimitives.SegmentType.Line:
data += "L" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
break;
case _basicprimitives.SegmentType.QuadraticArc:
data += "Q" + (Math.round(segment.cpX) + 0.5) + " " + (Math.round(segment.cpY) + 0.5) + " " + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
break;
case _basicprimitives.SegmentType.Dot:
// A rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y
if (segment.width === segment.height && segment.width / 2.0 <= segment.cornerRadius) {
// dot
radius = segment.width / 2.0;
data += "M" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + segment.height / 2.0 + 0.5);
data += "A" + radius + " " + radius + " 0 0 0 " + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y) + segment.height / 2.0 + 0.5);
data += "A" + radius + " " + radius + " 0 0 0 " + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + segment.height / 2.0 + 0.5);
} else if (segment.cornerRadius === 0) {
// square
data += "M" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
data += "L" + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y) + 0.5);
data += "L" + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y + segment.height) + 0.5);
data += "L" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y + segment.height) + 0.5);
data += "L" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
} else {
cornerRadius = Math.min(segment.cornerRadius, Math.min(segment.width / 2.0, segment.height / 2.0));
data += "M" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y + cornerRadius) + 0.5);
data += "A" + Math.round(cornerRadius) + " " + Math.round(cornerRadius) + " 0 0 1 " + (Math.round(segment.x + cornerRadius) + 0.5) + " " + (Math.round(segment.y) + 0.5);
data += "L" + (Math.round(segment.x + segment.width - cornerRadius) + 0.5) + " " + (Math.round(segment.y) + 0.5);
data += "A" + Math.round(cornerRadius) + " " + Math.round(cornerRadius) + " 0 0 1 " + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y + cornerRadius) + 0.5);
data += "L" + (Math.round(segment.x + segment.width) + 0.5) + " " + (Math.round(segment.y + segment.height - cornerRadius) + 0.5);
data += "A" + Math.round(cornerRadius) + " " + Math.round(cornerRadius) + " 0 0 1 " + (Math.round(segment.x + segment.width - cornerRadius) + 0.5) + " " + (Math.round(segment.y + segment.height) + 0.5);
data += "L" + (Math.round(segment.x + cornerRadius) + 0.5) + " " + (Math.round(segment.y + segment.height) + 0.5);
data += "A" + Math.round(cornerRadius) + " " + Math.round(cornerRadius) + " 0 0 1 " + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y + segment.height - cornerRadius) + 0.5);
data += "L" + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y + cornerRadius) + 0.5);
}
break;
case _basicprimitives.SegmentType.CubicArc:
data += "C" + (Math.round(segment.cpX1) + 0.5) + " " + (Math.round(segment.cpY1) + 0.5) + " " + (Math.round(segment.cpX2) + 0.5) + " " + (Math.round(segment.cpY2) + 0.5) + " " + (Math.round(segment.x) + 0.5) + " " + (Math.round(segment.y) + 0.5);
break;
default:
break;
}
});
this.activePlaceholder.activeLayer.polylines.push(/*#__PURE__*/_react["default"].createElement("path", {
key: this.activePlaceholder.activeLayer.polylines.length,
d: data,
style: style
}));
}
}, {
key: "template",
value: function template(x, y, width, height, contentx, contenty, contentWidth, contentHeight, _template, hashCode, onRenderTemplate, uiHash, attr) {
//ignore jslint
var style;
var left = x + contentx,
top = y + contenty,
templateWidth = contentWidth,
templateHeight = contentHeight;
style = _objectSpread({
"width": templateWidth + "px",
"height": templateHeight + "px",
"top": top + "px",
"left": left + "px",
"position": "absolute",
"padding": "0px",
"margin": "0px"
}, attr);
if (uiHash == null) {
uiHash = {};
}
uiHash.x = left;
uiHash.y = top;
uiHash.width = templateWidth;
uiHash.height = templateHeight;
if (onRenderTemplate !== null) {
this.activePlaceholder.activeLayer.items.push(/*#__PURE__*/_react["default"].createElement("div", {
key: this.activePlaceholder.activeLayer.items.length,
style: _objectSpread({
position: "absolute",
overflow: "visible",
fontFamily: "Trebuchet MS, Tahoma, Verdana, Arial, sans-serif",
WebkitTapHighlightColor: "rgba(0,0,0,0)",
WebkitUserSelect: "none",
WebkitTouchCallout: "none",
KhtmlUserSelect: "none",
MozUserSelect: "none",
msUserSelect: "none",
userSelect: "none",
boxSizing: "content-box"
}, style)
}, onRenderTemplate(uiHash)));
}
;
}
}, {
key: "getPxSize",
value: function getPxSize(value, base) {
var result = value;
if (typeof value === "string") {
if (value.indexOf("pt") > 0) {
result = parseInt(value, 10) * 96 / 72;
} else if (value.indexOf("%") > 0) {
result = parseFloat(value) / 100.0 * base;
} else {
result = parseInt(value, 10);
}
}
return result;
}
}]);
}();
;
var _default = exports["default"] = Graphics;