feat: 拖拽布局-页面支持两个实例

demoHtml/flex/index.html

@@ -63,7 +63,14 @@
                     <!-- <div class="global-save-button-container">
                         <button class="global-save-button">保存布局</button>
                     </div> -->
-                    <div class="grid-stack"></div>
+                    <div
+                        id="main-screen"
+                        class="grid-stack"
+                    ></div>
+                    <div
+                        id="welcome-screen"
+                        class="grid-stack"
+                    ></div>
                 </div>
                 <!-- 当前选中组件属性 -->
                 <div id="props-panel">

demoHtml/flex/js/index.js

@@ -1,9 +1,56 @@
 (function () {
-    let initData = null;
+    let main = {
-    let grid = null;
+        grid: null,
+        initData: null,
+    };
+    let welcome = {
+        grid: null,
+        initData: null,
+    };
     let currentComponent = null;
     let cellHeight = 60;
 
+    // 让gridstack知道如何渲染，组件children中的content直接渲染html
+    GridStack.renderCB = function (el, w) {
+        el.innerHTML = w.content;
+    };
+
+    GridStack.setupDragIn('#components-panel .component-item', undefined, [
+        {
+            w: 2,
+            h: 2,
+            type: 'image',
+            name: '图片',
+            image: '',
+            eventsType: 'click',
+            eventsAction: '',
+            defaultFocus: false,
+            leftId: '',
+            rightId: '',
+            upId: '',
+            downId: '',
+        },
+        {
+            w: 2,
+            h: 1,
+            type: 'text',
+            childrenType: '',
+            name: '文本',
+            background: '#fff',
+            fontSize: 14,
+            color: '#333',
+            text: '文本',
+            fontWeight: 'normal',
+            eventsType: 'click',
+            eventsAction: '',
+            defaultFocus: false,
+            leftId: '',
+            rightId: '',
+            upId: '',
+            downId: '',
+        },
+    ]);
+
     // 生成唯一id
     var generateUniqueId = function () {
         const timestamp = Date.now().toString(36);
@@ -12,10 +59,11 @@
     };
 
     /** 初始化 */
-    var init = function () {
+    var init = function (type, self) {
-        const initDataStorage = localStorage.getItem('initData');
+        // debugger;
+        const initDataStorage = localStorage.getItem(`${type}Data`);
         if (!initDataStorage) {
-            initData = {
+            self['initData'] = {
                 id: `grid_${generateUniqueId()}`,
                 children: [],
                 version: '1.0.0',
@@ -23,80 +71,44 @@
                 height: 1080,
             };
         } else {
-            initData = JSON.parse(initDataStorage);
+            self['initData'] = JSON.parse(initDataStorage);
-            conputedInitData('init');
+            conputedInitData('init', self);
         }
-        console.log(initData, 'initData');
+        console.log(self['initData'], `${type}Data`);
 
-        // 让gridstack知道如何渲染，组件children中的content直接渲染html
+        self['grid'] = GridStack.init(
-        GridStack.renderCB = function (el, w) {
-            el.innerHTML = w.content;
-        };
-        grid = GridStack.init({
-            // 一行高度
-            cellHeight,
-            // 间距
-            margin: 0,
-            minRow: Math.floor(1080 / 2 / cellHeight),
-            maxRow: Math.floor(1080 / 2 / cellHeight),
-            acceptWidgets: true,
-            float: true,
-            removable: '#trash',
-            // subGridOpts: subOptions,
-            // subGridDynamic: true,
-            children: initData.children,
-        });
-        GridStack.setupDragIn('#components-panel .component-item', undefined, [
-            {
-                w: 2,
-                h: 2,
-                type: 'image',
-                name: '图片',
-                image: '',
-                eventsType: 'click',
-                eventsAction: '',
-                defaultFocus: false,
-                leftId: '',
-                rightId: '',
-                upId: '',
-                downId: '',
-            },
             {
-                w: 2,
+                // 一行高度
-                h: 1,
+                cellHeight,
-                type: 'text',
+                // 间距
-                childrenType: '',
+                margin: 0,
-                name: '文本',
+                minRow: Math.floor(1080 / 2 / cellHeight),
-                background: '#fff',
+                maxRow: Math.floor(1080 / 2 / cellHeight),
-                fontSize: '14px',
+                acceptWidgets: true,
-                color: '#333',
+                float: true,
-                text: '文本',
+                removable: '#trash',
-                fontWeight: 'normal',
+                // subGridOpts: subOptions,
-                eventsType: 'click',
+                // subGridDynamic: true,
-                eventsAction: '',
+                children: self['initData'].children,
-                defaultFocus: false,
-                leftId: '',
-                rightId: '',
-                upId: '',
-                downId: '',
             },
-        ]);
+            `#${type}-screen`
-        console.log(grid, 'grid实例');
+        );
+        console.log(self['grid'], `${type}.grid实例`);
 
         // grid.load(initData.children);
 
-        grid.engine.nodes.forEach((item) => {
+        self['grid'].engine.nodes.forEach((item) => {
-            handleAddComponent(item);
+            handleAddComponent(item, self);
         });
 
-        grid.on('added', function (_event, itemArray) {
+        self['grid'].on('added', function (_event, itemArray) {
             console.log(itemArray, '这里触发了添加了added事件');
             itemArray.forEach((item) => {
-                handleAddComponent(item);
+                handleAddComponent(item, self);
             });
         });
 
-        grid.on('removed', function (_event, itemArray) {
+        self['grid'].on('removed', function (_event, itemArray) {
             console.log(itemArray, '这里触发了移除removed事件');
             itemArray.forEach((item) => {
                 handleRemoveComponent(item);
@@ -105,7 +117,7 @@
     };
 
     // 处理添加组件之后的操作
-    var handleAddComponent = (component) => {
+    var handleAddComponent = (component, self) => {
         if (!component.id) {
             component.id = `${component.type}_${generateUniqueId()}`;
         }
@@ -124,13 +136,13 @@
             // 将当前选中组件的属性显示在右侧列表中
             setCurrentComponentProps(currentComponent);
             // 设置上下左右移动组件ID
-            setMoveComponentId(currentComponent);
+            setMoveComponentId(currentComponent, self);
         });
     };
 
     // 设置上下左右移动组件ID
-    var setMoveComponentId = function (component) {
+    var setMoveComponentId = function (component, self) {
-        const allComponents = grid.save();
+        const allComponents = self['grid'].save();
         if (allComponents.length <= 1) {
             return;
         }
@@ -297,9 +309,9 @@
     };
 
     // 保存的时候计算x,y,w,h
-    var conputedInitData = function (type) {
+    var conputedInitData = function (type, self) {
         if (type === 'save') {
-            let initDataCopy = JSON.parse(JSON.stringify(initData));
+            let initDataCopy = JSON.parse(JSON.stringify(self['initData']));
             initDataCopy.children.forEach((item) => {
                 item.xCopy = item.x;
                 item.x = item.x * (1920 / 12);
@@ -313,12 +325,13 @@
                 }
                 item.hCopy = item.h;
                 item.h = item.h * cellHeight * 2;
+                item.fontSize = item.fontSize ? parseInt(item.fontSize) : item.fontSize;
             });
             console.log(initDataCopy);
             return initDataCopy;
         }
         if (type === 'init') {
-            initData.children.forEach((item) => {
+            self['initData'].children.forEach((item) => {
                 item.x = item.xCopy;
                 item.y = item.yCopy;
                 item.w = item.wCopy;
@@ -331,14 +344,18 @@
         // grid.addWidget({ w: 2, content: 'item 1' });
         // console.log(grid.save());
         // console.log(grid);
-        initData.children = grid.save();
+        main.initData.children = main.grid.save();
-        console.log(initData);
+        welcome.initData.children = welcome.grid.save();
-        localStorage.setItem('initData', JSON.stringify(conputedInitData('save')));
+        console.log(main.initData);
+        console.log(welcome.initData);
+        localStorage.setItem('mainData', JSON.stringify(conputedInitData('save', main)));
+        localStorage.setItem('welcomeData', JSON.stringify(conputedInitData('save', welcome)));
     });
 
     /** 执行方法 */
     $(function () {
-        init();
+        init('main', main);
+        init('welcome', welcome);
         // 调用绑定
         bindComponentEvents();
     });