@netless/window-manager 0.3.18 → 0.4.0-canary.0

package/dist/style.css

@@ -1 +1 @@
-.netless-window-manager-playground{width:100%;height:100%;position:relative;z-index:1;overflow:hidden;user-select:none}.netless-window-manager-sizer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;display:flex}.netless-window-manager-sizer-horizontal{flex-direction:column}.netless-window-manager-sizer:before,.netless-window-manager-sizer:after{flex:1;content:"";display:block}.netless-window-manager-chess-sizer:before,.netless-window-manager-chess-sizer:after{background-image:linear-gradient(45deg,#b0b0b0 25%,transparent 25%),linear-gradient(-45deg,#b0b0b0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b0b0b0 75%),linear-gradient(-45deg,transparent 75%,#b0b0b0 75%);background-color:#fff;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.netless-window-manager-wrapper{position:relative;z-index:1;width:100%;height:100%;overflow:hidden}.netless-window-manager-main-view{width:100%;height:100%}.netless-window-manager-cursor-pencil-image{width:26px;height:26px}.netless-window-manager-cursor-eraser-image{width:26px;height:26px}.netless-window-manager-cursor-selector-image{width:24px;height:24px}.netless-window-manager-cursor-selector-avatar{border-radius:50%;border-style:solid;border-width:2px;border-color:#fff;margin-bottom:2px}.netless-window-manager-cursor-selector-avatar img{width:12px}.netless-window-manager-cursor-inner{border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:4px;padding-right:4px;font-size:12px}.netless-window-manager-cursor-inner-mellow{height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:16px;padding-right:16px}.netless-window-manager-cursor-tag-name{font-size:12px;margin-left:4px;padding:2px 8px;border-radius:4px}.netless-window-manager-cursor-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed;width:26px;height:26px;z-index:2147483647;left:0;top:0;will-change:transform;transition:transform .05s;transform-origin:0 0;user-select:none}.netless-window-manager-cursor-pencil-offset{margin-left:-20px}.netless-window-manager-cursor-selector-offset{margin-left:-22px;margin-top:56px}.netless-window-manager-cursor-text-offset{margin-left:-30px;margin-top:18px}.netless-window-manager-cursor-shape-offset{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px;margin-left:-30px;margin-top:12px}.netless-window-manager-cursor-name{width:100%;height:48px;display:flex;align-items:center;justify-content:center;position:absolute;top:-40px}.cursor-image-wrapper{display:flex;justify-content:center}.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;will-change:transform;transition:width .4s cubic-bezier(.4,.9,.71,1.02),height .4s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px #2f419226;border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-resize-handle{position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{will-change:transform;transition:width 50ms cubic-bezier(.4,.9,.71,1.02),height 50ms cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7,0,.84,0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;background:#fff;user-select:none;border-bottom:1px solid #eeeef7}.telebox-title{overflow:hidden;margin:0 24px 0 0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;color:#191919}.telebox-titlebar-btns{white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{width:22px;height:22px;padding:0;outline:0;border:none;background:0 0;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-titlebar-icon-maximize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==)}.telebox-titlebar-icon-maximize.is-active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K)}.telebox-titlebar-icon-close{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-collector{visibility:hidden;display:block;position:absolute;z-index:200;width:40px;height:40px;margin:0;padding:0;border:none;outline:0;font-size:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px #2f419226;cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark.telebox-collector{background-color:#43434d}.telebox-max-titlebar{display:none;position:absolute;top:0;left:0;z-index:50000;user-select:none}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{flex:1;height:100%;margin:0 16px 0 -16px;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:8px;width:8px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:#eeeef7cc;background-color:transparent;border-radius:4px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:#eeeef7cc}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{overflow:hidden;max-width:182px;min-width:50px;padding:0 26px 0 16px;outline:0;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right:1px solid #e5e5f0;color:#7b88a0;background:0 0;cursor:pointer}.telebox-titles-tab~.telebox-titles-tab{margin-left:2px}.telebox-titles-tab-focus{color:#357bf6}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-color-scheme-dark .telebox-titles-tab{border-right-color:#7b88a0}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}
+.netless-window-manager-playground{width:100%;height:100%;position:relative;z-index:1;overflow:hidden;user-select:none}.netless-window-manager-sizer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;display:flex}.netless-window-manager-sizer-horizontal{flex-direction:column}.netless-window-manager-sizer:before,.netless-window-manager-sizer:after{flex:1;content:"";display:block}.netless-window-manager-chess-sizer:before,.netless-window-manager-chess-sizer:after{background-image:linear-gradient(45deg,#b0b0b0 25%,transparent 25%),linear-gradient(-45deg,#b0b0b0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b0b0b0 75%),linear-gradient(-45deg,transparent 75%,#b0b0b0 75%);background-color:#fff;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.netless-window-manager-wrapper{position:relative;z-index:1;width:100%;height:100%;overflow:hidden}.netless-window-manager-main-view{width:100%;height:100%}.netless-window-manager-cursor-pencil-image{width:26px;height:26px}.netless-window-manager-cursor-eraser-image{width:26px;height:26px}.netless-window-manager-cursor-selector-image{width:24px;height:24px}.netless-window-manager-cursor-selector-avatar{border-radius:50%;border-style:solid;border-width:2px;border-color:#fff;margin-bottom:2px}.netless-window-manager-cursor-selector-avatar img{width:12px}.netless-window-manager-cursor-inner{border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:4px;padding-right:4px;font-size:12px}.netless-window-manager-cursor-inner-mellow{height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:16px;padding-right:16px}.netless-window-manager-cursor-tag-name{font-size:12px;margin-left:4px;padding:2px 8px;border-radius:4px}.netless-window-manager-cursor-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:26px;height:26px;z-index:2147483647;left:0;top:0;will-change:transform;transition:transform .05s;transform-origin:0 0;user-select:none}.netless-window-manager-cursor-pencil-offset{margin-left:-20px}.netless-window-manager-cursor-selector-offset{margin-left:-22px;margin-top:56px}.netless-window-manager-cursor-text-offset{margin-left:-30px;margin-top:18px}.netless-window-manager-cursor-shape-offset{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px;margin-left:-30px;margin-top:12px}.netless-window-manager-cursor-name{width:100%;height:48px;display:flex;align-items:center;justify-content:center;position:absolute;top:-40px}.cursor-image-wrapper{display:flex;justify-content:center}.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;will-change:transform;transition:width .4s cubic-bezier(.4,.9,.71,1.02),height .4s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px #2f419226;border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-resize-handle{position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{will-change:transform;transition:width 50ms cubic-bezier(.4,.9,.71,1.02),height 50ms cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7,0,.84,0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;background:#fff;user-select:none;border-bottom:1px solid #eeeef7}.telebox-title{overflow:hidden;margin:0 24px 0 0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;color:#191919}.telebox-titlebar-btns{white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{width:22px;height:22px;padding:0;outline:0;border:none;background:0 0;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-titlebar-icon-maximize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==)}.telebox-titlebar-icon-maximize.is-active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K)}.telebox-titlebar-icon-close{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-collector{visibility:hidden;display:block;position:absolute;z-index:200;width:40px;height:40px;margin:0;padding:0;border:none;outline:0;font-size:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px #2f419226;cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark.telebox-collector{background-color:#43434d}.telebox-max-titlebar{display:none;position:absolute;top:0;left:0;z-index:50000;user-select:none}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{flex:1;height:100%;margin:0 16px 0 -16px;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:8px;width:8px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:#eeeef7cc;background-color:transparent;border-radius:4px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:#eeeef7cc}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{overflow:hidden;max-width:182px;min-width:50px;padding:0 26px 0 16px;outline:0;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right:1px solid #e5e5f0;color:#7b88a0;background:0 0;cursor:pointer}.telebox-titles-tab~.telebox-titles-tab{margin-left:2px}.telebox-titles-tab-focus{color:#357bf6}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-color-scheme-dark .telebox-titles-tab{border-right-color:#7b88a0}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}

package/docs/api.md

@@ -4,6 +4,8 @@
   - [静态方法](#static-methods)
     - [`mount`](#mount)
     - [`register`](#register)
+    - [`setContainer`](#set-container)
+    - [`setCollectorContainer`](#set-collector-container)
   - [实例方法](#instance-methods)
     - [`addApp`](#addApp)
     - [`closeApp`](#closeApp)
@@ -63,6 +65,21 @@ WindowManager.register({
 })
 ```
 
+<h3 id="set-container">setContainer</h3>
+
+> 设置白板挂载容器
+
+```typescript
+WindowManager.setContainer(document.getElementById("container"));
+```
+
+<h3 id="set-container">setCollectorContainer</h3>
+
+> 设置 `Collector` 挂载的容器
+
+```typescript
+WindowManager.setCollectorContainer(document.getElementById("collector-container"));
+```
 
 <h2 id="instance-methods">实例方法</h2>
 

package/docs/migrate.md

@@ -0,0 +1,42 @@
+
+### 注意事项
+
+多窗口模式必须开启白板的 `useMultiViews` 和 `useMobXState` 选项
+
+会造成原本以下 `room` 上的一些方法和 `state` 失效
+
+`方法`
+
+-   `room.bindHtmlElement()` 用 `WindowManager.mount()` 代替
+-   `room.scalePptToFit()` 暂无代替,不再推荐调用 `scalePptToFit`
+-   `room.setScenePath()` 用 `manager.setMainViewScenePath()` 代替
+-   `room.setSceneIndex()` 用 `manager.setMainViewSceneIndex()` 代替
+
+> 为了方便使用 `manager` 替换了 `room` 上的一些方法可以直接对 `mainView` 生效
+
+-   `room.disableCameraTransform`
+-   `room.moveCamera`
+-   `room.moveCameraToContain`
+-   `room.convertToPointInWorld`
+-   `room.setCameraBound`
+
+`camera`
+
+-   `room.state.cameraState` 用 `manager.mainView.camera` 和 `manager.mainView.size` 代替
+
+想要监听主白板 `camera` 的变化, 请使用如下方式代替
+
+```javascript
+manager.mainView.callbacks.on("onCameraUpdated", camera => {
+    console.log(camera);
+});
+```
+
+监听主白板 `size` 变化
+
+```javascript
+manager.mainView.callbacks.on("onSizeUpdated", size => {
+    console.log(size);
+});
+```
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.3.18",
+  "version": "0.4.0-canary.0",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
@@ -24,7 +24,7 @@
     "@juggle/resize-observer": "^3.3.1",
     "@netless/app-docs-viewer": "0.1.26",
     "@netless/app-media-player": "0.1.0-beta.5",
-    "@netless/telebox-insider": "^0.2.16",
+    "@netless/telebox-insider": "0.2.17",
     "emittery": "^0.9.2",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",

package/src/AppContext.ts

@@ -29,19 +29,19 @@ export class AppContext<TAttrs extends Record<string, any>, AppOptions = any> {
         listenDisposed,
         unlistenDisposed
     };
-    private boxManager: BoxManager;
+
     private store = this.manager.store;
     public readonly isAddApp: boolean;
     public readonly isReplay = this.manager.isReplay;
 
     constructor(
         private manager: AppManager,
+        private boxManager: BoxManager,
         public appId: string,
         private appProxy: AppProxy,
         private appOptions?: AppOptions | (() => AppOptions),
     ) {
         this.emitter = appProxy.appEmitter;
-        this.boxManager = this.manager.boxManager;
         this.isAddApp = appProxy.isAddApp;
     }
 

package/src/AppListener.ts

@@ -7,10 +7,13 @@ import { setViewFocusScenePath } from './Utils/Common';
 
 export class AppListeners {
     private displayer = this.manager.displayer;
-    private boxManager = this.manager.boxManager;
 
     constructor(private manager: AppManager) {}
 
+    private get boxManager() {
+        return this.manager.boxManager;
+    }
+
     public addListeners() {
         this.displayer.addMagixEventListener(MagixEventName, this.mainMagixEventListener);
     }
@@ -50,11 +53,11 @@ export class AppListeners {
     };
 
     private appMoveHandler = (payload: any) => {
-        this.boxManager.moveBox(payload);
+        this.boxManager?.moveBox(payload);
     };
 
     private appResizeHandler = (payload: any) => {
-        this.boxManager.resizeBox(Object.assign(payload, { skipUpdate: true }));
+        this.boxManager?.resizeBox(Object.assign(payload, { skipUpdate: true }));
         this.manager.room?.refreshViewSize();
     };
 

package/src/AppManager.ts

@@ -1,22 +1,11 @@
 import pRetry from "p-retry";
-import {
-    AppAttributes,
-    AppStatus,
-    Events,
-    MagixEventName
-    } from "./constants";
+import { sortBy } from "lodash";
+import { AppAttributes, AppStatus, Events, MagixEventName } from "./constants";
 import { AppListeners } from "./AppListener";
 import { AppProxy } from "./AppProxy";
-import { AttributesDelegate } from "./AttributesDelegate";
-import {
-    autorun,
-    isPlayer,
-    isRoom,
-    ScenePathType,
-    ViewVisionMode
-    } from "white-web-sdk";
-import { BoxManager } from "./BoxManager";
-import { callbacks, emitter } from "./index";
+import { store } from "./AttributesDelegate";
+import { autorun, isPlayer, isRoom, ScenePathType, ViewVisionMode } from "white-web-sdk";
+import { callbacks, emitter, WindowManager } from "./index";
 import { CameraStore } from "./Utils/CameraStore";
 import { genAppId, makeValidScenePath, setScenePath } from "./Utils/Common";
 import { log } from "./Utils/log";
@@ -24,35 +13,33 @@ import { MainViewProxy } from "./MainView";
 import { onObjectRemoved, safeListenPropsUpdated } from "./Utils/Reactive";
 import { ReconnectRefresher } from "./ReconnectRefresher";
 import { ViewManager } from "./ViewManager";
+import type { BoxManager } from "./BoxManager";
 import type { Displayer, DisplayerState, Room } from "white-web-sdk";
-import type { CreateTeleBoxManagerConfig } from "./BoxManager";
-import type {
-    AddAppParams,
-    BaseInsertParams,
-    WindowManager,
-    TeleBoxRect,
-    EmitterEvent,
-} from "./index";
+import type { AddAppParams, BaseInsertParams, TeleBoxRect, EmitterEvent } from "./index";
 export class AppManager {
     public displayer: Displayer;
-    public boxManager: BoxManager;
     public cameraStore: CameraStore;
     public viewManager: ViewManager;
     public appProxies: Map<string, AppProxy> = new Map();
     public appStatus: Map<string, AppStatus> = new Map();
-    public store = new AttributesDelegate(this);
+    public store = store;
     public mainViewProxy: MainViewProxy;
     public refresher?: ReconnectRefresher;
     public isReplay = this.windowManger.isReplay;
 
     private appListeners: AppListeners;
+    public boxManager?: BoxManager;
 
-    constructor(public windowManger: WindowManager, options: CreateTeleBoxManagerConfig) {
+    constructor(public windowManger: WindowManager) {
         this.displayer = windowManger.displayer;
+        this.store.setContext({
+            getAttributes: () => this.attributes,
+            safeSetAttributes: (attributes) => this.safeSetAttributes(attributes),
+            safeUpdateAttributes: (keys, val) => this.safeUpdateAttributes(keys, val),
+        });
         this.cameraStore = new CameraStore();
         this.mainViewProxy = new MainViewProxy(this);
         this.viewManager = new ViewManager(this);
-        this.boxManager = new BoxManager(this, options);
         this.appListeners = new AppListeners(this);
         this.displayer.callbacks.on(this.eventName, this.displayerStateListener);
         this.appListeners.addListeners();
@@ -74,12 +61,15 @@ export class AppManager {
 
     private async onCreated() {
         await this.attributesUpdateCallback(this.attributes.apps);
-        this.boxManager.updateManagerRect();
+        this.boxManager?.updateManagerRect();
         emitter.onAny(this.boxEventListener);
         this.refresher?.add("apps", () => {
-            return safeListenPropsUpdated(() => this.attributes.apps, () => {
-                this.attributesUpdateCallback(this.attributes.apps);
-            });
+            return safeListenPropsUpdated(
+                () => this.attributes.apps,
+                () => {
+                    this.attributesUpdateCallback(this.attributes.apps);
+                }
+            );
         });
         this.refresher?.add("appsClose", () => {
             return onObjectRemoved(this.attributes.apps, () => {
@@ -89,20 +79,18 @@ export class AppManager {
         this.refresher?.add("maximized", () => {
             return autorun(() => {
                 const maximized = this.attributes.maximized;
-                if (this.boxManager.maximized !== maximized) {
-                    this.boxManager.setMaximized(Boolean(maximized));
-                }
+                this.boxManager?.setMaximized(Boolean(maximized));
             });
         });
         this.refresher?.add("minimized", () => {
             return autorun(() => {
                 const minimized = this.attributes.minimized;
-                if (this.boxManager.minimized !== minimized) {
+                if (this.boxManager?.minimized !== minimized) {
                     if (minimized === true) {
-                        this.boxManager.blurAllBox();
+                        this.boxManager?.blurAllBox();
                     }
                     setTimeout(() => {
-                        this.boxManager.setMinimized(Boolean(minimized));
+                        this.boxManager?.setMinimized(Boolean(minimized));
                     }, 0);
                 }
             });
@@ -126,29 +114,39 @@ export class AppManager {
      * @memberof WindowManager
      */
     public async attributesUpdateCallback(apps: any) {
-        if (apps) {
-            for (const id in apps) {
+        if (apps && WindowManager.container) {
+            const appIds = Object.keys(apps);
+            const appsWithCreatedAt = appIds.map(appId =>  {
+                return {
+                    id: appId,
+                    createdAt: apps[appId].createdAt,
+                }
+            });
+            for (const { id } of sortBy(appsWithCreatedAt, "createdAt")) {
                 if (!this.appProxies.has(id) && !this.appStatus.has(id)) {
                     const app = apps[id];
 
-                    pRetry(async () => {
-                        this.appStatus.set(id, AppStatus.StartCreate);
-                        // 防御 appAttributes 有可能为 undefined 的情况，这里做一个重试
-                        const appAttributes = this.attributes[id];
-                        if (!appAttributes) {
-                            throw new Error("appAttributes is undefined");
-                        }
-                        await this.baseInsertApp(
-                            {
-                                kind: app.kind,
-                                options: app.options,
-                                isDynamicPPT: app.isDynamicPPT,
-                            },
-                            id,
-                            false
-                        );
-                        this.focusByAttributes(apps);
-                    }, { retries: 3 }).catch(err => {
+                    pRetry(
+                        async () => {
+                            this.appStatus.set(id, AppStatus.StartCreate);
+                            // 防御 appAttributes 有可能为 undefined 的情况，这里做一个重试
+                            const appAttributes = this.attributes[id];
+                            if (!appAttributes) {
+                                throw new Error("appAttributes is undefined");
+                            }
+                            await this.baseInsertApp(
+                                {
+                                    kind: app.kind,
+                                    options: app.options,
+                                    isDynamicPPT: app.isDynamicPPT,
+                                },
+                                id,
+                                false
+                            );
+                            this.focusByAttributes(apps);
+                        },
+                        { retries: 3 }
+                    ).catch(err => {
                         console.warn(`[WindowManager]: Insert App Error`, err);
                         this.appStatus.delete(id);
                     });
@@ -157,6 +155,22 @@ export class AppManager {
         }
     }
 
+    public refresh() {
+        this.attributesUpdateCallback(this.attributes.apps);
+    }
+
+    public setBoxManager(boxManager: BoxManager) {
+        this.boxManager = boxManager;
+    }
+
+    public resetMaximized() {
+        this.boxManager?.setMaximized(Boolean(this.store.getMaximized()));
+    }
+
+    public resetMinimized() {
+        this.boxManager?.setMinimized(Boolean(this.store.getMinimized()));
+    }
+
     private onAppDelete = (apps: any) => {
         const ids = Object.keys(apps);
         this.appProxies.forEach((appProxy, id) => {
@@ -171,7 +185,7 @@ export class AppManager {
         mainView.disableCameraTransform = disableCameraTransform;
         mainView.divElement = divElement;
         if (!mainView.focusScenePath) {
-            this.store.setMainViewFocusPath();
+            this.store.setMainViewFocusPath(mainView);
         }
         if (this.store.focus === undefined && mainView.mode !== ViewVisionMode.Writable) {
             this.viewManager.switchMainViewToWriter();
@@ -194,7 +208,7 @@ export class AppManager {
         const attrs = params.attributes ?? {};
         this.safeUpdateAttributes([appId], attrs);
         this.store.setupAppAttributes(params, appId, isDynamicPPT);
-        const needFocus = !this.boxManager.minimized;
+        const needFocus = !this.boxManager?.minimized;
         if (needFocus) {
             this.store.setAppFocus(appId, true);
         }
@@ -211,8 +225,8 @@ export class AppManager {
             });
             this.store.updateAppState(appProxy.id, AppAttributes.ZIndex, box.zIndex);
         }
-        if (this.boxManager.minimized) {
-            this.boxManager.setMinimized(false, false);
+        if (this.boxManager?.minimized) {
+            this.boxManager?.setMinimized(false, false);
         }
     }
 
@@ -270,9 +284,9 @@ export class AppManager {
         const isManualWritable =
             this.windowManger.readonly === undefined || this.windowManger.readonly === false;
         if (this.windowManger.readonly === undefined) {
-            this.boxManager.setReadonly(isReadonly);
+            this.boxManager?.setReadonly(isReadonly);
         } else {
-            this.boxManager.setReadonly(!(isWritable && isManualWritable));
+            this.boxManager?.setReadonly(!(isWritable && isManualWritable));
         }
         this.appProxies.forEach(appProxy => {
             appProxy.emitAppIsWritableChange();
@@ -339,7 +353,7 @@ export class AppManager {
         this.safeSetAttributes({ _mainScenePath: scenePath });
         await this.viewManager.switchMainViewToWriter();
         setScenePath(this.room, scenePath);
-        this.store.setMainViewFocusPath();
+        this.store.setMainViewFocusPath(this.mainView);
         this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath: scenePath });
     }
 
@@ -350,7 +364,7 @@ export class AppManager {
             this.room.setSceneIndex(index);
             const nextScenePath = this.room.state.sceneState.scenePath;
             this.store.setMainViewScenePath(nextScenePath);
-            this.store.setMainViewFocusPath();
+            this.store.setMainViewFocusPath(this.mainView);
             this.dispatchInternalEvent(Events.SetMainViewScenePath, { nextScenePath });
         }
     }
@@ -409,7 +423,7 @@ export class AppManager {
     };
 
     public focusByAttributes(apps: any) {
-        if (apps && Object.keys(apps).length === this.boxManager.appBoxMap.size) {
+        if (apps && Object.keys(apps).length === this.boxManager?.boxSize) {
             const focusAppId = this.store.focus;
             if (focusAppId) {
                 this.boxManager.focusBox({ appId: focusAppId });
@@ -450,7 +464,7 @@ export class AppManager {
             });
         }
         this.viewManager.destroy();
-        this.boxManager.destroy();
+        this.boxManager?.destroy();
         this.refresher?.destroy();
         this.mainViewProxy.destroy();
         callbacks.clearListeners();

package/src/AppProxy.ts

@@ -25,6 +25,7 @@ import type { AppManager } from "./AppManager";
 import type { NetlessApp } from "./typings";
 import type { ReadonlyTeleBox } from "@netless/telebox-insider";
 import { Base } from "./Base";
+import { BoxManagerNotFoundError } from "./Utils/error";
 
 export class AppProxy extends Base {
     public id: string;
@@ -40,6 +41,9 @@ export class AppProxy extends Base {
     private kind: string;
     public isAddApp: boolean;
     private status: "normal" | "destroyed" = "normal";
+    private stateKey: string;
+    private setupResult?: any;
+    private appContext?: AppContext<any, any>;
 
     constructor(
         private params: BaseInsertParams,
@@ -50,6 +54,7 @@ export class AppProxy extends Base {
         super(manager);
         this.kind = params.kind;
         this.id = appId;
+        this.stateKey = `${this.id}_state`;
         this.appProxies.set(this.id, this);
         this.appEmitter = new Emittery();
         this.appListener = this.makeAppEventListener(this.id);
@@ -129,15 +134,15 @@ export class AppProxy extends Base {
     private focusApp() {
         this.focusBox();
         this.context.switchAppToWriter(this.id);
-        this.store.setMainViewFocusPath();
+        this.store.setMainViewFocusPath(this.manager.mainView);
     }
 
     public get box(): ReadonlyTeleBox | undefined {
-        return this.boxManager.getBox(this.id);
+        return this.boxManager?.getBox(this.id);
     }
 
     public focusBox() {
-        this.boxManager.focusBox({ appId: this.id });
+        this.boxManager?.focusBox({ appId: this.id });
     }
 
     private async setupApp(
@@ -148,13 +153,17 @@ export class AppProxy extends Base {
         appOptions?: any
     ) {
         log("setupApp", appId, app, options);
-        const context = new AppContext(this.manager, appId, this, appOptions);
+        if (!this.boxManager) {
+            throw new BoxManagerNotFoundError();
+        }
+        const context = new AppContext(this.manager, this.boxManager, appId, this, appOptions);
+        this.appContext = context;
         try {
             emitter.once(`${appId}${Events.WindowCreated}` as any).then(async () => {
                 let boxInitState: AppInitState | undefined;
                 if (!skipUpdate) {
                     boxInitState = this.getAppInitState(appId);
-                    this.boxManager.updateBoxState(boxInitState);
+                    this.boxManager?.updateBoxState(boxInitState);
                 }
                 this.appEmitter.onAny(this.appListener);
                 this.appAttributesUpdateListener(appId);
@@ -162,12 +171,13 @@ export class AppProxy extends Base {
                 setTimeout(async () => {
                     // 延迟执行 setup, 防止初始化的属性没有更新成功
                     const result = await app.setup(context);
+                    this.setupResult = result;
                     appRegister.notifyApp(app.kind, "created", { appId, result });
                     this.afterSetupApp(boxInitState);
                     this.fixMobileSize();
                 }, 50);
             });
-            this.boxManager.createBox({
+            this.boxManager?.createBox({
                 appId: appId,
                 app,
                 options,
@@ -182,9 +192,9 @@ export class AppProxy extends Base {
 
     // 兼容移动端创建时会出现 PPT 不适配的问题
     private fixMobileSize() {
-        const box = this.boxManager.getBox(this.id);
+        const box = this.boxManager?.getBox(this.id);
         if (box) {
-            this.boxManager.resizeBox({
+            this.boxManager?.resizeBox({
                 appId: this.id,
                 width: box.intrinsicWidth + 0.001,
                 height: box.intrinsicHeight + 0.001,
@@ -199,7 +209,7 @@ export class AppProxy extends Base {
                 this.context.switchAppToWriter(this.id);
             }
             if (!boxInitState?.x || !boxInitState.y) {
-                this.boxManager.setBoxInitState(this.id);
+                this.boxManager?.setBoxInitState(this.id);
             }
         }
     }
@@ -207,7 +217,7 @@ export class AppProxy extends Base {
     public onSeek(time: number) {
         this.appEmitter.emit("seek", time);
         const boxInitState = this.getAppInitState(this.id);
-        this.boxManager.updateBoxState(boxInitState);
+        this.boxManager?.updateBoxState(boxInitState);
     }
 
     public async onReconnected() {
@@ -217,7 +227,7 @@ export class AppProxy extends Base {
         const params = this.params;
         const appProxy = new AppProxy(params, this.manager, this.id, this.isAddApp);
         await appProxy.baseInsertApp(true, this.store.focus === this.id);
-        this.boxManager.updateBoxState(currentAppState);
+        this.boxManager?.updateBoxState(currentAppState);
     }
 
     public switchToWritable() {
@@ -227,7 +237,7 @@ export class AppProxy extends Base {
                 if (this.view.mode === ViewVisionMode.Writable) return;
                 try {
                     if (this.manager.mainView.mode === ViewVisionMode.Writable) {
-                        this.store.setMainViewFocusPath();
+                        this.store.setMainViewFocusPath(this.manager.mainView);
                         notifyMainViewModeChange(callbacks, ViewVisionMode.Freedom);
                         setViewMode(this.manager.mainView, ViewVisionMode.Freedom);
                     }
@@ -278,7 +288,7 @@ export class AppProxy extends Base {
             if (!this.manager.canOperate) return;
             switch (eventName) {
                 case "setBoxSize": {
-                    this.boxManager.resizeBox({
+                    this.boxManager?.resizeBox({
                         appId,
                         width: data.width,
                         height: data.height,
@@ -287,7 +297,7 @@ export class AppProxy extends Base {
                     break;
                 }
                 case "setBoxMinSize": {
-                    this.boxManager.setBoxMinSize({
+                    this.boxManager?.setBoxMinSize({
                         appId,
                         minWidth: data.minwidth,
                         minHeight: data.minheight,
@@ -295,7 +305,7 @@ export class AppProxy extends Base {
                     break;
                 }
                 case "setBoxTitle": {
-                    this.boxManager.setBoxTitle({ appId, title: data.title });
+                    this.boxManager?.setBoxTitle({ appId, title: data.title });
                     break;
                 }
                 case AppEvents.destroy: {
@@ -307,7 +317,7 @@ export class AppProxy extends Base {
                     break;
                 }
                 case "focus": {
-                    this.boxManager.focusBox({ appId: this.id });
+                    this.boxManager?.focusBox({ appId: this.id });
                     emitter.emit("focus", { appId: this.id });
                     break;
                 }
@@ -327,6 +337,14 @@ export class AppProxy extends Base {
                 }
             });
         });
+        this.manager.refresher?.add(this.stateKey,() => {
+            return autorun(() => {
+                const appState = this.appAttributes?.state;
+                if (appState?.zIndex > 0 && appState.zIndex !== this.box?.zIndex) {
+                    this.boxManager?.setZIndex(appId, appState.zIndex);
+                }
+            });
+        });
     };
 
     public setScenePath(): void {
@@ -364,7 +382,7 @@ export class AppProxy extends Base {
         this.appEmitter.clearListeners();
         emitter.emit(`destroy-${this.id}` as any, { error });
         if (needCloseBox) {
-            this.boxManager.closeBox(this.id, skipUpdate);
+            this.boxManager?.closeBox(this.id, skipUpdate);
         }
         if (cleanAttrs) {
             this.store.cleanAppAttributes(this.id);
@@ -375,6 +393,7 @@ export class AppProxy extends Base {
         this.viewManager.destroyView(this.id);
         this.manager.appStatus.delete(this.id);
         this.manager.refresher?.remove(this.id);
+        this.manager.refresher?.remove(this.stateKey);
     }
 
     public close(): Promise<void> {