@aliretail/cuckoo-official-retailforce-form-combo
Version:
official-retailforce-form-combo
292 lines (246 loc) • 9.06 kB
JavaScript
'use strict';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _lodash = require("lodash");
var _clip = _interopRequireDefault(require("./clip"));
var _config = require("../../config");
require("./index.scss");
// import MultiCrops from 'react-multi-crops'
var imageEditerRef = /*#__PURE__*/_react["default"].createRef();
var getTableData = function getTableData(n) {
var arr = [];
for (var i = 0; i < n; i++) {
arr.push(i);
}
return arr;
};
var barMouseDown = function barMouseDown(e) {
var barStartY = e.clientY;
var _imageEditerRef$curre = imageEditerRef.current.getBoundingClientRect(),
height = _imageEditerRef$curre.height;
setBarStartInfo([barStartY, height]);
e.preventDefault();
e.stopPropagation();
};
var Editor = /*#__PURE__*/function (_React$PureComponent) {
(0, _inheritsLoose2["default"])(Editor, _React$PureComponent);
function Editor(props) {
var _this;
_this = _React$PureComponent.call(this, props) || this;
_this.state = {
cell: 32,
row: 6,
col: 6,
imgUrl: 'https://img.alicdn.com/imgextra/i3/O1CN01N3WHdg1MZgYTmN0Io_!!6000000001449-2-tps-375-1024.png',
itemList: props.cacheItemList
};
_this.timer = null;
return _this;
}
var _proto = Editor.prototype;
_proto.clone = function clone(data) {
return data ? JSON.parse(JSON.stringify(data)) : data;
};
_proto.changeCoordinate = function changeCoordinate(coordinate, index, itemList) {
var _this2 = this;
var _this$props = this.props,
onChange = _this$props.onChange,
layout = _this$props.layout;
if (layout !== 'custom') {
return;
}
var _this$state = this.state,
cell = _this$state.cell,
row = _this$state.row,
col = _this$state.col;
var boxWidth = cell * col;
var boxHeight = cell * row;
itemList.map(function (item) {
item.x = item.x < 0 ? 0 : item.x;
item.y = item.y < 0 ? 0 : item.y;
item.width = item.x + item.width > boxWidth ? boxWidth - item.x : item.width;
item.height = item.y + item.height > boxHeight ? boxHeight - item.y : item.height;
});
this.setState({
itemList: itemList
});
clearTimeout(this.timer);
this.timer = setTimeout(function () {
onChange(_this2.state.itemList);
}, 100);
};
_proto.deleteCoordinate = function deleteCoordinate(coordinate, index, itemList) {
var _this$props2 = this.props,
onChange = _this$props2.onChange,
layout = _this$props2.layout;
if (layout !== 'custom') {
return;
}
onChange(itemList);
};
_proto.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
// 当前组件值发生改变
if (!(0, _lodash.isEqual)(nextProps.cacheItemList, this.props.cacheItemList)) {
this.setState({
itemList: nextProps.cacheItemList
});
}
};
_proto.calc = function calc(itemList) {
var _this$state2 = this.state,
cell = _this$state2.cell,
row = _this$state2.row,
col = _this$state2.col;
var boxWidth = cell * col;
var boxHeight = cell * row;
itemList.map(function (item) {
var x = item.x,
y = item.y,
height = item.height,
width = item.width; // console.log('x, y, height, width', x, y, height, width, cell);
// 位置取整
var cell_x = Math.round(x / cell);
var cell_y = Math.round(y / cell);
item.x = cell_x > 5 ? 5 * cell : cell_x * cell;
item.y = cell_y > 5 ? 5 * cell : cell_y * cell;
item.width = Math.round(width / cell) * cell;
item.height = Math.round(height / cell) * cell; // 左上边距超出判断
item.x = item.x < cell ? 0 : item.x;
item.y = item.y < cell ? 0 : item.y; // 右下边距超出判断
// item.x = item.x >
// console.log('resize====', cell_x, cell_y, item.x + item.width > boxWidth, boxWidth, item.x, item.width);
item.width = item.x + item.width > boxWidth ? boxWidth - item.x : item.width;
item.height = item.y + item.height > boxHeight ? boxHeight - item.y : item.height; // 宽度超出判断
item.width = item.width < cell ? cell : item.width;
item.height = item.height < cell ? cell : item.height;
return item;
});
return itemList;
};
_proto.handleDrag = function handleDrag(coordinate, index, itemList) {
var _this3 = this;
var _this$state3 = this.state,
cell = _this$state3.cell,
row = _this$state3.row,
col = _this$state3.col;
var boxWidth = cell * col;
var boxHeight = cell * row;
var _this$props3 = this.props,
onChange = _this$props3.onChange,
layout = _this$props3.layout;
if (layout !== 'custom') {
return;
}
itemList.map(function (item) {
item.x = item.x < 0 ? 0 : item.x;
item.y = item.y < 0 ? 0 : item.y;
item.x = item.x + item.width > boxWidth ? boxWidth - item.width : item.x;
item.y = item.y + item.height > boxHeight ? boxHeight - item.height : item.y;
});
this.setState({
itemList: itemList
});
clearTimeout(this.timer);
this.timer = setTimeout(function () {
onChange(_this3.state.itemList);
}, 100);
};
_proto.reSize = function reSize() {
var _this4 = this;
console.log('reSize');
var itemList = this.state.itemList;
var _this$props4 = this.props,
onChange = _this$props4.onChange,
layout = _this$props4.layout;
if (layout !== 'custom') {
return;
}
console.log('reSize', itemList);
itemList = this.calc(itemList);
clearTimeout(this.timer);
this.timer = setTimeout(function () {
onChange(_this4.state.itemList);
}, 100);
};
_proto.render = function render() {
var _this$state4 = this.state,
imgUrl = _this$state4.imgUrl,
itemList = _this$state4.itemList;
var _this$props5 = this.props,
_this$props5$extensio = _this$props5.extension,
extension = _this$props5$extensio === void 0 ? {} : _this$props5$extensio,
_this$props5$layout = _this$props5.layout,
layout = _this$props5$layout === void 0 ? '2-4' : _this$props5$layout;
var label = extension.label;
var config = _config.tableList[layout] || {};
var cell = config.cell,
row = config.row,
col = config.col;
if (!Array.isArray(itemList)) {
return null;
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: "box-imageEditer",
style: {
width: cell * col + "px",
overflow: 'hidden'
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "imageEditer",
ref: imageEditerRef
}, layout === 'custom' ? /*#__PURE__*/_react["default"].createElement("table", {
className: "item-box-table canvas",
cellpadding: "0",
cellspacing: "0"
}, [1, 2, 3, 4, 5, 6].map(function (item) {
return /*#__PURE__*/_react["default"].createElement("tr", null, [1, 2, 3, 4, 5, 6].map(function (subItem) {
return /*#__PURE__*/_react["default"].createElement("td", {
className: ""
});
}));
})) : /*#__PURE__*/_react["default"].createElement("table", {
className: "item-box-table canvas"
}, /*#__PURE__*/_react["default"].createElement("tbody", null, getTableData(row).map(function (item) {
return /*#__PURE__*/_react["default"].createElement("tr", {
key: item,
className: ""
}, getTableData(col).map(function (item1) {
return /*#__PURE__*/_react["default"].createElement("td", {
key: item + "," + item1,
className: "",
style: {
width: cell + "px",
height: cell + "px"
}
});
}));
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: "clip-box"
}, /*#__PURE__*/_react["default"].createElement(_clip["default"], {
src: imgUrl,
width: "100%",
height: cell * row,
onDrag: this.handleDrag.bind(this) // onResize={this.changeCoordinate}
// onDraw={this.changeCoordinate}
// onLoad={e => console.log(e.target.height, e.target.width)}
,
coordinates: itemList,
onChange: this.changeCoordinate.bind(this),
onDelete: this.deleteCoordinate.bind(this),
reSize: this.reSize.bind(this),
layout: layout
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: "justify-bar",
onMouseDown: function onMouseDown(e) {
return barMouseDown(e);
}
}, /*#__PURE__*/_react["default"].createElement("i", {
className: "form-iconfont icon-ketuozhuai"
})));
};
return Editor;
}(_react["default"].PureComponent);
exports["default"] = Editor;