Skip to content

Commit

Permalink
touchevents
Browse files Browse the repository at this point in the history
  • Loading branch information
@cho45
cho45 committed Aug 15, 2017
1 parent 357f92c commit bab0624
Show file tree
Hide file tree
Showing 7 changed files with 185 additions and 8 deletions.
65 changes: 63 additions & 2 deletions static/js/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ Vue.directive('imgarea', {
const restWidth = maxWidth - width;
const restHeight = maxHeight - height;

console.log(width, height, restWidth, restHeight);
if (translateY > 0) {
translateY = 0;
} else
Expand All @@ -35,7 +34,7 @@ Vue.directive('imgarea', {
}

const transform = `translate(${translateX}px, ${translateY}px) scale(${scale}, ${scale})`;
console.log('updateTransform', transform);
// console.log('updateTransform', transform);
el.style.transform = transform;
};

Expand Down Expand Up @@ -97,6 +96,68 @@ Vue.directive('imgarea', {
updateTransform();
});
});

let touch = null;
el.addEventListener("touchstart", function (e) {
if (e.touches.length === 1 ||
e.touches.length === 2) {
e.preventDefault();
touch = e;
touch._state = {
tX: translateX,
tY: translateY,
};
}
});
el.addEventListener("touchmove", function (e) {
if (touch && e.touches.length === 1) {
e.preventDefault();
console.log('move');
const moveX = e.touches[0].clientX - touch.touches[0].clientX;
const moveY = e.touches[0].clientY - touch.touches[0].clientY;

requestAnimationFrame( () => {
translateX = touch._state.tX + moveX;
translateY = touch._state.tY + moveY;
updateTransform();
});
} else
if (touch && e.touches.length === 2) {
e.preventDefault();
console.log('scale');
const distance0 = Math.sqrt(
(touch.touches[0].pageX-touch.touches[1].pageX) * (touch.touches[0].pageX-touch.touches[1].pageX) +
(touch.touches[0].pageY-touch.touches[1].pageY) * (touch.touches[0].pageY-touch.touches[1].pageY)
);
const distance = Math.sqrt(
(e.touches[0].pageX-e.touches[1].pageX) * (e.touches[0].pageX-e.touches[1].pageX) +
(e.touches[0].pageY-e.touches[1].pageY) * (e.touches[0].pageY-e.touches[1].pageY)
);
let newScale = scale + (distance - distance0) / 200;
console.log('distance', distance, newScale, e.touches);
if (newScale < 1) newScale = 1;
if (newScale > 10) newScale = 10;

const centerX = (touch.touches[0].pageX + touch.touches[1].pageX) / 2;
const centerY = (touch.touches[0].pageY + touch.touches[1].pageY) / 2;
const offsetX = centerX - el.offsetLeft - translateX;
const offsetY = centerY - el.offsetTop - translateY;

const s = newScale / scale; // current scale to new scale
const pX = offsetX * -s + offsetX;
const pY = offsetY * -s + offsetY;
// console.log('offset', offsetX, offsetY, 'p', pX, pY, 'scale', newScale);
translateX += pX;
translateY += pY;
scale = newScale;
requestAnimationFrame( () => {
updateTransform();
});
}
});
el.addEventListener("touchend", function (e) {
touch = null;
});
},
inserted: function (el) {
console.log('inserted', el);
Expand Down
57 changes: 55 additions & 2 deletions static/js/pcb.bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27205,7 +27205,6 @@ Vue.directive('imgarea', {
var restWidth = maxWidth - width;
var restHeight = maxHeight - height;

console.log(width, height, restWidth, restHeight);
if (translateY > 0) {
translateY = 0;
} else if (translateY < restHeight) {
Expand All @@ -27219,7 +27218,7 @@ Vue.directive('imgarea', {
}

var transform = 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scale + ', ' + scale + ')';
console.log('updateTransform', transform);
// console.log('updateTransform', transform);
el.style.transform = transform;
};

Expand Down Expand Up @@ -27281,6 +27280,60 @@ Vue.directive('imgarea', {
updateTransform();
});
});

var touch = null;
el.addEventListener("touchstart", function (e) {
if (e.touches.length === 1 || e.touches.length === 2) {
e.preventDefault();
touch = e;
touch._state = {
tX: translateX,
tY: translateY
};
}
});
el.addEventListener("touchmove", function (e) {
if (touch && e.touches.length === 1) {
e.preventDefault();
console.log('move');
var moveX = e.touches[0].clientX - touch.touches[0].clientX;
var moveY = e.touches[0].clientY - touch.touches[0].clientY;

requestAnimationFrame(function () {
translateX = touch._state.tX + moveX;
translateY = touch._state.tY + moveY;
updateTransform();
});
} else if (touch && e.touches.length === 2) {
e.preventDefault();
console.log('scale');
var distance0 = Math.sqrt((touch.touches[0].pageX - touch.touches[1].pageX) * (touch.touches[0].pageX - touch.touches[1].pageX) + (touch.touches[0].pageY - touch.touches[1].pageY) * (touch.touches[0].pageY - touch.touches[1].pageY));
var distance = Math.sqrt((e.touches[0].pageX - e.touches[1].pageX) * (e.touches[0].pageX - e.touches[1].pageX) + (e.touches[0].pageY - e.touches[1].pageY) * (e.touches[0].pageY - e.touches[1].pageY));
var newScale = scale + (distance - distance0) / 200;
console.log('distance', distance, newScale, e.touches);
if (newScale < 1) newScale = 1;
if (newScale > 10) newScale = 10;

var centerX = (touch.touches[0].pageX + touch.touches[1].pageX) / 2;
var centerY = (touch.touches[0].pageY + touch.touches[1].pageY) / 2;
var offsetX = centerX - el.offsetLeft - translateX;
var offsetY = centerY - el.offsetTop - translateY;

var s = newScale / scale; // current scale to new scale
var pX = offsetX * -s + offsetX;
var pY = offsetY * -s + offsetY;
// console.log('offset', offsetX, offsetY, 'p', pX, pY, 'scale', newScale);
translateX += pX;
translateY += pY;
scale = newScale;
requestAnimationFrame(function () {
updateTransform();
});
}
});
el.addEventListener("touchend", function (e) {
touch = null;
});
},
inserted: function inserted(el) {
console.log('inserted', el);
Expand Down
2 changes: 1 addition & 1 deletion static/js/pcb.bundle.js.map
View file

Large diffs are not rendered by default.

57 changes: 55 additions & 2 deletions static/js/schematic.bundle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27205,7 +27205,6 @@ Vue.directive('imgarea', {
var restWidth = maxWidth - width;
var restHeight = maxHeight - height;

console.log(width, height, restWidth, restHeight);
if (translateY > 0) {
translateY = 0;
} else if (translateY < restHeight) {
Expand All @@ -27219,7 +27218,7 @@ Vue.directive('imgarea', {
}

var transform = 'translate(' + translateX + 'px, ' + translateY + 'px) scale(' + scale + ', ' + scale + ')';
console.log('updateTransform', transform);
// console.log('updateTransform', transform);
el.style.transform = transform;
};

Expand Down Expand Up @@ -27281,6 +27280,60 @@ Vue.directive('imgarea', {
updateTransform();
});
});

var touch = null;
el.addEventListener("touchstart", function (e) {
if (e.touches.length === 1 || e.touches.length === 2) {
e.preventDefault();
touch = e;
touch._state = {
tX: translateX,
tY: translateY
};
}
});
el.addEventListener("touchmove", function (e) {
if (touch && e.touches.length === 1) {
e.preventDefault();
console.log('move');
var moveX = e.touches[0].clientX - touch.touches[0].clientX;
var moveY = e.touches[0].clientY - touch.touches[0].clientY;

requestAnimationFrame(function () {
translateX = touch._state.tX + moveX;
translateY = touch._state.tY + moveY;
updateTransform();
});
} else if (touch && e.touches.length === 2) {
e.preventDefault();
console.log('scale');
var distance0 = Math.sqrt((touch.touches[0].pageX - touch.touches[1].pageX) * (touch.touches[0].pageX - touch.touches[1].pageX) + (touch.touches[0].pageY - touch.touches[1].pageY) * (touch.touches[0].pageY - touch.touches[1].pageY));
var distance = Math.sqrt((e.touches[0].pageX - e.touches[1].pageX) * (e.touches[0].pageX - e.touches[1].pageX) + (e.touches[0].pageY - e.touches[1].pageY) * (e.touches[0].pageY - e.touches[1].pageY));
var newScale = scale + (distance - distance0) / 200;
console.log('distance', distance, newScale, e.touches);
if (newScale < 1) newScale = 1;
if (newScale > 10) newScale = 10;

var centerX = (touch.touches[0].pageX + touch.touches[1].pageX) / 2;
var centerY = (touch.touches[0].pageY + touch.touches[1].pageY) / 2;
var offsetX = centerX - el.offsetLeft - translateX;
var offsetY = centerY - el.offsetTop - translateY;

var s = newScale / scale; // current scale to new scale
var pX = offsetX * -s + offsetX;
var pY = offsetY * -s + offsetY;
// console.log('offset', offsetX, offsetY, 'p', pX, pY, 'scale', newScale);
translateX += pX;
translateY += pY;
scale = newScale;
requestAnimationFrame(function () {
updateTransform();
});
}
});
el.addEventListener("touchend", function (e) {
touch = null;
});
},
inserted: function inserted(el) {
console.log('inserted', el);
Expand Down
2 changes: 1 addition & 1 deletion static/js/schematic.bundle.js.map
View file

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions static/pcb.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
img {
width: 100%;
height: auto;
max-height: 100vh;
}

.form {
Expand Down Expand Up @@ -68,6 +69,10 @@
transform-origin: 50% 0;
transform: scale(-1, 1);
}

textarea {
max-width: 100%;
}
</style>
</head>
<body>
Expand Down
5 changes: 5 additions & 0 deletions static/schematic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
img {
width: 100%;
height: auto;
max-height: 100vh;
}

.form {
Expand All @@ -45,6 +46,10 @@
overflow: hidden;
border: 1px solid #ccc;
}

textarea {
max-width: 100%;
}
</style>
</head>
<body>
Expand Down

0 comments on commit bab0624

Please sign in to comment.