Skip to content

Commit c1a94d6

Browse files
daybrushdaybrush
committed
demo: add main demo
1 parent 1aac2f1 commit c1a94d6

File tree

1 file changed

+204
-17
lines changed

1 file changed

+204
-17
lines changed

‎demo/index.html‎

Lines changed: 204 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,52 @@
1919
</head>
2020

2121
<body>
22-
<div class="target" style="top: 50px;left: 50px;"></div>
23-
<div class="target" style="top: 100px;left: 250px; transform: skew(30deg)"></div>
24-
<svg>
25-
<path d=""></path>
26-
</svg>
22+
<div class="page">
23+
<div class="container">
24+
<div class="header">
25+
<div class="selection-hint"></div>
26+
<div class="target">
27+
<div class="rect" style="background: #e55;"></div>
28+
<div class="text">0</div>
29+
</div>
30+
<div class="target">
31+
<div class="rect" style="transform: rotate(45deg); background: #77dda5;"></div>
32+
<div class="text">0</div>
33+
</div>
34+
<div class="target">
35+
<div class="rect" style="transform: skew(-30deg); background: #7799ee;"></div>
36+
<div class="text">0</div>
37+
</div>
38+
<svg>
39+
<path d=""></path>
40+
</svg>
41+
</div>
42+
<h1>Overlap Area</h1>
43+
<p class="badges">
44+
<a href="https://www.npmjs.com/package/overlap-area" target="_blank">
45+
<img src="https://img.shields.io/npm/v/overlap-area.svg?style=flat-square&color=007acc&label=version"
46+
alt="npm version" /></a>
47+
<a href="https://github.com/daybrush/overlap-area" target="_blank">
48+
<img
49+
src="https://img.shields.io/github/stars/daybrush/overlap-area.svg?color=42b883&style=flat-square" /></a>
50+
<a href="https://github.com/daybrush/overlap-area" target="_blank">
51+
<img src="https://img.shields.io/badge/language-typescript-blue.svg?style=flat-square" />
52+
</a>
53+
<a href="https://github.com/daybrush/overlap-area/blob/master/LICENSE" target="_blank">
54+
<img
55+
src="https://img.shields.io/github/license/daybrush/overlap-area.svg?style=flat-square&label=license&color=08CE5D" />
56+
</a>
57+
</p>
58+
<p class="description">Find the Overlap Area.</p>
59+
<div class="buttons">
60+
<a href="https://github.com/daybrush/overlap-area" class="button" target="_blank">Download</a>
61+
<a href="https://daybrush.com/selecto/release/latest/doc" class="button" target="_blank">API</a>
62+
<a href="https://daybrush.com/selecto/storybook/?path=/story/selecto--select-accurately" class="button"
63+
target="_blank">Use with Selecto</a>
64+
</div>
65+
</div>
66+
67+
</div>
2768
</body>
2869
<style>
2970
html,
@@ -33,14 +74,90 @@
3374
height: 100%;
3475
margin: 0;
3576
padding: 0;
77+
font-family: sans-serif;
78+
background: #f5f5f5;
79+
color: #333;
80+
}
81+
82+
a {
83+
text-decoration: none;
84+
color: #333;
85+
}
86+
87+
.page {
88+
position: relative;
89+
width: 100%;
90+
height: 100%;
91+
min-height: 500px;
92+
overflow: hidden;
93+
}
94+
95+
.container {
96+
position: relative;
97+
top: 50%;
98+
left: 50%;
99+
transform: translate(-50%, -50%);
100+
text-align: center;
101+
display: inline-block;
102+
padding: 20px;
103+
box-sizing: border-box;
104+
}
105+
106+
.container,
107+
.header,
108+
.target,
109+
svg {
110+
transform-style: preserve-3d;
111+
}
112+
113+
.header {
114+
padding: 20px;
36115
}
37116

38117
.target {
39-
position: absolute;
118+
position: relative;
40119
width: 100px;
41120
height: 100px;
42-
transform: rotate(45deg);
121+
color: #fff;
122+
margin: 10px 20px;
123+
display: inline-block;
124+
}
125+
126+
.rect {
127+
position: absolute;
128+
width: 100%;
129+
height: 100%;
130+
}
131+
132+
.text {
133+
position: absolute;
134+
width: 100%;
135+
height: 100%;
136+
line-height: 100px;
137+
text-align: center;
138+
transform: translateZ(1px);
139+
}
140+
141+
.buttons {
142+
padding: 5px;
143+
}
144+
145+
.button {
146+
display: inline-block;
147+
padding: 12px 20px;
148+
border: 1px solid #333;
149+
color: #333;
150+
font-weight: bold;
151+
text-decoration: none;
152+
font-size: 14px;
153+
letter-spacing: 1px;
154+
margin: 2px;
155+
transition: all ease 0.2s;
156+
}
157+
158+
.button:hover {
43159
background: #333;
160+
color: #fff;
44161
}
45162

46163
svg {
@@ -50,20 +167,66 @@
50167
top: 0;
51168
left: 0;
52169
pointer-events: none;
53-
opacity: 0.7;
170+
opacity: 0.9;
171+
transform: translateZ(0px);
54172
}
55173

56174
svg path {
57-
fill: #f55;
58-
stroke: #55f;
175+
fill: #333333aa;
176+
stroke: red;
59177
stroke-width: 2;
60178
}
179+
180+
.selection-hint {
181+
position: absolute;
182+
border: 1px solid #4af;
183+
background: rgba(68, 170, 255, 0.5);
184+
width: 50px;
185+
height: 50px;
186+
top: 0;
187+
left: 0;
188+
z-index: 1;
189+
}
61190
</style>
62-
<script src="https://daybrush.com/moveable/release/latest/dist/moveable.js"></script>
63-
<script src="../dist/overlap-area.min.js"></script>
64-
<script src="../../selecto/dist/selecto.min.js"></script>
191+
<script src="https://daybrush.com/scenejs/release/latest/dist/scene.min.js"></script>
192+
<script src="https://daybrush.com/moveable/release/latest/dist/moveable.min.js"></script>
193+
<script src="https://daybrush.com/overlap-area/release/latest/dist/overlap-area.min.js"></script>
194+
<script src="https://daybrush.com/selecto/release/latest/dist/selecto.min.js"></script>
65195
<script>
196+
const scene = new Scene({
197+
".selection-hint": {
198+
0: {
199+
opacity: 0,
200+
},
201+
"0>": {
202+
opacity: 1,
203+
width: "0px",
204+
height: "0px",
205+
},
206+
1: {
207+
width: "60px",
208+
height: "60px",
209+
},
210+
2.5: {},
211+
},
212+
}, {
213+
selector: true,
214+
easing: "ease-in-out",
215+
iterationCount: "infinite",
216+
}).playCSS();
217+
218+
const rectElements = [].slice.call(document.querySelectorAll(".target")).map(target => {
219+
const rect = target.querySelector(".rect");
220+
221+
rect._textElement = target.querySelector(".text");
222+
223+
return rect;
224+
});
225+
const svgElement = document.querySelector("svg");
226+
const pathElement = svgElement.querySelector("path");
227+
66228
function drawPath(e) {
229+
const svgRect = svgElement.getBoundingClientRect();
67230
const targets = selecto.getSelectedTargets();
68231

69232
pathElement.setAttribute("d", targets.map(target => {
@@ -78,22 +241,46 @@
78241
const points = OverlapArea.getOverlapPoints(
79242
selecto.getElementPoints(target),
80243
rectPoints,
81-
);
244+
).map(p => [p[0] - svgRect.left, p[1] - svgRect.top]);
245+
target._textElement.innerHTML = `${Math.round(OverlapArea.getAreaSize(points))}`;
82246

83247
return points.length ? `M ${points.join(", L")} Z` : "";
84248
}).join(" "));
85249
}
86-
const pathElement = document.querySelector("path");
250+
87251
const selecto = new Selecto({
88-
// container: document.body,
89-
selectableTargets: [".target"],
252+
container: document.body,
253+
dragContainer: window,
254+
selectableTargets: rectElements,
90255
selectFromInside: true,
91256
hitRate: 0,
92257
getElementRect: Moveable.getElementInfo,
258+
}).on("dragStart", e => {
259+
scene.finish();
93260
}).on("selectStart", e => {
261+
e.removed.forEach(target => {
262+
target._textElement.innerHTML = "0";
263+
});
94264
drawPath(e);
265+
}).on("select", e => {
266+
e.removed.forEach(target => {
267+
target._textElement.innerHTML = "0";
268+
});
95269
}).on("drag", e => {
96270
drawPath(e);
271+
}).on("selectEnd", e => {
272+
if (!e.selected.length) {
273+
scene.playCSS();
274+
}
275+
});
276+
277+
window.addEventListener("resize", () => {
278+
selecto.setSelectedTargets([]);
279+
pathElement.setAttribute("d", "");
280+
rectElements.forEach(rectElement => {
281+
rectElement._textElement.innerHTML = "0";
282+
});
283+
scene.playCSS();
97284
});
98285
</script>
99286

0 commit comments

Comments
 (0)