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
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