@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.17

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

@@ -1,21 +1,19 @@
 <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 class="bk">
+      <button
+        ref="button"
+        class="bk-edit-indicator bk-button bk-is-primary"
+        @mouseenter="isHovering = true"
+        @mouseleave="isHovering = false"
+        @click="$emit('edit')"
+      >
+        {{ label }}
+      </button>
 
       <div
-        v-if="overlayStyle"
-        :style="overlayStyle"
+        v-show="isHovering"
+        ref="overlay"
         class="bk-edit-indicator-overlay"
       />
     </div>
@@ -24,47 +22,123 @@
 
 <script setup>
 import textProvider from "#blokkli/helpers/textProvider";
-import { ref, computed } from "#imports";
+import { ref, onMounted, onBeforeUnmount, useState, computed } from "#imports";
 import "#blokkli-build/styles.css";
 import useAnimationFrame from "#blokkli/helpers/composables/useAnimationFrame";
 const props = defineProps({
   uuid: { type: String, required: true },
-  editLabel: { type: String, required: false }
+  entityType: { type: String, required: true },
+  editLabel: { type: String, required: false },
+  permissions: { type: Array, required: true }
 });
+const key = computed(() => props.entityType + ":" + props.uuid);
 const $t = textProvider();
-const label = computed(
-  () => props.editLabel || $t("editIndicatorLabel", "Edit blocks")
-);
+const label = computed(() => {
+  if (props.editLabel) {
+    return props.editLabel;
+  } else if (props.permissions.includes("edit")) {
+    return $t("editIndicatorLabel", "Edit blocks");
+  } else if (props.permissions.includes("review")) {
+    return $t("editIndicatorLabelReview", "Review changes");
+  } else if (props.permissions.includes("view")) {
+    return $t("editIndicatorLabelView", "View changes");
+  }
+  return null;
+});
 defineEmits(["edit"]);
 const isHovering = ref(false);
-const style = ref({});
 const button = ref(null);
-const isVisible = ref(false);
-const overlayStyle = ref(null);
-function calculateIdealYPosition(elementHeight, bounds) {
-  const idealTop = Math.min(
-    Math.max(bounds.top, bounds.bottom - elementHeight - 20),
-    20
-  );
-  return Math.max(idealTop, bounds.y + 20);
+const overlay = ref(null);
+const targetElement = ref(null);
+const indicatorRegistry = useState(
+  "blokkliEditIndicators",
+  () => []
+);
+const isManager = computed(() => {
+  return indicatorRegistry.value[0]?.key === key.value;
+});
+function calculateIdealYPosition(buttonHeight, bounds, gap) {
+  const elementHeight = bounds.bottom - bounds.top;
+  let position;
+  if (elementHeight < 100) {
+    position = bounds.top + elementHeight / 2 - buttonHeight / 2;
+  } else {
+    position = bounds.top + gap;
+  }
+  position = Math.max(position, gap);
+  return Math.min(position, bounds.bottom - buttonHeight - gap);
 }
-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;
+const GAP = 15;
+const indicators = computed(() => {
+  const indicators2 = [...indicatorRegistry.value];
+  return indicators2.sort((a, b) => {
+    const position = a.targetElement.compareDocumentPosition(b.targetElement);
+    if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+      return -1;
+    }
+    if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+      return 1;
+    }
+    return 0;
+  });
+});
+function updateAllIndicatorPositions() {
+  const positions = [];
+  const heights = [];
+  for (let i = 0; i < indicators.value.length; i++) {
+    const data = indicators.value[i];
+    const rect = data.targetElement.getBoundingClientRect();
+    const buttonHeight = data.buttonElement.offsetHeight;
+    let idealY = calculateIdealYPosition(buttonHeight, rect, GAP);
+    for (let j = 0; j < i; j++) {
+      const prevRect = indicators.value[j].targetElement.getBoundingClientRect();
+      const prevElementTop = prevRect.top;
+      const prevElementHeight = prevRect.height;
+      const collisionPosition = prevElementTop + prevElementHeight + GAP;
+      if (idealY < collisionPosition) {
+        idealY = collisionPosition;
+      }
     }
+    const elementBottom = rect.bottom - buttonHeight - GAP;
+    if (elementBottom < idealY) {
+      idealY = elementBottom;
+    }
+    idealY = Math.round(idealY);
+    positions.push(idealY);
+    heights.push(buttonHeight);
+    data.buttonElement.style.transform = `translateY(${idealY}px)`;
+  }
+}
+onMounted(() => {
+  const el = document.querySelector(`[data-provider-uuid="${props.uuid}"]`);
+  if (el && el instanceof HTMLElement) {
+    targetElement.value = el;
+  }
+  if (button.value && targetElement.value) {
+    indicatorRegistry.value.push({
+      key: key.value,
+      targetElement: targetElement.value,
+      buttonElement: button.value
+    });
+  }
+});
+onBeforeUnmount(() => {
+  indicatorRegistry.value = indicatorRegistry.value.filter(
+    (i) => i.key !== key.value
+  );
+});
+useAnimationFrame(() => {
+  if (!button.value || !targetElement.value) {
+    return;
+  }
+  if (isManager.value) {
+    updateAllIndicatorPositions();
+  }
+  if (isHovering.value && overlay.value) {
+    const rect = targetElement.value.getBoundingClientRect();
+    overlay.value.style.width = rect.width + "px";
+    overlay.value.style.height = rect.height + "px";
+    overlay.value.style.transform = `translate(${rect.x}px, ${rect.y}px)`;
   }
 });
 </script>

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

@@ -1,7 +1,10 @@
 import '#blokkli-build/styles.css';
+import type { EditPermission } from '#blokkli/types';
 type __VLS_Props = {
     uuid: string;
+    entityType: string;
     editLabel?: string;
+    permissions: EditPermission[];
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     edit: (...args: any[]) => void;

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

@@ -8,24 +8,28 @@
     </Transition>
 
     <div id="bk-banner-container">
-      <Messages />
-      <div v-if="!state.stateAvailable.value" class="bk-state-unavailable">
-        <h2>
-          {{
-            $t("stateUnavailableTitle", "The edit state could not be loaded.")
-          }}
-        </h2>
-        <p>
-          {{
-            $t(
-  "stateUnavailableText",
-  "This could be due to missing permissions or a temporary problem. Please try again later."
-)
-          }}
-        </p>
+      <div id="bk-banner-list" class="bk">
+        <Banner
+          v-if="!state.stateAvailable.value"
+          id="state-unavailable"
+          icon="sad"
+          scheme="red"
+          :text="stateNotAvailableText"
+        />
+        <Banner
+          v-if="viewOnlyBanner"
+          id="view-only"
+          :icon="viewOnlyBanner.icon"
+          scheme="yellow"
+          :text="viewOnlyBanner.text"
+        />
       </div>
+      <Messages />
     </div>
   </Teleport>
+  <Teleport to="#nuxt-root">
+    <div id="bk-canvas-overlay" class="bk bk-canvas-overlay" />
+  </Teleport>
   <Actions v-if="!isInitializing" />
   <Toolbar @loaded="toolbarLoaded = true" />
   <AppMenu v-if="toolbarLoaded" />
@@ -35,7 +39,6 @@
     :key="route.fullPath"
     @loaded="featuresLoaded = true"
   />
-  <DragInteractions v-if="!isInitializing" />
   <AnimationCanvas v-if="!isInitializing" />
   <Konami />
   <SystemRequirements />
@@ -66,10 +69,10 @@ import Features from "./Features/index.vue";
 import Indicators from "./Indicators/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 Konami from "./Konami/index.vue";
+import Banner from "./Banner/index.vue";
 import animationProvider from "./../../helpers/animationProvider";
 import keyboardProvider from "./../../helpers/keyboardProvider";
 import selectionProvider from "./../../helpers/selectionProvider";
@@ -89,6 +92,7 @@ import definitionProvider from "./../../helpers/definitionProvider";
 import dropAreasProvider from "./../../helpers/dropAreaProvider";
 import indicatorsProvider from "./../../helpers/indicatorsProvider";
 import pluginProvider from "./../../helpers/pluginProvider";
+import editableProvider from "./../../helpers/editableProvider";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import "#blokkli-build/styles.css";
 import getAdapter from "#blokkli-build/edit-adapter";
@@ -109,7 +113,8 @@ const props = defineProps({
   entityUuid: { type: String, required: true },
   entityBundle: { type: String, required: true },
   language: { type: String, required: false, default: "en" },
-  isolate: { type: Boolean, required: false }
+  isolate: { type: Boolean, required: false },
+  permissions: { type: Array, required: true }
 });
 defineSlots();
 const context = computed(() => {
@@ -129,8 +134,14 @@ const featuresLoaded = ref(false);
 const isInitializing = ref(true);
 const definitions = definitionProvider();
 const $t = textProvider(context);
-const state = await editStateProvider(adapter, context, $t, providerKey);
-const storage = await storageProvider(adapter);
+const state = await editStateProvider(
+  adapter,
+  context,
+  $t,
+  providerKey,
+  props.permissions
+);
+const storage = await storageProvider(adapter, context);
 const debug = debugProvider(storage);
 const features = featuresProvider(storage);
 const theme = themeProvider();
@@ -140,12 +151,13 @@ const dropAreas = dropAreasProvider();
 const broadcast = broadcastProvider();
 const ui = uiProvider(storage, state, context);
 const dom = domProvider(ui, debug, definitions);
-const animation = animationProvider(ui, storage);
-const keyboard = keyboardProvider(animation);
 const selection = selectionProvider(dom);
+const animation = animationProvider(ui, storage, selection);
+const keyboard = keyboardProvider(animation);
 const types = await typesProvider(adapter, selection, context);
 const indicators = indicatorsProvider();
 const plugins = pluginProvider();
+const editable = editableProvider(ui);
 const mutatedEntity = computed(() => state.mutatedEntity.value || props.entity);
 const onContextMenu = (e) => {
   e.preventDefault();
@@ -177,6 +189,7 @@ onMounted(() => {
   document.documentElement.addEventListener("touchstart", onTouchStart);
   baseLogger.log("EditProvider mounted");
   dom.init();
+  editable.init();
   isInitializing.value = false;
   broadcast.emit("editorLoaded", { uuid: props.entityUuid });
 });
@@ -209,6 +222,7 @@ provide(INJECT_APP, {
   dom,
   dropAreas,
   eventBus,
+  editable,
   features,
   indicators,
   keyboard,
@@ -222,6 +236,49 @@ provide(INJECT_APP, {
   types,
   ui
 });
+function textWithHighlight(title, text) {
+  return `<strong>${title}</strong> ${text}`;
+}
+const stateNotAvailableText = computed(() => {
+  return textWithHighlight(
+    $t("stateUnavailableTitle", "The edit state could not be loaded."),
+    $t(
+      "stateUnavailableText",
+      "This could be due to missing permissions or a temporary problem. Please try again later."
+    )
+  );
+});
+const viewOnlyBanner = computed(
+  () => {
+    if (props.permissions.includes("edit")) {
+      return null;
+    }
+    if (props.permissions.includes("review")) {
+      return {
+        text: textWithHighlight(
+          $t("viewBannerReviewTitle", "You are in review mode."),
+          $t(
+            "viewBannerReviewText",
+            "You can view and add comments but cannot edit content."
+          )
+        ),
+        icon: "comment"
+      };
+    } else if (props.permissions.includes("view")) {
+      return {
+        text: textWithHighlight(
+          $t("viewBannerViewTitle", "You are in view-only mode."),
+          $t(
+            "viewBannerViewText",
+            "You can view comments but cannot edit content."
+          )
+        ),
+        icon: "eye"
+      };
+    }
+    return null;
+  }
+);
 const isProxyMode = computed(() => ui.isProxyMode.value);
 provide(INJECT_GLOBAL_PROXY_MODE, isProxyMode);
 if (import.meta.hot) {

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

@@ -1,3 +1,4 @@
+import type { EditPermission } from '#blokkli/types';
 import '#blokkli-build/styles.css';
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & {
@@ -7,6 +8,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         entityBundle: string;
         language?: string;
         isolate?: boolean;
+        permissions: EditPermission[];
     } & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/runtime/components/Edit/Features/Analyze/Overlay/index.vue

@@ -4,7 +4,8 @@
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { useBlokkli, onBeforeUnmount, computed } from "#imports";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
+import { useBlokkli, computed } from "#imports";
 import {
   setBuffersAndAttributes,
   drawBufferInfo,
@@ -112,23 +113,24 @@ class AnalyzeRectangleBufferCollector extends RectangleBufferCollector {
   }
 }
 const collector = new AnalyzeRectangleBufferCollector(props.gl);
-onBlokkliEvent("canvas:draw", () => {
-  if (selection.isMultiSelecting.value || selection.isDragging.value) {
-    return;
-  }
-  props.gl.useProgram(programInfo.program);
-  const { info } = collector.getBufferInfo();
-  if (!info) {
-    return;
+defineRenderer("analyze-overlay", {
+  zIndex: 500,
+  enabled: () => !selection.isMultiSelecting.value && !selection.isDragging.value,
+  render: (ctx) => {
+    ctx.gl.useProgram(programInfo.program);
+    const { info } = collector.getBufferInfo();
+    if (!info) {
+      return;
+    }
+    setUniforms(programInfo, {
+      u_color_violation: toShaderColor(theme.red.value.normal),
+      u_color_incomplete: toShaderColor(theme.yellow.value.normal),
+      u_color_pass: toShaderColor(theme.lime.value.normal)
+    });
+    animation.setSharedUniforms(ctx.gl, programInfo);
+    setBuffersAndAttributes(ctx.gl, programInfo, info);
+    drawBufferInfo(ctx.gl, info, ctx.gl.TRIANGLES);
   }
-  setUniforms(programInfo, {
-    u_color_violation: toShaderColor(theme.red.value.normal),
-    u_color_incomplete: toShaderColor(theme.yellow.value.normal),
-    u_color_pass: toShaderColor(theme.lime.value.normal)
-  });
-  animation.setSharedUniforms(props.gl, programInfo);
-  setBuffersAndAttributes(props.gl, programInfo, info);
-  drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
 });
 onBlokkliEvent("ui:resized", function() {
   collector.clearCache();
@@ -156,9 +158,6 @@ onBlokkliEvent("mouse:up", (e) => {
     }
   }
 });
-onBeforeUnmount(() => {
-  props.gl.clear(props.gl.COLOR_BUFFER_BIT);
-});
 </script>
 
 <script>

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

@@ -36,7 +36,7 @@
     :key="renderKey"
     to="#blokkli-add-list-sidebar-before"
   >
-    <div class="bk-list-sidebar-form">
+    <div class="bk bk-list-sidebar-form">
       <input
         id="add_block_search"
         v-model="searchText"

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

@@ -28,6 +28,7 @@ import { useBlokkli, defineBlokkliFeature, ref, computed } from "#imports";
 import { PluginToolbarButton } from "#blokkli/plugins";
 import { BlokkliTransition } from "#blokkli/components";
 import Palette from "./Palette/index.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 defineBlokkliFeature({
   id: "command-palette",
   icon: "command",
@@ -38,6 +39,7 @@ defineBlokkliFeature({
 const { $t } = useBlokkli();
 const isVisible = ref(false);
 const label = computed(() => $t("commandPaletteOpen", "Open Command Palette"));
+onBlokkliEvent("window:clickAway", () => isVisible.value = false);
 </script>
 
 <script>

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

@@ -1,29 +1,44 @@
 <template>
-  <div class="bk-blokkli-item-actions-comment-dropdown" @keydown.capture.stop>
-    <label for="comment_body" class="bk-form-label">{{
-      $t("commentBody", "Comment")
-    }}</label>
-    <textarea
-      id="comment_body"
-      v-model="comment"
-      type="text"
-      class="bk-form-input"
-      rows="5"
-      required
-    />
-    <button class="bk-button bk-is-primary" @click="$emit('add', comment)">
-      {{ $t("commentSave", "Submit comment") }}
-    </button>
-  </div>
+  <ArtboardTooltip
+    id="add-comment"
+    :title="$t('addCommentHeader', 'Add Comment')"
+    class="bk-add-comment"
+    @close="$emit('close')"
+  >
+    <div class="bk-add-comment-inner" @keydown.capture.stop>
+      <CommentInput id="comment_body" v-model="comment" />
+      <footer>
+        <button
+          :disabled="!comment"
+          class="bk-button bk-is-warning"
+          @click.prevent="onAdd"
+        >
+          {{ $t("commentSave", "Submit comment") }}
+        </button>
+      </footer>
+    </div>
+  </ArtboardTooltip>
 </template>
 
 <script setup>
-import { ref, useBlokkli } from "#imports";
-const comment = ref("");
-defineEmits(["add"]);
-const { $t } = useBlokkli();
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+import { ArtboardTooltip } from "#blokkli/components";
+import CommentInput from "./../CommentInput/index.vue";
+const emit = defineEmits(["add", "close"]);
+const { $t, ui, storage } = useBlokkli();
+const comment = storage.useWithContextPrefix("commentAddText", "");
 const getComment = () => {
   return comment.value;
 };
+function onAdd() {
+  emit("add", comment.value);
+  comment.value = "";
+}
 defineExpose({ getComment });
+onMounted(() => {
+  ui.setSelectionColor("add-comment", "yellow");
+});
+onBeforeUnmount(() => {
+  ui.removeSelectionColor("add-comment");
+});
 </script>

package/dist/runtime/components/Edit/Features/Comments/AddForm/index.vue.d.ts

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

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

@@ -0,0 +1,29 @@
+<template>
+  <div class="bk-comment-textarea">
+    <textarea
+      id="comment_body"
+      ref="textarea"
+      v-model="value"
+      type="text"
+      class="bk-form-input"
+      rows="4"
+      :placeholder
+      required
+    />
+  </div>
+</template>
+
+<script setup>
+import { onMounted, useTemplateRef } from "#imports";
+defineProps({
+  id: { type: String, required: true },
+  placeholder: { type: String, required: false }
+});
+const value = defineModel({ type: String });
+const el = useTemplateRef("textarea");
+onMounted(() => {
+  if (el.value) {
+    el.value.focus();
+  }
+});
+</script>

package/dist/runtime/components/Edit/Features/Comments/CommentInput/index.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    id: string;
+    placeholder?: string;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;