From f314ff11f20cd386cdf1b37728c782a9e866e872 Mon Sep 17 00:00:00 2001 From: bach Date: Mon, 5 Jun 2023 14:33:03 +0200 Subject: [PATCH] more paperjs refactoring --- src/components/ConcernementMapItem.vue | 133 ++++++++++------------ src/components/MapConcernements.vue | 148 +------------------------ src/stores/common.js | 2 +- 3 files changed, 63 insertions(+), 220 deletions(-) diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 3f6d8ae..8735460 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -260,43 +260,6 @@ export default { }) ]; - // // Create parts of the body : contours - // if (this.salientPoints.length > 2) { - // var decomp = require('poly-decomp'); - // // window.decomp = decomp; - // // debugger; - // Matter.Common.setDecomp(decomp); - // // Matter.Common.setDecomp(require('poly-decomp')); - - // // let contourpoints = []; - // // for (let j = 0; j < this.salientPoints.length; j++) { - // // contourpoints.push(this.salientPoints[j].pos); - // // } - // let contourpoints = this.salientPoints.map(function(point) { - // return point.pos; //[point.pos.x, point.pos.y] - // }); - // // console.log('contourpoints', contourpoints); - // // let contourpoints = Matter.Vertices.fromPath('35 7 19 17 14 38 14 58 25 79 45 85 65 84 65 66 46 67 34 59 30 44 33 29 45 23 66 23 66 7 53 7'); - - // // let ccw_contourpoints = decomp.makeCCW(contourpoints); - // // console.log('ccw_contourpoints', ccw_contourpoints); - // let vertices_contour = Matter.Vertices.create(contourpoints); - // // console.log('vertices_contour', vertices_contour); - // // let vertices_contour_bounds = Matter.Bounds.create(vertices_contour); - // // console.log('vertices_contour_bounds', vertices_contour_bounds); - // // debugger; - // let body_contour = Matter.Bodies.fromVertices(0, 0, vertices_contour, { - // mass: 0, - // item_type: 'concernement-contours', - // id: this.concernement.id, - // }, false, 0, 0, 0); - // // debugger; - // // console.log('body_contour.bounds', body_contour.bounds); - // // // https://github.com/liabru/matter-js/issues/186 - // // Matter.Body.translate(body_contour, Matter.Vector.sub(vertices_contour_bounds.min, body_contour.bounds.min)) - // this.body_parts.push(body_contour); - // } - // Create parts of the body : entities for (let i = 0; i < this.entites.length; i++) { // parts.push(Matter.Bodies.circle(this.pos.x+this.entites[i].display.pos.x, this.pos.y+this.entites[i].display.pos.y, 15, { @@ -338,11 +301,7 @@ export default { Matter.Body.setPosition(this.body, this.pos); // add init velocity - let delta = 10; - Matter.Body.setVelocity(this.body, { - x: -delta + Math.random()*delta*2, - y: -delta + Math.random()*delta*2 - }); + this.setInitBodyVelocity() // console.log('concernementItem mass', this.body.mass); Matter.Composite.add(this.matterEngine.world, this.body); // console.log('concernement body', this.body); @@ -355,11 +314,19 @@ export default { Matter.Events.on(this.matterEngine, "afterUpdate", this.onAfterEngineUpdate); } }, + setInitBodyVelocity(){ + let delta = 10; + Matter.Body.setVelocity(this.body, { + x: -delta + Math.random()*delta*2, + y: -delta + Math.random()*delta*2 + }); + }, createBesoinsBodyParts(){ let res_fields = ['qui','quoi','ou','avec']; let arc = (360 / 16); // unit arc let r = (this.ray * this.scale)/5; // unit ray let br = r - r/3; // besoin ray + for (let i = 0; i < this.concernement.besoins.length; i++) { let start_a = arc * i; // angle depart (for reponses) let center_a = start_a + arc/2; // angle central @@ -376,15 +343,17 @@ export default { let res_arc = arc / (1 + this.concernement.besoins[i].reponses.length); // unit arc for responses depending responses number for (let j = 0; j < this.concernement.besoins[i].reponses.length; j++) { let res_a = start_a + res_arc * (j+1); // angle for response line - for (let f = 0; f < res_fields.length; f++) { - if(this.concernement.besoins[i].reponses[j][res_fields[f]]){ + for (let f = 0; f < res_fields.length; f++) { // loop through all 4 fields, keep only the last one filled + if( this.concernement.besoins[i].reponses[j][res_fields[f]] // if field filled + && (f === res_fields.length -1 || !this.concernement.besoins[i].reponses[j][res_fields[f+1]]) // and is last field or last field filled + ){ let rr = this.ray * this.scale - r*f - r/2; // reponse field ray let rx = Math.cos(res_a*(Math.PI/180)) * rr; let ry = Math.sin(res_a*(Math.PI/180)) * rr; this.body_parts.push(Matter.Bodies.circle(rx, ry, 0.8, { item_type: 'reponse', - field: res_fields[f], + // field: res_fields[f], id: this.concernement.besoins[i].reponses[j].id, bid: this.concernement.besoins[i].id, cid: this.concernement.id, @@ -536,8 +505,8 @@ export default { center: [part.position.x, part.position.y], radius: 0.5, //0.3 fillColor: '#000', - eid: part.id - // type: 'entite' + item_id: part.id, + item_type: 'entite' })) // if (part.id === this.opened_entite_id) { @@ -676,7 +645,9 @@ export default { new paper.Path({ segments: this.getDiamondSegments(part.position.x, part.position.y, 1), fillColor: '#000', - pivot: new paper.Point(this.pos) + pivot: new paper.Point(this.pos), + item_id: part.id, + item_type: 'besoin' }) ) break; @@ -687,7 +658,11 @@ export default { fillColor: '#eee', strokeColor: "#000", strokeWidth: 1, - pivot: new paper.Point(this.pos) + pivot: new paper.Point(this.pos), + item_id: part.id, + item_bid: part.bid, + item_cid: part.cid, + item_type: 'reponse' }) ) break; @@ -744,34 +719,41 @@ export default { if (this.is_opened) { // lets define some options regarding the map_mode - let op; + let paper_group_tohit; switch (this.map_mode) { case "terraindevie": - op = { - pg: 'entites', // paper group to hittest - type: 'entite', // type for hover element - id: 'eid' // id prop on paper item - } + paper_group_tohit = 'entites'; break; case "action": - op = { - pg: 'agissantes', // paper group to hittest - type: 'entite', // type for hover element - id: 'eid' // id prop on paper item - } + paper_group_tohit = 'agissantes'; + break; + case "puissancedagir": + paper_group_tohit = 'puissanceagir_besoins'; break; } - let result = this.paper_objects.children[op.pg].hitTest(event.point); - // console.log('move result', result); + let result = this.paper_objects.children[paper_group_tohit].hitTest(event.point); + if (result) { - this.setHoverElmt({ - type: op.type, - id: result.item[op.id] - }); + console.log('move 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": + hover_elmt.bid = result.item.item_bid; + hover_elmt.cid = result.item.item_cid; + break; + } + this.setHoverElmt(hover_elmt); document.body.style.cursor = "pointer"; } else { - this.setHoverElmt(null); + this.resetHoverElmt(); document.body.style.cursor = "auto"; } } @@ -779,7 +761,7 @@ export default { this.paper_objects.onMouseLeave = function(event){ if (!this.is_opened) { - this.setHoverElmt(null); + this.resetHoverElmt(); document.body.style.cursor = "auto"; } }.bind(this); @@ -804,13 +786,13 @@ export default { case "terraindevie": op = { pg: 'entites', // paper group to hittest - id: 'eid' // id prop on paper item + // id: 'eid' // id prop on paper item } break; case "action": op = { pg: 'agissantes', // paper group to hittest - id: 'eid' // id prop on paper item + // id: 'eid' // id prop on paper item } break; } @@ -822,7 +804,7 @@ export default { this.$router.push({ name: 'concernement', hash: `#${this.map_mode}`, - params: {id: this.opened.id, eid: result.item[op.id]} + params: {id: this.opened.id, eid: result.item.item_id} }); } else { // otherwise we close the entite and come back to the concernement @@ -975,6 +957,7 @@ export default { || 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; @@ -1006,6 +989,12 @@ export default { // backgrounds if (this.is_opened) { + // hide all bgs + this.paper_objects.children.boussole_bg.visible = false; + if (this.concernement.has_puissancedagir) { + this.paper_objects.children.puissanceagir_bg.visible = false; + } + // choose wich one to show, if one switch (this.map_mode) { case 'terraindevie': this.paper_objects.children.boussole_bg.visible = true; @@ -1013,7 +1002,7 @@ export default { case 'puissancedagir': if (this.concernement.has_puissancedagir) { this.paper_objects.children.puissanceagir_bg.visible = true; - } + } break; case 'doleancer': // this.drawDoleancerBG(); diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 2e30e3f..86bd220 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -110,8 +110,6 @@ 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.animate() }, @@ -121,10 +119,7 @@ export default { ...mapActions(ConcernementsStore,['resetConcernementOpened']), ...mapActions(CommonStore,['setHoverElmt']), animate () { - // this.canvasMap.ctx.clearRect(0, 0, this.canvasMap.canvas.width, this.canvasMap.canvas.height) - // this.canvasMap.canvas.dispatchEvent(this.animateEvent) Matter.Engine.update(this.engine, 1); - // this.checkMouseHover(); window.requestAnimationFrame(this.animate); }, onCanvasClick(event){ @@ -137,148 +132,7 @@ export default { hash: `#${this.map_mode}` }); } - }, - // onMouseMove_OLD (e) { - // // this.checkMouseHover(); - // }, - checkMouseHover_OLD(){ - // check item mouse over - // let query; - // if (this.opened) { - // // if a concernement is opened we query the opened concernement's parts (aka entitées bodies) - // const bodies = Matter.Composite.allBodies(this.world); - // for (let body of bodies) { - // if (body.item_type === "concernement" && body.id === this.opened.id) { - // query = Matter.Query.point(body.parts, this.mouse.position); - // break; - // } - // } - // } else { - // // if no concernement opened we query concernements - // query = Matter.Query.point(this.world.bodies, this.mouse.position) - // } - - let hover_elmt = null; - if (query && query.length) { - // 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 (body.item_type === "besoin" // if it is a besoin - && this.opened) { // if a concernement is opened - hover_elmt = { - type: 'besoin', - id: body.id - }; - } - - if (body.item_type === "reponse" // if it is a besoin - && this.opened) { // if a concernement is opened - hover_elmt = { - type: 'reponse', - field: body.field, - id: body.id, - bid: body.bid, - cid: body.cid - }; - } - } - // console.log(`hover_elmt type: ${hover_elmt.type}, id: ${hover_elmt.id}`); - } - // this.setHoverElmt(hover_elmt); - // if (hover_elmt) { - // document.body.style.cursor = "pointer"; - // } else { - // document.body.style.cursor = "auto"; - // } - }, - // onClick_OLD (e) { - // console.log('onClick', this, e); - // // get the clicked element from matter - // // const query = Matter.Query.point(Matter.Composite.allBodies(this.world), this.mouse.position) - // let query; - // if (this.opened) { - // // if a concernement is opened we query the opened concernement's parts (aka entitées bodies) - // const bodies = Matter.Composite.allBodies(this.world); - // for (let body of bodies) { - // if (body.item_type === "concernement" && body.id === this.opened.id) { - // query = Matter.Query.point(body.parts, this.mouse.position); - // break; - // } - // } - // } else { - // // if no concernement opened we query concernements - // query = Matter.Query.point(this.world.bodies, this.mouse.position) - // } - // // console.log(this.mouse.position); - // console.log('click query', query); - - // // 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} - // // }); - // } - // } - - // // 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} - // // }); - // // } - // } else { - // // if no concernement opened retrun to home (closing concernement contents opened) - // // and reset the opened state in concernement store - // 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 21e1633..c3fa2d4 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; }