(UTC)
  The MindFusion Forums › Flow Diagramming Components › Html Canvas & JavaScript › horizontal scroll on top of canvas not bottom
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic horizontal scroll on top of canvas not bottom (Read 2192 times)
agelospanagiotakis
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 9
Joined: Mar 27th, 2007
horizontal scroll on top of canvas not bottom
Jul 2nd, 2014 at 9:24am
Print Post  
i created a demo to scroll the canvas by using a controll on the top (not the bottom of the canvas) but i wonder if this code would work with a diagram instead of an image

Code (HTML)
Select All
<!doctype html>
<html>
<head>
 <!-- reset css -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

<style>
body{ background-color: ivory; }
div, canvas {
    position:absolute;
}
.wrapper {
    top:20px;
    left:10px;
    width: 300px;
    height: 300px;
    border: 2px solid black;
    margin:30px 0 2;
    overflow: hidden;
    background-color:green;
}
.vertical-scroll {
    left:312px;
    top:20px;
    border: 1px solid green;
    width: 20px;
    height: 302px;
}
.vertical-scroll div.vbarClass {
    left:0px;
    top:0px;
    width: 20px;
    background-color: blue;
    height: 20px;
}

.horizontal-scroll {
    position:relative;
	left:2px;
    border: 1px solid green;
    width: 300px;
    height: 10px;
}
.horizontal-scroll div.hbarClass {
    position:relative;
	width: 20px;
    background-color: red;
    height: 10px;
}


#mycanvas {
    left:0px;
    top:0px;
}

</style>

<script>
    $(function(){

        var canvas=document.getElementById("mycanvas");
        var ctx=canvas.getContext("2d");

        var wrapper;

		var canvasWidth;
        var vScrollWidth;
        var canvasWrapperWidth=300;

        var canvasHeight;
        var vScrollHeight;
        var canvasWrapperHeight=300;

        $(".vbarClass").draggable({
            containment: "parent"
        });

        $(".vbarClass").on("drag", function (event, ui) {
            var ctop=(-ui.position.top * canvasHeight / canvasWrapperHeight);
            canvas.style.top = ctop + "px"

		});
		 $(".hbarClass").draggable({
            containment: "parent"
        });

        $(".hbarClass").on("drag", function (event, ui) {
        	var cleft=(-ui.position.left * canvasWidth / canvasWrapperWidth);
            canvas.style.left = cleft + "px"
		});



        var img=new Image();
        img.onload=function(){
          canvas.width=this.width;
          canvas.height=this.height;
          canvasHeight=this.height;
          vbarHeight=canvasWrapperHeight*canvasWrapperHeight/canvasHeight;

		  canvasWidth=this.width;
          vbarWidth=canvasWrapperWidth*canvasWrapperWidth/canvasWidth;


		  document.getElementById("vbar").style.height=vbarHeight+"px";
		  document.getElementById("hbar").style.width=vbarWidth+"px";

          ctx.drawImage(this,260,0,this.width,this.height,0,0,this.width,this.height);
        }
        img.src="C:\\Users\\Public\\Pictures\\Sample Pictures\\Jellyfish.jpg";

    }); // end $(function(){});
</script>

</head>

<body>

<div class="horizontal-scroll" id="hscroll">
        <div class="hbarClass" id="hbar"></div>
    </div>

    <div class="wrapper" id="wrap1">
        <canvas id="mycanvas" width="300px" height="300px" />
    </div>
    <div class="vertical-scroll " id="vscroll">
        <div class="vbarClass" id="vbar"></div>
    </div>

 </body>
</html>



any sujestions would be really helpfull
  
Back to top
 
IP Logged
 
Stoyo
God Member
*****
Offline


MindFusion support

Posts: 13230
Joined: Jul 20th, 2005
Re: horizontal scroll on top of canvas not bottom
Reply #1 - Jul 3rd, 2014 at 12:32pm
Print Post  
Hi,

With this version you can integrate your custom scrollbars using code below:
https://mindfusion.eu/_beta/jsdiag21.zip

Code (Javascript)
Select All
<script>
    $(function ()
    {
        var canvasWrapperWidth = 300;
        var canvasWrapperHeight = 300;

        var canvasHeight, canvasWidth;

        var diagram = MindFusion.Diagramming.Diagram.create($("#mycanvas")[0]);
        diagram.addEventListener(MindFusion.Diagramming.Events.sizeChanged, onSizeChanged);

        var originalScrollTo = MindFusion.Diagramming.Diagram.prototype.scrollTo;
        MindFusion.Diagramming.Diagram.prototype.scrollTo = function (x, y)
        {
            scrollTo(x, y);
            return originalScrollTo.apply(this, [x, y]);
        };

        setScrollSize();

        $(".vbarClass").draggable({
            containment: "parent"
        });

        $(".vbarClass").on("drag", function (event, ui)
        {
            var ctop = ui.position.top * canvasHeight / canvasWrapperHeight;
            var point = diagram.clientToDoc({ x: 0, y: ctop });
            diagram.setScrollY(point.y);

        });
        $(".hbarClass").draggable({
            containment: "parent"
        });

        $(".hbarClass").on("drag", function (event, ui)
        {
            var cleft = ui.position.left * canvasWidth / canvasWrapperWidth;
            var point = diagram.clientToDoc({ x: cleft, y: 0 });
            diagram.setScrollX(point.x);
        });

        function setScrollSize()
        {
            canvasHeight = diagram.get_element().height;
            canvasWidth = diagram.get_element().width;

            var vbarHeight = canvasWrapperHeight * canvasWrapperHeight / canvasHeight;
            var vbarWidth = canvasWrapperWidth * canvasWrapperWidth / canvasWidth;

            document.getElementById("vbar").style.height = vbarHeight + "px";
            document.getElementById("hbar").style.width = vbarWidth + "px";
            document.title = [vbarHeight, vbarWidth];
        }

        function scrollTo(x, y)
        {
            var x = diagram.getScrollX();
            var y = diagram.getScrollY();
            var point = diagram.docToClient({ x: x, y: y });
            document.getElementById("hbar").style.left = point.x * canvasWrapperWidth / canvasWidth + "px";
            document.getElementById("vbar").style.top = point.y * canvasWrapperHeight / canvasHeight + "px";
        }

        function onSizeChanged(sender, args)
        {
            setScrollSize();
        }
    });
</script>


I hope that helps,
Stoyan
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge