we can now dragg the zoomed mapitem in the opened terrain de vie
This commit is contained in:
parent
8518ebf7df
commit
0acad592e7
@ -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'],
|
||||
@ -195,6 +199,13 @@ export default {
|
||||
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 (this.is_open & n !== o) {
|
||||
this.setPaperContents();
|
||||
@ -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();
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user