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

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

@@ -1,749 +0,0 @@
-<template>
-  <Teleport :to="ui.mainLayoutElement.value">
-    <slot :color="activeColorHex" :label="active?.label" />
-  </Teleport>
-</template>
-
-<script setup>
-import {
-  falsy,
-  findClosestRectangle,
-  intersects,
-  isInsideRect,
-  rgbaToString,
-  toShaderColor
-} from "#blokkli/helpers";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
-import { ref, computed, useBlokkli } 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 {
-  determineCanAddChildren,
-  getChildrenOrientation,
-  getGapSize,
-  MIN_GAP
-} from "#blokkli/helpers/dropTargets";
-const props = defineProps({
-  items: { type: Array, required: true },
-  box: { type: Object, required: true },
-  mouseX: { type: Number, required: true },
-  mouseY: { type: Number, required: true },
-  isTouch: { type: Boolean, required: true }
-});
-var RectRenderType = /* @__PURE__ */ ((RectRenderType2) => {
-  RectRenderType2[RectRenderType2["DROP_AREA"] = 0] = "DROP_AREA";
-  RectRenderType2[RectRenderType2["FIELD_1"] = 1] = "FIELD_1";
-  RectRenderType2[RectRenderType2["FIELD_2"] = 2] = "FIELD_2";
-  RectRenderType2[RectRenderType2["FIELD_3"] = 3] = "FIELD_3";
-  RectRenderType2[RectRenderType2["FIELD_4"] = 4] = "FIELD_4";
-  RectRenderType2[RectRenderType2["ACTIVE_AREA"] = 5] = "ACTIVE_AREA";
-  return RectRenderType2;
-})(RectRenderType || {});
-const dragStart = Date.now();
-const cursorIsInsideClipped = () => isInsideRect(props.mouseX, props.mouseY, ui.visibleViewport.value) && !ui.viewportBlockingRects.value.some(
-  (v) => isInsideRect(props.mouseX, props.mouseY, v)
-);
-const active = ref(null);
-defineEmits(["drop"]);
-const {
-  dom,
-  ui,
-  theme,
-  dropAreas,
-  eventBus,
-  animation,
-  state,
-  runtimeConfig,
-  types,
-  fields
-} = useBlokkli();
-const areas = dropAreas.getDropAreas(props.items).reduce((acc, v) => {
-  acc[v.id] = v;
-  return acc;
-}, {});
-const visibleDropAreas = /* @__PURE__ */ new Set();
-const areasObserver = new IntersectionObserver(
-  (entries) => {
-    for (const entry of entries) {
-      if (entry.target instanceof HTMLElement) {
-        const id = entry.target.dataset.dropAreaId;
-        if (id) {
-          if (entry.isIntersecting) {
-            visibleDropAreas.add(id);
-          } else {
-            visibleDropAreas.delete(id);
-          }
-        }
-      }
-    }
-  },
-  {
-    threshold: 0
-  }
-);
-Object.values(areas).forEach((area) => {
-  area.element.dataset.dropAreaId = area.id;
-  areasObserver.observe(area.element);
-});
-onBlokkliEvent("mouse:down", (e) => {
-  const coord = toCanvasSpaceCoordinates(e.x, e.y);
-  const match = collector.getRectAtPosition(coord);
-  active.value = match || null;
-});
-onBlokkliEvent("mouse:up", (e) => {
-  if (!active.value) {
-    return;
-  }
-  if (props.isTouch && e.distance > 10) {
-    active.value = null;
-    return;
-  }
-  if (!props.isTouch && e.distance < 7) {
-    return;
-  }
-  emitDrop();
-});
-const emitDrop = async () => {
-  const timeDelta = Date.now() - dragStart;
-  if (active.value && timeDelta > 200) {
-    if (active.value.type === "field") {
-      const [hostUuid, fieldName, preceedingUuid] = active.value.id.split(":");
-      if (!hostUuid || !fieldName) {
-        return;
-      }
-      const field = fields.find(hostUuid, fieldName);
-      if (!field) {
-        return;
-      }
-      eventBus.emit("dragging:drop", {
-        field,
-        preceedingUuid,
-        items: [...props.items],
-        host: {
-          type: field.hostEntityType,
-          uuid: field.hostEntityUuid,
-          fieldName: field.name
-        }
-      });
-      return;
-    } else if (active.value.type === "drop-area") {
-      const area = areas[active.value.id];
-      if (!area) {
-        return;
-      }
-      await area.onDrop();
-    }
-  }
-  eventBus.emit("dragging:end");
-};
-const draggingBundles = computed(
-  () => props.items.flatMap((item) => {
-    const bundles = [];
-    if (item.itemType === "existing" || item.itemType === "existing_structure") {
-      bundles.push(item.block.bundle);
-      if (item.block.library?.reusableBundle) {
-        bundles.push(item.block.library.reusableBundle);
-      }
-    } else if (item.itemBundle) {
-      bundles.push(item.itemBundle);
-    } else if (item.itemType === "action" && item.action.itemBundle) {
-      bundles.push(item.action.itemBundle);
-    }
-    return bundles;
-  }).filter(falsy)
-);
-const draggingFragments = computed(
-  () => props.items.flatMap((item) => {
-    if ((item.itemType === "existing" || item.itemType === "existing_structure") && item.block.bundle === "blokkli_fragment" && item.block.fragment?.name) {
-      return [item.block.fragment.name];
-    }
-    return [];
-  }).filter(falsy)
-);
-const selectionUuids = computed(
-  () => props.items.map((item) => {
-    if (item.itemType === "existing") {
-      return item.block.uuid;
-    }
-  }).filter(falsy)
-);
-const fieldChildCache = {};
-const buildChildId = (field, preceedingUuid, type, uuid) => {
-  return `${field.key}:${preceedingUuid || ""}:${type || ""}:${uuid || ""}`;
-};
-const buildChildren = (field, visible) => {
-  if (!field.canAddChildren) {
-    return [];
-  }
-  if (field.emptyChild) {
-    return [field.emptyChild];
-  }
-  const children = [];
-  let prevWasInSelection = false;
-  let prevUuid = "";
-  let prevElOffsetTop = 0;
-  let prevElHeight = 0;
-  for (let i = 0; i < field.childrenElements.length; i++) {
-    const childrenForUuid = [];
-    const isLast = i === field.childrenElements.length - 1;
-    const el = field.childrenElements[i];
-    if (!(el instanceof HTMLElement)) {
-      continue;
-    }
-    const uuid = el.dataset.bkUuid;
-    if (!uuid) {
-      continue;
-    }
-    if (!visible.includes(uuid)) {
-      const elRect2 = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(dom.getBoundingClientRect(el));
-      prevElOffsetTop = elRect2.y - field.y;
-      prevElHeight = el.scrollHeight;
-      prevUuid = uuid;
-      continue;
-    }
-    const cached = fieldChildCache[uuid];
-    if (cached) {
-      const elRect2 = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(dom.getBoundingClientRect(el));
-      prevElOffsetTop = elRect2.y - field.y;
-      prevElHeight = el.scrollHeight;
-      children.push(...cached);
-      prevUuid = uuid;
-      continue;
-    }
-    if (selectionUuids.value.includes(uuid)) {
-      prevWasInSelection = true;
-      prevUuid = uuid;
-      continue;
-    }
-    const elRect = dom.getBlockRect(uuid) || ui.getAbsoluteElementRect(dom.getBoundingClientRect(el));
-    const elOffsetTop = elRect.y - field.y;
-    const elOffsetLeft = elRect.x - field.x;
-    const elHeight = el.scrollHeight;
-    if (isLast) {
-      const id2 = buildChildId(field.field, uuid, "last", uuid);
-      if (field.orientation === "vertical") {
-        childrenForUuid.push({
-          id: id2,
-          width: field.width,
-          height: MIN_GAP,
-          x: 0,
-          y: elOffsetTop + elHeight,
-          label: field.label
-        });
-      } else {
-        childrenForUuid.push({
-          id: id2,
-          width: MIN_GAP,
-          height: el.offsetHeight,
-          x: elOffsetLeft + el.offsetWidth + (field.gap - MIN_GAP) / 2,
-          y: elOffsetTop,
-          label: field.label
-        });
-      }
-    }
-    if (prevWasInSelection) {
-      prevWasInSelection = false;
-      prevUuid = uuid;
-      prevElOffsetTop = elOffsetTop;
-      prevElHeight = elHeight;
-      children.push(...childrenForUuid);
-      continue;
-    }
-    const id = buildChildId(field.field, prevUuid, "between", uuid);
-    if (field.orientation === "vertical") {
-      let dropTargetY;
-      if (prevElHeight > 0) {
-        const prevBlockBottom = prevElOffsetTop + prevElHeight;
-        const gapMiddle = (prevBlockBottom + elOffsetTop) / 2;
-        dropTargetY = gapMiddle - MIN_GAP / 2;
-      } else {
-        const gapMiddle = elOffsetTop / 2;
-        dropTargetY = gapMiddle - MIN_GAP / 2;
-      }
-      childrenForUuid.push({
-        id,
-        width: field.width,
-        height: MIN_GAP,
-        x: 0,
-        y: dropTargetY,
-        label: field.label
-      });
-    } else {
-      childrenForUuid.push({
-        id,
-        width: MIN_GAP,
-        height: Math.max(el.offsetHeight, MIN_GAP),
-        x: Math.max(elOffsetLeft - field.gap, -field.gap) + (field.gap - MIN_GAP) / 2,
-        y: elOffsetTop,
-        label: field.label
-      });
-    }
-    fieldChildCache[uuid] = childrenForUuid;
-    children.push(...childrenForUuid);
-    prevElOffsetTop = elOffsetTop;
-    prevElHeight = elHeight;
-    prevUuid = uuid;
-  }
-  return children;
-};
-const fieldCache = {};
-function getBundleLabel(field) {
-  if (field.hostEntityType === runtimeConfig.itemEntityType) {
-    return types.getBlockBundleDefinition(field.hostEntityBundle)?.label || field.hostEntityBundle;
-  }
-  return state.entity.value.bundleLabel || field.hostEntityBundle;
-}
-function getInsertText(field) {
-  const bundleLabel = getBundleLabel(field);
-  return `${bundleLabel} \xBB <strong>${field.label}</strong>`;
-}
-const buildEmptyChild = (field, children, orientation, fieldWidth, fieldHeight) => {
-  if (children.length === 0) {
-    const id = buildChildId(field, null, "empty");
-    if (orientation === "horizontal") {
-      return {
-        id,
-        x: 0,
-        y: 0,
-        width: fieldWidth,
-        height: fieldHeight,
-        label: getInsertText(field)
-      };
-    } else {
-      return {
-        id,
-        x: 0,
-        y: 0,
-        width: fieldWidth,
-        height: Math.max(fieldHeight, MIN_GAP),
-        label: getInsertText(field)
-      };
-    }
-  }
-};
-const buildFieldRect = (key) => {
-  if (fieldCache[key]) {
-    return fieldCache[key];
-  }
-  const [uuid, name] = key.split(":");
-  if (!uuid || !name) {
-    return;
-  }
-  const field = fields.find(uuid, name);
-  if (!field) {
-    return;
-  }
-  const childElements = [...field.element.children];
-  const currentCount = state.getFieldBlockCount(field.key);
-  const canAddChildren = determineCanAddChildren(
-    field,
-    childElements,
-    selectionUuids.value,
-    currentCount,
-    props.items.length,
-    draggingBundles.value,
-    draggingFragments.value
-  );
-  const orientation = field.dropAlignment || getChildrenOrientation(field.element);
-  const rect = dom.getFieldRect(field.key);
-  if (!rect) {
-    throw new Error("Failed to get rect for field: " + field.key);
-  }
-  const x = rect.x;
-  const y = rect.y;
-  const width = Math.max(rect.width, MIN_GAP);
-  const height = Math.max(rect.height, MIN_GAP);
-  const emptyChild = buildEmptyChild(
-    field,
-    childElements,
-    orientation,
-    width,
-    height
-  );
-  const gap = Math.max(getGapSize(orientation, field.element), MIN_GAP);
-  const fieldRect = {
-    key: field.key,
-    field,
-    width,
-    height,
-    x,
-    y,
-    label: getInsertText(field),
-    canAddChildren,
-    emptyChild,
-    orientation,
-    gap,
-    childrenElements: childElements
-  };
-  fieldCache[key] = fieldRect;
-  return fieldRect;
-};
-const cachedDropAreaRects = {};
-const buildDropAreaRect = (area) => {
-  if (cachedDropAreaRects[area.id]) {
-    return cachedDropAreaRects[area.id];
-  }
-  const rect = ui.getAbsoluteElementRect(area.element);
-  const dropAreaRect = {
-    x: rect.x,
-    y: rect.y,
-    width: Math.max(rect.width, MIN_GAP),
-    height: Math.max(rect.height, MIN_GAP)
-  };
-  cachedDropAreaRects[area.id] = dropAreaRect;
-  return dropAreaRect;
-};
-const alphaBase = 0.7;
-const colorTeal = rgbaToString(theme.teal.value.normal);
-const colorTealAlpha = rgbaToString(theme.teal.value.normal, alphaBase);
-const colorAccent = rgbaToString(theme.accent.value[800]);
-const colorAccentAlpha = rgbaToString(theme.accent.value[800], alphaBase);
-function getRectType(field) {
-  if (field.nestingLevel >= 3) {
-    return 4 /* FIELD_4 */;
-  } else if (field.nestingLevel >= 2) {
-    return 3 /* FIELD_3 */;
-  } else if (field.nestingLevel >= 1) {
-    return 2 /* FIELD_2 */;
-  }
-  return 1 /* FIELD_1 */;
-}
-class DropTargetRectangleBufferCollector extends RectangleBufferCollector {
-  getBufferInfo(gl) {
-    const visibleFields = dom.getVisibleFields();
-    const visibleBlocks = dom.getVisibleBlocks();
-    const lengthBefore = this.positions.length;
-    for (let i = 0; i < visibleFields.length; i++) {
-      const key = visibleFields[i];
-      const fieldRect = buildFieldRect(key);
-      if (!fieldRect) {
-        continue;
-      }
-      const children = buildChildren(fieldRect, visibleBlocks);
-      for (let j = 0; j < children.length; j++) {
-        const child = children[j];
-        if (this.added.has(child.id)) {
-          continue;
-        }
-        const type = getRectType(fieldRect.field);
-        this.addRectangle(
-          {
-            id: child.id,
-            type: "field",
-            label: child.label,
-            color: colorAccent,
-            colorAlpha: colorAccentAlpha,
-            x: fieldRect.x + child.x,
-            y: fieldRect.y + child.y,
-            width: child.width,
-            height: child.height,
-            field: fieldRect
-          },
-          type,
-          true
-        );
-      }
-    }
-    const visibleAreas = Array.from(visibleDropAreas);
-    for (let i = 0; i < visibleAreas.length; i++) {
-      const area = areas[visibleAreas[i]];
-      if (!area) {
-        continue;
-      }
-      if (this.added.has(area.id)) {
-        continue;
-      }
-      const areaRect = buildDropAreaRect(area);
-      this.addRectangle(
-        {
-          id: area.id,
-          type: "drop-area",
-          label: area.label,
-          color: colorTeal,
-          colorAlpha: colorTealAlpha,
-          x: areaRect.x,
-          y: areaRect.y,
-          width: areaRect.width,
-          height: areaRect.height
-        },
-        0 /* DROP_AREA */,
-        false
-      );
-    }
-    this.processPendingRects();
-    const hasChanged = lengthBefore !== this.positions.length;
-    if (hasChanged && gl) {
-      this.bufferInfo = this.createBufferInfo(gl);
-    }
-    return { info: this.bufferInfo, hasChanged };
-  }
-  getClosestIntersectingRect(box, coords) {
-    const candidates = [];
-    const rects = Object.values(this.rects);
-    for (let i = 0; i < rects.length; i++) {
-      const rect = rects[i];
-      if (rect.type === "active-area") {
-        continue;
-      }
-      if (intersects(box, rect)) {
-        candidates.push(rect);
-      }
-    }
-    if (candidates.length === 0) {
-      return null;
-    } else if (candidates.length === 1) {
-      return candidates[0];
-    }
-    return findClosestRectangle(coords.x, coords.y, candidates);
-  }
-  getRectAtPosition(coord) {
-    const rects = Object.values(this.rects);
-    for (let i = 0; i < rects.length; i++) {
-      const rect = rects[i];
-      if (rect.type === "active-area") {
-        continue;
-      }
-      if (isInsideRect(coord.x, coord.y, rect)) {
-        return rect;
-      }
-    }
-    return null;
-  }
-}
-const fieldColors = computed(() => {
-  return {
-    "0": theme.accent.value[900],
-    "1": theme.accent.value[400],
-    "2": theme.accent.value[600],
-    "3": theme.accent.value[500]
-  };
-});
-function getColorForField(field) {
-  const nestingLevel = field?.field.nestingLevel || 0;
-  if (nestingLevel >= 3) {
-    return fieldColors.value[3];
-  } else if (nestingLevel >= 2) {
-    return fieldColors.value[2];
-  } else if (nestingLevel >= 1) {
-    return fieldColors.value[1];
-  }
-  return fieldColors.value[0];
-}
-const activeColorRgb = computed(() => {
-  if (active.value?.type === "drop-area") {
-    return theme.teal.value.normal;
-  }
-  if (!active.value) {
-    return;
-  }
-  return getColorForField(active.value?.field);
-});
-const activeColorHex = computed(() => {
-  if (activeColorRgb.value) {
-    return rgbaToString(activeColorRgb.value);
-  }
-  return "";
-});
-const activeHoverField = ref(null);
-const activeHoverRect = computed(() => {
-  if (!activeHoverField.value) {
-    return [0, 0, 0, 0];
-  }
-  const outset = activeHoverField.value.field.nestingLevel === 0 ? 0 : 20;
-  if (activeHoverField.value.emptyChild) {
-    const emptyChildId = activeHoverField.value.emptyChild.id;
-    const adjustedRect = collector.rects[emptyChildId];
-    if (adjustedRect) {
-      return [
-        adjustedRect.x - outset,
-        adjustedRect.y - outset,
-        adjustedRect.width + 2 * outset,
-        adjustedRect.height + 2 * outset
-      ];
-    }
-  }
-  return [
-    activeHoverField.value.x - outset,
-    activeHoverField.value.y - outset,
-    activeHoverField.value.width + 2 * outset,
-    activeHoverField.value.height + 2 * outset
-  ];
-});
-const activeHoverColor = computed(() => {
-  return getColorForField(activeHoverField.value);
-});
-const activeHoverFieldNestingLevel = computed(() => {
-  return activeHoverField.value?.field.nestingLevel ?? 0;
-});
-const uniforms = computed(() => {
-  const index = active.value?.index;
-  return {
-    u_color_field_0: toShaderColor(fieldColors.value[0]),
-    u_color_field_1: toShaderColor(fieldColors.value[1]),
-    u_color_field_2: toShaderColor(fieldColors.value[2]),
-    u_color_field_3: toShaderColor(fieldColors.value[3]),
-    u_color_hover_area: toShaderColor(activeHoverColor.value),
-    u_color_area: toShaderColor(theme.teal.value.normal),
-    u_active_rect_id: index === void 0 ? -1 : index,
-    u_active_hover_rect: activeHoverRect.value,
-    u_active_hover_nesting_level: activeHoverFieldNestingLevel.value
-  };
-});
-const dragBox = ref({
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0
-});
-function toCanvasSpaceCoordinates(x, y) {
-  const scale = ui.artboardScale.value;
-  const offset = { ...ui.artboardOffset.value };
-  return {
-    x: (x - offset.x) / scale,
-    y: (y - offset.y) / scale
-  };
-}
-function setHoveredFieldArea(box, mouse) {
-  if (active.value?.field) {
-    if (activeHoverField.value?.key !== active.value.field.key) {
-      activeHoverField.value = active.value.field;
-    }
-    return;
-  }
-  const fields2 = Object.values(fieldCache);
-  let highestNestingLevel = 0;
-  let candidate = null;
-  for (let i = 0; i < fields2.length; i++) {
-    const field = fields2[i];
-    if (!field.canAddChildren) {
-      continue;
-    }
-    if (isInsideRect(mouse.x, mouse.y, field) && field.field.nestingLevel >= highestNestingLevel) {
-      candidate = field;
-      highestNestingLevel = field.field.nestingLevel;
-      continue;
-    }
-    if (intersects(box, field) && field.field.nestingLevel >= highestNestingLevel) {
-      highestNestingLevel = field.field.nestingLevel;
-      candidate = field;
-    }
-  }
-  if (candidate && candidate.key !== activeHoverField.value?.key) {
-    activeHoverField.value = candidate;
-  }
-}
-let bufferInfo = null;
-let bufferChanged = false;
-const { collector } = defineRenderer("drop-targets", {
-  zIndex: 400,
-  only: true,
-  collector: () => {
-    const c = new DropTargetRectangleBufferCollector({ deferredMode: true });
-    c.addRectangle(
-      {
-        id: "active-hover-rect",
-        type: "active-area",
-        label: "Field Area",
-        color: "red",
-        colorAlpha: "red",
-        x: 0,
-        y: 0,
-        width: ui.artboardSize.value.width,
-        height: ui.artboardSize.value.height
-      },
-      5 /* ACTIVE_AREA */,
-      false
-    );
-    return c;
-  },
-  program: () => ({ shaders: [vs, fs] }),
-  cursor: () => "grabbing",
-  render: (_ctx, gl, program) => {
-    const scale = ui.artboardScale.value;
-    const offset = { ...ui.artboardOffset.value };
-    dragBox.value = {
-      x: (props.box.x - offset.x) / scale,
-      y: (props.box.y - offset.y) / scale,
-      width: props.box.width / scale,
-      height: props.box.height / scale
-    };
-    const mouseAbsolute = toCanvasSpaceCoordinates(props.mouseX, props.mouseY);
-    const result = collector.getBufferInfo(gl);
-    bufferInfo = result.info;
-    bufferChanged = result.hasChanged;
-    if (!props.isTouch) {
-      if (cursorIsInsideClipped()) {
-        const closest = collector.getClosestIntersectingRect(
-          dragBox.value,
-          mouseAbsolute
-        );
-        active.value = closest || null;
-      } else {
-        active.value = null;
-      }
-    }
-    setHoveredFieldArea(dragBox.value, mouseAbsolute);
-    gl.useProgram(program.program);
-    animation.setSharedUniforms(gl, program);
-    setUniforms(program, uniforms.value);
-    if (!bufferInfo) {
-      return;
-    }
-    if (bufferChanged) {
-      setBuffersAndAttributes(gl, program, bufferInfo);
-    }
-    drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
-  },
-  renderFallback: (ctx, ctx2d) => {
-    const scale = ui.artboardScale.value;
-    const offset = { ...ui.artboardOffset.value };
-    dragBox.value = {
-      x: (props.box.x - offset.x) / scale,
-      y: (props.box.y - offset.y) / scale,
-      width: props.box.width / scale,
-      height: props.box.height / scale
-    };
-    const mouseAbsolute = toCanvasSpaceCoordinates(props.mouseX, props.mouseY);
-    const result = collector.getBufferInfo(void 0);
-    bufferInfo = result.info;
-    bufferChanged = result.hasChanged;
-    if (!props.isTouch) {
-      if (cursorIsInsideClipped()) {
-        const closest = collector.getClosestIntersectingRect(
-          dragBox.value,
-          mouseAbsolute
-        );
-        active.value = closest || null;
-      } else {
-        active.value = null;
-      }
-    }
-    setHoveredFieldArea(dragBox.value, mouseAbsolute);
-    const rects = Object.values(collector.rects);
-    for (let i = 0; i < rects.length; i++) {
-      const rect = rects[i];
-      if (rect.id === "active-hover-rect") {
-        continue;
-      }
-      if (active.value?.id === rect.id) {
-        ctx2d.fillStyle = rect.color;
-      } else {
-        ctx2d.fillStyle = rect.colorAlpha;
-      }
-      ctx2d.fillRect(
-        (rect.x * scale + offset.x) * ctx.dpi,
-        (rect.y * scale + offset.y) * ctx.dpi,
-        rect.width * ctx.dpi * scale,
-        rect.height * ctx.dpi * scale
-      );
-    }
-  }
-});
-</script>