diff --git a/demoHtml/flex/index.html b/demoHtml/flex/index.html
index 06ccc1a..f9a190d 100644
--- a/demoHtml/flex/index.html
+++ b/demoHtml/flex/index.html
@@ -63,7 +63,14 @@
-
+
+
diff --git a/demoHtml/flex/js/index.js b/demoHtml/flex/js/index.js
index aef97e5..422b3b4 100644
--- a/demoHtml/flex/js/index.js
+++ b/demoHtml/flex/js/index.js
@@ -1,9 +1,56 @@
(function () {
- let initData = null;
- let grid = null;
+ let main = {
+ 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 () {
- const initDataStorage = localStorage.getItem('initData');
+ var init = function (type, self) {
+ // 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);
- conputedInitData('init');
+ self['initData'] = JSON.parse(initDataStorage);
+ conputedInitData('init', self);
}
- console.log(initData, 'initData');
+ console.log(self['initData'], `${type}Data`);
- // 让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,
- h: 2,
- type: 'image',
- name: '图片',
- image: '',
- eventsType: 'click',
- eventsAction: '',
- defaultFocus: false,
- leftId: '',
- rightId: '',
- upId: '',
- downId: '',
- },
+ self['grid'] = GridStack.init(
{
- w: 2,
- h: 1,
- type: 'text',
- childrenType: '',
- name: '文本',
- background: '#fff',
- fontSize: '14px',
- color: '#333',
- text: '文本',
- fontWeight: 'normal',
- eventsType: 'click',
- eventsAction: '',
- defaultFocus: false,
- leftId: '',
- rightId: '',
- upId: '',
- downId: '',
+ // 一行高度
+ 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,
},
- ]);
- console.log(grid, 'grid实例');
+ `#${type}-screen`
+ );
+ console.log(self['grid'], `${type}.grid实例`);
// grid.load(initData.children);
- grid.engine.nodes.forEach((item) => {
- handleAddComponent(item);
+ self['grid'].engine.nodes.forEach((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) {
- const allComponents = grid.save();
+ var setMoveComponentId = function (component, self) {
+ 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();
- console.log(initData);
- localStorage.setItem('initData', JSON.stringify(conputedInitData('save')));
+ main.initData.children = main.grid.save();
+ welcome.initData.children = welcome.grid.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();
});