react-graph-grid 0.1.3 → 0.1.5

package/dist/index15.js

@@ -0,0 +1,403 @@
+const require_jsx_runtime$1 = require("./index7.js");
+const require_Base = require("./index8.js");
+const require_Overlay = require("./index9.js");
+const require_server_browser$1 = require("./index14.js");
+let react = require("react");
+var import_server_browser = require_server_browser$1.default;
+var import_jsx_runtime = require_jsx_runtime$1.default;
+function Modal(props) {
+	let wnd = null;
+	const [wndState, setState] = (0, react.useState)({
+		wnd,
+		ind: 0
+	});
+	const oldWnd = wndState.wnd;
+	wnd = oldWnd && oldWnd.uid === props.uid ? oldWnd : new ModalClass(props);
+	if (props.init) props.init(wnd);
+	wnd.refreshState = function() {
+		setState({
+			wnd,
+			ind: wnd.stateind++
+		});
+	};
+	(0, react.useEffect)(() => {
+		wnd.setupEvents();
+		return () => {
+			wnd.clearEvents();
+		};
+	}, [wnd]);
+	return wnd.render();
+}
+var ModalClass = class ModalClass extends require_Base.BaseComponent {
+	constructor(props) {
+		super(props);
+		const wnd = this;
+		wnd.uid = props.uid;
+		wnd.opt = {};
+		wnd.id = ModalClass._seq++;
+		wnd.opt.keyAdd = props.keyAdd;
+		wnd.opt.zInd = props.zInd || ++require_Overlay.OverlayClass._zInd;
+		wnd.opt.pos = props.pos || {
+			x: 0,
+			y: 0,
+			w: "100%",
+			h: "100%"
+		};
+		wnd.opt.isModal = props.isModal != null ? props.isModal : true;
+		wnd.opt.closeWhenClick = props.closeWhenClick;
+		wnd.opt.closeWhenEscape = props.closeWhenEscape;
+		wnd.opt.closeWhenMiss = props.closeWhenMiss && wnd.opt.isModal;
+		wnd.opt.closeWhenMouseLeave = props.closeWhenMouseLeave;
+		wnd.opt.onMouseEnter = props.onMouseEnter;
+		wnd.opt.onMouseLeave = props.onMouseLeave;
+		wnd.opt.resizable = props.resizable != null ? props.resizable : true;
+		wnd.opt.draggable = props.draggable != null ? props.draggable : true;
+		wnd.opt.hiddenOverlay = props.hiddenOverlay;
+		wnd.opt.noHeader = props.noHeader;
+		wnd.opt.noFooter = props.noFooter;
+		wnd.opt.noPadding = props.noPadding;
+		wnd.opt.noBodyOverflow = props.noBodyOverflow;
+		wnd.opt.margin = props.margin;
+		wnd.opt.padding = props.padding;
+		wnd.opt.windowClass = props.windowClass;
+		wnd.opt.bodyClass = props.bodyClass || require_Base.BaseComponent.theme.modalBodyClass || "modal-window-body";
+		wnd.opt.headerClass = props.headerClass || require_Base.BaseComponent.theme.modalHeaderClass || "modal-window-header";
+		wnd.opt.footerClass = props.footerClass || require_Base.BaseComponent.theme.modalFooterClass || "modal-window-footer";
+		wnd.opt.footerButtonClass = props.footerButtonClass || require_Base.BaseComponent.theme.modalFooterButtonClass || "modal-window-footer-button";
+		wnd.opt.titleClass = props.titleClass || require_Base.BaseComponent.theme.modalTitleClass || "modal-window-header-title";
+		wnd.opt.title = props.title;
+		wnd.opt.pos.x = !isNaN(wnd.opt.pos.x) ? wnd.opt.pos.x + "px" : wnd.opt.pos.x;
+		wnd.opt.pos.y = !isNaN(wnd.opt.pos.y) ? wnd.opt.pos.y + "px" : wnd.opt.pos.y;
+		wnd.opt.pos.w = !isNaN(wnd.opt.pos.w) ? wnd.opt.pos.w + "px" : wnd.opt.pos.w;
+		wnd.opt.pos.h = !isNaN(wnd.opt.pos.h) ? wnd.opt.pos.h + "px" : wnd.opt.pos.h;
+		wnd.opt.pos.minW = !isNaN(wnd.opt.pos.minW) ? wnd.opt.pos.minW + "px" : wnd.opt.pos.minW;
+		wnd.opt.pos.minH = !isNaN(wnd.opt.pos.minH) ? wnd.opt.pos.minH + "px" : wnd.opt.pos.minH;
+		wnd.opt.pos.maxW = !isNaN(wnd.opt.pos.maxW) ? wnd.opt.pos.maxW + "px" : wnd.opt.pos.maxW;
+		wnd.opt.pos.maxH = !isNaN(wnd.opt.pos.maxH) ? wnd.opt.pos.maxH + "px" : wnd.opt.pos.maxH;
+		wnd.onClose = props.onClose;
+		wnd.opt.dimensionsByContent = props.dimensionsByContent;
+		wnd.renderContent = props.renderContent || function() {
+			return null;
+		};
+		wnd.buttons = [];
+		if (props.footerButtons) {
+			wnd.buttonsDict = {};
+			let seq = 0;
+			for (let btn of props.footerButtons) {
+				btn._ind = seq++;
+				wnd.buttonsDict[btn._ind] = btn;
+				wnd.buttons.push(btn);
+			}
+		}
+		wnd.visible = props.visible != null ? props.visible : true;
+		wnd.stateind = 0;
+	}
+	static _isFake = false;
+	static _seq = 0;
+	render() {
+		const wnd = this;
+		if (!wnd.visible) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+		if (wnd.opt.dimensionsByContent) {
+			const rect = wnd.getDimensionsByContent(wnd.opt.margin, wnd.opt.padding);
+			wnd.opt.pos.w = rect.w || wnd.opt.pos.w;
+			wnd.opt.pos.h = rect.h || wnd.opt.pos.h;
+			if (wnd.opt.pos.maxX != null && parseInt(wnd.opt.pos.x) > wnd.opt.pos.maxX) wnd.opt.pos.x = wnd.opt.pos.maxX - Math.max(wnd.opt.pos.w, parseInt(wnd.opt.pos.minW) || 0) + "px";
+		}
+		if (wnd.opt.isModal || wnd.opt.closeWhenMiss) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(require_Overlay.Overlay, {
+			renderChild: (zInd) => {
+				return wnd.renderSelf(zInd++);
+			},
+			closeWhenClick: wnd.opt.closeWhenMiss,
+			init: (ovl) => ovl.visible = wnd.visible,
+			onClose: () => wnd.close(),
+			isHidden: wnd.opt.hiddenOverlay
+		}) });
+		return wnd.renderSelf();
+	}
+	renderSelf(zInd) {
+		const wnd = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			id: `window_${wnd.id}_`,
+			style: {
+				width: wnd.opt.pos.w,
+				height: wnd.opt.pos.h,
+				top: wnd.opt.pos.y,
+				left: wnd.opt.pos.x,
+				minWidth: wnd.opt.pos.minW || "",
+				minHeight: wnd.opt.pos.minH || "",
+				maxWidth: wnd.opt.pos.maxW || "",
+				maxHeight: wnd.opt.pos.maxH || "",
+				zIndex: zInd || wnd.opt.zInd,
+				display: "flex",
+				flexDirection: "column",
+				justifyContent: "space-between",
+				position: "fixed",
+				overflow: "hidden",
+				backgroundColor: "white",
+				border: "1px solid"
+			},
+			className: `modal-window-wnd ${wnd.opt.windowClass || ""}`,
+			onMouseLeave: (e) => wnd.onMouseLeave(e),
+			onMouseEnter: (e) => wnd.onMouseEnter(e),
+			children: [
+				wnd.opt.noHeader ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : wnd.renderHeader(),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					"wnd-body": 1,
+					className: wnd.opt.bodyClass,
+					style: {
+						padding: wnd.opt.noPadding ? "0" : "",
+						overflow: wnd.opt.noBodyOverflow ? "hidden" : "auto",
+						height: "100%"
+					},
+					children: wnd.renderContent(wnd)
+				}, `window_${wnd.id}_body_`),
+				wnd.opt.noFooter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : wnd.renderFooter(),
+				!wnd.opt.resizable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : wnd.renderResizables()
+			]
+		}, `window_${wnd.id}_${wnd.opt.keyAdd != null ? wnd.opt.keyAdd : ""}_`) });
+	}
+	renderHeader() {
+		const wnd = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			"wnd-header": 1,
+			className: wnd.opt.headerClass,
+			style: {
+				display: "flex",
+				flexWrap: "nowrap",
+				justifyContent: "space-between"
+			},
+			onMouseDown: (e) => wnd.mouseDownDrag(e),
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", {
+				className: wnd.opt.titleClass,
+				style: { margin: "0.5em 0 0.5em 1.5em" },
+				children: wnd.opt.title || ""
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				"wnd-btn": `close_${wnd.id}_`,
+				type: "button",
+				className: "close",
+				style: {
+					color: "black",
+					lineHeight: "1",
+					fontWeight: "21px",
+					border: "none"
+				},
+				onClick: () => wnd.close(),
+				children: "×"
+			})]
+		}, `window_${wnd.id}_header_`);
+	}
+	renderFooter() {
+		const wnd = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			"wnd-footer": 1,
+			className: wnd.opt.footerClass,
+			onMouseDown: (e) => wnd.mouseDownDrag(e),
+			style: {
+				display: "flex",
+				flexWrap: "nowrap",
+				justifyContent: "space-between",
+				alignItems: "center"
+			},
+			children: wnd.buttons.map((btn, ind) => {
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+					"wnd-btn": `button_${wnd.id}_${btn._ind}_`,
+					className: wnd.opt.footerButtonClass,
+					title: btn.title,
+					onClick: btn.onClick ? (e) => btn.onClick(e) : null,
+					disabled: btn.getDisabled ? btn.getDisabled() : false,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: btn.imageClass }), btn.title]
+				}, `window_${wnd.id}_${btn._ind}_${ind}_button_`);
+			})
+		}, `window_${wnd.id}_footer_`);
+	}
+	renderResizables() {
+		const wnd = this;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				"wnd-rsz-y": wnd.id,
+				style: {
+					position: "absolute",
+					left: "-1px",
+					bottom: "-6px",
+					cursor: "s-resize",
+					height: "12px",
+					width: "calc(100% - 10px)",
+					zIndex: wnd.opt.zInd + 5
+				},
+				onMouseDown: (e) => wnd.mouseDownResize(e)
+			}, `wnd-rsz-y_${wnd.id}_`),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				"wnd-rsz-x": wnd.id,
+				style: {
+					position: "absolute",
+					right: "-6px",
+					top: "-1px",
+					cursor: "e-resize",
+					height: "calc(100% - 10px)",
+					width: "12px",
+					zIndex: wnd.opt.zInd + 5
+				},
+				onMouseDown: (e) => wnd.mouseDownResize(e)
+			}, `wnd-rsz-x_${wnd.id}_`),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				"wnd-rsz-xy": wnd.id,
+				style: {
+					position: "absolute",
+					right: "-5px",
+					bottom: "-5px",
+					cursor: "se-resize",
+					height: "16px",
+					width: "16px",
+					zIndex: wnd.opt.zInd + 5
+				},
+				onMouseDown: (e) => wnd.mouseDownResize(e)
+			}, `wnd-rsz-xy_${wnd.id}_`)
+		] });
+	}
+	close() {
+		const wnd = this;
+		if (wnd.onClose) {
+			const ev = { self: wnd };
+			wnd.onClose(ev);
+			if (ev.cancel) return;
+		}
+		wnd.visible = false;
+		wnd.refreshState();
+	}
+	show(e) {
+		const wnd = this;
+		wnd.visible = true;
+		if (e) {
+			wnd.opt.pos.x = e.clientX;
+			wnd.opt.pos.y = e.clientY;
+		}
+		wnd.refreshState();
+	}
+	getDimensionsByContent(margin, padding) {
+		const wnd = this;
+		const renderFake = function() {
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+				wnd.opt.noHeader ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : wnd.renderHeader(),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					"wnd-body": 1,
+					className: wnd.opt.bodyClass,
+					style: { padding: wnd.opt.noPadding ? "0" : "" },
+					children: wnd.renderContent(wnd, "fake")
+				}, `window_${wnd.id}_body_`),
+				wnd.opt.noFooter ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : wnd.renderFooter(),
+				!wnd.opt.resizable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {}) : wnd.renderResizables()
+			] });
+		};
+		const res = {
+			w: 0,
+			h: 0
+		};
+		ModalClass._isFake = true;
+		const fakeDiv = document.createElement("div");
+		fakeDiv.style.opacity = 0;
+		fakeDiv.style.position = "fixed";
+		fakeDiv.style.height = "auto";
+		fakeDiv.style.margin = margin || "";
+		fakeDiv.style.padding = padding || "";
+		fakeDiv.innerHTML = (0, import_server_browser.renderToStaticMarkup)(renderFake());
+		document.body.append(fakeDiv);
+		const rect = getComputedStyle(fakeDiv);
+		res.w = parseInt(rect.width) + 2;
+		res.h = parseInt(rect.height) + 2;
+		fakeDiv.remove();
+		ModalClass._isFake = false;
+		return res;
+	}
+	setupEvents() {
+		const wnd = this;
+		function onKeyDown(e) {
+			const key = e && e.key ? e.key.toLowerCase() : "";
+			if ((key === "esc" || key === "escape") && wnd.opt.closeWhenEscape === true) wnd.close();
+		}
+		document.addEventListener("keydown", onKeyDown);
+		wnd.clearEvents = function() {
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	}
+	onMouseLeave() {
+		const wnd = this;
+		if (wnd.opt.onMouseLeave) wnd.opt.onMouseLeave(wnd);
+		if (wnd.opt.closeWhenMouseLeave) wnd.close();
+	}
+	onMouseEnter(e) {
+		const wnd = this;
+		if (wnd.opt.onMouseEnter) wnd.opt.onMouseEnter(e);
+	}
+	mouseDownDrag(e) {
+		const wnd = this;
+		if (!wnd.visible || !wnd.opt.draggable) return;
+		if (e.target.tagName !== "DIV") return;
+		const pos = wnd.opt.pos;
+		const elem = document.getElementById(`window_${wnd.id}_`);
+		if (!elem) {
+			require_Base.log(`Elem window_${wnd.id}_  not found!`);
+			return;
+		}
+		const rect = elem.getBoundingClientRect();
+		const shiftX = e.pageX - rect.left;
+		const shiftY = e.pageY - rect.top;
+		moveAt(e.pageX, e.pageY);
+		function moveAt(pageX, pageY) {
+			pos.x = pageX - shiftX;
+			pos.y = pageY - shiftY;
+			elem.style.left = pos.x + "px";
+			elem.style.top = pos.y + "px";
+		}
+		function onMouseMove(e$1) {
+			moveAt(e$1.pageX, e$1.pageY);
+		}
+		document.addEventListener("mousemove", onMouseMove);
+		document.addEventListener("mouseup", onMouseUp);
+		function onMouseUp() {
+			document.removeEventListener("mousemove", onMouseMove);
+			document.removeEventListener("mouseup", onMouseUp);
+			elem.ondragstart = null;
+		}
+		elem.ondragstart = function() {
+			return false;
+		};
+	}
+	mouseDownResize(e) {
+		const wnd = this;
+		if (!wnd.visible || !wnd.opt.resizable) return;
+		const pos = wnd.opt.pos;
+		const elem = document.getElementById(`window_${wnd.id}_`);
+		const cs = getComputedStyle(elem);
+		const [initW, initH] = [parseInt(cs.width), parseInt(cs.height)];
+		const shiftX = e.target.hasAttribute("wnd-rsz-x") || e.target.hasAttribute("wnd-rsz-xy") ? e.pageX : -1;
+		const shiftY = e.target.hasAttribute("wnd-rsz-y") || e.target.hasAttribute("wnd-rsz-xy") ? e.pageY : -1;
+		resize(e.pageX, e.pageY);
+		function resize(pageX, pageY) {
+			if (shiftX > 0) {
+				const w = initW + pageX - shiftX;
+				pos.w = (!pos.maxW || w <= pos.maxW) && (!pos.minW || w >= pos.minW) ? w : pos.w;
+				elem.style.width = pos.w + "px";
+			}
+			if (shiftY > 0) {
+				const h = initH + pageY - shiftY;
+				pos.h = (!pos.maxH || h <= pos.maxH) && (!pos.minH || h >= pos.minH) ? h : pos.h;
+				elem.style.height = pos.h + "px";
+			}
+		}
+		function onMouseMove(e$1) {
+			resize(e$1.pageX, e$1.pageY);
+		}
+		document.addEventListener("mousemove", onMouseMove);
+		document.addEventListener("mouseup", onMouseUp);
+		elem.ondragstart = function() {
+			return false;
+		};
+		function onMouseUp() {
+			document.removeEventListener("mousemove", onMouseMove);
+			document.removeEventListener("mouseup", onMouseUp);
+			elem.ondragstart = null;
+		}
+	}
+};
+exports.Modal = Modal;
+exports.ModalClass = ModalClass;