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

package/dist/runtime/editor/features/search/types.d.ts

@@ -0,0 +1,73 @@
+import type { BlokkliItemHost } from '#blokkli/editor/types/field';
+export type AddContentSearchItemEvent = {
+    item: SearchContentItem;
+    host: BlokkliItemHost;
+    bundle: string;
+    afterUuid: string | null;
+};
+export interface DraggableSearchContentItem {
+    itemType: 'search_content';
+    element: () => HTMLElement;
+    itemBundles: string[];
+    searchItem: SearchContentItem;
+}
+/**
+ * Defines a content search item.
+ */
+export type SearchContentItem = {
+    /**
+     * The ID of the item.
+     */
+    id: string;
+    /**
+     * The entity type of the item.
+     */
+    entityType: string;
+    /**
+     * The entity bundle of the item.
+     */
+    entityBundle: string;
+    /**
+     * The title displayed to the user.
+     */
+    title: string;
+    /**
+     * The possible bundles for which a block may be added using this content item.
+     */
+    targetBundles: string[];
+    /**
+     * Additional context displayed alongside the title.
+     */
+    context?: string;
+    /**
+     * The text displayed to the user.
+     */
+    text?: string;
+    /**
+     * An optional image URL that is used instead of an icon.
+     */
+    imageUrl?: string;
+};
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Return the possible content search tabs.
+         */
+        getContentSearchTabs?: () => Record<string, string> | Promise<Record<string, string>>;
+        /**
+         * Return items for the "content" search.
+         *
+         * Should only return a limited amount of results, sorted by relevance.
+         */
+        getContentSearchResults?: (tab: string, text: string) => Promise<SearchContentItem[]>;
+        /**
+         * Add the dropped item from a search content item.
+         */
+        addContentSearchItem?: (e: AddContentSearchItemEvent) => Promise<MutationResponseLike<T>> | undefined;
+    }
+}
+declare module '#blokkli/editor/types/draggable' {
+    interface DraggableItemTypes {
+        search_content: DraggableSearchContentItem;
+    }
+}

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

@@ -0,0 +1,33 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    toggle: (data: {
+        position: "before" | "after";
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    }) => any;
+    toggleField: (data: {
+        index: number;
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onToggle?: ((data: {
+        position: "before" | "after";
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    }) => any) | undefined;
+    onToggleField?: ((data: {
+        index: number;
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    }) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/selection/AddButtons/Renderer/index.vue

@@ -0,0 +1,591 @@
+<template>
+  <Teleport to="#bk-canvas-overlay">
+    <div
+      class="bk bk-add-button-tooltip"
+      :class="{ 'bk-is-field': tooltipData?.isField }"
+      :style="{
+  position: 'fixed',
+  left: (tooltipData?.x ?? 0) + 'px',
+  top: (tooltipData?.y ?? 0) + 'px',
+  transform: tooltipData?.transform ?? 'translate(0, 0)',
+  visibility: tooltipData ? 'visible' : 'hidden'
+}"
+    >
+      {{ tooltipData?.text ?? "" }}
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { useBlokkli, computed, ref } 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/editor/helpers/webgl";
+import { getFieldKey } from "#blokkli/helpers";
+import { toShaderColor } from "#blokkli/editor/helpers/color";
+import {
+  getChildrenOrientation,
+  determineCanAddChildren
+} from "#blokkli/editor/helpers/dropTargets";
+import { isInternalBundle } from "#blokkli/editor/helpers/bundles";
+import { itemEntityType } from "#blokkli-build/config";
+import { defineRenderer, onBlokkliEvent } from "#blokkli/editor/composables";
+const {
+  animation,
+  theme,
+  dom,
+  selection,
+  state,
+  types,
+  ui,
+  $t,
+  blocks,
+  fields
+} = useBlokkli();
+const emptyFieldTooltips = ref([]);
+const currentUuid = ref("");
+const currentBundleLabel = ref("");
+const currentSingleAllowedBundleLabel = ref(null);
+const tooltipData = computed(() => {
+  if (hoveredCircle.value < 0) {
+    return null;
+  }
+  const index = hoveredCircle.value;
+  const artboardX = circlePositions[index * 2];
+  const artboardY = circlePositions[index * 2 + 1];
+  if (artboardX === void 0 || artboardY === void 0) {
+    return null;
+  }
+  const scale = ui.artboardScale.value;
+  const offset = ui.artboardOffset.value;
+  const screenX = artboardX * scale + offset.x;
+  const screenY = artboardY * scale + offset.y;
+  let transform;
+  let position;
+  let text;
+  let isField = false;
+  if (index === 0 || index === 1) {
+    const orientation = currentOrientation.value;
+    if (currentSingleAllowedBundleLabel.value) {
+      if (index === 0) {
+        text = $t("addButtonBundleBefore", 'Add "@bundle" before').replace(
+          "@bundle",
+          currentSingleAllowedBundleLabel.value
+        );
+      } else {
+        text = $t("addButtonBundleAfter", 'Add "@bundle" after').replace(
+          "@bundle",
+          currentSingleAllowedBundleLabel.value
+        );
+      }
+    } else {
+      if (index === 0) {
+        text = $t("addButtonBeforeBundle", "Add before...");
+      } else {
+        text = $t("addButtonAfterBundle", "Add after...");
+      }
+    }
+    if (orientation === "horizontal") {
+      if (index === 0) {
+        transform = `translate(${TOOLTIP_MARGIN}px, -50%)`;
+        position = "right";
+      } else {
+        transform = `translate(calc(-100% - ${TOOLTIP_MARGIN}px), -50%)`;
+        position = "left";
+      }
+    } else {
+      if (index === 0) {
+        transform = `translate(-50%, ${TOOLTIP_MARGIN}px)`;
+        position = "bottom";
+      } else {
+        transform = `translate(-50%, calc(-100% - ${TOOLTIP_MARGIN}px))`;
+        position = "top";
+      }
+    }
+  } else {
+    transform = `translate(-50%, calc(-100% - ${TOOLTIP_MARGIN}px))`;
+    position = "top";
+    isField = true;
+    const fieldIndex = index - 2;
+    text = emptyFieldTooltips.value[fieldIndex] || "Add to field";
+  }
+  return { x: screenX, y: screenY, transform, position, text, isField };
+});
+const emit = defineEmits(["toggle", "toggleField"]);
+const MAX_CIRCLES = 10;
+const BUTTON_RADIUS = 12;
+const TOOLTIP_MARGIN = 20;
+const MIN_BUTTON_DISTANCE = BUTTON_RADIUS * 3;
+class CircleBufferCollector extends RectangleBufferCollector {
+}
+let bufferInfoCache = null;
+const circlePositions = new Float32Array(MAX_CIRCLES * 2);
+const circleVisible = new Float32Array(MAX_CIRCLES);
+const hoveredCircle = ref(-1);
+const color = computed(() => {
+  return theme.accent.value[600];
+});
+const colorHover = computed(() => {
+  return theme.accent.value[500];
+});
+const colorField = computed(() => {
+  return theme.accent.value[400];
+});
+const colorFieldHover = computed(() => {
+  return theme.accent.value[300];
+});
+const orientationCache = /* @__PURE__ */ new Map();
+const currentOrientation = ref("horizontal");
+const blockStateCache = /* @__PURE__ */ new Map();
+function getOrientationForUuid(uuid) {
+  let cached = orientationCache.get(uuid);
+  if (!cached) {
+    const item = blocks.getBlock(uuid);
+    if (item) {
+      const field = fields.find(item.host.uuid, item.host.fieldName);
+      if (field) {
+        cached = getChildrenOrientation(field.element);
+        orientationCache.set(uuid, cached);
+      }
+    }
+  }
+  return cached || "horizontal";
+}
+function getBlockState(uuid) {
+  let cached = blockStateCache.get(uuid);
+  if (!cached) {
+    let canShowBeforeAfter = false;
+    let singleAllowedBundleLabel = null;
+    const block = blocks.getBlock(uuid);
+    if (!block) {
+      return {
+        canShowBeforeAfter: false,
+        emptyFieldKeys: [],
+        emptyFieldTooltips: [],
+        bundleLabel: "",
+        singleAllowedBundleLabel: null
+      };
+    }
+    if (block) {
+      const field = fields.find(block.host.uuid, block.host.fieldName);
+      if (!field) {
+        return {
+          canShowBeforeAfter: false,
+          emptyFieldKeys: [],
+          emptyFieldTooltips: [],
+          bundleLabel: "",
+          singleAllowedBundleLabel: null
+        };
+      }
+      if (field) {
+        const fieldChildren = [...field.element.children];
+        const currentCount = state.getFieldBlockCount(field.key);
+        canShowBeforeAfter = 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
+        );
+        const allowedBundles = field.allowedBundles.filter(
+          (bundle) => !isInternalBundle(bundle)
+        );
+        if (allowedBundles.length === 1) {
+          const bundle = allowedBundles[0];
+          if (bundle) {
+            singleAllowedBundleLabel = types.getBlockBundleDefinition(bundle)?.label || bundle;
+          }
+        }
+      }
+    }
+    const bundleLabel = block ? types.getBlockBundleDefinition(block.bundle)?.label || block.bundle : "";
+    const emptyFieldKeys = [];
+    const emptyFieldTooltips2 = [];
+    if (block) {
+      const fieldConfigs = types.fieldConfig.forEntityTypeAndBundle(
+        itemEntityType,
+        block.bundle
+      );
+      for (const fieldConfig of fieldConfigs) {
+        const key = getFieldKey(uuid, fieldConfig.name);
+        const count = state.getFieldBlockCount(key);
+        if (count === 0) {
+          emptyFieldKeys.push(key);
+          const fieldLabel = fieldConfig.label || fieldConfig.name;
+          const fieldElement = fields.find(uuid, fieldConfig.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;
+                const tooltip = $t(
+                  "addButtonBundleInsideField",
+                  'Add "@bundle" inside @parentBundle \xBB @fieldLabel'
+                ).replace("@bundle", singleBundleLabel).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel);
+                emptyFieldTooltips2.push(tooltip);
+              } else {
+                emptyFieldTooltips2.push(
+                  $t(
+                    "addButtonInsideField",
+                    "Add inside @parentBundle \xBB @fieldLabel..."
+                  ).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel)
+                );
+              }
+            } else {
+              emptyFieldTooltips2.push(
+                $t(
+                  "addButtonInsideField",
+                  "Add inside @parentBundle \xBB @fieldLabel..."
+                ).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel)
+              );
+            }
+          } else {
+            emptyFieldTooltips2.push(
+              $t(
+                "addButtonInsideField",
+                "Add inside @parentBundle \xBB @fieldLabel..."
+              ).replace("@parentBundle", bundleLabel).replace("@fieldLabel", fieldLabel)
+            );
+          }
+        }
+      }
+    }
+    cached = {
+      canShowBeforeAfter,
+      emptyFieldKeys,
+      emptyFieldTooltips: emptyFieldTooltips2,
+      bundleLabel,
+      singleAllowedBundleLabel
+    };
+    blockStateCache.set(uuid, cached);
+  }
+  return cached;
+}
+onBlokkliEvent("state:reloaded", () => {
+  orientationCache.clear();
+  blockStateCache.clear();
+});
+function adjustEmptyFieldButtonPosition(fieldX, fieldY, blockRect, artboardScale) {
+  if (circleVisible[0] <= 0 || circleVisible[1] <= 0) {
+    return { x: fieldX, y: fieldY };
+  }
+  const beforeX = circlePositions[0];
+  const beforeY = circlePositions[1];
+  const afterX = circlePositions[2];
+  const afterY = circlePositions[3];
+  const minDistanceArtboard = MIN_BUTTON_DISTANCE / artboardScale;
+  const distToBefore = Math.sqrt(
+    (fieldX - beforeX) ** 2 + (fieldY - beforeY) ** 2
+  );
+  const distToAfter = Math.sqrt(
+    (fieldX - afterX) ** 2 + (fieldY - afterY) ** 2
+  );
+  if (distToBefore < minDistanceArtboard || distToAfter < minDistanceArtboard) {
+    return {
+      x: blockRect.x + blockRect.width / 2,
+      y: blockRect.y + blockRect.height / 2
+    };
+  }
+  return { x: fieldX, y: fieldY };
+}
+function getCircleAtPoint(x, y) {
+  if (ui.artboardScale.value <= 0.4) {
+    return -1;
+  }
+  const effectiveScale = Math.max(ui.artboardScale.value, 0.5);
+  const radius = BUTTON_RADIUS / effectiveScale;
+  for (let i = 0; i < MAX_CIRCLES; i++) {
+    if (circleVisible[i] > 0) {
+      const cx = circlePositions[i * 2];
+      const cy = circlePositions[i * 2 + 1];
+      const dx = x - cx;
+      const dy = y - cy;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance <= radius) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+const { collector } = defineRenderer("add-buttons", {
+  zIndex: 1e3,
+  collector: () => {
+    const c = new CircleBufferCollector();
+    for (let i = 0; i < MAX_CIRCLES; i++) {
+      c.addRectangle(
+        {
+          id: `circle-${i}`,
+          x: 0,
+          y: 0,
+          width: 40,
+          height: 40
+        },
+        i
+      );
+    }
+    return c;
+  },
+  program: () => ({ shaders: [vs, fs] }),
+  enabled: () => {
+    if (selection.uuids.value.length !== 1) {
+      return false;
+    }
+    if (ui.openTooltip.value && ui.openTooltip.value !== "add-buttons") {
+      return false;
+    }
+    if (ui.hasTransformOverlayOpen.value) {
+      return false;
+    }
+    return true;
+  },
+  cursor: () => hoveredCircle.value >= 0 ? "pointer" : null,
+  onClick: ({ mouseArtboard }) => {
+    if (selection.uuids.value.length !== 1) {
+      return false;
+    }
+    const clickedCircle = getCircleAtPoint(mouseArtboard.x, mouseArtboard.y);
+    if (clickedCircle >= 0) {
+      const cx = circlePositions[clickedCircle * 2];
+      const cy = circlePositions[clickedCircle * 2 + 1];
+      if (clickedCircle === 0 || clickedCircle === 1) {
+        const position = clickedCircle === 0 ? "before" : "after";
+        emit("toggle", {
+          position,
+          coordinates: { x: cx, y: cy }
+        });
+      } else {
+        const fieldIndex = clickedCircle - 2;
+        emit("toggleField", {
+          index: fieldIndex,
+          coordinates: { x: cx, y: cy }
+        });
+      }
+      return true;
+    }
+    return false;
+  },
+  render: (ctx, gl, program) => {
+    if (!bufferInfoCache) {
+      bufferInfoCache = collector.createBufferInfo(gl);
+    }
+    if (!bufferInfoCache) {
+      return;
+    }
+    circleVisible.fill(0);
+    if (ctx.selectedUuids.length !== 1) {
+      return;
+    }
+    const uuid = ctx.selectedUuids[0];
+    if (!uuid) {
+      return;
+    }
+    const blockState = getBlockState(uuid);
+    const blockRect = dom.getBlockRect(uuid);
+    if (!blockRect || blockRect.width === 0) {
+      return;
+    }
+    const orientation = getOrientationForUuid(uuid);
+    currentOrientation.value = orientation;
+    if (blockState.canShowBeforeAfter) {
+      const BUTTON_SHIFT = 2 / ctx.artboardScale;
+      if (orientation === "horizontal") {
+        circlePositions[0] = blockRect.x - BUTTON_SHIFT;
+        circlePositions[1] = blockRect.y + blockRect.height / 2;
+        circleVisible[0] = 1;
+        circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
+        circlePositions[3] = blockRect.y + blockRect.height / 2;
+        circleVisible[1] = 1;
+      } else {
+        circlePositions[0] = blockRect.x + blockRect.width / 2;
+        circlePositions[1] = blockRect.y - BUTTON_SHIFT;
+        circleVisible[0] = 1;
+        circlePositions[2] = blockRect.x + blockRect.width / 2;
+        circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
+        circleVisible[1] = 1;
+      }
+    }
+    currentUuid.value = uuid;
+    currentBundleLabel.value = blockState.bundleLabel;
+    currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
+    if (blockState.emptyFieldKeys.length > 0) {
+      emptyFieldTooltips.value = blockState.emptyFieldTooltips;
+      for (let i = 0; i < blockState.emptyFieldKeys.length && i < 8; i++) {
+        const fieldKey = blockState.emptyFieldKeys[i];
+        if (!fieldKey) {
+          continue;
+        }
+        const fieldRect = dom.getFieldRect(fieldKey);
+        if (!fieldRect) {
+          continue;
+        }
+        const initialX = fieldRect.x + fieldRect.width / 2;
+        const initialY = fieldRect.y + fieldRect.height / 2;
+        const adjusted = adjustEmptyFieldButtonPosition(
+          initialX,
+          initialY,
+          blockRect,
+          ctx.artboardScale
+        );
+        const circleIndex = i + 2;
+        circlePositions[circleIndex * 2] = adjusted.x;
+        circlePositions[circleIndex * 2 + 1] = adjusted.y;
+        circleVisible[circleIndex] = 1;
+      }
+    } else {
+      emptyFieldTooltips.value = [];
+    }
+    hoveredCircle.value = getCircleAtPoint(
+      ctx.mouseArtboard.x,
+      ctx.mouseArtboard.y
+    );
+    gl.useProgram(program.program);
+    setUniforms(program, {
+      u_circle_positions: circlePositions,
+      u_circle_visible: circleVisible,
+      u_color: toShaderColor(color.value),
+      u_color_hover: toShaderColor(colorHover.value),
+      u_color_field: toShaderColor(colorField.value),
+      u_color_field_hover: toShaderColor(colorFieldHover.value),
+      u_hovered_circle: hoveredCircle.value,
+      u_radius: BUTTON_RADIUS,
+      u_scale_transition: ctx.changeOptionsTransition
+    });
+    animation.setSharedUniforms(gl, program);
+    setBuffersAndAttributes(gl, program, bufferInfoCache);
+    drawBufferInfo(gl, bufferInfoCache, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    circleVisible.fill(0);
+    if (ctx.selectedUuids.length !== 1) {
+      return;
+    }
+    const uuid = ctx.selectedUuids[0];
+    if (!uuid) {
+      return;
+    }
+    const blockState = getBlockState(uuid);
+    const blockRect = dom.getBlockRect(uuid);
+    if (!blockRect || blockRect.width === 0) {
+      return;
+    }
+    const orientation = getOrientationForUuid(uuid);
+    currentOrientation.value = orientation;
+    if (blockState.canShowBeforeAfter) {
+      const BUTTON_SHIFT = 2 / ctx.artboardScale;
+      if (orientation === "horizontal") {
+        circlePositions[0] = blockRect.x - BUTTON_SHIFT;
+        circlePositions[1] = blockRect.y + blockRect.height / 2;
+        circleVisible[0] = 1;
+        circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
+        circlePositions[3] = blockRect.y + blockRect.height / 2;
+        circleVisible[1] = 1;
+      } else {
+        circlePositions[0] = blockRect.x + blockRect.width / 2;
+        circlePositions[1] = blockRect.y - BUTTON_SHIFT;
+        circleVisible[0] = 1;
+        circlePositions[2] = blockRect.x + blockRect.width / 2;
+        circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
+        circleVisible[1] = 1;
+      }
+    }
+    currentUuid.value = uuid;
+    currentBundleLabel.value = blockState.bundleLabel;
+    currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
+    if (blockState.emptyFieldKeys.length > 0) {
+      emptyFieldTooltips.value = blockState.emptyFieldTooltips;
+      for (let i = 0; i < blockState.emptyFieldKeys.length && i < 8; i++) {
+        const fieldKey = blockState.emptyFieldKeys[i];
+        if (!fieldKey) {
+          continue;
+        }
+        const fieldRect = dom.getFieldRect(fieldKey);
+        if (!fieldRect) {
+          continue;
+        }
+        const initialX = fieldRect.x + fieldRect.width / 2;
+        const initialY = fieldRect.y + fieldRect.height / 2;
+        const adjusted = adjustEmptyFieldButtonPosition(
+          initialX,
+          initialY,
+          blockRect,
+          ctx.artboardScale
+        );
+        const circleIndex = i + 2;
+        circlePositions[circleIndex * 2] = adjusted.x;
+        circlePositions[circleIndex * 2 + 1] = adjusted.y;
+        circleVisible[circleIndex] = 1;
+      }
+    } else {
+      emptyFieldTooltips.value = [];
+    }
+    hoveredCircle.value = getCircleAtPoint(
+      ctx.mouseArtboard.x,
+      ctx.mouseArtboard.y
+    );
+    const rgbToCss = (rgb) => {
+      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    };
+    const borderWidth = 2 * ctx.dpi;
+    const radius = BUTTON_RADIUS * ctx.dpi * ctx.changeOptionsTransition;
+    const innerRadius = radius - borderWidth;
+    for (let i = 0; i < MAX_CIRCLES; i++) {
+      if (circleVisible[i] <= 0) {
+        continue;
+      }
+      const artboardX = circlePositions[i * 2];
+      const artboardY = circlePositions[i * 2 + 1];
+      const viewportX = (artboardX * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
+      const viewportY = (artboardY * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
+      const isFieldButton = i >= 2;
+      const isHovered = hoveredCircle.value === i;
+      let fillColor;
+      if (isFieldButton) {
+        fillColor = isHovered ? colorFieldHover.value : colorField.value;
+      } else {
+        fillColor = isHovered ? colorHover.value : color.value;
+      }
+      ctx2d.fillStyle = rgbToCss(fillColor);
+      ctx2d.strokeStyle = "rgb(255, 255, 255)";
+      ctx2d.lineWidth = borderWidth;
+      ctx2d.beginPath();
+      ctx2d.arc(viewportX, viewportY, radius, 0, Math.PI * 2);
+      ctx2d.fill();
+      ctx2d.stroke();
+      const plusThickness = (ctx.dpi <= 0.5 ? 1.25 : 1.5) * ctx.dpi;
+      const plusLength = innerRadius * 0.5;
+      ctx2d.fillStyle = "rgb(255, 255, 255)";
+      ctx2d.fillRect(
+        viewportX - plusLength,
+        viewportY - plusThickness,
+        plusLength * 2,
+        plusThickness * 2
+      );
+      ctx2d.fillRect(
+        viewportX - plusThickness,
+        viewportY - plusLength,
+        plusThickness * 2,
+        plusLength * 2
+      );
+    }
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "AddButtonsRenderer"
+};
+</script>