bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved mapitem opening scaling regarding surounding contents

Browse Source 
ex: double cartouche for superpositions
This commit is contained in:
Bachir Soussi Chiadmi 2023-09-19 16:08:21 +02:00
parent 36e88290e6
commit e490195d36
4 changed files with 60 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/ConcernementMapItem.vue
View File

@ -1,5 +1,8 @@
<script>
import { nextTick } from 'vue'
import Matter from "matter-js";
import MatterAttractors from "matter-attractors";
// Matter.use(MatterAttractors);
@ -1162,9 +1165,9 @@ export default {
handlePaperVisibilityOnAfterEnginUpdate(){
// contours focused
if (!this.isFocused()){
this.paper_main_object.children['contours'].fillColor = this.mapitem.clone ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)";
this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)"; //this.mapitem.clone ? "rgba(255,0,0,0.1)" : "rgba(255,255,255,0.1)";
}else{
this.paper_main_object.children['contours'].fillColor = this.mapitem.clone ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)";
this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.4)"; //this.mapitem.clone ? "rgba(255,0,0,0.4)" : "rgba(255,255,255,0.4)";
if (this.is_hover) {
this.paper_main_object.children['contours'].strokeColor = "#01ffe2";
this.paper_main_object.children['contours'].strokeWidth = 2;
@ -1371,7 +1374,7 @@ export default {
}
}.bind(this);
this.paper_main_object.onClick = function(event){
this.paper_main_object.onClick = async function(event){
console.log('paper concernement onClick');
// prevent hover map item mouse event if cartouch is opened
@ -1381,19 +1384,19 @@ export default {
console.log('mapitem is NOT opened');
if (!this.opened_concernement) { // si aucun concernement n'est ouvert
console.log(`Open me ${this.id}`);
// open/close all concernements
this.openCloseConcernements(this.cid, this.id)
// push route (keep the hash for map_mode)
this.$router.push({
// push route (keep the hash for map_mode)
// wait for routing to be finished before opening the mapItem
await this.$router.push({
name: 'concernement',
params: {cid: this.cid},
query: {
mapitemid: this.id,
// TODO when mapitem not a clone, there is no superposition_id prop
mapitemid: this.id,
superposition_id: this.mapitem.superposition_ids[0]
},
hash: `#${this.map_mode}`
});
// open/close all concernements
this.openCloseConcernements(this.cid, this.id)
// reset the mousehover
this.resetHoverElmt();
}
@ -1457,7 +1460,8 @@ export default {
}, 100);
},
// OPEN / CLOSE (with tween)
openClose(open) {
openClose(open) { // async
// await nextTick(); // not working
console.log(`ConcernementsMapItem ${this.id} openClose: ${open}`);
if (this.tween) {
this.tween.stop();
@ -1468,10 +1472,14 @@ export default {
this.setPaperContents();
this.handlePaperVisibilityOnBeforeOpen();
// calcul opened size regarding window size
// let ch = this.canvas.height;
// let s = this.canvas.height / (this.ray*2.8)
let s = Math.min(this.canvas.height, this.canvas.width - this.cartouch_width) / (this.ray*2.8)
// calcul opened size regarding window size and surounding contents
let header = document.querySelector('header#header');
let header_height = header.clientHeight;
let map_nav = document.querySelector('nav#map-nav');
let map_nav_height = map_nav.clientHeight;
let s_h = (this.canvas.height - header_height - map_nav_height) / (this.ray*2*1.15);
let s_w = (this.canvas.width - this.cartouch_width) / (this.ray*2*1.7);
let s = Math.min(s_h, s_w)
// create once the opening tweening
this.tween = new Tween.Tween({s: this.scale, x: this.pos.x, y: this.pos.y, o: 0})
@ -1693,14 +1701,14 @@ export default {
? (this.canvas.width - this.cartouch_width) / 2
: this.canvas.width / 2;
// get the direction to the closest side
let dir =
this.pos.x < pseudo_center_x
|| (this.map_mode === 'superposition'
let dir = this.map_mode === 'superposition'
&& this.concernement.superposition_constraints_id
&& this.concernement.superposition_constraints_id[this.id]
&& this.concernement.superposition_constraints_id[this.id].length) // go to the left if has superposition constraint applied
? -1 // to the left
: -1; // to the right
&& this.concernement.superposition_constraints_id[this.id].length // go to the right if has superposition constraint applied
? 1 // to the right
: this.pos.x > pseudo_center_x // else
? 1 // to the right
: -1; // to the left
// max and min item position
let minp = 0;
let maxp = dir < 0

6
src/components/MapConcernements.vue
View File

@ -274,7 +274,9 @@ export default {
...mapActions(CommonStore,['addPaperSymbolDefinition',
'setHoverElmt']),
animate () {
Matter.Engine.update(this.engine, 1);
// if (document.hasFocus()) {
Matter.Engine.update(this.engine, 1);
// }
window.requestAnimationFrame(this.animate);
},
initPaperSymbols(){
@ -1060,7 +1062,7 @@ export default {
})
},
async setSuperpositionsMatterConstraints(){
await nextTick(); // wait for dom to be upadted before applying consraint
await nextTick(); // wait for dom to be upadted before applying constraint
console.log('setSuperpositionsMatterConstraints this.allSuperpositions', this.allSuperpositions);
// loop through all supperposition couple

5
src/stores/common.js
View File

@ -7,6 +7,7 @@ export const CommonStore = defineStore({
state: () => ({
hover_elmt: null,
map_item_ray: Math.min(window.innerWidth, window.innerHeight) * 0.08,
original_cartouch_width: 450,
cartouch_width: 450,
cartouch_is_opened: false,
paper_symbol_definitions: {}
@ -20,6 +21,10 @@ export const CommonStore = defineStore({
// mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer
this.hover_elmt = elmt;
},
setCartoucheWidth (delta) {
console.log('CommonStore setCartoucheWidth', delta);
this.cartouch_width = this.original_cartouch_width * delta;
},
setCartoucheOpened (v) {
this.cartouch_is_opened = v;
},

32
src/views/Concernement.vue
View File

@ -21,6 +21,7 @@ export default {
data(){
return {
entite: null,
superposition_id: null,
opened_besoin_id: null,
arrowup_path: mdiArrowUp
}
@ -30,15 +31,15 @@ export default {
'opened_concernement',
'concernements_loaded',
'allSuperpositions_byid']),
// ...mapState(CommonStore,['hover_elmt']),
superposition_id () {
console.log('superposition_id computed');
if(this.$route.query.superposition_id){
return this.$route.query.superposition_id
} else {
return null;
}
},
...mapState(CommonStore,['cartouch_width']),
// superposition_id () {
// console.log('superposition_id computed');
// if(this.$route.query.superposition_id){
// return this.$route.query.superposition_id
// } else {
// return null;
// }
// },
superposition () {
console.log('superposition computed', this.superposition_id);
if(this.superposition_id){
@ -80,6 +81,18 @@ export default {
console.log(`Concernement view created, id: ${this.cid}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
console.log('Concernement view created, allSuperpositions_byid', this.allSuperpositions_byid);
console.log("superposition", this.superposition);
if(this.map_mode === "superposition" && this.$route.query.superposition_id){
this.superposition_id = this.$route.query.superposition_id;
// as we have two content to show multiply the cartouch with by 2
// necessary for mapitem opening scale and position
this.setCartoucheWidth(2)
}else{
// as we have one content to show multiply the cartouch with by 1
// necessary for mapitem opening scale and position
this.setCartoucheWidth(1)
}
// when we arrived directly to the url, load the entite
// this.eid provided by route params
if (!this.entity && this.eid) {
@ -114,6 +127,7 @@ export default {
'setOpenedEntityId',
'setMapMode',
'resetConcernementOpened']),
...mapActions(CommonStore,['setCartoucheWidth']),
openEntity(){
this.setOpenedEntityId(parseInt(this.eid))
this.loadEntite()