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,51 +1,20 @@
 (function () {
-    let initData = null;
+    let main = {
-    let grid = null;
+        grid: null,
-    let currentComponent = null;
+        initData: null,
-    let cellHeight = 60;
-
-    // 生成唯一id
-    var generateUniqueId = function () {
-        const timestamp = Date.now().toString(36);
-        const randomNum = Math.random().toString(36).substring(2);
-        return timestamp + randomNum;
     };
-
+    let welcome = {
-    /** 初始化 */
+        grid: null,
-    var init = function () {
+        initData: null,
-        const initDataStorage = localStorage.getItem('initData');
-        if (!initDataStorage) {
-            initData = {
-                id: `grid_${generateUniqueId()}`,
-                children: [],
-                version: '1.0.0',
-                width: 1920,
-                height: 1080,
     };
-        } else {
+    let currentComponent = null;
-            initData = JSON.parse(initDataStorage);
+    let cellHeight = 60;
-            conputedInitData('init');
-        }
-        console.log(initData, 'initData');
 
     // 让gridstack知道如何渲染，组件children中的content直接渲染html
     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,
@@ -68,7 +37,7 @@
             childrenType: '',
             name: '文本',
             background: '#fff',
-                fontSize: '14px',
+            fontSize: 14,
             color: '#333',
             text: '文本',
             fontWeight: 'normal',
@@ -81,22 +50,65 @@
             downId: '',
         },
     ]);
-        console.log(grid, 'grid实例');
+
+    // 生成唯一id
+    var generateUniqueId = function () {
+        const timestamp = Date.now().toString(36);
+        const randomNum = Math.random().toString(36).substring(2);
+        return timestamp + randomNum;
+    };
+
+    /** 初始化 */
+    var init = function (type, self) {
+        // debugger;
+        const initDataStorage = localStorage.getItem(`${type}Data`);
+        if (!initDataStorage) {
+            self['initData'] = {
+                id: `grid_${generateUniqueId()}`,
+                children: [],
+                version: '1.0.0',
+                width: 1920,
+                height: 1080,
+            };
+        } else {
+            self['initData'] = JSON.parse(initDataStorage);
+            conputedInitData('init', self);
+        }
+        console.log(self['initData'], `${type}Data`);
+
+        self['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: self['initData'].children,
+            },
+            `#${type}-screen`
+        );
+        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();
     });