feat(core): Allow plugins to provide their own packing implementation

packages/core/src/pattern/index.mjs

@@ -261,6 +261,18 @@ Pattern.prototype.__applySettings = function (sets) {
   return this
 }
 
+/**
+ * Populates the pattern store with methods set by plugins
+ *
+ * @private
+ * @return {Store} store - The pattern-wide store populated with relevant data/methods
+ */
+Pattern.prototype.__extendPatternStore = function () {
+  this.store.extend([...this.plugins.__storeMethods])
+
+  return this.store
+}
+
 /**
  * Creates a store for a set (of settings)
  *

packages/core/src/pattern/pattern-drafter.mjs

@@ -21,6 +21,9 @@ PatternDrafter.prototype.draft = function () {
   // Keep container for drafted parts fresh
   this.pattern.parts = []
 
+  // Extend pattern-wide store with methods from plugins
+  this.pattern.__extendPatternStore()
+
   // Iterate over the provided sets of settings (typically just one)
   for (const set in this.pattern.settings) {
     this.pattern.setStores[set] = this.pattern.__createSetStore()

packages/core/src/pattern/pattern-plugins.mjs

@@ -147,7 +147,6 @@ PatternPlugins.prototype.__loadPluginStoreMethods = function (plugin) {
     for (const method of plugin.store) this.__storeMethods.add(method)
   } else this.store.log.warn(`Plugin store methods should be an Array`)
 
-  // console.log('store', plugin, this.__storeMethods)
   return this
 }
 

packages/core/src/pattern/pattern-renderer.mjs

@@ -1,6 +1,5 @@
 import { Svg } from '../svg.mjs'
 import { Stack } from '../stack.mjs'
-import pack from 'bin-pack-with-constraints'
 
 /**
  * A class for handling layout and rendering for a pattern
@@ -107,8 +106,8 @@ PatternRenderer.prototype.__pack = function () {
     }
   }
   if (settings[activeSet].layout === true) {
-    // some plugins will add a width constraint to the settings, but we can safely pass undefined if not
-    let size = pack(bins, { inPlace: true, maxWidth: settings[0].maxWidth })
+    // store.pack is provided by a plugin
+    const size = bins.length > 0 ? this.pattern.store.pack(bins, this) : { width: 0, height: 0 }
     this.autoLayout.width = size.width
     this.autoLayout.height = size.height
 

packages/core/src/store.mjs

@@ -50,6 +50,9 @@ export function Store(methods = []) {
     } else set(this, path, method)
   }
 
+  // Fallback packing algorithm
+  this.pack = fallbackPacker
+
   return this
 }
 
@@ -156,3 +159,22 @@ Store.prototype.unset = function (path) {
 
   return this
 }
+
+/**
+ * The default pack method comes from a plugin, typically
+ * plugin-bin-back which is part of core plugins.
+ * However, when a pattern is loaded without plugins
+ * we stil don't want it work even when no pack method
+ * is available, so this is the fallback default pack method.
+ */
+function fallbackPacker(items, pattern) {
+  console.log({ items, pattern })
+  let w = 0
+  let h = 0
+  for (const item of items) {
+    if (item.width > w) w = item.width
+    if (item.height > w) w = item.height
+  }
+
+  return { w, h }
+}

packages/core/tests/svg.test.mjs

@@ -5,6 +5,7 @@ import { Design, Attributes } from '../src/index.mjs'
 import { Defs } from '../src/defs.mjs'
 import { version } from '../data.mjs'
 import render from './fixtures/render.mjs'
+import { binpackPlugin } from '../../../plugins/plugin-bin-pack/src/index.mjs'
 
 chai.use(chaiString)
 const expect = chai.expect
@@ -12,6 +13,7 @@ const expect = chai.expect
 const getPattern = (settings = {}, draft = false) => {
   const part = {
     name: 'test',
+    plugins: binpackPlugin,
     draft: draft
       ? draft
       : ({ paths, Path, Point, part }) => {