@pie-api/pie-element-extensions - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

dist/pies/HotspotResponse.js

@@ -1,2 +0,2 @@
-import{L as t,c as e,h as s,m as i,a as r}from"./utlis-fdfb3c18.js";class n extends t{static get styles(){return[e`
+import{L as t,c as e,h as s,m as i,a}from"./utlis-fdfb3c18.js";class r extends t{static get styles(){return[e`
         .response {
@@ -18,13 +18,13 @@ position: relative;
         }
-      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}_getMinWidthAndHeight(){const{dimensions:t,shapes:e}=this.model||{},{rectangles:s=[],polygons:i=[]}=e||{},{height:r,width:n}=t||{};return[...s,...i].reduce((t,e)=>{const{x:s,y:i,height:r,points:n,width:o}=e||{};let a,h;return n?(a=Math.max(...n.filter((t,e)=>e%2==0)),h=Math.max(...n.filter((t,e)=>e%2==1))):(a=Math.max(s,s+o),h=Math.max(i,i+r)),a>t.width&&(t.width=a),h>t.height&&(t.height=h),t},{width:n,height:r})}_renderDrawing(t,e,i){const{hotspotColor:r,outlineColor:n}=this.model||{},o=document.createElement("canvas"),a=o.getContext("2d");switch(o.width=e,o.height=i,o.style.position="absolute",o.style.top="0",o.style.left="0",a.fillStyle=r,a.strokeStyle=n,a.lineWidth=2,a.beginPath(),t.type){case"polygon":{const{points:e}=t;e.forEach(t=>a.lineTo(t.x,t.y)),a.closePath(),a.fill();break}case"rectangle":{const{x:e,y:s,width:i,height:r}=t;a.fillRect(e,s,i,r),a.strokeRect(e,s,i,r);break}}return a.stroke(),s`${o}`}_renderImage(){const{imageUrl:t,dimensions:e}=this.model||{},{height:i,width:r}=e||{};return t?s`<img
+      `]}static get properties(){return{model:{type:Object,attribute:!1},session:{type:Array,attribute:!1}}}_getMinWidthAndHeight(){const{dimensions:t,shapes:e}=this.model||{},{rectangles:s=[],polygons:i=[]}=e||{},{height:a,width:r}=t||{};return[...s,...i].reduce((t,e)=>{const{x:s,y:i,height:a,points:r,width:o}=e||{};let n,l;return r?(n=Math.max(...r.filter((t,e)=>e%2==0).map(t=>parseFloat(t))),l=Math.max(...r.filter((t,e)=>e%2==1).map(t=>parseFloat(t)))):(n=Math.max(parseFloat(s),parseFloat(s)+parseFloat(o)),l=Math.max(parseFloat(i),parseFloat(i)+parseFloat(a))),n>t.width&&(t.width=n),l>t.height&&(t.height=l),t},{width:r,height:a})}_renderDrawing(t,e,i){const{hotspotColor:a,outlineColor:r}=this.model||{},o=document.createElement("canvas"),n=o.getContext("2d");switch(o.width=e,o.height=i,o.style.position="absolute",o.style.top="0",o.style.left="0",n.fillStyle=a,n.strokeStyle=r,n.lineWidth=2,n.beginPath(),t.type){case"polygon":{const{points:e}=t;e.forEach(t=>n.lineTo(t.x,t.y)),n.closePath(),n.fill();break}case"rectangle":{const{x:e,y:s,width:i,height:a}=t;n.fillRect(e,s,i,a),n.strokeRect(e,s,i,a);break}}return n.stroke(),s`${o}`}_renderImage(){const{imageUrl:t,dimensions:e}=this.model||{},{height:i,width:a}=e||{};return t?s`<img
       alt="Image"
       src="${t}"
       height="${i}px"
-      width="${r}px"
-    />`:s``}render(){const{answers:t}=this.session||{},{shapes:e}=this.model||{},{height:n,width:o}=this._getMinWidthAndHeight(),{rectangles:a,polygons:h}=e||{};if(!t)return s``;const l=t.map(t=>{const e=a.find(e=>e.id===t.id);if(e)return{...e,type:"rectangle"};const s=h.find(e=>e.id===t.id);return!!s&&{...s,type:"polygon"}}),d=`width: ${o}px; height: ${n}px;`;return s` <style>
+      width="${a}px"
+    />`:s``}render(){const{answers:t}=this.session||{},{shapes:e}=this.model||{},{height:r,width:o}=this._getMinWidthAndHeight(),{rectangles:n,polygons:l}=e||{};if(!t)return s``;const h=t.map(t=>{const e=n.find(e=>e.id===t.id);if(e)return{...e,type:"rectangle"};const s=l.find(e=>e.id===t.id);return!!s&&{...s,type:"polygon"}}),p=`width: ${o}px; height: ${r}px;`;return s` <style>
         .response {
           transform: scale(
             min(
-              calc(var(--max-height, ${i}) / ${n}),
-              calc(var(--max-width, ${r}) / ${o}),
+              calc(var(--max-height, ${i}) / ${r}),
+              calc(var(--max-width, ${a}) / ${o}),
               1
@@ -39,6 +39,6 @@ )
 
-        <div class="shapes" style=${d}>
-          ${l&&l.map(t=>this._renderDrawing(t,o,n))}
+        <div class="shapes" style=${p}>
+          ${h&&h.map(t=>this._renderDrawing(t,o,r))}
         </div>
-      </div>`}}export default n;export{n as HotspotResponse};
+      </div>`}}export default r;export{r as HotspotResponse};
 //# sourceMappingURL=HotspotResponse.js.map

package.json

@@ -6,3 +6,3 @@ {
   },
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Extended capabilites for pie-elements",
@@ -9,0 +9,0 @@ "author": "PIE Api Authors",

No alert changes

Improved metrics

Total package byte prevSize

275550

increased by0.16%

No dependency changes