@blokkli/editor 1.0.0

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

@@ -0,0 +1,110 @@
+<template>
+  <PluginSidebar
+    id="comments"
+    :title="$t('comments', 'Comments')"
+    :tour-text="
+      $t('commentsTourText', 'Shows all comments for the current page.')
+    "
+    icon="comment"
+    weight="-20"
+  >
+    <div v-if="comments.length" class="bk bk-control">
+      <ul>
+        <li v-for="comment in comments" :key="comment.uuid">
+          <Comment
+            v-bind="comment"
+            @click-comment="onClickComment(comment)"
+            @resolve="onResolveComment(comment.uuid)"
+          />
+        </li>
+      </ul>
+    </div>
+    <template v-if="unresolvedCount" #badge>
+      <div class="bk-sidebar-badge bk-is-yellow">{{ unresolvedCount }}</div>
+    </template>
+  </PluginSidebar>
+
+  <PluginItemAction
+    id="add_comment"
+    :title="$t('addCommentToItem', 'Comment')"
+    :active="showAddComment"
+    weight="last"
+    icon="comment"
+    multiple
+    @click="showAddComment = !showAddComment"
+  >
+    <template v-if="showAddComment" #default="{ uuids }">
+      <CommentAddForm ref="commentForm" @add="onAddComment($event, uuids)" />
+    </template>
+  </PluginItemAction>
+
+  <CommentsOverlay
+    v-if="comments.length"
+    :comments="comments"
+    @add-comment="onAddComment($event.body, $event.uuids)"
+    @resolve-comment="onResolveComment($event)"
+  />
+</template>
+
+<script lang="ts" setup>
+import {
+  watch,
+  ref,
+  useBlokkli,
+  defineBlokkliFeature,
+  computed,
+} from '#imports'
+import { PluginSidebar, PluginItemAction } from '#blokkli/plugins'
+import Comment from './Comment/index.vue'
+import CommentAddForm from './AddForm/index.vue'
+import CommentsOverlay from './Overlay/index.vue'
+import type { CommentItem } from '#blokkli/types'
+
+const { adapter } = defineBlokkliFeature({
+  id: 'comments',
+  icon: 'comment',
+  label: 'Comments',
+  requiredAdapterMethods: ['loadComments', 'addComment'],
+  description: 'Provides comment functionality for blocks.',
+  screenshot: 'feature-comments.jpg',
+})
+
+const { eventBus, $t, selection } = useBlokkli()
+
+const commentForm = ref<InstanceType<typeof CommentAddForm> | null>(null)
+const showAddComment = ref(false)
+
+watch(selection.uuids, () => {
+  if (commentForm.value && !commentForm.value.getComment()) {
+    showAddComment.value = false
+  }
+})
+
+const comments = ref<CommentItem[]>([])
+comments.value = await adapter.loadComments()
+
+const unresolvedCount = computed(
+  () => comments.value.filter((v) => !v.resolved).length,
+)
+
+const onAddComment = async (body: string, uuids: string[]) => {
+  comments.value = await adapter.addComment(uuids, body)
+  showAddComment.value = false
+}
+
+const onResolveComment = async (uuid: string) => {
+  if (!adapter.resolveComment) {
+    return
+  }
+  comments.value = await adapter.resolveComment(uuid)
+}
+
+const onClickComment = (comment: CommentItem) =>
+  eventBus.emit('select:end', comment.blockUuids || [])
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Comments',
+}
+</script>

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

@@ -0,0 +1,98 @@
+<template>
+  <PluginItemDropdown
+    id="conversions"
+    :title="$t('convertTo', 'Convert to...')"
+    :enabled="!!possibleConversions.length"
+  >
+    <button
+      v-for="conversion in possibleConversions"
+      :key="conversion.id"
+      @click.prevent="onConvert(conversion.id)"
+    >
+      <ItemIcon :bundle="conversion.id" />
+      <div>
+        <div>{{ conversion.label }}</div>
+      </div>
+    </button>
+  </PluginItemDropdown>
+</template>
+
+<script lang="ts" setup>
+import {
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  useLazyAsyncData,
+  watch,
+} from '#imports'
+import { ItemIcon } from '#blokkli/components'
+import { PluginItemDropdown } from '#blokkli/plugins'
+import { falsy, onlyUnique } from '#blokkli/helpers'
+import type { BlockBundleDefinition } from '#blokkli/types'
+
+const { adapter } = defineBlokkliFeature({
+  id: 'conversions',
+  label: 'Conversions',
+  icon: 'convert',
+  requiredAdapterMethods: ['getConversions', 'convertBlocks'],
+  description:
+    'Provides block actions to convert one or more blocks to a different bundle.',
+})
+
+const { types, selection, state, $t } = useBlokkli()
+
+const {
+  data: conversions,
+  execute,
+  status,
+} = await useLazyAsyncData(() => adapter.getConversions(), {
+  immediate: false,
+  default: () => [],
+})
+
+watch(selection.uuids, () => {
+  if (status.value === 'idle') {
+    execute()
+  }
+})
+
+async function onConvert(targetBundle?: string) {
+  if (!targetBundle) {
+    return
+  }
+
+  await state.mutateWithLoadingState(
+    () =>
+      adapter.convertBlocks(
+        selection.blocks.value.map((v) => v.uuid),
+        targetBundle,
+      ),
+    $t('failedToConvert', 'The block could not be converted.'),
+  )
+}
+
+const itemBundleIds = computed(() =>
+  selection.blocks.value.map((v) => v.itemBundle).filter(onlyUnique),
+)
+
+const possibleConversions = computed<BlockBundleDefinition[]>(() => {
+  if (itemBundleIds.value.length !== 1) {
+    return []
+  }
+  const sourceType = itemBundleIds.value[0]
+  return conversions.value
+    .filter(
+      (v) =>
+        v.sourceBundle === sourceType &&
+        types.allowedTypesInList.value.includes(v.targetBundle),
+    )
+    .map((v) => types.getBlockBundleDefinition(v.targetBundle))
+    .filter(falsy)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Conversions',
+}
+</script>

package/dist/runtime/components/Edit/Features/Debug/Rects/index.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="bk-debug-rects">
+    <canvas
+      ref="canvasRects"
+      :style="{
+        width: ui.viewport.value.width + 'px',
+        height: ui.viewport.value.height + 'px',
+      }"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useBlokkli, ref } from '#imports'
+import { intersects } from '#blokkli/helpers'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+
+const { ui, dom } = useBlokkli()
+
+const canvasRects = ref<HTMLCanvasElement | null>(null)
+
+onBlokkliEvent('canvas:draw', (e) => {
+  if (!canvasRects.value) {
+    return
+  }
+
+  canvasRects.value.width = ui.viewport.value.width
+  canvasRects.value.height = ui.viewport.value.height
+
+  const ctx = canvasRects.value.getContext('2d')
+  if (!ctx) {
+    return
+  }
+  ctx.clearRect(0, 0, ui.viewport.value.width, ui.viewport.value.height)
+  const blockRects = dom.getBlockRects()
+  const viewport = ui.visibleViewport.value
+
+  const rects = Object.values(blockRects)
+
+  for (let i = 0; i < rects.length; i++) {
+    const rect = rects[i]
+
+    const drawnRect = {
+      x: rect.x * e.artboardScale + e.artboardOffset.x,
+      y: rect.y * e.artboardScale + e.artboardOffset.y,
+      width: rect.width * e.artboardScale,
+      height: rect.height * e.artboardScale,
+    }
+    if (intersects(drawnRect, viewport)) {
+      ctx.rect(drawnRect.x, drawnRect.y, drawnRect.width, drawnRect.height)
+      ctx.stroke()
+    }
+  }
+})
+</script>

package/dist/runtime/components/Edit/Features/Debug/Viewport/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="bk-debug-visible-viewport" :style="visibleViewportOverlayStyle">
+    <div>Visible Viewport</div>
+  </div>
+  <div
+    class="bk-debug-visible-viewport-padded"
+    :style="visibleViewportOverlayPaddedStyle"
+  >
+    <div>Visible Viewport Padded</div>
+  </div>
+  <div
+    v-for="(rect, i) in viewportBlockingRects"
+    :key="i"
+    class="bk-debug-viewport-blocking-rect"
+    :style="rect"
+  />
+
+  <div
+    v-for="(line, i) in linesRects"
+    :key="i"
+    class="bk-debug-viewport-lines"
+    :style="line"
+  />
+</template>
+
+<script setup lang="ts">
+import { useBlokkli, computed } from '#imports'
+import type { Rectangle } from '#blokkli/types'
+
+const { ui } = useBlokkli()
+
+const rectToStyle = (rect: Rectangle) => {
+  return {
+    top: rect.y + 'px',
+    left: rect.x + 'px',
+    width: rect.width + 'px',
+    height: rect.height + 'px',
+  }
+}
+const viewportBlockingRects = computed(() =>
+  ui.viewportBlockingRects.value.map(rectToStyle),
+)
+
+const linesRects = computed(() => {
+  const rects: any = []
+
+  ui.viewportBlockingRects.value.forEach((rect) => {
+    rects.push(
+      rectToStyle({
+        x: rect.x,
+        y: 0,
+        width: 1,
+        height: window.innerHeight,
+      }),
+    )
+    rects.push(
+      rectToStyle({
+        x: rect.x + rect.width,
+        y: 0,
+        width: 1,
+        height: window.innerHeight,
+      }),
+    )
+    rects.push(
+      rectToStyle({
+        x: 0,
+        y: rect.y,
+        width: window.innerWidth,
+        height: 1,
+      }),
+    )
+
+    rects.push(
+      rectToStyle({
+        x: 0,
+        y: rect.y + rect.height,
+        width: window.innerWidth,
+        height: 1,
+      }),
+    )
+  })
+
+  return rects
+})
+
+const visibleViewportOverlayStyle = computed(() =>
+  rectToStyle(ui.visibleViewport.value),
+)
+
+const visibleViewportOverlayPaddedStyle = computed(() =>
+  rectToStyle(ui.visibleViewportPadded.value),
+)
+</script>

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

@@ -0,0 +1,3 @@
+## Activating the debug pane
+
+In order to activate the debug pane, press <kbd>CTRL</kbd> + <kbd>=</kbd>.

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

@@ -0,0 +1,178 @@
+<template>
+  <PluginSidebar
+    v-if="debug.isEnabled.value"
+    id="debug"
+    title="Debug"
+    icon="bug"
+    weight="200"
+  >
+    <div class="bk bk-debug">
+      <section>
+        <h2>Keyboard</h2>
+        <div class="bk-debug-list">
+          <div>
+            <div>Space</div>
+            <div>{{ keyboard.isPressingSpace.value }}</div>
+          </div>
+          <div>
+            <div>Control</div>
+            <div>{{ keyboard.isPressingControl.value }}</div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Selection</h2>
+        <div class="bk-debug-list">
+          <div>
+            <div>Count</div>
+            <div>{{ selection.uuids.value.length }}</div>
+          </div>
+          <div>
+            <div>isDragging</div>
+            <div>{{ selection.isDragging.value }}</div>
+          </div>
+          <div>
+            <div>isDraggingExisting</div>
+            <div>{{ selection.isDraggingExisting.value }}</div>
+          </div>
+          <div>
+            <div>Is multiselecting</div>
+            <div>{{ selection.isMultiSelecting.value }}</div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Rendering</h2>
+        <div class="bk-debug-list">
+          <div v-for="overlay in debug.overlays.value" :key="overlay.id">
+            <label class="bk-checkbox-toggle">
+              <input
+                :checked="overlay.active"
+                type="checkbox"
+                class="peer"
+                @change="debug.toggleOverlay(overlay.id)"
+              />
+              <div />
+              <span>{{ overlay.label }}</span>
+            </label>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Icons</h2>
+        <div class="bk-debug-icons">
+          <div v-for="icon in iconItems" :key="icon">
+            <Icon :name="icon" />
+            <p>{{ icon }}</p>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Features</h2>
+        <div class="bk-debug-features">
+          <div v-for="feature in featuresList" :key="feature.id">
+            <div>
+              <span
+                class="bk-status-indicator"
+                :class="feature.mounted ? 'bk-is-success' : 'bk-is-danger'"
+              />
+            </div>
+            <div>
+              <h3>{{ feature.label }}</h3>
+              <div>{{ feature.id }}</div>
+              <p>{{ feature.description }}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </PluginSidebar>
+
+  <PluginDebugOverlay id="viewport" title="Show viewport overlay">
+    <DebugViewport />
+  </PluginDebugOverlay>
+
+  <PluginDebugOverlay id="rects" title="Show field and block rects">
+    <DebugRects />
+  </PluginDebugOverlay>
+</template>
+
+<script lang="ts" setup>
+import {
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+  defineBlokkliFeature,
+  computed,
+} from '#imports'
+import { PluginSidebar, PluginDebugOverlay } from '#blokkli/plugins'
+import { Icon } from '#blokkli/components'
+import { icons, type BlokkliIcon } from '#blokkli/icons'
+import { featureComponents } from '#blokkli-runtime/features'
+import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
+import DebugViewport from './Viewport/index.vue'
+import DebugRects from './Rects/index.vue'
+
+const { logger } = defineBlokkliFeature({
+  id: 'debug',
+  label: 'Debug',
+  icon: 'bug',
+  description: 'Provides debugging functionality.',
+})
+
+const { keyboard, selection, eventBus, features, debug } = useBlokkli()
+
+const iconItems = computed(() => Object.keys(icons) as BlokkliIcon[])
+
+const featuresList = computed(() => {
+  return featureComponents.map((v) => {
+    const feature = features.features.value.find((f) => f.id === v.id)
+    return {
+      id: v.id,
+      label: v.label,
+      description: v.description,
+      dependencies: v.dependencies.join(', '),
+      mounted: !!feature,
+    }
+  })
+})
+
+onBlokkliEvent('keyPressed', (e) => {
+  if (e.code === '=' && e.meta) {
+    e.originalEvent.preventDefault()
+    debug.toggle()
+  }
+})
+
+const onEvent = (name: string | number | symbol, data: any) => {
+  if (!debug.isEnabled.value) {
+    return
+  }
+  if (
+    name === 'animationFrame' ||
+    name === 'animationFrame:before' ||
+    name === 'canvas:draw'
+  ) {
+    return
+  }
+  logger.log('Event: ' + String(name), data)
+}
+
+onMounted(() => {
+  eventBus.on('*', onEvent)
+})
+
+onBeforeUnmount(() => {
+  eventBus.off('*', onEvent)
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Debug',
+}
+</script>

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

@@ -0,0 +1,43 @@
+<template>
+  <PluginItemAction
+    id="delete"
+    :title="$t('deleteButton', 'Delete')"
+    :disabled="state.editMode.value !== 'editing'"
+    multiple
+    key-code="Delete"
+    icon="delete"
+    :weight="-80"
+    @click="onClick"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useBlokkli, defineBlokkliFeature } from '#imports'
+
+import type { DraggableExistingBlock } from '#blokkli/types'
+import { PluginItemAction } from '#blokkli/plugins'
+
+const { state, $t, eventBus } = useBlokkli()
+
+const { adapter } = defineBlokkliFeature({
+  id: 'delete',
+  icon: 'delete',
+  label: 'Delete',
+  requiredAdapterMethods: ['deleteBlocks'],
+  description: 'Provides an action to delete one or more blocks.',
+})
+
+async function onClick(items: DraggableExistingBlock[]) {
+  eventBus.emit('select', [])
+  await state.mutateWithLoadingState(
+    () => adapter.deleteBlocks(items.map((v) => v.uuid)),
+    $t('deleteError', 'The block could not be deleted.'),
+  )
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'Delete',
+}
+</script>