Repeater Child Wrapper

Author: KlausSchaefers

package.json

@@ -1,6 +1,6 @@
 {
   "name": "luisa-vue",
-  "version": "3.0.31",
+  "version": "3.0.32",
   "description": "Luisa - VUE Renderer for FIGMA designs. Turn your Figma or Quant-UX design into VUE, or create re-usable designlets",
   "main": "./dist/luisa-vue3.common.js",
   "scripts": {

src/qux/core/ExportUtil.js

@@ -646,6 +646,29 @@ export function getBoundingBoxByBoxes (boxes) {
     return result;
 }
 
+export function getBoundingBoxByTreeChildren (children) {
+
+    const result = { x: 100000000, y: 100000000, w: 0, h: 0, z: 100000000, props: {resize: {}}, style: {}};
+
+    for (var i = 0; i < children.length; i++) {
+        const box = children[i];
+        result.x = Math.min(result.x, box._x);
+        result.y = Math.min(result.y, box._y);
+        result.w = Math.max(result.w, box._x + box.w);
+        result.h = Math.max(result.h, box._y + box.h);
+        result.z = Math.max(result.z, box.z);
+        if (isFixedHorizontal(box)) {
+            result.props.resize.fixedHorizontal = true
+        }
+        if (isFixedVertical(box)) {
+            result.props.resize.fixedVertical = true
+        }
+    }
+
+    result.h -= result.y;
+    result.w -= result.x;
+    return result;
+}
 
 export function createInheritedModel(model) {
     /**

src/qux/transformer/Flat2Tree.js

@@ -138,21 +138,75 @@ function layoutTree(screen) {
 	 */
 	// screen = Rows.addRows(screen)
 
+	/**
+	 * Repeaters should have only one child
+	 */
+	addRepeaterWrapper(screen)
+
+
 	/**
 	 * First we determine the type of layout
 	 */
 	addLayoutType(screen)
 
 
+
 	/**
 	 * Afterwards we re order the elements
 	 */
 	fixParents(screen)
 
+
+
 	screen = addGrid(screen)
 	return screen
 }
 
+
+function addRepeaterWrapper(element) {
+	if (element.type === 'Repeater' && element.children.length > 1) {
+		Logger.log(-1, "Flat2TRee.addRepeaterWrapper() > fix ", element.name, element.children.length)
+		const wrapper = createWrapper(element)
+		element.children = [wrapper]
+	}
+	element.children.forEach(child => {
+		addRepeaterWrapper(child)
+	})
+}
+
+function createWrapper (element) {
+
+
+	let boundingBox = Util.getBoundingBoxByTreeChildren(element.children)
+
+
+	const wrapper = {
+		id: `w${element.id}`,
+		name: element.name + 'Wrapper',
+		groupId: element.id,
+		isGroup: true,
+		type: "Box",
+		x: 0,
+		y: 0,
+		w: boundingBox.w,
+		h: boundingBox.h,
+		style: element.style ? element.style : {},
+		props: {
+			resize: element.props && element.props.resize ? element.props.resize : {
+				right: false,
+				up: false,
+				left: false,
+				down: false,
+				fixedHorizontal: false,
+				fixedVertical: false,
+			}
+		},
+		children: element.children
+	}
+
+	return wrapper
+}
+
 function addLayoutType (element) {
 
 	/**

src/qux/web/Repeater.vue

@@ -60,10 +60,11 @@ export default {
         return [1,2,3,4,5,6,7]
       },
       rows () {
+        console.debug('Repeater', this.element, this.viewModel)
         if (this.element && this.element.props && this.element.props.databinding) {
             let path =  this.element.props.databinding.default
             let value = JSONPath.get(this.viewModel, path)
-            Logger.log(5, 'Repeater.rows() > exit path: > ' + path, value)
+            Logger.log(-5, 'Repeater.rows() > exit path: > ' + path, value)
             if (Array.isArray(value)) {
                 return value
             } else {

tests/unit/RepeaterBug.spec.js

@@ -0,0 +1,31 @@
+import ModelTransformer from '../../src/qux/core/ModelTransformer'
+import reaterBug from './data/ReaterBug.json'
+import * as Util from '../../src/qux/core/ExportUtil'
+import * as TestUtil from './TestUtil'
+import CSSOptimizer from '../../src/qux/core/CSSOptimizer'
+import CSSFactory from '../../src/qux/core/CSSFactory'
+
+test('Test Repeater Bug', () => {
+
+  /**
+   * Check that group is copied
+   */
+
+  const t = new ModelTransformer(reaterBug, {
+    css: {
+      grid: true
+    }
+  })
+  const model = t.transform()
+
+  expect(model).not.toBeNull()
+
+  const start = model.screens[0]
+  console.debug(TestUtil.print(start))
+
+
+  const grid = TestUtil.findOneElementsByName(start, "Grid")
+  expect(grid.children.length).toBe(1)
+  expect(grid.children[0].name).toBe("GridWrapper")
+
+});