Coder Social home page Coder Social logo

Comments (3)

MustafaHi avatar MustafaHi commented on June 11, 2024 1

Capture functionality is NOT added yet.

And you are doing it correctly, e.target.state.capture = true
e.target.state.capture(true)

Test code:

//| Movable View v1.3.0
//| https://github.com/MustafaHi/Sciter-MovableView

//| Call movableView('selector' [, screenBound:bool(false)]);

//| Note about standard frame:
//| if you want the library to ignore title bar then change
//| line:20| #border to #client
//| line:49| last parameter to true

if (!Number.prototype.limit) {
  Number.prototype.limit = function(min,max) {
    if (this < min) return min;
    if (this > max) return max;
    return this;
  }
}

function movableView(s, screenBound = false)
{
  var cap = true; //| USE CAPTURE
  var xoff,yoff, minXY, maxX, maxY;
  var dragging = false;
  
  // function doDrag() { while( dragging ) view.doEvent(); }

  function screenBounds()
  {
    if (screenBound)
    {
      [maxX, maxY] = Window.this.screenBox("workarea", "dimension");
      var [w, h]   = Window.this.box("dimension", "border");
      console.log(maxX, maxY);
      console.log(w, h);
      maxX -= w;
      maxY -= h;
      minXY = 0;
    }
    else
    {
      maxX = Number.MAX_SAFE_INTEGER;
      maxY = Number.MAX_SAFE_INTEGER;
      minXY = Number.MIN_SAFE_INTEGER;
    }
  }
    
  function onMouseDown(e)
  {
    // console.log("mousedown");
    // if(!e.target.$is({s}) ) { return false; }

    screenBounds();
    
    console.log("clientX : " + e.clientX);
    console.log("clientY : " + e.clientY);
    console.log("screenX : " + e.screenX);
    console.log("screenY : " + e.screenY);
    // e.target.setCapture(true);
    var [x,y] = Window.this.box("position", "border", "screen");
    console.log("x : " + x);
    console.log("y : " + y);
    var offX = (e.screenX - x);
    var offY = (e.screenY - y);
    console.log("solveX : " + offX);
    console.log("solveY : " + offY);
    xoff = offX; yoff = offY;
    dragging = true;
    
    if (cap) {
      console.log(e.target);
      e.target.state.capture = true;
    }
    else {
      document.on("mouseup"  , onMouseUp   );
      document.on("mousemove", onMouseMove );
    }
    e.preventDefault();
    e.stopPropagation();
    // doDrag();
  }
  
  function onMouseMove(e)
  {
    if(dragging)
    {
      e.preventDefault();
      // e.preventDefault();
      // e.stopPropagation();
      // console.log("draging");
      // view.move( (e.xScreen - xoff).limit(minXY, maxX), (e.yScreen - yoff).limit(minXY, maxY), false );
      Window.this.move((e.screenX - xoff).limit(minXY, maxX), (e.screenY - yoff).limit(minXY, maxY));
      // Window.this.move((e.screenX - xoff), (e.screenY - yoff));
    }
    return true;
  }
    
  function onMouseUp(e)
  {
    // console.log("mouseup");
    if(dragging) { dragging = false; }
    if (cap) {
      e.target.state.capture = false;
    } else {
      document.off("mouseup");
      document.off("mousemove");
    }
    e.preventDefault();
    // return true;
  }
    
    const elements = document.querySelectorAll(s);
    console.log(elements);
    for(var i=0; i<elements.length; ++i) {
      elements[i].on("mousedown", onMouseDown );
      if (cap) {
        elements[i].on("mouseup"  , onMouseUp   );
        elements[i].on("mousemove", onMouseMove );
      }
    }
  return true;
}

from sciter-movableview.

MustafaHi avatar MustafaHi commented on June 11, 2024 1

😁 just miscommunication, it's Element.state.capture(true|false).

Sciter.JS released

from sciter-movableview.

GirkovArpa avatar GirkovArpa commented on June 11, 2024

I guess I was confused by this response in the forums, because a day later 4.4.6.3 was released and I thought that's what they meant 😄

from sciter-movableview.

Related Issues (4)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.