item width and height ratio (#61)

smariel · Dec 12, 2020 · 6248ea2 · 6248ea2
1 parent 5f696ce
commit 6248ea2
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/html/PTree.html b/html/PTree.html
@@ -224,17 +224,27 @@ <h5 class="bottom_subtitle">Display</h5>
             <input id="config_itemwidth" data-config="cell_width" class="config_input config_range" type="range" min="150" max="500" value="300" step="2" />
           </label>
           <br />
+          <label for="config_itemwidthcoef">
+            Width ratio: <span class="range_val">50</span>%
+            <input id="config_itemwidth" data-config="width_coef" class="config_input config_range" type="range" min="0" max="100" value="50" step="5" />
+          </label>
+          <br />
           <label for="config_itemheight">
             Item height: <span class="range_val">300</span>px
             <input id="config_itemheight" data-config="cell_height" class="config_input config_range" type="range" min="30" max="200" value="300" step="2" />
           </label>
           <br />
+          <label for="config_itemheightcoef">
+            Height ratio: <span class="range_val">50</span>%
+            <input id="config_itemheight" data-config="height_coef" class="config_input config_range" type="range" min="0" max="100" value="50" step="5" />
+          </label>
+        </p>
+        <p class="config">
           <label for="config_textsize">
             Text size: <span class="range_val">14</span>px
             <input id="config_textsize" data-config="text_size" class="config_input config_range" type="range" min="1" max="30" value="14" step="1" />
           </label>
-        </p>
-        <p class="config">
+          <br />
           <label for="config_zoom">
             Zoom: <span class="range_val">100</span>%
             <input id="config_zoom" data-config="zoom" class="config_input config_range" type="range" min="50" max="400" value="100" step="10" />

diff --git a/js/class.Canvas.js b/js/class.Canvas.js
@@ -54,6 +54,8 @@ class Canvas {
       zoom_export   : 100,
       cell_width    : 280,
       cell_height   : 90,
+      width_coef    : Canvas.app_template.item.width_coef,
+      height_coef   : Canvas.app_template.item.height_coef,
       text_size     : 14,
       color_source  : '#FF1744', // materialze red accent-3,
       color_load    : '#00bfa5', // materializ teal accent-4
@@ -104,9 +106,9 @@ class Canvas {
 
     // compute the main dimensions
     let itemGeometry = {};
-    itemGeometry.height     = Math.round(Canvas.app_template.item.height_coef  * this.config.cell_height);
+    itemGeometry.height     = Math.round(this.config.height_coef/100  * this.config.cell_height);
     itemGeometry.skew_error = (undefined === itemTemplate.skewX) ? 0 : Math.round(itemGeometry.height/Math.tan(-itemTemplate.skewX));
-    itemGeometry.width      = Math.round(Canvas.app_template.item.width_coef   * this.config.cell_width) - itemGeometry.skew_error;
+    itemGeometry.width      = Math.round(this.config.width_coef/100   * this.config.cell_width) - itemGeometry.skew_error;
     itemGeometry.x1         = (item.col  * this.config.cell_width ) + Canvas.app_template.canvas.margin_left;
     itemGeometry.y1         = (item.line * this.config.cell_height) + Canvas.app_template.canvas.margin_top;
     itemGeometry.x2         = itemGeometry.x1 + itemGeometry.width;
@@ -804,8 +806,8 @@ Canvas.app_template = {
     margin_bottom : 70,
   },
   item: {
-    width_coef  : 0.45,
-    height_coef : 0.75,
+    width_coef  : 45,
+    height_coef : 75,
   },
   verticalNet: {
     left_coef : 0.9