@blokkli/editor 1.0.0

package/dist/runtime/components/Edit/Features/Selection/Overlay/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div />
+</template>
+
+<script lang="ts" setup>
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import type { DraggableExistingBlock, Rectangle } from '#blokkli/types'
+import { useBlokkli, onBeforeUnmount } from '#imports'
+import {
+  setBuffersAndAttributes,
+  drawBufferInfo,
+  type BufferInfo,
+  setUniforms,
+} from 'twgl.js'
+import vs from './vertex.glsl?raw'
+import fs from './fragment.glsl?raw'
+import { RectangleBufferCollector } from '#blokkli/helpers/webgl'
+import { toShaderColor } from '#blokkli/helpers'
+
+const props = defineProps<{
+  blocks: DraggableExistingBlock[]
+  gl: WebGLRenderingContext
+}>()
+
+const { animation, theme, dom } = useBlokkli()
+
+const programInfo = animation.registerProgram('selection', props.gl, [vs, fs])
+
+type SelectionRectangle = Rectangle & {
+  id: string
+  index: number
+  isInverted: boolean
+  radius: [number, number, number, number]
+}
+
+class SelectionRectangleBufferCollector extends RectangleBufferCollector<SelectionRectangle> {
+  uuids: string[] = []
+  lastCount = 0
+  prevKey = ''
+
+  getBufferInfo(force?: boolean): {
+    info: BufferInfo | null
+    hasChanged: boolean
+  } {
+    const key = props.blocks
+      .map((block) => {
+        const uuid = block.uuid
+        const rect = dom.getBlockRect(uuid)
+        if (!rect) {
+          return uuid + 'no_rect'
+        }
+
+        return uuid + rect.time
+      })
+      .join('_')
+
+    const hasChanged = force || this.prevKey !== key
+    if (hasChanged) {
+      this.reset()
+      this.lastCount = 0
+      for (let i = 0; i < props.blocks.length; i++) {
+        const block = props.blocks[i]
+        if (this.added.has(block.uuid)) {
+          continue
+        }
+        this.added.add(block.uuid)
+        const el = dom.getDragElement(block)
+        const rect = dom.getBlockRect(block.uuid)
+        if (!rect || !el) {
+          continue
+        }
+        const style = theme.getDraggableStyle(el)
+        this.addRectangle(
+          {
+            id: block.uuid,
+            height: rect.height,
+            width: rect.width,
+            x: rect.x,
+            y: rect.y,
+            radius: style.radius,
+            isInverted: style.isInverted,
+          },
+          style.isInverted ? 1 : 0,
+        )
+        this.lastCount++
+      }
+
+      this.prevKey = key
+    }
+
+    // Only update the buffer info if it has changed.
+    if (hasChanged) {
+      this.bufferInfo = this.createBufferInfo()
+    }
+
+    return { info: this.bufferInfo, hasChanged }
+  }
+}
+
+const collector = new SelectionRectangleBufferCollector(props.gl)
+
+const uniforms = {
+  u_color_default: toShaderColor(theme.accent.value[700]),
+  u_color_inverted: [255, 255, 255],
+}
+
+onBlokkliEvent('canvas:draw', () => {
+  props.gl.useProgram(programInfo.program)
+
+  setUniforms(programInfo, uniforms)
+  animation.setSharedUniforms(props.gl, programInfo)
+  const { info, hasChanged } = collector.getBufferInfo()
+
+  // Nothing to draw.
+  if (!info) {
+    return
+  }
+
+  // Only update buffer and attributes when they have changed.
+  if (hasChanged) {
+    setBuffersAndAttributes(props.gl, programInfo, info)
+  }
+
+  drawBufferInfo(props.gl, info, props.gl.TRIANGLES)
+})
+
+onBlokkliEvent('ui:resized', function () {
+  collector.reset()
+})
+
+onBlokkliEvent('state:reloaded', function () {
+  collector.reset()
+})
+
+onBeforeUnmount(() => {
+  props.gl.clear(props.gl.COLOR_BUFFER_BIT)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SelectionOverlay',
+}
+</script>

package/dist/runtime/components/Edit/Features/Selection/Overlay/vertex.glsl

@@ -0,0 +1,85 @@
+precision mediump float;
+
+// [x, y] position.
+attribute vec2 a_position;
+// The [x,y,width, height] of the quad the vertex belongs to.
+attribute vec4 a_quad;
+attribute float a_rect_id;
+attribute float a_rect_type;
+attribute vec4 a_rect_radius;
+
+// The global scaling applied to all quads.
+uniform float u_scale;
+uniform float u_dpi;
+// The amount of pixels to offset on the x axis.
+uniform float u_offset_x;
+// The amount of pixels to offset on the y axis.
+uniform float u_offset_y;
+uniform vec2 u_resolution;
+uniform vec3 u_color_default;
+uniform vec3 u_color_inverted;
+
+// The transformed quad for the fragment shader.
+varying vec4 v_quad;
+varying vec3 v_color;
+varying vec4 v_rect_radius;
+varying float v_thickness;
+varying vec2 v_rect_size;
+varying vec2 v_rect_center;
+varying float v_transition;
+
+void main() {
+  // Define the increase size in viewport terms (not affected by u_scale)
+  float thickness = (0.5 + smoothstep(0.3, 1.0, u_scale) * 2.5) * u_dpi;
+  float increaseSize = max(thickness, 15.0);
+
+  // Calculate the new dimensions of the quad
+  vec4 adjusted_quad = a_quad;
+  adjusted_quad.z += 2.0 * increaseSize; // increase width by 20px
+  adjusted_quad.w += 2.0 * increaseSize; // increase height by 20px
+
+  // Adjust vertex positions to scale from the center of the rectangle
+  // Calculate the center of the original quad
+  vec2 center = vec2(a_quad.x + a_quad.z / 2.0, a_quad.y + a_quad.w / 2.0);
+
+  // Adjust vertices to reflect new size
+  // Calculate new offset from center based on original vertex position relative to center
+  vec2 newOffset =
+    (a_position - center) *
+    (vec2(adjusted_quad.z, adjusted_quad.w) / vec2(a_quad.z, a_quad.w));
+
+  // New position is center plus the new offset
+  vec2 newPosition = center + newOffset;
+
+  // Apply global scale and offsets
+  vec2 offsetPosition = newPosition * u_scale;
+  offsetPosition.x += u_offset_x;
+  offsetPosition.y += u_offset_y;
+
+  // Normalize position for rendering
+  vec2 normalizedPosition = offsetPosition / u_resolution;
+
+  // Transform to screen space (-1 to 1)
+  vec2 screenSpacePosition = normalizedPosition * 2.0 - vec2(1.0, 1.0);
+  screenSpacePosition.y = -screenSpacePosition.y;
+
+  // Output final position in clip space
+  gl_Position = vec4(screenSpacePosition, 0.0, 1.0) * u_dpi;
+
+  vec4 transformed_quad = vec4(
+    (a_quad.x * u_scale + u_offset_x) * u_dpi,
+    (u_resolution.y - a_quad.y * u_scale - a_quad.w * u_scale - u_offset_y) *
+      u_dpi,
+    a_quad.z * u_scale * u_dpi,
+    a_quad.w * u_scale * u_dpi
+  );
+  v_quad = transformed_quad;
+
+  // Set color and other varying variables
+  v_color = a_rect_type > 0.5 ? u_color_inverted : u_color_default;
+  v_rect_radius = a_rect_radius * u_dpi;
+  v_thickness = thickness;
+  v_rect_size = vec2(v_quad.z, v_quad.w);
+  v_rect_center = vec2(v_quad.x + v_quad.z / 2.0, v_quad.y + v_quad.w / 2.0); // The pixel-space rectangle center location
+  v_transition = smoothstep(0.5, 0.8, u_scale);
+}

package/dist/runtime/components/Edit/Features/Selection/OverlayFallback/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <Teleport :to="artboard">
+    <div class="bk bk-selection-overlay-fallback">
+      <div
+        v-for="item in items"
+        :key="item.uuid"
+        :style="{
+          top: item.rect.y + 'px',
+          left: item.rect.x + 'px',
+          width: item.rect.width + 'px',
+          height: item.rect.height + 'px',
+        }"
+      />
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { falsy } from '#blokkli/helpers'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import { useBlokkli, computed } from '#imports'
+
+const props = defineProps<{
+  uuids: string[]
+}>()
+
+const { ui, dom } = useBlokkli()
+
+const artboard = ui.artboardElement()
+
+const items = computed(() => {
+  return props.uuids
+    .map((uuid) => {
+      const block = dom.findBlock(uuid)
+      if (!block) {
+        return null
+      }
+
+      const rect = dom.getBlockRect(uuid)
+      if (!rect) {
+        return null
+      }
+
+      return { uuid, rect }
+    })
+    .filter(falsy)
+})
+
+onBlokkliEvent('animationFrame', function () {})
+</script>

package/dist/runtime/components/Edit/Features/Selection/index.vue

@@ -0,0 +1,295 @@
+<template>
+  <Overlay
+    v-if="isVisible && gl"
+    :blocks="selection.blocks.value"
+    :uuids="selection.uuids.value"
+    :gl="gl"
+  />
+  <OverlayFallback v-if="isVisible && !gl" :uuids="selection.uuids.value" />
+</template>
+
+<script lang="ts" setup>
+import Overlay from './Overlay/index.vue'
+import OverlayFallback from './OverlayFallback/index.vue'
+import {
+  calculateIntersection,
+  getBounds,
+  intersects,
+  originatesFromTextInput,
+} from '#blokkli/helpers'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import type { DraggableExistingBlock, Rectangle } from '#blokkli/types'
+import {
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  ref,
+  watch,
+} from '#imports'
+
+defineBlokkliFeature({
+  id: 'selection',
+  icon: 'selection',
+  label: 'Selection',
+  description: 'Renders an overlay that highlights the selected blocks.',
+})
+
+const { selection, ui, eventBus, animation, dom, tour } = useBlokkli()
+
+const gl = animation.gl()
+
+const hasSelectedOnce = ref(false)
+
+const stop = watch(selection.uuids, function () {
+  hasSelectedOnce.value = true
+  stop()
+})
+
+const isVisible = computed(
+  () =>
+    dom.isReady.value &&
+    !selection.isMultiSelecting.value &&
+    !selection.editableActive.value &&
+    !selection.isChangingOptions.value &&
+    !selection.isDragging.value &&
+    !ui.isAnimating.value &&
+    hasSelectedOnce.value,
+)
+
+/**
+ * Find the block that is most visible for the user.
+ *
+ * Most visible is determined by how much of the block intersects with the
+ * padded visible viewport area.
+ */
+const findMostVisibleBlock = (): string | null => {
+  const viewport = ui.visibleViewportPadded.value
+  const uuids = dom.getVisibleBlocks()
+
+  let maxIntersection = 0
+  let maxY = 9999
+  let mostVisibleUuid: string | null = null
+
+  for (let i = 0; i < uuids.length; i++) {
+    const uuid = uuids[i]
+    const absoluteRect = dom.getBlockRect(uuid)
+    if (!absoluteRect) {
+      continue
+    }
+
+    const rect = ui.getViewportRelativeRect(absoluteRect)
+
+    // The intersection as a value from 0 to 1.
+    const intersection = calculateIntersection(rect, viewport)
+    if (
+      intersection &&
+      intersection > maxIntersection &&
+      rect.y < maxY &&
+      rect.y > 0
+    ) {
+      mostVisibleUuid = uuid
+      maxIntersection = intersection
+      maxY = rect.y
+    }
+  }
+
+  return mostVisibleUuid
+}
+
+const getSelectAllUuids = (
+  allBlocks: DraggableExistingBlock[],
+  currentlySelected: DraggableExistingBlock[],
+): string[] => {
+  // One or more blocks are selected.
+  if (currentlySelected.length >= 1) {
+    const selectedHostUuids = currentlySelected.map((block) => block.hostUuid)
+    const selectedHostTypes = currentlySelected.map((block) => block.hostType)
+    const selectedHostFieldNames = currentlySelected.map(
+      (block) => block.hostFieldName,
+    )
+    const selectedUuids = currentlySelected.map((v) => v.uuid)
+
+    const commonHostUuids = selectedHostUuids.filter(
+      (uuid, index, self) => self.indexOf(uuid) === index,
+    )
+    const commonHostTypes = selectedHostTypes.filter(
+      (type, index, self) => self.indexOf(type) === index,
+    )
+    const commonHostFieldNames = selectedHostFieldNames.filter(
+      (fieldName, index, self) => self.indexOf(fieldName) === index,
+    )
+
+    // Find all blocks that share the same host.
+    const newUuids = allBlocks
+      .filter(
+        (block) =>
+          commonHostUuids.includes(block.hostUuid) &&
+          commonHostTypes.includes(block.hostType) &&
+          commonHostFieldNames.includes(block.hostFieldName),
+      )
+      .map((block) => block.uuid)
+
+    const isSame = newUuids.every((uuid) => selectedUuids.includes(uuid))
+
+    if (!isSame) {
+      return newUuids
+    }
+  }
+
+  return allBlocks
+    .filter((block) => block.hostType !== 'block')
+    .map((block) => block.uuid)
+}
+
+/**
+ * Determine which blocks to select when the user is clicking on a block with the shift key.
+ */
+const visuallySelectBlocks = (toggleUuid: string): string[] | undefined => {
+  const rects = dom.getBlockRects()
+  const allUuids = Object.keys(rects)
+  const selected = selection.uuids.value
+  // Nothing selected yet, so we select the new block.
+  if (selected.length === 0) {
+    return [toggleUuid]
+  }
+
+  const singleSelectedBlock =
+    selected.length === 1 ? dom.findBlock(selected[0]) : null
+
+  const toggleRect = rects[toggleUuid]
+  if (!toggleRect) {
+    return
+  }
+  const toggleBlock = dom.findBlock(toggleUuid)
+  if (!toggleBlock) {
+    return
+  }
+  const filter = (encompassingRect: Rectangle): string[] => {
+    const candidates: string[] = []
+    for (let i = 0; i < allUuids.length; i++) {
+      const uuid = allUuids[i]
+      const rect = rects[uuid]
+      if (!rect) {
+        continue
+      }
+
+      if (!intersects(rect, encompassingRect)) {
+        continue
+      }
+
+      const block = dom.findBlock(uuid)
+
+      if (!block) {
+        continue
+      }
+
+      if (
+        block.isNested === toggleBlock.isNested ||
+        singleSelectedBlock?.isNested === block.isNested
+      ) {
+        candidates.push(uuid)
+      }
+    }
+
+    return candidates
+  }
+  const isToggleSelected = selected.includes(toggleUuid)
+
+  // One block selected.
+  if (selected.length === 1) {
+    if (isToggleSelected) {
+      return []
+    }
+
+    const selectedUuid = selected[0]
+    const selectedRect = rects[selectedUuid]
+    if (!selectedRect) {
+      return
+    }
+    const encompassingRect = getBounds([selectedRect, toggleRect])
+    if (!encompassingRect) {
+      return
+    }
+
+    return filter(encompassingRect)
+  }
+
+  // More than one selected.
+  // Find the most upper left element excluding the toggleElement.
+  const upperLeftUuid = selected
+    .filter((uuid) => (isToggleSelected ? uuid !== toggleUuid : true))
+    .reduce((prev, current) => {
+      const prevRect = rects[prev]
+      const currentRect = rects[current]
+      return currentRect &&
+        prevRect &&
+        prevRect.x <= currentRect.x &&
+        prevRect.y <= currentRect.y
+        ? prev
+        : current
+    })
+
+  const upperLeftRect = rects[upperLeftUuid]
+  const encompassingRect = getBounds([upperLeftRect, toggleRect])
+  if (!encompassingRect) {
+    return
+  }
+
+  return filter(encompassingRect)
+}
+
+onBlokkliEvent('select:shiftToggle', (uuid) => {
+  const uuids = visuallySelectBlocks(uuid)
+  if (uuids) {
+    eventBus.emit('select', uuids)
+  }
+})
+
+onBlokkliEvent('keyPressed', (e) => {
+  if (selection.isDragging.value || selection.isMultiSelecting.value) {
+    return
+  }
+  if (e.code === 'Escape') {
+    eventBus.emit('select:end', [])
+  } else if (e.code === 'Tab') {
+    if (tour.isTouring.value) {
+      return
+    }
+    e.originalEvent.preventDefault()
+
+    // No block is selected.
+    if (selection.blocks.value.length !== 1) {
+      // Select the most visible block for the user.
+      const uuid = findMostVisibleBlock()
+      if (uuid) {
+        eventBus.emit('select', uuid)
+        eventBus.emit('scrollIntoView', { uuid })
+      }
+      return
+    }
+
+    if (e.shift) {
+      eventBus.emit('select:previous')
+    } else {
+      eventBus.emit('select:next')
+    }
+    animation.requestDraw()
+  } else if (e.code === 'a' && e.meta) {
+    // Regular native CTRL+A behaviour should not be overriden.
+    if (originatesFromTextInput(e.originalEvent)) {
+      return
+    }
+    e.originalEvent.preventDefault()
+    eventBus.emit(
+      'select:end',
+      getSelectAllUuids(dom.getAllBlocks(), selection.blocks.value),
+    )
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Selection',
+}
+</script>

package/dist/runtime/components/Edit/Features/Settings/Dialog/FeatureSetting/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="bk-settings-feature-setting" :class="'bk-is-' + setting.type">
+    <label v-if="setting.type === 'checkbox'" class="bk-checkbox-toggle">
+      <input
+        :checked="settingsStorage[settingsKey] as boolean"
+        type="checkbox"
+        class="peer"
+        @change="toggleCheckbox"
+      />
+      <div />
+      <span>{{ settingLabel }}</span>
+    </label>
+    <div v-else-if="setting.type === 'radios'">
+      <h3 class="bk-form-label">
+        {{ settingLabel }}
+      </h3>
+      <ul class="bk-settings-ui">
+        <li
+          v-for="[value, config] in Object.entries(setting.options)"
+          :key="value"
+        >
+          <label>
+            <input
+              :checked="settingsStorage[settingsKey] === value"
+              type="radio"
+              :value="true"
+              :name="settingsKey"
+              @change="setRadioValue(value)"
+            />
+            <Icon v-if="config.icon" :name="config.icon" />
+            <span>{{ getOptionLabel(value, config.label) }}</span>
+          </label>
+        </li>
+      </ul>
+    </div>
+    <div v-else-if="setting.type === 'method'">
+      <button class="bk-button" @click="setting.method()">
+        {{ settingLabel }}
+      </button>
+    </div>
+    <div v-else-if="setting.type === 'slider'">
+      <label class="bk-input-range">
+        <span>{{ settingLabel }}: {{ settingsStorage[settingsKey] }}</span>
+        <input
+          :value="settingsStorage[settingsKey]"
+          type="range"
+          :min="setting.min"
+          :max="setting.max"
+          :step="setting.step"
+          list="tickmarks"
+          @input="setSliderValue($event)"
+        />
+        <datalist id="tickmarks">
+          <option v-for="tick in tickmarks" :key="tick" :value="tick" />
+        </datalist>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { FeatureDefinitionSetting } from '#blokkli/types'
+import { Icon } from '#blokkli/components'
+import type { ValidFeatureKey } from '#blokkli-runtime/features'
+import { useBlokkli, computed } from '#imports'
+
+const props = defineProps<{
+  featureId: ValidFeatureKey
+  settingsKey: string
+  setting: FeatureDefinitionSetting
+}>()
+
+const { storage, $t: textTranslation } = useBlokkli()
+
+const settingLabel = computed(() => {
+  return (
+    textTranslation(
+      'feature_' + props.featureId + '_setting_' + props.settingsKey + '_label',
+    ) || props.setting.label
+  )
+})
+
+const getOptionLabel = (key: string, defaultLabel: string) => {
+  return (
+    textTranslation(
+      'feature_' +
+        props.featureId +
+        '_setting_' +
+        props.settingsKey +
+        '_option_' +
+        key,
+    ) || defaultLabel
+  )
+}
+
+const settingsStorage = storage.use(
+  `feature:${props.featureId}:settings`,
+  {} as Record<string, boolean | string | number>,
+)
+
+const toggleCheckbox = () => {
+  const current = settingsStorage.value[props.settingsKey]
+  settingsStorage.value = {
+    ...settingsStorage.value,
+    [props.settingsKey]: !current,
+  }
+}
+
+const setRadioValue = (value: string) => {
+  settingsStorage.value = {
+    ...settingsStorage.value,
+    [props.settingsKey]: value,
+  }
+}
+
+const setSliderValue = (e: Event) => {
+  if (e.target instanceof HTMLInputElement) {
+    settingsStorage.value = {
+      ...settingsStorage.value,
+      [props.settingsKey]: Number.parseFloat(e.target.value),
+    }
+  }
+}
+
+const tickmarks = computed(() => {
+  if (props.setting.type === 'slider') {
+    const values: number[] = []
+    for (
+      let value = props.setting.min;
+      value <= props.setting.max;
+      value += props.setting.step
+    ) {
+      values.push(value)
+    }
+    values.push(props.setting.max)
+    return values
+  }
+
+  return []
+})
+</script>