@blokkli/editor 1.1.3 → 1.3.0

package/dist/runtime/components/Edit/Features/MediaLibrary/Library/index.vue

@@ -50,30 +50,24 @@
       class="bk-media-library-items bk-scrollbar-light"
       :class="[{ 'bk-is-sortli': isSortli }, 'bk-is-' + listView]"
     >
-      <Component :is="isSortli ? Sortli : 'div'" no-transition>
-        <div
+      <Sortli v-if="isSortli" no-transition :get-drag-items="getDragItems">
+        <Item
           v-for="item in items"
           :key="item.mediaId"
-          class="bk-media-library-items-item"
-          :class="{ 'bk-is-selected': modelValue === item.mediaId }"
-          :data-sortli-id="'media_library_' + item.mediaId"
-          data-element-type="media_library"
-          :data-item-bundle="item.targetBundles[0]"
-          :data-media-id="item.mediaId"
-          :data-media-bundle="item.mediaBundle"
-          @click="onClick(item.mediaId)"
-        >
-          <div>
-            <div class="bk-media-library-items-item-image">
-              <img :src="item.thumbnail" />
-            </div>
-          </div>
-          <div class="bk-media-library-items-item-text">
-            <h3>{{ item.label }}</h3>
-            <p>{{ item.context }}</p>
-          </div>
-        </div>
-      </Component>
+          v-bind="item"
+          v-model="selected"
+        />
+      </Sortli>
+
+      <div v-else>
+        <Item v-for="item in items" :key="item.mediaId" v-bind="item" />
+      </div>
+    </div>
+
+    <div v-if="selected.length" class="bk-media-library-cancel">
+      <button class="bk-button bk-is-primary" @click.prevent="selected = []">
+        {{ $t('cancelSelection', 'Cancel selection') }}
+      </button>
     </div>
 
     <div class="bk-pagination">
@@ -100,20 +94,60 @@ import {
 import { Sortli, Icon } from '#blokkli/components'
 import type { MediaLibraryFilter, MediaLibraryGetResults } from './../types'
 import type { BlokkliIcon } from '#blokkli/icons'
+import Item from './Item.vue'
+import type { DraggableItem, DraggableMediaLibraryItem } from '#blokkli/types'
+import { buildDraggableItem, falsy } from '#blokkli/helpers'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 
-const props = defineProps<{
+defineProps<{
   isSortli?: boolean
   modelValue?: string
 }>()
 
-const emit = defineEmits(['update:modelValue'])
+const { adapter, storage, $t } = useBlokkli()
+
+const selected = ref<string[]>([])
+const listEl = ref<HTMLDivElement | null>(null)
+const page = ref(0)
+const key = computed(() => Object.values(filterValues.value).join(','))
+
+function getDragItems(activeItem?: DraggableItem): DraggableItem[] | null {
+  if (!selected.value.length || !listEl.value) {
+    return null
+  }
+
+  const activeId =
+    activeItem?.itemType === 'media_library' ? activeItem.mediaId : null
+
+  const items: DraggableMediaLibraryItem[] = selected.value
+    .map((id) => {
+      const el = listEl.value?.querySelector(
+        `[data-sortli-id="media_library_${id}"]`,
+      )
+      if (!(el instanceof HTMLElement)) {
+        return null
+      }
+
+      const item = buildDraggableItem(el)
+      if (item?.itemType === 'media_library') {
+        return item
+      }
+
+      return null
+    })
+    .filter(falsy)
+
+  if (!activeId) {
+    return items
+  }
+
+  const activeIsInSelection = items.find((v) => v.mediaId === activeId)
 
-const onClick = (id: string) => {
-  if (props.isSortli) {
-    return
+  if (activeIsInSelection) {
+    return items
   }
 
-  emit('update:modelValue', id)
+  return null
 }
 
 type RenderedFilter = {
@@ -121,8 +155,6 @@ type RenderedFilter = {
   filter: MediaLibraryFilter
 }
 
-const { adapter, storage } = useBlokkli()
-
 const listView = storage.use<'horizontal' | 'grid'>(
   'mediaLibraryListView',
   'grid',
@@ -142,10 +174,6 @@ const toggleListView = () => {
 
 const filterValues = ref<Record<string, any>>({})
 
-const listEl = ref<HTMLDivElement | null>(null)
-const page = ref(0)
-const key = computed(() => Object.values(filterValues.value).join(','))
-
 watch(key, () => {
   page.value = 0
 })
@@ -182,4 +210,8 @@ const perPage = computed(() => data.value?.perPage || 0)
 const totalPages = computed(() => {
   return Math.ceil(total.value / perPage.value)
 })
+
+onBlokkliEvent('item:dropped', function () {
+  selected.value = []
+})
 </script>

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

@@ -29,7 +29,10 @@ const gl = animation.gl()
 
 const enabled = computed(
   () =>
-    !selection.editableActive.value && state.editMode.value === 'editing' && gl,
+    !selection.editableActive.value &&
+    (state.editMode.value === 'editing' ||
+      state.editMode.value === 'translating') &&
+    gl,
 )
 
 const shouldRender = ref(false)

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

@@ -3,7 +3,8 @@
     v-if="availableOptions.length"
     class="bk-blokkli-item-options"
     @pointerup="onPointerUp"
-    @mouseleave="stopChangingOptions"
+    @mouseleave="onMouseLeave"
+    @mouseenter="onMouseEnter"
   >
     <OptionsFormItem
       v-for="plugin in singleVisibleOptions"
@@ -102,6 +103,18 @@ const props = defineProps<{
 }>()
 
 let pointerTimeout: null | number = null
+let mouseLeaveTimeout: null | number = null
+
+function onMouseLeave() {
+  onMouseEnter()
+  mouseLeaveTimeout = window.setTimeout(stopChangingOptions, 500)
+}
+
+function onMouseEnter() {
+  if (mouseLeaveTimeout) {
+    window.clearTimeout(mouseLeaveTimeout)
+  }
+}
 
 function onPointerUp(e: PointerEvent) {
   if (pointerTimeout) {

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

@@ -4,6 +4,7 @@
     :title="$t('previewNewWindow', 'Preview (new window)')"
     region="after-menu"
     icon="open_in_new"
+    :disabled="!state.canEdit.value"
     :tour-text="
       $t(
         'previewNewWindowTourText',
@@ -25,7 +26,7 @@ defineBlokkliFeature({
   description: 'Provides a button to open a preview in a new window.',
 })
 
-const { $t } = useBlokkli()
+const { $t, state } = useBlokkli()
 
 const route = useRoute()
 

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

@@ -3,6 +3,7 @@
     v-if="!ui.isMobile.value"
     id="preview_with_smartphone"
     :title="$t('previewWithSmartphone', 'Preview (with smartphone)')"
+    :disabled="!state.canEdit.value"
     :tour-text="
       $t(
         'previewWithSmartphoneTourText',
@@ -54,7 +55,7 @@ const { adapter } = defineBlokkliFeature({
   viewports: ['desktop'],
 })
 
-const { $t, ui } = useBlokkli()
+const { $t, ui, state } = useBlokkli()
 
 const qrCodeVisible = ref(false)
 const previewGrantUrl = ref<string | undefined | null>('')

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

@@ -27,6 +27,8 @@ const { adapter, settings } = defineBlokkliFeature({
     closeAfterPublish: {
       type: 'checkbox',
       label: 'Close editor after publishing',
+      description:
+        'Immediately closes the editor after successfully publishing or saving.',
       default: true,
       group: 'behavior',
     },

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

@@ -4,6 +4,7 @@
     v-slot="{ width, height, isDetached }"
     :title="$t('responsivePreviewTitle', 'Responsive Preview')"
     :tour-text="tourText"
+    :disabled="!state.canEdit.value"
     :min-width="375"
     :min-height="375"
     :size="size"
@@ -83,7 +84,7 @@ defineBlokkliFeature({
     'Provides a responsive preview of the current edit state in an iframe.',
 })
 
-const { $t, storage } = useBlokkli()
+const { $t, storage, state } = useBlokkli()
 
 const selectedViewportId = storage.use('mobile-preview:viewport', 'iphone-se')
 const isRotated = storage.use('mobile-preview:rotated', false)

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

@@ -1,17 +1,22 @@
 precision mediump float;
-
 varying vec4 v_quad;
 varying vec3 v_color;
 varying vec4 v_rect_radius;
 varying float v_thickness;
+varying float v_rect_id;
 varying vec2 v_rect_size;
 varying vec2 v_rect_center;
-varying float v_transition;
+varying float v_rect_width;
 
+varying float v_transition;
 uniform float u_scale;
 uniform float u_dpi;
+uniform float u_time;
+uniform float u_is_transforming;
 uniform vec2 u_resolution;
 
+#define PI (3.141592653589793)
+
 int pseudoQuadrant(vec2 p) {
   return int(floor(step(0.0, p.x) + 2.0 * step(0.0, -p.y)));
 }
@@ -19,79 +24,108 @@ int pseudoQuadrant(vec2 p) {
 float sdRoundBox(vec2 p, vec2 b, vec4 radii) {
   int idx = pseudoQuadrant(p);
   float cr;
-
-  // Use correct radius. Bottom left and bottom right are flipped.
   if (idx == 0) cr = radii[0];
   else if (idx == 1) cr = radii[1];
   else if (idx == 2) cr = radii[3];
   else cr = radii[2];
-
   vec2 q = abs(p) - b + cr;
   return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - cr;
 }
 
-vec4 drawBox(float thickness, vec4 bg, vec4 fill, vec4 border) {
-  float progress = gl_FragCoord.y / u_resolution.y;
-  float u_borderThickness = max(thickness, 2.0); // The border size (in pixels)
-  // vec2 size = v_rect_size + u_borderThickness * 2.0;
-  vec2 size = v_rect_size + u_borderThickness * 2.0 * v_transition;
+float bounceOut(float t) {
+  const float a = 4.0 / 11.0;
+  const float b = 8.0 / 11.0;
+  const float c = 9.0 / 10.0;
 
-  float u_edgeSoftness = 1.0 + v_transition;
-  vec4 radius = v_rect_radius * u_scale + vec4(u_borderThickness);
-  vec4 u_cornerRadii = min(radius, min(size.x, size.y) / 2.0) * v_transition;
+  const float ca = 4356.0 / 361.0;
+  const float cb = 35442.0 / 1805.0;
+  const float cc = 16061.0 / 1805.0;
 
-  // Border
-  float u_borderSoftness = 1.0 + v_transition; // How soft the border should be (in pixels)
+  float t2 = t * t;
 
-  // =========================================================================
+  return t < a
+    ? 7.5625 * t2
+    : t < b
+      ? 9.075 * t2 - 9.9 * t + 3.4
+      : t < c
+        ? ca * t2 - cb * t + cc
+        : 10.8 * t * t - 20.52 * t + 10.72;
+}
 
-  vec4 r = u_cornerRadii; // Animated corner radii
+float exponentialIn(float t) {
+  return t == 0.0
+    ? t
+    : pow(2.0, 10.0 * (t - 1.0));
+}
 
-  // -------------------------------------------------------------------------
+float getStripePattern(vec2 quadRelativePos, float time) {
+  float d = 300.0 * u_scale;
 
-  // Fill SDF
-  float distance =
-    sdRoundBox(gl_FragCoord.xy - v_rect_center, size / 2.0, r) +
-    u_borderThickness;
+  float t = mod(u_time + v_rect_id * 1000.0, 1200.0) / 1200.0;
 
-  // AA
-  float smoothedAlpha = 1.0 - smoothstep(0.0, u_edgeSoftness, distance);
+  float movement = t * 2.0 * PI;
 
-  // -------------------------------------------------------------------------
-  // Border: expanded from fill SDF, with AA
-  float borderAlpha =
-    1.0 -
-    smoothstep(
-      u_borderThickness - u_borderSoftness,
-      u_borderThickness,
-      abs(distance - u_borderThickness)
-    );
+  float normalizedSin =
+    (sin((quadRelativePos.y + quadRelativePos.x) / d + movement + v_rect_id) +
+      1.0) /
+    2.0;
 
-  // -------------------------------------------------------------------------
-  // Apply colors layer-by-layer: background <- rect <- border.
+  return normalizedSin * 0.2 + 0.5;
+}
+
+vec4 drawBox(float thickness, vec4 bg, vec4 fill, vec4 border, float offset) {
+  float borderThickness = max(thickness, 2.0);
+
+  float t = exponentialIn(
+    (sin(u_time / 270.0 - v_rect_id + offset) + 1.0) / 2.0
+  );
+
+  if (u_is_transforming >= 0.5) {
+    borderThickness = (t * 0.7 + 0.5) * borderThickness;
+  }
+  vec2 size = v_rect_size + borderThickness * 2.0 * v_transition;
+  float u_edgeSoftness = 1.0 + v_transition;
+  vec4 radius = v_rect_radius * u_scale + vec4(borderThickness);
+  vec4 u_cornerRadii = min(radius, min(size.x, size.y) / 2.0) * v_transition;
+  float u_borderSoftness = 1.0 + v_transition;
+
+  vec4 r = u_cornerRadii;
+
+  vec2 posRelativeToQuad = gl_FragCoord.xy - v_rect_center;
+
+  float mainDist = sdRoundBox(posRelativeToQuad, size / 2.0, r);
+  float innerDist = mainDist;
+
+  float fillAlpha = 1.0 - smoothstep(-u_edgeSoftness, 0.0, innerDist);
+  float borderAlpha =
+    1.0 - smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - borderThickness);
 
-  // Blend background with fill
-  vec4 res_shadow_with_rect_color = mix(bg, fill, min(fill.a, smoothedAlpha));
+  vec4 stripedFill = vec4(1.0, 1.0, 1.0, 0.0);
+  if (u_is_transforming >= 0.5) {
+    stripedFill = fill;
+    stripedFill.a = getStripePattern(posRelativeToQuad, u_time);
+    borderAlpha *= t + 0.6;
+  }
 
-  // Blend (background+fill) with border
-  return mix(res_shadow_with_rect_color, border, min(border.a, borderAlpha));
+  vec4 res_with_fill = mix(bg, stripedFill, fillAlpha * stripedFill.a);
+  return mix(res_with_fill, border, borderAlpha * border.a);
 }
 
 void main() {
-  // Red border that should be below the blue border.
   vec4 borderBottom = drawBox(
     v_transition * (v_thickness * 2.0),
     vec4(v_color, 0.0),
-    vec4(v_color, 0.5 - 0.5 * v_transition),
-    vec4(v_color, 0.4)
+    vec4(v_color, 0.5),
+    vec4(v_color, 0.4),
+    0.0
   );
 
-  // Blue border that should be on top of the red border.
   vec4 borderTop = drawBox(
     v_thickness,
     vec4(v_color, 0.0),
     vec4(v_color, 0.0),
-    vec4(v_color, 1.0)
+    vec4(v_color, 1.0),
+    -0.2
   );
 
   vec4 finalColor = mix(borderBottom, borderTop, borderTop.a);

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

@@ -22,7 +22,7 @@ const props = defineProps<{
   gl: WebGLRenderingContext
 }>()
 
-const { animation, theme, dom } = useBlokkli()
+const { animation, theme, dom, ui } = useBlokkli()
 
 const programInfo = animation.registerProgram('selection', props.gl, [vs, fs])
 
@@ -99,15 +99,15 @@ class SelectionRectangleBufferCollector extends RectangleBufferCollector<Selecti
 
 const collector = new SelectionRectangleBufferCollector(props.gl)
 
-const uniforms = {
-  u_color_default: toShaderColor(theme.accent.value[600]),
-  u_color_inverted: [255, 255, 255],
-}
-
-onBlokkliEvent('canvas:draw', () => {
+onBlokkliEvent('canvas:draw', (e) => {
   props.gl.useProgram(programInfo.program)
 
-  setUniforms(programInfo, uniforms)
+  setUniforms(programInfo, {
+    u_color_default: toShaderColor(theme.accent.value[600]),
+    u_color_inverted: [255, 255, 255],
+    u_is_transforming: ui.isTransforming.value ? 1 : 0,
+    u_time: e.time,
+  })
   animation.setSharedUniforms(props.gl, programInfo)
   const { info, hasChanged } = collector.getBufferInfo()
 

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

@@ -27,11 +27,13 @@ varying float v_thickness;
 varying vec2 v_rect_size;
 varying vec2 v_rect_center;
 varying float v_transition;
+varying float v_rect_id;
+varying float v_rect_width;
 
 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);
+  float increaseSize = max(thickness, 25.0);
 
   // Calculate the new dimensions of the quad
   vec4 adjusted_quad = a_quad;
@@ -75,10 +77,13 @@ void main() {
   );
   v_quad = transformed_quad;
 
+  v_rect_width = adjusted_quad.x;
+
   // 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_id = a_rect_id;
   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/Settings/Dialog/FeatureSetting/index.vue

@@ -7,8 +7,13 @@
         class="peer"
         @change="toggleCheckbox"
       />
-      <div />
-      <span>{{ settingLabel }}</span>
+      <div class="bk-checkbox-toggle-toggle" />
+      <div class="bk-checkbox-toggle-label">
+        <div>{{ settingLabel }}</div>
+        <div v-if="settingDescription">
+          {{ settingDescription }}
+        </div>
+      </div>
     </label>
     <div v-else-if="setting.type === 'radios'">
       <h3 class="bk-form-label">
@@ -80,6 +85,22 @@ const settingLabel = computed(() => {
   )
 })
 
+const settingDescription = computed(() => {
+  const translated = textTranslation(
+    'feature_' +
+      props.featureId +
+      '_setting_' +
+      props.settingsKey +
+      '_description',
+  )
+
+  if (!translated && 'description' in props.setting) {
+    return props.setting.description
+  }
+
+  return translated
+})
+
 const getOptionLabel = (key: string, defaultLabel: string) => {
   return (
     textTranslation(

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

@@ -1,7 +1,7 @@
 <template>
   <DialogModal
     :title="$t('settingsDialogTitle', 'Change settings')"
-    :width="700"
+    :width="900"
     hide-buttons
     icon="cog"
     @cancel="$emit('cancel')"
@@ -10,14 +10,17 @@
       <div v-for="group in groups" :key="group.key" class="bk-form-section">
         <h3 class="bk-settings-group-title">
           <span>{{ group.label }}</span>
+          <span v-if="group.id === 'beta'" class="bk-beta-indicator">BETA</span>
         </h3>
-        <FeatureSetting
-          v-for="setting in group.settings"
-          :key="group.key + setting.settingsKey"
-          :feature-id="setting.featureId"
-          :settings-key="setting.settingsKey"
-          :setting="setting.setting"
-        />
+        <div>
+          <FeatureSetting
+            v-for="setting in group.settings"
+            :key="group.key + setting.settingsKey"
+            :feature-id="setting.featureId"
+            :settings-key="setting.settingsKey"
+            :setting="setting.setting"
+          />
+        </div>
       </div>
     </div>
   </DialogModal>
@@ -35,6 +38,8 @@ import { settingsOverride } from '#blokkli/config'
 
 const { $t, features, ui } = useBlokkli()
 
+const getTranslation = $t
+
 type FeatureSetting = {
   featureId: ValidFeatureKey
   settingsKey: string
@@ -58,6 +63,8 @@ const getGroupLabel = (key: SettingsGroup): string => {
     return $t('settingsAdvanced', 'Advanced')
   } else if (key === 'artboard') {
     return $t('settingsArtboard', 'Artboard')
+  } else if (key === 'beta') {
+    return $t('settingsBeta', 'New Features')
   }
   return key
 }
@@ -90,37 +97,63 @@ const shouldRenderSetting = (
 const settingTypeOrder = ['checkbox', 'slider', 'method']
 
 const groups = computed<GroupedSettings[]>(() => {
-  return Object.values(
-    features.features.value.reduce<Record<string, GroupedSettings>>(
-      (acc, feature) => {
-        Object.entries(feature.settings || {}).forEach(
-          ([settingsKey, setting]) => {
-            const key: any = `feature:${feature.id}:${settingsKey}`
-            if (shouldRenderSetting(key, setting)) {
-              const group = setting.group || 'advanced'
-              if (!acc[group]) {
-                acc[group] = {
-                  id: group as any,
-                  key: group,
-                  label: getGroupLabel(group),
-                  icon: getGroupIcon(group),
-                  settings: [],
-                }
-              }
+  const settingGroups = features.features.value.reduce<
+    Partial<Record<SettingsGroup, GroupedSettings>>
+  >((acc, feature) => {
+    Object.entries(feature.settings || {}).forEach(([settingsKey, setting]) => {
+      const key: any = `feature:${feature.id}:${settingsKey}`
+      if (shouldRenderSetting(key, setting)) {
+        const group = setting.group || 'advanced'
+        if (!acc[group]) {
+          acc[group] = {
+            id: group as any,
+            key: group,
+            label: getGroupLabel(group),
+            icon: getGroupIcon(group),
+            settings: [],
+          }
+        }
 
-              acc[group].settings.push({
-                featureId: feature.id,
-                settingsKey,
-                setting,
-              })
-            }
-          },
-        )
-        return acc
-      },
-      {},
-    ),
-  )
+        acc[group].settings.push({
+          featureId: feature.id,
+          settingsKey,
+          setting,
+        })
+      }
+    })
+    return acc
+  }, {})
+
+  if (features.betaFeatures.value.length) {
+    if (!settingGroups.beta) {
+      settingGroups.beta = {
+        id: 'beta',
+        key: 'betaFeatures',
+        label: getGroupLabel('beta'),
+        icon: 'bug',
+        settings: [],
+      }
+    }
+
+    features.betaFeatures.value.forEach((v) => {
+      const label = getTranslation(`feature_${v.id}_label`) || v.label
+      const description =
+        getTranslation(`feature_${v.id}_description`) || v.description
+      settingGroups.beta!.settings.push({
+        featureId: 'settings',
+        settingsKey: 'beta:' + v.id,
+        setting: {
+          type: 'checkbox',
+          default: false,
+          label,
+          description,
+          group: 'beta',
+        },
+      })
+    })
+  }
+
+  return Object.values(settingGroups)
     .map((group) => {
       group.settings
         .sort((a, b) => b.settingsKey.localeCompare(a.settingsKey))