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

started to create paper contents once concernement opened and not on init (doleance left to do)

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-07-13 22:49:31 +02:00
parent be3d7f622d
commit f17781b8be
3 changed files with 122 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/api/gql/concernementrevisions.fragment.gql Normal file
View File

@ -0,0 +1,22 @@
fragment ConcernementRevisionsFields on Concernement {
id
revision_id
entites {
menacemaintien
prise
actuelfuture
entite {
title
id
agissante
proximite {
id
title
}
superposition {
id
title
}
}
}
}

141
src/components/ConcernementMapItem.vue
View File

@ -141,10 +141,13 @@ export default {
}, },
map_mode: { map_mode: {
handler (n, o) { handler (n, o) {
// console.log('watch map_mode', o, n); console.log('concernementMapItem watch map_mode', o, n);
if (n === 'terraindevie' && !this.opened_concernement) { if (n === 'terraindevie' && !this.opened_concernement) {
this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie
} }
if (this.is_opened & n !== o) {
this.setPaperContents();
}
}, },
deep: true deep: true
}, },
@ -438,17 +441,17 @@ export default {
}); });
// the sub items for one concernement // the sub items for one concernement
this.addNewPaperSymbolInstance('boussole_bg'); // this.addNewPaperSymbolInstance('boussole_bg');
this.paper_main_object.addChild(this.setPaperContour()); this.paper_main_object.addChild(this.setPaperContour());
this.paper_main_object.addChild(this.setPaperEntites()); // this.paper_main_object.addChild(this.setPaperEntites());
if (this.concernement.has_puissancedagir) { if (this.concernement.has_puissancedagir) {
this.addNewPaperSymbolInstance('puissanceagir_bg'); // this.addNewPaperSymbolInstance('puissanceagir_bg');
this.addNewPaperSymbolInstance('puissanceagir_icon'); this.addNewPaperSymbolInstance('puissanceagir_icon');
this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins()); // this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins());
} }
if (this.concernement.has_agissantes) { if (this.concernement.has_agissantes) {
this.paper_main_object.addChild(this.setPaperAgissantes()); // this.paper_main_object.addChild(this.setPaperAgissantes());
} }
if (this.concernement.has_doleance) { if (this.concernement.has_doleance) {
this.addNewPaperSymbolInstance('doleance_bg'); this.addNewPaperSymbolInstance('doleance_bg');
@ -466,14 +469,48 @@ export default {
this.initPaperEvents() this.initPaperEvents()
}, },
addNewPaperSymbolInstance(name){ setPaperContents(){
// trigered once opening tween is complete
this.clearPaperContents();
switch(this.map_mode){
case 'terraindevie':
this.addNewPaperSymbolInstance('boussole_bg', true);
this.paper_main_object.addChild(this.setPaperEntites());
break;
case 'puissancedagir':
this.addNewPaperSymbolInstance('puissanceagir_bg', true);
this.paper_main_object.addChild(this.setPaperPuissanceagirBesoins());
break;
case 'action':
this.addNewPaperSymbolInstance('boussole_bg', true);
this.paper_main_object.addChild(this.setPaperAgissantes());
break;
}
},
clearPaperContents(){
let clearable_children = ['boussole_bg', 'entites',
'puissanceagir_bg','puissanceagir_besoins',
'agissantes'];
clearable_children.forEach(child_name => {
if (this.paper_main_object.children[child_name]) {
this.paper_main_object.children[child_name].remove();
}
});
},
addNewPaperSymbolInstance(name, back){
let instance = new paper.SymbolItem(this.paper_symbol_definitions[name]); // , {x:0,y:0} let instance = new paper.SymbolItem(this.paper_symbol_definitions[name]); // , {x:0,y:0}
instance.name = name; instance.name = name;
// instance.pivot = new paper.Point({x:0,y:0}); // instance.pivot = new paper.Point({x:0,y:0});
instance.position = this.pos; instance.position = this.pos;
instance.scale = this.scale; instance.scale(this.scale);
// instance.locked = true; // instance.locked = true;
this.paper_main_object.addChild(instance); this.paper_main_object.addChild(instance);
if (back) {
this.paper_main_object.children[name].sendToBack();
} else {
this.paper_main_object.children[name].bringToFront();
}
}, },
setPaperContour(){ setPaperContour(){
// console.log(`setPaperContour ${this.concernement.id}`); // console.log(`setPaperContour ${this.concernement.id}`);
@ -561,7 +598,8 @@ export default {
let symbol_name = this.entites[i].entite ? 'entite' : 'entite_hidden'; let symbol_name = this.entites[i].entite ? 'entite' : 'entite_hidden';
let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]); let instance = new paper.SymbolItem(this.paper_symbol_definitions[symbol_name]);
instance.name = 'entite'; instance.name = 'entite';
instance.position = new paper.Point([this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y]); instance.position = new paper.Point([this.pos.x + this.entites[i].display.pos.x * this.scale, this.pos.y + this.entites[i].display.pos.y * this.scale]);
instance.scale(this.scale);
instance.fillColor = '#000'; instance.fillColor = '#000';
instance.item_id = this.entites[i].entite ? this.entites[i].entite.id : null; instance.item_id = this.entites[i].entite ? this.entites[i].entite.id : null;
instance.item_type = this.entites[i].entite ? 'entite' : 'hidden_entite'; instance.item_type = this.entites[i].entite ? 'entite' : 'hidden_entite';
@ -579,9 +617,10 @@ export default {
if (this.entites[i].entite && this.entites[i].entite.agissante) { if (this.entites[i].entite && this.entites[i].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';
instance.position = new paper.Point([this.pos.x + this.entites[i].display.pos.x, this.pos.y + this.entites[i].display.pos.y]); instance.position = new paper.Point([this.pos.x + this.entites[i].display.pos.x * this.scale, this.pos.y + this.entites[i].display.pos.y * this.scale]);
instance.fillColor = '#000'; instance.fillColor = '#000';
instance.scale(0.2); // instance.scale(0.2);
instance.scale(this.scale);
instance.item_id = this.entites[i].entite.id; instance.item_id = this.entites[i].entite.id;
instance.item_type = 'entite_action'; instance.item_type = 'entite_action';
instance.is_symbol_instance = true; instance.is_symbol_instance = true;
@ -610,6 +649,7 @@ export default {
// use paper symbol // use paper symbol
let besoin = new paper.SymbolItem(this.paper_symbol_definitions['besoin']); let besoin = new paper.SymbolItem(this.paper_symbol_definitions['besoin']);
besoin.position = new paper.Point([this.pos.x + x, this.pos.y + y]); besoin.position = new paper.Point([this.pos.x + x, this.pos.y + y]);
besoin.scale(this.scale);
besoin.item_id = this.concernement.besoins[i].id; besoin.item_id = this.concernement.besoins[i].id;
besoin.item_cid = this.concernement.id; besoin.item_cid = this.concernement.id;
besoin.item_type = 'besoin'; besoin.item_type = 'besoin';
@ -632,6 +672,7 @@ export default {
// use paper symbol // use paper symbol
let reponse = new paper.SymbolItem(this.paper_symbol_definitions['reponse']); let reponse = new paper.SymbolItem(this.paper_symbol_definitions['reponse']);
reponse.position = new paper.Point([this.pos.x + rx, this.pos.y + ry]); reponse.position = new paper.Point([this.pos.x + rx, this.pos.y + ry]);
reponse.scale(this.scale);
reponse.item_id = this.concernement.besoins[i].reponses[j].id; reponse.item_id = this.concernement.besoins[i].reponses[j].id;
reponse.item_bid = this.concernement.besoins[i].id; reponse.item_bid = this.concernement.besoins[i].id;
reponse.item_cid = this.concernement.id; reponse.item_cid = this.concernement.id;
@ -953,10 +994,10 @@ export default {
// backgrounds // backgrounds
if (this.is_opened) { if (this.is_opened) {
// hide all bgs // hide all bgs
this.paper_main_object.children.boussole_bg.visible = false; // this.paper_main_object.children.boussole_bg.visible = false;
if (this.concernement.has_puissancedagir) { // if (this.concernement.has_puissancedagir) {
this.paper_main_object.children.puissanceagir_bg.visible = false; // this.paper_main_object.children.puissanceagir_bg.visible = false;
} // }
if (this.concernement.has_doleance) { if (this.concernement.has_doleance) {
this.paper_main_object.children.doleance_bg.visible = false; this.paper_main_object.children.doleance_bg.visible = false;
} }
@ -964,12 +1005,12 @@ export default {
switch (this.map_mode) { switch (this.map_mode) {
case 'terraindevie': case 'terraindevie':
case 'action': case 'action':
this.paper_main_object.children.boussole_bg.visible = true; // this.paper_main_object.children.boussole_bg.visible = true;
break; break;
case 'puissancedagir': case 'puissancedagir':
if (this.concernement.has_puissancedagir) { // if (this.concernement.has_puissancedagir) {
this.paper_main_object.children.puissanceagir_bg.visible = true; // this.paper_main_object.children.puissanceagir_bg.visible = true;
} // }
break; break;
case 'doleancer': case 'doleancer':
if (this.concernement.has_doleance) { if (this.concernement.has_doleance) {
@ -978,24 +1019,24 @@ export default {
break; break;
} }
}else{ }else{
this.paper_main_object.children.boussole_bg.visible = false; // this.paper_main_object.children.boussole_bg.visible = false;
if (this.concernement.has_puissancedagir) { // if (this.concernement.has_puissancedagir) {
this.paper_main_object.children.puissanceagir_bg.visible = false; // this.paper_main_object.children.puissanceagir_bg.visible = false;
} // }
if (this.concernement.has_doleance) { if (this.concernement.has_doleance) {
this.paper_main_object.children.doleance_bg.visible = false; this.paper_main_object.children.doleance_bg.visible = false;
} }
} }
// entites // entites
if (this.is_opened // if (this.is_opened
&& this.map_mode !== 'puissancedagir' // && this.map_mode !== 'puissancedagir'
&& this.map_mode !== 'doleancer' // && this.map_mode !== 'doleancer'
&& this.map_mode !== 'action' ) { // && this.map_mode !== 'action' ) {
this.paper_main_object.children.entites.visible = true; // this.paper_main_object.children.entites.visible = true;
} else { // } else {
this.paper_main_object.children.entites.visible = false; // this.paper_main_object.children.entites.visible = false;
} // }
// puissance d'agir // puissance d'agir
@ -1003,27 +1044,27 @@ export default {
if (this.map_mode === "puissancedagir") { if (this.map_mode === "puissancedagir") {
if (!this.is_opened) { if (!this.is_opened) {
this.paper_main_object.children.puissanceagir_icon.visible = true; // if not opened and has_puissancedagir draw the puissance d'agir icone this.paper_main_object.children.puissanceagir_icon.visible = true; // if not opened and has_puissancedagir draw the puissance d'agir icone
this.paper_main_object.children.puissanceagir_besoins.visible = false; // this.paper_main_object.children.puissanceagir_besoins.visible = false;
} else { } else {
this.paper_main_object.children.puissanceagir_icon.visible = false; this.paper_main_object.children.puissanceagir_icon.visible = false;
this.paper_main_object.children.puissanceagir_besoins.visible = true; // this.paper_main_object.children.puissanceagir_besoins.visible = true;
// this.drawBesoins(); // this.drawBesoins();
} }
} else { } else {
this.paper_main_object.children.puissanceagir_icon.visible = false; this.paper_main_object.children.puissanceagir_icon.visible = false;
this.paper_main_object.children.puissanceagir_besoins.visible = false; // this.paper_main_object.children.puissanceagir_besoins.visible = false;
} }
} }
// agissantes // // agissantes
// console.log('this.concernement.has_agissantes', this.concernement.has_agissantes); // // console.log('this.concernement.has_agissantes', this.concernement.has_agissantes);
if (this.concernement.has_agissantes) { // if (this.concernement.has_agissantes) {
if (this.map_mode === "action") { // if (this.map_mode === "action") {
this.paper_main_object.children.agissantes.visible = true; // // this.paper_main_object.children.agissantes.visible = true;
} else { // } else {
this.paper_main_object.children.agissantes.visible = false; // // this.paper_main_object.children.agissantes.visible = false;
} // }
} // }
// doleance // doleance
if (this.concernement.has_doleance) { if (this.concernement.has_doleance) {
@ -1234,10 +1275,17 @@ export default {
this.scale = obj.s; this.scale = obj.s;
this.opacity = obj.o; this.opacity = obj.o;
Matter.Body.setPosition(this.body, {x:obj.x, y:obj.y});
this.pos = {x:obj.x, y:obj.y}; this.pos = {x:obj.x, y:obj.y};
Matter.Body.setPosition(this.body, this.pos);
}) })
.onComplete((obj) => { .onComplete((obj) => {
// record tween one last time
this.prev_scale = this.scale = obj.s;
this.opacity = obj.o;
this.pos = {x:obj.x, y:obj.y};
Matter.Body.setPosition(this.body, this.pos);
// fix the concernement position with a constraint
this.constraint = Matter.Constraint.create({ this.constraint = Matter.Constraint.create({
pointA: this.pos, pointA: this.pos,
bodyB: this.body, bodyB: this.body,
@ -1246,7 +1294,9 @@ export default {
length: 0 length: 0
}); });
Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]); Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
this.prev_scale = this.scale;
// create the paper objects to display (like entite, besoin, etc)
this.setPaperContents();
}); });
// recreate the matter engine event to get it a the end of the events stack // recreate the matter engine event to get it a the end of the events stack
Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate); Matter.Events.off(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
@ -1274,6 +1324,7 @@ export default {
}) })
.onComplete((obj) => { .onComplete((obj) => {
this.prev_scale = this.scale = 1; this.prev_scale = this.scale = 1;
this.clearPaperContents();
}); });
} }
this.tween.easing(Tween.Easing.Quadratic.InOut).start(); this.tween.easing(Tween.Easing.Quadratic.InOut).start();

7
src/components/MapConcernements.vue
View File

@ -898,13 +898,14 @@ export default {
setPaperEntiteActionSymbol(){ setPaperEntiteActionSymbol(){
let svgIcon = paper.project.importSVG(iconAction); let svgIcon = paper.project.importSVG(iconAction);
svgIcon.strokeColor = '#000'; svgIcon.strokeColor = '#000';
svgIcon.strokeWidth = 0.75; svgIcon.strokeWidth = 0.25;
svgIcon.fillColor = null; svgIcon.fillColor = null;
svgIcon.position = {x:0, y:0}; svgIcon.position = {x:0, y:0};
svgIcon.scale(0.15);
let circle = new paper.Path.Circle({ let circle = new paper.Path.Circle({
radius: 15, radius: 3,
fillColor: 'rgba(255,255,255,0.05)' fillColor: 'rgba(255,255,255,0.01)'
}) })
return new paper.Group({ return new paper.Group({