@blokkli/editor 2.0.0-alpha.28 → 2.0.0-alpha.29

package/dist/runtime/editor/events/index.d.ts

@@ -0,0 +1,228 @@
+import { type Emitter } from 'mitt';
+import type { UpdateBlockOptionEvent } from '../features/options/types.js';
+import type { Coord, Size } from '../types/geometry.js';
+import type { MutatedField } from '../types/state.js';
+import type { DraggableExistingBlock, DraggableItem } from '../types/draggable.js';
+import type { InteractionMode, Message } from '../types/ui.js';
+import type { BlokkliFieldElement, BlokkliItemHost, RenderedFieldListItem } from '../types/field.js';
+export type SelectStartEvent = {
+    uuids: string[];
+    mode: InteractionMode;
+};
+export type ScrollIntoViewEvent = {
+    uuid: string;
+    center?: boolean;
+    immediate?: boolean;
+} | {
+    element: HTMLElement;
+    center?: boolean;
+    immediate?: boolean;
+    highlight?: boolean;
+};
+export type KeyPressedEvent = {
+    code: string;
+    meta: boolean;
+    shift: boolean;
+    originalEvent: KeyboardEvent;
+};
+export type PluginMountEvent = {
+    type: 'ItemDropdown';
+    id: string;
+};
+export type PluginUnmountEvent = {
+    type: 'ItemDropdown';
+    id: string;
+};
+export type EditableFieldFocusEvent = {
+    fieldName: string;
+    uuid?: string;
+};
+export type EditableFieldUpdateEvent = {
+    name: string;
+    entityUuid: string;
+    value: string;
+};
+export type UiResizedEvent = {
+    width: number;
+    height: number;
+};
+export type AnimateElementMode = 'leave' | 'enter';
+export type BlockAppendEvent = {
+    bundle: string;
+    host: BlokkliItemHost;
+    afterUuid: string | null;
+};
+export type CanvasDrawEvent = {
+    mouseX: number;
+    mouseY: number;
+    mouseArtboard: Coord;
+    artboardOffset: Coord;
+    artboardScale: number;
+    artboardSize: Size;
+    time: number;
+    selectedUuids: string[];
+    dpi: number;
+};
+export type DropClipboardItemEvent = {
+    id: string;
+    blockBundle: string;
+    host: BlokkliItemHost;
+    afterUuid: string | null;
+};
+export type AnimatorAddEvent = {
+    id: string;
+    mode: AnimateElementMode;
+    height?: number;
+};
+export type MoveBlockEvent = {
+    afterUuid: string | null;
+    item: DraggableExistingBlock;
+    host: BlokkliItemHost;
+};
+type AnimationFrameFieldArea = {
+    key: string;
+    name: string;
+    label: string;
+    isNested: boolean;
+    rect: DOMRect;
+    isVisible: boolean;
+};
+export type AnimationFrameEvent = {
+    fieldAreas: AnimationFrameFieldArea[];
+    mouseX: number;
+    mouseY: number;
+    time: number;
+};
+export type AnimationFrameBeforeEvent = {
+    time: number;
+    mouseX: number;
+    mouseY: number;
+};
+export type MoveMultipleBlocksEvent = {
+    afterUuid: string | null;
+    uuids: string[];
+    host: BlokkliItemHost;
+};
+export type AddNewBlockEvent = {
+    bundle: string;
+    host: BlokkliItemHost;
+    afterUuid: string | null;
+};
+export type UpdateMutatedFieldsEvent = {
+    fields: MutatedField[];
+};
+type MultiSelectStartEvent = {
+    x: number;
+    y: number;
+};
+export type DraggableStartEvent = {
+    items: DraggableItem[];
+    coords: Coord;
+    mode: InteractionMode;
+};
+export type DropTargetEvent = {
+    items: DraggableItem[];
+    field: BlokkliFieldElement;
+    host: BlokkliItemHost;
+    preceedingUuid: string | null;
+};
+export type GlobalPointerEvent = {
+    /**
+     * The interaction mode.
+     */
+    type: InteractionMode;
+    /**
+     * The viewport relative x coordinate.
+     */
+    x: number;
+    /**
+     * The viewport relative y coordinate.
+     */
+    y: number;
+    /**
+     * The total distance travelled.
+     */
+    distance: number;
+};
+export type GlobalPointerUpEvent = GlobalPointerEvent & {
+    /**
+     * The total duration in miliseconds from the first click or touch to
+     * the last click or touch.
+     */
+    duration: number;
+};
+export interface EventbusEvents {
+    select: string | string[];
+    'select:unselect': undefined;
+    'select:force': string | string[];
+    'select:host': undefined;
+    'select:host:unselect': undefined;
+    'multi-select:start': MultiSelectStartEvent;
+    'dragging:start': DraggableStartEvent;
+    'dragging:drop': DropTargetEvent;
+    'dragging:end': undefined;
+    'add:block:new': AddNewBlockEvent;
+    updateMutatedFields: UpdateMutatedFieldsEvent;
+    animationFrame: AnimationFrameEvent;
+    message: Message;
+    keyPressed: KeyPressedEvent;
+    editEntity: undefined;
+    reloadState: undefined;
+    reloadEntity: (() => void) | undefined;
+    'select:start': SelectStartEvent;
+    'select:toggle': string;
+    'select:shiftToggle': string;
+    'select:end': string[] | undefined;
+    'overlay:close': undefined;
+    'item:dropped': undefined;
+    'block:append': BlockAppendEvent;
+    'item:doubleClick': RenderedFieldListItem;
+    scrollIntoView: ScrollIntoViewEvent;
+    'animationFrame:before': AnimationFrameBeforeEvent;
+    'animationFrame:after': undefined;
+    'canvas:draw': CanvasDrawEvent;
+    'state:reload:before': undefined;
+    'state:reloaded': undefined;
+    'option:update': UpdateBlockOptionEvent;
+    /**
+     * Emitted after finishing changing options.
+     */
+    'option:finish-change': undefined;
+    'plugin:mount': PluginMountEvent;
+    'plugin:unmount': PluginUnmountEvent;
+    'editable:focus': EditableFieldFocusEvent;
+    'editable:update': EditableFieldUpdateEvent;
+    'editable:save': undefined;
+    'drop:clipboardItem': DropClipboardItemEvent;
+    'sidebar:close': undefined;
+    'sidebar:open': string;
+    'action:selected': undefined;
+    'animator:add': AnimatorAddEvent;
+    'ui:resized': undefined;
+    'add-list:change': undefined;
+    'window:clickAway': undefined;
+    'mouse:down': GlobalPointerEvent;
+    'mouse:move': GlobalPointerEvent;
+    'mouse:up': GlobalPointerUpEvent;
+    /**
+     * Emitted when a view option is being toggled.
+     */
+    'view-option:toggle': {
+        id: string;
+    };
+}
+type EventbusEventsType = {
+    [K in keyof EventbusEvents]: EventbusEvents[K];
+};
+export declare const eventBus: Emitter<EventbusEventsType>;
+export type Eventbus = Emitter<EventbusEventsType>;
+export type BlokkliEventBus = Emitter<EventbusEventsType>;
+export declare const emitMessage: (message: string, type?: "success" | "error" | "warning", additional?: string | Error | unknown, replace?: boolean) => void;
+type FrameEventBusEvents = {
+    selectItems: string[];
+    mutatedFields: MutatedField[];
+    focus: string;
+    updateOption: UpdateBlockOptionEvent;
+};
+export declare const frameEventBus: Emitter<FrameEventBusEvents>;
+export {};

package/dist/runtime/editor/events/index.js

@@ -0,0 +1,6 @@
+import mitt from "mitt";
+export const eventBus = mitt();
+export const emitMessage = (message, type = "success", additional, replace) => {
+  eventBus.emit("message", { type, message, additional, replace });
+};
+export const frameEventBus = mitt();

package/dist/runtime/editor/features/add-list/Actions/Action.d.vue.ts

@@ -0,0 +1,8 @@
+import type { AddAction } from '#blokkli/editor/types/actions';
+type __VLS_Props = {
+    action: AddAction;
+    selectableBundles: string[];
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/add-list/Actions/Action.vue

@@ -0,0 +1,53 @@
+<template>
+  <AddListItem
+    :id="action.id"
+    ref="item"
+    :key="action.id"
+    class="bk-is-action"
+    context="add-list-actions"
+    :label="action.title"
+    :bundle="action.itemBundle"
+    :icon="action.icon"
+    :color="action.color"
+    :disabled
+    no-context-menu
+  />
+</template>
+
+<script setup>
+import { AddListItem } from "#blokkli/editor/components";
+import { computed, useTemplateRef, useBlokkli } from "#imports";
+import { defineTourItem } from "#blokkli/editor/composables";
+const props = defineProps({
+  action: { type: Object, required: true },
+  selectableBundles: { type: Array, required: true }
+});
+const { selection } = useBlokkli();
+const item = useTemplateRef("item");
+const bundleDisabled = computed(() => {
+  if (props.action.itemBundle) {
+    return !props.selectableBundles.includes(props.action.itemBundle);
+  }
+  return false;
+});
+const disabled = computed(() => {
+  if (bundleDisabled.value) {
+    return true;
+  }
+  if (props.action.enabled && selection.item.value) {
+    return !props.action.enabled(selection.item.value);
+  }
+  return false;
+});
+defineTourItem(() => {
+  if (!props.action.description) {
+    return;
+  }
+  return {
+    id: "plugin:add_action:" + props.action.id,
+    title: props.action.title,
+    text: props.action.description,
+    element: () => item.value?.getElement()
+  };
+});
+</script>

package/dist/runtime/editor/features/add-list/Actions/Action.vue.d.ts

@@ -0,0 +1,8 @@
+import type { AddAction } from '#blokkli/editor/types/actions';
+type __VLS_Props = {
+    action: AddAction;
+    selectableBundles: string[];
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/add-list/Actions/index.d.vue.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    selectableBundles: string[];
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/add-list/Actions/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <Sortli id="blokkli-add-list-actions" :build-item="buildItemAction">
+    <ActionButton
+      v-for="action in actions"
+      :key="action.id"
+      :action="action"
+      :selectable-bundles
+    />
+  </Sortli>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Sortli } from "#blokkli/editor/components";
+import ActionButton from "./Action.vue";
+defineProps({
+  selectableBundles: { type: Array, required: true }
+});
+const { plugins } = useBlokkli();
+const actions = computed(() => {
+  return plugins.get("addAction");
+});
+function buildItemAction(element) {
+  const actionType = element.dataset.sortliId;
+  if (!actionType) {
+    return;
+  }
+  const itemBundle = element.dataset.itemBundle;
+  const action = actions.value.find((v) => v.id === actionType);
+  if (!action) {
+    return;
+  }
+  return {
+    itemType: "action",
+    action,
+    actionType,
+    itemBundle,
+    element: () => element
+  };
+}
+</script>

package/dist/runtime/editor/features/add-list/Actions/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    selectableBundles: string[];
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/add-list/Blocks/index.d.vue.ts

@@ -0,0 +1,12 @@
+import type { BlockBundleDefinition } from '#blokkli/editor/types/definitions';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    hideDisabledBlocks?: boolean;
+    selectableBundles: string[];
+    generallyAvailableBundles: BlockBundleDefinition[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    hideDisabledBlocks?: boolean;
+    selectableBundles: string[];
+    generallyAvailableBundles: BlockBundleDefinition[];
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/add-list/Blocks/index.vue

@@ -0,0 +1,274 @@
+<template>
+  <Sortli v-if="shouldRender" id="blokkli-add-list-blocks" :build-item>
+    <AddListItem
+      v-for="type in sortedList"
+      v-show="type.isVisible"
+      :id="type.id"
+      :key="type.id"
+      context="add-list-blocks"
+      :label="type.label"
+      :bundle="type.id"
+      :disabled="type.isDisabled"
+      :color="type.isFavorite ? 'yellow' : 'default'"
+      data-element-type="new"
+      :data-item-bundle="type.id"
+    />
+  </Sortli>
+
+  <PluginTourItem
+    v-if="shouldRender"
+    id="block-add-list"
+    :title="$t('blockAddListTourTitle', 'Favorite blocks')"
+    :text="
+  $t(
+    'blockAddListTourText',
+    'Right-click on a block to add or remove them from your favorites. Favorites are highlighted and always displayed at the top of the list.'
+  )
+"
+    selector="#blokkli-add-list-blocks"
+  />
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli } from "#imports";
+import { AddListItem, Sortli } from "#blokkli/editor/components";
+import { isInternalBundle } from "#blokkli/editor/helpers/bundles";
+import { PluginTourItem } from "#blokkli/editor/plugins";
+import { getFieldKey } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
+import { defineCommands } from "#blokkli/editor/composables";
+const props = defineProps({
+  hideDisabledBlocks: { type: Boolean, required: false },
+  selectableBundles: { type: Array, required: true },
+  generallyAvailableBundles: { type: Array, required: true }
+});
+const {
+  selection,
+  storage,
+  types,
+  context,
+  ui,
+  eventBus,
+  $t,
+  state,
+  definitions,
+  blocks
+} = useBlokkli();
+function buildItem(element) {
+  const itemBundle = element.dataset.sortliId;
+  if (!itemBundle) {
+    return;
+  }
+  return {
+    itemType: "new",
+    itemBundle,
+    element: () => element
+  };
+}
+const shouldRender = computed(() => state.editMode.value === "editing");
+const searchText = ref("");
+const favorites = storage.use("blockFavorites", []);
+function determineVisibility(bundle, label) {
+  if (ui.isMobile.value && !props.selectableBundles.includes(bundle)) {
+    return false;
+  }
+  if (searchText.value && !label.toLowerCase().includes(searchText.value.toLowerCase())) {
+    return false;
+  }
+  const definition = definitions.getDefaultDefinition(bundle);
+  if (definition?.editor?.maxInstances) {
+    const existingInstancesOfBundle = state.getBlockBundleCount(bundle);
+    return existingInstancesOfBundle < definition.editor.maxInstances;
+  }
+  return true;
+}
+const sortedList = computed(() => {
+  return [...props.generallyAvailableBundles].filter((v) => !isInternalBundle(v.id)).map((v) => {
+    const isVisible = determineVisibility(v.id, v.label);
+    const isDisabled = !v.id || !props.selectableBundles.includes(v.id);
+    return {
+      ...v,
+      isDisabled,
+      isVisible: isVisible && (!props.hideDisabledBlocks || !isDisabled),
+      isFavorite: favorites.value.includes(v.id)
+    };
+  }).sort((a, b) => {
+    if (a.isFavorite && !b.isFavorite) return -1;
+    if (!a.isFavorite && b.isFavorite) return 1;
+    return a.label.localeCompare(b.label);
+  });
+});
+const getBundlesForAppendCommands = () => {
+  const item = selection.item.value;
+  if (!item) {
+    return [];
+  }
+  const field = types.getFieldConfig(
+    item.host.type,
+    item.host.bundle,
+    item.host.fieldName
+  );
+  if (field) {
+    if (field.cardinality !== -1) {
+      const key = getFieldKey(item.host.uuid, item.host.fieldName);
+      const count = state.getFieldBlockCount(key);
+      if (count >= field.cardinality) {
+        return [];
+      }
+    }
+    return field.allowedBundles.filter((v) => !isInternalBundle(v));
+  }
+  return [];
+};
+const getAppendEndCommands = () => {
+  if (selection.items.value.length !== 0) {
+    return [];
+  }
+  return types.fieldConfig.forEntityTypeAndBundle(
+    context.value.entityType,
+    context.value.entityBundle
+  ).flatMap((field) => {
+    if (field.cardinality !== -1) {
+      const key = getFieldKey(context.value.entityUuid, field.name);
+      const count = state.getFieldBlockCount(key);
+      if (count >= field.cardinality) {
+        return [];
+      }
+    }
+    return field.allowedBundles.filter((v) => !isInternalBundle(v)).map((bundle) => {
+      const definition = types.getBlockBundleDefinition(bundle);
+      return {
+        id: "block_add_list:append_end:" + bundle + field.name,
+        label: $t(
+          "addBlockCommand.appendInField",
+          'Append "@block" in "@field"'
+        ).replace("@block", definition?.label || bundle).replace("@field", field.label),
+        group: "add",
+        bundle,
+        callback: () => commandCallbackAppendEnd(bundle, field.name)
+      };
+    });
+  });
+};
+const commandCallbackAppendEnd = (bundle, fieldName) => {
+  const field = state.mutatedFields.value.find(
+    (v) => v.name === fieldName && v.entityType === context.value.entityType && v.entityUuid === context.value.entityUuid
+  );
+  if (!field) {
+    return;
+  }
+  const afterUuid = field.list[field.list.length - 1]?.uuid || void 0;
+  eventBus.emit("block:append", {
+    bundle,
+    afterUuid: afterUuid ?? null,
+    host: {
+      type: context.value.entityType,
+      uuid: context.value.entityUuid,
+      fieldName
+    }
+  });
+};
+const commandCallbackInsert = (bundle, fieldName, hostType, hostUuid) => {
+  const field = state.mutatedFields.value.find(
+    (v) => v.name === fieldName && v.entityType === hostType && v.entityUuid === hostUuid
+  );
+  const afterUuid = field ? field.list[field.list.length - 1]?.uuid : void 0;
+  eventBus.emit("block:append", {
+    bundle,
+    afterUuid: afterUuid ?? null,
+    host: {
+      type: hostType,
+      uuid: hostUuid,
+      fieldName
+    }
+  });
+};
+const getInsertCommands = (block) => {
+  if (!block) {
+    return [];
+  }
+  const nestedFields = types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.bundle).map((field) => {
+    return {
+      ...field,
+      uuid: block.uuid
+    };
+  });
+  const commands = nestedFields.flatMap(
+    (field) => {
+      return field.allowedBundles.map((bundle) => {
+        const label = types.getBlockBundleDefinition(bundle)?.label || bundle;
+        return {
+          id: "block_add_list:insert:" + field.name + ":" + bundle,
+          label: $t(
+            "addBlockCommand.insertInField",
+            'Insert "@block" into "@field"'
+          ).replace("@block", label).replace("@field", field.label),
+          group: "add",
+          bundle,
+          callback: () => commandCallbackInsert(
+            bundle,
+            field.name,
+            field.entityType,
+            field.uuid
+          )
+        };
+      });
+    }
+  );
+  if (block.host.type === itemEntityType) {
+    const parentBlock = blocks.getBlock(block.host.uuid);
+    if (parentBlock) {
+      getInsertCommands(parentBlock).forEach((parentCommand) => {
+        commands.push(parentCommand);
+      });
+    }
+  }
+  return commands;
+};
+const commandCallbackAppend = (bundle) => {
+  const block = selection.items.value[0];
+  if (!block) {
+    return;
+  }
+  eventBus.emit("block:append", {
+    bundle,
+    afterUuid: selection.uuids.value[0],
+    host: {
+      type: block.host.type,
+      uuid: block.host.uuid,
+      fieldName: block.host.fieldName
+    }
+  });
+};
+const getAppendCommands = () => {
+  return getBundlesForAppendCommands().map((bundle) => {
+    const definition = types.getBlockBundleDefinition(bundle);
+    return {
+      id: "block_add_list:append:" + bundle,
+      label: $t("addBlockCommand.appendRoot", 'Append "@block"').replace(
+        "@block",
+        definition?.label || bundle
+      ),
+      group: "add",
+      bundle,
+      callback: () => commandCallbackAppend(bundle)
+    };
+  });
+};
+defineCommands(() => {
+  if (state.editMode.value !== "editing") {
+    return;
+  }
+  return [
+    ...getAppendCommands(),
+    ...getInsertCommands(selection.items.value[0]),
+    ...getAppendEndCommands()
+  ];
+});
+</script>
+
+<script>
+export default {
+  name: "AddListBlocks"
+};
+</script>

package/dist/runtime/editor/features/add-list/Blocks/index.vue.d.ts

@@ -0,0 +1,12 @@
+import type { BlockBundleDefinition } from '#blokkli/editor/types/definitions';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    hideDisabledBlocks?: boolean;
+    selectableBundles: string[];
+    generallyAvailableBundles: BlockBundleDefinition[];
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    hideDisabledBlocks?: boolean;
+    selectableBundles: string[];
+    generallyAvailableBundles: BlockBundleDefinition[];
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/features/add-list/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;