@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.15

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

@@ -29,6 +29,8 @@ watch(dom.isReady, buildRects);
 let lastInteractedElement = null;
 let pointerDownElement = null;
 let mouseStartCoordinates = null;
+let pointerDownTimestamp = 0;
+let pointerUpTimestamp = 0;
 function getInteractedElement(e) {
   const { x, y } = getInteractionCoordinates(e);
   const elements = document.elementsFromPoint(x, y);
@@ -95,14 +97,26 @@ function onPointerMove(e) {
   if (e.pointerType === "touch") {
     return onTouchMove(e);
   }
-  if (e.buttons !== 1) {
+  if (e.buttons !== MOUSE_BUTTONS.PRIMARY) {
     return;
   }
-  if (!pointerDownElement || !mouseStartCoordinates || selection.isDragging.value || keyboard.isPressingSpace.value || selection.isMultiSelecting.value) {
+  if (!mouseStartCoordinates || selection.isMultiSelecting.value || selection.isDragging.value || keyboard.isPressingSpace.value) {
     return;
   }
   const diffX = Math.abs(mouseStartCoordinates.x - e.clientX);
   const diffY = Math.abs(mouseStartCoordinates.y - e.clientY);
+  if (!pointerDownElement) {
+    const timeDelta = Date.now() - pointerDownTimestamp;
+    const maxMovement = Math.max(diffX, diffY);
+    if (maxMovement > 6 && timeDelta > 150 || maxMovement > 20) {
+      rootEl.removeEventListener("pointermove", onPointerMove);
+      eventBus.emit("multi-select:start", {
+        x: e.clientX,
+        y: e.clientY
+      });
+    }
+    return;
+  }
   if (diffX < 6 && diffY < 6) {
     return;
   }
@@ -124,10 +138,9 @@ function onPointerMove(e) {
         });
       }
     }
+    rootEl.removeEventListener("pointermove", onPointerMove);
   }
 }
-let pointerDownTimestamp = 0;
-let pointerUpTimestamp = 0;
 function onPointerDown(e) {
   if (e.buttons === MOUSE_BUTTONS.AUXILIARY) {
     return;
@@ -149,10 +162,10 @@ function onPointerDown(e) {
   if (selection.isDragging.value) {
     return;
   }
+  pointerDownTimestamp = Date.now();
   const coords = { x: e.clientX, y: e.clientY };
+  mouseStartCoordinates = coords;
   if (!e.shiftKey && e.buttons === MOUSE_BUTTONS.PRIMARY) {
-    pointerDownTimestamp = Date.now();
-    mouseStartCoordinates = coords;
     const interacted = getInteractedElement(e);
     pointerDownElement = interacted;
     if (interacted) {
@@ -161,6 +174,17 @@ function onPointerDown(e) {
   }
   eventBus.emit("mouse:down", { ...coords, type: "mouse", distance: 0 });
 }
+function isClickInArtboard(coords) {
+  const size = ui.artboardSize.value;
+  const scale = ui.artboardScale.value;
+  const rect = {
+    x: ui.artboardOffset.value.x,
+    y: ui.artboardOffset.value.y,
+    width: size.width * scale,
+    height: size.height * scale
+  };
+  return isInsideRect(coords.x, coords.y, rect);
+}
 function onPointerUp(e) {
   rootEl.removeEventListener("pointermove", onPointerMove);
   if (e.button === MOUSE_BUTTON.AUXILIARY) {
@@ -236,6 +260,11 @@ function onPointerUp(e) {
     return;
   }
   eventBus.emit("window:clickAway");
+  if (isClickInArtboard(coords)) {
+    eventBus.emit("select:host");
+  } else {
+    eventBus.emit("select:host:unselect");
+  }
 }
 let longPressTimeout = null;
 let touchStartInteraction = null;

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

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <Transition name="bk-loading">
+    <Transition :name="ui.useAnimations.value ? 'bk-loading' : void 0">
       <Loading
         v-if="isInitializing || !toolbarLoaded || !featuresLoaded"
         screen
@@ -29,6 +29,7 @@
   <Actions v-if="!isInitializing" />
   <Toolbar @loaded="toolbarLoaded = true" />
   <AppMenu v-if="toolbarLoaded" />
+  <Indicators />
   <Features
     v-if="!isInitializing && toolbarLoaded"
     :key="route.fullPath"
@@ -36,6 +37,7 @@
   />
   <DragInteractions v-if="!isInitializing" />
   <AnimationCanvas v-if="!isInitializing" />
+  <Konami />
   <SystemRequirements />
   <slot
     v-if="!isInitializing"
@@ -46,7 +48,6 @@
 
 <script setup>
 import {
-  watch,
   ref,
   computed,
   provide,
@@ -54,18 +55,21 @@ import {
   onBeforeUnmount,
   useRoute,
   useRuntimeConfig,
-  nextTick
+  nextTick,
+  inject
 } from "#imports";
 import Toolbar from "./Toolbar/index.vue";
 import Actions from "./Actions/index.vue";
 import Loading from "./Loading/index.vue";
 import Messages from "./Messages/index.vue";
 import Features from "./Features/index.vue";
+import Indicators from "./Indicators/index.vue";
 import AppMenu from "./AppMenu/index.vue";
 import DraggableList from "./DraggableList.vue";
 import DragInteractions from "./DragInteractions/index.vue";
 import AnimationCanvas from "./AnimationCanvas/index.vue";
 import SystemRequirements from "./SystemRequirements/index.vue";
+import Konami from "./Konami/index.vue";
 import animationProvider from "./../../helpers/animationProvider";
 import keyboardProvider from "./../../helpers/keyboardProvider";
 import selectionProvider from "./../../helpers/selectionProvider";
@@ -83,6 +87,8 @@ import tourProvider from "./../../helpers/tourProvider";
 import debugProvider from "./../../helpers/debugProvider";
 import definitionProvider from "./../../helpers/definitionProvider";
 import dropAreasProvider from "./../../helpers/dropAreaProvider";
+import indicatorsProvider from "./../../helpers/indicatorsProvider";
+import pluginProvider from "./../../helpers/pluginProvider";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import "#blokkli-build/styles.css";
 import getAdapter from "#blokkli-build/edit-adapter";
@@ -92,9 +98,11 @@ import {
   INJECT_EDIT_FIELD_LIST_COMPONENT,
   INJECT_EDIT_LOGGER,
   INJECT_GLOBAL_PROXY_MODE,
-  INJECT_IS_EDITING
+  INJECT_IS_EDITING,
+  INJECT_PROVIDER_KEY
 } from "#blokkli/helpers/symbols";
 import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 const props = defineProps({
   entity: { type: null, required: false, default: void 0 },
   entityType: { type: String, required: true },
@@ -113,6 +121,7 @@ const context = computed(() => {
   };
 });
 const adapter = await getAdapter(context);
+const providerKey = inject(INJECT_PROVIDER_KEY, "");
 const route = useRoute();
 const runtimeConfig = useRuntimeConfig().public.blokkli;
 const toolbarLoaded = ref(false);
@@ -120,8 +129,8 @@ const featuresLoaded = ref(false);
 const isInitializing = ref(true);
 const definitions = definitionProvider();
 const $t = textProvider(context);
-const state = await editStateProvider(adapter, context, $t);
-const storage = storageProvider();
+const state = await editStateProvider(adapter, context, $t, providerKey);
+const storage = await storageProvider(adapter);
 const debug = debugProvider(storage);
 const features = featuresProvider(storage);
 const theme = themeProvider();
@@ -129,12 +138,14 @@ const commands = commandsProvider();
 const tour = tourProvider();
 const dropAreas = dropAreasProvider();
 const broadcast = broadcastProvider();
-const ui = uiProvider(storage, state);
+const ui = uiProvider(storage, state, context);
 const dom = domProvider(ui, debug, definitions);
-const animation = animationProvider(ui);
+const animation = animationProvider(ui, storage);
 const keyboard = keyboardProvider(animation);
 const selection = selectionProvider(dom);
 const types = await typesProvider(adapter, selection, context);
+const indicators = indicatorsProvider();
+const plugins = pluginProvider();
 const mutatedEntity = computed(() => state.mutatedEntity.value || props.entity);
 const onContextMenu = (e) => {
   e.preventDefault();
@@ -148,22 +159,22 @@ function onTouchStart(e) {
     e.preventDefault();
   }
 }
-const setRootClasses = (unmount) => {
-  document.documentElement.classList.remove("bk-use-animations");
-  if (ui.useAnimations.value && !unmount) {
-    document.documentElement.classList.add("bk-use-animations");
-  }
-};
-watch(ui.useAnimations, setRootClasses);
+const shouldIsolate = computed(() => props.isolate);
+addElementClasses(
+  document.documentElement,
+  "bk-use-animations",
+  ui.useAnimations
+);
+addElementClasses(
+  document.documentElement,
+  "bk-isolate-provider",
+  shouldIsolate
+);
 const baseLogger = debug.createLogger("EditProvider");
 onMounted(() => {
   window.addEventListener("contextmenu", onContextMenu);
-  if (props.isolate) {
-    document.documentElement.classList.add("bk-isolate-provider");
-  }
   document.documentElement.addEventListener("touchmove", onTouchMove);
   document.documentElement.addEventListener("touchstart", onTouchStart);
-  setRootClasses();
   baseLogger.log("EditProvider mounted");
   dom.init();
   isInitializing.value = false;
@@ -173,10 +184,8 @@ onBeforeUnmount(() => {
   window.removeEventListener("contextmenu", onContextMenu);
   isInitializing.value = true;
   toolbarLoaded.value = false;
-  document.documentElement.classList.remove("bk-isolate-provider");
   document.documentElement.removeEventListener("touchmove", onTouchMove);
   document.documentElement.removeEventListener("touchstart", onTouchStart);
-  setRootClasses(true);
 });
 provide(INJECT_EDIT_LOGGER, baseLogger);
 provide(INJECT_EDIT_FIELD_LIST_COMPONENT, DraggableList);
@@ -189,27 +198,29 @@ provide(INJECT_EDIT_CONTEXT, {
   useBlockRegistration
 });
 provide(INJECT_APP, {
+  $t,
   adapter,
+  animation,
+  broadcast,
+  commands,
+  context,
+  debug,
+  definitions,
+  dom,
+  dropAreas,
   eventBus,
+  features,
+  indicators,
+  keyboard,
+  plugins,
   runtimeConfig,
+  selection,
   state,
-  dom,
   storage,
-  types,
-  selection,
-  keyboard,
-  ui,
-  animation,
-  context,
-  $t,
-  broadcast,
-  features,
   theme,
-  commands,
   tour,
-  dropAreas,
-  debug,
-  definitions
+  types,
+  ui
 });
 const isProxyMode = computed(() => ui.isProxyMode.value);
 provide(INJECT_GLOBAL_PROXY_MODE, isProxyMode);

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

@@ -50,13 +50,12 @@ import {
   ref,
   computed,
   useBlokkli,
-  onMounted,
-  onBeforeUnmount,
   nextTick,
   defineBlokkliFeature
 } from "#imports";
 import { Sortli } from "#blokkli/components";
 import { PluginSidebar, PluginTourItem } from "#blokkli/plugins";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 const { settings } = defineBlokkliFeature({
   id: "add-list",
   icon: "plus",
@@ -94,14 +93,10 @@ const hasContextMenuOpen = computed(
 const isSidebar = computed(() => ui.addListOrientation.value === "sidebar");
 const shouldRender = computed(() => state.editMode.value === "editing");
 watch(ui.addListOrientation, () => {
-  setRootClasses();
   nextTick(() => {
     eventBus.emit("add-list:change");
   });
 });
-watch(shouldRender, () => {
-  setRootClasses();
-});
 const CLASS_LEFT = "bk-has-add-list-left";
 const CLASS_BOTTOM = "bk-has-add-list-bottom";
 const wrapper = ref(null);
@@ -146,18 +141,6 @@ const onWheel = (e) => {
     e.stopPropagation();
   }
 };
-function setRootClasses() {
-  document.documentElement.classList.remove(CLASS_BOTTOM);
-  document.documentElement.classList.remove(CLASS_LEFT);
-  if (!shouldRender.value) {
-    return;
-  }
-  if (ui.addListOrientation.value === "horizontal") {
-    document.documentElement.classList.add(CLASS_BOTTOM);
-  } else if (ui.addListOrientation.value === "vertical") {
-    document.documentElement.classList.add(CLASS_LEFT);
-  }
-}
 const sidebarTitle = computed(() => $t("addListSidebarTitle", "Add blocks"));
 const tourText = computed(
   () => $t(
@@ -165,13 +148,20 @@ 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>"
   )
 );
-onMounted(() => {
-  setRootClasses();
-});
-onBeforeUnmount(() => {
-  document.documentElement.classList.remove(CLASS_BOTTOM);
-  document.documentElement.classList.remove(CLASS_LEFT);
-});
+addElementClasses(
+  document.documentElement,
+  CLASS_BOTTOM,
+  computed(
+    () => ui.addListOrientation.value === "horizontal" && shouldRender.value
+  )
+);
+addElementClasses(
+  document.documentElement,
+  CLASS_LEFT,
+  computed(
+    () => ui.addListOrientation.value === "vertical" && shouldRender.value
+  )
+);
 </script>
 
 <script>

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

@@ -0,0 +1,58 @@
+precision highp float;
+
+varying vec4 v_quad;
+varying float v_rect_type;
+varying vec3 v_color;
+varying vec2 v_rect_size;
+varying vec2 v_rect_center;
+
+uniform float u_dpi;
+
+int pseudoQuadrant(vec2 p) {
+  return int(floor(step(0.0, p.x) + 2.0 * step(0.0, -p.y)));
+}
+
+float sdRoundBox(vec2 p, vec2 b, vec4 radii) {
+  int idx = pseudoQuadrant(p);
+  float cr;
+  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;
+}
+
+void main() {
+  float borderThickness = 2.0 * u_dpi;
+  vec2 size = v_rect_size;
+  vec4 radius = vec4(0.0); // No rounded corners for now
+
+  vec2 posRelativeToQuad = gl_FragCoord.xy - v_rect_center;
+
+  float mainDist = sdRoundBox(posRelativeToQuad, size / 2.0, radius);
+
+  // Calculate fill alpha (inside the rectangle)
+  float fillAlpha = 1.0 - smoothstep(-1.0, 0.0, mainDist);
+
+  // Calculate border alpha (edge of the rectangle)
+  float borderAlpha =
+    1.0 - smoothstep(-1.0, 0.0, abs(mainDist) - borderThickness);
+
+  // Background (transparent)
+  vec4 bg = vec4(0.0, 0.0, 0.0, 0.0);
+
+  // Fill (semi-transparent)
+  vec4 fill = vec4(v_color, 0.3);
+
+  // Border (fully opaque)
+  vec4 border = vec4(v_color, 1.0);
+
+  // Mix background with fill
+  vec4 res_with_fill = mix(bg, fill, fillAlpha);
+
+  // Mix with border
+  vec4 finalColor = mix(res_with_fill, border, borderAlpha * border.a);
+
+  gl_FragColor = finalColor;
+}

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

@@ -0,0 +1,168 @@
+<template>
+  <div />
+</template>
+
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import { useBlokkli, onBeforeUnmount, computed } from "#imports";
+import {
+  setBuffersAndAttributes,
+  drawBufferInfo,
+  setUniforms
+} from "twgl.js";
+import vs from "./vertex.glsl?raw";
+import fs from "./fragment.glsl?raw";
+import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
+import { toShaderColor } from "#blokkli/helpers";
+const props = defineProps({
+  results: { type: Array, required: true },
+  gl: { type: null, required: true }
+});
+const { animation, ui, theme, selection, eventBus } = useBlokkli();
+const programInfo = animation.registerProgram("analyze", props.gl, [vs, fs]);
+const statusPriority = {
+  violation: 3,
+  incomplete: 2,
+  pass: 1,
+  inapplicable: 0
+};
+const providerElement = ui.providerElement();
+const nodes = computed(() => {
+  const allNodes = props.results.filter((v) => v.status === "incomplete" || v.status === "violation").flatMap((result) => {
+    const nodes2 = Array.isArray(result.nodes) ? result.nodes : [result.nodes];
+    return nodes2.flatMap((node) => {
+      const targets = Array.isArray(node.targets) ? node.targets : [node.targets];
+      return targets.map((v) => {
+        if (typeof v === "string") {
+          return providerElement.querySelector(v);
+        }
+        return v;
+      }).filter((v) => v instanceof HTMLElement).filter((v) => providerElement.contains(v));
+    }).map((element) => {
+      return {
+        id: result.id,
+        element,
+        title: result.title,
+        status: result.status
+      };
+    });
+  });
+  const nodeMap = /* @__PURE__ */ new Map();
+  for (const node of allNodes) {
+    const existing = nodeMap.get(node.element);
+    if (!existing || statusPriority[node.status] > statusPriority[existing.status]) {
+      nodeMap.set(node.element, node);
+    }
+  }
+  return Array.from(nodeMap.values());
+});
+class AnalyzeRectangleBufferCollector extends RectangleBufferCollector {
+  prevKey = "";
+  rectCache = /* @__PURE__ */ new Map();
+  clearCache() {
+    this.rectCache.clear();
+  }
+  getBufferInfo(force) {
+    const key = nodes.value.map((node, index) => {
+      if (!this.rectCache.has(node.element)) {
+        this.rectCache.set(
+          node.element,
+          ui.getAbsoluteElementRect(node.element)
+        );
+      }
+      const rect = this.rectCache.get(node.element);
+      if (!rect) {
+        return `${index}_no_rect`;
+      }
+      return `${index}_${rect.x}_${rect.y}_${rect.width}_${rect.height}_${node.status}`;
+    }).join("_");
+    const hasChanged = force || this.prevKey !== key;
+    if (hasChanged) {
+      this.reset();
+      for (let i = 0; i < nodes.value.length; i++) {
+        const node = nodes.value[i];
+        const id = `analyze_${i}`;
+        if (this.added.has(id)) {
+          continue;
+        }
+        const rect = this.rectCache.get(node.element);
+        if (!rect) {
+          continue;
+        }
+        this.added.add(id);
+        const statusType = node.status === "violation" ? 3 : node.status === "incomplete" ? 1 : node.status === "inapplicable" ? 2 : 0;
+        this.addRectangle(
+          {
+            id,
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height,
+            status: node.status
+          },
+          statusType
+        );
+      }
+      this.prevKey = key;
+    }
+    if (hasChanged) {
+      this.bufferInfo = this.createBufferInfo();
+    }
+    return { info: this.bufferInfo, hasChanged };
+  }
+}
+const collector = new AnalyzeRectangleBufferCollector(props.gl);
+onBlokkliEvent("canvas:draw", () => {
+  if (selection.isMultiSelecting.value || selection.isDragging.value) {
+    return;
+  }
+  props.gl.useProgram(programInfo.program);
+  const { info } = collector.getBufferInfo();
+  if (!info) {
+    return;
+  }
+  setUniforms(programInfo, {
+    u_color_violation: toShaderColor(theme.red.value.normal),
+    u_color_incomplete: toShaderColor(theme.yellow.value.normal),
+    u_color_pass: toShaderColor(theme.lime.value.normal)
+  });
+  animation.setSharedUniforms(props.gl, programInfo);
+  setBuffersAndAttributes(props.gl, programInfo, info);
+  drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
+});
+onBlokkliEvent("ui:resized", function() {
+  collector.clearCache();
+  collector.reset();
+});
+onBlokkliEvent("state:reloaded", function() {
+  collector.clearCache();
+  collector.reset();
+});
+onBlokkliEvent("mouse:up", (e) => {
+  const artboardX = (e.x - ui.artboardOffset.value.x) / ui.artboardScale.value;
+  const artboardY = (e.y - ui.artboardOffset.value.y) / ui.artboardScale.value;
+  for (let i = 0; i < nodes.value.length; i++) {
+    const node = nodes.value[i];
+    const rect = collector.rectCache.get(node.element);
+    if (!rect) {
+      continue;
+    }
+    if (artboardX >= rect.x && artboardX <= rect.x + rect.width && artboardY >= rect.y && artboardY <= rect.y + rect.height) {
+      eventBus.emit("analyze:click-node", {
+        id: node.id,
+        target: node.element
+      });
+      return;
+    }
+  }
+});
+onBeforeUnmount(() => {
+  props.gl.clear(props.gl.COLOR_BUFFER_BIT);
+});
+</script>
+
+<script>
+export default {
+  name: "AnalyzeOverlay"
+};
+</script>

package/dist/runtime/components/Edit/Features/Analyze/Overlay/index.vue.d.ts

@@ -0,0 +1,9 @@
+import type { AnalyzeResultMapped } from '#blokkli/analyzer/types';
+declare const _default: import("vue").DefineComponent<{
+    results: AnalyzeResultMapped[];
+    gl: WebGLRenderingContext;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    results: AnalyzeResultMapped[];
+    gl: WebGLRenderingContext;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,72 @@
+precision highp float;
+
+// [x, y] position.
+attribute vec2 a_position;
+// The [x,y,width, height] of the quad the vertex belongs to.
+attribute vec4 a_quad;
+attribute float a_rect_id;
+attribute float a_rect_type;
+
+// The global scaling applied to all quads.
+uniform float u_scale;
+uniform float u_dpi;
+// The amount of pixels to offset on the x axis.
+uniform float u_offset_x;
+// The amount of pixels to offset on the y axis.
+uniform float u_offset_y;
+uniform vec2 u_resolution;
+uniform vec3 u_color_violation;
+uniform vec3 u_color_incomplete;
+uniform vec3 u_color_pass;
+
+varying vec4 v_quad;
+varying float v_rect_type;
+varying vec3 v_color;
+varying vec2 v_rect_size;
+varying vec2 v_rect_center;
+
+void main() {
+  // Apply global scale and offsets
+  vec2 offsetPosition = a_position * u_scale;
+  offsetPosition.x += u_offset_x;
+  offsetPosition.y += u_offset_y;
+
+  // Normalize position for rendering
+  vec2 normalizedPosition = offsetPosition / u_resolution;
+
+  // Transform to screen space (-1 to 1)
+  vec2 screenSpacePosition = normalizedPosition * 2.0 - vec2(1.0, 1.0);
+  screenSpacePosition.y = -screenSpacePosition.y;
+
+  // Output final position in clip space
+  gl_Position = vec4(screenSpacePosition, 0.0, 1.0) * u_dpi;
+
+  // Pass quad and type to fragment shader
+  vec4 transformed_quad = vec4(
+    (a_quad.x * u_scale + u_offset_x) * u_dpi,
+    (u_resolution.y - a_quad.y * u_scale - a_quad.w * u_scale - u_offset_y) *
+      u_dpi,
+    a_quad.z * u_scale * u_dpi,
+    a_quad.w * u_scale * u_dpi
+  );
+  v_quad = transformed_quad;
+  v_rect_type = a_rect_type;
+  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);
+
+  // Set color based on status type
+  // 0 = pass, 1 = incomplete, 2 = inapplicable, 3 = violation
+  if (a_rect_type > 2.5) {
+    // violation
+    v_color = u_color_violation;
+  } else if (a_rect_type > 0.5 && a_rect_type < 1.5) {
+    // incomplete
+    v_color = u_color_incomplete;
+  } else if (a_rect_type < 0.5) {
+    // pass
+    v_color = u_color_pass;
+  } else {
+    // inapplicable - use a neutral gray
+    v_color = vec3(0.5, 0.5, 0.5);
+  }
+}