Shrink resizing margins on small elements

index.html

@@ -6,7 +6,7 @@
     <script src="https://unpkg.com/fengari-web/dist/fengari-web.js" async></script>
     <script src="https://unpkg.com/interactjs/dist/interact.min.js" async></script>
     <script src="index.js" async></script>
-    <script type="application/lua" src="index.lua?rev=7" async defer></script>
+    <script type="application/lua" src="index.lua?rev=8" async defer></script>
     <style>
     body {
         background: #8CBAFA;

index.js

@@ -25,7 +25,8 @@ basic_interact.snap = () => {
     return snap;
 };
 
-basic_interact.add = (target, draggable, resizable, callback) => {
+basic_interact.add = (target, draggable, resizable, callback,
+        smallResizeMargin) => {
     let x = 0;
     let y = 0;
     target.style.touchAction = "none";
@@ -95,6 +96,7 @@ basic_interact.add = (target, draggable, resizable, callback) => {
                 // }),
                 basic_interact.snap()
             ],
+            margin: smallResizeMargin ? 10 : 20,
             invert: "reposition",
         });
 };

index.lua

@@ -18,7 +18,7 @@
 --
 
 -- Load the renderer
-dofile('renderer.lua?rev=9')
+dofile('renderer.lua?rev=10')
 local formspec_escape = formspec_ast.formspec_escape
 
 local _, digistuff_ts_export = dofile('digistuff_ts.lua?rev=4')
@@ -351,13 +351,18 @@ local function show_properties(elem, node)
 end
 
 -- Set up drag+drop. This is mostly done in JavaScript for performance.
-function renderer.default_elem_hook(node, elem)
+function renderer.default_elem_hook(node, elem, scale)
     local basic_interact = js.global.basic_interact
     if not basic_interact then return show_properties end
 
     local draggable = node.x ~= nil and node.y ~= nil
     local resizable = node.w ~= nil and node.h ~= nil and node.type ~= "list"
 
+    local small_resize_margin = false
+    if resizable and (node.w * scale < 60 or node.h * scale < 60) then
+        small_resize_margin = true
+    end
+
     local orig_x, orig_y = node.x, node.y
     basic_interact:add(elem, draggable, resizable, function(_, x, y, w, h)
         local modified
@@ -383,7 +388,7 @@ function renderer.default_elem_hook(node, elem)
         else
             show_properties(elem)
         end
-    end)
+    end, small_resize_margin)
 
     return true
 end

renderer.lua

@@ -348,7 +348,7 @@ function renderer.render_ast(tree, callbacks, options)
             if type(callbacks) == 'table' then
                 func = callbacks[node.name or '']
             elseif callbacks == nil then
-                func = renderer.default_elem_hook(node, e)
+                func = renderer.default_elem_hook(node, e, scale)
             end
             if func then
                 if type(func) == 'function' then