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

fixed agissantes icons size #2190

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-07-14 11:39:04 +02:00
parent 84852a434e
commit 0a5f1adf90
2 changed files with 99 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/ConcernementMapItem.vue
View File

@ -51,6 +51,8 @@ export default {
prev_scale: 1,
opacity: 0,
tween: null,
is_opening: false,
is_closing: false,
body: null,
body_parts: [],
constraint: null,
@ -148,6 +150,9 @@ export default {
if (this.is_opened & n !== o) {
this.setPaperContents();
}
if (n !== o) {
this.handlePaperVisibilityOnMapMode()
}
},
deep: true
},
@ -448,7 +453,7 @@ export default {
}
if (this.concernement.has_agissantes) {
// TODO icons
// this.paper_main_object.addChild(this.setPaperAgissantes());
this.paper_main_object.addChild(this.setPaperAgissantesIcons());
}
if (this.concernement.has_doleance) {
this.addNewPaperSymbolInstance('doleance_icon');
@ -621,6 +626,27 @@ export default {
}
return g;
},
setPaperAgissantesIcons(){
let g = new paper.Group({
pivot: new paper.Point(this.pos),
name: 'agissantes_icons'
});
for (let i = 0; i < this.entites.length; i++) {
if (this.entites[i].entite && this.entites[i].entite.agissante) {
let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite_action_icon']);
instance.name = 'entite_action';
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.scale(0.2);
instance.scale(this.scale);
instance.item_id = this.entites[i].entite.id;
instance.item_type = 'entite_action';
instance.is_symbol_instance = true;
g.addChild(instance)
}
}
return g;
},
setPaperPuissanceagirBesoins(){
let g = new paper.Group({
pivot: new paper.Point(this.pos),
@ -970,7 +996,37 @@ export default {
return g;
},
// PAPER VISIBILITY
handlePaperVisibility(){
handlePaperVisibilityOnBeforeOpen(){
// agissantes
if (this.concernement.has_agissantes && this.map_mode === "action") {
if (!this.is_opened) {
this.paper_main_object.children.agissantes_icons.visible = true;
} else {
this.paper_main_object.children.agissantes_icons.visible = false;
}
}
},
handlePaperVisibilityOnOpened(){
},
handlePaperVisibilityOnBeforeClose(){
},
handlePaperVisibilityOnClosed(){
// agissantes
if (this.concernement.has_agissantes && this.map_mode === "action") {
if (!this.is_opened) {
this.paper_main_object.children.agissantes_icons.visible = true;
} else {
this.paper_main_object.children.agissantes_icons.visible = false;
}
}
},
handlePaperVisibilityOnMapMode(){
},
handlePaperVisibilityOnAfterEnginUpdate(){
// contours focused
if (!this.isFocused()){
this.paper_main_object.children['contours'].fillColor = "rgba(255,255,255,0.1)";
@ -1006,18 +1062,16 @@ export default {
this.paper_main_object.children.puissanceagir_icon.visible = false;
}
}
// TODO icons
// // agissantes
// // console.log('this.concernement.has_agissantes', this.concernement.has_agissantes);
// if (this.concernement.has_agissantes) {
// if (this.map_mode === "action") {
// // this.paper_main_object.children.agissantes.visible = true;
// } else {
// // this.paper_main_object.children.agissantes.visible = false;
// }
// }
// agissantes
if (this.concernement.has_agissantes) {
if (this.map_mode !== "action") {
this.paper_main_object.children.agissantes_icons.visible = false;
} else if(!this.is_opened && !this.is_closing){
this.paper_main_object.children.agissantes_icons.visible = true;
}
}
// doleance
if (this.concernement.has_doleance) {
if (this.map_mode === "doleancer") {
@ -1196,10 +1250,12 @@ export default {
this.tween.stop();
}
if (open) {
this.is_opening = true;
// paper bring to front
this.paper_main_object.bringToFront();
// create the paper objects to display (like entite, besoin, etc)
this.setPaperContents();
this.handlePaperVisibilityOnBeforeOpen();
// calcul opened size regarding window size
// let ch = this.canvas.height;
@ -1238,6 +1294,8 @@ export default {
this.opacity = obj.o;
this.pos = {x:obj.x, y:obj.y};
Matter.Body.setPosition(this.body, this.pos);
this.handlePaperVisibilityOnOpened();
// fix the concernement position with a constraint
this.constraint = Matter.Constraint.create({
@ -1249,15 +1307,21 @@ export default {
});
Matter.Composite.add(this.matterEngine.world, [this.body, this.constraint]);
this.is_opening = false;
});
// 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.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate);
} else {
// closing
this.is_closing = true;
if(this.constraint){
Matter.Composite.remove(this.matterEngine.world, this.constraint);
}
this.handlePaperVisibilityOnBeforeClose();
this.tween = new Tween.Tween({s: this.scale, o: 1})
.to({s: 1, o: 0}, 500)
.onUpdate((obj) => {
@ -1276,7 +1340,9 @@ export default {
})
.onComplete((obj) => {
this.prev_scale = this.scale = 1;
this.handlePaperVisibilityOnClosed();
this.clearPaperContents();
this.is_closing = false;
});
}
this.tween.easing(Tween.Easing.Quadratic.InOut).start();
@ -1619,7 +1685,7 @@ export default {
this.paper_main_object.position = this.pos = this.body.position;
this.handlePaperVisibility()
this.handlePaperVisibilityOnAfterEnginUpdate()
},
},
render() {

19
src/components/MapConcernements.vue
View File

@ -212,6 +212,7 @@ export default {
this.addPaperSymbolDefinition('entite', this.setPaperEntiteSymbol());
this.addPaperSymbolDefinition('entite_hidden', this.setPaperHiddenEntiteSymbol());
this.addPaperSymbolDefinition('entite_hover', this.setPaperEntiteHoverSymbol());
this.addPaperSymbolDefinition('entite_action_icon', this.setPaperEntiteActionIconSymbol());
this.addPaperSymbolDefinition('entite_action', this.setPaperEntiteActionSymbol());
this.addPaperSymbolDefinition('entite_action_hover', this.setPaperEntiteActionHoverSymbol());
this.addPaperSymbolDefinition('besoin', this.setPaperBesoinSymbol());
@ -897,6 +898,24 @@ export default {
strokeWidth:2
})
},
setPaperEntiteActionIconSymbol(){
let svgIcon = paper.project.importSVG(iconAction);
svgIcon.strokeWidth = 0.8;
svgIcon.scale(0.6);
svgIcon.strokeColor = '#000';
svgIcon.fillColor = null;
svgIcon.position = {x:0, y:0};
// let circle = new paper.Path.Circle({
// radius: 3,
// fillColor: 'rgba(255,255,255,0.01)'
// })
return new paper.Group({
children: [svgIcon],
name: 'action_icon'
});
},
setPaperEntiteActionSymbol(){
let svgIcon = paper.project.importSVG(iconAction);
svgIcon.strokeWidth = 0.25;