Use a sprite texture as the background instead of a graphics object

Address #115

Author: flekschas

src/image-with-background.js

@@ -17,32 +17,31 @@ const DEFAULT_BACKGROUND_OPACITY = 0.2;
 const DEFAULT_PADDING = 0;
 
 const withBackground = ({
+  background,
   backgroundColor,
-  backgroundGraphics,
   backgroundOpacity
 }) => self =>
   assign(self, {
     get backgroundColor() {
-      return backgroundGraphics.fill.color;
+      return background.tint;
+    },
+    setBackgroundColor(color = backgroundColor) {
+      background.tint = color;
     },
     get backgroundOpacity() {
-      return backgroundGraphics.fill.alpha;
+      return background.alpha;
     },
-    clearBackground() {
-      backgroundGraphics.clear();
+    setBackgroundOpacity(opacity = backgroundOpacity) {
+      background.alpha = opacity;
     },
-    drawBackground(
-      color = backgroundColor,
-      opacity = backgroundOpacity,
-      withPadding = false
-    ) {
+    rescaleBackground(withPadding = false) {
       const width = self.width + self.padding * withPadding;
       const height = self.height + self.padding * withPadding;
 
-      backgroundGraphics.clear();
-      backgroundGraphics.beginFill(color, opacity);
-      backgroundGraphics.drawRect(-width / 2, -height / 2, width, height);
-      backgroundGraphics.endFill();
+      background.x = -width / 2;
+      background.y = -height / 2;
+      background.width = width;
+      background.height = height;
     }
   });
 
@@ -67,7 +66,8 @@ const createImageWithBackground = (
     padding = DEFAULT_PADDING
   } = {}
 ) => {
-  const backgroundGraphics = new PIXI.Graphics();
+  const container = new PIXI.Container();
+  const background = new PIXI.Sprite(PIXI.Texture.WHITE);
   const displayObject = toDisplayObject(source);
 
   let sprite;
@@ -79,29 +79,24 @@ const createImageWithBackground = (
     sprite = displayObject;
   }
 
-  const init = self => {
-    backgroundGraphics.addChild(sprite);
-
-    return self;
-  };
+  container.addChild(background);
+  container.addChild(sprite);
 
-  return init(
-    pipe(
-      withStaticProperty('displayObject', backgroundGraphics),
-      withStaticProperty('sprite', sprite),
-      withColorFilters(sprite),
-      withScale(sprite, displayObject.width, displayObject.height),
-      withSize(sprite, displayObject.width, displayObject.height),
-      withPadding(padding),
-      withBackground({
-        backgroundColor,
-        backgroundGraphics,
-        backgroundOpacity
-      }),
-      withDestroy(backgroundGraphics),
-      withConstructor(createImageWithBackground)
-    )({})
-  );
+  return pipe(
+    withStaticProperty('displayObject', container),
+    withStaticProperty('sprite', sprite),
+    withColorFilters(sprite),
+    withScale(sprite, displayObject.width, displayObject.height),
+    withSize(sprite, displayObject.width, displayObject.height),
+    withPadding(padding),
+    withBackground({
+      background,
+      backgroundColor,
+      backgroundOpacity
+    }),
+    withDestroy(sprite),
+    withConstructor(createImageWithBackground)
+  )({});
 };
 
 export default createImageWithBackground;

src/library.js

@@ -877,7 +877,7 @@ const createPilingJs = (rootElement, initOptions = {}) => {
 
           item.preview.scaleX(xScale);
           item.preview.scaleY(yScale);
-          item.preview.drawBackground();
+          item.preview.rescaleBackground();
         }
       });
     });

src/pile.js

@@ -164,11 +164,9 @@ const createPile = (
             index
           );
 
-          item.image.drawBackground(
-            getForegroundColor(borderColor),
-            borderOpacity,
-            true
-          );
+          item.image.setBackgroundColor(getForegroundColor(borderColor));
+          item.image.setBackgroundOpacity(borderOpacity);
+          item.image.rescaleBackground(true);
           hoverPreviewContainer.addChild(item.displayObject);
         }
         render();
@@ -210,11 +208,15 @@ const createPile = (
           previewBackgroundColor === INHERIT
             ? pileBackgroundColor
             : getItemProp(previewBackgroundColor, items[item.id], index);
+
         const backgroundOpacity =
           previewBackgroundOpacity === INHERIT
             ? getPileProp(pileBackgroundOpacity, piles[id])
             : getItemProp(previewBackgroundOpacity, items[item.id], index);
-        item.image.drawBackground(backgroundColor, backgroundOpacity);
+
+        item.image.setBackgroundColor(backgroundColor);
+        item.image.setBackgroundOpacity(backgroundOpacity);
+
         previewItemContainer.addChild(item.displayObject);
       }
       render();
@@ -839,7 +841,7 @@ const createPile = (
           prevSize = [item.preview.width, item.preview.height];
         }
 
-        item.preview.clearBackground();
+        item.preview.setBackgroundOpacity(0);
 
         animatePositionItems(
           previewItem,