@blokkli/editor 2.0.0-alpha.27 → 2.0.0-alpha.29

package/dist/runtime/helpers/composables/useStickyToolbar.js

@@ -1,233 +0,0 @@
-import onBlokkliEvent from "./onBlokkliEvent.js";
-import { computed, ref, useBlokkli } from "#imports";
-import { falsy, findIdealRectPosition } from "../index.js";
-const limitPlacedRect = (rect, padding) => {
-  return {
-    width: rect.width,
-    height: rect.height,
-    x: Math.min(
-      Math.max(rect.x, padding.x),
-      padding.x + padding.width - rect.width
-    ),
-    y: Math.min(
-      Math.max(padding.y, rect.y),
-      padding.height + padding.y - rect.height
-    )
-  };
-};
-export default function(el, options) {
-  const { ui, selection, dom } = useBlokkli();
-  const shouldRender = ref(false);
-  const actualPlacement = ref("bottom");
-  const caretXPosition = ref(0);
-  function getMargin() {
-    if (options && options.getMargin) {
-      return options.getMargin();
-    }
-    return 15;
-  }
-  function getCaretWidth() {
-    if (options && options.getCaretWidth) {
-      return options.getCaretWidth();
-    }
-    return 0;
-  }
-  let anchorRect = null;
-  function getCoords(width, height, placementY, placementX, offset, scale) {
-    let minX = 0;
-    let maxX = 0;
-    let minY = 0;
-    let maxY = 0;
-    let hasRects = false;
-    const anchorElement = options && options.getAnchorElement ? options.getAnchorElement() : null;
-    const anchorCoordinates = options && options.getAnchorCoordinates ? options.getAnchorCoordinates() : null;
-    if (anchorCoordinates) {
-      const rectX = (anchorCoordinates.x + offset.x / scale) * scale;
-      const rectY = (anchorCoordinates.y + offset.y / scale) * scale;
-      minX = rectX;
-      maxX = rectX + 1;
-      minY = rectY;
-      maxY = rectY + 1;
-      hasRects = true;
-    } else if (anchorElement) {
-      anchorRect ||= ui.getAbsoluteElementRect(
-        anchorElement.getBoundingClientRect(),
-        scale,
-        offset
-      );
-      const rectX = (anchorRect.x + offset.x / scale) * scale;
-      const rectY = (anchorRect.y + offset.y / scale) * scale;
-      const rectRight = rectX + anchorRect.width * scale;
-      const rectBottom = rectY + anchorRect.height * scale;
-      minX = rectX;
-      maxX = rectRight;
-      minY = rectY;
-      maxY = rectBottom;
-      hasRects = true;
-    } else {
-      const rects = selection.uuids.value.map((uuid) => dom.getBlockRect(uuid)).filter(falsy).filter((rect) => rect.height || rect.width);
-      hasRects = !!rects.length;
-      if (hasRects) {
-        for (let i = 0; i < rects.length; i++) {
-          const { x: x2, y: y2, height: height2, width: rectWidth } = rects[i];
-          const rectX = (x2 + offset.x / scale) * scale;
-          const rectY = (y2 + offset.y / scale) * scale;
-          const rectRight = rectX + rectWidth * scale;
-          const rectBottom = rectY + height2 * scale;
-          if (i === 0 || rectX < minX) {
-            minX = rectX;
-          }
-          if (i === 0 || rectRight > maxX) {
-            maxX = rectRight;
-          }
-          if (i === 0 || rectY < minY) {
-            minY = rectY;
-          }
-          if (i === 0 || rectBottom > maxY) {
-            maxY = rectBottom;
-          }
-        }
-      } else {
-        if (!selection.hasHostSelected.value) {
-          return;
-        }
-        minX = offset.x;
-        maxX = minX + ui.artboardSize.value.width;
-        minY = offset.y;
-        maxY = minY + ui.artboardSize.value.height;
-      }
-    }
-    const padding = ui.visibleViewportPadded.value;
-    const xSubtract = hasRects ? 5 * Math.min(scale, 1) : 0;
-    const margin = getMargin() * Math.min(scale, 1);
-    let actualPlacementY = placementY === "auto" ? "bottom" : placementY;
-    if (placementY === "auto") {
-      const spaceAbove = minY - padding.y;
-      const spaceBelow = padding.y + padding.height - maxY;
-      const requiredSpace = height + margin;
-      if (spaceBelow >= requiredSpace) {
-        actualPlacementY = "bottom";
-      } else if (spaceAbove >= requiredSpace) {
-        actualPlacementY = "top";
-      } else {
-        actualPlacementY = spaceAbove > spaceBelow ? "top" : "bottom";
-      }
-    }
-    const y = actualPlacementY === "top" ? minY - height - margin : maxY + margin;
-    const centerX = (minX + maxX) / 2;
-    let x;
-    if (placementX === "center") {
-      x = centerX - width / 2;
-    } else {
-      x = minX - xSubtract;
-    }
-    const shouldAllowOverflow = options?.allowHorizontalOverflow && width > padding.width;
-    let idealPosition;
-    if (shouldAllowOverflow) {
-      const limitedY = Math.min(
-        Math.max(padding.y, y),
-        padding.height + padding.y - height
-      );
-      idealPosition = { x, y: limitedY };
-    } else {
-      const rect = limitPlacedRect(
-        {
-          x,
-          y,
-          width,
-          height
-        },
-        padding
-      );
-      const position = findIdealRectPosition(
-        ui.viewportBlockingRects.value,
-        rect,
-        padding
-      );
-      if (!position) {
-        return void 0;
-      }
-      idealPosition = position;
-    }
-    const caretWidth = getCaretWidth();
-    const caretHalfWidth = caretWidth / 2;
-    const minCaretX = caretHalfWidth;
-    const maxCaretX = width - caretHalfWidth;
-    const caretX = Math.max(
-      minCaretX,
-      Math.min(centerX - idealPosition.x, maxCaretX)
-    );
-    return { ...idealPosition, actualPlacementY, caretX };
-  }
-  function getWidth() {
-    if (options && options.getWidth) {
-      return options.getWidth();
-    }
-    if (el.value) {
-      return el.value.clientWidth;
-    }
-    return null;
-  }
-  function getHeight() {
-    if (options && options.getHeight) {
-      return options.getHeight();
-    }
-    if (el.value) {
-      return el.value.clientHeight;
-    }
-    return null;
-  }
-  function getPlacementVertical() {
-    if (options && options.getPlacementY) {
-      return options.getPlacementY();
-    }
-    return "top";
-  }
-  function getPlacementHorizontal() {
-    if (options && options.getPlacementX) {
-      return options.getPlacementX();
-    }
-    return "left";
-  }
-  onBlokkliEvent("canvas:draw", (ctx) => {
-    if (!el.value) {
-      return;
-    }
-    if (ui.isMobile.value) {
-      el.value.style.transform = "";
-      shouldRender.value = true;
-      return;
-    }
-    if (options && options.shouldUpdate && !options.shouldUpdate()) {
-      return;
-    }
-    const width = getWidth();
-    const height = getHeight();
-    if (width === null || height === null) {
-      return;
-    }
-    const placementY = getPlacementVertical();
-    const placementX = getPlacementHorizontal();
-    const coords = getCoords(
-      width,
-      height,
-      placementY,
-      placementX,
-      ctx.artboardOffset,
-      ctx.artboardScale
-    );
-    if (!coords) {
-      shouldRender.value = false;
-      return;
-    }
-    el.value.style.transform = `translate3d(${coords.x}px, ${coords.y}px, 0)`;
-    actualPlacement.value = coords.actualPlacementY;
-    caretXPosition.value = coords.caretX;
-    shouldRender.value = true;
-  });
-  return {
-    shouldRender: computed(() => shouldRender.value),
-    placementY: computed(() => actualPlacement.value),
-    caretX: computed(() => caretXPosition.value)
-  };
-}

package/dist/runtime/helpers/composables/useTransitionedValue.d.ts

@@ -1,18 +0,0 @@
-import type { RGB } from '#blokkli/types/theme';
-interface TransitionOptions {
-    /**
-     * Duration in milliseconds.
-     */
-    duration?: number;
-    /**
-     * The easing method. Defaults to "ease out quad".
-     */
-    easing?: (t: number) => number;
-}
-/**
- * Creates a computed property from the given callback and transitions between values.
- *
- * Returns a method that, when called, will return the current transitioned value.
- */
-export declare function useTransitionedValue<T extends RGB | number>(valueCallback: () => T, options?: TransitionOptions): () => T;
-export {};

package/dist/runtime/helpers/composables/useTransitionedValue.js

@@ -1,57 +0,0 @@
-import { computed, watch } from "vue";
-import { easeOutQuad } from "./../easing.js";
-function isRGB(value) {
-  return Array.isArray(value) && value.length === 3;
-}
-function lerp(start, end, t) {
-  return start + (end - start) * t;
-}
-function interpolateColor(from, to, t) {
-  return [
-    lerp(from[0], to[0], t),
-    lerp(from[1], to[1], t),
-    lerp(from[2], to[2], t)
-  ];
-}
-function interpolateValue(from, to, t) {
-  if (isRGB(from) && isRGB(to)) {
-    return interpolateColor(from, to, t);
-  } else if (typeof from === "number" && typeof to === "number") {
-    return lerp(from, to, t);
-  }
-  return to;
-}
-function cloneValue(value) {
-  if (isRGB(value)) {
-    return [...value];
-  }
-  return value;
-}
-export function useTransitionedValue(valueCallback, options = {}) {
-  const { duration = 300, easing = easeOutQuad } = options;
-  const value = computed(valueCallback);
-  const initial = value.value;
-  let current = cloneValue(initial);
-  let target = cloneValue(initial);
-  let from = cloneValue(initial);
-  let startTime = null;
-  watch(value, (newValue) => {
-    from = cloneValue(current);
-    target = cloneValue(newValue);
-    startTime = Date.now();
-  });
-  return function getCurrentValue() {
-    if (startTime !== null) {
-      const elapsed = Date.now() - startTime;
-      const rawProgress = Math.min(elapsed / duration, 1);
-      if (rawProgress >= 1) {
-        current = cloneValue(target);
-        startTime = null;
-      } else {
-        const easedProgress = easing(rawProgress);
-        current = interpolateValue(from, target, easedProgress);
-      }
-    }
-    return current;
-  };
-}

package/dist/runtime/helpers/dom/index.d.ts

@@ -1,65 +0,0 @@
-/**
- * Recursively clone an element and inline its styles.
- */
-export declare function cloneWithInlineStyles(node: Element): Element;
-export declare function cloneElementWithStyles(element: Element, isRoot?: boolean): string;
-/**
- * Possible values for the MouseEvent.buttons property.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
- */
-export declare const MOUSE_BUTTONS: Readonly<{
-    /**
-     *No button or un-initialized.
-     */
-    NONE: 0;
-    /**
-     * Primary button (usually the left button).
-     */
-    PRIMARY: 1;
-    /**
-     * Secondary button (usually the right button).
-     */
-    SECONDARY: 2;
-    /**
-     * Auxiliary button (usually the mouse wheel button or middle button).
-     */
-    AUXILIARY: 4;
-    /**
-     * 4th button (typically the "Browser Back" button).
-     */
-    FOURTH: 8;
-    /**
-     * 5th button (typically the "Browser Forward" button).
-     */
-    FIFTH: 16;
-}>;
-/**
- * Possible values for the MouseEvent.button property.
- * (Yes, they are different from the "buttons" property...)
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
- */
-export declare const MOUSE_BUTTON: Readonly<{
-    /**
-     * Main button, usually the left button or the un-initialized state.
-     */
-    MAIN: 0;
-    /**
-     * Auxiliary button, usually the wheel button or the middle button (if present).
-     */
-    AUXILIARY: 1;
-    /**
-     * Secondary button, usually the right button.
-     */
-    SECONDARY: 2;
-    /**
-     * Fourth button, typically the Browser Back button.
-     */
-    FOURTH: 3;
-    /**
-     * Fifth button, typically the Browser Forward button.
-     */
-    FIFTH: 4;
-}>;
-export type CursorKeyword = 'alias' | 'all-scroll' | 'auto' | 'cell' | 'col-resize' | 'context-menu' | 'copy' | 'crosshair' | 'default' | 'e-resize' | 'ew-resize' | 'grab' | 'grabbing' | 'help' | 'move' | 'n-resize' | 'ne-resize' | 'nesw-resize' | 'no-drop' | 'none' | 'not-allowed' | 'ns-resize' | 'nw-resize' | 'nwse-resize' | 'pointer' | 'progress' | 'row-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'text' | 'vertical-text' | 'w-resize' | 'wait' | 'zoom-in' | 'zoom-out';

package/dist/runtime/helpers/dom/index.js

@@ -1,85 +0,0 @@
-export function cloneWithInlineStyles(node) {
-  const clone = node.cloneNode(false);
-  clone.removeAttribute("class");
-  clone.removeAttribute("id");
-  clone.removeAttribute("name");
-  clone.removeAttribute("for");
-  clone.removeAttribute("style");
-  if (clone instanceof HTMLElement || clone instanceof SVGElement) {
-    Object.keys(clone.dataset).forEach((key) => {
-      clone.dataset[key] = "";
-    });
-  }
-  const computedStyle = getComputedStyle(node);
-  for (let i = 0; i < computedStyle.length; i++) {
-    const propName = computedStyle[i];
-    if (clone instanceof HTMLElement || clone instanceof SVGElement) {
-      clone.style[propName] = computedStyle.getPropertyValue(propName);
-    }
-  }
-  Array.from(node.childNodes).forEach((child) => {
-    if (child.nodeType === Node.ELEMENT_NODE) {
-      clone.appendChild(cloneWithInlineStyles(child));
-    } else if (child.nodeType === Node.TEXT_NODE) {
-      clone.appendChild(child.cloneNode(true));
-    }
-  });
-  return clone;
-}
-export function cloneElementWithStyles(element, isRoot) {
-  const clonedElement = cloneWithInlineStyles(element);
-  if (isRoot && (clonedElement instanceof HTMLElement || clonedElement instanceof SVGElement)) {
-    clonedElement.style.opacity = "1";
-  }
-  const container = document.createElement("div");
-  container.appendChild(clonedElement);
-  return container.innerHTML;
-}
-export const MOUSE_BUTTONS = Object.freeze({
-  /**
-   *No button or un-initialized.
-   */
-  NONE: 0,
-  /**
-   * Primary button (usually the left button).
-   */
-  PRIMARY: 1,
-  /**
-   * Secondary button (usually the right button).
-   */
-  SECONDARY: 2,
-  /**
-   * Auxiliary button (usually the mouse wheel button or middle button).
-   */
-  AUXILIARY: 4,
-  /**
-   * 4th button (typically the "Browser Back" button).
-   */
-  FOURTH: 8,
-  /**
-   * 5th button (typically the "Browser Forward" button).
-   */
-  FIFTH: 16
-});
-export const MOUSE_BUTTON = Object.freeze({
-  /**
-   * Main button, usually the left button or the un-initialized state.
-   */
-  MAIN: 0,
-  /**
-   * Auxiliary button, usually the wheel button or the middle button (if present).
-   */
-  AUXILIARY: 1,
-  /**
-   * Secondary button, usually the right button.
-   */
-  SECONDARY: 2,
-  /**
-   * Fourth button, typically the Browser Back button.
-   */
-  FOURTH: 3,
-  /**
-   * Fifth button, typically the Browser Forward button.
-   */
-  FIFTH: 4
-});

package/dist/runtime/helpers/dropTargets/index.d.ts

@@ -1,6 +0,0 @@
-import type { BlokkliFieldElement } from '#blokkli/types';
-export type Orientation = 'horizontal' | 'vertical';
-export declare const MIN_GAP = 20;
-export declare function getGapSize(orientation: Orientation, element: HTMLElement): number;
-export declare function getChildrenOrientation(element: HTMLElement): Orientation;
-export declare function determineCanAddChildren(field: BlokkliFieldElement, children: HTMLElement[], uuids: string[], currentCount: number, itemsToAdd: number, draggingBundles?: string[], draggingFragments?: string[]): boolean;

package/dist/runtime/helpers/dropTargets/index.js

@@ -1,63 +0,0 @@
-export const MIN_GAP = 20;
-export function getGapSize(orientation, element) {
-  const computedStyle = window.getComputedStyle(element);
-  if (computedStyle.display.includes("grid") || computedStyle.display.includes("flex")) {
-    const gap = orientation === "vertical" ? computedStyle.rowGap || computedStyle.gridRowGap : computedStyle.columnGap || computedStyle.gridColumnGap;
-    if (gap) {
-      const gapParts = gap.split(" ");
-      const gapValue = gapParts[0];
-      if (gapValue?.endsWith("px")) {
-        return Number.parseFloat(gapValue);
-      }
-    }
-  }
-  return MIN_GAP;
-}
-export function getChildrenOrientation(element) {
-  const computedStyle = window.getComputedStyle(element);
-  if (computedStyle.display.includes("flex")) {
-    if (computedStyle.flexDirection === "row" || computedStyle.flexDirection === "row-reverse") {
-      return "horizontal";
-    } else {
-      return "vertical";
-    }
-  }
-  if (computedStyle.display.includes("grid")) {
-    if (computedStyle.gridTemplateColumns.split(" ").length > 1) {
-      return "horizontal";
-    } else {
-      return "vertical";
-    }
-  }
-  return "vertical";
-}
-export function determineCanAddChildren(field, children, uuids, currentCount, itemsToAdd, draggingBundles, draggingFragments) {
-  if (field.cardinality !== -1) {
-    const childrenThatAreSelection = children.filter((child) => {
-      const uuid = child.dataset.bkUuid;
-      if (!uuid) {
-        return false;
-      }
-      return uuids.includes(uuid);
-    }).length;
-    const countAfter = currentCount - childrenThatAreSelection + itemsToAdd;
-    if (countAfter > field.cardinality) {
-      return false;
-    }
-  }
-  if (!draggingBundles?.length) {
-    return true;
-  }
-  const bundlesAllowed = draggingBundles.every(
-    (bundle) => field.allowedBundles.includes(bundle)
-  );
-  if (!bundlesAllowed) {
-    return false;
-  }
-  if (draggingFragments?.length && field.allowedFragments.length > 0) {
-    return draggingFragments.every(
-      (fragment) => field.allowedFragments.includes(fragment)
-    );
-  }
-  return true;
-}

package/dist/runtime/helpers/eventBus.d.ts

@@ -1,3 +0,0 @@
-import type { EventbusEvents } from '#blokkli/types';
-export declare const eventBus: import("mitt").Emitter<EventbusEvents>;
-export declare const emitMessage: (message: string, type?: "success" | "error" | "warning", additional?: string | Error | unknown, replace?: boolean) => void;

package/dist/runtime/helpers/eventBus.js

@@ -1,5 +0,0 @@
-import mitt from "mitt";
-export const eventBus = mitt();
-export const emitMessage = (message, type = "success", additional, replace) => {
-  eventBus.emit("message", { type, message, additional, replace });
-};

package/dist/runtime/helpers/frameEventBus.d.ts

@@ -1,9 +0,0 @@
-import type { MutatedField, UpdateBlockOptionEvent } from '../types/index.js';
-type FrameEventBusEvents = {
-    selectItems: string[];
-    mutatedFields: MutatedField[];
-    focus: string;
-    updateOption: UpdateBlockOptionEvent;
-};
-export declare const frameEventBus: import("mitt").Emitter<FrameEventBusEvents>;
-export {};

package/dist/runtime/helpers/frameEventBus.js

@@ -1,2 +0,0 @@
-import mitt from "mitt";
-export const frameEventBus = mitt();