@blokkli/editor 2.0.0-alpha.15 → 2.0.0-alpha.17

package/dist/runtime/components/Edit/Features/EditableField/Overlay/index.vue

@@ -1,26 +1,15 @@
 <template>
-  <div
+  <ArtboardTooltip
     v-if="loaded"
-    ref="root"
-    :style="style"
-    class="bk-editable-field bk-control"
+    id="editable"
+    :title
+    :anchor-el="element"
+    placement-y="top"
+    class="bk-editable-field"
+    close-icon="check"
+    @close="save"
   >
     <form ref="form" class="bk-editable-field-input" @submit.prevent="close">
-      <div class="bk bk-editable-field-buttons">
-        <h3>
-          <ItemIcon :bundle="itemBundle" />
-          <span>{{ title }}</span>
-        </h3>
-        <button @click.prevent="cancel">
-          <Icon name="close" />
-          <span>{{ $t("cancel", "Cancel") }}</span>
-        </button>
-        <button :disabled="!hasChanged" type="submit" @click.prevent="save">
-          <Icon name="save" />
-          <span>{{ $t("save", "Save") }}</span>
-        </button>
-      </div>
-
       <div ref="input">
         <InputContenteditable
           v-if="config.type === 'markup'"
@@ -50,21 +39,24 @@
         />
       </div>
 
-      <div v-if="!isMarkup" class="bk bk-editable-field-info">
+      <div class="bk bk-editable-field-info">
+        <button :disabled="!hasChanged" @click.prevent="cancel">
+          {{ $t("editableFieldDiscard", "Discard") }}
+        </button>
         <div v-if="errorText" class="bk-editable-field-info-error">
           {{ errorText }}
         </div>
-        <div class="bk-editable-field-info-count">
+        <div v-if="!isMarkup" class="bk-editable-field-info-count">
           <span>{{ count }}</span>
           <span v-if="maxlength >= 1">&nbsp;/&nbsp;{{ maxlength }}</span>
         </div>
       </div>
     </form>
-  </div>
+  </ArtboardTooltip>
 </template>
 
 <script setup>
-import { Icon, ItemIcon } from "#blokkli/components";
+import { ArtboardTooltip } from "#blokkli/components";
 import {
   computed,
   ref,
@@ -74,12 +66,12 @@ import {
   useBlokkli,
   nextTick
 } from "#imports";
-import { falsy, findIdealRectPosition } from "#blokkli/helpers";
+import { falsy } from "#blokkli/helpers";
 import InputPlaintext from "./Plaintext/index.vue";
 import InputContenteditable from "./Contenteditable/index.vue";
 import InputFrame from "./Frame/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-const { eventBus, ui, selection, state, adapter, $t, types } = useBlokkli();
+const { eventBus, selection, state, adapter, $t, types } = useBlokkli();
 const props = defineProps({
   fieldName: { type: String, required: true },
   host: { type: Object, required: true },
@@ -102,41 +94,13 @@ const save = () => {
 };
 onBlokkliEvent("window:clickAway", save);
 const getElement = () => props.element;
-const alignment = computed(() => {
-  if (props.element) {
-    const style2 = window.getComputedStyle(props.element);
-    if (style2.textAlign === "left" || style2.textAlign === "center" || style2.textAlign === "right") {
-      return style2.textAlign;
-    } else if (style2.textAlign === "start") {
-      return "left";
-    } else if (style2.textAlign === "end") {
-      return "right";
-    }
-  }
-  return "center";
-});
 const scrollHeight = ref(0);
 const loaded = ref(false);
 const originalText = ref(props.value || "");
 const modelValue = ref("");
-const width = ref(320);
 const inputStyle = ref({});
 const form = ref(null);
-const root = ref(null);
 const input = ref(null);
-const x = ref(0);
-const y = ref(0);
-const style = computed(() => {
-  if (ui.isMobile.value) {
-    return {};
-  } else {
-    return {
-      width: width.value + "px",
-      top: y.value + "px",
-      left: x.value + "px"
-    };
-  }
-});
 const hasChanged = computed(() => modelValue.value !== originalText.value);
 const itemBundle = computed(() => {
   if ("itemBundle" in props.host) {
@@ -238,29 +202,6 @@ const focusInput = (el) => {
     focusInput(iframe.contentDocument);
   }
 };
-const onAnimationFrame = () => {
-  if (ui.isMobile.value) {
-    return;
-  }
-  const elementRect = props.element.getBoundingClientRect();
-  const height = form.value?.scrollHeight || 100;
-  const newWidth = Math.min(Math.max(elementRect.width, 360), 1e3);
-  const ideal = findIdealRectPosition(
-    ui.viewportBlockingRects.value,
-    {
-      x: alignment.value === "left" ? elementRect.x : elementRect.x + (Math.max(elementRect.width, 360) - newWidth) / 2,
-      y: elementRect.y - height - 20,
-      height,
-      width: newWidth
-    },
-    ui.visibleViewportPadded.value
-  );
-  x.value = ideal.x;
-  y.value = ideal.y + height;
-  width.value = newWidth;
-};
-onAnimationFrame();
-onBlokkliEvent("animationFrame", onAnimationFrame);
 onMounted(() => {
   const el = getElement();
   if (props.isComponent) {

package/dist/runtime/components/Edit/Features/EditableField/index.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <BlokkliTransition name="editable" :enabled="hasTransition">
+    <BlokkliTransition name="caret-tooltip" :enabled="hasTransition">
       <Overlay v-if="editable" v-bind="editable" :key="key" @close="close" />
     </BlokkliTransition>
   </Teleport>

package/dist/runtime/components/Edit/Features/History/index.vue

@@ -3,6 +3,7 @@
     id="history"
     v-slot="{ scrolledToEnd }"
     :title="$t('history', 'History')"
+    edit-only
     :tour-text="
   $t(
     'historyTourText',
@@ -74,9 +75,11 @@ const { state, $t, ui, selection, eventBus } = useBlokkli();
 const { mutations, currentMutationIndex, mutateWithLoadingState } = state;
 const mutationsCount = computed(() => mutations.value.length);
 const useMouseForHistory = computed(() => settings.value.useMouseButtons);
-const canUndo = computed(() => currentMutationIndex.value >= 0);
+const canUndo = computed(
+  () => currentMutationIndex.value >= 0 && state.canEdit.value
+);
 const canRedo = computed(
-  () => currentMutationIndex.value < mutationsCount.value - 1
+  () => currentMutationIndex.value < mutationsCount.value - 1 && state.canEdit.value
 );
 const selectionAtHistoryIndex = /* @__PURE__ */ new Map();
 function updateCurrentHistorySelection() {

package/dist/runtime/components/Edit/Features/Hover/Overlay/fragment.glsl

@@ -0,0 +1,139 @@
+precision highp float;
+
+varying vec4 v_quad;
+varying vec4 v_rect_radius;
+varying vec2 v_rect_size;
+varying vec2 v_rect_center;
+varying float v_rect_type;
+varying vec2 v_quad_artboard_pos;
+
+uniform float u_dpi;
+uniform float u_scale;
+uniform float u_offset_x;
+uniform float u_offset_y;
+uniform vec2 u_resolution;
+uniform vec3 u_color_mono;
+uniform vec3 u_color_accent;
+uniform vec3 u_color_teal;
+uniform vec3 u_color_white;
+uniform vec3 u_color_lime;
+
+int pseudoQuadrant(vec2 p) {
+  return int(floor(step(0.0, p.x) + 2.0 * step(0.0, -p.y)));
+}
+
+float sdRoundBox(vec2 p, vec2 b, vec4 radii) {
+  int idx = pseudoQuadrant(p);
+  float cr;
+  if (idx == 0) cr = radii[0];
+  else if (idx == 1) cr = radii[1];
+  else if (idx == 2) cr = radii[3];
+  else cr = radii[2];
+  vec2 q = abs(p) - b + cr;
+  return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - cr;
+}
+
+void main() {
+  vec2 size = v_rect_size;
+  vec4 u_cornerRadii = min(v_rect_radius, min(size.x, size.y) / 2.0);
+  vec4 r = u_cornerRadii;
+
+  vec2 posRelativeToQuad = gl_FragCoord.xy - v_rect_center;
+
+  float mainDist = sdRoundBox(posRelativeToQuad, size / 2.0, r);
+
+  // For editable fields (type 2), render both fill and solid border
+  if (v_rect_type > 1.5 && v_rect_type < 2.5) {
+    float u_edgeSoftness = 1.0;
+    float borderThickness = 1.5 * u_dpi;
+    float u_borderSoftness = 1.0;
+
+    // Render fill
+    float fillAlpha = 1.0 - smoothstep(-u_edgeSoftness, 0.0, mainDist);
+    vec4 fillColor = vec4(u_color_teal, 0.2);
+
+    // Render solid border (non-dashed)
+    float borderAlpha =
+      1.0 - smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - borderThickness);
+    vec4 borderColor = vec4(u_color_teal, 1.0);
+
+    // Combine fill and border
+    vec4 combined = mix(
+      vec4(fillColor.rgb, fillAlpha * fillColor.a),
+      borderColor,
+      borderAlpha * borderColor.a
+    );
+
+    gl_FragColor = combined;
+    return;
+  }
+
+  // For blocks (type 0, 1, and 3), render border
+  float borderThickness = 1.5 * u_dpi;
+  float u_borderSoftness = 1.0;
+
+  float borderAlpha =
+    1.0 - smoothstep(-u_borderSoftness, 0.0, abs(mainDist) - borderThickness);
+
+  // Select color based on type: 0 = mono, 1 = accent, 3 = white (inverted), 4 = lime (library)
+  vec3 color = u_color_mono;
+  if (v_rect_type > 3.5) {
+    color = u_color_lime;
+  } else if (v_rect_type > 2.5) {
+    color = u_color_white;
+  } else if (v_rect_type > 0.5) {
+    color = u_color_accent;
+  }
+
+  // Apply dashed pattern for all blocks
+  // Calculate actual perimeter distance for proper dashing
+  vec2 halfSize = size / 2.0;
+  vec2 p = posRelativeToQuad;
+  vec2 absP = abs(p);
+
+  // Determine which edge/corner we're on and calculate perimeter distance
+  float perimeterDistance = 0.0;
+
+  // Check which edge we're closest to
+  float dx = absP.x - halfSize.x;
+  float dy = absP.y - halfSize.y;
+
+  if (dy > dx) {
+    // Top or bottom edge
+    if (p.y > 0.0) {
+      // Bottom edge: start at bottom-left, go right
+      perimeterDistance = size.x + size.y + (p.x + halfSize.x);
+    } else {
+      // Top edge: start at top-right, go left
+      perimeterDistance = size.x + (halfSize.x - p.x);
+    }
+  } else {
+    // Left or right edge
+    if (p.x > 0.0) {
+      // Right edge: start at top-right, go down
+      perimeterDistance = p.y + halfSize.y;
+    } else {
+      // Left edge: start at bottom-left, go up
+      perimeterDistance = size.x + size.y + size.x + (halfSize.y - p.y);
+    }
+  }
+
+  float dashWidth = 7.0 * u_dpi;
+  float dashGap = 7.0 * u_dpi;
+  float dashCycle = dashWidth + dashGap;
+
+  float dashPosition = mod(perimeterDistance, dashCycle);
+  float dashFactor = step(dashPosition, dashWidth);
+
+  // Only show dashes
+  borderAlpha *= dashFactor;
+
+  vec4 borderColor = vec4(color, 1.0);
+  vec4 finalColor = mix(
+    vec4(0.0, 0.0, 0.0, 0.0),
+    borderColor,
+    borderAlpha * borderColor.a
+  );
+
+  gl_FragColor = finalColor;
+}

package/dist/runtime/components/Edit/Features/Hover/Overlay/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <div />
+</template>
+
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
+import { useBlokkli, computed, ref, watch } 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 { toShaderColor, isInsideRect } from "#blokkli/helpers";
+const props = defineProps({
+  gl: { type: null, required: true }
+});
+const { animation, theme, dom, selection, state, ui, editable } = useBlokkli();
+const programInfo = animation.registerProgram("hover", props.gl, [vs, fs]);
+const DEBUG = false;
+const MAX_RECTS = 11;
+function getDeepestUuid(uuids) {
+  if (uuids.length === 0) {
+    return null;
+  }
+  let deepestUuid = uuids[0];
+  let maxLevel = state.getNestingLevel(deepestUuid);
+  for (let i = 1; i < uuids.length; i++) {
+    const uuid = uuids[i];
+    const level = state.getNestingLevel(uuid);
+    if (level > maxLevel) {
+      maxLevel = level;
+      deepestUuid = uuid;
+    }
+  }
+  return deepestUuid;
+}
+function createHoverState() {
+  return {
+    positions: new Float32Array(MAX_RECTS * 4),
+    radii: new Float32Array(MAX_RECTS * 4),
+    types: new Float32Array(MAX_RECTS),
+    visible: new Float32Array(MAX_RECTS)
+  };
+}
+const hoverState = createHoverState();
+let previousHoveredUuids = [];
+let previousDeepestUuid = null;
+let previousEditableFieldRect = null;
+const isHoveringEditableField = ref(false);
+const isHoveringSelectedBlock = ref(false);
+class HoverRectangleBufferCollector extends RectangleBufferCollector {
+}
+const collector = new HoverRectangleBufferCollector(props.gl);
+for (let i = 0; i < MAX_RECTS; i++) {
+  collector.addRectangle(
+    {
+      id: `hover-rect-${i}`,
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      radius: [0, 0, 0, 0]
+    },
+    0
+  );
+}
+const bufferInfo = collector.createBufferInfo();
+function resetHoverState() {
+  previousHoveredUuids = [];
+  previousDeepestUuid = null;
+  previousEditableFieldRect = null;
+  hoverState.visible.fill(0);
+  isHoveringEditableField.value = false;
+  isHoveringSelectedBlock.value = false;
+}
+watch(selection.isChangingOptions, (isChanging) => {
+  if (!isChanging) {
+    resetHoverState();
+  }
+});
+watch(selection.uuids, () => {
+  resetHoverState();
+});
+function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
+  const artboardRect = {
+    x: offset.x,
+    y: offset.y,
+    width: artboardSize.width * scale,
+    height: artboardSize.height * scale
+  };
+  const isOutsideArtboard = mouseX < artboardRect.x || mouseX > artboardRect.x + artboardRect.width || mouseY < artboardRect.y || mouseY > artboardRect.y + artboardRect.height;
+  if (isOutsideArtboard) {
+    if (DEBUG || previousHoveredUuids.length > 0 || previousEditableFieldRect !== null) {
+      hoverState.visible.fill(0);
+      isHoveringEditableField.value = false;
+      isHoveringSelectedBlock.value = false;
+      if (!DEBUG) {
+        previousHoveredUuids = [];
+        previousDeepestUuid = null;
+        previousEditableFieldRect = null;
+      }
+      return true;
+    }
+    return false;
+  }
+  const artboardMouseX = mouseX / scale - offset.x / scale;
+  const artboardMouseY = mouseY / scale - offset.y / scale;
+  const hoveredUuids = [];
+  const visibleBlocks = dom.getVisibleBlocks();
+  for (let i = 0; i < visibleBlocks.length; i++) {
+    const uuid = visibleBlocks[i];
+    if (!uuid) continue;
+    const rawRect = dom.getBlockRect(uuid);
+    if (!rawRect) continue;
+    const rect = ui.getViewportRelativeRect(rawRect, scale, offset);
+    const blockRect = {
+      x: rect.x / scale - offset.x / scale,
+      y: rect.y / scale - offset.y / scale,
+      width: rect.width / scale,
+      height: rect.height / scale
+    };
+    if (isInsideRect(artboardMouseX, artboardMouseY, blockRect)) {
+      hoveredUuids.push(uuid);
+    }
+  }
+  const deepestUuid = getDeepestUuid(hoveredUuids);
+  const selectedUuids = selection.uuids.value;
+  const unselectedHoveredUuids = hoveredUuids.filter(
+    (uuid) => !selectedUuids.includes(uuid)
+  );
+  const hoveredChanged = unselectedHoveredUuids.length !== previousHoveredUuids.length || unselectedHoveredUuids.some(
+    (uuid, i) => uuid !== previousHoveredUuids[i]
+  ) || deepestUuid !== previousDeepestUuid;
+  let hoveredEditableFieldRect = null;
+  const editableRects = editable.getVisible();
+  for (let i = 0; i < editableRects.length; i++) {
+    const editableRect = editableRects[i];
+    if (isInsideRect(artboardMouseX, artboardMouseY, editableRect)) {
+      hoveredEditableFieldRect = editableRect;
+      break;
+    }
+  }
+  if (!hoveredChanged && !DEBUG) {
+    const editableFieldChanged = hoveredEditableFieldRect === null !== (previousEditableFieldRect === null) || hoveredEditableFieldRect && previousEditableFieldRect && (hoveredEditableFieldRect.x !== previousEditableFieldRect.x || hoveredEditableFieldRect.y !== previousEditableFieldRect.y || hoveredEditableFieldRect.width !== previousEditableFieldRect.width || hoveredEditableFieldRect.height !== previousEditableFieldRect.height);
+    if (!editableFieldChanged) {
+      return false;
+    }
+  }
+  const shouldHighlightDeepest = deepestUuid && unselectedHoveredUuids.includes(deepestUuid);
+  hoverState.visible.fill(0);
+  const nestingMap = /* @__PURE__ */ new Map();
+  for (let i = 0; i < unselectedHoveredUuids.length; i++) {
+    const uuid = unselectedHoveredUuids[i];
+    const level = Math.min(state.getNestingLevel(uuid), 9);
+    if (!nestingMap.has(level)) {
+      nestingMap.set(level, uuid);
+    }
+  }
+  for (const [level, uuid] of nestingMap) {
+    const rect = dom.getBlockRect(uuid);
+    const block = dom.findBlock(uuid);
+    if (!rect || !block) continue;
+    const el = dom.getDragElement(block);
+    if (!el) continue;
+    const style = theme.getDraggableStyle(el);
+    const isDeepest = shouldHighlightDeepest && uuid === deepestUuid;
+    hoverState.positions[level * 4 + 0] = rect.x;
+    hoverState.positions[level * 4 + 1] = rect.y;
+    hoverState.positions[level * 4 + 2] = rect.width;
+    hoverState.positions[level * 4 + 3] = rect.height;
+    hoverState.radii[level * 4 + 0] = style.radius[0];
+    hoverState.radii[level * 4 + 1] = style.radius[1];
+    hoverState.radii[level * 4 + 2] = style.radius[2];
+    hoverState.radii[level * 4 + 3] = style.radius[3];
+    let type = 0;
+    if (isDeepest) {
+      const isFromLibrary = state.fromLibraryUuids.value.includes(uuid);
+      if (isFromLibrary) {
+        type = 4;
+      } else {
+        type = style.isInverted ? 3 : 1;
+      }
+    }
+    hoverState.types[level] = type;
+    hoverState.visible[level] = 1;
+  }
+  if (hoveredEditableFieldRect) {
+    const inset = 2;
+    hoverState.positions[10 * 4 + 0] = hoveredEditableFieldRect.x + inset;
+    hoverState.positions[10 * 4 + 1] = hoveredEditableFieldRect.y + inset;
+    hoverState.positions[10 * 4 + 2] = hoveredEditableFieldRect.width - inset * 2;
+    hoverState.positions[10 * 4 + 3] = hoveredEditableFieldRect.height - inset * 2;
+    hoverState.radii[10 * 4 + 0] = 0;
+    hoverState.radii[10 * 4 + 1] = 0;
+    hoverState.radii[10 * 4 + 2] = 0;
+    hoverState.radii[10 * 4 + 3] = 0;
+    hoverState.types[10] = 2;
+    hoverState.visible[10] = 1;
+  }
+  if (!DEBUG) {
+    previousHoveredUuids = unselectedHoveredUuids;
+    previousDeepestUuid = deepestUuid;
+    previousEditableFieldRect = hoveredEditableFieldRect;
+  }
+  isHoveringEditableField.value = hoveredEditableFieldRect !== null;
+  isHoveringSelectedBlock.value = hoveredUuids.some(
+    (uuid) => selectedUuids.includes(uuid)
+  );
+  return true;
+}
+const uniforms = computed(() => {
+  return {
+    u_color_mono: toShaderColor(theme.mono.value[300]),
+    u_color_accent: toShaderColor(theme.accent.value[600]),
+    u_color_teal: toShaderColor(theme.teal.value.normal),
+    u_color_white: toShaderColor([255, 255, 255]),
+    u_color_lime: toShaderColor(theme.lime.value.normal)
+  };
+});
+onBlokkliEvent("state:reloaded", () => {
+  resetHoverState();
+});
+onBlokkliEvent("ui:resized", () => {
+  resetHoverState();
+});
+defineRenderer("hover-overlay", {
+  zIndex: 200,
+  enabled: () => !selection.isChangingOptions.value,
+  cursor: () => {
+    if (isHoveringEditableField.value && state.editMode.value !== "readonly") {
+      return "text";
+    }
+    if (isHoveringSelectedBlock.value && state.editMode.value === "editing") {
+      return "grab";
+    }
+    return null;
+  },
+  render: (ctx) => {
+    if (!bufferInfo) {
+      return;
+    }
+    if (!ui.openTooltip.value) {
+      updateHoverState(
+        ctx.mouseX,
+        ctx.mouseY,
+        ctx.artboardOffset,
+        ctx.artboardScale,
+        ctx.artboardSize
+      );
+    }
+    props.gl.useProgram(programInfo.program);
+    setUniforms(programInfo, uniforms.value);
+    setUniforms(programInfo, {
+      u_hover_positions: hoverState.positions,
+      u_hover_radii: hoverState.radii,
+      u_hover_types: hoverState.types,
+      u_hover_visible: hoverState.visible
+    });
+    animation.setSharedUniforms(props.gl, programInfo);
+    setBuffersAndAttributes(props.gl, programInfo, bufferInfo);
+    drawBufferInfo(props.gl, bufferInfo, props.gl.TRIANGLES);
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "HoverOverlay"
+};
+</script>

package/dist/runtime/components/Edit/Features/Hover/Overlay/index.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{
+    gl: WebGLRenderingContext;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
+    gl: WebGLRenderingContext;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;