@aiquants/drag-drop-panels 0.8.0 → 0.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +104 -79
- package/dist/DragDropLayout.d.ts.map +1 -1
- package/dist/drag-drop/ColumnControlPanel.d.ts.map +1 -1
- package/dist/drag-drop/ColumnInsertPanel.d.ts.map +1 -1
- package/dist/drag-drop/ResponsiveControl.d.ts.map +1 -1
- package/dist/index.es.js +1298 -1133
- package/dist/index.umd.js +2 -2
- package/dist/styles/drag-drop-panels.standalone.css +1 -1
- package/package.json +1 -1
- package/src/DragDropLayout.spec.tsx +68 -0
- package/src/DragDropLayout.tsx +17 -2
- package/src/drag-drop/ColumnControlPanel.tsx +5 -2
- package/src/drag-drop/ColumnInsertPanel.tsx +2 -1
- package/src/drag-drop/ResponsiveControl.tsx +2 -1
- package/src/lucide-icons.d.ts +6 -0
package/dist/index.es.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
function n(l, o, i) {
|
|
1
|
+
import qe, { forwardRef as Ie, createElement as Ee, useRef as F, useState as te, useEffect as K, useLayoutEffect as Se, useCallback as w, memo as st, useMemo as Ue, Fragment as ot } from "react";
|
|
2
|
+
var we = { exports: {} }, pe = {};
|
|
3
|
+
var We;
|
|
4
|
+
function at() {
|
|
5
|
+
if (We) return pe;
|
|
6
|
+
We = 1;
|
|
7
|
+
var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), e = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
8
|
+
function n(s, o, i) {
|
|
10
9
|
var u = null;
|
|
11
10
|
if (i !== void 0 && (u = "" + i), o.key !== void 0 && (u = "" + o.key), "key" in o) {
|
|
12
11
|
i = {};
|
|
@@ -15,176 +14,176 @@ function dt() {
|
|
|
15
14
|
} else i = o;
|
|
16
15
|
return o = i.ref, {
|
|
17
16
|
$$typeof: r,
|
|
18
|
-
type:
|
|
17
|
+
type: s,
|
|
19
18
|
key: u,
|
|
20
19
|
ref: o !== void 0 ? o : null,
|
|
21
20
|
props: i
|
|
22
21
|
};
|
|
23
22
|
}
|
|
24
|
-
return
|
|
23
|
+
return pe.Fragment = e, pe.jsx = n, pe.jsxs = n, pe;
|
|
25
24
|
}
|
|
26
25
|
var xe = {};
|
|
27
|
-
var
|
|
28
|
-
function
|
|
29
|
-
return
|
|
30
|
-
function r(
|
|
31
|
-
if (
|
|
32
|
-
if (typeof
|
|
33
|
-
return
|
|
34
|
-
if (typeof
|
|
35
|
-
switch (
|
|
36
|
-
case
|
|
26
|
+
var ze;
|
|
27
|
+
function lt() {
|
|
28
|
+
return ze || (ze = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
29
|
+
function r(a) {
|
|
30
|
+
if (a == null) return null;
|
|
31
|
+
if (typeof a == "function")
|
|
32
|
+
return a.$$typeof === C ? null : a.displayName || a.name || null;
|
|
33
|
+
if (typeof a == "string") return a;
|
|
34
|
+
switch (a) {
|
|
35
|
+
case k:
|
|
37
36
|
return "Fragment";
|
|
38
|
-
case L:
|
|
39
|
-
return "Profiler";
|
|
40
37
|
case R:
|
|
38
|
+
return "Profiler";
|
|
39
|
+
case _:
|
|
41
40
|
return "StrictMode";
|
|
42
41
|
case U:
|
|
43
42
|
return "Suspense";
|
|
44
|
-
case
|
|
43
|
+
case $:
|
|
45
44
|
return "SuspenseList";
|
|
46
|
-
case
|
|
45
|
+
case x:
|
|
47
46
|
return "Activity";
|
|
48
47
|
}
|
|
49
|
-
if (typeof
|
|
50
|
-
switch (typeof
|
|
48
|
+
if (typeof a == "object")
|
|
49
|
+
switch (typeof a.tag == "number" && console.error(
|
|
51
50
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
52
|
-
),
|
|
51
|
+
), a.$$typeof) {
|
|
53
52
|
case j:
|
|
54
53
|
return "Portal";
|
|
55
54
|
case Z:
|
|
56
|
-
return
|
|
55
|
+
return a.displayName || "Context";
|
|
57
56
|
case z:
|
|
58
|
-
return (
|
|
57
|
+
return (a._context.displayName || "Context") + ".Consumer";
|
|
59
58
|
case Y:
|
|
60
|
-
var d =
|
|
61
|
-
return
|
|
62
|
-
case
|
|
63
|
-
return d =
|
|
59
|
+
var d = a.render;
|
|
60
|
+
return a = a.displayName, a || (a = d.displayName || d.name || "", a = a !== "" ? "ForwardRef(" + a + ")" : "ForwardRef"), a;
|
|
61
|
+
case L:
|
|
62
|
+
return d = a.displayName || null, d !== null ? d : r(a.type) || "Memo";
|
|
64
63
|
case f:
|
|
65
|
-
d =
|
|
64
|
+
d = a._payload, a = a._init;
|
|
66
65
|
try {
|
|
67
|
-
return r(
|
|
66
|
+
return r(a(d));
|
|
68
67
|
} catch {
|
|
69
68
|
}
|
|
70
69
|
}
|
|
71
70
|
return null;
|
|
72
71
|
}
|
|
73
|
-
function
|
|
74
|
-
return "" +
|
|
72
|
+
function e(a) {
|
|
73
|
+
return "" + a;
|
|
75
74
|
}
|
|
76
|
-
function n(
|
|
75
|
+
function n(a) {
|
|
77
76
|
try {
|
|
78
|
-
|
|
77
|
+
e(a);
|
|
79
78
|
var d = !1;
|
|
80
79
|
} catch {
|
|
81
80
|
d = !0;
|
|
82
81
|
}
|
|
83
82
|
if (d) {
|
|
84
83
|
d = console;
|
|
85
|
-
var
|
|
86
|
-
return
|
|
84
|
+
var S = d.error, X = typeof Symbol == "function" && Symbol.toStringTag && a[Symbol.toStringTag] || a.constructor.name || "Object";
|
|
85
|
+
return S.call(
|
|
87
86
|
d,
|
|
88
87
|
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
89
88
|
X
|
|
90
|
-
),
|
|
89
|
+
), e(a);
|
|
91
90
|
}
|
|
92
91
|
}
|
|
93
|
-
function
|
|
94
|
-
if (
|
|
95
|
-
if (typeof
|
|
92
|
+
function s(a) {
|
|
93
|
+
if (a === k) return "<>";
|
|
94
|
+
if (typeof a == "object" && a !== null && a.$$typeof === f)
|
|
96
95
|
return "<...>";
|
|
97
96
|
try {
|
|
98
|
-
var d = r(
|
|
97
|
+
var d = r(a);
|
|
99
98
|
return d ? "<" + d + ">" : "<...>";
|
|
100
99
|
} catch {
|
|
101
100
|
return "<...>";
|
|
102
101
|
}
|
|
103
102
|
}
|
|
104
103
|
function o() {
|
|
105
|
-
var
|
|
106
|
-
return
|
|
104
|
+
var a = W.A;
|
|
105
|
+
return a === null ? null : a.getOwner();
|
|
107
106
|
}
|
|
108
107
|
function i() {
|
|
109
108
|
return Error("react-stack-top-frame");
|
|
110
109
|
}
|
|
111
|
-
function u(
|
|
112
|
-
if (
|
|
113
|
-
var d = Object.getOwnPropertyDescriptor(
|
|
110
|
+
function u(a) {
|
|
111
|
+
if (p.call(a, "key")) {
|
|
112
|
+
var d = Object.getOwnPropertyDescriptor(a, "key").get;
|
|
114
113
|
if (d && d.isReactWarning) return !1;
|
|
115
114
|
}
|
|
116
|
-
return
|
|
115
|
+
return a.key !== void 0;
|
|
117
116
|
}
|
|
118
|
-
function c(
|
|
119
|
-
function
|
|
120
|
-
|
|
117
|
+
function c(a, d) {
|
|
118
|
+
function S() {
|
|
119
|
+
v || (v = !0, console.error(
|
|
121
120
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
122
121
|
d
|
|
123
122
|
));
|
|
124
123
|
}
|
|
125
|
-
|
|
126
|
-
get:
|
|
124
|
+
S.isReactWarning = !0, Object.defineProperty(a, "key", {
|
|
125
|
+
get: S,
|
|
127
126
|
configurable: !0
|
|
128
127
|
});
|
|
129
128
|
}
|
|
130
129
|
function h() {
|
|
131
|
-
var
|
|
132
|
-
return
|
|
130
|
+
var a = r(this.type);
|
|
131
|
+
return D[a] || (D[a] = !0, console.error(
|
|
133
132
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
134
|
-
)),
|
|
133
|
+
)), a = this.props.ref, a !== void 0 ? a : null;
|
|
135
134
|
}
|
|
136
|
-
function
|
|
137
|
-
var
|
|
138
|
-
return
|
|
139
|
-
$$typeof:
|
|
140
|
-
type:
|
|
135
|
+
function N(a, d, S, X, G, Q) {
|
|
136
|
+
var V = S.ref;
|
|
137
|
+
return a = {
|
|
138
|
+
$$typeof: l,
|
|
139
|
+
type: a,
|
|
141
140
|
key: d,
|
|
142
|
-
props:
|
|
141
|
+
props: S,
|
|
143
142
|
_owner: X
|
|
144
|
-
}, (
|
|
143
|
+
}, (V !== void 0 ? V : null) !== null ? Object.defineProperty(a, "ref", {
|
|
145
144
|
enumerable: !1,
|
|
146
145
|
get: h
|
|
147
|
-
}) : Object.defineProperty(
|
|
146
|
+
}) : Object.defineProperty(a, "ref", { enumerable: !1, value: null }), a._store = {}, Object.defineProperty(a._store, "validated", {
|
|
148
147
|
configurable: !1,
|
|
149
148
|
enumerable: !1,
|
|
150
149
|
writable: !0,
|
|
151
150
|
value: 0
|
|
152
|
-
}), Object.defineProperty(
|
|
151
|
+
}), Object.defineProperty(a, "_debugInfo", {
|
|
153
152
|
configurable: !1,
|
|
154
153
|
enumerable: !1,
|
|
155
154
|
writable: !0,
|
|
156
155
|
value: null
|
|
157
|
-
}), Object.defineProperty(
|
|
156
|
+
}), Object.defineProperty(a, "_debugStack", {
|
|
158
157
|
configurable: !1,
|
|
159
158
|
enumerable: !1,
|
|
160
159
|
writable: !0,
|
|
161
160
|
value: G
|
|
162
|
-
}), Object.defineProperty(
|
|
161
|
+
}), Object.defineProperty(a, "_debugTask", {
|
|
163
162
|
configurable: !1,
|
|
164
163
|
enumerable: !1,
|
|
165
164
|
writable: !0,
|
|
166
165
|
value: Q
|
|
167
|
-
}), Object.freeze && (Object.freeze(
|
|
166
|
+
}), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
|
|
168
167
|
}
|
|
169
|
-
function
|
|
170
|
-
var
|
|
171
|
-
if (
|
|
168
|
+
function b(a, d, S, X, G, Q) {
|
|
169
|
+
var V = d.children;
|
|
170
|
+
if (V !== void 0)
|
|
172
171
|
if (X)
|
|
173
|
-
if (
|
|
174
|
-
for (X = 0; X <
|
|
175
|
-
|
|
176
|
-
Object.freeze && Object.freeze(
|
|
172
|
+
if (g(V)) {
|
|
173
|
+
for (X = 0; X < V.length; X++)
|
|
174
|
+
M(V[X]);
|
|
175
|
+
Object.freeze && Object.freeze(V);
|
|
177
176
|
} else
|
|
178
177
|
console.error(
|
|
179
178
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
180
179
|
);
|
|
181
|
-
else
|
|
182
|
-
if (
|
|
183
|
-
|
|
180
|
+
else M(V);
|
|
181
|
+
if (p.call(d, "key")) {
|
|
182
|
+
V = r(a);
|
|
184
183
|
var re = Object.keys(d).filter(function(se) {
|
|
185
184
|
return se !== "key";
|
|
186
185
|
});
|
|
187
|
-
X = 0 < re.length ? "{key: someKey, " + re.join(": ..., ") + ": ...}" : "{key: someKey}", H[
|
|
186
|
+
X = 0 < re.length ? "{key: someKey, " + re.join(": ..., ") + ": ...}" : "{key: someKey}", H[V + X] || (re = 0 < re.length ? "{" + re.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
188
187
|
`A props object containing a "key" prop is being spread into JSX:
|
|
189
188
|
let props = %s;
|
|
190
189
|
<%s {...props} />
|
|
@@ -192,83 +191,215 @@ React keys must be passed directly to JSX without using spread:
|
|
|
192
191
|
let props = %s;
|
|
193
192
|
<%s key={someKey} {...props} />`,
|
|
194
193
|
X,
|
|
195
|
-
|
|
194
|
+
V,
|
|
196
195
|
re,
|
|
197
|
-
|
|
198
|
-
), H[
|
|
196
|
+
V
|
|
197
|
+
), H[V + X] = !0);
|
|
199
198
|
}
|
|
200
|
-
if (
|
|
201
|
-
|
|
202
|
-
for (var
|
|
203
|
-
|
|
204
|
-
} else
|
|
205
|
-
return
|
|
206
|
-
|
|
207
|
-
typeof
|
|
208
|
-
),
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
199
|
+
if (V = null, S !== void 0 && (n(S), V = "" + S), u(d) && (n(d.key), V = "" + d.key), "key" in d) {
|
|
200
|
+
S = {};
|
|
201
|
+
for (var ce in d)
|
|
202
|
+
ce !== "key" && (S[ce] = d[ce]);
|
|
203
|
+
} else S = d;
|
|
204
|
+
return V && c(
|
|
205
|
+
S,
|
|
206
|
+
typeof a == "function" ? a.displayName || a.name || "Unknown" : a
|
|
207
|
+
), N(
|
|
208
|
+
a,
|
|
209
|
+
V,
|
|
210
|
+
S,
|
|
212
211
|
o(),
|
|
213
212
|
G,
|
|
214
213
|
Q
|
|
215
214
|
);
|
|
216
215
|
}
|
|
217
|
-
function
|
|
218
|
-
|
|
216
|
+
function M(a) {
|
|
217
|
+
T(a) ? a._store && (a._store.validated = 1) : typeof a == "object" && a !== null && a.$$typeof === f && (a._payload.status === "fulfilled" ? T(a._payload.value) && a._payload.value._store && (a._payload.value._store.validated = 1) : a._store && (a._store.validated = 1));
|
|
219
218
|
}
|
|
220
|
-
function
|
|
221
|
-
return typeof
|
|
219
|
+
function T(a) {
|
|
220
|
+
return typeof a == "object" && a !== null && a.$$typeof === l;
|
|
222
221
|
}
|
|
223
|
-
var y =
|
|
222
|
+
var y = qe, l = /* @__PURE__ */ Symbol.for("react.transitional.element"), j = /* @__PURE__ */ Symbol.for("react.portal"), k = /* @__PURE__ */ Symbol.for("react.fragment"), _ = /* @__PURE__ */ Symbol.for("react.strict_mode"), R = /* @__PURE__ */ Symbol.for("react.profiler"), z = /* @__PURE__ */ Symbol.for("react.consumer"), Z = /* @__PURE__ */ Symbol.for("react.context"), Y = /* @__PURE__ */ Symbol.for("react.forward_ref"), U = /* @__PURE__ */ Symbol.for("react.suspense"), $ = /* @__PURE__ */ Symbol.for("react.suspense_list"), L = /* @__PURE__ */ Symbol.for("react.memo"), f = /* @__PURE__ */ Symbol.for("react.lazy"), x = /* @__PURE__ */ Symbol.for("react.activity"), C = /* @__PURE__ */ Symbol.for("react.client.reference"), W = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, p = Object.prototype.hasOwnProperty, g = Array.isArray, m = console.createTask ? console.createTask : function() {
|
|
224
223
|
return null;
|
|
225
224
|
};
|
|
226
225
|
y = {
|
|
227
|
-
react_stack_bottom_frame: function(
|
|
228
|
-
return
|
|
226
|
+
react_stack_bottom_frame: function(a) {
|
|
227
|
+
return a();
|
|
229
228
|
}
|
|
230
229
|
};
|
|
231
|
-
var
|
|
230
|
+
var v, D = {}, A = y.react_stack_bottom_frame.bind(
|
|
232
231
|
y,
|
|
233
232
|
i
|
|
234
|
-
)(),
|
|
235
|
-
xe.Fragment =
|
|
233
|
+
)(), O = m(s(i)), H = {};
|
|
234
|
+
xe.Fragment = k, xe.jsx = function(a, d, S) {
|
|
236
235
|
var X = 1e4 > W.recentlyCreatedOwnerStacks++;
|
|
237
|
-
return
|
|
238
|
-
|
|
236
|
+
return b(
|
|
237
|
+
a,
|
|
239
238
|
d,
|
|
240
|
-
|
|
239
|
+
S,
|
|
241
240
|
!1,
|
|
242
|
-
X ? Error("react-stack-top-frame") :
|
|
243
|
-
X ? m(
|
|
241
|
+
X ? Error("react-stack-top-frame") : A,
|
|
242
|
+
X ? m(s(a)) : O
|
|
244
243
|
);
|
|
245
|
-
}, xe.jsxs = function(
|
|
244
|
+
}, xe.jsxs = function(a, d, S) {
|
|
246
245
|
var X = 1e4 > W.recentlyCreatedOwnerStacks++;
|
|
247
|
-
return
|
|
248
|
-
|
|
246
|
+
return b(
|
|
247
|
+
a,
|
|
249
248
|
d,
|
|
250
|
-
|
|
249
|
+
S,
|
|
251
250
|
!0,
|
|
252
|
-
X ? Error("react-stack-top-frame") :
|
|
253
|
-
X ? m(
|
|
251
|
+
X ? Error("react-stack-top-frame") : A,
|
|
252
|
+
X ? m(s(a)) : O
|
|
254
253
|
);
|
|
255
254
|
};
|
|
256
255
|
})()), xe;
|
|
257
256
|
}
|
|
258
|
-
var
|
|
259
|
-
function
|
|
260
|
-
return
|
|
257
|
+
var Ye;
|
|
258
|
+
function it() {
|
|
259
|
+
return Ye || (Ye = 1, process.env.NODE_ENV === "production" ? we.exports = at() : we.exports = lt()), we.exports;
|
|
261
260
|
}
|
|
262
|
-
var
|
|
263
|
-
const
|
|
261
|
+
var t = it();
|
|
262
|
+
const ct = (r) => r.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), ut = (r) => r.replace(
|
|
263
|
+
/^([A-Z])|[\s-_]+(\w)/g,
|
|
264
|
+
(e, n, s) => s ? s.toUpperCase() : n.toLowerCase()
|
|
265
|
+
), Fe = (r) => {
|
|
266
|
+
const e = ut(r);
|
|
267
|
+
return e.charAt(0).toUpperCase() + e.slice(1);
|
|
268
|
+
}, Be = (...r) => r.filter((e, n, s) => !!e && e.trim() !== "" && s.indexOf(e) === n).join(" ").trim(), dt = (r) => {
|
|
269
|
+
for (const e in r)
|
|
270
|
+
if (e.startsWith("aria-") || e === "role" || e === "title")
|
|
271
|
+
return !0;
|
|
272
|
+
};
|
|
273
|
+
var ht = {
|
|
274
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
275
|
+
width: 24,
|
|
276
|
+
height: 24,
|
|
277
|
+
viewBox: "0 0 24 24",
|
|
278
|
+
fill: "none",
|
|
279
|
+
stroke: "currentColor",
|
|
280
|
+
strokeWidth: 2,
|
|
281
|
+
strokeLinecap: "round",
|
|
282
|
+
strokeLinejoin: "round"
|
|
283
|
+
};
|
|
284
|
+
const mt = Ie(
|
|
285
|
+
({
|
|
286
|
+
color: r = "currentColor",
|
|
287
|
+
size: e = 24,
|
|
288
|
+
strokeWidth: n = 2,
|
|
289
|
+
absoluteStrokeWidth: s,
|
|
290
|
+
className: o = "",
|
|
291
|
+
children: i,
|
|
292
|
+
iconNode: u,
|
|
293
|
+
...c
|
|
294
|
+
}, h) => Ee(
|
|
295
|
+
"svg",
|
|
296
|
+
{
|
|
297
|
+
ref: h,
|
|
298
|
+
...ht,
|
|
299
|
+
width: e,
|
|
300
|
+
height: e,
|
|
301
|
+
stroke: r,
|
|
302
|
+
strokeWidth: s ? Number(n) * 24 / Number(e) : n,
|
|
303
|
+
className: Be("lucide", o),
|
|
304
|
+
...!i && !dt(c) && { "aria-hidden": "true" },
|
|
305
|
+
...c
|
|
306
|
+
},
|
|
307
|
+
[
|
|
308
|
+
...u.map(([N, b]) => Ee(N, b)),
|
|
309
|
+
...Array.isArray(i) ? i : [i]
|
|
310
|
+
]
|
|
311
|
+
)
|
|
312
|
+
);
|
|
313
|
+
const oe = (r, e) => {
|
|
314
|
+
const n = Ie(
|
|
315
|
+
({ className: s, ...o }, i) => Ee(mt, {
|
|
316
|
+
ref: i,
|
|
317
|
+
iconNode: e,
|
|
318
|
+
className: Be(
|
|
319
|
+
`lucide-${ct(Fe(r))}`,
|
|
320
|
+
`lucide-${r}`,
|
|
321
|
+
s
|
|
322
|
+
),
|
|
323
|
+
...o
|
|
324
|
+
})
|
|
325
|
+
);
|
|
326
|
+
return n.displayName = Fe(r), n;
|
|
327
|
+
};
|
|
328
|
+
const ft = [
|
|
329
|
+
[
|
|
330
|
+
"path",
|
|
331
|
+
{
|
|
332
|
+
d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0",
|
|
333
|
+
key: "1nclc0"
|
|
334
|
+
}
|
|
335
|
+
],
|
|
336
|
+
["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
|
|
337
|
+
], pt = oe("eye", ft);
|
|
338
|
+
const xt = [
|
|
339
|
+
[
|
|
340
|
+
"path",
|
|
341
|
+
{
|
|
342
|
+
d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49",
|
|
343
|
+
key: "ct8e1f"
|
|
344
|
+
}
|
|
345
|
+
],
|
|
346
|
+
["path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242", key: "151rxh" }],
|
|
347
|
+
[
|
|
348
|
+
"path",
|
|
349
|
+
{
|
|
350
|
+
d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143",
|
|
351
|
+
key: "13bj9a"
|
|
352
|
+
}
|
|
353
|
+
],
|
|
354
|
+
["path", { d: "m2 2 20 20", key: "1ooewy" }]
|
|
355
|
+
], Xe = oe("eye-off", xt);
|
|
356
|
+
const gt = [
|
|
357
|
+
["path", { d: "M15 3h6v6", key: "1q9fwt" }],
|
|
358
|
+
["path", { d: "m21 3-7 7", key: "1l2asr" }],
|
|
359
|
+
["path", { d: "m3 21 7-7", key: "tjx5ai" }],
|
|
360
|
+
["path", { d: "M9 21H3v-6", key: "wtvkvv" }]
|
|
361
|
+
], bt = oe("maximize-2", gt);
|
|
362
|
+
const vt = [
|
|
363
|
+
["path", { d: "m14 10 7-7", key: "oa77jy" }],
|
|
364
|
+
["path", { d: "M20 10h-6V4", key: "mjg0md" }],
|
|
365
|
+
["path", { d: "m3 21 7-7", key: "tjx5ai" }],
|
|
366
|
+
["path", { d: "M4 14h6v6", key: "rmj7iw" }]
|
|
367
|
+
], yt = oe("minimize-2", vt);
|
|
368
|
+
const wt = [
|
|
369
|
+
["path", { d: "M12.586 12.586 19 19", key: "ea5xo7" }],
|
|
370
|
+
[
|
|
371
|
+
"path",
|
|
372
|
+
{
|
|
373
|
+
d: "M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z",
|
|
374
|
+
key: "277e5u"
|
|
375
|
+
}
|
|
376
|
+
]
|
|
377
|
+
], jt = oe("mouse-pointer", wt);
|
|
378
|
+
const Pt = [
|
|
379
|
+
["path", { d: "M14 4.1 12 6", key: "ita8i4" }],
|
|
380
|
+
["path", { d: "m5.1 8-2.9-.8", key: "1go3kf" }],
|
|
381
|
+
["path", { d: "m6 12-1.9 2", key: "mnht97" }],
|
|
382
|
+
["path", { d: "M7.2 2.2 8 5.1", key: "1cfko1" }],
|
|
383
|
+
[
|
|
384
|
+
"path",
|
|
385
|
+
{
|
|
386
|
+
d: "M9.037 9.69a.498.498 0 0 1 .653-.653l11 4.5a.5.5 0 0 1-.074.949l-4.349 1.041a1 1 0 0 0-.74.739l-1.04 4.35a.5.5 0 0 1-.95.074z",
|
|
387
|
+
key: "s0h3yz"
|
|
388
|
+
}
|
|
389
|
+
]
|
|
390
|
+
], kt = oe("mouse-pointer-click", Pt);
|
|
391
|
+
const Nt = [
|
|
392
|
+
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
393
|
+
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
394
|
+
], Ve = oe("x", Nt), le = class le {
|
|
264
395
|
/**
|
|
265
396
|
* @constructor
|
|
266
397
|
* @param {LogLevel} [level=LogLevel.WARN] - The minimum log level to output.
|
|
267
398
|
* @param {string} [prefix="[drag-drop-panels]"] - The prefix to add to all log messages.
|
|
268
399
|
* @param {ILogger} [impl=console] - The implementation to use for logging.
|
|
269
400
|
*/
|
|
270
|
-
constructor(
|
|
271
|
-
this.level =
|
|
401
|
+
constructor(e = 2, n = "[drag-drop-panels]", s = console) {
|
|
402
|
+
this.level = e, this.prefix = n, this.impl = s;
|
|
272
403
|
}
|
|
273
404
|
/**
|
|
274
405
|
* @method setLevel
|
|
@@ -276,8 +407,8 @@ const le = class le {
|
|
|
276
407
|
* @description 静的インスタンスの現在のログレベルを更新します。
|
|
277
408
|
* @param {LogLevel} level - The new log level.
|
|
278
409
|
*/
|
|
279
|
-
static setLevel(
|
|
280
|
-
le.instance.setLevel(
|
|
410
|
+
static setLevel(e) {
|
|
411
|
+
le.instance.setLevel(e);
|
|
281
412
|
}
|
|
282
413
|
/**
|
|
283
414
|
* @method setLevel
|
|
@@ -285,8 +416,8 @@ const le = class le {
|
|
|
285
416
|
* @description 現在のログレベルを更新します。
|
|
286
417
|
* @param {LogLevel} level - The new log level.
|
|
287
418
|
*/
|
|
288
|
-
setLevel(
|
|
289
|
-
this.level =
|
|
419
|
+
setLevel(e) {
|
|
420
|
+
this.level = e;
|
|
290
421
|
}
|
|
291
422
|
/**
|
|
292
423
|
* @method setImplementation
|
|
@@ -294,8 +425,8 @@ const le = class le {
|
|
|
294
425
|
* @description 静的インスタンスのロガーの実装を更新します。
|
|
295
426
|
* @param {ILogger} impl - The new logger implementation.
|
|
296
427
|
*/
|
|
297
|
-
static setImplementation(
|
|
298
|
-
le.instance.setImplementation(
|
|
428
|
+
static setImplementation(e) {
|
|
429
|
+
le.instance.setImplementation(e);
|
|
299
430
|
}
|
|
300
431
|
/**
|
|
301
432
|
* @method setImplementation
|
|
@@ -303,8 +434,8 @@ const le = class le {
|
|
|
303
434
|
* @description ロガーの実装を更新します。
|
|
304
435
|
* @param {ILogger} impl - The new logger implementation.
|
|
305
436
|
*/
|
|
306
|
-
setImplementation(
|
|
307
|
-
this.impl =
|
|
437
|
+
setImplementation(e) {
|
|
438
|
+
this.impl = e;
|
|
308
439
|
}
|
|
309
440
|
/**
|
|
310
441
|
* @method setPrefix
|
|
@@ -312,8 +443,8 @@ const le = class le {
|
|
|
312
443
|
* @description 静的インスタンスのログのプレフィックスを更新します。
|
|
313
444
|
* @param {string} prefix - The new prefix.
|
|
314
445
|
*/
|
|
315
|
-
static setPrefix(
|
|
316
|
-
le.instance.setPrefix(
|
|
446
|
+
static setPrefix(e) {
|
|
447
|
+
le.instance.setPrefix(e);
|
|
317
448
|
}
|
|
318
449
|
/**
|
|
319
450
|
* @method setPrefix
|
|
@@ -321,67 +452,67 @@ const le = class le {
|
|
|
321
452
|
* @description ログのプレフィックスを更新します。
|
|
322
453
|
* @param {string} prefix - The new prefix.
|
|
323
454
|
*/
|
|
324
|
-
setPrefix(
|
|
325
|
-
this.prefix =
|
|
455
|
+
setPrefix(e) {
|
|
456
|
+
this.prefix = e;
|
|
326
457
|
}
|
|
327
|
-
formatMessage(
|
|
328
|
-
return typeof
|
|
458
|
+
formatMessage(e) {
|
|
459
|
+
return typeof e == "string" ? [`${this.prefix} ${e}`] : [this.prefix, e];
|
|
329
460
|
}
|
|
330
|
-
static debug(
|
|
331
|
-
le.instance.debug(
|
|
461
|
+
static debug(e, ...n) {
|
|
462
|
+
le.instance.debug(e, ...n);
|
|
332
463
|
}
|
|
333
|
-
debug(
|
|
334
|
-
this.level <= 0 && this.impl.debug(...this.formatMessage(
|
|
464
|
+
debug(e, ...n) {
|
|
465
|
+
this.level <= 0 && this.impl.debug(...this.formatMessage(e), ...n);
|
|
335
466
|
}
|
|
336
|
-
static info(
|
|
337
|
-
le.instance.info(
|
|
467
|
+
static info(e, ...n) {
|
|
468
|
+
le.instance.info(e, ...n);
|
|
338
469
|
}
|
|
339
|
-
info(
|
|
340
|
-
this.level <= 1 && this.impl.info(...this.formatMessage(
|
|
470
|
+
info(e, ...n) {
|
|
471
|
+
this.level <= 1 && this.impl.info(...this.formatMessage(e), ...n);
|
|
341
472
|
}
|
|
342
|
-
static warn(
|
|
343
|
-
le.instance.warn(
|
|
473
|
+
static warn(e, ...n) {
|
|
474
|
+
le.instance.warn(e, ...n);
|
|
344
475
|
}
|
|
345
|
-
warn(
|
|
346
|
-
this.level <= 2 && this.impl.warn(...this.formatMessage(
|
|
476
|
+
warn(e, ...n) {
|
|
477
|
+
this.level <= 2 && this.impl.warn(...this.formatMessage(e), ...n);
|
|
347
478
|
}
|
|
348
|
-
static error(
|
|
349
|
-
le.instance.error(
|
|
479
|
+
static error(e, ...n) {
|
|
480
|
+
le.instance.error(e, ...n);
|
|
350
481
|
}
|
|
351
|
-
error(
|
|
352
|
-
this.level <= 3 && this.impl.error(...this.formatMessage(
|
|
482
|
+
error(e, ...n) {
|
|
483
|
+
this.level <= 3 && this.impl.error(...this.formatMessage(e), ...n);
|
|
353
484
|
}
|
|
354
485
|
};
|
|
355
486
|
le.instance = new le(2, "[drag-drop-panels]");
|
|
356
|
-
let
|
|
357
|
-
const
|
|
487
|
+
let Ce = le;
|
|
488
|
+
const Dt = ({ config: r, panelId: e, sizeInfo: n, onSizeInfoClick: s }) => r.showPanelSizes && n ? (
|
|
358
489
|
// biome-ignore lint/a11y/noStaticElementInteractions: クリックイベントを持つ静的要素。デバッグ目的のため、インタラクティブ性は限定的。
|
|
359
490
|
// biome-ignore lint/a11y/useKeyWithClickEvents: キーボード操作はデバッグ機能では優先度が低い。
|
|
360
|
-
/* @__PURE__ */
|
|
491
|
+
/* @__PURE__ */ t.jsxs(
|
|
361
492
|
"div",
|
|
362
493
|
{
|
|
363
494
|
className: "absolute top-1 right-24 z-10 cursor-default rounded-md bg-red-500/90 px-2 py-1 font-mono text-white text-xs leading-tight shadow-lg",
|
|
364
|
-
onClick:
|
|
365
|
-
onMouseDown:
|
|
366
|
-
onTouchStart: (o) => o instanceof TouchEvent &&
|
|
367
|
-
onDragStart:
|
|
495
|
+
onClick: s,
|
|
496
|
+
onMouseDown: s,
|
|
497
|
+
onTouchStart: (o) => o instanceof TouchEvent && s(o),
|
|
498
|
+
onDragStart: s,
|
|
368
499
|
children: [
|
|
369
|
-
/* @__PURE__ */
|
|
500
|
+
/* @__PURE__ */ t.jsxs("div", { className: "text-[10px] opacity-80", children: [
|
|
370
501
|
"ID:",
|
|
371
|
-
|
|
502
|
+
e
|
|
372
503
|
] }),
|
|
373
|
-
/* @__PURE__ */
|
|
504
|
+
/* @__PURE__ */ t.jsxs("div", { children: [
|
|
374
505
|
n.width,
|
|
375
506
|
"×",
|
|
376
507
|
n.height
|
|
377
508
|
] }),
|
|
378
|
-
/* @__PURE__ */
|
|
509
|
+
/* @__PURE__ */ t.jsxs("div", { children: [
|
|
379
510
|
"X:",
|
|
380
511
|
n.x,
|
|
381
512
|
" Y:",
|
|
382
513
|
n.y
|
|
383
514
|
] }),
|
|
384
|
-
/* @__PURE__ */
|
|
515
|
+
/* @__PURE__ */ t.jsxs("div", { className: "text-[10px] opacity-80", children: [
|
|
385
516
|
"min:",
|
|
386
517
|
n.minHeight,
|
|
387
518
|
" max:",
|
|
@@ -390,111 +521,111 @@ const ft = ({ config: r, panelId: t, sizeInfo: n, onSizeInfoClick: l }) => r.sho
|
|
|
390
521
|
]
|
|
391
522
|
}
|
|
392
523
|
)
|
|
393
|
-
) : null, E = (r,
|
|
394
|
-
(r.logLevel ?? 0) >=
|
|
395
|
-
},
|
|
396
|
-
const
|
|
524
|
+
) : null, E = (r, e, ...n) => {
|
|
525
|
+
(r.logLevel ?? 0) >= e && Ce.info(...n);
|
|
526
|
+
}, Ze = qe.memo(({ index: r, columnIndex: e, isDragging: n, dragOverPosition: s, originalPosition: o, onDragEnter: i, onDragLeave: u, config: c, customDrag: h }) => {
|
|
527
|
+
const N = o && o.columnIndex === e && (o.panelIndex === r || o.panelIndex + 1 === r), b = !N && s?.columnIndex === e && s?.insertIndex === r, M = F(null), [T, y] = te(null), l = n || (h?.isActive ?? !1);
|
|
397
528
|
return K(() => {
|
|
398
|
-
if (
|
|
399
|
-
const j =
|
|
529
|
+
if (M.current) {
|
|
530
|
+
const j = M.current.getBoundingClientRect(), k = {
|
|
400
531
|
width: Math.round(j.width),
|
|
401
532
|
height: Math.round(j.height),
|
|
402
533
|
x: Math.round(j.left),
|
|
403
534
|
y: Math.round(j.top)
|
|
404
535
|
};
|
|
405
|
-
y(
|
|
406
|
-
size: `${
|
|
407
|
-
position: `(${
|
|
408
|
-
bottomRight: `(${
|
|
409
|
-
center: `(${
|
|
536
|
+
y(k), b && E(c, 1, `🎯 アクティブプレースホルダー ${r}-${e}:`, {
|
|
537
|
+
size: `${k.width}×${k.height}`,
|
|
538
|
+
position: `(${k.x}, ${k.y})`,
|
|
539
|
+
bottomRight: `(${k.x + k.width}, ${k.y + k.height})`,
|
|
540
|
+
center: `(${k.x + k.width / 2}, ${k.y + k.height / 2})`
|
|
410
541
|
});
|
|
411
542
|
}
|
|
412
|
-
}, [
|
|
413
|
-
/* @__PURE__ */
|
|
543
|
+
}, [b, r, e, c]), E(c, 2, `プレースホルダー${r}-${e}: 表示中`, { isHighlighted: b, isDragging: n, dragOverPosition: s, shouldShow: l }), // biome-ignore lint/a11y/noStaticElementInteractions: ドラッグイベントを処理するための対話的な要素。デバッグ目的のため、キーボード操作は必須ではない。
|
|
544
|
+
/* @__PURE__ */ t.jsxs(
|
|
414
545
|
"div",
|
|
415
546
|
{
|
|
416
|
-
ref:
|
|
547
|
+
ref: M,
|
|
417
548
|
"data-placeholder-index": r,
|
|
418
|
-
"data-placeholder-column":
|
|
419
|
-
onDragEnter: () => i(
|
|
420
|
-
onDragLeave: (j) => u(j,
|
|
421
|
-
className: `relative flex w-full items-center justify-center transition-all duration-0 ${
|
|
549
|
+
"data-placeholder-column": e,
|
|
550
|
+
onDragEnter: () => i(e, r),
|
|
551
|
+
onDragLeave: (j) => u(j, e, r),
|
|
552
|
+
className: `relative flex w-full items-center justify-center transition-all duration-0 ${N ? "pointer-events-none h-0 overflow-hidden opacity-0" : l ? b ? "my-2 scale-[1.02] rounded-xl border-4 border-sky-500 border-dashed bg-sky-200 px-4 py-6 shadow-lg ring-2 ring-sky-400 ring-opacity-50" : "my-2 rounded-xl border-2 border-sky-300 border-dashed bg-sky-50/70 px-2 py-4 opacity-80" : "pointer-events-none h-0 overflow-hidden opacity-0"}`,
|
|
422
553
|
children: [
|
|
423
|
-
!
|
|
424
|
-
/* @__PURE__ */
|
|
425
|
-
|
|
554
|
+
!N && l && c.showPlaceholderInfo && T && /* @__PURE__ */ t.jsxs("div", { className: "absolute top-1 right-1 z-10 rounded-md bg-blue-500/90 px-2 py-1 font-mono text-white text-xs leading-tight shadow-lg", children: [
|
|
555
|
+
/* @__PURE__ */ t.jsxs("div", { children: [
|
|
556
|
+
T.width,
|
|
426
557
|
"×",
|
|
427
|
-
|
|
558
|
+
T.height
|
|
428
559
|
] }),
|
|
429
|
-
/* @__PURE__ */
|
|
560
|
+
/* @__PURE__ */ t.jsxs("div", { children: [
|
|
430
561
|
"X:",
|
|
431
|
-
|
|
562
|
+
T.x,
|
|
432
563
|
" Y:",
|
|
433
|
-
|
|
564
|
+
T.y
|
|
434
565
|
] }),
|
|
435
|
-
/* @__PURE__ */
|
|
436
|
-
/* @__PURE__ */
|
|
566
|
+
/* @__PURE__ */ t.jsx("div", { className: "text-[10px] opacity-80", children: "min:200px max:500px" }),
|
|
567
|
+
/* @__PURE__ */ t.jsxs("div", { className: "mt-0.5 text-[10px] opacity-80", children: [
|
|
437
568
|
"PH-",
|
|
438
|
-
|
|
569
|
+
e,
|
|
439
570
|
"-",
|
|
440
571
|
r,
|
|
441
572
|
" ",
|
|
442
|
-
|
|
573
|
+
b ? "ACTIVE" : "IDLE"
|
|
443
574
|
] })
|
|
444
575
|
] }),
|
|
445
|
-
!
|
|
446
|
-
/* @__PURE__ */
|
|
447
|
-
/* @__PURE__ */
|
|
448
|
-
/* @__PURE__ */
|
|
576
|
+
!N && l && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center space-x-2 text-sky-600", children: [
|
|
577
|
+
/* @__PURE__ */ t.jsxs("svg", { className: "h-6 w-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [
|
|
578
|
+
/* @__PURE__ */ t.jsx("title", { children: "パネルをここにドロップ" }),
|
|
579
|
+
/* @__PURE__ */ t.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 6v6m0 0v6m0-6h6m-6 0H6" })
|
|
449
580
|
] }),
|
|
450
|
-
/* @__PURE__ */
|
|
581
|
+
/* @__PURE__ */ t.jsx("span", { className: "font-medium text-sm", children: "パネルをここにドロップ" })
|
|
451
582
|
] })
|
|
452
583
|
]
|
|
453
584
|
}
|
|
454
585
|
);
|
|
455
586
|
});
|
|
456
|
-
|
|
457
|
-
const
|
|
587
|
+
Ze.displayName = "InsertPlaceholder";
|
|
588
|
+
const Ge = ({ columnIndex: r, isDragging: e, dragOverPosition: n, children: s, config: o }) => {
|
|
458
589
|
const i = F(null), [u, c] = te(null);
|
|
459
590
|
return K(() => {
|
|
460
|
-
if (i.current &&
|
|
461
|
-
const h = i.current.getBoundingClientRect(),
|
|
591
|
+
if (i.current && e) {
|
|
592
|
+
const h = i.current.getBoundingClientRect(), N = n?.columnIndex === r, b = {
|
|
462
593
|
width: Math.round(h.width),
|
|
463
594
|
height: Math.round(h.height),
|
|
464
595
|
x: Math.round(h.left),
|
|
465
596
|
y: Math.round(h.top),
|
|
466
|
-
isActive:
|
|
597
|
+
isActive: N
|
|
467
598
|
};
|
|
468
|
-
c(
|
|
469
|
-
size: `${
|
|
470
|
-
position: `(${
|
|
471
|
-
bottomRight: `(${
|
|
472
|
-
center: `(${
|
|
599
|
+
c(b), N && E(o, 1, `🎯 アクティブドロップゾーン ${r}:`, {
|
|
600
|
+
size: `${b.width}×${b.height}`,
|
|
601
|
+
position: `(${b.x}, ${b.y})`,
|
|
602
|
+
bottomRight: `(${b.x + b.width}, ${b.y + b.height})`,
|
|
603
|
+
center: `(${b.x + b.width / 2}, ${b.y + b.height / 2})`
|
|
473
604
|
});
|
|
474
605
|
}
|
|
475
|
-
}, [
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
/* @__PURE__ */
|
|
479
|
-
/* @__PURE__ */
|
|
480
|
-
/* @__PURE__ */
|
|
606
|
+
}, [e, n, r, o]), /* @__PURE__ */ t.jsxs("div", { ref: i, className: "relative", children: [
|
|
607
|
+
s,
|
|
608
|
+
e && u && o.showDropZoneOutlines && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
|
|
609
|
+
/* @__PURE__ */ t.jsx("div", { className: `pointer-events-none absolute inset-0 rounded-lg border-2 border-dashed transition-all duration-200 ${u.isActive ? "border-red-500 bg-red-100/20 shadow-lg" : "border-gray-400 bg-gray-100/10"}` }),
|
|
610
|
+
/* @__PURE__ */ t.jsxs("div", { className: `absolute top-2 left-2 z-20 rounded-md px-2 py-1 font-mono text-xs leading-tight shadow-lg transition-all duration-200 ${u.isActive ? "bg-red-500/90 text-white" : "bg-gray-500/90 text-white"}`, children: [
|
|
611
|
+
/* @__PURE__ */ t.jsxs("div", { className: "font-bold", children: [
|
|
481
612
|
"DropZone-",
|
|
482
613
|
r
|
|
483
614
|
] }),
|
|
484
|
-
/* @__PURE__ */
|
|
615
|
+
/* @__PURE__ */ t.jsxs("div", { children: [
|
|
485
616
|
u.width,
|
|
486
617
|
"×",
|
|
487
618
|
u.height
|
|
488
619
|
] }),
|
|
489
|
-
/* @__PURE__ */
|
|
620
|
+
/* @__PURE__ */ t.jsxs("div", { children: [
|
|
490
621
|
"X:",
|
|
491
622
|
u.x,
|
|
492
623
|
" Y:",
|
|
493
624
|
u.y
|
|
494
625
|
] }),
|
|
495
|
-
/* @__PURE__ */
|
|
626
|
+
/* @__PURE__ */ t.jsx("div", { className: "mt-0.5 text-[10px] opacity-80", children: u.isActive ? "ACTIVE" : "IDLE" })
|
|
496
627
|
] }),
|
|
497
|
-
/* @__PURE__ */
|
|
628
|
+
/* @__PURE__ */ t.jsx(
|
|
498
629
|
"div",
|
|
499
630
|
{
|
|
500
631
|
className: `pointer-events-none absolute transition-all duration-200 ${u.isActive ? "opacity-100" : "opacity-50"}`,
|
|
@@ -502,22 +633,22 @@ const Ie = ({ columnIndex: r, isDragging: t, dragOverPosition: n, children: l, c
|
|
|
502
633
|
left: `${u.width / 2 - 6}px`,
|
|
503
634
|
top: `${u.height / 2 - 6}px`
|
|
504
635
|
},
|
|
505
|
-
children: /* @__PURE__ */
|
|
636
|
+
children: /* @__PURE__ */ t.jsx("div", { className: `h-3 w-3 rounded-full border-2 ${u.isActive ? "border-red-700 bg-red-500" : "border-gray-700 bg-gray-500"}` })
|
|
506
637
|
}
|
|
507
638
|
),
|
|
508
|
-
u.isActive && /* @__PURE__ */
|
|
509
|
-
/* @__PURE__ */
|
|
510
|
-
/* @__PURE__ */
|
|
511
|
-
/* @__PURE__ */
|
|
512
|
-
/* @__PURE__ */
|
|
639
|
+
u.isActive && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
|
|
640
|
+
/* @__PURE__ */ t.jsx("div", { className: "pointer-events-none absolute top-0 left-0 h-2 w-2 rounded-full bg-red-500" }),
|
|
641
|
+
/* @__PURE__ */ t.jsx("div", { className: "pointer-events-none absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500" }),
|
|
642
|
+
/* @__PURE__ */ t.jsx("div", { className: "pointer-events-none absolute bottom-0 left-0 h-2 w-2 rounded-full bg-red-500" }),
|
|
643
|
+
/* @__PURE__ */ t.jsx("div", { className: "pointer-events-none absolute right-0 bottom-0 h-2 w-2 rounded-full bg-red-500" })
|
|
513
644
|
] })
|
|
514
645
|
] })
|
|
515
646
|
] });
|
|
516
647
|
};
|
|
517
|
-
|
|
518
|
-
const
|
|
519
|
-
const n = F(null), [
|
|
520
|
-
return
|
|
648
|
+
Ge.displayName = "DropZoneDebugOverlay";
|
|
649
|
+
const Et = 0.25, St = typeof window < "u" ? Se : K, Ct = (r, e = Et) => {
|
|
650
|
+
const n = F(null), [s, o] = te(1);
|
|
651
|
+
return St(() => {
|
|
521
652
|
const i = n.current;
|
|
522
653
|
if (!i || r <= 0) {
|
|
523
654
|
o(1);
|
|
@@ -527,141 +658,141 @@ const xt = 0.25, gt = typeof window < "u" ? Ee : K, pt = (r, t = xt) => {
|
|
|
527
658
|
const h = i.clientWidth;
|
|
528
659
|
if (h <= 0)
|
|
529
660
|
return;
|
|
530
|
-
const
|
|
531
|
-
o((
|
|
661
|
+
const N = h >= r ? 1 : Math.max(h / r, e);
|
|
662
|
+
o((b) => Math.abs(b - N) < 5e-3 ? b : N);
|
|
532
663
|
};
|
|
533
664
|
u();
|
|
534
665
|
const c = new ResizeObserver(u);
|
|
535
666
|
return c.observe(i), () => c.disconnect();
|
|
536
|
-
}, [r,
|
|
537
|
-
},
|
|
538
|
-
const h = F(!1),
|
|
667
|
+
}, [r, e]), { containerRef: n, scale: s };
|
|
668
|
+
}, Je = ({ columnId: r, onResizeStart: e, onResize: n, onResizeEnd: s, isResizing: o = !1, position: i = "right", className: u = "", debug: c = {} }) => {
|
|
669
|
+
const h = F(!1), N = F(null);
|
|
539
670
|
K(() => {
|
|
540
671
|
!o && h.current && (E(c, 1, "外部からのリサイズ解除を検出、ドラッグ状態を強制解除:", r), h.current = !1, document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
|
|
541
672
|
}, [o, r, c]);
|
|
542
|
-
const
|
|
673
|
+
const b = w(
|
|
543
674
|
(y) => {
|
|
544
|
-
y.preventDefault(), y.stopPropagation(), E(c, 2, "リサイズハンドル マウスダウン:", r), h.current = !0,
|
|
675
|
+
y.preventDefault(), y.stopPropagation(), E(c, 2, "リサイズハンドル マウスダウン:", r), h.current = !0, e(r, y.clientX), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.body.classList.add("resizing-column");
|
|
545
676
|
},
|
|
546
|
-
[r,
|
|
677
|
+
[r, e, c]
|
|
547
678
|
);
|
|
548
679
|
K(() => {
|
|
549
680
|
const y = (j) => {
|
|
550
681
|
h.current && (j.preventDefault(), n(j.clientX));
|
|
551
|
-
},
|
|
552
|
-
h.current && (E(c, 2, "リサイズハンドル マウスアップ:", r), h.current = !1,
|
|
682
|
+
}, l = () => {
|
|
683
|
+
h.current && (E(c, 2, "リサイズハンドル マウスアップ:", r), h.current = !1, s(), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
|
|
553
684
|
};
|
|
554
|
-
return document.addEventListener("mousemove", y), document.addEventListener("mouseup",
|
|
555
|
-
document.removeEventListener("mousemove", y), document.removeEventListener("mouseup",
|
|
685
|
+
return document.addEventListener("mousemove", y), document.addEventListener("mouseup", l), () => {
|
|
686
|
+
document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", l);
|
|
556
687
|
};
|
|
557
|
-
}, [r, n,
|
|
558
|
-
const
|
|
688
|
+
}, [r, n, s, c]);
|
|
689
|
+
const M = w(
|
|
559
690
|
(y) => {
|
|
560
691
|
y.preventDefault(), y.stopPropagation();
|
|
561
|
-
const
|
|
562
|
-
E(c, 2, "リサイズハンドル タッチスタート:", r), h.current = !0,
|
|
692
|
+
const l = y.touches[0];
|
|
693
|
+
E(c, 2, "リサイズハンドル タッチスタート:", r), h.current = !0, e(r, l.clientX), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.body.classList.add("resizing-column");
|
|
563
694
|
},
|
|
564
|
-
[r,
|
|
695
|
+
[r, e, c]
|
|
565
696
|
);
|
|
566
697
|
K(() => {
|
|
567
698
|
const y = (j) => {
|
|
568
699
|
if (!h.current) return;
|
|
569
700
|
j.preventDefault();
|
|
570
|
-
const
|
|
571
|
-
n(
|
|
572
|
-
},
|
|
573
|
-
h.current && (E(c, 2, "リサイズハンドル タッチエンド:", r), h.current = !1,
|
|
701
|
+
const k = j.touches[0];
|
|
702
|
+
n(k.clientX);
|
|
703
|
+
}, l = () => {
|
|
704
|
+
h.current && (E(c, 2, "リサイズハンドル タッチエンド:", r), h.current = !1, s(), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
|
|
574
705
|
};
|
|
575
|
-
return document.addEventListener("touchmove", y, { passive: !1 }), document.addEventListener("touchend",
|
|
576
|
-
document.removeEventListener("touchmove", y), document.removeEventListener("touchend",
|
|
706
|
+
return document.addEventListener("touchmove", y, { passive: !1 }), document.addEventListener("touchend", l), () => {
|
|
707
|
+
document.removeEventListener("touchmove", y), document.removeEventListener("touchend", l);
|
|
577
708
|
};
|
|
578
|
-
}, [r, n,
|
|
709
|
+
}, [r, n, s, c]), K(() => () => {
|
|
579
710
|
h.current && (E(c, 1, "リサイズハンドルアンマウント時のクリーンアップ:", r), document.body.style.cursor = "", document.body.style.userSelect = "", document.body.classList.remove("resizing-column"));
|
|
580
711
|
}, [r, c]);
|
|
581
|
-
const
|
|
712
|
+
const T = ["resize-handle", i, o ? "resizing" : "", u].filter(Boolean).join(" ");
|
|
582
713
|
return (
|
|
583
714
|
// biome-ignore lint/a11y/useFocusableInteractive: リサイズハンドルとして機能するためインタラクティブである必要がある
|
|
584
715
|
// biome-ignore lint/a11y/useSemanticElements: divを使用するが、aria-roleでセマンティックな意味を提供している
|
|
585
716
|
// biome-ignore lint/a11y/useAriaPropsForRole: リサイズハンドルのため、値の範囲を指定することが難しい
|
|
586
|
-
/* @__PURE__ */
|
|
587
|
-
/* @__PURE__ */
|
|
588
|
-
c.showPanelSizes && /* @__PURE__ */
|
|
717
|
+
/* @__PURE__ */ t.jsxs("div", { ref: N, className: T, onMouseDown: b, onTouchStart: M, "data-column-id": r, "data-position": i, "aria-label": `${r}のカラム幅を調整`, role: "separator", "aria-orientation": "vertical", children: [
|
|
718
|
+
/* @__PURE__ */ t.jsx("div", { className: "resize-handle-bar" }),
|
|
719
|
+
c.showPanelSizes && /* @__PURE__ */ t.jsxs("div", { className: "resize-handle-debug-info", children: [
|
|
589
720
|
r,
|
|
590
721
|
o && " (resizing)"
|
|
591
722
|
] })
|
|
592
723
|
] })
|
|
593
724
|
);
|
|
594
|
-
},
|
|
595
|
-
const
|
|
725
|
+
}, Gt = ({ columnId: r, width: e, minWidth: n = 100, maxWidth: s = 800, onResizeStart: o, onResize: i, onResizeEnd: u, isResizing: c = !1, resizable: h = !0, className: N = "", debug: b = {}, children: M }) => {
|
|
726
|
+
const T = ["resizable-column", c ? "resizing" : "", N].filter(Boolean).join(" ");
|
|
596
727
|
return K(() => {
|
|
597
728
|
const y = document.querySelector(`[data-column-id="${r}"]`);
|
|
598
|
-
y && (y.style.setProperty("--column-width", `${
|
|
599
|
-
}, [r,
|
|
600
|
-
|
|
601
|
-
h && /* @__PURE__ */
|
|
602
|
-
|
|
603
|
-
|
|
729
|
+
y && (y.style.setProperty("--column-width", `${e}px`), y.style.setProperty("--column-min-width", `${n}px`), y.style.setProperty("--column-max-width", `${s}px`));
|
|
730
|
+
}, [r, e, n, s]), /* @__PURE__ */ t.jsxs("div", { className: T, "data-column-id": r, "data-width": e, "data-min-width": n, "data-max-width": s, children: [
|
|
731
|
+
M,
|
|
732
|
+
h && /* @__PURE__ */ t.jsx(Je, { columnId: r, onResizeStart: o, onResize: i, onResizeEnd: u, isResizing: c, position: "right", debug: b }),
|
|
733
|
+
b.showPanelSizes && /* @__PURE__ */ t.jsxs("div", { className: "column-debug-size", children: [
|
|
734
|
+
e,
|
|
604
735
|
"px",
|
|
605
736
|
c && " ↔"
|
|
606
737
|
] })
|
|
607
738
|
] });
|
|
608
|
-
},
|
|
739
|
+
}, Me = st(
|
|
609
740
|
({
|
|
610
741
|
index: r,
|
|
611
|
-
columnIndex:
|
|
742
|
+
columnIndex: e,
|
|
612
743
|
isDragging: n,
|
|
613
|
-
dragOverPosition:
|
|
744
|
+
dragOverPosition: s,
|
|
614
745
|
originalPosition: o,
|
|
615
746
|
onDragEnter: i,
|
|
616
747
|
onDragLeave: u,
|
|
617
748
|
debugConfig: c,
|
|
618
749
|
customDrag: h
|
|
619
|
-
}) => /* @__PURE__ */
|
|
750
|
+
}) => /* @__PURE__ */ t.jsx(Ze, { index: r, columnIndex: e, isDragging: n, dragOverPosition: s, originalPosition: o, onDragEnter: i, onDragLeave: u, config: c, customDrag: h })
|
|
620
751
|
);
|
|
621
|
-
|
|
622
|
-
const
|
|
752
|
+
Me.displayName = "LocalInsertPlaceholder";
|
|
753
|
+
const Jt = ({
|
|
623
754
|
columns: r,
|
|
624
|
-
panels:
|
|
755
|
+
panels: e,
|
|
625
756
|
columnPanels: n,
|
|
626
757
|
// onColumnPanelsChange,
|
|
627
|
-
panelVisibility:
|
|
758
|
+
panelVisibility: s,
|
|
628
759
|
onPanelVisibilityChange: o,
|
|
629
760
|
dragState: i,
|
|
630
761
|
dragOverPosition: u,
|
|
631
762
|
originalPanelPosition: c,
|
|
632
763
|
dragModes: h,
|
|
633
|
-
onDragStart:
|
|
634
|
-
onDragEnd:
|
|
635
|
-
onPlaceholderDragEnter:
|
|
636
|
-
onPlaceholderDragLeave:
|
|
764
|
+
onDragStart: N,
|
|
765
|
+
onDragEnd: b,
|
|
766
|
+
onPlaceholderDragEnter: M,
|
|
767
|
+
onPlaceholderDragLeave: T,
|
|
637
768
|
onDragOverWithInsert: y,
|
|
638
|
-
onDropWithInsert:
|
|
769
|
+
onDropWithInsert: l,
|
|
639
770
|
onColumnDragLeave: j,
|
|
640
|
-
onPanelClick:
|
|
641
|
-
onPanelMouseDown:
|
|
642
|
-
onTouchStart:
|
|
771
|
+
onPanelClick: k,
|
|
772
|
+
onPanelMouseDown: _,
|
|
773
|
+
onTouchStart: R,
|
|
643
774
|
onTouchMove: z,
|
|
644
775
|
onTouchEnd: Z,
|
|
645
776
|
debugConfig: Y,
|
|
646
777
|
panelSizes: U,
|
|
647
|
-
setPanelRef:
|
|
648
|
-
enableResize:
|
|
778
|
+
setPanelRef: $,
|
|
779
|
+
enableResize: L = !1,
|
|
649
780
|
columnWidths: f,
|
|
650
781
|
// onColumnWidthChange,
|
|
651
|
-
onResizeStart:
|
|
782
|
+
onResizeStart: x,
|
|
652
783
|
onResize: C,
|
|
653
784
|
onResizeEnd: W,
|
|
654
|
-
isResizing:
|
|
655
|
-
resizingColumn:
|
|
785
|
+
isResizing: p = !1,
|
|
786
|
+
resizingColumn: g,
|
|
656
787
|
onPanelSizeInfoClick: m,
|
|
657
|
-
onToggleDragMode:
|
|
658
|
-
onPanelClose:
|
|
659
|
-
onPanelMaximizeChange:
|
|
660
|
-
customDrag:
|
|
788
|
+
onToggleDragMode: v,
|
|
789
|
+
onPanelClose: D,
|
|
790
|
+
onPanelMaximizeChange: A,
|
|
791
|
+
customDrag: O,
|
|
661
792
|
dragHandle: H = "panel",
|
|
662
|
-
maximizedPanel:
|
|
793
|
+
maximizedPanel: a = null,
|
|
663
794
|
panelClassName: d = "",
|
|
664
|
-
scale:
|
|
795
|
+
scale: S,
|
|
665
796
|
autoScale: X,
|
|
666
797
|
onScaleChange: G
|
|
667
798
|
}) => {
|
|
@@ -669,16 +800,16 @@ const Ct = ({
|
|
|
669
800
|
K(() => {
|
|
670
801
|
Q.current = Y;
|
|
671
802
|
}, [Y]);
|
|
672
|
-
const { containerRef:
|
|
803
|
+
const { containerRef: V, scale: re } = Ct(X?.requiredWidth ?? 0, X?.minScale), ce = a ? 1 : S ?? (X ? re : 1), se = Number.isFinite(ce) && ce > 0 ? ce : 1, ge = F(se);
|
|
673
804
|
ge.current = se, K(() => {
|
|
674
805
|
G && G(se);
|
|
675
806
|
}, [se, G]);
|
|
676
|
-
const
|
|
807
|
+
const et = se < 1 ? {
|
|
677
808
|
width: `${100 / se}%`,
|
|
678
809
|
height: `${100 / se}%`,
|
|
679
810
|
transform: `scale(${se})`,
|
|
680
811
|
transformOrigin: "top left"
|
|
681
|
-
} : void 0,
|
|
812
|
+
} : void 0, he = F({}), Ne = F(/* @__PURE__ */ new Map());
|
|
682
813
|
K(() => {
|
|
683
814
|
E(Q.current, 1, "🎨 DragDropLayout - dragModes props changed:", {
|
|
684
815
|
dragModes: h,
|
|
@@ -687,356 +818,381 @@ const Ct = ({
|
|
|
687
818
|
values: Object.values(h)
|
|
688
819
|
});
|
|
689
820
|
}, [h]);
|
|
690
|
-
const
|
|
821
|
+
const De = Ue(() => {
|
|
691
822
|
const P = {};
|
|
692
|
-
return
|
|
693
|
-
P[
|
|
823
|
+
return e.forEach((B) => {
|
|
824
|
+
P[B.id] = B;
|
|
694
825
|
}), P;
|
|
695
|
-
}, [
|
|
826
|
+
}, [e]);
|
|
696
827
|
K(() => {
|
|
697
|
-
if (!(
|
|
828
|
+
if (!(a && A))
|
|
698
829
|
return;
|
|
699
|
-
const P = (
|
|
700
|
-
|
|
830
|
+
const P = (B) => {
|
|
831
|
+
B.key === "Escape" && A(null);
|
|
701
832
|
};
|
|
702
833
|
return document.addEventListener("keydown", P), () => document.removeEventListener("keydown", P);
|
|
703
|
-
}, [
|
|
834
|
+
}, [a, A]), Se(() => {
|
|
704
835
|
const P = /* @__PURE__ */ new Map();
|
|
705
|
-
Object.keys(
|
|
706
|
-
const ne =
|
|
836
|
+
Object.keys(he.current).forEach((q) => {
|
|
837
|
+
const ne = he.current[q];
|
|
707
838
|
if (ne) {
|
|
708
|
-
const
|
|
839
|
+
const de = ne.getBoundingClientRect();
|
|
709
840
|
P.set(q, {
|
|
710
|
-
rect:
|
|
841
|
+
rect: de,
|
|
711
842
|
height: ne.offsetHeight,
|
|
712
843
|
width: ne.offsetWidth
|
|
713
844
|
});
|
|
714
845
|
}
|
|
715
846
|
});
|
|
716
|
-
const
|
|
847
|
+
const B = Ne.current, ee = 300, me = /* @__PURE__ */ new Set();
|
|
717
848
|
Object.values(n).forEach((q) => {
|
|
718
849
|
q.forEach((ne) => {
|
|
719
|
-
|
|
850
|
+
me.add(ne);
|
|
720
851
|
});
|
|
721
|
-
}), new Set(
|
|
722
|
-
|
|
852
|
+
}), new Set(B.keys()).forEach((q) => {
|
|
853
|
+
me.has(q) || (E(Q.current, 1, "パネル削除検出 - クリーンアップ:", q), B.delete(q), he.current[q] && delete he.current[q]);
|
|
723
854
|
}), P.forEach((q, ne) => {
|
|
724
|
-
const
|
|
725
|
-
if (
|
|
726
|
-
const J =
|
|
727
|
-
if (J !== 0 ||
|
|
728
|
-
E(Q.current, 2, "パネル移動検出 - アニメーション開始:", ne, { dx: J, dy:
|
|
729
|
-
const
|
|
730
|
-
if (
|
|
731
|
-
const
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
855
|
+
const de = B.get(ne);
|
|
856
|
+
if (de) {
|
|
857
|
+
const J = de.rect.left - q.rect.left, fe = de.rect.top - q.rect.top;
|
|
858
|
+
if (J !== 0 || fe !== 0) {
|
|
859
|
+
E(Q.current, 2, "パネル移動検出 - アニメーション開始:", ne, { dx: J, dy: fe });
|
|
860
|
+
const ae = he.current[ne];
|
|
861
|
+
if (ae) {
|
|
862
|
+
const be = ge.current || 1;
|
|
863
|
+
ae.style.transform = `translate(${J / be}px, ${fe / be}px)`, ae.style.transition = "none", ae.classList.add("is-moving"), requestAnimationFrame(() => {
|
|
864
|
+
ae.style.transition = `transform ${ee}ms cubic-bezier(0.2, 0, 0.2, 1)`, ae.style.transform = "translate(0, 0)", setTimeout(() => {
|
|
865
|
+
ae.style.transition = "", ae.style.transform = "", ae.classList.remove("is-moving");
|
|
735
866
|
}, ee);
|
|
736
867
|
});
|
|
737
868
|
}
|
|
738
869
|
}
|
|
739
870
|
} else {
|
|
740
871
|
E(Q.current, 1, "新規パネル検出 - フェードインアニメーション:", ne);
|
|
741
|
-
const J =
|
|
872
|
+
const J = he.current[ne];
|
|
742
873
|
J && (J.style.opacity = "0", J.style.transition = "none", requestAnimationFrame(() => {
|
|
743
874
|
J.style.transition = `opacity ${ee}ms ease-out`, J.style.opacity = "1", setTimeout(() => {
|
|
744
875
|
J.style.transition = "", J.style.opacity = "";
|
|
745
876
|
}, ee);
|
|
746
877
|
}));
|
|
747
878
|
}
|
|
748
|
-
}),
|
|
749
|
-
}, [n]),
|
|
879
|
+
}), Ne.current = P;
|
|
880
|
+
}, [n]), Se(() => {
|
|
750
881
|
const P = /* @__PURE__ */ new Map();
|
|
751
|
-
Object.keys(
|
|
752
|
-
const ee =
|
|
753
|
-
ee && P.set(
|
|
754
|
-
}),
|
|
882
|
+
Object.keys(he.current).forEach((B) => {
|
|
883
|
+
const ee = he.current[B];
|
|
884
|
+
ee && P.set(B, { rect: ee.getBoundingClientRect(), height: ee.offsetHeight, width: ee.offsetWidth });
|
|
885
|
+
}), Ne.current = P;
|
|
755
886
|
}, [se]);
|
|
756
|
-
const
|
|
757
|
-
if (!
|
|
758
|
-
const
|
|
759
|
-
if (!
|
|
887
|
+
const tt = (P) => {
|
|
888
|
+
if (!s[P]) return null;
|
|
889
|
+
const B = De[P];
|
|
890
|
+
if (!B)
|
|
760
891
|
return E(Q.current, 1, `Panel config not found for panelId: ${P}`), null;
|
|
761
|
-
const ee =
|
|
892
|
+
const ee = B.component, me = B.title, ue = i.draggedPanel === P, q = h[P] || "normal";
|
|
762
893
|
E(Q.current, 2, `🎨 renderPanel - ${P}:`, {
|
|
763
894
|
panelId: P,
|
|
764
895
|
dragMode: q,
|
|
765
896
|
timestamp: (/* @__PURE__ */ new Date()).toISOString()
|
|
766
897
|
});
|
|
767
898
|
const ne = (I) => {
|
|
768
|
-
|
|
769
|
-
const
|
|
899
|
+
he.current[P] = I, $ && $(P, I), I && Y.showPanelSizes && requestAnimationFrame(() => {
|
|
900
|
+
const ye = I.getBoundingClientRect(), Le = window.getComputedStyle(I);
|
|
770
901
|
E(Q.current, 1, `Panel ${P} mounted with size:`, {
|
|
771
|
-
width:
|
|
772
|
-
height:
|
|
773
|
-
x:
|
|
774
|
-
y:
|
|
775
|
-
minHeight:
|
|
776
|
-
maxHeight:
|
|
902
|
+
width: ye.width,
|
|
903
|
+
height: ye.height,
|
|
904
|
+
x: ye.left,
|
|
905
|
+
y: ye.top,
|
|
906
|
+
minHeight: Le.minHeight,
|
|
907
|
+
maxHeight: Le.maxHeight
|
|
777
908
|
});
|
|
778
909
|
});
|
|
779
|
-
},
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
910
|
+
}, de = U[P], J = a === P, fe = !!A, ae = () => A?.(J ? null : P), be = J ? {
|
|
911
|
+
position: "fixed",
|
|
912
|
+
top: "var(--aqdd-maximize-top, 0px)",
|
|
913
|
+
right: "var(--aqdd-maximize-right, 0px)",
|
|
914
|
+
bottom: "var(--aqdd-maximize-bottom, 0px)",
|
|
915
|
+
left: "var(--aqdd-maximize-left, 0px)",
|
|
916
|
+
zIndex: 50,
|
|
917
|
+
minHeight: 0,
|
|
918
|
+
maxHeight: "none"
|
|
919
|
+
} : {
|
|
920
|
+
minHeight: B.minHeight ?? "200px",
|
|
921
|
+
maxHeight: B.maxHeight ?? "500px"
|
|
922
|
+
}, ve = H === "header", Oe = q === "normal" && !ve && !J, Te = q === "normal" && ve && !J, _e = ue ? "cursor-grabbing" : "cursor-grab", Re = `panel-draggable group relative flex flex-col overflow-hidden border border-slate-200 text-left shadow-lg backdrop-blur-lg ${q === "custom" ? "select-none" : ""}`, rt = J ? (
|
|
783
923
|
// 最大化中: 角丸・ホバー演出・grab カーソル無し、背景は不透過寄りで下のレイアウトを遮蔽
|
|
784
|
-
`${
|
|
785
|
-
) : `${
|
|
924
|
+
`${Re} rounded-none bg-white/95 p-4 ${d}`
|
|
925
|
+
) : `${Re} rounded-2xl bg-white/80 p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${ve ? "" : _e} ${d}`;
|
|
786
926
|
return (
|
|
787
927
|
// biome-ignore lint/a11y/noStaticElementInteractions: クリックイベントを持つ静的要素
|
|
788
|
-
/* @__PURE__ */
|
|
928
|
+
/* @__PURE__ */ t.jsxs(
|
|
789
929
|
"div",
|
|
790
930
|
{
|
|
791
931
|
ref: ne,
|
|
792
932
|
"data-panel-id": P,
|
|
793
|
-
"data-dragging":
|
|
933
|
+
"data-dragging": ue,
|
|
794
934
|
"data-maximized": J || void 0,
|
|
795
935
|
role: "presentation",
|
|
796
936
|
draggable: Oe,
|
|
797
|
-
onDragStart: (I) => Oe &&
|
|
798
|
-
onDragEnd:
|
|
799
|
-
onClick: (I) =>
|
|
800
|
-
onMouseDown: (I) =>
|
|
801
|
-
onTouchStart: (I) =>
|
|
937
|
+
onDragStart: (I) => Oe && N(I, P),
|
|
938
|
+
onDragEnd: b,
|
|
939
|
+
onClick: (I) => k?.(I, P),
|
|
940
|
+
onMouseDown: (I) => _?.(I, P),
|
|
941
|
+
onTouchStart: (I) => R?.(I, P),
|
|
802
942
|
onTouchMove: z,
|
|
803
943
|
onTouchEnd: Z,
|
|
804
|
-
style:
|
|
805
|
-
className:
|
|
944
|
+
style: be,
|
|
945
|
+
className: rt,
|
|
806
946
|
children: [
|
|
807
|
-
/* @__PURE__ */
|
|
947
|
+
/* @__PURE__ */ t.jsxs(
|
|
808
948
|
"div",
|
|
809
949
|
{
|
|
810
|
-
className: `group relative mb-3 flex items-center justify-between ${
|
|
950
|
+
className: `group relative mb-3 flex items-center justify-between ${ve && !J ? _e : ""}`,
|
|
811
951
|
draggable: Te,
|
|
812
|
-
onDragStart: (I) => Te &&
|
|
813
|
-
onDoubleClick:
|
|
814
|
-
I.stopPropagation(),
|
|
952
|
+
onDragStart: (I) => Te && N(I, P),
|
|
953
|
+
onDoubleClick: fe ? (I) => {
|
|
954
|
+
I.stopPropagation(), ae();
|
|
815
955
|
} : void 0,
|
|
816
956
|
children: [
|
|
817
|
-
/* @__PURE__ */
|
|
818
|
-
/* @__PURE__ */
|
|
819
|
-
q === "custom" && /* @__PURE__ */
|
|
957
|
+
/* @__PURE__ */ t.jsxs("div", { className: "flex items-center space-x-2", children: [
|
|
958
|
+
/* @__PURE__ */ t.jsx("h3", { className: "font-semibold text-lg text-slate-700 transition-colors group-hover:text-slate-900", children: me }),
|
|
959
|
+
q === "custom" && /* @__PURE__ */ t.jsx("span", { className: "rounded-md bg-orange-100 px-2 py-1 font-medium text-orange-600 text-xs", children: "Custom" })
|
|
820
960
|
] }),
|
|
821
|
-
/* @__PURE__ */
|
|
822
|
-
/* @__PURE__ */
|
|
961
|
+
/* @__PURE__ */ t.jsxs("div", { className: "flex items-center space-x-1 opacity-0 transition-opacity group-hover:opacity-100", children: [
|
|
962
|
+
/* @__PURE__ */ t.jsx(
|
|
823
963
|
"button",
|
|
824
964
|
{
|
|
825
965
|
type: "button",
|
|
826
966
|
onClick: (I) => {
|
|
827
|
-
I.stopPropagation(),
|
|
967
|
+
I.stopPropagation(), v && v(P);
|
|
828
968
|
},
|
|
829
969
|
onKeyDown: (I) => {
|
|
830
|
-
(I.key === "Enter" || I.key === " ") && (I.preventDefault(), I.stopPropagation(),
|
|
970
|
+
(I.key === "Enter" || I.key === " ") && (I.preventDefault(), I.stopPropagation(), v && v(P));
|
|
831
971
|
},
|
|
832
972
|
tabIndex: 0,
|
|
833
973
|
className: `cursor-pointer rounded p-1 text-xs transition-colors ${q === "custom" ? "bg-orange-100 text-orange-600 hover:bg-orange-200" : "text-slate-400 hover:bg-slate-100 hover:text-slate-600"}`,
|
|
834
974
|
title: q === "custom" ? "通常ドラッグモードに戻す" : "カスタムドラッグモードに切り替え",
|
|
835
|
-
children: q === "custom" ? /* @__PURE__ */
|
|
975
|
+
children: q === "custom" ? /* @__PURE__ */ t.jsx(kt, { className: "h-4 w-4" }) : /* @__PURE__ */ t.jsx(jt, { className: "h-4 w-4" })
|
|
836
976
|
}
|
|
837
977
|
),
|
|
838
|
-
!J && /* @__PURE__ */
|
|
978
|
+
!J && /* @__PURE__ */ t.jsx(
|
|
839
979
|
"button",
|
|
840
980
|
{
|
|
841
981
|
type: "button",
|
|
842
982
|
onClick: (I) => {
|
|
843
983
|
I.stopPropagation(), o({
|
|
844
|
-
...
|
|
984
|
+
...s,
|
|
845
985
|
[P]: !1
|
|
846
986
|
});
|
|
847
987
|
},
|
|
848
988
|
className: "rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600",
|
|
849
989
|
title: "パネルを非表示",
|
|
850
|
-
children: /* @__PURE__ */
|
|
990
|
+
children: /* @__PURE__ */ t.jsx(Xe, { className: "h-4 w-4" })
|
|
851
991
|
}
|
|
852
992
|
),
|
|
853
|
-
|
|
993
|
+
fe && /* @__PURE__ */ t.jsx(
|
|
854
994
|
"button",
|
|
855
995
|
{
|
|
856
996
|
type: "button",
|
|
857
997
|
onClick: (I) => {
|
|
858
|
-
I.stopPropagation(),
|
|
998
|
+
I.stopPropagation(), ae();
|
|
859
999
|
},
|
|
860
1000
|
className: "rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600",
|
|
861
1001
|
title: J ? "元のサイズに戻す" : "パネルを最大化",
|
|
862
|
-
children: J ? /* @__PURE__ */
|
|
1002
|
+
children: J ? /* @__PURE__ */ t.jsx(yt, { className: "h-4 w-4" }) : /* @__PURE__ */ t.jsx(bt, { className: "h-4 w-4" })
|
|
863
1003
|
}
|
|
864
1004
|
),
|
|
865
|
-
|
|
1005
|
+
D && /* @__PURE__ */ t.jsx(
|
|
866
1006
|
"button",
|
|
867
1007
|
{
|
|
868
1008
|
type: "button",
|
|
869
1009
|
onClick: (I) => {
|
|
870
|
-
I.stopPropagation(),
|
|
1010
|
+
I.stopPropagation(), D(P);
|
|
871
1011
|
},
|
|
872
1012
|
className: "rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-red-500",
|
|
873
1013
|
title: "パネルを閉じる",
|
|
874
|
-
children: /* @__PURE__ */
|
|
1014
|
+
children: /* @__PURE__ */ t.jsx(Ve, { className: "h-4 w-4" })
|
|
875
1015
|
}
|
|
876
1016
|
)
|
|
877
1017
|
] })
|
|
878
1018
|
]
|
|
879
1019
|
}
|
|
880
1020
|
),
|
|
881
|
-
/* @__PURE__ */
|
|
882
|
-
/* @__PURE__ */
|
|
1021
|
+
/* @__PURE__ */ t.jsx("div", { "data-aqdd-scroll-area": !0, className: "panel-scroll-area min-h-0 flex-1 overflow-y-auto", children: /* @__PURE__ */ t.jsx(ee, { ...B.props || {} }) }),
|
|
1022
|
+
/* @__PURE__ */ t.jsx(Dt, { config: Y, panelId: P, sizeInfo: de, onSizeInfoClick: (I) => m?.(I, P) })
|
|
883
1023
|
]
|
|
884
1024
|
},
|
|
885
1025
|
P
|
|
886
1026
|
)
|
|
887
1027
|
);
|
|
888
|
-
},
|
|
1028
|
+
}, nt = (P, B) => {
|
|
889
1029
|
const ee = n[P] || [];
|
|
890
|
-
let
|
|
1030
|
+
let me = !1;
|
|
891
1031
|
for (const q of ee)
|
|
892
|
-
if (
|
|
893
|
-
|
|
1032
|
+
if (s[q]) {
|
|
1033
|
+
me = !0;
|
|
894
1034
|
break;
|
|
895
1035
|
}
|
|
896
|
-
const
|
|
897
|
-
return /* @__PURE__ */
|
|
1036
|
+
const ue = i.isDragging || (O?.isActive ?? !1);
|
|
1037
|
+
return /* @__PURE__ */ t.jsx(Ge, { columnIndex: B, isDragging: ue, dragOverPosition: u, config: Y, children: /* @__PURE__ */ t.jsxs(
|
|
898
1038
|
"section",
|
|
899
1039
|
{
|
|
900
1040
|
"data-drop-zone": "true",
|
|
901
1041
|
"data-column-key": P,
|
|
902
|
-
"data-column-index":
|
|
903
|
-
"aria-label": `Drop zone for column ${
|
|
904
|
-
onDragOver: (q) => y(q,
|
|
905
|
-
onDrop: (q) =>
|
|
1042
|
+
"data-column-index": B,
|
|
1043
|
+
"aria-label": `Drop zone for column ${B + 1}`,
|
|
1044
|
+
onDragOver: (q) => y(q, B),
|
|
1045
|
+
onDrop: (q) => l(q, P),
|
|
906
1046
|
onDragLeave: j,
|
|
907
1047
|
className: "relative flex h-full flex-col transition-all duration-200",
|
|
908
1048
|
children: [
|
|
909
|
-
/* @__PURE__ */
|
|
910
|
-
|
|
1049
|
+
/* @__PURE__ */ t.jsx("div", { className: "placeholder-container", children: /* @__PURE__ */ t.jsx(
|
|
1050
|
+
Me,
|
|
911
1051
|
{
|
|
912
1052
|
index: 0,
|
|
913
|
-
columnIndex:
|
|
914
|
-
isDragging:
|
|
1053
|
+
columnIndex: B,
|
|
1054
|
+
isDragging: ue,
|
|
915
1055
|
dragOverPosition: u,
|
|
916
1056
|
originalPosition: c,
|
|
917
|
-
onDragEnter:
|
|
918
|
-
onDragLeave:
|
|
1057
|
+
onDragEnter: M,
|
|
1058
|
+
onDragLeave: T,
|
|
919
1059
|
debugConfig: Y,
|
|
920
|
-
customDrag:
|
|
1060
|
+
customDrag: O
|
|
921
1061
|
}
|
|
922
1062
|
) }),
|
|
923
1063
|
ee.map((q, ne) => {
|
|
924
|
-
const
|
|
925
|
-
return /* @__PURE__ */
|
|
926
|
-
|
|
1064
|
+
const de = s[q], J = !(de || ue);
|
|
1065
|
+
return /* @__PURE__ */ t.jsxs("div", { className: `panel-with-placeholder ${J ? "m-0 h-0 overflow-hidden p-0" : ""}`, "data-panel-hidden": J ? "true" : void 0, "aria-hidden": J ? "true" : void 0, children: [
|
|
1066
|
+
de ? tt(q) : ue ? (
|
|
927
1067
|
/* ドラッグ中のみ隠されたパネルのダミー表示 */
|
|
928
|
-
/* @__PURE__ */
|
|
929
|
-
/* @__PURE__ */
|
|
930
|
-
/* @__PURE__ */
|
|
931
|
-
/* @__PURE__ */
|
|
1068
|
+
/* @__PURE__ */ t.jsxs("div", { className: "hidden-panel-placeholder relative h-[120px] rounded-2xl border-2 border-amber-300 border-dashed bg-gradient-to-br from-amber-50 to-orange-50 p-3 text-left shadow-lg backdrop-blur-lg", children: [
|
|
1069
|
+
/* @__PURE__ */ t.jsxs("div", { className: "mb-2 flex items-center space-x-2", children: [
|
|
1070
|
+
/* @__PURE__ */ t.jsx("h3", { className: "font-semibold text-amber-700 text-base", children: De[q]?.title || q }),
|
|
1071
|
+
/* @__PURE__ */ t.jsx("span", { className: "rounded-md bg-amber-100 px-2 py-1 font-medium text-amber-600 text-xs", children: "非表示" })
|
|
932
1072
|
] }),
|
|
933
|
-
/* @__PURE__ */
|
|
934
|
-
/* @__PURE__ */
|
|
935
|
-
/* @__PURE__ */
|
|
1073
|
+
/* @__PURE__ */ t.jsx("div", { className: "flex-1 overflow-hidden", children: /* @__PURE__ */ t.jsx("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ t.jsxs("div", { className: "text-center text-amber-600", children: [
|
|
1074
|
+
/* @__PURE__ */ t.jsx(Xe, { className: "mx-auto h-6 w-6 opacity-50" }),
|
|
1075
|
+
/* @__PURE__ */ t.jsx("p", { className: "mt-1 text-xs", children: "このパネルは非表示です" })
|
|
936
1076
|
] }) }) })
|
|
937
1077
|
] })
|
|
938
1078
|
) : null,
|
|
939
|
-
/* @__PURE__ */
|
|
940
|
-
|
|
1079
|
+
/* @__PURE__ */ t.jsx(
|
|
1080
|
+
Me,
|
|
941
1081
|
{
|
|
942
1082
|
index: ne + 1,
|
|
943
|
-
columnIndex:
|
|
944
|
-
isDragging:
|
|
1083
|
+
columnIndex: B,
|
|
1084
|
+
isDragging: ue,
|
|
945
1085
|
dragOverPosition: u,
|
|
946
1086
|
originalPosition: c,
|
|
947
|
-
onDragEnter:
|
|
948
|
-
onDragLeave:
|
|
1087
|
+
onDragEnter: M,
|
|
1088
|
+
onDragLeave: T,
|
|
949
1089
|
debugConfig: Y,
|
|
950
|
-
customDrag:
|
|
1090
|
+
customDrag: O
|
|
951
1091
|
}
|
|
952
1092
|
)
|
|
953
1093
|
] }, `panel-${q}`);
|
|
954
1094
|
}),
|
|
955
|
-
!(
|
|
1095
|
+
!(me || ue) && /* @__PURE__ */ t.jsx("div", { className: "flex-shrink-0 rounded-xl border-2 border-slate-200 border-dashed bg-white/30 p-8 text-center text-slate-400 transition-all duration-200", children: /* @__PURE__ */ t.jsx("div", { className: "text-sm", children: "このエリアは空です" }) })
|
|
956
1096
|
]
|
|
957
1097
|
}
|
|
958
1098
|
) });
|
|
959
|
-
},
|
|
960
|
-
return /* @__PURE__ */
|
|
961
|
-
|
|
962
|
-
/* @__PURE__ */
|
|
963
|
-
|
|
964
|
-
const ee =
|
|
965
|
-
return /* @__PURE__ */
|
|
1099
|
+
}, Ae = Object.keys(s).filter((P) => !s[P]);
|
|
1100
|
+
return /* @__PURE__ */ t.jsxs("div", { className: "flex h-full flex-col", children: [
|
|
1101
|
+
Ae.length > 0 && /* @__PURE__ */ t.jsx("div", { className: "border-slate-200 border-b bg-white/70 px-4 py-2 backdrop-blur-lg", children: /* @__PURE__ */ t.jsxs("div", { className: "flex flex-wrap gap-2", children: [
|
|
1102
|
+
/* @__PURE__ */ t.jsx("span", { className: "mr-2 text-slate-600 text-sm", children: "非表示のパネル:" }),
|
|
1103
|
+
Ae.map((P) => {
|
|
1104
|
+
const ee = De[P]?.title || P;
|
|
1105
|
+
return /* @__PURE__ */ t.jsxs(
|
|
966
1106
|
"button",
|
|
967
1107
|
{
|
|
968
1108
|
type: "button",
|
|
969
1109
|
onClick: () => o({
|
|
970
|
-
...
|
|
1110
|
+
...s,
|
|
971
1111
|
[P]: !0
|
|
972
1112
|
}),
|
|
973
1113
|
className: "flex items-center space-x-1 rounded-lg border border-sky-300 bg-gradient-to-r from-sky-500 to-indigo-500 px-3 py-1 text-sm text-white shadow-md transition-all duration-200 hover:from-sky-600 hover:to-indigo-600 hover:shadow-lg",
|
|
974
1114
|
children: [
|
|
975
|
-
/* @__PURE__ */
|
|
976
|
-
/* @__PURE__ */
|
|
1115
|
+
/* @__PURE__ */ t.jsx(pt, { className: "h-3 w-3" }),
|
|
1116
|
+
/* @__PURE__ */ t.jsx("span", { children: ee })
|
|
977
1117
|
]
|
|
978
1118
|
},
|
|
979
1119
|
P
|
|
980
1120
|
);
|
|
981
1121
|
})
|
|
982
1122
|
] }) }),
|
|
983
|
-
/* @__PURE__ */
|
|
984
|
-
const ee = f?.[P.id] || P.initialWidth || 350,
|
|
985
|
-
return /* @__PURE__ */
|
|
1123
|
+
/* @__PURE__ */ t.jsx("div", { ref: V, className: "relative min-h-0 flex-1 overflow-hidden", children: /* @__PURE__ */ t.jsx("div", { className: "h-full w-full", style: et, children: /* @__PURE__ */ t.jsx("main", { "data-aqdd-scroll-root": !0, className: "no-scrollbar h-full max-w-full flex-1 overflow-auto px-4 py-6 sm:px-6", children: /* @__PURE__ */ t.jsx("div", { className: "relative flex h-full items-start gap-6 pr-4", children: r.map((P, B) => {
|
|
1124
|
+
const ee = f?.[P.id] || P.initialWidth || 350, me = L && (P.resizable ?? !0);
|
|
1125
|
+
return /* @__PURE__ */ t.jsx(ot, { children: /* @__PURE__ */ t.jsxs(
|
|
986
1126
|
"div",
|
|
987
1127
|
{
|
|
988
|
-
className: `column relative ${P.className || ""} ${
|
|
989
|
-
"data-column":
|
|
1128
|
+
className: `column relative ${P.className || ""} ${L ? "resize-enabled-column" : "auto-width-column"} ${p && g === P.id ? "column-resizing-active" : ""}`,
|
|
1129
|
+
"data-column": B,
|
|
990
1130
|
"data-column-id": P.id,
|
|
991
1131
|
"data-min-width": P.minWidth || 350,
|
|
992
1132
|
"data-max-width": P.maxWidth,
|
|
993
|
-
"data-column-width":
|
|
994
|
-
...
|
|
1133
|
+
"data-column-width": L ? ee : void 0,
|
|
1134
|
+
...L && {
|
|
995
1135
|
style: { "--column-width": `${ee}px` }
|
|
996
1136
|
},
|
|
997
1137
|
children: [
|
|
998
|
-
|
|
999
|
-
|
|
1138
|
+
nt(P.key, B),
|
|
1139
|
+
me && x && C && W && /* @__PURE__ */ t.jsx(Je, { columnId: P.id, onResizeStart: x, onResize: C, onResizeEnd: W, isResizing: p && g === P.id, position: "right", debug: Y })
|
|
1000
1140
|
]
|
|
1001
1141
|
}
|
|
1002
1142
|
) }, P.id);
|
|
1003
1143
|
}) }) }) }) })
|
|
1004
1144
|
] });
|
|
1005
|
-
}
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1145
|
+
};
|
|
1146
|
+
const Mt = [
|
|
1147
|
+
["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
|
|
1148
|
+
["path", { d: "M3 9h18", key: "1pudct" }],
|
|
1149
|
+
["path", { d: "M3 15h18", key: "5xshup" }],
|
|
1150
|
+
["path", { d: "M9 3v18", key: "fh3hqa" }],
|
|
1151
|
+
["path", { d: "M15 3v18", key: "14nvp0" }]
|
|
1152
|
+
], $t = oe("grid-3x3", Mt);
|
|
1153
|
+
const At = [["path", { d: "M5 12h14", key: "1ays0h" }]], Ot = oe("minus", At);
|
|
1154
|
+
const Tt = [
|
|
1155
|
+
["path", { d: "M5 12h14", key: "1ays0h" }],
|
|
1156
|
+
["path", { d: "M12 5v14", key: "s699le" }]
|
|
1157
|
+
], $e = oe("plus", Tt);
|
|
1158
|
+
const _t = [
|
|
1159
|
+
["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
|
|
1160
|
+
["path", { d: "M3 3v5h5", key: "1xhq8a" }]
|
|
1161
|
+
], Rt = oe("rotate-ccw", _t), Qt = ({ columnCount: r, onColumnCountChange: e, onAutoBalance: n, onResetWidths: s, minColumns: o = 2, maxColumns: i = 6, isResizing: u = !1, isResponsiveMode: c = !1, responsiveColumnCount: h }) => {
|
|
1162
|
+
const N = r > o && !c, b = r < i && !c;
|
|
1163
|
+
return /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-slate-200 bg-white/80 px-4 py-2 shadow-sm backdrop-blur-lg", children: [
|
|
1164
|
+
/* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
1165
|
+
/* @__PURE__ */ t.jsx("span", { className: "font-medium text-slate-700 text-sm", children: "カラム数:" }),
|
|
1166
|
+
/* @__PURE__ */ t.jsx(
|
|
1011
1167
|
"button",
|
|
1012
1168
|
{
|
|
1013
1169
|
type: "button",
|
|
1014
|
-
onClick: () =>
|
|
1015
|
-
disabled: !
|
|
1016
|
-
className: `rounded p-1 text-xs transition-colors ${
|
|
1170
|
+
onClick: () => N && e(r - 1),
|
|
1171
|
+
disabled: !N || u,
|
|
1172
|
+
className: `rounded p-1 text-xs transition-colors ${N && !u ? "border border-slate-300 text-slate-600 hover:border-red-300 hover:bg-red-50 hover:text-red-600" : "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`,
|
|
1017
1173
|
title: c ? "レスポンシブモード中:カラム数は自動調整されます" : `カラムを削除 (最小: ${o}列)`,
|
|
1018
|
-
children: /* @__PURE__ */
|
|
1174
|
+
children: /* @__PURE__ */ t.jsx(Ot, { className: "h-3 w-3" })
|
|
1019
1175
|
}
|
|
1020
1176
|
),
|
|
1021
|
-
/* @__PURE__ */
|
|
1177
|
+
/* @__PURE__ */ t.jsxs("div", { className: `min-w-[2rem] rounded border px-3 py-1 text-center font-mono text-sm ${c ? "border-blue-300 bg-blue-50 text-blue-700" : "border-slate-300 bg-slate-100 text-slate-700"}`, children: [
|
|
1022
1178
|
c ? h ?? r : r,
|
|
1023
|
-
c && /* @__PURE__ */
|
|
1179
|
+
c && /* @__PURE__ */ t.jsx("span", { className: "ml-1 text-xs", children: "自動" })
|
|
1024
1180
|
] }),
|
|
1025
|
-
/* @__PURE__ */
|
|
1181
|
+
/* @__PURE__ */ t.jsx(
|
|
1026
1182
|
"button",
|
|
1027
1183
|
{
|
|
1028
1184
|
type: "button",
|
|
1029
|
-
onClick: () =>
|
|
1030
|
-
disabled: !
|
|
1031
|
-
className: `rounded p-1 text-xs transition-colors ${
|
|
1185
|
+
onClick: () => b && e(r + 1),
|
|
1186
|
+
disabled: !b || u,
|
|
1187
|
+
className: `rounded p-1 text-xs transition-colors ${b && !u ? "border border-slate-300 text-slate-600 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600" : "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`,
|
|
1032
1188
|
title: c ? "レスポンシブモード中:カラム数は自動調整されます" : `カラムを追加 (最大: ${i}列)`,
|
|
1033
|
-
children: /* @__PURE__ */
|
|
1189
|
+
children: /* @__PURE__ */ t.jsx($e, { className: "h-3 w-3" })
|
|
1034
1190
|
}
|
|
1035
1191
|
)
|
|
1036
1192
|
] }),
|
|
1037
|
-
/* @__PURE__ */
|
|
1038
|
-
/* @__PURE__ */
|
|
1039
|
-
/* @__PURE__ */
|
|
1193
|
+
/* @__PURE__ */ t.jsx("div", { className: "h-6 w-px bg-slate-300" }),
|
|
1194
|
+
/* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
1195
|
+
/* @__PURE__ */ t.jsxs(
|
|
1040
1196
|
"button",
|
|
1041
1197
|
{
|
|
1042
1198
|
type: "button",
|
|
@@ -1045,162 +1201,162 @@ const Ct = ({
|
|
|
1045
1201
|
className: `flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${u ? "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300" : "border border-slate-300 text-slate-600 hover:border-green-300 hover:bg-green-50 hover:text-green-600"}`,
|
|
1046
1202
|
title: "パネルを全カラムに均等分散",
|
|
1047
1203
|
children: [
|
|
1048
|
-
/* @__PURE__ */
|
|
1049
|
-
/* @__PURE__ */
|
|
1204
|
+
/* @__PURE__ */ t.jsx($t, { className: "h-3 w-3" }),
|
|
1205
|
+
/* @__PURE__ */ t.jsx("span", { children: "バランス" })
|
|
1050
1206
|
]
|
|
1051
1207
|
}
|
|
1052
1208
|
),
|
|
1053
|
-
/* @__PURE__ */
|
|
1209
|
+
/* @__PURE__ */ t.jsxs(
|
|
1054
1210
|
"button",
|
|
1055
1211
|
{
|
|
1056
1212
|
type: "button",
|
|
1057
|
-
onClick:
|
|
1213
|
+
onClick: s,
|
|
1058
1214
|
disabled: u,
|
|
1059
1215
|
className: `flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${u ? "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300" : "border border-slate-300 text-slate-600 hover:border-orange-300 hover:bg-orange-50 hover:text-orange-600"}`,
|
|
1060
1216
|
title: "カラム幅を初期値にリセット",
|
|
1061
1217
|
children: [
|
|
1062
|
-
/* @__PURE__ */
|
|
1063
|
-
/* @__PURE__ */
|
|
1218
|
+
/* @__PURE__ */ t.jsx(Rt, { className: "h-3 w-3" }),
|
|
1219
|
+
/* @__PURE__ */ t.jsx("span", { children: "幅リセット" })
|
|
1064
1220
|
]
|
|
1065
1221
|
}
|
|
1066
1222
|
)
|
|
1067
1223
|
] }),
|
|
1068
|
-
u && /* @__PURE__ */
|
|
1069
|
-
/* @__PURE__ */
|
|
1070
|
-
/* @__PURE__ */
|
|
1224
|
+
u && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1 text-blue-600 text-xs", children: [
|
|
1225
|
+
/* @__PURE__ */ t.jsx("div", { className: "h-2 w-2 animate-pulse rounded-full bg-blue-500" }),
|
|
1226
|
+
/* @__PURE__ */ t.jsx("span", { children: "リサイズ中..." })
|
|
1071
1227
|
] })
|
|
1072
1228
|
] });
|
|
1073
|
-
},
|
|
1074
|
-
const c = r < o && !u, h = r >
|
|
1075
|
-
return /* @__PURE__ */
|
|
1076
|
-
u && /* @__PURE__ */
|
|
1077
|
-
!u && /* @__PURE__ */
|
|
1078
|
-
/* @__PURE__ */
|
|
1229
|
+
}, Kt = ({ columnCount: r, onInsertColumn: e, onDeleteColumn: n, minColumns: s = 1, maxColumns: o = 6, isResizing: i = !1, disabled: u = !1 }) => {
|
|
1230
|
+
const c = r < o && !u, h = r > s && !u;
|
|
1231
|
+
return /* @__PURE__ */ t.jsxs("div", { className: `flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-4 py-2 shadow-sm backdrop-blur-lg ${u ? "bg-slate-100/80 opacity-60" : "bg-white/80"}`, children: [
|
|
1232
|
+
u && /* @__PURE__ */ t.jsx("div", { className: "flex items-center gap-2 text-slate-500 text-xs", children: /* @__PURE__ */ t.jsx("span", { children: "レスポンシブモード有効中:カラム数は自動調整されます" }) }),
|
|
1233
|
+
!u && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
|
|
1234
|
+
/* @__PURE__ */ t.jsx(
|
|
1079
1235
|
"button",
|
|
1080
1236
|
{
|
|
1081
1237
|
type: "button",
|
|
1082
|
-
onClick: () => c &&
|
|
1238
|
+
onClick: () => c && e(0),
|
|
1083
1239
|
disabled: !c || i,
|
|
1084
1240
|
className: `flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${c && !i ? "border-blue-300 text-blue-600 hover:border-blue-500 hover:bg-blue-50" : "cursor-not-allowed border-slate-200 text-slate-300"}`,
|
|
1085
1241
|
title: "この位置に新しいカラムを挿入",
|
|
1086
|
-
children: /* @__PURE__ */
|
|
1242
|
+
children: /* @__PURE__ */ t.jsx($e, { className: "h-4 w-4" })
|
|
1087
1243
|
}
|
|
1088
1244
|
),
|
|
1089
|
-
Array.from({ length: r }, (
|
|
1090
|
-
/* @__PURE__ */
|
|
1091
|
-
/* @__PURE__ */
|
|
1092
|
-
h && !i && /* @__PURE__ */
|
|
1245
|
+
Array.from({ length: r }, (N, b) => /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1", children: [
|
|
1246
|
+
/* @__PURE__ */ t.jsxs("div", { className: "relative flex h-8 w-12 items-center justify-center rounded border border-slate-300 bg-slate-100", children: [
|
|
1247
|
+
/* @__PURE__ */ t.jsx("span", { className: "font-medium font-mono text-slate-700 text-xs", children: b + 1 }),
|
|
1248
|
+
h && !i && /* @__PURE__ */ t.jsx(
|
|
1093
1249
|
"button",
|
|
1094
1250
|
{
|
|
1095
1251
|
type: "button",
|
|
1096
|
-
onClick: () => n(
|
|
1252
|
+
onClick: () => n(b),
|
|
1097
1253
|
className: "absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full border border-red-300 bg-red-100 text-red-600 hover:bg-red-200",
|
|
1098
|
-
title: `カラム ${
|
|
1099
|
-
children: /* @__PURE__ */
|
|
1254
|
+
title: `カラム ${b + 1} を削除`,
|
|
1255
|
+
children: /* @__PURE__ */ t.jsx(Ve, { className: "h-2.5 w-2.5" })
|
|
1100
1256
|
}
|
|
1101
1257
|
)
|
|
1102
1258
|
] }),
|
|
1103
|
-
/* @__PURE__ */
|
|
1259
|
+
/* @__PURE__ */ t.jsx(
|
|
1104
1260
|
"button",
|
|
1105
1261
|
{
|
|
1106
1262
|
type: "button",
|
|
1107
|
-
onClick: () => c &&
|
|
1263
|
+
onClick: () => c && e(b + 1),
|
|
1108
1264
|
disabled: !c || i,
|
|
1109
1265
|
className: `flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${c && !i ? "border-blue-300 text-blue-600 hover:border-blue-500 hover:bg-blue-50" : "cursor-not-allowed border-slate-200 text-slate-300"}`,
|
|
1110
1266
|
title: "この位置に新しいカラムを挿入",
|
|
1111
|
-
children: /* @__PURE__ */
|
|
1267
|
+
children: /* @__PURE__ */ t.jsx($e, { className: "h-4 w-4" })
|
|
1112
1268
|
}
|
|
1113
1269
|
)
|
|
1114
|
-
] }, `column-${
|
|
1270
|
+
] }, `column-${b}`))
|
|
1115
1271
|
] })
|
|
1116
1272
|
] });
|
|
1117
|
-
},
|
|
1118
|
-
/* @__PURE__ */
|
|
1119
|
-
/* @__PURE__ */
|
|
1120
|
-
/* @__PURE__ */
|
|
1273
|
+
}, en = ({ config: r, onConfigChange: e, isVisible: n, onToggleVisibility: s }) => n ? /* @__PURE__ */ t.jsxs("div", { className: "fixed right-4 bottom-4 z-50 max-w-sm rounded-lg border border-gray-300 bg-white p-4 shadow-xl", children: [
|
|
1274
|
+
/* @__PURE__ */ t.jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
|
|
1275
|
+
/* @__PURE__ */ t.jsx("h3", { className: "font-bold text-gray-800 text-sm", children: "🛠️ デバッグ設定" }),
|
|
1276
|
+
/* @__PURE__ */ t.jsx("button", { type: "button", onClick: s, className: "text-gray-500 text-lg hover:text-gray-700", title: "閉じる", children: "✕" })
|
|
1121
1277
|
] }),
|
|
1122
|
-
/* @__PURE__ */
|
|
1123
|
-
/* @__PURE__ */
|
|
1124
|
-
/* @__PURE__ */
|
|
1278
|
+
/* @__PURE__ */ t.jsxs("div", { className: "space-y-2", children: [
|
|
1279
|
+
/* @__PURE__ */ t.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
|
|
1280
|
+
/* @__PURE__ */ t.jsx(
|
|
1125
1281
|
"input",
|
|
1126
1282
|
{
|
|
1127
1283
|
type: "checkbox",
|
|
1128
1284
|
checked: r.showDebugPanel ?? !1,
|
|
1129
|
-
onChange: (o) =>
|
|
1285
|
+
onChange: (o) => e({
|
|
1130
1286
|
...r,
|
|
1131
1287
|
showDebugPanel: o.target.checked
|
|
1132
1288
|
}),
|
|
1133
1289
|
className: "rounded"
|
|
1134
1290
|
}
|
|
1135
1291
|
),
|
|
1136
|
-
/* @__PURE__ */
|
|
1292
|
+
/* @__PURE__ */ t.jsx("span", { children: "デバッグパネル表示" })
|
|
1137
1293
|
] }),
|
|
1138
|
-
/* @__PURE__ */
|
|
1139
|
-
/* @__PURE__ */
|
|
1294
|
+
/* @__PURE__ */ t.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
|
|
1295
|
+
/* @__PURE__ */ t.jsx(
|
|
1140
1296
|
"input",
|
|
1141
1297
|
{
|
|
1142
1298
|
type: "checkbox",
|
|
1143
1299
|
checked: r.showMousePosition ?? !1,
|
|
1144
|
-
onChange: (o) =>
|
|
1300
|
+
onChange: (o) => e({
|
|
1145
1301
|
...r,
|
|
1146
1302
|
showMousePosition: o.target.checked
|
|
1147
1303
|
}),
|
|
1148
1304
|
className: "rounded"
|
|
1149
1305
|
}
|
|
1150
1306
|
),
|
|
1151
|
-
/* @__PURE__ */
|
|
1307
|
+
/* @__PURE__ */ t.jsx("span", { children: "マウス位置表示" })
|
|
1152
1308
|
] }),
|
|
1153
|
-
/* @__PURE__ */
|
|
1154
|
-
/* @__PURE__ */
|
|
1309
|
+
/* @__PURE__ */ t.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
|
|
1310
|
+
/* @__PURE__ */ t.jsx(
|
|
1155
1311
|
"input",
|
|
1156
1312
|
{
|
|
1157
1313
|
type: "checkbox",
|
|
1158
1314
|
checked: r.showPanelSizes ?? !1,
|
|
1159
|
-
onChange: (o) =>
|
|
1315
|
+
onChange: (o) => e({
|
|
1160
1316
|
...r,
|
|
1161
1317
|
showPanelSizes: o.target.checked
|
|
1162
1318
|
}),
|
|
1163
1319
|
className: "rounded"
|
|
1164
1320
|
}
|
|
1165
1321
|
),
|
|
1166
|
-
/* @__PURE__ */
|
|
1322
|
+
/* @__PURE__ */ t.jsx("span", { children: "パネルサイズ情報" })
|
|
1167
1323
|
] }),
|
|
1168
|
-
/* @__PURE__ */
|
|
1169
|
-
/* @__PURE__ */
|
|
1324
|
+
/* @__PURE__ */ t.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
|
|
1325
|
+
/* @__PURE__ */ t.jsx(
|
|
1170
1326
|
"input",
|
|
1171
1327
|
{
|
|
1172
1328
|
type: "checkbox",
|
|
1173
1329
|
checked: r.showPlaceholderInfo ?? !1,
|
|
1174
|
-
onChange: (o) =>
|
|
1330
|
+
onChange: (o) => e({
|
|
1175
1331
|
...r,
|
|
1176
1332
|
showPlaceholderInfo: o.target.checked
|
|
1177
1333
|
}),
|
|
1178
1334
|
className: "rounded"
|
|
1179
1335
|
}
|
|
1180
1336
|
),
|
|
1181
|
-
/* @__PURE__ */
|
|
1337
|
+
/* @__PURE__ */ t.jsx("span", { children: "プレースホルダー詳細" })
|
|
1182
1338
|
] }),
|
|
1183
|
-
/* @__PURE__ */
|
|
1184
|
-
/* @__PURE__ */
|
|
1339
|
+
/* @__PURE__ */ t.jsxs("label", { className: "flex items-center space-x-2 text-sm", children: [
|
|
1340
|
+
/* @__PURE__ */ t.jsx(
|
|
1185
1341
|
"input",
|
|
1186
1342
|
{
|
|
1187
1343
|
type: "checkbox",
|
|
1188
1344
|
checked: r.showDropZoneOutlines ?? !1,
|
|
1189
|
-
onChange: (o) =>
|
|
1345
|
+
onChange: (o) => e({
|
|
1190
1346
|
...r,
|
|
1191
1347
|
showDropZoneOutlines: o.target.checked
|
|
1192
1348
|
}),
|
|
1193
1349
|
className: "rounded"
|
|
1194
1350
|
}
|
|
1195
1351
|
),
|
|
1196
|
-
/* @__PURE__ */
|
|
1352
|
+
/* @__PURE__ */ t.jsx("span", { children: "ドロップゾーン境界" })
|
|
1197
1353
|
] }),
|
|
1198
|
-
/* @__PURE__ */
|
|
1199
|
-
/* @__PURE__ */
|
|
1354
|
+
/* @__PURE__ */ t.jsxs("div", { className: "border-gray-200 border-t pt-2", children: [
|
|
1355
|
+
/* @__PURE__ */ t.jsxs("label", { htmlFor: "log-level-slider", className: "mb-1 block text-sm", children: [
|
|
1200
1356
|
"ログレベル: ",
|
|
1201
1357
|
r.logLevel ?? 0
|
|
1202
1358
|
] }),
|
|
1203
|
-
/* @__PURE__ */
|
|
1359
|
+
/* @__PURE__ */ t.jsx(
|
|
1204
1360
|
"input",
|
|
1205
1361
|
{
|
|
1206
1362
|
id: "log-level-slider",
|
|
@@ -1208,7 +1364,7 @@ const Ct = ({
|
|
|
1208
1364
|
min: "0",
|
|
1209
1365
|
max: "2",
|
|
1210
1366
|
value: r.logLevel ?? 0,
|
|
1211
|
-
onChange: (o) =>
|
|
1367
|
+
onChange: (o) => e({
|
|
1212
1368
|
...r,
|
|
1213
1369
|
logLevel: parseInt(o.target.value, 10)
|
|
1214
1370
|
}),
|
|
@@ -1216,18 +1372,18 @@ const Ct = ({
|
|
|
1216
1372
|
"aria-label": "ログレベル設定"
|
|
1217
1373
|
}
|
|
1218
1374
|
),
|
|
1219
|
-
/* @__PURE__ */
|
|
1220
|
-
/* @__PURE__ */
|
|
1221
|
-
/* @__PURE__ */
|
|
1222
|
-
/* @__PURE__ */
|
|
1375
|
+
/* @__PURE__ */ t.jsxs("div", { className: "mt-1 flex justify-between text-gray-500 text-xs", children: [
|
|
1376
|
+
/* @__PURE__ */ t.jsx("span", { children: "無効" }),
|
|
1377
|
+
/* @__PURE__ */ t.jsx("span", { children: "基本" }),
|
|
1378
|
+
/* @__PURE__ */ t.jsx("span", { children: "詳細" })
|
|
1223
1379
|
] })
|
|
1224
1380
|
] }),
|
|
1225
|
-
/* @__PURE__ */
|
|
1226
|
-
/* @__PURE__ */
|
|
1381
|
+
/* @__PURE__ */ t.jsxs("div", { className: "space-y-2 pt-2", children: [
|
|
1382
|
+
/* @__PURE__ */ t.jsx(
|
|
1227
1383
|
"button",
|
|
1228
1384
|
{
|
|
1229
1385
|
type: "button",
|
|
1230
|
-
onClick: () =>
|
|
1386
|
+
onClick: () => e({
|
|
1231
1387
|
showDebugPanel: !0,
|
|
1232
1388
|
showMousePosition: !0,
|
|
1233
1389
|
showPanelSizes: !0,
|
|
@@ -1239,11 +1395,11 @@ const Ct = ({
|
|
|
1239
1395
|
children: "すべて有効"
|
|
1240
1396
|
}
|
|
1241
1397
|
),
|
|
1242
|
-
/* @__PURE__ */
|
|
1398
|
+
/* @__PURE__ */ t.jsx(
|
|
1243
1399
|
"button",
|
|
1244
1400
|
{
|
|
1245
1401
|
type: "button",
|
|
1246
|
-
onClick: () =>
|
|
1402
|
+
onClick: () => e({
|
|
1247
1403
|
showDebugPanel: !1,
|
|
1248
1404
|
showMousePosition: !1,
|
|
1249
1405
|
showPanelSizes: !1,
|
|
@@ -1257,69 +1413,69 @@ const Ct = ({
|
|
|
1257
1413
|
)
|
|
1258
1414
|
] })
|
|
1259
1415
|
] })
|
|
1260
|
-
] }) : /* @__PURE__ */
|
|
1416
|
+
] }) : /* @__PURE__ */ t.jsx("button", { type: "button", onClick: s, className: "fixed right-4 bottom-4 z-50 rounded-lg bg-gray-800 p-2 text-white shadow-lg transition-colors hover:bg-gray-700", title: "デバッグ設定を開く", children: "🛠️" }), ie = {
|
|
1261
1417
|
prefix: "column",
|
|
1262
1418
|
startIndex: 1,
|
|
1263
1419
|
separator: "_"
|
|
1264
|
-
},
|
|
1265
|
-
const { prefix: n, startIndex:
|
|
1420
|
+
}, je = (r, e = ie) => {
|
|
1421
|
+
const { prefix: n, startIndex: s, separator: o } = e, i = r + s;
|
|
1266
1422
|
return `${n}${o}${i}`;
|
|
1267
|
-
},
|
|
1268
|
-
const { prefix: n, startIndex:
|
|
1423
|
+
}, Qe = (r, e = ie) => Array.from({ length: r }, (n, s) => je(s, e)), Pe = (r, e = ie) => {
|
|
1424
|
+
const { prefix: n, startIndex: s, separator: o } = e, i = `${n}${o}`;
|
|
1269
1425
|
if (!r.startsWith(i))
|
|
1270
1426
|
return null;
|
|
1271
1427
|
const u = r.slice(i.length), c = parseInt(u, 10);
|
|
1272
|
-
return Number.isNaN(c) || c <
|
|
1273
|
-
},
|
|
1274
|
-
const n = r.map((
|
|
1275
|
-
for (let
|
|
1276
|
-
if (n[
|
|
1277
|
-
return
|
|
1278
|
-
return
|
|
1279
|
-
},
|
|
1280
|
-
const o =
|
|
1428
|
+
return Number.isNaN(c) || c < s ? null : c - s;
|
|
1429
|
+
}, tn = (r, e = ie) => Pe(r, e) !== null, nn = (r, e = ie) => {
|
|
1430
|
+
const n = r.map((s) => Pe(s, e)).filter((s) => s !== null).sort((s, o) => s - o);
|
|
1431
|
+
for (let s = 0; s < n.length; s++)
|
|
1432
|
+
if (n[s] !== s)
|
|
1433
|
+
return je(s, e);
|
|
1434
|
+
return je(n.length, e);
|
|
1435
|
+
}, Lt = (r, e = ie) => r.sort((n, s) => {
|
|
1436
|
+
const o = Pe(n, e) ?? -1, i = Pe(s, e) ?? -1;
|
|
1281
1437
|
return o - i;
|
|
1282
|
-
}),
|
|
1438
|
+
}), rn = (r, e = ie) => {
|
|
1283
1439
|
const n = {};
|
|
1284
|
-
return r.forEach((
|
|
1285
|
-
const i =
|
|
1286
|
-
n[
|
|
1440
|
+
return r.forEach((s, o) => {
|
|
1441
|
+
const i = je(o, e);
|
|
1442
|
+
n[s] = i;
|
|
1287
1443
|
}), n;
|
|
1288
|
-
},
|
|
1289
|
-
const
|
|
1444
|
+
}, Wt = (r, e, n = ie) => {
|
|
1445
|
+
const s = [];
|
|
1290
1446
|
Object.values(r).forEach((u) => {
|
|
1291
|
-
|
|
1447
|
+
s.push(...u);
|
|
1292
1448
|
});
|
|
1293
|
-
const o = {}, i =
|
|
1449
|
+
const o = {}, i = Qe(e, n);
|
|
1294
1450
|
return i.forEach((u) => {
|
|
1295
1451
|
o[u] = [];
|
|
1296
|
-
}),
|
|
1297
|
-
const h = c %
|
|
1298
|
-
o[
|
|
1452
|
+
}), s.forEach((u, c) => {
|
|
1453
|
+
const h = c % e, N = i[h];
|
|
1454
|
+
o[N].push(u);
|
|
1299
1455
|
}), o;
|
|
1300
|
-
},
|
|
1456
|
+
}, sn = ({ initialColumns: r, initialPanels: e, debug: n = {}, onLayoutChange: s }) => {
|
|
1301
1457
|
const [o, i] = te(() => {
|
|
1302
1458
|
const f = {};
|
|
1303
|
-
for (const
|
|
1304
|
-
f[
|
|
1459
|
+
for (const x of r)
|
|
1460
|
+
f[x.id] = x.initialWidth || 400;
|
|
1305
1461
|
return {
|
|
1306
1462
|
columns: r,
|
|
1307
1463
|
columnWidths: f,
|
|
1308
1464
|
isResizing: !1,
|
|
1309
1465
|
resizingColumn: null,
|
|
1310
|
-
columnPanels:
|
|
1466
|
+
columnPanels: e,
|
|
1311
1467
|
showInsertPlaceholders: !1
|
|
1312
1468
|
};
|
|
1313
1469
|
}), u = F(0), c = F(0);
|
|
1314
1470
|
K(() => {
|
|
1315
|
-
|
|
1316
|
-
}, [o,
|
|
1471
|
+
s?.(o);
|
|
1472
|
+
}, [o, s]);
|
|
1317
1473
|
const h = w(
|
|
1318
|
-
(f,
|
|
1319
|
-
E(n, 1, "カラム追加:", f.id, "at position:",
|
|
1320
|
-
const W = [...C.columns],
|
|
1321
|
-
W.splice(
|
|
1322
|
-
const
|
|
1474
|
+
(f, x) => {
|
|
1475
|
+
E(n, 1, "カラム追加:", f.id, "at position:", x), i((C) => {
|
|
1476
|
+
const W = [...C.columns], p = x ?? W.length;
|
|
1477
|
+
W.splice(p, 0, f);
|
|
1478
|
+
const g = {
|
|
1323
1479
|
...C.columnWidths,
|
|
1324
1480
|
[f.id]: f.initialWidth || 400
|
|
1325
1481
|
}, m = {
|
|
@@ -1329,60 +1485,60 @@ const Ct = ({
|
|
|
1329
1485
|
return {
|
|
1330
1486
|
...C,
|
|
1331
1487
|
columns: W,
|
|
1332
|
-
columnWidths:
|
|
1488
|
+
columnWidths: g,
|
|
1333
1489
|
columnPanels: m
|
|
1334
1490
|
};
|
|
1335
1491
|
});
|
|
1336
1492
|
},
|
|
1337
1493
|
[n]
|
|
1338
|
-
),
|
|
1494
|
+
), N = w(
|
|
1339
1495
|
(f) => {
|
|
1340
|
-
E(n, 1, "カラム削除:", f), i((
|
|
1341
|
-
const C =
|
|
1496
|
+
E(n, 1, "カラム削除:", f), i((x) => {
|
|
1497
|
+
const C = x.columnPanels[f] || [], W = x.columns.filter((v) => v.id !== f);
|
|
1342
1498
|
if (W.length === 0)
|
|
1343
|
-
return E(n, 1, "警告: 最後のカラムを削除しようとしています"),
|
|
1344
|
-
const
|
|
1345
|
-
C.length > 0 && (p
|
|
1346
|
-
const m = { ...
|
|
1499
|
+
return E(n, 1, "警告: 最後のカラムを削除しようとしています"), x;
|
|
1500
|
+
const p = W[0].id, g = { ...x.columnPanels };
|
|
1501
|
+
C.length > 0 && (g[p] = [...g[p], ...C]), delete g[f];
|
|
1502
|
+
const m = { ...x.columnWidths };
|
|
1347
1503
|
return delete m[f], {
|
|
1348
|
-
...
|
|
1504
|
+
...x,
|
|
1349
1505
|
columns: W,
|
|
1350
1506
|
columnWidths: m,
|
|
1351
|
-
columnPanels:
|
|
1507
|
+
columnPanels: g
|
|
1352
1508
|
};
|
|
1353
1509
|
});
|
|
1354
1510
|
},
|
|
1355
1511
|
[n]
|
|
1356
|
-
),
|
|
1357
|
-
(f,
|
|
1358
|
-
E(n, 1, "カラム移動:", f, "->",
|
|
1359
|
-
const W = [...C.columns], [
|
|
1360
|
-
return W.splice(
|
|
1512
|
+
), b = w(
|
|
1513
|
+
(f, x) => {
|
|
1514
|
+
E(n, 1, "カラム移動:", f, "->", x), i((C) => {
|
|
1515
|
+
const W = [...C.columns], [p] = W.splice(f, 1);
|
|
1516
|
+
return W.splice(x, 0, p), {
|
|
1361
1517
|
...C,
|
|
1362
1518
|
columns: W
|
|
1363
1519
|
};
|
|
1364
1520
|
});
|
|
1365
1521
|
},
|
|
1366
1522
|
[n]
|
|
1367
|
-
),
|
|
1368
|
-
(f,
|
|
1369
|
-
E(n, 2, "リサイズ開始:", f, "at X:",
|
|
1523
|
+
), M = w(
|
|
1524
|
+
(f, x) => {
|
|
1525
|
+
E(n, 2, "リサイズ開始:", f, "at X:", x), u.current = x, c.current = o.columnWidths[f] || 300, i((C) => ({
|
|
1370
1526
|
...C,
|
|
1371
1527
|
isResizing: !0,
|
|
1372
1528
|
resizingColumn: f
|
|
1373
1529
|
}));
|
|
1374
1530
|
},
|
|
1375
1531
|
[n, o.columnWidths]
|
|
1376
|
-
),
|
|
1532
|
+
), T = w(
|
|
1377
1533
|
(f) => {
|
|
1378
|
-
const { resizingColumn:
|
|
1379
|
-
if (!(C &&
|
|
1380
|
-
const W = f - u.current,
|
|
1381
|
-
E(n, 2, "リサイズ中:",
|
|
1382
|
-
...
|
|
1534
|
+
const { resizingColumn: x, isResizing: C } = o;
|
|
1535
|
+
if (!(C && x)) return;
|
|
1536
|
+
const W = f - u.current, p = Math.max(100, Math.min(800, c.current + W));
|
|
1537
|
+
E(n, 2, "リサイズ中:", x, "new width:", p), i((g) => ({
|
|
1538
|
+
...g,
|
|
1383
1539
|
columnWidths: {
|
|
1384
|
-
...
|
|
1385
|
-
[
|
|
1540
|
+
...g.columnWidths,
|
|
1541
|
+
[x]: p
|
|
1386
1542
|
}
|
|
1387
1543
|
}));
|
|
1388
1544
|
},
|
|
@@ -1393,63 +1549,63 @@ const Ct = ({
|
|
|
1393
1549
|
isResizing: !1,
|
|
1394
1550
|
resizingColumn: null
|
|
1395
1551
|
}));
|
|
1396
|
-
}, [n]),
|
|
1397
|
-
(f,
|
|
1398
|
-
E(n, 2, "カラム幅設定:", f,
|
|
1552
|
+
}, [n]), l = w(
|
|
1553
|
+
(f, x) => {
|
|
1554
|
+
E(n, 2, "カラム幅設定:", f, x), i((C) => ({
|
|
1399
1555
|
...C,
|
|
1400
1556
|
columnWidths: {
|
|
1401
1557
|
...C.columnWidths,
|
|
1402
|
-
[f]: Math.max(100, Math.min(800,
|
|
1558
|
+
[f]: Math.max(100, Math.min(800, x))
|
|
1403
1559
|
}
|
|
1404
1560
|
}));
|
|
1405
1561
|
},
|
|
1406
1562
|
[n]
|
|
1407
1563
|
), j = w(() => {
|
|
1408
1564
|
E(n, 1, "カラム幅リセット"), i((f) => {
|
|
1409
|
-
const
|
|
1565
|
+
const x = {};
|
|
1410
1566
|
for (const C of f.columns)
|
|
1411
|
-
|
|
1567
|
+
x[C.id] = C.initialWidth || 400;
|
|
1412
1568
|
return {
|
|
1413
1569
|
...f,
|
|
1414
|
-
columnWidths:
|
|
1570
|
+
columnWidths: x
|
|
1415
1571
|
};
|
|
1416
1572
|
});
|
|
1417
|
-
}, [n]),
|
|
1418
|
-
(f,
|
|
1419
|
-
E(n, 1, "パネル移動:", f, "from",
|
|
1420
|
-
const
|
|
1421
|
-
if (
|
|
1422
|
-
const m = [...
|
|
1423
|
-
m.splice(W, 0, f),
|
|
1573
|
+
}, [n]), k = w(
|
|
1574
|
+
(f, x, C, W) => {
|
|
1575
|
+
E(n, 1, "パネル移動:", f, "from", x, "to", C, "at", W), i((p) => {
|
|
1576
|
+
const g = { ...p.columnPanels };
|
|
1577
|
+
if (x in g && (g[x] = g[x].filter((m) => m !== f)), C in g) {
|
|
1578
|
+
const m = [...g[C]];
|
|
1579
|
+
m.splice(W, 0, f), g[C] = m;
|
|
1424
1580
|
}
|
|
1425
1581
|
return {
|
|
1426
|
-
...
|
|
1427
|
-
columnPanels:
|
|
1582
|
+
...p,
|
|
1583
|
+
columnPanels: g
|
|
1428
1584
|
};
|
|
1429
1585
|
});
|
|
1430
1586
|
},
|
|
1431
1587
|
[n]
|
|
1432
|
-
),
|
|
1433
|
-
(f,
|
|
1434
|
-
E(n, 1, "パネル追加:", f, "to column:",
|
|
1435
|
-
const
|
|
1436
|
-
|
|
1437
|
-
const
|
|
1438
|
-
return
|
|
1588
|
+
), _ = w(
|
|
1589
|
+
(f, x, C) => {
|
|
1590
|
+
E(n, 1, "パネル追加:", f, "to column:", x), i((W) => {
|
|
1591
|
+
const p = { ...W.columnPanels };
|
|
1592
|
+
x in p || (p[x] = []);
|
|
1593
|
+
const g = [...p[x]], m = C ?? g.length;
|
|
1594
|
+
return g.splice(m, 0, f), p[x] = g, {
|
|
1439
1595
|
...W,
|
|
1440
|
-
columnPanels:
|
|
1596
|
+
columnPanels: p
|
|
1441
1597
|
};
|
|
1442
1598
|
});
|
|
1443
1599
|
},
|
|
1444
1600
|
[n]
|
|
1445
|
-
),
|
|
1601
|
+
), R = w(
|
|
1446
1602
|
(f) => {
|
|
1447
|
-
E(n, 1, "パネル削除:", f), i((
|
|
1603
|
+
E(n, 1, "パネル削除:", f), i((x) => {
|
|
1448
1604
|
const C = {};
|
|
1449
|
-
for (const [W,
|
|
1450
|
-
C[W] =
|
|
1605
|
+
for (const [W, p] of Object.entries(x.columnPanels))
|
|
1606
|
+
C[W] = p.filter((g) => g !== f);
|
|
1451
1607
|
return {
|
|
1452
|
-
...
|
|
1608
|
+
...x,
|
|
1453
1609
|
columnPanels: C
|
|
1454
1610
|
};
|
|
1455
1611
|
});
|
|
@@ -1457,54 +1613,54 @@ const Ct = ({
|
|
|
1457
1613
|
[n]
|
|
1458
1614
|
), z = w(
|
|
1459
1615
|
(f) => {
|
|
1460
|
-
E(n, 1, "カラム数更新:", f), i((
|
|
1461
|
-
const C =
|
|
1462
|
-
if (f === C) return
|
|
1463
|
-
const W =
|
|
1464
|
-
|
|
1465
|
-
const m =
|
|
1466
|
-
id:
|
|
1616
|
+
E(n, 1, "カラム数更新:", f), i((x) => {
|
|
1617
|
+
const C = x.columns.length;
|
|
1618
|
+
if (f === C) return x;
|
|
1619
|
+
const W = Wt(x.columnPanels, f, ie), p = Qe(f, ie), g = x.isResizing && x.resizingColumn && !p.includes(x.resizingColumn);
|
|
1620
|
+
g && E(n, 1, "リサイズ中のカラムが削除されるためリサイズを強制終了:", x.resizingColumn);
|
|
1621
|
+
const m = p.map((O, H) => ({
|
|
1622
|
+
id: O,
|
|
1467
1623
|
title: `カラム ${H + 1}`,
|
|
1468
1624
|
minWidth: 350,
|
|
1469
1625
|
maxWidth: 800,
|
|
1470
1626
|
initialWidth: 400,
|
|
1471
1627
|
resizable: !(H === 1 && f === 3)
|
|
1472
|
-
})),
|
|
1473
|
-
if (Object.entries(
|
|
1474
|
-
|
|
1475
|
-
const H =
|
|
1476
|
-
H && H !== 400 ?
|
|
1628
|
+
})), v = {};
|
|
1629
|
+
if (Object.entries(x.columnWidths).some(([, O]) => O !== 400))
|
|
1630
|
+
p.forEach((O) => {
|
|
1631
|
+
const H = x.columnWidths[O];
|
|
1632
|
+
H && H !== 400 ? v[O] = H : v[O] = 400;
|
|
1477
1633
|
});
|
|
1478
1634
|
else {
|
|
1479
|
-
const
|
|
1480
|
-
|
|
1481
|
-
|
|
1635
|
+
const O = C > f ? Object.values(x.columnWidths).reduce((a, d) => a + d, 0) : f * 400, H = Math.max(O / f, 350);
|
|
1636
|
+
p.forEach((a) => {
|
|
1637
|
+
v[a] = H;
|
|
1482
1638
|
});
|
|
1483
1639
|
}
|
|
1484
1640
|
return {
|
|
1485
|
-
...
|
|
1641
|
+
...x,
|
|
1486
1642
|
columns: m,
|
|
1487
1643
|
columnPanels: W,
|
|
1488
|
-
columnWidths:
|
|
1489
|
-
isResizing:
|
|
1490
|
-
resizingColumn:
|
|
1644
|
+
columnWidths: v,
|
|
1645
|
+
isResizing: g ? !1 : x.isResizing,
|
|
1646
|
+
resizingColumn: g ? null : x.resizingColumn
|
|
1491
1647
|
};
|
|
1492
1648
|
});
|
|
1493
1649
|
},
|
|
1494
1650
|
[n]
|
|
1495
1651
|
), Z = w(() => {
|
|
1496
1652
|
E(n, 1, "カラム自動バランス調整"), i((f) => {
|
|
1497
|
-
const
|
|
1498
|
-
for (const
|
|
1499
|
-
for (const
|
|
1500
|
-
|
|
1653
|
+
const x = [];
|
|
1654
|
+
for (const p of Object.keys(f.columnPanels))
|
|
1655
|
+
for (const g of f.columnPanels[p])
|
|
1656
|
+
x.push(g);
|
|
1501
1657
|
const C = {};
|
|
1502
|
-
for (const
|
|
1503
|
-
C[
|
|
1658
|
+
for (const p of f.columns)
|
|
1659
|
+
C[p.id] = [];
|
|
1504
1660
|
let W = 0;
|
|
1505
|
-
for (const
|
|
1506
|
-
const
|
|
1507
|
-
C[
|
|
1661
|
+
for (const p of x) {
|
|
1662
|
+
const g = f.columns[W % f.columns.length].id;
|
|
1663
|
+
C[g].push(p), W += 1;
|
|
1508
1664
|
}
|
|
1509
1665
|
return {
|
|
1510
1666
|
...f,
|
|
@@ -1512,85 +1668,85 @@ const Ct = ({
|
|
|
1512
1668
|
};
|
|
1513
1669
|
});
|
|
1514
1670
|
}, [n]), Y = w(
|
|
1515
|
-
(f) => o.columns.find((
|
|
1671
|
+
(f) => o.columns.find((x) => x.id === f),
|
|
1516
1672
|
[o.columns]
|
|
1517
1673
|
), U = w(() => {
|
|
1518
1674
|
let f = 0;
|
|
1519
|
-
for (const
|
|
1520
|
-
f +=
|
|
1675
|
+
for (const x of Object.values(o.columnWidths))
|
|
1676
|
+
f += x;
|
|
1521
1677
|
return f;
|
|
1522
|
-
}, [o.columnWidths]),
|
|
1523
|
-
i((
|
|
1524
|
-
...
|
|
1678
|
+
}, [o.columnWidths]), $ = w((f) => document.querySelector(`[data-column-id="${f}"]`), []), L = w((f) => {
|
|
1679
|
+
i((x) => ({
|
|
1680
|
+
...x,
|
|
1525
1681
|
showInsertPlaceholders: f
|
|
1526
1682
|
}));
|
|
1527
1683
|
}, []);
|
|
1528
1684
|
return {
|
|
1529
1685
|
layoutState: o,
|
|
1530
1686
|
addColumn: h,
|
|
1531
|
-
removeColumn:
|
|
1532
|
-
moveColumn:
|
|
1533
|
-
startResize:
|
|
1534
|
-
handleResize:
|
|
1687
|
+
removeColumn: N,
|
|
1688
|
+
moveColumn: b,
|
|
1689
|
+
startResize: M,
|
|
1690
|
+
handleResize: T,
|
|
1535
1691
|
endResize: y,
|
|
1536
|
-
setColumnWidth:
|
|
1692
|
+
setColumnWidth: l,
|
|
1537
1693
|
resetColumnWidths: j,
|
|
1538
|
-
movePanel:
|
|
1539
|
-
addPanel:
|
|
1540
|
-
removePanel:
|
|
1694
|
+
movePanel: k,
|
|
1695
|
+
addPanel: _,
|
|
1696
|
+
removePanel: R,
|
|
1541
1697
|
updateColumnCount: z,
|
|
1542
1698
|
autoBalanceColumns: Z,
|
|
1543
1699
|
getColumnById: Y,
|
|
1544
1700
|
getTotalWidth: U,
|
|
1545
|
-
getColumnElement:
|
|
1546
|
-
setShowInsertPlaceholders:
|
|
1701
|
+
getColumnElement: $,
|
|
1702
|
+
setShowInsertPlaceholders: L
|
|
1547
1703
|
};
|
|
1548
|
-
},
|
|
1704
|
+
}, ke = {
|
|
1549
1705
|
triggerDistance: 80,
|
|
1550
1706
|
scrollSpeed: 5,
|
|
1551
1707
|
maxScrollSpeed: 20
|
|
1552
|
-
},
|
|
1708
|
+
}, He = (r, e, n = ke, s) => {
|
|
1553
1709
|
const { triggerDistance: o, scrollSpeed: i, maxScrollSpeed: u } = n;
|
|
1554
1710
|
let c;
|
|
1555
|
-
|
|
1556
|
-
const { left: h, top:
|
|
1557
|
-
let
|
|
1558
|
-
if (r >= h && r <=
|
|
1711
|
+
s ? c = s.getBoundingClientRect() : c = new DOMRect(0, 0, window.innerWidth, window.innerHeight);
|
|
1712
|
+
const { left: h, top: N, right: b, bottom: M } = c;
|
|
1713
|
+
let T = 0, y = 0;
|
|
1714
|
+
if (r >= h && r <= b && e >= N && e <= M) {
|
|
1559
1715
|
if (r < h + o) {
|
|
1560
|
-
const
|
|
1561
|
-
|
|
1562
|
-
} else if (r >
|
|
1563
|
-
const
|
|
1564
|
-
|
|
1716
|
+
const l = Math.max(0, (h + o - r) / o);
|
|
1717
|
+
T = -Math.min(u, i + l * (u - i));
|
|
1718
|
+
} else if (r > b - o) {
|
|
1719
|
+
const l = Math.max(0, (r - (b - o)) / o);
|
|
1720
|
+
T = Math.min(u, i + l * (u - i));
|
|
1565
1721
|
}
|
|
1566
|
-
if (
|
|
1567
|
-
const
|
|
1568
|
-
y = -Math.min(u, i +
|
|
1569
|
-
} else if (
|
|
1570
|
-
const
|
|
1571
|
-
y = Math.min(u, i +
|
|
1722
|
+
if (e < N + o) {
|
|
1723
|
+
const l = Math.max(0, (N + o - e) / o);
|
|
1724
|
+
y = -Math.min(u, i + l * (u - i));
|
|
1725
|
+
} else if (e > M - o) {
|
|
1726
|
+
const l = Math.max(0, (e - (M - o)) / o);
|
|
1727
|
+
y = Math.min(u, i + l * (u - i));
|
|
1572
1728
|
}
|
|
1573
1729
|
}
|
|
1574
|
-
return { x:
|
|
1575
|
-
},
|
|
1576
|
-
(r.x !== 0 || r.y !== 0) && (
|
|
1730
|
+
return { x: T, y };
|
|
1731
|
+
}, zt = (r, e) => {
|
|
1732
|
+
(r.x !== 0 || r.y !== 0) && (e ? e.scrollBy(r.x, r.y) : window.scrollBy(r.x, r.y));
|
|
1577
1733
|
};
|
|
1578
|
-
class
|
|
1579
|
-
constructor(
|
|
1580
|
-
this.intervalId = null, this.isActive = !1, this.config =
|
|
1734
|
+
class Ke {
|
|
1735
|
+
constructor(e = ke, n) {
|
|
1736
|
+
this.intervalId = null, this.isActive = !1, this.config = e, this.scrollElement = n;
|
|
1581
1737
|
}
|
|
1582
|
-
setScrollElement(
|
|
1583
|
-
this.scrollElement =
|
|
1738
|
+
setScrollElement(e) {
|
|
1739
|
+
this.scrollElement = e;
|
|
1584
1740
|
}
|
|
1585
|
-
start(
|
|
1741
|
+
start(e, n) {
|
|
1586
1742
|
this.isActive || (this.isActive = !0, this.intervalId = window.setInterval(() => {
|
|
1587
|
-
const
|
|
1588
|
-
|
|
1743
|
+
const s = He(e, n, this.config, this.scrollElement);
|
|
1744
|
+
zt(s, this.scrollElement);
|
|
1589
1745
|
}, 16));
|
|
1590
1746
|
}
|
|
1591
|
-
update(
|
|
1592
|
-
const
|
|
1593
|
-
(
|
|
1747
|
+
update(e, n) {
|
|
1748
|
+
const s = He(e, n, this.config, this.scrollElement);
|
|
1749
|
+
(s.x !== 0 || s.y !== 0) && !this.isActive ? this.start(e, n) : s.x === 0 && s.y === 0 && this.isActive && this.stop();
|
|
1594
1750
|
}
|
|
1595
1751
|
stop() {
|
|
1596
1752
|
this.intervalId !== null && (clearInterval(this.intervalId), this.intervalId = null), this.isActive = !1;
|
|
@@ -1598,202 +1754,202 @@ class Be {
|
|
|
1598
1754
|
isScrolling() {
|
|
1599
1755
|
return this.isActive;
|
|
1600
1756
|
}
|
|
1601
|
-
updateConfig(
|
|
1602
|
-
this.config =
|
|
1757
|
+
updateConfig(e) {
|
|
1758
|
+
this.config = e;
|
|
1603
1759
|
}
|
|
1604
1760
|
}
|
|
1605
|
-
const
|
|
1761
|
+
const Yt = ({
|
|
1606
1762
|
debugConfig: r,
|
|
1607
|
-
dragState:
|
|
1763
|
+
dragState: e,
|
|
1608
1764
|
customDrag: n,
|
|
1609
|
-
clickState:
|
|
1765
|
+
clickState: s,
|
|
1610
1766
|
dragModes: o,
|
|
1611
1767
|
isMouseDown: i,
|
|
1612
1768
|
dragOverPosition: u,
|
|
1613
1769
|
setCustomDrag: c,
|
|
1614
1770
|
setDragState: h,
|
|
1615
|
-
setDragOverPosition:
|
|
1616
|
-
setOriginalPanelPosition:
|
|
1617
|
-
setClickState:
|
|
1618
|
-
setIsMouseDown:
|
|
1771
|
+
setDragOverPosition: N,
|
|
1772
|
+
setOriginalPanelPosition: b,
|
|
1773
|
+
setClickState: M,
|
|
1774
|
+
setIsMouseDown: T,
|
|
1619
1775
|
findPanelPosition: y,
|
|
1620
|
-
performPanelMove:
|
|
1776
|
+
performPanelMove: l,
|
|
1621
1777
|
showMousePosition: j,
|
|
1622
|
-
updateMousePosition:
|
|
1623
|
-
recordMouseDown:
|
|
1624
|
-
recordClickPosition:
|
|
1778
|
+
updateMousePosition: k,
|
|
1779
|
+
recordMouseDown: _,
|
|
1780
|
+
recordClickPosition: R,
|
|
1625
1781
|
isVirtualClick: z,
|
|
1626
1782
|
calculateMoveDistance: Z,
|
|
1627
1783
|
clearMouseTracking: Y,
|
|
1628
1784
|
resetDragState: U,
|
|
1629
|
-
resetClickState:
|
|
1630
|
-
createDragImage:
|
|
1785
|
+
resetClickState: $,
|
|
1786
|
+
createDragImage: L,
|
|
1631
1787
|
updateDragImagePosition: f,
|
|
1632
|
-
removeDragImage:
|
|
1788
|
+
removeDragImage: x,
|
|
1633
1789
|
handlePlaceholderDragEnter: C,
|
|
1634
1790
|
handlePlaceholderDragLeave: W
|
|
1635
1791
|
}) => {
|
|
1636
|
-
const
|
|
1637
|
-
|
|
1638
|
-
const
|
|
1792
|
+
const p = F(r);
|
|
1793
|
+
p.current = r;
|
|
1794
|
+
const g = F(null), m = F(null), v = F(0), D = F(new Ke(ke));
|
|
1639
1795
|
K(() => {
|
|
1640
1796
|
const d = document.querySelector("main[data-aqdd-scroll-root]");
|
|
1641
|
-
d &&
|
|
1797
|
+
d && D.current.setScrollElement(d);
|
|
1642
1798
|
}, []);
|
|
1643
|
-
const
|
|
1799
|
+
const A = F(u);
|
|
1644
1800
|
K(() => {
|
|
1645
|
-
|
|
1801
|
+
A.current = u, E(p.current, 2, "dragOverPositionRef更新:", u);
|
|
1646
1802
|
}, [u]);
|
|
1647
|
-
const
|
|
1803
|
+
const O = w(
|
|
1648
1804
|
(d) => {
|
|
1649
|
-
if (n.isActive ||
|
|
1805
|
+
if (n.isActive || s.isClicked) {
|
|
1650
1806
|
d.preventDefault();
|
|
1651
|
-
const
|
|
1652
|
-
|
|
1807
|
+
const S = window.getSelection();
|
|
1808
|
+
S && S.rangeCount > 0 && S.removeAllRanges();
|
|
1653
1809
|
}
|
|
1654
1810
|
if (n.isActive) {
|
|
1655
|
-
|
|
1656
|
-
const
|
|
1811
|
+
k(d.clientX, d.clientY), f(d.clientX, d.clientY), D.current.update(d.clientX, d.clientY);
|
|
1812
|
+
const S = document.elementFromPoint(d.clientX, d.clientY), X = S?.closest("[data-drop-zone]");
|
|
1657
1813
|
if (X) {
|
|
1658
1814
|
document.body.classList.add("droppable");
|
|
1659
1815
|
const G = X.getAttribute("data-column-index"), Q = G ? parseInt(G, 10) : null;
|
|
1660
|
-
Q !== null && Q !==
|
|
1661
|
-
const
|
|
1662
|
-
if (
|
|
1663
|
-
const re =
|
|
1664
|
-
if (re &&
|
|
1665
|
-
const se = parseInt(re, 10), ge = parseInt(
|
|
1816
|
+
Q !== null && Q !== e.dragOverColumn && h((re) => ({ ...re, dragOverColumn: Q }));
|
|
1817
|
+
const V = S?.closest("[data-placeholder-index]");
|
|
1818
|
+
if (V) {
|
|
1819
|
+
const re = V.getAttribute("data-placeholder-index"), ce = V.getAttribute("data-placeholder-column");
|
|
1820
|
+
if (re && ce) {
|
|
1821
|
+
const se = parseInt(re, 10), ge = parseInt(ce, 10);
|
|
1666
1822
|
C(ge, se);
|
|
1667
1823
|
}
|
|
1668
1824
|
} else
|
|
1669
1825
|
W();
|
|
1670
1826
|
} else
|
|
1671
|
-
document.body.classList.remove("droppable"),
|
|
1672
|
-
} else if (i &&
|
|
1673
|
-
if (o[
|
|
1674
|
-
E(
|
|
1675
|
-
const X = document.querySelector(`[data-panel-id="${
|
|
1827
|
+
document.body.classList.remove("droppable"), N(null), h((G) => ({ ...G, dragOverColumn: null }));
|
|
1828
|
+
} else if (i && s.isClicked && s.panelId) {
|
|
1829
|
+
if (o[s.panelId] !== "custom" || Z(d.clientX, d.clientY) < 10) return;
|
|
1830
|
+
E(p.current, 1, "🚀 カスタムドラッグ開始 -", s.panelId);
|
|
1831
|
+
const X = document.querySelector(`[data-panel-id="${s.panelId}"]`);
|
|
1676
1832
|
if (X && m.current) {
|
|
1677
|
-
const G = X.getBoundingClientRect(), Q = m.current.x - G.left,
|
|
1678
|
-
|
|
1833
|
+
const G = X.getBoundingClientRect(), Q = m.current.x - G.left, V = m.current.y - G.top;
|
|
1834
|
+
L(s.panelId, Q, V), document.body.classList.add("custom-dragging"), c({
|
|
1679
1835
|
isActive: !0,
|
|
1680
|
-
panelId:
|
|
1836
|
+
panelId: s.panelId,
|
|
1681
1837
|
startX: Q,
|
|
1682
|
-
startY:
|
|
1838
|
+
startY: V
|
|
1683
1839
|
});
|
|
1684
1840
|
}
|
|
1685
|
-
h({ isDragging: !0, draggedPanel:
|
|
1841
|
+
h({ isDragging: !0, draggedPanel: s.panelId, dragOverColumn: null }), b(y(s.panelId)), j(d.clientX, d.clientY), M({ isClicked: !1, panelId: null }), T(!1), Y(), m.current = null, g.current && (clearTimeout(g.current), g.current = null);
|
|
1686
1842
|
}
|
|
1687
1843
|
},
|
|
1688
1844
|
[
|
|
1689
1845
|
n.isActive,
|
|
1690
|
-
|
|
1691
|
-
|
|
1846
|
+
s,
|
|
1847
|
+
e.dragOverColumn,
|
|
1692
1848
|
o,
|
|
1693
1849
|
i,
|
|
1694
|
-
|
|
1850
|
+
k,
|
|
1695
1851
|
h,
|
|
1696
|
-
|
|
1852
|
+
N,
|
|
1697
1853
|
Z,
|
|
1698
1854
|
y,
|
|
1699
1855
|
c,
|
|
1700
|
-
|
|
1856
|
+
b,
|
|
1701
1857
|
j,
|
|
1702
|
-
$,
|
|
1703
1858
|
M,
|
|
1859
|
+
T,
|
|
1704
1860
|
Y,
|
|
1705
|
-
|
|
1861
|
+
L,
|
|
1706
1862
|
f,
|
|
1707
1863
|
C,
|
|
1708
1864
|
W
|
|
1709
1865
|
]
|
|
1710
1866
|
), H = w(
|
|
1711
1867
|
(d) => {
|
|
1712
|
-
if (E(
|
|
1868
|
+
if (E(p.current, 1, "🐭 カスタムドラッグハンドラー - グローバルマウスアップ", {
|
|
1713
1869
|
isActive: n.isActive,
|
|
1714
1870
|
panelId: n.panelId,
|
|
1715
1871
|
dragMode: n.panelId ? o[n.panelId] : "unknown"
|
|
1716
1872
|
}), n.isActive) {
|
|
1717
|
-
|
|
1718
|
-
const
|
|
1719
|
-
if (
|
|
1873
|
+
D.current.stop();
|
|
1874
|
+
const S = A.current;
|
|
1875
|
+
if (S) {
|
|
1720
1876
|
const G = document.elementFromPoint(d.clientX, d.clientY)?.closest("[data-drop-zone]");
|
|
1721
1877
|
if (G) {
|
|
1722
1878
|
const Q = G.getAttribute("data-column-key");
|
|
1723
|
-
Q && o[n.panelId] === "custom" ? (E(
|
|
1879
|
+
Q && o[n.panelId] === "custom" ? (E(p.current, 1, "🔄 カスタムドラッグパネル移動実行:", n.panelId, "→", Q), l(n.panelId, Q, S.insertIndex)) : E(p.current, 1, "🚫 カスタムドラッグパネル移動スキップ:", n.panelId, "モード:", o[n.panelId]);
|
|
1724
1880
|
}
|
|
1725
1881
|
}
|
|
1726
|
-
|
|
1882
|
+
x(), document.body.classList.remove("custom-dragging", "droppable"), U(), v.current = 0;
|
|
1727
1883
|
} else if (z(d.clientX, d.clientY)) {
|
|
1728
1884
|
const X = document.elementFromPoint(d.clientX, d.clientY)?.closest("[data-panel-id]"), G = X?.getAttribute("data-panel-id") ?? null;
|
|
1729
1885
|
if (!(X && G) || o[G] !== "custom") {
|
|
1730
|
-
|
|
1886
|
+
g.current && (clearTimeout(g.current), g.current = null), $(), m.current = null, v.current = 0;
|
|
1731
1887
|
return;
|
|
1732
1888
|
}
|
|
1733
|
-
|
|
1734
|
-
E(
|
|
1735
|
-
}, 2e3)) : (E(
|
|
1736
|
-
E(
|
|
1889
|
+
v.current += 1, s.isClicked === !1 && v.current === 1 ? (E(p.current, 1, "🖱️ 仮想クリック検出 - ドラッグ待機状態へ:", G), M({ isClicked: !0, panelId: G }), g.current = window.setTimeout(() => {
|
|
1890
|
+
E(p.current, 1, "⏳ クリック待機状態を自動解除:", G), $(), m.current = null, v.current = 0;
|
|
1891
|
+
}, 2e3)) : (E(p.current, 1, "🚫 クリック待機状態を解除 - 仮想クリック検出停止:", G), g.current && (clearTimeout(g.current), g.current = null), $(), m.current = null, v.current = 0, g.current = window.setTimeout(() => {
|
|
1892
|
+
E(p.current, 1, "⏳ 仮想クリック検出再開:", G);
|
|
1737
1893
|
}, 2e3));
|
|
1738
|
-
} else
|
|
1739
|
-
i &&
|
|
1894
|
+
} else s.isClicked && ($(), m.current = null, v.current = 0);
|
|
1895
|
+
i && T(!1);
|
|
1740
1896
|
},
|
|
1741
|
-
[n.isActive, n.panelId,
|
|
1742
|
-
),
|
|
1743
|
-
(d,
|
|
1744
|
-
if (o[
|
|
1745
|
-
E(
|
|
1897
|
+
[n.isActive, n.panelId, s, o, i, l, U, $, z, M, T, x]
|
|
1898
|
+
), a = w(
|
|
1899
|
+
(d, S) => {
|
|
1900
|
+
if (o[S] !== "custom") {
|
|
1901
|
+
E(p.current, 1, "🚫 カスタムドラッグモードではない - スキップ:", S);
|
|
1746
1902
|
return;
|
|
1747
1903
|
}
|
|
1748
|
-
|
|
1904
|
+
_(d.clientX, d.clientY), s.isClicked && s.panelId === S && (T(!0), g.current !== null && (clearTimeout(g.current), g.current = null), R(d.clientX, d.clientY), m.current = { x: d.clientX, y: d.clientY });
|
|
1749
1905
|
},
|
|
1750
|
-
[
|
|
1906
|
+
[s, o, _, T, R]
|
|
1751
1907
|
);
|
|
1752
1908
|
return K(() => () => {
|
|
1753
|
-
|
|
1909
|
+
g.current !== null && clearTimeout(g.current), D.current.stop();
|
|
1754
1910
|
}, []), {
|
|
1755
|
-
handleGlobalMouseMove:
|
|
1911
|
+
handleGlobalMouseMove: O,
|
|
1756
1912
|
handleGlobalMouseUp: H,
|
|
1757
|
-
handleMouseDown:
|
|
1913
|
+
handleMouseDown: a
|
|
1758
1914
|
};
|
|
1759
|
-
},
|
|
1760
|
-
const [r,
|
|
1915
|
+
}, Ft = () => {
|
|
1916
|
+
const [r, e] = te({
|
|
1761
1917
|
isDragging: !1,
|
|
1762
1918
|
draggedPanel: null,
|
|
1763
1919
|
dragOverColumn: null
|
|
1764
|
-
}), [n,
|
|
1920
|
+
}), [n, s] = te(null), [o, i] = te(null), [u, c] = te({
|
|
1765
1921
|
isActive: !1,
|
|
1766
1922
|
panelId: "",
|
|
1767
1923
|
startX: 0,
|
|
1768
1924
|
startY: 0
|
|
1769
|
-
}), [h,
|
|
1925
|
+
}), [h, N] = te({
|
|
1770
1926
|
isClicked: !1,
|
|
1771
1927
|
panelId: null
|
|
1772
|
-
}), [
|
|
1928
|
+
}), [b, M] = te({
|
|
1773
1929
|
isTouchDragging: !1,
|
|
1774
1930
|
startX: 0,
|
|
1775
1931
|
startY: 0,
|
|
1776
1932
|
currentX: 0,
|
|
1777
1933
|
currentY: 0,
|
|
1778
1934
|
draggedElement: null
|
|
1779
|
-
}), [
|
|
1780
|
-
c({ isActive: !1, panelId: "", startX: 0, startY: 0 }),
|
|
1935
|
+
}), [T, y] = te(!1), l = w(() => {
|
|
1936
|
+
c({ isActive: !1, panelId: "", startX: 0, startY: 0 }), e({ isDragging: !1, draggedPanel: null, dragOverColumn: null }), s(null), i(null);
|
|
1781
1937
|
}, []), j = w(() => {
|
|
1782
|
-
|
|
1783
|
-
}, []),
|
|
1784
|
-
|
|
1785
|
-
}, []),
|
|
1786
|
-
|
|
1787
|
-
}, []),
|
|
1788
|
-
i(
|
|
1789
|
-
}, []), z = w((
|
|
1790
|
-
c(
|
|
1791
|
-
}, []), Z = w((
|
|
1792
|
-
|
|
1793
|
-
}, []), Y = w((
|
|
1794
|
-
$
|
|
1795
|
-
}, []), U = w((
|
|
1796
|
-
y(
|
|
1938
|
+
N({ isClicked: !1, panelId: null }), y(!1);
|
|
1939
|
+
}, []), k = w(($) => {
|
|
1940
|
+
e($);
|
|
1941
|
+
}, []), _ = w(($) => {
|
|
1942
|
+
s($);
|
|
1943
|
+
}, []), R = w(($) => {
|
|
1944
|
+
i($);
|
|
1945
|
+
}, []), z = w(($) => {
|
|
1946
|
+
c($);
|
|
1947
|
+
}, []), Z = w(($) => {
|
|
1948
|
+
N($);
|
|
1949
|
+
}, []), Y = w(($) => {
|
|
1950
|
+
M($);
|
|
1951
|
+
}, []), U = w(($) => {
|
|
1952
|
+
y($);
|
|
1797
1953
|
}, []);
|
|
1798
1954
|
return {
|
|
1799
1955
|
// States / 状態
|
|
@@ -1802,193 +1958,193 @@ const wt = ({
|
|
|
1802
1958
|
originalPanelPosition: o,
|
|
1803
1959
|
customDrag: u,
|
|
1804
1960
|
clickState: h,
|
|
1805
|
-
touchDragState:
|
|
1806
|
-
isMouseDown:
|
|
1961
|
+
touchDragState: b,
|
|
1962
|
+
isMouseDown: T,
|
|
1807
1963
|
// Stabilized Setters / 安定化されたセッター
|
|
1808
|
-
setDragState:
|
|
1809
|
-
setDragOverPosition:
|
|
1810
|
-
setOriginalPanelPosition:
|
|
1964
|
+
setDragState: k,
|
|
1965
|
+
setDragOverPosition: _,
|
|
1966
|
+
setOriginalPanelPosition: R,
|
|
1811
1967
|
setCustomDrag: z,
|
|
1812
1968
|
setClickState: Z,
|
|
1813
1969
|
setTouchDragState: Y,
|
|
1814
1970
|
setIsMouseDown: U,
|
|
1815
1971
|
// Utility Functions / ユーティリティ関数
|
|
1816
|
-
resetDragState:
|
|
1972
|
+
resetDragState: l,
|
|
1817
1973
|
resetClickState: j
|
|
1818
1974
|
};
|
|
1819
|
-
},
|
|
1820
|
-
const [r,
|
|
1975
|
+
}, Xt = () => {
|
|
1976
|
+
const [r, e] = te({
|
|
1821
1977
|
x: 0,
|
|
1822
1978
|
y: 0,
|
|
1823
1979
|
isVisible: !1
|
|
1824
|
-
}), n = F(null),
|
|
1825
|
-
|
|
1980
|
+
}), n = F(null), s = F(0), o = F(null), i = w((y, l) => {
|
|
1981
|
+
e({ x: y, y: l, isVisible: !0 });
|
|
1826
1982
|
}, []), u = w(() => {
|
|
1827
|
-
|
|
1828
|
-
}, []), c = w((y,
|
|
1829
|
-
|
|
1983
|
+
e((y) => ({ ...y, isVisible: !1 }));
|
|
1984
|
+
}, []), c = w((y, l) => {
|
|
1985
|
+
e((j) => j.x === y && j.y === l ? j : {
|
|
1830
1986
|
x: y,
|
|
1831
|
-
y:
|
|
1987
|
+
y: l,
|
|
1832
1988
|
isVisible: j.isVisible
|
|
1833
1989
|
});
|
|
1834
|
-
}, []), h = w((y,
|
|
1835
|
-
|
|
1836
|
-
}, []),
|
|
1837
|
-
n.current = { x: y, y:
|
|
1838
|
-
}, []),
|
|
1990
|
+
}, []), h = w((y, l) => {
|
|
1991
|
+
s.current = Date.now(), o.current = { x: y, y: l };
|
|
1992
|
+
}, []), N = w((y, l) => {
|
|
1993
|
+
n.current = { x: y, y: l };
|
|
1994
|
+
}, []), b = w((y, l, j = 500, k = 5) => Date.now() - (s.current || 0) >= j || !o.current ? !1 : Math.sqrt((y - o.current.x) ** 2 + (l - o.current.y) ** 2) < k, []), M = w((y, l) => {
|
|
1839
1995
|
if (!n.current)
|
|
1840
1996
|
return 0;
|
|
1841
|
-
const j = Math.abs(y - n.current.x),
|
|
1842
|
-
return Math.sqrt(j * j +
|
|
1843
|
-
}, []),
|
|
1844
|
-
n.current = null,
|
|
1997
|
+
const j = Math.abs(y - n.current.x), k = Math.abs(l - n.current.y);
|
|
1998
|
+
return Math.sqrt(j * j + k * k);
|
|
1999
|
+
}, []), T = w(() => {
|
|
2000
|
+
n.current = null, s.current = 0, o.current = null;
|
|
1845
2001
|
}, []);
|
|
1846
2002
|
return {
|
|
1847
2003
|
mousePosition: r,
|
|
1848
2004
|
lastClickPosition: n.current,
|
|
1849
|
-
mouseDownTime:
|
|
2005
|
+
mouseDownTime: s.current,
|
|
1850
2006
|
mouseDownPosition: o.current,
|
|
1851
2007
|
showMousePosition: i,
|
|
1852
2008
|
hideMousePosition: u,
|
|
1853
2009
|
updateMousePosition: c,
|
|
1854
2010
|
recordMouseDown: h,
|
|
1855
|
-
recordClickPosition:
|
|
1856
|
-
isVirtualClick:
|
|
1857
|
-
calculateMoveDistance:
|
|
1858
|
-
clearMouseTracking:
|
|
2011
|
+
recordClickPosition: N,
|
|
2012
|
+
isVirtualClick: b,
|
|
2013
|
+
calculateMoveDistance: M,
|
|
2014
|
+
clearMouseTracking: T
|
|
1859
2015
|
};
|
|
1860
|
-
},
|
|
2016
|
+
}, Ht = ({
|
|
1861
2017
|
debugConfig: r,
|
|
1862
|
-
dragState:
|
|
2018
|
+
dragState: e,
|
|
1863
2019
|
customDrag: n,
|
|
1864
|
-
dragModes:
|
|
2020
|
+
dragModes: s,
|
|
1865
2021
|
columnPanels: o,
|
|
1866
2022
|
dragOverPosition: i,
|
|
1867
2023
|
originalPanelPosition: u,
|
|
1868
2024
|
setDragState: c,
|
|
1869
2025
|
setDragOverPosition: h,
|
|
1870
|
-
setOriginalPanelPosition:
|
|
1871
|
-
performPanelMove:
|
|
1872
|
-
showMousePosition:
|
|
1873
|
-
updateMousePosition:
|
|
2026
|
+
setOriginalPanelPosition: N,
|
|
2027
|
+
performPanelMove: b,
|
|
2028
|
+
showMousePosition: M,
|
|
2029
|
+
updateMousePosition: T,
|
|
1874
2030
|
resetDragState: y,
|
|
1875
|
-
handlePlaceholderDragEnter:
|
|
2031
|
+
handlePlaceholderDragEnter: l,
|
|
1876
2032
|
handlePlaceholderDragLeave: j,
|
|
1877
|
-
scale:
|
|
2033
|
+
scale: k = 1
|
|
1878
2034
|
}) => {
|
|
1879
|
-
const
|
|
1880
|
-
|
|
1881
|
-
const
|
|
1882
|
-
|
|
1883
|
-
const z = F(
|
|
1884
|
-
z.current =
|
|
2035
|
+
const _ = F(r);
|
|
2036
|
+
_.current = r;
|
|
2037
|
+
const R = F(o);
|
|
2038
|
+
R.current = o;
|
|
2039
|
+
const z = F(e);
|
|
2040
|
+
z.current = e;
|
|
1885
2041
|
const Z = F(i);
|
|
1886
2042
|
Z.current = i;
|
|
1887
2043
|
const Y = F(u);
|
|
1888
2044
|
Y.current = u;
|
|
1889
|
-
const U = F(
|
|
1890
|
-
U.current =
|
|
1891
|
-
const
|
|
2045
|
+
const U = F(k);
|
|
2046
|
+
U.current = k;
|
|
2047
|
+
const $ = F(new Ke(ke));
|
|
1892
2048
|
K(() => {
|
|
1893
|
-
const
|
|
1894
|
-
|
|
2049
|
+
const p = document.querySelector("main[data-aqdd-scroll-root]");
|
|
2050
|
+
p && $.current.setScrollElement(p);
|
|
1895
2051
|
}, []);
|
|
1896
|
-
const
|
|
1897
|
-
(
|
|
2052
|
+
const L = w(
|
|
2053
|
+
(p, g) => {
|
|
1898
2054
|
if (n.isActive) {
|
|
1899
|
-
E(
|
|
2055
|
+
E(_.current, 2, "カスタムドラッグアクティブ中 - 通常ドラッグを無効化:", g), p.preventDefault();
|
|
1900
2056
|
return;
|
|
1901
2057
|
}
|
|
1902
|
-
if (
|
|
1903
|
-
E(
|
|
2058
|
+
if (s[g] === "custom") {
|
|
2059
|
+
E(_.current, 2, "カスタムドラッグモード - 通常ドラッグを無効化:", g), p.preventDefault();
|
|
1904
2060
|
return;
|
|
1905
2061
|
}
|
|
1906
|
-
E(
|
|
1907
|
-
const m = Object.keys(
|
|
1908
|
-
let
|
|
1909
|
-
for (let
|
|
1910
|
-
const
|
|
1911
|
-
if (
|
|
1912
|
-
|
|
2062
|
+
E(_.current, 1, "ドラッグ開始:", g);
|
|
2063
|
+
const m = Object.keys(R.current);
|
|
2064
|
+
let v = null;
|
|
2065
|
+
for (let D = 0; D < m.length; D++) {
|
|
2066
|
+
const A = m[D], O = R.current[A].indexOf(g);
|
|
2067
|
+
if (O !== -1) {
|
|
2068
|
+
v = { columnIndex: D, panelIndex: O };
|
|
1913
2069
|
break;
|
|
1914
2070
|
}
|
|
1915
2071
|
}
|
|
1916
|
-
if (
|
|
1917
|
-
|
|
1918
|
-
const
|
|
1919
|
-
if (
|
|
1920
|
-
const
|
|
1921
|
-
d.removeAttribute("data-panel-id"), d.removeAttribute("id"), d.style.margin = "0", d.style.width = `${H}px`, d.style.height = `${
|
|
1922
|
-
const
|
|
1923
|
-
|
|
2072
|
+
if (N(v), p.dataTransfer) {
|
|
2073
|
+
p.dataTransfer.setData("text/plain", g), p.dataTransfer.effectAllowed = "move";
|
|
2074
|
+
const D = U.current;
|
|
2075
|
+
if (D < 1) {
|
|
2076
|
+
const A = p.currentTarget.closest("[data-panel-id]") ?? p.currentTarget, O = A.getBoundingClientRect(), H = A.offsetWidth, a = A.offsetHeight, d = A.cloneNode(!0);
|
|
2077
|
+
d.removeAttribute("data-panel-id"), d.removeAttribute("id"), d.style.margin = "0", d.style.width = `${H}px`, d.style.height = `${a}px`, d.style.transform = `scale(${D})`, d.style.transformOrigin = "top left";
|
|
2078
|
+
const S = document.createElement("div");
|
|
2079
|
+
S.style.position = "fixed", S.style.top = "0", S.style.left = "-10000px", S.style.width = `${H * D}px`, S.style.height = `${a * D}px`, S.style.overflow = "hidden", S.style.opacity = "0.8", S.style.pointerEvents = "none", S.appendChild(d), document.body.appendChild(S), p.dataTransfer.setDragImage(S, p.clientX - O.left, p.clientY - O.top), requestAnimationFrame(() => S.remove());
|
|
1924
2080
|
}
|
|
1925
2081
|
}
|
|
1926
|
-
|
|
2082
|
+
M(p.clientX, p.clientY), requestAnimationFrame(() => {
|
|
1927
2083
|
c({
|
|
1928
2084
|
isDragging: !0,
|
|
1929
|
-
draggedPanel:
|
|
2085
|
+
draggedPanel: g,
|
|
1930
2086
|
dragOverColumn: null
|
|
1931
2087
|
});
|
|
1932
2088
|
});
|
|
1933
2089
|
},
|
|
1934
|
-
[
|
|
2090
|
+
[s, n.isActive, N, M, c]
|
|
1935
2091
|
), f = w(() => {
|
|
1936
|
-
E(
|
|
1937
|
-
}, [y]),
|
|
1938
|
-
(
|
|
1939
|
-
if (
|
|
1940
|
-
|
|
1941
|
-
const m = document.elementFromPoint(
|
|
1942
|
-
if (
|
|
1943
|
-
const
|
|
1944
|
-
if (
|
|
1945
|
-
const
|
|
1946
|
-
|
|
2092
|
+
E(_.current, 1, "ドラッグ終了"), $.current.stop(), y();
|
|
2093
|
+
}, [y]), x = w(
|
|
2094
|
+
(p, g) => {
|
|
2095
|
+
if (p.preventDefault(), p.dataTransfer.dropEffect = "move", !z.current.isDragging) return;
|
|
2096
|
+
T(p.clientX, p.clientY), g !== z.current.dragOverColumn && c((D) => ({ ...D, dragOverColumn: g }));
|
|
2097
|
+
const m = document.elementFromPoint(p.clientX, p.clientY), v = m?.closest("[data-placeholder-index]");
|
|
2098
|
+
if (v) {
|
|
2099
|
+
const D = v.getAttribute("data-placeholder-index"), A = v.getAttribute("data-placeholder-column");
|
|
2100
|
+
if (D && A) {
|
|
2101
|
+
const O = parseInt(D, 10), H = parseInt(A, 10);
|
|
2102
|
+
l(H, O);
|
|
1947
2103
|
}
|
|
1948
2104
|
} else
|
|
1949
2105
|
m?.closest("[data-drop-zone]") || j();
|
|
1950
2106
|
},
|
|
1951
|
-
[
|
|
2107
|
+
[T, c, l, j]
|
|
1952
2108
|
), C = w(
|
|
1953
|
-
(
|
|
1954
|
-
|
|
1955
|
-
const m =
|
|
1956
|
-
m &&
|
|
2109
|
+
(p, g) => {
|
|
2110
|
+
p.preventDefault();
|
|
2111
|
+
const m = p.dataTransfer.getData("text/plain"), v = Z.current;
|
|
2112
|
+
m && v && (E(_.current, 1, "🎯 ドロップ完了:", {
|
|
1957
2113
|
draggedPanel: m,
|
|
1958
|
-
targetColumn:
|
|
1959
|
-
insertPosition: `カラム${
|
|
1960
|
-
}),
|
|
2114
|
+
targetColumn: g,
|
|
2115
|
+
insertPosition: `カラム${v.columnIndex} - 位置${v.insertIndex}`
|
|
2116
|
+
}), b(m, g, v.insertIndex), h(null), f());
|
|
1961
2117
|
},
|
|
1962
|
-
[
|
|
2118
|
+
[b, h, f]
|
|
1963
2119
|
), W = w(
|
|
1964
|
-
(
|
|
1965
|
-
const
|
|
1966
|
-
m &&
|
|
2120
|
+
(p) => {
|
|
2121
|
+
const g = p.currentTarget, m = p.relatedTarget;
|
|
2122
|
+
m && g.contains(m) || (h(null), c((v) => ({ ...v, dragOverColumn: null })));
|
|
1967
2123
|
},
|
|
1968
2124
|
[h, c]
|
|
1969
2125
|
);
|
|
1970
2126
|
return K(() => {
|
|
1971
|
-
const
|
|
1972
|
-
z.current.isDragging && (
|
|
2127
|
+
const p = (g) => {
|
|
2128
|
+
z.current.isDragging && (T(g.clientX, g.clientY), $.current.update(g.clientX, g.clientY));
|
|
1973
2129
|
};
|
|
1974
|
-
if (
|
|
1975
|
-
return document.addEventListener("dragover",
|
|
1976
|
-
document.removeEventListener("dragover",
|
|
2130
|
+
if (e.isDragging)
|
|
2131
|
+
return document.addEventListener("dragover", p), () => {
|
|
2132
|
+
document.removeEventListener("dragover", p), $.current.stop();
|
|
1977
2133
|
};
|
|
1978
|
-
}, [
|
|
1979
|
-
|
|
2134
|
+
}, [e.isDragging, T]), K(() => () => {
|
|
2135
|
+
$.current.stop();
|
|
1980
2136
|
}, []), {
|
|
1981
|
-
handleDragStart:
|
|
2137
|
+
handleDragStart: L,
|
|
1982
2138
|
handleDragEnd: f,
|
|
1983
|
-
handleDragOverWithInsert:
|
|
2139
|
+
handleDragOverWithInsert: x,
|
|
1984
2140
|
handleDropWithInsert: C,
|
|
1985
2141
|
handleColumnDragLeave: W
|
|
1986
2142
|
};
|
|
1987
|
-
},
|
|
1988
|
-
const [n,
|
|
1989
|
-
|
|
1990
|
-
const
|
|
1991
|
-
(
|
|
2143
|
+
}, qt = (r, e = 1) => {
|
|
2144
|
+
const [n, s] = te(r), [o, i] = te({}), u = F({}), c = F(null), h = F({ x: 0, y: 0 }), N = F(e);
|
|
2145
|
+
N.current = e;
|
|
2146
|
+
const b = w((R) => document.querySelector(`[data-panel-id="${R}"]`), []), M = w(
|
|
2147
|
+
(R, z) => {
|
|
1992
2148
|
const Z = z.getBoundingClientRect(), Y = window.getComputedStyle(z), U = {
|
|
1993
2149
|
width: Math.round(Z.width),
|
|
1994
2150
|
height: Math.round(Z.height),
|
|
@@ -1996,44 +2152,44 @@ const wt = ({
|
|
|
1996
2152
|
y: Math.round(Z.top),
|
|
1997
2153
|
minHeight: Y.minHeight || "auto",
|
|
1998
2154
|
maxHeight: Y.maxHeight || "none"
|
|
1999
|
-
},
|
|
2000
|
-
(
|
|
2001
|
-
...
|
|
2002
|
-
[
|
|
2155
|
+
}, $ = u.current[R];
|
|
2156
|
+
(!$ || Object.keys(U).some((L) => $[L] !== U[L])) && (u.current[R] = U, i((L) => ({
|
|
2157
|
+
...L,
|
|
2158
|
+
[R]: U
|
|
2003
2159
|
})));
|
|
2004
2160
|
},
|
|
2005
2161
|
[]
|
|
2006
2162
|
// setPanelSizes は React の state セッターなので依存配列に含める必要はありません
|
|
2007
|
-
),
|
|
2008
|
-
(
|
|
2009
|
-
const z =
|
|
2010
|
-
z &&
|
|
2163
|
+
), T = w(
|
|
2164
|
+
(R) => {
|
|
2165
|
+
const z = b(R);
|
|
2166
|
+
z && M(R, z);
|
|
2011
2167
|
},
|
|
2012
|
-
[
|
|
2168
|
+
[b, M]
|
|
2013
2169
|
), y = w(
|
|
2014
|
-
(
|
|
2015
|
-
z && requestAnimationFrame(() =>
|
|
2170
|
+
(R, z) => {
|
|
2171
|
+
z && requestAnimationFrame(() => M(R, z));
|
|
2016
2172
|
},
|
|
2017
|
-
[
|
|
2018
|
-
),
|
|
2019
|
-
(
|
|
2020
|
-
const Y =
|
|
2173
|
+
[M]
|
|
2174
|
+
), l = w(
|
|
2175
|
+
(R, z, Z) => {
|
|
2176
|
+
const Y = b(R);
|
|
2021
2177
|
if (!Y || c.current) return;
|
|
2022
|
-
const U =
|
|
2023
|
-
|
|
2178
|
+
const U = N.current, $ = Y.getBoundingClientRect(), L = Y.cloneNode(!0);
|
|
2179
|
+
L.removeAttribute("data-panel-id"), L.style.position = "fixed", L.style.top = "0px", L.style.left = "0px", L.style.width = `${Y.offsetWidth}px`, L.style.height = `${Y.offsetHeight}px`, L.style.pointerEvents = "none", L.style.zIndex = "1000", L.style.opacity = "0.5", L.style.margin = "0", L.style.transition = "none", L.style.boxShadow = "0 8px 32px rgba(0,0,0,0.3)", L.style.transformOrigin = "top left", L.style.transform = `translate(${$.left}px, ${$.top}px) scale(${U})`, L.id = `drag-image-${R}`, document.body.appendChild(L), c.current = L, h.current = { x: z, y: Z };
|
|
2024
2180
|
},
|
|
2025
|
-
[
|
|
2026
|
-
), j = w((
|
|
2181
|
+
[b]
|
|
2182
|
+
), j = w((R, z) => {
|
|
2027
2183
|
if (c.current) {
|
|
2028
|
-
const Z =
|
|
2029
|
-
c.current.style.transform = `translate(${Z}px, ${Y}px) scale(${
|
|
2184
|
+
const Z = R - h.current.x, Y = z - h.current.y;
|
|
2185
|
+
c.current.style.transform = `translate(${Z}px, ${Y}px) scale(${N.current * 1.05})`;
|
|
2030
2186
|
}
|
|
2031
|
-
}, []),
|
|
2187
|
+
}, []), k = w(() => {
|
|
2032
2188
|
c.current && (c.current.remove(), c.current = null);
|
|
2033
|
-
}, []),
|
|
2034
|
-
|
|
2189
|
+
}, []), _ = w((R) => {
|
|
2190
|
+
s((z) => ({
|
|
2035
2191
|
...z,
|
|
2036
|
-
[
|
|
2192
|
+
[R]: !z[R]
|
|
2037
2193
|
}));
|
|
2038
2194
|
}, []);
|
|
2039
2195
|
return {
|
|
@@ -2041,105 +2197,105 @@ const wt = ({
|
|
|
2041
2197
|
panelVisibility: n,
|
|
2042
2198
|
panelSizes: o,
|
|
2043
2199
|
// State update functions / 状態更新関数
|
|
2044
|
-
setPanelVisibility:
|
|
2200
|
+
setPanelVisibility: s,
|
|
2045
2201
|
setPanelSizes: i,
|
|
2046
2202
|
setPanelRef: y,
|
|
2047
|
-
updatePanelSize:
|
|
2048
|
-
togglePanelVisibility:
|
|
2203
|
+
updatePanelSize: T,
|
|
2204
|
+
togglePanelVisibility: _,
|
|
2049
2205
|
// Utility functions / ユーティリティ関数
|
|
2050
|
-
getPanelElement:
|
|
2206
|
+
getPanelElement: b,
|
|
2051
2207
|
// Functions for drag image management / ドラッグイメージ管理用の関数
|
|
2052
|
-
createDragImage:
|
|
2208
|
+
createDragImage: l,
|
|
2053
2209
|
updateDragImagePosition: j,
|
|
2054
|
-
removeDragImage:
|
|
2210
|
+
removeDragImage: k
|
|
2055
2211
|
};
|
|
2056
|
-
},
|
|
2057
|
-
const h = F(
|
|
2058
|
-
h.current =
|
|
2059
|
-
const [
|
|
2060
|
-
y.current =
|
|
2061
|
-
const
|
|
2212
|
+
}, on = ({ initialColumnPanels: r, initialPanelVisibility: e, initialDragModes: n = {}, debugConfig: s, onPanelMove: o, onDragModeChange: i, onColumnPanelsChange: u, scale: c = 1 }) => {
|
|
2213
|
+
const h = F(s);
|
|
2214
|
+
h.current = s;
|
|
2215
|
+
const [N, b] = te(r), [M, T] = te(n), y = F(N);
|
|
2216
|
+
y.current = N;
|
|
2217
|
+
const l = Ft(), j = Xt(), k = qt(e, c), _ = F({
|
|
2062
2218
|
mousemove: null,
|
|
2063
2219
|
mouseup: null
|
|
2064
|
-
}),
|
|
2065
|
-
const
|
|
2066
|
-
for (let
|
|
2067
|
-
const
|
|
2220
|
+
}), R = w((m) => {
|
|
2221
|
+
const v = Object.keys(y.current), D = Lt(v, ie);
|
|
2222
|
+
for (let A = 0; A < D.length; A++) {
|
|
2223
|
+
const O = D[A], H = y.current[O]?.indexOf(m) ?? -1;
|
|
2068
2224
|
if (H !== -1)
|
|
2069
|
-
return { columnIndex:
|
|
2225
|
+
return { columnIndex: A, panelIndex: H };
|
|
2070
2226
|
}
|
|
2071
2227
|
return null;
|
|
2072
2228
|
}, []), z = w(
|
|
2073
|
-
(m,
|
|
2074
|
-
E(h.current, 1, "🔄 パネル移動実行:", m, "→",
|
|
2075
|
-
const
|
|
2229
|
+
(m, v, D) => {
|
|
2230
|
+
E(h.current, 1, "🔄 パネル移動実行:", m, "→", v, "@", D), b((A) => {
|
|
2231
|
+
const O = { ...A }, H = Object.keys(O).find((a) => O[a].includes(m));
|
|
2076
2232
|
if (!H)
|
|
2077
|
-
return console.error("Source column not found for panel:", m),
|
|
2078
|
-
if (!
|
|
2079
|
-
return console.error("Target column not found:",
|
|
2080
|
-
if (H ===
|
|
2081
|
-
const
|
|
2082
|
-
|
|
2233
|
+
return console.error("Source column not found for panel:", m), A;
|
|
2234
|
+
if (!O[v])
|
|
2235
|
+
return console.error("Target column not found:", v), A;
|
|
2236
|
+
if (H === v) {
|
|
2237
|
+
const a = [...O[H]], d = a.indexOf(m), [S] = a.splice(d, 1), X = d < D ? D - 1 : D;
|
|
2238
|
+
a.splice(X, 0, S), O[v] = a;
|
|
2083
2239
|
} else {
|
|
2084
|
-
|
|
2085
|
-
const
|
|
2086
|
-
|
|
2240
|
+
O[H] = O[H].filter((d) => d !== m);
|
|
2241
|
+
const a = [...O[v]];
|
|
2242
|
+
a.splice(D, 0, m), O[v] = a;
|
|
2087
2243
|
}
|
|
2088
|
-
if (E(h.current, 1, "✅ パネル移動完了:", m, "→",
|
|
2089
|
-
u(
|
|
2244
|
+
if (E(h.current, 1, "✅ パネル移動完了:", m, "→", v), u && requestAnimationFrame(() => {
|
|
2245
|
+
u(O);
|
|
2090
2246
|
}), o) {
|
|
2091
|
-
const
|
|
2092
|
-
|
|
2093
|
-
o(m,
|
|
2247
|
+
const a = Object.keys(A).find((d) => A[d].includes(m));
|
|
2248
|
+
a && requestAnimationFrame(() => {
|
|
2249
|
+
o(m, a, v, D);
|
|
2094
2250
|
});
|
|
2095
2251
|
}
|
|
2096
|
-
return
|
|
2252
|
+
return O;
|
|
2097
2253
|
});
|
|
2098
2254
|
},
|
|
2099
2255
|
[u, o]
|
|
2100
2256
|
), Z = w(
|
|
2101
|
-
(m,
|
|
2102
|
-
if (!(
|
|
2103
|
-
const
|
|
2104
|
-
if (
|
|
2105
|
-
E(h.current, 1, `元の位置への挿入をスキップ: カラム${m}, 位置${
|
|
2257
|
+
(m, v) => {
|
|
2258
|
+
if (!(l.dragState.isDragging || l.customDrag.isActive)) return;
|
|
2259
|
+
const D = l.originalPanelPosition;
|
|
2260
|
+
if (D && D.columnIndex === m && (D.panelIndex === v || D.panelIndex + 1 === v)) {
|
|
2261
|
+
E(h.current, 1, `元の位置への挿入をスキップ: カラム${m}, 位置${v}`);
|
|
2106
2262
|
return;
|
|
2107
2263
|
}
|
|
2108
|
-
const
|
|
2109
|
-
(!
|
|
2264
|
+
const A = l.dragOverPosition;
|
|
2265
|
+
(!A || A.columnIndex !== m || A.insertIndex !== v) && (E(h.current, 1, `プレースホルダーエンター: カラム${m}, 位置${v}`), l.setDragOverPosition({ columnIndex: m, insertIndex: v }), l.setDragState((O) => ({ ...O, dragOverColumn: m })));
|
|
2110
2266
|
},
|
|
2111
|
-
[
|
|
2267
|
+
[l]
|
|
2112
2268
|
), Y = w(
|
|
2113
|
-
(m,
|
|
2114
|
-
if (
|
|
2115
|
-
if (
|
|
2116
|
-
E(h.current, 1, "🚫 カスタムドラッグ - プレースホルダーリーブ: ハイライトを解除します。"),
|
|
2117
|
-
else if (
|
|
2118
|
-
const
|
|
2119
|
-
if (
|
|
2120
|
-
const
|
|
2121
|
-
H &&
|
|
2269
|
+
(m, v, D) => {
|
|
2270
|
+
if (l.dragState.isDragging || l.customDrag.isActive) {
|
|
2271
|
+
if (l.customDrag.isActive)
|
|
2272
|
+
E(h.current, 1, "🚫 カスタムドラッグ - プレースホルダーリーブ: ハイライトを解除します。"), l.setDragOverPosition(null);
|
|
2273
|
+
else if (l.dragState.isDragging && m && v !== void 0 && D !== void 0) {
|
|
2274
|
+
const A = l.dragOverPosition;
|
|
2275
|
+
if (A && A.columnIndex === v && A.insertIndex === D) {
|
|
2276
|
+
const O = m.currentTarget, H = m.relatedTarget;
|
|
2277
|
+
H && O.contains(H) || (E(h.current, 1, `ノーマルドラッグ - プレースホルダーリーブ: カラム${v}, 位置${D}。ハイライトを解除します。`), l.setDragOverPosition(null));
|
|
2122
2278
|
}
|
|
2123
2279
|
}
|
|
2124
2280
|
}
|
|
2125
2281
|
},
|
|
2126
|
-
[
|
|
2127
|
-
), U =
|
|
2282
|
+
[l]
|
|
2283
|
+
), U = Yt({
|
|
2128
2284
|
debugConfig: h.current,
|
|
2129
|
-
dragState:
|
|
2130
|
-
customDrag:
|
|
2131
|
-
clickState:
|
|
2132
|
-
dragModes:
|
|
2133
|
-
isMouseDown:
|
|
2134
|
-
originalPanelPosition:
|
|
2135
|
-
dragOverPosition:
|
|
2136
|
-
setCustomDrag:
|
|
2137
|
-
setDragState:
|
|
2138
|
-
setDragOverPosition:
|
|
2139
|
-
setOriginalPanelPosition:
|
|
2140
|
-
setClickState:
|
|
2141
|
-
setIsMouseDown:
|
|
2142
|
-
findPanelPosition:
|
|
2285
|
+
dragState: l.dragState,
|
|
2286
|
+
customDrag: l.customDrag,
|
|
2287
|
+
clickState: l.clickState,
|
|
2288
|
+
dragModes: M,
|
|
2289
|
+
isMouseDown: l.isMouseDown,
|
|
2290
|
+
originalPanelPosition: l.originalPanelPosition,
|
|
2291
|
+
dragOverPosition: l.dragOverPosition,
|
|
2292
|
+
setCustomDrag: l.setCustomDrag,
|
|
2293
|
+
setDragState: l.setDragState,
|
|
2294
|
+
setDragOverPosition: l.setDragOverPosition,
|
|
2295
|
+
setOriginalPanelPosition: l.setOriginalPanelPosition,
|
|
2296
|
+
setClickState: l.setClickState,
|
|
2297
|
+
setIsMouseDown: l.setIsMouseDown,
|
|
2298
|
+
findPanelPosition: R,
|
|
2143
2299
|
performPanelMove: z,
|
|
2144
2300
|
showMousePosition: j.showMousePosition,
|
|
2145
2301
|
updateMousePosition: j.updateMousePosition,
|
|
@@ -2148,179 +2304,188 @@ const wt = ({
|
|
|
2148
2304
|
isVirtualClick: j.isVirtualClick,
|
|
2149
2305
|
calculateMoveDistance: j.calculateMoveDistance,
|
|
2150
2306
|
clearMouseTracking: j.clearMouseTracking,
|
|
2151
|
-
resetDragState:
|
|
2152
|
-
resetClickState:
|
|
2153
|
-
createDragImage:
|
|
2154
|
-
updateDragImagePosition:
|
|
2155
|
-
removeDragImage:
|
|
2307
|
+
resetDragState: l.resetDragState,
|
|
2308
|
+
resetClickState: l.resetClickState,
|
|
2309
|
+
createDragImage: k.createDragImage,
|
|
2310
|
+
updateDragImagePosition: k.updateDragImagePosition,
|
|
2311
|
+
removeDragImage: k.removeDragImage,
|
|
2156
2312
|
handlePlaceholderDragEnter: Z,
|
|
2157
2313
|
handlePlaceholderDragLeave: Y
|
|
2158
|
-
}),
|
|
2314
|
+
}), $ = Ht({
|
|
2159
2315
|
debugConfig: h.current,
|
|
2160
|
-
dragState:
|
|
2161
|
-
customDrag:
|
|
2162
|
-
dragModes:
|
|
2163
|
-
columnPanels:
|
|
2164
|
-
dragOverPosition:
|
|
2165
|
-
originalPanelPosition:
|
|
2166
|
-
setDragState:
|
|
2167
|
-
setDragOverPosition:
|
|
2168
|
-
setOriginalPanelPosition:
|
|
2316
|
+
dragState: l.dragState,
|
|
2317
|
+
customDrag: l.customDrag,
|
|
2318
|
+
dragModes: M,
|
|
2319
|
+
columnPanels: N,
|
|
2320
|
+
dragOverPosition: l.dragOverPosition,
|
|
2321
|
+
originalPanelPosition: l.originalPanelPosition,
|
|
2322
|
+
setDragState: l.setDragState,
|
|
2323
|
+
setDragOverPosition: l.setDragOverPosition,
|
|
2324
|
+
setOriginalPanelPosition: l.setOriginalPanelPosition,
|
|
2169
2325
|
performPanelMove: z,
|
|
2170
2326
|
showMousePosition: j.showMousePosition,
|
|
2171
2327
|
updateMousePosition: j.updateMousePosition,
|
|
2172
|
-
resetDragState:
|
|
2328
|
+
resetDragState: l.resetDragState,
|
|
2173
2329
|
handlePlaceholderDragEnter: Z,
|
|
2174
2330
|
handlePlaceholderDragLeave: Y,
|
|
2175
2331
|
scale: c
|
|
2176
|
-
}),
|
|
2177
|
-
|
|
2332
|
+
}), L = w((m) => {
|
|
2333
|
+
_.current.mousemove && _.current.mousemove(m);
|
|
2178
2334
|
}, []), f = w((m) => {
|
|
2179
|
-
|
|
2335
|
+
_.current.mouseup && _.current.mouseup(m);
|
|
2180
2336
|
}, []);
|
|
2181
|
-
K(() => (E(h.current, 1, "🔧 グローバルイベントリスナー初期化 - refベース管理開始"), document.addEventListener("mousemove",
|
|
2182
|
-
E(h.current, 1, "🔴 グローバルイベントリスナー終了 - refベース管理終了"), document.removeEventListener("mousemove",
|
|
2183
|
-
}), [
|
|
2184
|
-
const m = !
|
|
2185
|
-
if (m ||
|
|
2186
|
-
const
|
|
2187
|
-
E(h.current, 1, `🔧 イベントハンドラー設定開始: ${
|
|
2337
|
+
K(() => (E(h.current, 1, "🔧 グローバルイベントリスナー初期化 - refベース管理開始"), document.addEventListener("mousemove", L), document.addEventListener("mouseup", f), () => {
|
|
2338
|
+
E(h.current, 1, "🔴 グローバルイベントリスナー終了 - refベース管理終了"), document.removeEventListener("mousemove", L), document.removeEventListener("mouseup", f);
|
|
2339
|
+
}), [L, f]), K(() => {
|
|
2340
|
+
const m = !l.clickState.isClicked && Object.entries(M).some(([, D]) => D === "custom"), v = l.clickState.isClicked && l.clickState.panelId;
|
|
2341
|
+
if (m || v) {
|
|
2342
|
+
const D = m ? "パターン1(仮想クリック検出)" : "パターン2,3(ドラッグ準備)";
|
|
2343
|
+
E(h.current, 1, `🔧 イベントハンドラー設定開始: ${D}`), _.current.mousemove = U.handleGlobalMouseMove, _.current.mouseup = U.handleGlobalMouseUp;
|
|
2188
2344
|
} else
|
|
2189
|
-
|
|
2190
|
-
}, [
|
|
2191
|
-
const
|
|
2192
|
-
(m,
|
|
2193
|
-
const
|
|
2194
|
-
|
|
2345
|
+
l.customDrag.isActive || l.dragState.isDragging || (_.current.mousemove = null, _.current.mouseup = null);
|
|
2346
|
+
}, [l.clickState.isClicked, l.clickState.panelId, M, l.customDrag.isActive, l.dragState.isDragging, U.handleGlobalMouseMove, U.handleGlobalMouseUp]);
|
|
2347
|
+
const x = w(
|
|
2348
|
+
(m, v) => {
|
|
2349
|
+
const D = m.touches[0], A = m.currentTarget;
|
|
2350
|
+
l.setTouchDragState({
|
|
2195
2351
|
isTouchDragging: !0,
|
|
2196
|
-
startX:
|
|
2197
|
-
startY:
|
|
2198
|
-
currentX:
|
|
2199
|
-
currentY:
|
|
2200
|
-
draggedElement:
|
|
2201
|
-
}),
|
|
2352
|
+
startX: D.clientX,
|
|
2353
|
+
startY: D.clientY,
|
|
2354
|
+
currentX: D.clientX,
|
|
2355
|
+
currentY: D.clientY,
|
|
2356
|
+
draggedElement: A
|
|
2357
|
+
}), l.setDragState({
|
|
2202
2358
|
isDragging: !0,
|
|
2203
|
-
draggedPanel:
|
|
2359
|
+
draggedPanel: v,
|
|
2204
2360
|
dragOverColumn: null
|
|
2205
2361
|
});
|
|
2206
2362
|
},
|
|
2207
|
-
[
|
|
2363
|
+
[l]
|
|
2208
2364
|
), C = w(
|
|
2209
2365
|
(m) => {
|
|
2210
|
-
if (!
|
|
2366
|
+
if (!l.touchDragState.isTouchDragging) return;
|
|
2211
2367
|
m.preventDefault();
|
|
2212
|
-
const
|
|
2213
|
-
|
|
2214
|
-
...
|
|
2215
|
-
currentX:
|
|
2216
|
-
currentY:
|
|
2368
|
+
const v = m.touches[0];
|
|
2369
|
+
l.setTouchDragState((D) => ({
|
|
2370
|
+
...D,
|
|
2371
|
+
currentX: v.clientX,
|
|
2372
|
+
currentY: v.clientY
|
|
2217
2373
|
}));
|
|
2218
2374
|
},
|
|
2219
|
-
[
|
|
2375
|
+
[l.touchDragState.isTouchDragging, l]
|
|
2220
2376
|
), W = w(
|
|
2221
2377
|
(m) => {
|
|
2222
|
-
|
|
2378
|
+
l.touchDragState.isTouchDragging && (l.setTouchDragState({
|
|
2223
2379
|
isTouchDragging: !1,
|
|
2224
2380
|
startX: 0,
|
|
2225
2381
|
startY: 0,
|
|
2226
2382
|
currentX: 0,
|
|
2227
2383
|
currentY: 0,
|
|
2228
2384
|
draggedElement: null
|
|
2229
|
-
}),
|
|
2385
|
+
}), $.handleDragEnd());
|
|
2230
2386
|
},
|
|
2231
|
-
[
|
|
2232
|
-
),
|
|
2387
|
+
[l.touchDragState.isTouchDragging, l, $]
|
|
2388
|
+
), p = w(
|
|
2233
2389
|
(m) => {
|
|
2234
|
-
E(h.current, 1, "🔄 toggleDragMode called:", { panelId: m }),
|
|
2235
|
-
const
|
|
2390
|
+
E(h.current, 1, "🔄 toggleDragMode called:", { panelId: m }), T((v) => {
|
|
2391
|
+
const A = (v[m] || "normal") === "normal" ? "custom" : "normal", O = { ...v, [m]: A };
|
|
2236
2392
|
if (i)
|
|
2237
2393
|
try {
|
|
2238
|
-
i(m,
|
|
2394
|
+
i(m, A);
|
|
2239
2395
|
} catch (H) {
|
|
2240
2396
|
console.error("🔄 Error in onDragModeChange:", H);
|
|
2241
2397
|
}
|
|
2242
|
-
return
|
|
2398
|
+
return O;
|
|
2243
2399
|
});
|
|
2244
2400
|
},
|
|
2245
2401
|
[i]
|
|
2246
|
-
),
|
|
2247
|
-
m.stopPropagation(), E(h.current, 2, "パネルサイズ情報クリック:",
|
|
2402
|
+
), g = w((m, v) => {
|
|
2403
|
+
m.stopPropagation(), E(h.current, 2, "パネルサイズ情報クリック:", v);
|
|
2248
2404
|
}, []);
|
|
2249
2405
|
return {
|
|
2250
2406
|
// 状態
|
|
2251
|
-
columnPanels:
|
|
2252
|
-
panelVisibility:
|
|
2253
|
-
dragModes:
|
|
2254
|
-
dragState:
|
|
2255
|
-
dragOverPosition:
|
|
2256
|
-
originalPanelPosition:
|
|
2257
|
-
touchDragState:
|
|
2258
|
-
customDrag:
|
|
2259
|
-
clickState:
|
|
2407
|
+
columnPanels: N,
|
|
2408
|
+
panelVisibility: k.panelVisibility,
|
|
2409
|
+
dragModes: M,
|
|
2410
|
+
dragState: l.dragState,
|
|
2411
|
+
dragOverPosition: l.dragOverPosition,
|
|
2412
|
+
originalPanelPosition: l.originalPanelPosition,
|
|
2413
|
+
touchDragState: l.touchDragState,
|
|
2414
|
+
customDrag: l.customDrag,
|
|
2415
|
+
clickState: l.clickState,
|
|
2260
2416
|
mousePosition: j.mousePosition,
|
|
2261
|
-
panelSizes:
|
|
2417
|
+
panelSizes: k.panelSizes,
|
|
2262
2418
|
// 状態更新関数
|
|
2263
|
-
setColumnPanels:
|
|
2264
|
-
setPanelVisibility:
|
|
2265
|
-
setDragModes:
|
|
2266
|
-
setPanelRef:
|
|
2419
|
+
setColumnPanels: b,
|
|
2420
|
+
setPanelVisibility: k.setPanelVisibility,
|
|
2421
|
+
setDragModes: T,
|
|
2422
|
+
setPanelRef: k.setPanelRef,
|
|
2267
2423
|
// イベントハンドラー
|
|
2268
|
-
handleDragStart:
|
|
2269
|
-
handleDragEnd:
|
|
2424
|
+
handleDragStart: $.handleDragStart,
|
|
2425
|
+
handleDragEnd: $.handleDragEnd,
|
|
2270
2426
|
handleMouseDown: U.handleMouseDown,
|
|
2271
|
-
handleTouchStart:
|
|
2427
|
+
handleTouchStart: x,
|
|
2272
2428
|
handleTouchMove: C,
|
|
2273
2429
|
handleTouchEnd: W,
|
|
2274
2430
|
handlePlaceholderDragEnter: Z,
|
|
2275
2431
|
handlePlaceholderDragLeave: Y,
|
|
2276
|
-
handleDragOverWithInsert:
|
|
2277
|
-
handleDropWithInsert:
|
|
2278
|
-
handleColumnDragLeave:
|
|
2279
|
-
handlePanelSizeInfoClick:
|
|
2432
|
+
handleDragOverWithInsert: $.handleDragOverWithInsert,
|
|
2433
|
+
handleDropWithInsert: $.handleDropWithInsert,
|
|
2434
|
+
handleColumnDragLeave: $.handleColumnDragLeave,
|
|
2435
|
+
handlePanelSizeInfoClick: g,
|
|
2280
2436
|
// ユーティリティ関数
|
|
2281
|
-
toggleDragMode:
|
|
2282
|
-
findPanelPosition:
|
|
2437
|
+
toggleDragMode: p,
|
|
2438
|
+
findPanelPosition: R
|
|
2283
2439
|
};
|
|
2284
|
-
},
|
|
2285
|
-
const [i, u] = te(0), c = F(0), h = F(null), [
|
|
2440
|
+
}, an = ({ minColumnWidth: r = 350, defaultColumns: e = 3, maxColumns: n = 6, minColumns: s = 1, currentColumnWidths: o = {} } = {}) => {
|
|
2441
|
+
const [i, u] = te(0), c = F(0), h = F(null), [N, b] = te(!1), M = F(e);
|
|
2286
2442
|
K(() => {
|
|
2287
2443
|
if (typeof window > "u")
|
|
2288
2444
|
return;
|
|
2289
|
-
const
|
|
2290
|
-
const
|
|
2291
|
-
return
|
|
2445
|
+
const l = () => {
|
|
2446
|
+
const k = window.visualViewport?.width ?? 0, _ = document?.documentElement?.clientWidth ?? 0, R = document?.body?.clientWidth ?? 0, z = window.innerWidth ?? 0;
|
|
2447
|
+
return _ > 0 ? Math.floor(_) : k > 0 ? Math.floor(k) : R > 0 ? Math.floor(R) : Math.floor(z);
|
|
2292
2448
|
}, j = () => {
|
|
2293
2449
|
h.current !== null && cancelAnimationFrame(h.current), h.current = requestAnimationFrame(() => {
|
|
2294
|
-
const
|
|
2295
|
-
h.current = null,
|
|
2450
|
+
const k = l();
|
|
2451
|
+
h.current = null, k !== 0 && (Math.abs(c.current - k) < 2 || (c.current = k, u(k)));
|
|
2296
2452
|
});
|
|
2297
2453
|
};
|
|
2298
2454
|
return j(), window.addEventListener("resize", j), window.addEventListener("orientationchange", j), window.visualViewport?.addEventListener("resize", j), () => {
|
|
2299
2455
|
h.current !== null && cancelAnimationFrame(h.current), window.removeEventListener("resize", j), window.removeEventListener("orientationchange", j), window.visualViewport?.removeEventListener("resize", j);
|
|
2300
2456
|
};
|
|
2301
2457
|
}, []);
|
|
2302
|
-
const
|
|
2303
|
-
if (!
|
|
2304
|
-
return
|
|
2305
|
-
const
|
|
2306
|
-
let
|
|
2307
|
-
if (
|
|
2308
|
-
const
|
|
2309
|
-
|
|
2458
|
+
const T = Ue(() => {
|
|
2459
|
+
if (!N || i === 0)
|
|
2460
|
+
return M.current = e, e;
|
|
2461
|
+
const l = Math.max(i - 64, 0), j = 24, k = Object.values(o);
|
|
2462
|
+
let _;
|
|
2463
|
+
if (k.length > 0) {
|
|
2464
|
+
const R = k.reduce((Y, U) => Y + U, 0) / k.length, z = Math.max(r, R);
|
|
2465
|
+
_ = Math.floor((l + j) / (z + j)), k.reduce((Y, U) => Y + U, 0) + (k.length - 1) * j > l && k.length > s && (_ = Math.min(_, k.length - 1));
|
|
2310
2466
|
} else
|
|
2311
|
-
|
|
2312
|
-
return
|
|
2313
|
-
}, [
|
|
2314
|
-
|
|
2467
|
+
_ = Math.floor((l + j) / (r + j));
|
|
2468
|
+
return _ = Math.max(s, Math.min(n, _)), M.current === _ ? M.current : (M.current = _, _);
|
|
2469
|
+
}, [N, i, e, r, n, s, o]), y = w(() => {
|
|
2470
|
+
b((l) => !l);
|
|
2315
2471
|
}, []);
|
|
2316
2472
|
return {
|
|
2317
|
-
responsiveColumnCount:
|
|
2318
|
-
isResponsiveMode:
|
|
2473
|
+
responsiveColumnCount: T,
|
|
2474
|
+
isResponsiveMode: N,
|
|
2319
2475
|
screenWidth: i,
|
|
2320
2476
|
toggleResponsiveMode: y
|
|
2321
2477
|
};
|
|
2322
|
-
}
|
|
2323
|
-
|
|
2478
|
+
};
|
|
2479
|
+
const It = [
|
|
2480
|
+
["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
|
|
2481
|
+
["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
|
|
2482
|
+
["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
|
|
2483
|
+
], Ut = oe("monitor", It);
|
|
2484
|
+
const Bt = [
|
|
2485
|
+
["rect", { width: "14", height: "20", x: "5", y: "2", rx: "2", ry: "2", key: "1yt0o3" }],
|
|
2486
|
+
["path", { d: "M12 18h.01", key: "mhygvu" }]
|
|
2487
|
+
], Vt = oe("smartphone", Bt), ln = ({ isResponsiveMode: r, responsiveColumnCount: e, currentColumnCount: n, screenWidth: s, onToggleResponsive: o }) => /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-slate-300 bg-white/90 px-3 py-1", children: [
|
|
2488
|
+
/* @__PURE__ */ t.jsxs(
|
|
2324
2489
|
"button",
|
|
2325
2490
|
{
|
|
2326
2491
|
type: "button",
|
|
@@ -2328,24 +2493,24 @@ const wt = ({
|
|
|
2328
2493
|
className: `flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${r ? "border border-blue-300 bg-blue-100 text-blue-700" : "border border-slate-300 text-slate-600 hover:bg-blue-50 hover:text-blue-600"}`,
|
|
2329
2494
|
title: r ? "レスポンシブモードを無効化" : "レスポンシブモードを有効化",
|
|
2330
2495
|
children: [
|
|
2331
|
-
r ? /* @__PURE__ */
|
|
2332
|
-
/* @__PURE__ */
|
|
2496
|
+
r ? /* @__PURE__ */ t.jsx(Vt, { className: "h-3 w-3" }) : /* @__PURE__ */ t.jsx(Ut, { className: "h-3 w-3" }),
|
|
2497
|
+
/* @__PURE__ */ t.jsx("span", { children: r ? "レスポンシブ" : "固定" })
|
|
2333
2498
|
]
|
|
2334
2499
|
}
|
|
2335
2500
|
),
|
|
2336
|
-
r && /* @__PURE__ */
|
|
2337
|
-
/* @__PURE__ */
|
|
2338
|
-
|
|
2501
|
+
r && /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1 text-slate-600 text-xs", children: [
|
|
2502
|
+
/* @__PURE__ */ t.jsxs("span", { className: "font-mono", children: [
|
|
2503
|
+
s,
|
|
2339
2504
|
"px"
|
|
2340
2505
|
] }),
|
|
2341
|
-
/* @__PURE__ */
|
|
2342
|
-
/* @__PURE__ */
|
|
2343
|
-
|
|
2506
|
+
/* @__PURE__ */ t.jsx("span", { children: "→" }),
|
|
2507
|
+
/* @__PURE__ */ t.jsxs("span", { className: "font-semibold text-blue-600", children: [
|
|
2508
|
+
e,
|
|
2344
2509
|
"列"
|
|
2345
2510
|
] }),
|
|
2346
|
-
|
|
2511
|
+
e !== n && /* @__PURE__ */ t.jsx("span", { className: "text-orange-600", children: "(変更予定)" })
|
|
2347
2512
|
] })
|
|
2348
|
-
] }),
|
|
2513
|
+
] }), cn = {
|
|
2349
2514
|
showDebugPanel: !1,
|
|
2350
2515
|
showMousePosition: !1,
|
|
2351
2516
|
showPanelSizes: !1,
|
|
@@ -2354,37 +2519,37 @@ const wt = ({
|
|
|
2354
2519
|
logLevel: 0
|
|
2355
2520
|
};
|
|
2356
2521
|
export {
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
|
|
2522
|
+
Qt as ColumnControlPanel,
|
|
2523
|
+
Kt as ColumnInsertPanel,
|
|
2524
|
+
ie as DEFAULT_COLUMN_ID_CONFIG,
|
|
2525
|
+
cn as DEFAULT_DEBUG_CONFIG,
|
|
2526
|
+
ke as DEFAULT_EDGE_SCROLL_CONFIG,
|
|
2527
|
+
en as DebugControlPanel,
|
|
2528
|
+
Jt as DragDropLayout,
|
|
2529
|
+
Ge as DropZoneDebugOverlay,
|
|
2530
|
+
Ke as EdgeScrollManager,
|
|
2531
|
+
Ze as InsertPlaceholder,
|
|
2532
|
+
Dt as PanelSizeDisplay,
|
|
2533
|
+
Gt as ResizableColumn,
|
|
2534
|
+
Je as ResizeHandle,
|
|
2535
|
+
ln as ResponsiveControl,
|
|
2536
|
+
He as calculateScrollVector,
|
|
2537
|
+
rn as createColumnIdMapping,
|
|
2373
2538
|
E as debugLog,
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2381
|
-
|
|
2382
|
-
|
|
2383
|
-
|
|
2384
|
-
|
|
2385
|
-
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
|
|
2389
|
-
|
|
2539
|
+
je as generateColumnId,
|
|
2540
|
+
Qe as generateColumnIds,
|
|
2541
|
+
nn as getNextColumnId,
|
|
2542
|
+
tn as isValidColumnId,
|
|
2543
|
+
Wt as normalizeColumnPanels,
|
|
2544
|
+
Pe as parseColumnId,
|
|
2545
|
+
zt as performScroll,
|
|
2546
|
+
Lt as sortColumnIds,
|
|
2547
|
+
sn as useColumnLayout,
|
|
2548
|
+
Yt as useCustomDragHandlers,
|
|
2549
|
+
on as useDragDropColumns,
|
|
2550
|
+
Ft as useDragDropState,
|
|
2551
|
+
Xt as useMouseTracking,
|
|
2552
|
+
Ht as useNormalDragHandlers,
|
|
2553
|
+
qt as usePanelManagement,
|
|
2554
|
+
an as useResponsiveColumns
|
|
2390
2555
|
};
|