feat: add onChanged callback, Delete key support, drag offset fix
- Add onChanged(callback) API for tracking page changes - Support Delete/Backspace key to delete selected component - Fix drag offset issue when moving components - Add unsaved changes tracking in editor demo - Update README documentation
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
var webbuilder = {
|
||||
// 编辑器容器
|
||||
container: null,
|
||||
|
||||
|
||||
// 手机画布配置
|
||||
phoneConfig: {
|
||||
width: 375,
|
||||
@@ -16,37 +16,43 @@ var webbuilder = {
|
||||
gap: 2,
|
||||
background: '#f5f5f5'
|
||||
},
|
||||
|
||||
|
||||
// 计算得出的单元格大小（1:1比例）
|
||||
cellSize: 0,
|
||||
rows: 0,
|
||||
|
||||
|
||||
// 已注册的组件类型
|
||||
componentTypes: {},
|
||||
|
||||
|
||||
// 画布上的组件实例
|
||||
componentInstances: [],
|
||||
|
||||
|
||||
// 当前选中的组件
|
||||
selectedComponent: null,
|
||||
|
||||
|
||||
// 拖拽状态
|
||||
draggingComponent: null,
|
||||
draggingType: null,
|
||||
|
||||
|
||||
// 拖拽时鼠标相对于组件的偏移
|
||||
dragOffset: { x: 0, y: 0 },
|
||||
|
||||
// 唯一ID计数器
|
||||
idCounter: 0,
|
||||
|
||||
|
||||
// 变化回调函数
|
||||
onChangedCallback: null,
|
||||
|
||||
/**
|
||||
* 计算单元格大小和行数
|
||||
*/
|
||||
_calculateGrid: function() {
|
||||
var config = this.phoneConfig;
|
||||
|
||||
|
||||
// 计算列宽（单元格大小）
|
||||
// 列宽 = (画布宽度 - (列数 + 1) * gap) / 列数
|
||||
this.cellSize = (config.width - (config.columns + 1) * config.gap) / config.columns;
|
||||
|
||||
|
||||
// 计算行数
|
||||
// 画布高度 = 行数 * 单元格大小 + (行数 + 1) * gap
|
||||
// 812 = 行数 * cellSize + (行数 + 1) * gap
|
||||
@@ -54,11 +60,11 @@ var webbuilder = {
|
||||
// 812 - gap = 行数 * (cellSize + gap)
|
||||
// 行数 = (812 - gap) / (cellSize + gap)
|
||||
this.rows = Math.floor((config.height - config.gap) / (this.cellSize + config.gap));
|
||||
|
||||
|
||||
// 调整画布高度以精确适配行数
|
||||
this.phoneConfig.height = this.rows * this.cellSize + (this.rows + 1) * config.gap;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 初始化编辑器
|
||||
* @param {string|HTMLElement} containerSelector - 容器选择器或元素
|
||||
@@ -70,55 +76,58 @@ var webbuilder = {
|
||||
} else {
|
||||
this.container = containerSelector;
|
||||
}
|
||||
|
||||
|
||||
if (!this.container) {
|
||||
throw new Error('Container element not found');
|
||||
}
|
||||
|
||||
|
||||
// 计算网格
|
||||
this._calculateGrid();
|
||||
|
||||
|
||||
// 创建编辑器结构
|
||||
this._createEditorStructure();
|
||||
|
||||
|
||||
// 初始化画布
|
||||
this._initCanvas();
|
||||
|
||||
|
||||
// 初始化工具箱
|
||||
this._initToolbox();
|
||||
|
||||
|
||||
// 初始化键盘事件
|
||||
this._initKeyboardEvents();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 创建编辑器结构
|
||||
*/
|
||||
_createEditorStructure: function() {
|
||||
this.container.innerHTML = '';
|
||||
this.container.classList.add('webbuilder-editor');
|
||||
|
||||
|
||||
// 工具箱容器
|
||||
this.toolboxEl = document.createElement('div');
|
||||
this.toolboxEl.className = 'webbuilder-toolbox';
|
||||
this.container.appendChild(this.toolboxEl);
|
||||
|
||||
|
||||
// 画布容器
|
||||
this.canvasWrapperEl = document.createElement('div');
|
||||
this.canvasWrapperEl.className = 'webbuilder-canvas-wrapper';
|
||||
this.container.appendChild(this.canvasWrapperEl);
|
||||
|
||||
|
||||
// 属性面板容器
|
||||
this.propertyPanelEl = document.createElement('div');
|
||||
this.propertyPanelEl.className = 'webbuilder-property-panel';
|
||||
this.container.appendChild(this.propertyPanelEl);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 初始化画布
|
||||
*/
|
||||
_initCanvas: function() {
|
||||
var config = this.phoneConfig;
|
||||
|
||||
|
||||
// 创建画布
|
||||
this.canvasEl = document.createElement('div');
|
||||
this.canvasEl.className = 'webbuilder-canvas';
|
||||
@@ -133,7 +142,7 @@ var webbuilder = {
|
||||
this.canvasEl.style.padding = config.gap + 'px';
|
||||
this.canvasEl.style.boxSizing = 'border-box';
|
||||
this.canvasWrapperEl.appendChild(this.canvasEl);
|
||||
|
||||
|
||||
// 画布点击取消选中
|
||||
var self = this;
|
||||
this.canvasEl.addEventListener('click', function(e) {
|
||||
@@ -141,21 +150,21 @@ var webbuilder = {
|
||||
self._deselectAll();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// 拖放事件
|
||||
this.canvasEl.addEventListener('dragover', function(e) {
|
||||
e.preventDefault();
|
||||
self.canvasEl.classList.add('dropping');
|
||||
});
|
||||
|
||||
|
||||
this.canvasEl.addEventListener('dragleave', function(e) {
|
||||
self.canvasEl.classList.remove('dropping');
|
||||
});
|
||||
|
||||
|
||||
this.canvasEl.addEventListener('drop', function(e) {
|
||||
e.preventDefault();
|
||||
self.canvasEl.classList.remove('dropping');
|
||||
|
||||
|
||||
if (self.draggingType) {
|
||||
// 从工具箱拖入新组件
|
||||
var gridPos = self._calculateGridPosition(e);
|
||||
@@ -169,7 +178,7 @@ var webbuilder = {
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 初始化工具箱
|
||||
*/
|
||||
@@ -179,29 +188,64 @@ var webbuilder = {
|
||||
this.toolboxListEl.className = 'webbuilder-toolbox-list';
|
||||
this.toolboxEl.appendChild(this.toolboxListEl);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 初始化键盘事件
|
||||
*/
|
||||
_initKeyboardEvents: function() {
|
||||
var self = this;
|
||||
document.addEventListener('keydown', function(e) {
|
||||
// Delete键删除选中的组件
|
||||
if (e.key === 'Delete' || e.key === 'Backspace') {
|
||||
if (self.selectedComponent) {
|
||||
e.preventDefault();
|
||||
self._deleteComponent(self.selectedComponent);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 注册变化回调
|
||||
* @param {function} callback - 回调函数，签名：callback(action, data)
|
||||
* action: 'add' | 'delete' | 'move' | 'update' | 'load' | 'clear'
|
||||
* data: 相关数据（组件实例、组件ID等）
|
||||
*/
|
||||
onChanged: function(callback) {
|
||||
this.onChangedCallback = callback;
|
||||
},
|
||||
|
||||
/**
|
||||
* 触发变化回调
|
||||
*/
|
||||
_notifyChanged: function(action, data) {
|
||||
if (typeof this.onChangedCallback === 'function') {
|
||||
this.onChangedCallback(action, data);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 计算网格位置
|
||||
*/
|
||||
_calculateGridPosition: function(e) {
|
||||
var rect = this.canvasEl.getBoundingClientRect();
|
||||
var config = this.phoneConfig;
|
||||
|
||||
// 计算鼠标相对于画布的位置
|
||||
var x = e.clientX - rect.left - config.gap;
|
||||
var y = e.clientY - rect.top - config.gap;
|
||||
|
||||
|
||||
// 计算鼠标相对于画布的位置，减去偏移量
|
||||
var x = e.clientX - rect.left - config.gap - this.dragOffset.x;
|
||||
var y = e.clientY - rect.top - config.gap - this.dragOffset.y;
|
||||
|
||||
// 计算列和行
|
||||
var col = Math.floor(x / (this.cellSize + config.gap)) + 1;
|
||||
var row = Math.floor(y / (this.cellSize + config.gap)) + 1;
|
||||
|
||||
|
||||
// 边界约束
|
||||
col = Math.max(1, Math.min(config.columns, col));
|
||||
row = Math.max(1, Math.min(this.rows, row));
|
||||
|
||||
|
||||
return { column: col, row: row };
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 添加组件到画布
|
||||
*/
|
||||
@@ -211,13 +255,13 @@ var webbuilder = {
|
||||
console.error('Component type not found:', componentType);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// 生成唯一ID
|
||||
var id = componentType + '-' + (++this.idCounter);
|
||||
|
||||
|
||||
// 计算 startCell
|
||||
var startCell = (gridPos.row - 1) * this.phoneConfig.columns + (gridPos.column - 1);
|
||||
|
||||
|
||||
// 创建组件实例
|
||||
var instance = {
|
||||
id: id,
|
||||
@@ -229,33 +273,36 @@ var webbuilder = {
|
||||
},
|
||||
props: JSON.parse(JSON.stringify(typeDef.defaultProps || {}))
|
||||
};
|
||||
|
||||
|
||||
// 渲染组件
|
||||
this._renderComponent(instance);
|
||||
|
||||
|
||||
// 添加到实例列表
|
||||
this.componentInstances.push(instance);
|
||||
|
||||
|
||||
// 选中新添加的组件
|
||||
this._selectComponent(instance.id);
|
||||
|
||||
// 触发回调
|
||||
this._notifyChanged('add', instance);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 渲染组件到画布（编辑器内部使用）
|
||||
*/
|
||||
_renderComponent: function(instance) {
|
||||
var typeDef = this.componentTypes[instance.type];
|
||||
if (!typeDef) return;
|
||||
|
||||
|
||||
// 计算行列位置
|
||||
var columns = this.phoneConfig.columns;
|
||||
var startCol = instance.grid.startCell % columns;
|
||||
var startRow = Math.floor(instance.grid.startCell / columns);
|
||||
|
||||
|
||||
// 边界约束
|
||||
var colSpan = Math.min(instance.grid.colSpan, columns - startCol);
|
||||
var rowSpan = instance.grid.rowSpan;
|
||||
|
||||
|
||||
// 创建组件容器元素
|
||||
var el = document.createElement('div');
|
||||
el.className = 'webbuilder-component';
|
||||
@@ -265,7 +312,7 @@ var webbuilder = {
|
||||
el.style.gridRow = (startRow + 1) + ' / span ' + rowSpan;
|
||||
el.style.position = 'relative';
|
||||
el.style.overflow = 'hidden';
|
||||
|
||||
|
||||
// 渲染组件内容 - render 函数返回 HTML 元素对象
|
||||
if (typeDef.render) {
|
||||
var content = typeDef.render(instance.props);
|
||||
@@ -277,7 +324,7 @@ var webbuilder = {
|
||||
el.appendChild(content);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 使组件可拖拽
|
||||
var self = this;
|
||||
el.setAttribute('draggable', true);
|
||||
@@ -285,25 +332,29 @@ var webbuilder = {
|
||||
e.stopPropagation();
|
||||
self.draggingComponent = instance.id;
|
||||
el.style.opacity = '0.5';
|
||||
// 计算鼠标相对于组件的偏移
|
||||
var rect = el.getBoundingClientRect();
|
||||
self.dragOffset.x = e.clientX - rect.left;
|
||||
self.dragOffset.y = e.clientY - rect.top;
|
||||
});
|
||||
el.addEventListener('dragend', function(e) {
|
||||
el.style.opacity = '1';
|
||||
self.draggingComponent = null;
|
||||
});
|
||||
|
||||
|
||||
// 点击选中
|
||||
el.addEventListener('click', function(e) {
|
||||
e.stopPropagation();
|
||||
self._selectComponent(instance.id);
|
||||
});
|
||||
|
||||
|
||||
// 存储元素引用
|
||||
instance.element = el;
|
||||
|
||||
|
||||
// 添加到画布
|
||||
this.canvasEl.appendChild(el);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 将组件渲染到指定的 div 容器
|
||||
* @param {HTMLElement} container - 目标容器
|
||||
@@ -312,10 +363,10 @@ var webbuilder = {
|
||||
renderToDiv: function(container) {
|
||||
var self = this;
|
||||
var result = [];
|
||||
|
||||
|
||||
// 清空容器
|
||||
container.innerHTML = '';
|
||||
|
||||
|
||||
// 创建画布样式
|
||||
container.style.width = this.phoneConfig.width + 'px';
|
||||
container.style.height = this.phoneConfig.height + 'px';
|
||||
@@ -326,29 +377,29 @@ var webbuilder = {
|
||||
container.style.background = this.phoneConfig.background;
|
||||
container.style.padding = this.phoneConfig.gap + 'px';
|
||||
container.style.boxSizing = 'border-box';
|
||||
|
||||
|
||||
var columns = this.phoneConfig.columns;
|
||||
|
||||
|
||||
// 遍历所有组件实例
|
||||
this.componentInstances.forEach(function(instance) {
|
||||
var typeDef = self.componentTypes[instance.type];
|
||||
if (!typeDef || !typeDef.render) return;
|
||||
|
||||
|
||||
// 计算行列位置
|
||||
var startCol = instance.grid.startCell % columns;
|
||||
var startRow = Math.floor(instance.grid.startCell / columns);
|
||||
var colSpan = Math.min(instance.grid.colSpan, columns - startCol);
|
||||
var rowSpan = instance.grid.rowSpan;
|
||||
|
||||
|
||||
// 创建组件容器
|
||||
var wrapper = document.createElement('div');
|
||||
wrapper.style.gridColumn = (startCol + 1) + ' / span ' + colSpan;
|
||||
wrapper.style.gridRow = (startRow + 1) + ' / span ' + rowSpan;
|
||||
wrapper.style.overflow = 'hidden';
|
||||
|
||||
|
||||
// 调用 render 函数获取组件元素
|
||||
var componentElement = typeDef.render(instance.props);
|
||||
|
||||
|
||||
// 如果返回的是字符串，保持兼容
|
||||
if (typeof componentElement === 'string') {
|
||||
wrapper.innerHTML = componentElement;
|
||||
@@ -356,10 +407,10 @@ var webbuilder = {
|
||||
} else if (componentElement instanceof HTMLElement) {
|
||||
wrapper.appendChild(componentElement);
|
||||
}
|
||||
|
||||
|
||||
// 添加到容器
|
||||
container.appendChild(wrapper);
|
||||
|
||||
|
||||
// 添加到结果列表
|
||||
result.push({
|
||||
element: componentElement, // 控件本身的 HTML 元素对象
|
||||
@@ -369,53 +420,56 @@ var webbuilder = {
|
||||
type: instance.type
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 移动组件
|
||||
*/
|
||||
_moveComponent: function(componentId, gridPos) {
|
||||
var instance = this._findInstance(componentId);
|
||||
if (!instance) return;
|
||||
|
||||
|
||||
// 更新 startCell
|
||||
instance.grid.startCell = (gridPos.row - 1) * this.phoneConfig.columns + (gridPos.column - 1);
|
||||
|
||||
|
||||
// 重新计算行列位置
|
||||
var columns = this.phoneConfig.columns;
|
||||
var startCol = instance.grid.startCell % columns;
|
||||
var startRow = Math.floor(instance.grid.startCell / columns);
|
||||
var colSpan = Math.min(instance.grid.colSpan, columns - startCol);
|
||||
|
||||
|
||||
// 更新样式
|
||||
instance.element.style.gridColumn = (startCol + 1) + ' / span ' + colSpan;
|
||||
instance.element.style.gridRow = (startRow + 1) + ' / span ' + instance.grid.rowSpan;
|
||||
|
||||
|
||||
// 更新属性面板
|
||||
if (this.selectedComponent === componentId) {
|
||||
this._showPropertyPanel(instance);
|
||||
}
|
||||
|
||||
// 触发回调
|
||||
this._notifyChanged('move', instance);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 选中组件
|
||||
*/
|
||||
_selectComponent: function(componentId) {
|
||||
// 取消之前的选中
|
||||
this._deselectAll();
|
||||
|
||||
|
||||
var instance = this._findInstance(componentId);
|
||||
if (!instance) return;
|
||||
|
||||
|
||||
this.selectedComponent = componentId;
|
||||
instance.element.classList.add('selected');
|
||||
|
||||
|
||||
// 显示属性面板
|
||||
this._showPropertyPanel(instance);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 取消所有选中
|
||||
*/
|
||||
@@ -427,7 +481,7 @@ var webbuilder = {
|
||||
});
|
||||
this.propertyPanelEl.innerHTML = '';
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 显示属性面板
|
||||
*/
|
||||
@@ -435,13 +489,13 @@ var webbuilder = {
|
||||
var typeDef = this.componentTypes[instance.type];
|
||||
var self = this;
|
||||
var columns = this.phoneConfig.columns;
|
||||
|
||||
|
||||
// 计算当前行列
|
||||
var startCol = instance.grid.startCell % columns;
|
||||
var startRow = Math.floor(instance.grid.startCell / columns);
|
||||
|
||||
|
||||
var html = '<div class="property-title">' + (typeDef.label || instance.type) + '</div>';
|
||||
|
||||
|
||||
// 基础属性
|
||||
html += '<div class="property-section">';
|
||||
html += '<div class="property-section-title">位置大小</div>';
|
||||
@@ -450,7 +504,7 @@ var webbuilder = {
|
||||
html += '<div class="property-row"><label>跨列数:</label><input type="number" data-prop="colSpan" value="' + instance.grid.colSpan + '" min="1" max="' + columns + '"></div>';
|
||||
html += '<div class="property-row"><label>跨行数:</label><input type="number" data-prop="rowSpan" value="' + instance.grid.rowSpan + '" min="1"></div>';
|
||||
html += '</div>';
|
||||
|
||||
|
||||
// 自定义属性
|
||||
if (typeDef.traits && typeDef.traits.length > 0) {
|
||||
html += '<div class="property-section">';
|
||||
@@ -470,23 +524,23 @@ var webbuilder = {
|
||||
});
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
|
||||
// 删除按钮
|
||||
html += '<div class="property-section">';
|
||||
html += '<button class="btn-delete" data-action="delete">删除组件</button>';
|
||||
html += '</div>';
|
||||
|
||||
|
||||
this.propertyPanelEl.innerHTML = html;
|
||||
|
||||
|
||||
// 绑定事件
|
||||
this.propertyPanelEl.querySelectorAll('input').forEach(function(input) {
|
||||
input.addEventListener('change', function() {
|
||||
var prop = input.getAttribute('data-prop');
|
||||
var trait = input.getAttribute('data-trait');
|
||||
|
||||
|
||||
if (prop) {
|
||||
// 更新网格位置
|
||||
var value = parseInt(input.value) || 1;
|
||||
var value = parseInt(input.value, 10) || 1;
|
||||
if (prop === 'startCol') {
|
||||
var currentRow = Math.floor(instance.grid.startCell / columns);
|
||||
instance.grid.startCell = currentRow * columns + (value - 1);
|
||||
@@ -498,19 +552,19 @@ var webbuilder = {
|
||||
} else if (prop === 'rowSpan') {
|
||||
instance.grid.rowSpan = value;
|
||||
}
|
||||
|
||||
|
||||
// 重新计算位置
|
||||
var startCol = instance.grid.startCell % columns;
|
||||
var startRow = Math.floor(instance.grid.startCell / columns);
|
||||
var colSpan = Math.min(instance.grid.colSpan, columns - startCol);
|
||||
|
||||
|
||||
instance.element.style.gridColumn = (startCol + 1) + ' / span ' + colSpan;
|
||||
instance.element.style.gridRow = (startRow + 1) + ' / span ' + instance.grid.rowSpan;
|
||||
} else if (trait) {
|
||||
// 更新组件属性
|
||||
var typeDef = self.componentTypes[instance.type];
|
||||
var traitDef = typeDef.traits.find(function(t) { return t.name === trait; });
|
||||
|
||||
|
||||
if (input.type === 'checkbox') {
|
||||
instance.props[trait] = input.checked;
|
||||
} else if (traitDef && traitDef.type === 'number') {
|
||||
@@ -518,7 +572,7 @@ var webbuilder = {
|
||||
} else {
|
||||
instance.props[trait] = input.value;
|
||||
}
|
||||
|
||||
|
||||
// 重新渲染组件内容
|
||||
if (typeDef.render) {
|
||||
var content = typeDef.render(instance.props);
|
||||
@@ -530,9 +584,12 @@ var webbuilder = {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 触发属性更新回调
|
||||
self._notifyChanged('update', instance);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// 删除按钮
|
||||
var deleteBtn = this.propertyPanelEl.querySelector('[data-action="delete"]');
|
||||
if (deleteBtn) {
|
||||
@@ -541,7 +598,7 @@ var webbuilder = {
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 删除组件
|
||||
*/
|
||||
@@ -553,23 +610,26 @@ var webbuilder = {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (index === -1) return;
|
||||
|
||||
|
||||
var instance = this.componentInstances[index];
|
||||
|
||||
|
||||
// 从DOM移除
|
||||
if (instance.element) {
|
||||
instance.element.remove();
|
||||
}
|
||||
|
||||
|
||||
// 从数组移除
|
||||
this.componentInstances.splice(index, 1);
|
||||
|
||||
|
||||
// 取消选中
|
||||
this._deselectAll();
|
||||
|
||||
// 触发回调
|
||||
this._notifyChanged('delete', { id: componentId });
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 查找组件实例
|
||||
*/
|
||||
@@ -581,7 +641,7 @@ var webbuilder = {
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 注册组件类型
|
||||
* @param {string} name - 组件名称
|
||||
@@ -592,29 +652,29 @@ var webbuilder = {
|
||||
console.warn('Component type already defined:', name);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
this.componentTypes[name] = definition;
|
||||
|
||||
|
||||
// 添加到工具箱
|
||||
this._addToToolbox(name, definition);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 添加组件到工具箱
|
||||
*/
|
||||
_addToToolbox: function(name, definition) {
|
||||
var self = this;
|
||||
|
||||
|
||||
var item = document.createElement('div');
|
||||
item.className = 'webbuilder-toolbox-item';
|
||||
item.setAttribute('draggable', true);
|
||||
item.setAttribute('data-type', name);
|
||||
|
||||
|
||||
var icon = definition.icon || '📦';
|
||||
var label = definition.label || name;
|
||||
|
||||
|
||||
item.innerHTML = '<span class="icon">' + icon + '</span><span class="label">' + label + '</span>';
|
||||
|
||||
|
||||
// 拖拽事件
|
||||
item.addEventListener('dragstart', function(e) {
|
||||
self.draggingType = name;
|
||||
@@ -624,10 +684,10 @@ var webbuilder = {
|
||||
item.style.opacity = '1';
|
||||
self.draggingType = null;
|
||||
});
|
||||
|
||||
|
||||
this.toolboxListEl.appendChild(item);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 导出为JSONB
|
||||
* 返回格式: { version, layouts: { phone: {...}, computer: null } }
|
||||
@@ -645,7 +705,7 @@ var webbuilder = {
|
||||
props: JSON.parse(JSON.stringify(instance.props))
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
return {
|
||||
version: '1.0',
|
||||
layouts: {
|
||||
@@ -665,7 +725,7 @@ var webbuilder = {
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 从JSONB加载
|
||||
*/
|
||||
@@ -674,14 +734,14 @@ var webbuilder = {
|
||||
this.canvasEl.innerHTML = '';
|
||||
this.componentInstances = [];
|
||||
this.selectedComponent = null;
|
||||
|
||||
|
||||
// 获取手机布局
|
||||
var phoneLayout = jsonb.layouts && jsonb.layouts.phone;
|
||||
if (!phoneLayout) {
|
||||
console.warn('No phone layout found');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
// 渲染组件
|
||||
if (phoneLayout.components) {
|
||||
var self = this;
|
||||
@@ -691,7 +751,7 @@ var webbuilder = {
|
||||
console.warn('Component type not found:', comp.type);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
var instance = {
|
||||
id: comp.id,
|
||||
type: comp.type,
|
||||
@@ -702,23 +762,26 @@ var webbuilder = {
|
||||
},
|
||||
props: comp.props || {}
|
||||
};
|
||||
|
||||
|
||||
self._renderComponent(instance);
|
||||
self.componentInstances.push(instance);
|
||||
});
|
||||
|
||||
|
||||
// 更新ID计数器
|
||||
var maxId = 0;
|
||||
this.componentInstances.forEach(function(inst) {
|
||||
var match = inst.id.match(/-(\d+)$/);
|
||||
if (match) {
|
||||
maxId = Math.max(maxId, parseInt(match[1]));
|
||||
maxId = Math.max(maxId, parseInt(match[1], 10));
|
||||
}
|
||||
});
|
||||
this.idCounter = maxId;
|
||||
}
|
||||
|
||||
// 触发回调
|
||||
this._notifyChanged('load', { count: this.componentInstances.length });
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 获取画布配置
|
||||
*/
|
||||
@@ -733,14 +796,14 @@ var webbuilder = {
|
||||
background: this.phoneConfig.background
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 获取所有组件实例
|
||||
*/
|
||||
getComponents: function() {
|
||||
return JSON.parse(JSON.stringify(this.componentInstances));
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 清空画布
|
||||
*/
|
||||
@@ -749,5 +812,8 @@ var webbuilder = {
|
||||
this.componentInstances = [];
|
||||
this.selectedComponent = null;
|
||||
this.propertyPanelEl.innerHTML = '';
|
||||
|
||||
// 触发回调
|
||||
this._notifyChanged('clear', null);
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user