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

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

@@ -1,32 +1,430 @@
 <template>
-  <Teleport to="body">
-    <canvas id="bk-animation-canvas-webgl" ref="canvasGl" />
+  <Teleport to="#bk-canvas-overlay">
+    <canvas
+      id="bk-animation-canvas-webgl"
+      ref="canvasEl"
+      :style
+      @click.capture="onClick"
+      @pointerdown.capture="onPointerDown"
+      @pointerup.capture="onPointerUp"
+    />
   </Teleport>
 </template>
 
 <script setup>
+import {
+  falsy,
+  getDistance,
+  getInteractionCoordinates,
+  isInsideRect
+} from "#blokkli/helpers";
+import { MOUSE_BUTTON, MOUSE_BUTTONS } from "#blokkli/helpers/dom";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { ref, computed, useBlokkli, onMounted, watch } from "#imports";
-const { ui, animation, eventBus } = useBlokkli();
-const canvasGl = ref(null);
+import {
+  ref,
+  computed,
+  useBlokkli,
+  onMounted,
+  watch,
+  useTemplateRef,
+  onBeforeUnmount
+} from "#imports";
+const {
+  dom,
+  eventBus,
+  selection,
+  keyboard,
+  ui,
+  animation,
+  state,
+  editable,
+  runtimeConfig
+} = useBlokkli();
+const style = computed(() => {
+  return {
+    imageRendering: "pixelated",
+    cursor: animation.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 = editable.getEditableAtPoint(x, y);
+  if (editableField) {
+    const uuid = editableField.type === runtimeConfig.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 onPointerMove(e) {
+  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: [...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"
+        });
+      }
+    }
+    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;
+  }
+  canvasEl.value?.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) {
+  canvasEl.value?.removeEventListener("pointermove", onPointerMove);
+  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.editableActive.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 = 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 (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: [...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 (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");
 const canvasAttributes = computed(() => {
   return {
     width: ui.viewport.value.width * animation.dpi.value,
-    height: ui.viewport.value.height * animation.dpi.value,
-    style: {
-      width: ui.viewport.value.width + "px",
-      height: ui.viewport.value.height + "px"
-    }
+    height: ui.viewport.value.height * animation.dpi.value
   };
 });
 let gl = null;
 function initGl() {
-  if (!canvasGl.value) {
+  if (!canvasEl.value) {
     return;
   }
   gl = animation.gl();
-  canvasGl.value.width = canvasAttributes.value.width;
-  canvasGl.value.height = canvasAttributes.value.height;
+  canvasEl.value.width = canvasAttributes.value.width;
+  canvasEl.value.height = canvasAttributes.value.height;
   if (!gl) {
     return;
   }
@@ -57,31 +455,28 @@ function setScissor(v) {
 watch(scissor, setScissor);
 let lastCanvasWidth = 0;
 let lastCanvasHeight = 0;
-onBlokkliEvent("animationFrame", (e) => {
-  if (!canvasGl.value) {
+onBlokkliEvent("animationFrame", () => {
+  if (!canvasEl.value) {
     return;
   }
   const canvasWidth = canvasAttributes.value.width;
   const canvasHeight = canvasAttributes.value.height;
   if (canvasWidth !== lastCanvasWidth || canvasHeight !== lastCanvasHeight) {
-    canvasGl.value.width = canvasWidth;
-    canvasGl.value.height = canvasHeight;
+    canvasEl.value.width = canvasWidth;
+    canvasEl.value.height = canvasHeight;
     if (gl) {
       gl.viewport(0, 0, canvasWidth, canvasHeight);
     }
     lastCanvasWidth = canvasWidth;
     lastCanvasHeight = canvasHeight;
   }
-  const offset = ui.artboardOffset.value;
-  const scale = ui.artboardScale.value;
-  eventBus.emit("canvas:draw", {
-    ...e,
-    artboardOffset: offset,
-    artboardScale: scale,
-    time: e.time
-  });
 });
 onMounted(() => {
   initGl();
 });
+onBeforeUnmount(() => {
+  if (canvasEl.value) {
+    canvasEl.value.removeEventListener("pointermove", onPointerMove);
+  }
+});
 </script>

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

@@ -0,0 +1,80 @@
+<template>
+  <div
+    ref="el"
+    class="bk bk-artboard-tooltip"
+    :class="'bk-is-' + placementY"
+    :style="{
+  '--bk-caret-x': caretX
+}"
+  >
+    <div class="bk bk-artboard-tooltip-inner bk-caret-tooltip-inner">
+      <div class="bk-artboard-tooltip-header">
+        <div v-html="title" />
+        <button @click="$emit('close')">
+          <Icon :name="closeIcon" />
+        </button>
+      </div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import useStickyToolbar, {
+} from "#blokkli/helpers/composables/useStickyToolbar";
+import {
+  useTemplateRef,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+  watch
+} from "#imports";
+import { Icon } from "#blokkli/components";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  anchorEl: { type: null, required: false, default: null },
+  anchorCoordinates: { type: [Object, null], required: false, default: null },
+  placementY: { type: String, required: false, default: "auto" },
+  closeIcon: { type: null, required: false, default: "close" }
+});
+const emit = defineEmits(["close"]);
+const el = useTemplateRef("el");
+const { ui } = useBlokkli();
+const { placementY, caretX } = useStickyToolbar(el, {
+  getAnchorElement() {
+    return props.anchorEl ?? null;
+  },
+  getAnchorCoordinates() {
+    return props.anchorCoordinates ?? null;
+  },
+  getPlacementY() {
+    return props.placementY;
+  },
+  getPlacementX() {
+    return "center";
+  },
+  getCaretWidth() {
+    return 30;
+  }
+});
+watch(ui.openTooltip, (id) => {
+  if (id !== props.id) {
+    emit("close");
+  }
+});
+onBlokkliEvent("keyPressed", (e) => {
+  if (e.code === "Escape") {
+    emit("close");
+  }
+});
+onMounted(() => {
+  ui.openTooltip.value = props.id;
+});
+onBeforeUnmount(() => {
+  if (ui.openTooltip.value === props.id) {
+    ui.openTooltip.value = "";
+  }
+});
+</script>

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

@@ -0,0 +1,32 @@
+import { type PlacementVertical } from '#blokkli/helpers/composables/useStickyToolbar';
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { Coord } from '#blokkli/types';
+type __VLS_Props = {
+    id: string;
+    title: string;
+    anchorEl?: HTMLElement | null;
+    anchorCoordinates?: Coord | null;
+    placementY?: PlacementVertical;
+    closeIcon?: BlokkliIcon;
+};
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: 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 _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,51 @@
+<template>
+  <div
+    ref="el"
+    class="bk bk-banner"
+    :class="scheme ? 'bk-scheme-' + scheme : void 0"
+  >
+    <Icon :name="icon" />
+    <p v-html="text" />
+    <button v-if="button" class="bk-banner-close" @click="$emit('click')">
+      {{ button }}
+      <Icon name="close" />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/components";
+import {
+  onBeforeUnmount,
+  onMounted,
+  useTemplateRef,
+  useBlokkli
+} from "#imports";
+const props = defineProps({
+  id: { type: String, required: true },
+  icon: { type: null, required: true },
+  text: { type: String, required: true },
+  button: { type: String, required: false, default: void 0 },
+  scheme: { type: String, required: false, default: "accent" }
+});
+defineEmits(["click"]);
+const { ui } = useBlokkli();
+const el = useTemplateRef("el");
+const observer = new ResizeObserver((entries) => {
+  const entry = entries.at(0);
+  if (!entry) {
+    return;
+  }
+  const height = Math.ceil(entry.borderBoxSize.at(0)?.blockSize ?? 0);
+  ui.setBannerHeight(props.id, height);
+});
+onMounted(() => {
+  if (el.value) {
+    observer.observe(el.value);
+  }
+});
+onBeforeUnmount(() => {
+  observer.disconnect();
+  ui.removeBanner(props.id);
+});
+</script>

package/dist/runtime/components/Edit/Banner/index.vue.d.ts

@@ -0,0 +1,18 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from '#blokkli/types/theme';
+type __VLS_Props = {
+    id: string;
+    icon: BlokkliIcon;
+    text: string;
+    button?: string;
+    scheme?: ThemeColorName;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {
+    button: string;
+    scheme: ThemeColorName;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;