test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:39:05 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

chore: 调整编辑器样式解决点选被挡住问题 (#10221)

Browse Source
This commit is contained in:
liaoxuezhi 2024-05-13 10:44:45 +08:00 committed by 2betop
parent 9ee041c62e
commit 78db701057
8 changed files with 216 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
amis.code-workspace
View File

@ -28,5 +28,38 @@
{
"path": "./packages/amis-theme-editor-helper"
}
]
],
"settings": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"typescript.tsdk": "node_modules/typescript/lib",
"files.exclude": {
"**/lib": true,
"**/esm": true,
"**/sdk": true,
"**/tsconfig.tsbuildinfo": true,
"**/schema.json": true,
"**/lerna-debug.log": true,
"**/package-lock.json": true,
"**/.rollup.cache": true,
"public/**": true
},
"search.exclude": {
"**/lib": true,
"**/esm": true,
"**/sdk": true,
"**/tsconfig.tsbuildinfo": true,
"**/schema.json": true,
"**/lerna-debug.log": true,
"**/package-lock.json": true,
"**/.rollup.cache": true,
"public/**": true,
"examples/docs.json": true,
"examples/components/EChartsEditor/option-parts/**/*": true
},
"[xml]": {
"editor.defaultFormatter": "redhat.vscode-xml"
}
}
}

21
examples/components/App.tsx
View File

@ -295,12 +295,21 @@ export class App extends React.PureComponent<{
>
示例
</NavLink>
<a
href="https://github.com/fex-team/amis-editor-demo"
target="_blank"
>
编辑器
</a>
{process.env.NODE_ENV === 'development' ? (
<>
<a href={`/packages/amis-ui/#/basic/button`}>UI控件</a>
<a href={`/packages/amis-editor/`}>编辑器</a>
</>
) : (
<>
<a
href="https://github.com/fex-team/amis-editor-demo"
target="_blank"
>
编辑器
</a>
</>
)}
{/* <a href="https://suda.bce.baidu.com" target="_blank">
爱速搭
</a> */}

14
packages/amis-editor-core/scss/_bcn.scss
View File

@ -1,22 +1,19 @@
.ae-Breadcrumb {
flex: 0 0 42px;
position: relative;
flex: 0 0 22px;
padding: 0;
background: #fff;
box-sizing: border-box;
border-bottom: 1px solid $editor-border-color;
z-index: 1000;
.ae-Breadcrumb-content {
position: relative;
left: 0;
height: 100%;
width: max-content;
padding: 0 16px;
white-space: nowrap;
height: 42px;
line-height: 42px;
height: 22px;
line-height: 22px;
background: #fff;
letter-spacing: 0;
font-family: PingFangSC-Regular;
@ -26,7 +23,6 @@
user-select: none;
box-sizing: border-box;
z-index: 10000;
transition: left ease-out 0.15s;
> ul {
@ -47,7 +43,7 @@
> span {
display: inline-block;
padding-right: 8px;
line-height: 42px !important; // 避免被覆盖
line-height: 22px !important; // 避免被覆盖
cursor: pointer;
&:hover {
@ -57,7 +53,7 @@
// 同级元素选择弹层
> ul {
position: absolute;
top: 46px;
top: 26px;
left: 0;
min-width: 100px;
max-height: 320px;

149
packages/amis-editor-core/scss/editor.scss
View File

@ -135,6 +135,10 @@
flex-direction: column;
z-index: 0;
overflow: hidden;
transform: scale(1); // 此后内部元素的fixed会相对此dom定位
transform-origin: center top;
.ant-back-top {
bottom: 96px;
right: 39px;
@ -155,10 +159,8 @@
.ae-Preview {
position: relative;
flex-grow: 1;
min-height: 0;
background-color: $default-bg-color;
overflow: hidden;
transform: scale(1); // 此后内部元素的fixed会相对此dom定位
transform-origin: center top;
.ae-Preview-body {
position: relative;
@ -175,7 +177,7 @@
&:before {
content: '';
display: block;
height: 24px;
height: 16px;
}
@include minScrollBar();
@ -256,15 +258,15 @@
&.is-mobile {
position: relative;
border-width: 24px 22px 36px;
border-color: #ddd;
border-width: 10px;
border-color: #222;
border-style: solid;
border-radius: 40px;
width: 419px;
height: 798px;
border-radius: 30px;
width: 375px;
height: 96%;
max-height: 812px;
flex-grow: unset;
min-height: unset;
margin: 40px auto;
min-width: unset;
padding: 0;
overflow: visible;
@ -275,6 +277,14 @@
}
> .ae-Preview-inner {
border-radius: 20px;
&::-webkit-scrollbar {
display: none;
}
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
background: transparent;
overflow-x: hidden;
overflow-y: auto;
@ -288,71 +298,74 @@
display: none;
}
&::before {
content: '';
height: 40px;
position: sticky;
top: 0;
width: 100%;
background: #ddd;
flex-shrink: 0;
display: block;
}
// &::before {
// content: '';
// height: 40px;
// position: sticky;
// top: 0;
// width: 100%;
// background: #ddd;
// flex-shrink: 0;
// display: block;
// }
}
// 移动端预览设备装饰
.mobile-sound,
.mobile-receiver,
.mobile-left-btn,
.mobile-right-btn,
.mobile-open-btn {
position: absolute;
background: #cdcdcd;
border-radius: 3px;
z-index: 100;
}
// 音响
.mobile-sound {
top: 5px;
left: 142px; // 164px - 22px;
width: 58px;
height: 6px;
}
// 听筒
.mobile-receiver {
top: 3px;
left: 224px; // 246px - 22px;
width: 10px;
height: 10px;
border-radius: 5px;
}
// 左侧按钮
.mobile-left-btn {
top: 162px; // 226px - 64px;
left: -27px; // -5px - 22px;
width: 6px;
height: 50px;
}
// 右侧按钮（长条）
.mobile-right-btn {
top: 61px; // 125px - 64px;
right: -27px;
width: 6px;
height: 100px;
}
// 开机键
.mobile-open-btn {
top: 211px; // 275px - 64px;
right: -27px;
width: 6px;
height: 50px;
}
// // 移动端预览设备装饰
// .mobile-sound,
// .mobile-receiver,
// .mobile-left-btn,
// .mobile-right-btn,
// .mobile-open-btn {
// position: absolute;
// background: #cdcdcd;
// border-radius: 3px;
// z-index: 100;
// }
// // 音响
// .mobile-sound {
// top: 5px;
// left: 142px; // 164px - 22px;
// width: 58px;
// height: 6px;
// }
// // 听筒
// .mobile-receiver {
// top: 3px;
// left: 224px; // 246px - 22px;
// width: 10px;
// height: 10px;
// border-radius: 5px;
// }
// // 左侧按钮
// .mobile-left-btn {
// top: 162px; // 226px - 64px;
// left: -27px; // -5px - 22px;
// width: 6px;
// height: 50px;
// }
// // 右侧按钮（长条）
// .mobile-right-btn {
// top: 61px; // 125px - 64px;
// right: -27px;
// width: 6px;
// height: 100px;
// }
// // 开机键
// .mobile-open-btn {
// top: 211px; // 275px - 64px;
// right: -27px;
// width: 6px;
// height: 50px;
// }
}
}
// 移动端需要上下滚动，避免设备背景被遮挡
&.is-mobile-body {
overflow-x: hidden;
overflow: visible !important;
display: flex;
align-items: center;
justify-content: center;
&::-webkit-scrollbar {
background-color: $default-bg-color;

112
packages/amis-editor-core/src/component/Preview.tsx
View File

@ -104,12 +104,19 @@ export default class Preview extends Component<PreviewProps> {
@autobind
contentsRef(ref: HTMLDivElement | null) {
if (ref) {
this.scrollLayer = ref as HTMLDivElement;
this.scrollLayer.addEventListener('scroll', this.handlePanelChange);
this.layer = ref!.querySelector('.ae-Preview-widgets') as HTMLDivElement;
this.props.store.setLayer(this.layer);
this.layer = ref.parentElement!.querySelector(
'.ae-Preview-widgets'
) as HTMLDivElement;
this.unSensor = resizeSensor(ref, this.handlePanelChange);
if (this.props.isMobile) {
ref = ref.firstChild as HTMLDivElement;
}
this.scrollLayer = ref as HTMLDivElement;
this.scrollLayer.removeEventListener('scroll', this.handlePanelChange);
this.scrollLayer.addEventListener('scroll', this.handlePanelChange);
this.props.store.setLayer(this.layer);
} else {
delete this.scrollLayer;
delete this.layer;
@ -123,9 +130,9 @@ export default class Preview extends Component<PreviewProps> {
() => [this.getHighlightNodes(), this.props.store.activeId],
([ids]: [Array<string>], oldValue: [Array<string>]) => {
const store = this.props.store;
setTimeout(() => {
requestAnimationFrame(() => {
this.calculateHighlightBox(ids);
}, 50);
});
let oldIds = oldValue?.[0];
if (Array.isArray(oldIds)) {
@ -137,8 +144,17 @@ export default class Preview extends Component<PreviewProps> {
@autobind
handlePanelChange() {
// 视图同步也需要时间啊
setTimeout(() => this.calculateHighlightBox(this.getHighlightNodes()), 50);
if (this.layer && this.scrollLayer) {
requestAnimationFrame(() => {
this.layer!.style.cssText += `transform: translate(0, -${
this.scrollLayer!.scrollTop
}px);`;
});
}
requestAnimationFrame(() =>
this.calculateHighlightBox(this.getHighlightNodes())
);
}
getHighlightNodes() {
@ -498,10 +514,15 @@ export default class Preview extends Component<PreviewProps> {
'ae-Preview',
'AMISCSSWrapper',
className,
isMobile ? 'is-mobile-body hoverShowScrollBar' : 'is-pc-body'
isMobile ? 'is-mobile-body' : 'is-pc-body'
)}
>
<div
key={
/* contentsLayer 逻辑不一样需要更新一下 */ isMobile
? 'mobile-body'
: 'pc-body'
}
className={cx(
'ae-Preview-body',
className,
@ -510,15 +531,6 @@ export default class Preview extends Component<PreviewProps> {
)}
ref={this.contentsRef}
>
{isMobile && (
<React.Fragment>
<div className="mobile-sound"></div>
<div className="mobile-receiver"></div>
<div className="mobile-left-btn"></div>
<div className="mobile-right-btn"></div>
<div className="mobile-open-btn"></div>
</React.Fragment>
)}
<div className="ae-Preview-inner">
{isMobile ? (
<IFramePreview
@ -543,38 +555,6 @@ export default class Preview extends Component<PreviewProps> {
appLocale={appLocale}
/>
)}
<div className="ae-Preview-widgets" id="aePreviewHighlightBox">
{store.highlightNodes.map(node => (
<HighlightBox
node={node}
key={node.id}
store={store}
id={node.id}
title={node.label}
toolbarContainer={toolbarContainer}
onSwitch={this.handleNavSwitch}
manager={manager}
>
{node.childRegions.map(region =>
!node.memberImmutable(region.region) &&
store.isRegionActive(region.id, region.region) ? (
<RegionHighlightBox
manager={manager}
key={region.region}
store={store}
node={region}
id={region.id}
name={region.region}
title={region.label}
preferTag={region.preferTag}
isOnlyChildRegion={node.childRegions.length === 1}
/>
) : null
)}
</HighlightBox>
))}
</div>
</div>
{this.currentDom && (
<BackTop
@ -589,6 +569,38 @@ export default class Preview extends Component<PreviewProps> {
</BackTop>
)}
</div>
<div className="ae-Preview-widgets" id="aePreviewHighlightBox">
{store.highlightNodes.map(node => (
<HighlightBox
node={node}
key={node.id}
store={store}
id={node.id}
title={node.label}
toolbarContainer={toolbarContainer}
onSwitch={this.handleNavSwitch}
manager={manager}
>
{node.childRegions.map(region =>
!node.memberImmutable(region.region) &&
store.isRegionActive(region.id, region.region) ? (
<RegionHighlightBox
manager={manager}
key={region.region}
store={store}
node={region}
id={region.id}
name={region.region}
title={region.label}
preferTag={region.preferTag}
isOnlyChildRegion={node.childRegions.length === 1}
/>
) : null
)}
</HighlightBox>
))}
</div>
</div>
);
}

10
packages/amis-editor-core/src/store/node.ts
View File

@ -495,16 +495,16 @@ export const EditorNode = types
const arr = targets.concat();
const first = arr.shift()!;
const firstRect = first.getBoundingClientRect();
const firstMarginTop = parseInt(window.getComputedStyle(first).marginTop);
const firstMarginBottom = parseInt(
window.getComputedStyle(first).marginBottom
);
// const firstMarginTop = parseInt(window.getComputedStyle(first).marginTop);
// const firstMarginBottom = parseInt(
// window.getComputedStyle(first).marginBottom
// );
const rect = {
left: firstRect.left,
top: firstRect.top,
width: firstRect.width,
height: firstRect.height + firstMarginTop + firstMarginBottom,
height: firstRect.height, // + firstMarginTop + firstMarginBottom,
right: firstRect.right,
bottom: firstRect.bottom
};

7
packages/amis-editor/src/plugin/Dialog.tsx
View File

@ -571,6 +571,13 @@ export class DialogPlugin extends BasePlugin {
buildSubRenderers() {}
/**
* dialog 高亮区域应该是里面的内容
*/
wrapperResolve(dom: HTMLElement): HTMLElement | Array<HTMLElement> {
return dom.lastChild as HTMLElement;
}
async buildDataSchemas(
node: EditorNodeType,
region?: EditorNodeType,

7
packages/amis-editor/src/plugin/Drawer.tsx
View File

@ -378,6 +378,13 @@ export class DrawerPlugin extends BasePlugin {
buildSubRenderers() {}
/**
* drawer 高亮区域应该是里面的内容
*/
wrapperResolve(dom: HTMLElement): HTMLElement | Array<HTMLElement> {
return dom.lastChild as HTMLElement;
}
async buildDataSchemas(
node: EditorNodeType,
region?: EditorNodeType,