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

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

@@ -1,2 +0,0 @@
-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,31 +0,0 @@
-<template>
-  <DebugMain v-if="debug.isEnabled.value" :logger />
-</template>
-
-<script setup>
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { defineBlokkliFeature, useBlokkli } from "#imports";
-import DebugMain from "./Main.vue";
-const { logger } = defineBlokkliFeature({
-  id: "debug",
-  label: "Debug",
-  icon: "bug",
-  description: "Provides debugging functionality."
-});
-const { debug, ui } = useBlokkli();
-onBlokkliEvent("keyPressed", (e) => {
-  if (ui.hasDialogOpen.value) {
-    return;
-  }
-  if (e.code === "=" && e.meta) {
-    e.originalEvent.preventDefault();
-    debug.toggle();
-  }
-});
-</script>
-
-<script>
-export default {
-  name: "Debug"
-};
-</script>

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

@@ -1,2 +0,0 @@
-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/Delete/index.vue

@@ -1,66 +0,0 @@
-<template>
-  <PluginItemAction
-    id="delete"
-    edit-only
-    :title="$t('deleteButton', 'Delete')"
-    multiple
-    key-code="Delete"
-    icon="delete"
-    :weight="-80"
-    @click="onClick"
-  />
-</template>
-
-<script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
-import { PluginItemAction } from "#blokkli/plugins";
-const { state, $t, eventBus, dom, runtimeConfig } = useBlokkli();
-const { adapter } = defineBlokkliFeature({
-  id: "delete",
-  icon: "delete",
-  label: "Delete",
-  requiredAdapterMethods: ["deleteBlocks"],
-  description: "Provides an action to delete one or more blocks."
-});
-function getSelectionAfterDelete(items) {
-  if (items.length !== 1) {
-    return;
-  }
-  const uuid = items[0].uuid;
-  const field = state.getFieldListForBlock(uuid);
-  if (!field) {
-    return;
-  }
-  const index = field.list.findIndex((v) => v.uuid === uuid);
-  if (index === -1) {
-    return;
-  }
-  const inList = field.list[index + 1]?.uuid || field.list[index - 1]?.uuid;
-  if (inList) {
-    return inList;
-  }
-  if (field.entityType !== runtimeConfig.itemEntityType) {
-    return;
-  }
-  return field.entityUuid;
-}
-async function onClick(items) {
-  const selectedUuidsAfter = getSelectionAfterDelete(items);
-  await state.mutateWithLoadingState(
-    () => adapter.deleteBlocks(items.map((v) => v.uuid)),
-    $t("deleteError", "The block could not be deleted.")
-  );
-  if (selectedUuidsAfter) {
-    eventBus.emit("select", selectedUuidsAfter);
-    dom.refreshBlockRect(selectedUuidsAfter);
-  } else {
-    eventBus.emit("select:unselect");
-  }
-}
-</script>
-
-<script>
-export default {
-  name: "Delete"
-};
-</script>

package/dist/runtime/components/Edit/Features/Delete/index.vue.d.ts

@@ -1,2 +0,0 @@
-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/Diff/DiffView/index.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="bk bk-diff-sidebar-pane">
-    <DiffViewerState
-      v-if="stateBefore"
-      :state-before
-      :state-after
-      scheme="orange"
-    />
-  </div>
-</template>
-
-<script setup>
-import { useBlokkli, useAsyncData } from "#imports";
-import { DiffViewerState } from "#blokkli/components";
-const { adapter, state } = useBlokkli();
-const { data: stateBefore } = await useAsyncData("stateBefore", () => {
-  return adapter.loadStateAtIndex(-1).then((v) => adapter.mapState(v));
-});
-const stateAfter = state.getMappedState();
-</script>

package/dist/runtime/components/Edit/Features/Diff/DiffView/index.vue.d.ts

@@ -1,2 +0,0 @@
-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/Diff/index.vue

@@ -1,35 +0,0 @@
-<template>
-  <PluginSidebar
-    id="diff"
-    :title="$t('diffSidebarTitle', 'Changes')"
-    :tour-text="
-  $t('diffSidebarTourText', 'Displays all the changes made during editing.')
-"
-    icon="diff"
-    weight="-400"
-    beta
-  >
-    <DiffView :key="state.currentMutationIndex.value" />
-  </PluginSidebar>
-</template>
-
-<script setup>
-import { useBlokkli, defineBlokkliFeature } from "#imports";
-import { PluginSidebar } from "#blokkli/plugins";
-import DiffView from "./DiffView/index.vue";
-defineBlokkliFeature({
-  id: "diff",
-  label: "Diff",
-  icon: "diff",
-  description: "Displays a diff of all changes in the edit state.",
-  requiredAdapterMethods: ["loadStateAtIndex"],
-  beta: true
-});
-const { $t, state } = useBlokkli();
-</script>
-
-<script>
-export default {
-  name: "Diff"
-};
-</script>

package/dist/runtime/components/Edit/Features/Diff/index.vue.d.ts

@@ -1,2 +0,0 @@
-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/DraggingOverlay/DragItems/DragItem.vue

@@ -1,113 +0,0 @@
-<template>
-  <div
-    ref="rootEl"
-    class="bk-dragging-overlay-item"
-    :class="{ 'bk-is-top': isTop, 'bk-is-fallback': !markup }"
-    :style="{
-  width: width + 'px',
-  height: height + 'px',
-  transformOrigin,
-  background,
-  '--bk-dragging-scale': to.scaleX,
-  '--bk-dragging-radius': Math.max(borderRadius ?? 0, 4)
-}"
-  >
-    <div
-      v-if="markup"
-      ref="markupEl"
-      class="bk-dragging-overlay-markup"
-      v-html="markup"
-    />
-    <div v-else class="bk-dragging-overlay-fallback">
-      <div :style="{ transform: `scale(${1 / to.scaleX})` }">
-        <template v-if="isTop">
-          <ItemIcon v-if="bundle" :bundle="bundle" />
-          <Icon v-else-if="icon" :name="icon" />
-          <div v-if="label">{{ label }}</div>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted, useBlokkli, useTemplateRef } from "#imports";
-import { Icon, ItemIcon } from "#blokkli/components";
-import { lerp } from "#blokkli/helpers";
-import { easeOutElastic } from "#blokkli/helpers/easing";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const props = defineProps({
-  isTop: { type: Boolean, required: true },
-  from: { type: Object, required: true },
-  to: { type: Object, required: true },
-  width: { type: Number, required: true },
-  height: { type: Number, required: true },
-  transformOrigin: { type: String, required: true },
-  markup: { type: String, required: true },
-  background: { type: String, required: true },
-  bundle: { type: String, required: false },
-  icon: { type: null, required: false },
-  label: { type: String, required: false },
-  prevVisibility: { type: String, required: false },
-  element: { type: null, required: true }
-});
-const DURATION = 500;
-const { ui, theme } = useBlokkli();
-const rootEl = useTemplateRef("rootEl");
-const markupEl = useTemplateRef("markupEl");
-const borderRadius = ref(null);
-let isDone = false;
-let animationStart = 0;
-function setBorderRadius() {
-  if (borderRadius.value !== null) {
-    return;
-  }
-  if (!props.isTop) {
-    borderRadius.value = 4;
-    return;
-  }
-  if (markupEl.value) {
-    const child = markupEl.value.firstChild;
-    if (child instanceof HTMLElement) {
-      const style = theme.getDraggableStyle(child);
-      borderRadius.value = style.radiusMin;
-      return;
-    }
-  }
-  borderRadius.value = 4;
-}
-onBlokkliEvent("canvas:draw", (e) => {
-  if (isDone || !rootEl.value) {
-    return;
-  }
-  if (!animationStart) {
-    animationStart = e.time;
-  }
-  setBorderRadius();
-  const elapsed = e.time - animationStart;
-  const alphaX = easeOutElastic(elapsed / DURATION, 1.92, 0.91);
-  const alphaY = easeOutElastic(elapsed / DURATION, 2.2, 0.76);
-  const opacityAlpha = Math.min(Math.max(elapsed - 300, 0) / 200, 1);
-  const from = props.from;
-  const to = props.to;
-  if (elapsed > DURATION || !ui.useAnimations.value || ui.lowPerformanceMode.value) {
-    rootEl.value.style.transform = `translate(${to.x}px, ${to.y}px) scale(${to.scaleX}, ${to.scaleY})`;
-    rootEl.value.style.opacity = String(to.opacity);
-    isDone = true;
-    return;
-  }
-  const newX = lerp(from.x, to.x, alphaX);
-  const newY = lerp(from.y, to.y, alphaY);
-  const newOpacity = lerp(from.opacity, to.opacity, opacityAlpha);
-  const newScaleX = lerp(from.scaleX, to.scaleX, alphaX);
-  const newScaleY = lerp(from.scaleY, to.scaleY, alphaY);
-  rootEl.value.style.transform = `translate(${newX}px, ${newY}px) scale(${newScaleX}, ${newScaleY})`;
-  rootEl.value.style.opacity = String(newOpacity);
-});
-onMounted(() => {
-  if (rootEl.value) {
-    rootEl.value.style.transform = `translate(${props.from.x}px, ${props.from.y}px) scale(${props.from.scaleX}, ${props.from.scaleY})`;
-    rootEl.value.style.opacity = String(props.from.opacity);
-  }
-});
-</script>

package/dist/runtime/components/Edit/Features/DraggingOverlay/DragItems/DragItem.vue.d.ts

@@ -1,25 +0,0 @@
-import type { BlokkliIcon } from '#blokkli-build/icons';
-type AnimationRectangleValues = {
-    opacity: number;
-    scaleX: number;
-    scaleY: number;
-    x: number;
-    y: number;
-};
-export type DragItemData = {
-    isTop: boolean;
-    from: AnimationRectangleValues;
-    to: AnimationRectangleValues;
-    width: number;
-    height: number;
-    transformOrigin: string;
-    markup: string;
-    background: string;
-    bundle?: string;
-    icon?: BlokkliIcon;
-    label?: string;
-    prevVisibility?: string;
-    element: HTMLElement;
-};
-declare const _default: import("vue").DefineComponent<DragItemData, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DragItemData> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/Edit/Features/DraggingOverlay/DragItems/index.vue

@@ -1,219 +0,0 @@
-<template>
-  <div
-    class="bk-vars bk-dragging-overlay"
-    :style="style"
-    :class="[
-  { 'bk-is-touch': isTouch },
-  { 'bk-is-active': !!activeLabel },
-  { bk: !isExisting }
-]"
-  >
-    <div
-      v-show="activeLabel"
-      class="bk bk-dragging-overlay-label"
-      :style="{ backgroundColor: currentActiveColor }"
-    >
-      <Icon name="cursor-move" />
-      <p v-html="currentActiveLabel" />
-    </div>
-    <DragItem v-for="(rect, i) in rects" :key="i" v-bind="rect" />
-  </div>
-</template>
-
-<script setup>
-import {
-  ref,
-  watch,
-  computed,
-  useBlokkli,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
-import { isInsideRect, realBackgroundColor, falsy } from "#blokkli/helpers";
-import { Icon } from "#blokkli/components";
-import DragItem, {} from "./DragItem.vue";
-const { dom, ui, types } = useBlokkli();
-const props = defineProps({
-  items: { type: Array, required: true },
-  x: { type: Number, required: true },
-  y: { type: Number, required: true },
-  startCoords: { type: Object, required: true },
-  isTouch: { type: Boolean, required: true },
-  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(
-  () => props.activeLabel,
-  function(label) {
-    if (label) {
-      currentActiveLabel.value = label;
-    }
-  }
-);
-watch(
-  () => props.activeColor,
-  function(color) {
-    if (color) {
-      currentActiveColor.value = color;
-    }
-  }
-);
-const width = ref(10);
-const height = ref(10);
-const offsetX = ref(0);
-const offsetY = ref(0);
-const translateX = computed(() => {
-  if (props.isTouch) {
-    return window.innerWidth / 2 - width.value / 2;
-  }
-  return props.x - offsetX.value;
-});
-const translateY = computed(() => {
-  if (props.isTouch) {
-    return -50 - 20 + Math.max(0, height.value - 100);
-  }
-  return props.y - offsetY.value;
-});
-const style = computed(() => {
-  return {
-    width: width.value + "px",
-    height: height.value + "px",
-    transform: `translate(${translateX.value}px, ${translateY.value}px)`,
-    "--bk-active-color": props.activeColor && props.activeLabel ? props.activeColor : "rgba(255,255,255,0)"
-  };
-});
-function getRect() {
-  return {
-    x: translateX.value,
-    y: translateY.value,
-    width: width.value,
-    height: height.value
-  };
-}
-defineExpose({ getRect });
-const rects = ref([]);
-function getDraggingBounds(mouse, rect, maxWidth) {
-  const aspectRatio = rect.width / rect.height;
-  const effectiveWidth = Math.min(rect.width, maxWidth);
-  const effectiveHeight = effectiveWidth / aspectRatio;
-  const relativeX = mouse.x - rect.x;
-  const relativeY = mouse.y - rect.y;
-  const proportionX = rect.width > 0 ? relativeX / rect.width : 0;
-  const proportionY = rect.height > 0 ? relativeY / rect.height : 0;
-  const effectiveRelativeX = effectiveWidth * proportionX;
-  const effectiveRelativeY = effectiveHeight * proportionY;
-  const finalX = mouse.x - effectiveRelativeX;
-  const finalY = mouse.y - effectiveRelativeY;
-  return {
-    x: finalX,
-    y: finalY,
-    width: effectiveWidth,
-    height: effectiveHeight
-  };
-}
-onMounted(() => {
-  const elRects = props.items.map((item, index) => {
-    const element = item.itemType === "existing" ? dom.getDragElement(item) : item.element();
-    if (!element) {
-      return;
-    }
-    return {
-      rect: element.getBoundingClientRect(),
-      element,
-      item,
-      index
-    };
-  }).filter(falsy);
-  const boundRect = elRects.find(
-    (v) => isInsideRect(props.startCoords.x, props.startCoords.y, v.rect)
-  ) || elRects[0];
-  if (!boundRect) {
-    return;
-  }
-  const bounds = getDraggingBounds(
-    props.startCoords,
-    boundRect.rect,
-    // Limit width to 250px
-    351
-  );
-  const boundsX = props.isTouch ? 0 : bounds.x;
-  const boundsY = props.isTouch ? translateY.value : bounds.y;
-  offsetX.value = props.startCoords.x - boundsX;
-  offsetY.value = props.startCoords.y - boundsY;
-  width.value = bounds.width;
-  height.value = bounds.height;
-  rects.value = elRects.map((item) => {
-    const artboardScale = item.item.itemType === "existing" ? ui.artboardScale.value : 1;
-    const isTop = item.index === boundRect.index;
-    const rect = item.rect;
-    const element = item.item.itemType === "existing" ? dom.getDragElement(item.item) : item.item.element();
-    if (!element) {
-      return;
-    }
-    const baseRect = element.getBoundingClientRect();
-    const targetScaleX = Math.min(bounds.width / item.element.offsetWidth, 1);
-    const targetScaleY = targetScaleX;
-    const originX = 0;
-    const originY = 0;
-    const from = {
-      opacity: isTop ? 1 : 0.9,
-      scaleX: Math.min(baseRect.width / rect.width, 1) * artboardScale,
-      scaleY: Math.min(baseRect.width / rect.width, 1) * artboardScale,
-      x: props.isTouch ? rect.x - translateX.value : rect.x - boundsX,
-      y: props.isTouch ? -rect.height - (window.innerHeight - bounds.height - rect.y - rect.height + translateY.value) : rect.y - boundsY
-    };
-    const to = {
-      opacity: isTop ? 1 : 0.1,
-      x: 0,
-      y: 0,
-      scaleX: targetScaleX,
-      scaleY: targetScaleY
-    };
-    const markup = (elRects.length < 6 || isTop) && !ui.lowPerformanceMode.value ? dom.getDropElementMarkup(item.item, true) : "";
-    let bundle;
-    let label = "";
-    if (!markup) {
-      if ("itemBundle" in item.item) {
-        bundle = item.item.itemBundle;
-        if (bundle) {
-          const definition = types.getBlockBundleDefinition(bundle);
-          if (definition) {
-            label = definition.label;
-          }
-        }
-      }
-    }
-    return {
-      isTop,
-      from: ui.lowPerformanceMode.value ? to : from,
-      to,
-      width: item.element.offsetWidth,
-      height: item.element.offsetHeight,
-      transformOrigin: `${originX}px ${originY}px`,
-      markup,
-      background: item.item.itemType === "existing" ? realBackgroundColor(item.element) : "",
-      prevVisibility: item.item.itemType === "existing" || item.item.itemType === "existing_structure" ? item.element.style.visibility : void 0,
-      element: item.element,
-      bundle,
-      label
-    };
-  }).filter(falsy);
-  elRects.forEach((item) => {
-    if (item.item.itemType === "existing" || item.item.itemType === "existing_structure") {
-      item.element.style.visibility = "hidden";
-    }
-  });
-});
-onBeforeUnmount(() => {
-  rects.value.forEach((item) => {
-    if (item.prevVisibility !== void 0) {
-      item.element.style.visibility = item.prevVisibility;
-    }
-  });
-});
-</script>

package/dist/runtime/components/Edit/Features/DraggingOverlay/DragItems/index.vue.d.ts

@@ -1,27 +0,0 @@
-import type { Coord, DraggableItem, Rectangle } from '#blokkli/types';
-type __VLS_Props = {
-    /**
-     * The items being dragged/placed.
-     */
-    items: DraggableItem[];
-    /**
-     * The current x position of the cursor.
-     */
-    x: number;
-    /**
-     * The current y position of the cursor.
-     */
-    y: number;
-    /**
-     * The coordinates when the dragging action was started.
-     */
-    startCoords: Coord;
-    isTouch: boolean;
-    activeColor?: string;
-    activeLabel?: string;
-};
-declare function getRect(): Rectangle;
-declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    getRect: typeof getRect;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;