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
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: [],
scale: 1,
prev_scale: 1,
//
details_zoom_scale: 1,
is_dragging: false,
//
opacity: 0,
tween: null,
is_visible: true,
@@ -58,6 +61,7 @@ export default {
//
doleance_transition: false,
//
}
},
props: ['mapitem'],
@@ -192,7 +196,14 @@ export default {
// apply a little force to check the map when returning to terrain de vie
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"
@@ -201,7 +212,7 @@ export default {
this.resetMapItemPosition();
this.resetMapItemScale();
}
// Clones visibility
if(this.mapitem.clone){
let is_visible = false;
@@ -274,7 +285,7 @@ export default {
},
detailsZoomValue: {
handler (n, o) {
if (this.is_open) {
if (this.is_open && this.map_mode === "terraindevie") {
console.log('map_item detailsZoomValue watch', n);
this.updateDetailsZoomScale()
}
@@ -285,19 +296,14 @@ export default {
methods: {
...mapActions(CommonStore,['setHoverElmt']),
...mapActions(ConcernementsStore,['openCloseConcernements',
// 'setConcernementMapItem',
'hideShowConcernement',
'setOpenedEntiteId',
'setActiveRevision',
'setBesoinPaperId',
'setOpenedDoleanceField',
'setOpenedRecit',
// 'setConcernementScale',
'setDetailsZoomValue',
]),
// getResponsiveRay(){
// return Math.min(this.canvas.width, this.canvas.height) * 0.08;
// },
parseEntityPointsValues (){
// 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
@@ -506,7 +512,9 @@ export default {
mass: mass,
restitution: 0.06,
collisionFilter: {
group: -1
group: -1,
category: 0x0002,
mask: 0x0001
},
plugin: {
attractors: [
@@ -701,6 +709,7 @@ export default {
},
updateDetailsZoomScale(){
console.log(`updateDetailsZoomScale ${this.detailsZoomValue}`);
// revert to the original scale (by reverting the previous scale)
this.paper_main_object.scale(1 / this.details_zoom_scale);
// compute the zoom scale
@@ -711,11 +720,19 @@ export default {
// this.resetSuperpositionsConstraintsScaling(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
*/
setPaperContents(){
console.log('setPaperContents');
// trigered once opening tween is complete
// trigered once mapmode changed
this.clearPaperContents();
@@ -984,7 +1001,7 @@ export default {
return g;
},
setPaperEntitesProximiteReferences(){
// console.log('_ _ _ _ setPaperEntitesProximiteReferences')
console.log('setPaperEntitesProximiteReferences')
let g = new paper.Group({
pivot: new paper.Point(this.pos),
name: 'entites_proximites_references'
@@ -1094,7 +1111,7 @@ export default {
x: entite_ref_pos.x+seg.point[0]*scaledown,
y: entite_ref_pos.y+seg.point[1]*scaledown
}
console.log('paddedSegPoint', paddedSegPoint);
// console.log('paddedSegPoint', paddedSegPoint);
paper_segments.push(new paper.Segment({
point: paddedSegPoint,
handleIn: seg.handleIn,
@@ -1146,7 +1163,7 @@ export default {
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;
// scaledown = 1;
@@ -1191,7 +1208,7 @@ export default {
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];
console.log('agissantes', entite);
// console.log('agissantes', entite);
if (entite.entite && entite.entite.agissante) {
let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action']);
instance.name = 'entite_action';
@@ -2044,6 +2061,13 @@ export default {
}
} else { // si ce concernement est ouvert
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
let group_to_hit = null;
switch (this.map_mode) {
@@ -2124,6 +2148,28 @@ export default {
}
}.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(){
// console.log('resetHoverElmt');
@@ -2292,6 +2338,8 @@ export default {
this.details_zoom_scale = this.scale * this.detailsZoomValue;
this.handlePaperVisibilityOnClosed();
this.clearPaperContents();
// reset the zoom value
this.setDetailsZoomValue(1);
this.is_closing = false;
});
}
@@ -2596,7 +2644,7 @@ export default {
// ? {x:this.canvas.width, y:this.body.position.y}
// : {x:0, y:this.body.position.y};
// 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});
} else { // if in center zone real shuffle velocity
// x_velocity = -50 + Math.random()*100;
@@ -2712,19 +2760,22 @@ export default {
},
checkOverflow() {
// respawn element if outside screen
let pad = 1;
let circleray = this.body.circleRadius+pad*1.1;
let respawn = false;
if(this.pos.x <= pad){ this.pos.x = circleray; respawn=true;}
if(this.pos.x >= this.canvas.width-pad){ this.pos.x = this.canvas.width - circleray; respawn=true;}
if(this.pos.y <= pad){ this.pos.y = circleray; respawn=true;}
if(this.pos.y >= this.canvas.height-pad){ this.pos.y = this.canvas.height - circleray; respawn=true;}
if (respawn) {
// this.pos = respawn_pos;
Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y});
// this.setInitBodyVelocity();
Matter.Body.setVelocity(this.body, {x:0,y:0});
// respawn element if not opened and outside screen
if (!this.is_open) {
let pad = 1;
let circleray = this.body.circleRadius+pad*1.1;
let respawn = false;
if(this.pos.x <= pad){ this.pos.x = circleray; respawn=true;}
if(this.pos.x >= this.canvas.width-pad){ this.pos.x = this.canvas.width - circleray; respawn=true;}
if(this.pos.y <= pad){ this.pos.y = circleray; respawn=true;}
if(this.pos.y >= this.canvas.height-pad){ this.pos.y = this.canvas.height - circleray; respawn=true;}
if (respawn) {
console.log('respawning');
// this.pos = respawn_pos;
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
},
// onWindowResize(event){
// // console.log('mapitem onWindowResize', event, this);
// },
debugDrawMatterBodyCircle(){
if (this.paper_main_object.children['debug_circle']) {
this.paper_main_object.children['debug_circle'].remove();

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

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

1
src/stores/concernements.js
View File

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