Skip to content

Commit b02aefe

Browse files
yunbookfyunbookf
committed
feat: enhance drag and gesture indicators with improved styles and effects
1 parent 91fab94 commit b02aefe

File tree

7 files changed

+21
-14
lines changed

7 files changed

+21
-14
lines changed

‎dist/index.esm.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -645,7 +645,8 @@ function drag(e, el, opt) {
645645
const rect = el.getBoundingClientRect();
646646
// --- 创建拖拽指示器 ---
647647
dragEl = document.createElement('div');
648-
dragEl.style.cssText = `position:fixed;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;height:${rect.height}px;background:rgba(0,0,0,0.1);border:1px dashed #666;pointer-events:none;z-index:999999;`;
648+
dragEl.style.cssText = `position:fixed;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;height:${rect.height}px;background:rgba(255,255,255,.8);border:1px dashed rgba(0,0,0,.8);filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));pointer-events:none;z-index:999999;`;
649+
dragEl.style.borderRadius = getComputedStyle(el).borderRadius;
649650
document.body.appendChild(dragEl);
650651
otop = rect.top;
651652
oleft = rect.left;
@@ -861,8 +862,8 @@ function getGestureEl() {
861862
if (!gestureEl) {
862863
gestureEl = document.createElement('div');
863864
gestureEl.className = 'pointer-gesture';
864-
gestureEl.style.cssText = `position:fixed;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.3);pointer-events:none;z-index:999999;opacity:0;transition:opacity 0.2s;transform-origin:center;`;
865865
document.body.appendChild(gestureEl);
866+
gestureEl.insertAdjacentHTML('afterend', `<style>.pointer-gesture{position:fixed;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,.9);pointer-events:none;z-index:999999;opacity:0;transition:opacity 0.2s;transform-origin:center;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));}.pointer-gesture-done::before{content:'';background:rgba(255,255,255,.7);border-radius:50%;width:10px;height:10px;}</style>`);
866867
}
867868
return gestureEl;
868869
}
@@ -949,7 +950,7 @@ function gesture(oe, before, handler) {
949950
offset = (dir === 'top' || dir === 'left') ? pos - origin : origin - pos;
950951
offset = Math.max(0, Math.min(90, offset));
951952
g.style.opacity = offset > 0 ? '1' : '0';
952-
g.classList.toggle('done', offset >= 90);
953+
g.classList.toggle('pointer-gesture-done', offset >= 90);
953954
updateGestureStyle(rect, dir, offset);
954955
},
955956
end: () => {
@@ -1009,7 +1010,7 @@ function gesture(oe, before, handler) {
10091010
}
10101011
g.style.opacity = '1';
10111012
let offset = Math.min(90, gestureWheel.offset / 1.38);
1012-
g.classList.toggle('done', offset >= 90);
1013+
g.classList.toggle('pointer-gesture-done', offset >= 90);
10131014
updateGestureStyle(rect, gestureWheel.dir, offset);
10141015
clearTimeout(gestureWheel.timer);
10151016
if (offset < 90) {

‎dist/index.umd.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -651,7 +651,8 @@
651651
const rect = el.getBoundingClientRect();
652652
// --- 创建拖拽指示器 ---
653653
dragEl = document.createElement('div');
654-
dragEl.style.cssText = `position:fixed;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;height:${rect.height}px;background:rgba(0,0,0,0.1);border:1px dashed #666;pointer-events:none;z-index:999999;`;
654+
dragEl.style.cssText = `position:fixed;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;height:${rect.height}px;background:rgba(255,255,255,.8);border:1px dashed rgba(0,0,0,.8);filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));pointer-events:none;z-index:999999;`;
655+
dragEl.style.borderRadius = getComputedStyle(el).borderRadius;
655656
document.body.appendChild(dragEl);
656657
otop = rect.top;
657658
oleft = rect.left;
@@ -867,8 +868,8 @@
867868
if (!gestureEl) {
868869
gestureEl = document.createElement('div');
869870
gestureEl.className = 'pointer-gesture';
870-
gestureEl.style.cssText = `position:fixed;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.3);pointer-events:none;z-index:999999;opacity:0;transition:opacity 0.2s;transform-origin:center;`;
871871
document.body.appendChild(gestureEl);
872+
gestureEl.insertAdjacentHTML('afterend', `<style>.pointer-gesture{position:fixed;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,.9);pointer-events:none;z-index:999999;opacity:0;transition:opacity 0.2s;transform-origin:center;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));}.pointer-gesture-done::before{content:'';background:rgba(255,255,255,.7);border-radius:50%;width:10px;height:10px;}</style>`);
872873
}
873874
return gestureEl;
874875
}
@@ -955,7 +956,7 @@
955956
offset = (dir === 'top' || dir === 'left') ? pos - origin : origin - pos;
956957
offset = Math.max(0, Math.min(90, offset));
957958
g.style.opacity = offset > 0 ? '1' : '0';
958-
g.classList.toggle('done', offset >= 90);
959+
g.classList.toggle('pointer-gesture-done', offset >= 90);
959960
updateGestureStyle(rect, dir, offset);
960961
},
961962
end: () => {
@@ -1015,7 +1016,7 @@
10151016
}
10161017
g.style.opacity = '1';
10171018
let offset = Math.min(90, gestureWheel.offset / 1.38);
1018-
g.classList.toggle('done', offset >= 90);
1019+
g.classList.toggle('pointer-gesture-done', offset >= 90);
10191020
updateGestureStyle(rect, gestureWheel.dir, offset);
10201021
clearTimeout(gestureWheel.timer);
10211022
if (offset < 90) {

‎dist/index.umd.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/test/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,14 +326,18 @@ <h2>resize - Resize</h2>
326326
<div class="demo-area" id="resize-area">
327327
<div class="resizable" id="resize-box">
328328
Resize me
329+
<!--
329330
<div class="resize-handle lt" data-border="lt"></div>
330331
<div class="resize-handle t" data-border="t"></div>
331332
<div class="resize-handle tr" data-border="tr"></div>
333+
-->
332334
<div class="resize-handle r" data-border="r"></div>
333335
<div class="resize-handle rb" data-border="rb"></div>
334336
<div class="resize-handle b" data-border="b"></div>
337+
<!--
335338
<div class="resize-handle bl" data-border="bl"></div>
336339
<div class="resize-handle l" data-border="l"></div>
340+
-->
337341
</div>
338342
</div>
339343
<div class="log" id="resize-log">Size: 120 x 80</div>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
"devDependencies": {
4646
"@litert/eslint-plugin-rules": "^0.3.1",
4747
"@rollup/plugin-terser": "^0.4.4",
48-
"@rollup/plugin-typescript": "^12.1.2",
48+
"@rollup/plugin-typescript": "^12.3.0",
4949
"rollup": "^4.53.3",
5050
"ts-node": "^10.9.2",
5151
"tslib": "^2.8.1",

‎src/drag.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@ export function drag(e: PointerEvent, el: HTMLElement, opt?: types.IDragOptions)
6363
const rect = el.getBoundingClientRect();
6464
// --- 创建拖拽指示器 ---
6565
dragEl = document.createElement('div');
66-
dragEl.style.cssText = `position:fixed;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;height:${rect.height}px;background:rgba(0,0,0,0.1);border:1px dashed #666;pointer-events:none;z-index:999999;`;
66+
dragEl.style.cssText = `position:fixed;left:${rect.left}px;top:${rect.top}px;width:${rect.width}px;height:${rect.height}px;background:rgba(255,255,255,.8);border:1px dashed rgba(0,0,0,.8);filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));pointer-events:none;z-index:999999;`;
67+
dragEl.style.borderRadius = getComputedStyle(el).borderRadius;
6768
document.body.appendChild(dragEl);
6869
otop = rect.top;
6970
oleft = rect.left;

‎src/gesture.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,8 @@ function getGestureEl(): HTMLElement {
4343
if (!gestureEl) {
4444
gestureEl = document.createElement('div');
4545
gestureEl.className = 'pointer-gesture';
46-
gestureEl.style.cssText = `position:fixed;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.3);pointer-events:none;z-index:999999;opacity:0;transition:opacity 0.2s;transform-origin:center;`;
4746
document.body.appendChild(gestureEl);
47+
gestureEl.insertAdjacentHTML('afterend', `<style>.pointer-gesture{position:fixed;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.7);border:1px solid rgba(255,255,255,.9);pointer-events:none;z-index:999999;opacity:0;transition:opacity 0.2s;transform-origin:center;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));}.pointer-gesture-done::before{content:'';background:rgba(255,255,255,.7);border-radius:50%;width:10px;height:10px;}</style>`);
4848
}
4949
return gestureEl;
5050
}
@@ -143,7 +143,7 @@ export function gesture(
143143
offset = (dir === 'top' || dir === 'left') ? pos - origin : origin - pos;
144144
offset = Math.max(0, Math.min(90, offset));
145145
g.style.opacity = offset > 0 ? '1' : '0';
146-
g.classList.toggle('done', offset >= 90);
146+
g.classList.toggle('pointer-gesture-done', offset >= 90);
147147
updateGestureStyle(rect, dir, offset);
148148
},
149149
end: () => {
@@ -203,7 +203,7 @@ export function gesture(
203203
}
204204
g.style.opacity = '1';
205205
let offset = Math.min(90, gestureWheel.offset / 1.38);
206-
g.classList.toggle('done', offset >= 90);
206+
g.classList.toggle('pointer-gesture-done', offset >= 90);
207207
updateGestureStyle(rect, gestureWheel.dir, offset);
208208
clearTimeout(gestureWheel.timer);
209209
if (offset < 90) {

0 commit comments

Comments
 (0)