1 | import { r as registerInstance, h, g as getElement, H as Host } from './index-8809c729.js';
|
2 |
|
3 | const areaCss = "taro-movable-area-core{display:block;position:relative;width:10px;height:10px}";
|
4 |
|
5 | let MovableArea = class {
|
6 | constructor(hostRef) {
|
7 | registerInstance(this, hostRef);
|
8 |
|
9 | this.views = [];
|
10 |
|
11 | this.scaleLength = 0;
|
12 | this.viewsChanged = () => {
|
13 | this.views = [];
|
14 | const elements = this.element.querySelectorAll('taro-movable-view-core');
|
15 | Array.from(elements).forEach((element) => {
|
16 | this.views.push(element);
|
17 | });
|
18 | this.updateArea();
|
19 | };
|
20 | this.handleTouchStart = (e) => {
|
21 | const touches = e.touches;
|
22 | if (!touches || touches.length <= 1) {
|
23 | return;
|
24 | }
|
25 | const gap = {
|
26 | width: touches[1].pageX - touches[0].pageX,
|
27 | height: touches[1].pageY - touches[0].pageY
|
28 | };
|
29 | this.scaleLength = Math.sqrt(gap.width * gap.width + gap.height * gap.height);
|
30 | if (this.scaleArea) {
|
31 | return;
|
32 | }
|
33 | const find = (target, views) => {
|
34 | const loop = (e, t) => {
|
35 | if (!(e = e.parentNode)) {
|
36 | return false;
|
37 | }
|
38 | return (!(e instanceof HTMLElement) || e !== document.body) && (e === t || e === t.element || e.element === t || loop(e, t));
|
39 | };
|
40 | for (let i = 0; i < views.length; i++) {
|
41 | const view = views[i];
|
42 | if (target === view["element"] || loop(target, view)) {
|
43 | return view;
|
44 | }
|
45 | }
|
46 | };
|
47 | const touch1 = find(touches[0].target, this.views);
|
48 | const touch2 = find(touches[1].target, this.views);
|
49 | this.scaleTarget = touch1 && touch1 === touch2 ? touch1 : undefined;
|
50 | };
|
51 | this.handleTouchMove = (e) => {
|
52 | const touches = e.touches;
|
53 | if (!touches || touches.length <= 1) {
|
54 | return;
|
55 | }
|
56 | e.preventDefault();
|
57 | const gap = {
|
58 | width: touches[1].pageX - touches[0].pageX,
|
59 | height: touches[1].pageY - touches[0].pageY
|
60 | };
|
61 | if (this.scaleLength > 0) {
|
62 | this.updateScale(Math.sqrt(gap.width * gap.width + gap.height * gap.height) / this.scaleLength);
|
63 | }
|
64 | };
|
65 | this.handleTouchEnd = (e) => {
|
66 | var _a, _b;
|
67 | if ((e.touches && e.touches.length) || !e.changedTouches) {
|
68 | return;
|
69 | }
|
70 | this.scaleLength = 0;
|
71 | if (this.scaleArea) {
|
72 | this.views.forEach((element) => {
|
73 | var _a;
|
74 | (_a = element["endScale"]) === null || _a === void 0 ? void 0 : _a.call(element);
|
75 | });
|
76 | }
|
77 | else {
|
78 | (_b = (_a = this.scaleTarget) === null || _a === void 0 ? void 0 : _a["endScale"]) === null || _b === void 0 ? void 0 : _b.call(_a);
|
79 | }
|
80 | this.scaleTarget = undefined;
|
81 | };
|
82 | this.updateScale = (scale) => {
|
83 | var _a, _b;
|
84 | if (!scale || scale === 1) {
|
85 | return;
|
86 | }
|
87 | if (this.scaleArea) {
|
88 | this.views.forEach((element) => {
|
89 | var _a;
|
90 | (_a = element["setScale"]) === null || _a === void 0 ? void 0 : _a.call(element, scale);
|
91 | });
|
92 | }
|
93 | else {
|
94 | (_b = (_a = this.scaleTarget) === null || _a === void 0 ? void 0 : _a["setScale"]) === null || _b === void 0 ? void 0 : _b.call(_a, scale);
|
95 | }
|
96 | };
|
97 | this.updateArea = () => {
|
98 | const computedStyle = window.getComputedStyle(this.element);
|
99 | const clientRect = this.element.getBoundingClientRect();
|
100 | const horizontal = ["Left", "Right"].map((e) => {
|
101 | return parseFloat(computedStyle["border" + e + "Width"]) + parseFloat(computedStyle["padding" + e]);
|
102 | });
|
103 | const vertical = ["Top", "Bottom"].map((e) => {
|
104 | return parseFloat(computedStyle["border" + e + "Width"]) + parseFloat(computedStyle["padding" + e]);
|
105 | });
|
106 | this.views.forEach((element) => {
|
107 | var _a;
|
108 | (_a = element["setParent"]) === null || _a === void 0 ? void 0 : _a.call(element, {
|
109 | element: this.element,
|
110 | area: {
|
111 | height: clientRect.height - vertical[0] - vertical[1],
|
112 | width: clientRect.width - horizontal[0] - horizontal[1]
|
113 | }
|
114 | });
|
115 | });
|
116 | };
|
117 | }
|
118 | connectedCallback() {
|
119 | this.observer = new MutationObserver((mutations) => {
|
120 | mutations.forEach((mutation) => {
|
121 | var _a, _b;
|
122 | if (mutation.attributeName === "class" || mutation.attributeName === "style") {
|
123 | const offsetWidth = this.element.offsetWidth;
|
124 | const offsetHeight = this.element.offsetHeight;
|
125 | if (offsetWidth !== ((_a = this.offset) === null || _a === void 0 ? void 0 : _a.width) || offsetHeight !== ((_b = this.offset) === null || _b === void 0 ? void 0 : _b.height)) {
|
126 | this.updateArea();
|
127 | }
|
128 | this.offset = {
|
129 | width: offsetWidth,
|
130 | height: offsetHeight
|
131 | };
|
132 | }
|
133 | });
|
134 | });
|
135 | this.observer.observe(this.element, {
|
136 | attributes: true
|
137 | });
|
138 | }
|
139 | disconnectedCallback() {
|
140 | var _a;
|
141 | (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
|
142 | }
|
143 | componentDidLoad() {
|
144 | this.viewsChanged();
|
145 | }
|
146 | render() {
|
147 | return (h(Host, { onTouchStart: this.handleTouchStart, onTouchMove: this.handleTouchMove, onTouchEnd: this.handleTouchEnd }));
|
148 | }
|
149 | get element() { return getElement(this); }
|
150 | };
|
151 | MovableArea.style = areaCss;
|
152 |
|
153 | export { MovableArea as taro_movable_area_core };
|