@netless/fastboard-react 0.1.1 → 0.2.3
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 +386 -424
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +327 -361
- package/dist/index.mjs.map +1 -1
- package/package.json +17 -13
- package/src/components/Fastboard.tsx +13 -14
- 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 +4 -2
- package/src/index.ts +1 -0
- package/src/vanilla/index.tsx +18 -0
- 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 = '.page-renderer-pages-container{position:relative;overflow:hidden}.page-renderer-page{position:absolute;top:0;left:0;will-change:transform;background-position:center;background-size:cover;background-repeat:no-repeat}.page-renderer-page-img{display:block;width:100%;height:auto;user-select:none}.netless-app-docs-viewer-static-scrollbar{position:absolute;top:0;right:0;z-index:2147483647;width:8px;min-height:30px;margin:0;padding:0;border:none;outline:none;border-radius:4px;background:rgba(68,78,96,.4);box-shadow:1px 1px 8px #ffffffb3;opacity:0;transition:background .4s,opacity .4s 3s,transform .2s;will-change:transform,height;user-select:none}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrollbar-dragging{background:rgba(68,78,96,.6);opacity:1;transition:background .4s,opacity .4s 3s!important}.netless-app-docs-viewer-static-scrollbar:hover,.netless-app-docs-viewer-static-scrollbar:focus{background:rgba(68,78,96,.5)}.netless-app-docs-viewer-static-scrollbar:active{background:rgba(68,78,96,.6)}.netless-app-docs-viewer-content:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:background .4s,opacity .4s,transform .2s}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-static-scrollbar{display:none}.netless-app-docs-viewer-static-pages:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:background .4s,opacity .4s,transform .2s}.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 .05s;transform-origin:0 0;user-select:none}.netless-window-manager-cursor-pencil-offset{margin-left:-20px}.netless-window-manager-cursor-selector-offset{margin-left:-22px;margin-top:56px}.netless-window-manager-cursor-text-offset{margin-left:-30px;margin-top:18px}.netless-window-manager-cursor-shape-offset{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px;margin-left:-30px;margin-top:12px}.netless-window-manager-cursor-name{width:100%;height:48px;display:flex;align-items:center;justify-content:center;position:absolute;top:-40px}.cursor-image-wrapper{display:flex;justify-content:center}.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;will-change:transform;transition:width .4s cubic-bezier(.4,.9,.71,1.02),height .4s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px #2f419226;border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-resize-handle{position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{will-change:transform;transition:width 50ms cubic-bezier(.4,.9,.71,1.02),height 50ms cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7,0,.84,0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;background:#fff;user-select:none;border-bottom:1px solid #eeeef7;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);
|
|
@@ -89,8 +89,8 @@ applyStyles(style_default);
|
|
|
89
89
|
// src/components/hooks.ts
|
|
90
90
|
import { BuiltinApps } from "@netless/window-manager";
|
|
91
91
|
import { createContext, useContext, useEffect as useEffect2, useState as useState2 } from "react";
|
|
92
|
-
var FastboardAppContext = createContext(null);
|
|
93
|
-
var ThemeContext = createContext("light");
|
|
92
|
+
var FastboardAppContext = /* @__PURE__ */ createContext(null);
|
|
93
|
+
var ThemeContext = /* @__PURE__ */ createContext("light");
|
|
94
94
|
function useTheme(userTheme) {
|
|
95
95
|
const themeFromContext = useContext(ThemeContext);
|
|
96
96
|
return userTheme || themeFromContext;
|
|
@@ -119,11 +119,12 @@ function useFocusedApp() {
|
|
|
119
119
|
function useMaximized() {
|
|
120
120
|
return useBoxState() === "maximized";
|
|
121
121
|
}
|
|
122
|
+
var AppsShouldShowToolbar = /* @__PURE__ */ (() => [BuiltinApps.DocsViewer, "Slide"])();
|
|
122
123
|
function useHideControls() {
|
|
123
124
|
const maximized = useMaximized();
|
|
124
125
|
const focusedApp = useFocusedApp();
|
|
125
126
|
if (maximized) {
|
|
126
|
-
if (
|
|
127
|
+
if (AppsShouldShowToolbar.some((kind) => focusedApp == null ? void 0 : focusedApp.includes(kind))) {
|
|
127
128
|
return "toolbar-only";
|
|
128
129
|
} else {
|
|
129
130
|
return true;
|
|
@@ -235,7 +236,7 @@ var createI18n = async ({
|
|
|
235
236
|
});
|
|
236
237
|
return i18next;
|
|
237
238
|
};
|
|
238
|
-
var I18nContext = createContext2(null);
|
|
239
|
+
var I18nContext = /* @__PURE__ */ createContext2(null);
|
|
239
240
|
function useTranslation() {
|
|
240
241
|
const i18n = useContext2(I18nContext);
|
|
241
242
|
const t = useMemo(() => i18n ? i18n.getFixedT(null, ["translation"]) : (id) => id, [i18n]);
|
|
@@ -245,7 +246,7 @@ function useTranslation() {
|
|
|
245
246
|
// src/icons/index.tsx
|
|
246
247
|
import React from "react";
|
|
247
248
|
function Icon({ fallback, src, alt = "[icon]" }) {
|
|
248
|
-
return src ? React.createElement("img", {
|
|
249
|
+
return src ? /* @__PURE__ */ React.createElement("img", {
|
|
249
250
|
src,
|
|
250
251
|
alt,
|
|
251
252
|
title: alt
|
|
@@ -283,17 +284,17 @@ var RightOffset = [0, 11];
|
|
|
283
284
|
function Redo({ theme = "light", active }) {
|
|
284
285
|
const config = themes[theme];
|
|
285
286
|
const stroke = active ? config.activeColor : config.color;
|
|
286
|
-
return React2.createElement("svg", {
|
|
287
|
+
return /* @__PURE__ */ React2.createElement("svg", {
|
|
287
288
|
viewBox: "0 0 24 24"
|
|
288
|
-
}, React2.createElement("g", {
|
|
289
|
+
}, /* @__PURE__ */ React2.createElement("g", {
|
|
289
290
|
fill: "none",
|
|
290
291
|
fillRule: "evenodd",
|
|
291
292
|
stroke,
|
|
292
293
|
strokeLinecap: "round",
|
|
293
294
|
strokeLinejoin: "round"
|
|
294
|
-
}, React2.createElement("path", {
|
|
295
|
+
}, /* @__PURE__ */ React2.createElement("path", {
|
|
295
296
|
d: "M14 14h4v-4"
|
|
296
|
-
}), React2.createElement("path", {
|
|
297
|
+
}), /* @__PURE__ */ React2.createElement("path", {
|
|
297
298
|
d: "m18 14-.788-.9A7.005 7.005 0 0 0 6 14h0"
|
|
298
299
|
})));
|
|
299
300
|
}
|
|
@@ -303,17 +304,17 @@ import React3 from "react";
|
|
|
303
304
|
function Undo({ theme = "light", active }) {
|
|
304
305
|
const config = themes[theme];
|
|
305
306
|
const stroke = active ? config.activeColor : config.color;
|
|
306
|
-
return React3.createElement("svg", {
|
|
307
|
+
return /* @__PURE__ */ React3.createElement("svg", {
|
|
307
308
|
viewBox: "0 0 24 24"
|
|
308
|
-
}, React3.createElement("g", {
|
|
309
|
+
}, /* @__PURE__ */ React3.createElement("g", {
|
|
309
310
|
fill: "none",
|
|
310
311
|
fillRule: "evenodd",
|
|
311
312
|
stroke,
|
|
312
313
|
strokeLinecap: "round",
|
|
313
314
|
strokeLinejoin: "round"
|
|
314
|
-
}, React3.createElement("path", {
|
|
315
|
+
}, /* @__PURE__ */ React3.createElement("path", {
|
|
315
316
|
d: "M10 14H6v-4"
|
|
316
|
-
}), React3.createElement("path", {
|
|
317
|
+
}), /* @__PURE__ */ React3.createElement("path", {
|
|
317
318
|
d: "m6 14 .788-.9A7.005 7.005 0 0 1 18 14h0"
|
|
318
319
|
})));
|
|
319
320
|
}
|
|
@@ -326,9 +327,9 @@ function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable
|
|
|
326
327
|
const writable = useWritable();
|
|
327
328
|
const { redoSteps, undoSteps, redo, undo } = useRedoUndo();
|
|
328
329
|
const disabled = !writable;
|
|
329
|
-
return React4.createElement("div", {
|
|
330
|
+
return /* @__PURE__ */ React4.createElement("div", {
|
|
330
331
|
className: clsx(name, theme)
|
|
331
|
-
}, React4.createElement(Tippy, {
|
|
332
|
+
}, /* @__PURE__ */ React4.createElement(Tippy, {
|
|
332
333
|
className: "fastboard-tip",
|
|
333
334
|
content: t("undo"),
|
|
334
335
|
theme,
|
|
@@ -337,17 +338,17 @@ function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable
|
|
|
337
338
|
delay: [1e3, 400],
|
|
338
339
|
duration: 300,
|
|
339
340
|
offset: TopOffset
|
|
340
|
-
}, React4.createElement("button", {
|
|
341
|
+
}, /* @__PURE__ */ React4.createElement("button", {
|
|
341
342
|
className: clsx(`${name}-btn`, "undo", theme),
|
|
342
343
|
disabled: disabled || undoSteps === 0,
|
|
343
344
|
onClick: undo
|
|
344
|
-
}, React4.createElement(Icon, {
|
|
345
|
-
fallback: React4.createElement(Undo, {
|
|
345
|
+
}, /* @__PURE__ */ React4.createElement(Icon, {
|
|
346
|
+
fallback: /* @__PURE__ */ React4.createElement(Undo, {
|
|
346
347
|
theme
|
|
347
348
|
}),
|
|
348
349
|
src: undoSteps === 0 ? undoIconDisable : undoIcon,
|
|
349
350
|
alt: "[undo]"
|
|
350
|
-
}))), React4.createElement(Tippy, {
|
|
351
|
+
}))), /* @__PURE__ */ React4.createElement(Tippy, {
|
|
351
352
|
className: "fastboard-tip",
|
|
352
353
|
content: t("redo"),
|
|
353
354
|
theme,
|
|
@@ -356,12 +357,12 @@ function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable
|
|
|
356
357
|
delay: [1e3, 400],
|
|
357
358
|
duration: 300,
|
|
358
359
|
offset: TopOffset
|
|
359
|
-
}, React4.createElement("button", {
|
|
360
|
+
}, /* @__PURE__ */ React4.createElement("button", {
|
|
360
361
|
className: clsx(`${name}-btn`, "redo", theme),
|
|
361
362
|
disabled: disabled || redoSteps === 0,
|
|
362
363
|
onClick: redo
|
|
363
|
-
}, React4.createElement(Icon, {
|
|
364
|
-
fallback: React4.createElement(Redo, {
|
|
364
|
+
}, /* @__PURE__ */ React4.createElement(Icon, {
|
|
365
|
+
fallback: /* @__PURE__ */ React4.createElement(Redo, {
|
|
365
366
|
theme
|
|
366
367
|
}),
|
|
367
368
|
src: redoSteps === 0 ? redoIconDisable : redoIcon,
|
|
@@ -443,9 +444,9 @@ import React5 from "react";
|
|
|
443
444
|
function Minus({ theme = "light", active }) {
|
|
444
445
|
const config = themes[theme];
|
|
445
446
|
const stroke = active ? config.activeColor : config.color;
|
|
446
|
-
return React5.createElement("svg", {
|
|
447
|
+
return /* @__PURE__ */ React5.createElement("svg", {
|
|
447
448
|
viewBox: "0 0 24 24"
|
|
448
|
-
}, React5.createElement("path", {
|
|
449
|
+
}, /* @__PURE__ */ React5.createElement("path", {
|
|
449
450
|
fill: "none",
|
|
450
451
|
stroke,
|
|
451
452
|
strokeLinecap: "round",
|
|
@@ -459,9 +460,9 @@ import React6 from "react";
|
|
|
459
460
|
function Plus({ theme = "light", active }) {
|
|
460
461
|
const config = themes[theme];
|
|
461
462
|
const stroke = active ? config.activeColor : config.color;
|
|
462
|
-
return React6.createElement("svg", {
|
|
463
|
+
return /* @__PURE__ */ React6.createElement("svg", {
|
|
463
464
|
viewBox: "0 0 24 24"
|
|
464
|
-
}, React6.createElement("path", {
|
|
465
|
+
}, /* @__PURE__ */ React6.createElement("path", {
|
|
465
466
|
fill: "none",
|
|
466
467
|
stroke,
|
|
467
468
|
strokeLinecap: "round",
|
|
@@ -475,22 +476,22 @@ import React7 from "react";
|
|
|
475
476
|
function Reset({ theme = "light", active }) {
|
|
476
477
|
const config = themes[theme];
|
|
477
478
|
const stroke = active ? config.activeColor : config.color;
|
|
478
|
-
return React7.createElement("svg", {
|
|
479
|
+
return /* @__PURE__ */ React7.createElement("svg", {
|
|
479
480
|
viewBox: "0 0 24 24"
|
|
480
|
-
}, React7.createElement("g", {
|
|
481
|
+
}, /* @__PURE__ */ React7.createElement("g", {
|
|
481
482
|
fill: "none",
|
|
482
483
|
fillRule: "evenodd",
|
|
483
484
|
transform: "translate(-176 -684)"
|
|
484
|
-
}, React7.createElement("path", {
|
|
485
|
+
}, /* @__PURE__ */ React7.createElement("path", {
|
|
485
486
|
stroke,
|
|
486
487
|
strokeLinejoin: "round",
|
|
487
488
|
d: "M188 688v4m0 8v4m8-8h-4m-8 0h-4"
|
|
488
|
-
}), React7.createElement("circle", {
|
|
489
|
+
}), /* @__PURE__ */ React7.createElement("circle", {
|
|
489
490
|
cx: "188",
|
|
490
491
|
cy: "696",
|
|
491
492
|
r: "6",
|
|
492
493
|
stroke
|
|
493
|
-
}), React7.createElement("circle", {
|
|
494
|
+
}), /* @__PURE__ */ React7.createElement("circle", {
|
|
494
495
|
cx: "188",
|
|
495
496
|
cy: "696",
|
|
496
497
|
r: "1",
|
|
@@ -514,9 +515,9 @@ function ZoomControl({
|
|
|
514
515
|
const writable = useWritable();
|
|
515
516
|
const { scale, resetCamera, zoomIn, zoomOut } = useZoomControl();
|
|
516
517
|
const disabled = !writable;
|
|
517
|
-
return React8.createElement("div", {
|
|
518
|
+
return /* @__PURE__ */ React8.createElement("div", {
|
|
518
519
|
className: clsx2(name2, theme)
|
|
519
|
-
}, React8.createElement(Tippy2, {
|
|
520
|
+
}, /* @__PURE__ */ React8.createElement(Tippy2, {
|
|
520
521
|
className: "fastboard-tip",
|
|
521
522
|
content: t("zoomOut"),
|
|
522
523
|
theme,
|
|
@@ -525,21 +526,21 @@ function ZoomControl({
|
|
|
525
526
|
delay: [1e3, 400],
|
|
526
527
|
duration: 300,
|
|
527
528
|
offset: TopOffset
|
|
528
|
-
}, React8.createElement("button", {
|
|
529
|
+
}, /* @__PURE__ */ React8.createElement("button", {
|
|
529
530
|
className: clsx2(`${name2}-btn`, "minus", theme),
|
|
530
531
|
disabled,
|
|
531
532
|
onClick: zoomOut
|
|
532
|
-
}, React8.createElement(Icon, {
|
|
533
|
-
fallback: React8.createElement(Minus, {
|
|
533
|
+
}, /* @__PURE__ */ React8.createElement(Icon, {
|
|
534
|
+
fallback: /* @__PURE__ */ React8.createElement(Minus, {
|
|
534
535
|
theme
|
|
535
536
|
}),
|
|
536
537
|
src: disabled ? minusIconDisable : minusIcon,
|
|
537
538
|
alt: "[minus]"
|
|
538
|
-
}))), React8.createElement("span", {
|
|
539
|
+
}))), /* @__PURE__ */ React8.createElement("span", {
|
|
539
540
|
className: clsx2(`${name2}-scale`, theme)
|
|
540
|
-
}, Math.ceil(scale * 100)), React8.createElement("span", {
|
|
541
|
+
}, Math.ceil(scale * 100)), /* @__PURE__ */ React8.createElement("span", {
|
|
541
542
|
className: clsx2(`${name2}-percent`, theme)
|
|
542
|
-
}, "%"), React8.createElement(Tippy2, {
|
|
543
|
+
}, "%"), /* @__PURE__ */ React8.createElement(Tippy2, {
|
|
543
544
|
className: "fastboard-tip",
|
|
544
545
|
content: t("zoomIn"),
|
|
545
546
|
theme,
|
|
@@ -548,17 +549,17 @@ function ZoomControl({
|
|
|
548
549
|
delay: [1e3, 400],
|
|
549
550
|
duration: 300,
|
|
550
551
|
offset: TopOffset
|
|
551
|
-
}, React8.createElement("button", {
|
|
552
|
+
}, /* @__PURE__ */ React8.createElement("button", {
|
|
552
553
|
className: clsx2(`${name2}-btn`, "plus", theme),
|
|
553
554
|
disabled,
|
|
554
555
|
onClick: zoomIn
|
|
555
|
-
}, React8.createElement(Icon, {
|
|
556
|
-
fallback: React8.createElement(Plus, {
|
|
556
|
+
}, /* @__PURE__ */ React8.createElement(Icon, {
|
|
557
|
+
fallback: /* @__PURE__ */ React8.createElement(Plus, {
|
|
557
558
|
theme
|
|
558
559
|
}),
|
|
559
560
|
src: disabled ? plusIconDisable : plusIcon,
|
|
560
561
|
alt: "[plus]"
|
|
561
|
-
}))), React8.createElement(Tippy2, {
|
|
562
|
+
}))), /* @__PURE__ */ React8.createElement(Tippy2, {
|
|
562
563
|
className: "fastboard-tip",
|
|
563
564
|
content: t("reset"),
|
|
564
565
|
theme,
|
|
@@ -567,12 +568,12 @@ function ZoomControl({
|
|
|
567
568
|
delay: [1e3, 400],
|
|
568
569
|
duration: 300,
|
|
569
570
|
offset: TopOffset
|
|
570
|
-
}, React8.createElement("button", {
|
|
571
|
+
}, /* @__PURE__ */ React8.createElement("button", {
|
|
571
572
|
className: clsx2(`${name2}-btn`, "reset", theme),
|
|
572
573
|
disabled,
|
|
573
574
|
onClick: resetCamera
|
|
574
|
-
}, React8.createElement(Icon, {
|
|
575
|
-
fallback: React8.createElement(Reset, {
|
|
575
|
+
}, /* @__PURE__ */ React8.createElement(Icon, {
|
|
576
|
+
fallback: /* @__PURE__ */ React8.createElement(Reset, {
|
|
576
577
|
theme
|
|
577
578
|
}),
|
|
578
579
|
src: disabled ? resetIconDisable : resetIcon,
|
|
@@ -610,9 +611,9 @@ import React9 from "react";
|
|
|
610
611
|
function ChevronLeft({ theme = "light", active }) {
|
|
611
612
|
const config = themes[theme];
|
|
612
613
|
const stroke = active ? config.activeColor : config.color;
|
|
613
|
-
return React9.createElement("svg", {
|
|
614
|
+
return /* @__PURE__ */ React9.createElement("svg", {
|
|
614
615
|
viewBox: "0 0 24 24"
|
|
615
|
-
}, React9.createElement("path", {
|
|
616
|
+
}, /* @__PURE__ */ React9.createElement("path", {
|
|
616
617
|
fill: "none",
|
|
617
618
|
stroke,
|
|
618
619
|
strokeLinecap: "round",
|
|
@@ -626,9 +627,9 @@ import React10 from "react";
|
|
|
626
627
|
function ChevronRight({ theme = "light", active }) {
|
|
627
628
|
const config = themes[theme];
|
|
628
629
|
const stroke = active ? config.activeColor : config.color;
|
|
629
|
-
return React10.createElement("svg", {
|
|
630
|
+
return /* @__PURE__ */ React10.createElement("svg", {
|
|
630
631
|
viewBox: "0 0 24 24"
|
|
631
|
-
}, React10.createElement("path", {
|
|
632
|
+
}, /* @__PURE__ */ React10.createElement("path", {
|
|
632
633
|
fill: "none",
|
|
633
634
|
stroke,
|
|
634
635
|
strokeLinecap: "round",
|
|
@@ -642,9 +643,9 @@ import React11 from "react";
|
|
|
642
643
|
function FilePlus({ theme = "light", active }) {
|
|
643
644
|
const config = themes[theme];
|
|
644
645
|
const stroke = active ? config.activeColor : config.color;
|
|
645
|
-
return React11.createElement("svg", {
|
|
646
|
+
return /* @__PURE__ */ React11.createElement("svg", {
|
|
646
647
|
viewBox: "0 0 24 24"
|
|
647
|
-
}, React11.createElement("path", {
|
|
648
|
+
}, /* @__PURE__ */ React11.createElement("path", {
|
|
648
649
|
fill: stroke,
|
|
649
650
|
d: "M12 7.5a.5.5 0 0 1 .09.992L12 8.5H8a1.5 1.5 0 0 0-1.493 1.356L6.5 10v6a1.5 1.5 0 0 0 1.356 1.493L8 17.5h6a1.5 1.5 0 0 0 1.493-1.356L15.5 16v-4a.5.5 0 0 1 .992-.09l.008.09v4a2.5 2.5 0 0 1-2.336 2.495L14 18.5H8a2.5 2.5 0 0 1-2.495-2.336L5.5 16v-6a2.5 2.5 0 0 1 2.336-2.495L8 7.5h4Zm4-2a.5.5 0 0 1 .492.41L16.5 6v1.5H18a.5.5 0 0 1 .09.992L18 8.5h-1.5V10a.5.5 0 0 1-.992.09L15.5 10V8.5H14a.5.5 0 0 1-.09-.992L14 7.5h1.5V6a.5.5 0 0 1 .5-.5Z"
|
|
650
651
|
}));
|
|
@@ -666,9 +667,9 @@ function PageControl({
|
|
|
666
667
|
const writable = useWritable();
|
|
667
668
|
const _a = usePageControl(), { pageIndex, pageCount } = _a, actions = __objRest(_a, ["pageIndex", "pageCount"]);
|
|
668
669
|
const disabled = !writable;
|
|
669
|
-
return React12.createElement("div", {
|
|
670
|
+
return /* @__PURE__ */ React12.createElement("div", {
|
|
670
671
|
className: clsx3(name3, theme)
|
|
671
|
-
}, React12.createElement(Tippy3, {
|
|
672
|
+
}, /* @__PURE__ */ React12.createElement(Tippy3, {
|
|
672
673
|
className: "fastboard-tip",
|
|
673
674
|
content: t("prevPage"),
|
|
674
675
|
theme,
|
|
@@ -677,23 +678,23 @@ function PageControl({
|
|
|
677
678
|
delay: [1e3, 400],
|
|
678
679
|
duration: 300,
|
|
679
680
|
offset: TopOffset
|
|
680
|
-
}, React12.createElement("button", {
|
|
681
|
+
}, /* @__PURE__ */ React12.createElement("button", {
|
|
681
682
|
className: clsx3(`${name3}-btn`, "prev", theme),
|
|
682
683
|
disabled: disabled || pageIndex === 0,
|
|
683
684
|
onClick: actions.prevPage
|
|
684
|
-
}, React12.createElement(Icon, {
|
|
685
|
-
fallback: React12.createElement(ChevronLeft, {
|
|
685
|
+
}, /* @__PURE__ */ React12.createElement(Icon, {
|
|
686
|
+
fallback: /* @__PURE__ */ React12.createElement(ChevronLeft, {
|
|
686
687
|
theme
|
|
687
688
|
}),
|
|
688
689
|
src: disabled ? prevIconDisable : prevIcon,
|
|
689
690
|
alt: "[prev]"
|
|
690
|
-
}))), React12.createElement("span", {
|
|
691
|
+
}))), /* @__PURE__ */ React12.createElement("span", {
|
|
691
692
|
className: clsx3(`${name3}-page`, theme)
|
|
692
|
-
}, pageCount === 0 ? "\u2026" : pageIndex + 1), React12.createElement("span", {
|
|
693
|
+
}, pageCount === 0 ? "\u2026" : pageIndex + 1), /* @__PURE__ */ React12.createElement("span", {
|
|
693
694
|
className: clsx3(`${name3}-slash`, theme)
|
|
694
|
-
}, "/"), React12.createElement("span", {
|
|
695
|
+
}, "/"), /* @__PURE__ */ React12.createElement("span", {
|
|
695
696
|
className: clsx3(`${name3}-page-count`, theme)
|
|
696
|
-
}, pageCount), React12.createElement(Tippy3, {
|
|
697
|
+
}, pageCount), /* @__PURE__ */ React12.createElement(Tippy3, {
|
|
697
698
|
className: "fastboard-tip",
|
|
698
699
|
content: t("nextPage"),
|
|
699
700
|
theme,
|
|
@@ -702,17 +703,17 @@ function PageControl({
|
|
|
702
703
|
delay: [1e3, 400],
|
|
703
704
|
duration: 300,
|
|
704
705
|
offset: TopOffset
|
|
705
|
-
}, React12.createElement("button", {
|
|
706
|
+
}, /* @__PURE__ */ React12.createElement("button", {
|
|
706
707
|
className: clsx3(`${name3}-btn`, "next", theme),
|
|
707
708
|
disabled: disabled || pageIndex === pageCount - 1,
|
|
708
709
|
onClick: actions.nextPage
|
|
709
|
-
}, React12.createElement(Icon, {
|
|
710
|
-
fallback: React12.createElement(ChevronRight, {
|
|
710
|
+
}, /* @__PURE__ */ React12.createElement(Icon, {
|
|
711
|
+
fallback: /* @__PURE__ */ React12.createElement(ChevronRight, {
|
|
711
712
|
theme
|
|
712
713
|
}),
|
|
713
714
|
src: disabled ? nextIconDisable : nextIcon,
|
|
714
715
|
alt: "[next]"
|
|
715
|
-
}))), React12.createElement(Tippy3, {
|
|
716
|
+
}))), /* @__PURE__ */ React12.createElement(Tippy3, {
|
|
716
717
|
className: "fastboard-tip",
|
|
717
718
|
content: t("addPage"),
|
|
718
719
|
theme,
|
|
@@ -721,12 +722,12 @@ function PageControl({
|
|
|
721
722
|
delay: [1e3, 400],
|
|
722
723
|
duration: 300,
|
|
723
724
|
offset: TopOffset
|
|
724
|
-
}, React12.createElement("button", {
|
|
725
|
+
}, /* @__PURE__ */ React12.createElement("button", {
|
|
725
726
|
className: clsx3(`${name3}-btn`, "add", theme),
|
|
726
727
|
disabled,
|
|
727
728
|
onClick: actions.addPage
|
|
728
|
-
}, React12.createElement(Icon, {
|
|
729
|
-
fallback: React12.createElement(FilePlus, {
|
|
729
|
+
}, /* @__PURE__ */ React12.createElement(Icon, {
|
|
730
|
+
fallback: /* @__PURE__ */ React12.createElement(FilePlus, {
|
|
730
731
|
theme
|
|
731
732
|
}),
|
|
732
733
|
src: disabled ? addIconDisable : addIcon,
|
|
@@ -776,94 +777,56 @@ var EmptyToolbarHook = {
|
|
|
776
777
|
// src/components/Toolbar/Toolbar.tsx
|
|
777
778
|
import clsx9 from "clsx";
|
|
778
779
|
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";
|
|
780
|
+
import React43, { createContext as createContext3, useState as useState4 } from "react";
|
|
783
781
|
|
|
784
782
|
// src/components/Toolbar/components/assets/expanded.png
|
|
785
783
|
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
784
|
|
|
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
785
|
// src/components/Toolbar/Content.tsx
|
|
823
786
|
import clsx8 from "clsx";
|
|
824
|
-
import
|
|
787
|
+
import React42, { useCallback as useCallback10, useContext as useContext13, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
|
|
825
788
|
|
|
826
789
|
// src/components/Toolbar/components/ApplianceButtons.tsx
|
|
827
|
-
import
|
|
790
|
+
import React33, { useCallback as useCallback6, useContext as useContext4 } from "react";
|
|
828
791
|
import { ApplianceNames } from "white-web-sdk";
|
|
829
792
|
|
|
830
793
|
// src/components/Toolbar/icons/index.ts
|
|
831
794
|
import { memo } from "react";
|
|
832
795
|
|
|
833
796
|
// src/components/Toolbar/icons/Apps.tsx
|
|
834
|
-
import
|
|
797
|
+
import React13 from "react";
|
|
835
798
|
var Apps = (props) => {
|
|
836
799
|
const stroke = getStroke(props);
|
|
837
|
-
return
|
|
800
|
+
return /* @__PURE__ */ React13.createElement("svg", {
|
|
838
801
|
viewBox: "0 0 24 24"
|
|
839
|
-
},
|
|
802
|
+
}, /* @__PURE__ */ React13.createElement("g", {
|
|
840
803
|
fill: stroke
|
|
841
|
-
},
|
|
804
|
+
}, /* @__PURE__ */ React13.createElement("path", {
|
|
842
805
|
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
|
-
}),
|
|
806
|
+
}), /* @__PURE__ */ React13.createElement("path", {
|
|
844
807
|
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
808
|
})));
|
|
846
809
|
};
|
|
847
810
|
|
|
848
811
|
// src/components/Toolbar/icons/Arrow.tsx
|
|
849
|
-
import
|
|
812
|
+
import React14 from "react";
|
|
850
813
|
var Arrow = (props) => {
|
|
851
814
|
const stroke = getStroke(props);
|
|
852
|
-
return
|
|
815
|
+
return /* @__PURE__ */ React14.createElement("svg", {
|
|
853
816
|
viewBox: "0 0 24 24"
|
|
854
|
-
},
|
|
817
|
+
}, /* @__PURE__ */ React14.createElement("path", {
|
|
855
818
|
fill: stroke,
|
|
856
819
|
d: "M19 5v6l-2.647-2.646L5.99 18.718l-.708-.708L15.645 7.646 13 5h6Z"
|
|
857
820
|
}));
|
|
858
821
|
};
|
|
859
822
|
|
|
860
823
|
// src/components/Toolbar/icons/Circle.tsx
|
|
861
|
-
import
|
|
824
|
+
import React15 from "react";
|
|
862
825
|
var Circle = (props) => {
|
|
863
826
|
const stroke = getStroke(props);
|
|
864
|
-
return
|
|
827
|
+
return /* @__PURE__ */ React15.createElement("svg", {
|
|
865
828
|
viewBox: "0 0 24 24"
|
|
866
|
-
},
|
|
829
|
+
}, /* @__PURE__ */ React15.createElement("rect", {
|
|
867
830
|
width: "15",
|
|
868
831
|
height: "15",
|
|
869
832
|
x: "4.5",
|
|
@@ -875,40 +838,40 @@ var Circle = (props) => {
|
|
|
875
838
|
};
|
|
876
839
|
|
|
877
840
|
// src/components/Toolbar/icons/Clean.tsx
|
|
878
|
-
import
|
|
841
|
+
import React16 from "react";
|
|
879
842
|
var Clean = (props) => {
|
|
880
843
|
const stroke = getStroke(props);
|
|
881
|
-
return
|
|
844
|
+
return /* @__PURE__ */ React16.createElement("svg", {
|
|
882
845
|
viewBox: "0 0 24 24"
|
|
883
|
-
},
|
|
846
|
+
}, /* @__PURE__ */ React16.createElement("path", {
|
|
884
847
|
fill: stroke,
|
|
885
848
|
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
849
|
}));
|
|
887
850
|
};
|
|
888
851
|
|
|
889
852
|
// src/components/Toolbar/icons/Clicker.tsx
|
|
890
|
-
import
|
|
853
|
+
import React17 from "react";
|
|
891
854
|
var Clicker = (props) => {
|
|
892
855
|
const stroke = getStroke(props);
|
|
893
|
-
return
|
|
856
|
+
return /* @__PURE__ */ React17.createElement("svg", {
|
|
894
857
|
viewBox: "0 0 24 24"
|
|
895
|
-
},
|
|
858
|
+
}, /* @__PURE__ */ React17.createElement("g", {
|
|
896
859
|
fill: "none"
|
|
897
|
-
},
|
|
860
|
+
}, /* @__PURE__ */ React17.createElement("path", {
|
|
898
861
|
d: "M0 0h24v24H0z"
|
|
899
|
-
}),
|
|
862
|
+
}), /* @__PURE__ */ React17.createElement("path", {
|
|
900
863
|
fill: stroke,
|
|
901
864
|
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
865
|
})));
|
|
903
866
|
};
|
|
904
867
|
|
|
905
868
|
// src/components/Toolbar/icons/Collapse.tsx
|
|
906
|
-
import
|
|
869
|
+
import React18 from "react";
|
|
907
870
|
var Collapse = (props) => {
|
|
908
871
|
const stroke = getStroke(props);
|
|
909
|
-
return
|
|
872
|
+
return /* @__PURE__ */ React18.createElement("svg", {
|
|
910
873
|
viewBox: "0 0 24 24"
|
|
911
|
-
},
|
|
874
|
+
}, /* @__PURE__ */ React18.createElement("path", {
|
|
912
875
|
fill: "none",
|
|
913
876
|
stroke,
|
|
914
877
|
d: "m8 10-2 2 2 2m10-8H6m12 12H6m12-4h-8m8-4h-8"
|
|
@@ -916,12 +879,12 @@ var Collapse = (props) => {
|
|
|
916
879
|
};
|
|
917
880
|
|
|
918
881
|
// src/components/Toolbar/icons/Diamond.tsx
|
|
919
|
-
import
|
|
882
|
+
import React19 from "react";
|
|
920
883
|
var Diamond = (props) => {
|
|
921
884
|
const stroke = getStroke(props);
|
|
922
|
-
return
|
|
885
|
+
return /* @__PURE__ */ React19.createElement("svg", {
|
|
923
886
|
viewBox: "0 0 24 24"
|
|
924
|
-
},
|
|
887
|
+
}, /* @__PURE__ */ React19.createElement("path", {
|
|
925
888
|
fill: "none",
|
|
926
889
|
stroke,
|
|
927
890
|
d: "M4.222 12 12 4.222 19.778 12 12 19.778z"
|
|
@@ -929,12 +892,12 @@ var Diamond = (props) => {
|
|
|
929
892
|
};
|
|
930
893
|
|
|
931
894
|
// src/components/Toolbar/icons/Down.tsx
|
|
932
|
-
import
|
|
895
|
+
import React20 from "react";
|
|
933
896
|
var Down = (props) => {
|
|
934
897
|
const stroke = getStroke(props);
|
|
935
|
-
return
|
|
898
|
+
return /* @__PURE__ */ React20.createElement("svg", {
|
|
936
899
|
viewBox: "0 0 24 24"
|
|
937
|
-
},
|
|
900
|
+
}, /* @__PURE__ */ React20.createElement("path", {
|
|
938
901
|
fill: "none",
|
|
939
902
|
stroke,
|
|
940
903
|
d: "m16 13-2 2-2 2-2-2-2-2m8-6-2 2-2 2-2-2-2-2"
|
|
@@ -942,24 +905,24 @@ var Down = (props) => {
|
|
|
942
905
|
};
|
|
943
906
|
|
|
944
907
|
// src/components/Toolbar/icons/Eraser.tsx
|
|
945
|
-
import
|
|
908
|
+
import React21 from "react";
|
|
946
909
|
var Eraser = (props) => {
|
|
947
910
|
const stroke = getStroke(props);
|
|
948
|
-
return
|
|
911
|
+
return /* @__PURE__ */ React21.createElement("svg", {
|
|
949
912
|
viewBox: "0 0 24 24"
|
|
950
|
-
},
|
|
913
|
+
}, /* @__PURE__ */ React21.createElement("path", {
|
|
951
914
|
fill: stroke,
|
|
952
915
|
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
916
|
}));
|
|
954
917
|
};
|
|
955
918
|
|
|
956
919
|
// src/components/Toolbar/icons/Expand.tsx
|
|
957
|
-
import
|
|
920
|
+
import React22 from "react";
|
|
958
921
|
var Expand = (props) => {
|
|
959
922
|
const stroke = getStroke(props);
|
|
960
|
-
return
|
|
923
|
+
return /* @__PURE__ */ React22.createElement("svg", {
|
|
961
924
|
viewBox: "0 0 24 24"
|
|
962
|
-
},
|
|
925
|
+
}, /* @__PURE__ */ React22.createElement("path", {
|
|
963
926
|
fill: "none",
|
|
964
927
|
stroke,
|
|
965
928
|
d: "m16 10 2 2-2 2M6 6h12M6 18h12M6 14h8m-8-4h8"
|
|
@@ -967,36 +930,36 @@ var Expand = (props) => {
|
|
|
967
930
|
};
|
|
968
931
|
|
|
969
932
|
// src/components/Toolbar/icons/Line.tsx
|
|
970
|
-
import
|
|
933
|
+
import React23 from "react";
|
|
971
934
|
var Line = (props) => {
|
|
972
935
|
const stroke = getStroke(props);
|
|
973
|
-
return
|
|
936
|
+
return /* @__PURE__ */ React23.createElement("svg", {
|
|
974
937
|
viewBox: "0 0 24 24"
|
|
975
|
-
},
|
|
938
|
+
}, /* @__PURE__ */ React23.createElement("path", {
|
|
976
939
|
fill: stroke,
|
|
977
940
|
d: "m18.01 5.282.708.708L5.99 18.718l-.708-.708z"
|
|
978
941
|
}));
|
|
979
942
|
};
|
|
980
943
|
|
|
981
944
|
// src/components/Toolbar/icons/Pencil.tsx
|
|
982
|
-
import
|
|
945
|
+
import React24 from "react";
|
|
983
946
|
var Pencil = (props) => {
|
|
984
947
|
const stroke = getStroke(props);
|
|
985
|
-
return
|
|
948
|
+
return /* @__PURE__ */ React24.createElement("svg", {
|
|
986
949
|
viewBox: "0 0 24 24"
|
|
987
|
-
},
|
|
950
|
+
}, /* @__PURE__ */ React24.createElement("path", {
|
|
988
951
|
fill: stroke,
|
|
989
952
|
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
953
|
}));
|
|
991
954
|
};
|
|
992
955
|
|
|
993
956
|
// src/components/Toolbar/icons/Rectangle.tsx
|
|
994
|
-
import
|
|
957
|
+
import React25 from "react";
|
|
995
958
|
var Rectangle = (props) => {
|
|
996
959
|
const stroke = getStroke(props);
|
|
997
|
-
return
|
|
960
|
+
return /* @__PURE__ */ React25.createElement("svg", {
|
|
998
961
|
viewBox: "0 0 24 24"
|
|
999
|
-
},
|
|
962
|
+
}, /* @__PURE__ */ React25.createElement("path", {
|
|
1000
963
|
fill: "none",
|
|
1001
964
|
stroke,
|
|
1002
965
|
d: "M5.5 5.5h13v13h-13z"
|
|
@@ -1004,24 +967,24 @@ var Rectangle = (props) => {
|
|
|
1004
967
|
};
|
|
1005
968
|
|
|
1006
969
|
// src/components/Toolbar/icons/Selector.tsx
|
|
1007
|
-
import
|
|
970
|
+
import React26 from "react";
|
|
1008
971
|
var Selector = (props) => {
|
|
1009
972
|
const stroke = getStroke(props);
|
|
1010
|
-
return
|
|
973
|
+
return /* @__PURE__ */ React26.createElement("svg", {
|
|
1011
974
|
viewBox: "0 0 24 24"
|
|
1012
|
-
},
|
|
975
|
+
}, /* @__PURE__ */ React26.createElement("path", {
|
|
1013
976
|
fill: stroke,
|
|
1014
977
|
d: "m12 12 8 2.667-3.556 1.777L14.667 20 12 12Zm3-8v7.5h-1V5H5v9h6.5v1H4V4h11Z"
|
|
1015
978
|
}));
|
|
1016
979
|
};
|
|
1017
980
|
|
|
1018
981
|
// src/components/Toolbar/icons/SpeechBalloon.tsx
|
|
1019
|
-
import
|
|
982
|
+
import React27 from "react";
|
|
1020
983
|
var SpeechBalloon = (props) => {
|
|
1021
984
|
const stroke = getStroke(props);
|
|
1022
|
-
return
|
|
985
|
+
return /* @__PURE__ */ React27.createElement("svg", {
|
|
1023
986
|
viewBox: "0 0 24 24"
|
|
1024
|
-
},
|
|
987
|
+
}, /* @__PURE__ */ React27.createElement("path", {
|
|
1025
988
|
fill: "none",
|
|
1026
989
|
stroke,
|
|
1027
990
|
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 +992,12 @@ var SpeechBalloon = (props) => {
|
|
|
1029
992
|
};
|
|
1030
993
|
|
|
1031
994
|
// src/components/Toolbar/icons/Star.tsx
|
|
1032
|
-
import
|
|
995
|
+
import React28 from "react";
|
|
1033
996
|
var Star = (props) => {
|
|
1034
997
|
const stroke = getStroke(props);
|
|
1035
|
-
return
|
|
998
|
+
return /* @__PURE__ */ React28.createElement("svg", {
|
|
1036
999
|
viewBox: "0 0 24 24"
|
|
1037
|
-
},
|
|
1000
|
+
}, /* @__PURE__ */ React28.createElement("path", {
|
|
1038
1001
|
fill: "none",
|
|
1039
1002
|
stroke,
|
|
1040
1003
|
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 +1005,24 @@ var Star = (props) => {
|
|
|
1042
1005
|
};
|
|
1043
1006
|
|
|
1044
1007
|
// src/components/Toolbar/icons/Text.tsx
|
|
1045
|
-
import
|
|
1008
|
+
import React29 from "react";
|
|
1046
1009
|
var Text = (props) => {
|
|
1047
1010
|
const stroke = getStroke(props);
|
|
1048
|
-
return
|
|
1011
|
+
return /* @__PURE__ */ React29.createElement("svg", {
|
|
1049
1012
|
viewBox: "0 0 24 24"
|
|
1050
|
-
},
|
|
1013
|
+
}, /* @__PURE__ */ React29.createElement("path", {
|
|
1051
1014
|
fill: stroke,
|
|
1052
1015
|
d: "M18.5 5.5V8h-1V6.5H13v11h2v1H9v-1h2v-11H6.5V8h-1V5.5h13Z"
|
|
1053
1016
|
}));
|
|
1054
1017
|
};
|
|
1055
1018
|
|
|
1056
1019
|
// src/components/Toolbar/icons/Triangle.tsx
|
|
1057
|
-
import
|
|
1020
|
+
import React30 from "react";
|
|
1058
1021
|
var Triangle = (props) => {
|
|
1059
1022
|
const stroke = getStroke(props);
|
|
1060
|
-
return
|
|
1023
|
+
return /* @__PURE__ */ React30.createElement("svg", {
|
|
1061
1024
|
viewBox: "0 0 24 24"
|
|
1062
|
-
},
|
|
1025
|
+
}, /* @__PURE__ */ React30.createElement("path", {
|
|
1063
1026
|
fill: "none",
|
|
1064
1027
|
stroke,
|
|
1065
1028
|
d: "M12 6.008 19.138 18.5H4.862L12 6.008Z"
|
|
@@ -1067,12 +1030,12 @@ var Triangle = (props) => {
|
|
|
1067
1030
|
};
|
|
1068
1031
|
|
|
1069
1032
|
// src/components/Toolbar/icons/Up.tsx
|
|
1070
|
-
import
|
|
1033
|
+
import React31 from "react";
|
|
1071
1034
|
var Up = (props) => {
|
|
1072
1035
|
const stroke = getStroke(props);
|
|
1073
|
-
return
|
|
1036
|
+
return /* @__PURE__ */ React31.createElement("svg", {
|
|
1074
1037
|
viewBox: "0 0 24 24"
|
|
1075
|
-
},
|
|
1038
|
+
}, /* @__PURE__ */ React31.createElement("path", {
|
|
1076
1039
|
fill: "none",
|
|
1077
1040
|
stroke,
|
|
1078
1041
|
d: "m16 11-2-2-2-2-2 2-2 2m8 6-2-2-2-2-2 2-2 2"
|
|
@@ -1104,12 +1067,12 @@ var Icons = {
|
|
|
1104
1067
|
|
|
1105
1068
|
// src/components/Toolbar/components/Button.tsx
|
|
1106
1069
|
import clsx4 from "clsx";
|
|
1107
|
-
import
|
|
1070
|
+
import React32, { forwardRef, useContext as useContext3 } from "react";
|
|
1108
1071
|
import Tippy4 from "@tippyjs/react";
|
|
1109
1072
|
var Button = forwardRef((props, ref) => {
|
|
1110
1073
|
const { content, disabled, active, onClick, interactive, placement = "right", children } = props;
|
|
1111
1074
|
const { writable, theme } = useContext3(ToolbarContext);
|
|
1112
|
-
return
|
|
1075
|
+
return /* @__PURE__ */ React32.createElement(Tippy4, {
|
|
1113
1076
|
className: "fastboard-tip",
|
|
1114
1077
|
content,
|
|
1115
1078
|
interactive,
|
|
@@ -1119,7 +1082,7 @@ var Button = forwardRef((props, ref) => {
|
|
|
1119
1082
|
offset: placement.includes("right") ? RightOffset : void 0,
|
|
1120
1083
|
delay: [1e3, 400],
|
|
1121
1084
|
duration: 300
|
|
1122
|
-
},
|
|
1085
|
+
}, /* @__PURE__ */ React32.createElement("button", {
|
|
1123
1086
|
ref,
|
|
1124
1087
|
className: clsx4("fastboard-toolbar-btn", theme, { active }),
|
|
1125
1088
|
onClick,
|
|
@@ -1131,9 +1094,9 @@ var Button = forwardRef((props, ref) => {
|
|
|
1131
1094
|
function renderToolTip(text, hotkey) {
|
|
1132
1095
|
if (!(typeof hotkey === "string"))
|
|
1133
1096
|
return text;
|
|
1134
|
-
return
|
|
1097
|
+
return /* @__PURE__ */ React33.createElement("span", {
|
|
1135
1098
|
className: "fastboard-toolbar-tooltip"
|
|
1136
|
-
},
|
|
1099
|
+
}, /* @__PURE__ */ React33.createElement("span", null, text), /* @__PURE__ */ React33.createElement("span", {
|
|
1137
1100
|
className: "fastboard-toolbar-hotkey"
|
|
1138
1101
|
}, hotkey.toUpperCase()));
|
|
1139
1102
|
}
|
|
@@ -1147,12 +1110,12 @@ function ClickerButton() {
|
|
|
1147
1110
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1148
1111
|
const active = appliance === ApplianceNames.clicker;
|
|
1149
1112
|
const disabled = !writable;
|
|
1150
|
-
return
|
|
1113
|
+
return /* @__PURE__ */ React33.createElement(Button, {
|
|
1151
1114
|
content: renderToolTip(t("clicker"), shortcut),
|
|
1152
1115
|
onClick: changeAppliance,
|
|
1153
1116
|
active
|
|
1154
|
-
},
|
|
1155
|
-
fallback:
|
|
1117
|
+
}, /* @__PURE__ */ React33.createElement(Icon, {
|
|
1118
|
+
fallback: /* @__PURE__ */ React33.createElement(Icons.Clicker, {
|
|
1156
1119
|
theme,
|
|
1157
1120
|
active
|
|
1158
1121
|
}),
|
|
@@ -1169,12 +1132,12 @@ function SelectorButton() {
|
|
|
1169
1132
|
const active = appliance === ApplianceNames.selector;
|
|
1170
1133
|
const disabled = !writable;
|
|
1171
1134
|
const shortcut = (app.hotKeys || defaultHotKeys).changeToSelector;
|
|
1172
|
-
return
|
|
1135
|
+
return /* @__PURE__ */ React33.createElement(Button, {
|
|
1173
1136
|
content: renderToolTip(t("selector"), shortcut),
|
|
1174
1137
|
onClick: changeAppliance,
|
|
1175
1138
|
active
|
|
1176
|
-
},
|
|
1177
|
-
fallback:
|
|
1139
|
+
}, /* @__PURE__ */ React33.createElement(Icon, {
|
|
1140
|
+
fallback: /* @__PURE__ */ React33.createElement(Icons.Selector, {
|
|
1178
1141
|
theme,
|
|
1179
1142
|
active
|
|
1180
1143
|
}),
|
|
@@ -1191,12 +1154,12 @@ function EraserButton() {
|
|
|
1191
1154
|
const active = appliance === ApplianceNames.eraser;
|
|
1192
1155
|
const disabled = !writable;
|
|
1193
1156
|
const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToEraser;
|
|
1194
|
-
return
|
|
1157
|
+
return /* @__PURE__ */ React33.createElement(Button, {
|
|
1195
1158
|
content: renderToolTip(t("eraser"), shortcut),
|
|
1196
1159
|
onClick: changeAppliance,
|
|
1197
1160
|
active
|
|
1198
|
-
},
|
|
1199
|
-
fallback:
|
|
1161
|
+
}, /* @__PURE__ */ React33.createElement(Icon, {
|
|
1162
|
+
fallback: /* @__PURE__ */ React33.createElement(Icons.Eraser, {
|
|
1200
1163
|
theme,
|
|
1201
1164
|
active
|
|
1202
1165
|
}),
|
|
@@ -1208,11 +1171,11 @@ function CleanButton() {
|
|
|
1208
1171
|
const { t } = useTranslation();
|
|
1209
1172
|
const { theme, icons, writable, cleanCurrentScene } = useContext4(ToolbarContext);
|
|
1210
1173
|
const disabled = !writable;
|
|
1211
|
-
return
|
|
1174
|
+
return /* @__PURE__ */ React33.createElement(Button, {
|
|
1212
1175
|
content: t("clean"),
|
|
1213
1176
|
onClick: cleanCurrentScene
|
|
1214
|
-
},
|
|
1215
|
-
fallback:
|
|
1177
|
+
}, /* @__PURE__ */ React33.createElement(Icon, {
|
|
1178
|
+
fallback: /* @__PURE__ */ React33.createElement(Icons.Clean, {
|
|
1216
1179
|
theme
|
|
1217
1180
|
}),
|
|
1218
1181
|
src: disabled ? icons == null ? void 0 : icons.cleanIconDisable : icons == null ? void 0 : icons.cleanIcon,
|
|
@@ -1222,7 +1185,7 @@ function CleanButton() {
|
|
|
1222
1185
|
|
|
1223
1186
|
// src/components/Toolbar/components/AppsButton.tsx
|
|
1224
1187
|
import Tippy5 from "@tippyjs/react";
|
|
1225
|
-
import
|
|
1188
|
+
import React34, { useContext as useContext5 } from "react";
|
|
1226
1189
|
|
|
1227
1190
|
// src/components/Toolbar/components/assets/vscode.png
|
|
1228
1191
|
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 +1200,19 @@ var countdown_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyC
|
|
|
1237
1200
|
function AppsButton({ content, onClick }) {
|
|
1238
1201
|
const { theme, icons, writable } = useContext5(ToolbarContext);
|
|
1239
1202
|
const disabled = !writable;
|
|
1240
|
-
const button =
|
|
1203
|
+
const button = /* @__PURE__ */ React34.createElement(Button, {
|
|
1241
1204
|
content: "Apps",
|
|
1242
1205
|
onClick
|
|
1243
|
-
},
|
|
1244
|
-
fallback:
|
|
1206
|
+
}, /* @__PURE__ */ React34.createElement(Icon, {
|
|
1207
|
+
fallback: /* @__PURE__ */ React34.createElement(Icons.Apps, {
|
|
1245
1208
|
theme
|
|
1246
1209
|
}),
|
|
1247
1210
|
src: disabled ? icons == null ? void 0 : icons.appsIconDisable : icons == null ? void 0 : icons.appsIcon,
|
|
1248
1211
|
alt: "[apps]"
|
|
1249
1212
|
}));
|
|
1250
|
-
return content === false ? button :
|
|
1213
|
+
return content === false ? button : /* @__PURE__ */ React34.createElement("span", {
|
|
1251
1214
|
className: "fastboard-toolbar-btn-interactive"
|
|
1252
|
-
},
|
|
1215
|
+
}, /* @__PURE__ */ React34.createElement(Tippy5, {
|
|
1253
1216
|
className: "fastboard-tip",
|
|
1254
1217
|
content: renderAppsButtonContent(content),
|
|
1255
1218
|
theme,
|
|
@@ -1261,25 +1224,25 @@ function AppsButton({ content, onClick }) {
|
|
|
1261
1224
|
}, button));
|
|
1262
1225
|
}
|
|
1263
1226
|
function renderAppsButtonContent(content) {
|
|
1264
|
-
return
|
|
1227
|
+
return /* @__PURE__ */ React34.createElement("div", {
|
|
1265
1228
|
className: "fastboard-toolbar-panel apps"
|
|
1266
|
-
},
|
|
1229
|
+
}, /* @__PURE__ */ React34.createElement("div", {
|
|
1267
1230
|
className: "fastboard-toolbar-apps"
|
|
1268
|
-
}, content ||
|
|
1231
|
+
}, content || /* @__PURE__ */ React34.createElement(DefaultApps, null)));
|
|
1269
1232
|
}
|
|
1270
1233
|
function DefaultApps() {
|
|
1271
1234
|
const app = useFastboardApp();
|
|
1272
|
-
return
|
|
1235
|
+
return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(AppIcon, {
|
|
1273
1236
|
title: "Code Editor",
|
|
1274
1237
|
src: vscode_default,
|
|
1275
1238
|
alt: "[code editor]",
|
|
1276
1239
|
onClick: app == null ? void 0 : app.insertCodeEditor.bind(app)
|
|
1277
|
-
}),
|
|
1240
|
+
}), /* @__PURE__ */ React34.createElement(AppIcon, {
|
|
1278
1241
|
title: "GeoGebra",
|
|
1279
1242
|
src: geogebra_default,
|
|
1280
1243
|
alt: "[geogebra]",
|
|
1281
1244
|
onClick: app == null ? void 0 : app.insertGeoGebra.bind(app)
|
|
1282
|
-
}),
|
|
1245
|
+
}), /* @__PURE__ */ React34.createElement(AppIcon, {
|
|
1283
1246
|
title: "Countdown",
|
|
1284
1247
|
src: countdown_default,
|
|
1285
1248
|
alt: "[countdown]",
|
|
@@ -1287,29 +1250,29 @@ function DefaultApps() {
|
|
|
1287
1250
|
}));
|
|
1288
1251
|
}
|
|
1289
1252
|
function AppIcon({ title, src, alt, onClick }) {
|
|
1290
|
-
return
|
|
1253
|
+
return /* @__PURE__ */ React34.createElement("span", {
|
|
1291
1254
|
className: "fastboard-toolbar-app-icon"
|
|
1292
|
-
},
|
|
1255
|
+
}, /* @__PURE__ */ React34.createElement(Button, {
|
|
1293
1256
|
placement: "top",
|
|
1294
1257
|
content: title,
|
|
1295
1258
|
onClick
|
|
1296
|
-
},
|
|
1259
|
+
}, /* @__PURE__ */ React34.createElement("img", {
|
|
1297
1260
|
src,
|
|
1298
1261
|
alt,
|
|
1299
1262
|
title
|
|
1300
|
-
})),
|
|
1263
|
+
})), /* @__PURE__ */ React34.createElement("span", {
|
|
1301
1264
|
className: "fastboard-toolbar-app-icon-text"
|
|
1302
1265
|
}, title));
|
|
1303
1266
|
}
|
|
1304
1267
|
|
|
1305
1268
|
// src/components/Toolbar/components/PencilButton.tsx
|
|
1306
1269
|
import Tippy6 from "@tippyjs/react";
|
|
1307
|
-
import
|
|
1270
|
+
import React38, { useCallback as useCallback7, useContext as useContext9 } from "react";
|
|
1308
1271
|
import { ApplianceNames as ApplianceNames2 } from "white-web-sdk";
|
|
1309
1272
|
|
|
1310
1273
|
// src/components/Toolbar/components/ColorBox.tsx
|
|
1311
1274
|
import clsx5 from "clsx";
|
|
1312
|
-
import
|
|
1275
|
+
import React35, { useContext as useContext6 } from "react";
|
|
1313
1276
|
var colors = {
|
|
1314
1277
|
"#E02020": [224, 32, 32],
|
|
1315
1278
|
"#F7B500": [247, 181, 0],
|
|
@@ -1325,17 +1288,17 @@ function ColorBox() {
|
|
|
1325
1288
|
const { theme, memberState, setStrokeColor, writable } = useContext6(ToolbarContext);
|
|
1326
1289
|
const strokeColor = memberState == null ? void 0 : memberState.strokeColor;
|
|
1327
1290
|
const disabled = !writable;
|
|
1328
|
-
return
|
|
1291
|
+
return /* @__PURE__ */ React35.createElement("div", {
|
|
1329
1292
|
className: clsx5("fastboard-toolbar-color-box", theme)
|
|
1330
|
-
}, colorKeys.map((key) =>
|
|
1293
|
+
}, colorKeys.map((key) => /* @__PURE__ */ React35.createElement("div", {
|
|
1331
1294
|
key,
|
|
1332
1295
|
className: clsx5("fastboard-toolbar-color-item", theme),
|
|
1333
1296
|
onClick: () => setStrokeColor(colors[key])
|
|
1334
|
-
},
|
|
1297
|
+
}, /* @__PURE__ */ React35.createElement("div", {
|
|
1335
1298
|
className: clsx5("fastboard-toolbar-color-border", theme, {
|
|
1336
1299
|
active: strokeColor && isEqualArray(strokeColor, colors[key])
|
|
1337
1300
|
})
|
|
1338
|
-
},
|
|
1301
|
+
}, /* @__PURE__ */ React35.createElement("button", {
|
|
1339
1302
|
className: clsx5("fastboard-toolbar-color-btn"),
|
|
1340
1303
|
style: { background: key },
|
|
1341
1304
|
disabled,
|
|
@@ -1348,10 +1311,10 @@ function ColorBox() {
|
|
|
1348
1311
|
|
|
1349
1312
|
// src/components/Toolbar/components/CutLine.tsx
|
|
1350
1313
|
import clsx6 from "clsx";
|
|
1351
|
-
import
|
|
1314
|
+
import React36, { useContext as useContext7 } from "react";
|
|
1352
1315
|
function CutLine() {
|
|
1353
1316
|
const { theme } = useContext7(ToolbarContext);
|
|
1354
|
-
return
|
|
1317
|
+
return /* @__PURE__ */ React36.createElement("span", {
|
|
1355
1318
|
className: clsx6(`${name4}-cut-line`, theme)
|
|
1356
1319
|
});
|
|
1357
1320
|
}
|
|
@@ -1359,12 +1322,12 @@ function CutLine() {
|
|
|
1359
1322
|
// src/components/Toolbar/components/Slider.tsx
|
|
1360
1323
|
import clsx7 from "clsx";
|
|
1361
1324
|
import RcSlider from "rc-slider";
|
|
1362
|
-
import
|
|
1325
|
+
import React37, { useContext as useContext8 } from "react";
|
|
1363
1326
|
function Slider() {
|
|
1364
1327
|
const { theme, writable, memberState, setStrokeWidth } = useContext8(ToolbarContext);
|
|
1365
1328
|
const { activeColor } = themes[theme];
|
|
1366
1329
|
const strokeWidth = (memberState == null ? void 0 : memberState.strokeWidth) || 0;
|
|
1367
|
-
return
|
|
1330
|
+
return /* @__PURE__ */ React37.createElement(RcSlider, {
|
|
1368
1331
|
disabled: !writable,
|
|
1369
1332
|
className: clsx7("fastboard-toolbar-slider", theme),
|
|
1370
1333
|
trackStyle: { background: activeColor },
|
|
@@ -1388,9 +1351,9 @@ function PencilButton() {
|
|
|
1388
1351
|
const active = appliance === ApplianceNames2.pencil;
|
|
1389
1352
|
const disabled = !writable;
|
|
1390
1353
|
const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToPencil;
|
|
1391
|
-
return
|
|
1354
|
+
return /* @__PURE__ */ React38.createElement("span", {
|
|
1392
1355
|
className: "fastboard-toolbar-btn-interactive"
|
|
1393
|
-
},
|
|
1356
|
+
}, /* @__PURE__ */ React38.createElement(Tippy6, {
|
|
1394
1357
|
className: "fastboard-tip",
|
|
1395
1358
|
content: renderPencilButtonContent(),
|
|
1396
1359
|
theme,
|
|
@@ -1399,30 +1362,30 @@ function PencilButton() {
|
|
|
1399
1362
|
offset: RightOffset,
|
|
1400
1363
|
arrow: false,
|
|
1401
1364
|
interactive: true
|
|
1402
|
-
},
|
|
1365
|
+
}, /* @__PURE__ */ React38.createElement(Button, {
|
|
1403
1366
|
content: renderToolTip(t("pencil"), shortcut),
|
|
1404
1367
|
active,
|
|
1405
1368
|
onClick: changeAppliance
|
|
1406
|
-
},
|
|
1407
|
-
fallback:
|
|
1369
|
+
}, /* @__PURE__ */ React38.createElement(Icon, {
|
|
1370
|
+
fallback: /* @__PURE__ */ React38.createElement(Icons.Pencil, {
|
|
1408
1371
|
theme,
|
|
1409
1372
|
active
|
|
1410
1373
|
}),
|
|
1411
1374
|
src: disabled ? icons == null ? void 0 : icons.pencilIconDisable : icons == null ? void 0 : icons.pencilIcon,
|
|
1412
1375
|
alt: "[pencil]"
|
|
1413
|
-
}),
|
|
1376
|
+
}), /* @__PURE__ */ React38.createElement("span", {
|
|
1414
1377
|
className: "fastboard-toolbar-triangle"
|
|
1415
1378
|
}))));
|
|
1416
1379
|
}
|
|
1417
1380
|
function renderPencilButtonContent() {
|
|
1418
|
-
return
|
|
1381
|
+
return /* @__PURE__ */ React38.createElement("div", {
|
|
1419
1382
|
className: "fastboard-toolbar-panel pencil"
|
|
1420
|
-
},
|
|
1383
|
+
}, /* @__PURE__ */ React38.createElement(Slider, null), /* @__PURE__ */ React38.createElement(CutLine, null), /* @__PURE__ */ React38.createElement(ColorBox, null));
|
|
1421
1384
|
}
|
|
1422
1385
|
|
|
1423
1386
|
// src/components/Toolbar/components/ShapesButton.tsx
|
|
1424
1387
|
import Tippy7 from "@tippyjs/react";
|
|
1425
|
-
import
|
|
1388
|
+
import React39, { useContext as useContext10 } from "react";
|
|
1426
1389
|
import { ApplianceNames as ApplianceNames4 } from "white-web-sdk";
|
|
1427
1390
|
|
|
1428
1391
|
// src/components/Toolbar/const.ts
|
|
@@ -1464,9 +1427,9 @@ function ShapesButton() {
|
|
|
1464
1427
|
const key = appliance === ApplianceNames4.shape ? shape : appliance;
|
|
1465
1428
|
const active = ShapeTypes.has(key);
|
|
1466
1429
|
const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
|
|
1467
|
-
return
|
|
1430
|
+
return /* @__PURE__ */ React39.createElement("span", {
|
|
1468
1431
|
className: "fastboard-toolbar-btn-interactive"
|
|
1469
|
-
},
|
|
1432
|
+
}, /* @__PURE__ */ React39.createElement(Tippy7, {
|
|
1470
1433
|
className: "fastboard-tip",
|
|
1471
1434
|
content: renderShapesButtonContent(),
|
|
1472
1435
|
theme,
|
|
@@ -1475,31 +1438,31 @@ function ShapesButton() {
|
|
|
1475
1438
|
offset: RightOffset,
|
|
1476
1439
|
arrow: false,
|
|
1477
1440
|
interactive: true
|
|
1478
|
-
},
|
|
1441
|
+
}, /* @__PURE__ */ React39.createElement(Button, {
|
|
1479
1442
|
content: t("shape"),
|
|
1480
1443
|
active
|
|
1481
|
-
},
|
|
1444
|
+
}, /* @__PURE__ */ React39.createElement(CurrentIcon, {
|
|
1482
1445
|
theme,
|
|
1483
1446
|
active
|
|
1484
|
-
}),
|
|
1447
|
+
}), /* @__PURE__ */ React39.createElement("span", {
|
|
1485
1448
|
className: "fastboard-toolbar-triangle"
|
|
1486
1449
|
}))));
|
|
1487
1450
|
}
|
|
1488
1451
|
function renderShapesButtonContent() {
|
|
1489
|
-
return
|
|
1452
|
+
return /* @__PURE__ */ React39.createElement("div", {
|
|
1490
1453
|
className: "fastboard-toolbar-panel shapes"
|
|
1491
|
-
},
|
|
1454
|
+
}, /* @__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
1455
|
}
|
|
1493
1456
|
function ShapesBox() {
|
|
1494
1457
|
const { t } = useTranslation();
|
|
1495
|
-
return
|
|
1458
|
+
return /* @__PURE__ */ React39.createElement("div", {
|
|
1496
1459
|
className: "fastboard-toolbar-shapes"
|
|
1497
|
-
}, ApplianceShapes.map((Appliance) =>
|
|
1460
|
+
}, ApplianceShapes.map((Appliance) => /* @__PURE__ */ React39.createElement(ApplianceShapeButton, {
|
|
1498
1461
|
key: Appliance,
|
|
1499
1462
|
content: t(Appliance),
|
|
1500
1463
|
Appliance,
|
|
1501
1464
|
Icon: ShapesMap[Appliance]
|
|
1502
|
-
})), Shapes.map((shape) =>
|
|
1465
|
+
})), Shapes.map((shape) => /* @__PURE__ */ React39.createElement(ShapeShapeButton, {
|
|
1503
1466
|
key: shape,
|
|
1504
1467
|
content: t(shape),
|
|
1505
1468
|
shape,
|
|
@@ -1510,12 +1473,12 @@ function ApplianceShapeButton({ content, Appliance, Icon: Icon2 }) {
|
|
|
1510
1473
|
const { theme, writable, setAppliance, memberState } = useContext10(ToolbarContext);
|
|
1511
1474
|
const current = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1512
1475
|
const disabled = !writable;
|
|
1513
|
-
return
|
|
1476
|
+
return /* @__PURE__ */ React39.createElement(Button, {
|
|
1514
1477
|
content,
|
|
1515
1478
|
disabled,
|
|
1516
1479
|
placement: "top",
|
|
1517
1480
|
onClick: () => setAppliance(Appliance)
|
|
1518
|
-
},
|
|
1481
|
+
}, /* @__PURE__ */ React39.createElement(Icon2, {
|
|
1519
1482
|
theme,
|
|
1520
1483
|
active: current === Appliance
|
|
1521
1484
|
}));
|
|
@@ -1525,12 +1488,12 @@ function ShapeShapeButton({ content, shape, Icon: Icon2 }) {
|
|
|
1525
1488
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1526
1489
|
const current = appliance === ApplianceNames4.shape && (memberState == null ? void 0 : memberState.shapeType);
|
|
1527
1490
|
const disabled = !writable;
|
|
1528
|
-
return
|
|
1491
|
+
return /* @__PURE__ */ React39.createElement(Button, {
|
|
1529
1492
|
content,
|
|
1530
1493
|
disabled,
|
|
1531
1494
|
placement: "top",
|
|
1532
1495
|
onClick: () => setAppliance(ApplianceNames4.shape, shape)
|
|
1533
|
-
},
|
|
1496
|
+
}, /* @__PURE__ */ React39.createElement(Icon2, {
|
|
1534
1497
|
theme,
|
|
1535
1498
|
active: current === shape
|
|
1536
1499
|
}));
|
|
@@ -1538,7 +1501,7 @@ function ShapeShapeButton({ content, shape, Icon: Icon2 }) {
|
|
|
1538
1501
|
|
|
1539
1502
|
// src/components/Toolbar/components/TextButton.tsx
|
|
1540
1503
|
import Tippy8 from "@tippyjs/react";
|
|
1541
|
-
import
|
|
1504
|
+
import React40, { useCallback as useCallback8, useContext as useContext11 } from "react";
|
|
1542
1505
|
import { ApplianceNames as ApplianceNames5 } from "white-web-sdk";
|
|
1543
1506
|
function TextButton() {
|
|
1544
1507
|
const app = useFastboardApp();
|
|
@@ -1551,9 +1514,9 @@ function TextButton() {
|
|
|
1551
1514
|
const active = appliance === ApplianceNames5.text;
|
|
1552
1515
|
const disabled = !writable;
|
|
1553
1516
|
const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToText;
|
|
1554
|
-
return
|
|
1517
|
+
return /* @__PURE__ */ React40.createElement("span", {
|
|
1555
1518
|
className: "fastboard-toolbar-btn-interactive"
|
|
1556
|
-
},
|
|
1519
|
+
}, /* @__PURE__ */ React40.createElement(Tippy8, {
|
|
1557
1520
|
className: "fastboard-tip",
|
|
1558
1521
|
content: renderTextButtonContent(),
|
|
1559
1522
|
theme,
|
|
@@ -1562,53 +1525,53 @@ function TextButton() {
|
|
|
1562
1525
|
offset: RightOffset,
|
|
1563
1526
|
arrow: false,
|
|
1564
1527
|
interactive: true
|
|
1565
|
-
},
|
|
1528
|
+
}, /* @__PURE__ */ React40.createElement(Button, {
|
|
1566
1529
|
content: renderToolTip(t("text"), shortcut),
|
|
1567
1530
|
active,
|
|
1568
1531
|
onClick: changeAppliance
|
|
1569
|
-
},
|
|
1570
|
-
fallback:
|
|
1532
|
+
}, /* @__PURE__ */ React40.createElement(Icon, {
|
|
1533
|
+
fallback: /* @__PURE__ */ React40.createElement(Icons.Text, {
|
|
1571
1534
|
theme,
|
|
1572
1535
|
active
|
|
1573
1536
|
}),
|
|
1574
1537
|
src: disabled ? icons == null ? void 0 : icons.textIconDisable : icons == null ? void 0 : icons.textIcon,
|
|
1575
1538
|
alt: "[text]"
|
|
1576
|
-
}),
|
|
1539
|
+
}), /* @__PURE__ */ React40.createElement("span", {
|
|
1577
1540
|
className: "fastboard-toolbar-triangle"
|
|
1578
1541
|
}))));
|
|
1579
1542
|
}
|
|
1580
1543
|
function renderTextButtonContent() {
|
|
1581
|
-
return
|
|
1544
|
+
return /* @__PURE__ */ React40.createElement("div", {
|
|
1582
1545
|
className: "fastboard-toolbar-panel text"
|
|
1583
|
-
},
|
|
1546
|
+
}, /* @__PURE__ */ React40.createElement(ColorBox, null));
|
|
1584
1547
|
}
|
|
1585
1548
|
|
|
1586
1549
|
// src/components/Toolbar/components/UpDownButtons.tsx
|
|
1587
|
-
import
|
|
1550
|
+
import React41, { useCallback as useCallback9, useContext as useContext12 } from "react";
|
|
1588
1551
|
function UpButton({ disabled, scrollTo }) {
|
|
1589
1552
|
const { theme, icons } = useContext12(ToolbarContext);
|
|
1590
1553
|
const scrollUp = useCallback9(() => scrollTo(-ItemHeight), [scrollTo]);
|
|
1591
|
-
return
|
|
1554
|
+
return /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(Button, {
|
|
1592
1555
|
content: "Up",
|
|
1593
1556
|
disabled,
|
|
1594
1557
|
onClick: scrollUp
|
|
1595
|
-
},
|
|
1596
|
-
fallback:
|
|
1558
|
+
}, /* @__PURE__ */ React41.createElement(Icon, {
|
|
1559
|
+
fallback: /* @__PURE__ */ React41.createElement(Icons.Up, {
|
|
1597
1560
|
theme
|
|
1598
1561
|
}),
|
|
1599
1562
|
src: disabled ? icons == null ? void 0 : icons.upIconDisable : icons == null ? void 0 : icons.upIcon,
|
|
1600
1563
|
alt: "[up]"
|
|
1601
|
-
})),
|
|
1564
|
+
})), /* @__PURE__ */ React41.createElement(CutLine, null));
|
|
1602
1565
|
}
|
|
1603
1566
|
function DownButton({ disabled, scrollTo }) {
|
|
1604
1567
|
const { theme, icons } = useContext12(ToolbarContext);
|
|
1605
1568
|
const scrollDown = useCallback9(() => scrollTo(ItemHeight), [scrollTo]);
|
|
1606
|
-
return
|
|
1569
|
+
return /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(CutLine, null), /* @__PURE__ */ React41.createElement(Button, {
|
|
1607
1570
|
content: "Down",
|
|
1608
1571
|
disabled,
|
|
1609
1572
|
onClick: scrollDown
|
|
1610
|
-
},
|
|
1611
|
-
fallback:
|
|
1573
|
+
}, /* @__PURE__ */ React41.createElement(Icon, {
|
|
1574
|
+
fallback: /* @__PURE__ */ React41.createElement(Icons.Down, {
|
|
1612
1575
|
theme
|
|
1613
1576
|
}),
|
|
1614
1577
|
src: disabled ? icons == null ? void 0 : icons.downIconDisable : icons == null ? void 0 : icons.downIcon,
|
|
@@ -1616,11 +1579,16 @@ function DownButton({ disabled, scrollTo }) {
|
|
|
1616
1579
|
})));
|
|
1617
1580
|
}
|
|
1618
1581
|
|
|
1582
|
+
// src/components/Toolbar/components/assets/collapsed.png
|
|
1583
|
+
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";
|
|
1584
|
+
|
|
1619
1585
|
// src/components/Toolbar/Content.tsx
|
|
1620
|
-
|
|
1586
|
+
function Content({ onCollapse }) {
|
|
1587
|
+
const { theme, icons, writable } = useContext13(ToolbarContext);
|
|
1621
1588
|
const ref = useRef2(null);
|
|
1622
|
-
const [scrollTop, setScrollTop] =
|
|
1623
|
-
const [parentHeight, setParentHeight] =
|
|
1589
|
+
const [scrollTop, setScrollTop] = useState3(0);
|
|
1590
|
+
const [parentHeight, setParentHeight] = useState3(0);
|
|
1591
|
+
const disabled = !writable;
|
|
1624
1592
|
const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
|
|
1625
1593
|
const sectionHeight = clamp(parentHeight - 48 * (needScroll ? 3 : 1), MinHeight, MaxHeight);
|
|
1626
1594
|
const scrollBuffer = Math.max(parentHeight - sectionHeight - 1, 0);
|
|
@@ -1629,12 +1597,12 @@ var Content = React43.memo(() => {
|
|
|
1629
1597
|
const scrollTo = useCallback10((height) => {
|
|
1630
1598
|
setScrollTop(clamp(scrollTop + height, 0, scrollBuffer));
|
|
1631
1599
|
}, [scrollBuffer, scrollTop]);
|
|
1632
|
-
|
|
1600
|
+
useEffect3(() => {
|
|
1633
1601
|
if (ref.current) {
|
|
1634
1602
|
ref.current.scrollTop = scrollTop;
|
|
1635
1603
|
}
|
|
1636
1604
|
}, [scrollTop]);
|
|
1637
|
-
|
|
1605
|
+
useEffect3(() => {
|
|
1638
1606
|
var _a, _b;
|
|
1639
1607
|
const container = (_b = (_a = ref.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
|
|
1640
1608
|
if (container) {
|
|
@@ -1647,95 +1615,82 @@ var Content = React43.memo(() => {
|
|
|
1647
1615
|
return () => resizeObserver.disconnect();
|
|
1648
1616
|
}
|
|
1649
1617
|
}, []);
|
|
1650
|
-
return
|
|
1618
|
+
return /* @__PURE__ */ React42.createElement(React42.Fragment, null, needScroll && /* @__PURE__ */ React42.createElement(UpButton, {
|
|
1651
1619
|
scrollTo,
|
|
1652
1620
|
disabled: disableScrollUp
|
|
1653
|
-
}),
|
|
1621
|
+
}), /* @__PURE__ */ React42.createElement("div", {
|
|
1654
1622
|
ref,
|
|
1655
1623
|
className: clsx8(`${name4}-section`),
|
|
1656
1624
|
style: {
|
|
1657
1625
|
height: `${sectionHeight}px`,
|
|
1658
1626
|
overflow: needScroll ? "hidden" : "visible"
|
|
1659
1627
|
}
|
|
1660
|
-
},
|
|
1628
|
+
}, /* @__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
1629
|
scrollTo,
|
|
1662
1630
|
disabled: disableScrollDown
|
|
1663
|
-
})
|
|
1664
|
-
|
|
1631
|
+
}), /* @__PURE__ */ React42.createElement("div", {
|
|
1632
|
+
className: clsx8("fastboard-toolbar-mask", theme),
|
|
1633
|
+
onClick: onCollapse
|
|
1634
|
+
}, /* @__PURE__ */ React42.createElement(Icon, {
|
|
1635
|
+
fallback: /* @__PURE__ */ React42.createElement("img", {
|
|
1636
|
+
draggable: false,
|
|
1637
|
+
className: clsx8(`${name4}-mask-btn`, theme),
|
|
1638
|
+
src: collapsed_default
|
|
1639
|
+
}),
|
|
1640
|
+
src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
|
|
1641
|
+
})));
|
|
1642
|
+
}
|
|
1665
1643
|
|
|
1666
1644
|
// src/components/Toolbar/Toolbar.tsx
|
|
1667
1645
|
var ToolbarContext = createContext3(__spreadValues({
|
|
1668
1646
|
theme: "light"
|
|
1669
1647
|
}, EmptyToolbarHook));
|
|
1670
1648
|
var name4 = "fastboard-toolbar";
|
|
1671
|
-
|
|
1649
|
+
function Toolbar({ theme, icons }) {
|
|
1672
1650
|
theme = useTheme(theme);
|
|
1673
1651
|
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);
|
|
1652
|
+
const [expanded, setExpanded] = useState4(true);
|
|
1653
|
+
const [pointerEvents, setPointerEvents] = useState4("auto");
|
|
1679
1654
|
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 React44.createElement(ToolbarContext.Provider, {
|
|
1655
|
+
return /* @__PURE__ */ React43.createElement(ToolbarContext.Provider, {
|
|
1690
1656
|
value: __spreadValues({ theme, icons }, hook)
|
|
1691
|
-
},
|
|
1692
|
-
initial: { x: -100 },
|
|
1693
|
-
animate: { x: 0, transition: { duration: 0.5 } },
|
|
1657
|
+
}, /* @__PURE__ */ React43.createElement(AnimatePresence, null, expanded ? /* @__PURE__ */ React43.createElement(motion.div, {
|
|
1694
1658
|
key: "toolbar",
|
|
1695
|
-
ref: toolbarRef,
|
|
1696
1659
|
className: clsx9(name4, theme),
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
},
|
|
1700
|
-
onMouseLeave: () => setOnHover(false),
|
|
1660
|
+
initial: { x: -100 },
|
|
1661
|
+
animate: { x: 0, transition: { duration: 0.5 } },
|
|
1701
1662
|
exit: { x: -100, transition: { duration: 0.5 } },
|
|
1702
|
-
onAnimationStart: () =>
|
|
1703
|
-
onAnimationComplete: () =>
|
|
1704
|
-
style: { pointerEvents
|
|
1705
|
-
},
|
|
1706
|
-
|
|
1707
|
-
}
|
|
1708
|
-
onClick: toggle
|
|
1709
|
-
}, React44.createElement("img", {
|
|
1710
|
-
draggable: false,
|
|
1711
|
-
className: clsx9(`${name4}-mask-btn`, theme),
|
|
1712
|
-
src: collapsed_default
|
|
1713
|
-
})))) : React44.createElement(motion.div, {
|
|
1663
|
+
onAnimationStart: () => setPointerEvents("none"),
|
|
1664
|
+
onAnimationComplete: () => setPointerEvents("auto"),
|
|
1665
|
+
style: { pointerEvents }
|
|
1666
|
+
}, /* @__PURE__ */ React43.createElement(Content, {
|
|
1667
|
+
onCollapse: () => setExpanded(false)
|
|
1668
|
+
})) : /* @__PURE__ */ React43.createElement(motion.div, {
|
|
1714
1669
|
className: clsx9(`${name4}-expand-btn`, theme),
|
|
1715
1670
|
key: "expand",
|
|
1716
|
-
onClick:
|
|
1671
|
+
onClick: () => setExpanded(true),
|
|
1717
1672
|
initial: { x: -100 },
|
|
1718
1673
|
animate: { x: 0, transition: { duration: 0.5 } }
|
|
1719
|
-
},
|
|
1720
|
-
fallback:
|
|
1674
|
+
}, /* @__PURE__ */ React43.createElement(Icon, {
|
|
1675
|
+
fallback: /* @__PURE__ */ React43.createElement("img", {
|
|
1721
1676
|
draggable: false,
|
|
1722
1677
|
src: expanded_default,
|
|
1723
1678
|
className: clsx9(`${name4}-mask-btn`, theme)
|
|
1724
1679
|
}),
|
|
1725
1680
|
src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
|
|
1726
1681
|
}))));
|
|
1727
|
-
}
|
|
1682
|
+
}
|
|
1728
1683
|
|
|
1729
1684
|
// src/components/PlayerControl/hooks.ts
|
|
1730
|
-
import { useCallback as
|
|
1685
|
+
import { useCallback as useCallback11, useEffect as useEffect4, useState as useState5 } from "react";
|
|
1731
1686
|
import { PlayerPhase } from "white-web-sdk";
|
|
1732
1687
|
var EMPTY_ARRAY = [];
|
|
1733
1688
|
function useForceUpdate2() {
|
|
1734
|
-
const [, forceUpdate_] =
|
|
1735
|
-
return
|
|
1689
|
+
const [, forceUpdate_] = useState5({});
|
|
1690
|
+
return useCallback11(() => forceUpdate_({}), EMPTY_ARRAY);
|
|
1736
1691
|
}
|
|
1737
1692
|
function usePlayerControl(player) {
|
|
1738
|
-
const togglePlay =
|
|
1693
|
+
const togglePlay = useCallback11(() => {
|
|
1739
1694
|
if (player) {
|
|
1740
1695
|
switch (player.phase) {
|
|
1741
1696
|
case PlayerPhase.WaitingFirstFrame:
|
|
@@ -1751,25 +1706,25 @@ function usePlayerControl(player) {
|
|
|
1751
1706
|
}
|
|
1752
1707
|
}
|
|
1753
1708
|
}, [player]);
|
|
1754
|
-
const seekToProgressTime =
|
|
1709
|
+
const seekToProgressTime = useCallback11((time) => {
|
|
1755
1710
|
if (player) {
|
|
1756
1711
|
player.seekToProgressTime(time);
|
|
1757
1712
|
}
|
|
1758
1713
|
}, [player]);
|
|
1759
1714
|
const lastPlayer = useLastValue(player);
|
|
1760
1715
|
const forceUpdate = useForceUpdate2();
|
|
1761
|
-
const setSpeed =
|
|
1716
|
+
const setSpeed = useCallback11((speed2) => {
|
|
1762
1717
|
if (player) {
|
|
1763
1718
|
player.playbackSpeed = speed2;
|
|
1764
1719
|
forceUpdate();
|
|
1765
1720
|
}
|
|
1766
1721
|
}, [forceUpdate, player]);
|
|
1767
|
-
|
|
1722
|
+
useEffect4(() => {
|
|
1768
1723
|
if (!lastPlayer && player) {
|
|
1769
1724
|
forceUpdate();
|
|
1770
1725
|
}
|
|
1771
1726
|
}, [forceUpdate, lastPlayer, player]);
|
|
1772
|
-
|
|
1727
|
+
useEffect4(() => {
|
|
1773
1728
|
if (player) {
|
|
1774
1729
|
player.callbacks.on("onPhaseChanged", forceUpdate);
|
|
1775
1730
|
player.callbacks.on("onProgressTimeChanged", forceUpdate);
|
|
@@ -1798,16 +1753,16 @@ function usePlayerControl(player) {
|
|
|
1798
1753
|
import Tippy10 from "@tippyjs/react";
|
|
1799
1754
|
import clsx11 from "clsx";
|
|
1800
1755
|
import RcSlider2 from "rc-slider";
|
|
1801
|
-
import
|
|
1756
|
+
import React48, { useEffect as useEffect5, useState as useState6 } from "react";
|
|
1802
1757
|
import { PlayerPhase as PlayerPhase2 } from "white-web-sdk";
|
|
1803
1758
|
|
|
1804
1759
|
// src/components/PlayerControl/components/Button.tsx
|
|
1805
1760
|
import clsx10 from "clsx";
|
|
1806
|
-
import
|
|
1761
|
+
import React44, { forwardRef as forwardRef2 } from "react";
|
|
1807
1762
|
import Tippy9 from "@tippyjs/react";
|
|
1808
1763
|
var Button2 = forwardRef2((props, ref) => {
|
|
1809
1764
|
const { theme, content, disabled, active, onClick, interactive, placement = "top", children } = props;
|
|
1810
|
-
return
|
|
1765
|
+
return /* @__PURE__ */ React44.createElement(Tippy9, {
|
|
1811
1766
|
className: "fastboard-tip",
|
|
1812
1767
|
content,
|
|
1813
1768
|
interactive,
|
|
@@ -1817,7 +1772,7 @@ var Button2 = forwardRef2((props, ref) => {
|
|
|
1817
1772
|
offset: TopOffset,
|
|
1818
1773
|
delay: [1e3, 400],
|
|
1819
1774
|
duration: 300
|
|
1820
|
-
},
|
|
1775
|
+
}, /* @__PURE__ */ React44.createElement("button", {
|
|
1821
1776
|
ref,
|
|
1822
1777
|
className: clsx10("fastboard-player-control-btn", theme, { active }),
|
|
1823
1778
|
onClick,
|
|
@@ -1829,36 +1784,36 @@ var Button2 = forwardRef2((props, ref) => {
|
|
|
1829
1784
|
import { memo as memo2 } from "react";
|
|
1830
1785
|
|
|
1831
1786
|
// src/components/PlayerControl/icons/Loading.tsx
|
|
1832
|
-
import
|
|
1787
|
+
import React45 from "react";
|
|
1833
1788
|
var Loading = (props) => {
|
|
1834
1789
|
const stroke = getStroke(props);
|
|
1835
|
-
return
|
|
1790
|
+
return /* @__PURE__ */ React45.createElement("svg", {
|
|
1836
1791
|
viewBox: "0 0 24 24"
|
|
1837
|
-
},
|
|
1792
|
+
}, /* @__PURE__ */ React45.createElement("path", {
|
|
1838
1793
|
d: "M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z",
|
|
1839
1794
|
fill: stroke
|
|
1840
1795
|
}));
|
|
1841
1796
|
};
|
|
1842
1797
|
|
|
1843
1798
|
// src/components/PlayerControl/icons/Pause.tsx
|
|
1844
|
-
import
|
|
1799
|
+
import React46 from "react";
|
|
1845
1800
|
var Pause = (props) => {
|
|
1846
1801
|
const stroke = getStroke(props);
|
|
1847
|
-
return
|
|
1802
|
+
return /* @__PURE__ */ React46.createElement("svg", {
|
|
1848
1803
|
viewBox: "0 0 24 24"
|
|
1849
|
-
},
|
|
1804
|
+
}, /* @__PURE__ */ React46.createElement("path", {
|
|
1850
1805
|
d: "M14 19h4V5h-4M6 19h4V5H6v14z",
|
|
1851
1806
|
fill: stroke
|
|
1852
1807
|
}));
|
|
1853
1808
|
};
|
|
1854
1809
|
|
|
1855
1810
|
// src/components/PlayerControl/icons/Play.tsx
|
|
1856
|
-
import
|
|
1811
|
+
import React47 from "react";
|
|
1857
1812
|
var Play = (props) => {
|
|
1858
1813
|
const stroke = getStroke(props);
|
|
1859
|
-
return
|
|
1814
|
+
return /* @__PURE__ */ React47.createElement("svg", {
|
|
1860
1815
|
viewBox: "0 0 24 24"
|
|
1861
|
-
},
|
|
1816
|
+
}, /* @__PURE__ */ React47.createElement("path", {
|
|
1862
1817
|
d: "M8 5.14v14l11-7l-11-7z",
|
|
1863
1818
|
fill: stroke
|
|
1864
1819
|
}));
|
|
@@ -1877,12 +1832,12 @@ function PlayerControl(_a) {
|
|
|
1877
1832
|
var _b = _a, { theme, autoHide = false, player: player_ } = _b, icons = __objRest(_b, ["theme", "autoHide", "player"]);
|
|
1878
1833
|
theme = useTheme(theme);
|
|
1879
1834
|
const { t } = useTranslation();
|
|
1880
|
-
const [currentTime, setCurrentTime] =
|
|
1835
|
+
const [currentTime, setCurrentTime] = useState6(0);
|
|
1881
1836
|
const player = usePlayerControl(player_);
|
|
1882
|
-
|
|
1837
|
+
useEffect5(() => {
|
|
1883
1838
|
setCurrentTime(player.currentTime);
|
|
1884
1839
|
}, [player.currentTime]);
|
|
1885
|
-
|
|
1840
|
+
useEffect5(() => {
|
|
1886
1841
|
if (player.currentTime !== currentTime) {
|
|
1887
1842
|
player.seekToProgressTime(currentTime);
|
|
1888
1843
|
}
|
|
@@ -1890,25 +1845,25 @@ function PlayerControl(_a) {
|
|
|
1890
1845
|
const isLoading = player.phase === PlayerPhase2.WaitingFirstFrame || player.phase === PlayerPhase2.Buffering;
|
|
1891
1846
|
const isPlaying = player.phase === PlayerPhase2.Playing;
|
|
1892
1847
|
const { activeColor } = themes[theme];
|
|
1893
|
-
return
|
|
1848
|
+
return /* @__PURE__ */ React48.createElement("div", {
|
|
1894
1849
|
className: clsx11(name5, theme, { "auto-hide": autoHide })
|
|
1895
|
-
},
|
|
1850
|
+
}, /* @__PURE__ */ React48.createElement("button", {
|
|
1896
1851
|
className: clsx11(`${name5}-btn`, isLoading ? "loading" : isPlaying ? "pause" : "play", theme),
|
|
1897
1852
|
disabled: isLoading,
|
|
1898
1853
|
onClick: player.togglePlay
|
|
1899
|
-
},
|
|
1900
|
-
fallback: isLoading ?
|
|
1854
|
+
}, /* @__PURE__ */ React48.createElement(Icon, {
|
|
1855
|
+
fallback: isLoading ? /* @__PURE__ */ React48.createElement(Icons2.Loading, {
|
|
1901
1856
|
theme
|
|
1902
|
-
}) : isPlaying ?
|
|
1857
|
+
}) : isPlaying ? /* @__PURE__ */ React48.createElement(Icons2.Pause, {
|
|
1903
1858
|
theme
|
|
1904
|
-
}) :
|
|
1859
|
+
}) : /* @__PURE__ */ React48.createElement(Icons2.Play, {
|
|
1905
1860
|
theme
|
|
1906
1861
|
}),
|
|
1907
1862
|
src: isLoading ? icons.loadingIcon : isPlaying ? icons.pauseIcon : icons.playIcon,
|
|
1908
1863
|
alt: isLoading ? "[loading]" : isPlaying ? "[pause]" : "[play]"
|
|
1909
|
-
})),
|
|
1864
|
+
})), /* @__PURE__ */ React48.createElement("span", {
|
|
1910
1865
|
className: clsx11(`${name5}-slider`, { loading: isLoading }, theme)
|
|
1911
|
-
},
|
|
1866
|
+
}, /* @__PURE__ */ React48.createElement(RcSlider2, {
|
|
1912
1867
|
disabled: isLoading,
|
|
1913
1868
|
trackStyle: { background: activeColor },
|
|
1914
1869
|
handleStyle: { border: `1px solid ${activeColor}` },
|
|
@@ -1917,15 +1872,15 @@ function PlayerControl(_a) {
|
|
|
1917
1872
|
min: 0,
|
|
1918
1873
|
max: player.totalTime,
|
|
1919
1874
|
step: 100
|
|
1920
|
-
})),
|
|
1875
|
+
})), /* @__PURE__ */ React48.createElement("span", {
|
|
1921
1876
|
className: clsx11(`${name5}-current`, theme)
|
|
1922
|
-
}, renderTime(player.currentTime)),
|
|
1877
|
+
}, renderTime(player.currentTime)), /* @__PURE__ */ React48.createElement("span", {
|
|
1923
1878
|
className: clsx11(`${name5}-slash`, theme)
|
|
1924
|
-
}, "/"),
|
|
1879
|
+
}, "/"), /* @__PURE__ */ React48.createElement("span", {
|
|
1925
1880
|
className: clsx11(`${name5}-total`, theme)
|
|
1926
|
-
}, renderTime(player.totalTime)),
|
|
1881
|
+
}, renderTime(player.totalTime)), /* @__PURE__ */ React48.createElement("span", {
|
|
1927
1882
|
className: `${name5}-btn-interactive`
|
|
1928
|
-
},
|
|
1883
|
+
}, /* @__PURE__ */ React48.createElement(Tippy10, {
|
|
1929
1884
|
className: "fastboard-tip",
|
|
1930
1885
|
content: renderSpeeds(player),
|
|
1931
1886
|
theme,
|
|
@@ -1934,11 +1889,11 @@ function PlayerControl(_a) {
|
|
|
1934
1889
|
offset: TopOffset,
|
|
1935
1890
|
arrow: false,
|
|
1936
1891
|
interactive: true
|
|
1937
|
-
},
|
|
1892
|
+
}, /* @__PURE__ */ React48.createElement(Button2, {
|
|
1938
1893
|
content: t("speed"),
|
|
1939
1894
|
theme,
|
|
1940
1895
|
disabled: isLoading
|
|
1941
|
-
},
|
|
1896
|
+
}, /* @__PURE__ */ React48.createElement("span", {
|
|
1942
1897
|
className: clsx11(`${name5}-speed-text`, theme)
|
|
1943
1898
|
}, player.speed, "x")))));
|
|
1944
1899
|
}
|
|
@@ -1950,9 +1905,9 @@ function renderTime(ms) {
|
|
|
1950
1905
|
}
|
|
1951
1906
|
var Speeds = [2, 1.5, 1.25, 1, 0.75, 0.5];
|
|
1952
1907
|
function renderSpeeds({ speed: current, setSpeed }) {
|
|
1953
|
-
return
|
|
1908
|
+
return /* @__PURE__ */ React48.createElement("div", {
|
|
1954
1909
|
className: clsx11(`${name5}-panel`, "speed")
|
|
1955
|
-
}, Speeds.map((speed) =>
|
|
1910
|
+
}, Speeds.map((speed) => /* @__PURE__ */ React48.createElement("button", {
|
|
1956
1911
|
className: clsx11(`${name5}-btn`, "speed", {
|
|
1957
1912
|
active: speed === current
|
|
1958
1913
|
}),
|
|
@@ -1962,18 +1917,18 @@ function renderSpeeds({ speed: current, setSpeed }) {
|
|
|
1962
1917
|
}
|
|
1963
1918
|
|
|
1964
1919
|
// src/components/Fastboard.tsx
|
|
1965
|
-
import
|
|
1966
|
-
var Fastboard = forwardRef3(function Fastboard2(_a, ref) {
|
|
1920
|
+
import React49, { forwardRef as forwardRef3, useCallback as useCallback12, useEffect as useEffect6 } from "react";
|
|
1921
|
+
var Fastboard = /* @__PURE__ */ forwardRef3(function Fastboard2(_a, ref) {
|
|
1967
1922
|
var _b = _a, { app, theme, layout, language } = _b, restProps = __objRest(_b, ["app", "theme", "layout", "language"]);
|
|
1968
1923
|
if (!app) {
|
|
1969
|
-
return
|
|
1924
|
+
return /* @__PURE__ */ React49.createElement("div", __spreadValues({
|
|
1970
1925
|
className: "fastboard-root",
|
|
1971
1926
|
ref
|
|
1972
1927
|
}, restProps));
|
|
1973
1928
|
}
|
|
1974
|
-
return
|
|
1929
|
+
return /* @__PURE__ */ React49.createElement(FastboardAppContext.Provider, {
|
|
1975
1930
|
value: app
|
|
1976
|
-
},
|
|
1931
|
+
}, /* @__PURE__ */ React49.createElement(FastboardInternal, __spreadValues(__spreadValues({
|
|
1977
1932
|
forwardedRef: ref
|
|
1978
1933
|
}, { theme, layout, language }), restProps)));
|
|
1979
1934
|
});
|
|
@@ -1994,15 +1949,15 @@ function FastboardInternal(_a) {
|
|
|
1994
1949
|
const app = useFastboardApp();
|
|
1995
1950
|
const forceUpdate = useForceUpdate();
|
|
1996
1951
|
const i18n = useAsyncValue(() => createI18n({ language }));
|
|
1997
|
-
|
|
1952
|
+
useEffect6(() => {
|
|
1998
1953
|
if (i18n)
|
|
1999
1954
|
i18n.changeLanguage(language);
|
|
2000
1955
|
forceUpdate();
|
|
2001
1956
|
}, [forceUpdate, i18n, language]);
|
|
2002
|
-
|
|
1957
|
+
useEffect6(() => {
|
|
2003
1958
|
app.manager.setPrefersColorScheme(theme);
|
|
2004
1959
|
}, [app, theme]);
|
|
2005
|
-
const useWhiteboard =
|
|
1960
|
+
const useWhiteboard = useCallback12((container) => {
|
|
2006
1961
|
if (container && app)
|
|
2007
1962
|
app.manager.bindContainer(container);
|
|
2008
1963
|
}, [app]);
|
|
@@ -2014,23 +1969,33 @@ function FastboardInternal(_a) {
|
|
|
2014
1969
|
ZoomControl: zoom_control = showControls,
|
|
2015
1970
|
PageControl: page_control = showControls
|
|
2016
1971
|
} = layout;
|
|
2017
|
-
return
|
|
1972
|
+
return /* @__PURE__ */ React49.createElement(ThemeContext.Provider, {
|
|
2018
1973
|
value: theme
|
|
2019
|
-
},
|
|
1974
|
+
}, /* @__PURE__ */ React49.createElement(I18nContext.Provider, {
|
|
2020
1975
|
value: i18n
|
|
2021
|
-
},
|
|
1976
|
+
}, /* @__PURE__ */ React49.createElement("div", __spreadProps(__spreadValues({}, restProps), {
|
|
2022
1977
|
className: "fastboard-root",
|
|
2023
1978
|
ref: forwardedRef
|
|
2024
|
-
}),
|
|
1979
|
+
}), /* @__PURE__ */ React49.createElement("div", {
|
|
2025
1980
|
className: "fastboard-view",
|
|
2026
1981
|
ref: useWhiteboard
|
|
2027
|
-
}), children ? children :
|
|
1982
|
+
}), children ? children : /* @__PURE__ */ React49.createElement(React49.Fragment, null, toolbar && /* @__PURE__ */ React49.createElement("div", {
|
|
2028
1983
|
className: "fastboard-left"
|
|
2029
|
-
},
|
|
1984
|
+
}, /* @__PURE__ */ React49.createElement(Toolbar, null)), (redo_undo || zoom_control) && /* @__PURE__ */ React49.createElement("div", {
|
|
2030
1985
|
className: "fastboard-bottom-left"
|
|
2031
|
-
}, redo_undo &&
|
|
1986
|
+
}, redo_undo && /* @__PURE__ */ React49.createElement(RedoUndo, null), zoom_control && /* @__PURE__ */ React49.createElement(ZoomControl, null)), page_control && /* @__PURE__ */ React49.createElement("div", {
|
|
2032
1987
|
className: "fastboard-bottom-right"
|
|
2033
|
-
},
|
|
1988
|
+
}, /* @__PURE__ */ React49.createElement(PageControl, null))))));
|
|
1989
|
+
}
|
|
1990
|
+
|
|
1991
|
+
// src/vanilla/index.tsx
|
|
1992
|
+
import React50 from "react";
|
|
1993
|
+
import ReactDOM from "react-dom";
|
|
1994
|
+
function mount(app, dom, props) {
|
|
1995
|
+
ReactDOM.render(/* @__PURE__ */ React50.createElement(Fastboard, __spreadValues({
|
|
1996
|
+
app
|
|
1997
|
+
}, props)), dom);
|
|
1998
|
+
return () => ReactDOM.unmountComponentAtNode(dom);
|
|
2034
1999
|
}
|
|
2035
2000
|
export {
|
|
2036
2001
|
EmptyToolbarHook,
|
|
@@ -2043,6 +2008,7 @@ export {
|
|
|
2043
2008
|
ThemeContext,
|
|
2044
2009
|
Toolbar,
|
|
2045
2010
|
ZoomControl,
|
|
2011
|
+
mount,
|
|
2046
2012
|
useBoxState,
|
|
2047
2013
|
useFastboardApp,
|
|
2048
2014
|
useFastboardValue,
|