@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.18

package/dist/runtime/components/Edit/DragInteractions/index.vue

@@ -1,401 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script setup>
-import {
-  falsy,
-  getDistance,
-  getInteractionCoordinates,
-  isInsideRect
-} from "#blokkli/helpers";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { MOUSE_BUTTON, MOUSE_BUTTONS } from "#blokkli/helpers/dom";
-import { watch, ref, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
-const { dom, eventBus, selection, keyboard, ui, state } = useBlokkli();
-const rootEl = ui.rootElement();
-const rects = ref([]);
-function buildRects() {
-  const visible = dom.getVisibleBlocks();
-  rects.value = visible.map((uuid) => {
-    const rect = dom.getBlockRect(uuid);
-    if (!rect) {
-      return;
-    }
-    return { uuid, rect };
-  }).filter(falsy);
-}
-watch(dom.isReady, buildRects);
-let lastInteractedElement = null;
-let pointerDownElement = null;
-let mouseStartCoordinates = null;
-let pointerDownTimestamp = 0;
-let pointerUpTimestamp = 0;
-function getInteractedElement(e) {
-  const { x, y } = getInteractionCoordinates(e);
-  const elements = document.elementsFromPoint(x, y);
-  let editableFieldName = "";
-  let uuid = "";
-  for (let i = 0; i < elements.length; i++) {
-    let el = elements[i];
-    if (!(el instanceof HTMLElement)) {
-      continue;
-    }
-    if (el.dataset.blokkliEditableField && !el.closest('[data-bk-in-proxy="true"]')) {
-      editableFieldName = el.dataset.blokkliEditableField;
-    }
-    if (el instanceof HTMLTableCellElement) {
-      const parent = el.parentElement;
-      if (parent instanceof HTMLTableRowElement) {
-        el = parent;
-      }
-    }
-    if (!(el instanceof HTMLElement)) {
-      continue;
-    }
-    if (!el.dataset.uuid) {
-      continue;
-    }
-    const block = dom.findBlock(el.dataset.uuid);
-    if (!block) {
-      continue;
-    }
-    const draggableEl = dom.getDragElement(block);
-    if (draggableEl && el !== draggableEl && !elements.includes(draggableEl)) {
-      continue;
-    }
-    uuid = el.dataset.uuid;
-    break;
-  }
-  if (editableFieldName || uuid) {
-    return { editableFieldName, uuid, timestamp: Date.now(), x, y };
-  }
-  const visibleUuids = dom.getVisibleBlocks();
-  for (let i = 0; i < visibleUuids.length; i++) {
-    const rect = dom.getBlockRect(visibleUuids[i]);
-    if (rect) {
-      const relativeRect = ui.getViewportRelativeRect(rect);
-      if (isInsideRect(x, y, relativeRect)) {
-        return {
-          uuid: visibleUuids[i],
-          timestamp: Date.now(),
-          x,
-          y
-        };
-      }
-    }
-  }
-  return null;
-}
-function onPointerMove(e) {
-  if (keyboard.isPressingSpace.value || state.editMode.value !== "editing" || e.buttons === MOUSE_BUTTONS.AUXILIARY) {
-    return;
-  }
-  e.preventDefault();
-  e.stopPropagation();
-  e.stopImmediatePropagation();
-  if (e.pointerType === "touch") {
-    return onTouchMove(e);
-  }
-  if (e.buttons !== MOUSE_BUTTONS.PRIMARY) {
-    return;
-  }
-  if (!mouseStartCoordinates || selection.isMultiSelecting.value || selection.isDragging.value || keyboard.isPressingSpace.value) {
-    return;
-  }
-  const diffX = Math.abs(mouseStartCoordinates.x - e.clientX);
-  const diffY = Math.abs(mouseStartCoordinates.y - e.clientY);
-  if (!pointerDownElement) {
-    const timeDelta = Date.now() - pointerDownTimestamp;
-    const maxMovement = Math.max(diffX, diffY);
-    if (maxMovement > 6 && timeDelta > 150 || maxMovement > 20) {
-      rootEl.removeEventListener("pointermove", onPointerMove);
-      eventBus.emit("multi-select:start", {
-        x: e.clientX,
-        y: e.clientY
-      });
-    }
-    return;
-  }
-  if (diffX < 6 && diffY < 6) {
-    return;
-  }
-  const interacted = getInteractedElement(e);
-  if (interacted && interacted.uuid) {
-    if (selection.uuids.value.includes(interacted.uuid)) {
-      eventBus.emit("dragging:start", {
-        items: [...selection.blocks.value],
-        coords: { x: e.clientX, y: e.clientY },
-        mode: "mouse"
-      });
-    } else {
-      const block = dom.findBlock(interacted.uuid);
-      if (block) {
-        eventBus.emit("dragging:start", {
-          items: [block],
-          coords: { x: e.clientX, y: e.clientY },
-          mode: "mouse"
-        });
-      }
-    }
-    rootEl.removeEventListener("pointermove", onPointerMove);
-  }
-}
-function onPointerDown(e) {
-  if (e.buttons === MOUSE_BUTTONS.AUXILIARY) {
-    return;
-  }
-  if (!keyboard.isPressingSpace.value) {
-    e.preventDefault();
-    e.stopPropagation();
-    e.stopImmediatePropagation();
-  }
-  keyboard.setShortcutStateFromEvent(e);
-  rootEl.removeEventListener("pointermove", onPointerMove);
-  if (state.isLoading.value) {
-    return;
-  }
-  rootEl.addEventListener("pointermove", onPointerMove);
-  if (e.pointerType === "touch") {
-    return onTouchStart(e);
-  }
-  if (selection.isDragging.value) {
-    return;
-  }
-  pointerDownTimestamp = Date.now();
-  const coords = { x: e.clientX, y: e.clientY };
-  mouseStartCoordinates = coords;
-  if (!e.shiftKey && e.buttons === MOUSE_BUTTONS.PRIMARY) {
-    const interacted = getInteractedElement(e);
-    pointerDownElement = interacted;
-    if (interacted) {
-      return;
-    }
-  }
-  eventBus.emit("mouse:down", { ...coords, type: "mouse", distance: 0 });
-}
-function isClickInArtboard(coords) {
-  const size = ui.artboardSize.value;
-  const scale = ui.artboardScale.value;
-  const rect = {
-    x: ui.artboardOffset.value.x,
-    y: ui.artboardOffset.value.y,
-    width: size.width * scale,
-    height: size.height * scale
-  };
-  return isInsideRect(coords.x, coords.y, rect);
-}
-function onPointerUp(e) {
-  rootEl.removeEventListener("pointermove", onPointerMove);
-  if (e.button === MOUSE_BUTTON.AUXILIARY) {
-    e.preventDefault();
-    return;
-  }
-  e.preventDefault();
-  e.stopPropagation();
-  e.stopImmediatePropagation();
-  const wasDragging = selection.isDragging.value;
-  const wasMultiSelecting = selection.isMultiSelecting.value;
-  pointerDownElement = null;
-  if (state.isLoading.value) {
-    return;
-  }
-  if (e.pointerType === "touch") {
-    return onTouchEnd(e);
-  }
-  const coords = getInteractionCoordinates(e);
-  const distance = mouseStartCoordinates ? getDistance(mouseStartCoordinates, coords) : 0;
-  eventBus.emit("mouse:up", {
-    x: e.clientX,
-    y: e.clientY,
-    type: "mouse",
-    distance,
-    duration: Date.now() - pointerDownTimestamp
-  });
-  if (wasDragging || wasMultiSelecting) {
-    eventBus.emit("dragging:end");
-    return;
-  }
-  if (keyboard.isPressingSpace.value) {
-    return;
-  }
-  if (selection.editableActive.value) {
-    eventBus.emit("window:clickAway");
-    lastInteractedElement = null;
-    return;
-  }
-  const clicked = getInteractedElement(e);
-  if (clicked && pointerUpTimestamp && lastInteractedElement && (clicked.uuid === lastInteractedElement.uuid || clicked.editableFieldName === lastInteractedElement.editableFieldName)) {
-    const deltaTime = Date.now() - pointerUpTimestamp;
-    const deltaX = Math.abs(lastInteractedElement.x - e.clientX);
-    const deltaY = Math.abs(lastInteractedElement.y - e.clientY);
-    if (deltaTime < 400 && deltaX < 3 && deltaY < 3) {
-      if (clicked.editableFieldName) {
-        eventBus.emit("editable:focus", {
-          fieldName: clicked.editableFieldName,
-          uuid: clicked.uuid
-        });
-        return;
-      }
-      if (lastInteractedElement.uuid) {
-        const block = dom.findBlock(lastInteractedElement.uuid);
-        if (!block) {
-          return;
-        }
-        eventBus.emit("item:doubleClick", block);
-      }
-    }
-  }
-  lastInteractedElement = clicked;
-  pointerUpTimestamp = Date.now();
-  if (clicked?.uuid) {
-    dom.refreshBlockRect(clicked.uuid);
-    if (keyboard.isPressingControl.value || selection.isMultiSelecting.value) {
-      eventBus.emit("select:toggle", clicked.uuid);
-    } else if (keyboard.isPressingShift.value) {
-      eventBus.emit("select:shiftToggle", clicked.uuid);
-    } else {
-      eventBus.emit("select", clicked.uuid);
-    }
-    return;
-  }
-  eventBus.emit("window:clickAway");
-  if (isClickInArtboard(coords)) {
-    eventBus.emit("select:host");
-  } else {
-    eventBus.emit("select:host:unselect");
-  }
-}
-let longPressTimeout = null;
-let touchStartInteraction = null;
-let touchStartCoords = null;
-let longPressInteraction = null;
-let touchStartTimestamp = 0;
-function onTouchStart(e) {
-  if (e.isPrimary) {
-    touchStartTimestamp = Date.now();
-  }
-  longPressInteraction = null;
-  const coords = getInteractionCoordinates(e);
-  touchStartCoords = coords;
-  eventBus.emit("mouse:down", { ...coords, type: "touch", distance: 0 });
-  if (selection.isDragging.value) {
-    return;
-  }
-  clearTimeout(longPressTimeout);
-  const interacted = getInteractedElement(e);
-  if (!interacted?.uuid) {
-    return;
-  }
-  touchStartInteraction = interacted;
-  longPressTimeout = setTimeout(() => {
-    if (touchStartInteraction?.uuid) {
-      longPressInteraction = touchStartInteraction;
-      if (selection.uuids.value.includes(touchStartInteraction.uuid) && state.editMode.value === "editing") {
-        eventBus.emit("dragging:start", {
-          items: [...selection.blocks.value],
-          coords: {
-            x: touchStartInteraction.x,
-            y: touchStartInteraction.y
-          },
-          mode: "touch"
-        });
-        return;
-      }
-      eventBus.emit("select:start", {
-        uuids: [...selection.uuids.value, touchStartInteraction.uuid],
-        mode: "touch"
-      });
-    }
-  }, 500);
-}
-function onTouchMove(e) {
-  if (!longPressTimeout || !touchStartInteraction) {
-    return;
-  }
-  const coords = getInteractionCoordinates(e);
-  const deltaX = Math.abs(coords.x - touchStartInteraction.x);
-  const deltaY = Math.abs(coords.y - touchStartInteraction.y);
-  if (deltaX > 10 || deltaY > 10) {
-    clearTimeout(longPressTimeout);
-    longPressTimeout = null;
-  }
-}
-function onTouchEnd(e) {
-  const wasDragging = selection.isDragging.value;
-  const coords = getInteractionCoordinates(e);
-  const distance = touchStartCoords ? getDistance(touchStartCoords, coords) : 0;
-  if (e.isPrimary) {
-    eventBus.emit("mouse:up", {
-      ...coords,
-      type: "touch",
-      distance,
-      duration: Date.now() - touchStartTimestamp
-    });
-  }
-  clearTimeout(longPressTimeout);
-  longPressTimeout = null;
-  if (wasDragging) {
-    return;
-  }
-  if (!touchStartCoords) {
-    return;
-  }
-  if (distance > 7) {
-    return;
-  }
-  const interacted = getInteractedElement(e);
-  if (interacted?.uuid) {
-    if (longPressInteraction && longPressInteraction.uuid === interacted.uuid) {
-      return;
-    }
-    if (selection.isMultiSelecting.value) {
-      eventBus.emit("select:toggle", interacted.uuid);
-    } else {
-      eventBus.emit("select", interacted.uuid);
-    }
-  } else {
-    eventBus.emit("window:clickAway");
-  }
-  longPressInteraction = null;
-}
-onBlokkliEvent("dragging:start", (e) => {
-  mouseStartCoordinates = e.coords;
-});
-function onClick(e) {
-  e.preventDefault();
-  e.stopImmediatePropagation();
-  e.stopPropagation();
-}
-onMounted(() => {
-  const providerElement = ui.providerElement();
-  providerElement.addEventListener("click", onClick, {
-    capture: true
-  });
-  rootEl.addEventListener("click", onClick, {
-    capture: true
-  });
-  rootEl.addEventListener("pointerdown", onPointerDown, {
-    capture: true
-  });
-  rootEl.addEventListener("pointerup", onPointerUp, {
-    capture: true
-  });
-});
-onBeforeUnmount(() => {
-  const providerElement = ui.providerElement();
-  providerElement.removeEventListener("click", onClick, {
-    capture: true
-  });
-  rootEl.removeEventListener("click", onClick, {
-    capture: true
-  });
-  rootEl.removeEventListener("pointerdown", onPointerDown, {
-    capture: true
-  });
-  rootEl.removeEventListener("pointermove", onPointerMove);
-  rootEl.removeEventListener("pointerup", onPointerUp, {
-    capture: true
-  });
-});
-</script>

package/dist/runtime/components/Edit/Features/CommandPalette/Palette/Group/index.vue

@@ -1,63 +0,0 @@
-<template>
-  <div v-if="shouldRender" class="bk-command-palette-results-list">
-    <div>
-      <button
-        v-for="item in mapped"
-        v-show="item.visible"
-        :key="item.id"
-        :data-command-id="item.id"
-        :data-command-visible="item.visible"
-        class="bk-command"
-        :class="{ 'bk-is-focused': focusedId === item.id }"
-        @mouseenter="$emit('focus', item.id)"
-        @click.prevent="$emit('select', item.id)"
-      >
-        <div class="bk-command-icon">
-          <Icon v-if="item.icon" :name="item.icon" />
-          <ItemIcon v-else :bundle="item.bundle" />
-        </div>
-        <Highlight :text="item.label" tag="span" :positions="item.positions" />
-        <div class="bk-command-group">{{ getGroupLabel(item.group) }}</div>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { computed, useBlokkli } from "#imports";
-import { Icon, ItemIcon, Highlight } from "#blokkli/components";
-const props = defineProps({
-  commands: { type: Array, required: true },
-  visibleIds: { type: null, required: true },
-  focusedId: { type: String, required: true }
-});
-defineEmits(["close", "focus", "select"]);
-const { $t } = useBlokkli();
-const mapped = computed(() => {
-  return props.commands.map((v) => {
-    const found = props.visibleIds?.find((w) => w.id === v._id);
-    return {
-      ...v,
-      visible: props.visibleIds === void 0 || !!found,
-      positions: found?.positions
-    };
-  }).sort((a, b) => {
-    const indexA = props.visibleIds?.findIndex((w) => w.id === a._id) || -1;
-    const indexB = props.visibleIds?.findIndex((w) => w.id === b._id) || -1;
-    return indexA - indexB;
-  });
-});
-const getGroupLabel = (id) => {
-  if (id === "ui") {
-    return $t("commandGroup.ui", "Interface");
-  } else if (id === "add") {
-    return $t("commandGroup.add", "Add new");
-  } else if (id === "action") {
-    return $t("commandGroup.action", "Actions");
-  } else if (id === "selection") {
-    return $t("commandGroup.selection", "Selection");
-  }
-  return $t("commandGroup.misc", "Miscellaneous");
-};
-const shouldRender = computed(() => mapped.value.some((v) => v.visible));
-</script>

package/dist/runtime/components/Edit/Features/Selection/AddButtons/AddButtonsField.vue

@@ -1,54 +0,0 @@
-<template>
-  <button
-    ref="button"
-    class="bk-selection-add-button bk-is-field"
-    tabindex="-1"
-    :data-title="title"
-    :style="{
-  transform: `translate(${left}px, ${top}px)`,
-  visibility: isVisible ? 'visible' : 'hidden'
-}"
-    @click="onClick"
-  >
-    <div>
-      <Icon name="plus" />
-    </div>
-  </button>
-</template>
-
-<script setup>
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { useBlokkli, ref, useTemplateRef } from "#imports";
-import { Icon } from "#blokkli/components";
-const props = defineProps({
-  fieldKey: { type: null, required: true },
-  containerRect: { type: [Object, null], required: true },
-  title: { type: String, required: true }
-});
-const emit = defineEmits(["click"]);
-const { dom } = useBlokkli();
-const button = useTemplateRef("button");
-const left = ref(0);
-const top = ref(0);
-const isVisible = ref(false);
-const BUTTON_SIZE = 30;
-function onClick() {
-  if (button.value) {
-    emit("click", button.value);
-  }
-}
-onBlokkliEvent("canvas:draw", () => {
-  if (!props.fieldKey || !props.containerRect) {
-    isVisible.value = false;
-    return;
-  }
-  const fieldRect = dom.getFieldRect(props.fieldKey);
-  if (!fieldRect) {
-    isVisible.value = false;
-    return;
-  }
-  left.value = Math.round(fieldRect.x + fieldRect.width / 2 - BUTTON_SIZE / 2);
-  top.value = Math.round(fieldRect.y + fieldRect.height / 2 - BUTTON_SIZE / 2);
-  isVisible.value = true;
-});
-</script>

package/dist/runtime/plugins/blokkliEditable.js

@@ -1,31 +0,0 @@
-import { defineNuxtPlugin } from "#imports";
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.vueApp.directive("blokkli-editable", {
-    created(el, binding) {
-      if (import.meta.client) {
-        if (!window.location.search.includes("blokkliEditing")) {
-          return;
-        }
-        const fieldName = binding.value?.name || binding.arg;
-        if (!fieldName) {
-          return;
-        }
-        el.dataset.blokkliEditableField = fieldName;
-      }
-    }
-  });
-  nuxtApp.vueApp.directive("blokkli-droppable", {
-    created(el, binding) {
-      if (import.meta.client) {
-        if (!window.location.search.includes("blokkliEditing")) {
-          return;
-        }
-        const fieldName = binding.value?.name || binding.arg;
-        if (!fieldName) {
-          return;
-        }
-        el.dataset.blokkliDroppableField = fieldName;
-      }
-    }
-  });
-});