331 lines
11 KiB
JavaScript
331 lines
11 KiB
JavaScript
"use strict";
|
|
const common_vendor = require("../../../common/vendor.js");
|
|
const common_assets = require("../../../common/assets.js");
|
|
const DEG_PER_PX = 0.5;
|
|
const _sfc_main = /* @__PURE__ */ common_vendor.defineComponent({
|
|
__name: "index",
|
|
props: {},
|
|
emits: [],
|
|
setup(__props, { emit: __emit }) {
|
|
const labels = ["开机", "静音", "对讲", "截屏", "录制", "方位", "清晰度", "分屏", "翻转", "告警"];
|
|
const count = labels.length;
|
|
const items = common_vendor.reactive(
|
|
labels.map((label, idx) => ({
|
|
label,
|
|
baseAngle: 360 / count * idx
|
|
}))
|
|
);
|
|
let restoreTimer = null;
|
|
let restoreTimer2 = null;
|
|
const currentAngle = common_vendor.ref(0);
|
|
let startAngle = 0;
|
|
const dragging = common_vendor.ref(null);
|
|
let idleTimer = null;
|
|
function armIdleFinish(handler, ms = 160) {
|
|
if (idleTimer)
|
|
clearTimeout(idleTimer);
|
|
idleTimer = setTimeout(() => {
|
|
if (dragging.value)
|
|
handler();
|
|
}, ms);
|
|
}
|
|
function clearIdle() {
|
|
if (idleTimer) {
|
|
clearTimeout(idleTimer);
|
|
idleTimer = null;
|
|
}
|
|
}
|
|
const center = common_vendor.reactive({ x: 0, y: 0 });
|
|
common_vendor.onMounted(async () => {
|
|
await common_vendor.nextTick$1();
|
|
common_vendor.index.createSelectorQuery().select(".compass-container").boundingClientRect((rect) => {
|
|
if (rect) {
|
|
center.x = rect.left + rect.width / 2;
|
|
center.y = rect.top + rect.height / 2;
|
|
}
|
|
}).exec();
|
|
});
|
|
const transitioning = common_vendor.ref(false);
|
|
const wrapperStyle = common_vendor.computed(() => ({
|
|
transform: `rotate(${currentAngle.value}deg)`,
|
|
transition: transitioning.value ? "transform 0.3s ease-out" : "none"
|
|
}));
|
|
function itemStyle(baseAngle) {
|
|
const radius = 190;
|
|
const rad = baseAngle * Math.PI / 180;
|
|
const x = radius * Math.cos(rad);
|
|
const y = radius * Math.sin(rad);
|
|
return { transform: `translate(${x}px, ${y}px)` };
|
|
}
|
|
const labelStyle = common_vendor.computed(() => ({
|
|
transform: `rotate(${-currentAngle.value}deg)`
|
|
}));
|
|
function getTouchAngle(e) {
|
|
const t = e.touches[0];
|
|
const dx = t.clientX - center.x;
|
|
const dy = t.clientY - center.y;
|
|
return Math.atan2(dy, dx) * 180 / Math.PI * 2;
|
|
}
|
|
function clearRestoreTimer() {
|
|
if (restoreTimer !== null) {
|
|
clearTimeout(restoreTimer);
|
|
restoreTimer = null;
|
|
}
|
|
}
|
|
const target = common_vendor.ref(5);
|
|
const saveindex = common_vendor.ref(-1);
|
|
function startRestoreTimer() {
|
|
clearTimeout(restoreTimer);
|
|
restoreTimer = setTimeout(() => {
|
|
if (target.value === -1) {
|
|
target.value = saveindex.value;
|
|
}
|
|
}, 300);
|
|
}
|
|
function startRestoreTimer2() {
|
|
clearTimeout(restoreTimer2);
|
|
restoreTimer2 = setTimeout(() => {
|
|
if (target2.value === -1) {
|
|
target2.value = saveindex2.value;
|
|
}
|
|
}, 300);
|
|
}
|
|
function onTouchStart(e) {
|
|
saveindex.value = target.value;
|
|
target.value = -1;
|
|
transitioning.value = false;
|
|
startAngle = getTouchAngle(e) - currentAngle.value;
|
|
dragging.value = "first";
|
|
startRestoreTimer();
|
|
}
|
|
function onTouchMove(e) {
|
|
const angle = getTouchAngle(e);
|
|
currentAngle.value = angle - startAngle;
|
|
armIdleFinish(onTouchEnd);
|
|
startRestoreTimer();
|
|
}
|
|
function getLeftmostIndex() {
|
|
let minDiff = Infinity;
|
|
let idx = 0;
|
|
items.forEach((item, i) => {
|
|
let real = (item.baseAngle + currentAngle.value) % 360;
|
|
if (real < 0)
|
|
real += 360;
|
|
const diff = Math.abs(real - 180);
|
|
if (diff < minDiff) {
|
|
minDiff = diff;
|
|
idx = i;
|
|
}
|
|
});
|
|
return idx;
|
|
}
|
|
function onTouchEnd() {
|
|
clearRestoreTimer();
|
|
const step = 360 / count;
|
|
const raw = currentAngle.value;
|
|
const nearest = Math.round(raw / step) * step;
|
|
transitioning.value = true;
|
|
currentAngle.value = nearest;
|
|
const leftIndex = getLeftmostIndex();
|
|
target.value = leftIndex;
|
|
setTimeout(() => transitioning.value = false, 300);
|
|
dragging.value = null;
|
|
}
|
|
common_vendor.onBeforeUnmount(() => {
|
|
if (restoreTimer !== null)
|
|
clearTimeout(restoreTimer);
|
|
if (restoreTimer2 !== null)
|
|
clearTimeout(restoreTimer2);
|
|
clearIdle();
|
|
});
|
|
const secondMap = {
|
|
0: [],
|
|
1: [],
|
|
2: [],
|
|
3: [],
|
|
4: [],
|
|
5: [],
|
|
6: ["超清", "流畅", "自动"],
|
|
7: ["180°全景", "四分屏", "360°全景", "全景拉伸", "原图"],
|
|
8: ["上下翻转", "关闭", "左右翻转"],
|
|
9: []
|
|
};
|
|
const items2 = common_vendor.reactive([]);
|
|
const target2 = common_vendor.ref(0);
|
|
const currentOffset2 = common_vendor.ref(0);
|
|
const step2 = common_vendor.ref(0);
|
|
const transitioning2 = common_vendor.ref(false);
|
|
const wrapperStyle2 = common_vendor.computed(() => ({
|
|
transform: `rotate(${currentOffset2.value}deg)`,
|
|
transition: transitioning2.value ? "transform 0.25s ease-out" : "none"
|
|
}));
|
|
const labelStyle2 = common_vendor.computed(() => ({
|
|
transform: `rotate(${-currentOffset2.value}deg)`
|
|
}));
|
|
function itemStyle2(baseAngle) {
|
|
const radius = 240;
|
|
const rad = baseAngle * Math.PI / 180;
|
|
const x = radius * Math.cos(rad);
|
|
const y = radius * Math.sin(rad);
|
|
return { transform: `translate(${x}px, ${y}px)` };
|
|
}
|
|
const presetAngles = [135, 157.5, 180, 202.5, 225];
|
|
function getBalancedAngles(n) {
|
|
const order = [2, 1, 3, 0, 4];
|
|
return order.slice(0, n).map((i) => presetAngles[i]);
|
|
}
|
|
const minOffset2 = common_vendor.ref(0);
|
|
const maxOffset2 = common_vendor.ref(0);
|
|
function rebuildSecondByFirstIndex(firstIdx) {
|
|
const list = (secondMap[firstIdx] || []).slice(0, 5);
|
|
const angles = getBalancedAngles(list.length);
|
|
minOffset2.value = 180 - Math.max(...angles);
|
|
maxOffset2.value = 180 - Math.min(...angles);
|
|
items2.splice(0, items2.length);
|
|
if (!list.length) {
|
|
currentOffset2.value = 0;
|
|
step2.value = 0;
|
|
target2.value = -1;
|
|
return;
|
|
}
|
|
for (let i = 0; i < list.length; i++) {
|
|
items2.push({
|
|
label: list[i],
|
|
baseAngle: angles[i]
|
|
});
|
|
}
|
|
currentOffset2.value = 0;
|
|
step2.value = 22.5;
|
|
common_vendor.nextTick$1(() => {
|
|
target2.value = getLeftmostIndex2();
|
|
});
|
|
}
|
|
function getLeftmostIndex2() {
|
|
if (!items2.length)
|
|
return -1;
|
|
let minDiff = Infinity;
|
|
let idx = 0;
|
|
items2.forEach((item, i) => {
|
|
let real = (item.baseAngle + currentOffset2.value) % 360;
|
|
if (real < 0)
|
|
real += 360;
|
|
const diff = Math.abs(real - 180);
|
|
if (diff < minDiff) {
|
|
minDiff = diff;
|
|
idx = i;
|
|
}
|
|
});
|
|
return idx;
|
|
}
|
|
common_vendor.watch(
|
|
() => target.value,
|
|
(idx) => {
|
|
if (idx >= 0)
|
|
rebuildSecondByFirstIndex(idx);
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
let startY2 = 0;
|
|
let startOffset2 = 0;
|
|
function clamp2(val) {
|
|
return Math.max(minOffset2.value, Math.min(maxOffset2.value, val));
|
|
}
|
|
const saveindex2 = common_vendor.ref(-1);
|
|
function onTouchStart2(e) {
|
|
saveindex2.value = target2.value;
|
|
const t = e.touches[0];
|
|
startY2 = t.clientY;
|
|
startOffset2 = currentOffset2.value;
|
|
transitioning2.value = false;
|
|
target2.value = -1;
|
|
dragging.value = "second";
|
|
startRestoreTimer2();
|
|
}
|
|
function onTouchMove2(e) {
|
|
if (!items2.length)
|
|
return;
|
|
const t = e.touches[0];
|
|
const dy = t.clientY - startY2;
|
|
step2.value || 1;
|
|
const raw = startOffset2 + -dy * DEG_PER_PX;
|
|
currentOffset2.value = clamp2(raw);
|
|
armIdleFinish(onTouchEnd2);
|
|
startRestoreTimer2();
|
|
}
|
|
function onTouchEnd2() {
|
|
if (!items2.length)
|
|
return;
|
|
const Δ = step2.value || 1;
|
|
const snapped = Math.round(currentOffset2.value / Δ) * Δ;
|
|
transitioning2.value = true;
|
|
currentOffset2.value = clamp2(snapped);
|
|
target2.value = getLeftmostIndex2();
|
|
setTimeout(() => transitioning2.value = false, 250);
|
|
dragging.value = null;
|
|
}
|
|
return (_ctx, _cache) => {
|
|
return common_vendor.e({
|
|
a: common_assets._imports_0$13,
|
|
b: common_assets._imports_1$11,
|
|
c: common_vendor.f(items, (item, i, i0) => {
|
|
return {
|
|
a: `/static/index/watch/Wheel/${i}${i === target.value ? 1 : 0}.png`,
|
|
b: common_vendor.t(item.label),
|
|
c: common_vendor.s(i === target.value ? {
|
|
color: "#fff"
|
|
} : {}),
|
|
d: i === target.value ? 1 : 0,
|
|
e: common_vendor.n(i === target.value ? `item-label-target` : `item-label`),
|
|
f: i,
|
|
g: common_vendor.s(itemStyle(item.baseAngle))
|
|
};
|
|
}),
|
|
d: common_assets._imports_2$6,
|
|
e: common_vendor.s(labelStyle.value),
|
|
f: common_vendor.o(onTouchStart),
|
|
g: common_vendor.o(onTouchMove),
|
|
h: common_vendor.o(onTouchEnd),
|
|
i: common_vendor.o(onTouchEnd),
|
|
j: common_vendor.s(wrapperStyle.value),
|
|
k: items2.length
|
|
}, items2.length ? {
|
|
l: common_vendor.f(items2, (item, i, i0) => {
|
|
return {
|
|
a: `/static/index/watch/Wheel/${target.value}${i}${i === target2.value ? 1 : 0}.png`,
|
|
b: common_vendor.t(item.label),
|
|
c: common_vendor.s(i === target2.value ? {
|
|
color: "#0E86EA"
|
|
} : {}),
|
|
d: common_vendor.n(i === target2.value ? `item-label-second-target` : `item-label-second`),
|
|
e: i,
|
|
f: common_vendor.s(itemStyle2(item.baseAngle))
|
|
};
|
|
}),
|
|
m: target.value !== -1,
|
|
n: common_vendor.s(labelStyle2.value),
|
|
o: common_vendor.o(onTouchStart2),
|
|
p: common_vendor.o(onTouchMove2),
|
|
q: common_vendor.o(onTouchEnd2),
|
|
r: common_vendor.o(onTouchEnd2),
|
|
s: common_vendor.s(wrapperStyle2.value),
|
|
t: target.value
|
|
} : {}, {
|
|
v: dragging.value === "first"
|
|
}, dragging.value === "first" ? {
|
|
w: common_vendor.o(onTouchMove),
|
|
x: common_vendor.o(onTouchEnd),
|
|
y: common_vendor.o(onTouchEnd)
|
|
} : {}, {
|
|
z: dragging.value === "second"
|
|
}, dragging.value === "second" ? {
|
|
A: common_vendor.o(onTouchMove2),
|
|
B: common_vendor.o(onTouchEnd2),
|
|
C: common_vendor.o(onTouchEnd2)
|
|
} : {});
|
|
};
|
|
}
|
|
});
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__scopeId", "data-v-dfacf6bf"]]);
|
|
wx.createComponent(Component);
|
|
//# sourceMappingURL=../../../../.sourcemap/mp-weixin/pages/watch/drawer/index.js.map
|