Mercurial Mercurial > beremiz / changeset
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | raw | bz2 | zip | gz | help
SVGHMI: fix scrollbar not behaving when rotated. svghmi
authorEdouard Tisserant <edouard.tisserant@gmail.com>
Sun, 14 Feb 2021 05:17:25 +0100
branchsvghmi
changeset 3138 1d724e8d5592
parent 3137 ac3ec66e9c6d
child 3139 1f5ca646ce6e
SVGHMI: fix scrollbar not behaving when rotated.
svghmi/widget_scrollbar.ysl2 file | annotate | diff | comparison | revisions
tests/svghmi_scrollbar/svghmi_0@svghmi/svghmi.svg file | annotate | diff | comparison | revisions 
--- a/svghmi/widget_scrollbar.ysl2	Sun Feb 14 05:15:13 2021 +0100
+++ b/svghmi/widget_scrollbar.ysl2	Sun Feb 14 05:17:25 2021 +0100
@@ -65,6 +65,13 @@
         }
 
         on_cursor_down(e){
+            // get scrollbar -> root transform
+            let ctm = this.range_elt.getCTM();
+            // relative motion -> discard translation
+            ctm.e = 0;
+            ctm.f = 0;
+            // root -> scrollbar transform
+            this.invctm = ctm.inverse();
             svg_root.addEventListener("pointerup", this.bound_drop, true);
             svg_root.addEventListener("pointermove", this.bound_drag, true);
         }
@@ -77,9 +84,8 @@
         drag(e) {
             let [size, maxh, range, pixels, units] = this.get_ratios();
             if(pixels == 0) return;
-            let matrix = this.range_elt.getCTM().inverse();
             let point = new DOMPoint(e.movementX, e.movementY);
-            let movement = point.matrixTransform(matrix).y;
+            let movement = point.matrixTransform(this.invctm).y;
             this.apply_position(this.position + movement * units / pixels);
         }
     }
--- a/tests/svghmi_scrollbar/svghmi_0@svghmi/svghmi.svg	Sun Feb 14 05:15:13 2021 +0100
+++ b/tests/svghmi_scrollbar/svghmi_0@svghmi/svghmi.svg	Sun Feb 14 05:17:25 2021 +0100
@@ -56,12 +56,12 @@
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
      inkscape:document-units="px"
-     inkscape:current-layer="g4507"
+     inkscape:current-layer="hmi0"
      showgrid="false"
      units="px"
      inkscape:zoom="0.64"
-     inkscape:cx="512.75649"
-     inkscape:cy="208.59799"
+     inkscape:cx="318.22524"
+     inkscape:cy="196.09799"
      inkscape:window-width="1939"
      inkscape:window-height="1243"
      inkscape:window-x="3325"
@@ -380,7 +380,7 @@
   <g
      id="g1913"
      inkscape:label="HMI:Input@.size"
-     transform="translate(80)">
+     transform="translate(80,100)">
     <rect
        style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
        id="rect4827"
@@ -500,7 +500,7 @@
     </g>
   </g>
   <g
-     transform="translate(80,-160)"
+     transform="translate(80,-60)"
      inkscape:label="HMI:Input@.range"
      id="g4450">
     <rect
@@ -624,7 +624,7 @@
   <g
      id="g4490"
      inkscape:label="HMI:Input@.position"
-     transform="translate(80,-320)">
+     transform="translate(80,-220)">
     <rect
        style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ff0000;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
        id="rect4452"
@@ -745,7 +745,8 @@
   </g>
   <g
      id="g4507"
-     inkscape:label="HMI:ScrollBar@.position@.range@.size">
+     inkscape:label="HMI:ScrollBar@.position@.range@.size"
+     transform="translate(-202)">
     <rect
        y="84"
        x="960"
@@ -790,19 +791,19 @@
      xml:space="preserve"
      style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
      x="277.58728"
-     y="176.54129"
+     y="276.54129"
      id="text941"><tspan
        sodipodi:role="line"
        id="tspan939"
        x="277.58728"
-       y="176.54129">Position</tspan></text>
+       y="276.54129">Position</tspan></text>
   <text
      id="text945"
-     y="336.54129"
+     y="436.54129"
      x="277.58728"
      style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
      xml:space="preserve"><tspan
-       y="336.54129"
+       y="436.54129"
        x="277.58728"
        id="tspan943"
        sodipodi:role="line">Range</tspan></text>
@@ -810,10 +811,81 @@
      xml:space="preserve"
      style="font-style:normal;font-weight:normal;font-size:40px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
      x="277.58728"
-     y="496.54126"
+     y="596.54126"
      id="text949"><tspan
        sodipodi:role="line"
        id="tspan947"
        x="277.58728"
-       y="496.54126">Size</tspan></text>
+       y="596.54126">Size</tspan></text>
+  <g
+     inkscape:label="HMI:ScrollBar@.position@.range@.size"
+     id="g146"
+     transform="rotate(90,837.8103,-106.02497)">
+    <rect
+       inkscape:label="range"
+       style="opacity:1;vector-effect:none;fill:#ff35ff;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
+       id="rect138"
+       width="100"
+       height="516"
+       x="960"
+       y="84" />
+    <rect
+       inkscape:label="cursor"
+       style="opacity:1;vector-effect:none;fill:#3835ff;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
+       id="rect140"
+       width="81"
+       height="171"
+       x="969"
+       y="236" />
+    <path
+       inkscape:label="pageup"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="path142"
+       d="M 1009.5,23 1047,81 H 972 Z"
+       style="opacity:1;vector-effect:none;fill:#3835ff;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none" />
+    <path
+       inkscape:label="pagedown"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="path144"
+       d="m 972,603 h 75 l -37.5,58 z"
+       style="opacity:1;vector-effect:none;fill:#3835ff;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none" />
+  </g>
+  <g
+     transform="matrix(0.35355339,0.35355339,-0.35355339,0.35355339,831.43929,-136.17916)"
+     inkscape:label="HMI:ScrollBar@.position@.range@.size"
+     id="g156"
+     style="stroke-width:2">
+    <rect
+       inkscape:label="range"
+       style="opacity:1;vector-effect:none;fill:#ff35ff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
+       id="rect148"
+       width="100"
+       height="516"
+       x="960"
+       y="84" />
+    <rect
+       inkscape:label="cursor"
+       style="opacity:1;vector-effect:none;fill:#3835ff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none"
+       id="rect150"
+       width="81"
+       height="171"
+       x="969"
+       y="236" />
+    <path
+       inkscape:label="pageup"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="path152"
+       d="M 1009.5,23 1047,81 H 972 Z"
+       style="opacity:1;vector-effect:none;fill:#3835ff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none" />
+    <path
+       inkscape:label="pagedown"
+       sodipodi:nodetypes="cccc"
+       inkscape:connector-curvature="0"
+       id="path154"
+       d="m 972,603 h 75 l -37.5,58 z"
+       style="opacity:1;vector-effect:none;fill:#3835ff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none" />
+  </g>
 </svg>
beremiz