Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-23 16:13:50 +00:00
Code Issues Actions Projects Releases Wiki Activity

306 fix visgraph issues

Browse Source
This commit is contained in:
Mathieu Jaumotte
2021-12-06 14:01:50 +00:00
committed by Julien Fastré
parent 8e8a8c1e70
commit bbc5e94033
8 changed files with 114 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/Bundle/ChillPersonBundle/Resources/public/vuejs/VisGraph/App.vue
View File

@@ -53,6 +53,7 @@
<div class="row">
<div class="col-12 text-center">{{ $t('visgraph.between') }}<br>{{ $t('visgraph.and') }}</div>
<div class="col">
<small>{{ getPersonAge(modal.data.from) }}</small>
<h4>{{ getPerson(modal.data.from).text }}</h4>
<p class="text-start" v-if="relation && relation.title">
<span v-if="reverse">
@@ -64,6 +65,7 @@
</p>
</div>
<div class="col text-end">
<small>{{ getPersonAge(modal.data.to) }}</small>
<h4>{{ getPerson(modal.data.to).text }}</h4>
<p class="text-end" v-if="relation && relation.title">
<span v-if="reverse">
@@ -119,8 +121,9 @@ import vis from 'vis-network/dist/vis-network'
import { mapState, mapGetters } from "vuex"
import Modal from 'ChillMainAssets/vuejs/_components/Modal'
import VueMultiselect from 'vue-multiselect'
import { getRelationsList, postRelationship, patchRelationship, deleteRelationship } from "./api";
import { splitId } from "./vis-network";
import { getRelationsList, postRelationship, patchRelationship, deleteRelationship } from "./api"
import { splitId, getAge } from "./vis-network"
import { visMessages } from "./i18n";
export default {
name: "App",
@@ -128,6 +131,7 @@ export default {
Modal,
VueMultiselect
},
props: ['household_id'],
data() {
return {
container: '',
@@ -152,7 +156,9 @@ export default {
class: null,
text: null
},
}
},
canvas: null,
link: null,
}
},
computed: {
@@ -164,7 +170,7 @@ export default {
]),
visgraph_data() {
console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges')
//console.log('::: visgraph_data :::', this.nodes.length, 'nodes,', this.edges.length, 'edges')
return {
nodes: this.nodes,
edges: this.edges
@@ -172,12 +178,12 @@ export default {
},
refreshNetwork() {
console.log('--- refresh network')
//console.log('--- refresh network')
window.network.setData(this.visgraph_data)
},
legendLayers() {
console.log('--- refresh legend and rebuild checked Layers')
//console.log('--- refresh legend and rebuild checked Layers')
this.checkedLayers = []
let layersDisplayed = [
...this.nodes.filter(n => n.id.startsWith('household')),
@@ -193,7 +199,7 @@ export default {
},
checkedLayers() { // required to refresh data checkedLayers
console.log('--- checkedLayers')
//console.log('--- checkedLayers')
return this.checkedLayers
},
@@ -218,7 +224,7 @@ export default {
},
watch: {
updateHack(newValue, oldValue) {
console.log(`--- updateHack ${oldValue} <> ${newValue}`)
//console.log(`--- updateHack ${oldValue} <> ${newValue}`)
if (oldValue !== newValue) {
this.forceUpdateComponent()
}
@@ -229,6 +235,9 @@ export default {
this.initGraph()
this.listenOnGraph()
this.getRelationsList()
this.canvas = document.getElementById('visgraph').querySelector('canvas')
this.link = document.getElementById('exportCanvasBtn')
},
methods: {
@@ -255,27 +264,27 @@ export default {
case 'person':
let person = this.nodes.filter(n => n.id === node)[0]
console.log('@@@@@@ event on selected Node', person.id)
//console.log('@@@@@@ event on selected Node', person.id)
if (this.listenPersonFlag === 'normal') {
if (person.folded === true) {
console.log(' @@> expand mode event')
//console.log(' @@> expand mode event')
this.$store.commit('unfoldPerson', person)
}
} else {
console.log(' @@> create link mode event')
//console.log(' @@> create link mode event')
this.listenStepsToAddRelationship(person)
}
break
case 'household':
let household = this.nodes.filter(n => n.id === node)[0]
console.log('@@@@@@ event on selected Node', household.id)
//console.log('@@@@@@ event on selected Node', household.id)
this.$store.dispatch('unfoldPersonsByHousehold', household)
break
case 'accompanying_period':
let course = this.nodes.filter(n => n.id === node)[0]
console.log('@@@@@@ event on selected Node', course.id)
//console.log('@@@@@@ event on selected Node', course.id)
this.$store.dispatch('unfoldPersonsByCourse', course)
break
@@ -290,7 +299,7 @@ export default {
}
let link = data.edges[0]
let linkType = splitId(link, 'link')
console.log('@@@@@ event on selected Edge', data.edges.length, linkType, data)
//console.log('@@@@@ event on selected Edge', data.edges.length, linkType, data)
if (linkType.startsWith('relationship')) {
//console.log('linkType relationship')
@@ -314,7 +323,7 @@ export default {
})
},
listenStepsToAddRelationship(person) {
console.log(' @@> listenStep', this.listenPersonFlag)
//console.log(' @@> listenStep', this.listenPersonFlag)
if (this.listenPersonFlag === 'step2') {
//console.log(' @@> person 2', person)
this.newEdgeData.to = person.id
@@ -333,7 +342,7 @@ export default {
/// control Layers
toggleLayer(value) {
let id = value.target.value
console.log('@@@@@@ toggle Layer', id)
//console.log('@@@@@@ toggle Layer', id)
this.forceUpdateComponent()
if (this.checkedLayers.includes(id)) {
this.removeLayer(id)
@@ -382,7 +391,7 @@ export default {
title: null,
button: { class: null, text: null, }
}
console.log('==- reset Form', this.modal.data)
//console.log('==- reset Form', this.modal.data)
},
getRelationsList() {
//console.log('fetch relationsList')
@@ -400,12 +409,16 @@ export default {
let person = this.persons.filter(p => p.id === id)
return person[0]
},
getPersonAge(id) {
let person = this.getPerson(id)
return getAge(person)
},
// actions
createRelationship() {
this.displayHelpMessage = true
this.listenPersonFlag = 'step1' // toggle listener in create link mode
console.log(' @@> switch listener to create link mode:', this.listenPersonFlag)
//console.log(' @@> switch listener to create link mode:', this.listenPersonFlag)
},
dropRelationship() {
//console.log('delete', this.modal.data)
@@ -417,13 +430,13 @@ export default {
this.forceUpdateComponent()
},
submitRelationship() {
console.log('submitRelationship', this.modal.action)
//console.log('submitRelationship', this.modal.action)
switch (this.modal.action) {
case 'create':
return postRelationship(this.modal.data)
.then(relationship => new Promise(resolve => {
console.log('post relationship response', relationship)
//console.log('post relationship response', relationship)
this.$store.dispatch('addLinkFromRelationship', relationship)
this.modal.showModal = false
this.resetForm()
@@ -435,7 +448,7 @@ export default {
case 'edit':
return patchRelationship(this.modal.data)
.then(relationship => new Promise(resolve => {
console.log('patch relationship response', relationship)
//console.log('patch relationship response', relationship)
this.$store.commit('updateLink', relationship)
this.modal.showModal = false
this.resetForm()
@@ -450,39 +463,44 @@ export default {
},
// export image
exportCanvasAsImage() {
const canvas = document.getElementById('visgraph')
.querySelector('canvas')
console.log(canvas)
async exportCanvasAsImage() {
let link = document.getElementById('exportCanvasBtn')
link.download = "filiation.png"
let
filename = `filiation_${this.household_id}.jpg`,
mime = 'image/jpeg',
quality = 0.85,
footer = `© Chill ${new Date().getFullYear()}`,
timestamp = `${visMessages.fr.visgraph.relationship_household} n° ${this.household_id} — ${new Date().toLocaleString()}`
canvas.toBlob(blob => {
console.log(blob)
link.href = URL.createObjectURL(blob)
}, 'image/png')
// resolve toBlob in a Promise
const getCanvasBlob = canvas => new Promise(resolve => {
canvas.toBlob(blob => resolve(blob), mime, quality)
})
/*
TODO improve feature
// 1. fonctionne, mais pas de contrôle sur le nom
if (canvas && canvas.getContext('2d')) {
let img = canvas.toDataURL('image/png;base64;')
img = img.replace('image/png','image/octet-stream')
window.open(img, '', 'width=1000, height=1000')
}
// 2. fonctionne, mais 2 click et pas compatible avec tous les browsers
let link = document.getElementById('exportCanvasBtn')
link.download = "image.png"
canvas.toBlob(blob => {
link.href = URL.createObjectURL(blob)
}, 'image/png')
*/
// build image from new temporary canvas
let tmpCanvas = document.createElement('canvas')
tmpCanvas.width = this.canvas.width
tmpCanvas.height = this.canvas.height
let ctx = tmpCanvas.getContext('2d')
ctx.beginPath()
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, tmpCanvas.width, tmpCanvas.height);
ctx.fillStyle = '#9d4600'
ctx.fillText(footer +' — '+ timestamp, 5, tmpCanvas.height - 10)
ctx.drawImage(this.canvas, 0, 0)
return await getCanvasBlob(tmpCanvas)
.then(blob => {
let url = document.createElement("a")
url.download = filename
url.href = window.URL.createObjectURL(blob)
url.click()
console.log('url', url.href)
URL.revokeObjectURL(url.href)
})
}
}
}
</script>