@revenexx/studio-integrations 3.8.0 → 3.8.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @revenexx/studio-integrations
 
+## 3.8.1
+
+### Patch Changes
+
+- f5c169c: The insert and delete buttons on a connection, and the corners a sticky note and a group frame are resized by, are now at least 24 pixels on screen at every zoom level. They used to shrink with the canvas: a workflow of eighteen steps opens at 58 %, and there they measured 14, 11.6 and 9.3 pixels. The connection's buttons now keep their size on screen, as the node's toolbar already did. The resize corners look the same as before, and the area that reacts to the pointer reaches outward past the note or frame, so a bigger target covers none of the content. The pencil and the note badge on a node card are not changed here.
+
 ## 3.8.0
 
 ### Minor Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/studio-integrations",
   "configKey": "studioIntegrations",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/components/Integrations/GroupFrameView.vue

@@ -6,6 +6,7 @@ import { ChevronsDownUp, ChevronsUpDown, Ungroup } from "lucide-vue-next";
 import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import { inputHandleId, outputHandleId } from "../../data/handleId";
 import { resolveDisplayName } from "../../utils/localize";
+import { useCanvasTarget } from "../../composables/useCanvasTarget";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -65,6 +66,8 @@ const resizing = ref(false);
 const liveW = ref(0);
 const liveH = ref(0);
 let resizeStart = { x: 0, y: 0, w: 0, h: 0 };
+const RESIZE_CORNER = 20;
+const resizeTarget = useCanvasTarget(RESIZE_CORNER);
 const frameW = computed(() => resizing.value ? liveW.value : props.data.rect.width);
 const frameH = computed(() => resizing.value ? liveH.value : props.data.rect.height);
 function onResizeStart(e) {
@@ -215,18 +218,26 @@ function onResizeEnd() {
       <!-- Bottom-right resize handle (editable frames only). -->
       <div
         v-if="editable"
-        class="nodrag pointer-events-auto absolute bottom-0 right-0 flex size-5 cursor-se-resize items-end justify-end p-1"
-        :style="{ color: color.chip }"
+        class="nodrag pointer-events-auto absolute cursor-se-resize"
+        :style="{
+  color: color.chip,
+  width: `${resizeTarget}px`,
+  height: `${resizeTarget}px`,
+  right: `${RESIZE_CORNER - resizeTarget}px`,
+  bottom: `${RESIZE_CORNER - resizeTarget}px`
+}"
         :title="t('integration.canvas.group.action.resize')"
         @pointerdown="onResizeStart"
         @pointermove="onResizeMove"
         @pointerup="onResizeEnd"
         @pointercancel="onResizeEnd"
       >
-        <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
-          <path d="M7 1 1 7" />
-          <path d="M7 4.5 4.5 7" />
-        </svg>
+        <div class="flex size-5 items-end justify-end p-1">
+          <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
+            <path d="M7 1 1 7" />
+            <path d="M7 4.5 4.5 7" />
+          </svg>
+        </div>
       </div>
     </div>
   </div>

package/dist/runtime/components/Integrations/StickyNoteView.vue

@@ -3,6 +3,7 @@ import { computed, nextTick, ref, watch } from "vue";
 import { Position, useVueFlow } from "@vue-flow/core";
 import { NodeToolbar } from "@vue-flow/node-toolbar";
 import { TrashBinMinimalistic as TrashBin } from "#solar-icons";
+import { useCanvasTarget } from "../../composables/useCanvasTarget";
 const props = defineProps({
   id: { type: String, required: true },
   data: { type: Object, required: true },
@@ -34,6 +35,8 @@ const MIN_HEIGHT = 80;
 const width = ref(props.data.sticky.size?.width ?? DEFAULT_WIDTH);
 const height = ref(props.data.sticky.size?.height ?? DEFAULT_HEIGHT);
 const resizing = ref(false);
+const RESIZE_CORNER = 16;
+const resizeTarget = useCanvasTarget(RESIZE_CORNER);
 watch(() => props.data.sticky.size, (s) => {
   if (resizing.value) return;
   width.value = s?.width ?? DEFAULT_WIDTH;
@@ -191,7 +194,7 @@ function onViewMouseDown(e) {
 
   <!-- Card -->
   <div
-    class="relative flex flex-col overflow-hidden rounded-lg border text-sm leading-snug text-stone-700 shadow-sm"
+    class="relative flex flex-col rounded-lg border text-sm leading-snug text-stone-700 shadow-sm"
     :class="[
   selected ? 'ring-2 ring-emerald-400/60' : '',
   editing ? '' : 'cursor-grab active:cursor-grabbing'
@@ -209,7 +212,7 @@ function onViewMouseDown(e) {
     <!-- View mode -->
     <div
       v-if="!editing"
-      class="h-full w-full overflow-hidden whitespace-pre-wrap break-words px-3 py-2"
+      class="h-full w-full overflow-hidden rounded-[inherit] whitespace-pre-wrap break-words px-3 py-2"
       @mousedown="onViewMouseDown"
     >
       <!-- eslint-disable-next-line vue/no-v-html -- renderMarkdownLite escapes the note before it adds a tag -->
@@ -228,7 +231,7 @@ function onViewMouseDown(e) {
       ref="textareaEl"
       v-model="draft"
       :aria-label="t('integration.canvas.sticky.textarea.aria')"
-      class="nodrag nowheel h-full w-full resize-none bg-transparent px-3 py-2 text-sm leading-snug text-stone-700 outline-none placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-500/40"
+      class="nodrag nowheel h-full w-full resize-none rounded-[inherit] bg-transparent px-3 py-2 text-sm leading-snug text-stone-700 outline-none placeholder:text-stone-400 focus:ring-2 focus:ring-inset focus:ring-stone-500/40"
       :placeholder="t('integration.canvas.sticky.textarea.placeholder')"
       spellcheck="false"
       @blur="commitEdit"
@@ -239,20 +242,30 @@ function onViewMouseDown(e) {
 
     <!-- Bottom-right resize handle (hand-rolled; min 150x80). Gone on a
          read-only canvas: a handle that cannot resize is the same lie as a bin
-         that cannot delete. -->
+         that cannot delete. The hit area reaches past the note's corner (see
+         `resizeTarget`) — which is why the card no longer clips its overflow —
+         and the drawn corner sits in its top-left, exactly where it always sat. -->
     <div
       v-if="editable"
-      class="nodrag absolute bottom-0 right-0 flex size-4 cursor-se-resize items-end justify-end p-0.5 text-stone-400/80"
+      class="nodrag absolute cursor-se-resize"
+      :style="{
+  width: `${resizeTarget}px`,
+  height: `${resizeTarget}px`,
+  right: `${RESIZE_CORNER - resizeTarget}px`,
+  bottom: `${RESIZE_CORNER - resizeTarget}px`
+}"
       :title="t('integration.canvas.sticky.action.resize')"
       @pointerdown="onResizeStart"
       @pointermove="onResizeMove"
       @pointerup="onResizeEnd"
       @pointercancel="onResizeEnd"
     >
-      <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
-        <path d="M7 1 1 7" />
-        <path d="M7 4.5 4.5 7" />
-      </svg>
+      <div class="flex size-4 items-end justify-end p-0.5 text-stone-400/80">
+        <svg viewBox="0 0 8 8" class="size-2.5" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round">
+          <path d="M7 1 1 7" />
+          <path d="M7 4.5 4.5 7" />
+        </svg>
+      </div>
     </div>
   </div>
 </template>

package/dist/runtime/components/Integrations/WorkflowEdgeView.vue

@@ -92,6 +92,7 @@ function onHoverLeave() {
   }, 200);
 }
 const toolsVisible = computed(() => edgeActions !== null && !props.data?.replay && (hovered.value || isSelected.value));
+const unzoom = computed(() => 1 / (flow.viewport.value.zoom || 1));
 function removeEdge() {
   flow.removeEdges([props.id]);
 }
@@ -128,7 +129,7 @@ function spliceNode() {
     <div
       class="absolute pointer-events-none select-none rounded-md border px-1.5 py-0.5 text-mono shadow-sm"
       :style="{
-  transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] - (toolsVisible ? 16 : 0)}px)`,
+  transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] - (toolsVisible ? 16 * unzoom : 0)}px)`,
   color: color.label,
   background: color.bg,
   borderColor: color.stroke + '55'
@@ -142,7 +143,7 @@ function spliceNode() {
   <EdgeLabelRenderer v-if="toolsVisible">
     <div
       class="absolute z-20 flex items-center gap-0.5 rounded-md border border-black/[0.08] bg-white p-0.5 shadow-md"
-      :style="{ transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] + (props.data?.label ? 14 : 0)}px)`, pointerEvents: 'all' }"
+      :style="{ transform: `translate(-50%, -50%) translate(${path[1]}px, ${path[2] + (props.data?.label ? 14 * unzoom : 0)}px) scale(${unzoom})`, pointerEvents: 'all' }"
       @mouseenter="onHoverEnter"
       @mouseleave="onHoverLeave"
     >

package/dist/runtime/composables/useCanvasTarget.d.ts

@@ -0,0 +1,15 @@
+import { type ComputedRef } from 'vue';
+/**
+ * The smallest a pointer target may be on screen — WCAG 2.2 SC 2.5.8, promised in
+ * `specs/accessibility.md` AC-7.
+ */
+export declare const MIN_TARGET_PX = 24;
+/**
+ * The canvas-pixel size a control drawn **inside** the zoom transform needs so that it
+ * still measures `MIN_TARGET_PX` on screen, and never less than the `drawn` size it
+ * has at full zoom. Zoomed out to 50 %, a target has to be 48 canvas pixels to be hit
+ * as 24 — which is the whole problem with a control the canvas scales (PO-388).
+ */
+export declare function targetSize(drawn: number, zoom: number): number;
+/** `targetSize` against the live viewport of the canvas this component sits on. */
+export declare function useCanvasTarget(drawn: number): ComputedRef<number>;

package/dist/runtime/composables/useCanvasTarget.js

@@ -0,0 +1,10 @@
+import { computed } from "vue";
+import { useVueFlow } from "@vue-flow/core";
+export const MIN_TARGET_PX = 24;
+export function targetSize(drawn, zoom) {
+  return Math.max(drawn, MIN_TARGET_PX / (zoom || 1));
+}
+export function useCanvasTarget(drawn) {
+  const flow = useVueFlow();
+  return computed(() => targetSize(drawn, flow.viewport.value.zoom));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-integrations",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "type": "module",
   "description": "Integration Studio (core: workflows, node editor, runs, schedules, credentials, secrets, audit) as a standalone, publishable Nuxt module.",
   "repository": {