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

package/dist/runtime/editor/features/add-list/index.vue

@@ -7,6 +7,7 @@
       @wheel.capture.passive="onWheel"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
+      @mousemove="onMouseMove"
     >
       <div
         class="bk-add-list-inner"
@@ -18,10 +19,32 @@
           :selectable-bundles
           :generally-available-bundles
           :hide-disabled-blocks="settings.hideDisabledBlocks"
+          :help-active
+          @help="onHelp"
+          @start-help="onStartHelp"
+        />
+        <AddListActions
+          :selectable-bundles
+          :help-active
+          :actions
+          @help="onHelp"
+          @start-help="onStartHelp"
         />
-        <AddListActions :selectable-bundles />
       </div>
+      <Transition name="bk-add-list-help" :duration="200">
+        <AddListHelpComponent
+          v-if="hasOpenedHelpOnce || DEBUG_HELP"
+          v-show="helpIsVisible"
+          :id="helpId"
+          :is-visible="helpIsVisible"
+          :type="helpType"
+          :element="activeHelpItem?.element"
+          :actions
+          :bundles="generallyAvailableBundles"
+        />
+      </Transition>
     </div>
+
     <PluginTourItem
       id="add-blocks"
       :element="wrapper"
@@ -37,13 +60,16 @@ import {
   computed,
   useBlokkli,
   defineBlokkliFeature,
-  useTemplateRef
+  useTemplateRef,
+  onBeforeUnmount
 } from "#imports";
 import { PluginTourItem } from "#blokkli/editor/plugins";
 import AddListBlocks from "./Blocks/index.vue";
 import AddListActions from "./Actions/index.vue";
+import AddListHelpComponent from "./Help/index.vue";
 import { itemEntityType } from "#blokkli-build/config";
 import { onlyUnique } from "#blokkli/helpers";
+const DEBUG_HELP = false;
 const { settings } = defineBlokkliFeature({
   id: "add-list",
   icon: "bk_mdi_add",
@@ -60,7 +86,20 @@ const { settings } = defineBlokkliFeature({
   },
   screenshot: "feature-add-list.jpg"
 });
-const { $t, ui, selection, state, tour, types, context, dom } = useBlokkli();
+const { $t, ui, selection, state, tour, types, context, dom, plugins } = useBlokkli();
+const actions = computed(() => {
+  return plugins.get("addAction").sort((a, b) => a.weight - b.weight);
+});
+const helpActive = ref(false);
+const hasOpenedHelpOnce = ref(false);
+const activeHelpItem = ref(null);
+const helpType = computed(
+  () => DEBUG_HELP ? "bundle" : activeHelpItem.value?.type
+);
+const helpId = computed(() => DEBUG_HELP ? "image" : activeHelpItem.value?.id);
+const helpIsVisible = computed(
+  () => isActive.value && helpActive.value || DEBUG_HELP
+);
 const getAllowedTypesForSelected = (p) => {
   if (types.itemBundlesWithNested.includes(p.bundle)) {
     return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, p.bundle).flatMap((v) => v.allowedBundles).filter(Boolean);
@@ -107,24 +146,78 @@ const hasContextMenuOpen = computed(
 const wrapper = useTemplateRef("wrapper");
 const isHovered = ref(false);
 let mouseTimeout = null;
+let mouseLeaveTimeout = null;
+const ANGLE_THRESHOLD = 35 * Math.PI / 180;
+let lastMouseX = 0;
+let lastMouseY = 0;
+let pendingHelpItem = null;
+let isMovingTowardsPopup = false;
+function clearPendingHelp() {
+  pendingHelpItem = null;
+}
+function onMouseMove(e) {
+  const dx = e.clientX - lastMouseX;
+  const dy = e.clientY - lastMouseY;
+  if (Math.abs(dx) > 2 || Math.abs(dy) > 2) {
+    const angle = Math.abs(Math.atan2(Math.abs(dx), Math.abs(dy)));
+    isMovingTowardsPopup = angle >= ANGLE_THRESHOLD && dx > 0;
+    if (!isMovingTowardsPopup && pendingHelpItem) {
+      activeHelpItem.value = pendingHelpItem;
+      pendingHelpItem = null;
+    }
+  }
+  lastMouseX = e.clientX;
+  lastMouseY = e.clientY;
+}
+function onHelp(item) {
+  if (isMovingTowardsPopup) {
+    pendingHelpItem = item;
+  } else {
+    pendingHelpItem = null;
+    activeHelpItem.value = item;
+  }
+}
 const isActive = computed(() => {
   return (isHovered.value || hasContextMenuOpen.value || tour.isTouring.value) && !selection.isDragging.value;
 });
+function onStartHelp(item) {
+  helpActive.value = true;
+  hasOpenedHelpOnce.value = true;
+  activeHelpItem.value = item;
+}
 function onMouseEnter() {
+  if (mouseLeaveTimeout) {
+    window.clearTimeout(mouseLeaveTimeout);
+    mouseLeaveTimeout = null;
+  }
   if (mouseTimeout) {
-    clearTimeout(mouseTimeout);
-    isHovered.value = true;
+    window.clearTimeout(mouseTimeout);
     mouseTimeout = null;
-    return;
   }
-  mouseTimeout = setTimeout(() => {
+  mouseTimeout = window.setTimeout(() => {
     isHovered.value = true;
     mouseTimeout = null;
   }, 300);
 }
 function onMouseLeave() {
-  clearTimeout(mouseTimeout);
-  isHovered.value = false;
+  clearPendingHelp();
+  if (mouseTimeout) {
+    window.clearTimeout(mouseTimeout);
+    mouseTimeout = null;
+  }
+  if (mouseLeaveTimeout) {
+    window.clearTimeout(mouseLeaveTimeout);
+    mouseLeaveTimeout = null;
+  }
+  if (helpActive.value) {
+    mouseLeaveTimeout = window.setTimeout(() => {
+      isHovered.value = false;
+      helpActive.value = false;
+    }, 300);
+  } else {
+    isHovered.value = false;
+    helpActive.value = false;
+  }
 }
 const onWheel = (e) => {
   if (e.ctrlKey || e.metaKey) {
@@ -139,6 +232,12 @@ const tourText = computed(
     "<p>This shows the list of available blocks that can be placed. Add a block by dragging the icon into the page.</p><p>When an existing block is selected, some blocks may be greyed out. This indicates which blocks can be placed inside or after the selected block.</p>"
   )
 );
+onBeforeUnmount(() => {
+  clearPendingHelp();
+  if (mouseTimeout) {
+    window.clearTimeout(mouseTimeout);
+  }
+});
 </script>
 
 <script>

package/dist/runtime/editor/features/add-list/types.d.ts

@@ -1,4 +1,9 @@
 import type { AddAction } from '#blokkli/editor/types/actions';
+export type AddListHelp = {
+    type: 'bundle' | 'action';
+    id: string;
+    element: HTMLElement;
+};
 export interface DraggableActionItem {
     itemType: 'action';
     actionType: string;

package/dist/runtime/editor/features/analyze/Main.vue

@@ -13,7 +13,10 @@
       <p v-if="lastRun" class="bk-analyze-last-run">
         <RelativeTime v-slot="{ formatted }" :timestamp="lastRun">
           {{
-            $t("analyzeLastRun", "Last run: @time").replace("@time", formatted)
+            $t("analyzeLastRun", "Last run: @time").replace(
+  "@time",
+  formatted ?? "never"
+)
           }}
         </RelativeTime>
       </p>

package/dist/runtime/editor/features/analyze/Summary/Chart.vue

@@ -80,17 +80,17 @@ function createPieSegment(cx, cy, radius, startAngle, endAngle) {
   const largeArc = endAngle - startAngle > 180 ? 1 : 0;
   if (endAngle - startAngle >= 360) {
     return `
+        M ${cx} ${cy}
+        L ${cx + radius} ${cy}
+        A ${radius} ${radius} 0 1 1 ${cx + radius} ${cy + 1e-3}
+        Z
+      `;
+  }
+  return `
       M ${cx} ${cy}
-      L ${cx + radius} ${cy}
-      A ${radius} ${radius} 0 1 1 ${cx + radius} ${cy + 1e-3}
+      L ${x1} ${y1}
+      A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}
       Z
     `;
-  }
-  return `
-    M ${cx} ${cy}
-    L ${x1} ${y1}
-    A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2}
-    Z
-  `;
 }
 </script>

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

@@ -37,7 +37,7 @@ import { PluginSidebar } from "#blokkli/editor/plugins";
 import { InfoBox } from "#blokkli/editor/components";
 import AnalyzerMain from "./Main.vue";
 import AnalyzeIcon from "./Icon.vue";
-const { adapter } = defineBlokkliFeature({
+const { adapters } = defineBlokkliFeature({
   id: "analyze",
   label: "Analyze",
   icon: "bk_mdi_speed",
@@ -47,19 +47,7 @@ const { adapter } = defineBlokkliFeature({
 });
 const { $t, context, animation, ui } = useBlokkli();
 const isRunning = ref(false);
-function getAdapterAnalyzers() {
-  const result = adapter.getAnalyzers();
-  if (Array.isArray(result)) {
-    return Promise.resolve(result);
-  }
-  return Promise.resolve(result).then((result2) => {
-    if (Array.isArray(result2)) {
-      return result2;
-    }
-    return [result2];
-  });
-}
-const analyzers = await getAdapterAnalyzers();
+const analyzers = await adapters.getAggregated("getAnalyzers");
 </script>
 
 <script>

package/dist/runtime/editor/features/analyze/types.d.ts

@@ -1,6 +1,9 @@
 import type { Analyzer } from './analyzers/types.js';
 declare module '#blokkli/editor/adapter' {
-    interface BlokkliAdapter<T> {
+    /**
+     * Extensible analyze methods - available on both base adapter and extensions.
+     */
+    interface AdapterExtensionMethods<T> {
         getAnalyzers?: () => Analyzer | Analyzer[] | Promise<Analyzer> | Promise<Analyzer[]>;
     }
 }

package/dist/runtime/editor/features/artboard/Renderer.vue

@@ -307,6 +307,10 @@ onBlokkliEvent("scrollIntoView", (e) => {
     });
   } else {
     if (artboardElement.contains(e.element)) {
+      const elRect = e.element.getBoundingClientRect();
+      if (calculateIntersection(elRect, ui.visibleViewport.value) >= 0.75) {
+        return;
+      }
       artboard.scrollElementIntoView(e.element, {
         scale: "none",
         axis: "y",
@@ -319,4 +323,43 @@ onBlokkliEvent("scrollIntoView", (e) => {
     }
   }
 });
+onBlokkliEvent("scrollSelectionIntoView", (e) => {
+  const uuids = selection.uuids.value;
+  if (uuids.length === 0) {
+    return;
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const uuid of uuids) {
+    dom.refreshBlockRect(uuid);
+    const rect = dom.getBlockRect(uuid);
+    if (!rect) {
+      continue;
+    }
+    minX = Math.min(minX, rect.x);
+    minY = Math.min(minY, rect.y);
+    maxX = Math.max(maxX, rect.x + rect.width);
+    maxY = Math.max(maxY, rect.y + rect.height);
+  }
+  if (minX === Infinity) {
+    return;
+  }
+  const boundingRect = {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+  const viewportRelativeRect = ui.getViewportRelativeRect(boundingRect);
+  if (calculateIntersection(viewportRelativeRect, ui.visibleViewport.value) >= 0.75) {
+    return;
+  }
+  artboard.scrollIntoView(boundingRect, {
+    scale: "none",
+    axis: "both",
+    behavior: e.immediate ? "instant" : "auto"
+  });
+});
 </script>

package/dist/runtime/editor/features/assistant/docs.md

@@ -1,7 +1,7 @@
 ## Overview
 
-The `assistant` feature implements an [Add Action](/plugins/add-action) that can
-be dragged anywhere on the page. Once placed, a modal overlay is shown with a
-basic prompt textarea, where the user can enter a prompt. Clicking on _Generate_
-calls the [adapter.assistantGetResults] method which is expected to return the
-content that should be generated.
+The `assistant` feature implements an add action that can be dragged anywhere on
+the page. Once placed, a modal overlay is shown with a basic prompt textarea,
+where the user can enter a prompt. Clicking on _Generate_ calls the
+[adapter.assistantGetResults] method which is expected to return the content
+that should be generated.

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

@@ -58,7 +58,10 @@
 import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
 import { Icon } from "#blokkli/editor/components";
 import { useStateBasedCache } from "#blokkli/editor/composables";
-import { fragmentBlockBundle, fromLibraryBlockBundle } from "#blokkli-build/config";
+import {
+  fragmentBlockBundle,
+  fromLibraryBlockBundle
+} from "#blokkli-build/config";
 defineBlokkliFeature({
   id: "breadcrumbs",
   label: "Breadcrumbs",

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

@@ -83,7 +83,11 @@ import { Icon } from "#blokkli/editor/components";
 import getVideoId from "get-video-id";
 import { emitMessage } from "#blokkli/editor/events";
 import { fragmentBlockBundle, itemEntityType } from "#blokkli-build/config";
-import { defineItemDropdownAction, defineShortcut, onBlokkliEvent } from "#blokkli/editor/composables";
+import {
+  defineItemDropdownAction,
+  defineShortcut,
+  onBlokkliEvent
+} from "#blokkli/editor/composables";
 const { settings, logger } = defineBlokkliFeature({
   id: "clipboard",
   label: "Clipboard",
@@ -534,7 +538,7 @@ function copyCurrentSelectionToClipboard() {
   selectionClipboard.value = selection.uuids.value;
 }
 onBlokkliEvent("keyPressed", (e) => {
-  if (e.code !== "c" || !e.meta || ui.hasDialogOpen.value) {
+  if (e.code !== "c" || !e.meta || ui.hasDialogOpen.value || !ui.canvasFocused.value) {
     return;
   }
   copyCurrentSelectionToClipboard();

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

@@ -73,6 +73,7 @@ const { adapter } = defineBlokkliFeature({
   icon: "bk_mdi_comment",
   label: "Comments",
   requiredAdapterMethods: ["loadComments", "addComment"],
+  requiredPermissions: ["view_comments"],
   description: "Provides comment functionality for blocks.",
   screenshot: "feature-comments.jpg"
 });

package/dist/runtime/editor/features/comments/types.d.ts

@@ -24,3 +24,9 @@ declare module '#blokkli/editor/adapter' {
         resolveComment?: (uuid: string) => Promise<CommentItem[]>;
     }
 }
+declare module '#blokkli/editor/types/permissions' {
+    interface UserPermissionMap {
+        create_comments: 'Post comments.';
+        view_comments: 'Access comments.';
+    }
+}

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

@@ -18,7 +18,8 @@ type __VLS_Props = {
      */
     startCoords: Coord;
     isTouch: boolean;
-    activeColor?: string;
+    color?: string;
+    backgroundColor?: string;
     activeLabel?: string;
 };
 declare function getRect(): Rectangle;

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

@@ -43,9 +43,12 @@ const props = defineProps({
   y: { type: Number, required: true },
   startCoords: { type: Object, required: true },
   isTouch: { type: Boolean, required: true },
-  activeColor: { type: String, required: false },
+  color: { type: String, required: false },
+  backgroundColor: { type: String, required: false },
   activeLabel: { type: String, required: false }
 });
+const MAX_WIDTH = 350;
+const MAX_HEIGHT = 150;
 const labelEl = useTemplateRef("labelEl");
 const labelWidth = ref(0);
 const labelHeight = ref(0);
@@ -53,7 +56,8 @@ const isExisting = computed(
   () => !!props.items.find((v) => v.itemType === "existing")
 );
 const currentActiveLabel = ref("");
-const currentActiveColor = ref("");
+const currentColor = ref("");
+const currentBackgroundColor = ref("");
 watch(
   () => props.activeLabel,
   function(label) {
@@ -63,10 +67,18 @@ watch(
   }
 );
 watch(
-  () => props.activeColor,
+  () => props.backgroundColor,
   function(color) {
     if (color) {
-      currentActiveColor.value = color;
+      currentBackgroundColor.value = color;
+    }
+  }
+);
+watch(
+  () => props.color,
+  function(color) {
+    if (color) {
+      currentColor.value = color;
     }
   }
 );
@@ -91,7 +103,8 @@ const style = computed(() => {
     width: width.value + "px",
     height: height.value + "px",
     transform: `translate(${translateX.value}px, ${translateY.value}px)`,
-    "--bk-active-color": props.activeColor && props.activeLabel ? props.activeColor : "rgba(255,255,255,0)"
+    "--bk-active-background-color": props.backgroundColor && props.activeLabel ? props.backgroundColor : "rgba(255,255,255,0)",
+    "--bk-active-color": props.color && props.activeLabel ? props.color : "rgba(255,255,255,0)"
   };
 });
 const styleLabel = computed(() => {
@@ -102,8 +115,8 @@ const styleLabel = computed(() => {
   const y = Math.max(10, translateY.value - labelHeight.value - 20);
   return {
     transform: `translate(${x}px, ${y}px)`,
-    "--bk-active-color": props.activeColor && props.activeLabel ? props.activeColor : "rgba(255,255,255,0)",
-    backgroundColor: currentActiveColor.value
+    "--bk-active-background-color": props.backgroundColor && props.activeLabel ? props.backgroundColor : "rgba(255,255,255,0)",
+    "--bk-active-color": props.color && props.activeLabel ? props.color : "rgba(255,255,255,0)"
   };
 });
 function getRect() {
@@ -116,10 +129,16 @@ function getRect() {
 }
 defineExpose({ getRect });
 const rects = ref([]);
-function getDraggingBounds(mouse, rect, maxWidth) {
-  const aspectRatio = rect.width / rect.height;
-  const effectiveWidth = Math.min(rect.width, maxWidth);
-  const effectiveHeight = effectiveWidth / aspectRatio;
+function getDraggingBounds(mouse, rect, maxWidth, maxHeight) {
+  const widthScale = rect.width > 0 ? maxWidth / rect.width : 1;
+  const heightScale = rect.height > 0 ? maxHeight / rect.height : 1;
+  const scale = Math.min(widthScale, heightScale, 1);
+  let effectiveWidth = rect.width * scale;
+  let effectiveHeight = rect.height * scale;
+  if (Math.abs(rect.width - effectiveWidth) < 10 || Math.abs(rect.height - effectiveHeight) < 10) {
+    effectiveWidth = rect.width;
+    effectiveHeight = rect.height;
+  }
   const relativeX = mouse.x - rect.x;
   const relativeY = mouse.y - rect.y;
   const proportionX = rect.width > 0 ? relativeX / rect.width : 0;
@@ -170,8 +189,8 @@ onMounted(() => {
   const bounds = getDraggingBounds(
     props.startCoords,
     boundRect.rect,
-    // Limit width to 250px
-    351
+    MAX_WIDTH,
+    MAX_HEIGHT
   );
   const boundsX = props.isTouch ? 0 : bounds.x;
   const boundsY = props.isTouch ? translateY.value : bounds.y;

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

@@ -18,7 +18,8 @@ type __VLS_Props = {
      */
     startCoords: Coord;
     isTouch: boolean;
-    activeColor?: string;
+    color?: string;
+    backgroundColor?: string;
     activeLabel?: string;
 };
 declare function getRect(): Rectangle;

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

@@ -4,14 +4,22 @@ precision highp float;
 
 in float v_intersecting;
 in float v_is_hover_area;
+in float v_is_field;
+in float v_is_drop_area;
+in float v_is_vertical;
 in vec4 v_quad;
 in vec3 v_color;
+in vec3 v_grad_start;
+in vec3 v_grad_end;
+in vec3 v_border_outer;
+in vec3 v_border_inner;
 
 // Optimized varyings - values computed once per vertex instead of per pixel
 in vec2 v_size;
 in vec2 v_location;
 in vec2 v_size_inner;
 in float v_thickness;
+in float v_border_width;
 in float v_edge_softness;
 in float v_radius_outer;
 in float v_radius_inner;
@@ -24,12 +32,19 @@ uniform float u_dpi;
 uniform vec2 u_resolution;
 uniform float u_active_hover_nesting_level;
 
+const float OUTER_BORDER_PX = 2.5;
+const float INNER_BORDER_PX = 2.0;
+const float INNER_BORDER_SOFTNESS_PX = 0.5;
+const float OUTER_BORDER_SOFTNESS_PX = 0.3;
+
 float roundedBoxSDF(vec2 CenterPosition, vec2 Size, float Radius) {
   return length(max(abs(CenterPosition) - Size + Radius, 0.0)) - Radius;
 }
 
 void main() {
   bool isHoverArea = v_is_hover_area >= 1.0;
+  bool isField = v_is_field >= 0.5;
+  bool isDropArea = v_is_drop_area >= 0.5;
 
   // Compute different distance for inside and outside using pre-computed values
   float distanceOuter = roundedBoxSDF(
@@ -60,16 +75,76 @@ void main() {
     if (u_active_hover_nesting_level < 0.5) {
       adjustedAlphaFill = 0.0;
     } else {
-      adjustedAlphaFill *= 0.5;
+      adjustedAlphaFill *= 0.1;
     }
   }
 
+  vec3 fillColor = v_color;
+  vec3 borderOuter = v_color;
+  vec3 borderInner = v_color;
+  if (isField || isDropArea) {
+    vec2 minCorner = v_location - v_size * 0.5;
+    vec2 uv = (gl_FragCoord.xy - minCorner) / v_size;
+    float t = uv.y;
+    t = clamp(t, 0.0, 1.0);
+    fillColor = mix(v_grad_start, v_grad_end, t);
+    borderOuter = v_border_outer;
+    borderInner = v_border_inner;
+  }
+
+  if (isField || isDropArea) {
+    vec2 pos = gl_FragCoord.xy - v_location;
+    float soft = v_edge_softness;
+    float outerBorderWidth = OUTER_BORDER_PX;
+    float innerBorderWidth = INNER_BORDER_PX;
+
+    float distOuter = roundedBoxSDF(pos, v_size / 2.0, v_radius_outer);
+    float inside = 1.0 - smoothstep(-soft, soft, distOuter);
+    float distFromOuter = -distOuter; // distance inside from outer edge in px
+
+    float outerBand = 0.0;
+    if (OUTER_BORDER_SOFTNESS_PX <= 0.0) {
+      outerBand = inside * step(0.0, distFromOuter) * step(distFromOuter, outerBorderWidth);
+    } else {
+      float s = OUTER_BORDER_SOFTNESS_PX;
+      outerBand = inside *
+        smoothstep(0.0, s, distFromOuter) *
+        (1.0 - smoothstep(outerBorderWidth - s, outerBorderWidth + s, distFromOuter));
+    }
+    float innerBand = 0.0;
+    if (INNER_BORDER_SOFTNESS_PX <= 0.0) {
+      innerBand = inside *
+        step(outerBorderWidth, distFromOuter) *
+        step(distFromOuter, outerBorderWidth + innerBorderWidth);
+    } else {
+      float s = INNER_BORDER_SOFTNESS_PX;
+      innerBand = inside *
+        smoothstep(outerBorderWidth - s, outerBorderWidth + s, distFromOuter) *
+        (1.0 - smoothstep(outerBorderWidth + innerBorderWidth - s, outerBorderWidth + innerBorderWidth + s, distFromOuter));
+    }
+    float fillMask = inside * step(outerBorderWidth + innerBorderWidth, distFromOuter);
+
+    vec3 color = fillColor;
+    color = mix(color, borderOuter, outerBand);
+    color = mix(color, borderInner, innerBand);
+
+    float a = isDropArea
+      ? (v_intersecting >= 0.5 ? 0.6 : 0.3)
+      : (v_intersecting >= 0.5 ? 1.0 : 0.7);
+    float alpha = max(fillMask, max(outerBand, innerBand)) * a;
+    if (alpha <= 0.0) {
+      discard;
+    }
+    fragColor = vec4(color, alpha);
+    return;
+  }
+
   if (alphaBorder > 0.0) {
     float a = isHoverArea ? 0.6 : 1.0;
     fragColor = vec4(v_color, a);
     return;
   } else if (adjustedAlphaFill > 0.0) {
-    fragColor = vec4(v_color, adjustedAlphaFill);
+    fragColor = vec4(fillColor, adjustedAlphaFill);
     return;
   }
 

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

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