uml work

Author: kimsanghoon1

src/components/designer/CodeViewer.vue

@@ -1,22 +1,28 @@
 <template>
-    <v-container>
+    <v-container
+    >
+
         <v-card>
             <v-card-title v-if="value[0][0]">
                 {{value[0][0].name}}
             </v-card-title>
-            <v-card-text>
+            <v-card-text
+                    id="scroll-target"
+                    style="max-height: 700px"
+                    class="overflow-y-auto"
+            >
                 <codemirror
                         ref="codemirror"
                         :value="code"
                         :options="cmOption"
                         @ready="onCmReady"
                         @Focus="onCmFocus"
                         @input="onCmCodeChange"
-                        :height="500"
+                        :height="700"
+
                 >
                 </codemirror>
             </v-card-text>
-
         </v-card>
 
     </v-container>
@@ -42,6 +48,7 @@
         data() {
             return {
                 code: '',
+                offsetTop: 0,
                 definitionList: []
             }
         },
@@ -59,7 +66,8 @@
                             lineWrapping: true,
                             matchBrackets: true,
                             scroll: true,
-                            readOnly: 'nocursor'
+                            readOnly: 'nocursor',
+                            scrollbarStyle : null
                         }
                     } else if (this.value[0][0].name.includes('.yml') || this.value[0][0].name.includes('.yaml')) {
                         var type = {
@@ -147,7 +155,9 @@
             }
         },
         methods: {
-
+            onScroll (e) {
+                this.offsetTop = e.target.scrollTop
+            },
             onCmReady(cm) {
                 // console.log('the editor is readied!', cm)
 

src/components/designer/modeling/ModelingDesigner.vue

@@ -4,8 +4,7 @@
             <modal name="uml-modal" :height='"80%"' :width="'80%'">
                 <class-modeler></class-modeler>
             </modal>
-
-            <modal name="code-modal" scrollable :height='"auto"' :width="'80%'">
+            <modal name="code-modal" :height='"auto"' :width="'80%'">
                 <v-card>
                     <v-card-title>
                         <span class="headline">Code View</span>
@@ -23,7 +22,9 @@
                             <v-col :lg="3"
                                    :md="6"
                                    :sm="2"
-                                   style="margin-right: 15px; border-right: 1px solid black"
+                                   style="margin-right: 15px; border-right: 1px solid black; max-height: 800px;"
+                                   id="scroll-target"
+                                   class="overflow-y-auto"
                             >
                                 <v-treeview
                                         :items="codeList"
@@ -53,7 +54,7 @@
                                 <!--console.log(str);-->
                                 <!--</highlight-code>-->
 
-                                <code-viewer v-model="definitionSet"></code-viewer>
+                                    <code-viewer v-model="definitionSet" ></code-viewer>
                             </v-col>
                         </v-row>
                     </v-card-text>