@revenexx/editor 0.1.0

package/dist/runtime/editor/features/selection/AddButtons/Renderer/vertex.glsl

@@ -0,0 +1,119 @@
+#version 300 es
+
+precision highp float;
+
+// [x, y] position.
+in vec2 a_position;
+// The [x,y,width, height] of the quad the vertex belongs to.
+in vec4 a_quad;
+in float a_rect_id;
+
+// The global scaling applied to all quads.
+uniform float u_scale;
+uniform float u_dpi;
+// The amount of pixels to offset on the x axis.
+uniform float u_offset_x;
+// The amount of pixels to offset on the y axis.
+uniform float u_offset_y;
+uniform vec2 u_resolution;
+// Scale transition for change options animation
+uniform float u_scale_transition;
+
+// Circle positions (10 vec2s = 20 floats)
+uniform vec2 u_circle_positions[10];
+// Circle visibility (10 floats)
+uniform float u_circle_visible[10];
+// Hovered circle index (-1 for none)
+uniform float u_hovered_circle;
+// Button radius in pixels
+uniform float u_radius;
+
+// The transformed quad for the fragment shader.
+out vec4 v_quad;
+out vec2 v_circle_center;
+out float v_visible;
+out float v_is_hovered;
+out float v_scale_fade;
+out float v_rect_id;
+out float v_radius;
+out float v_inner_radius;
+out float v_scale_factor;
+
+void main() {
+  int rectId = int(a_rect_id);
+
+  // Get circle position and visibility for this rect
+  vec2 circlePos = u_circle_positions[rectId];
+  v_visible = u_circle_visible[rectId];
+  v_is_hovered = float(rectId) == u_hovered_circle ? 1.0 : 0.0;
+  v_rect_id = a_rect_id;
+
+  // Calculate fade factor based on scale (fade from 1.0 at 0.5 to 0.0 at 0.4)
+  v_scale_fade = 1.0;
+  if (u_scale < 0.5) {
+    // Interpolate from 1.0 (at scale 0.5) to 0.0 (at scale 0.4)
+    v_scale_fade = (u_scale - 0.4) / (0.5 - 0.4);
+    v_scale_fade = clamp(v_scale_fade, 0.0, 1.0);
+  }
+
+  // Combined scale factor for fragment shader
+  v_scale_factor = v_scale_fade * u_scale_transition;
+
+  // Border width in pixels (must match fragment shader)
+  float borderWidth = 2.0;
+
+  // Circle radius in artboard space - apply inverse scaling to keep constant size
+  // Then multiply by fade factor and scale transition
+  // Add border width to the radius so the border renders outside
+  float radius =
+    (u_radius + borderWidth) / u_scale * v_scale_fade * u_scale_transition;
+  float innerRadius =
+    (u_radius - borderWidth) / u_scale * v_scale_fade * u_scale_transition;
+
+  // Pass scaled radii to fragment shader (in viewport pixels)
+  v_radius = radius * u_scale * u_dpi;
+  v_inner_radius = innerRadius * u_scale * u_dpi;
+
+  // Calculate quad bounds centered on circle position
+  float left = circlePos.x - radius;
+  float top = circlePos.y - radius;
+  float width = radius * 2.0;
+  float height = radius * 2.0;
+
+  // Determine which corner of the quad this vertex represents
+  // Normalize position within the dummy quad (0.0 to 1.0)
+  vec2 quadCorner = vec2(
+    (a_position.x - a_quad.x) / a_quad.z,
+    (a_position.y - a_quad.y) / a_quad.w
+  );
+
+  // Calculate actual vertex position in artboard space
+  vec2 vertexPos = vec2(
+    left + quadCorner.x * width,
+    top + quadCorner.y * height
+  );
+
+  // Apply global scale and offsets
+  vec2 offsetPosition = vertexPos * u_scale;
+  offsetPosition.x += u_offset_x;
+  offsetPosition.y += u_offset_y;
+
+  // Normalize position for rendering
+  vec2 normalizedPosition = offsetPosition / u_resolution;
+
+  // Transform to screen space (-1 to 1)
+  vec2 screenSpacePosition = normalizedPosition * 2.0 - vec2(1.0, 1.0);
+  screenSpacePosition.y = -screenSpacePosition.y;
+
+  // Output final position in clip space
+  gl_Position = vec4(screenSpacePosition, 0.0, 1.0) * u_dpi;
+
+  // Calculate transformed quad for fragment shader
+  v_quad = vec4(
+    (left * u_scale + u_offset_x) * u_dpi,
+    (u_resolution.y - top * u_scale - height * u_scale - u_offset_y) * u_dpi,
+    width * u_scale * u_dpi,
+    height * u_scale * u_dpi
+  );
+  v_circle_center = vec2(v_quad.x + v_quad.z / 2.0, v_quad.y + v_quad.w / 2.0);
+}

package/dist/runtime/editor/features/selection/AddButtons/index.d.vue.ts

@@ -0,0 +1,7 @@
+import type { RenderedFieldListItem } from '#blokkli/editor/types/field';
+type __VLS_Props = {
+    items: RenderedFieldListItem[];
+};
+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/selection/AddButtons/index.vue

@@ -0,0 +1,494 @@
+<template>
+  <Teleport to="#bk-canvas-overlay">
+    <BlokkliTransition name="caret-tooltip">
+      <BundleSelector
+        v-if="addData"
+        :key="addData.key"
+        :bundles="addData.allowedBundles"
+        :anchor-el="addData.anchorEl"
+        :anchor-coordinates="addData.anchorCoordinates"
+        :label="addData.label"
+        :field="addData.field"
+        @select="onSelectBundle"
+        @close="closeOverlay"
+        @action="onSelectAction"
+        @fragment="onSelectFragment"
+      />
+    </BlokkliTransition>
+  </Teleport>
+
+  <ErrorBoundary v-model="isLocked" label="Add Buttons">
+    <Renderer
+      v-if="!isLocked"
+      :key="animation.renderKey.value"
+      :host-empty-field-keys="hostEmptyFieldKeys"
+      :host-empty-field-tooltips="hostFieldTooltips"
+      @toggle="onRendererToggle"
+      @toggle-field="onRendererToggleField"
+    />
+  </ErrorBoundary>
+</template>
+
+<script setup>
+import { computed, useBlokkli, ref, watch } from "#imports";
+import {
+  BlokkliTransition,
+  ErrorBoundary,
+  BundleSelector
+} from "#blokkli/editor/components";
+import {
+  getChildrenOrientation,
+  getGapSize,
+  MIN_GAP,
+  determineCanAddChildren
+} from "#blokkli/editor/helpers/dropTargets";
+import { renderCycle } from "#blokkli/editor/helpers/vue";
+import { getFieldKey } from "#blokkli/helpers";
+import { isInternalBundle } from "#blokkli/editor/helpers/bundles";
+import Renderer from "./Renderer/index.vue";
+import { itemEntityType } from "#blokkli-build/config";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { HORIZONTAL_ELLIPSIS } from "#blokkli/editor/helpers/string";
+const props = defineProps({
+  items: { type: Array, required: true }
+});
+const {
+  dom,
+  state,
+  eventBus,
+  types,
+  $t,
+  blocks,
+  fields,
+  animation,
+  context,
+  selection,
+  permissions,
+  adapter
+} = 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 emptyHostFields = computed(() => {
+  return types.fieldConfig.forEntityTypeAndBundle(
+    context.value.entityType,
+    context.value.entityBundle
+  ).map((field) => {
+    const key = getFieldKey(context.value.entityUuid, field.name);
+    const count = state.getFieldBlockCount(key);
+    return {
+      key,
+      count,
+      name: field.name
+    };
+  }).filter((v) => v.count === 0);
+});
+const hostEmptyFieldKeys = computed(() => {
+  return emptyHostFields.value.map((v) => v.key);
+});
+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", { more: true });
+});
+const afterTooltip = computed(() => {
+  if (singleAllowedBundleLabel.value) {
+    return $t("addButtonBundleAfter", 'Add "@bundle" after').replace(
+      "@bundle",
+      singleAllowedBundleLabel.value
+    );
+  }
+  return $t("addButtonAfterBundle", "Add after", { more: true });
+});
+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",
+      { more: true }
+    ).replace("@parentBundle", bundleLabel.value).replace("@fieldLabel", fieldLabel);
+  });
+});
+const hostFieldTooltips = computed(() => {
+  return emptyHostFields.value.map((field) => {
+    const fieldConfig = types.fieldConfig.forEntityTypeAndBundle(
+      context.value.entityType,
+      context.value.entityBundle
+    ).find((f) => f.name === field.name);
+    const fieldLabel = fieldConfig?.label || field.name;
+    const fieldElement = fields.find(context.value.entityUuid, 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("addButtonBundleToField", 'Add "@bundle" to @fieldLabel').replace("@bundle", singleBundleLabel).replace("@fieldLabel", fieldLabel);
+        }
+      }
+    }
+    return $t("addButtonToField", "Add to @fieldLabel", { more: true }).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();
+}
+async function onSelectFragment(name) {
+  const fragmentsAddBlock = adapter.fragmentsAddBlock;
+  if (!addData.value || !fragmentsAddBlock) {
+    return;
+  }
+  const { host, preceedingUuid } = addData.value;
+  closeOverlay();
+  await state.mutateWithLoadingState(
+    () => fragmentsAddBlock({
+      name,
+      host: { ...host },
+      preceedingUuid
+    })
+  );
+}
+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) {
+  if (field.hostEntityType === itemEntityType && (!permissions.checkBlockBundlePermission(field.hostEntityBundle, "edit") || permissions.blockHasRestrictedAncestor(field.hostEntityUuid))) {
+    return;
+  }
+  const allowedBundles = field.allowedBundles.filter(
+    (v) => permissions.checkBlockBundlePermission(v, "add")
+  );
+  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 ?? null;
+    }
+    prevUuid = childUuid;
+  }
+  return null;
+}
+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(HORIZONTAL_ELLIPSIS, "");
+  } else {
+    preceedingUuid = uuid.value;
+    label = afterTooltip.value.replace(HORIZONTAL_ELLIPSIS, "");
+  }
+  setAddData(key, field, label, preceedingUuid, void 0, data.coordinates);
+}
+function onRendererToggleField(data) {
+  const key = "field:" + data.index;
+  if (addData.value?.key === key) {
+    return closeOverlay();
+  }
+  const entityUuid = selection.hasHostSelected.value ? context.value.entityUuid : uuid.value;
+  if (!entityUuid) {
+    return;
+  }
+  const emptyFields = selection.hasHostSelected.value ? emptyHostFields.value : emptyBlockFields.value;
+  const tooltips = selection.hasHostSelected.value ? hostFieldTooltips.value : fieldTooltips.value;
+  const emptyField = emptyFields[data.index];
+  if (!emptyField) {
+    return;
+  }
+  const field = fields.find(entityUuid, emptyField.name);
+  if (!field) {
+    return;
+  }
+  const label = (tooltips[data.index] || "").replace(HORIZONTAL_ELLIPSIS, "");
+  setAddData(key, field, label, null, void 0, data.coordinates);
+}
+onBlokkliEvent("dragging:start", closeOverlay);
+onBlokkliEvent("selection:add-button:trigger", (e) => {
+  if (e.position === "field") {
+    onRendererToggleField({ index: e.index, coordinates: { x: 0, y: 0 } });
+    return;
+  }
+  if (selection.hasHostSelected.value || !uuid.value) {
+    return;
+  }
+  updateCache(uuid.value);
+  if (!cache.get(uuid.value)?.canShowBeforeAfter) {
+    return;
+  }
+  onRendererToggle({ position: e.position, coordinates: { x: 0, y: 0 } });
+});
+</script>

package/dist/runtime/editor/features/selection/AddButtons/index.vue.d.ts

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