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

we can now dragg the zoomed mapitem in the opened terrain de vie

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2024-02-06 11:58:50 +01:00
parent 8518ebf7df
commit 0acad592e7
3 changed files with 91 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
src/components/ConcernementMapItem.vue
View File

@ -40,7 +40,10 @@ export default {
salientPoints: [], salientPoints: [],
scale: 1, scale: 1,
prev_scale: 1, prev_scale: 1,
//
details_zoom_scale: 1, details_zoom_scale: 1,
is_dragging: false,
//
opacity: 0, opacity: 0,
tween: null, tween: null,
is_visible: true, is_visible: true,
@ -58,6 +61,7 @@ export default {
// //
doleance_transition: false, doleance_transition: false,
// //
} }
}, },
props: ['mapitem'], props: ['mapitem'],
@ -192,7 +196,14 @@ export default {
// apply a little force to check the map when returning to terrain de vie // apply a little force to check the map when returning to terrain de vie
if (n === 'terraindevie' && !this.opened_concernement) { if (n === 'terraindevie' && !this.opened_concernement) {
this.applyShuffleForces(); this.applyShuffleForces();
}
if (this.is_open && n !== "terraindevie"){
console.log('concernementMapItem watch map_mode CALLING setDetailsZoomValue');
this.setDetailsZoomValue(1);
// we have to call updateDetailsZoomScale() right now, can't wait for wath f° which will append after the map_item contents redrawing
this.updateDetailsZoomScale();
} }
// if map_item is open and we change the mad mode, redefined what is displayed in the "boussole" // if map_item is open and we change the mad mode, redefined what is displayed in the "boussole"
@ -201,7 +212,7 @@ export default {
this.resetMapItemPosition(); this.resetMapItemPosition();
this.resetMapItemScale(); this.resetMapItemScale();
} }
// Clones visibility // Clones visibility
if(this.mapitem.clone){ if(this.mapitem.clone){
let is_visible = false; let is_visible = false;
@ -274,7 +285,7 @@ export default {
}, },
detailsZoomValue: { detailsZoomValue: {
handler (n, o) { handler (n, o) {
if (this.is_open) { if (this.is_open && this.map_mode === "terraindevie") {
console.log('map_item detailsZoomValue watch', n); console.log('map_item detailsZoomValue watch', n);
this.updateDetailsZoomScale() this.updateDetailsZoomScale()
} }
@ -285,19 +296,14 @@ export default {
methods: { methods: {
...mapActions(CommonStore,['setHoverElmt']), ...mapActions(CommonStore,['setHoverElmt']),
...mapActions(ConcernementsStore,['openCloseConcernements', ...mapActions(ConcernementsStore,['openCloseConcernements',
// 'setConcernementMapItem',
'hideShowConcernement', 'hideShowConcernement',
'setOpenedEntiteId', 'setOpenedEntiteId',
'setActiveRevision', 'setActiveRevision',
'setBesoinPaperId', 'setBesoinPaperId',
'setOpenedDoleanceField', 'setOpenedDoleanceField',
'setOpenedRecit', 'setOpenedRecit',
// 'setConcernementScale', 'setDetailsZoomValue',
]), ]),
// getResponsiveRay(){
// return Math.min(this.canvas.width, this.canvas.height) * 0.08;
// },
parseEntityPointsValues (){ parseEntityPointsValues (){
// converts data (menace/maintien, actuel/future, prise) into atcual position x,y // converts data (menace/maintien, actuel/future, prise) into atcual position x,y
for (let r = 0; r < this.concernement.revisions.length; r++) { // loop through all revisions for (let r = 0; r < this.concernement.revisions.length; r++) { // loop through all revisions
@ -506,7 +512,9 @@ export default {
mass: mass, mass: mass,
restitution: 0.06, restitution: 0.06,
collisionFilter: { collisionFilter: {
group: -1 group: -1,
category: 0x0002,
mask: 0x0001
}, },
plugin: { plugin: {
attractors: [ attractors: [
@ -701,6 +709,7 @@ export default {
}, },
updateDetailsZoomScale(){ updateDetailsZoomScale(){
console.log(`updateDetailsZoomScale ${this.detailsZoomValue}`);
// revert to the original scale (by reverting the previous scale) // revert to the original scale (by reverting the previous scale)
this.paper_main_object.scale(1 / this.details_zoom_scale); this.paper_main_object.scale(1 / this.details_zoom_scale);
// compute the zoom scale // compute the zoom scale
@ -711,11 +720,19 @@ export default {
// this.resetSuperpositionsConstraintsScaling(s); // this.resetSuperpositionsConstraintsScaling(s);
// this.prev_scale = this.scale = s; // this.prev_scale = this.scale = s;
// allow to go through walls if zoomed in
if (this.detailsZoomValue > 1) {
this.body.collisionFilter.mask = 0x0004;
} else {
this.body.collisionFilter.mask = 0x0001;
}
}, },
/* /*
* called by openClose() function * called by openClose() function
*/ */
setPaperContents(){ setPaperContents(){
console.log('setPaperContents');
// trigered once opening tween is complete // trigered once opening tween is complete
// trigered once mapmode changed // trigered once mapmode changed
this.clearPaperContents(); this.clearPaperContents();
@ -984,7 +1001,7 @@ export default {
return g; return g;
}, },
setPaperEntitesProximiteReferences(){ setPaperEntitesProximiteReferences(){
// console.log('_ _ _ _ setPaperEntitesProximiteReferences') console.log('setPaperEntitesProximiteReferences')
let g = new paper.Group({ let g = new paper.Group({
pivot: new paper.Point(this.pos), pivot: new paper.Point(this.pos),
name: 'entites_proximites_references' name: 'entites_proximites_references'
@ -1094,7 +1111,7 @@ export default {
x: entite_ref_pos.x+seg.point[0]*scaledown, x: entite_ref_pos.x+seg.point[0]*scaledown,
y: entite_ref_pos.y+seg.point[1]*scaledown y: entite_ref_pos.y+seg.point[1]*scaledown
} }
console.log('paddedSegPoint', paddedSegPoint); // console.log('paddedSegPoint', paddedSegPoint);
paper_segments.push(new paper.Segment({ paper_segments.push(new paper.Segment({
point: paddedSegPoint, point: paddedSegPoint,
handleIn: seg.handleIn, handleIn: seg.handleIn,
@ -1146,7 +1163,7 @@ export default {
y: ent.display.ray * Math.sin(ent.display.alpha * (Math.PI/180)) y: ent.display.ray * Math.sin(ent.display.alpha * (Math.PI/180))
}) })
}) })
console.log('points', points); // console.log('points', points);
let gen_scaledown = 0.16; let gen_scaledown = 0.16;
// scaledown = 1; // scaledown = 1;
@ -1191,7 +1208,7 @@ export default {
for (let i = 0; i < this.concernement.revisions_byid[this.concernement.revision_id].entites.length; i++) { for (let i = 0; i < this.concernement.revisions_byid[this.concernement.revision_id].entites.length; i++) {
let entite = this.concernement.revisions_byid[this.concernement.revision_id].entites[i]; let entite = this.concernement.revisions_byid[this.concernement.revision_id].entites[i];
console.log('agissantes', entite); // console.log('agissantes', entite);
if (entite.entite && entite.entite.agissante) { if (entite.entite && entite.entite.agissante) {
let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action']); let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action']);
instance.name = 'entite_action'; instance.name = 'entite_action';
@ -2044,6 +2061,13 @@ export default {
} }
} else { // si ce concernement est ouvert } else { // si ce concernement est ouvert
console.log('mapitem is opened'); console.log('mapitem is opened');
// do not click if we were dragging
if (this.is_dragging) {
this.is_dragging = false;
return;
}
// lets define some options regarding the map_mode // lets define some options regarding the map_mode
let group_to_hit = null; let group_to_hit = null;
switch (this.map_mode) { switch (this.map_mode) {
@ -2124,6 +2148,28 @@ export default {
} }
}.bind(this); }.bind(this);
/*
* works i correlation with updateDetailsZoomScale()
*/
this.paper_main_object.onMouseDrag = async function(event){
if (this.is_open && this.map_mode === 'terraindevie') {
event.stopPropagation();
event.preventDefault();
console.log('paper concernement onMouseDrag', event.delta);
if (this.detailsZoomValue > 1) {
let x = this.pos.x + event.delta.x;
let y = this.pos.y + event.delta.y;
this.pos = this.paper_main_object.position = this.constraint.pointA = {x: x, y: y};
Matter.Body.setPosition(this.body, this.pos);
this.is_dragging = true;
}
event.stop();
return false;
}
}.bind(this);
}, },
resetHoverElmt(){ resetHoverElmt(){
// console.log('resetHoverElmt'); // console.log('resetHoverElmt');
@ -2292,6 +2338,8 @@ export default {
this.details_zoom_scale = this.scale * this.detailsZoomValue; this.details_zoom_scale = this.scale * this.detailsZoomValue;
this.handlePaperVisibilityOnClosed(); this.handlePaperVisibilityOnClosed();
this.clearPaperContents(); this.clearPaperContents();
// reset the zoom value
this.setDetailsZoomValue(1);
this.is_closing = false; this.is_closing = false;
}); });
} }
@ -2596,7 +2644,7 @@ export default {
// ? {x:this.canvas.width, y:this.body.position.y} // ? {x:this.canvas.width, y:this.body.position.y}
// : {x:0, y:this.body.position.y}; // : {x:0, y:this.body.position.y};
// let x_force = Math.pow(dist/800,10) * dir; // let x_force = Math.pow(dist/800,10) * dir;
console.log(`applyShuffleForces dir:${dir}, maxp:${maxp}, dist:${dist}, x_velocity:${x_velocity}, y_velocity:${y_velocity}`); // console.log(`applyShuffleForces dir:${dir}, maxp:${maxp}, dist:${dist}, x_velocity:${x_velocity}, y_velocity:${y_velocity}`);
Matter.Body.setVelocity(this.body, {x: x_velocity, y: y_velocity}); Matter.Body.setVelocity(this.body, {x: x_velocity, y: y_velocity});
} else { // if in center zone real shuffle velocity } else { // if in center zone real shuffle velocity
// x_velocity = -50 + Math.random()*100; // x_velocity = -50 + Math.random()*100;
@ -2712,19 +2760,22 @@ export default {
}, },
checkOverflow() { checkOverflow() {
// respawn element if outside screen // respawn element if not opened and outside screen
let pad = 1; if (!this.is_open) {
let circleray = this.body.circleRadius+pad*1.1; let pad = 1;
let respawn = false; let circleray = this.body.circleRadius+pad*1.1;
if(this.pos.x <= pad){ this.pos.x = circleray; respawn=true;} let respawn = false;
if(this.pos.x >= this.canvas.width-pad){ this.pos.x = this.canvas.width - circleray; respawn=true;} if(this.pos.x <= pad){ this.pos.x = circleray; respawn=true;}
if(this.pos.y <= pad){ this.pos.y = circleray; respawn=true;} if(this.pos.x >= this.canvas.width-pad){ this.pos.x = this.canvas.width - circleray; respawn=true;}
if(this.pos.y >= this.canvas.height-pad){ this.pos.y = this.canvas.height - circleray; respawn=true;} if(this.pos.y <= pad){ this.pos.y = circleray; respawn=true;}
if (respawn) { if(this.pos.y >= this.canvas.height-pad){ this.pos.y = this.canvas.height - circleray; respawn=true;}
// this.pos = respawn_pos; if (respawn) {
Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y}); console.log('respawning');
// this.setInitBodyVelocity(); // this.pos = respawn_pos;
Matter.Body.setVelocity(this.body, {x:0,y:0}); Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
// this.setInitBodyVelocity();
Matter.Body.setVelocity(this.body, {x:0,y:0});
}
} }
}, },
@ -2750,11 +2801,6 @@ export default {
// END DEBUG // END DEBUG
}, },
// onWindowResize(event){
// // console.log('mapitem onWindowResize', event, this);
// },
debugDrawMatterBodyCircle(){ debugDrawMatterBodyCircle(){
if (this.paper_main_object.children['debug_circle']) { if (this.paper_main_object.children['debug_circle']) {
this.paper_main_object.children['debug_circle'].remove(); this.paper_main_object.children['debug_circle'].remove();

14
src/components/contents/TerrainDeVie.vue
View File

@ -42,7 +42,8 @@ export default {
'opened_concernement', 'opened_concernement',
'concernementsByID', 'concernementsByID',
'ct_concernement', 'ct_concernement',
'ct_entite']), 'ct_entite',
'detailsZoomValue']),
...mapState(UserStore,['name']), ...mapState(UserStore,['name']),
created(){ created(){
let d = new Date(this.concernement.created); let d = new Date(this.concernement.created);
@ -137,6 +138,13 @@ export default {
}, },
deep: true deep: true
}, },
detailsZoomValue: {
handler (n, o) {
// console.log(`TerrainDeVie watch history_value o:${o}, n:${n}`);
this.details_value = n;
},
deep: true
},
cid: { cid: {
handler (n,o) { handler (n,o) {
console.log(`TerrainDeVie watch cid o:${o}, n:${n}`); console.log(`TerrainDeVie watch cid o:${o}, n:${n}`);
@ -246,7 +254,7 @@ export default {
</div> </div>
</section> </section>
<section class="sliders" v-if="history_slider_ops"> <section class="sliders" v-if="history_slider_ops || details_slider_ops">
<section class="historique" v-if="history_slider_ops"> <section class="historique" v-if="history_slider_ops">
<label>Historique</label> <label>Historique</label>
<!-- <h3>{{ history_value }}</h3> --> <!-- <h3>{{ history_value }}</h3> -->
@ -256,7 +264,7 @@ export default {
v-bind="history_slider_ops" v-bind="history_slider_ops"
></vue-slider> ></vue-slider>
</section> </section>
<section class="details" v-if="details_slider_ops"> <section class="details" v-if="details_slider_ops && map_mode === 'terraindevie'">
<label>Details</label> <label>Details</label>
<!-- <h3>{{ details_value }}</h3> --> <!-- <h3>{{ details_value }}</h3> -->
<vue-slider <vue-slider

1
src/stores/concernements.js
View File

@ -444,6 +444,7 @@ export const ConcernementsStore = defineStore({
this.concernementsByID[cid].active_revision = rid; this.concernementsByID[cid].active_revision = rid;
}, },
setDetailsZoomValue (z) { setDetailsZoomValue (z) {
console.log(`concernement store setDetailsZoomValue ${z}`);
this.detailsZoomValue = z; this.detailsZoomValue = z;
} }