@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.18

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Renderer/fragment.glsl

@@ -0,0 +1,106 @@
+precision highp float;
+
+varying vec4 v_quad;
+varying vec2 v_circle_center;
+varying float v_visible;
+varying float v_is_hovered;
+varying float v_scale_fade;
+varying float v_rect_id;
+
+uniform float u_dpi;
+uniform vec3 u_color;
+uniform vec3 u_color_hover;
+uniform vec3 u_color_field;
+uniform vec3 u_color_field_hover;
+
+void main() {
+  // Early exit if not visible or fully faded out
+  if (v_visible < 0.5 || v_scale_fade < 0.01) {
+    discard;
+  }
+
+  // Calculate distance from pixel to circle center
+  vec2 pixelPos = gl_FragCoord.xy;
+  float dist = distance(pixelPos, v_circle_center);
+
+  // Circle radius (includes border)
+  float radius = v_quad.z / 2.0;
+
+  // Border width in pixels (must match vertex shader) - scaled by DPI
+  float borderWidth = 4.0 * u_dpi;
+
+  // Inner circle radius (without border)
+  float innerRadius = radius - borderWidth;
+
+  // Anti-aliased circle
+  float edgeSoftness = 1.0 * u_dpi;
+  float alpha = 1.0 - smoothstep(radius - edgeSoftness, radius, dist);
+
+  if (alpha < 0.01) {
+    discard;
+  }
+
+  // Calculate position relative to circle center
+  vec2 offset = pixelPos - v_circle_center;
+
+  // Plus dimensions relative to inner circle radius
+  // Reduce thickness at low DPI (zoomed out)
+  float plusThicknessBase = u_dpi <= 0.5 ? 1.25 : 1.5;
+  float plusThickness = plusThicknessBase * u_dpi;
+  float plusLength = innerRadius * 0.5; // 50% of inner radius
+  float plusSoftness = 0.25 * u_dpi;
+
+  // Calculate soft plus factor (0 = not plus, 1 = fully plus)
+  float horizontalDist = max(abs(offset.y) - plusThickness, 0.0);
+  float verticalDist = max(abs(offset.x) - plusThickness, 0.0);
+
+  float horizontalBarFactor = 0.0;
+  if (abs(offset.x) < plusLength) {
+    horizontalBarFactor = 1.0 - smoothstep(0.0, plusSoftness, horizontalDist);
+  }
+
+  float verticalBarFactor = 0.0;
+  if (abs(offset.y) < plusLength) {
+    verticalBarFactor = 1.0 - smoothstep(0.0, plusSoftness, verticalDist);
+  }
+
+  float plusFactor = max(horizontalBarFactor, verticalBarFactor);
+
+  // Check if pixel is in the border area (outside the inner circle)
+  bool isBorder = dist >= innerRadius && dist <= radius;
+
+  // Determine base fill color
+  vec3 fillColor;
+  bool isFieldButton = v_rect_id >= 2.0;
+  if (isFieldButton) {
+    fillColor = v_is_hovered > 0.5 ? u_color_field_hover : u_color_field;
+  } else {
+    fillColor = v_is_hovered > 0.5 ? u_color_hover : u_color;
+  }
+
+  // Determine final color
+  vec3 finalColor;
+  if (isBorder) {
+    // Soft border transition - blend from fill color to white over 0.5px
+    float transitionRange = 0.5 * u_dpi;
+    float borderStart = innerRadius;
+    float borderEnd = innerRadius + transitionRange;
+
+    // Calculate blend factor (0 = fill color, 1 = white)
+    float blendFactor = smoothstep(borderStart, borderEnd, dist);
+
+    // Blend between fill color and white
+    finalColor = mix(fillColor, vec3(1.0, 1.0, 1.0), blendFactor);
+  } else {
+    // Circle background
+    finalColor = fillColor;
+  }
+
+  // Apply soft plus on top
+  if (plusFactor > 0.0) {
+    finalColor = mix(finalColor, vec3(1.0, 1.0, 1.0), plusFactor);
+  }
+
+  // Apply scale fade to alpha
+  gl_FragColor = vec4(finalColor, alpha);
+}

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Renderer/index.vue

@@ -0,0 +1,440 @@
+<template>
+  <Teleport to="#bk-canvas-overlay">
+    <div
+      class="bk bk-add-button-tooltip"
+      :class="{ 'bk-is-field': tooltipData?.isField }"
+      :style="{
+  position: 'fixed',
+  left: (tooltipData?.x ?? 0) + 'px',
+  top: (tooltipData?.y ?? 0) + 'px',
+  transform: tooltipData?.transform ?? 'translate(0, 0)',
+  visibility: tooltipData ? 'visible' : 'hidden'
+}"
+    >
+      {{ tooltipData?.text ?? "" }}
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
+import { useBlokkli, computed, ref } 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, getFieldKey } from "#blokkli/helpers";
+import {
+  getChildrenOrientation,
+  determineCanAddChildren
+} from "#blokkli/helpers/dropTargets";
+import { isInternalBundle } from "#blokkli/helpers/bundles";
+import { itemEntityType } from "#blokkli-build/config";
+const {
+  animation,
+  theme,
+  dom,
+  selection,
+  state,
+  types,
+  ui,
+  $t,
+  blocks,
+  fields
+} = useBlokkli();
+const emptyFieldTooltips = ref([]);
+const currentUuid = ref("");
+const currentBundleLabel = ref("");
+const currentSingleAllowedBundleLabel = ref(null);
+const tooltipData = computed(() => {
+  if (hoveredCircle.value < 0) {
+    return null;
+  }
+  const index = hoveredCircle.value;
+  const artboardX = circlePositions[index * 2];
+  const artboardY = circlePositions[index * 2 + 1];
+  if (artboardX === void 0 || artboardY === void 0) {
+    return null;
+  }
+  const scale = ui.artboardScale.value;
+  const offset = ui.artboardOffset.value;
+  const screenX = artboardX * scale + offset.x;
+  const screenY = artboardY * scale + offset.y;
+  let transform;
+  let position;
+  let text;
+  let isField = false;
+  if (index === 0 || index === 1) {
+    const orientation = currentOrientation.value;
+    if (currentSingleAllowedBundleLabel.value) {
+      if (index === 0) {
+        text = $t("addButtonBundleBefore", 'Add "@bundle" before').replace(
+          "@bundle",
+          currentSingleAllowedBundleLabel.value
+        );
+      } else {
+        text = $t("addButtonBundleAfter", 'Add "@bundle" after').replace(
+          "@bundle",
+          currentSingleAllowedBundleLabel.value
+        );
+      }
+    } else {
+      if (index === 0) {
+        text = $t("addButtonBeforeBundle", "Add before...");
+      } else {
+        text = $t("addButtonAfterBundle", "Add after...");
+      }
+    }
+    if (orientation === "horizontal") {
+      if (index === 0) {
+        transform = `translate(${TOOLTIP_MARGIN}px, -50%)`;
+        position = "right";
+      } else {
+        transform = `translate(calc(-100% - ${TOOLTIP_MARGIN}px), -50%)`;
+        position = "left";
+      }
+    } else {
+      if (index === 0) {
+        transform = `translate(-50%, ${TOOLTIP_MARGIN}px)`;
+        position = "bottom";
+      } else {
+        transform = `translate(-50%, calc(-100% - ${TOOLTIP_MARGIN}px))`;
+        position = "top";
+      }
+    }
+  } else {
+    transform = `translate(-50%, calc(-100% - ${TOOLTIP_MARGIN}px))`;
+    position = "top";
+    isField = true;
+    const fieldIndex = index - 2;
+    text = emptyFieldTooltips.value[fieldIndex] || "Add to field";
+  }
+  return { x: screenX, y: screenY, transform, position, text, isField };
+});
+const emit = defineEmits(["toggle", "toggleField"]);
+const gl = animation.gl();
+const programInfo = gl ? animation.registerProgram("add-buttons", gl, [vs, fs]) : null;
+const MAX_CIRCLES = 10;
+const BUTTON_RADIUS = 12;
+const TOOLTIP_MARGIN = 20;
+let bufferInfo = null;
+if (gl) {
+  class CircleBufferCollector extends RectangleBufferCollector {
+  }
+  const collector = new CircleBufferCollector(gl);
+  for (let i = 0; i < MAX_CIRCLES; i++) {
+    collector.addRectangle(
+      {
+        id: `circle-${i}`,
+        x: 0,
+        y: 0,
+        width: 40,
+        height: 40
+      },
+      i
+    );
+  }
+  bufferInfo = collector.createBufferInfo();
+}
+const circlePositions = new Float32Array(MAX_CIRCLES * 2);
+const circleVisible = new Float32Array(MAX_CIRCLES);
+const hoveredCircle = ref(-1);
+const color = computed(() => {
+  return toShaderColor(theme.accent.value[600]);
+});
+const colorHover = computed(() => {
+  return toShaderColor(theme.accent.value[500]);
+});
+const colorField = computed(() => {
+  return toShaderColor(theme.accent.value[400]);
+});
+const colorFieldHover = computed(() => {
+  return toShaderColor(theme.accent.value[300]);
+});
+const orientationCache = /* @__PURE__ */ new Map();
+const currentOrientation = ref("horizontal");
+const blockStateCache = /* @__PURE__ */ new Map();
+function getOrientationForUuid(uuid) {
+  let cached = orientationCache.get(uuid);
+  if (!cached) {
+    const item = blocks.getBlock(uuid);
+    if (item) {
+      const field = fields.find(item.host.uuid, item.host.fieldName);
+      if (field) {
+        cached = getChildrenOrientation(field.element);
+        orientationCache.set(uuid, cached);
+      }
+    }
+  }
+  return cached || "horizontal";
+}
+function getBlockState(uuid) {
+  let cached = blockStateCache.get(uuid);
+  if (!cached) {
+    let canShowBeforeAfter = false;
+    let singleAllowedBundleLabel = null;
+    const block = blocks.getBlock(uuid);
+    if (!block) {
+      return {
+        canShowBeforeAfter: false,
+        emptyFieldKeys: [],
+        emptyFieldTooltips: [],
+        bundleLabel: "",
+        singleAllowedBundleLabel: null
+      };
+    }
+    if (block) {
+      const field = fields.find(block.host.uuid, block.host.fieldName);
+      if (!field) {
+        return {
+          canShowBeforeAfter: false,
+          emptyFieldKeys: [],
+          emptyFieldTooltips: [],
+          bundleLabel: "",
+          singleAllowedBundleLabel: null
+        };
+      }
+      if (field) {
+        const fieldChildren = [...field.element.children];
+        const currentCount = state.getFieldBlockCount(field.key);
+        canShowBeforeAfter = determineCanAddChildren(
+          field,
+          fieldChildren,
+          [],
+          // Not moving any blocks, adding a new one
+          currentCount,
+          1,
+          // Adding 1 new block
+          []
+          // Don't know which bundle will be added
+        );
+        const allowedBundles = field.allowedBundles.filter(
+          (bundle) => !isInternalBundle(bundle)
+        );
+        if (allowedBundles.length === 1) {
+          const bundle = allowedBundles[0];
+          if (bundle) {
+            singleAllowedBundleLabel = types.getBlockBundleDefinition(bundle)?.label || bundle;
+          }
+        }
+      }
+    }
+    const bundleLabel = block ? types.getBlockBundleDefinition(block.bundle)?.label || block.bundle : "";
+    const emptyFieldKeys = [];
+    const emptyFieldTooltips2 = [];
+    if (block) {
+      const fieldConfigs = types.fieldConfig.forEntityTypeAndBundle(
+        itemEntityType,
+        block.bundle
+      );
+      for (const fieldConfig of fieldConfigs) {
+        const key = getFieldKey(uuid, fieldConfig.name);
+        const count = state.getFieldBlockCount(key);
+        if (count === 0) {
+          emptyFieldKeys.push(key);
+          const fieldLabel = fieldConfig.label || fieldConfig.name;
+          const fieldElement = fields.find(uuid, fieldConfig.name);
+          if (fieldElement) {
+            const allowedBundles = fieldElement.allowedBundles.filter(
+              (bundle) => !isInternalBundle(bundle)
+            );
+            if (allowedBundles.length === 1) {
+              const bundle = allowedBundles[0];
+              if (bundle) {
+                const singleBundleLabel = types.getBlockBundleDefinition(bundle)?.label || bundle;
+                const tooltip = $t(
+                  "addButtonBundleInsideField",
+                  'Add "@bundle" inside @parentBundle \xBB @fieldLabel'
+                ).replace("@bundle", singleBundleLabel).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel);
+                emptyFieldTooltips2.push(tooltip);
+              } else {
+                emptyFieldTooltips2.push(
+                  $t(
+                    "addButtonInsideField",
+                    "Add inside @parentBundle \xBB @fieldLabel..."
+                  ).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel)
+                );
+              }
+            } else {
+              emptyFieldTooltips2.push(
+                $t(
+                  "addButtonInsideField",
+                  "Add inside @parentBundle \xBB @fieldLabel..."
+                ).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel)
+              );
+            }
+          } else {
+            emptyFieldTooltips2.push(
+              $t(
+                "addButtonInsideField",
+                "Add inside @parentBundle \xBB @fieldLabel..."
+              ).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel)
+            );
+          }
+        }
+      }
+    }
+    cached = {
+      canShowBeforeAfter,
+      emptyFieldKeys,
+      emptyFieldTooltips: emptyFieldTooltips2,
+      bundleLabel,
+      singleAllowedBundleLabel
+    };
+    blockStateCache.set(uuid, cached);
+  }
+  return cached;
+}
+onBlokkliEvent("state:reloaded", () => {
+  orientationCache.clear();
+  blockStateCache.clear();
+});
+function getCircleAtPoint(x, y) {
+  if (ui.artboardScale.value <= 0.4) {
+    return -1;
+  }
+  const effectiveScale = Math.max(ui.artboardScale.value, 0.5);
+  const radius = BUTTON_RADIUS / effectiveScale;
+  for (let i = 0; i < MAX_CIRCLES; i++) {
+    if (circleVisible[i] > 0) {
+      const cx = circlePositions[i * 2];
+      const cy = circlePositions[i * 2 + 1];
+      const dx = x - cx;
+      const dy = y - cy;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance <= radius) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+if (gl && programInfo && bufferInfo) {
+  defineRenderer("add-buttons", {
+    zIndex: 1e3,
+    enabled: () => {
+      if (selection.uuids.value.length !== 1) {
+        return false;
+      }
+      if (ui.openTooltip.value && ui.openTooltip.value !== "add-buttons") {
+        return false;
+      }
+      if (ui.hasTransformOverlayOpen.value) {
+        return false;
+      }
+      return true;
+    },
+    cursor: () => hoveredCircle.value >= 0 ? "pointer" : null,
+    onClick: ({ mouseArtboard }) => {
+      if (selection.uuids.value.length !== 1) {
+        return false;
+      }
+      const clickedCircle = getCircleAtPoint(mouseArtboard.x, mouseArtboard.y);
+      if (clickedCircle >= 0) {
+        const cx = circlePositions[clickedCircle * 2];
+        const cy = circlePositions[clickedCircle * 2 + 1];
+        if (clickedCircle === 0 || clickedCircle === 1) {
+          const position = clickedCircle === 0 ? "before" : "after";
+          emit("toggle", {
+            position,
+            coordinates: { x: cx, y: cy }
+          });
+        } else {
+          const fieldIndex = clickedCircle - 2;
+          emit("toggleField", {
+            index: fieldIndex,
+            coordinates: { x: cx, y: cy }
+          });
+        }
+        return true;
+      }
+      return false;
+    },
+    render: (ctx) => {
+      if (selection.isChangingOptions.value) {
+        return;
+      }
+      circleVisible.fill(0);
+      if (ctx.selectedUuids.length !== 1) {
+        return;
+      }
+      const uuid = ctx.selectedUuids[0];
+      if (!uuid) {
+        return;
+      }
+      const blockState = getBlockState(uuid);
+      if (blockState.canShowBeforeAfter) {
+        const blockRect = dom.getBlockRect(uuid);
+        if (!blockRect || blockRect.width === 0) {
+          return;
+        }
+        const orientation = getOrientationForUuid(uuid);
+        currentOrientation.value = orientation;
+        const BUTTON_SHIFT = 2 / ctx.artboardScale;
+        if (orientation === "horizontal") {
+          circlePositions[0] = blockRect.x - BUTTON_SHIFT;
+          circlePositions[1] = blockRect.y + blockRect.height / 2;
+          circleVisible[0] = 1;
+          circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
+          circlePositions[3] = blockRect.y + blockRect.height / 2;
+          circleVisible[1] = 1;
+        } else {
+          circlePositions[0] = blockRect.x + blockRect.width / 2;
+          circlePositions[1] = blockRect.y - BUTTON_SHIFT;
+          circleVisible[0] = 1;
+          circlePositions[2] = blockRect.x + blockRect.width / 2;
+          circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
+          circleVisible[1] = 1;
+        }
+      }
+      currentUuid.value = uuid;
+      currentBundleLabel.value = blockState.bundleLabel;
+      currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
+      if (blockState.emptyFieldKeys.length > 0) {
+        emptyFieldTooltips.value = blockState.emptyFieldTooltips;
+        for (let i = 0; i < blockState.emptyFieldKeys.length && i < 8; i++) {
+          const fieldKey = blockState.emptyFieldKeys[i];
+          if (!fieldKey) {
+            continue;
+          }
+          const fieldRect = dom.getFieldRect(fieldKey);
+          if (!fieldRect) {
+            continue;
+          }
+          const circleIndex = i + 2;
+          circlePositions[circleIndex * 2] = fieldRect.x + fieldRect.width / 2;
+          circlePositions[circleIndex * 2 + 1] = fieldRect.y + fieldRect.height / 2;
+          circleVisible[circleIndex] = 1;
+        }
+      } else {
+        emptyFieldTooltips.value = [];
+      }
+      hoveredCircle.value = getCircleAtPoint(
+        ctx.mouseArtboard.x,
+        ctx.mouseArtboard.y
+      );
+      gl.useProgram(programInfo.program);
+      setUniforms(programInfo, {
+        u_circle_positions: circlePositions,
+        u_circle_visible: circleVisible,
+        u_color: color.value,
+        u_color_hover: colorHover.value,
+        u_color_field: colorField.value,
+        u_color_field_hover: colorFieldHover.value,
+        u_hovered_circle: hoveredCircle.value,
+        u_radius: BUTTON_RADIUS
+      });
+      animation.setSharedUniforms(gl, programInfo);
+      setBuffersAndAttributes(gl, programInfo, bufferInfo);
+      drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
+    }
+  });
+}
+</script>
+
+<script>
+export default {
+  name: "AddButtonsRenderer"
+};
+</script>

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Renderer/index.vue.d.ts

@@ -0,0 +1,32 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggle: (data: {
+        position: "before" | "after";
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    }) => any;
+    toggleField: (data: {
+        index: number;
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onToggle?: ((data: {
+        position: "before" | "after";
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    }) => any) | undefined;
+    onToggleField?: ((data: {
+        index: number;
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Renderer/vertex.glsl

@@ -0,0 +1,102 @@
+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;
+
+// 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;
+
+// Circle positions (10 vec2s = 20 floats)
+uniform vec2 u_circle_positions[10];
+// Circle visibility (10 floats)
+uniform float u_circle_visible[10];
+// Hovered circle index (-1 for none)
+uniform float u_hovered_circle;
+// Button radius in pixels
+uniform float u_radius;
+
+// The transformed quad for the fragment shader.
+varying vec4 v_quad;
+varying vec2 v_circle_center;
+varying float v_visible;
+varying float v_is_hovered;
+varying float v_scale_fade;
+varying float v_rect_id;
+
+void main() {
+  int rectId = int(a_rect_id);
+
+  // Get circle position and visibility for this rect
+  vec2 circlePos = u_circle_positions[rectId];
+  v_visible = u_circle_visible[rectId];
+  v_is_hovered = float(rectId) == u_hovered_circle ? 1.0 : 0.0;
+  v_rect_id = a_rect_id;
+
+  // Calculate fade factor based on scale (fade from 1.0 at 0.5 to 0.0 at 0.4)
+  v_scale_fade = 1.0;
+  if (u_scale < 0.5) {
+    // Interpolate from 1.0 (at scale 0.5) to 0.0 (at scale 0.4)
+    v_scale_fade = (u_scale - 0.4) / (0.5 - 0.4);
+    v_scale_fade = clamp(v_scale_fade, 0.0, 1.0);
+  }
+
+  // Border width in pixels (must match fragment shader)
+  float borderWidth = 4.0;
+
+  // Circle radius in artboard space - apply inverse scaling to keep constant size
+  // Then multiply by fade factor
+  // Add border width to the radius so the border renders outside
+  float radius = (u_radius + borderWidth) / u_scale * v_scale_fade;
+
+  // Calculate quad bounds centered on circle position
+  float left = circlePos.x - radius;
+  float top = circlePos.y - radius;
+  float width = radius * 2.0;
+  float height = radius * 2.0;
+
+  // Determine which corner of the quad this vertex represents
+  // Normalize position within the dummy quad (0.0 to 1.0)
+  vec2 quadCorner = vec2(
+    (a_position.x - a_quad.x) / a_quad.z,
+    (a_position.y - a_quad.y) / a_quad.w
+  );
+
+  // Calculate actual vertex position in artboard space
+  vec2 vertexPos = vec2(
+    left + quadCorner.x * width,
+    top + quadCorner.y * height
+  );
+
+  // Apply global scale and offsets
+  vec2 offsetPosition = vertexPos * 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;
+
+  // Calculate transformed quad for fragment shader
+  v_quad = vec4(
+    (left * u_scale + u_offset_x) * u_dpi,
+    (u_resolution.y - top * u_scale - height * u_scale - u_offset_y) * u_dpi,
+    width * u_scale * u_dpi,
+    height * u_scale * u_dpi
+  );
+  v_circle_center = vec2(v_quad.x + v_quad.z / 2.0, v_quad.y + v_quad.w / 2.0);
+}