| 1057 | } |
| 1058 | |
| 1059 | setupDragHandler() { |
| 1060 | let callback = (function(x, y) { |
| 1061 | this.update = { |
| 1062 | x: x, |
| 1063 | y: y |
| 1064 | }; |
| 1065 | }).bind(this); |
| 1066 | let elem = this.canvas_holder; |
| 1067 | let dragging = false; |
| 1068 | let base_x = 0; |
| 1069 | let base_y = 0; |
| 1070 | let pointerup = function(e) { |
| 1071 | dragging = false; |
| 1072 | e.preventDefault(); |
| 1073 | } |
| 1074 | let get_ratio = (function(elem) { |
| 1075 | let c_ratio = elem.clientWidth / elem.clientHeight; |
| 1076 | let target_ratio = this.width / this.height; |
| 1077 | // how many player pixels per client pixels |
| 1078 | let ratio = 1; |
| 1079 | if (c_ratio > target_ratio) { // client is wider than player |
| 1080 | ratio = this.height / elem.clientHeight; |
| 1081 | } else { |
| 1082 | ratio = this.width / elem.clientWidth; |
| 1083 | } |
| 1084 | return ratio; |
| 1085 | }).bind(this); |
| 1086 | let pointerdown = function(e) { |
| 1087 | if (!this.selected_layer) { |
| 1088 | return; |
| 1089 | } |
| 1090 | if (!(this.selected_layer instanceof MoveableLayer)) { |
| 1091 | return; |
| 1092 | } |
| 1093 | e.preventDefault(); |
| 1094 | let f = this.selected_layer.getFrame(this.time); |
| 1095 | if (!f) { |
| 1096 | return; |
| 1097 | } |
| 1098 | dragging = true; |
| 1099 | base_x = e.offsetX * get_ratio(e.target) - f[0]; |
| 1100 | base_y = e.offsetY * get_ratio(e.target) - f[1]; |
| 1101 | window.addEventListener('pointerup', pointerup, { |
| 1102 | once: true |
| 1103 | }); |
| 1104 | } |
| 1105 | let pointermove = function(e) { |
| 1106 | if (this.gesturing) { return; } |
| 1107 | e.preventDefault(); |
| 1108 | e.stopPropagation(); |
| 1109 | if (dragging) { |
| 1110 | let dx = e.offsetX * get_ratio(e.target) - base_x; |
| 1111 | let dy = e.offsetY * get_ratio(e.target) - base_y; |
| 1112 | callback(dx, dy); |
| 1113 | } |
| 1114 | } |
| 1115 | elem.addEventListener('pointerdown', pointerdown.bind(this)); |
| 1116 | elem.addEventListener('pointermove', pointermove.bind(this), {passive:false}); |