fixbug

web/javascript/video_mixlab.js

@@ -5,46 +5,13 @@ import { ComfyWidgets } from '../../../scripts/widgets.js'
 import { $el } from '../../../scripts/ui.js'
 import { injectCSS } from './common.js'
 
+import { get_position_style } from './common.js'
+
 injectCSS(`
 .hidden{
   display:none !important
 }`)
 
-function get_position_style (ctx, widget_width, y, node_height) {
-  const MARGIN = 4 // the margin around the html element
-
-  /* Create a transform that deals with all the scrolling and zooming */
-  const elRect = ctx.canvas.getBoundingClientRect()
-  const transform = new DOMMatrix()
-    .scaleSelf(
-      elRect.width / ctx.canvas.width,
-      elRect.height / ctx.canvas.height
-    )
-    .multiplySelf(ctx.getTransform())
-    .translateSelf(MARGIN, MARGIN + y)
-
-  return {
-    transformOrigin: '0 0',
-    transform: transform,
-    left:
-      document.querySelector('.comfy-menu').style.display === 'none'
-        ? `60px`
-        : `0`,
-    top: `0`,
-    cursor: 'pointer',
-    position: 'absolute',
-    maxWidth: `${widget_width - MARGIN * 2}px`,
-    // maxHeight: `${node_height - MARGIN * 2}px`, // we're assuming we have the whole height of the node
-    width: `${widget_width - MARGIN * 2}px`,
-    // height: `${node_height * 0.3 - MARGIN * 2}px`,
-    // background: '#EEEEEE',
-    display: 'flex',
-    flexDirection: 'column',
-    // alignItems: 'center',
-    justifyContent: 'space-around'
-  }
-}
-
 function videoUpload (node, inputName, inputData, app) {
   const imageWidget = node.widgets.find(w => w.name === 'video')
   let uploadWidget
@@ -53,13 +20,15 @@ function videoUpload (node, inputName, inputData, app) {
     type: 'div',
     name: 'upload-preview',
     draw (ctx, node, widget_width, y, widget_height) {
-      Object.assign(
-        this.div.style,
-        get_position_style(ctx, widget_width, 220, node.size[1]),
-        {
-          outline: '1px solid'
-        }
-      )
+      let d = {
+        ...get_position_style(ctx, widget_width - 12, 220, node.size[1], 44),
+        outline: '1px solid',
+        top: `${widget_height + 24}px`
+      }
+
+      delete d.height
+
+      Object.assign(this.div.style, d)
     }
   }
 
@@ -233,16 +202,17 @@ function offsetDOMWidget (widget, ctx, node, widgetWidth, widgetY, height) {
       elRect.height / ctx.canvas.height
     )
     .multiplySelf(ctx.getTransform())
-    .translateSelf(0, widgetY + margin)
+    .translateSelf(margin, widgetY + margin)
 
   const scale = new DOMMatrix().scaleSelf(transform.a, transform.d)
+
   Object.assign(widget.inputEl.style, {
     transformOrigin: '0 0',
     transform: scale,
-    left: `${transform.e}px`,
+    left: `${transform.a + transform.e}px`,
     top: `${transform.d + transform.f}px`,
     width: `${widgetWidth}px`,
-    height: `${(height || widget.parent?.inputHeight || 32) - margin}px`,
+    height: `${(height || widget.parent?.inputHeight || 32) - margin * 2}px`,
     position: 'absolute',
     background: !node.color ? '' : node.color,
     color: !node.color ? '' : 'white',