diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index 90a2c62..146eb1e 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -97,7 +97,7 @@ export default { // this.parseEntityPointsValues() // this.getSalientPoints() - this.sailentEntites = this.concernement.sailentEntites = this.getJarvisEnvelopeConvexe() + this.sailentEntites = this.concernement.sailentEntites = this.getJarvisEnvelopeConvexeEntites(this.entites) // define init position of the item this.pos = this.getRandomPos(); @@ -305,10 +305,8 @@ export default { } // console.log(`this.salientPoints ${this.concernement.id}`, this.salientPoints); }, - getJarvisEnvelopeConvexe(){ + getJarvisEnvelopeConvexeEntites(entites){ let sailentEntites = []; - let entites = this.concernement.revisions_byid[this.concernement.active_revision].entites; - // console.log(`getJarvisEnvelopeConvexe ${this.id}`, this.entites.length); // https://www.geeksforgeeks.org/convex-hull-using-jarvis-algorithm-or-wrapping/ // find the most left point let l, min_x = null; @@ -328,19 +326,6 @@ export default { // console.log(`do while ${this.id}`, p); // Add current point to result let entite = entites[p]; - // let farest = { - // alpha: entite.display.alpha, - // ray: entite.display.ray, - // pos: { - // x: (entite.display.ray) * Math.cos(entite.display.alpha * (Math.PI/180)), - // y: (entite.display.ray) * Math.sin(entite.display.alpha * (Math.PI/180)) - // } - // }; - // this.salientPoints.push(farest); - // sailentEntites.push({ - // alpha: entite.display.alpha, - // ray: entite.display.ray - // }); sailentEntites.push(entite); // Search for a point 'q' such that @@ -587,7 +572,7 @@ export default { resetPaperActiveRevision(){ console.log('resetPaperActiveRevision'); - this.getJarvisEnvelopeConvexe(); + this.getJarvisEnvelopeConvexeEntites(this.concernement.revisions_byid[this.concernement.revision_id].entites); // remove contours if already exists if (this.paper_main_object.children.contours) { @@ -647,10 +632,6 @@ export default { // console.log(`vma x:${vma.x}, y:${vma.y}`); const pad = 4; // exterior padding // the final padded point - // const pa = [ - // this.pos.x+(a.x+vma.x*pad)*this.scale, - // this.pos.y+(a.y+vma.y*pad)*this.scale - // ] const pa = [ a.x+vma.x*pad, a.y+vma.y*pad @@ -824,6 +805,7 @@ export default { return g; }, setPaperEntitesProximiteReferences(){ + // console.log('_ _ _ _ setPaperEntitesProximiteReferences') let g = new paper.Group({ pivot: new paper.Point(this.pos), name: 'entites_proximites_references' @@ -841,6 +823,7 @@ export default { x: this.pos.x + entite.display.pos.x * this.scale, y: this.pos.y + entite.display.pos.y * this.scale } + // console.log(`entite_pos x:${entite_pos.x}, y:${entite_pos.y}`); // use paper symbol let instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']); instance.name = 'entite'; @@ -860,24 +843,24 @@ export default { name: 'ref_entite_proximite' }); + let allEntiteRefConcernementContourEntites = []; + let beta = 360 / entite.entite.proximite.length; let ray = 5; let e=0; entite.entite.proximite.forEach(entite_ref => { - console.log(`${entite_ref.id}, ${entite_ref.title}`, this.allEntitesById[entite_ref.id]); + // console.log(`${entite_ref.id}, ${entite_ref.title}`, this.allEntitesById[entite_ref.id]); // create the entite ref paper point let ref_instance = new paper.SymbolItem(this.paper_symbol_definitions['entite']); ref_instance.name = 'entite_ref'; - // x: (entite.display.ray) * Math.cos(entite.display.alpha * (Math.PI/180)), - // y: (entite.display.ray) * Math.sin(entite.display.alpha * (Math.PI/180)) - let entite_ref_pos = { x: entite_pos.x + ray * Math.cos((beta*e) * (Math.PI/180)), y: entite_pos.y + ray * Math.sin((beta*e) * (Math.PI/180)), } - + // console.log(`entite_ref_pos x:${entite_ref_pos.x}, y:${entite_ref_pos.y}`); + ref_instance.position = new paper.Point(entite_ref_pos); // ref_instance.scale(this.scale); ref_instance.scale(this.scale*0.75); @@ -887,20 +870,38 @@ export default { ref_instance.is_symbol_instance = true; ref_g.addChild(ref_instance) - + // create the original concernement contours arround the entite_ref let ref_cid = this.allEntitesById[entite_ref.id].cid; - console.log('PROXIMITE ref concernement jarvis_envelope_convexe', this.concernementsByID[ref_cid].sailentEntites); + // console.log('PROXIMITE ref concernement jarvis_envelope_convexe', this.concernementsByID[ref_cid].sailentEntites); let ref_concernement = this.concernementsByID[ref_cid]; + // define the right scale + let scale = 0.05; + let points = []; ref_concernement.sailentEntites.forEach(ent => { points.push({ x: (ent.display.ray) * Math.cos(ent.display.alpha * (Math.PI/180)), y: (ent.display.ray) * Math.sin(ent.display.alpha * (Math.PI/180)) }) + + // - - // + // concat all the contours points for general contours arround all contours :/ :( (that's a very clear description) + let p = { + x: entite_ref_pos.x - entite_pos.x + (ent.display.ray * Math.cos(ent.display.alpha * (Math.PI/180)))*scale, + y: entite_ref_pos.y - entite_pos.y + (ent.display.ray * Math.sin(ent.display.alpha * (Math.PI/180)))*scale + } + console.log(`p x:${p.x}, y:${p.y}`); + + allEntiteRefConcernementContourEntites.push({ + display:{ + ray: Math.sqrt(Math.pow(p.x,2)+Math.pow(p.y,2)), + alpha: parseFloat(Math.atan2(p.y,p.x) * (180/Math.PI)).toFixed(2) + } + }) + // - - // }) - // define the right scale - let scale = 0.05; + // convert points to rouded and padded segments props let segments = this.getPaddedRoundedSegments(points, scale) // create "real" Paper Segments from previous segments props @@ -921,18 +922,74 @@ export default { strokeColor: '#fff', strokeWidth: 1, pivot: new paper.Point(this.pos), - cid: this.cid + cid: ref_concernement.id }); ref_g.addChild(contrs); - + contrs.sendToBack(); e++; + }); // end of loop on proximite for each main entite + + // // debug + // allEntiteRefConcernementContourEntites.forEach(e => { + // let p = paper.Path.Circle({ + // pivot: new paper.Point({x:0,y:0}), + // center: [ + // entite_pos.x + (e.display.ray * Math.cos(e.display.alpha * (Math.PI/180))), + // entite_pos.y + (e.display.ray * Math.sin(e.display.alpha * (Math.PI/180))) + // ], + // radius: 0.3, + // fillColor: '#00F', + // strokeColor: 'rgba(0,0,255,0.05)', + // strokeWidth:2 + // }) + // ref_g.addChild(p); + // }) + + // general contour arround proximité + // console.log('allEntiteRefConcernementContourEntites', allEntiteRefConcernementContourEntites); + let genContoursEntite = this.getJarvisEnvelopeConvexeEntites(allEntiteRefConcernementContourEntites); + // console.log('genContoursEntite', genContoursEntite); + let points = []; + genContoursEntite.forEach(ent => { + points.push({ + x: ent.display.ray * Math.cos(ent.display.alpha * (Math.PI/180)), + y: ent.display.ray * Math.sin(ent.display.alpha * (Math.PI/180)) + }) + }) + console.log('points', points); + let scale = 0.8; + // convert points to rouded and padded segments props + let segments = this.getPaddedRoundedSegments(points, scale) + // create "real" Paper Segments from previous segments props + let paper_segments = []; + segments.forEach(seg => { + paper_segments.push(new paper.Segment({ + point: [entite_pos.x+seg.point[0]*scale, entite_pos.y+seg.point[1]*scale], + // point: [seg.point[0], seg.point[1]], + handleIn: seg.handleIn, + handleout: seg.handleOut + })) }); + // create the paper path with previous segments + const genContrs = new paper.Path({ + name: 'gen_contours', + segments: paper_segments, + fillColor: 'rgba(255,255,255,0.4)', + // selected: true, + strokeColor: '#fff', + strokeWidth: 1, + pivot: new paper.Point(this.pos), + // cid: this.cid + }); + ref_g.addChild(genContrs); + genContrs.sendToBack(); + g.addChild(ref_g); - } + ref_g.sendToBack(); + } // end of loop on entite wich have proximite } return g; - }, setPaperAgissantes(){ console.log('setPaperAgissantes');