+ :class="['map-node','sane-node', {'clicked' : clicked}, {'old' : old}]">
{{node.title}}
{{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;
+
+}
diff --git a/src/lib/defaultStyles.ts b/src/lib/defaultStyles.ts
index 6b119fc..9a94e1d 100644
--- 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);