@blokkli/editor 2.0.0-alpha.21 → 2.0.0-alpha.23

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

@@ -1,240 +0,0 @@
-<template>
-  <PluginSidebar id="debug" title="Debug" icon="bug" weight="200">
-    <div class="bk bk-debug">
-      <section>
-        <h2>Keyboard</h2>
-        <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>
-      </section>
-
-      <section>
-        <h2>Selection</h2>
-        <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>
-      </section>
-
-      <section>
-        <h2>Rendering</h2>
-        <div class="bk-debug-list">
-          <div>
-            <div>DPI</div>
-            <div>{{ animation.dpi.value }}</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>
-            <FormToggle
-              label="Enable WebGL"
-              :model-value="animation.webglEnabled.value"
-              @update:model-value="toggleWebgl"
-            />
-          </div>
-          <div>
-            <button
-              class="bk-button bk-is-small"
-              @click.prevent="() => dom.updateVisibleRects()"
-            >
-              Refresh Rects
-            </button>
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Logging</h2>
-        <div class="bk-debug-list">
-          <div>
-            <div>
-              <FormToggle v-model="logEvents" label="Log Events" />
-            </div>
-            <div>
-              <button
-                class="bk-button bk-is-small"
-                @click.prevent="() => console.log(dom.getDebugData())"
-              >
-                Log DOM state
-              </button>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Icons</h2>
-        <div class="bk-debug-icons">
-          <div v-for="icon in iconItems" :key="icon">
-            <Icon :name="icon" />
-            <p>{{ icon }}</p>
-          </div>
-        </div>
-      </section>
-
-      <section>
-        <h2>Features</h2>
-        <div class="bk-debug-features">
-          <div v-for="feature in featuresList" :key="feature.id">
-            <div>
-              <span
-                class="bk-status-indicator"
-                :class="feature.mounted ? 'bk-is-success' : 'bk-is-danger'"
-              />
-            </div>
-            <div>
-              <h3>{{ feature.label }}</h3>
-              <div>{{ feature.id }}</div>
-              <p>{{ feature.description }}</p>
-            </div>
-          </div>
-        </div>
-      </section>
-    </div>
-  </PluginSidebar>
-
-  <PluginDebugOverlay id="viewport" title="Show viewport overlay">
-    <DebugViewport />
-  </PluginDebugOverlay>
-
-  <PluginDebugOverlay id="rects" title="Show field and block rects">
-    <DebugRects />
-  </PluginDebugOverlay>
-
-  <PluginItemDropdown
-    v-if="itemDropdownItems.length"
-    id="selection"
-    :title="$t('selectionActionGroupTitle', 'Selection')"
-    enabled
-    :items="itemDropdownItems"
-    icon="bug"
-    weight="200"
-    @select="onSelectDropdownItem"
-  />
-</template>
-
-<script setup>
-import { useBlokkli, onMounted, onBeforeUnmount, computed } from "#imports";
-import {
-  PluginSidebar,
-  PluginDebugOverlay,
-  PluginItemDropdown
-} from "#blokkli/plugins";
-import { Icon, FormToggle } from "#blokkli/components";
-import { icons } from "#blokkli-build/icons";
-import DebugViewport from "./Viewport/index.vue";
-import DebugRects from "./Rects/index.vue";
-const { logger } = defineProps({
-  logger: { type: Object, required: true }
-});
-const {
-  keyboard,
-  selection,
-  eventBus,
-  features,
-  debug,
-  ui,
-  animation,
-  dom,
-  storage,
-  $t
-} = useBlokkli();
-const logEvents = storage.use("debug:log-events", true);
-const iconItems = computed(() => Object.keys(icons));
-const featuresList = computed(() => {
-  return features.features.value.map((v) => {
-    const feature = features.mountedFeatures.value.find((f) => f.id === v.id);
-    return {
-      id: v.id,
-      label: v.label,
-      description: v.description,
-      dependencies: v.dependencies?.join(", "),
-      mounted: !!feature
-    };
-  });
-});
-const onEvent = (name, data) => {
-  if (!logEvents.value) {
-    return;
-  }
-  if (name === "animationFrame" || name === "animationFrame:before" || name === "animationFrame:after" || name === "canvas:draw") {
-    return;
-  }
-  logger.log("Event: " + String(name), data);
-};
-function toggleTransforming() {
-  if (ui.isTransforming.value) {
-    ui.setTransform();
-  } else {
-    ui.setTransform("Transform plugin label");
-  }
-}
-function toggleWebgl() {
-  if (animation.webglEnabled.value) {
-    animation.webglEnabled.value = false;
-  } else {
-    animation.webglEnabled.value = true;
-  }
-}
-onMounted(() => {
-  eventBus.on("*", onEvent);
-});
-onBeforeUnmount(() => {
-  eventBus.off("*", onEvent);
-});
-const itemDropdownItems = computed(() => {
-  if (selection.uuids.value.length === 1) {
-    return [
-      {
-        id: "copy-uuid",
-        label: "Copy UUID"
-      }
-    ];
-  }
-  return [];
-});
-async function onSelectDropdownItem(item) {
-  if (item.id === "copy-uuid") {
-    const type = "text/plain";
-    const clipboardItemData = {
-      [type]: selection.uuids.value.at(0) ?? ""
-    };
-    const clipboardItem = new ClipboardItem(clipboardItemData);
-    await navigator.clipboard.write([clipboardItem]);
-  }
-}
-</script>

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

@@ -1,96 +0,0 @@
-precision highp float;
-
-varying float v_intersecting;
-varying float v_is_hover_area;
-varying vec4 v_quad;
-varying vec3 v_color;
-
-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;
-  float stroke = isHoverArea ? 0.75 : 2.0;
-  float radiusBase = stroke * u_scale;
-
-  float thickness = max(min(1.0 * u_scale, 3.0), 0.5);
-
-  // Calculate the resulting inset so that we draw the rounded box and border *inside* the quad (vs. that it would bleed outside the quad).
-  float inset = max(min(2.0 * u_scale, 1.0), 3.0) * thickness + stroke;
-
-  // Rectangle dimensions with inset.
-  float u_rect_x = v_quad.x + inset;
-  float u_rect_y = v_quad.y + inset;
-  float u_rectWidth = v_quad.z - 2.0 * inset;
-  float u_rectHeight = v_quad.w - 2.0 * inset;
-
-  vec2 size = vec2(u_rectWidth, u_rectHeight);
-
-  // Center position of the rectangle.
-  vec2 offsetPosition = vec2(u_rect_x + size.x / 2.0, u_rect_y + size.y / 2.0);
-  vec2 location = offsetPosition;
-
-  // Make sure the edges of the border are not too harsh.
-  float edgeSoftness = 0.5 * u_dpi;
-
-  float borderWidth = stroke * u_scale * u_dpi;
-
-  // Different radius for inner and outer.
-  float radiusOutside =
-    min(radiusBase * u_dpi, min(size.x, size.y)) + thickness;
-  float radiusInside = radiusOutside - borderWidth;
-
-  vec2 sizeInner = size - 2.0 * borderWidth;
-
-  // Compute different distance for inside and outside.
-  float distanceOuter = roundedBoxSDF(
-    location - gl_FragCoord.xy,
-    size / 2.0,
-    radiusOutside
-  );
-  float distanceInner = roundedBoxSDF(
-    location - gl_FragCoord.xy,
-    sizeInner / 2.0,
-    radiusInside
-  );
-
-  float alphaOuter =
-    1.0 - smoothstep(-edgeSoftness, edgeSoftness, distanceOuter - thickness);
-  float alphaInner =
-    1.0 - smoothstep(-edgeSoftness, edgeSoftness, distanceInner - thickness);
-
-  // Alpha value for the border.
-  float alphaBorder = clamp(alphaOuter - alphaInner, 0.0, 1.0);
-
-  // Adjust alphas based on intersection.
-  float adjustedAlphaFill =
-    v_intersecting >= 0.5
-      ? alphaInner * 0.95
-      : alphaInner * 0.2;
-
-  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;
-    gl_FragColor = vec4(v_color, a);
-    return;
-  } else if (adjustedAlphaFill > 0.0) {
-    gl_FragColor = vec4(v_color, adjustedAlphaFill);
-    return;
-  }
-
-  discard;
-}

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

@@ -1,139 +0,0 @@
-precision highp float;
-
-varying vec4 v_quad;
-varying vec4 v_rect_radius;
-varying vec2 v_rect_size;
-varying vec2 v_rect_center;
-varying float v_rect_type;
-varying vec2 v_quad_artboard_pos;
-
-uniform float u_dpi;
-uniform float u_scale;
-uniform float u_offset_x;
-uniform float u_offset_y;
-uniform vec2 u_resolution;
-uniform vec3 u_color_mono;
-uniform vec3 u_color_accent;
-uniform vec3 u_color_teal;
-uniform vec3 u_color_white;
-uniform vec3 u_color_lime;
-
-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() {
-  vec2 size = v_rect_size;
-  vec4 u_cornerRadii = min(v_rect_radius, min(size.x, size.y) / 2.0);
-  vec4 r = u_cornerRadii;
-
-  vec2 posRelativeToQuad = gl_FragCoord.xy - v_rect_center;
-
-  float mainDist = sdRoundBox(posRelativeToQuad, size / 2.0, r);
-
-  // For editable fields (type 2), render both fill and solid border
-  if (v_rect_type > 1.5 && v_rect_type < 2.5) {
-    float u_edgeSoftness = 1.0;
-    float borderThickness = 1.5 * u_dpi;
-    float u_borderSoftness = 1.0;
-
-    // Render fill
-    float fillAlpha = 1.0 - smoothstep(-u_edgeSoftness, 0.0, mainDist);
-    vec4 fillColor = vec4(u_color_teal, 0.2);
-
-    // Render solid border (non-dashed)
-    float borderAlpha =
-      1.0 - smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - borderThickness);
-    vec4 borderColor = vec4(u_color_teal, 1.0);
-
-    // Combine fill and border
-    vec4 combined = mix(
-      vec4(fillColor.rgb, fillAlpha * fillColor.a),
-      borderColor,
-      borderAlpha * borderColor.a
-    );
-
-    gl_FragColor = combined;
-    return;
-  }
-
-  // For blocks (type 0, 1, and 3), render border
-  float borderThickness = 1.5 * u_dpi;
-  float u_borderSoftness = 1.0;
-
-  float borderAlpha =
-    1.0 - smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - borderThickness);
-
-  // Select color based on type: 0 = mono, 1 = accent, 3 = white (inverted), 4 = lime (library)
-  vec3 color = u_color_mono;
-  if (v_rect_type > 3.5) {
-    color = u_color_lime;
-  } else if (v_rect_type > 2.5) {
-    color = u_color_white;
-  } else if (v_rect_type > 0.5) {
-    color = u_color_accent;
-  }
-
-  // Apply dashed pattern for all blocks
-  // Calculate actual perimeter distance for proper dashing
-  vec2 halfSize = size / 2.0;
-  vec2 p = posRelativeToQuad;
-  vec2 absP = abs(p);
-
-  // Determine which edge/corner we're on and calculate perimeter distance
-  float perimeterDistance = 0.0;
-
-  // Check which edge we're closest to
-  float dx = absP.x - halfSize.x;
-  float dy = absP.y - halfSize.y;
-
-  if (dy > dx) {
-    // Top or bottom edge
-    if (p.y > 0.0) {
-      // Bottom edge: start at bottom-left, go right
-      perimeterDistance = size.x + size.y + (p.x + halfSize.x);
-    } else {
-      // Top edge: start at top-right, go left
-      perimeterDistance = size.x + (halfSize.x - p.x);
-    }
-  } else {
-    // Left or right edge
-    if (p.x > 0.0) {
-      // Right edge: start at top-right, go down
-      perimeterDistance = p.y + halfSize.y;
-    } else {
-      // Left edge: start at bottom-left, go up
-      perimeterDistance = size.x + size.y + size.x + (halfSize.y - p.y);
-    }
-  }
-
-  float dashWidth = 7.0 * u_dpi;
-  float dashGap = 7.0 * u_dpi;
-  float dashCycle = dashWidth + dashGap;
-
-  float dashPosition = mod(perimeterDistance, dashCycle);
-  float dashFactor = step(dashPosition, dashWidth);
-
-  // Only show dashes
-  borderAlpha *= dashFactor;
-
-  vec4 borderColor = vec4(color, 1.0);
-  vec4 finalColor = mix(
-    vec4(0.0, 0.0, 0.0, 0.0),
-    borderColor,
-    borderAlpha * borderColor.a
-  );
-
-  gl_FragColor = finalColor;
-}

package/dist/runtime/components/Edit/Features/Selection/OverlayFallback/index.vue

@@ -1,42 +0,0 @@
-<template>
-  <Teleport :to="artboard">
-    <div class="bk bk-selection-overlay-fallback">
-      <div
-        v-for="item in items"
-        :key="item.uuid"
-        :style="{
-  top: item.rect.y + 'px',
-  left: item.rect.x + 'px',
-  width: item.rect.width + 'px',
-  height: item.rect.height + 'px'
-}"
-      />
-    </div>
-  </Teleport>
-</template>
-
-<script setup>
-import { falsy } from "#blokkli/helpers";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { useBlokkli, computed } from "#imports";
-const props = defineProps({
-  uuids: { type: Array, required: true }
-});
-const { ui, dom, blocks } = useBlokkli();
-const artboard = ui.artboardElement();
-const items = computed(() => {
-  return props.uuids.map((uuid) => {
-    const block = blocks.getBlock(uuid);
-    if (!block) {
-      return null;
-    }
-    const rect = dom.getBlockRect(uuid);
-    if (!rect) {
-      return null;
-    }
-    return { uuid, rect };
-  }).filter(falsy);
-});
-onBlokkliEvent("animationFrame", function() {
-});
-</script>