@orca-fe/pocket
Version:
UI components by orca-team
202 lines (195 loc) • 9.96 kB
JavaScript
;
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 = _interopRequireWildcard(require("react"));
var _ahooks = require("ahooks");
var _tools = require("@orca-fe/tools");
var _hooks = require("@orca-fe/hooks");
var _Ruler = _interopRequireDefault(require("./Ruler.style"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["className", "orientation", "size", "offsetX", "offsetY", "zoom", "style", "onClick", "onMouseMove", "onMouseLeave", "onRulerClick", "onRulerMouseMove"];
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 && Object.prototype.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; }
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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var getStep = function getStep(n) {
return Math.trunc(n / Math.pow(10, Math.max(0, Math.trunc(Math.log10(n)))));
};
var ef = function ef() {};
var Ruler = function Ruler(props) {
var _props$className = props.className,
className = _props$className === void 0 ? '' : _props$className,
_props$orientation = props.orientation,
orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
_props$size = props.size,
size = _props$size === void 0 ? 20 : _props$size,
_props$offsetX = props.offsetX,
offsetX = _props$offsetX === void 0 ? 0 : _props$offsetX,
_props$offsetY = props.offsetY,
offsetY = _props$offsetY === void 0 ? 0 : _props$offsetY,
_props$zoom = props.zoom,
zoom = _props$zoom === void 0 ? 0 : _props$zoom,
style = props.style,
_props$onClick = props.onClick,
onClick = _props$onClick === void 0 ? ef : _props$onClick,
_props$onMouseMove = props.onMouseMove,
onMouseMove = _props$onMouseMove === void 0 ? ef : _props$onMouseMove,
_props$onMouseLeave = props.onMouseLeave,
onMouseLeave = _props$onMouseLeave === void 0 ? ef : _props$onMouseLeave,
_props$onRulerClick = props.onRulerClick,
onRulerClick = _props$onRulerClick === void 0 ? ef : _props$onRulerClick,
_props$onRulerMouseMo = props.onRulerMouseMove,
onRulerMouseMove = _props$onRulerMouseMo === void 0 ? ef : _props$onRulerMouseMo,
otherProps = _objectWithoutProperties(props, _excluded);
var styles = (0, _Ruler.default)();
var rootRef = (0, _react.useRef)(null);
var canvasRef = (0, _react.useRef)(null);
var sizeRef = (0, _react.useRef)({
width: 1000,
height: 1000
});
var isHorizon = orientation !== 'vertical';
var offset = isHorizon ? offsetX : offsetY;
/* 重绘标尺 */
var drawDeg = function drawDeg() {
var _sizeRef$current = sizeRef.current,
width = _sizeRef$current.width,
height = _sizeRef$current.height;
var length = isHorizon ? width : height;
var canvas = canvasRef.current;
if (canvas) {
var ratio = Math.pow(2, zoom);
if (isHorizon) {
canvas.width = width;
canvas.height = size;
} else {
canvas.width = size;
canvas.height = height;
}
/* 先随意计算了一个标尺步进 */
var step = Math.max(1, function () {
var r = Math.trunc(10 / ratio);
var s = getStep(r) || 1;
var n = Math.pow(10, Math.trunc(Math.log10(r))) || 1;
if (s >= 5) return 5 * n;
if (s >= 2) return 2 * n;
return n;
}());
var ctx = canvas.getContext('2d');
if (ctx == null) return;
ctx.save();
if (!isHorizon) {
/* 纵向标尺，旋转画布 */
ctx.translate(size, 0);
ctx.rotate(90 * Math.PI / 180);
}
ctx.clearRect(0, 0, length, size);
/* 刻度样式 */
ctx.strokeStyle = '#666666';
/* 文本样式 */
ctx.fillStyle = '#333333';
ctx.lineWidth = 1 / window.devicePixelRatio;
// 获得起始数值
var i = 0;
if (offset < 0) {
i = Math.floor(-offset / ratio / step) * step;
}
var pixel = function pixel(v) {
var res = offset + v * ratio;
return res;
};
ctx.beginPath();
for (; pixel(i) <= length; i += step) {
var num = Math.floor(i / step);
var top = 0.8 * size;
var left = pixel(i);
if (num % 10 === 0) {
top = 0.2 * size;
ctx.fillText("".concat(i), Math.round(left + 2) + ((0, _tools.isMac)() ? 0.5 : 0), Math.round(0.55 * size) + 0.5);
} else if (num % 5 === 0) {
top = 0.6 * size;
}
ctx.moveTo(Math.round(left) + 0.5, Math.round(top));
ctx.lineTo(Math.round(left) + 0.5, Math.round(size));
}
ctx.closePath();
ctx.stroke();
ctx.restore();
}
};
(0, _hooks.useSizeListener)(function (_ref) {
var width = _ref.width,
height = _ref.height;
sizeRef.current.width = width;
sizeRef.current.height = height;
drawDeg();
}, rootRef);
(0, _ahooks.useUpdateEffect)(function () {
drawDeg();
}, [zoom, offsetY, offsetX]);
/* 根据鼠标事件，计算出鼠标位置对应的标尺值 */
var getRulerValueByEvent = (0, _ahooks.useMemoizedFn)(function (e) {
var div = rootRef.current;
if (div) {
if (isHorizon) {
var _div$getBoundingClien = div.getBoundingClientRect(),
left = _div$getBoundingClien.left;
var x = (e.clientX - left - offsetX) / Math.pow(2, zoom);
return Math.round(x);
}
var _div$getBoundingClien2 = div.getBoundingClientRect(),
top = _div$getBoundingClien2.top;
var y = (e.clientY - top - offsetY) / Math.pow(2, zoom);
return Math.round(y);
}
return null;
});
var handleClick = (0, _ahooks.useMemoizedFn)(function (e) {
var value = getRulerValueByEvent(e);
if (value != null) {
onRulerClick(value, e);
}
onClick(e);
});
var handleMouseMove = (0, _ahooks.useMemoizedFn)(function (e) {
var value = getRulerValueByEvent(e);
if (value != null) {
onRulerMouseMove(value, e);
}
onMouseMove(e);
});
var handleMouseLeave = (0, _ahooks.useMemoizedFn)(function (e) {
onRulerMouseMove(null, e);
onMouseLeave(e);
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
ref: rootRef,
className: "".concat(styles.root, " ").concat(className)
}, otherProps), {}, {
onClick: handleClick,
onMouseMove: handleMouseMove,
onMouseLeave: handleMouseLeave,
style: _objectSpread(_objectSpread({}, style), isHorizon ? {
cursor: 'ew-resize',
overflowY: 'visible',
height: size
} : {
cursor: 'ns-resize',
overflowX: 'visible',
width: size
}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", {
ref: canvasRef
})
}));
};
var _default = exports.default = Ruler;