@blokkli/editor 2.0.0-alpha.15 → 2.0.0-alpha.17

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/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/components/Edit/Features/Selection/AddButtons/AddButtonsField.vue.d.ts

@@ -1,14 +0,0 @@
-type __VLS_Props = {
-    fieldKey: string | undefined;
-    containerRect: {
-        x: number;
-        y: number;
-    } | null;
-    title: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (element: HTMLElement) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onClick?: ((element: HTMLElement) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;