Mercurial > hg > orthanc-stone
comparison Applications/StoneWebViewer/WebApplication/app.js @ 1704:902d13889ae4
LoadMultipartInstanceInViewport() in C++
author | Sebastien Jodogne <s.jodogne@gmail.com> |
---|---|
date | Fri, 27 Nov 2020 17:15:09 +0100 |
parents | 76c590a62755 |
children | 3d62634d442f |
comparison
equal
deleted
inserted
replaced
1703:76c590a62755 | 1704:902d13889ae4 |
---|---|
100 } | 100 } |
101 | 101 |
102 | 102 |
103 | 103 |
104 Vue.component('viewport', { | 104 Vue.component('viewport', { |
105 props: [ 'left', 'top', 'width', 'height', 'canvasId', 'active', 'series', 'viewportIndex', | 105 props: [ 'left', 'top', 'width', 'height', 'canvasId', 'active', 'content', 'viewportIndex', |
106 'showInfo' ], | 106 'showInfo' ], |
107 template: '#viewport-template', | 107 template: '#viewport-template', |
108 data: function () { | 108 data: function () { |
109 return { | 109 return { |
110 stone: stone, // To access global object "stone" from "index.html" | 110 stone: stone, // To access global object "stone" from "index.html" |
126 * that the schedule frame has been displayed: The cine loop can | 126 * that the schedule frame has been displayed: The cine loop can |
127 * proceed to the next frame (check out "CineCallback()"). | 127 * proceed to the next frame (check out "CineCallback()"). |
128 **/ | 128 **/ |
129 this.cineLoadingFrame = false; | 129 this.cineLoadingFrame = false; |
130 }, | 130 }, |
131 series: function(newVal, oldVal) { | 131 content: function(newVal, oldVal) { |
132 this.status = 'loading'; | 132 this.status = 'loading'; |
133 this.cineControls = false; | 133 this.cineControls = false; |
134 this.cineMode = ''; | 134 this.cineMode = ''; |
135 this.cineLoadingFrame = false; | 135 this.cineLoadingFrame = false; |
136 this.cineRate = 30; // Default value | 136 this.cineRate = 30; // Default value |
200 var studyInstanceUid = args.detail.studyInstanceUid; | 200 var studyInstanceUid = args.detail.studyInstanceUid; |
201 var seriesInstanceUid = args.detail.seriesInstanceUid; | 201 var seriesInstanceUid = args.detail.seriesInstanceUid; |
202 var pdfPointer = args.detail.pdfPointer; | 202 var pdfPointer = args.detail.pdfPointer; |
203 var pdfSize = args.detail.pdfSize; | 203 var pdfSize = args.detail.pdfSize; |
204 | 204 |
205 if ('tags' in that.series && | 205 if ('tags' in that.content && |
206 that.series.tags[STUDY_INSTANCE_UID] == studyInstanceUid && | 206 that.content.tags[STUDY_INSTANCE_UID] == studyInstanceUid && |
207 that.series.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) { | 207 that.content.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) { |
208 | 208 |
209 that.status = 'pdf'; | 209 that.status = 'pdf'; |
210 var pdf = new Uint8Array(HEAPU8.subarray(pdfPointer, pdfPointer + pdfSize)); | 210 var pdf = new Uint8Array(HEAPU8.subarray(pdfPointer, pdfPointer + pdfSize)); |
211 | 211 |
212 /** | 212 /** |
226 methods: { | 226 methods: { |
227 DragDrop: function(event) { | 227 DragDrop: function(event) { |
228 event.preventDefault(); | 228 event.preventDefault(); |
229 | 229 |
230 // The "parseInt()" is because of Microsoft Edge Legacy (*) | 230 // The "parseInt()" is because of Microsoft Edge Legacy (*) |
231 this.$emit('updated-series', parseInt(event.dataTransfer.getData('seriesIndex'), 10)); | 231 this.$emit('updated-series', { |
232 seriesIndex: parseInt(event.dataTransfer.getData('seriesIndex'), 10), | |
233 sopInstanceUid: event.dataTransfer.getData('sopInstanceUid') | |
234 }); | |
232 }, | 235 }, |
233 MakeActive: function() { | 236 MakeActive: function() { |
234 this.$emit('selected-viewport'); | 237 this.$emit('selected-viewport'); |
235 }, | 238 }, |
236 DecrementFrame: function(isCircular) { | 239 DecrementFrame: function(isCircular) { |
334 viewport1Width: '100%', | 337 viewport1Width: '100%', |
335 viewport1Height: '100%', | 338 viewport1Height: '100%', |
336 viewport1Left: '0%', | 339 viewport1Left: '0%', |
337 viewport1Top: '0%', | 340 viewport1Top: '0%', |
338 viewport1Visible: true, | 341 viewport1Visible: true, |
339 viewport1Series: {}, | 342 viewport1Content: {}, |
340 | 343 |
341 viewport2Width: '100%', | 344 viewport2Width: '100%', |
342 viewport2Height: '100%', | 345 viewport2Height: '100%', |
343 viewport2Left: '0%', | 346 viewport2Left: '0%', |
344 viewport2Top: '0%', | 347 viewport2Top: '0%', |
345 viewport2Visible: false, | 348 viewport2Visible: false, |
346 viewport2Series: {}, | 349 viewport2Content: {}, |
347 | 350 |
348 viewport3Width: '100%', | 351 viewport3Width: '100%', |
349 viewport3Height: '100%', | 352 viewport3Height: '100%', |
350 viewport3Left: '0%', | 353 viewport3Left: '0%', |
351 viewport3Top: '0%', | 354 viewport3Top: '0%', |
352 viewport3Visible: false, | 355 viewport3Visible: false, |
353 viewport3Series: {}, | 356 viewport3Content: {}, |
354 | 357 |
355 viewport4Width: '100%', | 358 viewport4Width: '100%', |
356 viewport4Height: '100%', | 359 viewport4Height: '100%', |
357 viewport4Left: '0%', | 360 viewport4Left: '0%', |
358 viewport4Top: '0%', | 361 viewport4Top: '0%', |
359 viewport4Visible: false, | 362 viewport4Visible: false, |
360 viewport4Series: {}, | 363 viewport4Content: {}, |
361 | 364 |
362 showWindowing: false, | 365 showWindowing: false, |
363 windowingPresets: [], | 366 windowingPresets: [], |
364 | 367 |
365 selectedStudies: [], | 368 selectedStudies: [], |
418 }, | 421 }, |
419 | 422 |
420 GetActiveSeries: function() { | 423 GetActiveSeries: function() { |
421 var s = []; | 424 var s = []; |
422 | 425 |
423 if ('tags' in this.viewport1Series) | 426 if ('tags' in this.viewport1Content) |
424 s.push(this.viewport1Series.tags[SERIES_INSTANCE_UID]); | 427 s.push(this.viewport1Content.tags[SERIES_INSTANCE_UID]); |
425 | 428 |
426 if ('tags' in this.viewport2Series) | 429 if ('tags' in this.viewport2Content) |
427 s.push(this.viewport2Series.tags[SERIES_INSTANCE_UID]); | 430 s.push(this.viewport2Content.tags[SERIES_INSTANCE_UID]); |
428 | 431 |
429 if ('tags' in this.viewport3Series) | 432 if ('tags' in this.viewport3Content) |
430 s.push(this.viewport3Series.tags[SERIES_INSTANCE_UID]); | 433 s.push(this.viewport3Content.tags[SERIES_INSTANCE_UID]); |
431 | 434 |
432 if ('tags' in this.viewport4Series) | 435 if ('tags' in this.viewport4Content) |
433 s.push(this.viewport4Series.tags[SERIES_INSTANCE_UID]); | 436 s.push(this.viewport4Content.tags[SERIES_INSTANCE_UID]); |
434 | 437 |
435 return s; | 438 return s; |
436 }, | 439 }, |
437 | 440 |
438 GetActiveCanvas: function() { | 441 GetActiveCanvas: function() { |
516 SeriesDragStart: function(event, seriesIndex) { | 519 SeriesDragStart: function(event, seriesIndex) { |
517 // It is necessary to use ".toString()" for Microsoft Edge Legacy (*) | 520 // It is necessary to use ".toString()" for Microsoft Edge Legacy (*) |
518 event.dataTransfer.setData('seriesIndex', seriesIndex.toString()); | 521 event.dataTransfer.setData('seriesIndex', seriesIndex.toString()); |
519 }, | 522 }, |
520 | 523 |
524 MultiframeInstanceDragStart: function(event, seriesIndex, sopInstanceUid) { | |
525 event.dataTransfer.setData('seriesIndex', seriesIndex.toString()); | |
526 event.dataTransfer.setData('sopInstanceUid', sopInstanceUid.toString()); | |
527 }, | |
528 | |
521 SetViewportSeriesInstanceUid: function(viewportIndex, seriesInstanceUid) { | 529 SetViewportSeriesInstanceUid: function(viewportIndex, seriesInstanceUid) { |
522 if (seriesInstanceUid in this.seriesIndex) { | 530 if (seriesInstanceUid in this.seriesIndex) { |
523 this.SetViewportSeries(viewportIndex, this.seriesIndex[seriesInstanceUid]); | 531 this.SetViewportSeries(viewportIndex, { |
524 } | 532 seriesIndex: this.seriesIndex[seriesInstanceUid] |
525 }, | 533 }); |
526 | 534 } |
527 SetViewportSeries: function(viewportIndex, seriesIndex) { | 535 }, |
528 var series = this.series[seriesIndex]; | 536 |
537 SetViewportSeries: function(viewportIndex, info) { | |
538 var series = this.series[info.seriesIndex]; | |
529 | 539 |
530 if (viewportIndex == 1) { | 540 if (viewportIndex == 1) { |
531 this.viewport1Series = series; | 541 this.viewport1Content = series; |
532 } | 542 } |
533 else if (viewportIndex == 2) { | 543 else if (viewportIndex == 2) { |
534 this.viewport2Series = series; | 544 this.viewport2Content = series; |
535 } | 545 } |
536 else if (viewportIndex == 3) { | 546 else if (viewportIndex == 3) { |
537 this.viewport3Series = series; | 547 this.viewport3Content = series; |
538 } | 548 } |
539 else if (viewportIndex == 4) { | 549 else if (viewportIndex == 4) { |
540 this.viewport4Series = series; | 550 this.viewport4Content = series; |
541 } | 551 } |
542 }, | 552 }, |
543 | 553 |
544 ClickSeries: function(seriesIndex) { | 554 ClickSeries: function(seriesIndex) { |
545 this.SetViewportSeries(this.activeViewport, seriesIndex); | 555 this.SetViewportSeries(this.activeViewport, { |
556 seriesIndex: seriesIndex | |
557 }); | |
546 }, | 558 }, |
547 | 559 |
548 HideViewport: function(index) { | 560 HideViewport: function(index) { |
549 if (index == 1) { | 561 if (index == 1) { |
550 this.viewport1Visible = false; | 562 this.viewport1Visible = false; |
671 } | 683 } |
672 | 684 |
673 // https://fr.vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating | 685 // https://fr.vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating |
674 this.$set(this.series, index, series); | 686 this.$set(this.series, index, series); |
675 | 687 |
676 if ('tags' in this.viewport1Series && | 688 if ('tags' in this.viewport1Content && |
677 this.viewport1Series.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) { | 689 this.viewport1Content.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) { |
678 this.$set(this.viewport1Series, series); | 690 this.$set(this.viewport1Content, series); |
679 } | 691 } |
680 | 692 |
681 if ('tags' in this.viewport2Series && | 693 if ('tags' in this.viewport2Content && |
682 this.viewport2Series.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) { | 694 this.viewport2Content.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) { |
683 this.$set(this.viewport2Series, series); | 695 this.$set(this.viewport2Content, series); |
684 } | 696 } |
685 | 697 |
686 if ('tags' in this.viewport3Series && | 698 if ('tags' in this.viewport3Content && |
687 this.viewport3Series.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) { | 699 this.viewport3Content.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) { |
688 this.$set(this.viewport3Series, series); | 700 this.$set(this.viewport3Content, series); |
689 } | 701 } |
690 | 702 |
691 if ('tags' in this.viewport4Series && | 703 if ('tags' in this.viewport4Content && |
692 this.viewport4Series.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) { | 704 this.viewport4Content.tags[SERIES_INSTANCE_UID] == seriesInstanceUid) { |
693 this.$set(this.viewport4Series, series); | 705 this.$set(this.viewport4Content, series); |
694 } | 706 } |
695 } | 707 } |
696 }, | 708 }, |
697 | 709 |
698 SetWindowing: function(center, width) { | 710 SetWindowing: function(center, width) { |