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

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

@@ -0,0 +1,24 @@
+<template>
+  <section class="bk-debug-section">
+    <h2 class="bk-debug-section-header" @click="toggle">
+      <span class="bk-debug-section-indicator">{{ isOpen ? "\u25BC" : "\u25B6" }}</span>
+      {{ title }}
+    </h2>
+    <div v-if="isOpen" class="bk-debug-section-content">
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+const props = defineProps({
+  title: { type: String, required: true },
+  defaultOpen: { type: Boolean, required: false }
+});
+const { storage } = useBlokkli();
+const isOpen = storage.use("debugSection" + props.title, false);
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+</script>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    title: string;
+    defaultOpen?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: 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>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,80 @@
+<template>
+  <PluginSidebar id="debug" title="Debug" icon="bug" weight="200">
+    <div class="bk bk-debug">
+      <DebugSection title="Keyboard">
+        <SectionKeyboard />
+      </DebugSection>
+
+      <DebugSection title="Selection">
+        <SectionSelection />
+      </DebugSection>
+
+      <DebugSection title="Rendering">
+        <SectionRendering />
+      </DebugSection>
+
+      <DebugSection title="Logging">
+        <SectionLogging :logger />
+      </DebugSection>
+
+      <DebugSection title="Icons">
+        <SectionIcons />
+      </DebugSection>
+
+      <DebugSection title="Features">
+        <SectionFeatures />
+      </DebugSection>
+    </div>
+  </PluginSidebar>
+
+  <PluginDebugOverlay id="viewport" title="Show viewport overlay">
+    <DebugViewport />
+  </PluginDebugOverlay>
+
+  <PluginDebugOverlay id="rects" title="Show field and block rects">
+    <DebugRects />
+  </PluginDebugOverlay>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+import { PluginSidebar, PluginDebugOverlay } from "#blokkli/plugins";
+import DebugSection from "./DebugSection.vue";
+import SectionKeyboard from "./Section/Keyboard.vue";
+import SectionSelection from "./Section/Selection.vue";
+import SectionRendering from "./Section/Rendering.vue";
+import SectionLogging from "./Section/Logging.vue";
+import SectionIcons from "./Section/Icons.vue";
+import SectionFeatures from "./Section/Features.vue";
+import DebugViewport from "./Viewport/index.vue";
+import DebugRects from "./Rects/index.vue";
+import defineItemDropdownAction from "#blokkli/helpers/composables/defineItemDropdownAction";
+defineProps({
+  logger: { type: Object, required: true }
+});
+const { selection } = useBlokkli();
+async function copyUuid() {
+  const uuid = selection.uuids.value.at(0);
+  if (!uuid) {
+    return;
+  }
+  const type = "text/plain";
+  const clipboardItemData = {
+    [type]: uuid
+  };
+  const clipboardItem = new ClipboardItem(clipboardItemData);
+  await navigator.clipboard.write([clipboardItem]);
+}
+defineItemDropdownAction(() => {
+  if (selection.uuids.value.length === 1) {
+    return {
+      id: "debug-copy-uuid",
+      label: "Copy UUID",
+      icon: "bug",
+      group: "debug",
+      weight: 200,
+      callback: copyUuid
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+  <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>
+</template>
+
+<script setup>
+import { useBlokkli, computed } from "#imports";
+const { features } = useBlokkli();
+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
+    };
+  });
+});
+</script>

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

@@ -0,0 +1,15 @@
+<template>
+  <div class="bk-debug-icons">
+    <div v-for="icon in iconItems" :key="icon">
+      <Icon :name="icon" />
+      <p>{{ icon }}</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { Icon } from "#blokkli/components";
+import { icons } from "#blokkli-build/icons";
+const iconItems = computed(() => Object.keys(icons));
+</script>

package/dist/runtime/components/Edit/Features/Debug/Section/Icons.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/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/{Selection/OverlayFallback/index.vue.d.ts → Debug/Section/Logging.vue.d.ts}

@@ -1,5 +1,6 @@
+import type { DebugLogger } from '#blokkli/helpers/debugProvider';
 type __VLS_Props = {
-    uuids: string[];
+    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/index.vue

@@ -2,18 +2,20 @@
   <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-show="activeLabel"
+      class="bk bk-dragging-overlay-label"
+      :style="{ backgroundColor: currentActiveColor }"
+    >
+      <Icon name="cursor-move" />
+      <p v-html="currentActiveLabel" />
+    </div>
     <div
       v-for="(rect, i) in rects"
       :key="i"
@@ -66,17 +68,10 @@ import {
   lerp,
   falsy
 } from "#blokkli/helpers";
-import { Icon, ItemIcon, BlokkliTransition } from "#blokkli/components";
+import { Icon, ItemIcon } 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();
+const { dom, ui, animation, theme, types } = useBlokkli();
 const props = defineProps({
   items: { type: Array, required: true },
   x: { type: Number, required: true },
@@ -86,6 +81,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(
@@ -204,15 +202,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,

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

@@ -0,0 +1,80 @@
+#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;
+
+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);
+
+  // 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;
+    fragColor = vec4(v_color, a);
+    return;
+  } else if (adjustedAlphaFill > 0.0) {
+    fragColor = vec4(v_color, adjustedAlphaFill);
+    return;
+  }
+
+  discard;
+}