@blokkli/editor 1.0.0

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

@@ -0,0 +1,263 @@
+<template>
+  <Teleport to="body">
+    <div class="bk bk-blokkli-item-actions bk-control" @click.stop>
+      <div
+        v-show="
+          selection.blocks.value.length &&
+          !selection.isDragging.value &&
+          !selection.editableActive.value &&
+          !ui.isAnimating.value
+        "
+        ref="el"
+        class="bk-blokkli-item-actions-inner"
+      >
+        <div
+          id="bk-blokkli-item-actions-controls"
+          ref="controlsEl"
+          class="bk-blokkli-item-actions-controls"
+        >
+          <div id="bk-blokkli-item-actions-title">
+            <button
+              class="bk-blokkli-item-actions-type-button"
+              :disabled="!shouldRenderButton"
+              :title="title"
+              :class="{
+                'is-open': showDropdown,
+                'is-interactive': shouldRenderButton,
+                'bk-is-reusable': itemBundle?.id === 'from_library',
+                'bk-is-fragment': itemBundle?.id === 'blokkli_fragment',
+              }"
+              @click.prevent="showDropdown = !showDropdown"
+            >
+              <div class="bk-blokkli-item-actions-title-icon">
+                <ItemIcon v-if="bundleIcon" :bundle="bundleIcon" />
+                <Icon v-else name="selection" />
+              </div>
+              <span class="bk-blokkli-item-actions-title-label">{{
+                title
+              }}</span>
+              <span
+                v-if="selection.blocks.value.length > 1"
+                class="bk-blokkli-item-actions-title-count"
+                >{{ selection.blocks.value.length }}</span
+              >
+              <Icon v-if="shouldRenderButton" name="caret" class="bk-caret" />
+            </button>
+            <div
+              v-show="showDropdown && editingEnabled"
+              id="bk-blokkli-item-actions-dropdown"
+              class="bk-blokkli-item-actions-type-dropdown"
+            />
+          </div>
+
+          <div id="bk-blokkli-item-actions-after" />
+
+          <div
+            id="bk-blokkli-item-actions"
+            class="bk-blokkli-item-actions-buttons"
+          />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import {
+  watch,
+  ref,
+  computed,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+} from '#imports'
+import { onlyUnique, findIdealRectPosition, falsy } from '#blokkli/helpers'
+import type { Rectangle, PluginMountEvent } from '#blokkli/types'
+import { ItemIcon, Icon } from '#blokkli/components'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import { getFragmentDefinition } from '#blokkli/definitions'
+
+const { selection, $t, types, state, ui, dom } = useBlokkli()
+
+const editingEnabled = computed(() => state.editMode.value === 'editing')
+
+const ACTIONS_HEIGHT = 50
+
+const el = ref<HTMLDivElement | null>(null)
+
+const controlsEl = ref<HTMLElement | null>(null)
+const mountedPlugins = ref<PluginMountEvent[]>([])
+const showDropdown = ref(false)
+
+watch(selection.blocks, () => {
+  showDropdown.value = false
+})
+
+const bundleIcon = computed(() => {
+  if (itemBundle.value?.id === 'from_library') {
+    const reusableBundle = selection.blocks.value[0]?.reusableBundle
+    if (reusableBundle) {
+      return reusableBundle
+    }
+  }
+
+  return itemBundle.value?.id
+})
+
+const title = computed(() => {
+  if (itemBundle.value) {
+    if (itemBundle.value.id === 'blokkli_fragment') {
+      const fragments = selection.uuids.value
+        .map((uuid) => {
+          const item = state.getFieldListItem(uuid)
+          if (!item) {
+            return
+          }
+          const name = item.props?.name
+          if (!name) {
+            return
+          }
+          const definition = getFragmentDefinition(name)
+          return definition?.label
+        })
+        .filter(falsy)
+
+      if (fragments.length && fragments.length < 3) {
+        return fragments.join(', ')
+      }
+    } else if (itemBundle.value.id === 'from_library') {
+      const title = selection.blocks.value[0]?.editTitle
+      if (title) {
+        return title
+      }
+    }
+    return itemBundle.value.label
+  }
+
+  return $t('multipleItemsLabel', 'Items')
+})
+
+const itemBundleIds = computed(() =>
+  selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique),
+)
+
+const itemBundle = computed(() => {
+  if (itemBundleIds.value.length !== 1) {
+    return
+  }
+  const bundle = itemBundleIds.value[0]
+  return types.getBlockBundleDefinition(bundle)
+})
+
+const limitPlacedRect = (rect: Rectangle, padding: Rectangle): Rectangle => {
+  return {
+    width: rect.width,
+    height: rect.height,
+    x: Math.min(
+      Math.max(rect.x, padding.x),
+      padding.x + padding.width - rect.width,
+    ),
+    y: Math.min(
+      Math.max(padding.y, rect.y),
+      padding.height + padding.y - rect.height,
+    ),
+  }
+}
+
+let scrollWidth = 0
+
+const observer = new ResizeObserver((entries) => {
+  const size = entries[0]?.contentBoxSize?.[0]
+  if (!size) {
+    return
+  }
+
+  scrollWidth = size.inlineSize
+})
+
+onMounted(() => {
+  if (controlsEl.value) {
+    observer.observe(controlsEl.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (controlsEl.value) {
+    observer.unobserve(controlsEl.value)
+    observer.disconnect()
+  }
+})
+
+onBlokkliEvent('canvas:draw', () => {
+  if (!selection.blocks.value.length || ui.isMobile.value) {
+    return
+  }
+
+  let minX = 0
+  let minY = 0
+  const rects = selection.uuids.value
+    .map((uuid) => dom.getBlockRect(uuid))
+    .filter(falsy)
+  const offset = ui.artboardOffset.value
+  const scale = ui.artboardScale.value
+
+  for (let i = 0; i < rects.length; i++) {
+    const { x, y } = rects[i]
+    const rectX = (x + offset.x / scale) * scale
+    const rectY = (y + offset.y / scale) * scale
+    if (i === 0 || rectX < minX) {
+      minX = rectX
+    }
+    if (i === 0 || rectY < minY) {
+      minY = rectY
+    }
+  }
+
+  const padding = ui.visibleViewportPadded.value
+  const rect = limitPlacedRect(
+    {
+      x: minX,
+      y: minY - ACTIONS_HEIGHT - 15,
+      width: scrollWidth,
+      height: ACTIONS_HEIGHT,
+    },
+    padding,
+  )
+
+  const ideal = findIdealRectPosition(
+    ui.viewportBlockingRects.value,
+    rect,
+    padding,
+  )
+
+  if (el.value) {
+    el.value.style.transform = ui.isMobile.value
+      ? ''
+      : `translate3d(${Math.round(ideal.x)}px, ${Math.round(ideal.y)}px, 0)`
+  }
+})
+
+const shouldRenderButton = computed(() =>
+  mountedPlugins.value.some((v) => v.isRendering),
+)
+
+onBlokkliEvent('plugin:mount', (e) => {
+  if (e.type !== 'ItemDropdown') {
+    return
+  }
+  mountedPlugins.value.push(e as any)
+})
+
+onBlokkliEvent('plugin:unmount', (e) => {
+  if (e.type !== 'ItemDropdown') {
+    return
+  }
+  mountedPlugins.value = mountedPlugins.value.filter((v) => v.type !== e.id)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ItemActions',
+}
+</script>

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

@@ -0,0 +1,116 @@
+<template>
+  <PluginContextMenu
+    :id="'add_list_item_' + id"
+    ref="el"
+    tag="button"
+    class="bk-list-item"
+    data-element-type="action"
+    :menu="menu"
+    :data-sortli-id="id"
+    :class="[
+      {
+        'bk-is-disabled': disabled,
+      },
+      'bk-is-' + orientation,
+      'bk-is-' + color,
+    ]"
+  >
+    <div class="bk-list-item-inner">
+      <div class="bk-list-item-icon">
+        <Icon v-if="icon" :name="icon" />
+        <ItemIcon v-else-if="bundle" :bundle="bundle" />
+      </div>
+      <div
+        class="bk-list-item-label"
+        :class="{
+          'bk-tooltip': orientation === 'horizontal' && !ui.isMobile.value,
+        }"
+      >
+        <span>{{ label }}</span>
+      </div>
+    </div>
+
+    <div
+      class="bk-add-list-drop bk-drop-element"
+      :class="['bk-is-' + color, { 'bk-is-dark': isDark }]"
+    >
+      <div class="bk-add-list-drop-icon">
+        <ItemIcon v-if="bundle" :bundle="bundle" />
+        <Icon v-else-if="icon" :name="icon" />
+      </div>
+      <span>{{ label }}</span>
+    </div>
+  </PluginContextMenu>
+</template>
+
+<script lang="ts" setup>
+import type { BlokkliIcon } from '#blokkli/icons'
+import type { AddListOrientation, ContextMenu } from '#blokkli/types'
+import { useBlokkli, computed, ref } from '#imports'
+import { ItemIcon, Icon } from '#blokkli/components'
+import { PluginContextMenu } from '#blokkli/plugins'
+
+const { ui, storage, $t } = useBlokkli()
+
+const props = withDefaults(
+  defineProps<{
+    id: string
+    label: string
+    orientation: AddListOrientation
+    color?: 'rose' | 'lime' | 'default' | 'yellow' | 'accent'
+    bundle?: string
+    icon?: BlokkliIcon
+    disabled?: boolean
+    noContextMenu?: boolean
+  }>(),
+  {
+    color: 'default',
+    bundle: '',
+    icon: undefined,
+  },
+)
+
+const el = ref<InstanceType<typeof PluginContextMenu> | null>(null)
+
+const favorites = storage.use<string[]>('blockFavorites', [])
+
+const isFavorite = computed(() => favorites.value.includes(props.id))
+
+const isDark = computed(
+  () => props.orientation !== 'sidebar' && props.color === 'default',
+)
+
+const toggleFavorite = () => {
+  if (favorites.value.includes(props.id)) {
+    favorites.value = favorites.value.filter((v) => v !== props.id)
+  } else {
+    favorites.value = [...favorites.value, props.id]
+  }
+}
+
+const menu = computed<ContextMenu[]>(() => {
+  if (props.noContextMenu) {
+    return []
+  }
+  return [
+    {
+      type: 'button',
+      label: isFavorite.value
+        ? $t('addListItemFavoriteRemove', 'Remove from favorites')
+        : $t('addListItemFavoriteAdd', 'Add to favorites'),
+      icon: isFavorite.value ? 'unstar' : 'star',
+      callback: toggleFavorite,
+    },
+  ]
+})
+
+const getElement = (): HTMLElement | null => el.value?.$el
+
+defineExpose({ getElement })
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AddListItem',
+}
+</script>

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

@@ -0,0 +1,122 @@
+<template>
+  <Teleport to="body">
+    <canvas id="bk-animation-canvas-webgl" ref="canvasGl" />
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import type { Rectangle } from '#blokkli/types'
+import { ref, computed, useBlokkli, onMounted, watch } from '#imports'
+
+const { ui, animation, eventBus } = useBlokkli()
+
+const canvasGl = ref<HTMLCanvasElement | null>(null)
+
+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',
+    },
+  }
+})
+
+let gl: WebGLRenderingContext | null | undefined = null
+
+function initGl() {
+  if (!canvasGl.value) {
+    return
+  }
+  gl = animation.gl()
+
+  canvasGl.value.width = canvasAttributes.value.width
+  canvasGl.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, 0.0, 0.0)
+  gl.viewport(0, 0, canvasAttributes.value.width, canvasAttributes.value.height)
+  // gl.blendFunc(gl[source.value as any], gl[destination.value as any])
+  // gl.blendEquation(gl[equtation.value as any])
+  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: ui.visibleViewport.value.width * dpi,
+    height: ui.visibleViewport.value.height * dpi,
+  }
+})
+
+function setScissor(v: Rectangle) {
+  if (!gl) {
+    return
+  }
+
+  gl.scissor(v.x, v.y, v.width, v.height)
+}
+
+watch(scissor, setScissor)
+
+let lastCanvasWidth = 0
+let lastCanvasHeight = 0
+
+onBlokkliEvent('animationFrame', (e) => {
+  if (!canvasGl.value) {
+    return
+  }
+  const canvasWidth = canvasAttributes.value.width
+  const canvasHeight = canvasAttributes.value.height
+
+  // Only update width and height if they have changed.
+  if (canvasWidth !== lastCanvasWidth || canvasHeight !== lastCanvasHeight) {
+    canvasGl.value.width = canvasWidth
+    canvasGl.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
+  // const size = ui.artboardSize.value
+  // const dpi = animation.dpi.value
+  // Restrict drawing to area on and 20px around artboard.
+  // gl.scissor(
+  //   offset.x * dpi - 20,
+  //   canvasHeight - offset.y * dpi - 20 - size.height * dpi * scale,
+  //   size.width * scale * dpi + 40,
+  //   size.height * scale * dpi + 40,
+  // )
+  // gl.clearColor(1.0, 0.0, 0.0, 0.4)
+  // gl.clear(gl.COLOR_BUFFER_BIT)
+
+  eventBus.emit('canvas:draw', {
+    ...e,
+    artboardOffset: offset,
+    artboardScale: scale,
+  })
+})
+
+onMounted(() => {
+  initGl()
+})
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+  <Teleport to="#bk-toolbar-menu">
+    <div class="bk-toolbar-menu">
+      <button class="bk-toolbar-menu-button" @click.prevent.stop="onClick">
+        <Icon name="menu" />
+      </button>
+    </div>
+  </Teleport>
+  <Teleport to="body">
+    <transition name="bk-fade" :duration="200">
+      <div
+        v-if="menuOpen"
+        class="bk bk-menu-overlay bk-overlay"
+        @click="ui.menu.close()"
+      />
+    </transition>
+    <transition name="bk-menu" :duration="200">
+      <div v-show="menuOpen" class="bk bk-menu-list">
+        <button :class="{ 'bk-is-active': menuOpen }" @click="ui.menu.close">
+          <Icon name="close" />
+        </button>
+        <div class="bk-menu-list-inner">
+          <div id="bk-menu-primary" />
+          <div id="bk-menu-secondary" />
+          <aside class="bk-menu-meta">
+            <div class="bk-menu-meta-logo">
+              <Icon name="logo" />
+              <div><strong>@blokkli/editor</strong> {{ blokkliVersion }}</div>
+            </div>
+
+            <div>
+              <a href="https://www.blokk.li" target="_blank">blokk.li</a>
+            </div>
+          </aside>
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, useBlokkli } from '#imports'
+import { Icon } from '#blokkli/components'
+import { blokkliVersion } from '#blokkli/config'
+
+const { ui, eventBus } = useBlokkli()
+
+const menuOpen = computed(() => ui.menu.isOpen.value)
+
+const onClick = () => {
+  eventBus.emit('select', '')
+  ui.menu.open()
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'AppMenu',
+}
+</script>

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

@@ -0,0 +1,64 @@
+<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ökkli has stopped working') }}</h2>
+            <p>
+              {{
+                $t(
+                  'fatalErrorText',
+                  'Unfortunately blökkli 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 lang="ts" setup>
+import { computed, ref, onErrorCaptured } from '#imports'
+import { Icon } from '#blokkli/components'
+import textProvider from '#blokkli/helpers/textProvider'
+
+const errors = ref<Error[]>([])
+
+const $t = textProvider()
+
+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
+  })
+})
+</script>