Commit 0659b736 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

Fixed several issues introduces by the new canvas functionality

parent df1caf31
Pipeline #2969 failed with stages
in 26 seconds
......@@ -294,14 +294,13 @@
}
},
'params.showData': {
handler: function () {
this.drawPoints()
}
handler: function () { this.$nextTick(() => this.drawPoints()) }
},
'params.jitter': {
handler: function () {
this.drawPoints()
}
handler: function () { this.$nextTick(() => this.drawPoints()) }
},
'points': {
handler: function () { this.$nextTick(() => this.drawPoints()) }
}
},
methods: {
......
......@@ -64,12 +64,12 @@
<g class="fjs-pc-distribution fjs-pc-x-distribution"
:transform="`translate(0, ${padded.height + margin.bottom / 2})`">
<line :x2="padded.width"></line>
<svg-canvas class="fjs-pc-x-dist-canvas" :width="padded.width" :height="width / 150"></svg-canvas>
<svg-canvas :yOffset="-pointSize / 2" :width="padded.width" :height="pointSize"></svg-canvas>
</g>
<g class="fjs-pc-distribution fjs-pc-y-distribution"
:transform="`translate(${- margin.left / 2}, 0)`">
<line :y2="padded.height"></line>
<svg-canvas class="fjs-pc-y-dist-canvas" :width="width / 150" :height="padded.height"></svg-canvas>
<svg-canvas :xOffset="-pointSize / 2" :width="pointSize" :height="padded.height"></svg-canvas>
</g>
</g>
</g>
......@@ -150,6 +150,9 @@
const height = this.height - this.margin.top - this.margin.bottom
return { width, height }
},
pointSize () {
return this.width / 75
},
scales () {
const x = d3.scaleLinear()
.domain((() => {
......@@ -309,16 +312,19 @@
})
},
drawDistPoints (points) {
const xCanvas = this.$el.querySelector('.fjs-pc-x-dist-canvas canvas')
const yCanvas = this.$el.querySelector('.fjs-pc-x-dist-canvas canvas')
const xCanvas = this.$el.querySelector('.fjs-pc-x-distribution canvas')
const yCanvas = this.$el.querySelector('.fjs-pc-y-distribution canvas')
const xctx = xCanvas.getContext('2d')
const yctx = yCanvas.getContext('2d')
const rectSize = this.width / 150
points.forEach(d => {
xctx.clearRect(0, 0, xCanvas.width, xCanvas.height)
yctx.clearRect(0, 0, yCanvas.width, yCanvas.height)
xctx.globalAlpha = 0.05
yctx.globalAlpha = 0.05
points.forEach(point => {
xctx.beginPath()
yctx.beginPath()
xctx.fillRect(d.x - rectSize / 2, rectSize / 2, rectSize, rectSize)
yctx.fillRect(rectSize / 2, d.y - rectSize / 2, rectSize, rectSize)
xctx.fillRect(point.x - this.pointSize / 2, -this.pointSize, this.pointSize, this.pointSize)
yctx.fillRect(0, point.y - this.pointSize / 2, this.pointSize, this.pointSize)
})
},
resize ({height, width}) {
......@@ -356,8 +362,6 @@
stroke: #000
stroke-width: 1px
shape-rendering: crispEdges
circle
opacity: 0.05
.fjs-control-panel
select
margin: 0 0 0.5vh 0
......
<template>
<foreignObject :x="x" :y="y" :width="width" :height="height">
<body xmlns="http://www.w3.org/1999/xhtml"
style="margin: 0; position: relative;"
style="margin: 0; padding: 0; position: relative;"
:style="{'z-index': zIndex}">
<canvas :width="width" :height="height"></canvas>
</body>
......@@ -30,6 +30,16 @@
type: Number,
default: -1,
required: false
},
xOffset: {
type: Number,
default: 0,
required: false
},
yOffset: {
type: Number,
default: 0,
required: false
}
},
computed: {
......@@ -53,22 +63,21 @@
// 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
if (isFirefox) {
let xOffset = this.xOffset
let yOffset = this.yOffset
if (!isFirefox) {
// Firefox does not need the code below because it works correct
return
}
let xOffset = 0
let yOffset = 0
let currentNode = this.$el.parentElement
while (currentNode.tagName !== 'svg') {
if (currentNode.hasAttribute('transform')) {
const attr = currentNode.getAttribute('transform')
if (attr) {
xOffset += parseFloat(attr.match(/\((.+),/)[1].trim())
yOffset += parseFloat(attr.match(/,(.+)\)/)[1].trim())
let currentNode = this.$el.parentElement
while (currentNode.tagName !== 'svg') {
if (currentNode.hasAttribute('transform')) {
const attr = currentNode.getAttribute('transform')
if (attr) {
xOffset += parseFloat(attr.match(/\((.+),/)[1].trim())
yOffset += parseFloat(attr.match(/,(.+)\)/)[1].trim())
}
}
currentNode = currentNode.parentElement
}
currentNode = currentNode.parentElement
}
this.x = xOffset
this.y = yOffset
......
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