From 433383437d4b26b293de424b8f9c6023a06798d0 Mon Sep 17 00:00:00 2001 From: bach Date: Tue, 21 May 2024 16:44:40 +0200 Subject: [PATCH] display concernements with less than 3 entites --- src/components/ConcernementMapItem.vue | 139 +++++++++++++++---------- 1 file changed, 82 insertions(+), 57 deletions(-) diff --git a/src/components/ConcernementMapItem.vue b/src/components/ConcernementMapItem.vue index a6834f8..bfc784a 100644 --- a/src/components/ConcernementMapItem.vue +++ b/src/components/ConcernementMapItem.vue @@ -103,7 +103,8 @@ export default { // disable concernement if less than 3 entite if(this.entites.length < 3){ this.hideShowConcernement(this.concernement.id, false); - } else{ + } + // else{ // record canvas and ctx for rendering (drawing) this.canvas = this.canvasMap.canvas this.ctx = this.canvasMap.ctx @@ -112,7 +113,9 @@ export default { this.ray = this.map_item_ray; // console.log(`this.ray: ${this.ray}`); // - this.parseEntityPointsValues() + this.parseEntityPointsValues(); + + // this.getSalientPoints() this.sailentEntites = this.concernement.sailentEntites = this.getJarvisEnvelopeConvexeEntites(this.entites) @@ -132,7 +135,7 @@ export default { this.handleMapitemVisibility(false); } } - } + // } // this.setConcernementMapItem(this.cid, this); // this.setConcernementScale(this.cid, this.scale); @@ -430,6 +433,7 @@ export default { } } this.concernement.parsedEntites = true; + }, getSalientPoints_OLD() { // debugger @@ -799,23 +803,25 @@ export default { // then scale again to new size this.paper_main_object.scale(this.details_zoom_scale); // resize entites (dim them while we zoomin) - this.paper_main_object.children['entites'].children.forEach((child) => { - if(child.name === 'entite'){ - // revert to the original size (by reverting the previous scale) - child.scale(1 / prev_entite_s); - // then scale again to new size - child.scale(1 / this.details_zoom_scale); - }else if(child.name === 'entites_labels'){ - child.opacity = -2 + this.detailsZoomValue; - child.children.forEach((label) => { + if(this.paper_main_object.children){ + this.paper_main_object.children['entites'].children.forEach((child) => { + if(child.name === 'entite'){ // revert to the original size (by reverting the previous scale) - label.scale(1 / prev_entite_s); + child.scale(1 / prev_entite_s); // then scale again to new size - label.scale(1 / this.details_zoom_scale); - // label.children['label_txt'].fontSize = 4 / this.detailsZoomValue; - }) - } - }); + child.scale(1 / this.details_zoom_scale); + }else if(child.name === 'entites_labels'){ + child.opacity = -2 + this.detailsZoomValue; + child.children.forEach((label) => { + // revert to the original size (by reverting the previous scale) + label.scale(1 / prev_entite_s); + // then scale again to new size + label.scale(1 / this.details_zoom_scale); + // label.children['label_txt'].fontSize = 4 / this.detailsZoomValue; + }) + } + }); + } // allow to go through walls if zoomed in if (this.detailsZoomValue > 1) { @@ -875,7 +881,7 @@ export default { this.sailentEntites = this.getJarvisEnvelopeConvexeEntites(this.concernement.revisions_byid[this.active_revision].entites); // remove contours if already exists - if (this.paper_main_object.children.contours) { + if (this.paper_main_object.children && this.paper_main_object.children.contours) { this.paper_main_object.children.contours.remove(); } // redraw contours @@ -921,8 +927,8 @@ export default { } }, getPaddedRoundedSegments(points, scale){ - // console.log(`setPaperContour ${this.concernement.id}`); - let getSegmentProps = (b,a,c,d) => { + console.log(`setPaperContour ${this.concernement.id}, points`, points); + let getSegmentProps = (b,a,c) => { const ac = { x: c.x - a.x, y: c.y - a.y } // get ac vecteur const lac = Math.sqrt(Math.pow(ac.x, 2) + Math.pow(ac.y, 2)); // get ac longueur ac const ab = { x: b.x - a.x, y: b.y - a.y } // get ab vecteur @@ -966,11 +972,11 @@ export default { ); let segments = [first_point]; for (let j = 1; j < points.length-1; j++) { - segments.push(getSegmentProps( - points[j-1], - points[j], - points[j+1] - )) + segments.push(getSegmentProps( + points[j-1], + points[j], + points[j+1] + )) } const last_point = getSegmentProps( points[points.length-2], @@ -985,38 +991,57 @@ export default { setPaperContour(){ // console.log('setPaperContour, this.sailentEntites', this.sailentEntites); // convert sailent entites to x,y points - let points = []; - this.sailentEntites.forEach(entite => { - points.push({ - x: (entite.display.ray) * Math.cos(entite.display.alpha * (Math.PI/180)), - y: (entite.display.ray) * Math.sin(entite.display.alpha * (Math.PI/180)) + if (this.sailentEntites.length < 3) { + // if we have less than 3 entities, draw a circle + let circle = new paper.Path.Circle({ + name: 'contours', + center: this.pos, + radius: this.ray/3, + fillColor: 'rgba(255,255,255,0.4)', + // selected: true, + strokeColor: '#fff', + strokeWidth: 1, + pivot: new paper.Point(this.pos), + // scale: this.details_zoom_scale, + cid: this.cid, }) - }) - // convert points to rouded and padded segments props - let segments = this.getPaddedRoundedSegments(points, this.scale) - // create "real" Paper Segments from previous segments props - let paper_segments = []; - segments.forEach(seg => { - paper_segments.push(new paper.Segment({ - point: [this.pos.x+seg.point[0]*this.details_zoom_scale, this.pos.y+seg.point[1]*this.details_zoom_scale], - handleIn: seg.handleIn, - handleout: seg.handleOut - })) - }); - // create the paper path with previous segments - const contrs = new paper.Path({ - name: 'contours', - segments: paper_segments, - fillColor: 'rgba(255,255,255,0.4)', - // selected: true, - strokeColor: '#fff', - strokeWidth: 1, - pivot: new paper.Point(this.pos), - // scale: this.details_zoom_scale, - cid: this.cid, - }); - // return the paper path - return contrs; + return circle; + } else { + // if we have more than 3 entities, draw normal contour + let points = []; + this.sailentEntites.forEach(entite => { + points.push({ + x: (entite.display.ray) * Math.cos(entite.display.alpha * (Math.PI/180)), + y: (entite.display.ray) * Math.sin(entite.display.alpha * (Math.PI/180)) + }) + }) + // convert points to rouded and padded segments props + let segments = this.getPaddedRoundedSegments(points, this.scale) + // create "real" Paper Segments from previous segments props + let paper_segments = []; + segments.forEach(seg => { + paper_segments.push(new paper.Segment({ + point: [this.pos.x+seg.point[0]*this.details_zoom_scale, this.pos.y+seg.point[1]*this.details_zoom_scale], + handleIn: seg.handleIn, + handleout: seg.handleOut + })) + }); + // create the paper path with previous segments + let contrs = new paper.Path({ + name: 'contours', + segments: paper_segments, + fillColor: 'rgba(255,255,255,0.4)', + // selected: true, + strokeColor: '#fff', + strokeWidth: 1, + pivot: new paper.Point(this.pos), + // scale: this.details_zoom_scale, + cid: this.cid, + }); + // return the paper path + return contrs; + } + }, setPaperEntites(){ let g = new paper.Group({