react-sketch-ruler
Version:
> In using react, the zoom operation used for page presentation
989 lines (988 loc) • 32.3 kB
JavaScript
import ge, { useState as $, memo as Ee, useMemo as k, useCallback as Ke, useEffect as J, useRef as te, useImperativeHandle as We } from "react";
var ye = { exports: {} }, le = {};
var Te;
function Ze() {
if (Te) return le;
Te = 1;
var e = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
function n(o, r, a) {
var f = null;
if (a !== void 0 && (f = "" + a), r.key !== void 0 && (f = "" + r.key), "key" in r) {
a = {};
for (var m in r)
m !== "key" && (a[m] = r[m]);
} else a = r;
return r = a.ref, {
$$typeof: e,
type: o,
key: f,
ref: r !== void 0 ? r : null,
props: a
};
}
return le.Fragment = t, le.jsx = n, le.jsxs = n, le;
}
var Pe;
function ke() {
return Pe || (Pe = 1, ye.exports = Ze()), ye.exports;
}
var U = ke();
const Je = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAopJREFUOE/FlE9IVEEcx7+/N9ouds1Mu0QUSFZYdIgoUqQoKPBQHsKozpXE7jbTO/U8xLJvn6usBHWQ6hBFXupSkQeVbh0KJEPp0sH+eLGTsKs77xcj78m0ax0E8cHjzZv5zef3/c33xxA24KENYGJzoEEQbNNaN4Zh2OQ4znwYhr9c1/39vwrXVDo0NNS0tLR0GYB5D64BmAMwzMyvlFKz1es10Hw+f4mZ7wHYBeA9gNdENFepVOaEEM3M3OI4Thczn41gt6WUgQ3+C+r7/h0AWQD3mXnYqPA8L9nQ0HCemduIaFpKOWoAhUJhT6VSuQXgOjP3K6W8GLwKzeVyp4jonR0QBEErM48w8zFLyayUsjX+z+VyHhHdZebTSqkxM78CHRgYOKS1/ghgVErZY214RkQ7ADyRUj72ff8qgCtmXUrZGcf5vv8CwEUhxOF0Ov1pBRpla5dSdseBhUJhpznH6tIsZb1KqacW+BGArUaUXX63UuplHJTNZjuEEONSyhozfd/n6mQ1RkXZL2itz7mu+80EDA4ONi8vL/8AcM2UbikyR2BU9cSmmTU70YqKIAj2hWFo2uenlHK/BRg3Y2aeNO5GyU8S0ZbFxcUuz/NKEXAGQKPjOCcymcyX1dIi8DSAiWQyeaavr68cbSgCuBknYubnQoj+TCYzUywWE6VS6S2ADsdx2gxw1X3L7SNENMbMnwE8qK+vf5NKpRaMaeVyeW8ikfiaSqW+R7BuZr5BRMe11p2u607U9Gk8kc/ntzPzQwCmExYATDLzVBiGE0KIowAOADDf3QA+aK2VDaxRajto3K+rq+tl5nYAzQBamHmeiOYBTGmtR6ph/1Rqg9c73pz7dD1qN0TpHyNQRCUDJXrAAAAAAElFTkSuQmCC", He = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAAAXNSR0IArs4c6QAAAjtJREFUOE/NlD9oFEEUxn9v9ghC0hpRUogIAUmniGAT/5Q2FrETPSNRJILg7RwimI0ox85eQFCEBGIUO1PYpFM0jSConQoBEZGgGPsgl+w+2eM2bC57SopAFqYZ3v7m+977ZoQt+GQLmGxPaBiGgYiMWWvXBHZUGoZhH3BERPYC+4F+4Keq/urt7b1RLpf/ZEBVHa9Wq0HWyg3QKIoGVPU8cA7wgK/pUtXPQJ8xZk+pVBpuNBqXUoUiEvi+P56fzTpo6+SbwHNg1lo7WzTITGEKXFlZeeB53tVCpa3CK8AFa+1cBgvD8LKIXAQOJkkyICJDeYVBEJS6u7s/qeoLa+1o+l9TqXNuBLhmjDlbqVQ+5ICjInIfOBPH8W9jzGCR5YmJiRNxHM+papgqzqDvgSlr7VTernPuO3An3c9bBt74vv+yrdaKyLDv+/1Sq9UGPc97nY9EVuycU2AQOA7cAm4Dr4D5TvVxHB9rKo2iaEFVp621Ln96FEUngaOqGmSxabVqsh3a2h+x1h5qQjNrae/yE4+iaCwDJkky73neTuBZe129Xk+H+BS4l7ZqLVIZ2BhzuFKpvMsDVXXWGPMxFdAedOfcKeCRqj7MYrUhpz09PfXl5eXrectFWXXODQHpOq2qd/95o/JXr6ura3J1dXU6SZIfwKKIHAD2tVYMPBGRx77vN10UXtO85fTkmZmZHUtLSzUR2QXsBhaAL6r6DXhbrVYXi1yss59GqOgub/bN3Z7v6X/tb9Zmp/q/kN8s+lJb8oEAAAAASUVORK5CYII=";
typeof window < "u" && (window.NodeList && !NodeList.prototype.forEach && (NodeList.prototype.forEach = Array.prototype.forEach), typeof window.CustomEvent != "function" && (window.CustomEvent = function(e, t) {
t = t || { bubbles: !1, cancelable: !1, detail: null };
var n = document.createEvent("CustomEvent");
return n.initCustomEvent(e, t.bubbles, t.cancelable, t.detail), n;
}));
function Be(e, t) {
let n = e.length;
for (; n--; )
if (e[n].pointerId === t.pointerId)
return n;
return -1;
}
function Ae(e, t) {
let n;
if (t.touches) {
n = 0;
for (const o of t.touches)
o.pointerId = n++, Ae(e, o);
return;
}
n = Be(e, t), n > -1 && e.splice(n, 1), e.push(t);
}
function _e(e, t) {
if (t.touches) {
for (; e.length; )
e.pop();
return;
}
const n = Be(e, t);
n > -1 && e.splice(n, 1);
}
function Xe(e) {
e = e.slice(0);
let t = e.pop(), n;
for (; n = e.pop(); )
t = {
clientX: (n.clientX - t.clientX) / 2 + t.clientX,
clientY: (n.clientY - t.clientY) / 2 + t.clientY
};
return t;
}
function ve(e) {
if (e.length < 2)
return 0;
const t = e[0], n = e[1];
return Math.sqrt(
Math.pow(Math.abs(n.clientX - t.clientX), 2) + Math.pow(Math.abs(n.clientY - t.clientY), 2)
);
}
let ue = {
down: "mousedown",
move: "mousemove",
up: "mouseup mouseleave"
};
typeof window < "u" && (typeof window.PointerEvent == "function" ? ue = {
down: "pointerdown",
move: "pointermove",
up: "pointerup pointerleave pointercancel"
} : typeof window.TouchEvent == "function" && (ue = {
down: "touchstart",
move: "touchmove",
up: "touchend touchcancel"
}));
function we(e, t, n, o) {
ue[e].split(" ").forEach((r) => {
t.addEventListener(
r,
n,
o
);
});
}
function be(e, t, n) {
ue[e].split(" ").forEach((o) => {
t.removeEventListener(o, n);
});
}
const et = typeof document < "u" && !!document.documentMode;
let Ne;
function tt() {
return Ne || (Ne = document.createElement("div").style);
}
const Le = ["webkit", "moz", "ms"], ce = {};
function Se(e) {
if (ce[e])
return ce[e];
const t = tt();
if (e in t)
return ce[e] = e;
const n = e[0].toUpperCase() + e.slice(1);
let o = Le.length;
for (; o--; ) {
const r = `${Le[o]}${n}`;
if (r in t)
return ce[e] = r;
}
}
function de(e, t) {
return parseFloat(t[Se(e)]) || 0;
}
function fe(e, t, n = window.getComputedStyle(e)) {
const o = t === "border" ? "Width" : "";
return {
left: de(`${t}Left${o}`, n),
right: de(`${t}Right${o}`, n),
top: de(`${t}Top${o}`, n),
bottom: de(`${t}Bottom${o}`, n)
};
}
function re(e, t, n) {
e.style[Se(t)] = n;
}
function nt(e, t) {
const n = Se("transform");
re(e, "transition", `${n} ${t.duration}ms ${t.easing}`);
}
function ot(e, { x: t, y: n, scale: o, isSVG: r }, a) {
if (re(e, "transform", `scale(${o}) translate(${t}px, ${n}px)`), r && et) {
const f = window.getComputedStyle(e).getPropertyValue("transform");
e.setAttribute("transform", f);
}
}
function me(e) {
const t = e.parentNode, n = window.getComputedStyle(e), o = window.getComputedStyle(t), r = e.getBoundingClientRect(), a = t.getBoundingClientRect();
return {
elem: {
style: n,
width: r.width,
height: r.height,
top: r.top,
bottom: r.bottom,
left: r.left,
right: r.right,
margin: fe(e, "margin", n),
border: fe(e, "border", n)
},
parent: {
style: o,
width: a.width,
height: a.height,
top: a.top,
bottom: a.bottom,
left: a.left,
right: a.right,
padding: fe(t, "padding", o),
border: fe(t, "border", o)
}
};
}
function rt(e) {
let t = e;
for (; t && t.parentNode; ) {
if (t.parentNode === document) return !0;
t = t.parentNode instanceof ShadowRoot ? t.parentNode.host : t.parentNode;
}
return !1;
}
function st(e) {
return (e.getAttribute("class") || "").trim();
}
function at(e, t) {
return e.nodeType === 1 && ` ${st(e)} `.indexOf(` ${t} `) > -1;
}
function it(e, t) {
for (let n = e; n != null; n = n.parentNode)
if (at(n, t.excludeClass) || t.exclude.indexOf(n) > -1)
return !0;
return !1;
}
const lt = /^http:[\w\.\/]+svg$/;
function ut(e) {
return lt.test(e.namespaceURI) && e.nodeName.toLowerCase() !== "svg";
}
function ct(e) {
const t = {};
for (const n in e)
e.hasOwnProperty(n) && (t[n] = e[n]);
return t;
}
const Ye = {
animate: !1,
canvas: !1,
cursor: "move",
disablePan: !1,
disableZoom: !1,
disableXAxis: !1,
disableYAxis: !1,
duration: 200,
easing: "ease-in-out",
exclude: [],
excludeClass: "panzoom-exclude",
handleStartEvent: (e) => {
e.preventDefault(), e.stopPropagation();
},
maxScale: 4,
minScale: 0.125,
overflow: "hidden",
panOnlyWhenZoomed: !1,
pinchAndPan: !1,
relative: !1,
setTransform: ot,
startX: 0,
startY: 0,
startScale: 1,
step: 0.3,
touchAction: "none"
};
function Ue(e, t) {
if (!e)
throw new Error("Panzoom requires an element as an argument");
if (e.nodeType !== 1)
throw new Error("Panzoom requires an element with a nodeType of 1");
if (!rt(e))
throw new Error(
"Panzoom should be called on elements that have been attached to the DOM"
);
t = {
...Ye,
...t
};
const n = ut(e), o = e.parentNode;
o.style.overflow = t.overflow, o.style.userSelect = "none", o.style.touchAction = t.touchAction, (t.canvas ? o : e).style.cursor = t.cursor, e.style.userSelect = "none", e.style.touchAction = t.touchAction, re(
e,
"transformOrigin",
typeof t.origin == "string" ? t.origin : n ? "0 0" : "50% 50%"
);
function r() {
o.style.overflow = "", o.style.userSelect = "", o.style.touchAction = "", o.style.cursor = "", e.style.cursor = "", e.style.userSelect = "", e.style.touchAction = "", re(e, "transformOrigin", "");
}
function a(s = {}) {
for (const l in s)
s.hasOwnProperty(l) && (t[l] = s[l]);
(s.hasOwnProperty("cursor") || s.hasOwnProperty("canvas")) && (o.style.cursor = e.style.cursor = "", (t.canvas ? o : e).style.cursor = t.cursor), s.hasOwnProperty("overflow") && (o.style.overflow = s.overflow), s.hasOwnProperty("touchAction") && (o.style.touchAction = s.touchAction, e.style.touchAction = s.touchAction);
}
let f = 0, m = 0, c = 1, X = !1;
w(t.startScale, { animate: !1, force: !0 }), setTimeout(() => {
v(t.startX, t.startY, { animate: !1, force: !0 });
});
function A(s, l, d) {
if (d.silent)
return;
const h = new CustomEvent(s, { detail: l });
e.dispatchEvent(h);
}
function L(s, l, d) {
const h = { x: f, y: m, scale: c, isSVG: n, originalEvent: d, dimsOut: {} };
typeof l.animate == "boolean" && (l.animate ? nt(e, l) : re(e, "transition", "none")), l.setTransform(e, h, l);
function i() {
const p = me(e);
h.dimsOut = p, A(s, h, l), A("panzoomchange", h, l);
}
return l.animate ? setTimeout(() => {
i();
}, l.duration + 50) : requestAnimationFrame(() => {
i();
}), h;
}
function S(s, l, d, h) {
const i = { ...t, ...h }, p = { x: f, y: m, opts: i };
if (!i.force && (i.disablePan || i.panOnlyWhenZoomed && c === i.startScale))
return p;
if (s = parseFloat(s), l = parseFloat(l), i.disableXAxis || (p.x = (i.relative ? f : 0) + s), i.disableYAxis || (p.y = (i.relative ? m : 0) + l), i.contain) {
const u = me(e), b = u.elem.width / c, D = u.elem.height / c, G = b * d, K = D * d, F = (G - b) / 2, Z = (K - D) / 2;
if (i.contain === "inside") {
const se = (-u.elem.margin.left - u.parent.padding.left + F) / d, ae = (u.parent.width - G - u.parent.padding.left - u.elem.margin.left - u.parent.border.left - u.parent.border.right + F) / d;
p.x = Math.max(Math.min(p.x, ae), se);
const ne = (-u.elem.margin.top - u.parent.padding.top + Z) / d, oe = (u.parent.height - K - u.parent.padding.top - u.elem.margin.top - u.parent.border.top - u.parent.border.bottom + Z) / d;
p.y = Math.max(Math.min(p.y, oe), ne);
} else if (i.contain === "outside") {
const se = (-(G - u.parent.width) - u.parent.padding.left - u.parent.border.left - u.parent.border.right + F) / d, ae = (F - u.parent.padding.left) / d;
p.x = Math.max(Math.min(p.x, ae), se);
const ne = (-(K - u.parent.height) - u.parent.padding.top - u.parent.border.top - u.parent.border.bottom + Z) / d, oe = (Z - u.parent.padding.top) / d;
p.y = Math.max(Math.min(p.y, oe), ne);
}
}
return i.roundPixels && (p.x = Math.round(p.x), p.y = Math.round(p.y)), p;
}
function y(s, l) {
const d = { ...t, ...l }, h = { scale: c, opts: d };
if (!d.force && d.disableZoom)
return h;
let i = t.minScale, p = t.maxScale;
if (d.contain) {
const u = me(e), b = u.elem.width / c, D = u.elem.height / c;
if (b > 1 && D > 1) {
const G = u.parent.width - u.parent.border.left - u.parent.border.right, K = u.parent.height - u.parent.border.top - u.parent.border.bottom, F = G / b, Z = K / D;
t.contain === "inside" ? p = Math.min(p, F, Z) : t.contain === "outside" && (i = Math.max(i, F, Z));
}
}
return h.scale = Math.min(Math.max(s, i), p), h;
}
function v(s, l, d, h) {
const i = S(s, l, c, d);
return f !== i.x || m !== i.y ? (f = i.x, m = i.y, L("panzoompan", i.opts, h)) : { x: f, y: m, scale: c, isSVG: n, originalEvent: h };
}
function w(s, l, d) {
const h = y(s, l), i = h.opts;
if (!i.force && i.disableZoom)
return;
s = h.scale;
let p = f, u = m;
if (i.focal) {
const D = i.focal;
p = (D.x / s - D.x / c + f * s) / s, u = (D.y / s - D.y / c + m * s) / s;
}
const b = S(p, u, s, {
relative: !1,
force: !0
});
return f = b.x, m = b.y, c = s, L("panzoomzoom", i, d);
}
function B(s, l) {
const d = { ...t, animate: !0, ...l };
return w(c * Math.exp((s ? 1 : -1) * d.step), d);
}
function x(s) {
return B(!0, s);
}
function z(s) {
return B(!1, s);
}
function C(s, l, d, h) {
const i = me(e), p = {
width: i.parent.width - i.parent.padding.left - i.parent.padding.right - i.parent.border.left - i.parent.border.right,
height: i.parent.height - i.parent.padding.top - i.parent.padding.bottom - i.parent.border.top - i.parent.border.bottom
};
let u = l.clientX - i.parent.left - i.parent.padding.left - i.parent.border.left - i.elem.margin.left, b = l.clientY - i.parent.top - i.parent.padding.top - i.parent.border.top - i.elem.margin.top;
n || (u -= i.elem.width / c / 2, b -= i.elem.height / c / 2);
const D = {
x: u / p.width * (p.width * s),
y: b / p.height * (p.height * s)
};
return w(
s,
{ ...d, animate: !1, focal: D },
h
);
}
function T(s, l) {
s.preventDefault();
const d = { ...t, ...l, animate: !1 }, h = (s.deltaY === 0 && s.deltaX ? s.deltaX : s.deltaY) < 0 ? 1 : -1, i = y(
c * Math.exp(h * d.step / 3),
d
).scale;
return C(i, s, d, s);
}
function q(s) {
const l = { ...t, animate: !0, force: !0, ...s };
c = y(l.startScale, l).scale;
const d = S(l.startX, l.startY, c, l);
return f = d.x, m = d.y, L("panzoomreset", l);
}
let V, N, g, P, E, j;
const O = [];
function I(s) {
if (it(s.target, t))
return;
Ae(O, s), X = !0, t.handleStartEvent(s), V = f, N = m, A(
"panzoomstart",
{ x: f, y: m, scale: c, isSVG: n, originalEvent: s },
t
);
const l = Xe(O);
g = l.clientX, P = l.clientY, E = c, j = ve(O);
}
function W(s) {
if (!X || V === void 0 || N === void 0 || g === void 0 || P === void 0)
return;
Ae(O, s);
const l = Xe(O), d = O.length > 1;
let h = c;
if (d) {
j === 0 && (j = ve(O));
const i = ve(O) - j;
h = y(i * t.step / 80 + E).scale, C(h, l, { animate: !1 }, s);
}
(!d || t.pinchAndPan) && v(
V + (l.clientX - g) / h,
N + (l.clientY - P) / h,
{
animate: !1
},
s
);
}
function H(s) {
O.length === 1 && A(
"panzoomend",
{ x: f, y: m, scale: c, isSVG: n, originalEvent: s },
t
), _e(O, s), X && (X = !1, V = N = g = P = void 0);
}
let Q = !1;
function _() {
Q || (Q = !0, we("down", t.canvas ? o : e, I), we("move", document, W, { passive: !0 }), we("up", document, H, { passive: !0 }));
}
function ee() {
Q = !1, be("down", t.canvas ? o : e, I), be("move", document, W), be("up", document, H);
}
return t.noBind || _(), {
bind: _,
destroy: ee,
eventNames: ue,
getPan: () => ({ x: f, y: m }),
getScale: () => c,
getOptions: () => ct(t),
handleDown: I,
handleMove: W,
handleUp: H,
pan: v,
reset: q,
resetStyle: r,
setOptions: a,
setStyle: (s, l) => re(e, s, l),
zoom: w,
zoomIn: x,
zoomOut: z,
zoomToPoint: C,
zoomWithWheel: T
};
}
Ue.defaultOptions = Ye;
function ze(e, t) {
const [n, o] = $(0), [r, a] = $(0), f = {
backgroundColor: e.palette.hoverBg,
color: e.palette.hoverColor,
[t ? "top" : "left"]: "-8px",
[t ? "left" : "top"]: `${n + 10}px`
}, m = (S) => {
const y = S.nativeEvent.offsetX, v = S.nativeEvent.offsetY;
o(t ? y : v);
}, c = (S, y) => (S.stopPropagation(), new Promise((v) => {
if (e.lockLine) return;
const w = t ? S.clientY : S.clientX, B = y || r;
let x = B;
const z = (T) => {
let N = ((t ? T.clientY : T.clientX) - w) / e.scale + B, g = N;
const E = [...t ? e.snapsObj.h : e.snapsObj.v].sort(
(j, O) => Math.abs(g - j) - Math.abs(g - O)
);
E.length && Math.abs(E[0] - N) < e.snapThreshold / e.scale && (g = E[0], N = g), x = Math.round(N), a(Math.round(N));
}, C = () => {
document.removeEventListener("mousemove", z), X(x, e.index), v();
};
document.addEventListener("mousemove", z), document.addEventListener("mouseup", C, { once: !0 });
})), X = (S, y) => {
const v = t ? e.lines.h : e.lines.v, w = A(S);
if (v)
if (w)
if (typeof y == "number")
v.splice(y, 1), e.handleLine && e.handleLine(e.lines);
else
return;
else
typeof y != "number" ? (v.push(S), e.handleLine && e.handleLine(e.lines)) : (v[y] = S, e.handleLine && e.handleLine({ ...e.lines, [t ? "h" : "v"]: v }));
}, A = (S) => {
const y = t ? e.canvasHeight : e.canvasWidth;
return S < 0 || S > y;
}, L = A(r) ? "放开删除" : `${t ? "Y" : "X"}: ${r * e.rate}`;
return {
startValue: r,
setStartValue: a,
actionStyle: f,
labelContent: L,
handleMouseMove: m,
handleMouseDown: c
};
}
const dt = (e) => e <= 0.25 ? 40 : e <= 0.5 ? 20 : e <= 1 ? 10 : e <= 2 ? 5 : e <= 4 ? 2 : 1;
function ft(e, t, n, o, r, a) {
a ? r.moveTo(e, 0) : r.moveTo(0, e), r.save(), a ? r.translate(e + 5, o * 0.2) : r.translate(n * 0.1, e + 32), a || r.rotate(-Math.PI / 2), r.fillText(Math.round(t).toString(), 4, 7), r.restore(), a ? r.lineTo(e, o) : r.lineTo(n, e), r.stroke(), r.closePath(), r.setTransform(1, 0, 0, 1, 0, 0);
}
function pe(e, t, n, o, r, a) {
o.fillStyle = r.fontShadowColor, o.strokeStyle = r.longfgColor, o.save(), o.translate(e, t), a || o.rotate(-Math.PI / 2), o.strokeText(String(n), 0, 0), o.fillText(String(n), 0, 0), o.restore();
}
const mt = (e, t, n, o, r, a) => {
const { scale: f, width: m, height: c, ratio: X, palette: A, gridRatio: L, showShadowText: S } = r, { bgColor: y, fontColor: v, shadowColor: w, longfgColor: B } = A, x = a ? r.canvasWidth : r.canvasHeight;
e.setTransform(1, 0, 0, 1, 0, 0), e.scale(X, X), e.clearRect(0, 0, m, c), e.fillStyle = y, e.fillRect(0, 0, m, c);
const C = dt(f) * L * 10, T = C * f, q = Math.floor(t / C) * C, V = (q - t) / C * T, N = t + Math.ceil((a ? m : c) / f);
if (o) {
const g = (n - t) * f, P = o * f;
if (e.fillStyle = w, a ? e.fillRect(g, 0, P, c) : e.fillRect(0, g, m, P), S)
if (a) {
pe(g, c * 0.4, Math.round(n), e, A, a);
const E = (n + o - t) * f;
pe(
E,
c * 0.4,
Math.round(n + o),
e,
A,
a
);
} else {
pe(m * 0.4, g, Math.round(n), e, A, a);
const E = (n + o - t) * f;
pe(
m * 0.4,
E,
Math.round(n + o),
e,
A,
a
);
}
}
e.beginPath(), e.fillStyle = v, e.strokeStyle = B;
for (let g = q, P = 0; g < N; g += C, P++) {
const E = V + P * T + 0.5;
if (g - C < x && g > x || g == x) {
const j = V + P * T + 0.5 + (x - g) * f;
ft(j, x, m, c, e, a);
return;
}
g >= 0 && g <= x && (g == 0 ? a ? (e.moveTo(E, 0), e.lineTo(E, c)) : (e.moveTo(0, E), e.lineTo(m, E)) : a ? (e.moveTo(E, 20), e.lineTo(E, c / 1.3)) : (e.moveTo(20, E), e.lineTo(m / 1.3, E)), e.save(), g == 0 ? a ? e.translate(E - 15, c * 0.2) : e.translate(m * 0.3, E - 5) : a ? e.translate(E - 12, c * 0.05) : e.translate(m * 0.05, E + 12), a || e.rotate(-Math.PI / 2), x - g > C / 2 && (!S || o == 0 || Math.abs(g - n) > C / 2 && Math.abs(g - (n + o)) > C / 2) && e.fillText(g.toString(), 4, 9), e.restore());
}
e.stroke(), e.closePath();
};
function pt(e, t) {
let n;
return function() {
clearTimeout(n), n = setTimeout(() => {
e();
}, t);
};
}
const ht = ({
scale: e,
rate: t,
palette: n,
index: o,
start: r,
vertical: a,
value: f,
canvasWidth: m,
canvasHeight: c,
lines: X,
isShowReferLine: A,
snapThreshold: L,
snapsObj: S,
lockLine: y,
handleLine: v
}) => {
const [w, B] = $(!1), [x, z] = $(!1), { startValue: C, setStartValue: T, actionStyle: q, handleMouseMove: V, handleMouseDown: N, labelContent: g } = ze(
{
palette: n,
scale: e,
snapsObj: S,
lines: X,
canvasWidth: m,
canvasHeight: c,
snapThreshold: L,
lockLine: y,
index: o,
value: f,
rate: t,
handleLine: v
},
a
), P = k(() => C >= r, [r, C, a]), E = k(() => {
const { lineType: I, lockLineColor: W, lineColor: H } = n, Q = y ? W : H ?? "black", _ = y || x ? "none" : "auto", ee = A && !y ? a ? "ns-resize" : "ew-resize" : "default", s = a ? "borderTop" : "borderLeft", l = (C - r) * e;
return {
[s]: `1px ${I} ${Q}`,
pointerEvents: _,
cursor: ee,
[a ? "top" : "left"]: `${l}px`
};
}, [n, y, x, A, a, C, r, e]), j = Ke(
pt(() => {
z(!1);
}, 1e3),
[]
);
J(() => {
z(!0), j();
}, [e]), J(() => {
T(f);
}, [f]);
const O = (I) => {
I.stopPropagation(), y || B(!0);
};
return /* @__PURE__ */ U.jsx(
"div",
{
style: E,
className: "line",
onMouseEnter: O,
onMouseMove: V,
onMouseLeave: () => B(!1),
onMouseDown: N,
hidden: !P,
children: /* @__PURE__ */ U.jsx("div", { className: "action", style: q, children: w && /* @__PURE__ */ U.jsx("span", { className: "value", children: g }) })
}
);
}, gt = Ee(ht), yt = ({
scale: e,
palette: t,
vertical: n,
start: o,
width: r,
height: a,
selectStart: f,
selectLength: m,
canvasWidth: c,
canvasHeight: X,
rate: A,
showShadowText: L,
gridRatio: S,
onDragStart: y
}) => {
const v = te(null), [w, B] = $(null), x = te(null);
J(() => {
if (v.current) {
const T = v.current.getContext("2d");
B(T);
}
}, [v]), J(() => {
if (v.current && w) {
const T = typeof window < "u" && window.devicePixelRatio || 1;
v.current.width = r * T, v.current.height = a * T, w.font = '11px -apple-system, "Helvetica Neue", ".SFNSText-Regular", "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif', w.lineWidth = 1, w.textBaseline = "middle";
}
}, [w, r, a]), J(() => {
const T = {
scale: e / A,
width: r,
height: a,
palette: t,
canvasWidth: c * A,
canvasHeight: X * A,
ratio: typeof window < "u" && window.devicePixelRatio || 1,
gridRatio: S,
showShadowText: L
};
w && (x.current !== null && cancelAnimationFrame(x.current), x.current = requestAnimationFrame(() => {
mt(w, o * A, f, m, T, !n);
}));
}, [
e,
A,
r,
a,
t,
c,
X,
S,
w,
o,
f,
m,
n
]), J(() => () => {
x.current !== null && cancelAnimationFrame(x.current);
}, []);
const z = k(() => ({
width: r + "px",
height: a + "px",
cursor: n ? "ew-resize" : "ns-resize",
[n ? "borderRight" : "borderBottom"]: `1px solid ${t.borderColor || "#eeeeef"}`
}), [n, t.borderColor]), C = (T) => y(T);
return /* @__PURE__ */ U.jsx("canvas", { ref: v, className: "ruler", style: z, onMouseDown: C });
}, vt = Ee(yt), wt = ({
scale: e,
thick: t,
canvasWidth: n,
canvasHeight: o,
palette: r,
vertical: a,
width: f,
height: m,
start: c,
startOther: X,
lines: A,
selectStart: L,
selectLength: S,
isShowReferLine: y,
rate: v,
snapThreshold: w,
snapsObj: B,
gridRatio: x,
lockLine: z,
propStyle: C,
showShadowText: T,
handleLine: q
}) => {
const [V, N] = $(z), [g, P] = $(!1), [E, j] = $(!1), { actionStyle: O, handleMouseMove: I, handleMouseDown: W, labelContent: H, startValue: Q, setStartValue: _ } = ze(
{
palette: r,
scale: e,
snapsObj: B,
lines: A,
canvasWidth: n,
canvasHeight: o,
snapThreshold: w,
lockLine: V,
rate: v,
handleLine: q
},
!a
), ee = a ? "v-container" : "h-container", s = k(() => a ? A.h : A.v, [a, A]), l = k(() => {
const h = r.lineType, i = a ? "left" : "top", p = a ? "top" : "left", u = a ? "borderLeft" : "borderBottom", b = (Q - X) * e + t;
return {
[i]: b + "px",
[p]: -t + "px",
cursor: a ? "ew-resize" : "ns-resize",
[u]: `1px ${h} ${r.lineColor}`
};
}, [Q, X, a, r.lineType, e, r.lineColor, t]), d = async (h) => {
const { offsetX: i, offsetY: p } = h.nativeEvent;
P(!0), N(!1);
const u = Math.round(
X - t / e + (a ? i : p) / e
);
_(u), await W(h, u), P(!1);
};
return J(() => {
N(z);
}, [z]), /* @__PURE__ */ U.jsxs("div", { className: ee, style: C, children: [
/* @__PURE__ */ U.jsx(
vt,
{
vertical: a,
scale: e,
width: f,
height: m,
start: c,
showShadowText: T,
canvasWidth: n,
canvasHeight: o,
selectStart: L,
selectLength: S,
palette: r,
rate: v,
onDragStart: d,
gridRatio: x
}
),
y && /* @__PURE__ */ U.jsx("div", { className: "lines", children: s.map((h, i) => /* @__PURE__ */ U.jsx(
gt,
{
lockLine: V,
index: i,
value: Math.floor(h),
scale: e,
start: c,
canvasWidth: n,
snapThreshold: w,
snapsObj: B,
canvasHeight: o,
lines: A,
palette: r,
vertical: a,
isShowReferLine: y,
handleLine: q,
rate: v
},
`${h}-${i}`
)) }),
y && /* @__PURE__ */ U.jsx(
"div",
{
className: "indicator",
onMouseEnter: () => j(!0),
onMouseMove: I,
onMouseLeave: () => j(!1),
hidden: !g,
style: l,
children: /* @__PURE__ */ U.jsx("div", { className: "action", style: O, children: E && /* @__PURE__ */ U.jsx("span", { className: "value", children: H }) })
}
)
] });
}, Oe = Ee(wt), bt = (e) => k(
() => ({
bgColor: "#f6f7f9",
longfgColor: "#BABBBC",
fontColor: "#7D8694",
// ruler font color
fontShadowColor: "#106ebe",
shadowColor: "#e9f7fe",
// ruler shadow color
lineColor: "#51d6a9",
lineType: "solid",
lockLineColor: "#d4d7dc",
hoverBg: "#000",
hoverColor: "#fff",
borderColor: "#eeeeef",
...e
}),
[e]
), Et = ge.forwardRef(
({
showRuler: e = !0,
scale: t = 1,
rate: n = 1,
thick: o = 16,
width: r = 1400,
height: a = 800,
eyeIcon: f,
closeEyeIcon: m,
paddingRatio: c = 0.2,
autoCenter: X = !0,
showShadowText: A = !0,
shadow: L = {
x: 0,
y: 0,
width: 0,
height: 0
},
lines: S = {
h: [],
v: []
},
isShowReferLine: y = !0,
canvasWidth: v = 1e3,
canvasHeight: w = 700,
snapsObj: B = {
h: [],
v: []
},
palette: x,
snapThreshold: z = 5,
gridRatio: C = 1,
lockLine: T = !1,
selfHandle: q = !1,
panzoomOption: V,
children: N,
onHandleCornerClick: g,
updateScale: P,
onZoomChange: E,
handleLine: j
}, O) => {
const I = bt(x || {}), [W, H] = $(0), [Q, _] = $(0), [ee, s] = $("defaultCursor"), l = te(0), d = te(0), [h, i] = $(1), [p, u] = $(y), b = te(null), D = te(null), G = te(null), K = k(() => r - o, [r, o]), F = k(() => a - o, [a, o]), Z = {
thick: o,
lines: S,
snapThreshold: z,
snapsObj: B,
isShowReferLine: p,
canvasWidth: v,
canvasHeight: w,
rate: n,
palette: I,
gridRatio: C,
showShadowText: A,
lockLine: T,
scale: h,
handleLine: j
}, se = k(() => ({
backgroundImage: p ? `url(${f || Je})` : `url(${m || He})`,
width: `${o}px`,
height: `${o}px`,
borderRight: `1px solid ${I.borderColor}`,
borderBottom: `1px solid ${I.borderColor}`
}), [p, f, m, I]), ae = k(() => ({
background: I.bgColor,
left: o + "px",
top: o + "px",
width: K + "px",
height: F + "px"
}), [F, K, I]), ne = (R) => {
(R.ctrlKey || R.metaKey) && b.current && b.current.zoomWithWheel(R);
}, oe = (R) => {
const Y = document.activeElement;
Y instanceof HTMLInputElement || Y instanceof HTMLTextAreaElement || Y?.classList.contains("monaco-editor") || Y?.getAttribute("contenteditable") === "true" || R.key === " " && (b.current && (s("grabCursor"), b.current.bind()), R.preventDefault());
}, Ce = (R) => {
R.key === " " && b.current && (s("defaultCursor"), b.current.destroy());
}, xe = (R) => ({
noBind: !0,
startScale: R,
// cursor: 'default',
startX: l.current,
startY: d.current,
smoothScroll: !0,
canvas: !0,
...V
}), he = (R) => {
const Y = R.detail, { scale: M, dimsOut: ie } = Y;
if (ie) {
i(M), P && P(M);
const Ge = (ie.parent.left - ie.elem.left) / M, Qe = (ie.parent.top - ie.elem.top) / M;
H(Ge), E && E(Y), _(Qe);
}
}, Me = () => {
const R = D.current;
G.current && G.current.removeEventListener("panzoomchange", he), b.current && b.current.destroy();
let Y = t;
X && (Y = Re(), i(Y), P && P(Y));
const M = Ue(R, xe(Y));
b.current = M, R && (G.current = R, G.current.addEventListener("panzoomchange", he));
}, Re = () => {
const R = K * (1 - c) / v, Y = F * (1 - c) / w, M = Math.min(R, Y);
return l.current = K / 2 - v / 2, M < 1 ? d.current = (w * M / 2 - w / 2) / M - (w * M - F) / M / 2 : M > 1 ? d.current = (w * M - w) / 2 / M + (F - w * M) / M / 2 : d.current = 0, M;
}, Ve = () => b.current?.reset(), Ie = () => b.current?.zoomIn(), je = () => b.current?.zoomOut(), De = () => {
const R = Re();
b.current?.setOptions(xe(R));
}, Fe = () => {
u(!p), g && g(!p);
};
We(O, () => ({
reset: Ve,
zoomIn: Ie,
zoomOut: je,
initPanzoom: Me,
panzoomInstance: b
})), J(() => {
u(y);
}, [y]), J(() => (Me(), q || (document.addEventListener("wheel", ne, { passive: !1 }), document.addEventListener("keydown", oe), document.addEventListener("keyup", Ce)), () => {
document.removeEventListener("wheel", ne), document.removeEventListener("keydown", oe), document.removeEventListener("keyup", Ce), G.current && G.current.removeEventListener("panzoomchange", he), b.current && (b.current.destroy(), b.current = null);
}), [v, w, r, a, q]), J(() => {
De();
}, [V]);
const [qe, $e] = ge.Children.toArray(N).reduce(
(R, Y) => {
if (ge.isValidElement(Y)) {
const M = Y;
M.props.slot === "default" || !M.props.slot ? R[0] = M : M.props.slot === "btn" && (R[1] = M);
}
return R;
},
[null, null]
);
return /* @__PURE__ */ U.jsxs("div", { className: "sketch-ruler", id: "sketch-ruler", children: [
$e,
/* @__PURE__ */ U.jsx("div", { className: "canvasedit-parent " + ee, style: ae, children: /* @__PURE__ */ U.jsx("div", { ref: D, className: "canvasedit " + ee, children: qe }) }),
e && /* @__PURE__ */ U.jsx(
Oe,
{
...Z,
width: r,
propStyle: { marginLeft: o + "px", width: K + "px" },
height: o,
start: W,
startOther: Q,
selectStart: L.x,
selectLength: L.width,
vertical: !1
}
),
e && /* @__PURE__ */ U.jsx(
Oe,
{
...Z,
propStyle: { marginTop: o + "px", top: 0, height: F + "px" },
width: o,
height: a,
start: Q,
startOther: W,
selectStart: L.y,
selectLength: L.height,
vertical: !0
}
),
e && /* @__PURE__ */ U.jsx("a", { className: "corner", style: se, onClick: Fe })
] });
}
);
export {
Et as default
};
//# sourceMappingURL=index.js.map