@blokkli/editor 2.0.0-alpha.32 → 2.0.0-alpha.33

package/dist/runtime/editor/features/dragging-overlay/Renderer/index.vue

@@ -1,14 +1,15 @@
 <template>
   <Teleport :to="ui.mainLayoutElement.value">
-    <slot :color="activeColorHex" :label="active?.label" />
+    <slot
+      :background-color="activeBackgroundColorHex"
+      :color="activeColor"
+      :label="active?.label"
+    />
   </Teleport>
 </template>
 
 <script setup>
-import {
-  falsy,
-  onlyUnique
-} from "#blokkli/helpers";
+import { falsy, onlyUnique } from "#blokkli/helpers";
 import {
   findClosestRectangle,
   intersects,
@@ -30,7 +31,11 @@ import {
   getGapSize,
   MIN_GAP
 } from "#blokkli/editor/helpers/dropTargets";
-import { fragmentBlockBundle, fromLibraryBlockBundle, itemEntityType } from "#blokkli-build/config";
+import {
+  fragmentBlockBundle,
+  fromLibraryBlockBundle,
+  itemEntityType
+} from "#blokkli-build/config";
 import { defineRenderer, onBlokkliEvent } from "#blokkli/editor/composables";
 const props = defineProps({
   items: { type: Array, required: true },
@@ -39,6 +44,25 @@ const props = defineProps({
   mouseY: { type: Number, required: true },
   isTouch: { type: Boolean, required: true }
 });
+const {
+  dom,
+  ui,
+  theme,
+  dropAreas,
+  eventBus,
+  animation,
+  state,
+  types,
+  fields,
+  definitions,
+  context
+} = useBlokkli();
+const FIELD_MIN_DRAW_SIZE = 6;
+const alphaBase = 0.7;
+const colorTeal = rgbaToString(theme.teal.value.normal);
+const colorTealAlpha = rgbaToString(theme.teal.value.normal, alphaBase);
+const colorAccent = rgbaToString(theme.accent.value[800]);
+const colorAccentAlpha = rgbaToString(theme.accent.value[800], alphaBase);
 var RectRenderType = /* @__PURE__ */ ((RectRenderType2) => {
   RectRenderType2[RectRenderType2["DROP_AREA"] = 0] = "DROP_AREA";
   RectRenderType2[RectRenderType2["FIELD_1"] = 1] = "FIELD_1";
@@ -54,19 +78,6 @@ const cursorIsInsideClipped = () => isInsideRect(props.mouseX, props.mouseY, ui.
 );
 const active = ref(null);
 defineEmits(["drop"]);
-const {
-  dom,
-  ui,
-  theme,
-  dropAreas,
-  eventBus,
-  animation,
-  state,
-  types,
-  fields,
-  definitions,
-  context
-} = useBlokkli();
 const areas = dropAreas.getDropAreas(props.items).reduce((acc, v) => {
   acc[v.id] = v;
   return acc;
@@ -469,11 +480,6 @@ const buildDropAreaRect = (area) => {
   cachedDropAreaRects[area.id] = dropAreaRect;
   return dropAreaRect;
 };
-const alphaBase = 0.7;
-const colorTeal = rgbaToString(theme.teal.value.normal);
-const colorTealAlpha = rgbaToString(theme.teal.value.normal, alphaBase);
-const colorAccent = rgbaToString(theme.accent.value[800]);
-const colorAccentAlpha = rgbaToString(theme.accent.value[800], alphaBase);
 function getRectType(field) {
   if (field.nestingLevel >= 3) {
     return 4 /* FIELD_4 */;
@@ -513,7 +519,9 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
             y: fieldRect.y + child.y,
             width: child.width,
             height: child.height,
-            field: fieldRect
+            field: fieldRect,
+            nestingLevel: fieldRect.field.nestingLevel,
+            state: child.id.includes(":empty:") ? 2 : fieldRect.orientation === "vertical" ? 1 : 0
           },
           type,
           true
@@ -540,7 +548,8 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
           x: areaRect.x,
           y: areaRect.y,
           width: areaRect.width,
-          height: areaRect.height
+          height: areaRect.height,
+          state: 0
         },
         0 /* DROP_AREA */,
         false
@@ -586,26 +595,52 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
     return null;
   }
 }
-const fieldColors = computed(() => {
+const fieldRenderPalette = computed(() => {
+  const accent = theme.accent.value;
+  const mono = theme.mono.value;
   return {
-    "0": theme.accent.value[950],
-    "1": theme.accent.value[500],
-    "2": theme.accent.value[600],
-    "3": theme.accent.value[500]
+    "0": {
+      gradStart: accent[800],
+      gradEnd: accent[900],
+      borderOuter: [0, 0, 0],
+      borderInner: accent[600],
+      color: [255, 255, 255]
+    },
+    "1": {
+      gradStart: accent[400],
+      gradEnd: accent[500],
+      borderOuter: accent[400],
+      borderInner: accent[300],
+      color: accent[950]
+    },
+    "2": {
+      gradStart: mono[700],
+      gradEnd: mono[800],
+      borderOuter: [0, 0, 0],
+      borderInner: mono[600],
+      color: mono[100]
+    },
+    "3": {
+      gradStart: mono[300],
+      gradEnd: mono[400],
+      borderOuter: mono[600],
+      borderInner: mono[300],
+      color: mono[100]
+    }
   };
 });
-function getColorForField(field) {
+function getColorForField(field, property = "gradStart") {
   const nestingLevel = field?.field.nestingLevel || 0;
   if (nestingLevel >= 3) {
-    return fieldColors.value[3];
+    return fieldRenderPalette.value[3][property];
   } else if (nestingLevel >= 2) {
-    return fieldColors.value[2];
+    return fieldRenderPalette.value[2][property];
   } else if (nestingLevel >= 1) {
-    return fieldColors.value[1];
+    return fieldRenderPalette.value[1][property];
   }
-  return fieldColors.value[0];
+  return fieldRenderPalette.value[0][property];
 }
-const activeColorRgb = computed(() => {
+const activeBackgroundColorRgb = computed(() => {
   if (active.value?.type === "drop-area") {
     return theme.teal.value.normal;
   }
@@ -614,9 +649,21 @@ const activeColorRgb = computed(() => {
   }
   return getColorForField(active.value?.field);
 });
-const activeColorHex = computed(() => {
-  if (activeColorRgb.value) {
-    return rgbaToString(activeColorRgb.value);
+function joinRgb(rgb) {
+  return rgb.join(" ");
+}
+const activeColor = computed(() => {
+  if (active.value?.type === "drop-area") {
+    return joinRgb(theme.teal.value.light);
+  }
+  if (!active.value) {
+    return;
+  }
+  return joinRgb(getColorForField(active.value?.field, "color"));
+});
+const activeBackgroundColorHex = computed(() => {
+  if (activeBackgroundColorRgb.value) {
+    return joinRgb(activeBackgroundColorRgb.value);
   }
   return "";
 });
@@ -654,15 +701,42 @@ const activeHoverFieldNestingLevel = computed(() => {
 const uniforms = computed(() => {
   const index = active.value?.index;
   return {
-    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_drop_area: [
+      ...toShaderColor(theme.teal.value.light),
+      ...toShaderColor(theme.teal.value.normal),
+      ...toShaderColor(theme.teal.value.dark),
+      ...toShaderColor(theme.teal.value.light)
+    ],
+    u_field_0: [
+      ...toShaderColor(fieldRenderPalette.value[0].gradStart),
+      ...toShaderColor(fieldRenderPalette.value[0].gradEnd),
+      ...toShaderColor(fieldRenderPalette.value[0].borderOuter),
+      ...toShaderColor(fieldRenderPalette.value[0].borderInner)
+    ],
+    u_field_1: [
+      ...toShaderColor(fieldRenderPalette.value[1].gradStart),
+      ...toShaderColor(fieldRenderPalette.value[1].gradEnd),
+      ...toShaderColor(fieldRenderPalette.value[1].borderOuter),
+      ...toShaderColor(fieldRenderPalette.value[1].borderInner)
+    ],
+    u_field_2: [
+      ...toShaderColor(fieldRenderPalette.value[2].gradStart),
+      ...toShaderColor(fieldRenderPalette.value[2].gradEnd),
+      ...toShaderColor(fieldRenderPalette.value[2].borderOuter),
+      ...toShaderColor(fieldRenderPalette.value[2].borderInner)
+    ],
+    u_field_3: [
+      ...toShaderColor(fieldRenderPalette.value[3].gradStart),
+      ...toShaderColor(fieldRenderPalette.value[3].gradEnd),
+      ...toShaderColor(fieldRenderPalette.value[3].borderOuter),
+      ...toShaderColor(fieldRenderPalette.value[3].borderInner)
+    ],
     u_active_rect_id: index === void 0 ? -1 : index,
     u_active_hover_rect: activeHoverRect.value,
-    u_active_hover_nesting_level: activeHoverFieldNestingLevel.value
+    u_active_hover_nesting_level: activeHoverFieldNestingLevel.value,
+    u_field_min_size: FIELD_MIN_DRAW_SIZE
   };
 });
 const dragBox = ref({
@@ -725,7 +799,8 @@ const { collector } = defineRenderer("drop-targets", {
         x: 0,
         y: 0,
         width: ui.artboardSize.value.width,
-        height: ui.artboardSize.value.height
+        height: ui.artboardSize.value.height,
+        state: 0
       },
       5 /* ACTIVE_AREA */,
       false
@@ -801,16 +876,32 @@ const { collector } = defineRenderer("drop-targets", {
       if (rect.id === "active-hover-rect") {
         continue;
       }
+      const isActive = active.value?.id === rect.id;
+      let drawX = rect.x;
+      let drawY = rect.y;
+      let drawWidth = rect.width;
+      let drawHeight = rect.height;
+      if (!isActive && rect.type === "field") {
+        const isVertical = rect.id.includes(":empty:") || rect.field?.orientation === "vertical";
+        if (isVertical) {
+          drawHeight = Math.min(FIELD_MIN_DRAW_SIZE, rect.height);
+          drawY = rect.y + (rect.height - drawHeight) / 2;
+        } else {
+          drawWidth = Math.min(FIELD_MIN_DRAW_SIZE, rect.width);
+          drawX = rect.x + (rect.width - drawWidth) / 2;
+        }
+      }
+      const isField = rect.type === "field";
       if (active.value?.id === rect.id) {
-        ctx2d.fillStyle = rect.color;
+        ctx2d.fillStyle = isField ? rgbaToString(getColorForField(rect.field)) : rect.color;
       } else {
-        ctx2d.fillStyle = rect.colorAlpha;
+        ctx2d.fillStyle = isField ? rgbaToString(getColorForField(rect.field), 0.7) : rect.colorAlpha;
       }
       ctx2d.fillRect(
-        (rect.x * scale + offset.x) * ctx.dpi,
-        (rect.y * scale + offset.y) * ctx.dpi,
-        rect.width * ctx.dpi * scale,
-        rect.height * ctx.dpi * scale
+        (drawX * scale + offset.x) * ctx.dpi,
+        (drawY * scale + offset.y) * ctx.dpi,
+        drawWidth * ctx.dpi * scale,
+        drawHeight * ctx.dpi * scale
       );
     }
   }

package/dist/runtime/editor/features/dragging-overlay/Renderer/index.vue.d.ts

@@ -8,6 +8,7 @@ type __VLS_Props = {
     isTouch: boolean;
 };
 declare var __VLS_7: {
+    backgroundColor: any;
     color: any;
     label: any;
 };

package/dist/runtime/editor/features/dragging-overlay/Renderer/vertex.glsl

@@ -6,32 +6,43 @@ in vec2 a_position;
 in vec4 a_quad;
 in float a_rect_id;
 in float a_rect_type;
+in float a_state;
 
 uniform float u_scale;
 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_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_active_hover_nesting_level;
+uniform float u_field_min_size;
 uniform float u_dpi;
+uniform vec3 u_field_0[4];
+uniform vec3 u_field_1[4];
+uniform vec3 u_field_2[4];
+uniform vec3 u_field_3[4];
+uniform vec3 u_drop_area[4];
 
 out vec4 v_quad;
 out float v_intersecting;
 out float v_is_hover_area;
+out float v_is_field;
+out float v_is_drop_area;
+out float v_is_vertical;
 out vec3 v_color;
+out vec3 v_grad_start;
+out vec3 v_grad_end;
+out vec3 v_border_outer;
+out vec3 v_border_inner;
 
 // Optimized varyings - values computed once per vertex instead of per pixel
 out vec2 v_size;
 out vec2 v_location;
 out vec2 v_size_inner;
 out float v_thickness;
+out float v_border_width;
 out float v_edge_softness;
 out float v_radius_outer;
 out float v_radius_inner;
@@ -46,8 +57,38 @@ vec4 getQuad() {
   return a_quad;
 }
 
+vec3 getFieldColor(int idx, int kind) {
+  // kind: 0=gradStart, 1=gradEnd, 2=borderOuter, 3=borderInner
+  if (idx == 1) {
+    return u_field_1[kind];
+  } else if (idx == 2) {
+    return u_field_2[kind];
+  } else if (idx == 3) {
+    return u_field_3[kind];
+  }
+  return u_field_0[kind];
+}
+
 void main() {
   vec4 quad = getQuad();
+
+  bool is_field = a_rect_type >= 1.0 && a_rect_type < 5.0;
+  bool is_active = a_rect_id == u_active_rect_id;
+  bool is_empty = a_state > 1.5;
+  bool is_vertical_shrink = a_state > 0.5;
+
+  if (is_field && !is_active) {
+    float minSize = u_field_min_size;
+    if (is_vertical_shrink) {
+      float newHeight = min(minSize, quad.w);
+      quad.y += (quad.w - newHeight) * 0.5;
+      quad.w = newHeight;
+    } else {
+      float newWidth = min(minSize, quad.z);
+      quad.x += (quad.z - newWidth) * 0.5;
+      quad.z = newWidth;
+    }
+  }
   vec2 offsetPosition = a_position * u_scale;
   offsetPosition.x += u_offset_x;
   offsetPosition.y += u_offset_y;
@@ -72,6 +113,9 @@ void main() {
   v_quad = transformed_quad;
 
   v_is_hover_area = a_rect_type >= 5.0 ? 1.0 : 0.0;
+  v_is_field = a_rect_type >= 1.0 && a_rect_type < 5.0 ? 1.0 : 0.0;
+  v_is_drop_area = a_rect_type < 1.0 ? 1.0 : 0.0;
+  v_is_vertical = is_empty ? 0.0 : (is_vertical_shrink ? 1.0 : 0.0);
 
   bool is_drop_target = a_rect_type <= 0.5;
 
@@ -79,52 +123,61 @@ void main() {
   if (a_rect_type < 1.0) {
     v_color = u_color_area;
   } else if (a_rect_type < 2.0) {
-    v_color = u_color_field_0;
+    v_color = u_color_area;
   } else if (a_rect_type < 3.0) {
-    v_color = u_color_field_1;
+    v_color = u_color_area;
   } else if (a_rect_type < 4.0) {
-    v_color = u_color_field_2;
+    v_color = u_color_area;
   } else if (a_rect_type < 5.0) {
-    v_color = u_color_field_3;
+    v_color = u_color_area;
   } else {
     v_color = u_color_hover_area;
   }
 
+  if (v_is_field >= 0.5) {
+    int idx = int(floor(a_rect_type - 1.0));
+    idx = int(clamp(float(idx), 0.0, 3.0));
+    v_grad_start = getFieldColor(idx, 0);
+    v_grad_end = getFieldColor(idx, 1);
+    v_border_outer = getFieldColor(idx, 2);
+    v_border_inner = getFieldColor(idx, 3);
+  } else if (v_is_drop_area >= 0.5) {
+    v_grad_start = u_drop_area[0];
+    v_grad_end = u_drop_area[1];
+    v_border_outer = u_drop_area[2];
+    v_border_inner = u_drop_area[3];
+  } else {
+    v_grad_start = v_color;
+    v_grad_end = v_color;
+    v_border_outer = v_color;
+    v_border_inner = v_color;
+  }
+
   // Compute values that are constant per quad (optimization)
   bool isHoverArea = v_is_hover_area >= 1.0;
   float stroke = isHoverArea ? 0.5 : 1.0;
-  float radiusBase = stroke * u_scale;
+  float radiusBase = 4.0;
 
   v_thickness = max(min(1.0 * u_scale, 3.0), 0.5);
-
-  // Calculate inset to draw border inside the quad
-  float inset = max(min(2.0 * u_scale, 1.0), 3.0) * v_thickness + stroke;
-
-  // Rectangle dimensions with inset
-  float u_rect_x = transformed_quad.x + inset;
-  float u_rect_y = transformed_quad.y + inset;
-  float u_rectWidth = transformed_quad.z - 2.0 * inset;
-  float u_rectHeight = transformed_quad.w - 2.0 * inset;
-
-  v_size = vec2(u_rectWidth, u_rectHeight);
-
-  // Center position of the rectangle
-  v_location = vec2(u_rect_x + v_size.x / 2.0, u_rect_y + v_size.y / 2.0);
+  v_size = vec2(transformed_quad.z, transformed_quad.w);
+  v_location = vec2(
+    transformed_quad.x + v_size.x / 2.0,
+    transformed_quad.y + v_size.y / 2.0
+  );
 
   v_edge_softness = 0.5 * u_dpi;
 
   float borderWidth = stroke * u_scale * u_dpi;
+  float maxBorder = min(v_size.x, v_size.y) * 0.25;
+  borderWidth = min(borderWidth, maxBorder);
+  v_border_width = borderWidth;
 
-  // Different radius for inner and outer
+  // Different radius for inner and outer (based on full quad size)
   v_radius_outer =
-    min(radiusBase * u_dpi, min(v_size.x, v_size.y)) + v_thickness;
-  v_radius_inner = v_radius_outer - borderWidth;
+    min(radiusBase * u_dpi, min(v_size.x, v_size.y) / 2.0);
+  v_radius_inner = max(v_radius_outer - borderWidth, 0.0);
 
   v_size_inner = v_size - 2.0 * borderWidth;
 
-  if (is_drop_target) {
-    v_fill_alpha = v_intersecting >= 0.5 ? 0.5 : 0.2;
-  } else {
-    v_fill_alpha = v_intersecting >= 0.5 ? 1.0 : 0.2;
-  }
+  v_fill_alpha = v_is_hover_area >= 1.0 ? 0.5 : 1.0;
 }

package/dist/runtime/editor/features/dragging-overlay/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Renderer
     v-if="dragItems.length && isVisible"
-    v-slot="{ color, label }"
+    v-slot="{ backgroundColor, color, label }"
     :items="dragItems"
     :box="box"
     :mouse-x="mouseX"
@@ -15,7 +15,8 @@
       :start-coords="startCoords"
       :items="dragItems"
       :is-touch="isTouching"
-      :active-color="color"
+      :background-color
+      :color
       :active-label="label"
     />
   </Renderer>

package/dist/runtime/editor/features/edit/index.vue

@@ -23,7 +23,10 @@ defineBlokkliFeature({
   description: "Provides an action to edit a block.",
   requiredAdapterMethods: ["formFrameBuilder"]
 });
-const { eventBus, selection, state, $t, adapter, definitions } = useBlokkli();
+const { eventBus, selection, state, $t, adapter, definitions, permissions } = useBlokkli();
+const userCanEditLibraryItems = computed(
+  () => permissions.hasPermission("edit_library_item")
+);
 const canEdit = computed(() => {
   const item = selection.item.value;
   if (!item) {
@@ -38,6 +41,9 @@ const canEdit = computed(() => {
     return false;
   }
   if (item.library?.libraryItemUuid) {
+    if (!userCanEditLibraryItems.value) {
+      return false;
+    }
     return !!adapter.getLibraryItemEditUrl && (state.editMode.value === "editing" || state.editMode.value === "translating") && !item.isNew;
   }
   return state.editMode.value === "editing";

package/dist/runtime/editor/features/editable-field/Overlay/Plaintext/index.vue

@@ -1,26 +1,20 @@
 <template>
-  <div
+  <FlexTextarea
+    id="bk-editable-field-textarea"
+    ref="textarea"
+    v-model="modelValue"
     class="bk bk-editable-field-textarea"
-    :style="{
-  height: height + 'px'
-}"
-  >
-    <textarea
-      id="bk-editable-field-textarea"
-      ref="input"
-      v-model="modelValue"
-      enterkeyhint="done"
-      rows="2"
-      v-bind="inputAttributes"
-      @keydown.capture="onKeyDown"
-      @blur="onBlur"
-    />
-  </div>
+    enterkeyhint="done"
+    rows="2"
+    v-bind="inputAttributes"
+    @keydown="onKeyDown"
+    @blur="onBlur"
+  />
 </template>
 
 <script setup>
-import { useBlokkli, computed, useTemplateRef, ref } from "#imports";
-import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { useBlokkli, computed, useTemplateRef } from "#imports";
+import { FlexTextarea } from "#blokkli/editor/components";
 const { ui, selection } = useBlokkli();
 const props = defineProps({
   element: { type: null, required: true },
@@ -29,8 +23,7 @@ const props = defineProps({
 });
 const modelValue = defineModel({ type: String, ...{ required: true } });
 const emit = defineEmits(["discard", "save"]);
-const input = useTemplateRef("input");
-const height = ref(20);
+const textarea = useTemplateRef("textarea");
 function discard() {
   emit("discard");
 }
@@ -75,7 +68,4 @@ const onBlur = (e) => {
     save();
   }, 100);
 };
-onBlokkliEvent("animationFrame", () => {
-  height.value = Math.max(input.value?.scrollHeight ?? 20, 20);
-});
 </script>