vue3-sketch-ruler
Version:
> In using vue3, the zoom operation used for page presentation
1,051 lines (1,050 loc) • 36.2 kB
JavaScript
import { ref as U, computed as Y, defineComponent as he, onMounted as ke, watch as Z, withDirectives as _, openBlock as H, createElementBlock as $, normalizeStyle as K, withModifiers as de, unref as P, createElementVNode as ee, toDisplayString as Xe, createCommentVNode as be, vShow as te, reactive as Ve, onUnmounted as We, normalizeClass as Se, createVNode as Ae, mergeProps as Le, Fragment as Ie, renderList as De, createBlock as xe, useCssVars as He, renderSlot as Te } from "vue";
/*!vue3-sketch-ruler v2.2.102025年6月Wed Jun 18 2025 17:41:08 GMT+0800 (中国标准时间)制作*/
const Ke = (e) => e <= 0.25 ? 40 : e <= 0.5 ? 20 : e <= 1 ? 10 : e <= 2 ? 5 : e <= 4 ? 2 : 1;
function $e(e, t, n, a, i, c) {
c ? i.moveTo(e, 0) : i.moveTo(0, e), i.save(), c ? i.translate(e + 5, a * 0.2) : i.translate(n * 0.1, e + 32), c || i.rotate(-Math.PI / 2), i.fillText(Math.round(t).toString(), 4, 7), i.restore(), c ? i.lineTo(e, a) : i.lineTo(n, e), i.stroke(), i.closePath(), i.setTransform(1, 0, 0, 1, 0, 0);
}
function se(e, t, n, a, i, c) {
a.fillStyle = i.fontShadowColor, a.strokeStyle = i.longfgColor, a.save(), a.translate(e, t), c || a.rotate(-Math.PI / 2), a.font = "bold 12px Aria", a.fillText(String(n), 0, 0), a.restore();
}
const Qe = (e, t, n, a, i, c) => {
const { scale: d, width: f, height: u, ratio: R, palette: E, gridRatio: C, showShadowText: L } = i, { bgColor: A, fontColor: m, shadowColor: w, longfgColor: B } = E, v = c ? i.canvasWidth : i.canvasHeight;
e.setTransform(1, 0, 0, 1, 0, 0), e.scale(R, R), e.clearRect(0, 0, f, u), e.fillStyle = A, e.fillRect(0, 0, f, u);
const g = Ke(d) * C * 10, T = g * d, V = Math.floor(t / g) * g, W = (V - t) / g * T, X = t + Math.ceil((c ? f : u) / d);
if (a) {
const y = (n - t) * d, O = a * d;
if (e.fillStyle = w, c ? e.fillRect(y, 0, O, u) : e.fillRect(0, y, f, O), L)
if (c) {
se(y, u * 0.4, Math.round(n), e, E, c);
const k = (n + a - t) * d;
se(
k,
u * 0.4,
Math.round(n + a),
e,
E,
c
);
} else {
se(f * 0.4, y, Math.round(n), e, E, c);
const k = (n + a - t) * d;
se(
f * 0.4,
k,
Math.round(n + a),
e,
E,
c
);
}
}
e.beginPath(), e.fillStyle = m, e.strokeStyle = B;
for (let y = V, O = 0; y < X; y += g, O++) {
const k = W + O * T + 0.5;
if (y - g < v && y > v || y == v) {
const N = W + O * T + 0.5 + (v - y) * d;
$e(N, v, f, u, e, c);
return;
}
y >= 0 && y <= v && (y == 0 ? c ? (e.moveTo(k, 0), e.lineTo(k, u)) : (e.moveTo(0, k), e.lineTo(f, k)) : c ? (e.moveTo(k, 20), e.lineTo(k, u / 1.3)) : (e.moveTo(20, k), e.lineTo(f / 1.3, k)), e.save(), y == 0 ? c ? e.translate(k - 15, u * 0.01) : e.translate(f * 0.3, k - 5) : c ? e.translate(k - 12, u * 0.05) : e.translate(f * 0.05, k + 12), c || e.rotate(-Math.PI / 2), v - y > g / 2 && (!L || a == 0 || Math.abs(y - n) > g / 2 && Math.abs(y - (n + a)) > g / 2) && e.fillText(y.toString(), 4, 9), e.restore());
}
e.stroke(), e.closePath();
};
function Ce(e, t = 100) {
let n = null;
const a = function(...i) {
n !== null && clearTimeout(n), n = setTimeout(() => {
e(...i);
}, t);
};
return a.cancel = function() {
n !== null && (clearTimeout(n), n = null);
}, a;
}
function Ne(e, t) {
const n = U(0), a = U(0), i = U(!1), c = Y(() => ({
backgroundColor: e.palette.hoverBg,
color: e.palette.hoverColor,
[t ? "top" : "left"]: "-8px",
[t ? "left" : "top"]: `${n.value + 10}px`
})), d = ({ offsetX: w, offsetY: B }) => {
n.value = t ? w : B;
}, f = (w, B) => new Promise((v) => {
if (e.lockLine) return;
const M = t ? w.clientY : w.clientX;
d(w);
const g = B || a.value;
let T = g;
const V = (X) => {
let k = ((t ? X.clientY : X.clientX) - M) / e.scale + g, N = k;
const x = (t ? e.snapsObj.h : e.snapsObj.v).slice().sort((Q, G) => Math.abs(N - Q) - Math.abs(N - G));
x.length && Math.abs(x[0] - k) < e.snapThreshold / e.scale && (N = x[0], k = N), T = Math.round(k), a.value = T;
}, W = () => {
document.removeEventListener("mousemove", V), u(T, e.index), v();
};
document.addEventListener("mousemove", V), document.addEventListener("mouseup", W, { once: !0 });
}), u = (w, B) => {
var g, T;
const v = t ? (g = e.lines) == null ? void 0 : g.h : (T = e.lines) == null ? void 0 : T.v, M = R(w);
if (v)
if (M)
if (typeof B == "number")
v.splice(B, 1);
else
return;
else
typeof B != "number" ? v.push(w) : v[B] = w;
}, R = (w) => {
const B = t ? e.canvasHeight : e.canvasWidth;
return w < 0 || w > B;
}, E = Y(() => R(a.value) ? "放开删除" : `${t ? "Y" : "X"}：${a.value * e.rate}`), C = Ce(() => {
i.value = !1;
}, 200), L = Ce(() => {
i.value = !0;
}, 200);
return {
showLabel: i,
startValue: a,
actionStyle: c,
labelContent: E,
handleMouseDown: f,
handleMouseenter: (w) => {
e.lockLine || (d(w), L(), C.cancel());
},
handleMouseLeave: () => {
C();
}
};
}
const Ge = {
key: 0,
class: "value"
}, Fe = /* @__PURE__ */ he({
__name: "ruler-line",
props: {
scale: {},
palette: {},
index: {},
start: {},
vertical: { type: Boolean },
value: {},
canvasWidth: {},
canvasHeight: {},
lines: {},
isShowReferLine: { type: Boolean },
rate: {},
snapThreshold: {},
snapsObj: {},
lockLine: { type: Boolean }
},
setup(e) {
const t = e, n = U(!1), {
actionStyle: a,
handleMouseDown: i,
labelContent: c,
startValue: d,
showLabel: f,
handleMouseenter: u,
handleMouseLeave: R
} = Ne(t, t.vertical), E = Y(() => d.value >= t.start), C = Y(() => {
const { lineType: A, lockLineColor: m, lineColor: w } = t.palette, B = t.lockLine ? m : w ?? "black", v = t.lockLine || n.value ? "none" : "auto", M = t.isShowReferLine && !t.lockLine ? t.vertical ? "ns-resize" : "ew-resize" : "default", g = t.vertical ? "borderTop" : "borderLeft", T = (d.value - t.start) * t.scale;
return {
[g]: `1px ${A} ${B}`,
pointerEvents: v,
cursor: M,
[t.vertical ? "top" : "left"]: `${T}px`
};
});
ke(() => {
d.value = t.value ?? 0;
});
const L = Ce(() => {
n.value = !1;
}, 1e3);
return Z([() => t.scale], () => {
n.value = !0, L();
}), (A, m) => _((H(), $("div", {
class: "line",
style: K(C.value),
onMouseenter: m[0] || (m[0] = de(
//@ts-ignore
(...w) => P(u) && P(u)(...w),
["stop"]
)),
onMouseleave: m[1] || (m[1] = de(
//@ts-ignore
(...w) => P(R) && P(R)(...w),
["stop"]
)),
onMousedown: m[2] || (m[2] = de(
//@ts-ignore
(...w) => P(i) && P(i)(...w),
["stop"]
))
}, [
ee("div", {
class: "action",
style: K(P(a))
}, [
P(f) ? (H(), $("span", Ge, Xe(P(c)), 1)) : be("", !0)
], 4)
], 36)), [
[te, E.value]
]);
}
}), qe = /* @__PURE__ */ he({
__name: "index",
props: {
scale: {},
palette: {},
vertical: { type: Boolean },
showShadowText: { type: Boolean },
start: {},
width: {},
height: {},
selectStart: {},
selectLength: {},
canvasWidth: {},
canvasHeight: {},
rate: {},
gridRatio: {}
},
emits: ["handleDragStart"],
setup(e, { emit: t }) {
const n = e, a = t, i = Ve({
isDragging: !1,
canvasContext: null
});
let c = window.devicePixelRatio;
const d = U(null);
ke(() => {
window.addEventListener("resize", f), u(), E(c), C(c);
});
const f = () => {
c = window.devicePixelRatio, E(c), C(c);
}, u = () => {
var A;
i.canvasContext = ((A = d.value) == null ? void 0 : A.getContext("2d")) || null;
}, R = Y(() => ({
width: n.width + "px",
height: n.height + "px",
cursor: n.vertical ? "ew-resize" : "ns-resize",
[n.vertical ? "borderRight" : "borderBottom"]: `1px solid ${n.palette.borderColor || "#eeeeef"} `
}));
We(() => {
window.removeEventListener("resize", f);
});
const E = (A) => {
if (d.value) {
d.value.width = Math.round(n.width * A), d.value.height = Math.round(n.height * A);
const m = i.canvasContext;
m && (m.font = `11px -apple-system,
"Helvetica Neue", ".SFNSText-Regular",
"SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif`, m.lineWidth = 1, m.textBaseline = "middle");
}
}, C = (A) => {
const m = {
scale: n.scale,
width: n.width,
height: n.height,
palette: n.palette,
canvasWidth: n.canvasWidth,
canvasHeight: n.canvasHeight,
ratio: A,
rate: n.rate,
gridRatio: n.gridRatio,
showShadowText: n.showShadowText
};
m.scale = n.scale / n.rate, m.canvasWidth = n.canvasWidth * n.rate, m.canvasHeight = n.canvasHeight * n.rate, i.canvasContext && Qe(
i.canvasContext,
n.start * n.rate,
n.selectStart,
n.selectLength,
m,
!n.vertical
);
};
Z(
[
() => n.width,
() => n.height,
() => n.start,
() => n.palette,
() => n.selectStart,
() => n.selectLength
],
() => {
C(c);
}
), Z([() => n.width, () => n.height], () => {
E(c);
});
const L = (A) => {
a("handleDragStart", A);
};
return (A, m) => (H(), $("canvas", {
ref_key: "canvas",
ref: d,
class: "ruler",
style: K(R.value),
onMousedown: de(L, ["stop"])
}, null, 36));
}
}), Ze = { class: "lines" }, je = {
key: 0,
class: "value"
}, Re = /* @__PURE__ */ he({
__name: "ruler-wrapper",
props: {
scale: {},
thick: {},
canvasWidth: {},
canvasHeight: {},
palette: {},
vertical: { type: Boolean },
width: {},
height: {},
start: {},
startOther: {},
lines: {},
selectStart: {},
selectLength: {},
isShowReferLine: { type: Boolean },
rate: {},
snapThreshold: {},
snapsObj: {},
gridRatio: {},
lockLine: { type: Boolean },
showShadowText: { type: Boolean }
},
emits: ["changeLineState"],
setup(e, { emit: t }) {
const n = e, {
showLabel: a,
actionStyle: i,
handleMouseenter: c,
handleMouseLeave: d,
handleMouseDown: f,
labelContent: u,
startValue: R
} = Ne(n, !n.vertical), E = U(!1), C = U(!1), L = Y(() => n.vertical ? "v-container" : "h-container"), A = t, m = Y(() => {
var v, M;
return n.vertical ? (v = n.lines) == null ? void 0 : v.h : (M = n.lines) == null ? void 0 : M.v;
}), w = Y(() => {
const v = n.palette.lineType;
let M = n.vertical ? "left" : "top", g = n.vertical ? "top" : "left", T = n.vertical ? "borderLeft" : "borderBottom";
const V = (R.value - n.startOther) * n.scale + n.thick;
return {
[M]: V + "px",
[g]: -n.thick + "px",
cursor: n.vertical ? "ew-resize" : "ns-resize",
[T]: `1px ${v} ${n.palette.lineColor}`
};
}), B = async (v) => {
const { offsetX: M, offsetY: g } = v, { scale: T, vertical: V, thick: W, startOther: X } = n;
if (!E.value) {
C.value = !0, A("changeLineState", !1);
let y = Math.round(
X - W / T + (V ? M : g) / T
);
R.value = y, await f(v, y), C.value = !1;
}
};
return Z([() => n.lockLine], () => {
E.value = n.lockLine;
}), (v, M) => (H(), $("div", {
class: Se(L.value)
}, [
Ae(qe, Le(v.$props, { onHandleDragStart: B }), null, 16),
_(ee("div", Ze, [
(H(!0), $(Ie, null, De(m.value, (g, T) => (H(), xe(Fe, Le({
key: g + T,
index: T,
value: g >> 0,
ref_for: !0
}, v.$props), null, 16, ["index", "value"]))), 128))
], 512), [
[te, v.isShowReferLine]
]),
v.isShowReferLine ? _((H(), $("div", {
key: 0,
class: "indicator",
style: K(w.value),
onMouseenter: M[0] || (M[0] = //@ts-ignore
(...g) => P(c) && P(c)(...g)),
onMouseleave: M[1] || (M[1] = //@ts-ignore
(...g) => P(d) && P(d)(...g))
}, [
ee("div", {
class: "action",
style: K(P(i))
}, [
P(a) ? (H(), $("span", je, Xe(P(u)), 1)) : be("", !0)
], 4)
], 36)), [
[te, C.value]
]) : be("", !0)
], 2));
}
}), 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", _e = "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=";
/*!simple-panzoom v1.0.72024年8月Sat Aug 10 2024 16:04:04 GMT+0800 (中国标准时间)制作*/
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 ze(e, t) {
let n = e.length;
for (; n--; )
if (e[n].pointerId === t.pointerId)
return n;
return -1;
}
function Me(e, t) {
let n;
if (t.touches) {
n = 0;
for (const a of t.touches)
a.pointerId = n++, Me(e, a);
return;
}
n = ze(e, t), n > -1 && e.splice(n, 1), e.push(t);
}
function et(e, t) {
if (t.touches) {
for (; e.length; )
e.pop();
return;
}
const n = ze(e, t);
n > -1 && e.splice(n, 1);
}
function Be(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 ge(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 ae = {
down: "mousedown",
move: "mousemove",
up: "mouseup mouseleave"
};
typeof window < "u" && (typeof window.PointerEvent == "function" ? ae = {
down: "pointerdown",
move: "pointermove",
up: "pointerup pointerleave pointercancel"
} : typeof window.TouchEvent == "function" && (ae = {
down: "touchstart",
move: "touchmove",
up: "touchend touchcancel"
}));
function we(e, t, n, a) {
ae[e].split(" ").forEach((i) => {
t.addEventListener(
i,
n,
a
);
});
}
function ye(e, t, n) {
ae[e].split(" ").forEach((a) => {
t.removeEventListener(a, n);
});
}
const tt = typeof document < "u" && !!document.documentMode;
let Oe;
function nt() {
return Oe || (Oe = document.createElement("div").style);
}
const Pe = ["webkit", "moz", "ms"], ie = {};
function Ee(e) {
if (ie[e])
return ie[e];
const t = nt();
if (e in t)
return ie[e] = e;
const n = e[0].toUpperCase() + e.slice(1);
let a = Pe.length;
for (; a--; ) {
const i = `${Pe[a]}${n}`;
if (i in t)
return ie[e] = i;
}
}
function le(e, t) {
return parseFloat(t[Ee(e)]) || 0;
}
function ce(e, t, n = window.getComputedStyle(e)) {
const a = t === "border" ? "Width" : "";
return {
left: le(`${t}Left${a}`, n),
right: le(`${t}Right${a}`, n),
top: le(`${t}Top${a}`, n),
bottom: le(`${t}Bottom${a}`, n)
};
}
function J(e, t, n) {
e.style[Ee(t)] = n;
}
function ot(e, t) {
const n = Ee("transform");
J(e, "transition", `${n} ${t.duration}ms ${t.easing}`);
}
function at(e, { x: t, y: n, scale: a, isSVG: i }, c) {
if (J(e, "transform", `scale(${a}) translate(${t}px, ${n}px)`), i && tt) {
const d = window.getComputedStyle(e).getPropertyValue("transform");
e.setAttribute("transform", d);
}
}
function ue(e) {
const t = e.parentNode, n = window.getComputedStyle(e), a = window.getComputedStyle(t), i = e.getBoundingClientRect(), c = t.getBoundingClientRect();
return {
elem: {
style: n,
width: i.width,
height: i.height,
top: i.top,
bottom: i.bottom,
left: i.left,
right: i.right,
margin: ce(e, "margin", n),
border: ce(e, "border", n)
},
parent: {
style: a,
width: c.width,
height: c.height,
top: c.top,
bottom: c.bottom,
left: c.left,
right: c.right,
padding: ce(t, "padding", a),
border: ce(t, "border", a)
}
};
}
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 it(e, t) {
return e.nodeType === 1 && ` ${st(e)} `.indexOf(` ${t} `) > -1;
}
function lt(e, t) {
for (let n = e; n != null; n = n.parentNode)
if (it(n, t.excludeClass) || t.exclude.indexOf(n) > -1)
return !0;
return !1;
}
const ct = /^http:[\w\.\/]+svg$/;
function ut(e) {
return ct.test(e.namespaceURI) && e.nodeName.toLowerCase() !== "svg";
}
function dt(e) {
const t = {};
for (const n in e)
e.hasOwnProperty(n) && (t[n] = e[n]);
return t;
}
const Ue = {
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: at,
startX: 0,
startY: 0,
startScale: 1,
step: 0.3,
touchAction: "none"
};
function Ye(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 = {
...Ue,
...t
};
const n = ut(e), a = e.parentNode;
a.style.overflow = t.overflow, a.style.userSelect = "none", a.style.touchAction = t.touchAction, (t.canvas ? a : e).style.cursor = t.cursor, e.style.userSelect = "none", e.style.touchAction = t.touchAction, J(
e,
"transformOrigin",
typeof t.origin == "string" ? t.origin : n ? "0 0" : "50% 50%"
);
function i() {
a.style.overflow = "", a.style.userSelect = "", a.style.touchAction = "", a.style.cursor = "", e.style.cursor = "", e.style.userSelect = "", e.style.touchAction = "", J(e, "transformOrigin", "");
}
function c(o = {}) {
for (const s in o)
o.hasOwnProperty(s) && (t[s] = o[s]);
(o.hasOwnProperty("cursor") || o.hasOwnProperty("canvas")) && (a.style.cursor = e.style.cursor = "", (t.canvas ? a : e).style.cursor = t.cursor), o.hasOwnProperty("overflow") && (a.style.overflow = o.overflow), o.hasOwnProperty("touchAction") && (a.style.touchAction = o.touchAction, e.style.touchAction = o.touchAction);
}
let d = 0, f = 0, u = 1, R = !1;
w(t.startScale, { animate: !1, force: !0 }), setTimeout(() => {
m(t.startX, t.startY, { animate: !1, force: !0 });
});
function E(o, s, p) {
if (p.silent)
return;
const b = new CustomEvent(o, { detail: s });
e.dispatchEvent(b);
}
function C(o, s, p) {
const b = { x: d, y: f, scale: u, isSVG: n, originalEvent: p, dimsOut: {} };
typeof s.animate == "boolean" && (s.animate ? ot(e, s) : J(e, "transition", "none")), s.setTransform(e, b, s);
function l() {
const S = ue(e);
b.dimsOut = S, E(o, b, s), E("panzoomchange", b, s);
}
return s.animate ? setTimeout(() => {
l();
}, s.duration + 50) : requestAnimationFrame(() => {
l();
}), b;
}
function L(o, s, p, b) {
const l = { ...t, ...b }, S = { x: d, y: f, opts: l };
if (!l.force && (l.disablePan || l.panOnlyWhenZoomed && u === l.startScale))
return S;
if (o = parseFloat(o), s = parseFloat(s), l.disableXAxis || (S.x = (l.relative ? d : 0) + o), l.disableYAxis || (S.y = (l.relative ? f : 0) + s), l.contain) {
const h = ue(e), D = h.elem.width / u, I = h.elem.height / u, ne = D * p, oe = I * p, F = (ne - D) / 2, q = (oe - I) / 2;
if (l.contain === "inside") {
const pe = (-h.elem.margin.left - h.parent.padding.left + F) / p, fe = (h.parent.width - ne - h.parent.padding.left - h.elem.margin.left - h.parent.border.left - h.parent.border.right + F) / p;
S.x = Math.max(Math.min(S.x, fe), pe);
const ve = (-h.elem.margin.top - h.parent.padding.top + q) / p, me = (h.parent.height - oe - h.parent.padding.top - h.elem.margin.top - h.parent.border.top - h.parent.border.bottom + q) / p;
S.y = Math.max(Math.min(S.y, me), ve);
} else if (l.contain === "outside") {
const pe = (-(ne - h.parent.width) - h.parent.padding.left - h.parent.border.left - h.parent.border.right + F) / p, fe = (F - h.parent.padding.left) / p;
S.x = Math.max(Math.min(S.x, fe), pe);
const ve = (-(oe - h.parent.height) - h.parent.padding.top - h.parent.border.top - h.parent.border.bottom + q) / p, me = (q - h.parent.padding.top) / p;
S.y = Math.max(Math.min(S.y, me), ve);
}
}
return l.roundPixels && (S.x = Math.round(S.x), S.y = Math.round(S.y)), S;
}
function A(o, s) {
const p = { ...t, ...s }, b = { scale: u, opts: p };
if (!p.force && p.disableZoom)
return b;
let l = t.minScale, S = t.maxScale;
if (p.contain) {
const h = ue(e), D = h.elem.width / u, I = h.elem.height / u;
if (D > 1 && I > 1) {
const ne = h.parent.width - h.parent.border.left - h.parent.border.right, oe = h.parent.height - h.parent.border.top - h.parent.border.bottom, F = ne / D, q = oe / I;
t.contain === "inside" ? S = Math.min(S, F, q) : t.contain === "outside" && (l = Math.max(l, F, q));
}
}
return b.scale = Math.min(Math.max(o, l), S), b;
}
function m(o, s, p, b) {
const l = L(o, s, u, p);
return d !== l.x || f !== l.y ? (d = l.x, f = l.y, C("panzoompan", l.opts, b)) : { x: d, y: f, scale: u, isSVG: n, originalEvent: b };
}
function w(o, s, p) {
const b = A(o, s), l = b.opts;
if (!l.force && l.disableZoom)
return;
o = b.scale;
let S = d, h = f;
if (l.focal) {
const I = l.focal;
S = (I.x / o - I.x / u + d * o) / o, h = (I.y / o - I.y / u + f * o) / o;
}
const D = L(S, h, o, {
relative: !1,
force: !0
});
return d = D.x, f = D.y, u = o, C("panzoomzoom", l, p);
}
function B(o, s) {
const p = { ...t, animate: !0, ...s };
return w(u * Math.exp((o ? 1 : -1) * p.step), p);
}
function v(o) {
return B(!0, o);
}
function M(o) {
return B(!1, o);
}
function g(o, s, p, b) {
const l = ue(e), S = {
width: l.parent.width - l.parent.padding.left - l.parent.padding.right - l.parent.border.left - l.parent.border.right,
height: l.parent.height - l.parent.padding.top - l.parent.padding.bottom - l.parent.border.top - l.parent.border.bottom
};
let h = s.clientX - l.parent.left - l.parent.padding.left - l.parent.border.left - l.elem.margin.left, D = s.clientY - l.parent.top - l.parent.padding.top - l.parent.border.top - l.elem.margin.top;
n || (h -= l.elem.width / u / 2, D -= l.elem.height / u / 2);
const I = {
x: h / S.width * (S.width * o),
y: D / S.height * (S.height * o)
};
return w(
o,
{ ...p, animate: !1, focal: I },
b
);
}
function T(o, s) {
o.preventDefault();
const p = { ...t, ...s, animate: !1 }, b = (o.deltaY === 0 && o.deltaX ? o.deltaX : o.deltaY) < 0 ? 1 : -1, l = A(
u * Math.exp(b * p.step / 3),
p
).scale;
return g(l, o, p, o);
}
function V(o) {
const s = { ...t, animate: !0, force: !0, ...o };
u = A(s.startScale, s).scale;
const p = L(s.startX, s.startY, u, s);
return d = p.x, f = p.y, C("panzoomreset", s);
}
let W, X, y, O, k, N;
const z = [];
function x(o) {
if (lt(o.target, t))
return;
Me(z, o), R = !0, t.handleStartEvent(o), W = d, X = f, E(
"panzoomstart",
{ x: d, y: f, scale: u, isSVG: n, originalEvent: o },
t
);
const s = Be(z);
y = s.clientX, O = s.clientY, k = u, N = ge(z);
}
function Q(o) {
if (!R || W === void 0 || X === void 0 || y === void 0 || O === void 0)
return;
Me(z, o);
const s = Be(z), p = z.length > 1;
let b = u;
if (p) {
N === 0 && (N = ge(z));
const l = ge(z) - N;
b = A(l * t.step / 80 + k).scale, g(b, s, { animate: !1 }, o);
}
(!p || t.pinchAndPan) && m(
W + (s.clientX - y) / b,
X + (s.clientY - O) / b,
{
animate: !1
},
o
);
}
function G(o) {
z.length === 1 && E(
"panzoomend",
{ x: d, y: f, scale: u, isSVG: n, originalEvent: o },
t
), et(z, o), R && (R = !1, W = X = y = O = void 0);
}
let j = !1;
function re() {
j || (j = !0, we("down", t.canvas ? a : e, x), we("move", document, Q, { passive: !0 }), we("up", document, G, { passive: !0 }));
}
function r() {
j = !1, ye("down", t.canvas ? a : e, x), ye("move", document, Q), ye("up", document, G);
}
return t.noBind || re(), {
bind: re,
destroy: r,
eventNames: ae,
getPan: () => ({ x: d, y: f }),
getScale: () => u,
getOptions: () => dt(t),
handleDown: x,
handleMove: Q,
handleUp: G,
pan: m,
reset: V,
resetStyle: i,
setOptions: c,
setStyle: (o, s) => J(e, o, s),
zoom: w,
zoomIn: v,
zoomOut: M,
zoomToPoint: g,
zoomWithWheel: T
};
}
Ye.defaultOptions = Ue;
const ht = { class: "sketch-ruler" }, ft = /* @__PURE__ */ he({
__name: "index",
props: {
showRuler: { type: Boolean, default: !0 },
eyeIcon: {},
closeEyeIcon: {},
scale: { default: 1 },
rate: { default: 1 },
thick: { default: 16 },
palette: {},
width: { default: 1400 },
height: { default: 800 },
paddingRatio: { default: 0.2 },
autoCenter: { type: Boolean, default: !0 },
shadow: { default: () => ({
x: 0,
y: 0,
width: 0,
height: 0
}) },
lines: { default: () => ({
h: [],
v: []
}) },
isShowReferLine: { type: Boolean, default: !0 },
canvasWidth: { default: 700 },
canvasHeight: { default: 700 },
snapsObj: { default: () => ({
h: [],
v: []
}) },
snapThreshold: { default: 5 },
gridRatio: { default: 1 },
lockLine: { type: Boolean, default: !1 },
selfHandle: { type: Boolean, default: !1 },
showShadowText: { type: Boolean, default: !0 },
panzoomOption: {}
},
emits: ["onCornerClick", "update:scale", "zoomchange", "update:lockLine"],
setup(e, { expose: t, emit: n }) {
He((r) => ({
"89f302c6": re.value
}));
const a = e, i = n, c = U(null), d = U(0), f = U(0);
let u = 0, R = 0;
const E = U(1), C = U(a.isShowReferLine), L = U(null), A = U("defaultCursor"), m = Y(() => ({
bgColor: "#f6f7f9",
// ruler bg color
longfgColor: "#BABBBC",
// ruler longer mark color
fontColor: "#7D8694",
// ruler font color
fontShadowColor: "#106ebe",
shadowColor: "#e9f7fe",
// ruler shadow color
lineColor: "#51d6a9",
lineType: "solid",
lockLineColor: "#d4d7dc",
hoverBg: "#000",
hoverColor: "#fff",
borderColor: "#eeeeef",
...a.palette
})), w = Y(() => ({
backgroundImage: C.value ? `url(${a.eyeIcon ?? Je})` : `url(${a.closeEyeIcon ?? _e})`,
width: a.thick + "px",
height: a.thick + "px",
borderRight: `1px solid ${m.value.borderColor}`,
borderBottom: `1px solid ${m.value.borderColor}`
})), B = Y(() => ({
background: m.value.bgColor,
width: v.value + "px",
height: M.value + "px"
})), v = Y(() => a.width - a.thick), M = Y(() => a.height - a.thick), g = (r) => {
var o;
(r.ctrlKey || r.metaKey) && ((o = L.value) == null || o.zoomWithWheel(r));
}, T = (r) => {
var s;
const o = document.activeElement;
o != null && o.closest(".monaco-editor") || (o == null ? void 0 : o.tagName) === "INPUT" || (o == null ? void 0 : o.tagName) === "TEXTAREA" || (o == null ? void 0 : o.getAttribute("contenteditable")) === "true" || r.key === " " && (A.value = "grabCursor", (s = L.value) == null || s.bind(), r.preventDefault());
}, V = (r) => {
var s;
const o = document.activeElement;
o != null && o.closest(".monaco-editor") || (o == null ? void 0 : o.tagName) === "INPUT" || (o == null ? void 0 : o.tagName) === "TEXTAREA" || (o == null ? void 0 : o.getAttribute("contenteditable")) === "true" || r.key === " " && ((s = L.value) == null || s.destroy(), A.value = "defaultCursor");
};
function W(r) {
var o;
r.preventDefault(), r.stopPropagation(), (o = L.value) == null || o.bind();
}
ke(() => {
if (O(), !a.selfHandle && c.value) {
const r = c.value.parentElement;
if (!r) return;
r.addEventListener("wheel", g), document.addEventListener("keydown", T), document.addEventListener("keyup", V), r.addEventListener("touchstart", W);
}
});
const X = (r) => ({
noBind: !0,
startScale: r,
// cursor: 'default',
startX: u,
startY: R,
smoothScroll: !0,
canvas: !0,
...a.panzoomOption
}), y = (r) => {
const { scale: o, dimsOut: s } = r.detail;
if (s) {
i("update:scale", o), E.value = o;
const p = (s.parent.left - s.elem.left) / o, b = (s.parent.top - s.elem.top) / o;
d.value = p, i("zoomchange", r.detail), f.value = b;
}
}, O = () => {
if (c.value = document.querySelector(".canvasedit"), c.value) {
let r = a.scale;
a.autoCenter && (r = k()), L.value = Ye(c.value, X(r)), c.value && c.value.addEventListener("panzoomchange", y);
}
}, k = () => {
const r = v.value * (1 - a.paddingRatio) / a.canvasWidth, o = M.value * (1 - a.paddingRatio) / a.canvasHeight, s = Math.min(r, o);
return u = v.value / 2 - a.canvasWidth / 2, s < 1 ? R = (a.canvasHeight * s / 2 - a.canvasHeight / 2) / s - (a.canvasHeight * s - M.value) / s / 2 : s > 1 ? R = (a.canvasHeight * s - a.canvasHeight) / 2 / s + (M.value - a.canvasHeight * s) / s / 2 : R = 0, s;
}, N = () => {
var r;
return (r = L.value) == null ? void 0 : r.reset();
}, z = () => {
var r;
return (r = L.value) == null ? void 0 : r.zoomIn();
}, x = () => {
var r;
return (r = L.value) == null ? void 0 : r.zoomOut();
}, Q = () => {
var r;
(r = L.value) == null || r.setOptions(X(a.scale));
}, G = () => {
C.value = !C.value, i("onCornerClick", C.value);
}, j = (r) => {
i("update:lockLine", r);
}, re = Y(() => a.thick + "px");
return Z([() => a.isShowReferLine], () => {
C.value = a.isShowReferLine;
}), Z(
[() => a.canvasWidth, () => a.canvasHeight, () => a.width, () => a.height],
() => {
O();
}
), Z(
() => a.panzoomOption,
() => {
Q();
},
{ deep: !0 }
), t({
initPanzoom: O,
panzoomInstance: L,
reset: N,
zoomIn: z,
zoomOut: x,
cursorClass: A
}), (r, o) => (H(), $("div", ht, [
Te(r.$slots, "btn", {
reset: N,
zoomIn: z,
zoomOut: x
}),
ee("div", {
class: Se(["canvasedit-parent", A.value]),
style: K(B.value)
}, [
ee("div", {
class: Se(["canvasedit", A.value])
}, [
Te(r.$slots, "default")
], 2)
], 6),
_(Ae(Re, {
style: K({ marginLeft: r.thick + "px", width: v.value + "px" }),
vertical: !1,
width: r.width,
height: r.thick,
"is-show-refer-line": C.value,
thick: r.thick,
start: d.value,
"start-other": f.value,
lines: r.lines,
"select-start": r.shadow.x,
"snap-threshold": r.snapThreshold,
"snaps-obj": r.snapsObj,
"select-length": r.shadow.width,
scale: E.value,
palette: m.value,
"canvas-width": r.canvasWidth,
"show-shadow-text": r.showShadowText,
"canvas-height": r.canvasHeight,
rate: r.rate,
"grid-ratio": r.gridRatio,
"lock-line": r.lockLine,
onChangeLineState: j
}, null, 8, ["style", "width", "height", "is-show-refer-line", "thick", "start", "start-other", "lines", "select-start", "snap-threshold", "snaps-obj", "select-length", "scale", "palette", "canvas-width", "show-shadow-text", "canvas-height", "rate", "grid-ratio", "lock-line"]), [
[te, r.showRuler]
]),
_(Ae(Re, {
style: K({ marginTop: r.thick + "px", top: 0, height: M.value + "px" }),
vertical: !0,
width: r.thick,
height: r.height,
"is-show-refer-line": C.value,
thick: r.thick,
start: f.value,
"start-other": d.value,
lines: r.lines,
"select-start": r.shadow.y,
"select-length": r.shadow.height,
"snap-threshold": r.snapThreshold,
"snaps-obj": r.snapsObj,
scale: E.value,
palette: m.value,
"canvas-width": r.canvasWidth,
"canvas-height": r.canvasHeight,
"show-shadow-text": r.showShadowText,
rate: r.rate,
"grid-ratio": r.gridRatio,
"lock-line": r.lockLine,
onChangeLineState: j
}, null, 8, ["style", "width", "height", "is-show-refer-line", "thick", "start", "start-other", "lines", "select-start", "select-length", "snap-threshold", "snaps-obj", "scale", "palette", "canvas-width", "canvas-height", "show-shadow-text", "rate", "grid-ratio", "lock-line"]), [
[te, r.showRuler]
]),
_(ee("a", {
class: "corner",
style: K(w.value),
onClick: G
}, null, 4), [
[te, r.showRuler]
])
]));
}
});
export {
ft as default
};