diff --git a/src/App.vue b/src/App.vue index 5e883e5..f23e169 100644 --- a/src/App.vue +++ b/src/App.vue @@ -54,12 +54,14 @@ export default {
- +
diff --git a/src/assets/main.scss b/src/assets/main.scss index e66907a..0029038 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -196,6 +196,7 @@ body{ #map-popup{ position: absolute; z-index: 10; + pointer-events: none; // outline: 1px solid red; // top:0; // left: 0; @@ -218,6 +219,16 @@ body{ } } } + .reponse-map-popup{ + >div{ + margin-bottom: 0.5em; + label{ + display: block; + font-weight: 100; + font-size: 0.882em; + } + } + } h1, div{ font-size: 1em; font-weight: 400; diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 47955e6..c402202 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -38,7 +38,6 @@ export default { return { id: null, entities: null, - // opened_entite_id: null, canvas: null, ctx: null, pos : { @@ -55,7 +54,7 @@ export default { body: null, body_parts: [], constraint: null, - isHover: false, + is_hover: false, // paper_objects: {} } @@ -88,6 +87,8 @@ export default { if (this.canvasMap) { this.initCanvasMap() } + } else { + this.hideShowConcernement(this.concernement.id, false); } }, @@ -121,8 +122,8 @@ export default { map_mode: { handler (n, o) { console.log('watch map_mode', o, n); - if (n === 'terraindevie') { - this.applyShuffleForces(); + if (n === 'terraindevie' && !this.opened) { + this.applyShuffleForces(); // apply a little force to check the map when returning to terrain de vie } }, deep: true @@ -131,17 +132,31 @@ export default { handler (n, o) { // console.log('watch hover_elmt', o, n); if (n && n.type === 'concernement' && n.id === this.id) { - this.isHover = true; + this.is_hover = true; } else { - this.isHover = false; + this.is_hover = false; } }, deep: true - } + }, + // '$route':{ + // handler (to, from) { + // console.log('watch $route', from, to); + // if (to.name === concernement + // && (this.map_mode === "terraindevie" || this.map_mode === "action") + // && to.param.id === this.id + // && to.param.eid) { + // this.opened_entite_id = to.param.eid; + // } + // }, + // deep: true, + // immediate: true + // } }, methods: { ...mapActions(CommonStore,['setHoverElmt']), ...mapActions(ConcernementsStore,['openCloseConcernements']), + ...mapActions(ConcernementsStore,['hideShowConcernement']), parsePoints (){ // converts data (menace/maintien, actuel/future, prise) into atcual position x,y for (let i = 0; i < this.entites.length; i++) { @@ -386,7 +401,7 @@ export default { this.paper_objects.addChild(this.setPaperDoleanceICON()); this.paper_objects.addChild(this.setPaperDoleanceSteps()); } - console.log('initPaperObjects', this.paper_objects); + console.log(`initPaperObjects ${this.id}`, this.paper_objects); this.initPaperEvents() }, @@ -572,7 +587,7 @@ export default { children: children, pivot: new paper.Point(this.pos), name: 'puissanceagir_bg', - locked: true, + // locked: true, style: { strokeColor: '#fff' } @@ -702,7 +717,8 @@ export default { fillColor: '#000', strokeColor: '#000', strokeWidth: 2, - eid: part.id + item_id: part.id, + item_type: 'entite' })) } } @@ -1188,7 +1204,7 @@ export default { initPaperEvents(){ this.paper_objects.onMouseEnter = function(event){ - if (!this.is_opened) { + if (!this.opened && this.isFocused()) { // only if no concernement is opened and is this focused this.setHoverElmt({ type: 'concernement', id: this.id @@ -1197,7 +1213,15 @@ export default { } }.bind(this); + this.paper_objects.onMouseLeave = function(event){ + if (!this.opened && this.isFocused()) { // only if no concernement is opened + this.resetHoverElmt(); + document.body.style.cursor = "auto"; + } + }.bind(this); + this.paper_objects.onMouseMove = function(event){ + // console.log(`onmousemove ${this.id}`); // TODO besoins & actions & doleances if (this.is_opened) { @@ -1216,19 +1240,15 @@ export default { } let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point); - + // console.log('move result', result); if (result) { - console.log('move result', result); + // console.log('move has result', result); let hover_elmt = { type: result.item.item_type, id: result.item.item_id }; - switch (this.map_mode) { - // case "terraindevie": - // break; - // case "action": - // break; - case "puissancedagir": + switch (result.item.item_type) { + case "reponse": hover_elmt.bid = result.item.item_bid; hover_elmt.cid = result.item.item_cid; break; @@ -1236,46 +1256,42 @@ export default { this.setHoverElmt(hover_elmt); document.body.style.cursor = "pointer"; } else { + // console.log('move no result'); this.resetHoverElmt(); document.body.style.cursor = "auto"; } } }.bind(this); - this.paper_objects.onMouseLeave = function(event){ - if (!this.is_opened) { - this.resetHoverElmt(); - document.body.style.cursor = "auto"; - } - }.bind(this); - this.paper_objects.onClick = function(event){ console.log('paper concernement onClick'); if (!this.is_opened) { - // open/close all concernements - this.openCloseConcernements(this.id) - // push route (keep the hash for map_mode) - this.$router.push({ - name: 'concernement', - hash: `#${this.map_mode}`, - params: {id: this.id} - }); - // reset the mousehover - this.resetHoverElmt(); + if (!this.opened) { + console.log(`Open me ${this.id}`); + // open/close all concernements + this.openCloseConcernements(this.id) + // push route (keep the hash for map_mode) + this.$router.push({ + name: 'concernement', + hash: `#${this.map_mode}`, + params: {id: this.id} + }); + // reset the mousehover + this.resetHoverElmt(); + } } else { // lets define some options regarding the map_mode + // debugger; let op; switch (this.map_mode) { case "terraindevie": op = { pg: 'entites', // paper group to hittest - // id: 'eid' // id prop on paper item } break; case "action": op = { pg: 'agissantes', // paper group to hittest - // id: 'eid' // id prop on paper item } break; } @@ -1294,7 +1310,7 @@ export default { this.$router.push({ name: 'concernement', hash: `#${this.map_mode}`, - params: {id: this.opened.id} + params: {id: this.id} }); // reset the mousehover this.resetHoverElmt(); @@ -1304,6 +1320,7 @@ export default { }, resetHoverElmt(){ + // console.log('resetHoverElmt'); setTimeout(()=>{ this.setHoverElmt(null); }, 100); @@ -1382,39 +1399,64 @@ export default { } this.tween.easing(Tween.Easing.Quadratic.InOut).start(); }, + // ENGINE UPDATE onBeforeEngineUpdate (event) { + // update the opening/closing tweening if (this.tween) { this.tween.update(); } - if (this.map_mode === 'action' || this.map_mode === 'puissancedagir'){ - this.applyFocusForces(); - // TODO apply a little force to check the map when returning to terrain de vie + + if (this.opened) { + if (this.opened.id !== this.id) { + this.pushAside() + } + } else { + // apply focus forces : move unfocused on the sides and focused on the center + if (this.map_mode === 'action' + || this.map_mode === 'puissancedagir' + || this.map_mode === 'doleancer'){ + this.applyFocusForces(); // + } } + + + // reset all matter rotation forces otherwise items will spin when colide Matter.Body.setAngle(this.body, 0); Matter.Body.setAngularSpeed(this.body, 0); }, applyFocusForces(){ - // map_mode action - var dist, dir, ori_pos; - var x_force = 0; if(!this.isFocused()) { - // does not has actions -> take a side - // apply a force in direction of one side or an other depending of the start position - // the force is exponentialy proportional to the distance from the side - dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side - dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side - ori_pos = {x:this.canvas.width/2, y:this.body.position.y}; - x_force = Math.pow(dist/700,10) * dir; + this.pushAside() }else{ - // has action, get to the centre - dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre - dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side - ori_pos = dir < 0 ? {x:this.canvas.width, y:this.body.position.y} : {x:0, y:this.body.position.y} - x_force = Math.pow(dist/800,10) * dir; - - this.body.frictionAir = 0.05; + this.bringToCenter() } - // x_force = (dist > 200 ? Math.pow(dist/700,10) : 0) * dir + }, + pushAside(){ + // apply a force in direction of one side or an other depending of the start position + // the force is exponentialy proportional to the distance from the side + let dir = this.pos.x > this.canvas.width/2 ? 1 : -1; // get the direction to the closest side + let dist = (dir < 0 ? this.pos.x : this.canvas.width - this.pos.x); // get the distance from the side + let ori_pos = {x:this.canvas.width/2, y:this.body.position.y}; + let x_force = Math.pow(dist/700,10) * dir; + + Matter.Body.applyForce( + this.body, + ori_pos, + { + x: x_force, + y: 0 + } + ); + }, + bringToCenter(){ + // bring to the centre + let dir = this.pos.x > this.canvas.width/2 ? -1 : 1; // get the direction to the centre + let dist = (dir < 0 ? this.pos.x - this.canvas.width/2 : this.canvas.width/2 - this.pos.x); // get the distance from the side + let ori_pos = dir < 0 ? {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; + + this.body.frictionAir = 0.05; + Matter.Body.applyForce( this.body, ori_pos, @@ -1434,14 +1476,14 @@ export default { }, onAfterEngineUpdate (event) { // respawn element if outside screen - if(this.pos.x < 0 - || this.pos.x > this.canvas.width - || this.pos.y < 0 - || this.pos.y > this.canvas.height){ - this.pos = this.getRandomPos() - Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y}); - this.setInitBodyVelocity(); - } + // if(this.pos.x < 0 + // || this.pos.x > this.canvas.width + // || this.pos.y < 0 + // || this.pos.y > this.canvas.height){ + // this.pos = this.getRandomPos() + // Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y}); + // this.setInitBodyVelocity(); + // } this.paper_objects.position = this.pos = this.body.position; @@ -1455,7 +1497,7 @@ export default { this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.3)"; }else{ this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.8)"; - if (this.isHover) { + if (this.is_hover) { this.paper_objects.children['contours'].strokeColor = "#01ffe2"; }else{ this.paper_objects.children['contours'].strokeColor = "#000"; @@ -1512,10 +1554,26 @@ export default { && this.map_mode !== 'doleancer' && this.map_mode !== 'action' ) { this.paper_objects.children.entites.visible = true; + if (this.opened_entite_id) { + // console.log('this.paper_objects.children.entites', this.paper_objects.children.entites); + this.paper_objects.children.entites.children.forEach((entite) => { + // console.log('entite', entite); + if (entite.item_id === this.opened_entite_id) { + entite.style.fillColor = '#01ffe2'; + } else { + entite.style.fillColor = '#000'; + } + }); + } else { + this.paper_objects.children.entites.children.forEach((entite) => { + entite.style.fillColor = '#000'; + }) + } } else { this.paper_objects.children.entites.visible = false; } + // puissance d'agir if (this.concernement.has_puissancedagir) { if (this.map_mode === "puissancedagir") { diff --git a/src/components/ConcernementMapPopup.vue b/src/components/ConcernementMapPopup.vue index c595673..9cde74f 100644 --- a/src/components/ConcernementMapPopup.vue +++ b/src/components/ConcernementMapPopup.vue @@ -29,7 +29,8 @@ export default { } else if (this.infos.type === 'reponse') { for (let i = 0; i < this.allBesoinsById[this.infos.bid].reponses.length; i++) { if (this.allBesoinsById[this.infos.bid].reponses[i].id === this.infos.id) { - this.reponse = this.allBesoinsById[this.infos.bid].reponses[i][this.infos.field]; + this.reponse = this.allBesoinsById[this.infos.bid].reponses[i]; + break; } } } @@ -53,7 +54,7 @@ export default { } else if(n.type === 'entite') { this.entite = this.allEntitesById[this.infos.id]; } else if (n.type === 'besoin') { - + this.besoin = this.allBesoinsById[this.infos.id]; } else if (n.type === 'reponse') { } @@ -122,7 +123,10 @@ export default {
-
+

+

+

+

diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index d3e0abb..497b08b 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -91,8 +91,17 @@ export default { console.log(`canvas_w: ${canvas_w}, canvas_h: ${canvas_h}`); this.paper = paper.setup(this.canvasMap.canvas); - // console.log('this.canvasMap.paper', this.canvasMap.paper); - this.canvasMap.canvas.addEventListener('click', this.onCanvasClick); + // // use the paper.view click to get back if no items is clicked + this.paper.view.onClick = function(event) { + console.log("view onClick", this, event.target); + if(event.target._id === "paper-view-0") { + this.resetConcernementOpened(); + this.$router.push({ + name: 'home', + hash: `#${this.map_mode}` + }); + } + }.bind(this); // MATTER let wall_w = 100; @@ -122,17 +131,6 @@ export default { Matter.Engine.update(this.engine, 1); window.requestAnimationFrame(this.animate); }, - onCanvasClick(event){ - // console.log('onCanvasClick'); - // use the canvas click to get back if no items is mousover - if (!this.hover_elmt) { - this.resetConcernementOpened(); - this.$router.push({ - name: 'home', - hash: `#${this.map_mode}` - }); - } - } }, beforeUpdate () { }, diff --git a/src/stores/common.js b/src/stores/common.js index c3fa2d4..40ea2bb 100644 --- a/src/stores/common.js +++ b/src/stores/common.js @@ -10,7 +10,7 @@ export const CommonStore = defineStore({ }, actions: { setHoverElmt(elmt) { - console.log(`setHoverElmt`, elmt); + // console.log(`setHoverElmt`, elmt); // mode can be : terraindevie, proximite, superposition, puissancedagir, action, doleancer this.hover_elmt = elmt; } diff --git a/src/stores/concernements.js b/src/stores/concernements.js index d8a60cc..c322a2f 100644 --- a/src/stores/concernements.js +++ b/src/stores/concernements.js @@ -53,6 +53,8 @@ export const ConcernementsStore = defineStore({ this.concernements = []; allconcernements.forEach(concernement => { + concernement.visible = true; + concernement.entites_byid = {}; concernement.entitesagissantes_byid = {}; concernement.has_agissantes = false; @@ -134,6 +136,14 @@ export const ConcernementsStore = defineStore({ }) }, + hideShowConcernement (id, state) { + console.log(`disableConcernement id: ${id}`); + this.concernements.forEach((c, i) => { + if (c.id === id) { + this.concernements[i].visible = this.concernementsByID[id].visible = state; + } + }) + }, openCloseConcernements (id) { console.log(`openCloseConcernements id: ${id}`); var state;