@expofp/floorplan/dist/esm/components/Map/drawing/config/canvases.js

Interactive floor plan library for expos and events

import{Rect as _}from"@expofp/geometry";import{FONT_FACE as x,FONT_WEIGHT_PRIMARY_BOOTH as I}from"../../../../constants";import{clusterCounterCircle as p,PIN_ASPECT as g,PIN_EDGE_PX as P,PIN_HEAD_FACTOR as d}from"./pin-geometry";export function createCanvas(o,c,n=1){const t=document.createElement("canvas");return t.width=o,t.height=c,t.style.width=`${o/n}px`,t.style.height=`${c/n}px`,t}export function cssSizeOf(o){return{width:parseFloat(o.style.width),height:parseFloat(o.style.height)}}export function getBounds(o,c,n,t,s=1,r,e){const l=n*s,i=t*s;return new _({x:o,y:c},{x:l,y:i},r,e)}export function getFont(o,c=500,n="normal"){const t=getComputedStyle(document.body).getPropertyValue(x),s='Oswald, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',r=t?`${t}, ${s}`:s;return`${n} ${c} ${o}px ${r}`}let f;function O(o,c){return f??=document.createElement("canvas").getContext("2d"),f.font=o,f.measureText(c).width}export function createLabelCanvas(o,c,n,t="#fff",s,r,e){o=o.replace(/^_/,""),c*=n;const l=Number(getComputedStyle(document.body).getPropertyValue(I)),i=getFont(c,l||s),u=O(i,o.replace(/[0-9]/g,"3").replace(/[A-Z]/g,"A"))+3+3,a=4,C=c+a,T=createCanvas(u*n,C*n,n),v=T.getContext("2d");return v.font=i,v.textAlign="center",v.textBaseline="alphabetic",v.fillStyle=t,e&&r&&(v.lineWidth=e,v.strokeStyle=r,v.strokeText(o,u/2,C-a/2*n),v.lineJoin="round"),v.fillText(o,u/2,C-a/2*n),T}export function circleCanvasCssSize(o){return o*2+k*2}export function createCircleCanvas(o,c){const n=c.toUpperCase();if(!b.has(n)){const t=circleCanvasCssSize(o),s=createCanvas(t*devicePixelRatio,t*devicePixelRatio,devicePixelRatio),r=s.getContext("2d");r.fillStyle=c,r.beginPath(),r.arc(s.width/2,s.height/2,o*devicePixelRatio,0,2*Math.PI),r.fill(),b.set(n,s)}return b.get(n)}export function bookmarkCanvasCssSize(o){return{width:o,height:o*1.4}}export function createBookmarkCanvas(o,c){const n=o;if(h.has(n))return h.get(n);const{width:t,height:s}=bookmarkCanvasCssSize(o),r=Math.ceil(t*c),e=Math.ceil(s*c),l=createCanvas(r,e,c),i=l.getContext("2d");return i.scale(c,c),i.fillStyle="#fdbf2b",i.strokeStyle="#fff",i.lineWidth=4/c,i.beginPath(),i.moveTo(0,0),i.lineTo(0,s),i.lineTo(t/2,s-t/2),i.lineTo(t,s),i.lineTo(t,0),i.lineTo(0,0),i.fill(),i.stroke(),h.set(n,l),l}const k=1,b=new Map,h=new Map;export function imageCanvasCssSize(o,c,n,t=1){const[s,r]=y(o,c,n,c*t,n*t);return{width:s,height:r}}export function createImageCanvas(o,c,n,t,s=1,r){const[e,l]=y(o,c,n,c*t*s,n*t*s),i=createCanvas(e,l,t),u=i.getContext("2d");return i.id=o.id,r==="horizontal"?(u.scale(-1,1),u.translate(-e,0)):r==="vertical"&&(u.scale(1,-1),u.translate(0,-l)),u.drawImage(o,0,0,e,l),i}function y(o,c,n,t,s){const r=o?o.width/o.height:1;return c/n>r?[s*r,s]:[t,t/r]}export function createCurrentCanvas(o,c="#c8248b",n=o*.4,t,s,r,e="#000"){t=t||95,s=s||95;const l=createCanvas(t*n,s*n,o),i=l.getContext("2d");i.scale(n,n);const u=t/2,a=s/2;if(i.translate(u-35,r?0:a-35),i.beginPath(),i.fillStyle="#FFFFFF",i.moveTo(0,35),i.bezierCurveTo(0,54.329966,15.670034,70,35,70),i.bezierCurveTo(54.329966,70,70,54.329966,70,35),i.bezierCurveTo(70,15.670034,54.329966,0,35,0),i.bezierCurveTo(15.670034,0,0,15.670034,0,35),i.fill(),i.beginPath(),i.fillStyle=c,i.moveTo(10,35),i.bezierCurveTo(10,48.807119,21.192881,60,35,60),i.bezierCurveTo(48.807119,60,60,48.807119,60,35),i.bezierCurveTo(60,21.192881,48.807119,10,35,10),i.bezierCurveTo(21.192881,10,10,21.192881,10,35),i.fill(),r){i.textAlign="center",i.textBaseline="alphabetic",i.lineJoin="round",i.strokeStyle="#fff",i.fillStyle=e;const C=38;i.font=getFont(C),i.lineWidth=6;const T=70+C;i.strokeText(r,35,T,t),i.fillText(r,35,T,t)}return l}export function createTargetCanvas(o,c="#c8248b",n=o*.5){const t=70*n,s=100*n,r=createCanvas(t,s,o),e=r.getContext("2d");return e.scale(n,n),e.beginPath(),e.fillStyle="rgb(255, 255, 255)",e.moveTo(32.6,97.8),e.bezierCurveTo(24.4,81.5,0,57,0,32.6),e.bezierCurveTo(0,14.6,14.6,0,32.6,0),e.bezierCurveTo(50.5,0,65.2,14.6,65.2,32.6),e.bezierCurveTo(65.2,57,40.7,81.5,32.6,97.8),e.fill(),e.beginPath(),e.fillStyle=c,e.moveTo(32.6,91.1),e.bezierCurveTo(25.2,76.3,3.1,54.2,3.1,32.1),e.bezierCurveTo(3.1,15.9,16.3,2.6,32.6,2.6),e.bezierCurveTo(48.8,2.6,62,15.9,62,32.1),e.bezierCurveTo(62,54.2,39.9,76.3,32.6,91.1),e.fill(),e.beginPath(),e.fillStyle="rgb(255, 255, 255)",e.moveTo(16.2,32.6),e.bezierCurveTo(16.2,41.6,23.5,48.9,32.5,48.9),e.bezierCurveTo(41.5,48.9,48.8,41.6,48.8,32.6),e.bezierCurveTo(48.8,23.6,41.5,16.3,32.5,16.3),e.bezierCurveTo(23.5,16.3,16.2,23.6,16.2,32.6),e.fill(),r}export function createArrowCurrentCanvas(o,c="#c8248b",n=o*.4){const t=95*n,s=95*n,r=createCanvas(t,s,o),e=r.getContext("2d");return e.scale(n,n),e.beginPath(),e.arc(47,47,25,0,2*Math.PI),e.fillStyle=c,e.fill(),e.beginPath(),e.fillStyle=c,e.moveTo(75,27),e.lineTo(95,47),e.lineTo(75,67),e.lineTo(80,47),e.closePath(),e.fill(),r}export function createYahCanvas(o,c="#ff4343",n=o*.5){const t=77*n,s=116*n,r=createCanvas(t,s,o),e=r.getContext("2d");return e.scale(n,n),e.scale(n,n),e.beginPath(),e.fillStyle="#FFFFFF",e.moveTo(68.303,57.335),e.bezierCurveTo(77.894,39.304,70.649,15.785,50.95,8.04),e.bezierCurveTo(30.727,0,8.375,11.837,3.207,32.831),e.bezierCurveTo(0,46.185,6.644,57.323,13.131,68.211),e.fill(),e.beginPath(),e.fillStyle=c,e.moveTo(51.565,35.459),e.bezierCurveTo(51.565,43.256,45.201,49.575,37.354,49.575),e.bezierCurveTo(29.516,49.575,23.159,43.256,23.159,35.459),e.bezierCurveTo(23.159,27.668,29.516,21.345,37.354,21.345),e.bezierCurveTo(45.201,21.345,51.565,27.668,51.565,35.459),e.closePath(),e.fill(),e.beginPath(),e.moveTo(68.303,57.335),e.bezierCurveTo(77.894,39.304,70.649,15.785,50.95,8.04),e.bezierCurveTo(30.727,0,8.375,11.837,3.207,32.831),e.bezierCurveTo(0,46.185,6.644,57.323,13.131,68.211),e.lineTo(13.131,68.211),e.lineTo(13.131,68.211),e.bezierCurveTo(13.921,69.533,14.698,70.829,15.454,72.137),e.bezierCurveTo(19.465,79.158,23.533,86.12,27.571,93.086),e.lineTo(27.571,93.086),e.bezierCurveTo(30.098,97.421,32.611,101.756,35.116,106.077),e.bezierCurveTo(36.128,107.868,38.934,107.868,39.945,106.077),e.bezierCurveTo(49.387,90.003,58.708,74.029,68.031,57.951),e.bezierCurveTo(68.15,57.743,68.24,57.543,68.303,57.335),e.closePath(),e.moveTo(60.103,60.395),e.lineTo(63.201,55.041),e.lineTo(63.201,55.041),e.bezierCurveTo(73.31,36.735,61.285,11.614,39.04,11.17),e.bezierCurveTo(19.388,10.714,2.759,29.479,9.386,49.013),e.bezierCurveTo(10.726,52.998,12.657,56.9,14.84,60.721),e.bezierCurveTo(15.041,58.454,15.938,56.258,17.589,54.586),e.bezierCurveTo(19.708,52.425,22.216,50.638,24.996,49.283),e.bezierCurveTo(28.252,52.249,32.595,54.051,37.354,54.051),e.bezierCurveTo(42.123,54.051,46.47,52.249,49.73,49.283),e.bezierCurveTo(52.505,50.638,55.017,52.425,57.135,54.586),e.bezierCurveTo(58.701,56.188,59.701,58.245,60.103,60.395),e.closePath(),e.fill("evenodd"),e.beginPath(),e.moveTo(29.024,104.982),e.bezierCurveTo(29.024,103.626,27.923,102.527,26.57,102.527),e.bezierCurveTo(25.214,102.527,24.114,103.626,24.114,104.982),e.bezierCurveTo(24.114,111.395,30.347,116.838,37.444,116.838),e.bezierCurveTo(44.54,116.838,50.771,111.395,50.771,104.982),e.bezierCurveTo(50.771,103.626,49.666,102.527,48.317,102.527),e.bezierCurveTo(46.961,102.527,45.855,103.626,45.855,104.982),e.bezierCurveTo(45.855,108.193,42.352,111.956,37.444,111.956),e.bezierCurveTo(32.528,111.956,29.024,108.193,29.024,104.982),e.closePath(),e.fill(),r}const z="#ffffff",w=.45,m="#e8112d",S="#000000";function A(o,c,n,t,s){const r=c/2,e=t+s,l=n-s;o.beginPath(),o.moveTo(r,l),o.bezierCurveTo(r-t*.55,e+t*.8,r-t,e+t*.35,r-t,e),o.bezierCurveTo(r-t,e-t*.72,r-t*.45,e-t,r,e-t),o.bezierCurveTo(r+t*.45,e-t,r+t,e-t*.72,r+t,e),o.bezierCurveTo(r+t,e+t*.35,r+t*.55,e+t*.8,r,l),o.closePath()}function F(o,c,n,t,s,r,e=z){const l=o,i=o*c,u=createCanvas(l*n,i*n,n),a=u.getContext("2d");a.scale(n,n);const C=l*t;return A(a,l,i,C,s),a.fillStyle=r,a.strokeStyle=e,a.lineWidth=s,a.lineJoin="round",a.fill(),a.stroke(),{canvas:u,ctx:a,cx:l/2,cy:C+s,r:C}}export function createPoiPinCanvas(o,c){const{canvas:n,ctx:t,cx:s,cy:r,r:e}=F(o,g,c,d,P,m,S);return t.beginPath(),t.arc(s,r,e*w,0,2*Math.PI),t.fillStyle=z,t.fill(),n}export function createClusterPinCanvas(o,c){const{canvas:n,ctx:t}=F(o,g,c,d,P,m,S),{cx:s,cy:r,r:e}=p(o);return t.beginPath(),t.arc(s,r,e,0,2*Math.PI),t.fillStyle=z,t.fill(),n}