@blokkli/editor 1.0.3 → 1.1.0

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/index.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <slot :color="active?.color" :label="active?.label" />
+    <slot :color="activeColorHex" :label="active?.label" />
   </Teleport>
 </template>
 
@@ -41,9 +41,15 @@ const props = defineProps<{
   isTouch: boolean
 }>()
 
+const MIN_GAP = 20
+
 enum RectRenderType {
-  FIELD,
   DROP_AREA,
+  FIELD_1,
+  FIELD_2,
+  FIELD_3,
+  FIELD_4,
+  ACTIVE_AREA,
 }
 
 type Orientation = 'horizontal' | 'vertical'
@@ -66,7 +72,7 @@ type FieldRect = Rectangle & {
 
 type DrawnRect = Rectangle & {
   id: string
-  type: 'field' | 'drop-area'
+  type: 'field' | 'drop-area' | 'active-area'
   label: string
   color: string
   colorAlpha: string
@@ -293,7 +299,7 @@ function getGapSize(orientation: Orientation, element: HTMLElement): number {
     }
   }
 
-  return 30
+  return MIN_GAP
 }
 
 const fieldChildCache: Record<string, FieldRectChild[]> = {}
@@ -358,6 +364,15 @@ const buildChildren = (
       continue
     }
 
+    // Get the rect of the block. Use a cached one if possible.
+    const elRect =
+      dom.getBlockRect(uuid) ||
+      ui.getAbsoluteElementRect(el.getBoundingClientRect())
+
+    // Calculate the offset to the parent. We can not use el.offsetTop/el.offsetLeft here because the value could be 0.
+    const elOffsetTop = elRect.y - field.y
+    const elOffsetLeft = elRect.x - field.x
+
     // Last element.
     if (isLast) {
       const id = buildChildId(field.field, uuid, 'last', uuid)
@@ -365,18 +380,18 @@ const buildChildren = (
         childrenForUuid.push({
           id,
           width: field.width,
-          height: field.gap,
+          height: MIN_GAP,
           x: 0,
-          y: el.offsetTop + el.scrollHeight,
+          y: elOffsetTop + el.scrollHeight,
           label: field.label,
         })
       } else {
         childrenForUuid.push({
           id,
-          width: field.gap,
+          width: MIN_GAP,
           height: el.offsetHeight,
-          x: el.offsetLeft + el.offsetWidth,
-          y: el.offsetTop,
+          x: elOffsetLeft + el.offsetWidth + (field.gap - MIN_GAP) / 2,
+          y: elOffsetTop,
           label: field.label,
         })
       }
@@ -397,18 +412,20 @@ const buildChildren = (
       childrenForUuid.push({
         id,
         width: field.width,
-        height: field.gap,
+        height: MIN_GAP,
         x: 0,
-        y: el.offsetTop - field.gap / 2,
+        y: elOffsetTop - field.gap / 2,
         label: field.label,
       })
     } else {
       childrenForUuid.push({
         id,
-        width: field.gap,
-        height: Math.max(el.offsetHeight, 30),
-        x: Math.max(el.offsetLeft - field.gap, -field.gap),
-        y: el.offsetTop,
+        width: MIN_GAP,
+        height: Math.max(el.offsetHeight, MIN_GAP),
+        x:
+          Math.max(elOffsetLeft - field.gap, -field.gap) +
+          (field.gap - MIN_GAP) / 2,
+        y: elOffsetTop,
         label: field.label,
       })
     }
@@ -495,7 +512,7 @@ const buildEmptyChild = (
         x: 0,
         y: 0,
         width: fieldWidth,
-        height: fieldHeight > 30 ? 0 : 30,
+        height: Math.max(fieldHeight, MIN_GAP),
         label: getInsertText(field),
       }
     }
@@ -524,8 +541,9 @@ const buildFieldRect = (key: string): FieldRect | undefined => {
   }
   const x = rect.x
   const y = rect.y
-  const height = Math.max(rect.height, 30)
-  const width = Math.max(rect.width, 30)
+  const width = Math.max(rect.width, MIN_GAP)
+
+  const height = Math.max(rect.height, MIN_GAP)
   const emptyChild = buildEmptyChild(
     field,
     childElements,
@@ -533,7 +551,8 @@ const buildFieldRect = (key: string): FieldRect | undefined => {
     width,
     height,
   )
-  const gap = Math.max(getGapSize(orientation, field.element), 30)
+
+  const gap = Math.max(getGapSize(orientation, field.element), MIN_GAP)
 
   const fieldRect = {
     key: field.key,
@@ -566,8 +585,8 @@ const buildDropAreaRect = (area: DropArea): Rectangle => {
   const dropAreaRect: Rectangle = {
     x: rect.x,
     y: rect.y,
-    width: Math.max(rect.width, 30),
-    height: Math.max(rect.height, 30),
+    width: Math.max(rect.width, MIN_GAP),
+    height: Math.max(rect.height, MIN_GAP),
   }
 
   cachedDropAreaRects[area.id] = dropAreaRect
@@ -579,6 +598,17 @@ const colorTealAlpha = rgbaToString(theme.teal.value.normal, 0.7)
 const colorAccent = rgbaToString(theme.accent.value[800])
 const colorAccentAlpha = rgbaToString(theme.accent.value[800], 0.7)
 
+function getRectType(field: BlokkliFieldElement): RectRenderType {
+  if (field.nestingLevel >= 3) {
+    return RectRenderType.FIELD_4
+  } else if (field.nestingLevel >= 2) {
+    return RectRenderType.FIELD_3
+  } else if (field.nestingLevel >= 1) {
+    return RectRenderType.FIELD_2
+  }
+  return RectRenderType.FIELD_1
+}
+
 class DropTargetRectangleBufferCollector extends RectangleBufferCollector<DrawnRect> {
   getBufferInfo(): { info: BufferInfo | null; hasChanged: boolean } {
     const visibleFields = dom.getVisibleFields()
@@ -589,6 +619,7 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector<DrawnR
     for (let i = 0; i < visibleFields.length; i++) {
       const key = visibleFields[i]
       const fieldRect = buildFieldRect(key)
+
       if (!fieldRect) {
         continue
       }
@@ -598,6 +629,7 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector<DrawnR
         if (this.added.has(child.id)) {
           continue
         }
+        const type = getRectType(fieldRect.field)
         this.addRectangle(
           {
             id: child.id,
@@ -611,7 +643,8 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector<DrawnR
             height: child.height,
             field: fieldRect,
           },
-          RectRenderType.FIELD,
+          type,
+          true,
         )
       }
     }
@@ -641,6 +674,7 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector<DrawnR
           height: areaRect.height,
         },
         RectRenderType.DROP_AREA,
+        false,
       )
     }
 
@@ -659,6 +693,9 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector<DrawnR
     const rects = Object.values(this.rects)
     for (let i = 0; i < rects.length; i++) {
       const rect = rects[i]
+      if (rect.type === 'active-area') {
+        continue
+      }
       if (intersects(box, rect)) {
         candidates.push(rect)
       }
@@ -678,6 +715,9 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector<DrawnR
 
     for (let i = 0; i < rects.length; i++) {
       const rect = rects[i]
+      if (rect.type === 'active-area') {
+        continue
+      }
       if (isInsideRect(coord.x, coord.y, rect)) {
         return rect
       }
@@ -689,14 +729,91 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector<DrawnR
 
 const collector = new DropTargetRectangleBufferCollector(gl)
 
+// Add a rectangle that we will use to display the hovered field area.
+// The vertex shader will dynamically transform the quad to match the currently hovered field area.
+collector.addRectangle(
+  {
+    id: 'active-hover-rect',
+    type: 'active-area',
+    label: 'Field Area',
+    color: 'red',
+    colorAlpha: 'red',
+    x: 0,
+    y: 0,
+    width: ui.artboardSize.value.width,
+    height: ui.artboardSize.value.height,
+  },
+  RectRenderType.ACTIVE_AREA,
+  false,
+)
+
+const fieldColors = computed(() => {
+  return {
+    '0': theme.accent.value[900],
+    '1': theme.accent.value[400],
+    '2': theme.accent.value[600],
+    '3': theme.accent.value[500],
+  }
+})
+
+function getColorForField(field?: FieldRect | null) {
+  const nestingLevel = field?.field.nestingLevel || 0
+  if (nestingLevel >= 3) {
+    return fieldColors.value[3]
+  } else if (nestingLevel >= 2) {
+    return fieldColors.value[2]
+  } else if (nestingLevel >= 1) {
+    return fieldColors.value[1]
+  }
+  return fieldColors.value[0]
+}
+
+const activeColorRgb = computed(() => {
+  if (active.value?.type === 'drop-area') {
+    return theme.teal.value.normal
+  }
+  return getColorForField(active.value?.field)
+})
+
+const activeColorHex = computed(() => {
+  if (activeColorRgb.value) {
+    return rgbaToString(activeColorRgb.value)
+  }
+  return ''
+})
+
+const activeHoverField = ref<FieldRect | null>(null)
+
+const activeHoverRect = computed(() => {
+  if (!activeHoverField.value) {
+    return [0, 0, 0, 0]
+  }
+
+  const outset = activeHoverField.value.field.nestingLevel === 0 ? 0 : 20
+
+  return [
+    activeHoverField.value.x - outset,
+    activeHoverField.value.y - outset,
+    activeHoverField.value.width + 2 * outset,
+    activeHoverField.value.height + 2 * outset,
+  ]
+})
+
+const activeHoverColor = computed(() => {
+  return getColorForField(activeHoverField.value)
+})
+
 const uniforms = computed(() => {
   const index = active.value?.index
   return {
-    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),
+    u_color_field_0: toShaderColor(fieldColors.value[0]),
+    u_color_field_1: toShaderColor(fieldColors.value[1]),
+    u_color_field_2: toShaderColor(fieldColors.value[2]),
+    u_color_field_3: toShaderColor(fieldColors.value[3]),
+    u_color_hover_area: toShaderColor(activeHoverColor.value),
+    u_color_area: toShaderColor(theme.teal.value.normal),
     u_active_rect_id: index === undefined ? -1 : index,
+    u_active_hover_rect: activeHoverRect.value,
   }
 })
 
@@ -716,6 +833,45 @@ function toCanvasSpaceCoordinates(x: number, y: number): Coord {
   }
 }
 
+function setHoveredFieldArea(box: Rectangle, mouse: Coord) {
+  if (active.value?.field) {
+    if (activeHoverField.value?.key !== active.value.field.key) {
+      activeHoverField.value = active.value.field
+    }
+    return
+  }
+  const fields = Object.values(fieldCache)
+
+  let highestNestingLevel = 0
+  let candidate: FieldRect | null = null
+
+  for (let i = 0; i < fields.length; i++) {
+    const field = fields[i]
+    if (!field.canAddChildren) {
+      continue
+    }
+    if (
+      isInsideRect(mouse.x, mouse.y, field) &&
+      field.field.nestingLevel >= highestNestingLevel
+    ) {
+      candidate = field
+      highestNestingLevel = field.field.nestingLevel
+      continue
+    }
+    if (
+      intersects(box, field) &&
+      field.field.nestingLevel >= highestNestingLevel
+    ) {
+      highestNestingLevel = field.field.nestingLevel
+      candidate = field
+    }
+  }
+
+  if (candidate && candidate.key !== activeHoverField.value?.key) {
+    activeHoverField.value = candidate
+  }
+}
+
 onBlokkliEvent('canvas:draw', () => {
   const scale = ui.artboardScale.value
   const offset = { ...ui.artboardOffset.value }
@@ -734,10 +890,8 @@ onBlokkliEvent('canvas:draw', () => {
     animation.setSharedUniforms(gl, programInfo)
   }
 
-  const isInsideClipped = cursorIsInsideClipped()
-
   if (!props.isTouch) {
-    if (isInsideClipped) {
+    if (cursorIsInsideClipped()) {
       const closest = collector.getClosestIntersectingRect(
         dragBox.value,
         mouseAbsolute,
@@ -753,6 +907,7 @@ onBlokkliEvent('canvas:draw', () => {
 
   // WebGL rendering.
   if (programInfo && gl) {
+    setHoveredFieldArea(dragBox.value, mouseAbsolute)
     setUniforms(programInfo, uniforms.value)
 
     // Nothing to draw.

package/dist/runtime/components/Edit/Features/DraggingOverlay/DropTargets/vertex.glsl

@@ -10,18 +10,31 @@ uniform float u_offset_x;
 uniform float u_offset_y;
 uniform vec2 u_resolution;
 uniform float u_active_rect_id;
-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 vec3 u_color_field_0;
+uniform vec3 u_color_field_1;
+uniform vec3 u_color_field_2;
+uniform vec3 u_color_field_3;
+uniform vec3 u_color_area;
+uniform vec3 u_color_hover_area;
+uniform vec4 u_active_hover_rect;
 uniform float u_dpi;
 
 varying vec4 v_quad;
 varying float v_intersecting;
-varying vec3 v_color_default;
-varying vec3 v_color_active;
+varying float v_is_hover_area;
+varying vec3 v_color;
+
+vec4 getQuad() {
+  if (a_rect_type >= 5.0) {
+    // Return the quad coming in via uniform.
+    return u_active_hover_rect;
+  }
+  // Use the provided quad.
+  return a_quad;
+}
 
 void main() {
+  vec4 quad = getQuad();
   vec2 offsetPosition = a_position * u_scale;
   offsetPosition.x += u_offset_x;
   offsetPosition.y += u_offset_y;
@@ -38,20 +51,27 @@ void main() {
 
   // Transform the quad.
   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
+    (quad.x * u_scale + u_offset_x) * u_dpi,
+    (u_resolution.y - quad.y * u_scale - quad.w * u_scale - u_offset_y) * u_dpi,
+    quad.z * u_scale * u_dpi,
+    quad.w * u_scale * u_dpi
   );
   v_quad = transformed_quad;
 
+  v_is_hover_area = a_rect_type >= 5.0 ? 1.0 : 0.0;
+
   // Set correct colors based on type.
-  if (a_rect_type < 0.5) {
-    v_color_default = u_color_field_default;
-    v_color_active = u_color_field_active;
+  if (a_rect_type < 1.0) {
+    v_color = u_color_area;
+  } else if (a_rect_type < 2.0) {
+    v_color = u_color_field_0;
+  } else if (a_rect_type < 3.0) {
+    v_color = u_color_field_1;
+  } else if (a_rect_type < 4.0) {
+    v_color = u_color_field_2;
+  } else if (a_rect_type < 5.0) {
+    v_color = u_color_field_3;
   } else {
-    v_color_default = u_color_area_default;
-    v_color_active = u_color_area_active;
+    v_color = u_color_hover_area;
   }
 }

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

@@ -376,6 +376,10 @@ onBlokkliEvent('dragging:start', (e) => {
       document.addEventListener('pointermove', onMouseMove, { capture: true })
     }
   }
+
+  // Before showing the drop targets we update all currently visible rects to
+  // ensure the user sees the correct drop targets right away.
+  dom.updateVisibleRects()
   dragItems.value = e.items
 })
 

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

@@ -38,14 +38,6 @@ function onClick(items: DraggableExistingBlock[]) {
   )
 }
 
-const findField = (uuid: string): BlokkliFieldElement | undefined => {
-  try {
-    return dom.getBlockField(uuid)
-  } catch (_e) {
-    // Noop.
-  }
-}
-
 const canDuplicate = computed<boolean>(() => {
   if (state.editMode.value !== 'editing') {
     return false
@@ -57,11 +49,7 @@ const canDuplicate = computed<boolean>(() => {
   const selectedCount = selection.blocks.value.length
   for (let i = 0; i < selectedCount; i++) {
     const block = selection.blocks.value[i]
-    const field = findField(block.uuid)
-    if (!field) {
-      return false
-    }
-
+    const field = dom.getBlockField(block.uuid)
     const count = state.getFieldBlockCount(field.key)
 
     // Early return if the field is already full.

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

@@ -3,8 +3,8 @@
     id="mask"
     v-model="isActive"
     :label="$t('maskToggle', 'Toggle non-editable areas')"
-    :title-on="$t('maskShow', 'Show non-editable areas')"
-    :title-off="$t('maskHide', 'Hide non-editable areas')"
+    :title-on="$t('maskHide', 'Hide non-editable areas')"
+    :title-off="$t('maskShow', 'Show non-editable areas')"
     :tour-text="
       $t(
         'maskTourText',

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

@@ -12,7 +12,7 @@
     icon="history"
     weight="-100"
   >
-    <div class="bk bk-history bk-control" @wheel.capture.stop>
+    <div class="bk bk-history bk-control">
       <ul v-if="mapped.length">
         <li
           v-for="item in mapped"

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

@@ -15,7 +15,7 @@ const { $t, state } = useBlokkli()
 const props = defineProps<{
   label: string
   property: string
-  modelValue: string
+  modelValue?: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])
@@ -25,7 +25,7 @@ const checked = computed({
     return props.modelValue === '1'
   },
   set(v: any) {
-    emit('update:modelValue', v ? '1' : '')
+    emit('update:modelValue', v ? '1' : '0')
   },
 })
 

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

@@ -1,10 +1,10 @@
 <template>
   <div
     class="bk-blokkli-item-options-checkboxes"
-    :class="{ 'bk-is-active': isOpen }"
+    :class="{ 'bk-is-active': isOpen, 'bk-is-grouped': isGrouped }"
   >
-    <button @click="isOpen = !isOpen">
-      <span>{{ label }}</span>
+    <button v-if="!isGrouped" @click="isOpen = !isOpen">
+      <span>{{ visibleLabel }}</span>
       <div>
         <template v-if="checked.length < 4">
           <span v-for="item in checked" :key="item" class="bk-pill">{{
@@ -15,20 +15,20 @@
       </div>
       <Icon name="caret" />
     </button>
-    <div v-if="isOpen">
+    <div v-if="isOpen || isGrouped">
       <label
-        v-for="option in mappedOptions"
-        :key="option.key"
+        v-for="option in options"
+        :key="option.value"
         class="bk-blokkli-item-options-checkbox"
       >
         <input
           v-model="checked"
           type="checkbox"
           class="peer"
-          :value="option.key"
+          :value="option.value"
         />
         <div />
-        <span>{{ option.value }}</span>
+        <span>{{ option.label }}</span>
       </label>
     </div>
   </div>
@@ -38,21 +38,23 @@
 import { computed, ref, useBlokkli } from '#imports'
 import { Icon } from '#blokkli/components'
 import defineCommands from '#blokkli/helpers/composables/defineCommands'
+import { BK_VISIBLE_LANGUAGES } from '#blokkli/helpers/symbols'
 
 const { $t, state } = useBlokkli()
 
 const props = defineProps<{
   label: string
   property: string
-  modelValue: string
-  options: Record<string, string>
+  modelValue?: string
+  options: { value: string; label: string }[]
+  isGrouped?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
 
 const isOpen = ref(false)
 
-const optionOrder = computed(() => Object.keys(props.options))
+const optionOrder = computed(() => props.options.map((v) => v.value))
 
 const checked = computed<string[]>({
   get() {
@@ -72,6 +74,13 @@ const checked = computed<string[]>({
   },
 })
 
+const visibleLabel = computed(() => {
+  if (props.property === BK_VISIBLE_LANGUAGES && !checked.value.length) {
+    return $t('optionBkVisibleLanguagesAll', 'All languages')
+  }
+  return props.label
+})
+
 const toggle = (key: string) => {
   if (!checked.value.includes(key)) {
     checked.value = [...checked.value, key]
@@ -80,43 +89,37 @@ const toggle = (key: string) => {
   }
 }
 
-const mappedOptions = computed(() => {
-  return Object.entries(props.options).map(([key, value]) => {
-    return { key, value }
-  })
-})
-
 defineCommands(() => {
   if (state.editMode.value !== 'editing') {
     return
   }
-  return optionOrder.value.map((key) => {
-    if (checked.value.includes(key)) {
+  return props.options.map((option) => {
+    if (checked.value.includes(option.value)) {
       return {
-        id: 'options:' + props.property + ':select:' + key,
+        id: 'options:' + props.property + ':select:' + option.value,
         label: $t(
           'optionsCommand.unselectCheckboxValue',
           'Unselect "@value" in "@option"',
         )
           .replace('@option', props.label)
-          .replace('@value', props.options[key]),
+          .replace('@value', option.label),
         group: 'selection',
         icon: 'form',
-        callback: () => toggle(key),
+        callback: () => toggle(option.value),
       }
     }
 
     return {
-      id: 'options:' + props.property + ':unselect:' + key,
+      id: 'options:' + props.property + ':unselect:' + option.value,
       label: $t(
         'optionsCommand.selectCheckboxValue',
         'Select "@value" in "@option"',
       )
         .replace('@option', props.label)
-        .replace('@value', props.options[key]),
+        .replace('@value', option.label),
       group: 'selection',
       icon: 'form',
-      callback: () => toggle(key),
+      callback: () => toggle(option.value),
     }
   })
 })

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

@@ -16,7 +16,7 @@ import { computed } from '#imports'
 
 const props = defineProps<{
   label: string
-  modelValue: string
+  modelValue?: string
 }>()
 
 const emit = defineEmits(['update:modelValue'])