fix 9 slice

scripts/mum.js

@@ -1,6 +1,15 @@
 globalThis.mum = {};
 var panel;
 
+var selected = undefined;
+
+mum.inputs = {};
+mum.inputs.lm = function()
+{
+  if (!selected) return;
+  selected.action();
+}
+
 mum.base = {
   padding:[0,0], /* Each element inset with this padding on all sides */
   offset:[0,0],
@@ -30,6 +39,7 @@ mum.base = {
   image_repeat_offset: [0,0],
   debug: false, /* set to true to draw debug boxes */
   hide: false,
+  tooltip: null,
 }
 
 var post = function() {};
@@ -47,15 +57,6 @@ var end = function()
   if (!context) context = mum.base;
 }
 
-var listpost = function()
-{
-  var height = 0;
-  if (context.height) height += context.height;
-  else height += (context.bb.t - context.bb.b);
-  cursor.y -= height;
-  cursor.y -= context.padding.y; 
-}
-
 var pre = function(data)
 {
   if (data.hide || context.hide) return true;
@@ -64,6 +65,14 @@ var pre = function(data)
   context = data;
 }
 
+var listpost = function()
+{
+  var height = 0;
+  height += (context.bb.t - context.bb.b);
+  cursor.y -= height;
+  cursor.y -= context.padding.y; 
+}
+
 mum.list = function(fn, data = {})
 {
   if (pre(data)) return;
@@ -88,20 +97,83 @@ mum.image = function(path, data = {})
   end();
 }
 
-mum.button = function(str, data = {padding:[4,4]})
+mum.slice9 = function(path, data = {})
+{
+}
+
+var btnbb;
+var btnpost = function()
+{
+  btnbb = context.bb;
+}
+
+mum.button = function(str, data = {padding:[4,4], color:Color.black, hover:{color:Color.red}})
 {
   if (pre(data)) return;
-  var bb = render.text(str, cursor.add(context.padding), context.size, context.color);
+  posts.push(post);
-  render.rectangle([bb.l-context.padding.x, bb.b-context.padding.y], [bb.r+context.padding.y, bb.t+context.padding.y], Color.black);
+  post = btnpost;
-  context.bb = bb;
+  if (typeof str === 'string')
+    render.text(str, cursor.add(context.padding), context.size, context.color);
+  else
+    str();
+
+  if (data.hover && bbox.pointin(btnbb, input.mouse.screenpos())) {
+    data.hover.__proto__ = data;
+    context = data.hover;
+  }
+  render.rectangle([btnbb.l-context.padding.x, btnbb.b-context.padding.y], [btnbb.r+context.padding.y, btnbb.t+context.padding.y], context.color);
+  context.bb = btnbb;
+
+  post = posts.pop();
+  end();
+}
+
+mum.window = function(fn, data = {})
+{
+  data = Object.assign({
+    width:400,
+    height:400,
+    color: Color.black
+  }, data);
+
+  if (pre(data)) return;
+
+  cursor = context.pos;
+  render.rectangle(cursor, cursor.add([context.width,context.height]), context.color);
+  cursor.y += context.height;
+  cursor = cursor.add(context.padding);
+  context.pos = cursor.slice();
+  fn();
   end();
 }
 
 mum.label = function(str, data = {})
 {
   if (pre(data)) return;
-  render.set_font(data.font, data.font_size);
+  if (false) {
+    context.hover.__proto__ = context;
+    context = context.hover;
+  }
+
+  context.bb = render.text_bb(str, context.size, -1, cursor);
+
+  if (bbox.pointin(context.bb, input.mouse.screenpos())) {
+    if (context.hover) {
+      context.hover.__proto__ = context;
+      context = context.hover;
+      selected = context;
+    }
+  }
+
+  render.set_font(context.font, context.font_size);
   context.bb = render.text(str, cursor, context.size, context.color);
   
   end();
 }
+
+mum.div = function(fn, data = {})
+{
+  if (pre(data)) return;
+  fn();
+  end();
+}

scripts/render.js

@@ -490,7 +490,7 @@ render.rectangle = function(lowerleft, upperright, color) {
 render.box = function(pos, wh, color = Color.white) {
   var lower = pos.sub(wh.scale(0.5));
   var upper = pos.add(wh.scale(0.5));
-  render.rectangle(lower,upper,color);
+  render.recteangle(lower,upper,color);
 };
 
 render.window = function(pos, wh, color) {
@@ -499,19 +499,22 @@ render.window = function(pos, wh, color) {
   render.box(p,wh,color);
 };
 
-render.text = function(str, pos, size = 1, color = Color.white, wrap = -1, anchor = [0,1], cursor = -1) {
+render.text_bb = function(str, size = 1, wrap = -1, pos = [0,0])
-  
+{
   var bb = render.text_size(str,size,wrap);
   var w = (bb.r - bb.l);
   var h = (bb.t - bb.b);
 
-  //render.text draws with an anchor on top left corner
-  var p = pos.slice();
   bb.r += pos.x;
   bb.l += pos.x;
   bb.t += pos.y;
   bb.b += pos.y;
-  gui.text(str, p, size, color, wrap, cursor);
+  return bb;
+}
+
+render.text = function(str, pos, size = 1, color = Color.white, wrap = -1, anchor = [0,1], cursor = -1) {
+  var bb = render.text_size(str, size, wrap, pos);
+  gui.text(str, pos, size, color, wrap, cursor);
   return bb;
   
   p.x -= w * anchor.x;
@@ -551,12 +554,16 @@ render.slice9 = function(tex, pos, bb, scale = 1, color = Color.white)
   var t = os.make_transform();
   t.pos = pos;
   t.scale = [scale,scale,scale];
-  render.setpipeline(render.slice9.pipe);
+  render.setpipeline(slice9shader.pipe);
-  render.setunim4(0, render.slice9.vs.unimap.model.slot, t);
+  render.setunim4(0, slice9shader.vs.unimap.model.slot, t);
-  render.shader_apply_material(render.slice9, {
+  render.shader_apply_material(slice9shader, {
-    shade: color
+    shade: color,
+    diffuse:tex,
+    rect:[0,0,1,1],
+    border: [bb.l/tex.width, bb.b/tex.height, bb.r/tex.width, bb.t/tex.height],
+    scale: [scale,scale]
   });
-  var bind = render.sg_bind(render.slice9, shape.quad, {diffuse:tex});
+  var bind = render.sg_bind(slice9shader, shape.quad, {diffuse:tex});
   bind.inst = 1;
   render.spdraw(bind);
 }

shaders/9slice.cg

@@ -10,8 +10,10 @@ void vert()
 
 @block frag
 uniform vec4 border;
-// borders in pixels, x = left, y = bottom, z = right, w = top
+uniform vec2 scale;
-#define B vec4(10., 20., 30., 20.)
+uniform vec4 shade;
+
+// border given as [left,down,right,top], in scaled coordinates
 
 vec2 uv9slice(vec2 uv, vec2 s, vec4 b)
 {
@@ -21,20 +23,9 @@ vec2 uv9slice(vec2 uv, vec2 s, vec4 b)
 
 void frag()
 {
-  vec2 uv = fragCoord/iResolution.xy;
+  vec2 ruv = uv9slice(uv, scale, border);
-  vec2 ts = vec2(textureSize(iChannel0, 0));
+  color = texture(sampler2D(diffuse,smp), ruv);
-  // scaling factor
+  if (color.a < 0.1) discard;
-  // probably available as uniform irl
-  vec2 s = iResolution.xy / ts;
-
-  // border by texture size, shouldn't be > .5
-  // probably available as uniform irl
-  vec4 b = min(B / ts.xyxy, vec4(.499));
-  uv = uv9slice(uv, s, b);
-  
-  vec3 col = vec3(texture(iChannel0, uv).x);
-
-  fragColor = vec4(col,1.0);
 }
 @end