@blokkli/editor 2.0.0-alpha.22 → 2.0.0-alpha.24

package/dist/runtime/components/Edit/Features/Debug/Section/Keyboard.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="bk-debug-list">
+    <div>
+      <div>Space</div>
+      <div>{{ keyboard.isPressingSpace.value }}</div>
+    </div>
+    <div>
+      <div>Control</div>
+      <div>{{ keyboard.isPressingControl.value }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+const { keyboard } = useBlokkli();
+</script>

package/dist/runtime/components/Edit/Features/Debug/Section/Keyboard.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Debug/Section/Logging.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <div>
+      <FormToggle v-model="logEvents" label="Log Events" />
+    </div>
+    <div>
+      <FormCheckboxes
+        id="debug-loggers"
+        v-model="debug.enabledLoggers.value"
+        label="Enabled Loggers"
+        description="If none selected, all will log. Select one or more to filter."
+        :options="loggerOptions"
+      />
+    </div>
+    <div>
+      <button
+        class="bk-button bk-is-small"
+        @click.prevent="() => console.log(dom.getDebugData())"
+      >
+        Log DOM state
+      </button>
+    </div>
+
+    <div>
+      <button class="bk-button bk-is-small" @click.prevent="getAllMessages">
+        Log all messages
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli, computed, onMounted, onBeforeUnmount } from "#imports";
+import { FormToggle, FormCheckboxes } from "#blokkli/components";
+const props = defineProps({
+  logger: { type: Object, required: true }
+});
+const { debug, dom, storage, eventBus } = useBlokkli();
+const logEvents = storage.use("debug:log-events", true);
+const loggerOptions = computed(() => {
+  return debug.registeredLoggers.value.map((name) => ({
+    value: name,
+    label: name
+  })).sort((a, b) => {
+    return a.label.localeCompare(b.label);
+  });
+});
+const onEvent = (name, data) => {
+  if (!logEvents.value) {
+    return;
+  }
+  if (name === "animationFrame" || name === "animationFrame:before" || name === "animationFrame:after" || name === "canvas:draw") {
+    return;
+  }
+  props.logger.log("Event: " + String(name), data);
+};
+onMounted(() => {
+  eventBus.on("*", onEvent);
+});
+onBeforeUnmount(() => {
+  eventBus.off("*", onEvent);
+});
+function getAllMessages() {
+  console.log(debug.getMessages());
+}
+</script>

package/dist/runtime/components/Edit/Features/Debug/Section/Logging.vue.d.ts

@@ -0,0 +1,6 @@
+import type { DebugLogger } from '#blokkli/helpers/debugProvider';
+type __VLS_Props = {
+    logger: DebugLogger;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Debug/Section/Rendering.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="bk-debug-list">
+    <div>
+      <div>DPI</div>
+      <div>{{ animation.dpi.value }}</div>
+    </div>
+  </div>
+  <div v-for="overlay in debug.overlays.value" :key="overlay.id">
+    <FormToggle
+      :label="overlay.label"
+      :model-value="overlay.active"
+      @update:model-value="debug.toggleOverlay(overlay.id)"
+    />
+  </div>
+  <div>
+    <FormToggle
+      label="Set transforming"
+      :model-value="ui.isTransforming.value"
+      @update:model-value="toggleTransforming"
+    />
+  </div>
+
+  <div>
+    <FormRadio
+      id="rendering-mode"
+      label="Rendering Mode"
+      :model-value="animation.preferredRenderingMode.value"
+      :options="renderingModeOptions"
+      @update:model-value="updateRenderingMode"
+    />
+  </div>
+  <div>
+    <button
+      class="bk-button bk-is-small"
+      @click.prevent="() => dom.updateVisibleRects()"
+    >
+      Refresh Rects
+    </button>
+  </div>
+  <div v-if="animation.hasWebGLContext.value">
+    <button
+      class="bk-button bk-is-small"
+      :disabled="!animation.isRenderingWebGL.value"
+      @click.prevent="loseContext"
+    >
+      Lose WebGL Context
+    </button>
+  </div>
+  <div v-if="animation.hasWebGLContext.value">
+    <button
+      class="bk-button bk-is-small"
+      :disabled="animation.isRenderingWebGL.value"
+      @click.prevent="restoreContext"
+    >
+      Restore WebGL Context
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { FormToggle, FormRadio } from "#blokkli/components";
+const { animation, debug, ui, dom } = useBlokkli();
+const renderingModeOptions = [
+  { value: "auto", label: "Auto" },
+  { value: "webgl", label: "WebGL" },
+  { value: "2d", label: "2D Canvas" }
+];
+let webglLoseContextExt = null;
+function toggleTransforming() {
+  if (ui.isTransforming.value) {
+    ui.setTransform();
+  } else {
+    ui.setTransform("Transform plugin label");
+  }
+}
+function updateRenderingMode(value) {
+  if (value === "auto" || value === "webgl" || value === "2d") {
+    animation.preferredRenderingMode.value = value;
+  }
+}
+function loseContext() {
+  const gl = animation.getRawGL();
+  if (gl) {
+    webglLoseContextExt = gl.getExtension("WEBGL_lose_context");
+    if (webglLoseContextExt) {
+      webglLoseContextExt.loseContext();
+    }
+  }
+}
+function restoreContext() {
+  if (webglLoseContextExt) {
+    webglLoseContextExt.restoreContext();
+  }
+}
+</script>

package/dist/runtime/components/Edit/Features/Debug/Section/Rendering.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Debug/Section/Selection.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="bk-debug-list">
+    <div>
+      <div>Count</div>
+      <div>{{ selection.uuids.value.length }}</div>
+    </div>
+    <div>
+      <div>isDragging</div>
+      <div>{{ selection.isDragging.value }}</div>
+    </div>
+    <div>
+      <div>isDraggingExisting</div>
+      <div>{{ selection.isDraggingExisting.value }}</div>
+    </div>
+    <div>
+      <div>Is multiselecting</div>
+      <div>{{ selection.isMultiSelecting.value }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+const { selection } = useBlokkli();
+</script>

package/dist/runtime/components/Edit/Features/Debug/Section/Selection.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -1,11 +1,11 @@
 <template>
-  <Renderer v-if="debug.isEnabled.value" :logger />
+  <DebugMain v-if="debug.isEnabled.value" :logger />
 </template>
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import { defineBlokkliFeature, useBlokkli } from "#imports";
-import Renderer from "./Renderer.vue";
+import DebugMain from "./Main.vue";
 const { logger } = defineBlokkliFeature({
   id: "debug",
   label: "Debug",

package/dist/runtime/components/Edit/Features/DraggingOverlay/DragItems/DragItem.vue

@@ -0,0 +1,113 @@
+<template>
+  <div
+    ref="rootEl"
+    class="bk-dragging-overlay-item"
+    :class="{ 'bk-is-top': isTop, 'bk-is-fallback': !markup }"
+    :style="{
+  width: width + 'px',
+  height: height + 'px',
+  transformOrigin,
+  background,
+  '--bk-dragging-scale': to.scaleX,
+  '--bk-dragging-radius': Math.max(borderRadius ?? 0, 4)
+}"
+  >
+    <div
+      v-if="markup"
+      ref="markupEl"
+      class="bk-dragging-overlay-markup"
+      v-html="markup"
+    />
+    <div v-else class="bk-dragging-overlay-fallback">
+      <div :style="{ transform: `scale(${1 / to.scaleX})` }">
+        <template v-if="isTop">
+          <ItemIcon v-if="bundle" :bundle="bundle" />
+          <Icon v-else-if="icon" :name="icon" />
+          <div v-if="label">{{ label }}</div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, useBlokkli, useTemplateRef } from "#imports";
+import { Icon, ItemIcon } from "#blokkli/components";
+import { lerp } from "#blokkli/helpers";
+import { easeOutElastic } from "#blokkli/helpers/easing";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const props = defineProps({
+  isTop: { type: Boolean, required: true },
+  from: { type: Object, required: true },
+  to: { type: Object, required: true },
+  width: { type: Number, required: true },
+  height: { type: Number, required: true },
+  transformOrigin: { type: String, required: true },
+  markup: { type: String, required: true },
+  background: { type: String, required: true },
+  bundle: { type: String, required: false },
+  icon: { type: null, required: false },
+  label: { type: String, required: false },
+  prevVisibility: { type: String, required: false },
+  element: { type: null, required: true }
+});
+const DURATION = 500;
+const { ui, theme } = useBlokkli();
+const rootEl = useTemplateRef("rootEl");
+const markupEl = useTemplateRef("markupEl");
+const borderRadius = ref(null);
+let isDone = false;
+let animationStart = 0;
+function setBorderRadius() {
+  if (borderRadius.value !== null) {
+    return;
+  }
+  if (!props.isTop) {
+    borderRadius.value = 4;
+    return;
+  }
+  if (markupEl.value) {
+    const child = markupEl.value.firstChild;
+    if (child instanceof HTMLElement) {
+      const style = theme.getDraggableStyle(child);
+      borderRadius.value = style.radiusMin;
+      return;
+    }
+  }
+  borderRadius.value = 4;
+}
+onBlokkliEvent("canvas:draw", (e) => {
+  if (isDone || !rootEl.value) {
+    return;
+  }
+  if (!animationStart) {
+    animationStart = e.time;
+  }
+  setBorderRadius();
+  const elapsed = e.time - animationStart;
+  const alphaX = easeOutElastic(elapsed / DURATION, 1.92, 0.91);
+  const alphaY = easeOutElastic(elapsed / DURATION, 2.2, 0.76);
+  const opacityAlpha = Math.min(Math.max(elapsed - 300, 0) / 200, 1);
+  const from = props.from;
+  const to = props.to;
+  if (elapsed > DURATION || !ui.useAnimations.value || ui.lowPerformanceMode.value) {
+    rootEl.value.style.transform = `translate(${to.x}px, ${to.y}px) scale(${to.scaleX}, ${to.scaleY})`;
+    rootEl.value.style.opacity = String(to.opacity);
+    isDone = true;
+    return;
+  }
+  const newX = lerp(from.x, to.x, alphaX);
+  const newY = lerp(from.y, to.y, alphaY);
+  const newOpacity = lerp(from.opacity, to.opacity, opacityAlpha);
+  const newScaleX = lerp(from.scaleX, to.scaleX, alphaX);
+  const newScaleY = lerp(from.scaleY, to.scaleY, alphaY);
+  rootEl.value.style.transform = `translate(${newX}px, ${newY}px) scale(${newScaleX}, ${newScaleY})`;
+  rootEl.value.style.opacity = String(newOpacity);
+});
+onMounted(() => {
+  if (rootEl.value) {
+    rootEl.value.style.transform = `translate(${props.from.x}px, ${props.from.y}px) scale(${props.from.scaleX}, ${props.from.scaleY})`;
+    rootEl.value.style.opacity = String(props.from.opacity);
+  }
+});
+</script>

package/dist/runtime/components/Edit/Features/DraggingOverlay/DragItems/DragItem.vue.d.ts

@@ -0,0 +1,25 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type AnimationRectangleValues = {
+    opacity: number;
+    scaleX: number;
+    scaleY: number;
+    x: number;
+    y: number;
+};
+export type DragItemData = {
+    isTop: boolean;
+    from: AnimationRectangleValues;
+    to: AnimationRectangleValues;
+    width: number;
+    height: number;
+    transformOrigin: string;
+    markup: string;
+    background: string;
+    bundle?: string;
+    icon?: BlokkliIcon;
+    label?: string;
+    prevVisibility?: string;
+    element: HTMLElement;
+};
+declare const _default: import("vue").DefineComponent<DragItemData, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DragItemData> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -2,52 +2,21 @@
   <div
     class="bk-vars bk-dragging-overlay"
     :style="style"
-    :class="[{ 'bk-is-touch': isTouch }, { 'bk-is-active': !!activeLabel }]"
+    :class="[
+  { 'bk-is-touch': isTouch },
+  { 'bk-is-active': !!activeLabel },
+  { bk: !isExisting }
+]"
   >
-    <BlokkliTransition name="drag-item">
-      <div
-        v-show="activeLabel"
-        class="bk bk-dragging-overlay-label"
-        :style="{ backgroundColor: currentActiveColor }"
-      >
-        <Icon name="cursor-move" />
-        <p v-html="currentActiveLabel" />
-      </div>
-    </BlokkliTransition>
     <div
-      v-for="(rect, i) in rects"
-      :key="i"
-      class="bk-dragging-overlay-item"
-      :class="{ 'bk-is-top': rect.isTop, 'bk-is-fallback': !rect.markup }"
-      :style="{
-  width: rect.width + 'px',
-  height: rect.height + 'px',
-  transform: `translate(${rect.x}px, ${rect.y}px) scale(${rect.scaleX}, ${rect.scaleY})`,
-  opacity: rect.opacity,
-  background: rect.background,
-  transformOrigin: rect.transformOrigin,
-  borderRadius: rect.borderRadius
-}"
+      v-show="activeLabel"
+      class="bk bk-dragging-overlay-label"
+      :style="{ backgroundColor: currentActiveColor }"
     >
-      <div
-        v-if="rect.markup"
-        class="bk-dragging-overlay-markup"
-        v-html="rect.markup"
-      />
-      <div
-        v-else
-        class="bk-dragging-overlay-fallback"
-        :style="{ color: rect.fallbackColor }"
-      >
-        <div :style="{ transform: `scale(${1 / rect.to.scaleX})` }">
-          <template v-if="rect.isTop">
-            <ItemIcon v-if="rect.bundle" :bundle="rect.bundle" />
-            <Icon v-else-if="rect.icon" :name="rect.icon" />
-            <div v-if="rect.label">{{ rect.label }}</div>
-          </template>
-        </div>
-      </div>
+      <Icon name="cursor-move" />
+      <p v-html="currentActiveLabel" />
     </div>
+    <DragItem v-for="(rect, i) in rects" :key="i" v-bind="rect" />
   </div>
 </template>
 
@@ -60,23 +29,10 @@ import {
   onMounted,
   onBeforeUnmount
 } from "#imports";
-import {
-  isInsideRect,
-  realBackgroundColor,
-  lerp,
-  falsy
-} from "#blokkli/helpers";
-import { Icon, ItemIcon, BlokkliTransition } from "#blokkli/components";
-import { easeOutElastic } from "#blokkli/helpers/easing";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const {
-  dom,
-  ui,
-  animation,
-  theme,
-  types,
-  element: elementProvider
-} = useBlokkli();
+import { isInsideRect, realBackgroundColor, falsy } from "#blokkli/helpers";
+import { Icon } from "#blokkli/components";
+import DragItem, {} from "./DragItem.vue";
+const { dom, ui, types } = useBlokkli();
 const props = defineProps({
   items: { type: Array, required: true },
   x: { type: Number, required: true },
@@ -86,6 +42,9 @@ const props = defineProps({
   activeColor: { type: String, required: false },
   activeLabel: { type: String, required: false }
 });
+const isExisting = computed(
+  () => !!props.items.find((v) => v.itemType === "existing")
+);
 const currentActiveLabel = ref("");
 const currentActiveColor = ref("");
 watch(
@@ -138,51 +97,6 @@ function getRect() {
 }
 defineExpose({ getRect });
 const rects = ref([]);
-const animationStart = Date.now();
-const duration = 500;
-const isDone = ref(false);
-onBlokkliEvent("animationFrame", () => {
-  if (isDone.value) {
-    return;
-  }
-  const newRects = [];
-  const elapsed = Date.now() - animationStart;
-  const alphaX = easeOutElastic(elapsed / duration, 1.92, 0.91);
-  const alphaY = easeOutElastic(elapsed / duration, 2.2, 0.76);
-  const opacityAlpha = Math.min(Math.max(elapsed - 300, 0) / 200, 1);
-  for (let i = 0; i < rects.value.length; i++) {
-    const rect = rects.value[i];
-    const newX = lerp(rect.from.x, rect.to.x, alphaX);
-    const newY = lerp(rect.from.y, rect.to.y, alphaY);
-    const newOpacity = lerp(rect.from.opacity, rect.to.opacity, opacityAlpha);
-    const newScaleX = lerp(rect.from.scaleX, rect.to.scaleX, alphaX);
-    const newScaleY = lerp(rect.from.scaleY, rect.to.scaleY, alphaY);
-    animation.requestDraw();
-    newRects.push({
-      ...rect,
-      x: newX,
-      y: newY,
-      scaleX: newScaleX,
-      scaleY: newScaleY,
-      opacity: newOpacity
-    });
-  }
-  if (elapsed > duration || !ui.useAnimations.value || ui.lowPerformanceMode.value) {
-    rects.value = newRects.map((v) => {
-      return {
-        ...v,
-        opacity: v.to.opacity,
-        scaleX: v.to.scaleX,
-        scaleY: v.to.scaleY,
-        x: v.to.x,
-        y: v.to.y
-      };
-    });
-    isDone.value = true;
-    return;
-  }
-  rects.value = newRects;
-});
 function getDraggingBounds(mouse, rect, maxWidth) {
   const aspectRatio = rect.width / rect.height;
   const effectiveWidth = Math.min(rect.width, maxWidth);
@@ -204,15 +118,10 @@ function getDraggingBounds(mouse, rect, maxWidth) {
 }
 onMounted(() => {
   const elRects = props.items.map((item, index) => {
-    const itemElement = item.itemType === "existing" ? dom.getDragElement(item) : item.element();
-    if (!itemElement) {
+    const element = item.itemType === "existing" ? dom.getDragElement(item) : item.element();
+    if (!element) {
       return;
     }
-    const element = elementProvider.query(
-      itemElement,
-      ".bk-drop-element",
-      "Find drop element for drag item."
-    ) || itemElement;
     return {
       rect: element.getBoundingClientRect(),
       element,
@@ -230,7 +139,7 @@ onMounted(() => {
     props.startCoords,
     boundRect.rect,
     // Limit width to 250px
-    340
+    351
   );
   const boundsX = props.isTouch ? 0 : bounds.x;
   const boundsY = props.isTouch ? translateY.value : bounds.y;
@@ -265,7 +174,6 @@ onMounted(() => {
       scaleX: targetScaleX,
       scaleY: targetScaleY
     };
-    const style2 = theme.getDraggableStyle(element);
     const markup = (elRects.length < 6 || isTop) && !ui.lowPerformanceMode.value ? dom.getDropElementMarkup(item.item, true) : "";
     let bundle;
     let label = "";
@@ -284,19 +192,15 @@ onMounted(() => {
       isTop,
       from: ui.lowPerformanceMode.value ? to : from,
       to,
-      ...from,
       width: item.element.offsetWidth,
       height: item.element.offsetHeight,
-      opacity: 1,
       transformOrigin: `${originX}px ${originY}px`,
       markup,
-      background: realBackgroundColor(item.element),
+      background: item.item.itemType === "existing" ? realBackgroundColor(item.element) : "",
       prevVisibility: item.item.itemType === "existing" || item.item.itemType === "existing_structure" ? item.element.style.visibility : void 0,
       element: item.element,
-      borderRadius: style2.radiusString,
       bundle,
-      label,
-      fallbackColor: style2.textColor
+      label
     };
   }).filter(falsy);
   elRects.forEach((item) => {

package/dist/runtime/components/Edit/Features/DraggingOverlay/Renderer/fragment.glsl

@@ -0,0 +1,77 @@
+#version 300 es
+
+precision highp float;
+
+in float v_intersecting;
+in float v_is_hover_area;
+in vec4 v_quad;
+in vec3 v_color;
+
+// 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_edge_softness;
+in float v_radius_outer;
+in float v_radius_inner;
+in float v_fill_alpha;
+
+out vec4 fragColor;
+
+uniform float u_scale;
+uniform float u_dpi;
+uniform vec2 u_resolution;
+uniform float u_active_hover_nesting_level;
+
+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;
+
+  // Compute different distance for inside and outside using pre-computed values
+  float distanceOuter = roundedBoxSDF(
+    v_location - gl_FragCoord.xy,
+    v_size / 2.0,
+    v_radius_outer
+  );
+  float distanceInner = roundedBoxSDF(
+    v_location - gl_FragCoord.xy,
+    v_size_inner / 2.0,
+    v_radius_inner
+  );
+
+  float alphaOuter =
+    1.0 -
+    smoothstep(-v_edge_softness, v_edge_softness, distanceOuter - v_thickness);
+  float alphaInner =
+    1.0 -
+    smoothstep(-v_edge_softness, v_edge_softness, distanceInner - v_thickness);
+
+  // Alpha value for the border.
+  float alphaBorder = clamp(alphaOuter - alphaInner, 0.0, 1.0);
+
+  float adjustedAlphaFill = alphaInner * v_fill_alpha;
+
+  if (v_is_hover_area >= 1.0) {
+    // If nesting level is 0, don't render the fill (border only)
+    if (u_active_hover_nesting_level < 0.5) {
+      adjustedAlphaFill = 0.0;
+    } else {
+      adjustedAlphaFill *= 0.5;
+    }
+  }
+
+  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);
+    return;
+  }
+
+  discard;
+}