@blokkli/editor 2.0.0-alpha.4 → 2.0.0-alpha.41

package/dist/runtime/editor/features/selection/Renderer/fragment.glsl

@@ -0,0 +1,147 @@
+#version 300 es
+
+precision highp float;
+
+in vec4 v_quad;
+in vec3 v_color;
+in vec4 v_rect_radius;
+in float v_thickness;
+in float v_rect_id;
+in vec2 v_rect_size;
+in vec2 v_rect_center;
+in float v_rect_width;
+
+in float v_transition;
+// Optimized varyings calculated in vertex shader
+in float v_stripe_distance;
+in vec4 v_base_scaled_radius;
+
+out vec4 fragColor;
+
+uniform float u_dpi;
+uniform float u_time;
+uniform float u_is_transforming;
+uniform float u_opacity;
+uniform vec2 u_resolution;
+
+#define PI 3.141592653589793
+
+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;
+}
+
+float bounceOut(float t) {
+  const float a = 4.0 / 11.0;
+  const float b = 8.0 / 11.0;
+  const float c = 9.0 / 10.0;
+
+  const float ca = 4356.0 / 361.0;
+  const float cb = 35442.0 / 1805.0;
+  const float cc = 16061.0 / 1805.0;
+
+  float t2 = t * t;
+
+  return t < a
+    ? 7.5625 * t2
+    : t < b
+      ? 9.075 * t2 - 9.9 * t + 3.4
+      : t < c
+        ? ca * t2 - cb * t + cc
+        : 10.8 * t * t - 20.52 * t + 10.72;
+}
+
+float exponentialIn(float t) {
+  return t == 0.0
+    ? t
+    : pow(2.0, 10.0 * (t - 1.0));
+}
+
+float getStripePattern(vec2 quadRelativePos, float time) {
+  float d = v_stripe_distance;
+
+  float t = mod(u_time + v_rect_id * 1000.0, 1200.0) / 1200.0;
+
+  float movement = t * 2.0 * PI;
+
+  float normalizedSin =
+    (sin((quadRelativePos.y + quadRelativePos.x) / d + movement + v_rect_id) +
+      1.0) /
+    2.0;
+
+  return normalizedSin * 0.2 + 0.5;
+}
+
+vec4 drawBox(float thickness, vec4 bg, vec4 fill, vec4 border, float offset) {
+  float borderThickness = max(thickness, 2.0);
+
+  float t = exponentialIn(
+    (sin(u_time / 270.0 - v_rect_id + offset) + 1.0) / 2.0
+  );
+
+  // Smoothly transition borderThickness animation
+  float animatedThickness = (t * 0.7 + 0.5) * borderThickness;
+  borderThickness = mix(borderThickness, animatedThickness, u_is_transforming);
+
+  vec2 size = v_rect_size + borderThickness * 2.0 * v_transition;
+  float u_edgeSoftness = 1.0 + v_transition;
+  vec4 radius = v_base_scaled_radius + vec4(borderThickness);
+  vec4 u_cornerRadii = min(radius, min(size.x, size.y) / 2.0) * v_transition;
+  float u_borderSoftness = 1.0 + v_transition;
+
+  vec4 r = u_cornerRadii;
+
+  vec2 posRelativeToQuad = gl_FragCoord.xy - v_rect_center;
+
+  float mainDist = sdRoundBox(posRelativeToQuad, size / 2.0, r);
+  float innerDist = mainDist;
+
+  float fillAlpha = 1.0 - smoothstep(-u_edgeSoftness, 0.0, innerDist);
+  float borderAlpha =
+    1.0 - smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - borderThickness);
+
+  // Smoothly transition stripe pattern
+  vec4 stripedFill = vec4(1.0, 1.0, 1.0, 0.0);
+  vec4 animatedStripedFill = fill;
+  animatedStripedFill.a = getStripePattern(posRelativeToQuad, u_time);
+  stripedFill = mix(stripedFill, animatedStripedFill, u_is_transforming);
+
+  // Smoothly transition borderAlpha modification
+  float animatedBorderAlpha = borderAlpha * (t + 0.6);
+  borderAlpha = mix(borderAlpha, animatedBorderAlpha, u_is_transforming);
+
+  vec4 res_with_fill = mix(bg, stripedFill, fillAlpha * stripedFill.a);
+  return mix(res_with_fill, border, borderAlpha * border.a);
+}
+
+void main() {
+  vec4 borderBottom = drawBox(
+    v_transition * (v_thickness * 2.0),
+    vec4(v_color, 0.0),
+    vec4(v_color, 0.5),
+    vec4(v_color, 0.4),
+    0.0
+  );
+
+  vec4 borderTop = drawBox(
+    v_thickness,
+    vec4(v_color, 0.0),
+    vec4(v_color, 0.0),
+    vec4(v_color, 1.0),
+    -0.2
+  );
+
+  vec4 finalColor = mix(borderBottom, borderTop, borderTop.a);
+  finalColor.a *= u_opacity;
+  fragColor = finalColor;
+}

package/dist/runtime/editor/features/selection/Renderer/index.d.vue.ts

@@ -0,0 +1,10 @@
+import type { RenderedFieldListItem } from '#blokkli/editor/types/field';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    blocks: RenderedFieldListItem[];
+    hasHostSelected: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    blocks: RenderedFieldListItem[];
+    hasHostSelected: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/selection/Renderer/index.vue

@@ -0,0 +1,283 @@
+<template>
+  <div />
+</template>
+
+<script setup>
+import { useBlokkli, 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/editor/helpers/webgl";
+import { toShaderColor } from "#blokkli/editor/helpers/color";
+import {
+  defineRenderer,
+  onBlokkliEvent,
+  useTransitionedValue
+} from "#blokkli/editor/composables";
+const props = defineProps({
+  blocks: { type: Array, required: true },
+  hasHostSelected: { type: Boolean, required: true }
+});
+const { animation, theme, dom, ui, state } = useBlokkli();
+class SelectionRectangleBufferCollector extends RectangleBufferCollector {
+  uuids = [];
+  lastCount = 0;
+  prevKey = "";
+  getBufferInfo(gl, force) {
+    const key = props.blocks.map((block) => {
+      const uuid = block.uuid;
+      const rect = dom.getBlockRect(uuid);
+      if (!rect) {
+        return uuid + "no_rect";
+      }
+      return uuid + rect.time;
+    }).join("_") + "_host_" + props.hasHostSelected;
+    const hasChanged = force || this.prevKey !== key;
+    if (hasChanged) {
+      this.reset();
+      this.lastCount = 0;
+      if (props.hasHostSelected) {
+        this.addRectangle(
+          {
+            id: "host",
+            height: ui.artboardSize.value.height,
+            width: ui.artboardSize.value.width,
+            x: 0,
+            y: 0,
+            radius: [0, 0, 0, 0],
+            isInverted: false,
+            isFromLibrary: false
+          },
+          3
+          // Type 3 = host selection
+        );
+        this.lastCount++;
+      }
+      for (let i = 0; i < props.blocks.length; i++) {
+        const block = props.blocks[i];
+        if (this.added.has(block.uuid)) {
+          continue;
+        }
+        this.added.add(block.uuid);
+        const el = dom.getDragElement(block);
+        const rect = dom.getBlockRect(block.uuid);
+        if (!rect || !el) {
+          continue;
+        }
+        const style = ui.lowPerformanceMode.value ? null : theme.getDraggableStyle(el);
+        const isFromLibrary = state.fromLibraryUuids.value.includes(block.uuid);
+        let type = 0;
+        if (isFromLibrary) {
+          type = 2;
+        } else if (style?.isInverted) {
+          type = 1;
+        }
+        this.addRectangle(
+          {
+            id: block.uuid,
+            height: rect.height,
+            width: rect.width,
+            x: rect.x,
+            y: rect.y,
+            radius: style?.radius ?? [0, 0, 0, 0],
+            isInverted: !!style?.isInverted,
+            isFromLibrary
+          },
+          type
+        );
+        this.lastCount++;
+      }
+      this.prevKey = key;
+    }
+    if (hasChanged && gl) {
+      this.bufferInfo = this.createBufferInfo(gl);
+    }
+    return { info: this.bufferInfo, hasChanged };
+  }
+}
+const hasTransformingStyle = computed(
+  () => ui.hasTransformOverlayOpen.value || ui.isTransforming.value
+);
+const selectionColorOverride = computed(() => {
+  const color = ui.selectionColor.value;
+  if (!color) {
+    return null;
+  }
+  if (color === "mono") {
+    return theme.getColor(color, "500");
+  } else if (color === "accent") {
+    return theme.getColor(color, "700");
+  }
+  return theme.getColor(color, "normal");
+});
+const getColorDefault = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
+  if (hasTransformingStyle.value) {
+    return theme.orange.value.normal;
+  }
+  return theme.accent.value[600];
+});
+const getColorInverted = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
+  if (hasTransformingStyle.value) {
+    return theme.orange.value.normal;
+  }
+  return [255, 255, 255];
+});
+const getColorLibrary = useTransitionedValue(() => {
+  if (selectionColorOverride.value) {
+    return selectionColorOverride.value;
+  }
+  if (hasTransformingStyle.value) {
+    return theme.orange.value.normal;
+  }
+  return theme.lime.value.normal;
+});
+const getColorHost = useTransitionedValue(() => {
+  return theme.mono.value[700];
+});
+const getTransforming = useTransitionedValue(() => {
+  return ui.isTransforming.value ? 1 : 0;
+});
+const { collector } = defineRenderer("selection-overlay", {
+  zIndex: 100,
+  collector: () => new SelectionRectangleBufferCollector(),
+  program: () => ({ shaders: [vs, fs] }),
+  render: (ctx, gl, program) => {
+    gl.useProgram(program.program);
+    const { info } = collector.getBufferInfo(gl);
+    if (!info) {
+      return;
+    }
+    setUniforms(program, {
+      u_color_default: toShaderColor(getColorDefault()),
+      u_color_inverted: toShaderColor(getColorInverted()),
+      u_color_library: toShaderColor(getColorLibrary()),
+      u_color_host: toShaderColor(getColorHost()),
+      u_artboard_size: [
+        ui.artboardSize.value.width,
+        ui.artboardSize.value.height
+      ],
+      u_is_transforming: getTransforming(),
+      u_opacity: ctx.changeOptionsTransition,
+      u_time: ctx.time
+    });
+    animation.setSharedUniforms(gl, program);
+    setBuffersAndAttributes(gl, program, info);
+    drawBufferInfo(gl, info, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    collector.getBufferInfo();
+    const rects = Object.values(collector.rects);
+    if (rects.length === 0) {
+      return;
+    }
+    ctx2d.globalAlpha = ctx.changeOptionsTransition;
+    const rgbaToCss = (rgb) => {
+      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    };
+    const colorDefault = rgbaToCss(getColorDefault());
+    const colorInverted = rgbaToCss(getColorInverted());
+    const colorLibrary = rgbaToCss(getColorLibrary());
+    const colorHost = rgbaToCss(getColorHost());
+    const smoothstepValue = Math.max(
+      0,
+      Math.min(1, (ctx.artboardScale - 0.3) / 0.7)
+    );
+    const thickness = (0.5 + smoothstepValue * 2.5) * ctx.dpi;
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+      let strokeColor = colorDefault;
+      if (rect.isFromLibrary) {
+        strokeColor = colorLibrary;
+      } else if (rect.isInverted) {
+        strokeColor = colorInverted;
+      } else if (rect.id === "host") {
+        strokeColor = colorHost;
+      }
+      ctx2d.strokeStyle = strokeColor;
+      ctx2d.lineWidth = thickness;
+      const viewportX = (rect.x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
+      const viewportY = (rect.y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
+      const viewportWidth = rect.width * ctx.artboardScale * ctx.dpi;
+      const viewportHeight = rect.height * ctx.artboardScale * ctx.dpi;
+      const maxRadius = Math.min(viewportWidth, viewportHeight) / 2;
+      const rtl = Math.min(
+        rect.radius[0] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      const rtr = Math.min(
+        rect.radius[1] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      const rbr = Math.min(
+        rect.radius[2] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      const rbl = Math.min(
+        rect.radius[3] * ctx.artboardScale * ctx.dpi,
+        maxRadius
+      );
+      ctx2d.beginPath();
+      ctx2d.moveTo(viewportX + rtl, viewportY);
+      ctx2d.lineTo(viewportX + viewportWidth - rtr, viewportY);
+      if (rtr > 0) {
+        ctx2d.arcTo(
+          viewportX + viewportWidth,
+          viewportY,
+          viewportX + viewportWidth,
+          viewportY + rtr,
+          rtr
+        );
+      }
+      ctx2d.lineTo(viewportX + viewportWidth, viewportY + viewportHeight - rbr);
+      if (rbr > 0) {
+        ctx2d.arcTo(
+          viewportX + viewportWidth,
+          viewportY + viewportHeight,
+          viewportX + viewportWidth - rbr,
+          viewportY + viewportHeight,
+          rbr
+        );
+      }
+      ctx2d.lineTo(viewportX + rbl, viewportY + viewportHeight);
+      if (rbl > 0) {
+        ctx2d.arcTo(
+          viewportX,
+          viewportY + viewportHeight,
+          viewportX,
+          viewportY + viewportHeight - rbl,
+          rbl
+        );
+      }
+      ctx2d.lineTo(viewportX, viewportY + rtl);
+      if (rtl > 0) {
+        ctx2d.arcTo(viewportX, viewportY, viewportX + rtl, viewportY, rtl);
+      }
+      ctx2d.closePath();
+      ctx2d.stroke();
+    }
+    ctx2d.globalAlpha = 1;
+  }
+});
+onBlokkliEvent("ui:resized", function() {
+  collector.reset();
+});
+onBlokkliEvent("state:reloaded", function() {
+  collector.reset();
+});
+</script>
+
+<script>
+export default {
+  name: "SelectionOverlay"
+};
+</script>

package/dist/runtime/editor/features/selection/Renderer/index.vue.d.ts

@@ -0,0 +1,10 @@
+import type { RenderedFieldListItem } from '#blokkli/editor/types/field';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    blocks: RenderedFieldListItem[];
+    hasHostSelected: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    blocks: RenderedFieldListItem[];
+    hasHostSelected: boolean;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/selection/Renderer/vertex.glsl

@@ -0,0 +1,108 @@
+#version 300 es
+
+precision highp float;
+
+// [x, y] position.
+in vec2 a_position;
+// The [x,y,width, height] of the quad the vertex belongs to.
+in vec4 a_quad;
+in float a_rect_id;
+in float a_rect_type;
+in vec4 a_rect_radius;
+
+// 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_default;
+uniform vec3 u_color_inverted;
+uniform vec3 u_color_library;
+uniform vec3 u_color_host;
+
+// The transformed quad for the fragment shader.
+out vec4 v_quad;
+out vec3 v_color;
+out vec4 v_rect_radius;
+out float v_thickness;
+out vec2 v_rect_size;
+out vec2 v_rect_center;
+out float v_transition;
+out float v_rect_id;
+out float v_rect_width;
+// Optimized varyings calculated in vertex shader
+out float v_stripe_distance;
+out vec4 v_base_scaled_radius;
+
+void main() {
+  // Define the increase size in viewport terms (not affected by u_scale)
+  float thickness = (0.5 + smoothstep(0.3, 1.0, u_scale) * 2.5) * u_dpi;
+  float increaseSize = max(thickness, 25.0);
+
+  // Calculate the new dimensions of the quad
+  vec4 adjusted_quad = a_quad;
+  adjusted_quad.z += 2.0 * increaseSize; // increase width by 20px
+  adjusted_quad.w += 2.0 * increaseSize; // increase height by 20px
+
+  // Adjust vertex positions to scale from the center of the rectangle
+  // Calculate the center of the original quad
+  vec2 center = vec2(a_quad.x + a_quad.z / 2.0, a_quad.y + a_quad.w / 2.0);
+
+  // Adjust vertices to reflect new size
+  // Calculate new offset from center based on original vertex position relative to center
+  vec2 newOffset =
+    (a_position - center) *
+    (vec2(adjusted_quad.z, adjusted_quad.w) / vec2(a_quad.z, a_quad.w));
+
+  // New position is center plus the new offset
+  vec2 newPosition = center + newOffset;
+
+  // Apply global scale and offsets
+  vec2 offsetPosition = newPosition * 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;
+
+  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_width = adjusted_quad.x;
+
+  // Set color based on type: 0=default, 1=inverted, 2=library, 3=host
+  v_color = u_color_default;
+  if (a_rect_type > 2.5) {
+    v_color = u_color_host;
+  } else if (a_rect_type > 1.5) {
+    v_color = u_color_library;
+  } else if (a_rect_type > 0.5) {
+    v_color = u_color_inverted;
+  }
+  v_rect_radius = a_rect_radius * u_dpi;
+  v_thickness = thickness;
+  v_rect_id = a_rect_id;
+  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); // The pixel-space rectangle center location
+  v_transition = smoothstep(0.5, 0.8, u_scale);
+
+  // Calculate optimized values once per vertex
+  v_stripe_distance = 300.0 * u_scale;
+  v_base_scaled_radius = v_rect_radius * u_scale;
+}

package/dist/runtime/editor/features/selection/index.d.vue.ts

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