Browse Source

type and drag fixes

master
Milan Pässler 5 months ago
parent
commit
23a7f2a86c
2 changed files with 9 additions and 10 deletions
  1. 1
    1
      js/routes/about.js
  2. 8
    9
      js/routes/graph.js

+ 1
- 1
js/routes/about.js View File

@@ -9,7 +9,7 @@ const aboutTemplate = (error) => html`
9 9
 			<div>
10 10
 				<h3>About deepart</h3>
11 11
 				<p>This project was developed by <a href="https://twitter.com/fronbasal/">@fronbasal</a>, <a href="https://twitter.com/StoneLabs__">@StoneLabs__</a> and <a href="https://twitter.com/petabyteboy/">@petabyteboy</a> for the <a href="https://opencodes.io/">OpenCodes 2018 hackathon</a> and won the "Art & Technology" category. It shines a light on the beauty of abstract art by letting the user choose from a selection of pictures to create an esthetically pleasing result.</p>
12
-				<p>The source code of the implementation is available at <a href="https://git.pbb.lc/petabyteboy/deepart.ai/">https://git.pbb.lc/petabyteboy/deepart.ai/</a> under the AGPL-3.0 License.</p>
12
+				<p>The source code of the implementation is available at <a href="https://git.pbb.lc/petabyteboy/deepart.ai/">https://git.pbb.lc/petabyteboy/deepart.ai/</a> under the AGPL-3.0 license.</p>
13 13
 			</div>
14 14
 		</section>
15 15
 	</div>

+ 8
- 9
js/routes/graph.js View File

@@ -37,7 +37,6 @@ export const graphRoute = () => {
37 37
 	handleResize();
38 38
 
39 39
 	const graphData = getGraph();
40
-console.log(graphData);
41 40
 	graph = {
42 41
 		nodes: Object.keys(graphData.nodes).map(i => {
43 42
 			const node = graphData.nodes[i];
@@ -130,7 +129,7 @@ window.addEventListener('wheel', function(evt) {
130 129
 });
131 130
 
132 131
 const pinchDistance = (touchEvent) =>  {
133
-	return Math.abs(touchEvent.touches[0].pageX - touchEvent.touches[1].pageX) + Math.abs(touchEvent.touches[0].pageY - touchEvent.touches[1].pageY);
132
+	return Math.abs(touchEvent.touches[0].offsetX - touchEvent.touches[1].offsetX) + Math.abs(touchEvent.touches[0].offsetY - touchEvent.touches[1].offsetY);
134 133
 }
135 134
 
136 135
 const mouseDownHandler = (x, y, touchEvent) =>  {
@@ -148,6 +147,7 @@ const mouseDownHandler = (x, y, touchEvent) =>  {
148 147
 	view.draggedNode = nodeAt(x, y);
149 148
 	console.log(view);
150 149
 	if (view.draggedNode) {
150
+		if (!view.draggedNode.originalFy) view.draggedNode.originalFy = view.draggedNode.fy;
151 151
 		view.dragStartOffsetX = view.draggedNode.x;
152 152
 		view.dragStartOffsetY = view.draggedNode.y;
153 153
 		simulation.restart();
@@ -168,7 +168,6 @@ const mouseMoveHandler = (x, y, touchEvent) =>  {
168 168
 
169 169
 		if (view.draggedNode) {
170 170
 			view.draggedNode.fx = view.dragStartOffsetX - (view.dragStartMouseX - x) / view.scale;
171
-			if (!view.draggedNode.originalFy) view.draggedNode.originalFy = view.draggedNode.fy;
172 171
 			view.draggedNode.fy = view.dragStartOffsetY - (view.dragStartMouseY - y) / view.scale;
173 172
 			simulation.alpha(0.5);
174 173
 		} else {
@@ -198,10 +197,10 @@ const mouseUpHandler = (x, y, touchEvent) =>  {
198 197
 	if (view.clicking) handleClick(x, y);
199 198
 }
200 199
 
201
-window.addEventListener("touchstart", (evt) => mouseDownHandler(evt.touches[0].pageX, evt.touches[0].pageY, evt));
202
-window.addEventListener("touchmove", (evt) => mouseMoveHandler(evt.touches[0].pageX, evt.touches[0].pageY, evt));
203
-window.addEventListener("touchend", (evt) => mouseUpHandler(evt.changedTouches[0].pageX*dpr, evt.changedTouches[0].pageY*dpr, evt));
204
-window.addEventListener("mousedown", (evt) => mouseDownHandler(evt.pageX, evt.pageY));
205
-window.addEventListener("mousemove", (evt) => mouseMoveHandler(evt.pageX, evt.pageY));
206
-window.addEventListener("mouseup", (evt) => mouseUpHandler(evt.pageX, evt.pageY));
200
+window.addEventListener("touchstart", (evt) => mouseDownHandler(evt.touches[0].offsetX, evt.touches[0].offsetY, evt));
201
+window.addEventListener("touchmove", (evt) => mouseMoveHandler(evt.touches[0].offsetX, evt.touches[0].offsetY, evt));
202
+window.addEventListener("touchend", (evt) => mouseUpHandler(evt.changedTouches[0].offsetX*dpr, evt.changedTouches[0].offsetY*dpr, evt));
203
+window.addEventListener("mousedown", (evt) => mouseDownHandler(evt.offsetX, evt.offsetY));
204
+window.addEventListener("mousemove", (evt) => mouseMoveHandler(evt.offsetX, evt.offsetY));
205
+window.addEventListener("mouseup", (evt) => mouseUpHandler(evt.offsetX, evt.offsetY));
207 206
 window.addEventListener("resize", handleResize);

Loading…
Cancel
Save