Skip to content

GitLab

Commit 1b4897dd authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Resolved positioning issue and z-index issue on Firefox

parent 10be943b
Pipeline #3013 passed with stages
in 3 minutes and 14 seconds
Hide whitespace changes
Inline Side-by-side
src/vue/charts/Boxplot.vue
View file @ 1b4897dd
......@@ -25,7 +25,7 @@
</div>
</control-panel>
<svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
<svg :width="width" :height="height">
<rect x="0" y="0" :height="height" :width="width" style="opacity: 0;" @click="resetFilter"></rect>
<g :transform="`translate(${margin.left}, ${margin.top})`">
<g class="fjs-boxplot-axis fjs-x-axis" :transform="`translate(0, ${padded.height})`"></g>
......
src/vue/charts/CorrelationAnalysis.vue
View file @ 1b4897dd
......@@ -26,7 +26,7 @@
</fieldset>
</control-panel>
<svg xmlns="http://www.w3.org/2000/svg" :height="height" :width="width">
<svg :height="height" :width="width">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<svg-canvas class="fjs-canvas" :width="padded.width" :height="padded.height"></svg-canvas>
<g class="fjs-corr-axis fjs-y-axis-2" :transform="`translate(${padded.width}, 0)`"></g>
......
src/vue/charts/Heatmap.vue
View file @ 1b4897dd
......@@ -128,7 +128,7 @@
</control-panel>
<svg xmlns="http://www.w3.org/2000/svg" :height="height" :width="width">
<svg :height="height" :width="width">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<svg-canvas class="fjs-canvas" :width="padded.width" :height="padded.height"></svg-canvas>
<rect class="fjs-sig-bar"
......
src/vue/charts/PCA.vue
View file @ 1b4897dd
......@@ -29,7 +29,7 @@
</div>
</control-panel>
<svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
<svg :width="width" :height="height">
<g :transform="`translate(${margin.left}, ${margin.top})`">
<svg-canvas class="fjs-canvas" :width="padded.width" :height="padded.height"></svg-canvas>
<g class="fjs-brush"></g>
......
src/vue/components/Chart.vue
View file @ 1b4897dd
......@@ -5,25 +5,14 @@
</template>
<script>
import $ from 'jquery'
export default {
name: 'chart',
data () {
return {
updateInterval: null
}
},
mounted () {
// this interval code fixes a rendering issue in several browsers by forcing a redraw every 250ms
this.updateInterval = window.setInterval(() => {
$(this.$el).hide().show(0)
}, 250)
window.addEventListener('resize', this.resize)
window.addEventListener('load', this.resize)
this.resize()
},
beforeDestroy () {
window.clearInterval(this.updateInterval)
window.removeEventListener('resize', this.resize)
window.removeEventListener('load', this.resize)
},
......
src/vue/components/SVGCanvas.vue
View file @ 1b4897dd
<template>
<foreignObject :x="computedX" :y="computedY" :width="width" :height="height">
<body xmlns="http://www.w3.org/1999/xhtml"
style="margin: 0; position: relative;"
:style="{'z-index': zIndex}">
<canvas :width="width" :height="height"></canvas>
</body>
</foreignObject>
<g>
<foreignObject class="fjs-foreign-object"
:x="x"
:y="y"
:width="width"
:height="height"
:style="{'z-index': zIndex}">
<body xmlns="http://www.w3.org/1999/xhtml"
class="fjs-canvas-body"
:style="{'z-index': zIndex}">
<canvas :width="width" :height="height"></canvas>
</body>
</foreignObject>
</g>
</template>
<script>
export default {
name: 'svg-canvas',
data () {
return {
computedX: 0,
computedY: 0
}
},
props: {
x: {
type: Number,
default: 0,
required: false
},
y: {
type: Number,
default: 0,
required: false
},
height: {
type: Number,
required: true
......@@ -30,61 +41,17 @@
type: Number,
default: -1,
required: false
},
x: {
type: Number,
default: 0,
required: false
},
y: {
type: Number,
default: 0,
required: false
}
},
computed: {
size () {
return [this.width, this.height].join()
}
},
mounted () {
this.computeOffset()
},
watch: {
'size': {
handler: function () {
this.$nextTick(() => {
this.computeOffset()
})
}
}
},
methods: {
// this entire method is only here because browsers are buggy and do not render foreignObject correctly
computeOffset () {
const isFirefox = typeof InstallTrigger !== 'undefined' // detect browser via feature detection
let x = this.x
let y = this.y
if (!isFirefox) {
// Firefox does not need the code below because it works correct
let currentNode = this.$el.parentElement
while (currentNode.tagName !== 'svg') {
if (currentNode.hasAttribute('transform')) {
const attr = currentNode.getAttribute('transform')
if (attr) {
x += parseFloat(attr.replace(/ /g, '').match(/\((.+),/)[1].trim())
y += parseFloat(attr.replace(/ /g, '').match(/,(.+)\)/)[1].trim())
}
}
currentNode = currentNode.parentElement
}
}
this.computedX = x
this.computedY = y
}
}
}
</script>
<style scoped>
<style lang="sass" scoped>
.fjs-canvas-body
margin: 0
position: fixed
top: 0
left: 0
.fjs-foreign-object
position: relative
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment