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

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

@@ -13,15 +13,24 @@
       :class="{
   'bk-has-unresolved-comments': unresolvedCount > 0
 }"
-      @click="$emit('toggle')"
+      @click.prevent="$emit('toggle')"
+      @pointerdown.prevent.stop
+      @pointerup.prevent.stop
+      @pointermove.prevent.stop
     >
       <Icon v-if="showComments" name="close" />
       <span v-else>{{ unresolvedCount }}</span>
     </button>
     <div
-      v-show="showComments"
+      v-if="showComments"
       class="bk-comments-overlay-comments"
       :class="{ 'bk-is-left': isLeft, 'bk-is-right': !isLeft }"
+      :style="{
+  width: width + 'px'
+}"
+      @pointerdown.capture.stop
+      @pointerup.capture.stop
+      @pointermove.capture.stop
     >
       <div class="bk-comments-overlay-comments-header">
         <Icon name="comment" />
@@ -36,17 +45,14 @@
         <Comment v-bind="comment" @resolve="resolveComment(comment.uuid)" />
       </div>
       <div class="bk-comments-overlay-form" @keydown.capture.stop>
-        <textarea
-          v-model="commentText"
-          type="text"
-          class="bk-form-input"
+        <CommentInput
+          id="comment_reply"
+          v-model.lazy="commentText"
           :placeholder="$t('commentBodyPlaceholder', 'Add reply')"
-          required
-          @focus="showFullForm = true"
         />
         <button
-          v-if="showFullForm && commentText"
-          class="bk-button bk-is-primary bk-is-small"
+          v-if="commentText"
+          class="bk-button bk-is-warning"
           @click="addComment"
         >
           {{ $t("commentAdd", "Add comment") }}
@@ -57,12 +63,12 @@
 </template>
 
 <script setup>
-import { ref, computed, useBlokkli } from "#imports";
+import { computed, useBlokkli } from "#imports";
 import { Icon } from "#blokkli/components";
 import Comment from "./../../Comment/index.vue";
-const { $t } = useBlokkli();
-const commentText = ref("");
-const showFullForm = ref(false);
+import CommentInput from "./../../CommentInput/index.vue";
+const { $t, storage } = useBlokkli();
+const commentText = storage.useWithContextPrefix("commentReply", "");
 const emit = defineEmits(["toggle", "addComment", "resolveComment"]);
 const props = defineProps({
   isReduced: { type: Boolean, required: true },
@@ -70,14 +76,14 @@ const props = defineProps({
   uuids: { type: Array, required: true },
   comments: { type: Array, required: true },
   style: { type: null, required: true },
-  showComments: { type: Boolean, required: true }
+  showComments: { type: Boolean, required: true },
+  width: { type: Number, required: true }
 });
 const unresolvedCount = computed(
   () => props.comments.filter((v) => !v.resolved).length
 );
 function addComment() {
   emit("addComment", commentText.value);
-  showFullForm.value = false;
   commentText.value = "";
 }
 function resolveComment(uuid) {

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

@@ -6,6 +6,7 @@ type __VLS_Props = {
     comments: CommentItem[];
     style: any;
     showComments: boolean;
+    width: number;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => void;

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

@@ -1,13 +1,14 @@
 <template>
-  <Teleport to="body">
-    <div class="bk bk-comments-overlay bk-control">
+  <Teleport to="#bk-canvas-overlay">
+    <div ref="overlay" class="bk bk-comments-overlay bk-control">
       <Item
         v-for="item in indicators"
         :key="item.id"
         v-bind="item"
-        :is-reduced="isReduced"
-        :is-left="isLeft"
+        :is-reduced
+        :is-left
         :show-comments="active === item.id"
+        :width
         @toggle="toggle(item)"
         @add-comment="$emit('addComment', { body: $event, uuids: item.uuids })"
         @resolve-comment="$emit('resolveComment', $event)"
@@ -17,11 +18,19 @@
 </template>
 
 <script setup>
-import { ref, useBlokkli } from "#imports";
+import { computed, ref, useBlokkli } from "#imports";
 import { falsy, getBounds } from "#blokkli/helpers";
 import Item from "./Item/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 const { eventBus, ui, dom } = useBlokkli();
+const width = computed(() => {
+  if (ui.viewport.value.width > 1600) {
+    return 400;
+  } else if (ui.viewport.value.width > 1300) {
+    return 350;
+  }
+  return 300;
+});
 const props = defineProps({
   comments: { type: Array, required: true }
 });
@@ -47,7 +56,7 @@ onBlokkliEvent("canvas:draw", (e) => {
     ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width - 30
   );
   isReduced.value = scale < 0.8;
-  isLeft.value = x + 300 < ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width;
+  isLeft.value = x + width.value < ui.visibleViewportPadded.value.x + ui.visibleViewportPadded.value.width;
   const newIndicators = {};
   const yMap = /* @__PURE__ */ new Set();
   const findY = (y) => {

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

@@ -19,6 +19,7 @@
         </li>
       </ul>
     </div>
+
     <template v-if="unresolvedCount" #badge>
       <div class="bk-sidebar-badge bk-is-yellow">{{ unresolvedCount }}</div>
     </template>
@@ -26,17 +27,24 @@
 
   <PluginItemAction
     id="add_comment"
-    :title="$t('addCommentToItem', 'Comment')"
+    :title="$t('addCommentToItem', 'Add 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>
+  />
+
+  <Teleport to="body">
+    <BlokkliTransition name="caret-tooltip">
+      <CommentAddForm
+        v-if="showAddComment"
+        ref="commentForm"
+        @add="onAddComment($event)"
+        @close="showAddComment = false"
+      />
+    </BlokkliTransition>
+  </Teleport>
 
   <CommentsOverlay
     v-if="comments.length"
@@ -55,6 +63,7 @@ import {
   computed
 } from "#imports";
 import { PluginSidebar, PluginItemAction } from "#blokkli/plugins";
+import { BlokkliTransition } from "#blokkli/components";
 import Comment from "./Comment/index.vue";
 import CommentAddForm from "./AddForm/index.vue";
 import CommentsOverlay from "./Overlay/index.vue";
@@ -79,8 +88,11 @@ comments.value = await adapter.loadComments();
 const unresolvedCount = computed(
   () => comments.value.filter((v) => !v.resolved).length
 );
-const onAddComment = async (body, uuids) => {
-  comments.value = await adapter.addComment(uuids, body);
+const onAddComment = async (body, providedUuids) => {
+  const uuids = providedUuids ?? [...selection.uuids.value];
+  if (uuids.length) {
+    comments.value = await adapter.addComment(uuids, body);
+  }
   showAddComment.value = false;
 };
 const onResolveComment = async (uuid) => {

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

@@ -12,10 +12,26 @@
 
 <script setup>
 import { useBlokkli, ref } from "#imports";
-import { intersects } from "#blokkli/helpers";
+import { falsy, intersects } from "#blokkli/helpers";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { ui, dom } = useBlokkli();
+const { ui, dom, editable } = useBlokkli();
 const canvasRects = ref(null);
+function drawRects(ctx, rects, scale, offset, viewport) {
+  for (let i = 0; i < rects.length; i++) {
+    const rect = rects[i];
+    const drawnRect = {
+      x: rect.x * scale + offset.x,
+      y: rect.y * scale + offset.y,
+      width: rect.width * scale,
+      height: rect.height * scale
+    };
+    if (intersects(drawnRect, viewport)) {
+      ctx.beginPath();
+      ctx.rect(drawnRect.x, drawnRect.y, drawnRect.width, drawnRect.height);
+      ctx.stroke();
+    }
+  }
+}
 onBlokkliEvent("canvas:draw", (e) => {
   if (!canvasRects.value) {
     return;
@@ -31,39 +47,14 @@ onBlokkliEvent("canvas:draw", (e) => {
   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.beginPath();
-      ctx.rect(drawnRect.x, drawnRect.y, drawnRect.width, drawnRect.height);
-      ctx.stroke();
-    }
-  }
+  drawRects(ctx, rects, e.artboardScale, e.artboardOffset, viewport);
   ctx.strokeStyle = "red";
-  const visibleFieldRects = dom.getVisibleFields();
-  for (let i = 0; i < visibleFieldRects.length; i++) {
-    const key = visibleFieldRects[i];
-    const rect = dom.getFieldRect(key);
-    if (!rect) {
-      continue;
-    }
-    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.beginPath();
-      ctx.rect(drawnRect.x, drawnRect.y, drawnRect.width, drawnRect.height);
-      ctx.stroke();
-    }
-  }
+  const visibleFieldRects = dom.getVisibleFields().map((key) => {
+    return dom.getFieldRect(key);
+  }).filter(falsy);
+  drawRects(ctx, visibleFieldRects, e.artboardScale, e.artboardOffset, viewport);
+  ctx.strokeStyle = "green";
+  const editableRects = editable.getVisible();
+  drawRects(ctx, editableRects, e.artboardScale, e.artboardOffset, viewport);
 });
 </script>

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

@@ -0,0 +1,240 @@
+<template>
+  <PluginSidebar 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>
+            <div>DPI</div>
+            <div>{{ animation.dpi.value }}</div>
+          </div>
+          <div v-for="overlay in debug.overlays.value" :key="overlay.id">
+            <FormToggle
+              :label="overlay.label"
+              :model-value="overlay.active"
+              @update:model-value="debug.toggleOverlay(overlay.id)"
+            />
+          </div>
+          <div>
+            <FormToggle
+              label="Set transforming"
+              :model-value="ui.isTransforming.value"
+              @update:model-value="toggleTransforming"
+            />
+          </div>
+
+          <div>
+            <FormToggle
+              label="Enable WebGL"
+              :model-value="animation.webglEnabled.value"
+              @update:model-value="toggleWebgl"
+            />
+          </div>
+          <div>
+            <button
+              class="bk-button bk-is-small"
+              @click.prevent="() => dom.updateVisibleRects()"
+            >
+              Refresh Rects
+            </button>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2>Logging</h2>
+        <div class="bk-debug-list">
+          <div>
+            <div>
+              <FormToggle v-model="logEvents" label="Log Events" />
+            </div>
+            <div>
+              <button
+                class="bk-button bk-is-small"
+                @click.prevent="() => console.log(dom.getDebugData())"
+              >
+                Log DOM state
+              </button>
+            </div>
+          </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>
+
+  <PluginItemDropdown
+    v-if="itemDropdownItems.length"
+    id="selection"
+    :title="$t('selectionActionGroupTitle', 'Selection')"
+    enabled
+    :items="itemDropdownItems"
+    icon="bug"
+    weight="200"
+    @select="onSelectDropdownItem"
+  />
+</template>
+
+<script setup>
+import { useBlokkli, onMounted, onBeforeUnmount, computed } from "#imports";
+import {
+  PluginSidebar,
+  PluginDebugOverlay,
+  PluginItemDropdown
+} from "#blokkli/plugins";
+import { Icon, FormToggle } from "#blokkli/components";
+import { icons } from "#blokkli-build/icons";
+import DebugViewport from "./Viewport/index.vue";
+import DebugRects from "./Rects/index.vue";
+const { logger } = defineProps({
+  logger: { type: Object, required: true }
+});
+const {
+  keyboard,
+  selection,
+  eventBus,
+  features,
+  debug,
+  ui,
+  animation,
+  dom,
+  storage,
+  $t
+} = useBlokkli();
+const logEvents = storage.use("debug:log-events", true);
+const iconItems = computed(() => Object.keys(icons));
+const featuresList = computed(() => {
+  return features.features.value.map((v) => {
+    const feature = features.mountedFeatures.value.find((f) => f.id === v.id);
+    return {
+      id: v.id,
+      label: v.label,
+      description: v.description,
+      dependencies: v.dependencies?.join(", "),
+      mounted: !!feature
+    };
+  });
+});
+const onEvent = (name, data) => {
+  if (!logEvents.value) {
+    return;
+  }
+  if (name === "animationFrame" || name === "animationFrame:before" || name === "animationFrame:after" || name === "canvas:draw") {
+    return;
+  }
+  logger.log("Event: " + String(name), data);
+};
+function toggleTransforming() {
+  if (ui.isTransforming.value) {
+    ui.setTransform();
+  } else {
+    ui.setTransform("Transform plugin label");
+  }
+}
+function toggleWebgl() {
+  if (animation.webglEnabled.value) {
+    animation.webglEnabled.value = false;
+  } else {
+    animation.webglEnabled.value = true;
+  }
+}
+onMounted(() => {
+  eventBus.on("*", onEvent);
+});
+onBeforeUnmount(() => {
+  eventBus.off("*", onEvent);
+});
+const itemDropdownItems = computed(() => {
+  if (selection.uuids.value.length === 1) {
+    return [
+      {
+        id: "copy-uuid",
+        label: "Copy UUID"
+      }
+    ];
+  }
+  return [];
+});
+async function onSelectDropdownItem(item) {
+  if (item.id === "copy-uuid") {
+    const type = "text/plain";
+    const clipboardItemData = {
+      [type]: selection.uuids.value.at(0) ?? ""
+    };
+    const clipboardItem = new ClipboardItem(clipboardItemData);
+    await navigator.clipboard.write([clipboardItem]);
+  }
+}
+</script>

package/dist/runtime/components/Edit/Features/Debug/Renderer.vue.d.ts

@@ -0,0 +1,6 @@
+import type { DebugLogger } from '#blokkli/helpers/debugProvider';
+type __VLS_Props = {
+    logger: DebugLogger;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;