Merge pull request #1 from minademian/feat/new-features-dm

feat: add support for hexagon shape

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+demo
 
 # Editor directories and files
 .vscode/*

src/App.svelte

@@ -15,6 +15,7 @@
     let source_data = data_2019;
     let data: PartyData[] = [];
     let display = ["points", "text"];
+    let selectedShape = 'hexagon';
 
     $: {
         data = source_data.PartyResults
@@ -94,7 +95,7 @@
             <input type="checkbox" on:change={changeDisplay} value="numbers" checked={display.includes("numbers")} />
         </div>
     </div>
-    <Hemicycle {r} {rows} {padding} {dotsize} {total_seats} {data} {color} {font_size} {arc} {display}  />
+    <Hemicycle {r} {rows} {padding} {dotsize} {total_seats} {data} {color} {font_size} {arc} {display} {selectedShape} />
 
 </main>
 

src/lib/Hemicycle.svelte

@@ -13,6 +13,7 @@
     export let font_size: number | string = 12;
     export let arc = 180;
     export let text_position: {x: number, y: number} | null = null;
+    export let selectedShape: string = 'circle';
 
     export let display = ["points", "text"];
 
@@ -27,6 +28,10 @@
     let left_padding = 0;
     let right_padding = 0;
 
+    let svgWidth = 0;
+    let svgHeight = 0;
+    let hexagonShape = 'M86.60254037844386 12L173.20508075688772 50L173.20508075688772 150L86.60254037844386 200L0 150L0 50Z';
+
     $: {
         if (arc < 10) arc = 10;
         if (arc > 360) arc = 360;
@@ -43,6 +48,8 @@
             }
         }
         voronoi = calcVoronoi(points as Site[]);
+        svgWidth = (r * 2) + left_padding + right_padding;
+        svgHeight = (r * 2) + top_padding + bottom_padding;
     }
 
     function calcPadding() {
@@ -86,12 +93,11 @@
 
     function unselectParty() {
         if (!clicked) current_party = null;
-    }
-    
+    }    
 </script>
 
 <main>
-    <svg width={(r * 2) + left_padding + right_padding} height={(r * 2) + top_padding + bottom_padding}>
+    <svg width={svgWidth} height={svgHeight}>
         <g id="arcs" transform={`translate(${r + (left_padding)}, ${r + (top_padding)})`} class:hide={!display.includes("arcs")}>
             {#each Array(rows) as _, i}
                 <!-- Draw a semicircle for each row -->
@@ -100,7 +106,23 @@
         </g>
         <g id="points" transform={`translate(${r + (left_padding)}, ${r + (top_padding)})`} class:hide={!display.includes("points")}>
             {#each points as point}
-                <circle data-party={point.data?.id} cx={point.x} cy={point.y} r={dotsize} fill={point.data?.color} opacity={current_party?.id ? point.data?.id === current_party?.id ? 1 : 0.5 : 1} />
+                {#if selectedShape === 'hexagon'}
+                    <path
+                        d={hexagonShape}
+                        transform={`translate(${point.x},${point.y}) rotate(-5) scale(0.07)`}
+                        data-party={point.data?.id}
+                        fill={point.data?.color}
+                        opacity={current_party?.id ? point.data?.id === current_party?.id ? 1 : 0.5 : 1}
+                    />
+                {:else}
+                    <circle
+                        data-party={point.data?.id}
+                        cx={point.x} cy={point.y}
+                        r={dotsize}
+                        fill={point.data?.color}
+                        opacity={current_party?.id ? point.data?.id === current_party?.id ? 1 : 0.5 : 1}
+                    />
+                {/if}
             {/each}
         </g>
         <g id="numbers" transform={`translate(${r + (left_padding)}, ${r + (top_padding)})`} class:hide={!display.includes("numbers")}>

vite.config.ts

@@ -1,16 +1,10 @@
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
 
-// https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [svelte()],
-    base: "",
-    build: {
-        // lib: {
-        //     entry: "src/lib.ts",
-        //     name: "svelte-hemicycle",
-        //     fileName: (format) => `svelte-hemicycle.${format}.js`
-        // },
-        outDir: "demo"
-    },
+  plugins: [svelte()],
+  base: "",
+  build: {
+    outDir: "demo",
+  },
 });