From 18ab3b2b7d57eaadbdc0362ced42348c4abb5a6d Mon Sep 17 00:00:00 2001 From: bach Date: Sun, 4 Jun 2023 22:39:41 +0200 Subject: [PATCH] started paperjs events instead of matterjs (query) events --- src/App.vue | 2 +- src/components/ConcernementMapItem.vue | 291 ++++++++++++++++++++----- src/components/MapConcernements.vue | 100 ++++----- 3 files changed, 293 insertions(+), 100 deletions(-) diff --git a/src/App.vue b/src/App.vue index 563b041..5e883e5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -58,7 +58,7 @@ export default { v-for="(concernement,index) in concernements" :key="index" :concernement="concernement" - :opened="concernement.opened" + :is_opened="concernement.opened" />
diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index d4b047c..90ee27f 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -60,10 +60,11 @@ export default { paper_objects: {} } }, - props: ['concernement', 'opened'], + props: ['concernement', 'is_opened'], computed: { ...mapState(ConcernementsStore,['map_mode']), ...mapState(ConcernementsStore,['concernementsByID']), + ...mapState(ConcernementsStore,['opened']), ...mapState(ConcernementsStore,['opened_entite_id']), ...mapState(CommonStore,['hover_elmt']) }, @@ -72,7 +73,6 @@ export default { this.id = this.concernement.id this.entites = this.concernement.entites this.entites_byid = this.concernement.entites_byid - // console.log(`ConcernementsMapItem ${this.concernement.id} $route`, this.id, this.$route); // if (this.$route.name === 'concernement' // && parseInt(this.$route.params.id) === this.id @@ -108,9 +108,8 @@ export default { }, deep: true }, - opened: { + is_opened: { handler (n, o) { - if(n){ // opened this.openClose(true); }else{ // closed @@ -141,6 +140,8 @@ export default { } }, methods: { + ...mapActions(CommonStore,['setHoverElmt']), + ...mapActions(ConcernementsStore,['openCloseConcernements']), parsePoints (){ // converts data (menace/maintien, actuel/future, prise) into atcual position x,y for (let i = 0; i < this.entites.length; i++) { @@ -396,17 +397,98 @@ export default { }, initPaperObjects(){ this.paper_objects = new paper.Group({ - pivot: new paper.Point(this.pos) + pivot: new paper.Point(this.pos), + cid: this.id + }); + this.paper_objects.addChild(this.setBoussoleBG()); + this.paper_objects.addChild(this.setPaperContour()); + this.paper_objects.addChild(this.setPaperEntites()); + + this.initPaperEvents() + }, + setBoussoleBG(){ + // BOUSSOLE + let children = []; + + + // // exterieur circle + children.push(new paper.Path.Circle({ + center: [this.pos.x, this.pos.y], + radius: this.ray*this.scale*0.92 + })); + + // interieur circle + children.push(new paper.Path.Circle({ + center: [this.pos.x, this.pos.y], + radius: this.ray/2*this.scale + })); + + // axes + // vertical + children.push(new paper.Path.Line({ + from: [this.pos.x, this.pos.y - this.ray*this.scale], + to: [this.pos.x, this.pos.y + this.ray*this.scale] + })); + // horizontal + children.push(new paper.Path.Line({ + from: [this.pos.x - this.ray*this.scale, this.pos.y], + to: [this.pos.x + this.ray*this.scale, this.pos.y] + })) + + // fleches + // haute + children.push(new paper.Path({ + segments: [ + [this.pos.x - (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)], + [this.pos.x, this.pos.y - this.ray*this.scale*0.92], + [this.pos.x + (8*this.scale), this.pos.y - this.ray*this.scale*0.92 + (8*this.scale)], + ] + })); + // milieu + children.push(new paper.Path({ + segments: [ + [this.pos.x - (8*this.scale), this.pos.y + (8*this.scale)], + [this.pos.x, this.pos.y], + [this.pos.x + (8*this.scale), this.pos.y + (8*this.scale)], + ] + })); + + + // MOINS - PLUS + this.ctx.beginPath(); + this.ctx.lineWidth = 8; + this.ctx.strokeStyle = `rgba(255,255,255,${this.opacity})`;; + // PLUS + // horizontal + children.push(new paper.Path.Line({ + from: [this.pos.x + this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale], + to: [this.pos.x + this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale] + })) + // vertical + children.push(new paper.Path.Line({ + from: [this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale - (5 * this.scale)], + to: [this.pos.x + this.ray*this.scale, this.pos.y - this.ray*this.scale + (5 * this.scale)] + })) + + // MOINS + // horizontal + children.push(new paper.Path.Line({ + from: [this.pos.x - this.ray*this.scale - (5 * this.scale), this.pos.y - this.ray*this.scale], + to: [this.pos.x - this.ray*this.scale + (5 * this.scale), this.pos.y - this.ray*this.scale] + })) + + return new paper.Group({ + children: children, + pivot: new paper.Point(this.pos), + name: 'boussole_bg', + style: { + strokeColor: '#fff', + strokeWidth: 2 + } }); - this.paper_objects.addChild(this.setPaperContour()); }, setPaperContour(){ - // this.paper_objects.contours = new paper.Path.Circle({ - // center: [this.pos.x, this.pos.y], - // radius: this.ray, - // fillColor: 'red' - // }); let gap = 1;//1.15; let segments = [ [this.pos.x+this.salientPoints[0].pos.x*this.scale*gap, this.pos.y+this.salientPoints[0].pos.y*this.scale*gap] @@ -422,8 +504,98 @@ export default { strokeColor: '#000', strokeWidth: 1, fillColor: 'rgba(255,255,255,0.8)', - pivot: new paper.Point(this.pos) - }) + pivot: new paper.Point(this.pos), + cid: this.id + }); + }, + setPaperEntites(){ + let g = new paper.Group({ + pivot: new paper.Point(this.pos), + name: 'entites' + }); + for (let i = 0; i < this.body.parts.length; i++) { + if (this.body.parts[i].item_type === 'entite') { + let part = this.body.parts[i]; + g.addChild(new paper.Path.Circle({ + center: [part.position.x, part.position.y], + radius: 0.5, //0.3 + fillColor: '#000', + eid: part.id + // type: 'entite' + })) + + // if (part.id === this.opened_entite_id) { + // this.ctx.fillStyle = "#01ffe2"; + // } else { + // this.ctx.fillStyle = "#000"; + // } + } + } + return g; + }, + initPaperEvents(){ + + this.paper_objects.onMouseEnter = function(event){ + if (!this.is_opened) { + this.setHoverElmt({ + type: 'concernement', + id: this.id + }); + } + }.bind(this); + + this.paper_objects.onMouseMove = function(event){ + if (this.is_opened) { + let result = this.paper_objects.children.entites.hitTest(event.point); + // console.log('move result', result); + if (result) { + this.setHoverElmt({ + type: 'entite', + id: result.item.eid + }); + } else { + this.setHoverElmt(null); + } + } + }.bind(this); + + this.paper_objects.onMouseLeave = function(event){ + if (!this.is_opened) { + this.setHoverElmt(null); + } + }.bind(this); + + this.paper_objects.onClick = function(event){ + // console.log('paper onClick', event, this.paper_objects); + 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} + }); + } else { + let result = this.paper_objects.children.entites.hitTest(event.point); + // console.log('click result', result); + if (result) { + // we have clicked on an entite + this.$router.push({ + name: 'concernement', + hash: `#${this.map_mode}`, + params: {id: this.opened.id, eid: result.item.eid} + }); + } else { + // otherwise we close the entite and come back to the concernement + this.$router.push({ + name: 'concernement', + hash: `#${this.map_mode}`, + params: {id: this.opened.id} + }); + } + } + }.bind(this); }, openClose(open) { @@ -558,54 +730,75 @@ export default { Matter.Body.setPosition(this.body, {x:this.pos.x, y:this.pos.y}); } - this.paper_objects.position = this.pos; + this.paper_objects.position = this.pos = this.body.position; + // this.draw() + this.handlePaperVisibility() + }, + handlePaperVisibility(){ // contours if (!this.isFocused()){ 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) { + this.paper_objects.children['contours'].strokeColor = "#01ffe2"; }else{ - this.paper_objects.children['contours'].fillColor = "rgba(255,255,255,0.8)"; - if (this.isHover) { - this.paper_objects.children['contours'].strokeColor = "#01ffe2"; - }else{ - this.paper_objects.children['contours'].strokeColor = "#000"; - } - } - this.draw() - }, - draw() { - - if (!this.ctx) return; - - // record the position from the main matter body - this.pos = this.body.position; - - // drawing backgrounds - if (this.opened) { - switch (this.map_mode) { - case 'terraindevie': - this.drawBoussoleBG(); - break; - case 'puissancedagir': - this.drawPuissanceagirBG(); - break; - case 'doleancer': - this.drawDoleancerBG(); - break; + this.paper_objects.children['contours'].strokeColor = "#000"; } } // contours - if (!this.opened - || (this.opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) { + if (!this.is_opened + || (this.is_opened && this.map_mode !== "puissancedagir" && this.map_mode !== "doleancer")) { this.paper_objects.children['contours'].visible = true; } else { this.paper_objects.children['contours'].visible = false; } + // backgrounds + if (this.is_opened) { + switch (this.map_mode) { + case 'terraindevie': + this.paper_objects.children.boussole_bg.visible = true; + break; + case 'puissancedagir': + // this.drawPuissanceagirBG(); + break; + case 'doleancer': + // this.drawDoleancerBG(); + break; + } + }else{ + this.paper_objects.children.boussole_bg.visible = false; + } + }, + draw() { + + // if (!this.ctx) return; + + // record the position from the main matter body + // this.pos = this.body.position; + + // drawing backgrounds + // if (this.is_opened) { + // switch (this.map_mode) { + // case 'terraindevie': + // this.drawBoussoleBG(); + // break; + // case 'puissancedagir': + // this.drawPuissanceagirBG(); + // break; + // case 'doleancer': + // this.drawDoleancerBG(); + // break; + // } + // } + + // map mode puissance d'agir if (this.concernement.has_puissancedagir && this.map_mode === "puissancedagir") { - if (!this.opened) { + if (!this.is_opened) { this.drawPuissanceagirIcon(); // if not opened and has_puissancedagir draw the puissance d'agir icone } else { this.drawBesoins(); @@ -615,7 +808,7 @@ export default { // map mode doleancer // if not opened and has_doleance draw the doleance icone if (this.concernement.has_doleance && this.map_mode === "doleancer") { - if (!this.opened) { + if (!this.is_opened) { this.drawDoleanceIcon(); // if not opened and has_puissancedagir draw the puissance d'agir icone } else { this.drawDoleanceSteps(); @@ -623,7 +816,7 @@ export default { } if (this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer') { - this.drawEntites() + // this.drawEntites() } @@ -972,7 +1165,7 @@ export default { }, drawEntites(){ // IF OPENED - if (this.opened) { + if (this.is_opened) { // place all entities points // OR using entitées matter bodies for (let i = 0; i < this.body.parts.length; i++) { @@ -1016,7 +1209,7 @@ export default { } }, - drawContour(){ + drawContour_OLD(){ if (this.salientPoints.length > 3) { // // test draw contour from body part // for (let i = 0; i < this.body.parts.length; i++) { diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index cadac16..99b21b1 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -107,8 +107,8 @@ export default { // add mouse control // https://github.com/liabru/matter-js/issues/491#issuecomment-331329404 this.mouse = Matter.Mouse.create(this.canvasMap.canvas); - this.canvasMap.canvas.addEventListener('mousemove', this.onMouseMove) - this.canvasMap.canvas.addEventListener('click', this.onClick) + // this.canvasMap.canvas.addEventListener('mousemove', this.onMouseMove) + // this.canvasMap.canvas.addEventListener('click', this.onClick) this.animate() }, @@ -125,7 +125,7 @@ export default { window.requestAnimationFrame(this.animate); }, onMouseMove (e) { - this.checkMouseHover(); + // this.checkMouseHover(); }, checkMouseHover(){ // check item mouse over @@ -149,23 +149,23 @@ export default { // if we have a results for (let body of query) { console.log('mouse hover body.item_type', body.item_type); - if (!this.opened // if no concernement is opened - && body.item_type === "concernement" // if it is a concernement - && typeof this.concernementsByID[body.id] !== "undefined" // if the id exists - && !this.concernementsByID[body.id].opened) { // if the concernement is not opened - hover_elmt = { - type: 'concernement', - id: body.id - }; - } - if (body.item_type === "entite" // if it is an entite - && this.opened // if a concernement is opened - && typeof this.opened.entites_byid[body.id] !== "undefined") { // if the entity exists - hover_elmt = { - type: 'entite', - id: body.id - }; - } + // if (!this.opened // if no concernement is opened + // && body.item_type === "concernement" // if it is a concernement + // && typeof this.concernementsByID[body.id] !== "undefined" // if the id exists + // && !this.concernementsByID[body.id].opened) { // if the concernement is not opened + // hover_elmt = { + // type: 'concernement', + // id: body.id + // }; + // } + // if (body.item_type === "entite" // if it is an entite + // && this.opened // if a concernement is opened + // && typeof this.opened.entites_byid[body.id] !== "undefined") { // if the entity exists + // hover_elmt = { + // type: 'entite', + // id: body.id + // }; + // } if (body.item_type === "besoin" // if it is a besoin && this.opened) { // if a concernement is opened hover_elmt = { @@ -218,42 +218,42 @@ export default { // no concernement is yet opened, we deal concernements if (!this.opened) { if (query.length) { - // open/close all concernements - this.openCloseConcernements(query[0].id) - // push route (keep the hash for map_mode) - this.$router.push({ - name: 'concernement', - hash: `#${this.map_mode}`, - params: {id: query[0].id} - }); + // // open/close all concernements + // this.openCloseConcernements(query[0].id) + // // push route (keep the hash for map_mode) + // this.$router.push({ + // name: 'concernement', + // hash: `#${this.map_mode}`, + // params: {id: query[0].id} + // }); } } // concernement is already opened, we deal with entités if (this.opened) { if (query.length) { - let clickedEntityBodies = []; - query.forEach(body => { - // console.log('body id:', body.id); - if (body.item_type === "entite") { - clickedEntityBodies.push(body); - } - }); - if (clickedEntityBodies.length) { - // we have clicked on an entite - this.$router.push({ - name: 'concernement', - hash: `#${this.map_mode}`, - params: {id: this.opened.id, eid: clickedEntityBodies[0].id} - }); - } else { - // otherwise we close the entite and come back to the concernement - this.$router.push({ - name: 'concernement', - hash: `#${this.map_mode}`, - params: {id: this.opened.id} - }); - } + // let clickedEntityBodies = []; + // query.forEach(body => { + // // console.log('body id:', body.id); + // if (body.item_type === "entite") { + // clickedEntityBodies.push(body); + // } + // }); + // if (clickedEntityBodies.length) { + // // we have clicked on an entite + // this.$router.push({ + // name: 'concernement', + // hash: `#${this.map_mode}`, + // params: {id: this.opened.id, eid: clickedEntityBodies[0].id} + // }); + // } else { + // // otherwise we close the entite and come back to the concernement + // this.$router.push({ + // name: 'concernement', + // hash: `#${this.map_mode}`, + // params: {id: this.opened.id} + // }); + // } } else { // if no concernement opened retrun to home (closing concernement contents opened) // and reset the opened state in concernement store