@blokkli/editor 1.0.0

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

@@ -0,0 +1,82 @@
+<template>
+  <Teleport to="body">
+    <div v-show="isVisible" class="bk">
+      <div class="bk-edit-indicator" :style="style">
+        <button
+          ref="button"
+          class="bk-button bk-is-primary"
+          @mouseenter="isHovering = true"
+          @mouseleave="isHovering = false"
+          @click="$emit('edit')"
+        >
+          {{ label }}
+        </button>
+      </div>
+
+      <div
+        v-if="overlayStyle"
+        :style="overlayStyle"
+        class="bk-edit-indicator-overlay"
+      />
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import textProvider from '#blokkli/helpers/textProvider'
+import { ref, computed } from '#imports'
+import '#blokkli/theme'
+import '#blokkli/styles'
+import useAnimationFrame from '#blokkli/helpers/composables/useAnimationFrame'
+
+const props = defineProps<{
+  uuid: string
+  editLabel?: string
+}>()
+
+const $t = textProvider()
+
+const label = computed(
+  () => props.editLabel || $t('editIndicatorLabel', 'Edit blocks'),
+)
+
+defineEmits(['edit'])
+
+const isHovering = ref(false)
+
+const style = ref<Record<string, string>>({})
+const button = ref<HTMLButtonElement | null>(null)
+const isVisible = ref(false)
+
+const overlayStyle = ref<Record<string, string> | null>(null)
+
+function calculateIdealYPosition(elementHeight: number, bounds: DOMRect) {
+  const idealTop = Math.min(
+    Math.max(bounds.top, bounds.bottom - elementHeight - 20),
+    20,
+  )
+
+  return Math.max(idealTop, bounds.y + 20)
+}
+
+useAnimationFrame(() => {
+  const el = document.querySelector(`[data-provider-uuid="${props.uuid}"]`)
+  isVisible.value = window.innerWidth > 1024
+  if (isVisible.value && el && el instanceof HTMLElement && button.value) {
+    const rect = el.getBoundingClientRect()
+    const buttonHeight = button.value.getBoundingClientRect().height
+    const y = calculateIdealYPosition(buttonHeight, rect)
+    style.value.transform = `translateY(${y}px)`
+
+    if (isHovering.value) {
+      overlayStyle.value = {
+        width: rect.width + 'px',
+        height: rect.height + 'px',
+        transform: `translate(${rect.x}px, ${rect.y}px)`,
+      }
+    } else {
+      overlayStyle.value = null
+    }
+  }
+})
+</script>

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

@@ -0,0 +1,213 @@
+<template>
+  <Teleport to="body">
+    <Transition name="bk-loading">
+      <Loading
+        v-if="isInitializing || !toolbarLoaded || !featuresLoaded"
+        screen
+      />
+    </Transition>
+  </Teleport>
+  <Actions v-if="!isInitializing" />
+  <Messages />
+  <Toolbar @loaded="toolbarLoaded = true" />
+  <AppMenu v-if="toolbarLoaded" />
+  <Features
+    v-if="!isInitializing && toolbarLoaded"
+    :key="route.fullPath"
+    @loaded="featuresLoaded = true"
+  />
+  <DragInteractions v-if="!isInitializing" />
+  <AnimationCanvas v-if="!isInitializing" />
+  <SystemRequirements />
+  <slot :mutated-entity="mutatedEntity" />
+</template>
+
+<script lang="ts" setup generic="T">
+import {
+  watch,
+  ref,
+  computed,
+  provide,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  useRoute,
+  useRuntimeConfig,
+} from '#imports'
+import type { BlokkliApp } from '#blokkli/types'
+import Toolbar from './Toolbar/index.vue'
+import Actions from './Actions/index.vue'
+import Loading from './Loading/index.vue'
+import Messages from './Messages/index.vue'
+import Features from './Features/index.vue'
+import AppMenu from './AppMenu/index.vue'
+import DraggableList from './DraggableList.vue'
+import DragInteractions from './DragInteractions/index.vue'
+import AnimationCanvas from './AnimationCanvas/index.vue'
+import SystemRequirements from './SystemRequirements/index.vue'
+import animationProvider from './../../helpers/animationProvider'
+import keyboardProvider from './../../helpers/keyboardProvider'
+import selectionProvider from './../../helpers/selectionProvider'
+import editStateProvider from './../../helpers/stateProvider'
+import typesProvider from './../../helpers/typesProvider'
+import domProvider from './../../helpers/domProvider'
+import textProvider from './../../helpers/textProvider'
+import storageProvider from './../../helpers/storageProvider'
+import uiProvider from './../../helpers/uiProvider'
+import broadcastProvider from './../../helpers/broadcastProvider'
+import featuresProvider from './../../helpers/featuresProvider'
+import themeProvider from './../../helpers/themeProvider'
+import commandsProvider from './../../helpers/commandsProvider'
+import tourProvider from './../../helpers/tourProvider'
+import debugProvider from './../../helpers/debugProvider'
+import dropAreasProvider from './../../helpers/dropAreaProvider'
+import { eventBus } from '#blokkli/helpers/eventBus'
+import '#blokkli/theme'
+import '#blokkli/styles'
+import getAdapter from '#blokkli/compiled-edit-adapter'
+import {
+  INJECT_APP,
+  INJECT_EDIT_CONTEXT,
+  INJECT_EDIT_FIELD_LIST_COMPONENT,
+  INJECT_EDIT_LOGGER,
+  INJECT_IS_EDITING,
+} from '#blokkli/helpers/symbols'
+import type { AdapterContext } from '#blokkli/adapter'
+
+const props = withDefaults(
+  defineProps<{
+    entity?: T
+    entityType: string
+    entityUuid: string
+    entityBundle: string
+    language?: string
+    isolate?: boolean
+  }>(),
+  {
+    language: 'en',
+    entity: undefined,
+  },
+)
+
+const context = computed<AdapterContext>(() => {
+  return {
+    entityType: props.entityType,
+    entityUuid: props.entityUuid,
+    entityBundle: props.entityBundle,
+    language: props.language,
+  }
+})
+const adapter = await getAdapter(context)
+
+const route = useRoute()
+const runtimeConfig = useRuntimeConfig().public.blokkli
+
+const toolbarLoaded = ref(false)
+const featuresLoaded = ref(false)
+const isInitializing = ref(true)
+
+const storage = storageProvider()
+const debug = debugProvider(storage)
+const features = featuresProvider()
+const theme = themeProvider()
+const commands = commandsProvider()
+const tour = tourProvider()
+const dropAreas = dropAreasProvider()
+const broadcast = broadcastProvider()
+const ui = uiProvider(storage)
+const dom = domProvider(ui, debug)
+const animation = animationProvider(ui)
+const keyboard = keyboardProvider(animation)
+const $t = textProvider(context)
+const state = await editStateProvider(adapter, context, $t)
+const selection = selectionProvider(dom)
+const types = await typesProvider(adapter, selection, context)
+
+const mutatedEntity = computed(() => state.mutatedEntity.value || props.entity)
+
+const onContextMenu = (e: Event) => {
+  e.preventDefault()
+  e.stopPropagation()
+}
+
+function onTouchMove(e: TouchEvent) {
+  e.preventDefault()
+}
+
+function onTouchStart(e: TouchEvent) {
+  if (e.touches.length === 2) {
+    e.preventDefault()
+  }
+}
+
+const setRootClasses = (unmount?: boolean) => {
+  document.documentElement.classList.remove('bk-use-animations')
+
+  if (ui.useAnimations.value && !unmount) {
+    document.documentElement.classList.add('bk-use-animations')
+  }
+}
+
+watch(ui.useAnimations, setRootClasses)
+
+const baseLogger = debug.createLogger('EditProvider')
+
+onMounted(() => {
+  window.addEventListener('contextmenu', onContextMenu)
+  if (props.isolate) {
+    document.documentElement.classList.add('bk-isolate-provider')
+  }
+  nextTick(() => {
+    isInitializing.value = false
+  })
+
+  document.documentElement.addEventListener('touchmove', onTouchMove)
+  document.documentElement.addEventListener('touchstart', onTouchStart)
+  setRootClasses()
+  baseLogger.log('EditProvider mounted')
+  dom.init()
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('contextmenu', onContextMenu)
+  isInitializing.value = true
+  toolbarLoaded.value = false
+  document.documentElement.classList.remove('bk-isolate-provider')
+  document.documentElement.removeEventListener('touchmove', onTouchMove)
+  document.documentElement.removeEventListener('touchstart', onTouchStart)
+  setRootClasses(true)
+})
+provide(INJECT_EDIT_LOGGER, baseLogger)
+
+// Provide the edit <BlokkliField> component to it doesn't have to be loaded
+// async every time.
+provide(INJECT_EDIT_FIELD_LIST_COMPONENT, DraggableList)
+provide(INJECT_IS_EDITING, true)
+provide(INJECT_EDIT_CONTEXT, {
+  eventBus,
+  mutatedOptions: state.mutatedOptions,
+  dom,
+})
+provide<BlokkliApp>(INJECT_APP, {
+  adapter,
+  eventBus,
+  runtimeConfig,
+  state,
+  dom,
+  storage,
+  types,
+  selection,
+  keyboard,
+  ui,
+  animation,
+  context,
+  $t,
+  broadcast,
+  features,
+  theme,
+  commands,
+  tour,
+  dropAreas,
+  debug,
+})
+</script>

package/dist/runtime/components/Edit/Features/AddList/docs.md

@@ -0,0 +1,4 @@
+## Extending the list
+
+Use the [Add Action](/plugins/add-action) plugin to add custom actions to the
+list.

package/dist/runtime/components/Edit/Features/AddList/index.vue

@@ -0,0 +1,205 @@
+<template>
+  <PluginSidebar
+    v-if="isSidebar && shouldRender"
+    id="add_list"
+    :title="sidebarTitle"
+    :tour-text="tourText"
+    render-always
+    icon="plus"
+    weight="-10"
+    @updated="eventBus.emit('add-list:change')"
+  >
+    <div>
+      <div id="blokkli-add-list-sidebar-before" />
+      <Sortli class="bk bk-list-sidebar">
+        <div id="blokkli-add-list-blocks" />
+        <div id="blokkli-add-list-actions" />
+      </Sortli>
+    </div>
+  </PluginSidebar>
+  <Teleport v-else-if="shouldRender" to="body">
+    <div
+      ref="wrapper"
+      class="bk bk-add-list bk-control"
+      :class="[
+        { 'bk-is-active': isActive || hasContextMenuOpen },
+        'bk-is-' + ui.addListOrientation.value,
+      ]"
+      :style="style"
+      @wheel.capture.passive="onWheel"
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <Sortli class="bk-list">
+        <div id="blokkli-add-list-blocks" />
+        <div id="blokkli-add-list-actions" />
+      </Sortli>
+    </div>
+    <PluginTourItem
+      id="add-blocks"
+      selector=".bk-list"
+      :title="sidebarTitle"
+      :text="tourText"
+    />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import {
+  watch,
+  ref,
+  computed,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+  nextTick,
+  defineBlokkliFeature,
+} from '#imports'
+import { Sortli } from '#blokkli/components'
+import { PluginSidebar, PluginTourItem } from '#blokkli/plugins'
+
+const { settings } = defineBlokkliFeature({
+  id: 'add-list',
+  icon: 'plus',
+  label: 'Add List',
+  description:
+    'Provides the container to render a list of blocks to add or add actions.',
+  settings: {
+    orientation: {
+      type: 'radios',
+      label: 'Add List',
+      default: 'vertical',
+      group: 'appearance',
+      viewports: ['desktop'],
+      options: {
+        vertical: {
+          label: 'Vertical',
+          icon: 'ui-list-vertical',
+        },
+        horizontal: {
+          label: 'Horizontal',
+          icon: 'ui-list-horizontal',
+        },
+        sidebar: {
+          label: 'Sidebar',
+          icon: 'ui-list-sidebar',
+        },
+      },
+    },
+  },
+
+  screenshot: 'feature-add-list.jpg',
+})
+
+const { state, $t, eventBus, ui } = useBlokkli()
+
+const hasContextMenuOpen = computed(() =>
+  ui.openContextMenu.value.startsWith('add_list_item_'),
+)
+
+const isSidebar = computed(() => ui.addListOrientation.value === 'sidebar')
+const shouldRender = computed(() => state.editMode.value === 'editing')
+
+watch(ui.addListOrientation, () => {
+  setRootClasses()
+  nextTick(() => {
+    eventBus.emit('add-list:change')
+  })
+})
+watch(shouldRender, () => {
+  setRootClasses()
+})
+
+const CLASS_LEFT = 'bk-has-add-list-left'
+const CLASS_BOTTOM = 'bk-has-add-list-bottom'
+
+const wrapper = ref<HTMLDivElement | null>(null)
+const isActive = ref(false)
+let mouseTimeout: any = null
+
+const style = computed(() => {
+  if (
+    settings.value.orientation === 'vertical' &&
+    (isActive.value || hasContextMenuOpen.value) &&
+    wrapper.value
+  ) {
+    const labels = [
+      ...wrapper.value.querySelectorAll('.bk-list-item-label span'),
+    ] as HTMLSpanElement[]
+
+    // Determine which label has the largest width.
+    const width = labels.reduce((acc, el) => {
+      if (el.offsetWidth > acc) {
+        return el.offsetWidth
+      }
+      return acc
+    }, 0)
+    return {
+      '--bk-add-list-width': width + 90,
+    }
+  }
+
+  return undefined
+})
+
+function onMouseEnter() {
+  clearTimeout(mouseTimeout)
+  mouseTimeout = setTimeout(() => {
+    isActive.value = true
+  }, 200)
+}
+function onMouseLeave() {
+  clearTimeout(mouseTimeout)
+  isActive.value = false
+}
+
+const onWheel = (e: WheelEvent) => {
+  if (ui.addListOrientation.value === 'horizontal' && e.deltaX) {
+    e.stopPropagation()
+    return
+  }
+
+  if (ui.addListOrientation.value === 'vertical' && e.deltaY) {
+    e.stopPropagation()
+  }
+}
+
+function setRootClasses() {
+  document.documentElement.classList.remove(CLASS_BOTTOM)
+  document.documentElement.classList.remove(CLASS_LEFT)
+
+  if (!shouldRender.value) {
+    return
+  }
+
+  if (ui.addListOrientation.value === 'horizontal') {
+    document.documentElement.classList.add(CLASS_BOTTOM)
+  } else if (ui.addListOrientation.value === 'vertical') {
+    document.documentElement.classList.add(CLASS_LEFT)
+  }
+}
+
+const sidebarTitle = computed(() => $t('addListSidebarTitle', 'Add blocks'))
+
+const tourText = computed(() =>
+  $t(
+    'addListTourText',
+    '<p>This shows the list of available blocks that can be placed. Add a block by dragging the icon into the page.</p><p>When an existing block is selected, some blocks may be greyed out. This indicates which blocks can be placed inside or after the selected block.</p>',
+  ),
+)
+
+onMounted(() => {
+  setRootClasses()
+})
+
+onBeforeUnmount(() => {
+  document.documentElement.classList.remove(CLASS_BOTTOM)
+  document.documentElement.classList.remove(CLASS_LEFT)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AddList',
+}
+</script>

package/dist/runtime/components/Edit/Features/Artboard/Manager/Artboard.d.ts

@@ -0,0 +1,204 @@
+import type { Coord, Size, Rectangle } from '#blokkli/types';
+type TouchDirection = 'horizontal' | 'vertical' | 'both' | 'none';
+/**
+ * Implements a time-based queue.
+ */
+declare class Queue<T> {
+    queue: T[];
+    timeQueue: number[];
+    reset(): void;
+    pruneQueue(ms: number): void;
+    add(position: T): void;
+}
+/**
+ * Implements a queue to calculate the velocity of 2D coordinates.
+ */
+declare class VelocityQueue extends Queue<Coord> {
+    max: number;
+    constructor(max: number);
+    getVelocity(): Coord;
+    private limit;
+}
+declare class ScaleVelocityQueue extends Queue<number> {
+    getVelocity(): number;
+}
+type PossibleDragEventPosition = Array<Touch | MouseEvent> | TouchList;
+export type ArtboardOptions = {
+    x?: number;
+    y?: number;
+    scale?: number;
+    padding?: number;
+    scrollSpeed?: number;
+    minScale?: number;
+    maxScale?: number;
+    maxVelocity?: number;
+    getBlockingRects?: () => Rectangle[];
+};
+type AnimationTarget = Coord & {
+    scale: number;
+    alpha: number;
+    speed: number;
+};
+export declare class Artboard {
+    /**
+     * The element containing the artboard that can be moved and zoomed.
+     */
+    artboardEl: HTMLElement;
+    /**
+     * The parent/root element that defines the area in which the artboard can be interacted with.
+     */
+    rootEl: HTMLElement;
+    /**
+     * The minimum scale amount.
+     */
+    minScale: number;
+    /**
+     * The maximum scale amount.
+     */
+    maxScale: number;
+    /**
+     * The maximum move velocity.
+     */
+    maxVelocity: number;
+    /**
+     * The current scale of the artboard.
+     */
+    scale: number;
+    /**
+     * The padding area inside the root element.
+     */
+    padding: number;
+    /**
+     * The multiplier for scrolling using the mouse wheel.
+     */
+    scrollSpeed: number;
+    /**
+     * The current arboard offset/translation.
+     */
+    offset: Coord;
+    /**
+     * The native size of the artboard (without any scaling).
+     */
+    artboardSize: Size;
+    /**
+     * The native size of the root element.
+     */
+    rootSize: Size;
+    /**
+     * The target state for the current animation.
+     */
+    animationTarget: AnimationTarget | null;
+    /**
+     * The last touch coordinate (or the midpoint of two touches when scaling).
+     */
+    lastTouch: Coord | null;
+    /**
+     * Whether the user is currently dragging the artboard.
+     */
+    isDragging: boolean;
+    /**
+     * Whether the user is currently scaling the artboard using touch gestures.
+     */
+    isScaling: boolean;
+    /**
+     * The calculated velocity of a drag gesture.
+     */
+    velocity: Coord;
+    /**
+     * The queue containing the last touches to calculate the velocity.
+     */
+    velocityQueue: VelocityQueue;
+    /**
+     * The calculated scale velocity.
+     */
+    scaleVelocity: number;
+    /**
+     * The queue containing the last scaling values during a scale gesture.
+     */
+    scaleVelocityQueue: ScaleVelocityQueue;
+    /**
+     * Whether the animation loop is performing momentum scrolling.
+     */
+    isMomentumScrolling: boolean;
+    /**
+     * The detected touch direction.
+     */
+    touchDirection: TouchDirection;
+    /**
+     * The coordinate at which the first touch event fired.
+     */
+    initialTouchPoint: Coord | null;
+    /**
+     * The offset at the time the first touch event fired.
+     */
+    initialOffset: Coord;
+    scaleMidpoint: Coord | null;
+    initialTouchDistance: number;
+    initialScale: number;
+    moveStartOffset: Coord | null;
+    moveStartCoords: Coord | null;
+    isPressingSpace: boolean;
+    /**
+     * Whether the user is currently touching the artboard with at least one finger.
+     */
+    isTouching: boolean;
+    getBlockingRects: (() => Rectangle[]) | null;
+    listeners: Record<string, any>;
+    resizeObserver: ResizeObserver;
+    scaleStartCoords: Coord | null;
+    lastScaleTimestamp: number;
+    /**
+     * The timestamp of the last call to animateTo().
+     */
+    lastAnimateToTimestamp: number;
+    /**
+     * Construct a new Artboard.
+     */
+    constructor(el: HTMLElement, rootEl: HTMLElement, options?: ArtboardOptions);
+    setOptions(options: ArtboardOptions): void;
+    initListeners(): void;
+    onKeyDown(e: KeyboardEvent): void;
+    onKeyUp(): void;
+    onMouseDown(e: MouseEvent): void;
+    onMouseUp(): void;
+    onMouseMove(e: MouseEvent): void;
+    getDistance(a: Coord, b: Coord): number;
+    getTouchDistance(touches: PossibleDragEventPosition): number;
+    getMidpoint(touches: PossibleDragEventPosition): Coord;
+    onDragStart(touches: PossibleDragEventPosition): void;
+    onDragMove(touches: PossibleDragEventPosition): void;
+    resetDraggingState(): void;
+    onDragEnd(): void;
+    onTouchStart(e: TouchEvent): void;
+    onTouchMove(e: TouchEvent): void;
+    onTouchEnd(e: TouchEvent): void;
+    destroy(): void;
+    loop(): void;
+    getCenterX(targetScale?: number): number;
+    animateTo(x: number, y: number, targetScale?: number): void;
+    getEndY(): number;
+    animateOrJumpBy(y: number): void;
+    animateOrJumpTo(y: number): void;
+    scrollPageUp(): void;
+    scrollPageDown(): void;
+    scrollPageLeft(): void;
+    scrollPageRight(): void;
+    scrollToTop(): void;
+    scrollToEnd(): void;
+    scaleToFit(): void;
+    resetZoom(): void;
+    updateStyles(): void;
+    getBoundaries(providedScale?: number): {
+        xMin: number;
+        xMax: number;
+        yMin: number;
+        yMax: number;
+    };
+    setScale(newScale: number): void;
+    setOffset(x: number, y: number): void;
+    stopAnimate(): void;
+    scaleAroundPoint(x: number, y: number, newScale: number): void;
+    doZoom(x: number, y: number, delta: number): void;
+    onWheel(e: WheelEvent): void;
+}
+export {};