@blokkli/editor 2.0.0-alpha.21 → 2.0.0-alpha.23

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

@@ -2,11 +2,13 @@
   <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>
@@ -27,7 +29,6 @@ import {
   ref,
   computed,
   useBlokkli,
-  onMounted,
   watch,
   useTemplateRef,
   onBeforeUnmount
@@ -44,6 +45,7 @@ const {
   runtimeConfig,
   blocks
 } = useBlokkli();
+let handlePointerMove = false;
 const cursor = computed(
   () => state.isLoading.value ? "wait" : animation.cursor.value
 );
@@ -124,6 +126,9 @@ function toDraggableExisting(v) {
   });
 }
 function onPointerMove(e) {
+  if (!handlePointerMove) {
+    return;
+  }
   if (keyboard.isPressingSpace.value || e.buttons === MOUSE_BUTTONS.AUXILIARY) {
     return;
   }
@@ -197,7 +202,7 @@ function onPointerDown(e) {
   if (state.isLoading.value) {
     return;
   }
-  canvasEl.value?.addEventListener("pointermove", onPointerMove);
+  handlePointerMove = true;
   if (e.pointerType === "touch") {
     return onTouchStart(e);
   }
@@ -228,7 +233,7 @@ function isClickInArtboard(coords) {
   return isInsideRect(coords.x, coords.y, rect);
 }
 function onPointerUp(e) {
-  canvasEl.value?.removeEventListener("pointermove", onPointerMove);
+  handlePointerMove = false;
   if (e.button === MOUSE_BUTTON.AUXILIARY) {
     e.preventDefault();
     return;
@@ -427,72 +432,22 @@ function onClick(e) {
   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
-  };
-});
-let gl = null;
-function initGl() {
-  if (!canvasEl.value) {
-    return;
-  }
-  gl = animation.gl();
-  canvasEl.value.width = canvasAttributes.value.width;
-  canvasEl.value.height = canvasAttributes.value.height;
-  if (!gl) {
-    return;
-  }
-  gl.enable(gl.BLEND);
-  gl.enable(gl.SCISSOR_TEST);
-  gl.disable(gl.DEPTH_TEST);
-  gl.clearColor(0, 0, 0, 0);
-  gl.viewport(0, 0, canvasAttributes.value.width, canvasAttributes.value.height);
-  gl.blendFunc(gl.SRC_ALPHA_SATURATE, gl.ONE);
-  gl.blendEquation(gl.FUNC_ADD);
-  setScissor(scissor.value);
-}
-const scissor = computed(() => {
-  const dpi = animation.dpi.value;
-  return {
-    x: ui.visibleViewport.value.x * dpi,
-    y: canvasAttributes.value.height - ui.visibleViewport.value.y * dpi - ui.visibleViewport.value.height * dpi,
-    width: Math.max(ui.visibleViewport.value.width * dpi, 1),
-    height: Math.max(ui.visibleViewport.value.height * dpi, 1)
-  };
-});
-function setScissor(v) {
-  if (!gl) {
-    return;
-  }
-  gl.scissor(v.x, v.y, v.width, v.height);
-}
-watch(scissor, setScissor);
-let lastCanvasWidth = 0;
-let lastCanvasHeight = 0;
-onBlokkliEvent("animationFrame", () => {
-  if (!canvasEl.value) {
-    return;
-  }
-  const canvasWidth = canvasAttributes.value.width;
-  const canvasHeight = canvasAttributes.value.height;
-  if (canvasWidth !== lastCanvasWidth || canvasHeight !== lastCanvasHeight) {
-    canvasEl.value.width = canvasWidth;
-    canvasEl.value.height = canvasHeight;
-    if (gl) {
-      gl.viewport(0, 0, canvasWidth, canvasHeight);
+watch(
+  canvasEl,
+  (newCanvas, oldCanvas) => {
+    if (oldCanvas) {
+      handlePointerMove = false;
+      animation.removeCanvasElement();
     }
-    lastCanvasWidth = canvasWidth;
-    lastCanvasHeight = canvasHeight;
-  }
-});
-onMounted(() => {
-  initGl();
-});
+    if (newCanvas) {
+      animation.setCanvasElement(newCanvas);
+      animation.requestDraw();
+    }
+  },
+  { immediate: true }
+);
 onBeforeUnmount(() => {
-  if (canvasEl.value) {
-    canvasEl.value.removeEventListener("pointermove", onPointerMove);
-  }
+  animation.removeCanvasElement();
+  handlePointerMove = false;
 });
 </script>

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

@@ -1,5 +1,5 @@
 <template>
-  <div ref="root" class="bk-block-proxy" v-bind="rootProps">
+  <div ref="root" class="bk-block-proxy">
     <div class="bk-block-proxy-header">
       <ItemIcon :bundle="bundle" />
       {{ type?.label }}
@@ -33,7 +33,7 @@
 import { computed, useBlokkli, ref } from "#imports";
 import { getBlokkliItemProxyComponent } from "#blokkli/helpers/editComponents";
 import { ItemIcon } from "#blokkli/components";
-import { buildAttributesForLibraryItem, falsy } from "#blokkli/helpers";
+import { falsy } from "#blokkli/helpers";
 import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
 const props = defineProps({
   uuid: { type: String, required: true },
@@ -55,12 +55,6 @@ const proxyComponentProps = computed(() => {
   }
   return props.itemProps;
 });
-const rootProps = computed(() => {
-  if (libraryItemProps.value) {
-    return buildAttributesForLibraryItem(libraryItemProps.value);
-  }
-  return {};
-});
 const proxyBundle = computed(
   () => libraryItemProps.value?.block?.bundle || props.bundle
 );

package/dist/runtime/components/Edit/BlokkliErrorBoundary.vue

@@ -1,60 +1,44 @@
 <template>
   <slot />
-
-  <Teleport to="body">
-    <Transition name="bk-fade">
-      <div
-        v-if="errors.length"
-        class="bk bk-fatal-error-overlay"
-        @wheel.capture.passive.stop
-        @click.stop
-        @mousedown.stop
-        @touchstart.passive.stop
-        @mousemove.stop
-      >
-        <div class="bk-fatal-error-overlay-info">
-          <Icon name="sad" />
-          <div>
-            <h2>{{ $t("fatalErrorTitle", "bl\xF6kkli has stopped working") }}</h2>
-            <p>
-              {{
-                $t(
-  "fatalErrorText",
-  "Unfortunately bl\xF6kkli has encountered a fatal error which prevents it from working normally. You may be able to continue using it, but things may not work as expected."
-)
-              }}
-            </p>
-            <button class="bk-button bk-is-danger" @click="errors = []">
-              {{ $t("fatalErrorButton", "Continue anyway...") }}
-            </button>
-          </div>
-        </div>
-        <div class="bk-fatal-error-overlay-list">
-          <div v-for="(e, i) in unique" :key="i">
-            <h3>{{ e.name }}: {{ e.message }}</h3>
-            <code>
-              <pre>{{ e.stack }}</pre>
-            </code>
-          </div>
-        </div>
-      </div>
-    </Transition>
-  </Teleport>
 </template>
 
 <script setup>
-import { computed, ref, onErrorCaptured } from "#imports";
-import { Icon } from "#blokkli/components";
-import textProvider from "#blokkli/helpers/textProvider";
+import { emitMessage } from "#blokkli/helpers/eventBus";
+import { ref, onErrorCaptured, useBlokkli } from "#imports";
+import { useGlobalBlokkliObject } from "#blokkli/helpers/composables/useGlobalBlokkliObject";
+const props = defineProps({
+  label: { type: String, required: true }
+});
+const { $t } = useBlokkli();
+const globalBlokkli = useGlobalBlokkliObject();
 const errors = ref([]);
-const $t = textProvider();
+const isLocked = defineModel({ type: Boolean, ...{ default: false } });
+const emit = defineEmits(["error"]);
 onErrorCaptured((err) => {
   errors.value.push(err);
-  return false;
-});
-const unique = computed(() => {
-  return errors.value.filter((value, index, self) => {
-    return self.findIndex((v) => v.name === value.name) === index;
+  emit("error", err);
+  globalBlokkli.pushMessage({
+    type: "error",
+    name: "ErrorBoundary",
+    date: (/* @__PURE__ */ new Date()).toISOString(),
+    message: `[${props.label}] ${err.message}`,
+    context: err.stack || ""
   });
+  const willBeLocked = errors.value.length >= 3;
+  if (willBeLocked) {
+    const message = $t(
+      "errorCapturedMessageDisabled",
+      '"@label" has errored more than 3 times. The feature will be disabled.'
+    ).replace("@label", props.label).replace("@errorMessage", err.message);
+    emitMessage(message, "error", true);
+  } else {
+    const message = $t(
+      "errorCapturedMessage",
+      'Error in "@label": @errorMessage'
+    ).replace("@label", props.label).replace("@errorMessage", err.message);
+    emitMessage(message, "warning");
+  }
+  isLocked.value = willBeLocked;
+  return false;
 });
 </script>

package/dist/runtime/components/Edit/BlokkliErrorBoundary.vue.d.ts

@@ -1,8 +1,21 @@
+type __VLS_Props = {
+    label: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: boolean;
+};
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    error: (error: Error) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onError?: ((error: Error) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, 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 & {

package/dist/runtime/components/Edit/BlokkliRootErrorBoundary.vue

@@ -0,0 +1,93 @@
+<template>
+  <slot />
+
+  <Teleport to="body">
+    <Transition name="bk-fade">
+      <div
+        v-if="errors.length"
+        class="bk bk-fatal-error-overlay"
+        @wheel.capture.passive.stop
+        @click.stop
+        @mousedown.stop
+        @touchstart.passive.stop
+        @mousemove.stop
+      >
+        <div class="bk-fatal-error-overlay-info">
+          <Icon name="sad" />
+          <div>
+            <h2>{{ $t("fatalErrorTitle", "bl\xF6kkli has stopped working") }}</h2>
+            <p>
+              {{
+                $t(
+  "fatalErrorText",
+  "Unfortunately bl\xF6kkli has encountered a fatal error which prevents it from working normally. You may be able to continue using it, but things may not work as expected."
+)
+              }}
+            </p>
+            <div class="bk-fatal-error-buttons">
+              <button class="bk-button bk-is-danger" @click="errors = []">
+                {{ $t("fatalErrorButton", "Continue anyway...") }}
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="bk-fatal-error-overlay-list">
+          <h3>{{ title }}</h3>
+          <button class="bk-button" @click="downloadLogs">
+            {{ $t("downloadLogsButton", "Download Logs") }}
+          </button>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, ref, onErrorCaptured } from "#imports";
+import { Icon } from "#blokkli/components";
+import textProvider from "#blokkli/helpers/textProvider";
+import { useGlobalBlokkliObject } from "#blokkli/helpers/composables/useGlobalBlokkliObject";
+const errors = ref([]);
+const $t = textProvider();
+const globalBlokkli = useGlobalBlokkliObject();
+onErrorCaptured((err) => {
+  errors.value.push(err);
+  globalBlokkli.pushMessage({
+    type: "error",
+    name: "RootErrorBoundary",
+    date: (/* @__PURE__ */ new Date()).toISOString(),
+    message: err.message,
+    context: err.stack || ""
+  });
+  return false;
+});
+const title = computed(() => {
+  return errors.value.filter((value, index, self) => {
+    return self.findIndex((v) => v.name === value.name) === index;
+  }).map((v) => {
+    return v.name + " " + v.message;
+  }).join("");
+});
+function downloadLogs() {
+  const messages = globalBlokkli.getMessages();
+  const header = "Type,Logger,Timestamp,Message,Context\n";
+  const rows = messages.map((msg) => {
+    const escapeCsv = (str) => `"${str.replace(/"/g, '""')}"`;
+    return [
+      escapeCsv(msg.type),
+      escapeCsv(msg.name),
+      escapeCsv(msg.date),
+      escapeCsv(msg.message),
+      escapeCsv(msg.context ?? "")
+    ].join(",");
+  }).join("\n");
+  const csv = header + rows;
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `blokkli-logs-${(/* @__PURE__ */ new Date()).toISOString()}.csv`;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+</script>

package/dist/runtime/components/Edit/BlokkliRootErrorBoundary.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/DraggableList.vue

@@ -16,25 +16,15 @@
       <BlokkliItem
         v-for="(item, i) in list"
         :key="item.uuid + fieldListType + definitions.renderKey.value"
+        class="bk-field-list-item"
         :uuid="item.uuid"
         :bundle="item.bundle"
         :options="item.options"
         :props="item.props"
         is-editing
         :index="i"
+        :data-bk-uuid="item.uuid"
         :parent-type="isNested ? entity.bundle : ''"
-        data-editing="true"
-        data-element-type="existing"
-        :data-sortli-id="item.uuid"
-        :data-uuid="item.uuid"
-        :data-host-type="entity.type"
-        :data-host-bundle="entity.bundle"
-        :data-host-uuid="entity.uuid"
-        :data-item-bundle="item.bundle"
-        :data-host-field-name="name"
-        :data-host-field-list-type="fieldListType"
-        :data-is-nested="isNested"
-        :data-entity-type="runtimeConfig.itemEntityType"
         :data-bk-is-muted="isMuted(item)"
       />
     </div>
@@ -48,6 +38,7 @@
     <BlokkliItem
       v-for="(item, i) in list"
       :key="item.uuid + fieldListType"
+      class="bk-field-list-item"
       :uuid="item.uuid"
       :bundle="item.bundle"
       :options="item.options"
@@ -55,18 +46,7 @@
       is-editing
       :index="i"
       :parent-type="isNested ? entity.bundle : ''"
-      data-editing="true"
-      data-element-type="existing"
-      :data-sortli-id="item.uuid"
-      :data-uuid="item.uuid"
-      :data-host-type="entity.type"
-      :data-host-bundle="entity.bundle"
-      :data-host-uuid="entity.uuid"
-      :data-item-bundle="item.bundle"
-      :data-host-field-name="name"
-      :data-host-field-list-type="fieldListType"
-      :data-is-nested="isNested"
-      :data-entity-type="runtimeConfig.itemEntityType"
+      :data-bk-uuid="item.uuid"
       :data-bk-is-muted="isMuted(item)"
     />
   </Component>
@@ -89,7 +69,7 @@ import {
   INJECT_FIELD_PROXY_MODE,
   INJECT_IS_EDITING
 } from "#blokkli/helpers/symbols";
-const { dom, runtimeConfig, selection, definitions } = useBlokkli();
+const { dom, selection, definitions } = useBlokkli();
 const root = ref(null);
 const props = defineProps({
   name: { type: String, required: true },

package/dist/runtime/components/Edit/EditProvider.vue

@@ -57,7 +57,8 @@ import {
   useRuntimeConfig,
   nextTick,
   inject,
-  onUnmounted
+  onUnmounted,
+  watch
 } from "#imports";
 import Toolbar from "./Toolbar/index.vue";
 import Actions from "./Actions/index.vue";
@@ -152,7 +153,10 @@ const state = await editStateProvider(
   props.permissions
 );
 const storage = await storageProvider(adapter, context);
+const plugins = pluginProvider();
 const debug = debugProvider(storage);
+const baseLogger = debug.createLogger("EditProvider");
+baseLogger.log("Entity: ", context.value);
 const element = elementProvider(debug);
 const features = featuresProvider(storage);
 const commands = commandsProvider();
@@ -164,11 +168,10 @@ const dom = domProvider(ui, debug, definitions, state, element);
 const theme = themeProvider(element);
 const blocks = blocksProvider(state, dom, context);
 const selection = selectionProvider(blocks);
-const animation = animationProvider(ui, storage, selection, element);
+const animation = animationProvider(ui, storage, selection, debug);
 const keyboard = keyboardProvider(animation);
 const types = await typesProvider(adapter, selection, context);
 const indicators = indicatorsProvider();
-const plugins = pluginProvider();
 const directive = directiveProvider(debug, ui);
 const fields = fieldsProvider(state, dom, types);
 const mutatedEntity = computed(() => {
@@ -180,6 +183,11 @@ const mutatedEntity = computed(() => {
 const isReady = computed(
   () => !isInitializing.value && dom.isReady.value && directive.isReady.value && toolbarLoaded.value
 );
+watch(isReady, (v) => {
+  if (v) {
+    baseLogger.log("is ready");
+  }
+});
 const showLoading = computed(() => {
   return !isReady.value || !featuresLoaded.value;
 });
@@ -206,7 +214,6 @@ addElementClasses(
   "bk-isolate-provider",
   shouldIsolate
 );
-const baseLogger = debug.createLogger("EditProvider");
 function setElementSymbolProperty(el, symbol, value) {
   el[symbol] = value;
 }
@@ -296,7 +303,17 @@ const viewOnlyBanner = computed(
 const isProxyMode = computed(() => ui.isProxyMode.value);
 provide(INJECT_GLOBAL_PROXY_MODE, isProxyMode);
 if (import.meta.hot) {
-  let onAfterUpdate = function() {
+  import.meta.hot.accept("#blokkli/runtime-helpers", () => {
+  });
+  import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
+  });
+  import.meta.hot.on("vite:afterUpdate", (payload) => {
+    const hasUpdatedRenderer = payload.updates.find(
+      (v) => v.path.includes("/Renderer/")
+    );
+    if (hasUpdatedRenderer) {
+      animation.reset();
+    }
     try {
       eventBus.emit("state:reloaded");
       dom.updateVisibleRects();
@@ -311,14 +328,10 @@ if (import.meta.hot) {
       });
     } catch {
     }
-  };
-  import.meta.hot.accept("#blokkli/runtime-helpers", () => {
-  });
-  import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
   });
-  import.meta.hot.on("vite:afterUpdate", onAfterUpdate);
 }
 onMounted(async () => {
+  baseLogger.log("onMounted - START");
   setElementSymbolProperty(props.providerEl, INJECT_APP, app);
   setElementSymbolProperty(
     props.providerEl,
@@ -328,12 +341,12 @@ onMounted(async () => {
   window.addEventListener("contextmenu", onContextMenu);
   document.documentElement.addEventListener("touchmove", onTouchMove);
   document.documentElement.addEventListener("touchstart", onTouchStart);
-  baseLogger.log("EditProvider mounted");
   dom.init();
   directive.init();
   await nextTick();
   isInitializing.value = false;
   broadcast.emit("editorLoaded", { uuid: props.entityUuid });
+  baseLogger.log("onMounted - END");
 });
 onBeforeUnmount(() => {
   window.removeEventListener("contextmenu", onContextMenu);