@blokkli/editor 2.0.0-alpha.53 → 2.0.0-alpha.55

package/dist/runtime/editor/features/debug/Main.vue

@@ -78,3 +78,171 @@ defineItemDropdownAction(() => {
   }
 });
 </script>
+
+<style>
+.bk .bk-debug .bk-debug-section {
+    border-bottom-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1))
+}
+  .bk .bk-debug .bk-debug-section-header {
+    display: flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    gap: 5px;
+    padding: 20px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 600;
+    text-transform: uppercase
+}
+  .bk .bk-debug .bk-debug-section-header:hover {
+    opacity: 0.8
+}
+  .bk .bk-debug .bk-debug-section-content {
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 20px
+}
+  .bk .bk-debug .bk-debug-section-indicator {
+    display: inline-block;
+    width: 15px;
+    font-size: 12px;
+    line-height: 16px
+}
+  .bk .bk-debug .bk-debug-list > div {
+    display: flex;
+    justify-content: space-between
+}
+  .bk .bk-debug .bk-debug-list > div:not(:last-child) {
+    margin-bottom: 5px
+}
+  .bk .bk-debug .bk-debug-features h3 {
+    font-weight: 700
+}
+  .bk .bk-debug .bk-debug-features p {
+    font-size: 14px;
+    line-height: 20px
+}
+  .bk .bk-debug .bk-debug-features > div {
+    display: flex;
+    gap: 5px;
+    border-bottom-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+    padding-top: 10px;
+    padding-bottom: 10px
+}
+
+.bk .bk-debug-visible-viewport {
+    pointer-events: none;
+    position: fixed;
+    z-index: 999999999999;
+    border-width: 3px;
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
+    background-color: rgb(var(--bk-theme-red-normal) / 0.1)
+}
+
+.bk .bk-debug-visible-viewport > div {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+    padding: 2px;
+    font-size: 12px;
+    line-height: 16px;
+    --bk-tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
+}
+
+.bk .bk-debug-intersection-rects {
+    pointer-events: none;
+    position: fixed;
+    z-index: 999999999999;
+    background-color: rgb(var(--bk-theme-yellow-normal) / 0.25);
+    outline-style: solid;
+    outline-offset: -1px;
+    outline-color: rgb(var(--bk-theme-yellow-normal) / 1)
+}
+
+.bk .bk-debug-visible-viewport-padded {
+    pointer-events: none;
+    position: fixed;
+    z-index: 9999999;
+    border-width: 3px;
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1))
+}
+
+.bk .bk-debug-visible-viewport-padded > div {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+    padding: 2px;
+    font-size: 12px;
+    line-height: 16px;
+    --bk-tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
+}
+
+.bk .bk-debug-viewport-blocking-rect {
+    pointer-events: none;
+    position: fixed;
+    z-index: 9999999;
+    border-width: 3px;
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1))
+}
+
+.bk .bk-debug-viewport-lines {
+    pointer-events: none;
+    position: fixed;
+    z-index: 999999999999;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1))
+}
+
+.bk ._bk_debug-rect {
+    pointer-events: none;
+    position: fixed;
+    z-index: 999999999999;
+    border-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-border-opacity, 1));
+    background-color: rgb(var(--bk-theme-accent-700) / 0.1)
+}
+
+.bk .bk-debug-icons {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 15px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 16px
+}
+
+.bk .bk-debug-icons .bk-icon {
+    padding: 10px
+}
+
+.bk .bk-debug-icons svg {
+    aspect-ratio: 1 / 1;
+    height: auto;
+    width: 100%
+}
+
+.bk .bk-debug-rects {
+    pointer-events: none;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    z-index: 99999999999;
+    height: 100%;
+    width: 100%
+}
+</style>

package/dist/runtime/editor/features/debug/Section/Features.vue

@@ -18,13 +18,12 @@ import { useBlokkli, computed } from "#imports";
 import { StatusIndicator } from "#blokkli/editor/components";
 const { features } = useBlokkli();
 const featuresList = computed(() => {
-  return features.features.value.map((v) => {
+  return features.definitions.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
     };
   });

package/dist/runtime/editor/features/debug/index.vue

@@ -3,9 +3,13 @@
 </template>
 
 <script setup>
-import { defineBlokkliFeature, useBlokkli } from "#imports";
-import DebugMain from "./Main.vue";
+import {
+  defineAsyncComponent,
+  defineBlokkliFeature,
+  useBlokkli
+} from "#imports";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
+const DebugMain = defineAsyncComponent(() => import("./Main.vue"));
 const { logger } = defineBlokkliFeature({
   id: "debug",
   label: "Debug",
@@ -29,171 +33,3 @@ export default {
   name: "Debug"
 };
 </script>
-
-<style>
-.bk .bk-debug .bk-debug-section {
-    border-bottom-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1))
-}
-  .bk .bk-debug .bk-debug-section-header {
-    display: flex;
-    cursor: pointer;
-    user-select: none;
-    align-items: center;
-    gap: 5px;
-    padding: 20px;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 600;
-    text-transform: uppercase
-}
-  .bk .bk-debug .bk-debug-section-header:hover {
-    opacity: 0.8
-}
-  .bk .bk-debug .bk-debug-section-content {
-    padding-left: 20px;
-    padding-right: 20px;
-    padding-bottom: 20px
-}
-  .bk .bk-debug .bk-debug-section-indicator {
-    display: inline-block;
-    width: 15px;
-    font-size: 12px;
-    line-height: 16px
-}
-  .bk .bk-debug .bk-debug-list > div {
-    display: flex;
-    justify-content: space-between
-}
-  .bk .bk-debug .bk-debug-list > div:not(:last-child) {
-    margin-bottom: 5px
-}
-  .bk .bk-debug .bk-debug-features h3 {
-    font-weight: 700
-}
-  .bk .bk-debug .bk-debug-features p {
-    font-size: 14px;
-    line-height: 20px
-}
-  .bk .bk-debug .bk-debug-features > div {
-    display: flex;
-    gap: 5px;
-    border-bottom-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-    padding-top: 10px;
-    padding-bottom: 10px
-}
-
-.bk .bk-debug-visible-viewport {
-    pointer-events: none;
-    position: fixed;
-    z-index: 999999999999;
-    border-width: 3px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
-    background-color: rgb(var(--bk-theme-red-normal) / 0.1)
-}
-
-.bk .bk-debug-visible-viewport > div {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-    padding: 2px;
-    font-size: 12px;
-    line-height: 16px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
-}
-
-.bk .bk-debug-intersection-rects {
-    pointer-events: none;
-    position: fixed;
-    z-index: 999999999999;
-    background-color: rgb(var(--bk-theme-yellow-normal) / 0.25);
-    outline-style: solid;
-    outline-offset: -1px;
-    outline-color: rgb(var(--bk-theme-yellow-normal) / 1)
-}
-
-.bk .bk-debug-visible-viewport-padded {
-    pointer-events: none;
-    position: fixed;
-    z-index: 9999999;
-    border-width: 3px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1))
-}
-
-.bk .bk-debug-visible-viewport-padded > div {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-    padding: 2px;
-    font-size: 12px;
-    line-height: 16px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
-}
-
-.bk .bk-debug-viewport-blocking-rect {
-    pointer-events: none;
-    position: fixed;
-    z-index: 9999999;
-    border-width: 3px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1))
-}
-
-.bk .bk-debug-viewport-lines {
-    pointer-events: none;
-    position: fixed;
-    z-index: 999999999999;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1))
-}
-
-.bk ._bk_debug-rect {
-    pointer-events: none;
-    position: fixed;
-    z-index: 999999999999;
-    border-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-border-opacity, 1));
-    background-color: rgb(var(--bk-theme-accent-700) / 0.1)
-}
-
-.bk .bk-debug-icons {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 15px;
-    text-align: center;
-    font-size: 12px;
-    line-height: 16px
-}
-
-.bk .bk-debug-icons .bk-icon {
-    padding: 10px
-}
-
-.bk .bk-debug-icons svg {
-    aspect-ratio: 1 / 1;
-    height: auto;
-    width: 100%
-}
-
-.bk .bk-debug-rects {
-    pointer-events: none;
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    z-index: 99999999999;
-    height: 100%;
-    width: 100%
-}
-</style>

package/dist/runtime/editor/features/dev-mode/index.vue

@@ -60,7 +60,8 @@ defineBlokkliFeature({
   label: "Dev Mode",
   icon: "bk_mdi_logo_dev",
   description: "Feature enabled in development mode.",
-  viewports: ["desktop"]
+  viewports: ["desktop"],
+  devOnly: true
 });
 const { $t, types, definitions, ui } = useBlokkli();
 const isEnabled = ref(false);

package/dist/runtime/editor/features/diff/index.vue

@@ -14,9 +14,13 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  defineAsyncComponent
+} from "#imports";
 import { PluginSidebar } from "#blokkli/editor/plugins";
-import DiffView from "./DiffView/index.vue";
+const DiffView = defineAsyncComponent(() => import("./DiffView/index.vue"));
 defineBlokkliFeature({
   id: "diff",
   label: "Diff",

package/dist/runtime/editor/features/dragging-overlay/Renderer/index.vue

@@ -18,11 +18,6 @@ import {
 } from "#blokkli/editor/helpers/geometry";
 import { toShaderColor, rgbaToString } from "#blokkli/editor/helpers/color";
 import { ref, computed, useBlokkli } 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";
@@ -57,7 +52,8 @@ const {
   fields,
   definitions,
   context,
-  permissions
+  permissions,
+  selection
 } = useBlokkli();
 const FIELD_MIN_DRAW_SIZE = 6;
 const alphaBase = 0.7;
@@ -502,10 +498,13 @@ function getRectType(field) {
   return 1 /* FIELD_1 */;
 }
 class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
-  getBufferInfo(gl) {
-    const visibleFields = dom.getVisibleFields();
+  getBufferInfo(gl, twgl) {
     const visibleBlocks = dom.getVisibleBlocks();
     const lengthBefore = this.positions.length;
+    const isDragFromFieldEdit = props.items.some(
+      (item) => item.itemType === "droppable_field_item"
+    );
+    const visibleFields = selection.activeFieldLabel.value && !isDragFromFieldEdit ? [] : dom.getVisibleFields();
     for (let i = 0; i < visibleFields.length; i++) {
       const key = visibleFields[i];
       const fieldRect = buildFieldRect(key);
@@ -568,8 +567,8 @@ class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
     }
     this.processPendingRects();
     const hasChanged = lengthBefore !== this.positions.length;
-    if (hasChanged && gl) {
-      this.bufferInfo = this.createBufferInfo(gl);
+    if (hasChanged && gl && twgl) {
+      this.bufferInfo = this.createBufferInfo(gl, twgl);
     }
     return { info: this.bufferInfo, hasChanged };
   }
@@ -809,7 +808,7 @@ function setHoveredFieldArea(box, mouse) {
 }
 let bufferInfo = null;
 let bufferChanged = false;
-const { collector } = defineRenderer("drop-targets", {
+const { collector } = await defineRenderer("drop-targets", {
   zIndex: 400,
   only: true,
   collector: () => {
@@ -834,7 +833,7 @@ const { collector } = defineRenderer("drop-targets", {
   },
   program: () => ({ shaders: [vs, fs] }),
   cursor: () => "grabbing",
-  render: (_ctx, gl, program) => {
+  render: (_ctx, gl, program, twgl) => {
     const scale = ui.artboardScale.value;
     const offset = { ...ui.artboardOffset.value };
     dragBox.value = {
@@ -844,7 +843,7 @@ const { collector } = defineRenderer("drop-targets", {
       height: props.box.height / scale
     };
     const mouseAbsolute = toCanvasSpaceCoordinates(props.mouseX, props.mouseY);
-    const result = collector.getBufferInfo(gl);
+    const result = collector.getBufferInfo(gl, twgl);
     bufferInfo = result.info;
     bufferChanged = result.hasChanged;
     if (!props.isTouch) {
@@ -861,14 +860,14 @@ const { collector } = defineRenderer("drop-targets", {
     setHoveredFieldArea(dragBox.value, mouseAbsolute);
     gl.useProgram(program.program);
     animation.setSharedUniforms(gl, program);
-    setUniforms(program, uniforms.value);
+    twgl.setUniforms(program, uniforms.value);
     if (!bufferInfo) {
       return;
     }
     if (bufferChanged) {
-      setBuffersAndAttributes(gl, program, bufferInfo);
+      twgl.setBuffersAndAttributes(gl, program, bufferInfo);
     }
-    drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
+    twgl.drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
   },
   renderFallback: (ctx, ctx2d) => {
     const scale = ui.artboardScale.value;

package/dist/runtime/editor/features/dragging-overlay/index.vue

@@ -39,20 +39,21 @@
 </template>
 
 <script setup>
-import DragItems from "./DragItems/index.vue";
-import Renderer from "./Renderer/index.vue";
 import {
   ref,
   useBlokkli,
   onUnmounted,
   defineBlokkliFeature,
   nextTick,
-  useTemplateRef
+  useTemplateRef,
+  defineAsyncComponent
 } from "#imports";
 import { renderCycle } from "#blokkli/editor/helpers/vue";
 import { BundleSelector, BlokkliTransition } from "#blokkli/editor/components";
 import { onBlokkliEvent, defineDropHandler } from "#blokkli/editor/composables";
 import { MOUSE_BUTTON } from "#blokkli/editor/helpers/dom";
+const DragItems = defineAsyncComponent(() => import("./DragItems/index.vue"));
+const Renderer = defineAsyncComponent(() => import("./Renderer/index.vue"));
 const { adapter } = defineBlokkliFeature({
   icon: "bk_mdi_drag_pan",
   id: "dragging-overlay",

package/dist/runtime/editor/features/droppable-field-edit/Overlay/index.d.vue.ts

@@ -0,0 +1,15 @@
+import type { EntityContext } from '#blokkli/types';
+import type { DroppableFieldConfig } from '#blokkli/editor/features/editable-field/types';
+type __VLS_Props = {
+    fieldName: string;
+    entity: EntityContext;
+    element: HTMLElement;
+    config: DroppableFieldConfig;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;