Mercurial > hg > orthanc-stone

comparison Platforms/WebAssembly/wasm-viewport.ts @ 227:c8f11437a6fd am

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
getting ready for multiple viewports
author am@osimis.io
date Thu, 14 Jun 2018 13:28:40 +0200
parents 1fa4c65c7e1b
children 210c1ce8e1a6
comparison
equal deleted inserted replaced
226:1fa4c65c7e1b 227:c8f11437a6fd
27 private ViewportMouseEnter : Function; 27 private ViewportMouseEnter : Function;
28 private ViewportMouseLeave : Function; 28 private ViewportMouseLeave : Function;
29 private ViewportMouseWheel : Function; 29 private ViewportMouseWheel : Function;
30 private ViewportKeyPressed : Function; 30 private ViewportKeyPressed : Function;
31 31
32 private pimpl_ : any; // Private pointer to the underlying WebAssembly C++ object
33
32 public constructor(module: any, canvasId: string) { 34 public constructor(module: any, canvasId: string) {
33 this.module_ = module; 35 this.module_ = module;
34 this.canvasId_ = canvasId; 36 this.canvasId_ = canvasId;
35 this.htmlCanvas_ = document.getElementById(this.canvasId_) as HTMLCanvasElement; 37 this.htmlCanvas_ = document.getElementById(this.canvasId_) as HTMLCanvasElement;
36 this.context_ = this.htmlCanvas_.getContext('2d'); 38 this.context_ = this.htmlCanvas_.getContext('2d');
37 39
38 this.ViewportSetSize = this.module_.cwrap('ViewportSetSize', null, [ 'number', 'number' ]); 40 this.ViewportSetSize = this.module_.cwrap('ViewportSetSize', null, [ 'number', 'number' ]);
39 this.ViewportRender = this.module_.cwrap('ViewportRender', null, [ 'number', 'number', 'number', 'number' ]); 41 this.ViewportRender = this.module_.cwrap('ViewportRender', null, [ 'any', 'number', 'number', 'number' ]);
40 this.ViewportMouseDown = this.module_.cwrap('ViewportMouseDown', null, [ 'number', 'number', 'number', 'number' ]); 42 this.ViewportMouseDown = this.module_.cwrap('ViewportMouseDown', null, [ 'number', 'number', 'number', 'number' ]);
41 this.ViewportMouseMove = this.module_.cwrap('ViewportMouseMove', null, [ 'number', 'number' ]); 43 this.ViewportMouseMove = this.module_.cwrap('ViewportMouseMove', null, [ 'number', 'number' ]);
42 this.ViewportMouseUp = this.module_.cwrap('ViewportMouseUp', null, [ ]); 44 this.ViewportMouseUp = this.module_.cwrap('ViewportMouseUp', null, [ ]);
43 this.ViewportMouseEnter = this.module_.cwrap('ViewportMouseEnter', null, []); 45 this.ViewportMouseEnter = this.module_.cwrap('ViewportMouseEnter', null, []);
44 this.ViewportMouseLeave = this.module_.cwrap('ViewportMouseLeave', null, []); 46 this.ViewportMouseLeave = this.module_.cwrap('ViewportMouseLeave', null, []);
47 } 49 }
48 50
49 public Redraw() { 51 public Redraw() {
50 if (this.imageData_ === null || 52 if (this.imageData_ === null ||
51 this.renderingBuffer_ === null || 53 this.renderingBuffer_ === null ||
52 this.ViewportRender(this.imageData_.width, 54 this.ViewportRender(this.pimpl_,
55 this.imageData_.width,
53 this.imageData_.height, 56 this.imageData_.height,
54 this.renderingBuffer_) == 0) { 57 this.renderingBuffer_) == 0) {
55 console.log('The rendering has failed'); 58 console.log('The rendering has failed');
56 } else { 59 } else {
57 // Create an accessor to the rendering buffer (i.e. create a 60 // Create an accessor to the rendering buffer (i.e. create a
88 } 91 }
89 92
90 this.Redraw(); 93 this.Redraw();
91 } 94 }
92 95
93 public Initialize() { 96 public Initialize(cppViewport: any) {
94 97 this.pimpl_ = cppViewport;
95 // Force the rendering of the viewport for the first time 98
96 this.Resize(); 99 console.log(this.pimpl_);
97 100 // Force the rendering of the viewport for the first time
98 // Register an event listener to call the Resize() function 101 this.Resize();
99 // each time the window is resized. 102
100 window.addEventListener('resize', this.Resize, false); 103 // Register an event listener to call the Resize() function
101 104 // each time the window is resized.
102 var that = this; 105 window.addEventListener('resize', this.Resize, false);
103 106
104 this.htmlCanvas_.addEventListener('contextmenu', function(event) { 107 var that = this;
105 // Prevent right click on the canvas 108
106 event.preventDefault(); 109 this.htmlCanvas_.addEventListener('contextmenu', function(event) {
107 }, false); 110 // Prevent right click on the canvas
108 111 event.preventDefault();
109 this.htmlCanvas_.addEventListener('mouseleave', function(event) { 112 }, false);
110 that.ViewportMouseLeave(); 113
111 }); 114 this.htmlCanvas_.addEventListener('mouseleave', function(event) {
112 115 that.ViewportMouseLeave();
113 this.htmlCanvas_.addEventListener('mouseenter', function(event) { 116 });
114 that.ViewportMouseEnter(); 117
115 }); 118 this.htmlCanvas_.addEventListener('mouseenter', function(event) {
116 119 that.ViewportMouseEnter();
117 this.htmlCanvas_.addEventListener('mousedown', function(event) { 120 });
118 var x = event.pageX - this.offsetLeft; 121
119 var y = event.pageY - this.offsetTop; 122 this.htmlCanvas_.addEventListener('mousedown', function(event) {
120 that.ViewportMouseDown(event.button, x, y, 0 /* TODO */); 123 var x = event.pageX - this.offsetLeft;
121 }); 124 var y = event.pageY - this.offsetTop;
122 125 that.ViewportMouseDown(event.button, x, y, 0 /* TODO */);
123 this.htmlCanvas_.addEventListener('mousemove', function(event) { 126 });
124 var x = event.pageX - this.offsetLeft; 127
125 var y = event.pageY - this.offsetTop; 128 this.htmlCanvas_.addEventListener('mousemove', function(event) {
126 that.ViewportMouseMove(x, y); 129 var x = event.pageX - this.offsetLeft;
127 }); 130 var y = event.pageY - this.offsetTop;
128 131 that.ViewportMouseMove(x, y);
129 this.htmlCanvas_.addEventListener('mouseup', function(event) { 132 });
130 that.ViewportMouseUp(); 133
131 }); 134 this.htmlCanvas_.addEventListener('mouseup', function(event) {
132 135 that.ViewportMouseUp();
133 window.addEventListener('keydown', function(event) { 136 });
134 that.ViewportKeyPressed(event.key, event.shiftKey, event.ctrlKey, event.altKey); 137
135 }); 138 window.addEventListener('keydown', function(event) {
136 139 that.ViewportKeyPressed(event.key, event.shiftKey, event.ctrlKey, event.altKey);
137 this.htmlCanvas_.addEventListener('wheel', function(event) { 140 });
138 var x = event.pageX - this.offsetLeft; 141
139 var y = event.pageY - this.offsetTop; 142 this.htmlCanvas_.addEventListener('wheel', function(event) {
140 that.ViewportMouseWheel(event.deltaY, x, y, event.ctrlKey); 143 var x = event.pageX - this.offsetLeft;
141 event.preventDefault(); 144 var y = event.pageY - this.offsetTop;
142 }); 145 that.ViewportMouseWheel(event.deltaY, x, y, event.ctrlKey);
143 146 event.preventDefault();
144 var that = this; 147 });
145 this.htmlCanvas_.addEventListener('touchstart', function(event) { 148
146 that.ResetTouch(); 149 var that = this;
147 }); 150 this.htmlCanvas_.addEventListener('touchstart', function(event) {
148 151 that.ResetTouch();
149 this.htmlCanvas_.addEventListener('touchend', function(event) { 152 });
150 that.ResetTouch(); 153
151 }); 154 this.htmlCanvas_.addEventListener('touchend', function(event) {
152 155 that.ResetTouch();
153 this.htmlCanvas_.addEventListener('touchmove', function(event) { 156 });
154 if (that.touchTranslation_.length == 2) { 157
155 var t = that.GetTouchTranslation(event); 158 this.htmlCanvas_.addEventListener('touchmove', function(event) {
156 that.ViewportMouseMove(t[0], t[1]); 159 if (that.touchTranslation_.length == 2) {
157 } 160 var t = that.GetTouchTranslation(event);
158 else if (that.touchZoom_.length == 3) { 161 that.ViewportMouseMove(t[0], t[1]);
159 var z0 = that.touchZoom_; 162 }
160 var z1 = that.GetTouchZoom(event); 163 else if (that.touchZoom_.length == 3) {
161 that.ViewportMouseMove(z0[0], z0[1] - z0[2] + z1[2]);
162 }
163 else {
164 // Realize the gesture event
165 if (event.targetTouches.length == 1) {
166 // Exactly one finger inside the canvas => Setup a translation
167 that.touchTranslation_ = that.GetTouchTranslation(event);
168 that.ViewportMouseDown(1 /* middle button */,
169 that.touchTranslation_[0],
170 that.touchTranslation_[1], 0);
171 } else if (event.targetTouches.length == 2) {
172 // Exactly 2 fingers inside the canvas => Setup a pinch/zoom
173 that.touchZoom_ = that.GetTouchZoom(event);
174 var z0 = that.touchZoom_; 164 var z0 = that.touchZoom_;
175 that.ViewportMouseDown(2 /* right button */, 165 var z1 = that.GetTouchZoom(event);
176 z0[0], 166 that.ViewportMouseMove(z0[0], z0[1] - z0[2] + z1[2]);
177 z0[1], 0); 167 }
178 } 168 else {
179 } 169 // Realize the gesture event
180 }); 170 if (event.targetTouches.length == 1) {
181 } 171 // Exactly one finger inside the canvas => Setup a translation
172 that.touchTranslation_ = that.GetTouchTranslation(event);
173 that.ViewportMouseDown(1 /* middle button */,
174 that.touchTranslation_[0],
175 that.touchTranslation_[1], 0);
176 } else if (event.targetTouches.length == 2) {
177 // Exactly 2 fingers inside the canvas => Setup a pinch/zoom
178 that.touchZoom_ = that.GetTouchZoom(event);
179 var z0 = that.touchZoom_;
180 that.ViewportMouseDown(2 /* right button */,
181 z0[0],
182 z0[1], 0);
183 }
184 }
185 });
186 }
182 187
183 public ResetTouch() { 188 public ResetTouch() {
184 if (this.touchTranslation_ || 189 if (this.touchTranslation_ ||
185 this.touchZoom_) { 190 this.touchZoom_) {
186 this.ViewportMouseUp(); 191 this.ViewportMouseUp();
187 } 192 }
188 193
189 this.touchTranslation_ = false; 194 this.touchTranslation_ = false;
190 this.touchZoom_ = false; 195 this.touchZoom_ = false;
191 } 196 }
192 197
193 public GetTouchTranslation(event) { 198 public GetTouchTranslation(event) {
194 var touch = event.targetTouches[0]; 199 var touch = event.targetTouches[0];
195 return [ 200 return [
196 touch.pageX, 201 touch.pageX,
197 touch.pageY 202 touch.pageY
198 ]; 203 ];
199 } 204 }
200 205
201 public GetTouchZoom(event) { 206 public GetTouchZoom(event) {
202 var touch1 = event.targetTouches[0]; 207 var touch1 = event.targetTouches[0];
203 var touch2 = event.targetTouches[1]; 208 var touch2 = event.targetTouches[1];
204 var dx = (touch1.pageX - touch2.pageX); 209 var dx = (touch1.pageX - touch2.pageX);
205 var dy = (touch1.pageY - touch2.pageY); 210 var dy = (touch1.pageY - touch2.pageY);
206 var d = Math.sqrt(dx * dx + dy * dy); 211 var d = Math.sqrt(dx * dx + dy * dy);
207 return [ 212 return [
208 (touch1.pageX + touch2.pageX) / 2.0, 213 (touch1.pageX + touch2.pageX) / 2.0,
209 (touch1.pageY + touch2.pageY) / 2.0, 214 (touch1.pageY + touch2.pageY) / 2.0,
210 d 215 d
211 ]; 216 ];
212 }
213
214 } 217 }
218
215 } 219 }
216 220 }
221