SpreadJS全屏后，搜索以及颜色功能不显示(SJS-16938)

收藏

本帖最后由 Lynn.Dou 于 2023-2-15 10:19 编辑

在使用js原生的全屏方法后：document.getElementById("gc-designer-container").requestFullscreen();

ctrl + F 搜索框功能，以及如下图的颜色功能无法出现在最上层
image.png26495970.png

demo文件如附件，点击左上角全屏按钮后出现上面的问题

Ellia.Duan · Ellia.Duan

目前推测是颜色选择弹窗，搜索弹窗层级不够，当退出全屏模式的时候，这些弹窗是出现的。此问题将深入调研下层级问题，待有结果会及时反馈给您。

Ellia.Duan · Ellia.Duan

您好，这边为您找到一个解决方案，在body元素上进行全屏，修改代码如下图所示：
image.png449741515.png

修改代码之后，designer功能正常。
image.png774222717.png

xujie-joe · xujie-joe

Ellia.Duan 发表于 2023-2-15 10:17
您好，这边为您找到一个解决方案，在body元素上进行全屏，修改代码如下图所示：

修改代码之后，designer ...

我这的需求就是只需要SpreadJS的组件全屏显示，因为我这的按钮很多，还有些其它信息，如图：

所以不会把按钮也加入全屏的范围
image.png970693969.png

xujie-joe · xujie-joe

Ellia.Duan 发表于 2023-2-15 10:17
您好，这边为您找到一个解决方案，在body元素上进行全屏，修改代码如下图所示：

修改代码之后，designer ...

而且我这用的是Angular框架，按照这种方式的话，得找到最外层的组件id去全屏，那会带上顶部和侧边菜单，那全屏的意义就不大了

image.png530287780.png

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2023-2-15 11:12 编辑

xujie-joe 发表于 2023-2-15 10:55
而且我这用的是Angular框架，按照这种方式的话，得找到最外层的组件id去全屏，那会带上顶部和侧边菜单， ...

在网上找了一些资料，https://juejin.cn/post/7193715140062085176

总体上来说，将某些dom元素设置为全屏后，弹窗的dom需要放在此dom下，在designer中，设置背景的dom元素根据下图可以看到是在body下
image.png503580016.png

所以如果不是将body元素全屏，可能弹窗仍然不会出现。
如果您这边是用的框架，您也可以看下颜色选择器的最近父元素是什么？是否可以将此父元素全屏？
同时，这边也将与研发团队沟通下，看是否还有其他解决方案，此贴将置为保留处理，有其他解决方案会及时通知您。

Ellia.Duan · Ellia.Duan

本帖最后由 Ellia.Duan 于 2023-2-15 14:43 编辑

您好，经过调研，目前知道了此问题出现的原因：
SpreadJS 设计器组件不支持全屏模式，对话框被设计为附加到 document body 而不是designer host（gc-designer-container）。所以，如果仅仅是让designer host全屏显示，它就会覆盖主体中的所有其他元素包括对话框。

你可以打开你的office 365，在线excel，试试下面的代码document.getElementById('ewaContainer').requestFullscreen()。你会发现同样的问题。

为此研发团队给出了两个workarround：
第一个是我之前楼上提到的让body 全屏，您对此方案提出了异议，我们接下来就看下第二个方案，将designer host放在一个iframe中，然后让此iframe全屏。
您可以测试下第二个方案。
image.png653463744.png