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

package/dist/runtime/editor/features/tour/Overlay/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <Teleport v-if="activeItem" :to="ui.mainLayoutElement.value">
+    <div class="bk bk-tour" :style="tooltipStyle">
+      <div class="bk-tour-inner">
+        <div class="bk-tour-title">
+          <span>{{ activeItem.title }}</span>
+          <button @click.prevent="$emit('close')">
+            <Icon name="bk_mdi_close" />
+          </button>
+        </div>
+        <div class="bk-tour-content">
+          <div
+            :style="{
+  height: tooltipHeight + 'px'
+}"
+          >
+            <div
+              ref="contentEl"
+              class="bk-tour-content-text"
+              v-html="activeItem.text"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="bk-tour-buttons">
+        <button @click.stop.prevent="prev">
+          <Icon name="bk_mdi_chevron_backward" />
+          <span>{{ $t("tourPrev", "Previous") }}</span>
+          <div class="bk-tooltip">
+            <span>Arrow Right</span>
+            <ShortcutIndicator label="Prev Tour Item" key-code="ArrowLeft" />
+          </div>
+        </button>
+        <div>
+          <span>{{ activeIndex + 1 }}</span
+          >&nbsp;/
+          <span>{{ items.length }}</span>
+        </div>
+        <button @click.stop.prevent="next">
+          <span>{{ $t("tourNext", "Next") }}</span>
+          <Icon name="bk_mdi_chevron_forward" />
+          <div class="bk-tooltip">
+            <span>Arrow Left</span>
+            <ShortcutIndicator label="Next Tour Item" key-code="ArrowRight" />
+          </div>
+        </button>
+      </div>
+    </div>
+    <div :style="rectStyle" class="bk bk-tour-overlay-element" />
+  </Teleport>
+</template>
+
+<script setup>
+import { useBlokkli, computed, ref, useTemplateRef } from "#imports";
+import { falsy } from "#blokkli/helpers";
+import { modulo } from "#blokkli/editor/helpers/math";
+import { Icon, ShortcutIndicator } from "#blokkli/editor/components";
+import { onBlokkliEvent, useAnimationFrame } from "#blokkli/editor/composables";
+const emit = defineEmits(["close"]);
+const rectStyle = computed(() => {
+  return {
+    width: activeItem.value.rect.width + "px",
+    height: activeItem.value.rect.height + "px",
+    transform: `translate(${activeItem.value.rect.x}px, ${activeItem.value.rect.y}px)`
+  };
+});
+const tooltipStyle = computed(() => {
+  const x = Math.max(
+    Math.min(
+      activeItem.value.x - tooltipWidth.value / 2,
+      ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width - tooltipWidth.value
+    ),
+    ui.visibleViewportPadded.value.x
+  );
+  const y = Math.max(
+    Math.min(
+      activeItem.value.y - tooltipHeight.value / 2,
+      ui.visibleViewportPadded.value.y + ui.visibleViewportPadded.value.height - tooltipHeight.value - 100
+    ),
+    ui.visibleViewportPadded.value.y
+  );
+  return {
+    width: tooltipWidth.value + "px",
+    transform: `translate(${x}px, ${y}px)`
+  };
+});
+const { tour, ui, $t } = useBlokkli();
+const activeIndex = ref(0);
+const contentEl = useTemplateRef("contentEl");
+const tooltipHeight = ref(100);
+const tooltipWidth = computed(() => {
+  return ui.isMobile.value ? Math.min(window.innerWidth - 20, 400) : 400;
+});
+function calculateCenterPoint(rect) {
+  return {
+    x: rect.x,
+    y: rect.y
+  };
+}
+const viewportCenter = computed(() => ({
+  x: ui.viewport.value.width / 2,
+  y: ui.viewport.value.height / 2
+}));
+const items = computed(
+  () => tour.getTourItems().map((item) => {
+    if (!item.element) {
+      return;
+    }
+    const element = typeof item.element === "function" ? item.element() : item.element;
+    if (!(element instanceof HTMLElement)) {
+      return;
+    }
+    const rect = element.getBoundingClientRect();
+    const { x, y, position } = calculatePosition(rect);
+    return {
+      position,
+      id: item.id,
+      rect,
+      title: item.title,
+      text: item.text,
+      x,
+      y
+    };
+  }).filter(falsy).sort((a, b) => {
+    const centerA = calculateCenterPoint(a.rect);
+    const centerB = calculateCenterPoint(b.rect);
+    const angleA = Math.atan2(
+      centerA.y - viewportCenter.value.y,
+      centerA.x - viewportCenter.value.x
+    );
+    const angleB = Math.atan2(
+      centerB.y - viewportCenter.value.y,
+      centerB.x - viewportCenter.value.x
+    );
+    return angleA - angleB;
+  })
+);
+const activeItem = computed(
+  () => items.value[activeIndex.value]
+);
+const prev = () => {
+  activeIndex.value = modulo(activeIndex.value - 1, items.value.length);
+};
+const next = () => {
+  activeIndex.value = modulo(activeIndex.value + 1, items.value.length);
+};
+const getIdealPosition = (rect) => {
+  if (rect.y < 20) {
+    return "bottom";
+  } else if (rect.y > ui.visibleViewportPadded.value.y + ui.visibleViewportPadded.value.height) {
+    return "top";
+  }
+  const availableSpace = {
+    top: rect.top,
+    bottom: ui.visibleViewportPadded.value.height - rect.bottom,
+    left: rect.left,
+    right: ui.viewport.value.width - rect.right
+  };
+  const sortedSpaces = Object.entries(availableSpace).sort((a, b) => b[1] - a[1]);
+  return sortedSpaces[0][0];
+};
+function calculatePosition(rect) {
+  const position = getIdealPosition(rect);
+  switch (position) {
+    case "top":
+      return {
+        position,
+        y: ui.viewport.value.height,
+        x: rect.x + rect.width / 2
+      };
+    case "bottom":
+      return {
+        position,
+        x: rect.x + rect.width / 2,
+        y: rect.bottom
+      };
+    case "left":
+      return {
+        position,
+        y: rect.y + rect.height / 2,
+        x: rect.x
+      };
+  }
+  return {
+    position,
+    x: rect.right + 20,
+    y: Math.max(rect.top, 70)
+  };
+}
+onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value) {
+    return;
+  }
+  if (e.code === "Tab") {
+    e.originalEvent.preventDefault();
+    if (e.shift) {
+      prev();
+    } else {
+      next();
+    }
+  } else if (e.code === "Escape") {
+    e.originalEvent.preventDefault();
+    emit("close");
+  } else if (e.code === "ArrowLeft") {
+    e.originalEvent.preventDefault();
+    prev();
+  } else if (e.code === "ArrowRight") {
+    e.originalEvent.preventDefault();
+    next();
+  }
+});
+useAnimationFrame(() => {
+  if (!contentEl.value) {
+    return;
+  }
+  tooltipHeight.value = contentEl.value.scrollHeight + 50;
+});
+</script>

package/dist/runtime/editor/features/tour/Overlay/index.vue.d.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/tour/Popup/index.d.vue.ts

@@ -0,0 +1,9 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    start: (...args: any[]) => void;
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onStart?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/tour/Popup/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <ViewportBlockingRect id="tour-popup" class="bk bk-tour-popup">
+      <div class="bk-tour-popup-title">
+        <h2>{{ $t("tourLabel", "Take a tour") }}</h2>
+        <button class="bk-tour-popup-close" @click="$emit('close')">
+          <Icon name="bk_mdi_close" />
+        </button>
+      </div>
+
+      <div class="bk-tour-popup-content">
+        <p>
+          {{
+            $t(
+  "tourIntro",
+  "Explore the most important features of the editor and learn how to get started using bl\xF6kkli."
+)
+          }}
+        </p>
+
+        <button class="bk-button" @click="$emit('start')">
+          {{ $t("tourStartButton", "Start the tour") }}
+        </button>
+      </div>
+    </ViewportBlockingRect>
+  </Teleport>
+</template>
+
+<script setup>
+import { Icon, ViewportBlockingRect } from "#blokkli/editor/components";
+import { useBlokkli } from "#imports";
+const { $t, ui } = useBlokkli();
+defineEmits(["start", "close"]);
+</script>

package/dist/runtime/editor/features/tour/Popup/index.vue.d.ts

@@ -0,0 +1,9 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    start: (...args: any[]) => void;
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onStart?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/tour/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/features/tour/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <Overlay v-if="tour.isTouring.value" @close="close" />
+  <Popup v-if="showTourPopup" @close="close" @start="start" />
+</template>
+
+<script setup>
+import { defineBlokkliFeature, useBlokkli } from "#imports";
+import Overlay from "./Overlay/index.vue";
+import Popup from "./Popup/index.vue";
+import { defineMenuButton } from "#blokkli/editor/composables";
+defineBlokkliFeature({
+  id: "tour",
+  label: "Tour",
+  icon: "bk_mdi_school-fill",
+  description: "Provides a tour overlay to get to know the editor."
+});
+const { tour, $t, storage } = useBlokkli();
+const showTourPopup = storage.use("showTourPopup", true);
+const start = () => {
+  showTourPopup.value = false;
+  tour.isTouring.value = true;
+};
+const close = () => {
+  showTourPopup.value = false;
+  tour.isTouring.value = false;
+};
+defineMenuButton(() => {
+  return {
+    id: "tour",
+    title: $t("tourLabel", "Take a tour"),
+    description: $t("tourDescription", "Explore the features of the editor"),
+    icon: "bk_mdi_school-fill",
+    secondary: true,
+    weight: -10,
+    callback: start
+  };
+});
+</script>
+
+<script>
+export default {
+  name: "Tour"
+};
+</script>

package/dist/runtime/editor/features/tour/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/features/tour/types.d.ts

@@ -0,0 +1,6 @@
+export type TourItem = {
+    id: string;
+    title: string;
+    text: string;
+    element: HTMLElement | (() => HTMLElement | undefined | null) | undefined | null;
+};

package/dist/runtime/editor/features/transform/Dialog/index.d.vue.ts

@@ -0,0 +1,14 @@
+import type { HostTransformPlugin, TransformPlugin } from '../types.js';
+type __VLS_Props = {
+    plugin: HostTransformPlugin | TransformPlugin;
+    uuids?: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    submit: (values: PluginConfigInputItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((values: PluginConfigInputItem[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/transform/Dialog/index.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="bk bk-transform-overlay" @keydown.stop @keyup.stop>
+    <div ref="el" class="bk-transform-overlay-dialog" @wheel.passive="onWheel">
+      <div class="bk-transform-overlay-dialog-inner">
+        <div class="bk-transform-overlay-dialog-inner-content">
+          <header>
+            <p>{{ title }}</p>
+            <button @click.prevent="$emit('cancel')">
+              <Icon name="bk_mdi_close" />
+            </button>
+          </header>
+          <main>
+            <div class="bk-transform-overlay-dialog-grid">
+              <div class="bk-transform-overlay-dialog-top">
+                <p v-if="lead" class="bk-lead">{{ lead }}</p>
+                <ConfigForm ref="configForm" v-model="value" :config />
+              </div>
+              <DiffViewerState
+                v-if="stateAfter"
+                :state-before
+                :state-after
+                show-select
+                :selected="selection.uuids.value"
+                :include-uuids="uuids"
+                scheme="orange"
+                @toggle="onToggleSelected"
+              />
+            </div>
+            <Loading v-if="isLocked" white />
+          </main>
+          <footer>
+            <button
+              v-if="supportsPreview"
+              class="bk-button"
+              :disabled="disabled || !hasChanged && !hasSeedInput"
+              :class="{
+  'bk-is-loading': isPreviewing
+}"
+              @click.prevent="onClickPreview"
+            >
+              {{ previewButtonLabel }}
+            </button>
+            <button
+              class="bk-button bk-is-orange"
+              :disabled
+              @click.prevent="onClickSubmit"
+            >
+              {{ $t("transformDialogButtonApply", "Apply changes") }}
+            </button>
+          </footer>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  ref,
+  watch,
+  computed,
+  useTemplateRef,
+  onMounted,
+  onBeforeUnmount
+} from "#imports";
+import { ConfigForm, DiffViewerState, Icon, Loading } from "#blokkli/editor/components";
+const props = defineProps({
+  plugin: { type: Object, required: true },
+  uuids: { type: Array, required: false }
+});
+const { adapter, state, ui, selection, $t, eventBus } = useBlokkli();
+function onToggleSelected(uuid) {
+  let newSelection = [...selection.uuids.value];
+  if (newSelection.includes(uuid)) {
+    newSelection = newSelection.filter((v) => v !== uuid);
+  } else {
+    newSelection.push(uuid);
+  }
+  eventBus.emit("select:force", newSelection);
+}
+const configForm = useTemplateRef("configForm");
+function clone(v) {
+  return JSON.parse(JSON.stringify(v));
+}
+function mapValues(values) {
+  return Object.entries(values).map(([name, value2]) => {
+    return {
+      name,
+      value: value2
+    };
+  });
+}
+const hasSeedInput = computed(
+  () => !!props.plugin.configInputs?.find((v) => v.type === "seed")
+);
+const previewButtonLabel = computed(() => {
+  if (hasSeedInput.value) {
+    return $t("transformDialogButtonNewSuggestion", "New suggestion");
+  }
+  return $t("transformDialogButtonPreview", "Preview");
+});
+const isLocked = ref(false);
+const hasChanged = ref(false);
+const isPreviewing = ref(false);
+const title = computed(() => props.plugin.label);
+const lead = computed(() => props.plugin.description);
+const config = computed(() => props.plugin.configInputs ?? []);
+const isHostPlugin = computed(() => !("bundles" in props.plugin));
+const supportsPreview = computed(() => {
+  if (!props.plugin.preview) {
+    return false;
+  }
+  if (isHostPlugin.value) {
+    return !!adapter.previewHostTransformPlugin;
+  }
+  return !!adapter.previewTransformPlugin;
+});
+const stateBefore = clone(state.getMappedState());
+const stateAfter = ref(null);
+const emit = defineEmits(["cancel", "submit"]);
+const value = ref(
+  (props.plugin.configInputs ?? []).reduce(
+    (acc, plugin) => {
+      acc[plugin.name] = "";
+      return acc;
+    },
+    {}
+  )
+);
+const requiredItems = computed(
+  () => config.value.filter((v) => v.required).map((v) => v.name)
+);
+const canSubmit = computed(() => {
+  return requiredItems.value.every((name) => !!value.value[name]);
+});
+const disabled = computed(() => isLocked.value || !canSubmit.value);
+watch(
+  value,
+  () => {
+    hasChanged.value = true;
+  },
+  {
+    deep: true
+  }
+);
+function onWheel(e) {
+  if (e.metaKey || e.ctrlKey) {
+    return;
+  }
+  e.stopPropagation();
+}
+async function onClickPreview() {
+  if (isLocked.value) {
+    return;
+  }
+  if (configForm.value) {
+    configForm.value.updateSeed();
+  }
+  isLocked.value = true;
+  isPreviewing.value = true;
+  ui.setTransform(title.value);
+  if (supportsPreview.value) {
+    if ("bundles" in props.plugin) {
+      if (adapter.previewTransformPlugin && props.uuids) {
+        const config2 = mapValues(value.value);
+        try {
+          const result = await adapter.previewTransformPlugin({
+            pluginId: props.plugin.id,
+            uuids: props.uuids,
+            config: config2
+          });
+          stateAfter.value = clone(adapter.mapState(result.state));
+          state.setOverrideState(stateAfter.value);
+        } catch {
+        }
+      }
+    } else {
+      if (adapter.previewHostTransformPlugin) {
+        const config2 = mapValues(value.value);
+        try {
+          const result = await adapter.previewHostTransformPlugin({
+            pluginId: props.plugin.id,
+            config: config2
+          });
+          stateAfter.value = clone(adapter.mapState(result.state));
+          state.setOverrideState(stateAfter.value);
+        } catch {
+        }
+      }
+    }
+  }
+  isLocked.value = false;
+  isPreviewing.value = false;
+  ui.setTransform();
+  hasChanged.value = false;
+}
+function onClickSubmit() {
+  if (isLocked.value) {
+    return;
+  }
+  isLocked.value = true;
+  emit("submit", mapValues(value.value));
+}
+onMounted(async () => {
+  ui.hasTransformOverlayOpen.value = true;
+  selection.lockSelection("transform-dialog");
+  if (hasSeedInput.value && supportsPreview.value) {
+    const hasNoRequiredInput = props.plugin.configInputs?.every(
+      (v) => v.type === "seed" || !v.required
+    );
+    if (hasNoRequiredInput === true) {
+      await onClickPreview();
+    }
+  }
+});
+onBeforeUnmount(() => {
+  ui.hasTransformOverlayOpen.value = false;
+  selection.unlockSelection("transform-dialog");
+});
+</script>

package/dist/runtime/editor/features/transform/Dialog/index.vue.d.ts

@@ -0,0 +1,14 @@
+import type { HostTransformPlugin, TransformPlugin } from '../types.js';
+type __VLS_Props = {
+    plugin: HostTransformPlugin | TransformPlugin;
+    uuids?: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    submit: (values: PluginConfigInputItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onSubmit?: ((values: PluginConfigInputItem[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/transform/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>;