@revenexx/editor 0.1.0

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

@@ -0,0 +1,389 @@
+<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_border-t _bk_h-50 _bk_absolute _bk_bottom-0 _bk_left-0 _bk_w-full _bk_bg-white _bk_border-t-yellow-dark/20 _bk_flex _bk_justify-between _bk_items-center"
+      >
+        <button class="bk-tour-button _bk_group/tooltip" @click.stop.prevent="prev">
+          <Icon name="bk_mdi_chevron_backward" />
+          <span>{{ $t("tourPrev", "Previous") }}</span>
+          <Tooltip
+            :label="$t('arrowRight', 'Arrow Right')"
+            placement="below-left"
+          >
+            <template #shortcut>
+              <ShortcutIndicator label="Prev Tour Item" key-code="ArrowLeft" />
+            </template>
+          </Tooltip>
+        </button>
+        <div class="_bk_text-yellow-dark/80 _bk_text-sm">
+          <span>{{ activeIndex + 1 }}</span
+          >&nbsp;/
+          <span>{{ items.length }}</span>
+        </div>
+        <button class="bk-tour-button _bk_group/tooltip" @click.stop.prevent="next">
+          <span>{{ $t("tourNext", "Next") }}</span>
+          <Icon name="bk_mdi_chevron_forward" />
+          <Tooltip
+            :label="$t('arrowLeft', 'Arrow Left')"
+            placement="below-right"
+          >
+            <template #shortcut>
+              <ShortcutIndicator label="Next Tour Item" key-code="ArrowRight" />
+            </template>
+          </Tooltip>
+        </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, Tooltip } 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>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk.bk-tour {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: calc(var(--bk-z-index-base) + 280000) /* "tour-item" */;
+  border-radius: 4px;
+  pointer-events: auto;
+  background-color: white;
+  color: rgb(var(--bk-theme-yellow-dark) / 1);
+  --bk-tw-shadow: 0 20px 25px -5px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+  transition-property: all;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 200ms;
+  transition-duration: 200ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+:is(.bk.bk-tour button):focus {
+  border-style: var(--bk-tw-border-style);
+  border-width: 0;
+}
+:is(.bk.bk-tour button):focus {
+  --bk-tw-ring-shadow: var(--bk-tw-ring-inset,) 0 0 0 calc(0px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color, currentcolor);
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+}
+:is(.bk.bk-tour button):focus {
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 0px;
+}
+.bk .bk-tour-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-yellow-dark) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk .bk-tour-title {
+    border-bottom-color: color-mix(in oklab, rgb(var(--bk-theme-yellow-dark) / 1) 30%, transparent);
+  }
+}
+.bk .bk-tour-title {
+  background-color: rgb(var(--bk-theme-yellow-normal) / 1);
+  padding-left: 20px;
+  font-size: var(--text-lg, 18px);
+  line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+:is(.bk .bk-tour-title) button {
+  padding: 15px;
+}
+@media (hover: hover) {
+  :is(:is(.bk .bk-tour-title) button):hover {
+    background-color: rgb(var(--bk-theme-yellow-dark) / 1);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(:is(.bk .bk-tour-title) button):hover {
+      background-color: color-mix(in oklab, rgb(var(--bk-theme-yellow-dark) / 1) 10%, transparent);
+    }
+  }
+}
+:is(:is(.bk .bk-tour-title) button) svg {
+  fill: rgb(var(--bk-theme-yellow-dark) / 1);
+}
+:is(.bk .bk-tour-title) svg {
+  height: 20px;
+  width: 20px;
+}
+.bk .bk-tour-content {
+  padding: 20px;
+  padding-top: 17px;
+}
+:is(.bk .bk-tour-content)  > div {
+  position: relative;
+  overflow: hidden;
+  transition-property: all;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+:is(.bk .bk-tour-content) p:not(:last-child) {
+  margin-bottom: 18px;
+}
+.bk .bk-tour-content-text {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+}
+.bk .bk-tour-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-inline: 15px;
+  padding-block: 15px;
+  --bk-tw-leading: 1;
+  line-height: 1;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-yellow-dark) / 1);
+}
+@media (hover: hover) {
+  :is(.bk .bk-tour-button):hover {
+    background-color: rgb(var(--bk-theme-yellow-dark) / 1);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(.bk .bk-tour-button):hover {
+      background-color: color-mix(in oklab, rgb(var(--bk-theme-yellow-dark) / 1) 5%, transparent);
+    }
+  }
+}
+:is(.bk .bk-tour-button) .bk-icon {
+  height: 20px;
+  width: 20px;
+}
+:is(:is(.bk .bk-tour-button) .bk-icon) svg {
+  fill: currentcolor;
+}
+.bk.bk-tour-overlay-element {
+  pointer-events: none;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: calc(var(--bk-z-index-base) + 270000) /* "tour-overlay" */;
+  height: 100%;
+  width: 100%;
+  border-style: var(--bk-tw-border-style);
+  border-width: 3px;
+  border-color: rgb(var(--bk-theme-yellow-normal) / 1);
+  transition-property: all;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 200ms;
+  transition-duration: 200ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+  background-color: rgb(var(--bk-theme-yellow-normal) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk.bk-tour-overlay-element {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-yellow-normal) / 1) 30%, transparent);
+  }
+}
+.bk.bk-tour-overlay-element {
+  --bk-tw-ring-shadow: var(--bk-tw-ring-inset,) 0 0 0 calc(1px + var(--bk-tw-ring-offset-width)) var(--bk-tw-ring-color, currentcolor);
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+  --bk-tw-ring-color: rgb(var(--bk-theme-yellow-light) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk.bk-tour-overlay-element {
+    --bk-tw-ring-color: color-mix(in oklab, rgb(var(--bk-theme-yellow-light) / 1) 80%, transparent);
+  }
+}
+</style>

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/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,58 @@
+<template>
+  <Overlay v-if="tour.isTouring.value" @close="stopTour" />
+  <Popup
+    id="tour"
+    theme="warning"
+    position="top-left"
+    :title="$t('tourLabel', 'Take a tour')"
+    :text="
+  $t(
+    'tourIntro',
+    'Explore the most important features of the editor and learn how to get started using bl\xF6kkli.'
+  )
+"
+    :cta="$t('tourStartButton', 'Start the tour')"
+    @submit="startTour"
+  />
+</template>
+
+<script setup>
+import {
+  defineAsyncComponent,
+  defineBlokkliFeature,
+  useBlokkli
+} from "#imports";
+import { defineMenuButton } from "#blokkli/editor/composables";
+import { Popup } from "#blokkli/editor/components";
+const Overlay = defineAsyncComponent(() => import("./Overlay/index.vue"));
+defineBlokkliFeature({
+  id: "tour",
+  label: "Tour",
+  icon: "bk_mdi_school-fill",
+  description: "Provides a tour overlay to get to know the editor."
+});
+const { tour, $t } = useBlokkli();
+function startTour() {
+  tour.isTouring.value = true;
+}
+function stopTour() {
+  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: startTour
+  };
+});
+</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;