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

Interactive floor plan library for expos and events

import{FONT_FACE as z,FONT_WEIGHT_PRIMARY_BOOTH as d}from"../../../../constants";export function createImageCanvas(i,l,r,o,c=1,n){const e=i?i.width/i.height:1;let a=l*o*c,t=r*o*c;l/r>e?a=t*e:t=a/e;const u=document.createElement("canvas"),s=u.getContext("2d");return u.width=a,u.height=t,u.id=i.id,n==="horizontal"?(s.scale(-1,1),s.translate(-a,0)):n==="vertical"&&(s.scale(1,-1),s.translate(0,-t)),s.drawImage(i,0,0,a,t),u}export function createCurrentCanvas(i,l="#c8248b",r=i*.4,o,c,n,e="#000"){o=o||95,c=c||95;const a=document.createElement("canvas"),t=a.getContext("2d");a.width=o*r,a.height=c*r,t.scale(r,r);const u=o/2,s=c/2;if(t.translate(u-35,n?0:s-35),t.beginPath(),t.fillStyle="#FFFFFF",t.moveTo(0,35),t.bezierCurveTo(0,54.329966,15.670034,70,35,70),t.bezierCurveTo(54.329966,70,70,54.329966,70,35),t.bezierCurveTo(70,15.670034,54.329966,0,35,0),t.bezierCurveTo(15.670034,0,0,15.670034,0,35),t.fill(),t.beginPath(),t.fillStyle=l,t.moveTo(10,35),t.bezierCurveTo(10,48.807119,21.192881,60,35,60),t.bezierCurveTo(48.807119,60,60,48.807119,60,35),t.bezierCurveTo(60,21.192881,48.807119,10,35,10),t.bezierCurveTo(21.192881,10,10,21.192881,10,35),t.fill(),n){t.textAlign="center",t.textBaseline="alphabetic",t.lineJoin="round",t.strokeStyle="#fff",t.fillStyle=e;const v=38;t.font=getFont(v),t.lineWidth=6;const T=70+v;t.strokeText(n,35,T,o),t.fillText(n,35,T,o)}return a}export function createTargetCanvas(i,l="#c8248b",r=i*.5){const o=70*r,c=100*r,n=document.createElement("canvas"),e=n.getContext("2d");return n.width=o,n.height=c,e.scale(r,r),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=l,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(),n}export function createArrowCurrentCanvas(i,l="#c8248b",r=i*.4){const o=95*r,c=95*r,n=document.createElement("canvas"),e=n.getContext("2d");return n.width=o,n.height=c,e.scale(r,r),e.beginPath(),e.arc(47,47,25,0,2*Math.PI),e.fillStyle=l,e.fill(),e.beginPath(),e.fillStyle=l,e.moveTo(75,27),e.lineTo(95,47),e.lineTo(75,67),e.lineTo(80,47),e.closePath(),e.fill(),n}export function createYahCanvas(i,l="#ff4343",r=i*.5){const o=77*r,c=116*r,n=document.createElement("canvas"),e=n.getContext("2d");return n.width=o,n.height=c,e.scale(r,r),e.scale(r,r),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=l,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(),n}const m=document.createElement("canvas"),f=m.getContext("2d");let P;function y(i,l){return P!==i&&(f.font=i),f.measureText(l).width}export function createLabelCanvas(i,l,r,o="#fff",c,n,e){i=i.replace(/^_/,""),l*=r;const a=document.createElement("canvas"),t=a.getContext("2d"),u=Number(getComputedStyle(document.body).getPropertyValue(d)),s=getFont(l,u||c),v=y(s,i.replace(/[0-9]/g,"3").replace(/[A-Z]/g,"A"))+3+3,T=4,C=l+T;return a.width=v*r,a.height=C*r,t.font=s,t.textAlign="center",t.textBaseline="alphabetic",t.fillStyle=o,e&&n&&(t.lineWidth=e,t.strokeStyle=n,t.strokeText(i,v/2,C-T/2*r),t.lineJoin="round"),t.fillText(i,v/2,C-T/2*r),a}function S(i,l,r,o,c){const n=l/2,e=o+c,a=r-c;i.beginPath(),i.moveTo(n,a),i.bezierCurveTo(n-o*.55,e+o*.8,n-o,e+o*.35,n-o,e),i.bezierCurveTo(n-o,e-o*.72,n-o*.45,e-o,n,e-o),i.bezierCurveTo(n+o*.45,e-o,n+o,e-o*.72,n+o,e),i.bezierCurveTo(n+o,e+o*.35,n+o*.55,e+o*.8,n,a),i.closePath()}const b="#ffffff",F=93/81,x=125/90;function h(i,l,r,o,c,n){const e=i,a=i*l,t=document.createElement("canvas"),u=t.getContext("2d");t.width=e*r,t.height=a*r,u.scale(r,r);const s=e*o;return S(u,e,a,s,c),u.fillStyle=n,u.strokeStyle=b,u.lineWidth=c,u.lineJoin="round",u.fill(),u.stroke(),{canvas:t,ctx:u,cx:e/2,cy:s+c,r:s}}function g(i){return i.getContext("2d").getImageData(0,0,i.width,i.height)}export function createPoiPinImage(i,l,r,o){const{canvas:c,ctx:n,cx:e,cy:a}=h(l,F,r,.37,2,o);if(i){const t=createImageCanvas(i,l*.42,l*.42,r),u=t.getContext("2d");u.globalCompositeOperation="source-in",u.fillStyle=b,u.fillRect(0,0,t.width,t.height);const s=t.width/r,v=t.height/r;n.drawImage(t,e-s/2,a-v/2,s,v)}return g(c)}export function createPoiPinheadImage(i,l,r){const{canvas:o,ctx:c,cx:n,cy:e,r:a}=h(i,x,l,.38,3,r);return c.beginPath(),c.arc(n,e,a*.34,0,2*Math.PI),c.fillStyle=b,c.fill(),g(o)}export function getFont(i,l=500,r="normal"){const o=getComputedStyle(document.body).getPropertyValue(z),c='Oswald, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',n=o?`${o}, ${c}`:c;return`${r} ${l} ${i}px ${n}`}