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

package/dist/runtime/editor/components/AnimationCanvas/index.vue

@@ -0,0 +1,455 @@
+<template>
+  <Teleport to="#bk-canvas-overlay">
+    <canvas
+      id="bk-animation-canvas-webgl"
+      :key="animation.canvasKey.value"
+      ref="canvasEl"
+      :style
+      @click.capture="onClick"
+      @pointerdown.capture="onPointerDown"
+      @pointerup.capture="onPointerUp"
+      @pointermove="onPointerMove"
+    />
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  falsy
+} from "#blokkli/helpers";
+import {
+  getDistance,
+  isInsideRect
+} from "#blokkli/editor/helpers/geometry";
+import {
+  MOUSE_BUTTON,
+  MOUSE_BUTTONS,
+  getInteractionCoordinates
+} from "#blokkli/editor/helpers/dom";
+import {
+  ref,
+  computed,
+  useBlokkli,
+  watch,
+  useTemplateRef,
+  onBeforeUnmount
+} from "#imports";
+import { itemEntityType } from "#blokkli-build/config";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+const {
+  dom,
+  eventBus,
+  selection,
+  keyboard,
+  ui,
+  animation,
+  state,
+  directive,
+  blocks
+} = useBlokkli();
+let handlePointerMove = false;
+const cursor = computed(
+  () => state.isLoading.value ? "wait" : animation.cursor.value
+);
+const style = computed(() => {
+  return {
+    imageRendering: "pixelated",
+    cursor: cursor.value
+  };
+});
+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 editableField = directive.getEditableAtPoint(x, y);
+  if (editableField) {
+    const uuid = editableField.type === itemEntityType ? editableField.uuid : void 0;
+    return {
+      editableFieldName: editableField.fieldName,
+      uuid,
+      timestamp: Date.now(),
+      x,
+      y
+    };
+  }
+  const visibleUuids = dom.getVisibleBlocks();
+  let deepestUuid = "";
+  let deepestLevel = -1;
+  for (let i = 0; i < visibleUuids.length; i++) {
+    const uuid = visibleUuids[i];
+    if (!uuid) {
+      continue;
+    }
+    const rect = dom.getBlockRect(uuid);
+    if (rect) {
+      const level = state.getNestingLevel(uuid);
+      if (level <= deepestLevel) {
+        continue;
+      }
+      const relativeRect = ui.getViewportRelativeRect(rect);
+      if (isInsideRect(x, y, relativeRect)) {
+        deepestUuid = uuid;
+        deepestLevel = level;
+      }
+    }
+  }
+  if (deepestUuid) {
+    return {
+      uuid: deepestUuid,
+      timestamp: Date.now(),
+      x,
+      y
+    };
+  }
+  return null;
+}
+function toDraggableExisting(v) {
+  const blocks2 = Array.isArray(v) ? v : [v];
+  return blocks2.map((block) => {
+    return {
+      itemType: "existing",
+      block
+    };
+  });
+}
+function onPointerMove(e) {
+  if (!handlePointerMove) {
+    return;
+  }
+  if (keyboard.isPressingSpace.value || 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) {
+      canvasEl.value?.removeEventListener("pointermove", onPointerMove);
+      eventBus.emit("multi-select:start", {
+        x: e.clientX,
+        y: e.clientY
+      });
+    }
+    return;
+  }
+  if (state.editMode.value !== "editing") {
+    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: toDraggableExisting(selection.items.value),
+        coords: { x: e.clientX, y: e.clientY },
+        mode: "mouse"
+      });
+    } else {
+      const block = blocks.getBlock(interacted.uuid);
+      if (block) {
+        eventBus.emit("dragging:start", {
+          items: toDraggableExisting(block),
+          coords: { x: e.clientX, y: e.clientY },
+          mode: "mouse"
+        });
+      }
+    }
+    canvasEl.value?.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);
+  canvasEl.value?.removeEventListener("pointermove", onPointerMove);
+  if (ui.openTooltip.value) {
+    return;
+  }
+  if (state.isLoading.value) {
+    return;
+  }
+  handlePointerMove = true;
+  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) {
+  handlePointerMove = false;
+  if (e.button === MOUSE_BUTTON.AUXILIARY) {
+    e.preventDefault();
+    return;
+  }
+  e.preventDefault();
+  e.stopPropagation();
+  e.stopImmediatePropagation();
+  if (ui.openTooltip.value) {
+    ui.openTooltip.value = "";
+    return;
+  }
+  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.activeEditableLabel.value) {
+    eventBus.emit("window:clickAway");
+    lastInteractedElement = null;
+    return;
+  }
+  if (animation.handleClick(e.clientX, e.clientY)) {
+    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 = blocks.getBlock(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 (ui.openTooltip.value) {
+    return;
+  }
+  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: toDraggableExisting(selection.items.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 (ui.openTooltip.value) {
+    ui.openTooltip.value = "";
+    return;
+  }
+  if (wasDragging) {
+    return;
+  }
+  if (!touchStartCoords) {
+    return;
+  }
+  if (distance > 7) {
+    return;
+  }
+  if (animation.handleClick(coords.x, coords.y)) {
+    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();
+}
+const canvasEl = useTemplateRef("canvasEl");
+watch(
+  canvasEl,
+  (newCanvas, oldCanvas) => {
+    if (oldCanvas) {
+      handlePointerMove = false;
+      animation.removeCanvasElement();
+    }
+    if (newCanvas) {
+      animation.setCanvasElement(newCanvas);
+      animation.requestDraw();
+    }
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => {
+  animation.removeCanvasElement();
+  handlePointerMove = false;
+});
+</script>

package/dist/runtime/editor/components/AnimationCanvas/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/AppMenu/MenuButton.d.vue.ts

@@ -0,0 +1,29 @@
+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<{
+    id: string;
+    title: string;
+    description: string;
+    disabled?: boolean;
+    icon?: BlokkliIcon;
+    type?: "success" | "danger" | "yellow";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+    title: string;
+    description: string;
+    disabled?: boolean;
+    icon?: BlokkliIcon;
+    type?: "success" | "danger" | "yellow";
+}> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/AppMenu/MenuButton.vue

@@ -0,0 +1,39 @@
+<template>
+  <button
+    :id="'bk-menu-list-button-' + id"
+    class="bk-menu-list-button"
+    :disabled="disabled"
+    :class="type ? 'bk-is-' + type : ''"
+    @click.prevent.stop="onClick"
+  >
+    <div class="bk-menu-list-icon">
+      <slot>
+        <Icon v-if="icon" :name="icon" />
+      </slot>
+    </div>
+    <strong>{{ title }}</strong>
+    <span>{{ description }}</span>
+  </button>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  description: { type: String, required: true },
+  disabled: { type: Boolean, required: false },
+  icon: { type: null, required: false },
+  type: { type: String, required: false }
+});
+const emit = defineEmits(["click"]);
+function onClick() {
+  emit("click");
+}
+</script>
+
+<script>
+export default {
+  name: "MenuButton"
+};
+</script>

package/dist/runtime/editor/components/AppMenu/MenuButton.vue.d.ts

@@ -0,0 +1,29 @@
+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<{
+    id: string;
+    title: string;
+    description: string;
+    disabled?: boolean;
+    icon?: BlokkliIcon;
+    type?: "success" | "danger" | "yellow";
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+    title: string;
+    description: string;
+    disabled?: boolean;
+    icon?: BlokkliIcon;
+    type?: "success" | "danger" | "yellow";
+}> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/AppMenu/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/components/AppMenu/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <BlokkliTransition name="menu">
+    <div
+      v-if="menuOpen"
+      class="bk bk-menu-list"
+      @wheel.passive.stop
+      @touchstart.stop.passive
+      @touchmove.stop.passive
+    >
+      <button :class="{ 'bk-is-active': menuOpen }" @click="closeMenu">
+        <Icon name="bk_mdi_close" />
+      </button>
+      <div class="bk-menu-list-inner">
+        <div id="bk-menu-primary">
+          <MenuButton
+            v-for="button in primaryButtons"
+            :id="button.id"
+            :key="button.id"
+            :title="button.title"
+            :description="button.description"
+            :icon="button.icon"
+            :type="button.type"
+            :disabled="button.disabled"
+            @click="onClick(button)"
+          />
+        </div>
+        <div id="bk-menu-secondary">
+          <MenuButton
+            v-for="button in secondaryButtons"
+            :id="button.id"
+            :key="button.id"
+            :title="button.title"
+            :description="button.description"
+            :icon="button.icon"
+            :type="button.type"
+            :disabled="button.disabled"
+            @click="onClick(button)"
+          />
+        </div>
+        <aside class="bk-menu-meta">
+          <div class="bk-menu-meta-logo">
+            <Icon name="logo" />
+            <div><strong>@blokkli/editor</strong> {{ blokkliVersion }}</div>
+          </div>
+
+          <div>
+            <a href="https://www.blokk.li" target="_blank">blokk.li</a>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </BlokkliTransition>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon, BlokkliTransition } from "#blokkli/editor/components";
+import { blokkliVersion } from "#blokkli-build/editor-config";
+import MenuButton from "./MenuButton.vue";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+const DIALOG_MENU = "menu";
+const { ui, plugins } = useBlokkli();
+const menuOpen = computed(() => ui.currentDialog.value?.id === DIALOG_MENU);
+function closeMenu() {
+  ui.closeDialog(DIALOG_MENU);
+}
+onBlokkliEvent("overlay:close", closeMenu);
+const allButtons = computed(() => plugins.get("menuButton"));
+const primaryButtons = computed(() => {
+  return allButtons.value.filter((button) => !button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
+});
+const secondaryButtons = computed(() => {
+  return allButtons.value.filter((button) => button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
+});
+function onClick(button) {
+  button.callback();
+  closeMenu();
+}
+</script>
+
+<script>
+export default {
+  name: "AppMenu"
+};
+</script>

package/dist/runtime/editor/components/AppMenu/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/components/ArtboardTooltip/index.d.vue.ts

@@ -0,0 +1,33 @@
+import { type PlacementVertical } from '#blokkli/editor/composables/useStickyToolbar';
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { Coord } from '#blokkli/editor/types/geometry';
+type __VLS_Props = {
+    id: string;
+    title: string;
+    anchorEl?: HTMLElement | null;
+    anchorCoordinates?: Coord | null;
+    placementY?: PlacementVertical;
+    closeIcon?: BlokkliIcon;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {
+    anchorEl: HTMLElement | null;
+    anchorCoordinates: Coord | null;
+    placementY: PlacementVertical;
+    closeIcon: BlokkliIcon;
+}, {}, {}, {}, 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;
+    };
+};