@blokkli/editor 1.0.0

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

@@ -0,0 +1,289 @@
+<template>
+  <Teleport to="body">
+    <div />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, onBeforeUnmount } from '#imports'
+import { intersects, toShaderColor } from '#blokkli/helpers'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import vs from './vertex.glsl?raw'
+import fs from './fragment.glsl?raw'
+import {
+  type BufferInfo,
+  setBuffersAndAttributes,
+  drawBufferInfo,
+  setUniforms,
+} from 'twgl.js'
+import type { Coord, Rectangle } from '#blokkli/types'
+import { RectangleBufferCollector } from '#blokkli/helpers/webgl'
+import useDebugLogger from '#blokkli/helpers/composables/useDebugLogger'
+
+const { eventBus, dom, theme, animation, ui } = useBlokkli()
+const logger = useDebugLogger()
+
+const props = defineProps<{
+  startX: number
+  startY: number
+  isPressingControl: boolean
+  gl: WebGLRenderingContext
+}>()
+
+defineEmits<{
+  (e: 'select', uuids: string[]): void
+}>()
+
+type MultiSelectRectangle = Rectangle & {
+  id: string
+  index: number
+  isNested: boolean
+  radius: [number, number, number, number]
+}
+
+class MultiSelectRectangleBufferCollector extends RectangleBufferCollector<MultiSelectRectangle> {
+  getBufferInfo(
+    offset: Coord,
+    scale: number,
+  ): { info: BufferInfo | null; hasChanged: boolean } {
+    const visibleBlocks = dom.getVisibleBlocks()
+
+    const lengthBefore = this.positions.length
+
+    for (let i = 0; i < visibleBlocks.length; i++) {
+      const uuid = visibleBlocks[i]
+      if (this.added.has(uuid)) {
+        continue
+      }
+      const block = dom.findBlock(uuid)
+      if (!block) {
+        continue
+      }
+      const el = dom.getDragElement(block)
+      if (!el) {
+        continue
+      }
+      const rect = el.getBoundingClientRect()
+      const style = theme.getDraggableStyle(el)
+      this.addRectangle(
+        {
+          id: uuid,
+          x: rect.x / scale - offset.x / scale,
+          y: rect.y / scale - offset.y / scale,
+          width: rect.width / scale,
+          height: rect.height / scale,
+          isNested: block.isNested,
+          radius: style.radius,
+        },
+        block.isNested ? 6 : 5,
+      )
+    }
+
+    const hasChanged = lengthBefore !== this.positions.length
+
+    // Only update the buffer info if it has changed.
+    if (hasChanged) {
+      this.bufferInfo = this.createBufferInfo()
+    }
+
+    return { info: this.bufferInfo, hasChanged }
+  }
+
+  getSelectedUuids(box: Rectangle): { nested: string[]; notNested: string[] } {
+    const nested: string[] = []
+    const notNested: string[] = []
+    const rects = Object.values(this.rects)
+
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i]
+      if (intersects(box, rect)) {
+        if (rect.isNested) {
+          nested.push(rect.id)
+        } else {
+          notNested.push(rect.id)
+        }
+      }
+    }
+
+    return { nested, notNested }
+  }
+
+  isSelectingNested(box: Rectangle): boolean {
+    const rects = Object.values(this.rects)
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i]
+      if (intersects(box, rect) && rect.isNested) {
+        return true
+      }
+    }
+    return false
+  }
+}
+
+const collector = new MultiSelectRectangleBufferCollector(props.gl)
+const thick = 100
+collector.addRectangle(
+  {
+    width: 1000,
+    height: thick,
+    x: 100,
+    y: 100,
+    id: 'select-rect-top',
+    isNested: false,
+    radius: [0, 0, 0, 0],
+  },
+  0,
+)
+collector.addRectangle(
+  {
+    width: thick,
+    height: 1000,
+    x: 1000 + thick,
+    y: thick,
+    id: 'select-rect-right',
+    isNested: false,
+    radius: [0, 0, 0, 0],
+  },
+  0,
+)
+collector.addRectangle(
+  {
+    width: 1000,
+    height: thick,
+    x: 100 + thick,
+    y: 1000 + thick,
+    id: 'select-rect-bottom',
+    isNested: false,
+    radius: [0, 0, 0, 0],
+  },
+  0,
+)
+collector.addRectangle(
+  {
+    width: thick,
+    height: 1000,
+    x: 100,
+    y: 100 + thick,
+    id: 'select-rect-left',
+    isNested: false,
+    radius: [0, 0, 0, 0],
+  },
+  0,
+)
+
+const artboardOffsetStart = { ...ui.artboardOffset.value }
+const artboardScaleStart = ui.artboardScale.value
+
+const programInfo = animation.registerProgram(
+  'multi_select_overlay',
+  props.gl,
+  [vs, fs],
+)
+const uniforms = {
+  u_color_field_active: toShaderColor(theme.accent.value[700]),
+  u_color_field_default: toShaderColor(theme.mono.value[400]),
+  u_color_area_active: toShaderColor(theme.teal.value.normal),
+  u_color_area_default: toShaderColor(theme.teal.value.normal),
+}
+
+let mouseX = 0
+let mouseY = 0
+
+function getSelectRect(
+  offset: Coord,
+  scale: number,
+): { shader: Rectangle; check: Rectangle } {
+  const startX =
+    (props.startX / artboardScaleStart +
+      (offset.x / scale - artboardOffsetStart.x / artboardScaleStart)) *
+    scale
+
+  const startY =
+    (props.startY / artboardScaleStart +
+      (offset.y / scale - artboardOffsetStart.y / artboardScaleStart)) *
+    scale
+
+  const ax = startX > mouseX ? mouseX : startX
+  const ay = startY > mouseY ? mouseY : startY
+  const bx = startX > mouseX ? startX : mouseX
+  const by = startY > mouseY ? startY : mouseY
+  const shader = {
+    x: ax,
+    y: ay,
+    width: bx - ax,
+    height: by - ay,
+  }
+  const check = {
+    x: shader.x / scale - offset.x / scale,
+    y: shader.y / scale - offset.y / scale,
+    width: shader.width / scale,
+    height: shader.height / scale,
+  }
+
+  return { shader, check }
+}
+
+const now = Date.now()
+
+onBlokkliEvent('canvas:draw', (e) => {
+  mouseX = e.mouseX
+  mouseY = e.mouseY
+
+  const { shader, check } = getSelectRect(e.artboardOffset, e.artboardScale)
+
+  const { nested } = collector.getSelectedUuids(check)
+  const shouldSelectAll = props.isPressingControl || !nested.length
+
+  props.gl.useProgram(programInfo.program)
+
+  const time = (Date.now() - now) / 1000
+
+  setUniforms(programInfo, uniforms)
+  setUniforms(programInfo, {
+    u_select_all: shouldSelectAll ? 1 : 0,
+    u_select_rect: [shader.x, shader.y, shader.width, shader.height],
+    u_time: time,
+  })
+
+  animation.setSharedUniforms(props.gl, programInfo)
+  const { info, hasChanged } = collector.getBufferInfo(
+    e.artboardOffset,
+    e.artboardScale,
+  )
+
+  // 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)
+})
+
+function getUuidsToSelect(): string[] {
+  const { check } = getSelectRect(
+    ui.artboardOffset.value,
+    ui.artboardScale.value,
+  )
+
+  const { nested, notNested } = collector.getSelectedUuids(check)
+  if (props.isPressingControl) {
+    return [...nested, ...notNested]
+  } else if (!nested.length) {
+    return notNested
+  }
+  return nested
+}
+
+onBeforeUnmount(() => {
+  props.gl.clear(props.gl.COLOR_BUFFER_BIT)
+
+  eventBus.emit('select:end', getUuidsToSelect())
+
+  logger.log('MultiSelectOverlay unmounted')
+})
+</script>

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

@@ -0,0 +1,182 @@
+#version 300 es
+
+precision mediump float;
+
+in vec3 a_position;
+in vec4 a_quad;
+in float a_rect_id;
+in float a_rect_type;
+in float a_vertex_index;
+
+uniform float u_time;
+uniform float u_dpi;
+uniform float u_scale;
+uniform float u_offset_x;
+uniform float u_offset_y;
+uniform float u_select_all;
+uniform vec2 u_resolution;
+uniform vec3 u_color_field_default;
+uniform vec3 u_color_field_active;
+uniform vec3 u_color_area_default;
+uniform vec3 u_color_area_active;
+uniform vec4 u_select_rect;
+
+out vec4 v_quad;
+out float v_intersecting;
+out float v_is_select_rect;
+out vec3 v_color_default;
+out vec3 v_color_active;
+out float v_rect_id;
+
+bool isIntersecting(vec4 a, vec4 b) {
+  return a.x < b.x + b.z &&
+  a.x + a.z > b.x &&
+  a.y < b.y + b.w &&
+  a.y + a.w > b.y;
+}
+
+/**
+ * Maps the vertices of 4 quads (total of 16 vertices) so that they together form a border of thickness t.
+ */
+vec2 getVertexPos(vec4 targetRect, float edge, float corner) {
+  // @TODO: Could maybe be made less verbose?
+  // How much to thicken around targetRect (in viewport pixels.)
+  // This will be the
+  float t = max(1.0 / u_dpi, 0.75);
+
+  float x = targetRect.x;
+  float y = targetRect.y;
+  float w = targetRect.z;
+  float h = targetRect.w;
+  vec2 pos = vec2(0.0, 0.0);
+
+  bool edge_top = edge < 0.5;
+  bool edge_right = edge < 1.5;
+  bool edge_bottom = edge < 2.5;
+  bool edge_left = edge < 3.5;
+
+  bool corner_top_left = corner < 0.5;
+  bool corner_top_right = corner < 1.5;
+  bool corner_bottom_right = corner < 2.5;
+  bool corner_bottom_left = corner < 3.5;
+
+  // Top edge of rectangle.
+  if (edge_top) {
+    // Top-left.
+    if (corner_top_left) {
+      pos.x = x - t;
+      pos.y = y - t;
+      // Top-right.
+    } else if (corner_top_right) {
+      pos.x = x + w + t;
+      pos.y = y - t;
+      // Bottom-right.
+    } else if (corner_bottom_right) {
+      pos.x = x + w + t;
+      pos.y = y + t;
+      // Bottom-left.
+    } else if (corner_bottom_left) {
+      pos.x = x - t;
+      pos.y = y + t;
+    }
+    // Right edge of rectangle.
+  } else if (edge_right) {
+    if (corner_top_left) {
+      pos.x = x + w - t;
+      pos.y = y - t;
+    } else if (corner_top_right) {
+      pos.x = x + w + t;
+      pos.y = y - t;
+    } else if (corner_bottom_right) {
+      pos.x = x + w + t;
+      pos.y = y + t + h;
+    } else if (corner_bottom_left) {
+      pos.x = x + w - t;
+      pos.y = y + t + h;
+    }
+    // Bottom edge of rectangle.
+  } else if (edge_bottom) {
+    if (corner_top_left) {
+      pos.x = x - t;
+      pos.y = y + h - t;
+    } else if (corner_top_right) {
+      pos.x = x + w + t;
+      pos.y = y + h - t;
+    } else if (corner_bottom_right) {
+      pos.x = x + w + t;
+      pos.y = y + h + t;
+    } else if (corner_bottom_left) {
+      pos.x = x - t;
+      pos.y = y + t + h;
+    }
+    // Left edge of rectangle.
+  } else if (edge_left) {
+    if (corner_top_left) {
+      pos.x = x - t;
+      pos.y = y - t;
+    } else if (corner_top_right) {
+      pos.x = x + t;
+      pos.y = y - t;
+    } else if (corner_bottom_right) {
+      pos.x = x + t;
+      pos.y = y + h + t;
+    } else if (corner_bottom_left) {
+      pos.x = x - t;
+      pos.y = y + t + h;
+    }
+  }
+
+  return pos;
+}
+
+void main() {
+  // Selection rectangle.
+  if (a_rect_type < 0.5) {
+    vec2 pos = getVertexPos(u_select_rect, a_rect_id, a_position.z);
+    vec2 normalizedPosition = pos / u_resolution;
+    vec2 screenSpacePosition = normalizedPosition * 2.0 - vec2(1.0, 1.0);
+    screenSpacePosition.y = -screenSpacePosition.y;
+
+    gl_Position = vec4(screenSpacePosition, 0.0, 1.0);
+    v_is_select_rect = 1.0;
+    return;
+  }
+
+  vec2 offsetPosition = a_position.xy * u_scale;
+  offsetPosition.x += u_offset_x;
+  offsetPosition.y += u_offset_y;
+
+  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);
+
+  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;
+
+  bool is_nested = a_rect_type > 5.5;
+  bool select_all = u_select_all > 0.5;
+
+  // Used to check intersection.
+  vec4 box = vec4(a_quad) * u_scale;
+  box.x += u_offset_x;
+  box.y += u_offset_y;
+
+  v_intersecting =
+    isIntersecting(box, u_select_rect) && (is_nested || select_all)
+      ? 1.0
+      : 0.0;
+
+  v_color_default = u_color_field_default;
+  v_color_active = u_color_field_active;
+}

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

@@ -0,0 +1,76 @@
+<template>
+  <Overlay
+    v-if="shouldRender && gl"
+    :start-x="downX"
+    :start-y="downY"
+    :is-pressing-control="keyboard.isPressingControl.value"
+    :gl="gl"
+    @select="onSelect"
+  />
+</template>
+
+<script lang="ts" setup>
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import { ref, useBlokkli, defineBlokkliFeature, computed } from '#imports'
+import Overlay from './Overlay/index.vue'
+
+defineBlokkliFeature({
+  id: 'multi-select',
+  label: 'Multiselect',
+  icon: 'multi-select',
+  description:
+    'Implements support for selecting multiple blocks using a select rectangle.',
+  viewports: ['desktop'],
+})
+
+const { keyboard, eventBus, selection, state, animation } = useBlokkli()
+
+const gl = animation.gl()
+
+const enabled = computed(
+  () =>
+    !selection.editableActive.value && state.editMode.value === 'editing' && gl,
+)
+
+const shouldRender = ref(false)
+const downX = ref(0)
+const downY = ref(0)
+
+const onSelect = (uuids: string[]) => {
+  shouldRender.value = false
+  eventBus.emit('select:end', uuids)
+}
+
+let startTimeout: any = null
+
+onBlokkliEvent('mouse:down', (e) => {
+  if (!enabled.value || e.type !== 'mouse') {
+    return
+  }
+  if (keyboard.isPressingSpace.value || keyboard.isPressingControl.value) {
+    return
+  }
+  clearTimeout(startTimeout)
+  downX.value = e.x
+  downY.value = e.y
+
+  startTimeout = setTimeout(() => {
+    eventBus.emit('select:start', {
+      uuids: [],
+      mode: 'mouse',
+    })
+    shouldRender.value = true
+  }, 70)
+})
+
+onBlokkliEvent('mouse:up', () => {
+  shouldRender.value = false
+  clearTimeout(startTimeout)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'MultiSelect',
+}
+</script>

package/dist/runtime/components/Edit/Features/Options/Form/Checkbox/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <label class="bk-blokkli-item-options-checkbox">
+    <input v-model="checked" type="checkbox" class="peer" />
+    <div />
+    <span>{{ label }}</span>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import defineCommands from '#blokkli/helpers/composables/defineCommands'
+import { computed, useBlokkli } from '#imports'
+
+const { $t, state } = useBlokkli()
+
+const props = defineProps<{
+  label: string
+  property: string
+  modelValue: string
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const checked = computed({
+  get() {
+    return props.modelValue === '1'
+  },
+  set(v: any) {
+    emit('update:modelValue', v ? '1' : '')
+  },
+})
+
+defineCommands(() => {
+  if (state.editMode.value !== 'editing') {
+    return
+  }
+  return {
+    id: 'options:' + props.property + ':toggle',
+    label: $t('optionsCommand.setOption', 'Set option "@option" to "@value"')
+      .replace('@option', props.label)
+      .replace('@value', checked.value ? 'false' : 'true'),
+    group: 'selection',
+    icon: 'form',
+    callback: () => (checked.value = !checked.value),
+  }
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'OptionsFormCheckbox',
+}
+</script>