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

package/dist/runtime/components/Edit/Features/Selection/AddButtons/index.vue

@@ -1,392 +0,0 @@
-<template>
-  <Teleport to="#bk-canvas-overlay">
-    <BlokkliTransition name="caret-tooltip">
-      <Overlay
-        v-if="addData"
-        :key="addData.key"
-        :bundles="addData.allowedBundles"
-        :anchor-el="addData.anchorEl"
-        :anchor-coordinates="addData.anchorCoordinates"
-        :label="addData.label"
-        @select="onSelectBundle"
-        @close="closeOverlay"
-        @action="onSelectAction"
-      />
-    </BlokkliTransition>
-  </Teleport>
-
-  <ErrorBoundary v-model="isLocked" label="Add Buttons">
-    <Renderer
-      v-if="!isLocked"
-      :key="animation.renderKey.value"
-      @toggle="onRendererToggle"
-      @toggle-field="onRendererToggleField"
-    />
-  </ErrorBoundary>
-</template>
-
-<script setup>
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { computed, useBlokkli, ref, watch } from "#imports";
-import { BlokkliTransition, ErrorBoundary } from "#blokkli/components";
-import {
-  getChildrenOrientation,
-  getGapSize,
-  MIN_GAP,
-  determineCanAddChildren
-} from "#blokkli/helpers/dropTargets";
-import Overlay from "./Overlay/index.vue";
-import { renderCycle } from "#blokkli/helpers/renderCycle";
-import { getFieldKey } from "#blokkli/helpers";
-import { isInternalBundle } from "#blokkli/helpers/bundles";
-import Renderer from "./Renderer/index.vue";
-import { itemEntityType } from "#blokkli-build/config";
-const props = defineProps({
-  items: { type: Array, required: true }
-});
-const { dom, state, eventBus, types, $t, blocks, fields, animation } = useBlokkli();
-const isLocked = ref(false);
-const shouldRender = computed(() => {
-  return props.items.length === 1;
-});
-const block = computed(() => {
-  if (props.items.length === 1) {
-    return props.items[0] ?? null;
-  }
-  return null;
-});
-const uuid = computed(() => {
-  return block.value?.uuid ?? null;
-});
-const emptyBlockFields = computed(() => {
-  if (!block.value) {
-    return [];
-  }
-  const uuid2 = block.value.uuid;
-  return types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.value.bundle).map((field) => {
-    const key = getFieldKey(uuid2, field.name);
-    const count = state.getFieldBlockCount(key);
-    return {
-      key,
-      count,
-      name: field.name
-    };
-  }).filter((v) => {
-    return v.count === 0;
-  });
-});
-const containerStyle = ref({ visibility: "hidden" });
-const orientationClass = ref("");
-const containerRect = ref(null);
-const fieldButtonSlots = ref([]);
-const bundleLabel = computed(() => {
-  if (!block.value) {
-    return "";
-  }
-  return types.getBlockBundleDefinition(block.value.bundle)?.label || block.value.bundle;
-});
-const allowedBundlesForField = computed(() => {
-  if (!block.value) {
-    return [];
-  }
-  const blockData = blocks.getBlock(block.value.uuid);
-  if (!blockData) {
-    return [];
-  }
-  const field = fields.find(blockData.host.uuid, blockData.host.fieldName);
-  if (!field) {
-    return [];
-  }
-  return field.allowedBundles.filter((bundle) => !isInternalBundle(bundle));
-});
-const singleAllowedBundleLabel = computed(() => {
-  if (allowedBundlesForField.value.length === 1) {
-    const bundle = allowedBundlesForField.value[0];
-    if (bundle) {
-      return types.getBlockBundleDefinition(bundle)?.label || bundle;
-    }
-  }
-  return null;
-});
-const beforeTooltip = computed(() => {
-  if (singleAllowedBundleLabel.value) {
-    return $t("addButtonBundleBefore", 'Add "@bundle" before').replace(
-      "@bundle",
-      singleAllowedBundleLabel.value
-    );
-  }
-  return $t("addButtonBeforeBundle", "Add before...");
-});
-const afterTooltip = computed(() => {
-  if (singleAllowedBundleLabel.value) {
-    return $t("addButtonBundleAfter", 'Add "@bundle" after').replace(
-      "@bundle",
-      singleAllowedBundleLabel.value
-    );
-  }
-  return $t("addButtonAfterBundle", "Add after...");
-});
-const fieldTooltips = computed(() => {
-  if (!block.value || !bundleLabel.value) {
-    return [];
-  }
-  return emptyBlockFields.value.map((field) => {
-    const fieldConfig = types.fieldConfig.forEntityTypeAndBundle(itemEntityType, block.value.bundle).find((f) => f.name === field.name);
-    const fieldLabel = fieldConfig?.label || field.name;
-    const fieldElement = fields.find(block.value.uuid, field.name);
-    if (fieldElement) {
-      const allowedBundles = fieldElement.allowedBundles.filter(
-        (bundle) => !isInternalBundle(bundle)
-      );
-      if (allowedBundles.length === 1) {
-        const bundle = allowedBundles[0];
-        if (bundle) {
-          const singleBundleLabel = types.getBlockBundleDefinition(bundle)?.label || bundle;
-          return $t(
-            "addButtonBundleInsideField",
-            'Add "@bundle" inside @parentBundle \xBB @fieldLabel'
-          ).replace("@bundle", singleBundleLabel).replace("@parentBundle", bundleLabel.value).replace("@fieldLabel", fieldLabel);
-        }
-      }
-    }
-    return $t(
-      "addButtonInsideField",
-      "Add inside @parentBundle \xBB @fieldLabel..."
-    ).replace("@parentBundle", bundleLabel.value).replace("@fieldLabel", fieldLabel);
-  });
-});
-watch(emptyBlockFields, (fields2) => {
-  const neededCount = fields2.length;
-  while (fieldButtonSlots.value.length < neededCount) {
-    fieldButtonSlots.value.push({ fieldKey: void 0 });
-  }
-  for (let i = 0; i < fieldButtonSlots.value.length; i++) {
-    const slot = fieldButtonSlots.value[i];
-    if (!slot) {
-      continue;
-    }
-    if (i < fields2.length) {
-      const field = fields2[i];
-      slot.fieldKey = field?.key;
-    } else {
-      slot.fieldKey = void 0;
-    }
-  }
-});
-const addData = ref(null);
-function closeOverlay() {
-  addData.value = null;
-}
-function onSelectBundle(bundle) {
-  if (!addData.value) {
-    return;
-  }
-  eventBus.emit("block:append", {
-    bundle,
-    host: { ...addData.value.host },
-    afterUuid: addData.value.preceedingUuid
-  });
-  closeOverlay();
-}
-function onSelectAction(action) {
-  if (!addData.value) {
-    return;
-  }
-  action.callback({
-    field: addData.value.field,
-    preceedingUuid: addData.value.preceedingUuid,
-    host: { ...addData.value.host }
-  });
-  closeOverlay();
-}
-const cache = /* @__PURE__ */ new Map();
-function clearAllCache() {
-  cache.clear();
-  containerStyle.value = { visibility: "hidden" };
-  orientationClass.value = "";
-}
-function updateCache(uuid2) {
-  let cachedState = cache.get(uuid2);
-  if (!cachedState) {
-    const block2 = blocks.getBlock(uuid2);
-    if (!block2) {
-      return;
-    }
-    const field = fields.find(block2.host.uuid, block2.host.fieldName);
-    if (!field) {
-      return;
-    }
-    const orientation = getChildrenOrientation(field.element);
-    const gap = Math.max(getGapSize(orientation, field.element), MIN_GAP);
-    const fieldChildren = [...field.element.children];
-    const currentCount = state.getFieldBlockCount(field.key);
-    const canShow = determineCanAddChildren(
-      field,
-      fieldChildren,
-      [],
-      // Not moving any blocks, adding a new one
-      currentCount,
-      1,
-      // Adding 1 new block
-      []
-      // Don't know which bundle will be added
-    );
-    cachedState = {
-      orientation,
-      gap,
-      canShowBeforeAfter: canShow
-    };
-    cache.set(uuid2, cachedState);
-  }
-  orientationClass.value = cachedState.orientation === "vertical" ? "bk-is-vertical" : "bk-is-horizontal";
-}
-watch(
-  uuid,
-  async (newUuid) => {
-    closeOverlay();
-    if (!shouldRender.value) {
-      containerStyle.value = { visibility: "hidden" };
-      return;
-    }
-    if (newUuid) {
-      await renderCycle();
-      updateCache(newUuid);
-    }
-  },
-  { immediate: true }
-);
-onBlokkliEvent("animationFrame:after", () => {
-  if (!shouldRender.value || !uuid.value) {
-    containerStyle.value = { visibility: "hidden" };
-    containerRect.value = null;
-    return;
-  }
-  const cachedState = cache.get(uuid.value);
-  if (!cachedState) {
-    return;
-  }
-  const blockRect = dom.getBlockRect(uuid.value);
-  if (!blockRect) {
-    return;
-  }
-  if (blockRect.width === 0) {
-    containerStyle.value = { visibility: "hidden" };
-    containerRect.value = null;
-    return;
-  }
-  containerStyle.value = {
-    transform: `translate(${blockRect.x}px, ${blockRect.y}px)`,
-    width: `${blockRect.width}px`,
-    height: `${blockRect.height}px`,
-    "--gap": `${cachedState.gap}px`,
-    visibility: "visible"
-  };
-  containerRect.value = { x: blockRect.x, y: blockRect.y };
-});
-onBlokkliEvent("state:reloaded", () => {
-  clearAllCache();
-  if (shouldRender.value && uuid.value) {
-    updateCache(uuid.value);
-  }
-});
-function setAddData(key, field, label, preceedingUuid, anchorEl, anchorCoordinates) {
-  const allowedBundles = field.allowedBundles;
-  if (allowedBundles.length === 0) {
-    return;
-  }
-  const host = {
-    type: field.hostEntityType,
-    uuid: field.hostEntityUuid,
-    fieldName: field.name
-  };
-  if (allowedBundles.length === 1) {
-    const bundle = allowedBundles[0];
-    eventBus.emit("block:append", {
-      bundle,
-      host,
-      afterUuid: preceedingUuid
-    });
-    return;
-  }
-  addData.value = {
-    key,
-    allowedBundles,
-    preceedingUuid,
-    host,
-    anchorEl,
-    anchorCoordinates,
-    label,
-    field
-  };
-}
-function getPreceedingUuidBefore(uuid2, field) {
-  const children = [...field.element.children];
-  let prevUuid = void 0;
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i];
-    if (!child) {
-      continue;
-    }
-    const childUuid = child.dataset.bkUuid;
-    if (childUuid === uuid2) {
-      return prevUuid;
-    }
-    prevUuid = childUuid;
-  }
-  return void 0;
-}
-function onRendererToggle(data) {
-  const key = data.position;
-  if (addData.value?.key === key) {
-    return closeOverlay();
-  }
-  if (!uuid.value) {
-    return;
-  }
-  const cachedState = cache.get(uuid.value);
-  if (!cachedState) {
-    return;
-  }
-  const block2 = blocks.getBlock(uuid.value);
-  if (!block2) {
-    return;
-  }
-  const field = fields.find(block2.host.uuid, block2.host.fieldName);
-  if (!field) {
-    return;
-  }
-  if (!field.allowedBundles.length) {
-    return;
-  }
-  let preceedingUuid;
-  let label;
-  if (data.position === "before") {
-    preceedingUuid = getPreceedingUuidBefore(uuid.value, field);
-    label = beforeTooltip.value.replace("...", "");
-  } else {
-    preceedingUuid = uuid.value;
-    label = afterTooltip.value.replace("...", "");
-  }
-  setAddData(key, field, label, preceedingUuid, void 0, data.coordinates);
-}
-function onRendererToggleField(data) {
-  const key = "field:" + data.index;
-  if (addData.value?.key === key) {
-    return closeOverlay();
-  }
-  if (!uuid.value) {
-    return;
-  }
-  const emptyField = emptyBlockFields.value[data.index];
-  if (!emptyField) {
-    return;
-  }
-  const field = fields.find(uuid.value, emptyField.name);
-  if (!field) {
-    return;
-  }
-  const label = (fieldTooltips.value[data.index] || "").replace("...", "");
-  setAddData(key, field, label, void 0, void 0, data.coordinates);
-}
-onBlokkliEvent("dragging:start", closeOverlay);
-</script>

package/dist/runtime/components/Edit/Features/Selection/AddButtons/index.vue.d.ts

@@ -1,6 +0,0 @@
-import type { RenderedFieldListItem } from '#blokkli/types';
-type __VLS_Props = {
-    items: RenderedFieldListItem[];
-};
-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;

package/dist/runtime/components/Edit/Features/Selection/Renderer/index.vue

@@ -1,281 +0,0 @@
-<template>
-  <div />
-</template>
-
-<script setup>
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
-import { useBlokkli, computed } from "#imports";
-import {
-  setBuffersAndAttributes,
-  drawBufferInfo,
-  setUniforms
-} from "twgl.js";
-import vs from "./vertex.glsl?raw";
-import fs from "./fragment.glsl?raw";
-import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
-import { useTransitionedValue } from "#blokkli/helpers/composables/useTransitionedValue";
-import { toShaderColor } from "#blokkli/helpers";
-const props = defineProps({
-  blocks: { type: Array, required: true },
-  hasHostSelected: { type: Boolean, required: true }
-});
-const { animation, theme, dom, ui, state } = useBlokkli();
-class SelectionRectangleBufferCollector extends RectangleBufferCollector {
-  uuids = [];
-  lastCount = 0;
-  prevKey = "";
-  getBufferInfo(gl, force) {
-    const key = props.blocks.map((block) => {
-      const uuid = block.uuid;
-      const rect = dom.getBlockRect(uuid);
-      if (!rect) {
-        return uuid + "no_rect";
-      }
-      return uuid + rect.time;
-    }).join("_") + "_host_" + props.hasHostSelected;
-    const hasChanged = force || this.prevKey !== key;
-    if (hasChanged) {
-      this.reset();
-      this.lastCount = 0;
-      if (props.hasHostSelected) {
-        this.addRectangle(
-          {
-            id: "host",
-            height: ui.artboardSize.value.height,
-            width: ui.artboardSize.value.width,
-            x: 0,
-            y: 0,
-            radius: [0, 0, 0, 0],
-            isInverted: false,
-            isFromLibrary: false
-          },
-          3
-          // Type 3 = host selection
-        );
-        this.lastCount++;
-      }
-      for (let i = 0; i < props.blocks.length; i++) {
-        const block = props.blocks[i];
-        if (this.added.has(block.uuid)) {
-          continue;
-        }
-        this.added.add(block.uuid);
-        const el = dom.getDragElement(block);
-        const rect = dom.getBlockRect(block.uuid);
-        if (!rect || !el) {
-          continue;
-        }
-        const style = ui.lowPerformanceMode.value ? null : theme.getDraggableStyle(el);
-        const isFromLibrary = state.fromLibraryUuids.value.includes(block.uuid);
-        let type = 0;
-        if (isFromLibrary) {
-          type = 2;
-        } else if (style?.isInverted) {
-          type = 1;
-        }
-        this.addRectangle(
-          {
-            id: block.uuid,
-            height: rect.height,
-            width: rect.width,
-            x: rect.x,
-            y: rect.y,
-            radius: style?.radius ?? [0, 0, 0, 0],
-            isInverted: !!style?.isInverted,
-            isFromLibrary
-          },
-          type
-        );
-        this.lastCount++;
-      }
-      this.prevKey = key;
-    }
-    if (hasChanged && gl) {
-      this.bufferInfo = this.createBufferInfo(gl);
-    }
-    return { info: this.bufferInfo, hasChanged };
-  }
-}
-const hasTransformingStyle = computed(
-  () => ui.hasTransformOverlayOpen.value || ui.isTransforming.value
-);
-const selectionColorOverride = computed(() => {
-  const color = ui.selectionColor.value;
-  if (!color) {
-    return null;
-  }
-  if (color === "mono") {
-    return theme.getColor(color, "500");
-  } else if (color === "accent") {
-    return theme.getColor(color, "700");
-  }
-  return theme.getColor(color, "normal");
-});
-const getColorDefault = useTransitionedValue(() => {
-  if (selectionColorOverride.value) {
-    return selectionColorOverride.value;
-  }
-  if (hasTransformingStyle.value) {
-    return theme.orange.value.normal;
-  }
-  return theme.accent.value[600];
-});
-const getColorInverted = useTransitionedValue(() => {
-  if (selectionColorOverride.value) {
-    return selectionColorOverride.value;
-  }
-  if (hasTransformingStyle.value) {
-    return theme.orange.value.normal;
-  }
-  return [255, 255, 255];
-});
-const getColorLibrary = useTransitionedValue(() => {
-  if (selectionColorOverride.value) {
-    return selectionColorOverride.value;
-  }
-  if (hasTransformingStyle.value) {
-    return theme.orange.value.normal;
-  }
-  return theme.lime.value.normal;
-});
-const getColorHost = useTransitionedValue(() => {
-  return theme.mono.value[700];
-});
-const getTransforming = useTransitionedValue(() => {
-  return ui.isTransforming.value ? 1 : 0;
-});
-const { collector } = defineRenderer("selection-overlay", {
-  zIndex: 100,
-  collector: () => new SelectionRectangleBufferCollector(),
-  program: () => ({ shaders: [vs, fs] }),
-  render: (ctx, gl, program) => {
-    gl.useProgram(program.program);
-    const { info } = collector.getBufferInfo(gl);
-    if (!info) {
-      return;
-    }
-    setUniforms(program, {
-      u_color_default: toShaderColor(getColorDefault()),
-      u_color_inverted: toShaderColor(getColorInverted()),
-      u_color_library: toShaderColor(getColorLibrary()),
-      u_color_host: toShaderColor(getColorHost()),
-      u_artboard_size: [
-        ui.artboardSize.value.width,
-        ui.artboardSize.value.height
-      ],
-      u_is_transforming: getTransforming(),
-      u_opacity: ctx.changeOptionsTransition,
-      u_time: ctx.time
-    });
-    animation.setSharedUniforms(gl, program);
-    setBuffersAndAttributes(gl, program, info);
-    drawBufferInfo(gl, info, gl.TRIANGLES);
-  },
-  renderFallback: (ctx, ctx2d) => {
-    collector.getBufferInfo();
-    const rects = Object.values(collector.rects);
-    if (rects.length === 0) {
-      return;
-    }
-    ctx2d.globalAlpha = ctx.changeOptionsTransition;
-    const rgbaToCss = (rgb) => {
-      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
-    };
-    const colorDefault = rgbaToCss(getColorDefault());
-    const colorInverted = rgbaToCss(getColorInverted());
-    const colorLibrary = rgbaToCss(getColorLibrary());
-    const colorHost = rgbaToCss(getColorHost());
-    const smoothstepValue = Math.max(
-      0,
-      Math.min(1, (ctx.artboardScale - 0.3) / 0.7)
-    );
-    const thickness = (0.5 + smoothstepValue * 2.5) * ctx.dpi;
-    for (let i = 0; i < rects.length; i++) {
-      const rect = rects[i];
-      let strokeColor = colorDefault;
-      if (rect.isFromLibrary) {
-        strokeColor = colorLibrary;
-      } else if (rect.isInverted) {
-        strokeColor = colorInverted;
-      } else if (rect.id === "host") {
-        strokeColor = colorHost;
-      }
-      ctx2d.strokeStyle = strokeColor;
-      ctx2d.lineWidth = thickness;
-      const viewportX = (rect.x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
-      const viewportY = (rect.y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
-      const viewportWidth = rect.width * ctx.artboardScale * ctx.dpi;
-      const viewportHeight = rect.height * ctx.artboardScale * ctx.dpi;
-      const maxRadius = Math.min(viewportWidth, viewportHeight) / 2;
-      const rtl = Math.min(
-        rect.radius[0] * ctx.artboardScale * ctx.dpi,
-        maxRadius
-      );
-      const rtr = Math.min(
-        rect.radius[1] * ctx.artboardScale * ctx.dpi,
-        maxRadius
-      );
-      const rbr = Math.min(
-        rect.radius[2] * ctx.artboardScale * ctx.dpi,
-        maxRadius
-      );
-      const rbl = Math.min(
-        rect.radius[3] * ctx.artboardScale * ctx.dpi,
-        maxRadius
-      );
-      ctx2d.beginPath();
-      ctx2d.moveTo(viewportX + rtl, viewportY);
-      ctx2d.lineTo(viewportX + viewportWidth - rtr, viewportY);
-      if (rtr > 0) {
-        ctx2d.arcTo(
-          viewportX + viewportWidth,
-          viewportY,
-          viewportX + viewportWidth,
-          viewportY + rtr,
-          rtr
-        );
-      }
-      ctx2d.lineTo(viewportX + viewportWidth, viewportY + viewportHeight - rbr);
-      if (rbr > 0) {
-        ctx2d.arcTo(
-          viewportX + viewportWidth,
-          viewportY + viewportHeight,
-          viewportX + viewportWidth - rbr,
-          viewportY + viewportHeight,
-          rbr
-        );
-      }
-      ctx2d.lineTo(viewportX + rbl, viewportY + viewportHeight);
-      if (rbl > 0) {
-        ctx2d.arcTo(
-          viewportX,
-          viewportY + viewportHeight,
-          viewportX,
-          viewportY + viewportHeight - rbl,
-          rbl
-        );
-      }
-      ctx2d.lineTo(viewportX, viewportY + rtl);
-      if (rtl > 0) {
-        ctx2d.arcTo(viewportX, viewportY, viewportX + rtl, viewportY, rtl);
-      }
-      ctx2d.closePath();
-      ctx2d.stroke();
-    }
-    ctx2d.globalAlpha = 1;
-  }
-});
-onBlokkliEvent("ui:resized", function() {
-  collector.reset();
-});
-onBlokkliEvent("state:reloaded", function() {
-  collector.reset();
-});
-</script>
-
-<script>
-export default {
-  name: "SelectionOverlay"
-};
-</script>

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

@@ -1,9 +0,0 @@
-import type { RenderedFieldListItem } from '#blokkli/types';
-declare const _default: import("vue").DefineComponent<{
-    blocks: RenderedFieldListItem[];
-    hasHostSelected: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    blocks: RenderedFieldListItem[];
-    hasHostSelected: boolean;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;