@blokkli/editor 1.2.0 → 1.3.0

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))

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

@@ -43,12 +43,16 @@ const { settings } = defineBlokkliFeature({
       type: 'checkbox',
       default: true,
       label: 'Use animations',
+      description:
+        'Animates UI elements like dialogs or drawers or interactions like drag and drop or scroll changes.',
       group: 'advanced',
     },
     lowPerformanceMode: {
       type: 'checkbox',
       default: false,
       label: 'Enable low performance mode',
+      description:
+        'Reduces the animations and interactivity to a minimum for devices with low performance.',
       group: 'advanced',
     },
     resetAllSettings: {

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

@@ -44,7 +44,7 @@ const { adapter } = defineBlokkliFeature({
   screenshot: 'feature-transform.jpg',
 })
 
-const { types, selection, state, $t, dom } = useBlokkli()
+const { types, selection, state, $t, dom, ui } = useBlokkli()
 
 const {
   data: plugins,
@@ -64,6 +64,8 @@ watch(selection.uuids, async () => {
 })
 
 async function onTransform(plugin: TransformPlugin, uuids: string[]) {
+  ui.setTransform(plugin.label)
+
   await state.mutateWithLoadingState(
     () =>
       adapter.applyTransformPlugin({
@@ -75,6 +77,8 @@ async function onTransform(plugin: TransformPlugin, uuids: string[]) {
       'The action "@name" could not be executed.',
     ).replace('@name', plugin.label),
   )
+
+  ui.setTransform()
 }
 
 const itemBundleIds = computed(() =>

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

@@ -50,7 +50,7 @@
     </PluginTourItem>
   </Teleport>
 
-  <Teleport to="body">
+  <Teleport to="#bk-banner-container">
     <Banner
       v-if="state.editMode.value === 'translating'"
       :active-language="activeLanguage"
@@ -116,7 +116,20 @@ const { translation, editMode } = state
 
 const isOpen = ref(false)
 
-const isDropdown = computed(() => ui.isMobile.value || items.value.length > 5)
+const isDropdown = computed(() => {
+  // Always a dropdown on mobile.
+  if (ui.isMobile.value) {
+    return true
+  }
+
+  // It is a dropdown if all langcodes combined is greater than 15.
+  // That way up to 7 languages with 2-char langcodes are displayed as radio buttons.
+  // This handles cases where langcodes are e.g. 'en-US', 'en-GB', 'de-CH', etc.
+  // In this case it switches to a dropdown. This is better than relying on the number
+  // languages.
+  const allCodes = items.value.map((v) => v.code).join('')
+  return allCodes.length > 15
+})
 const activeLangcode = computed(() => context.value.language)
 const activeLanguage = computed<Language>(() => {
   return (
@@ -212,6 +225,15 @@ onBlokkliEvent('item:doubleClick', function (block) {
   }
 })
 
+onBlokkliEvent('entity:translated', (langcode) => {
+  const targetTranslation = translation.value.translations?.find(
+    (v) => v.id === langcode,
+  )
+  if (targetTranslation) {
+    adapter.changeLanguage(targetTranslation)
+  }
+})
+
 onMounted(() => {
   // Make sure the user is not trying to edit a translation that does not exist.
   const translationExists = !!translation.value.translations?.find(

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

@@ -48,6 +48,10 @@ const availableFeatures = computed(() => {
       return false
     }
 
+    if (v.beta && !features.enabledBetaFeatures.value.includes(v.id)) {
+      return false
+    }
+
     return !v.viewports.length || v.viewports.includes(ui.appViewport.value)
   })
 })

package/dist/runtime/components/Edit/InfoBox/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="bk-info-box">
+    <Icon name="info" />
+    <p v-html="text" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '#blokkli/components'
+
+defineProps<{
+  text: string
+}>()
+</script>

package/dist/runtime/components/Edit/Messages/index.vue

@@ -1,16 +1,14 @@
 <template>
-  <Teleport to="body">
-    <div class="bk bk-messages">
-      <TransitionGroup name="bk-message">
-        <Item
-          v-for="(message, index) in messages"
-          v-bind="message"
-          :key="index"
-          @close="removeMessage(index)"
-        />
-      </TransitionGroup>
-    </div>
-  </Teleport>
+  <div class="bk bk-messages">
+    <TransitionGroup name="bk-message">
+      <Item
+        v-for="(message, index) in messages"
+        v-bind="message"
+        :key="index"
+        @close="removeMessage(index)"
+      />
+    </TransitionGroup>
+  </div>
 </template>
 
 <script lang="ts" setup>

package/dist/runtime/components/Edit/PreviewProvider.vue

@@ -62,7 +62,7 @@ const mutatedEntity = computed(
   () => mutatedEntityFromState.value || props.entity,
 )
 
-const { data, refresh } = await useAsyncData(() =>
+const { data, refresh, error } = await useAsyncData(() =>
   adapter.loadState().then((v) => adapter.mapState(v)),
 )
 
@@ -94,8 +94,10 @@ const updateState = () => {
 
 updateState()
 
+const isPreview = computed(() => !error.value)
+
 provide(INJECT_MUTATED_FIELDS_MAP, mutatedFieldsMap)
-provide(INJECT_IS_PREVIEW, true)
+provide(INJECT_IS_PREVIEW, isPreview)
 provide<ItemEditContext>(INJECT_EDIT_CONTEXT, {
   mutatedOptions,
   eventBus,
@@ -127,6 +129,11 @@ const onMouseDown = () => {
  * update.
  */
 function checkChangedDate() {
+  // State loading has failed, so we can return here; no need to poll.
+  if (!isPreview.value) {
+    return
+  }
+
   clearTimeout(timeout)
 
   const delay = adapter.getLastChanged ? 1000 : 5000

package/dist/runtime/components/Edit/index.d.ts

@@ -12,4 +12,5 @@ import Loading from './Loading/index.vue.js';
 import Highlight from './Highlight/index.vue.js';
 import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
 import ScrollBoundary from './ScrollBoundary/index.vue.js';
-export { ItemIcon, ShortcutIndicator, RelativeTime, Icon, Resizable, DialogModal, ScaleToFit, Sortli, FormOverlay, AddListItem, Loading, Highlight, ViewportBlockingRect, ScrollBoundary, };
+import InfoBox from './InfoBox/index.vue.js';
+export { ItemIcon, ShortcutIndicator, RelativeTime, Icon, Resizable, DialogModal, ScaleToFit, Sortli, FormOverlay, AddListItem, Loading, Highlight, ViewportBlockingRect, ScrollBoundary, InfoBox, };

package/dist/runtime/components/Edit/index.js

@@ -12,6 +12,7 @@ import Loading from "./Loading/index.vue";
 import Highlight from "./Highlight/index.vue";
 import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
 import ScrollBoundary from "./ScrollBoundary/index.vue";
+import InfoBox from "./InfoBox/index.vue";
 export {
   ItemIcon,
   ShortcutIndicator,
@@ -26,5 +27,6 @@ export {
   Loading,
   Highlight,
   ViewportBlockingRect,
-  ScrollBoundary
+  ScrollBoundary,
+  InfoBox
 };

package/dist/runtime/constants/index.d.ts

@@ -1,4 +1,4 @@
-export declare const SETTINGS_GROUP: readonly ["appearance", "artboard", "behavior", "advanced"];
+export declare const SETTINGS_GROUP: readonly ["appearance", "artboard", "behavior", "beta", "advanced"];
 export declare const VIEWPORT: readonly ["mobile", "desktop"];
 export type SettingsGroup = (typeof SETTINGS_GROUP)[number];
 export type Viewport = (typeof VIEWPORT)[number];

package/dist/runtime/constants/index.js

@@ -2,6 +2,7 @@ export const SETTINGS_GROUP = [
   "appearance",
   "artboard",
   "behavior",
+  "beta",
   "advanced"
 ];
 export const VIEWPORT = ["mobile", "desktop"];