Skip to content

Commit

Permalink
fix: fix zero size line #117
Browse files Browse the repository at this point in the history
  • Loading branch information
@daybrush
daybrush committed Jan 11, 2023
1 parent bce375d commit b2ad11c
Show file tree
Hide file tree
Showing 3 changed files with 199 additions and 84 deletions.
12 changes: 7 additions & 5 deletions packages/selecto/src/SelectoManager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -485,14 +485,15 @@ class Selecto extends EventEmitter<SelectoEvents> {
private hitTest(
selectRect: Rect,
data: any,
gestoEvent?: any,
) {
const { hitRate, selectByClick } = this.options;
const { left, top, right, bottom } = selectRect;
const innerGroups: Record<string | number, Record<string | number, InnerGroup>> = data.innerGroups;
const innerWidth = data.innerWidth;
const innerHeight = data.innerHeight;
const clientX = data.clientX;
const clientY = data.clientY;
const clientX = gestoEvent?.clientX;
const clientY = gestoEvent?.clientY;
const ignoreClick = data.ignoreClick;
const rectPoints = [
[left, top],
Expand All @@ -502,7 +503,7 @@ class Selecto extends EventEmitter<SelectoEvents> {
];
const hitRateValue = splitUnit(`${hitRate}`);

const isHit = (points: number[][]) => {
const isHit = (points: number[][], el: Element) => {
const inArea = ignoreClick ? false : isInside([clientX, clientY], points);

if (selectByClick && inArea) {
Expand Down Expand Up @@ -543,7 +544,7 @@ class Selecto extends EventEmitter<SelectoEvents> {
const selectablePoints: number[][][] = data.selectablePoints;

return selectableTargets.filter((_, i) => {
return isHit(selectablePoints[i]);
return isHit(selectablePoints[i], selectableTargets[i]);
});
}
let selectedTargets: Array<HTMLElement | SVGElement> = [];
Expand All @@ -567,7 +568,7 @@ class Selecto extends EventEmitter<SelectoEvents> {
const { points, targets } = group;

points.forEach((nextPoints, i) => {
if (isHit(nextPoints)) {
if (isHit(nextPoints, targets[i])) {
selectedTargets.push(targets[i]);
}
});
Expand Down Expand Up @@ -1004,6 +1005,7 @@ class Selecto extends EventEmitter<SelectoEvents> {
const passedTargets = this.hitTest(
rect,
data,
e,
);
selectedTargets = passTargets(
data.startPassedTargets,
Expand Down
170 changes: 91 additions & 79 deletions packages/selecto/test/manual/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,42 @@
<!DOCTYPE html>
<html>
<style>
html,body {
position: relative;
height: 100%;
margin: 0;
padding: 0;
}
.target, .target2 {
position: absolute;
background: #faa;
box-sizing: border-box;
}
.target.selected {
border: 4px solid #f55;
}
.button {
position: absolute;
left: 500px;
top: 50px;
background: #eee;
padding: 15px 40px;
display: inline-block;
border-radius: 5px;
font-weight: bold;
color: #444;
}
.button.selected {
color: #fff;
background: #66d;
}
</style>
<style>
html,
body {
position: relative;
height: 100%;
margin: 0;
padding: 0;
}

.target,
.target2 {
position: absolute;
background: #faa;
box-sizing: border-box;
}

.target.selected {
border: 4px solid #f55;
}

.button {
position: absolute;
left: 500px;
top: 50px;
background: #eee;
padding: 15px 40px;
display: inline-block;
border-radius: 5px;
font-weight: bold;
color: #444;
}

.button.selected {
color: #fff;
background: #66d;
}
</style>

<body>
<div class="button"> Shift </div>
Expand All @@ -43,60 +49,66 @@
<div class="target2" style="top: 330px; left: 80px; width: 120px; height: 120px" contenteditable="true">T7</div>


<svg>
<line class="target" x1="50" x2="50" y1="0" y2="50" stroke-width="10" stroke="#000000"></line>
</svg>

</body>
<script src="../../dist/selecto.js"></script>

<div class="hi"></div>
<script>

const selecto = new Selecto({
container: document.body,
// rootContainer: document.body,
// boundContainer: true,
// ratio: 1,
// dragCondition: () => false,
hitRate: 40,
selectableTargets: [".target"],
selectFromInside: false,
selectByClick: true,
// clickBySelectEnd: true,
checkInput: true,
preventDragFromInside: false,
toggleContinueSelect: "shift",
continueSelectWithoutDeselect: true,
}).on("dragStart", e => {
console.log("ds", e.inputEvent.target);
}).on("drag", e => {
selecto.findSelectableTargets();
}).on("selectStart", e => {
console.log("start", e);
e.added.forEach(el => {
el.classList.add("selected");
});
e.removed.forEach(el => {
el.classList.remove("selected");
});
}).on("selectStart", () => {
setTimeout(() => {
document.body.insertAdjacentHTML("beforeend", `<div class="target" style="top: 300px; left: 50px; width: 50px; height: 50px">T6</div>`);
});
}).on("select", e => {
console.log(e.removed, e.added);
}).on("selectEnd", e => {
if (e.isDouble) {
console.log("dblclick");
}
console.log("end", e);
e.afterAdded.forEach(el => {
el.classList.add("selected");
});
e.afterRemoved.forEach(el => {
el.classList.remove("selected");
const selecto = new Selecto({
container: document.body,
// rootContainer: document.body,
// boundContainer: true,
// ratio: 1,
// dragCondition: () => false,
hitRate: 0,
ratio: 0,
selectableTargets: [".target"],
selectFromInside: false,
selectByClick: true,
// clickBySelectEnd: true,
// checkInput: true,
// preventDragFromInside: false,
toggleContinueSelect: "shift",
// continueSelectWithoutDeselect: true,
}).on("dragStart", e => {
console.log("ds", e.inputEvent.target);
}).on("drag", e => {
selecto.findSelectableTargets();
}).on("selectStart", e => {
console.log("start", e);
e.added.forEach(el => {
el.classList.add("selected");
});
e.removed.forEach(el => {
el.classList.remove("selected");
});
}).on("selectStart", () => {
setTimeout(() => {
document.body.insertAdjacentHTML("beforeend", `<div class="target" style="top: 300px; left: 50px; width: 50px; height: 50px">T6</div>`);
});
}).on("select", e => {
console.log(e.removed, e.added);
}).on("selectEnd", e => {
if (e.isDouble) {
console.log("dblclick");
}
console.log("end", e);
e.afterAdded.forEach(el => {
el.classList.add("selected");
});
e.afterRemoved.forEach(el => {
el.classList.remove("selected");
});
}).on("keydown", () => {
document.querySelector(".button").classList.add("selected");
}).on("keyup", () => {
document.querySelector(".button").classList.remove("selected");
});
}).on("keydown", () => {
document.querySelector(".button").classList.add("selected");
}).on("keyup", () => {
document.querySelector(".button").classList.remove("selected");
});
</script>

</html>
101 changes: 101 additions & 0 deletions packages/selecto/test/manual/nested.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
<!DOCTYPE html>
<html>
<style>
html,
body {
position: relative;
height: 100%;
margin: 0;
padding: 0;
}

.target,
.target2 {
position: absolute;
background: #faa;
box-sizing: border-box;
}

.target.selected {
border: 4px solid #f55;
}

.button {
position: absolute;
left: 500px;
top: 50px;
background: #eee;
padding: 15px 40px;
display: inline-block;
border-radius: 5px;
font-weight: bold;
color: #444;
}

.button.selected {
color: #fff;
background: #66d;
}
</style>

<body>
<div class="button"> Shift </div>
<div class="target" style="top: 50px; left: 50px; width: 50px; height: 50px">T1</div>
<div class="target" style="top: 50px; left: 150px; width: 150px; height: 50px">T2</div>
<div class="target" style="top: 150px; left: 50px; width: 100px; height: 50px">T3</div>
<div class="target" style="top: 300px; left: 250px; width: 50px; height: 150px">T4</div>
<div class="target" style="top: 200px; left: 400px; width: 100px; height: 100px">
T5
<div class="target" style="top: 20px; left: 20px; width: 100px; height: 100px">
T6
</div>
</div>


</body>
<script src="../../dist/selecto.js"></script>

<div class="hi"></div>
<script>

const selecto = new Selecto({
container: document.body,
// rootContainer: document.body,
// boundContainer: true,
// ratio: 1,
// dragCondition: () => false,
hitRate: 0,
selectableTargets: [".target"],
selectByClick: true,
selectFromInside: false,
toggleContinueSelect: ["shift"],
preventDefault: true,
}).on("dragStart", e => {
console.log("ds", e.inputEvent.target);
}).on("drag", e => {
selecto.findSelectableTargets();
}).on("selectStart", e => {
console.log("start", e);
e.added.forEach(el => {
el.classList.add("selected");
});
e.removed.forEach(el => {
el.classList.remove("selected");
});
}).on("select", e => {
console.log(e.removed, e.added);
}).on("selectEnd", e => {
e.afterAdded.forEach(el => {
el.classList.add("selected");
});
e.afterRemoved.forEach(el => {
el.classList.remove("selected");
});
}).on("keydown", () => {
document.querySelector(".button").classList.add("selected");
}).on("keyup", () => {
document.querySelector(".button").classList.remove("selected");
});
</script>

</html>

0 comments on commit b2ad11c

Please sign in to comment.