The splitting job should allow for different border widths in different directions (BZ#2962)

[qx-bug-importer]

Jean-Noel Rivasseau (elvanor) wrote:

Very often an image needs to be splitted with a different width for the top and the bottom, or for the top and the left.

Currently only specifying an uniform width is possible for the splitting job. Underlneath ImageMagick is used, so I guess it should not be very difficult to add this improvement.

I currently have to split images "manually" because of this.

assigned to Daniel Wagner (@danielwagner)

[qx-bug-importer]

Andreas Ecker (@ecker) wrote:

Fabian, how much effort would that be? This enhancement might have to wait ...

[qx-bug-importer]

Thomas Herchenroeder (@thron7) wrote:

We have already a "border-width" attribute for the "slice-images" action, which currently takes the named uniform width [1]. This could be turned into an array, and the values passed to the function calling out to ImageMagick.

[1] http://qooxdoo.org/documentation/0.8/generator_config_ref#slice-images

[qx-bug-importer]

Matthew (matthew+qooxdoo) wrote:

it would also be nice if the grid decorator, combiner, splitter etc.. all skip any sides where the width is 0

[qx-bug-importer]

Jean-Noel Rivasseau (elvanor) wrote:

Totally agreed with last comment. In fact the real blocker for us is that the Grid decorator still looks for images with 0 width, resulting in ugly 404s.

Maybe I should open a separate bug report for this?

[qx-bug-importer]

Matthew (matthew+qooxdoo) wrote:

I have had a look at the grid decorator and it will be fairly easy to update the decorator class to support this functionality. As is it will work fine with different border widths on different edges. It is just a case of updating it to ignore images with a 0 width or height. I don't mind creating a patch for this when I get time. After that though the generator will need to be updated to support array for border widths

[qx-bug-importer]

Matthew (matthew+qooxdoo) wrote:

Patch for the grid decorator

This fixes the problem with the grid decorator when images are missing. This doesn't include anything for the generator though

Patch for the grid decorator

Index: framework/source/class/qx/ui/decoration/Grid.js
===================================================================
--- framework/source/class/qx/ui/decoration/Grid.js (revision 20391)
+++ framework/source/class/qx/ui/decoration/Grid.js (working copy)
@@ -115,6 +115,7 @@
     __markup : null,
     __images : null,
     __edges : null,
+    __parts : null,

     // overridden
@@ -151,6 +152,7 @@
       var Decoration = qx.bom.element.Decoration;
       var images = this.__images;
       var edges = this.__edges;
+      var parts = (this.__parts = {});

       // Create edges and vertical sides
       // Order: tl, t, tr, bl, b, bt, l, c, r
@@ -161,20 +163,36 @@
       // dragging when the cursor is in the text field in Spinners etc.
       html.push('<div style="position:absolute;top:0;left:0;overflow:hidden;font-size:0;line-height:0;">');

+      function addPart(part, repeat, style)
+      {
+        if ((style.top    !== 0 || edges.top)    &&
+            (style.left   !== 0 || edges.left)   &&
+            (style.bottom !== 0 || edges.bottom) &&
+            (style.right  !== 0 || edges.right))
+        {
+          parts[part] = html.length - 1; 
+          html.push(Decoration.create(images[part], repeat, style));
+        }
+        else
+        {
+          parts[part] = -1;
+        }
+      }
+
       // Top: left, center, right
-      html.push(Decoration.create(images.tl, "no-repeat", { top: 0, left: 0 }));
-      html.push(Decoration.create(images.t, "scale-x", { top: 0, left: edges.left + "px" }));
-      html.push(Decoration.create(images.tr, "no-repeat", { top: 0, right : 0 }));
+      addPart("tl", "no-repeat", { top: 0, left: 0 });
+      addPart("t",  "scale-x",   { top: 0, left: edges.left + "px" });
+      addPart("tr", "no-repeat", { top: 0, right : 0 });

       // Bottom: left, center, right
-      html.push(Decoration.create(images.bl, "no-repeat", { bottom: 0, left:0 }));
-      html.push(Decoration.create(images.b, "scale-x", { bottom: 0, left: edges.left + "px" }));
-      html.push(Decoration.create(images.br, "no-repeat", { bottom: 0, right: 0 }));
+      addPart("bl", "no-repeat", { bottom: 0, left:0 });
+      addPart("b",  "scale-x",   { bottom: 0, left: edges.left + "px" });
+      addPart("br", "no-repeat", { bottom: 0, right: 0 });

       // Middle: left, center, right
-      html.push(Decoration.create(images.l, "scale-y", { top: edges.top + "px", left: 0 }));
-      html.push(Decoration.create(images.c, "scale", { top: edges.top + "px", left: edges.left + "px" }));
-      html.push(Decoration.create(images.r, "scale-y", { top: edges.top + "px", right: 0 }));
+      addPart("l", "scale-y", { top: edges.top + "px", left: 0 });
+      addPart("c", "scale",   { top: edges.top + "px", left: edges.left + "px" });
+      addPart("r", "scale-y", { top: edges.top + "px", right: 0 });

       // Outer frame
       html.push('</div>');
@@ -189,6 +207,7 @@
     {
       // Compute inner sizes
       var edges = this.__edges;
+      var parts = this.__parts;
       var innerWidth = width - edges.left - edges.right;
       var innerHeight = height - edges.top - edges.bottom;

@@ -200,14 +219,21 @@
       element.style.width = width + "px";
       element.style.height = height + "px";

-      element.childNodes[1].style.width = innerWidth + "px";
-      element.childNodes[4].style.width = innerWidth + "px";
-      element.childNodes[7].style.width = innerWidth + "px";
+      function fixSize(index, fixWidth, fixHeight)
+      {
+        if (index !== -1)
+        {
+          var part = element.childNodes[index];
+          if (fixWidth)  { part.style.width  = innerWidth  + "px"; }
+          if (fixHeight) { part.style.height = innerHeight + "px"; }
+        }
+      }
+      fixSize(parts.t, true,  false);
+      fixSize(parts.b, true,  false);
+      fixSize(parts.c, true,  true);
+      fixSize(parts.l, false, true);
+      fixSize(parts.r, false, true);

-      element.childNodes[6].style.height = innerHeight + "px";
-      element.childNodes[7].style.height = innerHeight + "px";
-      element.childNodes[8].style.height = innerHeight + "px";
-
       if (qx.core.Variant.isSet("qx.client", "mshtml"))
       {
         // Internet Explorer as of version 6 or version 7 in quirks mode
@@ -220,31 +246,23 @@
         if (qx.bom.client.Engine.VERSION < 7 ||
           (qx.bom.client.Feature.QUIRKS_MODE && qx.bom.client.Engine.VERSION < 8))
         {
-          if (width%2==1)
+          var marginRight  = width  % 2 ? "-1px" : "0px";
+          var marginBottom = height % 2 ? "-1px" : "0px";
+          
+          function fixMargin(index, fixRight, fixBottom)
           {
-            element.childNodes[2].style.marginRight = "-1px";
-            element.childNodes[5].style.marginRight = "-1px";
-            element.childNodes[8].style.marginRight = "-1px";
+            if (index !== -1)
+            {
+              var part = element.childNodes[index];
+              if (fixRight)  { part.style.marginRight  = marginRight;  }
+              if (fixBottom) { part.style.marginBottom = marginBottom; }
+            }
           }
-          else
-          {
-            element.childNodes[2].style.marginRight = "0px";
-            element.childNodes[5].style.marginRight = "0px";
-            element.childNodes[8].style.marginRight = "0px";
-          }
-
-          if (height%2==1)
-          {
-            element.childNodes[3].style.marginBottom = "-1px";
-            element.childNodes[4].style.marginBottom = "-1px";
-            element.childNodes[5].style.marginBottom = "-1px";
-          }
-          else
-          {
-            element.childNodes[3].style.marginBottom = "0px";
-            element.childNodes[4].style.marginBottom = "0px";
-            element.childNodes[5].style.marginBottom = "0px";
-          }
+          fixMargin(parts.tr, true,  false);
+          fixMargin(parts.r,  true,  false);
+          fixMargin(parts.br, true,  true);
+          fixMargin(parts.bl, false, true);
+          fixMargin(parts.b,  false, true);
         }
       }
     },

[qx-bug-importer]

Jean-Noel Rivasseau (elvanor) wrote:

I applied the patch, it works very well. Thanks Matthew!

Could someone review it and apply it to trunk?

[qx-bug-importer]

Matthew (matthew+qooxdoo) wrote:

Before it is applied I would like to make a quick suggestion. I haven't looked at them (I didn't know they existed until recently) but somebody mentioned that there are VBox and HBox decorators. If the naming convention for images is the same, this patch will allow the grid decorator to behave exactly the same as the HBox or VBox. Perhaps a little refactoring might be in order?

As I said I'm not sure as I haven't checked the other decorators yet

[qx-bug-importer]

Jean-Noel Rivasseau (elvanor) wrote:

In my case, the HBox decorator is not enough as it only uses 3 images. I use 6 images in one of my use cases, eg all the images except the top ones.

[qx-bug-importer]

Matthew (matthew+qooxdoo) wrote:

Agreed, what I was suggesting is that this patch could be used to replace the current grid, vbox and hbox decorators with a single decorator that supports all of the functionality. Or perhaps have VBox and HBox derive from grid but orveride the getEdges function?

[qx-bug-importer]

Fabian Jakobs (@fjakobs) wrote:

I like this patch because it removes a lot of duplication from the code. I'm not sure if we can make it more generic so we can implement HBox and VBox as special cases of this class. I'll look at this but it might take a little.

[qx-bug-importer]

Fabian Jakobs (@fjakobs) wrote:

to 1.0.1

[qx-bug-importer]

Jean-Noel Rivasseau (elvanor) wrote:

The patch still applies cleanly to 1.0. It would be excellent to include this upstream for 1.0.1 though.

[qx-bug-importer]

Andreas Ecker (@ecker) wrote:

moved to target 1.0.2

[qx-bug-importer]

Jean-Noel Rivasseau (elvanor) wrote:

Patch still applies to 1.0.1. Boosted the severity (I hope you don't mind - enhancement really is low) as this patch is absolutely essential IMHO (I could not live without it), yet still not applied to upstream trunk :(

[qx-bug-importer]

Martin Wittemann (@wittemann) wrote:

to Martin

[qx-bug-importer]

Martin Wittemann (@wittemann) wrote:

--> Thomas

[qx-bug-importer]

Wayne (w.si) wrote:

Patch to allow for different border widths in dif dir

Either a single value or a four-int array is allowed. Clock-wise from top for the array.

Patch to allow for different border widths in dif dir

Index: action/ImageClipping.py
===================================================================
--- action/ImageClipping.py (revision 22098)
+++ action/ImageClipping.py (working copy)
@@ -49,7 +49,7 @@
         self._imageInfo = ImageInfo(self._console, self._cache)

-    def slice(self, source, dest_prefix, border):
+    def slice(self, source, dest_prefix, border, trim_width):

         source_file = source
         dest_file   = os.path.join(os.path.dirname(source), dest_prefix)
@@ -59,18 +59,44 @@

         crop_cmd = "convert %s -crop %sx%s+%s+%s +repage %s"

+        if isinstance(border, int):
+            single_border = True
+        elif not isinstance(border, list) or (isinstance(border, list) and not (len(border) == 4)):
+            raise RuntimeError, "Border must be one integer or an array with four integers"
+        else:
+            single_border = False
+
         # split
-        os.system(crop_cmd % (source_file, border, border, 0, 0, dest_file + "-tl.png"))
-        os.system(crop_cmd % (source_file, border, border, border, 0, dest_file + "-t.png"))
-        os.system(crop_cmd % (source_file, border, border, width-border, 0, dest_file + "-tr.png"))
-
-        os.system(crop_cmd % (source_file, border, height-2*border, 0, border, dest_file + "-l.png"))
-        os.system(crop_cmd % (source_file, min(20, width-2*border), height-2*border, border, border, dest_file + "-c.png"))
-        os.system(crop_cmd % (source_file, border, height-2*border, width-border, border, dest_file + "-r.png"))
-
-        os.system(crop_cmd % (source_file, border, border, 0, height-border, dest_file + "-bl.png"))
-        os.system(crop_cmd % (source_file, border, border, border, height-border, dest_file + "-b.png"))
-        os.system(crop_cmd % (source_file, border, border, width-border, height-border, dest_file + "-br.png"))
+        if single_border:
+            os.system(crop_cmd % (source_file, border, border, 0, 0, dest_file + "-tl.png"))
+            os.system(crop_cmd % (source_file, border, border, border, 0, dest_file + "-t.png"))
+            os.system(crop_cmd % (source_file, border, border, width-border, 0, dest_file + "-tr.png"))
+    
+            os.system(crop_cmd % (source_file, border, height-2*border, 0, border, dest_file + "-l.png"))
+            if trim_width:
+                os.system(crop_cmd % (source_file, min(20, width-2*border), height-2*border, border, border, dest_file + "-c.png"))            
+            else:
+                os.system(crop_cmd % (source_file, width-2*border, height-2*border, border, border, dest_file + "-c.png"))
+            os.system(crop_cmd % (source_file, border, height-2*border, width-border, border, dest_file + "-r.png"))
+    
+            os.system(crop_cmd % (source_file, border, border, 0, height-border, dest_file + "-bl.png"))
+            os.system(crop_cmd % (source_file, border, border, border, height-border, dest_file + "-b.png"))
+            os.system(crop_cmd % (source_file, border, border, width-border, height-border, dest_file + "-br.png"))
+        else:
+            os.system(crop_cmd % (source_file, border[3], border[0], 0, 0, dest_file + "-tl.png"))
+            os.system(crop_cmd % (source_file, width - border[3] - border[1], border[0], border[3], 0, dest_file + "-t.png"))
+            os.system(crop_cmd % (source_file, border[1], border[0], width - border[1], 0, dest_file + "-tr.png"))
+    
+            os.system(crop_cmd % (source_file, border[3], height - border[0] - border[2], 0, border[0], dest_file + "-l.png"))
+            if trim_width:
+                os.system(crop_cmd % (source_file, min(20, width- border[3] - border[1]), height - border[0] - border[2], border[3], border[0], dest_file + "-c.png"))            
+            else:
+                os.system(crop_cmd % (source_file, width- border[3] - border[1], height - border[0] - border[2], border[3], border[0], dest_file + "-c.png"))
+            os.system(crop_cmd % (source_file, border[1], height - border[0] - border[2], width - border[1], border[0], dest_file + "-r.png"))
+    
+            os.system(crop_cmd % (source_file, border[3], border[2], 0, height - border[2], dest_file + "-bl.png"))
+            os.system(crop_cmd % (source_file, width- border[3] - border[1], border[2], border[3], height - border[2], dest_file + "-b.png"))
+            os.system(crop_cmd % (source_file, border[1], border[2], width - border[1], height - border[2], dest_file + "-br.png"))

         # for css3, the original images are used
         shutil.copyfile(source_file, dest_file + ".png")
Index: Generator.py
===================================================================
--- Generator.py    (revision 22098)
+++ Generator.py    (working copy)
@@ -604,7 +604,7 @@

             # get current class list
             script.classes  = computeClassList(includeWithDeps, excludeWithDeps, 
-                                               includeNoDeps, excludeNoDeps, variants, script=script)
+                                               includeNoDeps, excludeNoDeps, variants, verifyDeps=True, script=script)
             # Execute real tasks
             if "copy-resources" in jobTriggers:
                 self.runResources(script.classes)
@@ -1253,7 +1253,11 @@
             # wpbasti: Rename: Border => Inset as in qooxdoo JS code
             prefix       = imgspec['prefix']
             border_width = imgspec['border-width']
-            self._imageClipper.slice(image, prefix, border_width)
+            if 'trim-width' in imgspec:
+                trim_width = imgspec['trim-width']
+            else:
+                trim_width = True
+            self._imageClipper.slice(image, prefix, border_width, trim_width)

     def runImageCombining(self):

[qx-bug-importer]

Daniel Wagner (@danielwagner) wrote:

Reviewed Wayne's Generator patch and applied to trunk (r23319). To Chris for the Decorator part.

[qx-bug-importer]

Christian Hagendorn (@Hagendorn) wrote:

Hi Jean-Noel, Hi Matthew,

I need some more information to understand why 0 values make problems here. When I try to splice the images with the new job (applied patch with r23319). It is not possible for me to get images with a height or width with 0. So why should the grid decorator respect 0 values?

Thanks, Chris

[qx-bug-importer]

Christian Hagendorn (@Hagendorn) wrote:

Patch for 1.3-pre

I created a new patch based on the old one and done some minor improvements.

Patch for 1.3-pre

From 2a3d89091edc33b67f2c4a48a56851e1d03755b1 Mon Sep 17 00:00:00 2001
From: Christian Hagendorn <christian.hagendorn@1und1.de>
Date: Thu, 14 Oct 2010 09:46:36 +0200
Subject: [PATCH] Applied patch with minor improvements and done some formating.

---
 .../source/class/qx/ui/decoration/GridDiv.js       |  162 +++++++++++---------
 1 files changed, 88 insertions(+), 74 deletions(-)

diff --git a/qooxdoo/framework/source/class/qx/ui/decoration/GridDiv.js b/qooxdoo/framework/source/class/qx/ui/decoration/GridDiv.js
index de9c642..4246b9b 100644
--- a/qooxdoo/framework/source/class/qx/ui/decoration/GridDiv.js
+++ b/qooxdoo/framework/source/class/qx/ui/decoration/GridDiv.js
@@ -37,12 +37,6 @@ qx.Class.define("qx.ui.decoration.GridDiv",
   extend : qx.ui.decoration.Abstract,

-  /*
-  *****************************************************************************
-     CONSTRUCTOR
-  *****************************************************************************
-  */
-
   /**
    * @param baseImage {String} Base image to use
    * @param insets {Integer|Array} Insets for the grid
@@ -62,15 +56,6 @@ qx.Class.define("qx.ui.decoration.GridDiv",
   },

-
-
-
-  /*
-  *****************************************************************************
-     PROPERTIES
-  *****************************************************************************
-  */
-
   properties :
   {
     /**
@@ -102,19 +87,12 @@ qx.Class.define("qx.ui.decoration.GridDiv",
   },

-
-
-  /*
-  *****************************************************************************
-     MEMBERS
-  *****************************************************************************
-  */
-
   members :
   {
     __markup : null,
     __images : null,
     __edges : null,
+    __parts : null,

     // overridden
@@ -141,6 +119,7 @@ qx.Class.define("qx.ui.decoration.GridDiv",
     ---------------------------------------------------------------------------
     */

+
     // interface implementation
     getMarkup : function()
     {
@@ -148,13 +127,14 @@ qx.Class.define("qx.ui.decoration.GridDiv",
         return this.__markup;
       }

-      var Decoration = qx.bom.element.Decoration;
-      var images = this.__images;
       var edges = this.__edges;

+      // Initialize parts
+      this.__parts = {};
+
       // Create edges and vertical sides
       // Order: tl, t, tr, bl, b, bt, l, c, r
-      var html = [];
+      var html = this.__markup = [];

       // Outer frame
       // Note: Overflow=hidden is needed for Safari 3.1 to omit scrolling through
@@ -162,25 +142,25 @@ qx.Class.define("qx.ui.decoration.GridDiv",
       html.push('<div style="position:absolute;top:0;left:0;overflow:hidden;font-size:0;line-height:0;">');

       // Top: left, center, right
-      html.push(Decoration.create(images.tl, "no-repeat", { top: 0, left: 0 }));
-      html.push(Decoration.create(images.t, "scale-x", { top: 0, left: edges.left + "px" }));
-      html.push(Decoration.create(images.tr, "no-repeat", { top: 0, right : 0 }));
+      this.__addPart("tl", "no-repeat", {top: 0, left: 0});
+      this.__addPart("t", "scale-x", {top: 0, left: edges.left + "px"});
+      this.__addPart("tr", "no-repeat", {top: 0, right: 0});

       // Bottom: left, center, right
-      html.push(Decoration.create(images.bl, "no-repeat", { bottom: 0, left:0 }));
-      html.push(Decoration.create(images.b, "scale-x", { bottom: 0, left: edges.left + "px" }));
-      html.push(Decoration.create(images.br, "no-repeat", { bottom: 0, right: 0 }));
+      this.__addPart("bl", "no-repeat", {bottom: 0, left: 0});
+      this.__addPart("b", "scale-x", {bottom: 0, left: edges.left + "px"});
+      this.__addPart("br", "no-repeat", {bottom: 0, right: 0});

       // Middle: left, center, right
-      html.push(Decoration.create(images.l, "scale-y", { top: edges.top + "px", left: 0 }));
-      html.push(Decoration.create(images.c, "scale", { top: edges.top + "px", left: edges.left + "px" }));
-      html.push(Decoration.create(images.r, "scale-y", { top: edges.top + "px", right: 0 }));
+      this.__addPart("l", "scale-y", {top: edges.top + "px", left: 0});
+      this.__addPart("c", "scale", {top: edges.top + "px", left: edges.left + "px"});
+      this.__addPart("r", "scale-y", {top: edges.top + "px", right: 0});

       // Outer frame
       html.push('</div>');

       // Store
-      return this.__markup = html.join("");
+      return html.join("");
     },

@@ -189,6 +169,7 @@ qx.Class.define("qx.ui.decoration.GridDiv",
     {
       // Compute inner sizes
       var edges = this.__edges;
+      var parts = this.__parts;
       var innerWidth = width - edges.left - edges.right;
       var innerHeight = height - edges.top - edges.bottom;

@@ -200,13 +181,11 @@ qx.Class.define("qx.ui.decoration.GridDiv",
       element.style.width = width + "px";
       element.style.height = height + "px";

-      element.childNodes[1].style.width = innerWidth + "px";
-      element.childNodes[4].style.width = innerWidth + "px";
-      element.childNodes[7].style.width = innerWidth + "px";
-
-      element.childNodes[6].style.height = innerHeight + "px";
-      element.childNodes[7].style.height = innerHeight + "px";
-      element.childNodes[8].style.height = innerHeight + "px";
+      this.__setStyle(element, parts.t, {width: innerWidth + "px"});
+      this.__setStyle(element, parts.b, {width: innerWidth + "px"});
+      this.__setStyle(element, parts.c, {width: innerWidth + "px", height: innerHeight + "px"});
+      this.__setStyle(element, parts.l, {height: innerHeight + "px"});
+      this.__setStyle(element, parts.r, {height: innerHeight + "px"});

       if (qx.core.Variant.isSet("qx.client", "mshtml"))
       {
@@ -220,31 +199,14 @@ qx.Class.define("qx.ui.decoration.GridDiv",
           (qx.bom.client.Feature.QUIRKS_MODE && qx.bom.client.Engine.VERSION < 8)
         )
         {
-          if (width%2==1)
-          {
-            element.childNodes[2].style.marginRight = "-1px";
-            element.childNodes[5].style.marginRight = "-1px";
-            element.childNodes[8].style.marginRight = "-1px";
-          }
-          else
-          {
-            element.childNodes[2].style.marginRight = "0px";
-            element.childNodes[5].style.marginRight = "0px";
-            element.childNodes[8].style.marginRight = "0px";
-          }
-
-          if (height%2==1)
-          {
-            element.childNodes[3].style.marginBottom = "-1px";
-            element.childNodes[4].style.marginBottom = "-1px";
-            element.childNodes[5].style.marginBottom = "-1px";
-          }
-          else
-          {
-            element.childNodes[3].style.marginBottom = "0px";
-            element.childNodes[4].style.marginBottom = "0px";
-            element.childNodes[5].style.marginBottom = "0px";
-          }
+          var marginRight  = width  % 2 ? "-1px" : "0px";
+          var marginBottom = height % 2 ? "-1px" : "0px";
+
+          this.__setStyle(element, parts.tr, {marginRight: marginRight});
+          this.__setStyle(element, parts.r, {marginRight: marginRight});
+          this.__setStyle(element, parts.br, {marginRight: marginRight, marginBottom: marginBottom});
+          this.__setStyle(element, parts.bl, {marginBottom: marginBottom});
+          this.__setStyle(element, parts.b, {marginBottom: marginBottom});
         }
       }
     },
@@ -256,7 +218,6 @@ qx.Class.define("qx.ui.decoration.GridDiv",
     },

-
     /*
     ---------------------------------------------------------------------------
       PROPERTY APPLY ROUTINES
@@ -303,6 +264,13 @@ qx.Class.define("qx.ui.decoration.GridDiv",
     },

+    /*
+    ---------------------------------------------------------------------------
+      HELPER METHODS
+    ---------------------------------------------------------------------------
+    */
+
+
     /**
      * Resolve the url of the given image
      *
@@ -326,22 +294,68 @@ qx.Class.define("qx.ui.decoration.GridDiv",
       var ResourceManager = qx.util.ResourceManager.getInstance();

       return {
-        top : ResourceManager.getImageHeight(images.t),
-        bottom : ResourceManager.getImageHeight(images.b),
-        left : ResourceManager.getImageWidth(images.l),
-        right : ResourceManager.getImageWidth(images.r)
+        top : ResourceManager.getImageHeight(images.t) || 0,
+        bottom : ResourceManager.getImageHeight(images.b) || 0,
+        left : ResourceManager.getImageWidth(images.l) || 0,
+        right : ResourceManager.getImageWidth(images.r) || 0
       };
+    },
+
+
+    /**
+     * Helper method to add the part with the passed repeat and style values to the markup.
+     *
+     * @param part {String} Part name (tl, t, tr, bl, b, bt, l, c, r).
+     * @param repeat {String} Repeat mode of the image.
+     * @param style {Map} Style attributes to apply.
+     */
+    __addPart : function(part, repeat, style)
+    {
+      var images = this.__images;
+      var edges = this.__edges;
+      var parts = this.__parts;
+      var html = this.__markup;
+
+      if ((style.top !== 0 || edges.top) &&
+          (style.left !== 0 || edges.left) &&
+          (style.bottom !== 0 || edges.bottom) &&
+          (style.right !== 0 || edges.right))
+      {
+        parts[part] = html.length - 1;
+        html.push(qx.bom.element.Decoration.create(images[part], repeat, style));
+      }
+      else
+      {
+        parts[part] = -1;
+      }
+    },
+
+
+    /**
+     * Helper method to set the the passed style to a child element.
+     *
+     * @param element {Element} Root element which contains the children (parts).
+     * @param index {Integer} Child (part) index to apply style.
+     * @param style {Map} Style attributes to apply.
+     */
+    __setStyle : function(element, index, style)
+    {
+      if (index >= 0)
+      {
+        var part = element.childNodes[index];
+        qx.bom.element.Style.setStyles(part, style);
+      }
     }
   },

-
   /*
   *****************************************************************************
      DESTRUCTOR
   *****************************************************************************
   */

+
   destruct : function() {
     this.__markup = this.__images = this.__edges = null;
   }
-- 
1.7.0.2.msysgit.0

[qx-bug-importer]

Christian Hagendorn (@Hagendorn) wrote:

Hi, are there any updates about the 0 value feature request?

[qx-bug-importer]

Jean-Noel Rivasseau (elvanor) wrote:

> Hi, are there any updates about the 0 value feature request?

I dont know exactly what to say. In the past (old days pre Qx-1.0), the 0 values had to be taken into account to prevent warnings that occured about inexistant images (since these images were not there, of course).

Looking at my earlier comments, it also resulted in 404s server calls trying to find the non existant images.

It may or may no longer be relevant to the current code, but anyway Qx should support sides having 0 px values (eg, non existant sides). We use such decorators all the time.

[qx-bug-importer]

Christian Hagendorn (@Hagendorn) wrote:

Hi Jean-Noel,

thanks, now it is more clear for me. But I would prefer to open a separate bug report for the 0 values (image doesn't exist). The grid decorator has two implementations "qx.ui.decoration.GridDiv" and "qx.ui.decoration.css3.BorderImage", both has a problem when images are missing. "GridDiv" relies on that all images are exist and "BorderImage" relies on that the top and left images exist. So could you please open a seperate bug report? Thanks

[qx-bug-importer]

Christian Hagendorn (@Hagendorn) wrote:

Daniel, could you please check that it is possible to allow 0 values in the splitting job. At the moment it is not possible to use 0 values. I set for example the right value to 0.

"slice-images" : { "images" : { "${RESPATH}/button.png" : { "prefix" : "clipped/button", "border-width" : [4, 0, 4, 4] } } }

Then all right images (tr, r and rb) gets the size from the original image (maybe it's only a copy). Image magick alos logs a waring:

EXECUTING: IMAGE-CLIPPING

>>> Initializing cache... Magick: geometry does not contain image button.png' @ warning/transform.c/CropImage/600. Magick: geometry does not contain imagebutton.png' @ warning/transform.c/CropImage/600. Magick: geometry does not contain image `button.png' @ warning/transform.c/CropImage/600. >>> Done

[qx-bug-importer]

Jean-Noel Rivasseau (elvanor) wrote:

Do you still want me to open a new bug report?

[qx-bug-importer]

Daniel Wagner (@danielwagner) wrote:

Jean-Noel: Yes, please open a new report. I think it's better to have separate reports for the framework and Generator aspects of this issue.

[qx-bug-importer]

Daniel Wagner (@danielwagner) wrote:

As of r23946, ImageClipping.py only creates necessary images. Jean-Noel, did you get around to filing that report for the framework decoration classes?

[qx-bug-importer]

Daniel Wagner (@danielwagner) wrote:

* BZ#4110 has been marked as a duplicate of this bug. *

[qx-bug-importer]

Daniel Wagner (@danielwagner) wrote:

* BZ#4456 has been marked as a duplicate of this bug. *

[qx-bug-importer]

Jean-Noel Rivasseau (elvanor) wrote:

I finally got around to file the bug for the framework classes part.

It is bug http://bugzilla.qooxdoo.org/show_bug.cgi?id=5279 and we are ready to help fixing it, since we need it ASAP...

[qx-bug-importer]

Martin Wittemann (@wittemann) wrote:

Closed all bugs already shipped with a release.