Merge pull request #141 from TileDB-Inc/xan/wkt-support

WKT Support and Geometry GUI Widget

packages/components/src/GeometryPanel.component.svelte

@@ -0,0 +1,65 @@
+<svelte:options
+  customElement={{
+    tag: 'geometry-panel'
+  }}
+/>
+
+<script lang="ts">
+	import Select from './misc/Select.component.svelte';
+	import RenderingSettings from './geometry/Settings.component.svelte';
+  import { GUIEvent, SelectProps } from './types';
+  import { Events } from './constants/events';
+
+  let renderStyle = 0;
+
+  function geometryStyleOnChange(style: number) {
+    renderStyle = style;
+
+    window.dispatchEvent(
+      new CustomEvent<GUIEvent<SelectProps>>(Events.SELECT_INPUT_CHANGE, {
+        bubbles: true,
+        detail: {
+          target: 'geometry_style',
+          props: {
+            value: renderStyle
+          }
+        }
+      })
+    );
+  }
+	
+</script>
+
+<div class='Viewer-Geometry'>
+	<div class='Viewer-Geometry_header'>
+		Geometry
+	</div>
+	<div class='Viewer-Geometry_main'>
+		<Select label={'Geometry type'} options={['Polygon']}/>
+		<Select label={'Rendering style'} options={['Filled', 'Outline', 'Filled + Outline']} callback={geometryStyleOnChange}/>
+		<RenderingSettings renderStyle={renderStyle}/>
+	</div>
+</div>
+
+<style lang="scss">
+	.Viewer-Geometry {
+		width: 320px;
+		background-color: var(--viewer-background-primary);
+		font-size: 14px;
+		color: var(--viewer-text-primary);
+    font-family: Inter, Arial, 'sans-serif';
+	}
+
+	.Viewer-Geometry_header {
+		font-weight: 600;
+		font-size: 16px;
+		padding: 16px;
+	}
+
+	.Viewer-Geometry_main {
+		padding: 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 6px
+	}
+</style>

packages/components/src/Scalebar.component.svelte

@@ -8,12 +8,13 @@
   export let basePhysicalSize = 0;
   export let basePhysicalSizeUnit = 'μm';
   export let zoom = -2;
+  export let levels = 1;
   export let scalebarLength = 160;
 
   function zoomInfoUpdate(e) {
     if (e.detail.type === 'ZOOM_INFO')
     {
-      zoom = e.detail.zoom;
+      zoom = Math.log2(e.detail.zoom);
     }
   }
 
@@ -39,7 +40,7 @@
     <p class="ViewerScalebar__text">
       {unitFormatter(
         ...lengthConverter(
-          Number(basePhysicalSize) * Math.pow(2, 5 - zoom) * scalebarLength,
+          Number(basePhysicalSize) * Math.pow(2, levels - zoom) * scalebarLength,
           basePhysicalSizeUnit
         )
       )}

packages/components/src/constants/events.ts

@@ -10,7 +10,8 @@ export enum Events {
   ENGINE_INFO_UPDATE = 'engine-info::update',
   BUTTON_CLICK = 'button::clicked',
   PICK_OBJECT = 'picking::object',
-  TEXT_INPUT_CHANGE = 'text-input::change'
+  TEXT_INPUT_CHANGE = 'text-input::change',
+  SELECT_INPUT_CHANGE = 'select::change'
 }
 
 export enum Commands {

packages/components/src/geometry/Settings.component.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import Slider from '../misc/InlineSlider.component.svelte';
+	import { GUIEvent, SliderProps } from '../types';
+  import { Events } from '../constants/events';
+
+	export let renderStyle = 0;
+
+	function fillopacityOnChange(value: number) {
+    window.dispatchEvent(
+      new CustomEvent<GUIEvent<SliderProps>>(Events.SLIDER_CHANGE, {
+        bubbles: true,
+        detail: {
+          target: 'geometry_fillOpacity',
+          props: {
+            value: value
+          }
+        }
+      })
+    );
+  }
+
+	function lineThicknessOnChange(value: number) {
+    window.dispatchEvent(
+      new CustomEvent<GUIEvent<SliderProps>>(Events.SLIDER_CHANGE, {
+        bubbles: true,
+        detail: {
+          target: 'geometry_lineThickness',
+          props: {
+            value: value
+          }
+        }
+      })
+    );
+  }
+</script>
+
+<div class='Viewer-RenderSettings'>
+	{#if renderStyle == 0 || renderStyle == 2}
+		<Slider id={'fillopacity'} label={'Fill opacity'} min={0} max={1} value={1} step={0.01} callback={fillopacityOnChange}/>
+	{/if}
+	{#if renderStyle == 1 || renderStyle == 2}
+		<Slider id={'linethickness'} label={'Line thickness'} min={0} max={10} value={1} step={0.01} callback={lineThicknessOnChange}/>
+	{/if}
+</div>
+
+<style>
+	.Viewer-RenderSettings {
+		font-size: 14px;
+		color: var(--viewer-text-primary);
+		display: flex;
+		flex-direction: column;
+		gap: 6px;
+	}
+</style>

packages/components/src/index.ts

@@ -1,5 +1,5 @@
 import { Events, Commands } from './constants/events';
-import { GUIEvent, ButtonProps, SliderProps, TextBoxProps } from './types/index';
+import { GUIEvent, ButtonProps, SliderProps, TextBoxProps, SelectProps } from './types/index';
 
 export { default as FloatingButton } from './FloatingButton.component.svelte';
 export { default as MenuPanel } from './Menu.component.svelte';
@@ -20,6 +20,7 @@ export { default as ToggleSwitch } from './ToggleSwitch.component.svelte';
 export { default as StatusOverlay } from './StatusOverlay.component.svelte';
 export { default as Scalebar } from './Scalebar.component.svelte';
 export { default as InfoPanel } from './InfoPanel.component.svelte';
+export { default as GeometryPanel } from './GeometryPanel.component.svelte';
 
 export { Events, Commands }
-export type { GUIEvent, ButtonProps, SliderProps, TextBoxProps }
+export type { GUIEvent, ButtonProps, SliderProps, TextBoxProps, SelectProps }

packages/components/src/misc/InlineSlider.component.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  export let id = '';
+  export let label = '';
+  export let min = 0;
+  export let max = 10;
+  export let value = 1;
+  export let step = 0.1;
+
+  export let callback = (value: number) => {};
+</script>
+
+<div class="Viewer-Slider">
+  <label for={'slider' + id}>{label}:</label>
+  <input
+    name={'slider' + id}
+    type="range"
+    {min}
+    {max}
+    {step}
+    bind:value
+    on:input={() => callback(value)}
+  />
+  <p class="Viewer-Slider__collapsable">{value.toFixed(2)}</p>
+</div>
+
+<style lang="scss">
+  .Viewer-Slider {
+    display: flex;
+    font-family: Inter, Arial, 'sans-serif';
+    font-size: 14px;
+
+    label {
+      min-width: 140px;
+      line-height: 25px;
+      vertical-align: middle;
+    }
+
+    &__collapsable {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      width: 100%;
+      max-width: 0;
+      text-align: end;
+      transition: max-width 0.2s ease-in-out;
+      line-height: 25px;
+    }
+
+    input[type='range'] {
+      width: 100%;
+      appearance: none;
+      background: transparent;
+      padding: 0px 6px;
+      margin: 0px;
+      height: 25px;
+    }
+
+    &:hover &__collapsable {
+      max-width: 28px;
+    }
+
+    input[type='range']::-webkit-slider-thumb:hover {
+      background: var(--viewer-accent);
+      width: 20px;
+      height: 20px;
+      margin-top: -9px;
+    }
+
+    input[type='range']::-webkit-slider-thumb {
+      appearance: none;
+      content: 10;
+      background: var(--viewer-surface-primary);
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+      margin-top: -7px;
+      box-shadow: var(--viewer-shadow-medium);
+
+      transition: background 0.2s ease-in-out, width 0.2s ease-in-out,
+        height 0.2s ease-in-out, margin-top 0.2s ease-in-out;
+    }
+
+    input[type='range']::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 1.5px;
+      cursor: pointer;
+      border-radius: 2px;
+      background: var(--viewer-border);
+    }
+  }
+</style>

packages/components/src/misc/Select.component.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  export let label = '';
+  export let options = [];
+
+  export let callback = (value: number) => {};
+</script>
+
+<div class="Viewer-Select">
+  <label for="options">{label}:</label>
+  <div class="Viewer-Select__control">
+    <select
+      name="options"
+      on:change={event => callback(Number.parseInt(event.target.value))}
+    >
+      {#each options as name, index}
+        <option selected={index === 0} value={index}>{name}</option>
+      {/each}
+    </select>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon"
+      focusable="false"
+      viewBox="0 0 48 48"
+    >
+      <path
+        d="M24 33C23.4948 33.0009 22.9945 32.9006 22.5287 32.7051C22.0628 32.5095 21.6409 32.2227 21.2877 31.8615L7.69042 18.0791C7.24757 17.6279 6.99963 17.0209 7 16.3886C7.00037 15.7564 7.24902 15.1497 7.69239 14.699C7.91034 14.4775 8.17023 14.3015 8.45689 14.1815C8.74355 14.0615 9.05125 13.9998 9.36203 14C9.6728 14.0002 9.98043 14.0622 10.2669 14.1826C10.5535 14.303 10.8131 14.4792 11.0308 14.701L24 27.8475L36.9692 14.701C37.1869 14.4793 37.4466 14.3032 37.7332 14.1829C38.0197 14.0626 38.3273 14.0005 38.638 14.0003C38.9487 14.0002 39.2564 14.0618 39.5431 14.1818C39.8297 14.3017 40.0896 14.4776 40.3076 14.699C40.751 15.1497 40.9997 15.7564 41 16.3886C41.0004 17.0208 40.7525 17.6279 40.3096 18.0791L26.7129 31.8615C26.3595 32.2227 25.9375 32.5095 25.4715 32.705C25.0056 32.9005 24.5053 33.0008 24 33Z"
+      />
+    </svg>
+  </div>
+</div>
+
+<style lang="scss">
+  .Viewer-Select {
+    font-family: Inter, Arial, 'sans-serif';
+    font-size: 14px;
+    display: flex;
+    gap: 6px;
+
+    label {
+      min-width: 140px;
+      line-height: 25px;
+      vertical-align: middle;
+    }
+
+    select {
+      appearance: none;
+      outline: 10px red;
+      border: 0;
+      box-shadow: none;
+
+      font-family: Inter, Arial, 'sans-serif';
+      flex: 1;
+      padding: 0 6px;
+      color: var(--viewer-text-primary);
+      background-color: #fff;
+      cursor: pointer;
+    }
+
+    &__control {
+      position: relative;
+      display: flex;
+      width: 100%;
+      height: 25px;
+      border-radius: 6px;
+      overflow: hidden;
+      box-shadow: var(--viewer-shadow-small);
+    }
+
+    &__control svg {
+      position: absolute;
+      right: 0;
+      padding: 4px;
+      background-color: #fff;
+      transition: 0.25s all ease;
+      pointer-events: none;
+    }
+
+    &__control:hover svg {
+      fill: var(--viewer-accent);
+    }
+  }
+
+  .icon {
+    vertical-align: bottom;
+    margin: auto;
+    width: 16px;
+    height: 16px;
+    fill: var(--viewer-text-primary);
+    background: transparent;
+    pointer-events: none;
+  }
+</style>

packages/components/src/types/index.ts

@@ -17,4 +17,7 @@ export interface ButtonProps {
   command: string;
   data?: any;
 }
-
+
+export type SelectProps = {
+  value: number;
+}