@cainiaofe/cn-ui-layout
Version:
- 安装 cone-cli ｜ [Cone-CLI 使用指引](https://alidocs.dingtalk.com/i/nodes/xdqZp24KneBJzvGM6XezJvyb7RA0Nr1E) - `tnpm i -g @alife/cone-cli@latest` - 安装依赖包 - `cone install` - 启动研发 - `cone start`
288 lines (282 loc) • 10.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.initSingletonDivider = exports.Divider = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _autoCell = require("./split/auto-cell");
var _const = require("../../../common/util/const");
require("./divider.scss");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var FUSION_UI_VIEW_PREFIX = 'fd-layout-view';
var initSingletonDivider = exports.initSingletonDivider = function initSingletonDivider(id) {
var dividerId = id || 'default-layout-divider';
var pageC = getPageRootDOMNode();
if (!pageC) return;
var $el = pageC.ownerDocument.getElementById(dividerId);
if (!$el) {
var dividerWrapper = createDividerWrapperNode(dividerId);
pageC && pageC.appendChild(dividerWrapper);
_reactDom["default"].render(/*#__PURE__*/_react["default"].createElement(Divider, {
split: _autoCell.splitNodeByDimension
}), dividerWrapper);
}
};
var Divider = exports.Divider = function Divider(props) {
var engine = (0, _react.useRef)(window.parent.AliLowCodeEngine);
var _useState = (0, _react.useState)([]),
cuts = _useState[0],
setCuts = _useState[1];
var _useState2 = (0, _react.useState)(false),
disabled = _useState2[0],
setDisabled = _useState2[1];
var computCuts = (0, _react.useCallback)(function (selectedNode) {
var dimension = getSplitDimension(selectedNode.componentName);
var rect = selectedNode.getRect();
var newCuts = [];
var pageC = getPageRootDOMNode();
var pageCRect = pageC ? pageC.getBoundingClientRect() : {
left: 0,
top: 0
};
if (!rect || !pageCRect) {
return;
}
if (dimension.h) {
newCuts.push({
dimension: 'h',
left: rect.left - pageCRect.left,
top: rect.top + rect.height / 2 - pageCRect.top,
node: selectedNode
});
}
if (dimension.v && rect && pageCRect) {
newCuts.push({
dimension: 'v',
left: rect.left + rect.width / 2 - pageCRect.left,
top: rect.top - pageCRect.top,
node: selectedNode
});
}
if (dimension.m) {
newCuts.push({
dimension: 'm',
left: rect.left + rect.width / 2 - pageCRect.left,
top: rect.top + rect.height / 2 - pageCRect.top,
node: selectedNode
});
}
setCuts(newCuts);
}, []);
var onSelectionChange = (0, _react.useCallback)(function (timer) {
if (timer === void 0) {
timer = 100;
}
setDisabled(false);
var selectedNode = getSelectedNode(engine.current);
if (!selectedNode) {
setCuts([]);
return;
}
// TODO
// 目前 selectionChang 时 dom 结构可能还在变化
// 会偶尔导致 computCuts 计算尺寸出现问题，需要优化
if (timer) {
setTimeout(function () {
computCuts(selectedNode);
}, timer);
} else {
computCuts(selectedNode);
}
}, []);
(0, _react.useEffect)(function () {
var _project$currentDocum;
var project = engine.current.project;
if (!project) return;
(_project$currentDocum = project.currentDocument) === null || _project$currentDocum === void 0 ? void 0 : _project$currentDocum.onChangeSelection(function () {
return onSelectionChange(100);
});
}, []);
/*
// 目前在 resize 开始/结束时会重新计算
// 所以暂时不需要去监听了
const resizeObserver = useRef(
new ResizeObserver(() => {
onSelectionChange();
}),
);
useEffect(() => {
engine.current.selection.onSelectionChange(() => {
const selectedNode = getSelectedNode(engine.current);
try {
setTimeout(() => {
resizeObserver.current.disconnect();
selectedNode &&
selectedNode.getDOMNode() &&
resizeObserver.current.observe(selectedNode.getDOMNode());
}, 50);
} catch (error) {
console.err(error);
}
});
}, []);
*/
var onDisabled = (0, _react.useCallback)(function () {
setDisabled(true);
}, []);
var onEnabled = (0, _react.useCallback)(function () {
setDisabled(false);
onSelectionChange(0);
}, [onSelectionChange]);
(0, _react.useEffect)(function () {
var contentWindow = engine.current.project.simulator.contentWindow;
contentWindow.addEventListener('dividerDisable', onDisabled);
contentWindow.addEventListener('dividerEnable', onEnabled);
return function () {
contentWindow.removeEventListener('dividerDisable', onDisabled);
contentWindow.removeEventListener('dividerEnable', onEnabled);
};
}, [onDisabled, onEnabled]);
if (disabled) return null;
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Cut, {
pos: cuts.find(function (p) {
return p.dimension === 'v';
}),
split: props.split
}), /*#__PURE__*/_react["default"].createElement(Cut, {
pos: cuts.find(function (p) {
return p.dimension === 'h';
}),
split: props.split
}));
};
var Cut = function Cut(props) {
var _useState3 = (0, _react.useState)(false),
showLine = _useState3[0],
setLineVisibility = _useState3[1];
var pos = props.pos,
split = props.split;
if (!pos || !pos.node) return null;
var objectRect = pos.node.getRect() || {};
var computeLineStyle = function computeLineStyle() {
if ((pos === null || pos === void 0 ? void 0 : pos.dimension) === 'v') {
return (0, _extends2["default"])({
width: 1,
height: objectRect.height,
transform: 'translate(-50%, 0)'
}, pos);
} else if ((pos === null || pos === void 0 ? void 0 : pos.dimension) === 'h') {
return (0, _extends2["default"])({
width: objectRect.width,
height: 1
}, pos);
} else if ((pos === null || pos === void 0 ? void 0 : pos.dimension) === 'm') {
return (0, _extends2["default"])({
width: objectRect.width,
height: objectRect.height,
transform: 'translate(-50%, 0)'
}, pos);
}
return null;
};
var computeCutStyle = function computeCutStyle() {
var isNanoSized = objectRect.width <= 60;
var getTransform = function getTransform() {
var gap = isNanoSized ? 0 : 8;
var scale = isNanoSized ? 'scale(.6)' : '';
switch (pos === null || pos === void 0 ? void 0 : pos.dimension) {
case 'v':
return "translate(-50%, " + gap + "px) " + scale;
case 'h':
return "translate(" + gap + "px, -50%) rotate(270deg) " + scale;
case 'm':
default:
return "translate(-50%, -50%) rotate(45deg) " + scale;
}
};
return (0, _extends2["default"])({}, pos, {
transform: getTransform()
});
};
var lineStyle = computeLineStyle() || {};
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
className: FUSION_UI_VIEW_PREFIX + "-divider",
style: computeCutStyle(),
onMouseEnter: function onMouseEnter() {
return setLineVisibility(true);
},
onMouseLeave: function onMouseLeave() {
return setLineVisibility(false);
},
onClick: function onClick() {
split(pos.dimension, pos.node);
setTimeout(function () {
return setLineVisibility(false);
}, 20);
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: FUSION_UI_VIEW_PREFIX + "-dividerImg"
})), showLine && (pos.dimension === 'm' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
className: FUSION_UI_VIEW_PREFIX + "-dividerLine",
style: (0, _extends2["default"])({}, lineStyle, {
height: 1
})
}), /*#__PURE__*/_react["default"].createElement("div", {
className: FUSION_UI_VIEW_PREFIX + "-dividerLine",
style: (0, _extends2["default"])({}, lineStyle, {
width: 1,
top: Number(lineStyle.top) - Number(lineStyle.height) / 2
})
})) : /*#__PURE__*/_react["default"].createElement("div", {
className: FUSION_UI_VIEW_PREFIX + "-dividerLine",
style: lineStyle
})));
};
// utils
var getSplitDimension = function getSplitDimension(componentName) {
var dimension = {
v: false,
h: false,
m: false
};
switch (componentName) {
case _const.ROW:
case _const.COL:
dimension.v = true;
dimension.h = true;
break;
case _const.CELL:
dimension.v = true;
dimension.h = true;
// dimension.m = true;
break;
case _const.TILE:
case _const.BLOCK:
dimension.v = true;
break;
default:
break;
}
return dimension;
};
// FIXME：Project类型缺失
var getSelectedNode = function getSelectedNode(_ref) {
var _project$currentDocum2;
var project = _ref.project;
return (_project$currentDocum2 = project.currentDocument) === null || _project$currentDocum2 === void 0 ? void 0 : _project$currentDocum2.selection.getNodes()[0];
};
var getPageRootDOMNode = function getPageRootDOMNode() {
var _window$parent$AliLow, _window$parent$AliLow2;
return (_window$parent$AliLow = window.parent.AliLowCodeEngine.project.currentDocument) === null || _window$parent$AliLow === void 0 ? void 0 : (_window$parent$AliLow2 = _window$parent$AliLow.root) === null || _window$parent$AliLow2 === void 0 ? void 0 : _window$parent$AliLow2.getDOMNode();
};
var createDividerWrapperNode = function createDividerWrapperNode(dividerId) {
var node = document.createElement('div');
node.id = dividerId;
node.style.position = 'absolute';
node.style.top = '0';
node.style.left = '0';
node.style.zIndex = '10001';
return node;
};