qmi/mywebbuilder.js
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: inline resize handle styles to work without CSS

Browse Source 
Add _applyHandleBaseStyle method to apply critical handle styles (width, height, background, border, etc.) directly via JavaScript so handles are visible even without importing editor.css.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
wtz
2026-04-04 14:46:08 +08:00
parent cf1ecc66ca
commit 29482e6b65
1 changed files with 23 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
js/lib/webbuilder/webbuilder.js
View File

@@ -50,6 +50,21 @@ var webbuilder = {
resizeStartPos: { x: 0, y: 0 },
resizeStartSize: { colSpan: 0, rowSpan: 0 },
/**
* 应用控制柄的基础样式（不依赖CSS）
*/
_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)';
},
/**
* 计算单元格大小和行数
*/
@@ -379,6 +394,7 @@ var webbuilder = {
handlesContainer.style.width = '100%';
handlesContainer.style.height = '100%';
handlesContainer.style.pointerEvents = 'none';
handlesContainer.style.zIndex = '10';
el.appendChild(handlesContainer);
// 创建8个控制柄
@@ -389,7 +405,9 @@ var webbuilder = {
var handle = document.createElement('div');
handle.className = `resize-handle resize-handle-${direction}`;
handle.setAttribute('data-direction', direction);
handle.style.pointerEvents = 'auto';
// 应用基础样式（不依赖CSS）
self._applyHandleBaseStyle(handle);
// 控制柄位置
switch(direction) {
@@ -914,6 +932,7 @@ var webbuilder = {
handlesContainer.style.width = '100%';
handlesContainer.style.height = '100%';
handlesContainer.style.pointerEvents = 'none';
handlesContainer.style.zIndex = '10';
instance.element.appendChild(handlesContainer);
instance.handlesContainer = handlesContainer;
@@ -953,7 +972,9 @@ var webbuilder = {
var handle = document.createElement('div');
handle.className = `resize-handle resize-handle-${direction}`;
handle.setAttribute('data-direction', direction);
handle.style.pointerEvents = 'auto';
// 应用基础样式（不依赖CSS）
self._applyHandleBaseStyle(handle);
// 控制柄位置
switch(direction) {