Fixed further visual bugs

simonefranza · Sep 21, 2022 · 71396d9 · 71396d9
1 parent 959effd
commit 71396d9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 51 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -189,39 +189,3 @@ body, #app {
   top: 0;
 }
 </style>
-<style lang="scss">
-.map-node {
-  position: static;
-  box-sizing: border-box;
-  font-family: monospace;
-  display: inline-block;
-  color: #eee;
-  pointer-events: none;
-  border-radius: 1rem;
-  background: lightgoldenrodyellow;
-  padding-block: 0.5rem;
-  padding-inline: 1.2rem;
-  max-width: 300px;
-  border: 1px solid palevioletred;
-}
-.map-node.old{
-  background-image: linear-gradient(133deg, darkviolet, #5f0b83);
-}
-.map-node.clicked {
-  background-image: linear-gradient(73deg, darkviolet, #5f0b83);
-  border: 1px solid darkviolet;
-}
-.node-title.clicked {
-  font-weight: bold;
-  text-transform: uppercase;
-}
-.node-description {
-  text-align: left;
-}
-.node-link {
-  stroke: purple;
-  stroke-width: 10px;
-  fill: lightsteelblue;
-}
-
-</style>
diff --git a/src/components/MapNode.vue b/src/components/MapNode.vue
@@ -4,7 +4,7 @@
     class="map-node-container">
     <div 
       ref="nodeDiv"
-      :class="['map-node', {'clicked' : clicked}, {'old' : old}]">
+      :class="['map-node','sane-node', {'clicked' : clicked}, {'old' : old}]">
       <span>
         <div :class="['node-title', {'clicked' : clicked}]">{{node.title}}</div>
         <div class="node-description" v-if="clicked">{{node.description}}
@@ -77,14 +77,15 @@ const setSvgSize = (viewBoxSplit : [number, number, number, number], bounding :
     throw "nodeDiv is undefined";
   }
 
-  nodeContainer.value.style.height = "100%";
-  nodeContainer.value.style.width = "100%";
+  nodeContainer.value.setAttribute("width", `600`);
+  nodeContainer.value.setAttribute("height", `500`);
   const divBounding = nodeDiv.value.getBoundingClientRect();
   const [ width, height ] = Utils.convertPixelDistanceToUnit(viewBoxSplit,
     bounding,
-    [ divBounding.width, divBounding.height ]);
-  nodeContainer.value.setAttribute("width", `${width + 4}`);
-  nodeContainer.value.setAttribute("height", `${height + 4}`);
+    [ divBounding.width + 4, divBounding.height + 4]);
+    console.log('divBounding', divBounding.width, divBounding.height, width, height);
+  nodeContainer.value.setAttribute("width", `${width}`);
+  nodeContainer.value.setAttribute("height", `${height}`);
   nodeContainer.value.style.height = "";
   nodeContainer.value.style.width = "";
 };
@@ -157,4 +158,13 @@ onMounted(() => {
   overflow: visible;
   cursor: pointer;
 }
+div.sane-node {
+  cursor: pointer;
+  z-index: 2000;
+  pointer-events: all;
+  position: static;
+  box-sizing: border-box;
+  display: inline-block;
+
+}
 </style>
diff --git a/src/lib/defaultStyles.ts b/src/lib/defaultStyles.ts
@@ -1,20 +1,13 @@
 export const defaultStyle = `
 .map-node {
-  position: static;
-  box-sizing: border-box;
   font-family: monospace;
-  display: inline-block;
   color: #eee;
-  pointer-events: none;
   border-radius: 0.5rem;
   background-image: linear-gradient(133deg, salmon, #5f0b83);
+  max-width: 400px;
+  border: 1px solid palevioletred;
   padding-block: 0.5rem;
   padding-inline: 1.2rem;
-  max-width: 500px;
-  border: 1px solid palevioletred;
-  cursor: pointer;
-  z-index: 2000;
-  pointer-events: all;
 }
 .map-node.old{
   background-image: linear-gradient(133deg, darkviolet, #5f0b83);