@netless/fastboard-react 0.2.0 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +316 -357
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +256 -297
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -7
- package/src/components/Toolbar/Content.tsx +19 -4
- package/src/components/Toolbar/Toolbar.scss +26 -3
- package/src/components/Toolbar/Toolbar.tsx +15 -47
- package/src/components/hooks.ts +8 -1
- package/src/components/Toolbar/components/Mask.tsx +0 -44
package/dist/index.js
CHANGED
|
@@ -136,7 +136,7 @@ function useForceUpdate() {
|
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
// src/style.scss?inline
|
|
139
|
-
var style_default = '.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,.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 .1s;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}.telebox-collector{position:absolute;right:10px;bottom:15px}.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;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{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;touch-action:manipulation}.telebox-title-area{overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{overflow:hidden;margin: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-drag-area{position:absolute;inset:0;margin:auto;z-index:10}.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 .telebox-drag-area{height:100%;min-width:16px;position:static;margin:0;flex-grow:1;flex-shrink:0}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;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{height:100%;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;user-select:none}.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}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}.rc-slider{position:relative;height:14px;padding:5px 0;width:100%;border-radius:6px;touch-action:none;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-rail{position:absolute;width:100%;background-color:#e9e9e9;height:4px;border-radius:6px}.rc-slider-track{position:absolute;left:0;height:4px;border-radius:6px;background-color:#abe2fb}.rc-slider-handle{position:absolute;width:14px;height:14px;cursor:pointer;cursor:-webkit-grab;margin-top:-5px;cursor:grab;border-radius:50%;border:solid 2px #96dbfa;background-color:#fff;touch-action:pan-x}.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging{border-color:#57c5f7;box-shadow:0 0 0 5px #96dbfa}.rc-slider-handle:focus{outline:none}.rc-slider-handle-click-focused:focus{border-color:#96dbfa;box-shadow:unset}.rc-slider-handle:hover{border-color:#57c5f7}.rc-slider-handle:active{border-color:#57c5f7;box-shadow:0 0 5px #57c5f7;cursor:-webkit-grabbing;cursor:grabbing}.rc-slider-mark{position:absolute;top:18px;left:0;width:100%;font-size:12px}.rc-slider-mark-text{position:absolute;display:inline-block;vertical-align:middle;text-align:center;cursor:pointer;color:#999}.rc-slider-mark-text-active{color:#666}.rc-slider-step{position:absolute;width:100%;height:4px;background:transparent}.rc-slider-dot{position:absolute;bottom:-2px;margin-left:-4px;width:8px;height:8px;border:2px solid #e9e9e9;background-color:#fff;cursor:pointer;border-radius:50%;vertical-align:middle}.rc-slider-dot-active{border-color:#96dbfa}.rc-slider-dot-reverse{margin-right:-4px}.rc-slider-disabled{background-color:#e9e9e9}.rc-slider-disabled .rc-slider-track{background-color:#ccc}.rc-slider-disabled .rc-slider-handle,.rc-slider-disabled .rc-slider-dot{border-color:#ccc;box-shadow:none;background-color:#fff;cursor:not-allowed}.rc-slider-disabled .rc-slider-mark-text,.rc-slider-disabled .rc-slider-dot{cursor:not-allowed!important}.rc-slider-vertical{width:14px;height:100%;padding:0 5px}.rc-slider-vertical .rc-slider-rail{height:100%;width:4px}.rc-slider-vertical .rc-slider-track{left:5px;bottom:0;width:4px}.rc-slider-vertical .rc-slider-handle{margin-left:-5px;touch-action:pan-y}.rc-slider-vertical .rc-slider-mark{top:0;left:18px;height:100%}.rc-slider-vertical .rc-slider-step{height:100%;width:4px}.rc-slider-vertical .rc-slider-dot{left:2px;margin-bottom:-4px}.rc-slider-vertical .rc-slider-dot:first-child{margin-bottom:-4px}.rc-slider-vertical .rc-slider-dot:last-child{margin-bottom:-4px}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear,.rc-slider-tooltip-zoom-down-leave{animation-duration:.3s;animation-fill-mode:both;display:block!important;animation-play-state:paused}.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active{animation-name:rcSliderTooltipZoomDownIn;animation-play-state:running}.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active{animation-name:rcSliderTooltipZoomDownOut;animation-play-state:running}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear{transform:scale(0);animation-timing-function:cubic-bezier(.23,1,.32,1)}.rc-slider-tooltip-zoom-down-leave{animation-timing-function:cubic-bezier(.755,.05,.855,.06)}@keyframes rcSliderTooltipZoomDownIn{0%{opacity:0;transform-origin:50% 100%;transform:scale(0)}to{transform-origin:50% 100%;transform:scale(1)}}@keyframes rcSliderTooltipZoomDownOut{0%{transform-origin:50% 100%;transform:scale(1)}to{opacity:0;transform-origin:50% 100%;transform:scale(0)}}.rc-slider-tooltip{position:absolute;left:-9999px;top:-9999px;visibility:visible;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip-hidden{display:none}.rc-slider-tooltip-placement-top{padding:4px 0 8px}.rc-slider-tooltip-inner{padding:6px 2px;min-width:24px;height:24px;font-size:12px;line-height:1;color:#fff;text-align:center;text-decoration:none;background-color:#6c6c6c;border-radius:6px;box-shadow:0 0 4px #d9d9d9}.rc-slider-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow{bottom:4px;left:50%;margin-left:-4px;border-width:4px 4px 0;border-top-color:#6c6c6c}.fastboard-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{position:absolute;top:0;left:0;height:calc(100% - 48px);padding:16px;z-index:201;display:flex;align-items:center}.fastboard-bottom-left,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200}.fastboard-bottom-right{left:initial;right:8px}.fastboard-redo-undo{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-redo-undo.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-redo-undo.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:1em;height:1em}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-page-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-page-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:1em;height:1em}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control-cut-line{height:24px;width:.5px}.fastboard-page-control-cut-line.light{background-color:#e7e7e7}.fastboard-page-control-cut-line.dark{background-color:#ffffff26}.fastboard-page-control-slash{opacity:.6}.fastboard-page-control-page,.fastboard-page-control-slash,.fastboard-page-control-page-count{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-zoom-control{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-zoom-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-zoom-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:1em;height:1em}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-zoom-control-cut-line{height:24px;width:.5px}.fastboard-zoom-control-cut-line.light{background-color:#e7e7e7}.fastboard-zoom-control-cut-line.dark{background-color:#ffffff26}.fastboard-zoom-control-percent{opacity:.6}.fastboard-zoom-control-scale,.fastboard-zoom-control-percent{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-toolbar{display:flex;align-items:center;padding:4px;border-radius:4px;flex-direction:column;gap:4px;position:absolute;z-index:100;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .rc-slider{padding:6px 0}.fastboard-toolbar .rc-slider-rail,.fastboard-toolbar .rc-slider-track{height:2px}.fastboard-toolbar .tippy-content{padding:8px}.fastboard-toolbar .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-toolbar.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.expanded{border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.dark{color:#ddd;background-color:#333333d9}.fastboard-toolbar.expanded:hover{box-shadow:0 0 5px #00000040;transform:translate(0)}.fastboard-toolbar.collapsed{padding:0;background-color:transparent}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{margin-right:-4px;width:24px;height:24px;border-radius:4px;background-color:#ffffff1a;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;position:relative}.fastboard-toolbar-btn-interactive{display:inline-block;width:32px;height:32px}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:1em;height:1em}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid transparent;position:absolute;bottom:0;right:0}.fastboard-toolbar-cut-line{display:inline-block;height:.5px;width:100%}.fastboard-toolbar-cut-line.light{background-color:#e7e7e7}.fastboard-toolbar-cut-line.dark{background-color:#ffffff26}.fastboard-toolbar-section{display:inline-flex;flex-flow:column nowrap;gap:4px;scroll-behavior:smooth}.fastboard-toolbar-section.collapsed{transform:translate(-100%);transition:1s transform}.fastboard-toolbar-panel{width:120px;padding:0;display:flex;flex-flow:column nowrap;align-items:center;gap:8px}.fastboard-toolbar-panel.apps{width:224px}.fastboard-toolbar-color-box,.fastboard-toolbar-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-color-box .fastboard-toolbar-btn,.fastboard-toolbar-shapes .fastboard-toolbar-btn{padding:0;width:24px;height:24px}.fastboard-toolbar-apps{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-apps .fastboard-toolbar-btn{width:40px;height:40px;font-size:40px}.fastboard-toolbar-app-icon{padding-top:4px;display:inline-flex;flex-flow:column nowrap;align-items:center;gap:4px}.fastboard-toolbar-app-icon .fastboard-toolbar-btn{padding:0}.fastboard-toolbar-app-icon-text{font-size:12px;color:#5d5d5d;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fastboard-toolbar-color-item{width:24px;height:24px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-item *.light:hover{background-color:#f5f5f5}.fastboard-toolbar-color-item *.dark:hover{background-color:#333}.fastboard-toolbar-color-border{width:24px;height:24px;border:1px solid transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-border.active.light,.fastboard-toolbar-color-border.active.dark{border:1px solid rgba(51,129,255,.8)}.fastboard-toolbar-color-btn{margin:0;border:1px solid rgba(0,0,0,.24);padding:0;appearance:none;width:16px;height:16px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-btn:focus-visible{outline-offset:2px}.fastboard-toolbar-mask-btn{width:17px;height:62px;cursor:pointer}.fastboard-toolbar-mask-btn.dark{filter:invert(.8)}.fastboard-toolbar-expand-btn{display:flex;align-items:center;position:absolute;left:0}.fastboard-player-control{width:100%;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control.auto-hide{opacity:0;transition:opacity .2s}.fastboard-player-control.auto-hide:hover{opacity:1}.fastboard-player-control .rc-slider-disabled{background:transparent;opacity:.5}.fastboard-player-control .rc-slider-rail,.fastboard-player-control .rc-slider-track{height:2px}.fastboard-player-control .tippy-content{padding:8px}.fastboard-player-control .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-player-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-player-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;min-width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:1em;height:1em}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-player-control-btn.loading{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-panel{padding:0;display:flex;flex-flow:column nowrap;align-items:stretch;gap:4px}.fastboard-player-control-panel .fastboard-player-control-btn{width:initial;height:initial;user-select:none;font-size:12px;padding:4px;justify-content:flex-end}.fastboard-player-control-panel .fastboard-player-control-btn.active{color:#3381ff}.fastboard-player-control-slider{width:100%;padding:0 7px}.fastboard-player-control-slider.loading{cursor:not-allowed}.fastboard-player-control-slash{opacity:.6}.fastboard-player-control-current,.fastboard-player-control-slash,.fastboard-player-control-total,.fastboard-player-control-speed-text{font-size:12px;font-variant-numeric:tabular-nums}.tippy-box.fastboard-tip{color:#eee;background-color:#000000f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.tippy-box.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#000}.tippy-box.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#000}\n';
|
|
139
|
+
var style_default = '.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,.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 .1s;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}.telebox-collector{position:absolute;right:10px;bottom:15px}.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;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{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;touch-action:manipulation}.telebox-title-area{overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{overflow:hidden;margin: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-drag-area{position:absolute;inset:0;margin:auto;z-index:10}.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 .telebox-drag-area{height:100%;min-width:16px;position:static;margin:0;flex-grow:1;flex-shrink:0}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;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{height:100%;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;user-select:none}.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}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}.rc-slider{position:relative;height:14px;padding:5px 0;width:100%;border-radius:6px;touch-action:none;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-rail{position:absolute;width:100%;background-color:#e9e9e9;height:4px;border-radius:6px}.rc-slider-track{position:absolute;left:0;height:4px;border-radius:6px;background-color:#abe2fb}.rc-slider-handle{position:absolute;width:14px;height:14px;cursor:pointer;cursor:-webkit-grab;margin-top:-5px;cursor:grab;border-radius:50%;border:solid 2px #96dbfa;background-color:#fff;touch-action:pan-x}.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging{border-color:#57c5f7;box-shadow:0 0 0 5px #96dbfa}.rc-slider-handle:focus{outline:none}.rc-slider-handle-click-focused:focus{border-color:#96dbfa;box-shadow:unset}.rc-slider-handle:hover{border-color:#57c5f7}.rc-slider-handle:active{border-color:#57c5f7;box-shadow:0 0 5px #57c5f7;cursor:-webkit-grabbing;cursor:grabbing}.rc-slider-mark{position:absolute;top:18px;left:0;width:100%;font-size:12px}.rc-slider-mark-text{position:absolute;display:inline-block;vertical-align:middle;text-align:center;cursor:pointer;color:#999}.rc-slider-mark-text-active{color:#666}.rc-slider-step{position:absolute;width:100%;height:4px;background:transparent}.rc-slider-dot{position:absolute;bottom:-2px;margin-left:-4px;width:8px;height:8px;border:2px solid #e9e9e9;background-color:#fff;cursor:pointer;border-radius:50%;vertical-align:middle}.rc-slider-dot-active{border-color:#96dbfa}.rc-slider-dot-reverse{margin-right:-4px}.rc-slider-disabled{background-color:#e9e9e9}.rc-slider-disabled .rc-slider-track{background-color:#ccc}.rc-slider-disabled .rc-slider-handle,.rc-slider-disabled .rc-slider-dot{border-color:#ccc;box-shadow:none;background-color:#fff;cursor:not-allowed}.rc-slider-disabled .rc-slider-mark-text,.rc-slider-disabled .rc-slider-dot{cursor:not-allowed!important}.rc-slider-vertical{width:14px;height:100%;padding:0 5px}.rc-slider-vertical .rc-slider-rail{height:100%;width:4px}.rc-slider-vertical .rc-slider-track{left:5px;bottom:0;width:4px}.rc-slider-vertical .rc-slider-handle{margin-left:-5px;touch-action:pan-y}.rc-slider-vertical .rc-slider-mark{top:0;left:18px;height:100%}.rc-slider-vertical .rc-slider-step{height:100%;width:4px}.rc-slider-vertical .rc-slider-dot{left:2px;margin-bottom:-4px}.rc-slider-vertical .rc-slider-dot:first-child{margin-bottom:-4px}.rc-slider-vertical .rc-slider-dot:last-child{margin-bottom:-4px}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear,.rc-slider-tooltip-zoom-down-leave{animation-duration:.3s;animation-fill-mode:both;display:block!important;animation-play-state:paused}.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active{animation-name:rcSliderTooltipZoomDownIn;animation-play-state:running}.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active{animation-name:rcSliderTooltipZoomDownOut;animation-play-state:running}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear{transform:scale(0);animation-timing-function:cubic-bezier(.23,1,.32,1)}.rc-slider-tooltip-zoom-down-leave{animation-timing-function:cubic-bezier(.755,.05,.855,.06)}@keyframes rcSliderTooltipZoomDownIn{0%{opacity:0;transform-origin:50% 100%;transform:scale(0)}to{transform-origin:50% 100%;transform:scale(1)}}@keyframes rcSliderTooltipZoomDownOut{0%{transform-origin:50% 100%;transform:scale(1)}to{opacity:0;transform-origin:50% 100%;transform:scale(0)}}.rc-slider-tooltip{position:absolute;left:-9999px;top:-9999px;visibility:visible;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip-hidden{display:none}.rc-slider-tooltip-placement-top{padding:4px 0 8px}.rc-slider-tooltip-inner{padding:6px 2px;min-width:24px;height:24px;font-size:12px;line-height:1;color:#fff;text-align:center;text-decoration:none;background-color:#6c6c6c;border-radius:6px;box-shadow:0 0 4px #d9d9d9}.rc-slider-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow{bottom:4px;left:50%;margin-left:-4px;border-width:4px 4px 0;border-top-color:#6c6c6c}.fastboard-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{position:absolute;top:0;left:0;height:calc(100% - 48px);padding:16px;z-index:201;display:flex;align-items:center}.fastboard-bottom-left,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200}.fastboard-bottom-right{left:initial;right:8px}.fastboard-redo-undo{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-redo-undo.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-redo-undo.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:1em;height:1em}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-page-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-page-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:1em;height:1em}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control-cut-line{height:24px;width:.5px}.fastboard-page-control-cut-line.light{background-color:#e7e7e7}.fastboard-page-control-cut-line.dark{background-color:#ffffff26}.fastboard-page-control-slash{opacity:.6}.fastboard-page-control-page,.fastboard-page-control-slash,.fastboard-page-control-page-count{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-zoom-control{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-zoom-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-zoom-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:1em;height:1em}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-zoom-control-cut-line{height:24px;width:.5px}.fastboard-zoom-control-cut-line.light{background-color:#e7e7e7}.fastboard-zoom-control-cut-line.dark{background-color:#ffffff26}.fastboard-zoom-control-percent{opacity:.6}.fastboard-zoom-control-scale,.fastboard-zoom-control-percent{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-toolbar{display:flex;align-items:center;padding:4px;border-radius:4px;flex-direction:column;gap:4px;position:absolute;z-index:100;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .rc-slider{padding:6px 0}.fastboard-toolbar .rc-slider-rail,.fastboard-toolbar .rc-slider-track{height:2px}.fastboard-toolbar .tippy-content{padding:8px}.fastboard-toolbar .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-toolbar.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.expanded{border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.dark{color:#ddd;background-color:#333333d9}.fastboard-toolbar.expanded:hover{box-shadow:0 0 5px #00000040;transform:translate(0)}.fastboard-toolbar.collapsed{padding:0;background-color:transparent}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{margin-right:-4px;width:24px;height:24px;border-radius:4px;background-color:#ffffff1a;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;position:relative}.fastboard-toolbar-btn-interactive{display:inline-block;width:32px;height:32px}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:100%;height:100%}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid transparent;position:absolute;bottom:0;right:0}.fastboard-toolbar-cut-line{display:inline-block;height:.5px;width:100%}.fastboard-toolbar-cut-line.light{background-color:#e7e7e7}.fastboard-toolbar-cut-line.dark{background-color:#ffffff26}.fastboard-toolbar-section{display:inline-flex;flex-flow:column nowrap;gap:4px;scroll-behavior:smooth}.fastboard-toolbar-section.collapsed{transform:translate(-100%);transition:1s transform}.fastboard-toolbar-section+.fastboard-toolbar-mask{opacity:0;transition:.5s opacity .4s}.fastboard-toolbar-section:hover+.fastboard-toolbar-mask,.fastboard-toolbar-mask:hover{opacity:1;transition:.2s opacity}.fastboard-toolbar-panel{width:120px;padding:0;display:flex;flex-flow:column nowrap;align-items:center;gap:8px}.fastboard-toolbar-panel.apps{width:224px}.fastboard-toolbar-color-box,.fastboard-toolbar-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-color-box .fastboard-toolbar-btn,.fastboard-toolbar-shapes .fastboard-toolbar-btn{padding:0;width:24px;height:24px}.fastboard-toolbar-apps{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-apps .fastboard-toolbar-btn{width:40px;height:40px;font-size:0}.fastboard-toolbar-app-icon{padding-top:4px;display:inline-flex;flex-flow:column nowrap;align-items:center;gap:4px}.fastboard-toolbar-app-icon .fastboard-toolbar-btn{padding:0}.fastboard-toolbar-app-icon-text{font-size:12px;color:#5d5d5d;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fastboard-toolbar-color-item{width:24px;height:24px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-item *.light:hover{background-color:#f5f5f5}.fastboard-toolbar-color-item *.dark:hover{background-color:#333}.fastboard-toolbar-color-border{width:24px;height:24px;border:1px solid transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-border.active.light,.fastboard-toolbar-color-border.active.dark{border:1px solid rgba(51,129,255,.8)}.fastboard-toolbar-color-btn{margin:0;border:1px solid rgba(0,0,0,.24);padding:0;appearance:none;width:16px;height:16px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-btn:focus-visible{outline-offset:2px}.fastboard-toolbar-mask{position:absolute;left:calc(100% + 1px);top:50%;transform:translateY(-50%);opacity:.85}.fastboard-toolbar-mask.dark{left:100%}.fastboard-toolbar-mask-btn{width:17px;height:62px;cursor:pointer;opacity:.85}.fastboard-toolbar-mask-btn.dark{filter:invert(.8)}.fastboard-toolbar-expand-btn{display:flex;align-items:center;position:absolute;left:0}.fastboard-player-control{width:100%;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control.auto-hide{opacity:0;transition:opacity .2s}.fastboard-player-control.auto-hide:hover{opacity:1}.fastboard-player-control .rc-slider-disabled{background:transparent;opacity:.5}.fastboard-player-control .rc-slider-rail,.fastboard-player-control .rc-slider-track{height:2px}.fastboard-player-control .tippy-content{padding:8px}.fastboard-player-control .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-player-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-player-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;min-width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:1em;height:1em}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-player-control-btn.loading{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-panel{padding:0;display:flex;flex-flow:column nowrap;align-items:stretch;gap:4px}.fastboard-player-control-panel .fastboard-player-control-btn{width:initial;height:initial;user-select:none;font-size:12px;padding:4px;justify-content:flex-end}.fastboard-player-control-panel .fastboard-player-control-btn.active{color:#3381ff}.fastboard-player-control-slider{width:100%;padding:0 7px}.fastboard-player-control-slider.loading{cursor:not-allowed}.fastboard-player-control-slash{opacity:.6}.fastboard-player-control-current,.fastboard-player-control-slash,.fastboard-player-control-total,.fastboard-player-control-speed-text{font-size:12px;font-variant-numeric:tabular-nums}.tippy-box.fastboard-tip{color:#eee;background-color:#000000f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.tippy-box.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#000}.tippy-box.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#000}\n';
|
|
140
140
|
|
|
141
141
|
// src/behaviors/style.ts
|
|
142
142
|
applyStyles(style_default);
|
|
@@ -174,11 +174,16 @@ function useFocusedApp() {
|
|
|
174
174
|
function useMaximized() {
|
|
175
175
|
return useBoxState() === "maximized";
|
|
176
176
|
}
|
|
177
|
+
var AppsShouldShowToolbar = /* @__PURE__ */ (() => [import_window_manager.BuiltinApps.DocsViewer, "Slide"])();
|
|
177
178
|
function useHideControls() {
|
|
179
|
+
const writable = useWritable();
|
|
178
180
|
const maximized = useMaximized();
|
|
179
181
|
const focusedApp = useFocusedApp();
|
|
182
|
+
if (!writable) {
|
|
183
|
+
return true;
|
|
184
|
+
}
|
|
180
185
|
if (maximized) {
|
|
181
|
-
if (
|
|
186
|
+
if (AppsShouldShowToolbar.some((kind) => focusedApp == null ? void 0 : focusedApp.includes(kind))) {
|
|
182
187
|
return "toolbar-only";
|
|
183
188
|
} else {
|
|
184
189
|
return true;
|
|
@@ -831,94 +836,56 @@ var EmptyToolbarHook = {
|
|
|
831
836
|
// src/components/Toolbar/Toolbar.tsx
|
|
832
837
|
var import_clsx9 = __toESM(require("clsx"));
|
|
833
838
|
var import_framer_motion = require("framer-motion");
|
|
834
|
-
var
|
|
835
|
-
|
|
836
|
-
// src/components/Toolbar/components/assets/collapsed.png
|
|
837
|
-
var collapsed_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA49JREFUeF7tnLFv00AUh5/TFVYkxIDEnKFjJ/gb2CIqpUPagYXNEV2LRGk7tAiRSA0bWcC0QzowwQKuVDnCLE2KTZCMSNLkHCLalCpBkdFVMTKh8TXO+c4S16XDSb0vv/vyfE3fqwQR+ZIA4AoAdADgJ08mSVXVV9ls9nE+nzcBAAFAnweQ1Gg06gihrmEYubm5OeX4+LgBAD9Yw0iO49S63S7U6/VYq9UyCoXC2tLS0kcAwEA9VkBnIO5m7XYbJwTVanVLluWcruvfAOA7ADhhA/0Fgjfr9/tweHgYs20baZq2sbCw8HaQTqgy/wPivvKTkxN8XFPNZvMdC5lHgmAgx3EAISQhhHqGYWyGKbMviJsOC5kvBOIjcxUAWjRkHgtkSGZb07R1WjKPDeIj82cAaAatzIFBhmU2TTOXTCZfBq3ME4HQlJkKCA2ZqYJMIjN1kKAyhwYyrsyhgpwns6IoyysrK/rgQfrnqc4ExCtzrVb7tbe39yCVSr0GAFyZz2CYguANT09PwbIsaWdn5146nX4zuO+wB8EwnU5HqlQqdiKRuHNwcFDC1Zh5Iu4xWZYVU1V1eXZ29jlOhRvI0dGRVC6XP8zMzNwFgK/cQHq9HpTLZXt6evo2AFS4geDbX6lUisXj8VsA8IkbCHZlf39/Kh6P3xQg7jtHJDL826JIRCRC+gRBOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6kjojjxaXbt0Py3jP1DCtes3ruLvVetLnenRYIgnT7OX3Y25gLgQ3gSYg3ghuIEMQ3ABOQ+COcgoCKYgfhD/Jwh+1ZE4GrdKRkJWPxhulTUSBe28ZLglMgzDHcR9N3G/BpDuHH7r4qoY+lUx6PGIoxFHQ3JHOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6ohwxM+RyLR/RaYhLjItgpFomoxEG2kkGmvxRBPXVmPPWIypKMpD5s3X3kEh0zSfJZPJF6NmK0JrI3VHpxBCaiaTWc/n877TJtRBPMNkdrFY3Jifn8ed3njUzneYjCqIZ7xue3FxMadpGh6vu9BEEhUQr4yFQmE1yMDhRCDjyEi6JAUGGVdG6iBBZaQK4pVRluVNXdfZjsfRkHGiRGjKGBjEI+P7TCazQaqMpI1I635jtmNVRtJGpPVRg8fbtGW8EAiL6VUiyGA4vUd6TJN+0KTr0u7u7hYLGUmg0fkHBiRSVuu/AWpfZNft9vFDAAAAAElFTkSuQmCC";
|
|
839
|
+
var import_react59 = __toESM(require("react"));
|
|
838
840
|
|
|
839
841
|
// src/components/Toolbar/components/assets/expanded.png
|
|
840
842
|
var expanded_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA5xJREFUeF7tnL9v00AUx5/TlRkJMSAxZ+jYCf4GtopK6dB2qBBsjshaJErboWVJpYaNLGDaIR2YYAFXqlxhlvzAJkhGJGlyDhVNSpWgyOiqBJnQ+urznW2Jy1JVVnKffv3x8yV9LxLE5CEBwFUA6ALAzyiZJFVVX21ubj7N5/MmACAAGEQBJDWbzQZCqGcYRm52dlbpdDpNAPgRNozkOE691+tBo9FItNtto1AorC0tLX0EAAzUDwvoDGS02NHREU4IarXatizLOV3XvwHAdwBweAP9BYIXGwwGcHh4mLBtG2matrGwsPB2mA5Xmf8BGf3lJycn+HRNtFqtd2HIfCEIBnIcBxBCEkKobxjGFk+ZPUFG6YQh86VAPGSuAUCbhcy+QMZktjVNW2cls28QD5k/A0CLtjJTg4zLbJpmLpVKvaStzIFAWMrMBISFzExBgsjMHIRWZm4gfmXmCnKezIqiLK+srOjDG+mfu3ooIG6Z6/X6r/39/Udzc3OvAQBX5jOYUEHwgqenp2BZlrS7u/sgnU6/Ge53wgfBMN1uV6pWq/b09PTdSqVSwtU49ERGp8myrISqqsszMzPPcSqRgRwfH0vlcvnD1NTUIgB8jQyk3+9DuVy2Jycn7wBANTIQvPsrlUqJZDJ5GwA+RQaCXSkWixPJZPKWABldOSKR8XeLIhGRCOkTBOGIcEQ4QkpAOEJKSNQR4YhwhJSAcISUkKgjTBy5fuPmNfxCNetLA/98srp25WFaxv+UpH5QnZpxEPz7/XuLnSAwzEBwFEFgmIIEgWEOQgvDBYQGhhuIXxiuIH5g/g8QP5czt0T8QFB/mHdeZXXXdr8QXEBoIJiD0EIwBQkCwQwksm0A9abD44lUl68A4ZEAkz0rDzDhiDg1JK+EI8IR4QgpAeEIKSFRR4QjwhFSAsIRUkKijsTSkdi0f8WmIS42LYKxaJqMRRtpLBpr8URTpK3GrrEYU1GUx6E3X7sHhUzTfJZKpV5cNFvBrY10NDqFEFKz2ex6Pp/3nDZhDuIaJrMPDg425ufncac3HrXzHCZjCuIar9vJZDI5TdPweN2lJpKYgLhlLBQKqzQDh4FA/MhI2ptQg/iVkTkIrYxMQdwyyrK8pet6uONxLGQMlAhLGalBXDK+z2azG6TKSFqIdNxrzNZXZSQtRDp+0eDxDmsZLwUSxvQqEWQ4nN4n3aZJLxT0uLS3t7cdhowk0Ph8gQGJNKzjvwGKWUjXcvHclAAAAABJRU5ErkJggg==";
|
|
841
843
|
|
|
842
|
-
// src/components/Toolbar/components/Mask.tsx
|
|
843
|
-
var import_react23 = __toESM(require("react"));
|
|
844
|
-
var import_react_dom = __toESM(require("react-dom"));
|
|
845
|
-
var Mask = import_react23.default.memo(({ toolbar, children }) => {
|
|
846
|
-
const [rootElement] = (0, import_react23.useState)(() => {
|
|
847
|
-
const element = document.createElement("div");
|
|
848
|
-
element.style.position = "absolute";
|
|
849
|
-
return element;
|
|
850
|
-
});
|
|
851
|
-
(0, import_react23.useEffect)(() => {
|
|
852
|
-
if (toolbar && rootElement) {
|
|
853
|
-
toolbar.appendChild(rootElement);
|
|
854
|
-
}
|
|
855
|
-
}, [rootElement, toolbar]);
|
|
856
|
-
(0, import_react23.useEffect)(() => {
|
|
857
|
-
if (rootElement && toolbar) {
|
|
858
|
-
toolbar.appendChild(rootElement);
|
|
859
|
-
const toolbarRect = toolbar.getBoundingClientRect();
|
|
860
|
-
const halfHeight = toolbarRect.height / 2 - 31;
|
|
861
|
-
rootElement.style.top = halfHeight + "px";
|
|
862
|
-
rootElement.style.left = "41px";
|
|
863
|
-
rootElement.style.width = "17px";
|
|
864
|
-
rootElement.style.height = "62px";
|
|
865
|
-
return () => {
|
|
866
|
-
toolbar.removeChild(rootElement);
|
|
867
|
-
};
|
|
868
|
-
}
|
|
869
|
-
}, [rootElement, toolbar]);
|
|
870
|
-
if (rootElement) {
|
|
871
|
-
return import_react_dom.default.createPortal(children, rootElement);
|
|
872
|
-
} else {
|
|
873
|
-
return null;
|
|
874
|
-
}
|
|
875
|
-
});
|
|
876
|
-
|
|
877
844
|
// src/components/Toolbar/Content.tsx
|
|
878
845
|
var import_clsx8 = __toESM(require("clsx"));
|
|
879
|
-
var
|
|
846
|
+
var import_react58 = __toESM(require("react"));
|
|
880
847
|
|
|
881
848
|
// src/components/Toolbar/components/ApplianceButtons.tsx
|
|
882
|
-
var
|
|
849
|
+
var import_react45 = __toESM(require("react"));
|
|
883
850
|
var import_white_web_sdk = require("white-web-sdk");
|
|
884
851
|
|
|
885
852
|
// src/components/Toolbar/icons/index.ts
|
|
886
|
-
var
|
|
853
|
+
var import_react42 = require("react");
|
|
887
854
|
|
|
888
855
|
// src/components/Toolbar/icons/Apps.tsx
|
|
889
|
-
var
|
|
856
|
+
var import_react23 = __toESM(require("react"));
|
|
890
857
|
var Apps = (props) => {
|
|
891
858
|
const stroke = getStroke(props);
|
|
892
|
-
return /* @__PURE__ */
|
|
859
|
+
return /* @__PURE__ */ import_react23.default.createElement("svg", {
|
|
893
860
|
viewBox: "0 0 24 24"
|
|
894
|
-
}, /* @__PURE__ */
|
|
861
|
+
}, /* @__PURE__ */ import_react23.default.createElement("g", {
|
|
895
862
|
fill: stroke
|
|
896
|
-
}, /* @__PURE__ */
|
|
863
|
+
}, /* @__PURE__ */ import_react23.default.createElement("path", {
|
|
897
864
|
d: "M17.667 4.5h-3.334c-1.012 0-1.833.82-1.833 1.833V11.5h5.167c1.012 0 1.833-.82 1.833-1.833V6.333c0-1.012-.82-1.833-1.833-1.833Zm-3.334 1h3.334c.46 0 .833.373.833.833v3.334l-.006.104a.833.833 0 0 1-.827.729H13.5V6.333c0-.46.373-.833.833-.833Z"
|
|
898
|
-
}), /* @__PURE__ */
|
|
865
|
+
}), /* @__PURE__ */ import_react23.default.createElement("path", {
|
|
899
866
|
d: "M6.333 19.5A1.833 1.833 0 0 1 4.5 17.667v-3.334c0-.525.221-1 .576-1.334a1.822 1.822 0 0 1-.576-1.332V8.333c0-1.012.82-1.833 1.833-1.833H10A1.5 1.5 0 0 1 11.5 8v4.5h4.167c.962 0 1.75.74 1.827 1.683l.006.15v3.334c0 1.012-.82 1.833-1.833 1.833Zm4.167-6H6.333a.833.833 0 0 0-.827.729l-.006.104v3.334c0 .46.373.833.833.833H10.5v-5Zm5.167 0H11.5v5h4.167c.46 0 .833-.373.833-.833v-3.334a.833.833 0 0 0-.833-.833ZM10 7.5H6.333a.833.833 0 0 0-.833.833v3.334c0 .46.373.833.833.833H10.5V8a.5.5 0 0 0-.41-.492L10 7.5Z"
|
|
900
867
|
})));
|
|
901
868
|
};
|
|
902
869
|
|
|
903
870
|
// src/components/Toolbar/icons/Arrow.tsx
|
|
904
|
-
var
|
|
871
|
+
var import_react24 = __toESM(require("react"));
|
|
905
872
|
var Arrow = (props) => {
|
|
906
873
|
const stroke = getStroke(props);
|
|
907
|
-
return /* @__PURE__ */
|
|
874
|
+
return /* @__PURE__ */ import_react24.default.createElement("svg", {
|
|
908
875
|
viewBox: "0 0 24 24"
|
|
909
|
-
}, /* @__PURE__ */
|
|
876
|
+
}, /* @__PURE__ */ import_react24.default.createElement("path", {
|
|
910
877
|
fill: stroke,
|
|
911
878
|
d: "M19 5v6l-2.647-2.646L5.99 18.718l-.708-.708L15.645 7.646 13 5h6Z"
|
|
912
879
|
}));
|
|
913
880
|
};
|
|
914
881
|
|
|
915
882
|
// src/components/Toolbar/icons/Circle.tsx
|
|
916
|
-
var
|
|
883
|
+
var import_react25 = __toESM(require("react"));
|
|
917
884
|
var Circle = (props) => {
|
|
918
885
|
const stroke = getStroke(props);
|
|
919
|
-
return /* @__PURE__ */
|
|
886
|
+
return /* @__PURE__ */ import_react25.default.createElement("svg", {
|
|
920
887
|
viewBox: "0 0 24 24"
|
|
921
|
-
}, /* @__PURE__ */
|
|
888
|
+
}, /* @__PURE__ */ import_react25.default.createElement("rect", {
|
|
922
889
|
width: "15",
|
|
923
890
|
height: "15",
|
|
924
891
|
x: "4.5",
|
|
@@ -930,40 +897,40 @@ var Circle = (props) => {
|
|
|
930
897
|
};
|
|
931
898
|
|
|
932
899
|
// src/components/Toolbar/icons/Clean.tsx
|
|
933
|
-
var
|
|
900
|
+
var import_react26 = __toESM(require("react"));
|
|
934
901
|
var Clean = (props) => {
|
|
935
902
|
const stroke = getStroke(props);
|
|
936
|
-
return /* @__PURE__ */
|
|
903
|
+
return /* @__PURE__ */ import_react26.default.createElement("svg", {
|
|
937
904
|
viewBox: "0 0 24 24"
|
|
938
|
-
}, /* @__PURE__ */
|
|
905
|
+
}, /* @__PURE__ */ import_react26.default.createElement("path", {
|
|
939
906
|
fill: stroke,
|
|
940
907
|
d: "M9.754 11.99c0 1.856-.711 3.62-1.96 4.951l-.151.155h1.403l.855-.853h.707l.853.853h2.635l.094-.064a6.237 6.237 0 0 0 2.559-4.781l.005-.26h1a7.237 7.237 0 0 1-2.994 5.862l-.229.16-.277.083h-3l-.353-.146-.647-.647-.646.647-.354.146h-3l-.286-.91.214-.148a6.237 6.237 0 0 0 2.567-4.787l.005-.26h1Zm4.772-6.502v2l.35.039a2.98 2.98 0 0 1 2.644 2.78l.006.181h-8a2.98 2.98 0 0 1 2.65-2.961l.35-.039v-2h2Z"
|
|
941
908
|
}));
|
|
942
909
|
};
|
|
943
910
|
|
|
944
911
|
// src/components/Toolbar/icons/Clicker.tsx
|
|
945
|
-
var
|
|
912
|
+
var import_react27 = __toESM(require("react"));
|
|
946
913
|
var Clicker = (props) => {
|
|
947
914
|
const stroke = getStroke(props);
|
|
948
|
-
return /* @__PURE__ */
|
|
915
|
+
return /* @__PURE__ */ import_react27.default.createElement("svg", {
|
|
949
916
|
viewBox: "0 0 24 24"
|
|
950
|
-
}, /* @__PURE__ */
|
|
917
|
+
}, /* @__PURE__ */ import_react27.default.createElement("g", {
|
|
951
918
|
fill: "none"
|
|
952
|
-
}, /* @__PURE__ */
|
|
919
|
+
}, /* @__PURE__ */ import_react27.default.createElement("path", {
|
|
953
920
|
d: "M0 0h24v24H0z"
|
|
954
|
-
}), /* @__PURE__ */
|
|
921
|
+
}), /* @__PURE__ */ import_react27.default.createElement("path", {
|
|
955
922
|
fill: stroke,
|
|
956
923
|
d: "m7 5.072 10.33 7.892-4.879.549 3.232 5.598-.866.5-3.233-5.597-2.914 3.95L7 5.072Z"
|
|
957
924
|
})));
|
|
958
925
|
};
|
|
959
926
|
|
|
960
927
|
// src/components/Toolbar/icons/Collapse.tsx
|
|
961
|
-
var
|
|
928
|
+
var import_react28 = __toESM(require("react"));
|
|
962
929
|
var Collapse = (props) => {
|
|
963
930
|
const stroke = getStroke(props);
|
|
964
|
-
return /* @__PURE__ */
|
|
931
|
+
return /* @__PURE__ */ import_react28.default.createElement("svg", {
|
|
965
932
|
viewBox: "0 0 24 24"
|
|
966
|
-
}, /* @__PURE__ */
|
|
933
|
+
}, /* @__PURE__ */ import_react28.default.createElement("path", {
|
|
967
934
|
fill: "none",
|
|
968
935
|
stroke,
|
|
969
936
|
d: "m8 10-2 2 2 2m10-8H6m12 12H6m12-4h-8m8-4h-8"
|
|
@@ -971,12 +938,12 @@ var Collapse = (props) => {
|
|
|
971
938
|
};
|
|
972
939
|
|
|
973
940
|
// src/components/Toolbar/icons/Diamond.tsx
|
|
974
|
-
var
|
|
941
|
+
var import_react29 = __toESM(require("react"));
|
|
975
942
|
var Diamond = (props) => {
|
|
976
943
|
const stroke = getStroke(props);
|
|
977
|
-
return /* @__PURE__ */
|
|
944
|
+
return /* @__PURE__ */ import_react29.default.createElement("svg", {
|
|
978
945
|
viewBox: "0 0 24 24"
|
|
979
|
-
}, /* @__PURE__ */
|
|
946
|
+
}, /* @__PURE__ */ import_react29.default.createElement("path", {
|
|
980
947
|
fill: "none",
|
|
981
948
|
stroke,
|
|
982
949
|
d: "M4.222 12 12 4.222 19.778 12 12 19.778z"
|
|
@@ -984,12 +951,12 @@ var Diamond = (props) => {
|
|
|
984
951
|
};
|
|
985
952
|
|
|
986
953
|
// src/components/Toolbar/icons/Down.tsx
|
|
987
|
-
var
|
|
954
|
+
var import_react30 = __toESM(require("react"));
|
|
988
955
|
var Down = (props) => {
|
|
989
956
|
const stroke = getStroke(props);
|
|
990
|
-
return /* @__PURE__ */
|
|
957
|
+
return /* @__PURE__ */ import_react30.default.createElement("svg", {
|
|
991
958
|
viewBox: "0 0 24 24"
|
|
992
|
-
}, /* @__PURE__ */
|
|
959
|
+
}, /* @__PURE__ */ import_react30.default.createElement("path", {
|
|
993
960
|
fill: "none",
|
|
994
961
|
stroke,
|
|
995
962
|
d: "m16 13-2 2-2 2-2-2-2-2m8-6-2 2-2 2-2-2-2-2"
|
|
@@ -997,24 +964,24 @@ var Down = (props) => {
|
|
|
997
964
|
};
|
|
998
965
|
|
|
999
966
|
// src/components/Toolbar/icons/Eraser.tsx
|
|
1000
|
-
var
|
|
967
|
+
var import_react31 = __toESM(require("react"));
|
|
1001
968
|
var Eraser = (props) => {
|
|
1002
969
|
const stroke = getStroke(props);
|
|
1003
|
-
return /* @__PURE__ */
|
|
970
|
+
return /* @__PURE__ */ import_react31.default.createElement("svg", {
|
|
1004
971
|
viewBox: "0 0 24 24"
|
|
1005
|
-
}, /* @__PURE__ */
|
|
972
|
+
}, /* @__PURE__ */ import_react31.default.createElement("path", {
|
|
1006
973
|
fill: stroke,
|
|
1007
974
|
d: "m14.333 5.183.165.007c.494.037.978.245 1.356.623l2.333 2.333a2.15 2.15 0 0 1 0 3.04l-5.833 5.834a3.8 3.8 0 0 1-5.374 0l-1.167-1.166a2.15 2.15 0 0 1 0-3.04l7-7c.42-.42.97-.63 1.52-.63ZM11.52 8.52l-4.999 5a1.15 1.15 0 0 0 0 1.626l1.167 1.167a2.8 2.8 0 0 0 3.96 0l3.832-3.833-3.96-3.96Z"
|
|
1008
975
|
}));
|
|
1009
976
|
};
|
|
1010
977
|
|
|
1011
978
|
// src/components/Toolbar/icons/Expand.tsx
|
|
1012
|
-
var
|
|
979
|
+
var import_react32 = __toESM(require("react"));
|
|
1013
980
|
var Expand = (props) => {
|
|
1014
981
|
const stroke = getStroke(props);
|
|
1015
|
-
return /* @__PURE__ */
|
|
982
|
+
return /* @__PURE__ */ import_react32.default.createElement("svg", {
|
|
1016
983
|
viewBox: "0 0 24 24"
|
|
1017
|
-
}, /* @__PURE__ */
|
|
984
|
+
}, /* @__PURE__ */ import_react32.default.createElement("path", {
|
|
1018
985
|
fill: "none",
|
|
1019
986
|
stroke,
|
|
1020
987
|
d: "m16 10 2 2-2 2M6 6h12M6 18h12M6 14h8m-8-4h8"
|
|
@@ -1022,36 +989,36 @@ var Expand = (props) => {
|
|
|
1022
989
|
};
|
|
1023
990
|
|
|
1024
991
|
// src/components/Toolbar/icons/Line.tsx
|
|
1025
|
-
var
|
|
992
|
+
var import_react33 = __toESM(require("react"));
|
|
1026
993
|
var Line = (props) => {
|
|
1027
994
|
const stroke = getStroke(props);
|
|
1028
|
-
return /* @__PURE__ */
|
|
995
|
+
return /* @__PURE__ */ import_react33.default.createElement("svg", {
|
|
1029
996
|
viewBox: "0 0 24 24"
|
|
1030
|
-
}, /* @__PURE__ */
|
|
997
|
+
}, /* @__PURE__ */ import_react33.default.createElement("path", {
|
|
1031
998
|
fill: stroke,
|
|
1032
999
|
d: "m18.01 5.282.708.708L5.99 18.718l-.708-.708z"
|
|
1033
1000
|
}));
|
|
1034
1001
|
};
|
|
1035
1002
|
|
|
1036
1003
|
// src/components/Toolbar/icons/Pencil.tsx
|
|
1037
|
-
var
|
|
1004
|
+
var import_react34 = __toESM(require("react"));
|
|
1038
1005
|
var Pencil = (props) => {
|
|
1039
1006
|
const stroke = getStroke(props);
|
|
1040
|
-
return /* @__PURE__ */
|
|
1007
|
+
return /* @__PURE__ */ import_react34.default.createElement("svg", {
|
|
1041
1008
|
viewBox: "0 0 24 24"
|
|
1042
|
-
}, /* @__PURE__ */
|
|
1009
|
+
}, /* @__PURE__ */ import_react34.default.createElement("path", {
|
|
1043
1010
|
fill: stroke,
|
|
1044
1011
|
d: "m17.497 4.84.116.105 1.442 1.442a1.52 1.52 0 0 1 .104 2.034l-.104.116L8.733 18.858l-4.347.756.756-4.347L15.463 4.945a1.52 1.52 0 0 1 2.034-.104ZM5.967 16.349l-.353 2.037 2.037-.354-1.683-1.683Zm8.407-8.901-7.946 7.946 2.178 2.178 7.946-7.946-2.178-2.178Zm-.728 2.2.708.707-5 5-.708-.708 5-5Zm2.596-4.055-.072.06-1.09 1.088 2.179 2.178 1.089-1.088a.52.52 0 0 0 .105-.584l-.045-.08-.06-.072-1.442-1.442a.52.52 0 0 0-.664-.06Z"
|
|
1045
1012
|
}));
|
|
1046
1013
|
};
|
|
1047
1014
|
|
|
1048
1015
|
// src/components/Toolbar/icons/Rectangle.tsx
|
|
1049
|
-
var
|
|
1016
|
+
var import_react35 = __toESM(require("react"));
|
|
1050
1017
|
var Rectangle = (props) => {
|
|
1051
1018
|
const stroke = getStroke(props);
|
|
1052
|
-
return /* @__PURE__ */
|
|
1019
|
+
return /* @__PURE__ */ import_react35.default.createElement("svg", {
|
|
1053
1020
|
viewBox: "0 0 24 24"
|
|
1054
|
-
}, /* @__PURE__ */
|
|
1021
|
+
}, /* @__PURE__ */ import_react35.default.createElement("path", {
|
|
1055
1022
|
fill: "none",
|
|
1056
1023
|
stroke,
|
|
1057
1024
|
d: "M5.5 5.5h13v13h-13z"
|
|
@@ -1059,24 +1026,24 @@ var Rectangle = (props) => {
|
|
|
1059
1026
|
};
|
|
1060
1027
|
|
|
1061
1028
|
// src/components/Toolbar/icons/Selector.tsx
|
|
1062
|
-
var
|
|
1029
|
+
var import_react36 = __toESM(require("react"));
|
|
1063
1030
|
var Selector = (props) => {
|
|
1064
1031
|
const stroke = getStroke(props);
|
|
1065
|
-
return /* @__PURE__ */
|
|
1032
|
+
return /* @__PURE__ */ import_react36.default.createElement("svg", {
|
|
1066
1033
|
viewBox: "0 0 24 24"
|
|
1067
|
-
}, /* @__PURE__ */
|
|
1034
|
+
}, /* @__PURE__ */ import_react36.default.createElement("path", {
|
|
1068
1035
|
fill: stroke,
|
|
1069
1036
|
d: "m12 12 8 2.667-3.556 1.777L14.667 20 12 12Zm3-8v7.5h-1V5H5v9h6.5v1H4V4h11Z"
|
|
1070
1037
|
}));
|
|
1071
1038
|
};
|
|
1072
1039
|
|
|
1073
1040
|
// src/components/Toolbar/icons/SpeechBalloon.tsx
|
|
1074
|
-
var
|
|
1041
|
+
var import_react37 = __toESM(require("react"));
|
|
1075
1042
|
var SpeechBalloon = (props) => {
|
|
1076
1043
|
const stroke = getStroke(props);
|
|
1077
|
-
return /* @__PURE__ */
|
|
1044
|
+
return /* @__PURE__ */ import_react37.default.createElement("svg", {
|
|
1078
1045
|
viewBox: "0 0 24 24"
|
|
1079
|
-
}, /* @__PURE__ */
|
|
1046
|
+
}, /* @__PURE__ */ import_react37.default.createElement("path", {
|
|
1080
1047
|
fill: "none",
|
|
1081
1048
|
stroke,
|
|
1082
1049
|
d: "M17 4.5c.414 0 .79.168 1.06.44.272.27.44.646.44 1.06v9c0 .414-.168.79-.44 1.06a1.49 1.49 0 0 1-1.06.44h-4.207l-2.715 2.715-1.81-2.715H7a1.49 1.49 0 0 1-1.06-.44A1.495 1.495 0 0 1 5.5 15V6c0-.414.168-.79.44-1.06A1.49 1.49 0 0 1 7 4.5Z"
|
|
@@ -1084,12 +1051,12 @@ var SpeechBalloon = (props) => {
|
|
|
1084
1051
|
};
|
|
1085
1052
|
|
|
1086
1053
|
// src/components/Toolbar/icons/Star.tsx
|
|
1087
|
-
var
|
|
1054
|
+
var import_react38 = __toESM(require("react"));
|
|
1088
1055
|
var Star = (props) => {
|
|
1089
1056
|
const stroke = getStroke(props);
|
|
1090
|
-
return /* @__PURE__ */
|
|
1057
|
+
return /* @__PURE__ */ import_react38.default.createElement("svg", {
|
|
1091
1058
|
viewBox: "0 0 24 24"
|
|
1092
|
-
}, /* @__PURE__ */
|
|
1059
|
+
}, /* @__PURE__ */ import_react38.default.createElement("path", {
|
|
1093
1060
|
fill: "none",
|
|
1094
1061
|
stroke,
|
|
1095
1062
|
d: "m12 3.523 1.993 5.734 6.07.123-4.838 3.668 1.758 5.81L12 15.391l-4.983 3.467 1.758-5.81L3.938 9.38l6.069-.123L12 3.523Z"
|
|
@@ -1097,24 +1064,24 @@ var Star = (props) => {
|
|
|
1097
1064
|
};
|
|
1098
1065
|
|
|
1099
1066
|
// src/components/Toolbar/icons/Text.tsx
|
|
1100
|
-
var
|
|
1067
|
+
var import_react39 = __toESM(require("react"));
|
|
1101
1068
|
var Text = (props) => {
|
|
1102
1069
|
const stroke = getStroke(props);
|
|
1103
|
-
return /* @__PURE__ */
|
|
1070
|
+
return /* @__PURE__ */ import_react39.default.createElement("svg", {
|
|
1104
1071
|
viewBox: "0 0 24 24"
|
|
1105
|
-
}, /* @__PURE__ */
|
|
1072
|
+
}, /* @__PURE__ */ import_react39.default.createElement("path", {
|
|
1106
1073
|
fill: stroke,
|
|
1107
1074
|
d: "M18.5 5.5V8h-1V6.5H13v11h2v1H9v-1h2v-11H6.5V8h-1V5.5h13Z"
|
|
1108
1075
|
}));
|
|
1109
1076
|
};
|
|
1110
1077
|
|
|
1111
1078
|
// src/components/Toolbar/icons/Triangle.tsx
|
|
1112
|
-
var
|
|
1079
|
+
var import_react40 = __toESM(require("react"));
|
|
1113
1080
|
var Triangle = (props) => {
|
|
1114
1081
|
const stroke = getStroke(props);
|
|
1115
|
-
return /* @__PURE__ */
|
|
1082
|
+
return /* @__PURE__ */ import_react40.default.createElement("svg", {
|
|
1116
1083
|
viewBox: "0 0 24 24"
|
|
1117
|
-
}, /* @__PURE__ */
|
|
1084
|
+
}, /* @__PURE__ */ import_react40.default.createElement("path", {
|
|
1118
1085
|
fill: "none",
|
|
1119
1086
|
stroke,
|
|
1120
1087
|
d: "M12 6.008 19.138 18.5H4.862L12 6.008Z"
|
|
@@ -1122,12 +1089,12 @@ var Triangle = (props) => {
|
|
|
1122
1089
|
};
|
|
1123
1090
|
|
|
1124
1091
|
// src/components/Toolbar/icons/Up.tsx
|
|
1125
|
-
var
|
|
1092
|
+
var import_react41 = __toESM(require("react"));
|
|
1126
1093
|
var Up = (props) => {
|
|
1127
1094
|
const stroke = getStroke(props);
|
|
1128
|
-
return /* @__PURE__ */
|
|
1095
|
+
return /* @__PURE__ */ import_react41.default.createElement("svg", {
|
|
1129
1096
|
viewBox: "0 0 24 24"
|
|
1130
|
-
}, /* @__PURE__ */
|
|
1097
|
+
}, /* @__PURE__ */ import_react41.default.createElement("path", {
|
|
1131
1098
|
fill: "none",
|
|
1132
1099
|
stroke,
|
|
1133
1100
|
d: "m16 11-2-2-2-2-2 2-2 2m8 6-2-2-2-2-2 2-2 2"
|
|
@@ -1136,35 +1103,35 @@ var Up = (props) => {
|
|
|
1136
1103
|
|
|
1137
1104
|
// src/components/Toolbar/icons/index.ts
|
|
1138
1105
|
var Icons = {
|
|
1139
|
-
Clicker: (0,
|
|
1140
|
-
Collapse: (0,
|
|
1141
|
-
Eraser: (0,
|
|
1142
|
-
Expand: (0,
|
|
1143
|
-
Pencil: (0,
|
|
1144
|
-
Selector: (0,
|
|
1145
|
-
Rectangle: (0,
|
|
1146
|
-
Text: (0,
|
|
1147
|
-
Apps: (0,
|
|
1148
|
-
Clean: (0,
|
|
1149
|
-
Circle: (0,
|
|
1150
|
-
Line: (0,
|
|
1151
|
-
Arrow: (0,
|
|
1152
|
-
Star: (0,
|
|
1153
|
-
Diamond: (0,
|
|
1154
|
-
SpeechBalloon: (0,
|
|
1155
|
-
Triangle: (0,
|
|
1156
|
-
Up: (0,
|
|
1157
|
-
Down: (0,
|
|
1106
|
+
Clicker: (0, import_react42.memo)(Clicker),
|
|
1107
|
+
Collapse: (0, import_react42.memo)(Collapse),
|
|
1108
|
+
Eraser: (0, import_react42.memo)(Eraser),
|
|
1109
|
+
Expand: (0, import_react42.memo)(Expand),
|
|
1110
|
+
Pencil: (0, import_react42.memo)(Pencil),
|
|
1111
|
+
Selector: (0, import_react42.memo)(Selector),
|
|
1112
|
+
Rectangle: (0, import_react42.memo)(Rectangle),
|
|
1113
|
+
Text: (0, import_react42.memo)(Text),
|
|
1114
|
+
Apps: (0, import_react42.memo)(Apps),
|
|
1115
|
+
Clean: (0, import_react42.memo)(Clean),
|
|
1116
|
+
Circle: (0, import_react42.memo)(Circle),
|
|
1117
|
+
Line: (0, import_react42.memo)(Line),
|
|
1118
|
+
Arrow: (0, import_react42.memo)(Arrow),
|
|
1119
|
+
Star: (0, import_react42.memo)(Star),
|
|
1120
|
+
Diamond: (0, import_react42.memo)(Diamond),
|
|
1121
|
+
SpeechBalloon: (0, import_react42.memo)(SpeechBalloon),
|
|
1122
|
+
Triangle: (0, import_react42.memo)(Triangle),
|
|
1123
|
+
Up: (0, import_react42.memo)(Up),
|
|
1124
|
+
Down: (0, import_react42.memo)(Down)
|
|
1158
1125
|
};
|
|
1159
1126
|
|
|
1160
1127
|
// src/components/Toolbar/components/Button.tsx
|
|
1161
1128
|
var import_clsx4 = __toESM(require("clsx"));
|
|
1162
|
-
var
|
|
1163
|
-
var
|
|
1164
|
-
var Button = (0,
|
|
1129
|
+
var import_react43 = __toESM(require("react"));
|
|
1130
|
+
var import_react44 = __toESM(require("@tippyjs/react"));
|
|
1131
|
+
var Button = (0, import_react43.forwardRef)((props, ref) => {
|
|
1165
1132
|
const { content, disabled, active, onClick, interactive, placement = "right", children } = props;
|
|
1166
|
-
const { writable, theme } = (0,
|
|
1167
|
-
return /* @__PURE__ */
|
|
1133
|
+
const { writable, theme } = (0, import_react43.useContext)(ToolbarContext);
|
|
1134
|
+
return /* @__PURE__ */ import_react43.default.createElement(import_react44.default, {
|
|
1168
1135
|
className: "fastboard-tip",
|
|
1169
1136
|
content,
|
|
1170
1137
|
interactive,
|
|
@@ -1174,7 +1141,7 @@ var Button = (0, import_react44.forwardRef)((props, ref) => {
|
|
|
1174
1141
|
offset: placement.includes("right") ? RightOffset : void 0,
|
|
1175
1142
|
delay: [1e3, 400],
|
|
1176
1143
|
duration: 300
|
|
1177
|
-
}, /* @__PURE__ */
|
|
1144
|
+
}, /* @__PURE__ */ import_react43.default.createElement("button", {
|
|
1178
1145
|
ref,
|
|
1179
1146
|
className: (0, import_clsx4.default)("fastboard-toolbar-btn", theme, { active }),
|
|
1180
1147
|
onClick,
|
|
@@ -1186,9 +1153,9 @@ var Button = (0, import_react44.forwardRef)((props, ref) => {
|
|
|
1186
1153
|
function renderToolTip(text, hotkey) {
|
|
1187
1154
|
if (!(typeof hotkey === "string"))
|
|
1188
1155
|
return text;
|
|
1189
|
-
return /* @__PURE__ */
|
|
1156
|
+
return /* @__PURE__ */ import_react45.default.createElement("span", {
|
|
1190
1157
|
className: "fastboard-toolbar-tooltip"
|
|
1191
|
-
}, /* @__PURE__ */
|
|
1158
|
+
}, /* @__PURE__ */ import_react45.default.createElement("span", null, text), /* @__PURE__ */ import_react45.default.createElement("span", {
|
|
1192
1159
|
className: "fastboard-toolbar-hotkey"
|
|
1193
1160
|
}, hotkey.toUpperCase()));
|
|
1194
1161
|
}
|
|
@@ -1196,18 +1163,18 @@ function ClickerButton() {
|
|
|
1196
1163
|
var _a;
|
|
1197
1164
|
const app = useFastboardApp();
|
|
1198
1165
|
const { t } = useTranslation();
|
|
1199
|
-
const { theme, icons, writable, setAppliance, memberState } = (0,
|
|
1200
|
-
const changeAppliance = (0,
|
|
1166
|
+
const { theme, icons, writable, setAppliance, memberState } = (0, import_react45.useContext)(ToolbarContext);
|
|
1167
|
+
const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.clicker), [setAppliance]);
|
|
1201
1168
|
const shortcut = (_a = app.hotKeys) == null ? void 0 : _a.changeToClick;
|
|
1202
1169
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1203
1170
|
const active = appliance === import_white_web_sdk.ApplianceNames.clicker;
|
|
1204
1171
|
const disabled = !writable;
|
|
1205
|
-
return /* @__PURE__ */
|
|
1172
|
+
return /* @__PURE__ */ import_react45.default.createElement(Button, {
|
|
1206
1173
|
content: renderToolTip(t("clicker"), shortcut),
|
|
1207
1174
|
onClick: changeAppliance,
|
|
1208
1175
|
active
|
|
1209
|
-
}, /* @__PURE__ */
|
|
1210
|
-
fallback: /* @__PURE__ */
|
|
1176
|
+
}, /* @__PURE__ */ import_react45.default.createElement(Icon, {
|
|
1177
|
+
fallback: /* @__PURE__ */ import_react45.default.createElement(Icons.Clicker, {
|
|
1211
1178
|
theme,
|
|
1212
1179
|
active
|
|
1213
1180
|
}),
|
|
@@ -1218,18 +1185,18 @@ function ClickerButton() {
|
|
|
1218
1185
|
function SelectorButton() {
|
|
1219
1186
|
const app = useFastboardApp();
|
|
1220
1187
|
const { t } = useTranslation();
|
|
1221
|
-
const { theme, icons, writable, setAppliance, memberState } = (0,
|
|
1222
|
-
const changeAppliance = (0,
|
|
1188
|
+
const { theme, icons, writable, setAppliance, memberState } = (0, import_react45.useContext)(ToolbarContext);
|
|
1189
|
+
const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.selector), [setAppliance]);
|
|
1223
1190
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1224
1191
|
const active = appliance === import_white_web_sdk.ApplianceNames.selector;
|
|
1225
1192
|
const disabled = !writable;
|
|
1226
1193
|
const shortcut = (app.hotKeys || defaultHotKeys).changeToSelector;
|
|
1227
|
-
return /* @__PURE__ */
|
|
1194
|
+
return /* @__PURE__ */ import_react45.default.createElement(Button, {
|
|
1228
1195
|
content: renderToolTip(t("selector"), shortcut),
|
|
1229
1196
|
onClick: changeAppliance,
|
|
1230
1197
|
active
|
|
1231
|
-
}, /* @__PURE__ */
|
|
1232
|
-
fallback: /* @__PURE__ */
|
|
1198
|
+
}, /* @__PURE__ */ import_react45.default.createElement(Icon, {
|
|
1199
|
+
fallback: /* @__PURE__ */ import_react45.default.createElement(Icons.Selector, {
|
|
1233
1200
|
theme,
|
|
1234
1201
|
active
|
|
1235
1202
|
}),
|
|
@@ -1240,18 +1207,18 @@ function SelectorButton() {
|
|
|
1240
1207
|
function EraserButton() {
|
|
1241
1208
|
const app = useFastboardApp();
|
|
1242
1209
|
const { t } = useTranslation();
|
|
1243
|
-
const { theme, icons, writable, setAppliance, memberState } = (0,
|
|
1244
|
-
const changeAppliance = (0,
|
|
1210
|
+
const { theme, icons, writable, setAppliance, memberState } = (0, import_react45.useContext)(ToolbarContext);
|
|
1211
|
+
const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.eraser), [setAppliance]);
|
|
1245
1212
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1246
1213
|
const active = appliance === import_white_web_sdk.ApplianceNames.eraser;
|
|
1247
1214
|
const disabled = !writable;
|
|
1248
1215
|
const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToEraser;
|
|
1249
|
-
return /* @__PURE__ */
|
|
1216
|
+
return /* @__PURE__ */ import_react45.default.createElement(Button, {
|
|
1250
1217
|
content: renderToolTip(t("eraser"), shortcut),
|
|
1251
1218
|
onClick: changeAppliance,
|
|
1252
1219
|
active
|
|
1253
|
-
}, /* @__PURE__ */
|
|
1254
|
-
fallback: /* @__PURE__ */
|
|
1220
|
+
}, /* @__PURE__ */ import_react45.default.createElement(Icon, {
|
|
1221
|
+
fallback: /* @__PURE__ */ import_react45.default.createElement(Icons.Eraser, {
|
|
1255
1222
|
theme,
|
|
1256
1223
|
active
|
|
1257
1224
|
}),
|
|
@@ -1261,13 +1228,13 @@ function EraserButton() {
|
|
|
1261
1228
|
}
|
|
1262
1229
|
function CleanButton() {
|
|
1263
1230
|
const { t } = useTranslation();
|
|
1264
|
-
const { theme, icons, writable, cleanCurrentScene } = (0,
|
|
1231
|
+
const { theme, icons, writable, cleanCurrentScene } = (0, import_react45.useContext)(ToolbarContext);
|
|
1265
1232
|
const disabled = !writable;
|
|
1266
|
-
return /* @__PURE__ */
|
|
1233
|
+
return /* @__PURE__ */ import_react45.default.createElement(Button, {
|
|
1267
1234
|
content: t("clean"),
|
|
1268
1235
|
onClick: cleanCurrentScene
|
|
1269
|
-
}, /* @__PURE__ */
|
|
1270
|
-
fallback: /* @__PURE__ */
|
|
1236
|
+
}, /* @__PURE__ */ import_react45.default.createElement(Icon, {
|
|
1237
|
+
fallback: /* @__PURE__ */ import_react45.default.createElement(Icons.Clean, {
|
|
1271
1238
|
theme
|
|
1272
1239
|
}),
|
|
1273
1240
|
src: disabled ? icons == null ? void 0 : icons.cleanIconDisable : icons == null ? void 0 : icons.cleanIcon,
|
|
@@ -1276,8 +1243,8 @@ function CleanButton() {
|
|
|
1276
1243
|
}
|
|
1277
1244
|
|
|
1278
1245
|
// src/components/Toolbar/components/AppsButton.tsx
|
|
1279
|
-
var
|
|
1280
|
-
var
|
|
1246
|
+
var import_react46 = __toESM(require("@tippyjs/react"));
|
|
1247
|
+
var import_react47 = __toESM(require("react"));
|
|
1281
1248
|
|
|
1282
1249
|
// src/components/Toolbar/components/assets/vscode.png
|
|
1283
1250
|
var vscode_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAABnxJREFUWMPtWWlsVFUUPve+ZTY6HUoLpS1tEUrLVooKLgWVTQGVfRWhiUpAECGGEgOJShRj9I9EjSEQIMhSBIKBQoBgQCMEKEuo1LKV7rRl2pm201nf3Hv8MdNKO/NmBqWFGE7Oj8nkzb3f+8653zn3DEFEePyMwmNpT2D9D2CJnb1BpcWx/WKdTYoZ01f/SpKoE0kkvyKdehKL7jat++WapalZlOS4wS+aNGRiMp2QLHWTySODde5Ow/r8YpvDCZxRgj2HjCKEAqHdZJiYIk5KEYwa2tWwjhXVfn3iptujACIwhQLEZWYT0oqDUINExvcRJqeKsTraRbDyCiq/P3Wbcw4AiByYVwCMzRz1Dyz/5kQn0rHJ4tsDRG37nHvIKY+Im34v3XGuDDm2fuODhoiAAU/bPSz/Dnq8fFmmprMEQmH8q+M3t54t9TLOEH3OETkCB1ALCnJ+slzpLIFwetj6I8Uni+ugfVYQBB9TIZLFw7FTYDU7ldwDf14st0Dg5oiICIAMgaiGPmI5vWF2SQJ5KkYTFpPZ5vpwb+H12iYIRkgrWxDiZGEkKs8Rfzhv3n7FQgnJyeq+ZESsJKimYIXFsXzXlSqrXe0B3prqXJ2tgBgGpLzC8IvTdVsKGrwK83i8mwsaVuRXm+1K0OWKa5rf2XGp3NLSluCBzgGMBu26qcM1oogIQR3Cwvr8dO3P1xoZIgPCgDDEP8ptc/ZWnKvsyMf50obFOy/fa3KELCJkcKJp9+LscYMTfaypeRhYR240ImfY3u7ZXEsPVW0qqGetdB+7VvNB3lVri4txVHMEMm9E8racEUkxegTg4BOLoB4O1ursXoTQQJ49infjWfPy/Kp6u5J3vnTNvit2hxPVLUqn+WrG0LWTMrSS0Hbc1KjiEE4g5g+LkQW6/lStx8sChe90ie2Nantz1U2ueECQgApAKZAOqUzS46O+nZPVN9bQQQVUpSsSgZg5xGTS0dzjdXaXO3ABq5NDj77YWAPORqAiUBGoQNqQETrr2T5rJ6YbNB1X5qAKC8MG0Wfj+hk3T02MNmgYQjAnPDoBoxM483KmcKYwzhiCTitvmD5kw9TBgZh8sEJ4pE3zM4n6n2b0iTeqyinqTBjXD4Gi4kHG+sXq894dOevpJNUwqahD0OCGKtXpcdq8OSmpMVpVTRJkHteP64zTshL2L83O6G0MsZoK8X5/wJrIFDCXoNIdZJ2aNIEpiZu6Iw3TjISoPwgPwtb12uaZP565VduE5hLusnGE4M7xwDXrtF13iu85Q2F6KEEsKLPM23zhbpOLUYkTEevLuN3qa1CCGOe3zM4Ze8rzCi2qHUzkGq8G63hR7YJtF+/ZnAwIJwKnIicSWiq5zRxicZvLs/pYde7xGruHBUQaWAiPhK28CxVLdl5usbv8QUJAQjkVUJCwqcbotSKQEAHdfbVhys7SEos7IIjqFsBYR1jbzpSu3l/oVrztmSBABE7lcZmpv60Y+eWrCYIg+LvhYMiK6hyTd5QeLGqMMIbh28DP8os8jAVSKIli7oQBK8b2FyjJGa4zaYWVR+863YpaajY63O8frrxQ7fhkTLxOom0C8S9nENOzkgBIu9dHiI/W57333KrxaQL1F5mpA007ZiZH6WTVaCIwxrdcrJ+ys6TM6ob/eBK/mZW58PkU9PW6AEjIy+k9T6waPTottsOTL6V2Ozg/tZdRGwIZ53i5qmXClr+OFJlDXuMiuL5yxA1Hizf+elugZOXY/rmvpYdomu9Y3DP3lJZZXSEuXOB1U2SJaUMJISrSgYULoyO6VRdWN8qCkBEfFTYPamzKnL1lhTWO4BKEjCgewpWEAcMIJWqX3qJF0RHJaWaiKRJMANA7Sjq0oG92ahQCCZo3vr4UH1apjty668R9c1PeHGhiAB3KOSJy7t9YFVbnjd0MsrBterJJK2y9VH//67d95AhqNzKJduaQUhbId68nrhnVixDappX+e75/OhJU4smMNE3nDikpIevH9Y7RCx+fuMsY950pisB9oDrKANVLdPYA6aMsuStmpytf6BmrF5cdrnZ7FETgiAQA4b4oEmqUydw0MWeQHG8Qum6ku2BYTA+d+Na+ima7AzgIiIgEAIBSk4YszJAWDZRjtF0+pPSPTytapu0qMVuaJYEkpA/rqSc5GeL8DNmkoY9y0gwAN+tdn542W6HbvEGG2WmSQXoMBuBP/lx5Auuxs78BCY9M0wbXBY0AAAAASUVORK5CYII=";
|
|
@@ -1290,21 +1257,21 @@ var countdown_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyC
|
|
|
1290
1257
|
|
|
1291
1258
|
// src/components/Toolbar/components/AppsButton.tsx
|
|
1292
1259
|
function AppsButton({ content, onClick }) {
|
|
1293
|
-
const { theme, icons, writable } = (0,
|
|
1260
|
+
const { theme, icons, writable } = (0, import_react47.useContext)(ToolbarContext);
|
|
1294
1261
|
const disabled = !writable;
|
|
1295
|
-
const button = /* @__PURE__ */
|
|
1262
|
+
const button = /* @__PURE__ */ import_react47.default.createElement(Button, {
|
|
1296
1263
|
content: "Apps",
|
|
1297
1264
|
onClick
|
|
1298
|
-
}, /* @__PURE__ */
|
|
1299
|
-
fallback: /* @__PURE__ */
|
|
1265
|
+
}, /* @__PURE__ */ import_react47.default.createElement(Icon, {
|
|
1266
|
+
fallback: /* @__PURE__ */ import_react47.default.createElement(Icons.Apps, {
|
|
1300
1267
|
theme
|
|
1301
1268
|
}),
|
|
1302
1269
|
src: disabled ? icons == null ? void 0 : icons.appsIconDisable : icons == null ? void 0 : icons.appsIcon,
|
|
1303
1270
|
alt: "[apps]"
|
|
1304
1271
|
}));
|
|
1305
|
-
return content === false ? button : /* @__PURE__ */
|
|
1272
|
+
return content === false ? button : /* @__PURE__ */ import_react47.default.createElement("span", {
|
|
1306
1273
|
className: "fastboard-toolbar-btn-interactive"
|
|
1307
|
-
}, /* @__PURE__ */
|
|
1274
|
+
}, /* @__PURE__ */ import_react47.default.createElement(import_react46.default, {
|
|
1308
1275
|
className: "fastboard-tip",
|
|
1309
1276
|
content: renderAppsButtonContent(content),
|
|
1310
1277
|
theme,
|
|
@@ -1316,25 +1283,25 @@ function AppsButton({ content, onClick }) {
|
|
|
1316
1283
|
}, button));
|
|
1317
1284
|
}
|
|
1318
1285
|
function renderAppsButtonContent(content) {
|
|
1319
|
-
return /* @__PURE__ */
|
|
1286
|
+
return /* @__PURE__ */ import_react47.default.createElement("div", {
|
|
1320
1287
|
className: "fastboard-toolbar-panel apps"
|
|
1321
|
-
}, /* @__PURE__ */
|
|
1288
|
+
}, /* @__PURE__ */ import_react47.default.createElement("div", {
|
|
1322
1289
|
className: "fastboard-toolbar-apps"
|
|
1323
|
-
}, content || /* @__PURE__ */
|
|
1290
|
+
}, content || /* @__PURE__ */ import_react47.default.createElement(DefaultApps, null)));
|
|
1324
1291
|
}
|
|
1325
1292
|
function DefaultApps() {
|
|
1326
1293
|
const app = useFastboardApp();
|
|
1327
|
-
return /* @__PURE__ */
|
|
1294
|
+
return /* @__PURE__ */ import_react47.default.createElement(import_react47.default.Fragment, null, /* @__PURE__ */ import_react47.default.createElement(AppIcon, {
|
|
1328
1295
|
title: "Code Editor",
|
|
1329
1296
|
src: vscode_default,
|
|
1330
1297
|
alt: "[code editor]",
|
|
1331
1298
|
onClick: app == null ? void 0 : app.insertCodeEditor.bind(app)
|
|
1332
|
-
}), /* @__PURE__ */
|
|
1299
|
+
}), /* @__PURE__ */ import_react47.default.createElement(AppIcon, {
|
|
1333
1300
|
title: "GeoGebra",
|
|
1334
1301
|
src: geogebra_default,
|
|
1335
1302
|
alt: "[geogebra]",
|
|
1336
1303
|
onClick: app == null ? void 0 : app.insertGeoGebra.bind(app)
|
|
1337
|
-
}), /* @__PURE__ */
|
|
1304
|
+
}), /* @__PURE__ */ import_react47.default.createElement(AppIcon, {
|
|
1338
1305
|
title: "Countdown",
|
|
1339
1306
|
src: countdown_default,
|
|
1340
1307
|
alt: "[countdown]",
|
|
@@ -1342,29 +1309,29 @@ function DefaultApps() {
|
|
|
1342
1309
|
}));
|
|
1343
1310
|
}
|
|
1344
1311
|
function AppIcon({ title, src, alt, onClick }) {
|
|
1345
|
-
return /* @__PURE__ */
|
|
1312
|
+
return /* @__PURE__ */ import_react47.default.createElement("span", {
|
|
1346
1313
|
className: "fastboard-toolbar-app-icon"
|
|
1347
|
-
}, /* @__PURE__ */
|
|
1314
|
+
}, /* @__PURE__ */ import_react47.default.createElement(Button, {
|
|
1348
1315
|
placement: "top",
|
|
1349
1316
|
content: title,
|
|
1350
1317
|
onClick
|
|
1351
|
-
}, /* @__PURE__ */
|
|
1318
|
+
}, /* @__PURE__ */ import_react47.default.createElement("img", {
|
|
1352
1319
|
src,
|
|
1353
1320
|
alt,
|
|
1354
1321
|
title
|
|
1355
|
-
})), /* @__PURE__ */
|
|
1322
|
+
})), /* @__PURE__ */ import_react47.default.createElement("span", {
|
|
1356
1323
|
className: "fastboard-toolbar-app-icon-text"
|
|
1357
1324
|
}, title));
|
|
1358
1325
|
}
|
|
1359
1326
|
|
|
1360
1327
|
// src/components/Toolbar/components/PencilButton.tsx
|
|
1361
|
-
var
|
|
1362
|
-
var
|
|
1328
|
+
var import_react51 = __toESM(require("@tippyjs/react"));
|
|
1329
|
+
var import_react52 = __toESM(require("react"));
|
|
1363
1330
|
var import_white_web_sdk2 = require("white-web-sdk");
|
|
1364
1331
|
|
|
1365
1332
|
// src/components/Toolbar/components/ColorBox.tsx
|
|
1366
1333
|
var import_clsx5 = __toESM(require("clsx"));
|
|
1367
|
-
var
|
|
1334
|
+
var import_react48 = __toESM(require("react"));
|
|
1368
1335
|
var colors = {
|
|
1369
1336
|
"#E02020": [224, 32, 32],
|
|
1370
1337
|
"#F7B500": [247, 181, 0],
|
|
@@ -1377,20 +1344,20 @@ var colors = {
|
|
|
1377
1344
|
};
|
|
1378
1345
|
var colorKeys = Object.keys(colors);
|
|
1379
1346
|
function ColorBox() {
|
|
1380
|
-
const { theme, memberState, setStrokeColor, writable } = (0,
|
|
1347
|
+
const { theme, memberState, setStrokeColor, writable } = (0, import_react48.useContext)(ToolbarContext);
|
|
1381
1348
|
const strokeColor = memberState == null ? void 0 : memberState.strokeColor;
|
|
1382
1349
|
const disabled = !writable;
|
|
1383
|
-
return /* @__PURE__ */
|
|
1350
|
+
return /* @__PURE__ */ import_react48.default.createElement("div", {
|
|
1384
1351
|
className: (0, import_clsx5.default)("fastboard-toolbar-color-box", theme)
|
|
1385
|
-
}, colorKeys.map((key) => /* @__PURE__ */
|
|
1352
|
+
}, colorKeys.map((key) => /* @__PURE__ */ import_react48.default.createElement("div", {
|
|
1386
1353
|
key,
|
|
1387
1354
|
className: (0, import_clsx5.default)("fastboard-toolbar-color-item", theme),
|
|
1388
1355
|
onClick: () => setStrokeColor(colors[key])
|
|
1389
|
-
}, /* @__PURE__ */
|
|
1356
|
+
}, /* @__PURE__ */ import_react48.default.createElement("div", {
|
|
1390
1357
|
className: (0, import_clsx5.default)("fastboard-toolbar-color-border", theme, {
|
|
1391
1358
|
active: strokeColor && isEqualArray(strokeColor, colors[key])
|
|
1392
1359
|
})
|
|
1393
|
-
}, /* @__PURE__ */
|
|
1360
|
+
}, /* @__PURE__ */ import_react48.default.createElement("button", {
|
|
1394
1361
|
className: (0, import_clsx5.default)("fastboard-toolbar-color-btn"),
|
|
1395
1362
|
style: { background: key },
|
|
1396
1363
|
disabled,
|
|
@@ -1403,10 +1370,10 @@ function ColorBox() {
|
|
|
1403
1370
|
|
|
1404
1371
|
// src/components/Toolbar/components/CutLine.tsx
|
|
1405
1372
|
var import_clsx6 = __toESM(require("clsx"));
|
|
1406
|
-
var
|
|
1373
|
+
var import_react49 = __toESM(require("react"));
|
|
1407
1374
|
function CutLine() {
|
|
1408
|
-
const { theme } = (0,
|
|
1409
|
-
return /* @__PURE__ */
|
|
1375
|
+
const { theme } = (0, import_react49.useContext)(ToolbarContext);
|
|
1376
|
+
return /* @__PURE__ */ import_react49.default.createElement("span", {
|
|
1410
1377
|
className: (0, import_clsx6.default)(`${name4}-cut-line`, theme)
|
|
1411
1378
|
});
|
|
1412
1379
|
}
|
|
@@ -1414,12 +1381,12 @@ function CutLine() {
|
|
|
1414
1381
|
// src/components/Toolbar/components/Slider.tsx
|
|
1415
1382
|
var import_clsx7 = __toESM(require("clsx"));
|
|
1416
1383
|
var import_rc_slider = __toESM(require("rc-slider"));
|
|
1417
|
-
var
|
|
1384
|
+
var import_react50 = __toESM(require("react"));
|
|
1418
1385
|
function Slider() {
|
|
1419
|
-
const { theme, writable, memberState, setStrokeWidth } = (0,
|
|
1386
|
+
const { theme, writable, memberState, setStrokeWidth } = (0, import_react50.useContext)(ToolbarContext);
|
|
1420
1387
|
const { activeColor } = themes[theme];
|
|
1421
1388
|
const strokeWidth = (memberState == null ? void 0 : memberState.strokeWidth) || 0;
|
|
1422
|
-
return /* @__PURE__ */
|
|
1389
|
+
return /* @__PURE__ */ import_react50.default.createElement(import_rc_slider.default, {
|
|
1423
1390
|
disabled: !writable,
|
|
1424
1391
|
className: (0, import_clsx7.default)("fastboard-toolbar-slider", theme),
|
|
1425
1392
|
trackStyle: { background: activeColor },
|
|
@@ -1435,17 +1402,17 @@ function Slider() {
|
|
|
1435
1402
|
function PencilButton() {
|
|
1436
1403
|
const app = useFastboardApp();
|
|
1437
1404
|
const { t } = useTranslation();
|
|
1438
|
-
const { theme, icons, writable, setAppliance, memberState } = (0,
|
|
1439
|
-
const changeAppliance = (0,
|
|
1405
|
+
const { theme, icons, writable, setAppliance, memberState } = (0, import_react52.useContext)(ToolbarContext);
|
|
1406
|
+
const changeAppliance = (0, import_react52.useCallback)(() => {
|
|
1440
1407
|
setAppliance(import_white_web_sdk2.ApplianceNames.pencil);
|
|
1441
1408
|
}, [setAppliance]);
|
|
1442
1409
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1443
1410
|
const active = appliance === import_white_web_sdk2.ApplianceNames.pencil;
|
|
1444
1411
|
const disabled = !writable;
|
|
1445
1412
|
const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToPencil;
|
|
1446
|
-
return /* @__PURE__ */
|
|
1413
|
+
return /* @__PURE__ */ import_react52.default.createElement("span", {
|
|
1447
1414
|
className: "fastboard-toolbar-btn-interactive"
|
|
1448
|
-
}, /* @__PURE__ */
|
|
1415
|
+
}, /* @__PURE__ */ import_react52.default.createElement(import_react51.default, {
|
|
1449
1416
|
className: "fastboard-tip",
|
|
1450
1417
|
content: renderPencilButtonContent(),
|
|
1451
1418
|
theme,
|
|
@@ -1454,30 +1421,30 @@ function PencilButton() {
|
|
|
1454
1421
|
offset: RightOffset,
|
|
1455
1422
|
arrow: false,
|
|
1456
1423
|
interactive: true
|
|
1457
|
-
}, /* @__PURE__ */
|
|
1424
|
+
}, /* @__PURE__ */ import_react52.default.createElement(Button, {
|
|
1458
1425
|
content: renderToolTip(t("pencil"), shortcut),
|
|
1459
1426
|
active,
|
|
1460
1427
|
onClick: changeAppliance
|
|
1461
|
-
}, /* @__PURE__ */
|
|
1462
|
-
fallback: /* @__PURE__ */
|
|
1428
|
+
}, /* @__PURE__ */ import_react52.default.createElement(Icon, {
|
|
1429
|
+
fallback: /* @__PURE__ */ import_react52.default.createElement(Icons.Pencil, {
|
|
1463
1430
|
theme,
|
|
1464
1431
|
active
|
|
1465
1432
|
}),
|
|
1466
1433
|
src: disabled ? icons == null ? void 0 : icons.pencilIconDisable : icons == null ? void 0 : icons.pencilIcon,
|
|
1467
1434
|
alt: "[pencil]"
|
|
1468
|
-
}), /* @__PURE__ */
|
|
1435
|
+
}), /* @__PURE__ */ import_react52.default.createElement("span", {
|
|
1469
1436
|
className: "fastboard-toolbar-triangle"
|
|
1470
1437
|
}))));
|
|
1471
1438
|
}
|
|
1472
1439
|
function renderPencilButtonContent() {
|
|
1473
|
-
return /* @__PURE__ */
|
|
1440
|
+
return /* @__PURE__ */ import_react52.default.createElement("div", {
|
|
1474
1441
|
className: "fastboard-toolbar-panel pencil"
|
|
1475
|
-
}, /* @__PURE__ */
|
|
1442
|
+
}, /* @__PURE__ */ import_react52.default.createElement(Slider, null), /* @__PURE__ */ import_react52.default.createElement(CutLine, null), /* @__PURE__ */ import_react52.default.createElement(ColorBox, null));
|
|
1476
1443
|
}
|
|
1477
1444
|
|
|
1478
1445
|
// src/components/Toolbar/components/ShapesButton.tsx
|
|
1479
|
-
var
|
|
1480
|
-
var
|
|
1446
|
+
var import_react53 = __toESM(require("@tippyjs/react"));
|
|
1447
|
+
var import_react54 = __toESM(require("react"));
|
|
1481
1448
|
var import_white_web_sdk4 = require("white-web-sdk");
|
|
1482
1449
|
|
|
1483
1450
|
// src/components/Toolbar/const.ts
|
|
@@ -1513,15 +1480,15 @@ var MinHeight = ItemHeight * 2 - 4;
|
|
|
1513
1480
|
var ShapeTypes = /* @__PURE__ */ new Set([...ApplianceShapes, ...Shapes]);
|
|
1514
1481
|
function ShapesButton() {
|
|
1515
1482
|
const { t } = useTranslation();
|
|
1516
|
-
const { theme, memberState } = (0,
|
|
1483
|
+
const { theme, memberState } = (0, import_react54.useContext)(ToolbarContext);
|
|
1517
1484
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1518
1485
|
const shape = memberState == null ? void 0 : memberState.shapeType;
|
|
1519
1486
|
const key = appliance === import_white_web_sdk4.ApplianceNames.shape ? shape : appliance;
|
|
1520
1487
|
const active = ShapeTypes.has(key);
|
|
1521
1488
|
const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
|
|
1522
|
-
return /* @__PURE__ */
|
|
1489
|
+
return /* @__PURE__ */ import_react54.default.createElement("span", {
|
|
1523
1490
|
className: "fastboard-toolbar-btn-interactive"
|
|
1524
|
-
}, /* @__PURE__ */
|
|
1491
|
+
}, /* @__PURE__ */ import_react54.default.createElement(import_react53.default, {
|
|
1525
1492
|
className: "fastboard-tip",
|
|
1526
1493
|
content: renderShapesButtonContent(),
|
|
1527
1494
|
theme,
|
|
@@ -1530,31 +1497,31 @@ function ShapesButton() {
|
|
|
1530
1497
|
offset: RightOffset,
|
|
1531
1498
|
arrow: false,
|
|
1532
1499
|
interactive: true
|
|
1533
|
-
}, /* @__PURE__ */
|
|
1500
|
+
}, /* @__PURE__ */ import_react54.default.createElement(Button, {
|
|
1534
1501
|
content: t("shape"),
|
|
1535
1502
|
active
|
|
1536
|
-
}, /* @__PURE__ */
|
|
1503
|
+
}, /* @__PURE__ */ import_react54.default.createElement(CurrentIcon, {
|
|
1537
1504
|
theme,
|
|
1538
1505
|
active
|
|
1539
|
-
}), /* @__PURE__ */
|
|
1506
|
+
}), /* @__PURE__ */ import_react54.default.createElement("span", {
|
|
1540
1507
|
className: "fastboard-toolbar-triangle"
|
|
1541
1508
|
}))));
|
|
1542
1509
|
}
|
|
1543
1510
|
function renderShapesButtonContent() {
|
|
1544
|
-
return /* @__PURE__ */
|
|
1511
|
+
return /* @__PURE__ */ import_react54.default.createElement("div", {
|
|
1545
1512
|
className: "fastboard-toolbar-panel shapes"
|
|
1546
|
-
}, /* @__PURE__ */
|
|
1513
|
+
}, /* @__PURE__ */ import_react54.default.createElement(ShapesBox, null), /* @__PURE__ */ import_react54.default.createElement(CutLine, null), /* @__PURE__ */ import_react54.default.createElement(Slider, null), /* @__PURE__ */ import_react54.default.createElement(CutLine, null), /* @__PURE__ */ import_react54.default.createElement(ColorBox, null));
|
|
1547
1514
|
}
|
|
1548
1515
|
function ShapesBox() {
|
|
1549
1516
|
const { t } = useTranslation();
|
|
1550
|
-
return /* @__PURE__ */
|
|
1517
|
+
return /* @__PURE__ */ import_react54.default.createElement("div", {
|
|
1551
1518
|
className: "fastboard-toolbar-shapes"
|
|
1552
|
-
}, ApplianceShapes.map((Appliance) => /* @__PURE__ */
|
|
1519
|
+
}, ApplianceShapes.map((Appliance) => /* @__PURE__ */ import_react54.default.createElement(ApplianceShapeButton, {
|
|
1553
1520
|
key: Appliance,
|
|
1554
1521
|
content: t(Appliance),
|
|
1555
1522
|
Appliance,
|
|
1556
1523
|
Icon: ShapesMap[Appliance]
|
|
1557
|
-
})), Shapes.map((shape) => /* @__PURE__ */
|
|
1524
|
+
})), Shapes.map((shape) => /* @__PURE__ */ import_react54.default.createElement(ShapeShapeButton, {
|
|
1558
1525
|
key: shape,
|
|
1559
1526
|
content: t(shape),
|
|
1560
1527
|
shape,
|
|
@@ -1562,53 +1529,53 @@ function ShapesBox() {
|
|
|
1562
1529
|
})));
|
|
1563
1530
|
}
|
|
1564
1531
|
function ApplianceShapeButton({ content, Appliance, Icon: Icon2 }) {
|
|
1565
|
-
const { theme, writable, setAppliance, memberState } = (0,
|
|
1532
|
+
const { theme, writable, setAppliance, memberState } = (0, import_react54.useContext)(ToolbarContext);
|
|
1566
1533
|
const current = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1567
1534
|
const disabled = !writable;
|
|
1568
|
-
return /* @__PURE__ */
|
|
1535
|
+
return /* @__PURE__ */ import_react54.default.createElement(Button, {
|
|
1569
1536
|
content,
|
|
1570
1537
|
disabled,
|
|
1571
1538
|
placement: "top",
|
|
1572
1539
|
onClick: () => setAppliance(Appliance)
|
|
1573
|
-
}, /* @__PURE__ */
|
|
1540
|
+
}, /* @__PURE__ */ import_react54.default.createElement(Icon2, {
|
|
1574
1541
|
theme,
|
|
1575
1542
|
active: current === Appliance
|
|
1576
1543
|
}));
|
|
1577
1544
|
}
|
|
1578
1545
|
function ShapeShapeButton({ content, shape, Icon: Icon2 }) {
|
|
1579
|
-
const { theme, writable, setAppliance, memberState } = (0,
|
|
1546
|
+
const { theme, writable, setAppliance, memberState } = (0, import_react54.useContext)(ToolbarContext);
|
|
1580
1547
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1581
1548
|
const current = appliance === import_white_web_sdk4.ApplianceNames.shape && (memberState == null ? void 0 : memberState.shapeType);
|
|
1582
1549
|
const disabled = !writable;
|
|
1583
|
-
return /* @__PURE__ */
|
|
1550
|
+
return /* @__PURE__ */ import_react54.default.createElement(Button, {
|
|
1584
1551
|
content,
|
|
1585
1552
|
disabled,
|
|
1586
1553
|
placement: "top",
|
|
1587
1554
|
onClick: () => setAppliance(import_white_web_sdk4.ApplianceNames.shape, shape)
|
|
1588
|
-
}, /* @__PURE__ */
|
|
1555
|
+
}, /* @__PURE__ */ import_react54.default.createElement(Icon2, {
|
|
1589
1556
|
theme,
|
|
1590
1557
|
active: current === shape
|
|
1591
1558
|
}));
|
|
1592
1559
|
}
|
|
1593
1560
|
|
|
1594
1561
|
// src/components/Toolbar/components/TextButton.tsx
|
|
1595
|
-
var
|
|
1596
|
-
var
|
|
1562
|
+
var import_react55 = __toESM(require("@tippyjs/react"));
|
|
1563
|
+
var import_react56 = __toESM(require("react"));
|
|
1597
1564
|
var import_white_web_sdk5 = require("white-web-sdk");
|
|
1598
1565
|
function TextButton() {
|
|
1599
1566
|
const app = useFastboardApp();
|
|
1600
1567
|
const { t } = useTranslation();
|
|
1601
|
-
const { theme, icons, writable, setAppliance, memberState } = (0,
|
|
1602
|
-
const changeAppliance = (0,
|
|
1568
|
+
const { theme, icons, writable, setAppliance, memberState } = (0, import_react56.useContext)(ToolbarContext);
|
|
1569
|
+
const changeAppliance = (0, import_react56.useCallback)(() => {
|
|
1603
1570
|
setAppliance(import_white_web_sdk5.ApplianceNames.text);
|
|
1604
1571
|
}, [setAppliance]);
|
|
1605
1572
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1606
1573
|
const active = appliance === import_white_web_sdk5.ApplianceNames.text;
|
|
1607
1574
|
const disabled = !writable;
|
|
1608
1575
|
const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToText;
|
|
1609
|
-
return /* @__PURE__ */
|
|
1576
|
+
return /* @__PURE__ */ import_react56.default.createElement("span", {
|
|
1610
1577
|
className: "fastboard-toolbar-btn-interactive"
|
|
1611
|
-
}, /* @__PURE__ */
|
|
1578
|
+
}, /* @__PURE__ */ import_react56.default.createElement(import_react55.default, {
|
|
1612
1579
|
className: "fastboard-tip",
|
|
1613
1580
|
content: renderTextButtonContent(),
|
|
1614
1581
|
theme,
|
|
@@ -1617,53 +1584,53 @@ function TextButton() {
|
|
|
1617
1584
|
offset: RightOffset,
|
|
1618
1585
|
arrow: false,
|
|
1619
1586
|
interactive: true
|
|
1620
|
-
}, /* @__PURE__ */
|
|
1587
|
+
}, /* @__PURE__ */ import_react56.default.createElement(Button, {
|
|
1621
1588
|
content: renderToolTip(t("text"), shortcut),
|
|
1622
1589
|
active,
|
|
1623
1590
|
onClick: changeAppliance
|
|
1624
|
-
}, /* @__PURE__ */
|
|
1625
|
-
fallback: /* @__PURE__ */
|
|
1591
|
+
}, /* @__PURE__ */ import_react56.default.createElement(Icon, {
|
|
1592
|
+
fallback: /* @__PURE__ */ import_react56.default.createElement(Icons.Text, {
|
|
1626
1593
|
theme,
|
|
1627
1594
|
active
|
|
1628
1595
|
}),
|
|
1629
1596
|
src: disabled ? icons == null ? void 0 : icons.textIconDisable : icons == null ? void 0 : icons.textIcon,
|
|
1630
1597
|
alt: "[text]"
|
|
1631
|
-
}), /* @__PURE__ */
|
|
1598
|
+
}), /* @__PURE__ */ import_react56.default.createElement("span", {
|
|
1632
1599
|
className: "fastboard-toolbar-triangle"
|
|
1633
1600
|
}))));
|
|
1634
1601
|
}
|
|
1635
1602
|
function renderTextButtonContent() {
|
|
1636
|
-
return /* @__PURE__ */
|
|
1603
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", {
|
|
1637
1604
|
className: "fastboard-toolbar-panel text"
|
|
1638
|
-
}, /* @__PURE__ */
|
|
1605
|
+
}, /* @__PURE__ */ import_react56.default.createElement(ColorBox, null));
|
|
1639
1606
|
}
|
|
1640
1607
|
|
|
1641
1608
|
// src/components/Toolbar/components/UpDownButtons.tsx
|
|
1642
|
-
var
|
|
1609
|
+
var import_react57 = __toESM(require("react"));
|
|
1643
1610
|
function UpButton({ disabled, scrollTo }) {
|
|
1644
|
-
const { theme, icons } = (0,
|
|
1645
|
-
const scrollUp = (0,
|
|
1646
|
-
return /* @__PURE__ */
|
|
1611
|
+
const { theme, icons } = (0, import_react57.useContext)(ToolbarContext);
|
|
1612
|
+
const scrollUp = (0, import_react57.useCallback)(() => scrollTo(-ItemHeight), [scrollTo]);
|
|
1613
|
+
return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(Button, {
|
|
1647
1614
|
content: "Up",
|
|
1648
1615
|
disabled,
|
|
1649
1616
|
onClick: scrollUp
|
|
1650
|
-
}, /* @__PURE__ */
|
|
1651
|
-
fallback: /* @__PURE__ */
|
|
1617
|
+
}, /* @__PURE__ */ import_react57.default.createElement(Icon, {
|
|
1618
|
+
fallback: /* @__PURE__ */ import_react57.default.createElement(Icons.Up, {
|
|
1652
1619
|
theme
|
|
1653
1620
|
}),
|
|
1654
1621
|
src: disabled ? icons == null ? void 0 : icons.upIconDisable : icons == null ? void 0 : icons.upIcon,
|
|
1655
1622
|
alt: "[up]"
|
|
1656
|
-
})), /* @__PURE__ */
|
|
1623
|
+
})), /* @__PURE__ */ import_react57.default.createElement(CutLine, null));
|
|
1657
1624
|
}
|
|
1658
1625
|
function DownButton({ disabled, scrollTo }) {
|
|
1659
|
-
const { theme, icons } = (0,
|
|
1660
|
-
const scrollDown = (0,
|
|
1661
|
-
return /* @__PURE__ */
|
|
1626
|
+
const { theme, icons } = (0, import_react57.useContext)(ToolbarContext);
|
|
1627
|
+
const scrollDown = (0, import_react57.useCallback)(() => scrollTo(ItemHeight), [scrollTo]);
|
|
1628
|
+
return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(CutLine, null), /* @__PURE__ */ import_react57.default.createElement(Button, {
|
|
1662
1629
|
content: "Down",
|
|
1663
1630
|
disabled,
|
|
1664
1631
|
onClick: scrollDown
|
|
1665
|
-
}, /* @__PURE__ */
|
|
1666
|
-
fallback: /* @__PURE__ */
|
|
1632
|
+
}, /* @__PURE__ */ import_react57.default.createElement(Icon, {
|
|
1633
|
+
fallback: /* @__PURE__ */ import_react57.default.createElement(Icons.Down, {
|
|
1667
1634
|
theme
|
|
1668
1635
|
}),
|
|
1669
1636
|
src: disabled ? icons == null ? void 0 : icons.downIconDisable : icons == null ? void 0 : icons.downIcon,
|
|
@@ -1671,25 +1638,30 @@ function DownButton({ disabled, scrollTo }) {
|
|
|
1671
1638
|
})));
|
|
1672
1639
|
}
|
|
1673
1640
|
|
|
1641
|
+
// src/components/Toolbar/components/assets/collapsed.png
|
|
1642
|
+
var collapsed_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA49JREFUeF7tnLFv00AUh5/TFVYkxIDEnKFjJ/gb2CIqpUPagYXNEV2LRGk7tAiRSA0bWcC0QzowwQKuVDnCLE2KTZCMSNLkHCLalCpBkdFVMTKh8TXO+c4S16XDSb0vv/vyfE3fqwQR+ZIA4AoAdADgJ08mSVXVV9ls9nE+nzcBAAFAnweQ1Gg06gihrmEYubm5OeX4+LgBAD9Yw0iO49S63S7U6/VYq9UyCoXC2tLS0kcAwEA9VkBnIO5m7XYbJwTVanVLluWcruvfAOA7ADhhA/0Fgjfr9/tweHgYs20baZq2sbCw8HaQTqgy/wPivvKTkxN8XFPNZvMdC5lHgmAgx3EAISQhhHqGYWyGKbMviJsOC5kvBOIjcxUAWjRkHgtkSGZb07R1WjKPDeIj82cAaAatzIFBhmU2TTOXTCZfBq3ME4HQlJkKCA2ZqYJMIjN1kKAyhwYyrsyhgpwns6IoyysrK/rgQfrnqc4ExCtzrVb7tbe39yCVSr0GAFyZz2CYguANT09PwbIsaWdn5146nX4zuO+wB8EwnU5HqlQqdiKRuHNwcFDC1Zh5Iu4xWZYVU1V1eXZ29jlOhRvI0dGRVC6XP8zMzNwFgK/cQHq9HpTLZXt6evo2AFS4geDbX6lUisXj8VsA8IkbCHZlf39/Kh6P3xQg7jtHJDL826JIRCRC+gRBOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6kjojjxaXbt0Py3jP1DCtes3ruLvVetLnenRYIgnT7OX3Y25gLgQ3gSYg3ghuIEMQ3ABOQ+COcgoCKYgfhD/Jwh+1ZE4GrdKRkJWPxhulTUSBe28ZLglMgzDHcR9N3G/BpDuHH7r4qoY+lUx6PGIoxFHQ3JHOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6ohwxM+RyLR/RaYhLjItgpFomoxEG2kkGmvxRBPXVmPPWIypKMpD5s3X3kEh0zSfJZPJF6NmK0JrI3VHpxBCaiaTWc/n877TJtRBPMNkdrFY3Jifn8ed3njUzneYjCqIZ7xue3FxMadpGh6vu9BEEhUQr4yFQmE1yMDhRCDjyEi6JAUGGVdG6iBBZaQK4pVRluVNXdfZjsfRkHGiRGjKGBjEI+P7TCazQaqMpI1I635jtmNVRtJGpPVRg8fbtGW8EAiL6VUiyGA4vUd6TJN+0KTr0u7u7hYLGUmg0fkHBiRSVuu/AWpfZNft9vFDAAAAAElFTkSuQmCC";
|
|
1643
|
+
|
|
1674
1644
|
// src/components/Toolbar/Content.tsx
|
|
1675
|
-
|
|
1676
|
-
const
|
|
1677
|
-
const
|
|
1678
|
-
const [
|
|
1645
|
+
function Content({ onCollapse }) {
|
|
1646
|
+
const { theme, icons, writable } = (0, import_react58.useContext)(ToolbarContext);
|
|
1647
|
+
const ref = (0, import_react58.useRef)(null);
|
|
1648
|
+
const [scrollTop, setScrollTop] = (0, import_react58.useState)(0);
|
|
1649
|
+
const [parentHeight, setParentHeight] = (0, import_react58.useState)(0);
|
|
1650
|
+
const disabled = !writable;
|
|
1679
1651
|
const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
|
|
1680
1652
|
const sectionHeight = clamp(parentHeight - 48 * (needScroll ? 3 : 1), MinHeight, MaxHeight);
|
|
1681
1653
|
const scrollBuffer = Math.max(parentHeight - sectionHeight - 1, 0);
|
|
1682
1654
|
const disableScrollUp = scrollTop === 0;
|
|
1683
1655
|
const disableScrollDown = scrollTop === scrollBuffer;
|
|
1684
|
-
const scrollTo = (0,
|
|
1656
|
+
const scrollTo = (0, import_react58.useCallback)((height) => {
|
|
1685
1657
|
setScrollTop(clamp(scrollTop + height, 0, scrollBuffer));
|
|
1686
1658
|
}, [scrollBuffer, scrollTop]);
|
|
1687
|
-
(0,
|
|
1659
|
+
(0, import_react58.useEffect)(() => {
|
|
1688
1660
|
if (ref.current) {
|
|
1689
1661
|
ref.current.scrollTop = scrollTop;
|
|
1690
1662
|
}
|
|
1691
1663
|
}, [scrollTop]);
|
|
1692
|
-
(0,
|
|
1664
|
+
(0, import_react58.useEffect)(() => {
|
|
1693
1665
|
var _a, _b;
|
|
1694
1666
|
const container = (_b = (_a = ref.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
|
|
1695
1667
|
if (container) {
|
|
@@ -1702,95 +1674,82 @@ var Content = import_react59.default.memo(() => {
|
|
|
1702
1674
|
return () => resizeObserver.disconnect();
|
|
1703
1675
|
}
|
|
1704
1676
|
}, []);
|
|
1705
|
-
return /* @__PURE__ */
|
|
1677
|
+
return /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, needScroll && /* @__PURE__ */ import_react58.default.createElement(UpButton, {
|
|
1706
1678
|
scrollTo,
|
|
1707
1679
|
disabled: disableScrollUp
|
|
1708
|
-
}), /* @__PURE__ */
|
|
1680
|
+
}), /* @__PURE__ */ import_react58.default.createElement("div", {
|
|
1709
1681
|
ref,
|
|
1710
1682
|
className: (0, import_clsx8.default)(`${name4}-section`),
|
|
1711
1683
|
style: {
|
|
1712
1684
|
height: `${sectionHeight}px`,
|
|
1713
1685
|
overflow: needScroll ? "hidden" : "visible"
|
|
1714
1686
|
}
|
|
1715
|
-
}, /* @__PURE__ */
|
|
1687
|
+
}, /* @__PURE__ */ import_react58.default.createElement(ClickerButton, null), /* @__PURE__ */ import_react58.default.createElement(SelectorButton, null), /* @__PURE__ */ import_react58.default.createElement(PencilButton, null), /* @__PURE__ */ import_react58.default.createElement(TextButton, null), /* @__PURE__ */ import_react58.default.createElement(ShapesButton, null), /* @__PURE__ */ import_react58.default.createElement(EraserButton, null), /* @__PURE__ */ import_react58.default.createElement(CleanButton, null), /* @__PURE__ */ import_react58.default.createElement(AppsButton, null)), needScroll && /* @__PURE__ */ import_react58.default.createElement(DownButton, {
|
|
1716
1688
|
scrollTo,
|
|
1717
1689
|
disabled: disableScrollDown
|
|
1718
|
-
})
|
|
1719
|
-
|
|
1690
|
+
}), /* @__PURE__ */ import_react58.default.createElement("div", {
|
|
1691
|
+
className: (0, import_clsx8.default)("fastboard-toolbar-mask", theme),
|
|
1692
|
+
onClick: onCollapse
|
|
1693
|
+
}, /* @__PURE__ */ import_react58.default.createElement(Icon, {
|
|
1694
|
+
fallback: /* @__PURE__ */ import_react58.default.createElement("img", {
|
|
1695
|
+
draggable: false,
|
|
1696
|
+
className: (0, import_clsx8.default)(`${name4}-mask-btn`, theme),
|
|
1697
|
+
src: collapsed_default
|
|
1698
|
+
}),
|
|
1699
|
+
src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
|
|
1700
|
+
})));
|
|
1701
|
+
}
|
|
1720
1702
|
|
|
1721
1703
|
// src/components/Toolbar/Toolbar.tsx
|
|
1722
|
-
var ToolbarContext = (0,
|
|
1704
|
+
var ToolbarContext = (0, import_react59.createContext)(__spreadValues({
|
|
1723
1705
|
theme: "light"
|
|
1724
1706
|
}, EmptyToolbarHook));
|
|
1725
1707
|
var name4 = "fastboard-toolbar";
|
|
1726
|
-
|
|
1708
|
+
function Toolbar({ theme, icons }) {
|
|
1727
1709
|
theme = useTheme(theme);
|
|
1728
1710
|
const hook = useToolbar();
|
|
1729
|
-
const [expanded, setExpanded] = (0,
|
|
1730
|
-
const [
|
|
1731
|
-
const [onHover, setOnHover] = (0, import_react60.useState)(false);
|
|
1732
|
-
const [delayedOnHover, setDelayedOnHover] = (0, import_react60.useState)(false);
|
|
1733
|
-
const [pointEvents, setPointEvents] = (0, import_react60.useState)(true);
|
|
1711
|
+
const [expanded, setExpanded] = (0, import_react59.useState)(true);
|
|
1712
|
+
const [pointerEvents, setPointerEvents] = (0, import_react59.useState)("auto");
|
|
1734
1713
|
const disabled = !hook.writable;
|
|
1735
|
-
|
|
1736
|
-
setExpanded((e) => !e);
|
|
1737
|
-
}, []);
|
|
1738
|
-
(0, import_react60.useEffect)(() => {
|
|
1739
|
-
const timer = setTimeout(() => {
|
|
1740
|
-
setDelayedOnHover(onHover);
|
|
1741
|
-
}, 400);
|
|
1742
|
-
return () => clearTimeout(timer);
|
|
1743
|
-
}, [onHover]);
|
|
1744
|
-
return /* @__PURE__ */ import_react60.default.createElement(ToolbarContext.Provider, {
|
|
1714
|
+
return /* @__PURE__ */ import_react59.default.createElement(ToolbarContext.Provider, {
|
|
1745
1715
|
value: __spreadValues({ theme, icons }, hook)
|
|
1746
|
-
}, /* @__PURE__ */
|
|
1747
|
-
initial: { x: -100 },
|
|
1748
|
-
animate: { x: 0, transition: { duration: 0.5 } },
|
|
1716
|
+
}, /* @__PURE__ */ import_react59.default.createElement(import_framer_motion.AnimatePresence, null, expanded ? /* @__PURE__ */ import_react59.default.createElement(import_framer_motion.motion.div, {
|
|
1749
1717
|
key: "toolbar",
|
|
1750
|
-
ref: toolbarRef,
|
|
1751
1718
|
className: (0, import_clsx9.default)(name4, theme),
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
},
|
|
1755
|
-
onMouseLeave: () => setOnHover(false),
|
|
1719
|
+
initial: { x: -100 },
|
|
1720
|
+
animate: { x: 0, transition: { duration: 0.5 } },
|
|
1756
1721
|
exit: { x: -100, transition: { duration: 0.5 } },
|
|
1757
|
-
onAnimationStart: () =>
|
|
1758
|
-
onAnimationComplete: () =>
|
|
1759
|
-
style: { pointerEvents
|
|
1760
|
-
}, /* @__PURE__ */
|
|
1761
|
-
|
|
1762
|
-
}
|
|
1763
|
-
onClick: toggle
|
|
1764
|
-
}, /* @__PURE__ */ import_react60.default.createElement("img", {
|
|
1765
|
-
draggable: false,
|
|
1766
|
-
className: (0, import_clsx9.default)(`${name4}-mask-btn`, theme),
|
|
1767
|
-
src: collapsed_default
|
|
1768
|
-
})))) : /* @__PURE__ */ import_react60.default.createElement(import_framer_motion.motion.div, {
|
|
1722
|
+
onAnimationStart: () => setPointerEvents("none"),
|
|
1723
|
+
onAnimationComplete: () => setPointerEvents("auto"),
|
|
1724
|
+
style: { pointerEvents }
|
|
1725
|
+
}, /* @__PURE__ */ import_react59.default.createElement(Content, {
|
|
1726
|
+
onCollapse: () => setExpanded(false)
|
|
1727
|
+
})) : /* @__PURE__ */ import_react59.default.createElement(import_framer_motion.motion.div, {
|
|
1769
1728
|
className: (0, import_clsx9.default)(`${name4}-expand-btn`, theme),
|
|
1770
1729
|
key: "expand",
|
|
1771
|
-
onClick:
|
|
1730
|
+
onClick: () => setExpanded(true),
|
|
1772
1731
|
initial: { x: -100 },
|
|
1773
1732
|
animate: { x: 0, transition: { duration: 0.5 } }
|
|
1774
|
-
},
|
|
1775
|
-
fallback: /* @__PURE__ */
|
|
1733
|
+
}, /* @__PURE__ */ import_react59.default.createElement(Icon, {
|
|
1734
|
+
fallback: /* @__PURE__ */ import_react59.default.createElement("img", {
|
|
1776
1735
|
draggable: false,
|
|
1777
1736
|
src: expanded_default,
|
|
1778
1737
|
className: (0, import_clsx9.default)(`${name4}-mask-btn`, theme)
|
|
1779
1738
|
}),
|
|
1780
1739
|
src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
|
|
1781
1740
|
}))));
|
|
1782
|
-
}
|
|
1741
|
+
}
|
|
1783
1742
|
|
|
1784
1743
|
// src/components/PlayerControl/hooks.ts
|
|
1785
|
-
var
|
|
1744
|
+
var import_react60 = require("react");
|
|
1786
1745
|
var import_white_web_sdk6 = require("white-web-sdk");
|
|
1787
1746
|
var EMPTY_ARRAY = [];
|
|
1788
1747
|
function useForceUpdate2() {
|
|
1789
|
-
const [, forceUpdate_] = (0,
|
|
1790
|
-
return (0,
|
|
1748
|
+
const [, forceUpdate_] = (0, import_react60.useState)({});
|
|
1749
|
+
return (0, import_react60.useCallback)(() => forceUpdate_({}), EMPTY_ARRAY);
|
|
1791
1750
|
}
|
|
1792
1751
|
function usePlayerControl(player) {
|
|
1793
|
-
const togglePlay = (0,
|
|
1752
|
+
const togglePlay = (0, import_react60.useCallback)(() => {
|
|
1794
1753
|
if (player) {
|
|
1795
1754
|
switch (player.phase) {
|
|
1796
1755
|
case import_white_web_sdk6.PlayerPhase.WaitingFirstFrame:
|
|
@@ -1806,25 +1765,25 @@ function usePlayerControl(player) {
|
|
|
1806
1765
|
}
|
|
1807
1766
|
}
|
|
1808
1767
|
}, [player]);
|
|
1809
|
-
const seekToProgressTime = (0,
|
|
1768
|
+
const seekToProgressTime = (0, import_react60.useCallback)((time) => {
|
|
1810
1769
|
if (player) {
|
|
1811
1770
|
player.seekToProgressTime(time);
|
|
1812
1771
|
}
|
|
1813
1772
|
}, [player]);
|
|
1814
1773
|
const lastPlayer = useLastValue(player);
|
|
1815
1774
|
const forceUpdate = useForceUpdate2();
|
|
1816
|
-
const setSpeed = (0,
|
|
1775
|
+
const setSpeed = (0, import_react60.useCallback)((speed2) => {
|
|
1817
1776
|
if (player) {
|
|
1818
1777
|
player.playbackSpeed = speed2;
|
|
1819
1778
|
forceUpdate();
|
|
1820
1779
|
}
|
|
1821
1780
|
}, [forceUpdate, player]);
|
|
1822
|
-
(0,
|
|
1781
|
+
(0, import_react60.useEffect)(() => {
|
|
1823
1782
|
if (!lastPlayer && player) {
|
|
1824
1783
|
forceUpdate();
|
|
1825
1784
|
}
|
|
1826
1785
|
}, [forceUpdate, lastPlayer, player]);
|
|
1827
|
-
(0,
|
|
1786
|
+
(0, import_react60.useEffect)(() => {
|
|
1828
1787
|
if (player) {
|
|
1829
1788
|
player.callbacks.on("onPhaseChanged", forceUpdate);
|
|
1830
1789
|
player.callbacks.on("onProgressTimeChanged", forceUpdate);
|
|
@@ -1850,19 +1809,19 @@ function usePlayerControl(player) {
|
|
|
1850
1809
|
}
|
|
1851
1810
|
|
|
1852
1811
|
// src/components/PlayerControl/PlayerControl.tsx
|
|
1853
|
-
var
|
|
1812
|
+
var import_react67 = __toESM(require("@tippyjs/react"));
|
|
1854
1813
|
var import_clsx11 = __toESM(require("clsx"));
|
|
1855
1814
|
var import_rc_slider2 = __toESM(require("rc-slider"));
|
|
1856
|
-
var
|
|
1815
|
+
var import_react68 = __toESM(require("react"));
|
|
1857
1816
|
var import_white_web_sdk7 = require("white-web-sdk");
|
|
1858
1817
|
|
|
1859
1818
|
// src/components/PlayerControl/components/Button.tsx
|
|
1860
1819
|
var import_clsx10 = __toESM(require("clsx"));
|
|
1861
|
-
var
|
|
1862
|
-
var
|
|
1863
|
-
var Button2 = (0,
|
|
1820
|
+
var import_react61 = __toESM(require("react"));
|
|
1821
|
+
var import_react62 = __toESM(require("@tippyjs/react"));
|
|
1822
|
+
var Button2 = (0, import_react61.forwardRef)((props, ref) => {
|
|
1864
1823
|
const { theme, content, disabled, active, onClick, interactive, placement = "top", children } = props;
|
|
1865
|
-
return /* @__PURE__ */
|
|
1824
|
+
return /* @__PURE__ */ import_react61.default.createElement(import_react62.default, {
|
|
1866
1825
|
className: "fastboard-tip",
|
|
1867
1826
|
content,
|
|
1868
1827
|
interactive,
|
|
@@ -1872,7 +1831,7 @@ var Button2 = (0, import_react62.forwardRef)((props, ref) => {
|
|
|
1872
1831
|
offset: TopOffset,
|
|
1873
1832
|
delay: [1e3, 400],
|
|
1874
1833
|
duration: 300
|
|
1875
|
-
}, /* @__PURE__ */
|
|
1834
|
+
}, /* @__PURE__ */ import_react61.default.createElement("button", {
|
|
1876
1835
|
ref,
|
|
1877
1836
|
className: (0, import_clsx10.default)("fastboard-player-control-btn", theme, { active }),
|
|
1878
1837
|
onClick,
|
|
@@ -1881,39 +1840,39 @@ var Button2 = (0, import_react62.forwardRef)((props, ref) => {
|
|
|
1881
1840
|
});
|
|
1882
1841
|
|
|
1883
1842
|
// src/components/PlayerControl/icons/index.ts
|
|
1884
|
-
var
|
|
1843
|
+
var import_react66 = require("react");
|
|
1885
1844
|
|
|
1886
1845
|
// src/components/PlayerControl/icons/Loading.tsx
|
|
1887
|
-
var
|
|
1846
|
+
var import_react63 = __toESM(require("react"));
|
|
1888
1847
|
var Loading = (props) => {
|
|
1889
1848
|
const stroke = getStroke(props);
|
|
1890
|
-
return /* @__PURE__ */
|
|
1849
|
+
return /* @__PURE__ */ import_react63.default.createElement("svg", {
|
|
1891
1850
|
viewBox: "0 0 24 24"
|
|
1892
|
-
}, /* @__PURE__ */
|
|
1851
|
+
}, /* @__PURE__ */ import_react63.default.createElement("path", {
|
|
1893
1852
|
d: "M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z",
|
|
1894
1853
|
fill: stroke
|
|
1895
1854
|
}));
|
|
1896
1855
|
};
|
|
1897
1856
|
|
|
1898
1857
|
// src/components/PlayerControl/icons/Pause.tsx
|
|
1899
|
-
var
|
|
1858
|
+
var import_react64 = __toESM(require("react"));
|
|
1900
1859
|
var Pause = (props) => {
|
|
1901
1860
|
const stroke = getStroke(props);
|
|
1902
|
-
return /* @__PURE__ */
|
|
1861
|
+
return /* @__PURE__ */ import_react64.default.createElement("svg", {
|
|
1903
1862
|
viewBox: "0 0 24 24"
|
|
1904
|
-
}, /* @__PURE__ */
|
|
1863
|
+
}, /* @__PURE__ */ import_react64.default.createElement("path", {
|
|
1905
1864
|
d: "M14 19h4V5h-4M6 19h4V5H6v14z",
|
|
1906
1865
|
fill: stroke
|
|
1907
1866
|
}));
|
|
1908
1867
|
};
|
|
1909
1868
|
|
|
1910
1869
|
// src/components/PlayerControl/icons/Play.tsx
|
|
1911
|
-
var
|
|
1870
|
+
var import_react65 = __toESM(require("react"));
|
|
1912
1871
|
var Play = (props) => {
|
|
1913
1872
|
const stroke = getStroke(props);
|
|
1914
|
-
return /* @__PURE__ */
|
|
1873
|
+
return /* @__PURE__ */ import_react65.default.createElement("svg", {
|
|
1915
1874
|
viewBox: "0 0 24 24"
|
|
1916
|
-
}, /* @__PURE__ */
|
|
1875
|
+
}, /* @__PURE__ */ import_react65.default.createElement("path", {
|
|
1917
1876
|
d: "M8 5.14v14l11-7l-11-7z",
|
|
1918
1877
|
fill: stroke
|
|
1919
1878
|
}));
|
|
@@ -1921,9 +1880,9 @@ var Play = (props) => {
|
|
|
1921
1880
|
|
|
1922
1881
|
// src/components/PlayerControl/icons/index.ts
|
|
1923
1882
|
var Icons2 = {
|
|
1924
|
-
Play: (0,
|
|
1925
|
-
Pause: (0,
|
|
1926
|
-
Loading: (0,
|
|
1883
|
+
Play: (0, import_react66.memo)(Play),
|
|
1884
|
+
Pause: (0, import_react66.memo)(Pause),
|
|
1885
|
+
Loading: (0, import_react66.memo)(Loading)
|
|
1927
1886
|
};
|
|
1928
1887
|
|
|
1929
1888
|
// src/components/PlayerControl/PlayerControl.tsx
|
|
@@ -1932,12 +1891,12 @@ function PlayerControl(_a) {
|
|
|
1932
1891
|
var _b = _a, { theme, autoHide = false, player: player_ } = _b, icons = __objRest(_b, ["theme", "autoHide", "player"]);
|
|
1933
1892
|
theme = useTheme(theme);
|
|
1934
1893
|
const { t } = useTranslation();
|
|
1935
|
-
const [currentTime, setCurrentTime] = (0,
|
|
1894
|
+
const [currentTime, setCurrentTime] = (0, import_react68.useState)(0);
|
|
1936
1895
|
const player = usePlayerControl(player_);
|
|
1937
|
-
(0,
|
|
1896
|
+
(0, import_react68.useEffect)(() => {
|
|
1938
1897
|
setCurrentTime(player.currentTime);
|
|
1939
1898
|
}, [player.currentTime]);
|
|
1940
|
-
(0,
|
|
1899
|
+
(0, import_react68.useEffect)(() => {
|
|
1941
1900
|
if (player.currentTime !== currentTime) {
|
|
1942
1901
|
player.seekToProgressTime(currentTime);
|
|
1943
1902
|
}
|
|
@@ -1945,25 +1904,25 @@ function PlayerControl(_a) {
|
|
|
1945
1904
|
const isLoading = player.phase === import_white_web_sdk7.PlayerPhase.WaitingFirstFrame || player.phase === import_white_web_sdk7.PlayerPhase.Buffering;
|
|
1946
1905
|
const isPlaying = player.phase === import_white_web_sdk7.PlayerPhase.Playing;
|
|
1947
1906
|
const { activeColor } = themes[theme];
|
|
1948
|
-
return /* @__PURE__ */
|
|
1907
|
+
return /* @__PURE__ */ import_react68.default.createElement("div", {
|
|
1949
1908
|
className: (0, import_clsx11.default)(name5, theme, { "auto-hide": autoHide })
|
|
1950
|
-
}, /* @__PURE__ */
|
|
1909
|
+
}, /* @__PURE__ */ import_react68.default.createElement("button", {
|
|
1951
1910
|
className: (0, import_clsx11.default)(`${name5}-btn`, isLoading ? "loading" : isPlaying ? "pause" : "play", theme),
|
|
1952
1911
|
disabled: isLoading,
|
|
1953
1912
|
onClick: player.togglePlay
|
|
1954
|
-
}, /* @__PURE__ */
|
|
1955
|
-
fallback: isLoading ? /* @__PURE__ */
|
|
1913
|
+
}, /* @__PURE__ */ import_react68.default.createElement(Icon, {
|
|
1914
|
+
fallback: isLoading ? /* @__PURE__ */ import_react68.default.createElement(Icons2.Loading, {
|
|
1956
1915
|
theme
|
|
1957
|
-
}) : isPlaying ? /* @__PURE__ */
|
|
1916
|
+
}) : isPlaying ? /* @__PURE__ */ import_react68.default.createElement(Icons2.Pause, {
|
|
1958
1917
|
theme
|
|
1959
|
-
}) : /* @__PURE__ */
|
|
1918
|
+
}) : /* @__PURE__ */ import_react68.default.createElement(Icons2.Play, {
|
|
1960
1919
|
theme
|
|
1961
1920
|
}),
|
|
1962
1921
|
src: isLoading ? icons.loadingIcon : isPlaying ? icons.pauseIcon : icons.playIcon,
|
|
1963
1922
|
alt: isLoading ? "[loading]" : isPlaying ? "[pause]" : "[play]"
|
|
1964
|
-
})), /* @__PURE__ */
|
|
1923
|
+
})), /* @__PURE__ */ import_react68.default.createElement("span", {
|
|
1965
1924
|
className: (0, import_clsx11.default)(`${name5}-slider`, { loading: isLoading }, theme)
|
|
1966
|
-
}, /* @__PURE__ */
|
|
1925
|
+
}, /* @__PURE__ */ import_react68.default.createElement(import_rc_slider2.default, {
|
|
1967
1926
|
disabled: isLoading,
|
|
1968
1927
|
trackStyle: { background: activeColor },
|
|
1969
1928
|
handleStyle: { border: `1px solid ${activeColor}` },
|
|
@@ -1972,15 +1931,15 @@ function PlayerControl(_a) {
|
|
|
1972
1931
|
min: 0,
|
|
1973
1932
|
max: player.totalTime,
|
|
1974
1933
|
step: 100
|
|
1975
|
-
})), /* @__PURE__ */
|
|
1934
|
+
})), /* @__PURE__ */ import_react68.default.createElement("span", {
|
|
1976
1935
|
className: (0, import_clsx11.default)(`${name5}-current`, theme)
|
|
1977
|
-
}, renderTime(player.currentTime)), /* @__PURE__ */
|
|
1936
|
+
}, renderTime(player.currentTime)), /* @__PURE__ */ import_react68.default.createElement("span", {
|
|
1978
1937
|
className: (0, import_clsx11.default)(`${name5}-slash`, theme)
|
|
1979
|
-
}, "/"), /* @__PURE__ */
|
|
1938
|
+
}, "/"), /* @__PURE__ */ import_react68.default.createElement("span", {
|
|
1980
1939
|
className: (0, import_clsx11.default)(`${name5}-total`, theme)
|
|
1981
|
-
}, renderTime(player.totalTime)), /* @__PURE__ */
|
|
1940
|
+
}, renderTime(player.totalTime)), /* @__PURE__ */ import_react68.default.createElement("span", {
|
|
1982
1941
|
className: `${name5}-btn-interactive`
|
|
1983
|
-
}, /* @__PURE__ */
|
|
1942
|
+
}, /* @__PURE__ */ import_react68.default.createElement(import_react67.default, {
|
|
1984
1943
|
className: "fastboard-tip",
|
|
1985
1944
|
content: renderSpeeds(player),
|
|
1986
1945
|
theme,
|
|
@@ -1989,11 +1948,11 @@ function PlayerControl(_a) {
|
|
|
1989
1948
|
offset: TopOffset,
|
|
1990
1949
|
arrow: false,
|
|
1991
1950
|
interactive: true
|
|
1992
|
-
}, /* @__PURE__ */
|
|
1951
|
+
}, /* @__PURE__ */ import_react68.default.createElement(Button2, {
|
|
1993
1952
|
content: t("speed"),
|
|
1994
1953
|
theme,
|
|
1995
1954
|
disabled: isLoading
|
|
1996
|
-
}, /* @__PURE__ */
|
|
1955
|
+
}, /* @__PURE__ */ import_react68.default.createElement("span", {
|
|
1997
1956
|
className: (0, import_clsx11.default)(`${name5}-speed-text`, theme)
|
|
1998
1957
|
}, player.speed, "x")))));
|
|
1999
1958
|
}
|
|
@@ -2005,9 +1964,9 @@ function renderTime(ms) {
|
|
|
2005
1964
|
}
|
|
2006
1965
|
var Speeds = [2, 1.5, 1.25, 1, 0.75, 0.5];
|
|
2007
1966
|
function renderSpeeds({ speed: current, setSpeed }) {
|
|
2008
|
-
return /* @__PURE__ */
|
|
1967
|
+
return /* @__PURE__ */ import_react68.default.createElement("div", {
|
|
2009
1968
|
className: (0, import_clsx11.default)(`${name5}-panel`, "speed")
|
|
2010
|
-
}, Speeds.map((speed) => /* @__PURE__ */
|
|
1969
|
+
}, Speeds.map((speed) => /* @__PURE__ */ import_react68.default.createElement("button", {
|
|
2011
1970
|
className: (0, import_clsx11.default)(`${name5}-btn`, "speed", {
|
|
2012
1971
|
active: speed === current
|
|
2013
1972
|
}),
|
|
@@ -2017,18 +1976,18 @@ function renderSpeeds({ speed: current, setSpeed }) {
|
|
|
2017
1976
|
}
|
|
2018
1977
|
|
|
2019
1978
|
// src/components/Fastboard.tsx
|
|
2020
|
-
var
|
|
2021
|
-
var Fastboard = /* @__PURE__ */ (0,
|
|
1979
|
+
var import_react69 = __toESM(require("react"));
|
|
1980
|
+
var Fastboard = /* @__PURE__ */ (0, import_react69.forwardRef)(function Fastboard2(_a, ref) {
|
|
2022
1981
|
var _b = _a, { app, theme, layout, language } = _b, restProps = __objRest(_b, ["app", "theme", "layout", "language"]);
|
|
2023
1982
|
if (!app) {
|
|
2024
|
-
return /* @__PURE__ */
|
|
1983
|
+
return /* @__PURE__ */ import_react69.default.createElement("div", __spreadValues({
|
|
2025
1984
|
className: "fastboard-root",
|
|
2026
1985
|
ref
|
|
2027
1986
|
}, restProps));
|
|
2028
1987
|
}
|
|
2029
|
-
return /* @__PURE__ */
|
|
1988
|
+
return /* @__PURE__ */ import_react69.default.createElement(FastboardAppContext.Provider, {
|
|
2030
1989
|
value: app
|
|
2031
|
-
}, /* @__PURE__ */
|
|
1990
|
+
}, /* @__PURE__ */ import_react69.default.createElement(FastboardInternal, __spreadValues(__spreadValues({
|
|
2032
1991
|
forwardedRef: ref
|
|
2033
1992
|
}, { theme, layout, language }), restProps)));
|
|
2034
1993
|
});
|
|
@@ -2049,15 +2008,15 @@ function FastboardInternal(_a) {
|
|
|
2049
2008
|
const app = useFastboardApp();
|
|
2050
2009
|
const forceUpdate = useForceUpdate();
|
|
2051
2010
|
const i18n = useAsyncValue(() => createI18n({ language }));
|
|
2052
|
-
(0,
|
|
2011
|
+
(0, import_react69.useEffect)(() => {
|
|
2053
2012
|
if (i18n)
|
|
2054
2013
|
i18n.changeLanguage(language);
|
|
2055
2014
|
forceUpdate();
|
|
2056
2015
|
}, [forceUpdate, i18n, language]);
|
|
2057
|
-
(0,
|
|
2016
|
+
(0, import_react69.useEffect)(() => {
|
|
2058
2017
|
app.manager.setPrefersColorScheme(theme);
|
|
2059
2018
|
}, [app, theme]);
|
|
2060
|
-
const useWhiteboard = (0,
|
|
2019
|
+
const useWhiteboard = (0, import_react69.useCallback)((container) => {
|
|
2061
2020
|
if (container && app)
|
|
2062
2021
|
app.manager.bindContainer(container);
|
|
2063
2022
|
}, [app]);
|
|
@@ -2069,33 +2028,33 @@ function FastboardInternal(_a) {
|
|
|
2069
2028
|
ZoomControl: zoom_control = showControls,
|
|
2070
2029
|
PageControl: page_control = showControls
|
|
2071
2030
|
} = layout;
|
|
2072
|
-
return /* @__PURE__ */
|
|
2031
|
+
return /* @__PURE__ */ import_react69.default.createElement(ThemeContext.Provider, {
|
|
2073
2032
|
value: theme
|
|
2074
|
-
}, /* @__PURE__ */
|
|
2033
|
+
}, /* @__PURE__ */ import_react69.default.createElement(I18nContext.Provider, {
|
|
2075
2034
|
value: i18n
|
|
2076
|
-
}, /* @__PURE__ */
|
|
2035
|
+
}, /* @__PURE__ */ import_react69.default.createElement("div", __spreadProps(__spreadValues({}, restProps), {
|
|
2077
2036
|
className: "fastboard-root",
|
|
2078
2037
|
ref: forwardedRef
|
|
2079
|
-
}), /* @__PURE__ */
|
|
2038
|
+
}), /* @__PURE__ */ import_react69.default.createElement("div", {
|
|
2080
2039
|
className: "fastboard-view",
|
|
2081
2040
|
ref: useWhiteboard
|
|
2082
|
-
}), children ? children : /* @__PURE__ */
|
|
2041
|
+
}), children ? children : /* @__PURE__ */ import_react69.default.createElement(import_react69.default.Fragment, null, toolbar && /* @__PURE__ */ import_react69.default.createElement("div", {
|
|
2083
2042
|
className: "fastboard-left"
|
|
2084
|
-
}, /* @__PURE__ */
|
|
2043
|
+
}, /* @__PURE__ */ import_react69.default.createElement(Toolbar, null)), (redo_undo || zoom_control) && /* @__PURE__ */ import_react69.default.createElement("div", {
|
|
2085
2044
|
className: "fastboard-bottom-left"
|
|
2086
|
-
}, redo_undo && /* @__PURE__ */
|
|
2045
|
+
}, redo_undo && /* @__PURE__ */ import_react69.default.createElement(RedoUndo, null), zoom_control && /* @__PURE__ */ import_react69.default.createElement(ZoomControl, null)), page_control && /* @__PURE__ */ import_react69.default.createElement("div", {
|
|
2087
2046
|
className: "fastboard-bottom-right"
|
|
2088
|
-
}, /* @__PURE__ */
|
|
2047
|
+
}, /* @__PURE__ */ import_react69.default.createElement(PageControl, null))))));
|
|
2089
2048
|
}
|
|
2090
2049
|
|
|
2091
2050
|
// src/vanilla/index.tsx
|
|
2092
|
-
var
|
|
2093
|
-
var
|
|
2051
|
+
var import_react70 = __toESM(require("react"));
|
|
2052
|
+
var import_react_dom = __toESM(require("react-dom"));
|
|
2094
2053
|
function mount(app, dom, props) {
|
|
2095
|
-
|
|
2054
|
+
import_react_dom.default.render(/* @__PURE__ */ import_react70.default.createElement(Fastboard, __spreadValues({
|
|
2096
2055
|
app
|
|
2097
2056
|
}, props)), dom);
|
|
2098
|
-
return () =>
|
|
2057
|
+
return () => import_react_dom.default.unmountComponentAtNode(dom);
|
|
2099
2058
|
}
|
|
2100
2059
|
module.exports = __toCommonJS(src_exports);
|
|
2101
2060
|
//# sourceMappingURL=index.js.map
|