@blokkli/editor 2.0.0-alpha.22 → 2.0.0-alpha.24

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

@@ -1,118 +1,110 @@
 <template>
-  <Teleport to="body">
-    <div class="bk bk-blokkli-item-actions bk-control" @click.stop>
-      <div
-        v-show="
-  !selection.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected && shouldRender && !ui.hasTooltipOpen.value
-"
-        ref="el"
-        class="bk-blokkli-item-actions-inner"
-      >
-        <div
-          id="bk-blokkli-item-actions-controls"
-          ref="controlsEl"
-          class="bk-blokkli-item-actions-controls"
-          :class="{
+  <div
+    ref="el"
+    :style="{
+  visibility: isVisible ? 'visible' : 'hidden'
+}"
+    class="bk bk-blokkli-item-actions-inner"
+    @click.stop
+  >
+    <div
+      id="bk-blokkli-item-actions-controls"
+      ref="controlsEl"
+      class="bk-blokkli-item-actions-controls"
+      :class="{
   'bk-is-locked': ui.isTransforming.value
 }"
-        >
-          <div id="bk-blokkli-item-actions-title">
-            <button
-              class="bk-blokkli-item-actions-type-button"
-              :disabled="!shouldRenderButton"
-              :class="{
+    >
+      <div id="bk-blokkli-item-actions-title">
+        <button
+          class="bk-blokkli-item-actions-type-button bk-item-icon-hover-parent"
+          tabindex="-1"
+          :disabled="!shouldRenderButton"
+          :class="{
   'is-open': showDropdown,
-  'is-interactive': shouldRenderButton,
-  'bk-is-reusable': itemBundle?.id === 'from_library',
-  'bk-is-fragment': itemBundle?.id === 'blokkli_fragment'
+  'is-interactive': shouldRenderButton
 }"
-              @click.prevent="showDropdown = !showDropdown"
-            >
-              <div v-if="shouldRenderButton" class="bk-tooltip">
-                {{ $t("actionsDropdownToolip", "Further actions") }}
-              </div>
-              <div
-                v-show="!hasSelectedHost"
-                class="bk-blokkli-item-actions-title-icon"
-              >
-                <Icon v-if="ui.isTransforming.value" name="loader" />
-                <ItemIcon v-else-if="bundleIcon" :bundle="bundleIcon" />
-                <Icon v-else name="selection" />
-                <div
-                  v-if="itemBundle?.id === 'from_library'"
-                  class="bk-blokkli-item-actions-title-icon-reusable"
-                >
-                  <Icon name="reusable" />
-                </div>
-              </div>
-              <span class="bk-blokkli-item-actions-title-label">{{
-                title
-              }}</span>
-              <span
-                v-if="selection.items.value.length > 1"
-                class="bk-blokkli-item-actions-title-count"
-                >{{ selection.items.value.length }}</span
-              >
-              <span
-                v-show="selectedIsNew"
-                class="bk-blokkli-item-actions-title-pill"
-                >{{ $t("selectedIsNew", "New") }}</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"
-            />
+          @click.prevent="showDropdown = !showDropdown"
+        >
+          <div v-if="shouldRenderButton" class="bk-tooltip">
+            {{ $t("actionsDropdownToolip", "Further actions") }}
           </div>
-
           <div
-            v-show="!selection.hasHostSelected.value"
-            id="bk-blokkli-item-actions"
-            class="bk-blokkli-item-actions-buttons"
-          />
-        </div>
+            v-show="!hasSelectedHost"
+            class="bk-blokkli-item-actions-title-icon"
+          >
+            <Icon v-if="ui.isTransforming.value" name="loader" />
+            <ItemIconBox
+              v-else-if="bundleIcon"
+              :bundle="bundleIcon"
+              :color="isReusable ? 'lime' : void 0"
+              is-small
+            />
+            <Icon v-else name="selection" />
+            <div
+              v-if="itemBundle?.id === 'from_library'"
+              class="bk-blokkli-item-actions-title-icon-reusable"
+            >
+              <Icon name="reusable" />
+            </div>
+          </div>
+          <span class="bk-blokkli-item-actions-title-label">{{ title }}</span>
+          <span
+            v-if="selection.items.value.length > 1"
+            class="bk-blokkli-item-actions-title-count"
+            >{{ selection.items.value.length }}</span
+          >
+          <span
+            v-show="selectedIsNew"
+            class="bk-blokkli-item-actions-title-pill"
+            >{{ $t("selectedIsNew", "New") }}</span
+          >
+          <Icon v-if="shouldRenderButton" name="caret" class="bk-caret" />
+        </button>
+        <EditActionsItemDropdown
+          v-if="showDropdown && editingEnabled"
+          @close="showDropdown = false"
+        />
       </div>
+
+      <div
+        v-show="!selection.hasHostSelected.value"
+        id="bk-blokkli-item-actions"
+        class="bk-blokkli-item-actions-buttons"
+      />
     </div>
-  </Teleport>
+  </div>
 </template>
 
 <script setup>
-import {
-  watch,
-  ref,
-  computed,
-  useBlokkli,
-  onMounted,
-  onBeforeUnmount,
-  useTemplateRef
-} from "#imports";
+import { watch, ref, computed, useBlokkli, useTemplateRef } from "#imports";
 import { falsy } from "#blokkli/helpers";
-import { ItemIcon, Icon } from "#blokkli/components";
+import { Icon, ItemIconBox } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import useStickyToolbar from "#blokkli/helpers/composables/useStickyToolbar";
+import EditActionsItemDropdown from "./ItemDropdown.vue";
+import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 const { selection, $t, types, state, ui, definitions, debug } = useBlokkli();
 const editingEnabled = computed(
   () => state.editMode.value === "editing" || state.editMode.value === "translating"
 );
 const ACTIONS_HEIGHT = 52;
-let scrollWidth = 0;
 const el = useTemplateRef("el");
-const { shouldRender } = useStickyToolbar(el, {
+useStickyToolbar(el, {
   getPlacementY: () => "top",
-  shouldUpdate: () => !selection.isChangingOptions.value,
+  shouldUpdate: () => !selection.isChangingOptions.value && isVisible.value,
   getHeight: () => ACTIONS_HEIGHT,
-  getWidth: () => scrollWidth,
   getMargin: () => 20,
   allowHorizontalOverflow: true
 });
 const controlsEl = ref(null);
-const mountedPlugins = ref([]);
 const showDropdown = ref(false);
 const hasAnythingSelected = computed(
   () => selection.hasHostSelected.value || !!selection.items.value.length
 );
+const isVisible = computed(() => {
+  return !selection.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected.value && !ui.hasTooltipOpen.value;
+});
 watch(selection.items, () => {
   showDropdown.value = false;
 });
@@ -128,6 +120,9 @@ const bundleIcon = computed(() => {
   }
   return itemBundle.value?.id;
 });
+const isReusable = computed(() => {
+  return itemBundle.value?.id === BUNDLE_FROM_LIBRARY;
+});
 const hasSelectedHost = computed(() => {
   return selection.items.value.length === 0;
 });
@@ -182,39 +177,7 @@ const itemBundle = computed(() => {
   const bundle = selection.bundles.value[0];
   return types.getBlockBundleDefinition(bundle);
 });
-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();
-  }
-});
-const shouldRenderButton = computed(
-  () => mountedPlugins.value.some((v) => v.isRendering)
-);
-onBlokkliEvent("plugin:mount", (e) => {
-  if (e.type !== "ItemDropdown") {
-    return;
-  }
-  mountedPlugins.value.push(e);
-});
-onBlokkliEvent("plugin:unmount", (e) => {
-  if (e.type !== "ItemDropdown") {
-    return;
-  }
-  mountedPlugins.value = mountedPlugins.value.filter((v) => v.type !== e.id);
-});
+const shouldRenderButton = computed(() => true);
 onBlokkliEvent("action:selected", () => {
   showDropdown.value = false;
 });

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

@@ -1,40 +1,22 @@
 <template>
   <PluginContextMenu
-    :id="'add_list_item_' + id"
+    :id="'add_list_item_' + context + id"
     ref="el"
     tag="button"
-    class="bk-list-item"
-    data-element-type="action"
+    class="bk-add-item"
     :menu="menu"
     :data-sortli-id="id"
     :class="[
   {
     'bk-is-disabled': disabled
   },
-  'bk-is-' + orientation,
   'bk-is-' + color
 ]"
   >
-    <div class="bk-list-item-inner">
-      <AddListItemIcon :orientation :color :bundle :icon />
-      <div
-        class="bk-list-item-label"
-        :class="{
-  'bk-tooltip': orientation === 'horizontal' && !ui.isMobile.value
-}"
-      >
-        <span>{{ label }}</span>
-      </div>
+    <div class="bk-add-item-icon">
+      <ItemIconBox :color :bundle :icon />
     </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>
+    <div class="bk-add-item-label">
       <span>{{ label }}</span>
     </div>
   </PluginContextMenu>
@@ -42,13 +24,13 @@
 
 <script setup>
 import { useBlokkli, computed, ref } from "#imports";
-import { ItemIcon, Icon, AddListItemIcon } from "#blokkli/components";
+import { ItemIconBox } from "#blokkli/components";
 import { PluginContextMenu } from "#blokkli/plugins";
-const { ui, storage, $t } = useBlokkli();
+const { storage, $t } = useBlokkli();
 const props = defineProps({
   id: { type: String, required: true },
+  context: { type: String, required: true },
   label: { type: String, required: true },
-  orientation: { type: String, required: true },
   color: { type: String, required: false, default: "default" },
   bundle: { type: String, required: false, default: "" },
   icon: { type: null, required: false, default: void 0 },
@@ -58,9 +40,6 @@ const props = defineProps({
 const el = ref(null);
 const favorites = storage.use("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);

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

@@ -1,9 +1,8 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
-import type { AddListOrientation } from '#blokkli/types';
 declare const _default: import("vue").DefineComponent<{
     id: string;
+    context: string;
     label: string;
-    orientation: AddListOrientation;
     color?: "rose" | "lime" | "default" | "yellow" | "accent";
     bundle?: string;
     icon?: BlokkliIcon;
@@ -13,8 +12,8 @@ declare const _default: import("vue").DefineComponent<{
     getElement: () => HTMLElement | null;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     id: string;
+    context: string;
     label: string;
-    orientation: AddListOrientation;
     color?: "rose" | "lime" | "default" | "yellow" | "accent";
     bundle?: string;
     icon?: BlokkliIcon;

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

@@ -2,11 +2,13 @@
   <Teleport to="#bk-canvas-overlay">
     <canvas
       id="bk-animation-canvas-webgl"
+      :key="animation.canvasKey.value"
       ref="canvasEl"
       :style
       @click.capture="onClick"
       @pointerdown.capture="onPointerDown"
       @pointerup.capture="onPointerUp"
+      @pointermove="onPointerMove"
     />
   </Teleport>
 </template>
@@ -27,7 +29,6 @@ import {
   ref,
   computed,
   useBlokkli,
-  onMounted,
   watch,
   useTemplateRef,
   onBeforeUnmount
@@ -44,6 +45,7 @@ const {
   runtimeConfig,
   blocks
 } = useBlokkli();
+let handlePointerMove = false;
 const cursor = computed(
   () => state.isLoading.value ? "wait" : animation.cursor.value
 );
@@ -124,6 +126,9 @@ function toDraggableExisting(v) {
   });
 }
 function onPointerMove(e) {
+  if (!handlePointerMove) {
+    return;
+  }
   if (keyboard.isPressingSpace.value || e.buttons === MOUSE_BUTTONS.AUXILIARY) {
     return;
   }
@@ -197,7 +202,7 @@ function onPointerDown(e) {
   if (state.isLoading.value) {
     return;
   }
-  canvasEl.value?.addEventListener("pointermove", onPointerMove);
+  handlePointerMove = true;
   if (e.pointerType === "touch") {
     return onTouchStart(e);
   }
@@ -228,7 +233,7 @@ function isClickInArtboard(coords) {
   return isInsideRect(coords.x, coords.y, rect);
 }
 function onPointerUp(e) {
-  canvasEl.value?.removeEventListener("pointermove", onPointerMove);
+  handlePointerMove = false;
   if (e.button === MOUSE_BUTTON.AUXILIARY) {
     e.preventDefault();
     return;
@@ -427,72 +432,22 @@ function onClick(e) {
   e.stopPropagation();
 }
 const canvasEl = useTemplateRef("canvasEl");
-const canvasAttributes = computed(() => {
-  return {
-    width: ui.viewport.value.width * animation.dpi.value,
-    height: ui.viewport.value.height * animation.dpi.value
-  };
-});
-let gl = null;
-function initGl() {
-  if (!canvasEl.value) {
-    return;
-  }
-  gl = animation.gl();
-  canvasEl.value.width = canvasAttributes.value.width;
-  canvasEl.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);
-  gl.viewport(0, 0, canvasAttributes.value.width, canvasAttributes.value.height);
-  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: Math.max(ui.visibleViewport.value.width * dpi, 1),
-    height: Math.max(ui.visibleViewport.value.height * dpi, 1)
-  };
-});
-function setScissor(v) {
-  if (!gl) {
-    return;
-  }
-  gl.scissor(v.x, v.y, v.width, v.height);
-}
-watch(scissor, setScissor);
-let lastCanvasWidth = 0;
-let lastCanvasHeight = 0;
-onBlokkliEvent("animationFrame", () => {
-  if (!canvasEl.value) {
-    return;
-  }
-  const canvasWidth = canvasAttributes.value.width;
-  const canvasHeight = canvasAttributes.value.height;
-  if (canvasWidth !== lastCanvasWidth || canvasHeight !== lastCanvasHeight) {
-    canvasEl.value.width = canvasWidth;
-    canvasEl.value.height = canvasHeight;
-    if (gl) {
-      gl.viewport(0, 0, canvasWidth, canvasHeight);
+watch(
+  canvasEl,
+  (newCanvas, oldCanvas) => {
+    if (oldCanvas) {
+      handlePointerMove = false;
+      animation.removeCanvasElement();
     }
-    lastCanvasWidth = canvasWidth;
-    lastCanvasHeight = canvasHeight;
-  }
-});
-onMounted(() => {
-  initGl();
-});
+    if (newCanvas) {
+      animation.setCanvasElement(newCanvas);
+      animation.requestDraw();
+    }
+  },
+  { immediate: true }
+);
 onBeforeUnmount(() => {
-  if (canvasEl.value) {
-    canvasEl.value.removeEventListener("pointermove", onPointerMove);
-  }
+  animation.removeCanvasElement();
+  handlePointerMove = false;
 });
 </script>

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

@@ -0,0 +1,39 @@
+<template>
+  <button
+    :id="'bk-menu-list-button-' + id"
+    class="bk-menu-list-button"
+    :disabled="disabled"
+    :class="type ? 'bk-is-' + type : ''"
+    @click.prevent.stop="onClick"
+  >
+    <div class="bk-menu-list-icon">
+      <slot>
+        <Icon v-if="icon" :name="icon" />
+      </slot>
+    </div>
+    <strong>{{ title }}</strong>
+    <span>{{ description }}</span>
+  </button>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/components";
+defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  description: { type: String, required: true },
+  disabled: { type: Boolean, required: false },
+  icon: { type: null, required: false },
+  type: { type: String, required: false }
+});
+const emit = defineEmits(["click"]);
+function onClick() {
+  emit("click");
+}
+</script>
+
+<script>
+export default {
+  name: "MenuButton"
+};
+</script>

package/dist/runtime/{blokkliPlugins/MenuButton/index.vue.d.ts → components/Edit/AppMenu/MenuButton.vue.d.ts}

@@ -6,8 +6,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     disabled?: boolean;
     icon?: BlokkliIcon;
     type?: "success" | "danger" | "yellow";
-    weight?: number;
-    secondary?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
@@ -17,8 +15,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     disabled?: boolean;
     icon?: BlokkliIcon;
     type?: "success" | "danger" | "yellow";
-    weight?: number;
-    secondary?: boolean;
 }> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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

@@ -1,53 +1,75 @@
 <template>
-  <Teleport to="#bk-toolbar-menu">
-    <div class="bk-toolbar-menu">
-      <button class="bk-toolbar-menu-button" @click.prevent.stop="onClick">
-        <Icon name="menu" />
+  <BlokkliTransition name="menu">
+    <div v-if="menuOpen" class="bk bk-menu-list">
+      <button :class="{ 'bk-is-active': menuOpen }" @click="closeMenu">
+        <Icon name="close" />
       </button>
-    </div>
-  </Teleport>
-  <Teleport to="body">
-    <BlokkliTransition name="fade">
-      <div
-        v-if="menuOpen"
-        class="bk bk-menu-overlay bk-overlay"
-        @click="ui.menu.close()"
-      />
-    </BlokkliTransition>
-    <BlokkliTransition name="menu">
-      <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 class="bk-menu-list-inner">
+        <div id="bk-menu-primary">
+          <MenuButton
+            v-for="button in primaryButtons"
+            :id="button.id"
+            :key="button.id"
+            :title="button.title"
+            :description="button.description"
+            :icon="button.icon"
+            :type="button.type"
+            :disabled="button.disabled"
+            @click="onClick(button)"
+          />
+        </div>
+        <div id="bk-menu-secondary">
+          <MenuButton
+            v-for="button in secondaryButtons"
+            :id="button.id"
+            :key="button.id"
+            :title="button.title"
+            :description="button.description"
+            :icon="button.icon"
+            :type="button.type"
+            :disabled="button.disabled"
+            @click="onClick(button)"
+          />
         </div>
+        <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>
-    </BlokkliTransition>
-  </Teleport>
+    </div>
+  </BlokkliTransition>
 </template>
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
 import { Icon, BlokkliTransition } from "#blokkli/components";
 import { blokkliVersion } from "#blokkli-build/config";
-const { ui, eventBus } = useBlokkli();
-const menuOpen = computed(() => ui.menu.isOpen.value);
-const onClick = () => {
-  eventBus.emit("select", "");
-  ui.menu.open();
-};
+import MenuButton from "./MenuButton.vue";
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const DIALOG_MENU = "menu";
+const { ui, plugins } = useBlokkli();
+const menuOpen = computed(() => ui.currentDialog.value?.id === DIALOG_MENU);
+function closeMenu() {
+  ui.closeDialog(DIALOG_MENU);
+}
+onBlokkliEvent("overlay:close", closeMenu);
+const allButtons = computed(() => plugins.get("menuButton"));
+const primaryButtons = computed(() => {
+  return allButtons.value.filter((button) => !button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
+});
+const secondaryButtons = computed(() => {
+  return allButtons.value.filter((button) => button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
+});
+function onClick(button) {
+  button.callback();
+  closeMenu();
+}
 </script>
 
 <script>