|
@@ -6,7 +6,11 @@
|
|
|
>
|
|
|
<foreignObject
|
|
|
v-for="node in filteredNodes" :key="'f-' + node.data.id"
|
|
|
- :style="`--x: ${node.x}px; --y: ${node.y}px; --r: ${node.rotate}deg;`"
|
|
|
+ :class="{ 'safari': isSafari }"
|
|
|
+ :width="size.w" :height="size.h"
|
|
|
+ :x="node.x" :y="node.y"
|
|
|
+ :transform="`rotate(${node.rotate}) translate(-${size.w / 2}, -${size.h / 2})`"
|
|
|
+ :transform-origin="`${node.x} ${node.y}`"
|
|
|
>
|
|
|
<node-view
|
|
|
:id="'preview-node-' + node.data.id"
|
|
@@ -78,6 +82,16 @@ export default {
|
|
|
dataNodes () {
|
|
|
if (!this.nodes) return
|
|
|
return this.nodes.map(node => node.data)
|
|
|
+ },
|
|
|
+
|
|
|
+ isSafari () {
|
|
|
+ return /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
|
|
|
+ },
|
|
|
+
|
|
|
+ size () {
|
|
|
+ return window.innerWidth < 1200
|
|
|
+ ? { w: 560 / 1.5, h: 350 / 1.5 }
|
|
|
+ : { w: 560, h: 350 }
|
|
|
}
|
|
|
},
|
|
|
|
|
@@ -131,17 +145,25 @@ export default {
|
|
|
<style lang="scss">
|
|
|
#library-map {
|
|
|
foreignObject {
|
|
|
- width: $node-card-width-sm;
|
|
|
- height: $node-card-height-sm;
|
|
|
- x: var(--x);
|
|
|
- y: var(--y);
|
|
|
- transform-origin: var(--x) var(--y);
|
|
|
- transform: rotate(var(--r)) translate(-#{$node-card-width / 2}, -#{$node-card-height / 2});
|
|
|
+ // width: $node-card-width-sm;
|
|
|
+ // height: $node-card-height-sm;
|
|
|
+ // x: var(--x);
|
|
|
+ // y: var(--y);
|
|
|
+ // transform-origin: var(--x) var(--y);
|
|
|
+ // transform: rotate(var(--r)) translate(-#{$node-card-width / 2}, -#{$node-card-height / 2});
|
|
|
overflow: visible;
|
|
|
|
|
|
@include media-breakpoint-up($size-bp) {
|
|
|
- width: $node-card-width;
|
|
|
- height: $node-card-height;
|
|
|
+ // width: $node-card-width;
|
|
|
+ // height: $node-card-height;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.safari .node-view {
|
|
|
+ position: static;
|
|
|
+
|
|
|
+ .node-view-footer {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.node-view {
|