fix: inline resize handle styles to work without CSS
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:
@@ -50,6 +50,21 @@ var webbuilder = {
|
|||||||
resizeStartPos: { x: 0, y: 0 },
|
resizeStartPos: { x: 0, y: 0 },
|
||||||
resizeStartSize: { colSpan: 0, rowSpan: 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.width = '100%';
|
||||||
handlesContainer.style.height = '100%';
|
handlesContainer.style.height = '100%';
|
||||||
handlesContainer.style.pointerEvents = 'none';
|
handlesContainer.style.pointerEvents = 'none';
|
||||||
|
handlesContainer.style.zIndex = '10';
|
||||||
el.appendChild(handlesContainer);
|
el.appendChild(handlesContainer);
|
||||||
|
|
||||||
// 创建8个控制柄
|
// 创建8个控制柄
|
||||||
@@ -389,7 +405,9 @@ var webbuilder = {
|
|||||||
var handle = document.createElement('div');
|
var handle = document.createElement('div');
|
||||||
handle.className = `resize-handle resize-handle-${direction}`;
|
handle.className = `resize-handle resize-handle-${direction}`;
|
||||||
handle.setAttribute('data-direction', direction);
|
handle.setAttribute('data-direction', direction);
|
||||||
handle.style.pointerEvents = 'auto';
|
|
||||||
|
// 应用基础样式(不依赖CSS)
|
||||||
|
self._applyHandleBaseStyle(handle);
|
||||||
|
|
||||||
// 控制柄位置
|
// 控制柄位置
|
||||||
switch(direction) {
|
switch(direction) {
|
||||||
@@ -914,6 +932,7 @@ var webbuilder = {
|
|||||||
handlesContainer.style.width = '100%';
|
handlesContainer.style.width = '100%';
|
||||||
handlesContainer.style.height = '100%';
|
handlesContainer.style.height = '100%';
|
||||||
handlesContainer.style.pointerEvents = 'none';
|
handlesContainer.style.pointerEvents = 'none';
|
||||||
|
handlesContainer.style.zIndex = '10';
|
||||||
instance.element.appendChild(handlesContainer);
|
instance.element.appendChild(handlesContainer);
|
||||||
instance.handlesContainer = handlesContainer;
|
instance.handlesContainer = handlesContainer;
|
||||||
|
|
||||||
@@ -953,7 +972,9 @@ var webbuilder = {
|
|||||||
var handle = document.createElement('div');
|
var handle = document.createElement('div');
|
||||||
handle.className = `resize-handle resize-handle-${direction}`;
|
handle.className = `resize-handle resize-handle-${direction}`;
|
||||||
handle.setAttribute('data-direction', direction);
|
handle.setAttribute('data-direction', direction);
|
||||||
handle.style.pointerEvents = 'auto';
|
|
||||||
|
// 应用基础样式(不依赖CSS)
|
||||||
|
self._applyHandleBaseStyle(handle);
|
||||||
|
|
||||||
// 控制柄位置
|
// 控制柄位置
|
||||||
switch(direction) {
|
switch(direction) {
|
||||||
|
|||||||
Reference in New Issue
Block a user