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

package/dist/runtime/editor/helpers/webgl/index.js

@@ -0,0 +1,347 @@
+import { createBufferInfoFromArrays } from "twgl.js";
+import { intersects } from "./../geometry/index.js";
+export class RectangleBufferCollector {
+  added = /* @__PURE__ */ new Set();
+  rects = {};
+  positions = [];
+  indices = [];
+  rectId = [];
+  types = [];
+  quad = [];
+  state = [];
+  radius = [];
+  index = 0;
+  bufferInfo = null;
+  placedRects = [];
+  deferredMode = false;
+  pendingRects = [];
+  constructor(options) {
+    this.deferredMode = options?.deferredMode || false;
+  }
+  reset() {
+    this.added = /* @__PURE__ */ new Set();
+    if (!this.deferredMode) {
+      this.rects = {};
+    }
+    this.placedRects = [];
+    this.positions = [];
+    this.indices = [];
+    this.rectId = [];
+    this.types = [];
+    this.state = [];
+    this.quad = [];
+    this.radius = [];
+    this.index = 0;
+    this.bufferInfo = null;
+    this.pendingRects = [];
+  }
+  getIdealPosition(x, y, width, height, isEmptyField = false, nestingLevel) {
+    const MIN_HEIGHT = 5;
+    const rect = {
+      x,
+      y,
+      width,
+      height,
+      originalY: y,
+      nestingLevel
+    };
+    const intersections = [];
+    for (let i = 0; i < this.placedRects.length; i++) {
+      const placed = this.placedRects[i];
+      const testRect = { ...rect, height: Math.max(height, MIN_HEIGHT) };
+      const testPlaced = {
+        ...placed,
+        height: Math.max(placed.height, MIN_HEIGHT)
+      };
+      if (isEmptyField) {
+        const buffer = 1;
+        const bufferedRect = {
+          ...testRect,
+          y: testRect.y - buffer,
+          height: testRect.height + buffer * 2
+        };
+        if (intersects(bufferedRect, testPlaced)) {
+          intersections.push(placed);
+        }
+      } else if (intersects(testRect, testPlaced)) {
+        intersections.push(placed);
+      }
+    }
+    if (intersections.length === 0) {
+      this.placedRects.push(rect);
+      return rect;
+    }
+    intersections.sort((a, b) => a.originalY - b.originalY);
+    if (isEmptyField) {
+      const MAX_DISPLACEMENT = 100;
+      for (let i = 0; i < intersections.length; i++) {
+        const existingRect = intersections[i];
+        const intersectionIsAbove = existingRect.y < y;
+        let gapStart;
+        let gapEnd;
+        if (intersectionIsAbove) {
+          gapStart = existingRect.y + existingRect.height;
+          const rectsBelow = this.placedRects.filter(
+            (r) => r.y >= gapStart && r.y <= y + MAX_DISPLACEMENT && r.x < x + width && r.x + r.width > x
+          );
+          if (rectsBelow.length > 0) {
+            gapEnd = Math.min(...rectsBelow.map((r) => r.y));
+          } else {
+            gapEnd = y + MAX_DISPLACEMENT;
+          }
+        } else {
+          gapEnd = existingRect.y;
+          const rectsAbove = this.placedRects.filter(
+            (r) => r.y + r.height <= gapEnd && r.y + r.height >= y - MAX_DISPLACEMENT && r.x < x + width && r.x + r.width > x
+          );
+          if (rectsAbove.length > 0) {
+            gapStart = Math.max(...rectsAbove.map((r) => r.y + r.height));
+          } else {
+            gapStart = Math.max(0, y - MAX_DISPLACEMENT);
+          }
+        }
+        const availableSpace = gapEnd - gapStart;
+        if (availableSpace >= height) {
+          const centeredY = gapStart + (availableSpace - height) / 2;
+          if (Math.abs(centeredY - y) > MAX_DISPLACEMENT) {
+            continue;
+          }
+          const centeredRect = { ...rect, y: centeredY };
+          let hasIntersection = false;
+          for (const placed of this.placedRects) {
+            const testCentered = {
+              ...centeredRect,
+              height: Math.max(height, MIN_HEIGHT)
+            };
+            const testPlaced = {
+              ...placed,
+              height: Math.max(placed.height, MIN_HEIGHT)
+            };
+            if (intersects(testCentered, testPlaced)) {
+              hasIntersection = true;
+              break;
+            }
+          }
+          if (!hasIntersection) {
+            rect.y = centeredY;
+            this.placedRects.push(rect);
+            return rect;
+          }
+        }
+      }
+    }
+    for (let i = 0; i < intersections.length; i++) {
+      const existingRect = intersections[i];
+      let iterations = 0;
+      const direction = y < existingRect.originalY ? -1 : 1;
+      while (intersects(rect, existingRect) && iterations < 10) {
+        rect.y = y + direction * (10 * (iterations + 1));
+        iterations++;
+      }
+      if (iterations >= 10) {
+        rect.y = y;
+      }
+    }
+    this.placedRects.push(rect);
+    return rect;
+  }
+  addRectangle(rect, type, checkOverlap = false) {
+    if (this.deferredMode) {
+      this.pendingRects.push({ rect, type, checkOverlap });
+      return;
+    }
+    const { x, y, width, height } = checkOverlap ? this.getIdealPosition(rect.x, rect.y, rect.width, rect.height) : rect;
+    this.positions.push(
+      x,
+      y,
+      // Lower left corner
+      0,
+      x + width,
+      y,
+      // Lower right corner
+      1,
+      x + width,
+      y + height,
+      // Upper right corner
+      2,
+      x,
+      y + height,
+      // Upper left corner
+      3
+    );
+    const baseIndex = 4 * this.index;
+    this.indices.push(
+      baseIndex,
+      baseIndex + 1,
+      baseIndex + 2,
+      // First triangle
+      baseIndex,
+      baseIndex + 2,
+      baseIndex + 3
+      // Second triangle
+    );
+    const r = rect.radius || [4, 4, 4, 4];
+    this.radius.push(...r);
+    this.radius.push(...r);
+    this.radius.push(...r);
+    this.radius.push(...r);
+    this.rectId.push(this.index, this.index, this.index, this.index);
+    this.types.push(type, type, type, type);
+    this.quad.push(x, y, width, height);
+    this.quad.push(x, y, width, height);
+    this.quad.push(x, y, width, height);
+    this.quad.push(x, y, width, height);
+    const state = rect.state || 0;
+    this.state.push(state, state, state, state);
+    this.rects[rect.id] = {
+      ...rect,
+      index: this.index,
+      x,
+      y,
+      width,
+      height
+    };
+    this.added.add(rect.id);
+    this.index++;
+  }
+  processPendingRects() {
+    if (!this.deferredMode) {
+      return;
+    }
+    if (!this.pendingRects.length) {
+      return;
+    }
+    const sortedPending = [...this.pendingRects].sort(
+      (a, b) => a.rect.y - b.rect.y
+    );
+    const passes = [
+      sortedPending.filter((p) => !p.rect.id.includes(":empty:")),
+      // Non-empty rects
+      sortedPending.filter((p) => p.rect.id.includes(":empty:"))
+      // Empty rects
+    ];
+    for (const pass of passes) {
+      for (const { rect, type, checkOverlap } of pass) {
+        if (this.added.has(rect.id)) {
+          continue;
+        }
+        let finalPosition;
+        const existing = this.rects[rect.id];
+        if (existing) {
+          finalPosition = {
+            x: existing.x,
+            y: existing.y,
+            width: existing.width,
+            height: existing.height
+          };
+        } else if (checkOverlap) {
+          const isEmptyField = rect.id.includes(":empty:");
+          finalPosition = this.getIdealPosition(
+            rect.x,
+            rect.y,
+            rect.width,
+            rect.height,
+            isEmptyField,
+            rect.nestingLevel
+          );
+        } else {
+          finalPosition = {
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height
+          };
+        }
+        const { x, y, width, height } = finalPosition;
+        this.positions.push(
+          x,
+          y,
+          // Lower left corner
+          0,
+          x + width,
+          y,
+          // Lower right corner
+          1,
+          x + width,
+          y + height,
+          // Upper right corner
+          2,
+          x,
+          y + height,
+          // Upper left corner
+          3
+        );
+        const baseIndex = 4 * this.index;
+        this.indices.push(
+          baseIndex,
+          baseIndex + 1,
+          baseIndex + 2,
+          baseIndex,
+          baseIndex + 2,
+          baseIndex + 3
+        );
+        const r = rect.radius || [4, 4, 4, 4];
+        this.radius.push(...r, ...r, ...r, ...r);
+        this.rectId.push(this.index, this.index, this.index, this.index);
+        this.types.push(type, type, type, type);
+        this.quad.push(x, y, width, height);
+        this.quad.push(x, y, width, height);
+        this.quad.push(x, y, width, height);
+        this.quad.push(x, y, width, height);
+        const state = rect.state || 0;
+        this.state.push(state, state, state, state);
+        this.rects[rect.id] = {
+          ...rect,
+          index: this.index,
+          x,
+          y,
+          width,
+          height
+        };
+        this.added.add(rect.id);
+        this.index++;
+      }
+      this.pendingRects = [];
+    }
+  }
+  getIndex(id) {
+    return this.rects[id]?.index;
+  }
+  updateRectangle() {
+  }
+  createBufferInfo(gl) {
+    return createBufferInfoFromArrays(gl, {
+      a_position: {
+        numComponents: 3,
+        data: this.positions,
+        type: gl.FLOAT
+      },
+      a_rect_id: {
+        numComponents: 1,
+        data: this.rectId,
+        type: gl.FLOAT
+      },
+      a_state: {
+        numComponents: 1,
+        data: this.state,
+        type: gl.FLOAT
+      },
+      a_rect_type: {
+        numComponents: 1,
+        data: this.types,
+        type: gl.FLOAT
+      },
+      a_rect_radius: {
+        numComponents: 4,
+        data: this.radius,
+        type: gl.FLOAT
+      },
+      a_quad: {
+        numComponents: 4,
+        data: this.quad,
+        type: gl.FLOAT
+      },
+      indices: this.indices
+    });
+  }
+}

package/dist/runtime/editor/icons/svg/dock-window.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 18V20H4A2 2 0 0 1 2 18V8H4V18M22 6V14A2 2 0 0 1 20 16H8A2 2 0 0 1 6 14V6A2 2 0 0 1 8 4H20A2 2 0 0 1 22 6M20 6H8V14H20Z" /></svg>

package/dist/runtime/editor/icons/svg/duplicate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 11H15V14H13V11H10V9H13V6H15V9H18M20 4V16H8V4H20M20 2H8C6.9 2 6 2.9 6 4V16C6 17.11 6.9 18 8 18H20C21.11 18 22 17.11 22 16V4C22 2.9 21.11 2 20 2M4 6H2V20C2 21.11 2.9 22 4 22H18V20H4V6Z" /></svg>

package/dist/runtime/editor/icons/svg/reusable.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.17 7.91L8.9 8.91L12.08 3.42L14.33 7.31L11.73 8.81L17.19 10.27L18.66 4.81L16.06 6.31L13.81 2.41C13.26 1.45 12.03 1.12 11.08 1.68C10.81 1.83 10.58 2.05 10.41 2.31M10 20V18L3.66 18L5.9 14.1L8.5 15.6L7.04 10.14L1.57 11.6L4.17 13.1L1.92 17C1.37 17.96 1.7 19.18 2.65 19.73C2.92 19.89 3.22 19.97 3.54 20M19.06 11.5L17.32 12.5L20.5 18H16V15L12 19L16 23V20H20.5C21.61 20 22.5 19.11 22.5 18C22.5 17.69 22.42 17.38 22.28 17.11Z" /></svg>

package/dist/runtime/editor/icons/svg/stars.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19 15L17.74 17.74L15 19L17.74 20.25L19 23L20.25 20.25L23 19L20.25 17.74" />
+  <path d="M9 4L6.5 9.5L1 12L6.5 14.5L9 20L11.5 14.5L17 12L11.5 9.5" />
+  <path d="M19 1L17.74 3.75L15 5L17.74 6.26L19 9L20.25 6.26L23 5L20.25 3.75" />
+</svg>

package/dist/runtime/editor/plugins/BlockIndicator/index.d.vue.ts

@@ -0,0 +1,65 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Unique identifier for this indicator.
+     *
+     * Should be unique per block instance.
+     */
+    id: string;
+    /**
+     * The UUID of the block this indicator is attached to.
+     */
+    uuid: string;
+    /**
+     * Optional text label to display in the indicator.
+     */
+    label?: string;
+    /**
+     * Which side of the block to display the indicator.
+     *
+     * @default 'left'
+     */
+    position?: "left" | "right";
+    /**
+     * Optional icon to display in the indicator.
+     */
+    icon?: BlokkliIcon;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Unique identifier for this indicator.
+     *
+     * Should be unique per block instance.
+     */
+    id: string;
+    /**
+     * The UUID of the block this indicator is attached to.
+     */
+    uuid: string;
+    /**
+     * Optional text label to display in the indicator.
+     */
+    label?: string;
+    /**
+     * Which side of the block to display the indicator.
+     *
+     * @default 'left'
+     */
+    position?: "left" | "right";
+    /**
+     * Optional icon to display in the indicator.
+     */
+    icon?: BlokkliIcon;
+}> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/plugins/BlockIndicator/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <Teleport to="#bk-indicators-left">
+    <div
+      ref="el"
+      class="bk-indicator-item"
+      @click.prevent="$emit('click')"
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <slot>
+        <div class="bk-indicator-item-inner">
+          <div v-if="label">{{ label }}</div>
+          <div v-if="icon">
+            <Icon :name="icon" />
+          </div>
+        </div>
+      </slot>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  onMounted,
+  useTemplateRef,
+  onBeforeUnmount
+} from "#imports";
+import { Icon } from "#blokkli/editor/components";
+const props = defineProps({
+  id: { type: String, required: true },
+  uuid: { type: String, required: true },
+  label: { type: String, required: false },
+  position: { type: String, required: false },
+  icon: { type: null, required: false }
+});
+defineEmits(["click"]);
+const { indicators } = useBlokkli();
+const el = useTemplateRef("el");
+function onMouseEnter() {
+  indicators.setHovered(props.uuid);
+}
+function onMouseLeave() {
+  indicators.setHovered();
+}
+onMounted(() => {
+  if (el.value) {
+    indicators.addIndicator({
+      id: props.id,
+      uuid: props.uuid,
+      position: props.position ?? "left",
+      element: el.value
+    });
+  }
+});
+onBeforeUnmount(() => {
+  indicators.removeIndicator(props.id, props.uuid);
+});
+</script>
+
+<script>
+export default {
+  name: "PluginBlockIndicator"
+};
+</script>

package/dist/runtime/editor/plugins/BlockIndicator/index.vue.d.ts

@@ -0,0 +1,65 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Unique identifier for this indicator.
+     *
+     * Should be unique per block instance.
+     */
+    id: string;
+    /**
+     * The UUID of the block this indicator is attached to.
+     */
+    uuid: string;
+    /**
+     * Optional text label to display in the indicator.
+     */
+    label?: string;
+    /**
+     * Which side of the block to display the indicator.
+     *
+     * @default 'left'
+     */
+    position?: "left" | "right";
+    /**
+     * Optional icon to display in the indicator.
+     */
+    icon?: BlokkliIcon;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Unique identifier for this indicator.
+     *
+     * Should be unique per block instance.
+     */
+    id: string;
+    /**
+     * The UUID of the block this indicator is attached to.
+     */
+    uuid: string;
+    /**
+     * Optional text label to display in the indicator.
+     */
+    label?: string;
+    /**
+     * Which side of the block to display the indicator.
+     *
+     * @default 'left'
+     */
+    position?: "left" | "right";
+    /**
+     * Optional icon to display in the indicator.
+     */
+    icon?: BlokkliIcon;
+}> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/plugins/ContextMenu/Menu/index.d.vue.ts

@@ -0,0 +1,13 @@
+import type { ContextMenu } from '#blokkli/editor/types/ui';
+type __VLS_Props = {
+    menu: ContextMenu[];
+    x: number;
+    y: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/plugins/ContextMenu/Menu/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="bk bk-context-menu" :style="{ left: x + 'px', top: y + 'px' }">
+    <div ref="rootEl" class="bk-context-menu-inner" :style="innerStyle">
+      <div v-for="(item, i) in menu" :key="i">
+        <hr v-if="item.type === 'rule'" />
+        <button v-else-if="item.type === 'button'" @click="onClick(i)">
+          <Icon :name="item.icon" />
+          <span>{{ item.label }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+import {
+  watch,
+  ref,
+  computed,
+  onMounted,
+  useBlokkli,
+  onBeforeUnmount
+} from "#imports";
+const props = defineProps({
+  menu: { type: Array, required: true },
+  x: { type: Number, required: true },
+  y: { type: Number, required: true }
+});
+const emit = defineEmits(["close"]);
+const { ui, selection } = useBlokkli();
+const rootEl = ref(null);
+const innerStyle = computed(() => {
+  const horizontal = props.x - 300 > ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width ? { right: 0 } : { left: 0 };
+  const vertical = props.y + 300 > ui.visibleViewportPadded.value.y + ui.visibleViewportPadded.value.height ? { bottom: 0 } : { top: 0 };
+  return {
+    ...horizontal,
+    ...vertical
+  };
+});
+onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
+  if (e.code === "Escape") {
+    emit("close");
+  }
+});
+onBlokkliEvent("window:clickAway", () => {
+  emit("close");
+});
+watch(selection.uuids, () => emit("close"));
+const onClick = (index) => {
+  const item = props.menu[index];
+  if (item && item.type === "button") {
+    item.callback();
+  }
+  emit("close");
+};
+const onMouseDown = (e) => {
+  if (!rootEl.value) {
+    return;
+  }
+  if ((e.target instanceof HTMLElement || e.target instanceof SVGElement) && !e.target.contains(rootEl.value)) {
+    emit("close");
+  }
+};
+onMounted(() => {
+  window.addEventListener("click", onMouseDown);
+});
+onBeforeUnmount(() => {
+  window.removeEventListener("click", onMouseDown);
+});
+</script>

package/dist/runtime/editor/plugins/ContextMenu/Menu/index.vue.d.ts

@@ -0,0 +1,13 @@
+import type { ContextMenu } from '#blokkli/editor/types/ui';
+type __VLS_Props = {
+    menu: ContextMenu[];
+    x: number;
+    y: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/plugins/ContextMenu/index.d.vue.ts

@@ -0,0 +1,36 @@
+import type { ContextMenu } from '#blokkli/editor/types/ui';
+type __VLS_Props = {
+    /**
+     * Unique identifier for this context menu.
+     *
+     * Used to track which menu is currently open.
+     */
+    id: string;
+    /**
+     * Array of menu items to display.
+     *
+     * Each item can have nested sub-menus.
+     */
+    menu: ContextMenu[];
+    /**
+     * The HTML tag to use for the wrapper element.
+     *
+     * @default 'div'
+     */
+    tag?: string;
+};
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};