@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.mjs
CHANGED
|
@@ -81,7 +81,7 @@ function useForceUpdate() {
|
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
// src/style.scss?inline
|
|
84
|
-
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';
|
|
84
|
+
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';
|
|
85
85
|
|
|
86
86
|
// src/behaviors/style.ts
|
|
87
87
|
applyStyles(style_default);
|
|
@@ -119,11 +119,16 @@ function useFocusedApp() {
|
|
|
119
119
|
function useMaximized() {
|
|
120
120
|
return useBoxState() === "maximized";
|
|
121
121
|
}
|
|
122
|
+
var AppsShouldShowToolbar = /* @__PURE__ */ (() => [BuiltinApps.DocsViewer, "Slide"])();
|
|
122
123
|
function useHideControls() {
|
|
124
|
+
const writable = useWritable();
|
|
123
125
|
const maximized = useMaximized();
|
|
124
126
|
const focusedApp = useFocusedApp();
|
|
127
|
+
if (!writable) {
|
|
128
|
+
return true;
|
|
129
|
+
}
|
|
125
130
|
if (maximized) {
|
|
126
|
-
if (
|
|
131
|
+
if (AppsShouldShowToolbar.some((kind) => focusedApp == null ? void 0 : focusedApp.includes(kind))) {
|
|
127
132
|
return "toolbar-only";
|
|
128
133
|
} else {
|
|
129
134
|
return true;
|
|
@@ -776,94 +781,56 @@ var EmptyToolbarHook = {
|
|
|
776
781
|
// src/components/Toolbar/Toolbar.tsx
|
|
777
782
|
import clsx9 from "clsx";
|
|
778
783
|
import { AnimatePresence, motion } from "framer-motion";
|
|
779
|
-
import
|
|
780
|
-
|
|
781
|
-
// src/components/Toolbar/components/assets/collapsed.png
|
|
782
|
-
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";
|
|
784
|
+
import React43, { createContext as createContext3, useState as useState4 } from "react";
|
|
783
785
|
|
|
784
786
|
// src/components/Toolbar/components/assets/expanded.png
|
|
785
787
|
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==";
|
|
786
788
|
|
|
787
|
-
// src/components/Toolbar/components/Mask.tsx
|
|
788
|
-
import React13, { useState as useState3, useEffect as useEffect3 } from "react";
|
|
789
|
-
import ReactDOM from "react-dom";
|
|
790
|
-
var Mask = React13.memo(({ toolbar, children }) => {
|
|
791
|
-
const [rootElement] = useState3(() => {
|
|
792
|
-
const element = document.createElement("div");
|
|
793
|
-
element.style.position = "absolute";
|
|
794
|
-
return element;
|
|
795
|
-
});
|
|
796
|
-
useEffect3(() => {
|
|
797
|
-
if (toolbar && rootElement) {
|
|
798
|
-
toolbar.appendChild(rootElement);
|
|
799
|
-
}
|
|
800
|
-
}, [rootElement, toolbar]);
|
|
801
|
-
useEffect3(() => {
|
|
802
|
-
if (rootElement && toolbar) {
|
|
803
|
-
toolbar.appendChild(rootElement);
|
|
804
|
-
const toolbarRect = toolbar.getBoundingClientRect();
|
|
805
|
-
const halfHeight = toolbarRect.height / 2 - 31;
|
|
806
|
-
rootElement.style.top = halfHeight + "px";
|
|
807
|
-
rootElement.style.left = "41px";
|
|
808
|
-
rootElement.style.width = "17px";
|
|
809
|
-
rootElement.style.height = "62px";
|
|
810
|
-
return () => {
|
|
811
|
-
toolbar.removeChild(rootElement);
|
|
812
|
-
};
|
|
813
|
-
}
|
|
814
|
-
}, [rootElement, toolbar]);
|
|
815
|
-
if (rootElement) {
|
|
816
|
-
return ReactDOM.createPortal(children, rootElement);
|
|
817
|
-
} else {
|
|
818
|
-
return null;
|
|
819
|
-
}
|
|
820
|
-
});
|
|
821
|
-
|
|
822
789
|
// src/components/Toolbar/Content.tsx
|
|
823
790
|
import clsx8 from "clsx";
|
|
824
|
-
import
|
|
791
|
+
import React42, { useCallback as useCallback10, useContext as useContext13, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
|
|
825
792
|
|
|
826
793
|
// src/components/Toolbar/components/ApplianceButtons.tsx
|
|
827
|
-
import
|
|
794
|
+
import React33, { useCallback as useCallback6, useContext as useContext4 } from "react";
|
|
828
795
|
import { ApplianceNames } from "white-web-sdk";
|
|
829
796
|
|
|
830
797
|
// src/components/Toolbar/icons/index.ts
|
|
831
798
|
import { memo } from "react";
|
|
832
799
|
|
|
833
800
|
// src/components/Toolbar/icons/Apps.tsx
|
|
834
|
-
import
|
|
801
|
+
import React13 from "react";
|
|
835
802
|
var Apps = (props) => {
|
|
836
803
|
const stroke = getStroke(props);
|
|
837
|
-
return /* @__PURE__ */
|
|
804
|
+
return /* @__PURE__ */ React13.createElement("svg", {
|
|
838
805
|
viewBox: "0 0 24 24"
|
|
839
|
-
}, /* @__PURE__ */
|
|
806
|
+
}, /* @__PURE__ */ React13.createElement("g", {
|
|
840
807
|
fill: stroke
|
|
841
|
-
}, /* @__PURE__ */
|
|
808
|
+
}, /* @__PURE__ */ React13.createElement("path", {
|
|
842
809
|
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"
|
|
843
|
-
}), /* @__PURE__ */
|
|
810
|
+
}), /* @__PURE__ */ React13.createElement("path", {
|
|
844
811
|
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"
|
|
845
812
|
})));
|
|
846
813
|
};
|
|
847
814
|
|
|
848
815
|
// src/components/Toolbar/icons/Arrow.tsx
|
|
849
|
-
import
|
|
816
|
+
import React14 from "react";
|
|
850
817
|
var Arrow = (props) => {
|
|
851
818
|
const stroke = getStroke(props);
|
|
852
|
-
return /* @__PURE__ */
|
|
819
|
+
return /* @__PURE__ */ React14.createElement("svg", {
|
|
853
820
|
viewBox: "0 0 24 24"
|
|
854
|
-
}, /* @__PURE__ */
|
|
821
|
+
}, /* @__PURE__ */ React14.createElement("path", {
|
|
855
822
|
fill: stroke,
|
|
856
823
|
d: "M19 5v6l-2.647-2.646L5.99 18.718l-.708-.708L15.645 7.646 13 5h6Z"
|
|
857
824
|
}));
|
|
858
825
|
};
|
|
859
826
|
|
|
860
827
|
// src/components/Toolbar/icons/Circle.tsx
|
|
861
|
-
import
|
|
828
|
+
import React15 from "react";
|
|
862
829
|
var Circle = (props) => {
|
|
863
830
|
const stroke = getStroke(props);
|
|
864
|
-
return /* @__PURE__ */
|
|
831
|
+
return /* @__PURE__ */ React15.createElement("svg", {
|
|
865
832
|
viewBox: "0 0 24 24"
|
|
866
|
-
}, /* @__PURE__ */
|
|
833
|
+
}, /* @__PURE__ */ React15.createElement("rect", {
|
|
867
834
|
width: "15",
|
|
868
835
|
height: "15",
|
|
869
836
|
x: "4.5",
|
|
@@ -875,40 +842,40 @@ var Circle = (props) => {
|
|
|
875
842
|
};
|
|
876
843
|
|
|
877
844
|
// src/components/Toolbar/icons/Clean.tsx
|
|
878
|
-
import
|
|
845
|
+
import React16 from "react";
|
|
879
846
|
var Clean = (props) => {
|
|
880
847
|
const stroke = getStroke(props);
|
|
881
|
-
return /* @__PURE__ */
|
|
848
|
+
return /* @__PURE__ */ React16.createElement("svg", {
|
|
882
849
|
viewBox: "0 0 24 24"
|
|
883
|
-
}, /* @__PURE__ */
|
|
850
|
+
}, /* @__PURE__ */ React16.createElement("path", {
|
|
884
851
|
fill: stroke,
|
|
885
852
|
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"
|
|
886
853
|
}));
|
|
887
854
|
};
|
|
888
855
|
|
|
889
856
|
// src/components/Toolbar/icons/Clicker.tsx
|
|
890
|
-
import
|
|
857
|
+
import React17 from "react";
|
|
891
858
|
var Clicker = (props) => {
|
|
892
859
|
const stroke = getStroke(props);
|
|
893
|
-
return /* @__PURE__ */
|
|
860
|
+
return /* @__PURE__ */ React17.createElement("svg", {
|
|
894
861
|
viewBox: "0 0 24 24"
|
|
895
|
-
}, /* @__PURE__ */
|
|
862
|
+
}, /* @__PURE__ */ React17.createElement("g", {
|
|
896
863
|
fill: "none"
|
|
897
|
-
}, /* @__PURE__ */
|
|
864
|
+
}, /* @__PURE__ */ React17.createElement("path", {
|
|
898
865
|
d: "M0 0h24v24H0z"
|
|
899
|
-
}), /* @__PURE__ */
|
|
866
|
+
}), /* @__PURE__ */ React17.createElement("path", {
|
|
900
867
|
fill: stroke,
|
|
901
868
|
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"
|
|
902
869
|
})));
|
|
903
870
|
};
|
|
904
871
|
|
|
905
872
|
// src/components/Toolbar/icons/Collapse.tsx
|
|
906
|
-
import
|
|
873
|
+
import React18 from "react";
|
|
907
874
|
var Collapse = (props) => {
|
|
908
875
|
const stroke = getStroke(props);
|
|
909
|
-
return /* @__PURE__ */
|
|
876
|
+
return /* @__PURE__ */ React18.createElement("svg", {
|
|
910
877
|
viewBox: "0 0 24 24"
|
|
911
|
-
}, /* @__PURE__ */
|
|
878
|
+
}, /* @__PURE__ */ React18.createElement("path", {
|
|
912
879
|
fill: "none",
|
|
913
880
|
stroke,
|
|
914
881
|
d: "m8 10-2 2 2 2m10-8H6m12 12H6m12-4h-8m8-4h-8"
|
|
@@ -916,12 +883,12 @@ var Collapse = (props) => {
|
|
|
916
883
|
};
|
|
917
884
|
|
|
918
885
|
// src/components/Toolbar/icons/Diamond.tsx
|
|
919
|
-
import
|
|
886
|
+
import React19 from "react";
|
|
920
887
|
var Diamond = (props) => {
|
|
921
888
|
const stroke = getStroke(props);
|
|
922
|
-
return /* @__PURE__ */
|
|
889
|
+
return /* @__PURE__ */ React19.createElement("svg", {
|
|
923
890
|
viewBox: "0 0 24 24"
|
|
924
|
-
}, /* @__PURE__ */
|
|
891
|
+
}, /* @__PURE__ */ React19.createElement("path", {
|
|
925
892
|
fill: "none",
|
|
926
893
|
stroke,
|
|
927
894
|
d: "M4.222 12 12 4.222 19.778 12 12 19.778z"
|
|
@@ -929,12 +896,12 @@ var Diamond = (props) => {
|
|
|
929
896
|
};
|
|
930
897
|
|
|
931
898
|
// src/components/Toolbar/icons/Down.tsx
|
|
932
|
-
import
|
|
899
|
+
import React20 from "react";
|
|
933
900
|
var Down = (props) => {
|
|
934
901
|
const stroke = getStroke(props);
|
|
935
|
-
return /* @__PURE__ */
|
|
902
|
+
return /* @__PURE__ */ React20.createElement("svg", {
|
|
936
903
|
viewBox: "0 0 24 24"
|
|
937
|
-
}, /* @__PURE__ */
|
|
904
|
+
}, /* @__PURE__ */ React20.createElement("path", {
|
|
938
905
|
fill: "none",
|
|
939
906
|
stroke,
|
|
940
907
|
d: "m16 13-2 2-2 2-2-2-2-2m8-6-2 2-2 2-2-2-2-2"
|
|
@@ -942,24 +909,24 @@ var Down = (props) => {
|
|
|
942
909
|
};
|
|
943
910
|
|
|
944
911
|
// src/components/Toolbar/icons/Eraser.tsx
|
|
945
|
-
import
|
|
912
|
+
import React21 from "react";
|
|
946
913
|
var Eraser = (props) => {
|
|
947
914
|
const stroke = getStroke(props);
|
|
948
|
-
return /* @__PURE__ */
|
|
915
|
+
return /* @__PURE__ */ React21.createElement("svg", {
|
|
949
916
|
viewBox: "0 0 24 24"
|
|
950
|
-
}, /* @__PURE__ */
|
|
917
|
+
}, /* @__PURE__ */ React21.createElement("path", {
|
|
951
918
|
fill: stroke,
|
|
952
919
|
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"
|
|
953
920
|
}));
|
|
954
921
|
};
|
|
955
922
|
|
|
956
923
|
// src/components/Toolbar/icons/Expand.tsx
|
|
957
|
-
import
|
|
924
|
+
import React22 from "react";
|
|
958
925
|
var Expand = (props) => {
|
|
959
926
|
const stroke = getStroke(props);
|
|
960
|
-
return /* @__PURE__ */
|
|
927
|
+
return /* @__PURE__ */ React22.createElement("svg", {
|
|
961
928
|
viewBox: "0 0 24 24"
|
|
962
|
-
}, /* @__PURE__ */
|
|
929
|
+
}, /* @__PURE__ */ React22.createElement("path", {
|
|
963
930
|
fill: "none",
|
|
964
931
|
stroke,
|
|
965
932
|
d: "m16 10 2 2-2 2M6 6h12M6 18h12M6 14h8m-8-4h8"
|
|
@@ -967,36 +934,36 @@ var Expand = (props) => {
|
|
|
967
934
|
};
|
|
968
935
|
|
|
969
936
|
// src/components/Toolbar/icons/Line.tsx
|
|
970
|
-
import
|
|
937
|
+
import React23 from "react";
|
|
971
938
|
var Line = (props) => {
|
|
972
939
|
const stroke = getStroke(props);
|
|
973
|
-
return /* @__PURE__ */
|
|
940
|
+
return /* @__PURE__ */ React23.createElement("svg", {
|
|
974
941
|
viewBox: "0 0 24 24"
|
|
975
|
-
}, /* @__PURE__ */
|
|
942
|
+
}, /* @__PURE__ */ React23.createElement("path", {
|
|
976
943
|
fill: stroke,
|
|
977
944
|
d: "m18.01 5.282.708.708L5.99 18.718l-.708-.708z"
|
|
978
945
|
}));
|
|
979
946
|
};
|
|
980
947
|
|
|
981
948
|
// src/components/Toolbar/icons/Pencil.tsx
|
|
982
|
-
import
|
|
949
|
+
import React24 from "react";
|
|
983
950
|
var Pencil = (props) => {
|
|
984
951
|
const stroke = getStroke(props);
|
|
985
|
-
return /* @__PURE__ */
|
|
952
|
+
return /* @__PURE__ */ React24.createElement("svg", {
|
|
986
953
|
viewBox: "0 0 24 24"
|
|
987
|
-
}, /* @__PURE__ */
|
|
954
|
+
}, /* @__PURE__ */ React24.createElement("path", {
|
|
988
955
|
fill: stroke,
|
|
989
956
|
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"
|
|
990
957
|
}));
|
|
991
958
|
};
|
|
992
959
|
|
|
993
960
|
// src/components/Toolbar/icons/Rectangle.tsx
|
|
994
|
-
import
|
|
961
|
+
import React25 from "react";
|
|
995
962
|
var Rectangle = (props) => {
|
|
996
963
|
const stroke = getStroke(props);
|
|
997
|
-
return /* @__PURE__ */
|
|
964
|
+
return /* @__PURE__ */ React25.createElement("svg", {
|
|
998
965
|
viewBox: "0 0 24 24"
|
|
999
|
-
}, /* @__PURE__ */
|
|
966
|
+
}, /* @__PURE__ */ React25.createElement("path", {
|
|
1000
967
|
fill: "none",
|
|
1001
968
|
stroke,
|
|
1002
969
|
d: "M5.5 5.5h13v13h-13z"
|
|
@@ -1004,24 +971,24 @@ var Rectangle = (props) => {
|
|
|
1004
971
|
};
|
|
1005
972
|
|
|
1006
973
|
// src/components/Toolbar/icons/Selector.tsx
|
|
1007
|
-
import
|
|
974
|
+
import React26 from "react";
|
|
1008
975
|
var Selector = (props) => {
|
|
1009
976
|
const stroke = getStroke(props);
|
|
1010
|
-
return /* @__PURE__ */
|
|
977
|
+
return /* @__PURE__ */ React26.createElement("svg", {
|
|
1011
978
|
viewBox: "0 0 24 24"
|
|
1012
|
-
}, /* @__PURE__ */
|
|
979
|
+
}, /* @__PURE__ */ React26.createElement("path", {
|
|
1013
980
|
fill: stroke,
|
|
1014
981
|
d: "m12 12 8 2.667-3.556 1.777L14.667 20 12 12Zm3-8v7.5h-1V5H5v9h6.5v1H4V4h11Z"
|
|
1015
982
|
}));
|
|
1016
983
|
};
|
|
1017
984
|
|
|
1018
985
|
// src/components/Toolbar/icons/SpeechBalloon.tsx
|
|
1019
|
-
import
|
|
986
|
+
import React27 from "react";
|
|
1020
987
|
var SpeechBalloon = (props) => {
|
|
1021
988
|
const stroke = getStroke(props);
|
|
1022
|
-
return /* @__PURE__ */
|
|
989
|
+
return /* @__PURE__ */ React27.createElement("svg", {
|
|
1023
990
|
viewBox: "0 0 24 24"
|
|
1024
|
-
}, /* @__PURE__ */
|
|
991
|
+
}, /* @__PURE__ */ React27.createElement("path", {
|
|
1025
992
|
fill: "none",
|
|
1026
993
|
stroke,
|
|
1027
994
|
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"
|
|
@@ -1029,12 +996,12 @@ var SpeechBalloon = (props) => {
|
|
|
1029
996
|
};
|
|
1030
997
|
|
|
1031
998
|
// src/components/Toolbar/icons/Star.tsx
|
|
1032
|
-
import
|
|
999
|
+
import React28 from "react";
|
|
1033
1000
|
var Star = (props) => {
|
|
1034
1001
|
const stroke = getStroke(props);
|
|
1035
|
-
return /* @__PURE__ */
|
|
1002
|
+
return /* @__PURE__ */ React28.createElement("svg", {
|
|
1036
1003
|
viewBox: "0 0 24 24"
|
|
1037
|
-
}, /* @__PURE__ */
|
|
1004
|
+
}, /* @__PURE__ */ React28.createElement("path", {
|
|
1038
1005
|
fill: "none",
|
|
1039
1006
|
stroke,
|
|
1040
1007
|
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"
|
|
@@ -1042,24 +1009,24 @@ var Star = (props) => {
|
|
|
1042
1009
|
};
|
|
1043
1010
|
|
|
1044
1011
|
// src/components/Toolbar/icons/Text.tsx
|
|
1045
|
-
import
|
|
1012
|
+
import React29 from "react";
|
|
1046
1013
|
var Text = (props) => {
|
|
1047
1014
|
const stroke = getStroke(props);
|
|
1048
|
-
return /* @__PURE__ */
|
|
1015
|
+
return /* @__PURE__ */ React29.createElement("svg", {
|
|
1049
1016
|
viewBox: "0 0 24 24"
|
|
1050
|
-
}, /* @__PURE__ */
|
|
1017
|
+
}, /* @__PURE__ */ React29.createElement("path", {
|
|
1051
1018
|
fill: stroke,
|
|
1052
1019
|
d: "M18.5 5.5V8h-1V6.5H13v11h2v1H9v-1h2v-11H6.5V8h-1V5.5h13Z"
|
|
1053
1020
|
}));
|
|
1054
1021
|
};
|
|
1055
1022
|
|
|
1056
1023
|
// src/components/Toolbar/icons/Triangle.tsx
|
|
1057
|
-
import
|
|
1024
|
+
import React30 from "react";
|
|
1058
1025
|
var Triangle = (props) => {
|
|
1059
1026
|
const stroke = getStroke(props);
|
|
1060
|
-
return /* @__PURE__ */
|
|
1027
|
+
return /* @__PURE__ */ React30.createElement("svg", {
|
|
1061
1028
|
viewBox: "0 0 24 24"
|
|
1062
|
-
}, /* @__PURE__ */
|
|
1029
|
+
}, /* @__PURE__ */ React30.createElement("path", {
|
|
1063
1030
|
fill: "none",
|
|
1064
1031
|
stroke,
|
|
1065
1032
|
d: "M12 6.008 19.138 18.5H4.862L12 6.008Z"
|
|
@@ -1067,12 +1034,12 @@ var Triangle = (props) => {
|
|
|
1067
1034
|
};
|
|
1068
1035
|
|
|
1069
1036
|
// src/components/Toolbar/icons/Up.tsx
|
|
1070
|
-
import
|
|
1037
|
+
import React31 from "react";
|
|
1071
1038
|
var Up = (props) => {
|
|
1072
1039
|
const stroke = getStroke(props);
|
|
1073
|
-
return /* @__PURE__ */
|
|
1040
|
+
return /* @__PURE__ */ React31.createElement("svg", {
|
|
1074
1041
|
viewBox: "0 0 24 24"
|
|
1075
|
-
}, /* @__PURE__ */
|
|
1042
|
+
}, /* @__PURE__ */ React31.createElement("path", {
|
|
1076
1043
|
fill: "none",
|
|
1077
1044
|
stroke,
|
|
1078
1045
|
d: "m16 11-2-2-2-2-2 2-2 2m8 6-2-2-2-2-2 2-2 2"
|
|
@@ -1104,12 +1071,12 @@ var Icons = {
|
|
|
1104
1071
|
|
|
1105
1072
|
// src/components/Toolbar/components/Button.tsx
|
|
1106
1073
|
import clsx4 from "clsx";
|
|
1107
|
-
import
|
|
1074
|
+
import React32, { forwardRef, useContext as useContext3 } from "react";
|
|
1108
1075
|
import Tippy4 from "@tippyjs/react";
|
|
1109
1076
|
var Button = forwardRef((props, ref) => {
|
|
1110
1077
|
const { content, disabled, active, onClick, interactive, placement = "right", children } = props;
|
|
1111
1078
|
const { writable, theme } = useContext3(ToolbarContext);
|
|
1112
|
-
return /* @__PURE__ */
|
|
1079
|
+
return /* @__PURE__ */ React32.createElement(Tippy4, {
|
|
1113
1080
|
className: "fastboard-tip",
|
|
1114
1081
|
content,
|
|
1115
1082
|
interactive,
|
|
@@ -1119,7 +1086,7 @@ var Button = forwardRef((props, ref) => {
|
|
|
1119
1086
|
offset: placement.includes("right") ? RightOffset : void 0,
|
|
1120
1087
|
delay: [1e3, 400],
|
|
1121
1088
|
duration: 300
|
|
1122
|
-
}, /* @__PURE__ */
|
|
1089
|
+
}, /* @__PURE__ */ React32.createElement("button", {
|
|
1123
1090
|
ref,
|
|
1124
1091
|
className: clsx4("fastboard-toolbar-btn", theme, { active }),
|
|
1125
1092
|
onClick,
|
|
@@ -1131,9 +1098,9 @@ var Button = forwardRef((props, ref) => {
|
|
|
1131
1098
|
function renderToolTip(text, hotkey) {
|
|
1132
1099
|
if (!(typeof hotkey === "string"))
|
|
1133
1100
|
return text;
|
|
1134
|
-
return /* @__PURE__ */
|
|
1101
|
+
return /* @__PURE__ */ React33.createElement("span", {
|
|
1135
1102
|
className: "fastboard-toolbar-tooltip"
|
|
1136
|
-
}, /* @__PURE__ */
|
|
1103
|
+
}, /* @__PURE__ */ React33.createElement("span", null, text), /* @__PURE__ */ React33.createElement("span", {
|
|
1137
1104
|
className: "fastboard-toolbar-hotkey"
|
|
1138
1105
|
}, hotkey.toUpperCase()));
|
|
1139
1106
|
}
|
|
@@ -1147,12 +1114,12 @@ function ClickerButton() {
|
|
|
1147
1114
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1148
1115
|
const active = appliance === ApplianceNames.clicker;
|
|
1149
1116
|
const disabled = !writable;
|
|
1150
|
-
return /* @__PURE__ */
|
|
1117
|
+
return /* @__PURE__ */ React33.createElement(Button, {
|
|
1151
1118
|
content: renderToolTip(t("clicker"), shortcut),
|
|
1152
1119
|
onClick: changeAppliance,
|
|
1153
1120
|
active
|
|
1154
|
-
}, /* @__PURE__ */
|
|
1155
|
-
fallback: /* @__PURE__ */
|
|
1121
|
+
}, /* @__PURE__ */ React33.createElement(Icon, {
|
|
1122
|
+
fallback: /* @__PURE__ */ React33.createElement(Icons.Clicker, {
|
|
1156
1123
|
theme,
|
|
1157
1124
|
active
|
|
1158
1125
|
}),
|
|
@@ -1169,12 +1136,12 @@ function SelectorButton() {
|
|
|
1169
1136
|
const active = appliance === ApplianceNames.selector;
|
|
1170
1137
|
const disabled = !writable;
|
|
1171
1138
|
const shortcut = (app.hotKeys || defaultHotKeys).changeToSelector;
|
|
1172
|
-
return /* @__PURE__ */
|
|
1139
|
+
return /* @__PURE__ */ React33.createElement(Button, {
|
|
1173
1140
|
content: renderToolTip(t("selector"), shortcut),
|
|
1174
1141
|
onClick: changeAppliance,
|
|
1175
1142
|
active
|
|
1176
|
-
}, /* @__PURE__ */
|
|
1177
|
-
fallback: /* @__PURE__ */
|
|
1143
|
+
}, /* @__PURE__ */ React33.createElement(Icon, {
|
|
1144
|
+
fallback: /* @__PURE__ */ React33.createElement(Icons.Selector, {
|
|
1178
1145
|
theme,
|
|
1179
1146
|
active
|
|
1180
1147
|
}),
|
|
@@ -1191,12 +1158,12 @@ function EraserButton() {
|
|
|
1191
1158
|
const active = appliance === ApplianceNames.eraser;
|
|
1192
1159
|
const disabled = !writable;
|
|
1193
1160
|
const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToEraser;
|
|
1194
|
-
return /* @__PURE__ */
|
|
1161
|
+
return /* @__PURE__ */ React33.createElement(Button, {
|
|
1195
1162
|
content: renderToolTip(t("eraser"), shortcut),
|
|
1196
1163
|
onClick: changeAppliance,
|
|
1197
1164
|
active
|
|
1198
|
-
}, /* @__PURE__ */
|
|
1199
|
-
fallback: /* @__PURE__ */
|
|
1165
|
+
}, /* @__PURE__ */ React33.createElement(Icon, {
|
|
1166
|
+
fallback: /* @__PURE__ */ React33.createElement(Icons.Eraser, {
|
|
1200
1167
|
theme,
|
|
1201
1168
|
active
|
|
1202
1169
|
}),
|
|
@@ -1208,11 +1175,11 @@ function CleanButton() {
|
|
|
1208
1175
|
const { t } = useTranslation();
|
|
1209
1176
|
const { theme, icons, writable, cleanCurrentScene } = useContext4(ToolbarContext);
|
|
1210
1177
|
const disabled = !writable;
|
|
1211
|
-
return /* @__PURE__ */
|
|
1178
|
+
return /* @__PURE__ */ React33.createElement(Button, {
|
|
1212
1179
|
content: t("clean"),
|
|
1213
1180
|
onClick: cleanCurrentScene
|
|
1214
|
-
}, /* @__PURE__ */
|
|
1215
|
-
fallback: /* @__PURE__ */
|
|
1181
|
+
}, /* @__PURE__ */ React33.createElement(Icon, {
|
|
1182
|
+
fallback: /* @__PURE__ */ React33.createElement(Icons.Clean, {
|
|
1216
1183
|
theme
|
|
1217
1184
|
}),
|
|
1218
1185
|
src: disabled ? icons == null ? void 0 : icons.cleanIconDisable : icons == null ? void 0 : icons.cleanIcon,
|
|
@@ -1222,7 +1189,7 @@ function CleanButton() {
|
|
|
1222
1189
|
|
|
1223
1190
|
// src/components/Toolbar/components/AppsButton.tsx
|
|
1224
1191
|
import Tippy5 from "@tippyjs/react";
|
|
1225
|
-
import
|
|
1192
|
+
import React34, { useContext as useContext5 } from "react";
|
|
1226
1193
|
|
|
1227
1194
|
// src/components/Toolbar/components/assets/vscode.png
|
|
1228
1195
|
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=";
|
|
@@ -1237,19 +1204,19 @@ var countdown_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyC
|
|
|
1237
1204
|
function AppsButton({ content, onClick }) {
|
|
1238
1205
|
const { theme, icons, writable } = useContext5(ToolbarContext);
|
|
1239
1206
|
const disabled = !writable;
|
|
1240
|
-
const button = /* @__PURE__ */
|
|
1207
|
+
const button = /* @__PURE__ */ React34.createElement(Button, {
|
|
1241
1208
|
content: "Apps",
|
|
1242
1209
|
onClick
|
|
1243
|
-
}, /* @__PURE__ */
|
|
1244
|
-
fallback: /* @__PURE__ */
|
|
1210
|
+
}, /* @__PURE__ */ React34.createElement(Icon, {
|
|
1211
|
+
fallback: /* @__PURE__ */ React34.createElement(Icons.Apps, {
|
|
1245
1212
|
theme
|
|
1246
1213
|
}),
|
|
1247
1214
|
src: disabled ? icons == null ? void 0 : icons.appsIconDisable : icons == null ? void 0 : icons.appsIcon,
|
|
1248
1215
|
alt: "[apps]"
|
|
1249
1216
|
}));
|
|
1250
|
-
return content === false ? button : /* @__PURE__ */
|
|
1217
|
+
return content === false ? button : /* @__PURE__ */ React34.createElement("span", {
|
|
1251
1218
|
className: "fastboard-toolbar-btn-interactive"
|
|
1252
|
-
}, /* @__PURE__ */
|
|
1219
|
+
}, /* @__PURE__ */ React34.createElement(Tippy5, {
|
|
1253
1220
|
className: "fastboard-tip",
|
|
1254
1221
|
content: renderAppsButtonContent(content),
|
|
1255
1222
|
theme,
|
|
@@ -1261,25 +1228,25 @@ function AppsButton({ content, onClick }) {
|
|
|
1261
1228
|
}, button));
|
|
1262
1229
|
}
|
|
1263
1230
|
function renderAppsButtonContent(content) {
|
|
1264
|
-
return /* @__PURE__ */
|
|
1231
|
+
return /* @__PURE__ */ React34.createElement("div", {
|
|
1265
1232
|
className: "fastboard-toolbar-panel apps"
|
|
1266
|
-
}, /* @__PURE__ */
|
|
1233
|
+
}, /* @__PURE__ */ React34.createElement("div", {
|
|
1267
1234
|
className: "fastboard-toolbar-apps"
|
|
1268
|
-
}, content || /* @__PURE__ */
|
|
1235
|
+
}, content || /* @__PURE__ */ React34.createElement(DefaultApps, null)));
|
|
1269
1236
|
}
|
|
1270
1237
|
function DefaultApps() {
|
|
1271
1238
|
const app = useFastboardApp();
|
|
1272
|
-
return /* @__PURE__ */
|
|
1239
|
+
return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(AppIcon, {
|
|
1273
1240
|
title: "Code Editor",
|
|
1274
1241
|
src: vscode_default,
|
|
1275
1242
|
alt: "[code editor]",
|
|
1276
1243
|
onClick: app == null ? void 0 : app.insertCodeEditor.bind(app)
|
|
1277
|
-
}), /* @__PURE__ */
|
|
1244
|
+
}), /* @__PURE__ */ React34.createElement(AppIcon, {
|
|
1278
1245
|
title: "GeoGebra",
|
|
1279
1246
|
src: geogebra_default,
|
|
1280
1247
|
alt: "[geogebra]",
|
|
1281
1248
|
onClick: app == null ? void 0 : app.insertGeoGebra.bind(app)
|
|
1282
|
-
}), /* @__PURE__ */
|
|
1249
|
+
}), /* @__PURE__ */ React34.createElement(AppIcon, {
|
|
1283
1250
|
title: "Countdown",
|
|
1284
1251
|
src: countdown_default,
|
|
1285
1252
|
alt: "[countdown]",
|
|
@@ -1287,29 +1254,29 @@ function DefaultApps() {
|
|
|
1287
1254
|
}));
|
|
1288
1255
|
}
|
|
1289
1256
|
function AppIcon({ title, src, alt, onClick }) {
|
|
1290
|
-
return /* @__PURE__ */
|
|
1257
|
+
return /* @__PURE__ */ React34.createElement("span", {
|
|
1291
1258
|
className: "fastboard-toolbar-app-icon"
|
|
1292
|
-
}, /* @__PURE__ */
|
|
1259
|
+
}, /* @__PURE__ */ React34.createElement(Button, {
|
|
1293
1260
|
placement: "top",
|
|
1294
1261
|
content: title,
|
|
1295
1262
|
onClick
|
|
1296
|
-
}, /* @__PURE__ */
|
|
1263
|
+
}, /* @__PURE__ */ React34.createElement("img", {
|
|
1297
1264
|
src,
|
|
1298
1265
|
alt,
|
|
1299
1266
|
title
|
|
1300
|
-
})), /* @__PURE__ */
|
|
1267
|
+
})), /* @__PURE__ */ React34.createElement("span", {
|
|
1301
1268
|
className: "fastboard-toolbar-app-icon-text"
|
|
1302
1269
|
}, title));
|
|
1303
1270
|
}
|
|
1304
1271
|
|
|
1305
1272
|
// src/components/Toolbar/components/PencilButton.tsx
|
|
1306
1273
|
import Tippy6 from "@tippyjs/react";
|
|
1307
|
-
import
|
|
1274
|
+
import React38, { useCallback as useCallback7, useContext as useContext9 } from "react";
|
|
1308
1275
|
import { ApplianceNames as ApplianceNames2 } from "white-web-sdk";
|
|
1309
1276
|
|
|
1310
1277
|
// src/components/Toolbar/components/ColorBox.tsx
|
|
1311
1278
|
import clsx5 from "clsx";
|
|
1312
|
-
import
|
|
1279
|
+
import React35, { useContext as useContext6 } from "react";
|
|
1313
1280
|
var colors = {
|
|
1314
1281
|
"#E02020": [224, 32, 32],
|
|
1315
1282
|
"#F7B500": [247, 181, 0],
|
|
@@ -1325,17 +1292,17 @@ function ColorBox() {
|
|
|
1325
1292
|
const { theme, memberState, setStrokeColor, writable } = useContext6(ToolbarContext);
|
|
1326
1293
|
const strokeColor = memberState == null ? void 0 : memberState.strokeColor;
|
|
1327
1294
|
const disabled = !writable;
|
|
1328
|
-
return /* @__PURE__ */
|
|
1295
|
+
return /* @__PURE__ */ React35.createElement("div", {
|
|
1329
1296
|
className: clsx5("fastboard-toolbar-color-box", theme)
|
|
1330
|
-
}, colorKeys.map((key) => /* @__PURE__ */
|
|
1297
|
+
}, colorKeys.map((key) => /* @__PURE__ */ React35.createElement("div", {
|
|
1331
1298
|
key,
|
|
1332
1299
|
className: clsx5("fastboard-toolbar-color-item", theme),
|
|
1333
1300
|
onClick: () => setStrokeColor(colors[key])
|
|
1334
|
-
}, /* @__PURE__ */
|
|
1301
|
+
}, /* @__PURE__ */ React35.createElement("div", {
|
|
1335
1302
|
className: clsx5("fastboard-toolbar-color-border", theme, {
|
|
1336
1303
|
active: strokeColor && isEqualArray(strokeColor, colors[key])
|
|
1337
1304
|
})
|
|
1338
|
-
}, /* @__PURE__ */
|
|
1305
|
+
}, /* @__PURE__ */ React35.createElement("button", {
|
|
1339
1306
|
className: clsx5("fastboard-toolbar-color-btn"),
|
|
1340
1307
|
style: { background: key },
|
|
1341
1308
|
disabled,
|
|
@@ -1348,10 +1315,10 @@ function ColorBox() {
|
|
|
1348
1315
|
|
|
1349
1316
|
// src/components/Toolbar/components/CutLine.tsx
|
|
1350
1317
|
import clsx6 from "clsx";
|
|
1351
|
-
import
|
|
1318
|
+
import React36, { useContext as useContext7 } from "react";
|
|
1352
1319
|
function CutLine() {
|
|
1353
1320
|
const { theme } = useContext7(ToolbarContext);
|
|
1354
|
-
return /* @__PURE__ */
|
|
1321
|
+
return /* @__PURE__ */ React36.createElement("span", {
|
|
1355
1322
|
className: clsx6(`${name4}-cut-line`, theme)
|
|
1356
1323
|
});
|
|
1357
1324
|
}
|
|
@@ -1359,12 +1326,12 @@ function CutLine() {
|
|
|
1359
1326
|
// src/components/Toolbar/components/Slider.tsx
|
|
1360
1327
|
import clsx7 from "clsx";
|
|
1361
1328
|
import RcSlider from "rc-slider";
|
|
1362
|
-
import
|
|
1329
|
+
import React37, { useContext as useContext8 } from "react";
|
|
1363
1330
|
function Slider() {
|
|
1364
1331
|
const { theme, writable, memberState, setStrokeWidth } = useContext8(ToolbarContext);
|
|
1365
1332
|
const { activeColor } = themes[theme];
|
|
1366
1333
|
const strokeWidth = (memberState == null ? void 0 : memberState.strokeWidth) || 0;
|
|
1367
|
-
return /* @__PURE__ */
|
|
1334
|
+
return /* @__PURE__ */ React37.createElement(RcSlider, {
|
|
1368
1335
|
disabled: !writable,
|
|
1369
1336
|
className: clsx7("fastboard-toolbar-slider", theme),
|
|
1370
1337
|
trackStyle: { background: activeColor },
|
|
@@ -1388,9 +1355,9 @@ function PencilButton() {
|
|
|
1388
1355
|
const active = appliance === ApplianceNames2.pencil;
|
|
1389
1356
|
const disabled = !writable;
|
|
1390
1357
|
const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToPencil;
|
|
1391
|
-
return /* @__PURE__ */
|
|
1358
|
+
return /* @__PURE__ */ React38.createElement("span", {
|
|
1392
1359
|
className: "fastboard-toolbar-btn-interactive"
|
|
1393
|
-
}, /* @__PURE__ */
|
|
1360
|
+
}, /* @__PURE__ */ React38.createElement(Tippy6, {
|
|
1394
1361
|
className: "fastboard-tip",
|
|
1395
1362
|
content: renderPencilButtonContent(),
|
|
1396
1363
|
theme,
|
|
@@ -1399,30 +1366,30 @@ function PencilButton() {
|
|
|
1399
1366
|
offset: RightOffset,
|
|
1400
1367
|
arrow: false,
|
|
1401
1368
|
interactive: true
|
|
1402
|
-
}, /* @__PURE__ */
|
|
1369
|
+
}, /* @__PURE__ */ React38.createElement(Button, {
|
|
1403
1370
|
content: renderToolTip(t("pencil"), shortcut),
|
|
1404
1371
|
active,
|
|
1405
1372
|
onClick: changeAppliance
|
|
1406
|
-
}, /* @__PURE__ */
|
|
1407
|
-
fallback: /* @__PURE__ */
|
|
1373
|
+
}, /* @__PURE__ */ React38.createElement(Icon, {
|
|
1374
|
+
fallback: /* @__PURE__ */ React38.createElement(Icons.Pencil, {
|
|
1408
1375
|
theme,
|
|
1409
1376
|
active
|
|
1410
1377
|
}),
|
|
1411
1378
|
src: disabled ? icons == null ? void 0 : icons.pencilIconDisable : icons == null ? void 0 : icons.pencilIcon,
|
|
1412
1379
|
alt: "[pencil]"
|
|
1413
|
-
}), /* @__PURE__ */
|
|
1380
|
+
}), /* @__PURE__ */ React38.createElement("span", {
|
|
1414
1381
|
className: "fastboard-toolbar-triangle"
|
|
1415
1382
|
}))));
|
|
1416
1383
|
}
|
|
1417
1384
|
function renderPencilButtonContent() {
|
|
1418
|
-
return /* @__PURE__ */
|
|
1385
|
+
return /* @__PURE__ */ React38.createElement("div", {
|
|
1419
1386
|
className: "fastboard-toolbar-panel pencil"
|
|
1420
|
-
}, /* @__PURE__ */
|
|
1387
|
+
}, /* @__PURE__ */ React38.createElement(Slider, null), /* @__PURE__ */ React38.createElement(CutLine, null), /* @__PURE__ */ React38.createElement(ColorBox, null));
|
|
1421
1388
|
}
|
|
1422
1389
|
|
|
1423
1390
|
// src/components/Toolbar/components/ShapesButton.tsx
|
|
1424
1391
|
import Tippy7 from "@tippyjs/react";
|
|
1425
|
-
import
|
|
1392
|
+
import React39, { useContext as useContext10 } from "react";
|
|
1426
1393
|
import { ApplianceNames as ApplianceNames4 } from "white-web-sdk";
|
|
1427
1394
|
|
|
1428
1395
|
// src/components/Toolbar/const.ts
|
|
@@ -1464,9 +1431,9 @@ function ShapesButton() {
|
|
|
1464
1431
|
const key = appliance === ApplianceNames4.shape ? shape : appliance;
|
|
1465
1432
|
const active = ShapeTypes.has(key);
|
|
1466
1433
|
const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
|
|
1467
|
-
return /* @__PURE__ */
|
|
1434
|
+
return /* @__PURE__ */ React39.createElement("span", {
|
|
1468
1435
|
className: "fastboard-toolbar-btn-interactive"
|
|
1469
|
-
}, /* @__PURE__ */
|
|
1436
|
+
}, /* @__PURE__ */ React39.createElement(Tippy7, {
|
|
1470
1437
|
className: "fastboard-tip",
|
|
1471
1438
|
content: renderShapesButtonContent(),
|
|
1472
1439
|
theme,
|
|
@@ -1475,31 +1442,31 @@ function ShapesButton() {
|
|
|
1475
1442
|
offset: RightOffset,
|
|
1476
1443
|
arrow: false,
|
|
1477
1444
|
interactive: true
|
|
1478
|
-
}, /* @__PURE__ */
|
|
1445
|
+
}, /* @__PURE__ */ React39.createElement(Button, {
|
|
1479
1446
|
content: t("shape"),
|
|
1480
1447
|
active
|
|
1481
|
-
}, /* @__PURE__ */
|
|
1448
|
+
}, /* @__PURE__ */ React39.createElement(CurrentIcon, {
|
|
1482
1449
|
theme,
|
|
1483
1450
|
active
|
|
1484
|
-
}), /* @__PURE__ */
|
|
1451
|
+
}), /* @__PURE__ */ React39.createElement("span", {
|
|
1485
1452
|
className: "fastboard-toolbar-triangle"
|
|
1486
1453
|
}))));
|
|
1487
1454
|
}
|
|
1488
1455
|
function renderShapesButtonContent() {
|
|
1489
|
-
return /* @__PURE__ */
|
|
1456
|
+
return /* @__PURE__ */ React39.createElement("div", {
|
|
1490
1457
|
className: "fastboard-toolbar-panel shapes"
|
|
1491
|
-
}, /* @__PURE__ */
|
|
1458
|
+
}, /* @__PURE__ */ React39.createElement(ShapesBox, null), /* @__PURE__ */ React39.createElement(CutLine, null), /* @__PURE__ */ React39.createElement(Slider, null), /* @__PURE__ */ React39.createElement(CutLine, null), /* @__PURE__ */ React39.createElement(ColorBox, null));
|
|
1492
1459
|
}
|
|
1493
1460
|
function ShapesBox() {
|
|
1494
1461
|
const { t } = useTranslation();
|
|
1495
|
-
return /* @__PURE__ */
|
|
1462
|
+
return /* @__PURE__ */ React39.createElement("div", {
|
|
1496
1463
|
className: "fastboard-toolbar-shapes"
|
|
1497
|
-
}, ApplianceShapes.map((Appliance) => /* @__PURE__ */
|
|
1464
|
+
}, ApplianceShapes.map((Appliance) => /* @__PURE__ */ React39.createElement(ApplianceShapeButton, {
|
|
1498
1465
|
key: Appliance,
|
|
1499
1466
|
content: t(Appliance),
|
|
1500
1467
|
Appliance,
|
|
1501
1468
|
Icon: ShapesMap[Appliance]
|
|
1502
|
-
})), Shapes.map((shape) => /* @__PURE__ */
|
|
1469
|
+
})), Shapes.map((shape) => /* @__PURE__ */ React39.createElement(ShapeShapeButton, {
|
|
1503
1470
|
key: shape,
|
|
1504
1471
|
content: t(shape),
|
|
1505
1472
|
shape,
|
|
@@ -1510,12 +1477,12 @@ function ApplianceShapeButton({ content, Appliance, Icon: Icon2 }) {
|
|
|
1510
1477
|
const { theme, writable, setAppliance, memberState } = useContext10(ToolbarContext);
|
|
1511
1478
|
const current = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1512
1479
|
const disabled = !writable;
|
|
1513
|
-
return /* @__PURE__ */
|
|
1480
|
+
return /* @__PURE__ */ React39.createElement(Button, {
|
|
1514
1481
|
content,
|
|
1515
1482
|
disabled,
|
|
1516
1483
|
placement: "top",
|
|
1517
1484
|
onClick: () => setAppliance(Appliance)
|
|
1518
|
-
}, /* @__PURE__ */
|
|
1485
|
+
}, /* @__PURE__ */ React39.createElement(Icon2, {
|
|
1519
1486
|
theme,
|
|
1520
1487
|
active: current === Appliance
|
|
1521
1488
|
}));
|
|
@@ -1525,12 +1492,12 @@ function ShapeShapeButton({ content, shape, Icon: Icon2 }) {
|
|
|
1525
1492
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1526
1493
|
const current = appliance === ApplianceNames4.shape && (memberState == null ? void 0 : memberState.shapeType);
|
|
1527
1494
|
const disabled = !writable;
|
|
1528
|
-
return /* @__PURE__ */
|
|
1495
|
+
return /* @__PURE__ */ React39.createElement(Button, {
|
|
1529
1496
|
content,
|
|
1530
1497
|
disabled,
|
|
1531
1498
|
placement: "top",
|
|
1532
1499
|
onClick: () => setAppliance(ApplianceNames4.shape, shape)
|
|
1533
|
-
}, /* @__PURE__ */
|
|
1500
|
+
}, /* @__PURE__ */ React39.createElement(Icon2, {
|
|
1534
1501
|
theme,
|
|
1535
1502
|
active: current === shape
|
|
1536
1503
|
}));
|
|
@@ -1538,7 +1505,7 @@ function ShapeShapeButton({ content, shape, Icon: Icon2 }) {
|
|
|
1538
1505
|
|
|
1539
1506
|
// src/components/Toolbar/components/TextButton.tsx
|
|
1540
1507
|
import Tippy8 from "@tippyjs/react";
|
|
1541
|
-
import
|
|
1508
|
+
import React40, { useCallback as useCallback8, useContext as useContext11 } from "react";
|
|
1542
1509
|
import { ApplianceNames as ApplianceNames5 } from "white-web-sdk";
|
|
1543
1510
|
function TextButton() {
|
|
1544
1511
|
const app = useFastboardApp();
|
|
@@ -1551,9 +1518,9 @@ function TextButton() {
|
|
|
1551
1518
|
const active = appliance === ApplianceNames5.text;
|
|
1552
1519
|
const disabled = !writable;
|
|
1553
1520
|
const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToText;
|
|
1554
|
-
return /* @__PURE__ */
|
|
1521
|
+
return /* @__PURE__ */ React40.createElement("span", {
|
|
1555
1522
|
className: "fastboard-toolbar-btn-interactive"
|
|
1556
|
-
}, /* @__PURE__ */
|
|
1523
|
+
}, /* @__PURE__ */ React40.createElement(Tippy8, {
|
|
1557
1524
|
className: "fastboard-tip",
|
|
1558
1525
|
content: renderTextButtonContent(),
|
|
1559
1526
|
theme,
|
|
@@ -1562,53 +1529,53 @@ function TextButton() {
|
|
|
1562
1529
|
offset: RightOffset,
|
|
1563
1530
|
arrow: false,
|
|
1564
1531
|
interactive: true
|
|
1565
|
-
}, /* @__PURE__ */
|
|
1532
|
+
}, /* @__PURE__ */ React40.createElement(Button, {
|
|
1566
1533
|
content: renderToolTip(t("text"), shortcut),
|
|
1567
1534
|
active,
|
|
1568
1535
|
onClick: changeAppliance
|
|
1569
|
-
}, /* @__PURE__ */
|
|
1570
|
-
fallback: /* @__PURE__ */
|
|
1536
|
+
}, /* @__PURE__ */ React40.createElement(Icon, {
|
|
1537
|
+
fallback: /* @__PURE__ */ React40.createElement(Icons.Text, {
|
|
1571
1538
|
theme,
|
|
1572
1539
|
active
|
|
1573
1540
|
}),
|
|
1574
1541
|
src: disabled ? icons == null ? void 0 : icons.textIconDisable : icons == null ? void 0 : icons.textIcon,
|
|
1575
1542
|
alt: "[text]"
|
|
1576
|
-
}), /* @__PURE__ */
|
|
1543
|
+
}), /* @__PURE__ */ React40.createElement("span", {
|
|
1577
1544
|
className: "fastboard-toolbar-triangle"
|
|
1578
1545
|
}))));
|
|
1579
1546
|
}
|
|
1580
1547
|
function renderTextButtonContent() {
|
|
1581
|
-
return /* @__PURE__ */
|
|
1548
|
+
return /* @__PURE__ */ React40.createElement("div", {
|
|
1582
1549
|
className: "fastboard-toolbar-panel text"
|
|
1583
|
-
}, /* @__PURE__ */
|
|
1550
|
+
}, /* @__PURE__ */ React40.createElement(ColorBox, null));
|
|
1584
1551
|
}
|
|
1585
1552
|
|
|
1586
1553
|
// src/components/Toolbar/components/UpDownButtons.tsx
|
|
1587
|
-
import
|
|
1554
|
+
import React41, { useCallback as useCallback9, useContext as useContext12 } from "react";
|
|
1588
1555
|
function UpButton({ disabled, scrollTo }) {
|
|
1589
1556
|
const { theme, icons } = useContext12(ToolbarContext);
|
|
1590
1557
|
const scrollUp = useCallback9(() => scrollTo(-ItemHeight), [scrollTo]);
|
|
1591
|
-
return /* @__PURE__ */
|
|
1558
|
+
return /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(Button, {
|
|
1592
1559
|
content: "Up",
|
|
1593
1560
|
disabled,
|
|
1594
1561
|
onClick: scrollUp
|
|
1595
|
-
}, /* @__PURE__ */
|
|
1596
|
-
fallback: /* @__PURE__ */
|
|
1562
|
+
}, /* @__PURE__ */ React41.createElement(Icon, {
|
|
1563
|
+
fallback: /* @__PURE__ */ React41.createElement(Icons.Up, {
|
|
1597
1564
|
theme
|
|
1598
1565
|
}),
|
|
1599
1566
|
src: disabled ? icons == null ? void 0 : icons.upIconDisable : icons == null ? void 0 : icons.upIcon,
|
|
1600
1567
|
alt: "[up]"
|
|
1601
|
-
})), /* @__PURE__ */
|
|
1568
|
+
})), /* @__PURE__ */ React41.createElement(CutLine, null));
|
|
1602
1569
|
}
|
|
1603
1570
|
function DownButton({ disabled, scrollTo }) {
|
|
1604
1571
|
const { theme, icons } = useContext12(ToolbarContext);
|
|
1605
1572
|
const scrollDown = useCallback9(() => scrollTo(ItemHeight), [scrollTo]);
|
|
1606
|
-
return /* @__PURE__ */
|
|
1573
|
+
return /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(CutLine, null), /* @__PURE__ */ React41.createElement(Button, {
|
|
1607
1574
|
content: "Down",
|
|
1608
1575
|
disabled,
|
|
1609
1576
|
onClick: scrollDown
|
|
1610
|
-
}, /* @__PURE__ */
|
|
1611
|
-
fallback: /* @__PURE__ */
|
|
1577
|
+
}, /* @__PURE__ */ React41.createElement(Icon, {
|
|
1578
|
+
fallback: /* @__PURE__ */ React41.createElement(Icons.Down, {
|
|
1612
1579
|
theme
|
|
1613
1580
|
}),
|
|
1614
1581
|
src: disabled ? icons == null ? void 0 : icons.downIconDisable : icons == null ? void 0 : icons.downIcon,
|
|
@@ -1616,11 +1583,16 @@ function DownButton({ disabled, scrollTo }) {
|
|
|
1616
1583
|
})));
|
|
1617
1584
|
}
|
|
1618
1585
|
|
|
1586
|
+
// src/components/Toolbar/components/assets/collapsed.png
|
|
1587
|
+
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";
|
|
1588
|
+
|
|
1619
1589
|
// src/components/Toolbar/Content.tsx
|
|
1620
|
-
|
|
1590
|
+
function Content({ onCollapse }) {
|
|
1591
|
+
const { theme, icons, writable } = useContext13(ToolbarContext);
|
|
1621
1592
|
const ref = useRef2(null);
|
|
1622
|
-
const [scrollTop, setScrollTop] =
|
|
1623
|
-
const [parentHeight, setParentHeight] =
|
|
1593
|
+
const [scrollTop, setScrollTop] = useState3(0);
|
|
1594
|
+
const [parentHeight, setParentHeight] = useState3(0);
|
|
1595
|
+
const disabled = !writable;
|
|
1624
1596
|
const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
|
|
1625
1597
|
const sectionHeight = clamp(parentHeight - 48 * (needScroll ? 3 : 1), MinHeight, MaxHeight);
|
|
1626
1598
|
const scrollBuffer = Math.max(parentHeight - sectionHeight - 1, 0);
|
|
@@ -1629,12 +1601,12 @@ var Content = React43.memo(() => {
|
|
|
1629
1601
|
const scrollTo = useCallback10((height) => {
|
|
1630
1602
|
setScrollTop(clamp(scrollTop + height, 0, scrollBuffer));
|
|
1631
1603
|
}, [scrollBuffer, scrollTop]);
|
|
1632
|
-
|
|
1604
|
+
useEffect3(() => {
|
|
1633
1605
|
if (ref.current) {
|
|
1634
1606
|
ref.current.scrollTop = scrollTop;
|
|
1635
1607
|
}
|
|
1636
1608
|
}, [scrollTop]);
|
|
1637
|
-
|
|
1609
|
+
useEffect3(() => {
|
|
1638
1610
|
var _a, _b;
|
|
1639
1611
|
const container = (_b = (_a = ref.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
|
|
1640
1612
|
if (container) {
|
|
@@ -1647,95 +1619,82 @@ var Content = React43.memo(() => {
|
|
|
1647
1619
|
return () => resizeObserver.disconnect();
|
|
1648
1620
|
}
|
|
1649
1621
|
}, []);
|
|
1650
|
-
return /* @__PURE__ */
|
|
1622
|
+
return /* @__PURE__ */ React42.createElement(React42.Fragment, null, needScroll && /* @__PURE__ */ React42.createElement(UpButton, {
|
|
1651
1623
|
scrollTo,
|
|
1652
1624
|
disabled: disableScrollUp
|
|
1653
|
-
}), /* @__PURE__ */
|
|
1625
|
+
}), /* @__PURE__ */ React42.createElement("div", {
|
|
1654
1626
|
ref,
|
|
1655
1627
|
className: clsx8(`${name4}-section`),
|
|
1656
1628
|
style: {
|
|
1657
1629
|
height: `${sectionHeight}px`,
|
|
1658
1630
|
overflow: needScroll ? "hidden" : "visible"
|
|
1659
1631
|
}
|
|
1660
|
-
}, /* @__PURE__ */
|
|
1632
|
+
}, /* @__PURE__ */ React42.createElement(ClickerButton, null), /* @__PURE__ */ React42.createElement(SelectorButton, null), /* @__PURE__ */ React42.createElement(PencilButton, null), /* @__PURE__ */ React42.createElement(TextButton, null), /* @__PURE__ */ React42.createElement(ShapesButton, null), /* @__PURE__ */ React42.createElement(EraserButton, null), /* @__PURE__ */ React42.createElement(CleanButton, null), /* @__PURE__ */ React42.createElement(AppsButton, null)), needScroll && /* @__PURE__ */ React42.createElement(DownButton, {
|
|
1661
1633
|
scrollTo,
|
|
1662
1634
|
disabled: disableScrollDown
|
|
1663
|
-
})
|
|
1664
|
-
|
|
1635
|
+
}), /* @__PURE__ */ React42.createElement("div", {
|
|
1636
|
+
className: clsx8("fastboard-toolbar-mask", theme),
|
|
1637
|
+
onClick: onCollapse
|
|
1638
|
+
}, /* @__PURE__ */ React42.createElement(Icon, {
|
|
1639
|
+
fallback: /* @__PURE__ */ React42.createElement("img", {
|
|
1640
|
+
draggable: false,
|
|
1641
|
+
className: clsx8(`${name4}-mask-btn`, theme),
|
|
1642
|
+
src: collapsed_default
|
|
1643
|
+
}),
|
|
1644
|
+
src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
|
|
1645
|
+
})));
|
|
1646
|
+
}
|
|
1665
1647
|
|
|
1666
1648
|
// src/components/Toolbar/Toolbar.tsx
|
|
1667
1649
|
var ToolbarContext = createContext3(__spreadValues({
|
|
1668
1650
|
theme: "light"
|
|
1669
1651
|
}, EmptyToolbarHook));
|
|
1670
1652
|
var name4 = "fastboard-toolbar";
|
|
1671
|
-
|
|
1653
|
+
function Toolbar({ theme, icons }) {
|
|
1672
1654
|
theme = useTheme(theme);
|
|
1673
1655
|
const hook = useToolbar();
|
|
1674
|
-
const [expanded, setExpanded] =
|
|
1675
|
-
const [
|
|
1676
|
-
const [onHover, setOnHover] = useState5(false);
|
|
1677
|
-
const [delayedOnHover, setDelayedOnHover] = useState5(false);
|
|
1678
|
-
const [pointEvents, setPointEvents] = useState5(true);
|
|
1656
|
+
const [expanded, setExpanded] = useState4(true);
|
|
1657
|
+
const [pointerEvents, setPointerEvents] = useState4("auto");
|
|
1679
1658
|
const disabled = !hook.writable;
|
|
1680
|
-
|
|
1681
|
-
setExpanded((e) => !e);
|
|
1682
|
-
}, []);
|
|
1683
|
-
useEffect5(() => {
|
|
1684
|
-
const timer = setTimeout(() => {
|
|
1685
|
-
setDelayedOnHover(onHover);
|
|
1686
|
-
}, 400);
|
|
1687
|
-
return () => clearTimeout(timer);
|
|
1688
|
-
}, [onHover]);
|
|
1689
|
-
return /* @__PURE__ */ React44.createElement(ToolbarContext.Provider, {
|
|
1659
|
+
return /* @__PURE__ */ React43.createElement(ToolbarContext.Provider, {
|
|
1690
1660
|
value: __spreadValues({ theme, icons }, hook)
|
|
1691
|
-
}, /* @__PURE__ */
|
|
1692
|
-
initial: { x: -100 },
|
|
1693
|
-
animate: { x: 0, transition: { duration: 0.5 } },
|
|
1661
|
+
}, /* @__PURE__ */ React43.createElement(AnimatePresence, null, expanded ? /* @__PURE__ */ React43.createElement(motion.div, {
|
|
1694
1662
|
key: "toolbar",
|
|
1695
|
-
ref: toolbarRef,
|
|
1696
1663
|
className: clsx9(name4, theme),
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
},
|
|
1700
|
-
onMouseLeave: () => setOnHover(false),
|
|
1664
|
+
initial: { x: -100 },
|
|
1665
|
+
animate: { x: 0, transition: { duration: 0.5 } },
|
|
1701
1666
|
exit: { x: -100, transition: { duration: 0.5 } },
|
|
1702
|
-
onAnimationStart: () =>
|
|
1703
|
-
onAnimationComplete: () =>
|
|
1704
|
-
style: { pointerEvents
|
|
1705
|
-
}, /* @__PURE__ */
|
|
1706
|
-
|
|
1707
|
-
}
|
|
1708
|
-
onClick: toggle
|
|
1709
|
-
}, /* @__PURE__ */ React44.createElement("img", {
|
|
1710
|
-
draggable: false,
|
|
1711
|
-
className: clsx9(`${name4}-mask-btn`, theme),
|
|
1712
|
-
src: collapsed_default
|
|
1713
|
-
})))) : /* @__PURE__ */ React44.createElement(motion.div, {
|
|
1667
|
+
onAnimationStart: () => setPointerEvents("none"),
|
|
1668
|
+
onAnimationComplete: () => setPointerEvents("auto"),
|
|
1669
|
+
style: { pointerEvents }
|
|
1670
|
+
}, /* @__PURE__ */ React43.createElement(Content, {
|
|
1671
|
+
onCollapse: () => setExpanded(false)
|
|
1672
|
+
})) : /* @__PURE__ */ React43.createElement(motion.div, {
|
|
1714
1673
|
className: clsx9(`${name4}-expand-btn`, theme),
|
|
1715
1674
|
key: "expand",
|
|
1716
|
-
onClick:
|
|
1675
|
+
onClick: () => setExpanded(true),
|
|
1717
1676
|
initial: { x: -100 },
|
|
1718
1677
|
animate: { x: 0, transition: { duration: 0.5 } }
|
|
1719
|
-
},
|
|
1720
|
-
fallback: /* @__PURE__ */
|
|
1678
|
+
}, /* @__PURE__ */ React43.createElement(Icon, {
|
|
1679
|
+
fallback: /* @__PURE__ */ React43.createElement("img", {
|
|
1721
1680
|
draggable: false,
|
|
1722
1681
|
src: expanded_default,
|
|
1723
1682
|
className: clsx9(`${name4}-mask-btn`, theme)
|
|
1724
1683
|
}),
|
|
1725
1684
|
src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
|
|
1726
1685
|
}))));
|
|
1727
|
-
}
|
|
1686
|
+
}
|
|
1728
1687
|
|
|
1729
1688
|
// src/components/PlayerControl/hooks.ts
|
|
1730
|
-
import { useCallback as
|
|
1689
|
+
import { useCallback as useCallback11, useEffect as useEffect4, useState as useState5 } from "react";
|
|
1731
1690
|
import { PlayerPhase } from "white-web-sdk";
|
|
1732
1691
|
var EMPTY_ARRAY = [];
|
|
1733
1692
|
function useForceUpdate2() {
|
|
1734
|
-
const [, forceUpdate_] =
|
|
1735
|
-
return
|
|
1693
|
+
const [, forceUpdate_] = useState5({});
|
|
1694
|
+
return useCallback11(() => forceUpdate_({}), EMPTY_ARRAY);
|
|
1736
1695
|
}
|
|
1737
1696
|
function usePlayerControl(player) {
|
|
1738
|
-
const togglePlay =
|
|
1697
|
+
const togglePlay = useCallback11(() => {
|
|
1739
1698
|
if (player) {
|
|
1740
1699
|
switch (player.phase) {
|
|
1741
1700
|
case PlayerPhase.WaitingFirstFrame:
|
|
@@ -1751,25 +1710,25 @@ function usePlayerControl(player) {
|
|
|
1751
1710
|
}
|
|
1752
1711
|
}
|
|
1753
1712
|
}, [player]);
|
|
1754
|
-
const seekToProgressTime =
|
|
1713
|
+
const seekToProgressTime = useCallback11((time) => {
|
|
1755
1714
|
if (player) {
|
|
1756
1715
|
player.seekToProgressTime(time);
|
|
1757
1716
|
}
|
|
1758
1717
|
}, [player]);
|
|
1759
1718
|
const lastPlayer = useLastValue(player);
|
|
1760
1719
|
const forceUpdate = useForceUpdate2();
|
|
1761
|
-
const setSpeed =
|
|
1720
|
+
const setSpeed = useCallback11((speed2) => {
|
|
1762
1721
|
if (player) {
|
|
1763
1722
|
player.playbackSpeed = speed2;
|
|
1764
1723
|
forceUpdate();
|
|
1765
1724
|
}
|
|
1766
1725
|
}, [forceUpdate, player]);
|
|
1767
|
-
|
|
1726
|
+
useEffect4(() => {
|
|
1768
1727
|
if (!lastPlayer && player) {
|
|
1769
1728
|
forceUpdate();
|
|
1770
1729
|
}
|
|
1771
1730
|
}, [forceUpdate, lastPlayer, player]);
|
|
1772
|
-
|
|
1731
|
+
useEffect4(() => {
|
|
1773
1732
|
if (player) {
|
|
1774
1733
|
player.callbacks.on("onPhaseChanged", forceUpdate);
|
|
1775
1734
|
player.callbacks.on("onProgressTimeChanged", forceUpdate);
|
|
@@ -1798,16 +1757,16 @@ function usePlayerControl(player) {
|
|
|
1798
1757
|
import Tippy10 from "@tippyjs/react";
|
|
1799
1758
|
import clsx11 from "clsx";
|
|
1800
1759
|
import RcSlider2 from "rc-slider";
|
|
1801
|
-
import
|
|
1760
|
+
import React48, { useEffect as useEffect5, useState as useState6 } from "react";
|
|
1802
1761
|
import { PlayerPhase as PlayerPhase2 } from "white-web-sdk";
|
|
1803
1762
|
|
|
1804
1763
|
// src/components/PlayerControl/components/Button.tsx
|
|
1805
1764
|
import clsx10 from "clsx";
|
|
1806
|
-
import
|
|
1765
|
+
import React44, { forwardRef as forwardRef2 } from "react";
|
|
1807
1766
|
import Tippy9 from "@tippyjs/react";
|
|
1808
1767
|
var Button2 = forwardRef2((props, ref) => {
|
|
1809
1768
|
const { theme, content, disabled, active, onClick, interactive, placement = "top", children } = props;
|
|
1810
|
-
return /* @__PURE__ */
|
|
1769
|
+
return /* @__PURE__ */ React44.createElement(Tippy9, {
|
|
1811
1770
|
className: "fastboard-tip",
|
|
1812
1771
|
content,
|
|
1813
1772
|
interactive,
|
|
@@ -1817,7 +1776,7 @@ var Button2 = forwardRef2((props, ref) => {
|
|
|
1817
1776
|
offset: TopOffset,
|
|
1818
1777
|
delay: [1e3, 400],
|
|
1819
1778
|
duration: 300
|
|
1820
|
-
}, /* @__PURE__ */
|
|
1779
|
+
}, /* @__PURE__ */ React44.createElement("button", {
|
|
1821
1780
|
ref,
|
|
1822
1781
|
className: clsx10("fastboard-player-control-btn", theme, { active }),
|
|
1823
1782
|
onClick,
|
|
@@ -1829,36 +1788,36 @@ var Button2 = forwardRef2((props, ref) => {
|
|
|
1829
1788
|
import { memo as memo2 } from "react";
|
|
1830
1789
|
|
|
1831
1790
|
// src/components/PlayerControl/icons/Loading.tsx
|
|
1832
|
-
import
|
|
1791
|
+
import React45 from "react";
|
|
1833
1792
|
var Loading = (props) => {
|
|
1834
1793
|
const stroke = getStroke(props);
|
|
1835
|
-
return /* @__PURE__ */
|
|
1794
|
+
return /* @__PURE__ */ React45.createElement("svg", {
|
|
1836
1795
|
viewBox: "0 0 24 24"
|
|
1837
|
-
}, /* @__PURE__ */
|
|
1796
|
+
}, /* @__PURE__ */ React45.createElement("path", {
|
|
1838
1797
|
d: "M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z",
|
|
1839
1798
|
fill: stroke
|
|
1840
1799
|
}));
|
|
1841
1800
|
};
|
|
1842
1801
|
|
|
1843
1802
|
// src/components/PlayerControl/icons/Pause.tsx
|
|
1844
|
-
import
|
|
1803
|
+
import React46 from "react";
|
|
1845
1804
|
var Pause = (props) => {
|
|
1846
1805
|
const stroke = getStroke(props);
|
|
1847
|
-
return /* @__PURE__ */
|
|
1806
|
+
return /* @__PURE__ */ React46.createElement("svg", {
|
|
1848
1807
|
viewBox: "0 0 24 24"
|
|
1849
|
-
}, /* @__PURE__ */
|
|
1808
|
+
}, /* @__PURE__ */ React46.createElement("path", {
|
|
1850
1809
|
d: "M14 19h4V5h-4M6 19h4V5H6v14z",
|
|
1851
1810
|
fill: stroke
|
|
1852
1811
|
}));
|
|
1853
1812
|
};
|
|
1854
1813
|
|
|
1855
1814
|
// src/components/PlayerControl/icons/Play.tsx
|
|
1856
|
-
import
|
|
1815
|
+
import React47 from "react";
|
|
1857
1816
|
var Play = (props) => {
|
|
1858
1817
|
const stroke = getStroke(props);
|
|
1859
|
-
return /* @__PURE__ */
|
|
1818
|
+
return /* @__PURE__ */ React47.createElement("svg", {
|
|
1860
1819
|
viewBox: "0 0 24 24"
|
|
1861
|
-
}, /* @__PURE__ */
|
|
1820
|
+
}, /* @__PURE__ */ React47.createElement("path", {
|
|
1862
1821
|
d: "M8 5.14v14l11-7l-11-7z",
|
|
1863
1822
|
fill: stroke
|
|
1864
1823
|
}));
|
|
@@ -1877,12 +1836,12 @@ function PlayerControl(_a) {
|
|
|
1877
1836
|
var _b = _a, { theme, autoHide = false, player: player_ } = _b, icons = __objRest(_b, ["theme", "autoHide", "player"]);
|
|
1878
1837
|
theme = useTheme(theme);
|
|
1879
1838
|
const { t } = useTranslation();
|
|
1880
|
-
const [currentTime, setCurrentTime] =
|
|
1839
|
+
const [currentTime, setCurrentTime] = useState6(0);
|
|
1881
1840
|
const player = usePlayerControl(player_);
|
|
1882
|
-
|
|
1841
|
+
useEffect5(() => {
|
|
1883
1842
|
setCurrentTime(player.currentTime);
|
|
1884
1843
|
}, [player.currentTime]);
|
|
1885
|
-
|
|
1844
|
+
useEffect5(() => {
|
|
1886
1845
|
if (player.currentTime !== currentTime) {
|
|
1887
1846
|
player.seekToProgressTime(currentTime);
|
|
1888
1847
|
}
|
|
@@ -1890,25 +1849,25 @@ function PlayerControl(_a) {
|
|
|
1890
1849
|
const isLoading = player.phase === PlayerPhase2.WaitingFirstFrame || player.phase === PlayerPhase2.Buffering;
|
|
1891
1850
|
const isPlaying = player.phase === PlayerPhase2.Playing;
|
|
1892
1851
|
const { activeColor } = themes[theme];
|
|
1893
|
-
return /* @__PURE__ */
|
|
1852
|
+
return /* @__PURE__ */ React48.createElement("div", {
|
|
1894
1853
|
className: clsx11(name5, theme, { "auto-hide": autoHide })
|
|
1895
|
-
}, /* @__PURE__ */
|
|
1854
|
+
}, /* @__PURE__ */ React48.createElement("button", {
|
|
1896
1855
|
className: clsx11(`${name5}-btn`, isLoading ? "loading" : isPlaying ? "pause" : "play", theme),
|
|
1897
1856
|
disabled: isLoading,
|
|
1898
1857
|
onClick: player.togglePlay
|
|
1899
|
-
}, /* @__PURE__ */
|
|
1900
|
-
fallback: isLoading ? /* @__PURE__ */
|
|
1858
|
+
}, /* @__PURE__ */ React48.createElement(Icon, {
|
|
1859
|
+
fallback: isLoading ? /* @__PURE__ */ React48.createElement(Icons2.Loading, {
|
|
1901
1860
|
theme
|
|
1902
|
-
}) : isPlaying ? /* @__PURE__ */
|
|
1861
|
+
}) : isPlaying ? /* @__PURE__ */ React48.createElement(Icons2.Pause, {
|
|
1903
1862
|
theme
|
|
1904
|
-
}) : /* @__PURE__ */
|
|
1863
|
+
}) : /* @__PURE__ */ React48.createElement(Icons2.Play, {
|
|
1905
1864
|
theme
|
|
1906
1865
|
}),
|
|
1907
1866
|
src: isLoading ? icons.loadingIcon : isPlaying ? icons.pauseIcon : icons.playIcon,
|
|
1908
1867
|
alt: isLoading ? "[loading]" : isPlaying ? "[pause]" : "[play]"
|
|
1909
|
-
})), /* @__PURE__ */
|
|
1868
|
+
})), /* @__PURE__ */ React48.createElement("span", {
|
|
1910
1869
|
className: clsx11(`${name5}-slider`, { loading: isLoading }, theme)
|
|
1911
|
-
}, /* @__PURE__ */
|
|
1870
|
+
}, /* @__PURE__ */ React48.createElement(RcSlider2, {
|
|
1912
1871
|
disabled: isLoading,
|
|
1913
1872
|
trackStyle: { background: activeColor },
|
|
1914
1873
|
handleStyle: { border: `1px solid ${activeColor}` },
|
|
@@ -1917,15 +1876,15 @@ function PlayerControl(_a) {
|
|
|
1917
1876
|
min: 0,
|
|
1918
1877
|
max: player.totalTime,
|
|
1919
1878
|
step: 100
|
|
1920
|
-
})), /* @__PURE__ */
|
|
1879
|
+
})), /* @__PURE__ */ React48.createElement("span", {
|
|
1921
1880
|
className: clsx11(`${name5}-current`, theme)
|
|
1922
|
-
}, renderTime(player.currentTime)), /* @__PURE__ */
|
|
1881
|
+
}, renderTime(player.currentTime)), /* @__PURE__ */ React48.createElement("span", {
|
|
1923
1882
|
className: clsx11(`${name5}-slash`, theme)
|
|
1924
|
-
}, "/"), /* @__PURE__ */
|
|
1883
|
+
}, "/"), /* @__PURE__ */ React48.createElement("span", {
|
|
1925
1884
|
className: clsx11(`${name5}-total`, theme)
|
|
1926
|
-
}, renderTime(player.totalTime)), /* @__PURE__ */
|
|
1885
|
+
}, renderTime(player.totalTime)), /* @__PURE__ */ React48.createElement("span", {
|
|
1927
1886
|
className: `${name5}-btn-interactive`
|
|
1928
|
-
}, /* @__PURE__ */
|
|
1887
|
+
}, /* @__PURE__ */ React48.createElement(Tippy10, {
|
|
1929
1888
|
className: "fastboard-tip",
|
|
1930
1889
|
content: renderSpeeds(player),
|
|
1931
1890
|
theme,
|
|
@@ -1934,11 +1893,11 @@ function PlayerControl(_a) {
|
|
|
1934
1893
|
offset: TopOffset,
|
|
1935
1894
|
arrow: false,
|
|
1936
1895
|
interactive: true
|
|
1937
|
-
}, /* @__PURE__ */
|
|
1896
|
+
}, /* @__PURE__ */ React48.createElement(Button2, {
|
|
1938
1897
|
content: t("speed"),
|
|
1939
1898
|
theme,
|
|
1940
1899
|
disabled: isLoading
|
|
1941
|
-
}, /* @__PURE__ */
|
|
1900
|
+
}, /* @__PURE__ */ React48.createElement("span", {
|
|
1942
1901
|
className: clsx11(`${name5}-speed-text`, theme)
|
|
1943
1902
|
}, player.speed, "x")))));
|
|
1944
1903
|
}
|
|
@@ -1950,9 +1909,9 @@ function renderTime(ms) {
|
|
|
1950
1909
|
}
|
|
1951
1910
|
var Speeds = [2, 1.5, 1.25, 1, 0.75, 0.5];
|
|
1952
1911
|
function renderSpeeds({ speed: current, setSpeed }) {
|
|
1953
|
-
return /* @__PURE__ */
|
|
1912
|
+
return /* @__PURE__ */ React48.createElement("div", {
|
|
1954
1913
|
className: clsx11(`${name5}-panel`, "speed")
|
|
1955
|
-
}, Speeds.map((speed) => /* @__PURE__ */
|
|
1914
|
+
}, Speeds.map((speed) => /* @__PURE__ */ React48.createElement("button", {
|
|
1956
1915
|
className: clsx11(`${name5}-btn`, "speed", {
|
|
1957
1916
|
active: speed === current
|
|
1958
1917
|
}),
|
|
@@ -1962,18 +1921,18 @@ function renderSpeeds({ speed: current, setSpeed }) {
|
|
|
1962
1921
|
}
|
|
1963
1922
|
|
|
1964
1923
|
// src/components/Fastboard.tsx
|
|
1965
|
-
import
|
|
1924
|
+
import React49, { forwardRef as forwardRef3, useCallback as useCallback12, useEffect as useEffect6 } from "react";
|
|
1966
1925
|
var Fastboard = /* @__PURE__ */ forwardRef3(function Fastboard2(_a, ref) {
|
|
1967
1926
|
var _b = _a, { app, theme, layout, language } = _b, restProps = __objRest(_b, ["app", "theme", "layout", "language"]);
|
|
1968
1927
|
if (!app) {
|
|
1969
|
-
return /* @__PURE__ */
|
|
1928
|
+
return /* @__PURE__ */ React49.createElement("div", __spreadValues({
|
|
1970
1929
|
className: "fastboard-root",
|
|
1971
1930
|
ref
|
|
1972
1931
|
}, restProps));
|
|
1973
1932
|
}
|
|
1974
|
-
return /* @__PURE__ */
|
|
1933
|
+
return /* @__PURE__ */ React49.createElement(FastboardAppContext.Provider, {
|
|
1975
1934
|
value: app
|
|
1976
|
-
}, /* @__PURE__ */
|
|
1935
|
+
}, /* @__PURE__ */ React49.createElement(FastboardInternal, __spreadValues(__spreadValues({
|
|
1977
1936
|
forwardedRef: ref
|
|
1978
1937
|
}, { theme, layout, language }), restProps)));
|
|
1979
1938
|
});
|
|
@@ -1994,15 +1953,15 @@ function FastboardInternal(_a) {
|
|
|
1994
1953
|
const app = useFastboardApp();
|
|
1995
1954
|
const forceUpdate = useForceUpdate();
|
|
1996
1955
|
const i18n = useAsyncValue(() => createI18n({ language }));
|
|
1997
|
-
|
|
1956
|
+
useEffect6(() => {
|
|
1998
1957
|
if (i18n)
|
|
1999
1958
|
i18n.changeLanguage(language);
|
|
2000
1959
|
forceUpdate();
|
|
2001
1960
|
}, [forceUpdate, i18n, language]);
|
|
2002
|
-
|
|
1961
|
+
useEffect6(() => {
|
|
2003
1962
|
app.manager.setPrefersColorScheme(theme);
|
|
2004
1963
|
}, [app, theme]);
|
|
2005
|
-
const useWhiteboard =
|
|
1964
|
+
const useWhiteboard = useCallback12((container) => {
|
|
2006
1965
|
if (container && app)
|
|
2007
1966
|
app.manager.bindContainer(container);
|
|
2008
1967
|
}, [app]);
|
|
@@ -2014,33 +1973,33 @@ function FastboardInternal(_a) {
|
|
|
2014
1973
|
ZoomControl: zoom_control = showControls,
|
|
2015
1974
|
PageControl: page_control = showControls
|
|
2016
1975
|
} = layout;
|
|
2017
|
-
return /* @__PURE__ */
|
|
1976
|
+
return /* @__PURE__ */ React49.createElement(ThemeContext.Provider, {
|
|
2018
1977
|
value: theme
|
|
2019
|
-
}, /* @__PURE__ */
|
|
1978
|
+
}, /* @__PURE__ */ React49.createElement(I18nContext.Provider, {
|
|
2020
1979
|
value: i18n
|
|
2021
|
-
}, /* @__PURE__ */
|
|
1980
|
+
}, /* @__PURE__ */ React49.createElement("div", __spreadProps(__spreadValues({}, restProps), {
|
|
2022
1981
|
className: "fastboard-root",
|
|
2023
1982
|
ref: forwardedRef
|
|
2024
|
-
}), /* @__PURE__ */
|
|
1983
|
+
}), /* @__PURE__ */ React49.createElement("div", {
|
|
2025
1984
|
className: "fastboard-view",
|
|
2026
1985
|
ref: useWhiteboard
|
|
2027
|
-
}), children ? children : /* @__PURE__ */
|
|
1986
|
+
}), children ? children : /* @__PURE__ */ React49.createElement(React49.Fragment, null, toolbar && /* @__PURE__ */ React49.createElement("div", {
|
|
2028
1987
|
className: "fastboard-left"
|
|
2029
|
-
}, /* @__PURE__ */
|
|
1988
|
+
}, /* @__PURE__ */ React49.createElement(Toolbar, null)), (redo_undo || zoom_control) && /* @__PURE__ */ React49.createElement("div", {
|
|
2030
1989
|
className: "fastboard-bottom-left"
|
|
2031
|
-
}, redo_undo && /* @__PURE__ */
|
|
1990
|
+
}, redo_undo && /* @__PURE__ */ React49.createElement(RedoUndo, null), zoom_control && /* @__PURE__ */ React49.createElement(ZoomControl, null)), page_control && /* @__PURE__ */ React49.createElement("div", {
|
|
2032
1991
|
className: "fastboard-bottom-right"
|
|
2033
|
-
}, /* @__PURE__ */
|
|
1992
|
+
}, /* @__PURE__ */ React49.createElement(PageControl, null))))));
|
|
2034
1993
|
}
|
|
2035
1994
|
|
|
2036
1995
|
// src/vanilla/index.tsx
|
|
2037
|
-
import
|
|
2038
|
-
import
|
|
1996
|
+
import React50 from "react";
|
|
1997
|
+
import ReactDOM from "react-dom";
|
|
2039
1998
|
function mount(app, dom, props) {
|
|
2040
|
-
|
|
1999
|
+
ReactDOM.render(/* @__PURE__ */ React50.createElement(Fastboard, __spreadValues({
|
|
2041
2000
|
app
|
|
2042
2001
|
}, props)), dom);
|
|
2043
|
-
return () =>
|
|
2002
|
+
return () => ReactDOM.unmountComponentAtNode(dom);
|
|
2044
2003
|
}
|
|
2045
2004
|
export {
|
|
2046
2005
|
EmptyToolbarHook,
|