1+ <template >
2+ <Header v-if =" !fullscreen"
3+ <span class =" title" span >
4+ </Header >
5+ <main :class =" { fullscreen }"
6+ <OntologySelector
7+ :ontology =" ontology"
8+ :open =" displayOntology"
9+ @on-close =" displayOntology = false"
10+ @label-click =" handleOntologyLabelClick"
11+ />
12+ <Editor :title =" title" :class =" {reduced: !displayChat && !displayScript}" toolsMinHeight =" 300px"
13+ <template v-slot :tools >
14+ <Tools />
15+ </template >
16+ <template v-slot :content >
17+ <div id =" microdraw" style =" width 100% ; height 100% " div >
18+ </template >
19+ </Editor >
20+ </main >
21+ </template >
22+
23+ <script setup>
24+ import useVisualization from " ../store/visualization"
25+ import Tools from " ./Tools.vue"
26+ import {
27+ Header ,
28+ Editor ,
29+ OntologySelector ,
30+ } from " nwl-components"
31+ import * as Vue from " vue"
32+
33+ const { baseURL } = Vue .inject (' config'
34+
35+ const {
36+ title ,
37+ displayChat ,
38+ displayScript ,
39+ displayOntology ,
40+ currentLabel ,
41+ ontology ,
42+ currentSlice ,
43+ currentFile ,
44+ totalSlices ,
45+ fullscreen ,
46+ init: initVisualization ,
47+ } = useVisualization ();
48+
49+ const handleResize = () => {
50+ Microdraw .resizeAnnotationOverlay ();
51+ };
52+
53+ const toggleFullScreen = () => {
54+ if (! document .fullscreenElement ) {
55+ document .documentElement .requestFullscreen ();
56+ } else if (document .exitFullscreen ) {
57+ document .exitFullscreen ();
58+ }
59+ }
60+
61+ Vue .watch (fullscreen, toggleFullScreen);
62+
63+ const _findSelectedRegion = () => {
64+ const {currentImage , region } = Microdraw;
65+ const {Regions: regions } = Microdraw .ImageInfo [currentImage];
66+ return regions .findIndex (reg => reg .uid === region .uid );
67+ };
68+
69+ const handleOntologyLabelClick = (index ) => {
70+ Microdraw .currentLabelIndex = index;
71+ displayOntology .value = false ;
72+ currentLabel .value = index;
73+ const regionIndex = _findSelectedRegion ();
74+ if (regionIndex != null ) {
75+ const { region } = Microdraw;
76+ if (region != null ) {
77+ Microdraw .changeRegionName (region, Microdraw .ontology .labels [index].name );
78+ }
79+ }
80+ }
81+
82+ Vue .onMounted (async () => {
83+ await initVisualization ();
84+ window .addEventListener (' resize'
85+ });
86+ script >
87+ <style scoped>
88+ .area {
89+ height calc (100vh - 82px );
90+ width 100vw ;
91+ }
92+ .fullscreen .area {
93+ height 100vh ;
94+ }
95+
96+ style >
0 commit comments