From 385a8baa809c107370cdddd95343672b7ff8d9fc Mon Sep 17 00:00:00 2001
From: Sylvain Mariel <sylvain.mariel@otmax.fr>
Date: Sun, 25 Dec 2022 23:02:19 +0100
Subject: [PATCH] stacked item

---
 html/PTree.html         |  5 +++++
 html/itemEditor.html    | 18 ++++++++++--------
 js/class.Canvas.js      | 22 +++++++++++++++++++---
 js/class.Item.Load.js   |  9 +++++----
 js/class.Item.Source.js |  1 +
 5 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/html/PTree.html b/html/PTree.html
index d1e6336..41e6659 100644
--- a/html/PTree.html
+++ b/html/PTree.html
@@ -245,6 +245,11 @@ <h5 class="bottom_subtitle">Display</h5>
             <input id="config_textsize" data-config="text_size" class="config_input config_range" type="range" min="1" max="30" value="14" step="1" />
           </label>
           <br />
+          <label for="config_textmargin">
+            Text margin: <span class="range_val">10</span>px
+            <input id="config_textmargin" data-config="text_margin" class="config_input config_range" type="range" min="0" max="50" value="10" step="1" />
+          </label>
+          <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/html/itemEditor.html b/html/itemEditor.html
index 7d82fbc..311c1d1 100644
--- a/html/itemEditor.html
+++ b/html/itemEditor.html
@@ -51,16 +51,18 @@ <h3>Description</h3>
           <div class="col-xs-6"><label for="badge_out">Output badge</label><input id="input_badge_out" type="text" data-itemdata="badge_out" class="form-control item-control" placeholder="..." /></div>
         </div>
         <div class="form-group row">
-          <div class="col-xs-12">
+          <div class="col-xs-9">
             <label for="source_shape">Shape</label>
-          </div>
-          <div class="col-xs-12">
             <select id="source_shape" data-itemdata="shape" class="form-control item-control">
               <option value="0">Rectangle</option>
               <option value="1">Rounded rectangle</option>
               <option value="2">Parallelogram</option>
             </select>
           </div>
+          <div class="col-xs-3">
+            <label for="input_quantity">Quantity</label>
+            <input id="input_quantity" type="text" data-itemdata="quantity" class="form-control input_num item-control" placeholder="1" data-toggle="tooltip" data-placement="bottom" title="Number of stacked item (only graphical)" />
+          </div>
         </div>
         <div class="form-group row">
           <div class="col-xs-12">
@@ -77,8 +79,6 @@ <h3>Characteristics</h3>
           <!-- REGULATOR TYPE -->
           <div class="col-xs-12">
             <label for="source_regtype">Regulator type</label>
-          </div>
-          <div class="col-xs-12">
             <select id="source_regtype" data-itemdata="regtype" class="form-control item-control" data-toggle="tooltip">
               <optgroup label="Fixed output">
                 <option value="0">DC/DC switching regulator</option>
@@ -258,16 +258,18 @@ <h3>Description</h3>
           </div>
         </div>
         <div class="form-group row">
-          <div class="col-xs-12">
+          <div class="col-xs-9">
             <label for="load_shape">Shape</label>
-          </div>
-          <div class="col-xs-12">
             <select id="load_shape" data-itemdata="shape" class="form-control item-control">
               <option value="0">Rectangle</option>
               <option value="1">Rounded rectangle</option>
               <option value="2">Parallelogram</option>
             </select>
           </div>
+          <div class="col-xs-3">
+            <label for="load_quantity">Quantity</label>
+            <input id="load_quantity" type="text" data-itemdata="quantity" class="form-control input_num item-control" placeholder="1" data-toggle="tooltip" data-placement="bottom" title="Number of stacked item (only graphical)" />
+          </div>
         </div>
         <div class="form-group row">
           <div class="col-xs-12">
diff --git a/js/class.Canvas.js b/js/class.Canvas.js
index 3f56a15..583d1d3 100644
--- a/js/class.Canvas.js
+++ b/js/class.Canvas.js
@@ -59,6 +59,7 @@ class Canvas {
       width_coef      : Canvas.app_template.item.width_coef,
       height_coef     : Canvas.app_template.item.height_coef,
       text_size       : 14,
+      text_margin     : 10,
       color_source    : '#FF1744', // materialze red accent-3,
       color_load      : '#00bfa5', // materializ teal accent-4
       display_typmax  : 'max',
@@ -119,7 +120,7 @@ class Canvas {
     itemGeometry.xvnet      = itemGeometry.x1 + Math.round(this.config.cell_width * Canvas.app_template.verticalNet.left_coef);
     itemGeometry.xhalf      = itemGeometry.x1 + Math.round(itemGeometry.width /2 + itemGeometry.skew_error/2);
     itemGeometry.yhalf      = itemGeometry.y1 + Math.round(itemGeometry.height/2);
-
+    itemGeometry.textmargin = Math.max((item.characs.quantity-1)*Canvas.app_template.item.quantity_gap, this.config.text_margin);
 
     // create a rectangle with the correct template
     // and add it to the canvas
@@ -171,6 +172,20 @@ class Canvas {
     this.fabricCanvas.fabric_obj[item.id] = itemGroup;
     this.fabricCanvas.add(itemGroup);
 
+    // add stacked rectangles with darker color if quantity > 1
+    for(let i=1; i<item.characs.quantity; i++){
+      let itemRect2 = new fabric.Rect(itemTemplate);
+      itemRect2.set({
+        left  : itemGeometry.x1+Canvas.app_template.item.quantity_gap*i,
+        top   : itemGeometry.y1+Canvas.app_template.item.quantity_gap*i,
+        width : itemGeometry.width,
+        height: itemGeometry.height,
+        fill  : Util.pickColorHex(item_color,'#000000',1-(i+1)*0.5/item.characs.quantity)
+      });
+      this.fabricCanvas.add(itemRect2);
+      itemRect2.sendToBack();
+    }
+
     // Add some text around the item
     this.addTexts(item, itemGeometry);
 
@@ -200,7 +215,7 @@ class Canvas {
           originX  : 'left',
           originY  : 'top',
           top      : itemGeometry.yhalf - Canvas.app_template.text.margin_y - this.config.text_size,
-          left     : itemGeometry.x2    + Canvas.app_template.text.margin_x + itemGeometry.skew_error,
+          left     : itemGeometry.x2    + itemGeometry.textmargin + itemGeometry.skew_error,
           fontSize : this.config.text_size
         });
         this.fabricCanvas.add(itemText_vout);
@@ -229,7 +244,7 @@ class Canvas {
           originX : 'left',
           originY : 'top',
           top     : itemGeometry.yhalf + Canvas.app_template.text.margin_y - 2,
-          left    : itemGeometry.x2    + Canvas.app_template.text.margin_x + itemGeometry.skew_error,
+          left    : itemGeometry.x2    + itemGeometry.textmargin + itemGeometry.skew_error,
           fontSize: this.config.text_size
         });
         this.fabricCanvas.add(itemText_ipout);
@@ -822,6 +837,7 @@ Canvas.app_template = {
   item: {
     width_coef  : 45,
     height_coef : 75,
+    quantity_gap: 5,
   },
   verticalNet: {
     left_coef : 0.9
diff --git a/js/class.Item.Load.js b/js/class.Item.Load.js
index 745fcff..46f2951 100644
--- a/js/class.Item.Load.js
+++ b/js/class.Item.Load.js
@@ -33,10 +33,11 @@ class Load extends Item {
       celltyp    : 'A1',
       cellmax    : 'B1',
       hidden     : false,
-      shape      : 1,  // v1.7.0
-      badge_in   : '', // v1.7.0
-      ptyp       : 0,  // v2.1.0
-      pmax       : 0,  // v2.1.0
+      shape      : 1,    // v1.7.0
+      badge_in   : '',   // v1.7.0
+      ptyp       : 0,    // v2.1.0
+      pmax       : 0,    // v2.1.0
+      quantity    : '1', // v2.1.3
     };
   }
 
diff --git a/js/class.Item.Source.js b/js/class.Item.Source.js
index f4d2ba2..5002b0b 100644
--- a/js/class.Item.Source.js
+++ b/js/class.Item.Source.js
@@ -58,6 +58,7 @@ class Source extends Item {
       badge_in    : '',  // v1.7.0
       badge_out   : '',  // v1.7.0
       resistor    : '0', // v2.0.2
+      quantity    : '1', // v2.1.3
       sequence    : {    // v2.0.0
         enable: {
           exist:       true,