1266 lines
46 KiB
JavaScript
1266 lines
46 KiB
JavaScript
/**
|
||
* WebBuilder - IoT 可视化编辑器
|
||
* 支持手机端和电脑端布局
|
||
* 单元格比例 1:1（正方形）
|
||
*/
|
||
|
||
var webbuilder = {
|
||
container: null,
|
||
phoneConfig: {
|
||
width: 375,
|
||
height: 812,
|
||
columns: 24,
|
||
gap: 2,
|
||
background: '#f5f5f5'
|
||
},
|
||
cellSize: 0,
|
||
rows: 0,
|
||
componentTypes: {},
|
||
componentInstances: [],
|
||
selectedComponent: null,
|
||
draggingComponent: null,
|
||
draggingType: null,
|
||
dragOffset: { x: 0, y: 0 },
|
||
idCounter: 0,
|
||
onChangedCallback: null,
|
||
resizeHandles: null,
|
||
isResizing: false,
|
||
resizeDirection: null,
|
||
resizeStartPos: { x: 0, y: 0 },
|
||
resizeStartSize: { colSpan: 0, rowSpan: 0 },
|
||
isMobile: false,
|
||
mobilePanelMode: 'toolbox',
|
||
touchDragType: null,
|
||
touchDragComponent: null,
|
||
touchDragOffset: { x: 0, y: 0 },
|
||
mobileStyleEl: null,
|
||
|
||
_applyHandleBaseStyle: function(handle) {
|
||
handle.style.position = 'absolute';
|
||
handle.style.width = '8px';
|
||
handle.style.height = '8px';
|
||
handle.style.background = '#1890ff';
|
||
handle.style.border = '1px solid #fff';
|
||
handle.style.borderRadius = '2px';
|
||
handle.style.pointerEvents = 'auto';
|
||
handle.style.zIndex = '11';
|
||
handle.style.boxShadow = '0 0 2px rgba(0, 0, 0, 0.3)';
|
||
},
|
||
|
||
_calculateGrid: function() {
|
||
var config = this.phoneConfig;
|
||
this.cellSize = (config.width - (config.columns + 1) * config.gap) / config.columns;
|
||
this.rows = Math.floor((config.height - config.gap) / (this.cellSize + config.gap));
|
||
this.phoneConfig.height = this.rows * this.cellSize + (this.rows + 1) * config.gap;
|
||
},
|
||
|
||
_detectMobile: function() {
|
||
return window.innerWidth <= 768 ||
|
||
'ontouchstart' in window ||
|
||
navigator.maxTouchPoints > 0;
|
||
},
|
||
|
||
_injectMobileStyles: function() {
|
||
if (this.mobileStyleEl) return;
|
||
var style = document.createElement('style');
|
||
style.textContent = [
|
||
'.wb-mobile {',
|
||
' display: flex !important;',
|
||
' flex-direction: column !important;',
|
||
' height: 100vh !important;',
|
||
'}',
|
||
'.wb-mobile .webbuilder-canvas-wrapper {',
|
||
' flex: 1 !important;',
|
||
' overflow: auto !important;',
|
||
' min-height: 0 !important;',
|
||
'}',
|
||
'.wb-mobile .webbuilder-toolbox {',
|
||
' width: 100% !important;',
|
||
' height: 80px !important;',
|
||
' flex-shrink: 0 !important;',
|
||
' border-right: none !important;',
|
||
' border-top: 1px solid #e8e8e8 !important;',
|
||
'}',
|
||
'.wb-mobile .webbuilder-toolbox-title {',
|
||
' display: none !important;',
|
||
'}',
|
||
'.wb-mobile .webbuilder-toolbox-list {',
|
||
' display: flex !important;',
|
||
' flex-direction: row !important;',
|
||
' overflow-x: auto !important;',
|
||
' overflow-y: hidden !important;',
|
||
' padding: 8px !important;',
|
||
' gap: 8px !important;',
|
||
' height: 100% !important;',
|
||
' -webkit-overflow-scrolling: touch !important;',
|
||
'}',
|
||
'.wb-mobile .webbuilder-toolbox-item {',
|
||
' flex-direction: column !important;',
|
||
' min-width: 64px !important;',
|
||
' padding: 8px !important;',
|
||
' margin-bottom: 0 !important;',
|
||
' justify-content: center !important;',
|
||
' align-items: center !important;',
|
||
'}',
|
||
'.wb-mobile .webbuilder-toolbox-item .icon {',
|
||
' font-size: 24px !important;',
|
||
'}',
|
||
'.wb-mobile .webbuilder-toolbox-item .label {',
|
||
' font-size: 11px !important;',
|
||
' text-align: center !important;',
|
||
'}',
|
||
'.wb-mobile .webbuilder-property-panel {',
|
||
' width: 100% !important;',
|
||
' height: 200px !important;',
|
||
' flex-shrink: 0 !important;',
|
||
' border-left: none !important;',
|
||
' border-top: 1px solid #e8e8e8 !important;',
|
||
' overflow-y: auto !important;',
|
||
' background: #fff !important;',
|
||
'}',
|
||
'.wb-mobile-hidden {',
|
||
' display: none !important;',
|
||
'}',
|
||
'.wb-mobile-close-panel {',
|
||
' width: 100% !important;',
|
||
' padding: 10px !important;',
|
||
' margin: 8px 0 !important;',
|
||
' background: #1890ff !important;',
|
||
' border: none !important;',
|
||
' border-radius: 4px !important;',
|
||
' color: #fff !important;',
|
||
' font-size: 14px !important;',
|
||
' cursor: pointer !important;',
|
||
'}'
|
||
].join('\n');
|
||
document.head.appendChild(style);
|
||
this.mobileStyleEl = style;
|
||
},
|
||
|
||
init: function(containerSelector) {
|
||
if (typeof containerSelector === 'string') {
|
||
this.container = document.querySelector(containerSelector);
|
||
} else {
|
||
this.container = containerSelector;
|
||
}
|
||
|
||
if (!this.container) {
|
||
throw new Error('Container element not found');
|
||
}
|
||
|
||
this.isMobile = this._detectMobile();
|
||
|
||
if (this.isMobile) {
|
||
this._injectMobileStyles();
|
||
}
|
||
|
||
this._calculateGrid();
|
||
this._createEditorStructure();
|
||
this._initCanvas();
|
||
this._initToolbox();
|
||
this._initKeyboardEvents();
|
||
this._initResizeEvents();
|
||
this._initTouchEvents();
|
||
|
||
if (this.isMobile) {
|
||
this._updateMobilePanelVisibility();
|
||
}
|
||
|
||
return this;
|
||
},
|
||
|
||
_createEditorStructure: function() {
|
||
this.container.innerHTML = '';
|
||
this.container.classList.add('webbuilder-editor');
|
||
if (this.isMobile) {
|
||
this.container.classList.add('wb-mobile');
|
||
}
|
||
|
||
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);
|
||
|
||
this.toolboxEl = document.createElement('div');
|
||
this.toolboxEl.className = 'webbuilder-toolbox';
|
||
this.container.appendChild(this.toolboxEl);
|
||
},
|
||
|
||
_initCanvas: function() {
|
||
var config = this.phoneConfig;
|
||
var self = this;
|
||
|
||
this.canvasEl = document.createElement('div');
|
||
this.canvasEl.className = 'webbuilder-canvas';
|
||
this.canvasEl.style.width = config.width + 'px';
|
||
this.canvasEl.style.height = config.height + 'px';
|
||
this.canvasEl.style.display = 'grid';
|
||
this.canvasEl.style.gridTemplateColumns = 'repeat(' + config.columns + ', ' + this.cellSize + 'px)';
|
||
this.canvasEl.style.gridAutoRows = this.cellSize + 'px';
|
||
this.canvasEl.style.gap = config.gap + 'px';
|
||
this.canvasEl.style.background = config.background;
|
||
this.canvasEl.style.position = 'relative';
|
||
this.canvasEl.style.padding = config.gap + 'px';
|
||
this.canvasEl.style.boxSizing = 'border-box';
|
||
this.canvasWrapperEl.appendChild(this.canvasEl);
|
||
|
||
this.canvasEl.addEventListener('click', function(e) {
|
||
if (e.target === self.canvasEl) {
|
||
self._deselectAll();
|
||
}
|
||
});
|
||
|
||
this.canvasEl.addEventListener('dragover', function(e) {
|
||
e.preventDefault();
|
||
self.canvasEl.classList.add('dropping');
|
||
});
|
||
|
||
this.canvasEl.addEventListener('dragleave', function() {
|
||
self.canvasEl.classList.remove('dropping');
|
||
});
|
||
|
||
this.canvasEl.addEventListener('drop', function(e) {
|
||
var gridPos;
|
||
var gridPos2;
|
||
e.preventDefault();
|
||
self.canvasEl.classList.remove('dropping');
|
||
|
||
if (self.draggingType) {
|
||
gridPos = self._calculateGridPosition(e);
|
||
self._addComponentToCanvas(self.draggingType, gridPos);
|
||
self.draggingType = null;
|
||
} else if (self.draggingComponent) {
|
||
gridPos2 = self._calculateGridPosition(e);
|
||
self._moveComponent(self.draggingComponent, gridPos2);
|
||
self.draggingComponent = null;
|
||
}
|
||
});
|
||
},
|
||
|
||
_initToolbox: function() {
|
||
if (this.isMobile) {
|
||
this._initMobileToolbox();
|
||
} else {
|
||
this._initDesktopToolbox();
|
||
}
|
||
},
|
||
|
||
_initDesktopToolbox: function() {
|
||
this.toolboxEl.innerHTML = '<div class="webbuilder-toolbox-title">组件库</div>';
|
||
this.toolboxListEl = document.createElement('div');
|
||
this.toolboxListEl.className = 'webbuilder-toolbox-list';
|
||
this.toolboxEl.appendChild(this.toolboxListEl);
|
||
},
|
||
|
||
_initMobileToolbox: function() {
|
||
this.toolboxListEl = document.createElement('div');
|
||
this.toolboxListEl.className = 'webbuilder-toolbox-list wb-mobile-toolbox-list';
|
||
this.toolboxEl.appendChild(this.toolboxListEl);
|
||
},
|
||
|
||
_initKeyboardEvents: function() {
|
||
var self = this;
|
||
document.addEventListener('keydown', function(e) {
|
||
var target = e.target;
|
||
var isInputElement = target.tagName === 'INPUT' ||
|
||
target.tagName === 'TEXTAREA' ||
|
||
target.tagName === 'SELECT' ||
|
||
target.isContentEditable;
|
||
|
||
if (isInputElement) {
|
||
return;
|
||
}
|
||
|
||
if (e.key === 'Delete' || e.key === 'Backspace') {
|
||
if (self.selectedComponent) {
|
||
e.preventDefault();
|
||
self._deleteComponent(self.selectedComponent);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
|
||
_initResizeEvents: function() {
|
||
var self = this;
|
||
|
||
document.addEventListener('mousemove', function(e) {
|
||
if (self.isResizing && self.selectedComponent) {
|
||
e.preventDefault();
|
||
self._handleResizeMove(e);
|
||
}
|
||
});
|
||
|
||
document.addEventListener('mouseup', function(e) {
|
||
if (self.isResizing) {
|
||
e.preventDefault();
|
||
self._handleResizeEnd(e);
|
||
}
|
||
});
|
||
},
|
||
|
||
_initTouchEvents: function() {
|
||
var self = this;
|
||
if (!this.isMobile) return;
|
||
|
||
this.toolboxListEl.addEventListener('touchstart', function(e) {
|
||
var item = e.target.closest('.webbuilder-toolbox-item');
|
||
if (!item) return;
|
||
self.touchDragType = item.getAttribute('data-type');
|
||
}, { passive: true });
|
||
|
||
this.canvasEl.addEventListener('touchmove', function(e) {
|
||
if (self.touchDragType || self.touchDragComponent) {
|
||
e.preventDefault();
|
||
}
|
||
}, { passive: false });
|
||
|
||
this.canvasEl.addEventListener('touchend', function(e) {
|
||
var touch;
|
||
var gridPos;
|
||
var touch2;
|
||
var gridPos2;
|
||
if (self.touchDragType) {
|
||
touch = e.changedTouches[0];
|
||
gridPos = self._calculateGridPositionFromTouch(touch);
|
||
if (gridPos) {
|
||
self._addComponentToCanvas(self.touchDragType, gridPos);
|
||
}
|
||
self.touchDragType = null;
|
||
} else if (self.touchDragComponent) {
|
||
touch2 = e.changedTouches[0];
|
||
gridPos2 = self._calculateGridPositionFromTouch(touch2);
|
||
if (gridPos2) {
|
||
self._moveComponent(self.touchDragComponent, gridPos2);
|
||
}
|
||
self.touchDragComponent = null;
|
||
}
|
||
});
|
||
},
|
||
|
||
_calculateGridPositionFromTouch: function(touch) {
|
||
var rect = this.canvasEl.getBoundingClientRect();
|
||
var config = this.phoneConfig;
|
||
var x = touch.clientX - rect.left - config.gap;
|
||
var y = touch.clientY - rect.top - config.gap;
|
||
var col;
|
||
var row;
|
||
|
||
if (x < 0 || y < 0 || x > config.width || y > config.height) {
|
||
return null;
|
||
}
|
||
|
||
col = Math.floor(x / (this.cellSize + config.gap)) + 1;
|
||
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 };
|
||
},
|
||
|
||
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 - 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 };
|
||
},
|
||
|
||
_addComponentToCanvas: function(componentType, gridPos) {
|
||
var typeDef = this.componentTypes[componentType];
|
||
var id;
|
||
var startCell;
|
||
var instance;
|
||
|
||
if (!typeDef) {
|
||
console.error('Component type not found:', componentType);
|
||
return;
|
||
}
|
||
|
||
id = componentType + '-' + (++this.idCounter);
|
||
startCell = (gridPos.row - 1) * this.phoneConfig.columns + (gridPos.column - 1);
|
||
|
||
instance = {
|
||
id: id,
|
||
type: componentType,
|
||
grid: {
|
||
startCell: startCell,
|
||
colSpan: typeDef.defaultColumnSpan || 6,
|
||
rowSpan: typeDef.defaultRowSpan || 4
|
||
},
|
||
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];
|
||
var columns;
|
||
var startCol;
|
||
var startRow;
|
||
var colSpan;
|
||
var rowSpan;
|
||
var el;
|
||
var content;
|
||
var handlesContainer;
|
||
var directions;
|
||
var self = this;
|
||
|
||
if (!typeDef) return;
|
||
|
||
columns = this.phoneConfig.columns;
|
||
startCol = instance.grid.startCell % columns;
|
||
startRow = Math.floor(instance.grid.startCell / columns);
|
||
colSpan = Math.min(instance.grid.colSpan, columns - startCol);
|
||
rowSpan = instance.grid.rowSpan;
|
||
|
||
el = document.createElement('div');
|
||
el.className = 'webbuilder-component';
|
||
el.setAttribute('data-id', instance.id);
|
||
el.setAttribute('data-type', instance.type);
|
||
el.style.gridColumn = (startCol + 1) + ' / span ' + colSpan;
|
||
el.style.gridRow = (startRow + 1) + ' / span ' + rowSpan;
|
||
el.style.position = 'relative';
|
||
el.style.overflow = 'visible';
|
||
|
||
if (typeDef.render) {
|
||
content = typeDef.render(instance.props);
|
||
if (typeof content === 'string') {
|
||
el.innerHTML = content;
|
||
} else if (content instanceof HTMLElement) {
|
||
el.appendChild(content);
|
||
}
|
||
}
|
||
|
||
handlesContainer = document.createElement('div');
|
||
handlesContainer.className = 'resize-handles-container';
|
||
handlesContainer.style.display = 'none';
|
||
handlesContainer.style.position = 'absolute';
|
||
handlesContainer.style.top = '0';
|
||
handlesContainer.style.left = '0';
|
||
handlesContainer.style.width = '100%';
|
||
handlesContainer.style.height = '100%';
|
||
handlesContainer.style.pointerEvents = 'none';
|
||
handlesContainer.style.zIndex = '10';
|
||
el.appendChild(handlesContainer);
|
||
|
||
directions = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'];
|
||
|
||
directions.forEach(function(direction) {
|
||
var handle = document.createElement('div');
|
||
handle.className = 'resize-handle resize-handle-' + direction;
|
||
handle.setAttribute('data-direction', direction);
|
||
self._applyHandleBaseStyle(handle);
|
||
|
||
switch(direction) {
|
||
case 'nw':
|
||
handle.style.top = '-4px';
|
||
handle.style.left = '-4px';
|
||
handle.style.cursor = 'nwse-resize';
|
||
break;
|
||
case 'n':
|
||
handle.style.top = '-4px';
|
||
handle.style.left = '50%';
|
||
handle.style.transform = 'translateX(-50%)';
|
||
handle.style.cursor = 'ns-resize';
|
||
break;
|
||
case 'ne':
|
||
handle.style.top = '-4px';
|
||
handle.style.right = '-4px';
|
||
handle.style.cursor = 'nesw-resize';
|
||
break;
|
||
case 'w':
|
||
handle.style.top = '50%';
|
||
handle.style.left = '-4px';
|
||
handle.style.transform = 'translateY(-50%)';
|
||
handle.style.cursor = 'ew-resize';
|
||
break;
|
||
case 'e':
|
||
handle.style.top = '50%';
|
||
handle.style.right = '-4px';
|
||
handle.style.transform = 'translateY(-50%)';
|
||
handle.style.cursor = 'ew-resize';
|
||
break;
|
||
case 'sw':
|
||
handle.style.bottom = '-4px';
|
||
handle.style.left = '-4px';
|
||
handle.style.cursor = 'nesw-resize';
|
||
break;
|
||
case 's':
|
||
handle.style.bottom = '-4px';
|
||
handle.style.left = '50%';
|
||
handle.style.transform = 'translateX(-50%)';
|
||
handle.style.cursor = 'ns-resize';
|
||
break;
|
||
case 'se':
|
||
handle.style.bottom = '-4px';
|
||
handle.style.right = '-4px';
|
||
handle.style.cursor = 'nwse-resize';
|
||
break;
|
||
}
|
||
|
||
handle.addEventListener('mousedown', function(e) {
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
self._handleResizeStart(e, instance.id, direction);
|
||
});
|
||
|
||
handlesContainer.appendChild(handle);
|
||
});
|
||
|
||
el.setAttribute('draggable', true);
|
||
el.addEventListener('dragstart', function(e) {
|
||
var rect;
|
||
if (self.isResizing) {
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
e.stopPropagation();
|
||
self.draggingComponent = instance.id;
|
||
el.style.opacity = '0.5';
|
||
rect = el.getBoundingClientRect();
|
||
self.dragOffset.x = e.clientX - rect.left;
|
||
self.dragOffset.y = e.clientY - rect.top;
|
||
});
|
||
el.addEventListener('dragend', function() {
|
||
el.style.opacity = '1';
|
||
self.draggingComponent = null;
|
||
});
|
||
|
||
el.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
self._selectComponent(instance.id);
|
||
});
|
||
|
||
if (this.isMobile) {
|
||
el.addEventListener('touchstart', function(e) {
|
||
var touch;
|
||
var rect;
|
||
e.stopPropagation();
|
||
self.touchDragComponent = instance.id;
|
||
touch = e.touches[0];
|
||
rect = el.getBoundingClientRect();
|
||
self.touchDragOffset.x = touch.clientX - rect.left;
|
||
self.touchDragOffset.y = touch.clientY - rect.top;
|
||
}, { passive: true });
|
||
}
|
||
|
||
instance.element = el;
|
||
instance.handlesContainer = handlesContainer;
|
||
this.canvasEl.appendChild(el);
|
||
},
|
||
|
||
_handleResizeStart: function(e, componentId, direction) {
|
||
var instance = this._findInstance(componentId);
|
||
if (!instance) return;
|
||
|
||
this.isResizing = true;
|
||
this.resizeDirection = direction;
|
||
this.resizeStartPos = { x: e.clientX, y: e.clientY };
|
||
this.resizeStartSize = {
|
||
colSpan: instance.grid.colSpan,
|
||
rowSpan: instance.grid.rowSpan,
|
||
startCell: instance.grid.startCell
|
||
};
|
||
this.canvasEl.style.pointerEvents = 'none';
|
||
},
|
||
|
||
_handleResizeMove: function(e) {
|
||
var instance = this._findInstance(this.selectedComponent);
|
||
var config;
|
||
var cellSize;
|
||
var gap;
|
||
var deltaX;
|
||
var deltaY;
|
||
var colDelta;
|
||
var rowDelta;
|
||
var startCol;
|
||
var startRow;
|
||
var origColSpan;
|
||
var origRowSpan;
|
||
var newColSpan;
|
||
var newRowSpan;
|
||
var newStartCol;
|
||
var newStartRow;
|
||
|
||
if (!instance) return;
|
||
|
||
config = this.phoneConfig;
|
||
cellSize = this.cellSize;
|
||
gap = config.gap;
|
||
deltaX = e.clientX - this.resizeStartPos.x;
|
||
deltaY = e.clientY - this.resizeStartPos.y;
|
||
colDelta = Math.round(deltaX / (cellSize + gap));
|
||
rowDelta = Math.round(deltaY / (cellSize + gap));
|
||
startCol = this.resizeStartSize.startCell % config.columns;
|
||
startRow = Math.floor(this.resizeStartSize.startCell / config.columns);
|
||
origColSpan = this.resizeStartSize.colSpan;
|
||
origRowSpan = this.resizeStartSize.rowSpan;
|
||
newColSpan = origColSpan;
|
||
newRowSpan = origRowSpan;
|
||
newStartCol = startCol;
|
||
newStartRow = startRow;
|
||
|
||
switch(this.resizeDirection) {
|
||
case 'se':
|
||
newColSpan = Math.max(1, origColSpan + colDelta);
|
||
newRowSpan = Math.max(1, origRowSpan + rowDelta);
|
||
break;
|
||
case 'e':
|
||
newColSpan = Math.max(1, origColSpan + colDelta);
|
||
break;
|
||
case 's':
|
||
newRowSpan = Math.max(1, origRowSpan + rowDelta);
|
||
break;
|
||
case 'w':
|
||
newColSpan = Math.max(1, origColSpan - colDelta);
|
||
newStartCol = startCol + (origColSpan - newColSpan);
|
||
if (newStartCol < 0) {
|
||
newStartCol = 0;
|
||
newColSpan = origColSpan + startCol;
|
||
}
|
||
break;
|
||
case 'sw':
|
||
newColSpan = Math.max(1, origColSpan - colDelta);
|
||
newStartCol = startCol + (origColSpan - newColSpan);
|
||
newRowSpan = Math.max(1, origRowSpan + rowDelta);
|
||
if (newStartCol < 0) {
|
||
newStartCol = 0;
|
||
newColSpan = origColSpan + startCol;
|
||
}
|
||
break;
|
||
case 'n':
|
||
newRowSpan = Math.max(1, origRowSpan - rowDelta);
|
||
newStartRow = startRow + (origRowSpan - newRowSpan);
|
||
if (newStartRow < 0) {
|
||
newStartRow = 0;
|
||
newRowSpan = origRowSpan + startRow;
|
||
}
|
||
break;
|
||
case 'ne':
|
||
newColSpan = Math.max(1, origColSpan + colDelta);
|
||
newRowSpan = Math.max(1, origRowSpan - rowDelta);
|
||
newStartRow = startRow + (origRowSpan - newRowSpan);
|
||
if (newStartRow < 0) {
|
||
newStartRow = 0;
|
||
newRowSpan = origRowSpan + startRow;
|
||
}
|
||
break;
|
||
case 'nw':
|
||
newColSpan = Math.max(1, origColSpan - colDelta);
|
||
newStartCol = startCol + (origColSpan - newColSpan);
|
||
newRowSpan = Math.max(1, origRowSpan - rowDelta);
|
||
newStartRow = startRow + (origRowSpan - newRowSpan);
|
||
if (newStartCol < 0) {
|
||
newStartCol = 0;
|
||
newColSpan = origColSpan + startCol;
|
||
}
|
||
if (newStartRow < 0) {
|
||
newStartRow = 0;
|
||
newRowSpan = origRowSpan + startRow;
|
||
}
|
||
break;
|
||
}
|
||
|
||
newColSpan = Math.min(newColSpan, config.columns - newStartCol);
|
||
newRowSpan = Math.min(newRowSpan, this.rows - newStartRow);
|
||
newColSpan = Math.max(1, newColSpan);
|
||
newRowSpan = Math.max(1, newRowSpan);
|
||
|
||
instance.grid.startCell = newStartRow * config.columns + newStartCol;
|
||
instance.grid.colSpan = newColSpan;
|
||
instance.grid.rowSpan = newRowSpan;
|
||
instance.element.style.gridColumn = (newStartCol + 1) + ' / span ' + newColSpan;
|
||
instance.element.style.gridRow = (newStartRow + 1) + ' / span ' + newRowSpan;
|
||
|
||
if (this.selectedComponent === instance.id) {
|
||
this._showPropertyPanel(instance);
|
||
}
|
||
},
|
||
|
||
_handleResizeEnd: function() {
|
||
var instance = this._findInstance(this.selectedComponent);
|
||
this.isResizing = false;
|
||
this.resizeDirection = null;
|
||
this.canvasEl.style.pointerEvents = 'auto';
|
||
|
||
if (instance) {
|
||
this._notifyChanged('update', instance);
|
||
}
|
||
},
|
||
|
||
_showResizeHandles: function(instance) {
|
||
if (!instance || !instance.handlesContainer) return;
|
||
instance.handlesContainer.style.display = 'block';
|
||
},
|
||
|
||
_hideResizeHandles: function(instance) {
|
||
if (!instance || !instance.handlesContainer) return;
|
||
instance.handlesContainer.style.display = 'none';
|
||
},
|
||
|
||
renderToDiv: function(container) {
|
||
var self = this;
|
||
var result = [];
|
||
var columns;
|
||
|
||
container.innerHTML = '';
|
||
container.style.width = this.phoneConfig.width + 'px';
|
||
container.style.height = this.phoneConfig.height + 'px';
|
||
container.style.display = 'grid';
|
||
container.style.gridTemplateColumns = 'repeat(' + this.phoneConfig.columns + ', ' + this.cellSize + 'px)';
|
||
container.style.gridAutoRows = this.cellSize + 'px';
|
||
container.style.gap = this.phoneConfig.gap + 'px';
|
||
container.style.background = this.phoneConfig.background;
|
||
container.style.padding = this.phoneConfig.gap + 'px';
|
||
container.style.boxSizing = 'border-box';
|
||
|
||
columns = this.phoneConfig.columns;
|
||
|
||
this.componentInstances.forEach(function(instance) {
|
||
var typeDef = self.componentTypes[instance.type];
|
||
var startCol;
|
||
var startRow;
|
||
var colSpan;
|
||
var rowSpan;
|
||
var wrapper;
|
||
var componentElement;
|
||
|
||
if (!typeDef || !typeDef.render) return;
|
||
|
||
startCol = instance.grid.startCell % columns;
|
||
startRow = Math.floor(instance.grid.startCell / columns);
|
||
colSpan = Math.min(instance.grid.colSpan, columns - startCol);
|
||
rowSpan = instance.grid.rowSpan;
|
||
|
||
wrapper = document.createElement('div');
|
||
wrapper.style.gridColumn = (startCol + 1) + ' / span ' + colSpan;
|
||
wrapper.style.gridRow = (startRow + 1) + ' / span ' + rowSpan;
|
||
wrapper.style.overflow = 'hidden';
|
||
|
||
componentElement = typeDef.render(instance.props);
|
||
if (typeof componentElement === 'string') {
|
||
wrapper.innerHTML = componentElement;
|
||
componentElement = wrapper.firstChild;
|
||
} else if (componentElement instanceof HTMLElement) {
|
||
wrapper.appendChild(componentElement);
|
||
}
|
||
|
||
container.appendChild(wrapper);
|
||
result.push({
|
||
element: componentElement,
|
||
wrapper: wrapper,
|
||
props: JSON.parse(JSON.stringify(instance.props)),
|
||
id: instance.id,
|
||
type: instance.type
|
||
});
|
||
});
|
||
|
||
return result;
|
||
},
|
||
|
||
_moveComponent: function(componentId, gridPos) {
|
||
var instance = this._findInstance(componentId);
|
||
var columns;
|
||
var startCol;
|
||
var startRow;
|
||
var colSpan;
|
||
|
||
if (!instance) return;
|
||
|
||
instance.grid.startCell = (gridPos.row - 1) * this.phoneConfig.columns + (gridPos.column - 1);
|
||
|
||
columns = this.phoneConfig.columns;
|
||
startCol = instance.grid.startCell % columns;
|
||
startRow = Math.floor(instance.grid.startCell / columns);
|
||
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) {
|
||
var instance;
|
||
this._deselectAll();
|
||
|
||
instance = this._findInstance(componentId);
|
||
if (!instance) return;
|
||
|
||
this.selectedComponent = componentId;
|
||
instance.element.classList.add('selected');
|
||
this._showResizeHandles(instance);
|
||
this._showPropertyPanel(instance);
|
||
|
||
if (this.isMobile) {
|
||
this.mobilePanelMode = 'property';
|
||
this._updateMobilePanelVisibility();
|
||
}
|
||
},
|
||
|
||
_deselectAll: function() {
|
||
var selected = this.canvasEl.querySelectorAll('.selected');
|
||
var self = this;
|
||
|
||
this.selectedComponent = null;
|
||
selected.forEach(function(el) {
|
||
el.classList.remove('selected');
|
||
});
|
||
|
||
this.componentInstances.forEach(function(instance) {
|
||
if (instance.handlesContainer) {
|
||
instance.handlesContainer.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
this.propertyPanelEl.innerHTML = '';
|
||
|
||
if (this.isMobile) {
|
||
this.mobilePanelMode = 'toolbox';
|
||
this._updateMobilePanelVisibility();
|
||
}
|
||
},
|
||
|
||
_updateMobilePanelVisibility: function() {
|
||
if (!this.isMobile) return;
|
||
if (this.mobilePanelMode === 'property') {
|
||
this.toolboxEl.classList.add('wb-mobile-hidden');
|
||
this.propertyPanelEl.classList.remove('wb-mobile-hidden');
|
||
} else {
|
||
this.toolboxEl.classList.remove('wb-mobile-hidden');
|
||
this.propertyPanelEl.classList.add('wb-mobile-hidden');
|
||
}
|
||
},
|
||
|
||
_showPropertyPanel: function(instance) {
|
||
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;
|
||
var deleteBtn;
|
||
var closeBtn;
|
||
|
||
html = '<div class="property-title">' + (typeDef.label || instance.type) + '</div>';
|
||
|
||
html += '<div class="property-section">';
|
||
html += '<div class="property-section-title">位置大小</div>';
|
||
html += '<div class="property-row"><label>起始列:</label><input type="number" data-prop="startCol" value="' + (startCol + 1) + '" min="1" max="' + columns + '"></div>';
|
||
html += '<div class="property-row"><label>起始行:</label><input type="number" data-prop="startRow" value="' + (startRow + 1) + '" min="1"></div>';
|
||
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">';
|
||
html += '<div class="property-section-title">组件属性</div>';
|
||
typeDef.traits.forEach(function(trait) {
|
||
var value = instance.props[trait.name] !== undefined ? instance.props[trait.name] : (trait.default || '');
|
||
html += '<div class="property-row">';
|
||
html += '<label>' + trait.label + ':</label>';
|
||
if (trait.type === 'number') {
|
||
html += '<input type="number" data-trait="' + trait.name + '" value="' + value + '">';
|
||
} else if (trait.type === 'checkbox') {
|
||
html += '<input type="checkbox" data-trait="' + trait.name + '"' + (value ? ' checked' : '') + '>';
|
||
} else {
|
||
html += '<input type="text" data-trait="' + trait.name + '" value="' + value + '">';
|
||
}
|
||
html += '</div>';
|
||
});
|
||
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');
|
||
var value;
|
||
var currentRow;
|
||
var currentCol;
|
||
var typeDef2;
|
||
var traitDef;
|
||
var content;
|
||
var handlesContainer;
|
||
var sCol;
|
||
var sRow;
|
||
var cSpan;
|
||
|
||
if (prop) {
|
||
value = parseInt(input.value, 10) || 1;
|
||
if (prop === 'startCol') {
|
||
currentRow = Math.floor(instance.grid.startCell / columns);
|
||
instance.grid.startCell = currentRow * columns + (value - 1);
|
||
} else if (prop === 'startRow') {
|
||
currentCol = instance.grid.startCell % columns;
|
||
instance.grid.startCell = (value - 1) * columns + currentCol;
|
||
} else if (prop === 'colSpan') {
|
||
instance.grid.colSpan = value;
|
||
} else if (prop === 'rowSpan') {
|
||
instance.grid.rowSpan = value;
|
||
}
|
||
|
||
sCol = instance.grid.startCell % columns;
|
||
sRow = Math.floor(instance.grid.startCell / columns);
|
||
cSpan = Math.min(instance.grid.colSpan, columns - sCol);
|
||
|
||
instance.element.style.gridColumn = (sCol + 1) + ' / span ' + cSpan;
|
||
instance.element.style.gridRow = (sRow + 1) + ' / span ' + instance.grid.rowSpan;
|
||
} else if (trait) {
|
||
typeDef2 = self.componentTypes[instance.type];
|
||
traitDef = typeDef2.traits.find(function(t) { return t.name === trait; });
|
||
|
||
if (input.type === 'checkbox') {
|
||
instance.props[trait] = input.checked;
|
||
} else if (traitDef && traitDef.type === 'number') {
|
||
instance.props[trait] = parseFloat(input.value) || 0;
|
||
} else {
|
||
instance.props[trait] = input.value;
|
||
}
|
||
|
||
if (typeDef2.render) {
|
||
content = typeDef2.render(instance.props);
|
||
instance.element.innerHTML = '';
|
||
if (typeof content === 'string') {
|
||
instance.element.innerHTML = content;
|
||
} else if (content instanceof HTMLElement) {
|
||
instance.element.appendChild(content);
|
||
}
|
||
|
||
handlesContainer = document.createElement('div');
|
||
handlesContainer.className = 'resize-handles-container';
|
||
handlesContainer.style.display = 'block';
|
||
handlesContainer.style.position = 'absolute';
|
||
handlesContainer.style.top = '0';
|
||
handlesContainer.style.left = '0';
|
||
handlesContainer.style.width = '100%';
|
||
handlesContainer.style.height = '100%';
|
||
handlesContainer.style.pointerEvents = 'none';
|
||
handlesContainer.style.zIndex = '10';
|
||
instance.element.appendChild(handlesContainer);
|
||
instance.handlesContainer = handlesContainer;
|
||
self._recreateResizeHandles(instance);
|
||
}
|
||
}
|
||
|
||
self._notifyChanged('update', instance);
|
||
});
|
||
});
|
||
|
||
deleteBtn = this.propertyPanelEl.querySelector('[data-action="delete"]');
|
||
if (deleteBtn) {
|
||
deleteBtn.addEventListener('click', function() {
|
||
self._deleteComponent(instance.id);
|
||
});
|
||
}
|
||
|
||
if (this.isMobile) {
|
||
closeBtn = document.createElement('button');
|
||
closeBtn.className = 'btn wb-mobile-close-panel';
|
||
closeBtn.textContent = '返回组件库';
|
||
closeBtn.addEventListener('click', function() {
|
||
self._deselectAll();
|
||
});
|
||
this.propertyPanelEl.appendChild(closeBtn);
|
||
}
|
||
},
|
||
|
||
_recreateResizeHandles: function(instance) {
|
||
var self = this;
|
||
var directions;
|
||
|
||
if (!instance || !instance.handlesContainer) return;
|
||
|
||
directions = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'];
|
||
instance.handlesContainer.innerHTML = '';
|
||
|
||
directions.forEach(function(direction) {
|
||
var handle = document.createElement('div');
|
||
handle.className = 'resize-handle resize-handle-' + direction;
|
||
handle.setAttribute('data-direction', direction);
|
||
self._applyHandleBaseStyle(handle);
|
||
|
||
switch(direction) {
|
||
case 'nw':
|
||
handle.style.top = '-4px';
|
||
handle.style.left = '-4px';
|
||
handle.style.cursor = 'nwse-resize';
|
||
break;
|
||
case 'n':
|
||
handle.style.top = '-4px';
|
||
handle.style.left = '50%';
|
||
handle.style.transform = 'translateX(-50%)';
|
||
handle.style.cursor = 'ns-resize';
|
||
break;
|
||
case 'ne':
|
||
handle.style.top = '-4px';
|
||
handle.style.right = '-4px';
|
||
handle.style.cursor = 'nesw-resize';
|
||
break;
|
||
case 'w':
|
||
handle.style.top = '50%';
|
||
handle.style.left = '-4px';
|
||
handle.style.transform = 'translateY(-50%)';
|
||
handle.style.cursor = 'ew-resize';
|
||
break;
|
||
case 'e':
|
||
handle.style.top = '50%';
|
||
handle.style.right = '-4px';
|
||
handle.style.transform = 'translateY(-50%)';
|
||
handle.style.cursor = 'ew-resize';
|
||
break;
|
||
case 'sw':
|
||
handle.style.bottom = '-4px';
|
||
handle.style.left = '-4px';
|
||
handle.style.cursor = 'nesw-resize';
|
||
break;
|
||
case 's':
|
||
handle.style.bottom = '-4px';
|
||
handle.style.left = '50%';
|
||
handle.style.transform = 'translateX(-50%)';
|
||
handle.style.cursor = 'ns-resize';
|
||
break;
|
||
case 'se':
|
||
handle.style.bottom = '-4px';
|
||
handle.style.right = '-4px';
|
||
handle.style.cursor = 'nwse-resize';
|
||
break;
|
||
}
|
||
|
||
handle.addEventListener('mousedown', function(e) {
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
self._handleResizeStart(e, instance.id, direction);
|
||
});
|
||
|
||
instance.handlesContainer.appendChild(handle);
|
||
});
|
||
},
|
||
|
||
_deleteComponent: function(componentId) {
|
||
var index = -1;
|
||
var i;
|
||
var instance;
|
||
|
||
for (i = 0; i < this.componentInstances.length; i++) {
|
||
if (this.componentInstances[i].id === componentId) {
|
||
index = i;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (index === -1) return;
|
||
|
||
instance = this.componentInstances[index];
|
||
if (instance.element) {
|
||
instance.element.remove();
|
||
}
|
||
this.componentInstances.splice(index, 1);
|
||
this._deselectAll();
|
||
this._notifyChanged('delete', { id: componentId });
|
||
},
|
||
|
||
_findInstance: function(componentId) {
|
||
var i;
|
||
for (i = 0; i < this.componentInstances.length; i++) {
|
||
if (this.componentInstances[i].id === componentId) {
|
||
return this.componentInstances[i];
|
||
}
|
||
}
|
||
return null;
|
||
},
|
||
|
||
define: function(name, definition) {
|
||
if (this.componentTypes[name]) {
|
||
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;
|
||
var icon;
|
||
var label;
|
||
|
||
item = document.createElement('div');
|
||
item.className = 'webbuilder-toolbox-item';
|
||
if (this.isMobile) {
|
||
item.classList.add('wb-mobile-toolbox-item');
|
||
}
|
||
item.setAttribute('draggable', true);
|
||
item.setAttribute('data-type', name);
|
||
|
||
icon = definition.icon || '\uD83D\uDCE6';
|
||
label = definition.label || name;
|
||
|
||
item.innerHTML = '<span class="icon">' + icon + '</span><span class="label">' + label + '</span>';
|
||
|
||
item.addEventListener('dragstart', function() {
|
||
self.draggingType = name;
|
||
item.style.opacity = '0.5';
|
||
});
|
||
item.addEventListener('dragend', function() {
|
||
item.style.opacity = '1';
|
||
self.draggingType = null;
|
||
});
|
||
|
||
if (this.isMobile) {
|
||
item.addEventListener('click', function() {
|
||
self.touchDragType = name;
|
||
});
|
||
}
|
||
|
||
this.toolboxListEl.appendChild(item);
|
||
},
|
||
|
||
toJSONB: function() {
|
||
var self = this;
|
||
var components;
|
||
|
||
components = this.componentInstances.map(function(instance) {
|
||
return {
|
||
id: instance.id,
|
||
type: instance.type,
|
||
grid: {
|
||
startCell: instance.grid.startCell,
|
||
colSpan: instance.grid.colSpan,
|
||
rowSpan: instance.grid.rowSpan
|
||
},
|
||
props: JSON.parse(JSON.stringify(instance.props))
|
||
};
|
||
});
|
||
|
||
return {
|
||
version: '1.0',
|
||
layouts: {
|
||
phone: {
|
||
canvas: {
|
||
width: this.phoneConfig.width,
|
||
height: this.phoneConfig.height,
|
||
columns: this.phoneConfig.columns,
|
||
cellSize: this.cellSize,
|
||
rows: this.rows,
|
||
gap: this.phoneConfig.gap,
|
||
background: this.phoneConfig.background
|
||
},
|
||
components: components
|
||
},
|
||
computer: null
|
||
}
|
||
};
|
||
},
|
||
|
||
fromJSONB: function(jsonb) {
|
||
var phoneLayout;
|
||
var self = this;
|
||
var maxId;
|
||
|
||
this.canvasEl.innerHTML = '';
|
||
this.componentInstances = [];
|
||
this.selectedComponent = null;
|
||
|
||
phoneLayout = jsonb.layouts && jsonb.layouts.phone;
|
||
if (!phoneLayout) {
|
||
console.warn('No phone layout found');
|
||
return;
|
||
}
|
||
|
||
if (phoneLayout.components) {
|
||
phoneLayout.components.forEach(function(comp) {
|
||
var typeDef = self.componentTypes[comp.type];
|
||
var instance;
|
||
|
||
if (!typeDef) {
|
||
console.warn('Component type not found:', comp.type);
|
||
return;
|
||
}
|
||
|
||
instance = {
|
||
id: comp.id,
|
||
type: comp.type,
|
||
grid: {
|
||
startCell: comp.grid.startCell,
|
||
colSpan: comp.grid.colSpan,
|
||
rowSpan: comp.grid.rowSpan
|
||
},
|
||
props: comp.props || {}
|
||
};
|
||
|
||
self._renderComponent(instance);
|
||
self.componentInstances.push(instance);
|
||
});
|
||
|
||
maxId = 0;
|
||
this.componentInstances.forEach(function(inst) {
|
||
var match = inst.id.match(/-(\d+)$/);
|
||
if (match) {
|
||
maxId = Math.max(maxId, parseInt(match[1], 10));
|
||
}
|
||
});
|
||
this.idCounter = maxId;
|
||
}
|
||
|
||
this._notifyChanged('load', { count: this.componentInstances.length });
|
||
},
|
||
|
||
getCanvasConfig: function() {
|
||
return {
|
||
width: this.phoneConfig.width,
|
||
height: this.phoneConfig.height,
|
||
columns: this.phoneConfig.columns,
|
||
cellSize: this.cellSize,
|
||
rows: this.rows,
|
||
gap: this.phoneConfig.gap,
|
||
background: this.phoneConfig.background
|
||
};
|
||
},
|
||
|
||
getComponents: function() {
|
||
return JSON.parse(JSON.stringify(this.componentInstances));
|
||
},
|
||
|
||
clear: function() {
|
||
this.canvasEl.innerHTML = '';
|
||
this.componentInstances = [];
|
||
this.selectedComponent = null;
|
||
this.propertyPanelEl.innerHTML = '';
|
||
this._notifyChanged('clear', null);
|
||
}
|
||
};
|