budibase/packages/client/src/components/preview/SelectionIndicator.svelte

<script>
  import { builderStore } from "stores"
  import IndicatorSet from "./IndicatorSet.svelte"

  $: color = $builderStore.editMode
    ? "var(--spectrum-global-color-static-green-500)"
    : "var(--spectrum-global-color-static-blue-600)"
</script>

<IndicatorSet
  componentId={$builderStore.selectedComponentId}
  {color}
  zIndex="910"
  transition
  allowResizeAnchors
/>
Render builder preview selection indicators via top level component instead of via styleable healper. Add indiciator on hover and add name to indicator 2021-06-08 15:19:03 +02:00			`<script>`
Add grid functionality separately to DND 2022-10-18 17:18:22 +02:00			`import { builderStore } from "stores"`
Use IntersectionObservers to determine visibility of selected and hovered components 2021-06-10 16:13:51 +02:00			`import IndicatorSet from "./IndicatorSet.svelte"`
Allow in-preview editing of paragraphs and headings 2021-10-28 13:43:31 +02:00
			`$: color = $builderStore.editMode`
			`? "var(--spectrum-global-color-static-green-500)"`
			`: "var(--spectrum-global-color-static-blue-600)"`
Render builder preview selection indicators via top level component instead of via styleable healper. Add indiciator on hover and add name to indicator 2021-06-08 15:19:03 +02:00			`</script>`

Use IntersectionObservers to determine visibility of selected and hovered components 2021-06-10 16:13:51 +02:00			`<IndicatorSet`
Add grid functionality separately to DND 2022-10-18 17:18:22 +02:00			`componentId={$builderStore.selectedComponentId}`
Allow in-preview editing of paragraphs and headings 2021-10-28 13:43:31 +02:00			`{color}`
Use IntersectionObservers to determine visibility of selected and hovered components 2021-06-10 16:13:51 +02:00			`zIndex="910"`
			`transition`
Add grid functionality separately to DND 2022-10-18 17:18:22 +02:00			`allowResizeAnchors`
Use IntersectionObservers to determine visibility of selected and hovered components 2021-06-10 16:13:51 +02:00			`/>`