Mercurial > hg > orthanc-stone
comparison Platforms/WebAssembly/wasm-viewport.ts @ 228:210c1ce8e1a6 am
WasmViewport is no more a singleton
author | am@osimis.io |
---|---|
date | Thu, 14 Jun 2018 15:06:29 +0200 |
parents | c8f11437a6fd |
children | b0ba3b38a23c |
comparison
equal
deleted
inserted
replaced
227:c8f11437a6fd | 228:210c1ce8e1a6 |
---|---|
35 this.module_ = module; | 35 this.module_ = module; |
36 this.canvasId_ = canvasId; | 36 this.canvasId_ = canvasId; |
37 this.htmlCanvas_ = document.getElementById(this.canvasId_) as HTMLCanvasElement; | 37 this.htmlCanvas_ = document.getElementById(this.canvasId_) as HTMLCanvasElement; |
38 this.context_ = this.htmlCanvas_.getContext('2d'); | 38 this.context_ = this.htmlCanvas_.getContext('2d'); |
39 | 39 |
40 this.ViewportSetSize = this.module_.cwrap('ViewportSetSize', null, [ 'number', 'number' ]); | 40 this.ViewportSetSize = this.module_.cwrap('ViewportSetSize', null, [ 'any', 'number', 'number' ]); |
41 this.ViewportRender = this.module_.cwrap('ViewportRender', null, [ 'any', 'number', 'number', 'number' ]); | 41 this.ViewportRender = this.module_.cwrap('ViewportRender', null, [ 'any', 'number', 'number', 'number' ]); |
42 this.ViewportMouseDown = this.module_.cwrap('ViewportMouseDown', null, [ 'number', 'number', 'number', 'number' ]); | 42 this.ViewportMouseDown = this.module_.cwrap('ViewportMouseDown', null, [ 'any', 'number', 'number', 'number', 'number' ]); |
43 this.ViewportMouseMove = this.module_.cwrap('ViewportMouseMove', null, [ 'number', 'number' ]); | 43 this.ViewportMouseMove = this.module_.cwrap('ViewportMouseMove', null, [ 'any', 'number', 'number' ]); |
44 this.ViewportMouseUp = this.module_.cwrap('ViewportMouseUp', null, [ ]); | 44 this.ViewportMouseUp = this.module_.cwrap('ViewportMouseUp', null, [ 'any' ]); |
45 this.ViewportMouseEnter = this.module_.cwrap('ViewportMouseEnter', null, []); | 45 this.ViewportMouseEnter = this.module_.cwrap('ViewportMouseEnter', null, [ 'any' ]); |
46 this.ViewportMouseLeave = this.module_.cwrap('ViewportMouseLeave', null, []); | 46 this.ViewportMouseLeave = this.module_.cwrap('ViewportMouseLeave', null, [ 'any' ]); |
47 this.ViewportMouseWheel = this.module_.cwrap('ViewportMouseWheel', null, [ 'number', 'number', 'number', 'number' ]); | 47 this.ViewportMouseWheel = this.module_.cwrap('ViewportMouseWheel', null, [ 'any', 'number', 'number', 'number', 'number' ]); |
48 this.ViewportKeyPressed = this.module_.cwrap('ViewportKeyPressed', null, [ 'string', 'number', 'number' ]); | 48 this.ViewportKeyPressed = this.module_.cwrap('ViewportKeyPressed', null, [ 'any', 'string', 'number', 'number' ]); |
49 } | |
50 | |
51 public GetCppViewport() : any { | |
52 return this.pimpl_; | |
49 } | 53 } |
50 | 54 |
51 public Redraw() { | 55 public Redraw() { |
52 if (this.imageData_ === null || | 56 if (this.imageData_ === null || |
53 this.renderingBuffer_ === null || | 57 this.renderingBuffer_ === null || |
74 (this.imageData_.width != window.innerWidth || | 78 (this.imageData_.width != window.innerWidth || |
75 this.imageData_.height != window.innerHeight)) { | 79 this.imageData_.height != window.innerHeight)) { |
76 this.imageData_ = null; | 80 this.imageData_ = null; |
77 } | 81 } |
78 | 82 |
79 this.htmlCanvas_.width = window.innerWidth; | 83 this.htmlCanvas_.width = window.innerWidth; |
80 this.htmlCanvas_.height = window.innerHeight; | 84 this.htmlCanvas_.height = window.innerHeight; |
81 | 85 |
82 if (this.imageData_ === null) { | 86 if (this.imageData_ === null) { |
83 this.imageData_ = this.context_.getImageData(0, 0, this.htmlCanvas_.width, this.htmlCanvas_.height); | 87 this.imageData_ = this.context_.getImageData(0, 0, this.htmlCanvas_.width, this.htmlCanvas_.height); |
84 this.ViewportSetSize(this.htmlCanvas_.width, this.htmlCanvas_.height); | 88 this.ViewportSetSize(this.pimpl_, this.htmlCanvas_.width, this.htmlCanvas_.height); |
85 | 89 |
86 if (this.renderingBuffer_ != null) { | 90 if (this.renderingBuffer_ != null) { |
87 this.module_._free(this.renderingBuffer_); | 91 this.module_._free(this.renderingBuffer_); |
88 } | 92 } |
89 | 93 |
98 | 102 |
99 console.log(this.pimpl_); | 103 console.log(this.pimpl_); |
100 // Force the rendering of the viewport for the first time | 104 // Force the rendering of the viewport for the first time |
101 this.Resize(); | 105 this.Resize(); |
102 | 106 |
107 var that : WasmViewport = this; | |
103 // Register an event listener to call the Resize() function | 108 // Register an event listener to call the Resize() function |
104 // each time the window is resized. | 109 // each time the window is resized. |
105 window.addEventListener('resize', this.Resize, false); | 110 window.addEventListener('resize', function(event) { |
106 | 111 that.Resize(); |
107 var that = this; | 112 }, false); |
108 | 113 |
109 this.htmlCanvas_.addEventListener('contextmenu', function(event) { | 114 this.htmlCanvas_.addEventListener('contextmenu', function(event) { |
110 // Prevent right click on the canvas | 115 // Prevent right click on the canvas |
111 event.preventDefault(); | 116 event.preventDefault(); |
112 }, false); | 117 }, false); |
113 | 118 |
114 this.htmlCanvas_.addEventListener('mouseleave', function(event) { | 119 this.htmlCanvas_.addEventListener('mouseleave', function(event) { |
115 that.ViewportMouseLeave(); | 120 that.ViewportMouseLeave(that.pimpl_); |
116 }); | 121 }); |
117 | 122 |
118 this.htmlCanvas_.addEventListener('mouseenter', function(event) { | 123 this.htmlCanvas_.addEventListener('mouseenter', function(event) { |
119 that.ViewportMouseEnter(); | 124 that.ViewportMouseEnter(that.pimpl_); |
120 }); | 125 }); |
121 | 126 |
122 this.htmlCanvas_.addEventListener('mousedown', function(event) { | 127 this.htmlCanvas_.addEventListener('mousedown', function(event) { |
123 var x = event.pageX - this.offsetLeft; | 128 var x = event.pageX - this.offsetLeft; |
124 var y = event.pageY - this.offsetTop; | 129 var y = event.pageY - this.offsetTop; |
125 that.ViewportMouseDown(event.button, x, y, 0 /* TODO */); | 130 that.ViewportMouseDown(that.pimpl_, event.button, x, y, 0 /* TODO */); |
126 }); | 131 }); |
127 | 132 |
128 this.htmlCanvas_.addEventListener('mousemove', function(event) { | 133 this.htmlCanvas_.addEventListener('mousemove', function(event) { |
129 var x = event.pageX - this.offsetLeft; | 134 var x = event.pageX - this.offsetLeft; |
130 var y = event.pageY - this.offsetTop; | 135 var y = event.pageY - this.offsetTop; |
131 that.ViewportMouseMove(x, y); | 136 that.ViewportMouseMove(that.pimpl_, x, y); |
132 }); | 137 }); |
133 | 138 |
134 this.htmlCanvas_.addEventListener('mouseup', function(event) { | 139 this.htmlCanvas_.addEventListener('mouseup', function(event) { |
135 that.ViewportMouseUp(); | 140 that.ViewportMouseUp(that.pimpl_); |
136 }); | 141 }); |
137 | 142 |
138 window.addEventListener('keydown', function(event) { | 143 window.addEventListener('keydown', function(event) { |
139 that.ViewportKeyPressed(event.key, event.shiftKey, event.ctrlKey, event.altKey); | 144 that.ViewportKeyPressed(that.pimpl_, event.key, event.shiftKey, event.ctrlKey, event.altKey); |
140 }); | 145 }); |
141 | 146 |
142 this.htmlCanvas_.addEventListener('wheel', function(event) { | 147 this.htmlCanvas_.addEventListener('wheel', function(event) { |
143 var x = event.pageX - this.offsetLeft; | 148 var x = event.pageX - this.offsetLeft; |
144 var y = event.pageY - this.offsetTop; | 149 var y = event.pageY - this.offsetTop; |
145 that.ViewportMouseWheel(event.deltaY, x, y, event.ctrlKey); | 150 that.ViewportMouseWheel(that.pimpl_, event.deltaY, x, y, event.ctrlKey); |
146 event.preventDefault(); | 151 event.preventDefault(); |
147 }); | 152 }); |
148 | 153 |
149 var that = this; | |
150 this.htmlCanvas_.addEventListener('touchstart', function(event) { | 154 this.htmlCanvas_.addEventListener('touchstart', function(event) { |
151 that.ResetTouch(); | 155 that.ResetTouch(); |
152 }); | 156 }); |
153 | 157 |
154 this.htmlCanvas_.addEventListener('touchend', function(event) { | 158 this.htmlCanvas_.addEventListener('touchend', function(event) { |
156 }); | 160 }); |
157 | 161 |
158 this.htmlCanvas_.addEventListener('touchmove', function(event) { | 162 this.htmlCanvas_.addEventListener('touchmove', function(event) { |
159 if (that.touchTranslation_.length == 2) { | 163 if (that.touchTranslation_.length == 2) { |
160 var t = that.GetTouchTranslation(event); | 164 var t = that.GetTouchTranslation(event); |
161 that.ViewportMouseMove(t[0], t[1]); | 165 that.ViewportMouseMove(that.pimpl_, t[0], t[1]); |
162 } | 166 } |
163 else if (that.touchZoom_.length == 3) { | 167 else if (that.touchZoom_.length == 3) { |
164 var z0 = that.touchZoom_; | 168 var z0 = that.touchZoom_; |
165 var z1 = that.GetTouchZoom(event); | 169 var z1 = that.GetTouchZoom(event); |
166 that.ViewportMouseMove(z0[0], z0[1] - z0[2] + z1[2]); | 170 that.ViewportMouseMove(that.pimpl_, z0[0], z0[1] - z0[2] + z1[2]); |
167 } | 171 } |
168 else { | 172 else { |
169 // Realize the gesture event | 173 // Realize the gesture event |
170 if (event.targetTouches.length == 1) { | 174 if (event.targetTouches.length == 1) { |
171 // Exactly one finger inside the canvas => Setup a translation | 175 // Exactly one finger inside the canvas => Setup a translation |
172 that.touchTranslation_ = that.GetTouchTranslation(event); | 176 that.touchTranslation_ = that.GetTouchTranslation(event); |
173 that.ViewportMouseDown(1 /* middle button */, | 177 that.ViewportMouseDown(that.pimpl_, |
178 1 /* middle button */, | |
174 that.touchTranslation_[0], | 179 that.touchTranslation_[0], |
175 that.touchTranslation_[1], 0); | 180 that.touchTranslation_[1], 0); |
176 } else if (event.targetTouches.length == 2) { | 181 } else if (event.targetTouches.length == 2) { |
177 // Exactly 2 fingers inside the canvas => Setup a pinch/zoom | 182 // Exactly 2 fingers inside the canvas => Setup a pinch/zoom |
178 that.touchZoom_ = that.GetTouchZoom(event); | 183 that.touchZoom_ = that.GetTouchZoom(event); |
179 var z0 = that.touchZoom_; | 184 var z0 = that.touchZoom_; |
180 that.ViewportMouseDown(2 /* right button */, | 185 that.ViewportMouseDown(that.pimpl_, |
186 2 /* right button */, | |
181 z0[0], | 187 z0[0], |
182 z0[1], 0); | 188 z0[1], 0); |
183 } | 189 } |
184 } | 190 } |
185 }); | 191 }); |
186 } | 192 } |
187 | 193 |
188 public ResetTouch() { | 194 public ResetTouch() { |
189 if (this.touchTranslation_ || | 195 if (this.touchTranslation_ || |
190 this.touchZoom_) { | 196 this.touchZoom_) { |
191 this.ViewportMouseUp(); | 197 this.ViewportMouseUp(this.pimpl_); |
192 } | 198 } |
193 | 199 |
194 this.touchTranslation_ = false; | 200 this.touchTranslation_ = false; |
195 this.touchZoom_ = false; | 201 this.touchZoom_ = false; |
196 } | 202 } |