@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.js
CHANGED
|
@@ -68,6 +68,7 @@ __export(src_exports, {
|
|
|
68
68
|
ThemeContext: () => ThemeContext,
|
|
69
69
|
Toolbar: () => Toolbar,
|
|
70
70
|
ZoomControl: () => ZoomControl,
|
|
71
|
+
mount: () => mount,
|
|
71
72
|
useBoxState: () => useBoxState,
|
|
72
73
|
useFastboardApp: () => useFastboardApp,
|
|
73
74
|
useFastboardValue: () => useFastboardValue,
|
|
@@ -84,10 +85,6 @@ __export(src_exports, {
|
|
|
84
85
|
useZoomControl: () => useZoomControl
|
|
85
86
|
});
|
|
86
87
|
|
|
87
|
-
// ../../node_modules/.pnpm/tsup@5.11.11_typescript@4.5.4/node_modules/tsup/assets/cjs_shims.js
|
|
88
|
-
var getImportMetaUrl = () => typeof document === "undefined" ? new URL("file:" + __filename).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
|
|
89
|
-
var importMetaUrl = getImportMetaUrl();
|
|
90
|
-
|
|
91
88
|
// src/internal/helpers.ts
|
|
92
89
|
function noop() {
|
|
93
90
|
return;
|
|
@@ -139,7 +136,7 @@ function useForceUpdate() {
|
|
|
139
136
|
}
|
|
140
137
|
|
|
141
138
|
// src/style.scss?inline
|
|
142
|
-
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';
|
|
139
|
+
var style_default = '.netless-window-manager-playground{width:100%;height:100%;position:relative;z-index:1;overflow:hidden;user-select:none}.netless-window-manager-sizer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;display:flex}.netless-window-manager-sizer-horizontal{flex-direction:column}.netless-window-manager-sizer:before,.netless-window-manager-sizer:after{flex:1;content:"";display:block}.netless-window-manager-chess-sizer:before,.netless-window-manager-chess-sizer:after{background-image:linear-gradient(45deg,#b0b0b0 25%,transparent 25%),linear-gradient(-45deg,#b0b0b0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b0b0b0 75%),linear-gradient(-45deg,transparent 75%,#b0b0b0 75%);background-color:#fff;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.netless-window-manager-wrapper{position:relative;z-index:1;width:100%;height:100%;overflow:hidden}.netless-window-manager-main-view{width:100%;height:100%}.netless-window-manager-cursor-pencil-image,.netless-window-manager-cursor-eraser-image{width:26px;height:26px}.netless-window-manager-cursor-selector-image{width:24px;height:24px}.netless-window-manager-cursor-selector-avatar{border-radius:50%;border-style:solid;border-width:2px;border-color:#fff;margin-bottom:2px}.netless-window-manager-cursor-selector-avatar img{width:12px}.netless-window-manager-cursor-inner{border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:4px;padding-right:4px;font-size:12px}.netless-window-manager-cursor-inner-mellow{height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:16px;padding-right:16px}.netless-window-manager-cursor-tag-name{font-size:12px;margin-left:4px;padding:2px 8px;border-radius:4px}.netless-window-manager-cursor-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:26px;height:26px;z-index:2147483647;left:0;top:0;will-change:transform;transition:transform .1s;transform-origin:0 0;user-select:none}.netless-window-manager-cursor-pencil-offset{margin-left:-20px}.netless-window-manager-cursor-selector-offset{margin-left:-22px;margin-top:56px}.netless-window-manager-cursor-text-offset{margin-left:-30px;margin-top:18px}.netless-window-manager-cursor-shape-offset{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px;margin-left:-30px;margin-top:12px}.netless-window-manager-cursor-name{width:100%;height:48px;display:flex;align-items:center;justify-content:center;position:absolute;top:-40px}.cursor-image-wrapper{display:flex;justify-content:center}.telebox-collector{position:absolute;right:10px;bottom:15px}.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;transition:width .4s cubic-bezier(.4,.9,.71,1.02),height .4s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px #2f419226;border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-resize-handle{position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{transition:width 50ms cubic-bezier(.4,.9,.71,1.02),height 50ms cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7,0,.84,0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;background:#fff;user-select:none;border-bottom:1px solid #eeeef7;touch-action:manipulation}.telebox-title-area{overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{overflow:hidden;margin:0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;color:#191919}.telebox-drag-area{position:absolute;inset:0;margin:auto;z-index:10}.telebox-titlebar-btns{white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{width:22px;height:22px;padding:0;outline:0;border:none;background:0 0;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-titlebar-icon-maximize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==)}.telebox-titlebar-icon-maximize.is-active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K)}.telebox-titlebar-icon-close{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-collector{visibility:hidden;display:block;position:absolute;z-index:200;width:40px;height:40px;margin:0;padding:0;border:none;outline:0;font-size:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px #2f419226;cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark.telebox-collector{background-color:#43434d}.telebox-max-titlebar{display:none;position:absolute;top:0;left:0;z-index:50000;user-select:none}.telebox-max-titlebar .telebox-drag-area{height:100%;min-width:16px;position:static;margin:0;flex-grow:1;flex-shrink:0}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:8px;width:8px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:#eeeef7cc;background-color:transparent;border-radius:4px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:#eeeef7cc}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{height:100%;overflow:hidden;max-width:182px;min-width:50px;padding:0 26px 0 16px;outline:0;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right:1px solid #e5e5f0;color:#7b88a0;background:0 0;cursor:pointer;user-select:none}.telebox-titles-tab-focus{color:#357bf6}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-color-scheme-dark .telebox-titles-tab{border-right-color:#7b88a0}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}.rc-slider{position:relative;height:14px;padding:5px 0;width:100%;border-radius:6px;touch-action:none;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-rail{position:absolute;width:100%;background-color:#e9e9e9;height:4px;border-radius:6px}.rc-slider-track{position:absolute;left:0;height:4px;border-radius:6px;background-color:#abe2fb}.rc-slider-handle{position:absolute;width:14px;height:14px;cursor:pointer;cursor:-webkit-grab;margin-top:-5px;cursor:grab;border-radius:50%;border:solid 2px #96dbfa;background-color:#fff;touch-action:pan-x}.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging{border-color:#57c5f7;box-shadow:0 0 0 5px #96dbfa}.rc-slider-handle:focus{outline:none}.rc-slider-handle-click-focused:focus{border-color:#96dbfa;box-shadow:unset}.rc-slider-handle:hover{border-color:#57c5f7}.rc-slider-handle:active{border-color:#57c5f7;box-shadow:0 0 5px #57c5f7;cursor:-webkit-grabbing;cursor:grabbing}.rc-slider-mark{position:absolute;top:18px;left:0;width:100%;font-size:12px}.rc-slider-mark-text{position:absolute;display:inline-block;vertical-align:middle;text-align:center;cursor:pointer;color:#999}.rc-slider-mark-text-active{color:#666}.rc-slider-step{position:absolute;width:100%;height:4px;background:transparent}.rc-slider-dot{position:absolute;bottom:-2px;margin-left:-4px;width:8px;height:8px;border:2px solid #e9e9e9;background-color:#fff;cursor:pointer;border-radius:50%;vertical-align:middle}.rc-slider-dot-active{border-color:#96dbfa}.rc-slider-dot-reverse{margin-right:-4px}.rc-slider-disabled{background-color:#e9e9e9}.rc-slider-disabled .rc-slider-track{background-color:#ccc}.rc-slider-disabled .rc-slider-handle,.rc-slider-disabled .rc-slider-dot{border-color:#ccc;box-shadow:none;background-color:#fff;cursor:not-allowed}.rc-slider-disabled .rc-slider-mark-text,.rc-slider-disabled .rc-slider-dot{cursor:not-allowed!important}.rc-slider-vertical{width:14px;height:100%;padding:0 5px}.rc-slider-vertical .rc-slider-rail{height:100%;width:4px}.rc-slider-vertical .rc-slider-track{left:5px;bottom:0;width:4px}.rc-slider-vertical .rc-slider-handle{margin-left:-5px;touch-action:pan-y}.rc-slider-vertical .rc-slider-mark{top:0;left:18px;height:100%}.rc-slider-vertical .rc-slider-step{height:100%;width:4px}.rc-slider-vertical .rc-slider-dot{left:2px;margin-bottom:-4px}.rc-slider-vertical .rc-slider-dot:first-child{margin-bottom:-4px}.rc-slider-vertical .rc-slider-dot:last-child{margin-bottom:-4px}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear,.rc-slider-tooltip-zoom-down-leave{animation-duration:.3s;animation-fill-mode:both;display:block!important;animation-play-state:paused}.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active{animation-name:rcSliderTooltipZoomDownIn;animation-play-state:running}.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active{animation-name:rcSliderTooltipZoomDownOut;animation-play-state:running}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear{transform:scale(0);animation-timing-function:cubic-bezier(.23,1,.32,1)}.rc-slider-tooltip-zoom-down-leave{animation-timing-function:cubic-bezier(.755,.05,.855,.06)}@keyframes rcSliderTooltipZoomDownIn{0%{opacity:0;transform-origin:50% 100%;transform:scale(0)}to{transform-origin:50% 100%;transform:scale(1)}}@keyframes rcSliderTooltipZoomDownOut{0%{transform-origin:50% 100%;transform:scale(1)}to{opacity:0;transform-origin:50% 100%;transform:scale(0)}}.rc-slider-tooltip{position:absolute;left:-9999px;top:-9999px;visibility:visible;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip-hidden{display:none}.rc-slider-tooltip-placement-top{padding:4px 0 8px}.rc-slider-tooltip-inner{padding:6px 2px;min-width:24px;height:24px;font-size:12px;line-height:1;color:#fff;text-align:center;text-decoration:none;background-color:#6c6c6c;border-radius:6px;box-shadow:0 0 4px #d9d9d9}.rc-slider-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow{bottom:4px;left:50%;margin-left:-4px;border-width:4px 4px 0;border-top-color:#6c6c6c}.fastboard-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{position:absolute;top:0;left:0;height:calc(100% - 48px);padding:16px;z-index:201;display:flex;align-items:center}.fastboard-bottom-left,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200}.fastboard-bottom-right{left:initial;right:8px}.fastboard-redo-undo{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-redo-undo.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-redo-undo.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:1em;height:1em}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-page-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-page-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:1em;height:1em}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control-cut-line{height:24px;width:.5px}.fastboard-page-control-cut-line.light{background-color:#e7e7e7}.fastboard-page-control-cut-line.dark{background-color:#ffffff26}.fastboard-page-control-slash{opacity:.6}.fastboard-page-control-page,.fastboard-page-control-slash,.fastboard-page-control-page-count{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-zoom-control{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-zoom-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-zoom-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:1em;height:1em}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-zoom-control-cut-line{height:24px;width:.5px}.fastboard-zoom-control-cut-line.light{background-color:#e7e7e7}.fastboard-zoom-control-cut-line.dark{background-color:#ffffff26}.fastboard-zoom-control-percent{opacity:.6}.fastboard-zoom-control-scale,.fastboard-zoom-control-percent{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-toolbar{display:flex;align-items:center;padding:4px;border-radius:4px;flex-direction:column;gap:4px;position:absolute;z-index:100;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .rc-slider{padding:6px 0}.fastboard-toolbar .rc-slider-rail,.fastboard-toolbar .rc-slider-track{height:2px}.fastboard-toolbar .tippy-content{padding:8px}.fastboard-toolbar .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-toolbar.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.expanded{border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.dark{color:#ddd;background-color:#333333d9}.fastboard-toolbar.expanded:hover{box-shadow:0 0 5px #00000040;transform:translate(0)}.fastboard-toolbar.collapsed{padding:0;background-color:transparent}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{margin-right:-4px;width:24px;height:24px;border-radius:4px;background-color:#ffffff1a;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;position:relative}.fastboard-toolbar-btn-interactive{display:inline-block;width:32px;height:32px}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:100%;height:100%}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid transparent;position:absolute;bottom:0;right:0}.fastboard-toolbar-cut-line{display:inline-block;height:.5px;width:100%}.fastboard-toolbar-cut-line.light{background-color:#e7e7e7}.fastboard-toolbar-cut-line.dark{background-color:#ffffff26}.fastboard-toolbar-section{display:inline-flex;flex-flow:column nowrap;gap:4px;scroll-behavior:smooth}.fastboard-toolbar-section.collapsed{transform:translate(-100%);transition:1s transform}.fastboard-toolbar-section+.fastboard-toolbar-mask{opacity:0;transition:.5s opacity .4s}.fastboard-toolbar-section:hover+.fastboard-toolbar-mask,.fastboard-toolbar-mask:hover{opacity:1;transition:.2s opacity}.fastboard-toolbar-panel{width:120px;padding:0;display:flex;flex-flow:column nowrap;align-items:center;gap:8px}.fastboard-toolbar-panel.apps{width:224px}.fastboard-toolbar-color-box,.fastboard-toolbar-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-color-box .fastboard-toolbar-btn,.fastboard-toolbar-shapes .fastboard-toolbar-btn{padding:0;width:24px;height:24px}.fastboard-toolbar-apps{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-apps .fastboard-toolbar-btn{width:40px;height:40px;font-size:0}.fastboard-toolbar-app-icon{padding-top:4px;display:inline-flex;flex-flow:column nowrap;align-items:center;gap:4px}.fastboard-toolbar-app-icon .fastboard-toolbar-btn{padding:0}.fastboard-toolbar-app-icon-text{font-size:12px;color:#5d5d5d;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fastboard-toolbar-color-item{width:24px;height:24px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-item *.light:hover{background-color:#f5f5f5}.fastboard-toolbar-color-item *.dark:hover{background-color:#333}.fastboard-toolbar-color-border{width:24px;height:24px;border:1px solid transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-border.active.light,.fastboard-toolbar-color-border.active.dark{border:1px solid rgba(51,129,255,.8)}.fastboard-toolbar-color-btn{margin:0;border:1px solid rgba(0,0,0,.24);padding:0;appearance:none;width:16px;height:16px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-btn:focus-visible{outline-offset:2px}.fastboard-toolbar-mask{position:absolute;left:calc(100% + 1px);top:50%;transform:translateY(-50%);opacity:.85}.fastboard-toolbar-mask.dark{left:100%}.fastboard-toolbar-mask-btn{width:17px;height:62px;cursor:pointer;opacity:.85}.fastboard-toolbar-mask-btn.dark{filter:invert(.8)}.fastboard-toolbar-expand-btn{display:flex;align-items:center;position:absolute;left:0}.fastboard-player-control{width:100%;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control.auto-hide{opacity:0;transition:opacity .2s}.fastboard-player-control.auto-hide:hover{opacity:1}.fastboard-player-control .rc-slider-disabled{background:transparent;opacity:.5}.fastboard-player-control .rc-slider-rail,.fastboard-player-control .rc-slider-track{height:2px}.fastboard-player-control .tippy-content{padding:8px}.fastboard-player-control .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-player-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-player-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;min-width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:1em;height:1em}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-player-control-btn.loading{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-panel{padding:0;display:flex;flex-flow:column nowrap;align-items:stretch;gap:4px}.fastboard-player-control-panel .fastboard-player-control-btn{width:initial;height:initial;user-select:none;font-size:12px;padding:4px;justify-content:flex-end}.fastboard-player-control-panel .fastboard-player-control-btn.active{color:#3381ff}.fastboard-player-control-slider{width:100%;padding:0 7px}.fastboard-player-control-slider.loading{cursor:not-allowed}.fastboard-player-control-slash{opacity:.6}.fastboard-player-control-current,.fastboard-player-control-slash,.fastboard-player-control-total,.fastboard-player-control-speed-text{font-size:12px;font-variant-numeric:tabular-nums}.tippy-box.fastboard-tip{color:#eee;background-color:#000000f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.tippy-box.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#000}.tippy-box.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#000}\n';
|
|
143
140
|
|
|
144
141
|
// src/behaviors/style.ts
|
|
145
142
|
applyStyles(style_default);
|
|
@@ -147,8 +144,8 @@ applyStyles(style_default);
|
|
|
147
144
|
// src/components/hooks.ts
|
|
148
145
|
var import_window_manager = require("@netless/window-manager");
|
|
149
146
|
var import_react2 = require("react");
|
|
150
|
-
var FastboardAppContext = (0, import_react2.createContext)(null);
|
|
151
|
-
var ThemeContext = (0, import_react2.createContext)("light");
|
|
147
|
+
var FastboardAppContext = /* @__PURE__ */ (0, import_react2.createContext)(null);
|
|
148
|
+
var ThemeContext = /* @__PURE__ */ (0, import_react2.createContext)("light");
|
|
152
149
|
function useTheme(userTheme) {
|
|
153
150
|
const themeFromContext = (0, import_react2.useContext)(ThemeContext);
|
|
154
151
|
return userTheme || themeFromContext;
|
|
@@ -177,11 +174,12 @@ function useFocusedApp() {
|
|
|
177
174
|
function useMaximized() {
|
|
178
175
|
return useBoxState() === "maximized";
|
|
179
176
|
}
|
|
177
|
+
var AppsShouldShowToolbar = /* @__PURE__ */ (() => [import_window_manager.BuiltinApps.DocsViewer, "Slide"])();
|
|
180
178
|
function useHideControls() {
|
|
181
179
|
const maximized = useMaximized();
|
|
182
180
|
const focusedApp = useFocusedApp();
|
|
183
181
|
if (maximized) {
|
|
184
|
-
if (
|
|
182
|
+
if (AppsShouldShowToolbar.some((kind) => focusedApp == null ? void 0 : focusedApp.includes(kind))) {
|
|
185
183
|
return "toolbar-only";
|
|
186
184
|
} else {
|
|
187
185
|
return true;
|
|
@@ -293,7 +291,7 @@ var createI18n = async ({
|
|
|
293
291
|
});
|
|
294
292
|
return import_i18next.default;
|
|
295
293
|
};
|
|
296
|
-
var I18nContext = (0, import_react4.createContext)(null);
|
|
294
|
+
var I18nContext = /* @__PURE__ */ (0, import_react4.createContext)(null);
|
|
297
295
|
function useTranslation() {
|
|
298
296
|
const i18n = (0, import_react4.useContext)(I18nContext);
|
|
299
297
|
const t = (0, import_react4.useMemo)(() => i18n ? i18n.getFixedT(null, ["translation"]) : (id) => id, [i18n]);
|
|
@@ -303,7 +301,7 @@ function useTranslation() {
|
|
|
303
301
|
// src/icons/index.tsx
|
|
304
302
|
var import_react5 = __toESM(require("react"));
|
|
305
303
|
function Icon({ fallback, src, alt = "[icon]" }) {
|
|
306
|
-
return src ? import_react5.default.createElement("img", {
|
|
304
|
+
return src ? /* @__PURE__ */ import_react5.default.createElement("img", {
|
|
307
305
|
src,
|
|
308
306
|
alt,
|
|
309
307
|
title: alt
|
|
@@ -341,17 +339,17 @@ var RightOffset = [0, 11];
|
|
|
341
339
|
function Redo({ theme = "light", active }) {
|
|
342
340
|
const config = themes[theme];
|
|
343
341
|
const stroke = active ? config.activeColor : config.color;
|
|
344
|
-
return import_react6.default.createElement("svg", {
|
|
342
|
+
return /* @__PURE__ */ import_react6.default.createElement("svg", {
|
|
345
343
|
viewBox: "0 0 24 24"
|
|
346
|
-
}, import_react6.default.createElement("g", {
|
|
344
|
+
}, /* @__PURE__ */ import_react6.default.createElement("g", {
|
|
347
345
|
fill: "none",
|
|
348
346
|
fillRule: "evenodd",
|
|
349
347
|
stroke,
|
|
350
348
|
strokeLinecap: "round",
|
|
351
349
|
strokeLinejoin: "round"
|
|
352
|
-
}, import_react6.default.createElement("path", {
|
|
350
|
+
}, /* @__PURE__ */ import_react6.default.createElement("path", {
|
|
353
351
|
d: "M14 14h4v-4"
|
|
354
|
-
}), import_react6.default.createElement("path", {
|
|
352
|
+
}), /* @__PURE__ */ import_react6.default.createElement("path", {
|
|
355
353
|
d: "m18 14-.788-.9A7.005 7.005 0 0 0 6 14h0"
|
|
356
354
|
})));
|
|
357
355
|
}
|
|
@@ -361,17 +359,17 @@ var import_react7 = __toESM(require("react"));
|
|
|
361
359
|
function Undo({ theme = "light", active }) {
|
|
362
360
|
const config = themes[theme];
|
|
363
361
|
const stroke = active ? config.activeColor : config.color;
|
|
364
|
-
return import_react7.default.createElement("svg", {
|
|
362
|
+
return /* @__PURE__ */ import_react7.default.createElement("svg", {
|
|
365
363
|
viewBox: "0 0 24 24"
|
|
366
|
-
}, import_react7.default.createElement("g", {
|
|
364
|
+
}, /* @__PURE__ */ import_react7.default.createElement("g", {
|
|
367
365
|
fill: "none",
|
|
368
366
|
fillRule: "evenodd",
|
|
369
367
|
stroke,
|
|
370
368
|
strokeLinecap: "round",
|
|
371
369
|
strokeLinejoin: "round"
|
|
372
|
-
}, import_react7.default.createElement("path", {
|
|
370
|
+
}, /* @__PURE__ */ import_react7.default.createElement("path", {
|
|
373
371
|
d: "M10 14H6v-4"
|
|
374
|
-
}), import_react7.default.createElement("path", {
|
|
372
|
+
}), /* @__PURE__ */ import_react7.default.createElement("path", {
|
|
375
373
|
d: "m6 14 .788-.9A7.005 7.005 0 0 1 18 14h0"
|
|
376
374
|
})));
|
|
377
375
|
}
|
|
@@ -384,9 +382,9 @@ function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable
|
|
|
384
382
|
const writable = useWritable();
|
|
385
383
|
const { redoSteps, undoSteps, redo, undo } = useRedoUndo();
|
|
386
384
|
const disabled = !writable;
|
|
387
|
-
return import_react9.default.createElement("div", {
|
|
385
|
+
return /* @__PURE__ */ import_react9.default.createElement("div", {
|
|
388
386
|
className: (0, import_clsx.default)(name, theme)
|
|
389
|
-
}, import_react9.default.createElement(import_react8.default, {
|
|
387
|
+
}, /* @__PURE__ */ import_react9.default.createElement(import_react8.default, {
|
|
390
388
|
className: "fastboard-tip",
|
|
391
389
|
content: t("undo"),
|
|
392
390
|
theme,
|
|
@@ -395,17 +393,17 @@ function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable
|
|
|
395
393
|
delay: [1e3, 400],
|
|
396
394
|
duration: 300,
|
|
397
395
|
offset: TopOffset
|
|
398
|
-
}, import_react9.default.createElement("button", {
|
|
396
|
+
}, /* @__PURE__ */ import_react9.default.createElement("button", {
|
|
399
397
|
className: (0, import_clsx.default)(`${name}-btn`, "undo", theme),
|
|
400
398
|
disabled: disabled || undoSteps === 0,
|
|
401
399
|
onClick: undo
|
|
402
|
-
}, import_react9.default.createElement(Icon, {
|
|
403
|
-
fallback: import_react9.default.createElement(Undo, {
|
|
400
|
+
}, /* @__PURE__ */ import_react9.default.createElement(Icon, {
|
|
401
|
+
fallback: /* @__PURE__ */ import_react9.default.createElement(Undo, {
|
|
404
402
|
theme
|
|
405
403
|
}),
|
|
406
404
|
src: undoSteps === 0 ? undoIconDisable : undoIcon,
|
|
407
405
|
alt: "[undo]"
|
|
408
|
-
}))), import_react9.default.createElement(import_react8.default, {
|
|
406
|
+
}))), /* @__PURE__ */ import_react9.default.createElement(import_react8.default, {
|
|
409
407
|
className: "fastboard-tip",
|
|
410
408
|
content: t("redo"),
|
|
411
409
|
theme,
|
|
@@ -414,12 +412,12 @@ function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable
|
|
|
414
412
|
delay: [1e3, 400],
|
|
415
413
|
duration: 300,
|
|
416
414
|
offset: TopOffset
|
|
417
|
-
}, import_react9.default.createElement("button", {
|
|
415
|
+
}, /* @__PURE__ */ import_react9.default.createElement("button", {
|
|
418
416
|
className: (0, import_clsx.default)(`${name}-btn`, "redo", theme),
|
|
419
417
|
disabled: disabled || redoSteps === 0,
|
|
420
418
|
onClick: redo
|
|
421
|
-
}, import_react9.default.createElement(Icon, {
|
|
422
|
-
fallback: import_react9.default.createElement(Redo, {
|
|
419
|
+
}, /* @__PURE__ */ import_react9.default.createElement(Icon, {
|
|
420
|
+
fallback: /* @__PURE__ */ import_react9.default.createElement(Redo, {
|
|
423
421
|
theme
|
|
424
422
|
}),
|
|
425
423
|
src: redoSteps === 0 ? redoIconDisable : redoIcon,
|
|
@@ -501,9 +499,9 @@ var import_react11 = __toESM(require("react"));
|
|
|
501
499
|
function Minus({ theme = "light", active }) {
|
|
502
500
|
const config = themes[theme];
|
|
503
501
|
const stroke = active ? config.activeColor : config.color;
|
|
504
|
-
return import_react11.default.createElement("svg", {
|
|
502
|
+
return /* @__PURE__ */ import_react11.default.createElement("svg", {
|
|
505
503
|
viewBox: "0 0 24 24"
|
|
506
|
-
}, import_react11.default.createElement("path", {
|
|
504
|
+
}, /* @__PURE__ */ import_react11.default.createElement("path", {
|
|
507
505
|
fill: "none",
|
|
508
506
|
stroke,
|
|
509
507
|
strokeLinecap: "round",
|
|
@@ -517,9 +515,9 @@ var import_react12 = __toESM(require("react"));
|
|
|
517
515
|
function Plus({ theme = "light", active }) {
|
|
518
516
|
const config = themes[theme];
|
|
519
517
|
const stroke = active ? config.activeColor : config.color;
|
|
520
|
-
return import_react12.default.createElement("svg", {
|
|
518
|
+
return /* @__PURE__ */ import_react12.default.createElement("svg", {
|
|
521
519
|
viewBox: "0 0 24 24"
|
|
522
|
-
}, import_react12.default.createElement("path", {
|
|
520
|
+
}, /* @__PURE__ */ import_react12.default.createElement("path", {
|
|
523
521
|
fill: "none",
|
|
524
522
|
stroke,
|
|
525
523
|
strokeLinecap: "round",
|
|
@@ -533,22 +531,22 @@ var import_react13 = __toESM(require("react"));
|
|
|
533
531
|
function Reset({ theme = "light", active }) {
|
|
534
532
|
const config = themes[theme];
|
|
535
533
|
const stroke = active ? config.activeColor : config.color;
|
|
536
|
-
return import_react13.default.createElement("svg", {
|
|
534
|
+
return /* @__PURE__ */ import_react13.default.createElement("svg", {
|
|
537
535
|
viewBox: "0 0 24 24"
|
|
538
|
-
}, import_react13.default.createElement("g", {
|
|
536
|
+
}, /* @__PURE__ */ import_react13.default.createElement("g", {
|
|
539
537
|
fill: "none",
|
|
540
538
|
fillRule: "evenodd",
|
|
541
539
|
transform: "translate(-176 -684)"
|
|
542
|
-
}, import_react13.default.createElement("path", {
|
|
540
|
+
}, /* @__PURE__ */ import_react13.default.createElement("path", {
|
|
543
541
|
stroke,
|
|
544
542
|
strokeLinejoin: "round",
|
|
545
543
|
d: "M188 688v4m0 8v4m8-8h-4m-8 0h-4"
|
|
546
|
-
}), import_react13.default.createElement("circle", {
|
|
544
|
+
}), /* @__PURE__ */ import_react13.default.createElement("circle", {
|
|
547
545
|
cx: "188",
|
|
548
546
|
cy: "696",
|
|
549
547
|
r: "6",
|
|
550
548
|
stroke
|
|
551
|
-
}), import_react13.default.createElement("circle", {
|
|
549
|
+
}), /* @__PURE__ */ import_react13.default.createElement("circle", {
|
|
552
550
|
cx: "188",
|
|
553
551
|
cy: "696",
|
|
554
552
|
r: "1",
|
|
@@ -572,9 +570,9 @@ function ZoomControl({
|
|
|
572
570
|
const writable = useWritable();
|
|
573
571
|
const { scale, resetCamera, zoomIn, zoomOut } = useZoomControl();
|
|
574
572
|
const disabled = !writable;
|
|
575
|
-
return import_react15.default.createElement("div", {
|
|
573
|
+
return /* @__PURE__ */ import_react15.default.createElement("div", {
|
|
576
574
|
className: (0, import_clsx2.default)(name2, theme)
|
|
577
|
-
}, import_react15.default.createElement(import_react14.default, {
|
|
575
|
+
}, /* @__PURE__ */ import_react15.default.createElement(import_react14.default, {
|
|
578
576
|
className: "fastboard-tip",
|
|
579
577
|
content: t("zoomOut"),
|
|
580
578
|
theme,
|
|
@@ -583,21 +581,21 @@ function ZoomControl({
|
|
|
583
581
|
delay: [1e3, 400],
|
|
584
582
|
duration: 300,
|
|
585
583
|
offset: TopOffset
|
|
586
|
-
}, import_react15.default.createElement("button", {
|
|
584
|
+
}, /* @__PURE__ */ import_react15.default.createElement("button", {
|
|
587
585
|
className: (0, import_clsx2.default)(`${name2}-btn`, "minus", theme),
|
|
588
586
|
disabled,
|
|
589
587
|
onClick: zoomOut
|
|
590
|
-
}, import_react15.default.createElement(Icon, {
|
|
591
|
-
fallback: import_react15.default.createElement(Minus, {
|
|
588
|
+
}, /* @__PURE__ */ import_react15.default.createElement(Icon, {
|
|
589
|
+
fallback: /* @__PURE__ */ import_react15.default.createElement(Minus, {
|
|
592
590
|
theme
|
|
593
591
|
}),
|
|
594
592
|
src: disabled ? minusIconDisable : minusIcon,
|
|
595
593
|
alt: "[minus]"
|
|
596
|
-
}))), import_react15.default.createElement("span", {
|
|
594
|
+
}))), /* @__PURE__ */ import_react15.default.createElement("span", {
|
|
597
595
|
className: (0, import_clsx2.default)(`${name2}-scale`, theme)
|
|
598
|
-
}, Math.ceil(scale * 100)), import_react15.default.createElement("span", {
|
|
596
|
+
}, Math.ceil(scale * 100)), /* @__PURE__ */ import_react15.default.createElement("span", {
|
|
599
597
|
className: (0, import_clsx2.default)(`${name2}-percent`, theme)
|
|
600
|
-
}, "%"), import_react15.default.createElement(import_react14.default, {
|
|
598
|
+
}, "%"), /* @__PURE__ */ import_react15.default.createElement(import_react14.default, {
|
|
601
599
|
className: "fastboard-tip",
|
|
602
600
|
content: t("zoomIn"),
|
|
603
601
|
theme,
|
|
@@ -606,17 +604,17 @@ function ZoomControl({
|
|
|
606
604
|
delay: [1e3, 400],
|
|
607
605
|
duration: 300,
|
|
608
606
|
offset: TopOffset
|
|
609
|
-
}, import_react15.default.createElement("button", {
|
|
607
|
+
}, /* @__PURE__ */ import_react15.default.createElement("button", {
|
|
610
608
|
className: (0, import_clsx2.default)(`${name2}-btn`, "plus", theme),
|
|
611
609
|
disabled,
|
|
612
610
|
onClick: zoomIn
|
|
613
|
-
}, import_react15.default.createElement(Icon, {
|
|
614
|
-
fallback: import_react15.default.createElement(Plus, {
|
|
611
|
+
}, /* @__PURE__ */ import_react15.default.createElement(Icon, {
|
|
612
|
+
fallback: /* @__PURE__ */ import_react15.default.createElement(Plus, {
|
|
615
613
|
theme
|
|
616
614
|
}),
|
|
617
615
|
src: disabled ? plusIconDisable : plusIcon,
|
|
618
616
|
alt: "[plus]"
|
|
619
|
-
}))), import_react15.default.createElement(import_react14.default, {
|
|
617
|
+
}))), /* @__PURE__ */ import_react15.default.createElement(import_react14.default, {
|
|
620
618
|
className: "fastboard-tip",
|
|
621
619
|
content: t("reset"),
|
|
622
620
|
theme,
|
|
@@ -625,12 +623,12 @@ function ZoomControl({
|
|
|
625
623
|
delay: [1e3, 400],
|
|
626
624
|
duration: 300,
|
|
627
625
|
offset: TopOffset
|
|
628
|
-
}, import_react15.default.createElement("button", {
|
|
626
|
+
}, /* @__PURE__ */ import_react15.default.createElement("button", {
|
|
629
627
|
className: (0, import_clsx2.default)(`${name2}-btn`, "reset", theme),
|
|
630
628
|
disabled,
|
|
631
629
|
onClick: resetCamera
|
|
632
|
-
}, import_react15.default.createElement(Icon, {
|
|
633
|
-
fallback: import_react15.default.createElement(Reset, {
|
|
630
|
+
}, /* @__PURE__ */ import_react15.default.createElement(Icon, {
|
|
631
|
+
fallback: /* @__PURE__ */ import_react15.default.createElement(Reset, {
|
|
634
632
|
theme
|
|
635
633
|
}),
|
|
636
634
|
src: disabled ? resetIconDisable : resetIcon,
|
|
@@ -668,9 +666,9 @@ var import_react17 = __toESM(require("react"));
|
|
|
668
666
|
function ChevronLeft({ theme = "light", active }) {
|
|
669
667
|
const config = themes[theme];
|
|
670
668
|
const stroke = active ? config.activeColor : config.color;
|
|
671
|
-
return import_react17.default.createElement("svg", {
|
|
669
|
+
return /* @__PURE__ */ import_react17.default.createElement("svg", {
|
|
672
670
|
viewBox: "0 0 24 24"
|
|
673
|
-
}, import_react17.default.createElement("path", {
|
|
671
|
+
}, /* @__PURE__ */ import_react17.default.createElement("path", {
|
|
674
672
|
fill: "none",
|
|
675
673
|
stroke,
|
|
676
674
|
strokeLinecap: "round",
|
|
@@ -684,9 +682,9 @@ var import_react18 = __toESM(require("react"));
|
|
|
684
682
|
function ChevronRight({ theme = "light", active }) {
|
|
685
683
|
const config = themes[theme];
|
|
686
684
|
const stroke = active ? config.activeColor : config.color;
|
|
687
|
-
return import_react18.default.createElement("svg", {
|
|
685
|
+
return /* @__PURE__ */ import_react18.default.createElement("svg", {
|
|
688
686
|
viewBox: "0 0 24 24"
|
|
689
|
-
}, import_react18.default.createElement("path", {
|
|
687
|
+
}, /* @__PURE__ */ import_react18.default.createElement("path", {
|
|
690
688
|
fill: "none",
|
|
691
689
|
stroke,
|
|
692
690
|
strokeLinecap: "round",
|
|
@@ -700,9 +698,9 @@ var import_react19 = __toESM(require("react"));
|
|
|
700
698
|
function FilePlus({ theme = "light", active }) {
|
|
701
699
|
const config = themes[theme];
|
|
702
700
|
const stroke = active ? config.activeColor : config.color;
|
|
703
|
-
return import_react19.default.createElement("svg", {
|
|
701
|
+
return /* @__PURE__ */ import_react19.default.createElement("svg", {
|
|
704
702
|
viewBox: "0 0 24 24"
|
|
705
|
-
}, import_react19.default.createElement("path", {
|
|
703
|
+
}, /* @__PURE__ */ import_react19.default.createElement("path", {
|
|
706
704
|
fill: stroke,
|
|
707
705
|
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"
|
|
708
706
|
}));
|
|
@@ -724,9 +722,9 @@ function PageControl({
|
|
|
724
722
|
const writable = useWritable();
|
|
725
723
|
const _a = usePageControl(), { pageIndex, pageCount } = _a, actions = __objRest(_a, ["pageIndex", "pageCount"]);
|
|
726
724
|
const disabled = !writable;
|
|
727
|
-
return import_react21.default.createElement("div", {
|
|
725
|
+
return /* @__PURE__ */ import_react21.default.createElement("div", {
|
|
728
726
|
className: (0, import_clsx3.default)(name3, theme)
|
|
729
|
-
}, import_react21.default.createElement(import_react20.default, {
|
|
727
|
+
}, /* @__PURE__ */ import_react21.default.createElement(import_react20.default, {
|
|
730
728
|
className: "fastboard-tip",
|
|
731
729
|
content: t("prevPage"),
|
|
732
730
|
theme,
|
|
@@ -735,23 +733,23 @@ function PageControl({
|
|
|
735
733
|
delay: [1e3, 400],
|
|
736
734
|
duration: 300,
|
|
737
735
|
offset: TopOffset
|
|
738
|
-
}, import_react21.default.createElement("button", {
|
|
736
|
+
}, /* @__PURE__ */ import_react21.default.createElement("button", {
|
|
739
737
|
className: (0, import_clsx3.default)(`${name3}-btn`, "prev", theme),
|
|
740
738
|
disabled: disabled || pageIndex === 0,
|
|
741
739
|
onClick: actions.prevPage
|
|
742
|
-
}, import_react21.default.createElement(Icon, {
|
|
743
|
-
fallback: import_react21.default.createElement(ChevronLeft, {
|
|
740
|
+
}, /* @__PURE__ */ import_react21.default.createElement(Icon, {
|
|
741
|
+
fallback: /* @__PURE__ */ import_react21.default.createElement(ChevronLeft, {
|
|
744
742
|
theme
|
|
745
743
|
}),
|
|
746
744
|
src: disabled ? prevIconDisable : prevIcon,
|
|
747
745
|
alt: "[prev]"
|
|
748
|
-
}))), import_react21.default.createElement("span", {
|
|
746
|
+
}))), /* @__PURE__ */ import_react21.default.createElement("span", {
|
|
749
747
|
className: (0, import_clsx3.default)(`${name3}-page`, theme)
|
|
750
|
-
}, pageCount === 0 ? "\u2026" : pageIndex + 1), import_react21.default.createElement("span", {
|
|
748
|
+
}, pageCount === 0 ? "\u2026" : pageIndex + 1), /* @__PURE__ */ import_react21.default.createElement("span", {
|
|
751
749
|
className: (0, import_clsx3.default)(`${name3}-slash`, theme)
|
|
752
|
-
}, "/"), import_react21.default.createElement("span", {
|
|
750
|
+
}, "/"), /* @__PURE__ */ import_react21.default.createElement("span", {
|
|
753
751
|
className: (0, import_clsx3.default)(`${name3}-page-count`, theme)
|
|
754
|
-
}, pageCount), import_react21.default.createElement(import_react20.default, {
|
|
752
|
+
}, pageCount), /* @__PURE__ */ import_react21.default.createElement(import_react20.default, {
|
|
755
753
|
className: "fastboard-tip",
|
|
756
754
|
content: t("nextPage"),
|
|
757
755
|
theme,
|
|
@@ -760,17 +758,17 @@ function PageControl({
|
|
|
760
758
|
delay: [1e3, 400],
|
|
761
759
|
duration: 300,
|
|
762
760
|
offset: TopOffset
|
|
763
|
-
}, import_react21.default.createElement("button", {
|
|
761
|
+
}, /* @__PURE__ */ import_react21.default.createElement("button", {
|
|
764
762
|
className: (0, import_clsx3.default)(`${name3}-btn`, "next", theme),
|
|
765
763
|
disabled: disabled || pageIndex === pageCount - 1,
|
|
766
764
|
onClick: actions.nextPage
|
|
767
|
-
}, import_react21.default.createElement(Icon, {
|
|
768
|
-
fallback: import_react21.default.createElement(ChevronRight, {
|
|
765
|
+
}, /* @__PURE__ */ import_react21.default.createElement(Icon, {
|
|
766
|
+
fallback: /* @__PURE__ */ import_react21.default.createElement(ChevronRight, {
|
|
769
767
|
theme
|
|
770
768
|
}),
|
|
771
769
|
src: disabled ? nextIconDisable : nextIcon,
|
|
772
770
|
alt: "[next]"
|
|
773
|
-
}))), import_react21.default.createElement(import_react20.default, {
|
|
771
|
+
}))), /* @__PURE__ */ import_react21.default.createElement(import_react20.default, {
|
|
774
772
|
className: "fastboard-tip",
|
|
775
773
|
content: t("addPage"),
|
|
776
774
|
theme,
|
|
@@ -779,12 +777,12 @@ function PageControl({
|
|
|
779
777
|
delay: [1e3, 400],
|
|
780
778
|
duration: 300,
|
|
781
779
|
offset: TopOffset
|
|
782
|
-
}, import_react21.default.createElement("button", {
|
|
780
|
+
}, /* @__PURE__ */ import_react21.default.createElement("button", {
|
|
783
781
|
className: (0, import_clsx3.default)(`${name3}-btn`, "add", theme),
|
|
784
782
|
disabled,
|
|
785
783
|
onClick: actions.addPage
|
|
786
|
-
}, import_react21.default.createElement(Icon, {
|
|
787
|
-
fallback: import_react21.default.createElement(FilePlus, {
|
|
784
|
+
}, /* @__PURE__ */ import_react21.default.createElement(Icon, {
|
|
785
|
+
fallback: /* @__PURE__ */ import_react21.default.createElement(FilePlus, {
|
|
788
786
|
theme
|
|
789
787
|
}),
|
|
790
788
|
src: disabled ? addIconDisable : addIcon,
|
|
@@ -834,94 +832,56 @@ var EmptyToolbarHook = {
|
|
|
834
832
|
// src/components/Toolbar/Toolbar.tsx
|
|
835
833
|
var import_clsx9 = __toESM(require("clsx"));
|
|
836
834
|
var import_framer_motion = require("framer-motion");
|
|
837
|
-
var
|
|
838
|
-
|
|
839
|
-
// src/components/Toolbar/components/assets/collapsed.png
|
|
840
|
-
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";
|
|
835
|
+
var import_react59 = __toESM(require("react"));
|
|
841
836
|
|
|
842
837
|
// src/components/Toolbar/components/assets/expanded.png
|
|
843
838
|
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==";
|
|
844
839
|
|
|
845
|
-
// src/components/Toolbar/components/Mask.tsx
|
|
846
|
-
var import_react23 = __toESM(require("react"));
|
|
847
|
-
var import_react_dom = __toESM(require("react-dom"));
|
|
848
|
-
var Mask = import_react23.default.memo(({ toolbar, children }) => {
|
|
849
|
-
const [rootElement] = (0, import_react23.useState)(() => {
|
|
850
|
-
const element = document.createElement("div");
|
|
851
|
-
element.style.position = "absolute";
|
|
852
|
-
return element;
|
|
853
|
-
});
|
|
854
|
-
(0, import_react23.useEffect)(() => {
|
|
855
|
-
if (toolbar && rootElement) {
|
|
856
|
-
toolbar.appendChild(rootElement);
|
|
857
|
-
}
|
|
858
|
-
}, [rootElement, toolbar]);
|
|
859
|
-
(0, import_react23.useEffect)(() => {
|
|
860
|
-
if (rootElement && toolbar) {
|
|
861
|
-
toolbar.appendChild(rootElement);
|
|
862
|
-
const toolbarRect = toolbar.getBoundingClientRect();
|
|
863
|
-
const halfHeight = toolbarRect.height / 2 - 31;
|
|
864
|
-
rootElement.style.top = halfHeight + "px";
|
|
865
|
-
rootElement.style.left = "41px";
|
|
866
|
-
rootElement.style.width = "17px";
|
|
867
|
-
rootElement.style.height = "62px";
|
|
868
|
-
return () => {
|
|
869
|
-
toolbar.removeChild(rootElement);
|
|
870
|
-
};
|
|
871
|
-
}
|
|
872
|
-
}, [rootElement, toolbar]);
|
|
873
|
-
if (rootElement) {
|
|
874
|
-
return import_react_dom.default.createPortal(children, rootElement);
|
|
875
|
-
} else {
|
|
876
|
-
return null;
|
|
877
|
-
}
|
|
878
|
-
});
|
|
879
|
-
|
|
880
840
|
// src/components/Toolbar/Content.tsx
|
|
881
841
|
var import_clsx8 = __toESM(require("clsx"));
|
|
882
|
-
var
|
|
842
|
+
var import_react58 = __toESM(require("react"));
|
|
883
843
|
|
|
884
844
|
// src/components/Toolbar/components/ApplianceButtons.tsx
|
|
885
|
-
var
|
|
845
|
+
var import_react45 = __toESM(require("react"));
|
|
886
846
|
var import_white_web_sdk = require("white-web-sdk");
|
|
887
847
|
|
|
888
848
|
// src/components/Toolbar/icons/index.ts
|
|
889
|
-
var
|
|
849
|
+
var import_react42 = require("react");
|
|
890
850
|
|
|
891
851
|
// src/components/Toolbar/icons/Apps.tsx
|
|
892
|
-
var
|
|
852
|
+
var import_react23 = __toESM(require("react"));
|
|
893
853
|
var Apps = (props) => {
|
|
894
854
|
const stroke = getStroke(props);
|
|
895
|
-
return
|
|
855
|
+
return /* @__PURE__ */ import_react23.default.createElement("svg", {
|
|
896
856
|
viewBox: "0 0 24 24"
|
|
897
|
-
},
|
|
857
|
+
}, /* @__PURE__ */ import_react23.default.createElement("g", {
|
|
898
858
|
fill: stroke
|
|
899
|
-
},
|
|
859
|
+
}, /* @__PURE__ */ import_react23.default.createElement("path", {
|
|
900
860
|
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"
|
|
901
|
-
}),
|
|
861
|
+
}), /* @__PURE__ */ import_react23.default.createElement("path", {
|
|
902
862
|
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"
|
|
903
863
|
})));
|
|
904
864
|
};
|
|
905
865
|
|
|
906
866
|
// src/components/Toolbar/icons/Arrow.tsx
|
|
907
|
-
var
|
|
867
|
+
var import_react24 = __toESM(require("react"));
|
|
908
868
|
var Arrow = (props) => {
|
|
909
869
|
const stroke = getStroke(props);
|
|
910
|
-
return
|
|
870
|
+
return /* @__PURE__ */ import_react24.default.createElement("svg", {
|
|
911
871
|
viewBox: "0 0 24 24"
|
|
912
|
-
},
|
|
872
|
+
}, /* @__PURE__ */ import_react24.default.createElement("path", {
|
|
913
873
|
fill: stroke,
|
|
914
874
|
d: "M19 5v6l-2.647-2.646L5.99 18.718l-.708-.708L15.645 7.646 13 5h6Z"
|
|
915
875
|
}));
|
|
916
876
|
};
|
|
917
877
|
|
|
918
878
|
// src/components/Toolbar/icons/Circle.tsx
|
|
919
|
-
var
|
|
879
|
+
var import_react25 = __toESM(require("react"));
|
|
920
880
|
var Circle = (props) => {
|
|
921
881
|
const stroke = getStroke(props);
|
|
922
|
-
return
|
|
882
|
+
return /* @__PURE__ */ import_react25.default.createElement("svg", {
|
|
923
883
|
viewBox: "0 0 24 24"
|
|
924
|
-
},
|
|
884
|
+
}, /* @__PURE__ */ import_react25.default.createElement("rect", {
|
|
925
885
|
width: "15",
|
|
926
886
|
height: "15",
|
|
927
887
|
x: "4.5",
|
|
@@ -933,40 +893,40 @@ var Circle = (props) => {
|
|
|
933
893
|
};
|
|
934
894
|
|
|
935
895
|
// src/components/Toolbar/icons/Clean.tsx
|
|
936
|
-
var
|
|
896
|
+
var import_react26 = __toESM(require("react"));
|
|
937
897
|
var Clean = (props) => {
|
|
938
898
|
const stroke = getStroke(props);
|
|
939
|
-
return
|
|
899
|
+
return /* @__PURE__ */ import_react26.default.createElement("svg", {
|
|
940
900
|
viewBox: "0 0 24 24"
|
|
941
|
-
},
|
|
901
|
+
}, /* @__PURE__ */ import_react26.default.createElement("path", {
|
|
942
902
|
fill: stroke,
|
|
943
903
|
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"
|
|
944
904
|
}));
|
|
945
905
|
};
|
|
946
906
|
|
|
947
907
|
// src/components/Toolbar/icons/Clicker.tsx
|
|
948
|
-
var
|
|
908
|
+
var import_react27 = __toESM(require("react"));
|
|
949
909
|
var Clicker = (props) => {
|
|
950
910
|
const stroke = getStroke(props);
|
|
951
|
-
return
|
|
911
|
+
return /* @__PURE__ */ import_react27.default.createElement("svg", {
|
|
952
912
|
viewBox: "0 0 24 24"
|
|
953
|
-
},
|
|
913
|
+
}, /* @__PURE__ */ import_react27.default.createElement("g", {
|
|
954
914
|
fill: "none"
|
|
955
|
-
},
|
|
915
|
+
}, /* @__PURE__ */ import_react27.default.createElement("path", {
|
|
956
916
|
d: "M0 0h24v24H0z"
|
|
957
|
-
}),
|
|
917
|
+
}), /* @__PURE__ */ import_react27.default.createElement("path", {
|
|
958
918
|
fill: stroke,
|
|
959
919
|
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"
|
|
960
920
|
})));
|
|
961
921
|
};
|
|
962
922
|
|
|
963
923
|
// src/components/Toolbar/icons/Collapse.tsx
|
|
964
|
-
var
|
|
924
|
+
var import_react28 = __toESM(require("react"));
|
|
965
925
|
var Collapse = (props) => {
|
|
966
926
|
const stroke = getStroke(props);
|
|
967
|
-
return
|
|
927
|
+
return /* @__PURE__ */ import_react28.default.createElement("svg", {
|
|
968
928
|
viewBox: "0 0 24 24"
|
|
969
|
-
},
|
|
929
|
+
}, /* @__PURE__ */ import_react28.default.createElement("path", {
|
|
970
930
|
fill: "none",
|
|
971
931
|
stroke,
|
|
972
932
|
d: "m8 10-2 2 2 2m10-8H6m12 12H6m12-4h-8m8-4h-8"
|
|
@@ -974,12 +934,12 @@ var Collapse = (props) => {
|
|
|
974
934
|
};
|
|
975
935
|
|
|
976
936
|
// src/components/Toolbar/icons/Diamond.tsx
|
|
977
|
-
var
|
|
937
|
+
var import_react29 = __toESM(require("react"));
|
|
978
938
|
var Diamond = (props) => {
|
|
979
939
|
const stroke = getStroke(props);
|
|
980
|
-
return
|
|
940
|
+
return /* @__PURE__ */ import_react29.default.createElement("svg", {
|
|
981
941
|
viewBox: "0 0 24 24"
|
|
982
|
-
},
|
|
942
|
+
}, /* @__PURE__ */ import_react29.default.createElement("path", {
|
|
983
943
|
fill: "none",
|
|
984
944
|
stroke,
|
|
985
945
|
d: "M4.222 12 12 4.222 19.778 12 12 19.778z"
|
|
@@ -987,12 +947,12 @@ var Diamond = (props) => {
|
|
|
987
947
|
};
|
|
988
948
|
|
|
989
949
|
// src/components/Toolbar/icons/Down.tsx
|
|
990
|
-
var
|
|
950
|
+
var import_react30 = __toESM(require("react"));
|
|
991
951
|
var Down = (props) => {
|
|
992
952
|
const stroke = getStroke(props);
|
|
993
|
-
return
|
|
953
|
+
return /* @__PURE__ */ import_react30.default.createElement("svg", {
|
|
994
954
|
viewBox: "0 0 24 24"
|
|
995
|
-
},
|
|
955
|
+
}, /* @__PURE__ */ import_react30.default.createElement("path", {
|
|
996
956
|
fill: "none",
|
|
997
957
|
stroke,
|
|
998
958
|
d: "m16 13-2 2-2 2-2-2-2-2m8-6-2 2-2 2-2-2-2-2"
|
|
@@ -1000,24 +960,24 @@ var Down = (props) => {
|
|
|
1000
960
|
};
|
|
1001
961
|
|
|
1002
962
|
// src/components/Toolbar/icons/Eraser.tsx
|
|
1003
|
-
var
|
|
963
|
+
var import_react31 = __toESM(require("react"));
|
|
1004
964
|
var Eraser = (props) => {
|
|
1005
965
|
const stroke = getStroke(props);
|
|
1006
|
-
return
|
|
966
|
+
return /* @__PURE__ */ import_react31.default.createElement("svg", {
|
|
1007
967
|
viewBox: "0 0 24 24"
|
|
1008
|
-
},
|
|
968
|
+
}, /* @__PURE__ */ import_react31.default.createElement("path", {
|
|
1009
969
|
fill: stroke,
|
|
1010
970
|
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"
|
|
1011
971
|
}));
|
|
1012
972
|
};
|
|
1013
973
|
|
|
1014
974
|
// src/components/Toolbar/icons/Expand.tsx
|
|
1015
|
-
var
|
|
975
|
+
var import_react32 = __toESM(require("react"));
|
|
1016
976
|
var Expand = (props) => {
|
|
1017
977
|
const stroke = getStroke(props);
|
|
1018
|
-
return
|
|
978
|
+
return /* @__PURE__ */ import_react32.default.createElement("svg", {
|
|
1019
979
|
viewBox: "0 0 24 24"
|
|
1020
|
-
},
|
|
980
|
+
}, /* @__PURE__ */ import_react32.default.createElement("path", {
|
|
1021
981
|
fill: "none",
|
|
1022
982
|
stroke,
|
|
1023
983
|
d: "m16 10 2 2-2 2M6 6h12M6 18h12M6 14h8m-8-4h8"
|
|
@@ -1025,36 +985,36 @@ var Expand = (props) => {
|
|
|
1025
985
|
};
|
|
1026
986
|
|
|
1027
987
|
// src/components/Toolbar/icons/Line.tsx
|
|
1028
|
-
var
|
|
988
|
+
var import_react33 = __toESM(require("react"));
|
|
1029
989
|
var Line = (props) => {
|
|
1030
990
|
const stroke = getStroke(props);
|
|
1031
|
-
return
|
|
991
|
+
return /* @__PURE__ */ import_react33.default.createElement("svg", {
|
|
1032
992
|
viewBox: "0 0 24 24"
|
|
1033
|
-
},
|
|
993
|
+
}, /* @__PURE__ */ import_react33.default.createElement("path", {
|
|
1034
994
|
fill: stroke,
|
|
1035
995
|
d: "m18.01 5.282.708.708L5.99 18.718l-.708-.708z"
|
|
1036
996
|
}));
|
|
1037
997
|
};
|
|
1038
998
|
|
|
1039
999
|
// src/components/Toolbar/icons/Pencil.tsx
|
|
1040
|
-
var
|
|
1000
|
+
var import_react34 = __toESM(require("react"));
|
|
1041
1001
|
var Pencil = (props) => {
|
|
1042
1002
|
const stroke = getStroke(props);
|
|
1043
|
-
return
|
|
1003
|
+
return /* @__PURE__ */ import_react34.default.createElement("svg", {
|
|
1044
1004
|
viewBox: "0 0 24 24"
|
|
1045
|
-
},
|
|
1005
|
+
}, /* @__PURE__ */ import_react34.default.createElement("path", {
|
|
1046
1006
|
fill: stroke,
|
|
1047
1007
|
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"
|
|
1048
1008
|
}));
|
|
1049
1009
|
};
|
|
1050
1010
|
|
|
1051
1011
|
// src/components/Toolbar/icons/Rectangle.tsx
|
|
1052
|
-
var
|
|
1012
|
+
var import_react35 = __toESM(require("react"));
|
|
1053
1013
|
var Rectangle = (props) => {
|
|
1054
1014
|
const stroke = getStroke(props);
|
|
1055
|
-
return
|
|
1015
|
+
return /* @__PURE__ */ import_react35.default.createElement("svg", {
|
|
1056
1016
|
viewBox: "0 0 24 24"
|
|
1057
|
-
},
|
|
1017
|
+
}, /* @__PURE__ */ import_react35.default.createElement("path", {
|
|
1058
1018
|
fill: "none",
|
|
1059
1019
|
stroke,
|
|
1060
1020
|
d: "M5.5 5.5h13v13h-13z"
|
|
@@ -1062,24 +1022,24 @@ var Rectangle = (props) => {
|
|
|
1062
1022
|
};
|
|
1063
1023
|
|
|
1064
1024
|
// src/components/Toolbar/icons/Selector.tsx
|
|
1065
|
-
var
|
|
1025
|
+
var import_react36 = __toESM(require("react"));
|
|
1066
1026
|
var Selector = (props) => {
|
|
1067
1027
|
const stroke = getStroke(props);
|
|
1068
|
-
return
|
|
1028
|
+
return /* @__PURE__ */ import_react36.default.createElement("svg", {
|
|
1069
1029
|
viewBox: "0 0 24 24"
|
|
1070
|
-
},
|
|
1030
|
+
}, /* @__PURE__ */ import_react36.default.createElement("path", {
|
|
1071
1031
|
fill: stroke,
|
|
1072
1032
|
d: "m12 12 8 2.667-3.556 1.777L14.667 20 12 12Zm3-8v7.5h-1V5H5v9h6.5v1H4V4h11Z"
|
|
1073
1033
|
}));
|
|
1074
1034
|
};
|
|
1075
1035
|
|
|
1076
1036
|
// src/components/Toolbar/icons/SpeechBalloon.tsx
|
|
1077
|
-
var
|
|
1037
|
+
var import_react37 = __toESM(require("react"));
|
|
1078
1038
|
var SpeechBalloon = (props) => {
|
|
1079
1039
|
const stroke = getStroke(props);
|
|
1080
|
-
return
|
|
1040
|
+
return /* @__PURE__ */ import_react37.default.createElement("svg", {
|
|
1081
1041
|
viewBox: "0 0 24 24"
|
|
1082
|
-
},
|
|
1042
|
+
}, /* @__PURE__ */ import_react37.default.createElement("path", {
|
|
1083
1043
|
fill: "none",
|
|
1084
1044
|
stroke,
|
|
1085
1045
|
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"
|
|
@@ -1087,12 +1047,12 @@ var SpeechBalloon = (props) => {
|
|
|
1087
1047
|
};
|
|
1088
1048
|
|
|
1089
1049
|
// src/components/Toolbar/icons/Star.tsx
|
|
1090
|
-
var
|
|
1050
|
+
var import_react38 = __toESM(require("react"));
|
|
1091
1051
|
var Star = (props) => {
|
|
1092
1052
|
const stroke = getStroke(props);
|
|
1093
|
-
return
|
|
1053
|
+
return /* @__PURE__ */ import_react38.default.createElement("svg", {
|
|
1094
1054
|
viewBox: "0 0 24 24"
|
|
1095
|
-
},
|
|
1055
|
+
}, /* @__PURE__ */ import_react38.default.createElement("path", {
|
|
1096
1056
|
fill: "none",
|
|
1097
1057
|
stroke,
|
|
1098
1058
|
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"
|
|
@@ -1100,24 +1060,24 @@ var Star = (props) => {
|
|
|
1100
1060
|
};
|
|
1101
1061
|
|
|
1102
1062
|
// src/components/Toolbar/icons/Text.tsx
|
|
1103
|
-
var
|
|
1063
|
+
var import_react39 = __toESM(require("react"));
|
|
1104
1064
|
var Text = (props) => {
|
|
1105
1065
|
const stroke = getStroke(props);
|
|
1106
|
-
return
|
|
1066
|
+
return /* @__PURE__ */ import_react39.default.createElement("svg", {
|
|
1107
1067
|
viewBox: "0 0 24 24"
|
|
1108
|
-
},
|
|
1068
|
+
}, /* @__PURE__ */ import_react39.default.createElement("path", {
|
|
1109
1069
|
fill: stroke,
|
|
1110
1070
|
d: "M18.5 5.5V8h-1V6.5H13v11h2v1H9v-1h2v-11H6.5V8h-1V5.5h13Z"
|
|
1111
1071
|
}));
|
|
1112
1072
|
};
|
|
1113
1073
|
|
|
1114
1074
|
// src/components/Toolbar/icons/Triangle.tsx
|
|
1115
|
-
var
|
|
1075
|
+
var import_react40 = __toESM(require("react"));
|
|
1116
1076
|
var Triangle = (props) => {
|
|
1117
1077
|
const stroke = getStroke(props);
|
|
1118
|
-
return
|
|
1078
|
+
return /* @__PURE__ */ import_react40.default.createElement("svg", {
|
|
1119
1079
|
viewBox: "0 0 24 24"
|
|
1120
|
-
},
|
|
1080
|
+
}, /* @__PURE__ */ import_react40.default.createElement("path", {
|
|
1121
1081
|
fill: "none",
|
|
1122
1082
|
stroke,
|
|
1123
1083
|
d: "M12 6.008 19.138 18.5H4.862L12 6.008Z"
|
|
@@ -1125,12 +1085,12 @@ var Triangle = (props) => {
|
|
|
1125
1085
|
};
|
|
1126
1086
|
|
|
1127
1087
|
// src/components/Toolbar/icons/Up.tsx
|
|
1128
|
-
var
|
|
1088
|
+
var import_react41 = __toESM(require("react"));
|
|
1129
1089
|
var Up = (props) => {
|
|
1130
1090
|
const stroke = getStroke(props);
|
|
1131
|
-
return
|
|
1091
|
+
return /* @__PURE__ */ import_react41.default.createElement("svg", {
|
|
1132
1092
|
viewBox: "0 0 24 24"
|
|
1133
|
-
},
|
|
1093
|
+
}, /* @__PURE__ */ import_react41.default.createElement("path", {
|
|
1134
1094
|
fill: "none",
|
|
1135
1095
|
stroke,
|
|
1136
1096
|
d: "m16 11-2-2-2-2-2 2-2 2m8 6-2-2-2-2-2 2-2 2"
|
|
@@ -1139,35 +1099,35 @@ var Up = (props) => {
|
|
|
1139
1099
|
|
|
1140
1100
|
// src/components/Toolbar/icons/index.ts
|
|
1141
1101
|
var Icons = {
|
|
1142
|
-
Clicker: (0,
|
|
1143
|
-
Collapse: (0,
|
|
1144
|
-
Eraser: (0,
|
|
1145
|
-
Expand: (0,
|
|
1146
|
-
Pencil: (0,
|
|
1147
|
-
Selector: (0,
|
|
1148
|
-
Rectangle: (0,
|
|
1149
|
-
Text: (0,
|
|
1150
|
-
Apps: (0,
|
|
1151
|
-
Clean: (0,
|
|
1152
|
-
Circle: (0,
|
|
1153
|
-
Line: (0,
|
|
1154
|
-
Arrow: (0,
|
|
1155
|
-
Star: (0,
|
|
1156
|
-
Diamond: (0,
|
|
1157
|
-
SpeechBalloon: (0,
|
|
1158
|
-
Triangle: (0,
|
|
1159
|
-
Up: (0,
|
|
1160
|
-
Down: (0,
|
|
1102
|
+
Clicker: (0, import_react42.memo)(Clicker),
|
|
1103
|
+
Collapse: (0, import_react42.memo)(Collapse),
|
|
1104
|
+
Eraser: (0, import_react42.memo)(Eraser),
|
|
1105
|
+
Expand: (0, import_react42.memo)(Expand),
|
|
1106
|
+
Pencil: (0, import_react42.memo)(Pencil),
|
|
1107
|
+
Selector: (0, import_react42.memo)(Selector),
|
|
1108
|
+
Rectangle: (0, import_react42.memo)(Rectangle),
|
|
1109
|
+
Text: (0, import_react42.memo)(Text),
|
|
1110
|
+
Apps: (0, import_react42.memo)(Apps),
|
|
1111
|
+
Clean: (0, import_react42.memo)(Clean),
|
|
1112
|
+
Circle: (0, import_react42.memo)(Circle),
|
|
1113
|
+
Line: (0, import_react42.memo)(Line),
|
|
1114
|
+
Arrow: (0, import_react42.memo)(Arrow),
|
|
1115
|
+
Star: (0, import_react42.memo)(Star),
|
|
1116
|
+
Diamond: (0, import_react42.memo)(Diamond),
|
|
1117
|
+
SpeechBalloon: (0, import_react42.memo)(SpeechBalloon),
|
|
1118
|
+
Triangle: (0, import_react42.memo)(Triangle),
|
|
1119
|
+
Up: (0, import_react42.memo)(Up),
|
|
1120
|
+
Down: (0, import_react42.memo)(Down)
|
|
1161
1121
|
};
|
|
1162
1122
|
|
|
1163
1123
|
// src/components/Toolbar/components/Button.tsx
|
|
1164
1124
|
var import_clsx4 = __toESM(require("clsx"));
|
|
1165
|
-
var
|
|
1166
|
-
var
|
|
1167
|
-
var Button = (0,
|
|
1125
|
+
var import_react43 = __toESM(require("react"));
|
|
1126
|
+
var import_react44 = __toESM(require("@tippyjs/react"));
|
|
1127
|
+
var Button = (0, import_react43.forwardRef)((props, ref) => {
|
|
1168
1128
|
const { content, disabled, active, onClick, interactive, placement = "right", children } = props;
|
|
1169
|
-
const { writable, theme } = (0,
|
|
1170
|
-
return
|
|
1129
|
+
const { writable, theme } = (0, import_react43.useContext)(ToolbarContext);
|
|
1130
|
+
return /* @__PURE__ */ import_react43.default.createElement(import_react44.default, {
|
|
1171
1131
|
className: "fastboard-tip",
|
|
1172
1132
|
content,
|
|
1173
1133
|
interactive,
|
|
@@ -1177,7 +1137,7 @@ var Button = (0, import_react44.forwardRef)((props, ref) => {
|
|
|
1177
1137
|
offset: placement.includes("right") ? RightOffset : void 0,
|
|
1178
1138
|
delay: [1e3, 400],
|
|
1179
1139
|
duration: 300
|
|
1180
|
-
},
|
|
1140
|
+
}, /* @__PURE__ */ import_react43.default.createElement("button", {
|
|
1181
1141
|
ref,
|
|
1182
1142
|
className: (0, import_clsx4.default)("fastboard-toolbar-btn", theme, { active }),
|
|
1183
1143
|
onClick,
|
|
@@ -1189,9 +1149,9 @@ var Button = (0, import_react44.forwardRef)((props, ref) => {
|
|
|
1189
1149
|
function renderToolTip(text, hotkey) {
|
|
1190
1150
|
if (!(typeof hotkey === "string"))
|
|
1191
1151
|
return text;
|
|
1192
|
-
return
|
|
1152
|
+
return /* @__PURE__ */ import_react45.default.createElement("span", {
|
|
1193
1153
|
className: "fastboard-toolbar-tooltip"
|
|
1194
|
-
},
|
|
1154
|
+
}, /* @__PURE__ */ import_react45.default.createElement("span", null, text), /* @__PURE__ */ import_react45.default.createElement("span", {
|
|
1195
1155
|
className: "fastboard-toolbar-hotkey"
|
|
1196
1156
|
}, hotkey.toUpperCase()));
|
|
1197
1157
|
}
|
|
@@ -1199,18 +1159,18 @@ function ClickerButton() {
|
|
|
1199
1159
|
var _a;
|
|
1200
1160
|
const app = useFastboardApp();
|
|
1201
1161
|
const { t } = useTranslation();
|
|
1202
|
-
const { theme, icons, writable, setAppliance, memberState } = (0,
|
|
1203
|
-
const changeAppliance = (0,
|
|
1162
|
+
const { theme, icons, writable, setAppliance, memberState } = (0, import_react45.useContext)(ToolbarContext);
|
|
1163
|
+
const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.clicker), [setAppliance]);
|
|
1204
1164
|
const shortcut = (_a = app.hotKeys) == null ? void 0 : _a.changeToClick;
|
|
1205
1165
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1206
1166
|
const active = appliance === import_white_web_sdk.ApplianceNames.clicker;
|
|
1207
1167
|
const disabled = !writable;
|
|
1208
|
-
return
|
|
1168
|
+
return /* @__PURE__ */ import_react45.default.createElement(Button, {
|
|
1209
1169
|
content: renderToolTip(t("clicker"), shortcut),
|
|
1210
1170
|
onClick: changeAppliance,
|
|
1211
1171
|
active
|
|
1212
|
-
},
|
|
1213
|
-
fallback:
|
|
1172
|
+
}, /* @__PURE__ */ import_react45.default.createElement(Icon, {
|
|
1173
|
+
fallback: /* @__PURE__ */ import_react45.default.createElement(Icons.Clicker, {
|
|
1214
1174
|
theme,
|
|
1215
1175
|
active
|
|
1216
1176
|
}),
|
|
@@ -1221,18 +1181,18 @@ function ClickerButton() {
|
|
|
1221
1181
|
function SelectorButton() {
|
|
1222
1182
|
const app = useFastboardApp();
|
|
1223
1183
|
const { t } = useTranslation();
|
|
1224
|
-
const { theme, icons, writable, setAppliance, memberState } = (0,
|
|
1225
|
-
const changeAppliance = (0,
|
|
1184
|
+
const { theme, icons, writable, setAppliance, memberState } = (0, import_react45.useContext)(ToolbarContext);
|
|
1185
|
+
const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.selector), [setAppliance]);
|
|
1226
1186
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1227
1187
|
const active = appliance === import_white_web_sdk.ApplianceNames.selector;
|
|
1228
1188
|
const disabled = !writable;
|
|
1229
1189
|
const shortcut = (app.hotKeys || defaultHotKeys).changeToSelector;
|
|
1230
|
-
return
|
|
1190
|
+
return /* @__PURE__ */ import_react45.default.createElement(Button, {
|
|
1231
1191
|
content: renderToolTip(t("selector"), shortcut),
|
|
1232
1192
|
onClick: changeAppliance,
|
|
1233
1193
|
active
|
|
1234
|
-
},
|
|
1235
|
-
fallback:
|
|
1194
|
+
}, /* @__PURE__ */ import_react45.default.createElement(Icon, {
|
|
1195
|
+
fallback: /* @__PURE__ */ import_react45.default.createElement(Icons.Selector, {
|
|
1236
1196
|
theme,
|
|
1237
1197
|
active
|
|
1238
1198
|
}),
|
|
@@ -1243,18 +1203,18 @@ function SelectorButton() {
|
|
|
1243
1203
|
function EraserButton() {
|
|
1244
1204
|
const app = useFastboardApp();
|
|
1245
1205
|
const { t } = useTranslation();
|
|
1246
|
-
const { theme, icons, writable, setAppliance, memberState } = (0,
|
|
1247
|
-
const changeAppliance = (0,
|
|
1206
|
+
const { theme, icons, writable, setAppliance, memberState } = (0, import_react45.useContext)(ToolbarContext);
|
|
1207
|
+
const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.eraser), [setAppliance]);
|
|
1248
1208
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1249
1209
|
const active = appliance === import_white_web_sdk.ApplianceNames.eraser;
|
|
1250
1210
|
const disabled = !writable;
|
|
1251
1211
|
const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToEraser;
|
|
1252
|
-
return
|
|
1212
|
+
return /* @__PURE__ */ import_react45.default.createElement(Button, {
|
|
1253
1213
|
content: renderToolTip(t("eraser"), shortcut),
|
|
1254
1214
|
onClick: changeAppliance,
|
|
1255
1215
|
active
|
|
1256
|
-
},
|
|
1257
|
-
fallback:
|
|
1216
|
+
}, /* @__PURE__ */ import_react45.default.createElement(Icon, {
|
|
1217
|
+
fallback: /* @__PURE__ */ import_react45.default.createElement(Icons.Eraser, {
|
|
1258
1218
|
theme,
|
|
1259
1219
|
active
|
|
1260
1220
|
}),
|
|
@@ -1264,13 +1224,13 @@ function EraserButton() {
|
|
|
1264
1224
|
}
|
|
1265
1225
|
function CleanButton() {
|
|
1266
1226
|
const { t } = useTranslation();
|
|
1267
|
-
const { theme, icons, writable, cleanCurrentScene } = (0,
|
|
1227
|
+
const { theme, icons, writable, cleanCurrentScene } = (0, import_react45.useContext)(ToolbarContext);
|
|
1268
1228
|
const disabled = !writable;
|
|
1269
|
-
return
|
|
1229
|
+
return /* @__PURE__ */ import_react45.default.createElement(Button, {
|
|
1270
1230
|
content: t("clean"),
|
|
1271
1231
|
onClick: cleanCurrentScene
|
|
1272
|
-
},
|
|
1273
|
-
fallback:
|
|
1232
|
+
}, /* @__PURE__ */ import_react45.default.createElement(Icon, {
|
|
1233
|
+
fallback: /* @__PURE__ */ import_react45.default.createElement(Icons.Clean, {
|
|
1274
1234
|
theme
|
|
1275
1235
|
}),
|
|
1276
1236
|
src: disabled ? icons == null ? void 0 : icons.cleanIconDisable : icons == null ? void 0 : icons.cleanIcon,
|
|
@@ -1279,8 +1239,8 @@ function CleanButton() {
|
|
|
1279
1239
|
}
|
|
1280
1240
|
|
|
1281
1241
|
// src/components/Toolbar/components/AppsButton.tsx
|
|
1282
|
-
var
|
|
1283
|
-
var
|
|
1242
|
+
var import_react46 = __toESM(require("@tippyjs/react"));
|
|
1243
|
+
var import_react47 = __toESM(require("react"));
|
|
1284
1244
|
|
|
1285
1245
|
// src/components/Toolbar/components/assets/vscode.png
|
|
1286
1246
|
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=";
|
|
@@ -1293,21 +1253,21 @@ var countdown_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyC
|
|
|
1293
1253
|
|
|
1294
1254
|
// src/components/Toolbar/components/AppsButton.tsx
|
|
1295
1255
|
function AppsButton({ content, onClick }) {
|
|
1296
|
-
const { theme, icons, writable } = (0,
|
|
1256
|
+
const { theme, icons, writable } = (0, import_react47.useContext)(ToolbarContext);
|
|
1297
1257
|
const disabled = !writable;
|
|
1298
|
-
const button =
|
|
1258
|
+
const button = /* @__PURE__ */ import_react47.default.createElement(Button, {
|
|
1299
1259
|
content: "Apps",
|
|
1300
1260
|
onClick
|
|
1301
|
-
},
|
|
1302
|
-
fallback:
|
|
1261
|
+
}, /* @__PURE__ */ import_react47.default.createElement(Icon, {
|
|
1262
|
+
fallback: /* @__PURE__ */ import_react47.default.createElement(Icons.Apps, {
|
|
1303
1263
|
theme
|
|
1304
1264
|
}),
|
|
1305
1265
|
src: disabled ? icons == null ? void 0 : icons.appsIconDisable : icons == null ? void 0 : icons.appsIcon,
|
|
1306
1266
|
alt: "[apps]"
|
|
1307
1267
|
}));
|
|
1308
|
-
return content === false ? button :
|
|
1268
|
+
return content === false ? button : /* @__PURE__ */ import_react47.default.createElement("span", {
|
|
1309
1269
|
className: "fastboard-toolbar-btn-interactive"
|
|
1310
|
-
},
|
|
1270
|
+
}, /* @__PURE__ */ import_react47.default.createElement(import_react46.default, {
|
|
1311
1271
|
className: "fastboard-tip",
|
|
1312
1272
|
content: renderAppsButtonContent(content),
|
|
1313
1273
|
theme,
|
|
@@ -1319,25 +1279,25 @@ function AppsButton({ content, onClick }) {
|
|
|
1319
1279
|
}, button));
|
|
1320
1280
|
}
|
|
1321
1281
|
function renderAppsButtonContent(content) {
|
|
1322
|
-
return
|
|
1282
|
+
return /* @__PURE__ */ import_react47.default.createElement("div", {
|
|
1323
1283
|
className: "fastboard-toolbar-panel apps"
|
|
1324
|
-
},
|
|
1284
|
+
}, /* @__PURE__ */ import_react47.default.createElement("div", {
|
|
1325
1285
|
className: "fastboard-toolbar-apps"
|
|
1326
|
-
}, content ||
|
|
1286
|
+
}, content || /* @__PURE__ */ import_react47.default.createElement(DefaultApps, null)));
|
|
1327
1287
|
}
|
|
1328
1288
|
function DefaultApps() {
|
|
1329
1289
|
const app = useFastboardApp();
|
|
1330
|
-
return
|
|
1290
|
+
return /* @__PURE__ */ import_react47.default.createElement(import_react47.default.Fragment, null, /* @__PURE__ */ import_react47.default.createElement(AppIcon, {
|
|
1331
1291
|
title: "Code Editor",
|
|
1332
1292
|
src: vscode_default,
|
|
1333
1293
|
alt: "[code editor]",
|
|
1334
1294
|
onClick: app == null ? void 0 : app.insertCodeEditor.bind(app)
|
|
1335
|
-
}),
|
|
1295
|
+
}), /* @__PURE__ */ import_react47.default.createElement(AppIcon, {
|
|
1336
1296
|
title: "GeoGebra",
|
|
1337
1297
|
src: geogebra_default,
|
|
1338
1298
|
alt: "[geogebra]",
|
|
1339
1299
|
onClick: app == null ? void 0 : app.insertGeoGebra.bind(app)
|
|
1340
|
-
}),
|
|
1300
|
+
}), /* @__PURE__ */ import_react47.default.createElement(AppIcon, {
|
|
1341
1301
|
title: "Countdown",
|
|
1342
1302
|
src: countdown_default,
|
|
1343
1303
|
alt: "[countdown]",
|
|
@@ -1345,29 +1305,29 @@ function DefaultApps() {
|
|
|
1345
1305
|
}));
|
|
1346
1306
|
}
|
|
1347
1307
|
function AppIcon({ title, src, alt, onClick }) {
|
|
1348
|
-
return
|
|
1308
|
+
return /* @__PURE__ */ import_react47.default.createElement("span", {
|
|
1349
1309
|
className: "fastboard-toolbar-app-icon"
|
|
1350
|
-
},
|
|
1310
|
+
}, /* @__PURE__ */ import_react47.default.createElement(Button, {
|
|
1351
1311
|
placement: "top",
|
|
1352
1312
|
content: title,
|
|
1353
1313
|
onClick
|
|
1354
|
-
},
|
|
1314
|
+
}, /* @__PURE__ */ import_react47.default.createElement("img", {
|
|
1355
1315
|
src,
|
|
1356
1316
|
alt,
|
|
1357
1317
|
title
|
|
1358
|
-
})),
|
|
1318
|
+
})), /* @__PURE__ */ import_react47.default.createElement("span", {
|
|
1359
1319
|
className: "fastboard-toolbar-app-icon-text"
|
|
1360
1320
|
}, title));
|
|
1361
1321
|
}
|
|
1362
1322
|
|
|
1363
1323
|
// src/components/Toolbar/components/PencilButton.tsx
|
|
1364
|
-
var
|
|
1365
|
-
var
|
|
1324
|
+
var import_react51 = __toESM(require("@tippyjs/react"));
|
|
1325
|
+
var import_react52 = __toESM(require("react"));
|
|
1366
1326
|
var import_white_web_sdk2 = require("white-web-sdk");
|
|
1367
1327
|
|
|
1368
1328
|
// src/components/Toolbar/components/ColorBox.tsx
|
|
1369
1329
|
var import_clsx5 = __toESM(require("clsx"));
|
|
1370
|
-
var
|
|
1330
|
+
var import_react48 = __toESM(require("react"));
|
|
1371
1331
|
var colors = {
|
|
1372
1332
|
"#E02020": [224, 32, 32],
|
|
1373
1333
|
"#F7B500": [247, 181, 0],
|
|
@@ -1380,20 +1340,20 @@ var colors = {
|
|
|
1380
1340
|
};
|
|
1381
1341
|
var colorKeys = Object.keys(colors);
|
|
1382
1342
|
function ColorBox() {
|
|
1383
|
-
const { theme, memberState, setStrokeColor, writable } = (0,
|
|
1343
|
+
const { theme, memberState, setStrokeColor, writable } = (0, import_react48.useContext)(ToolbarContext);
|
|
1384
1344
|
const strokeColor = memberState == null ? void 0 : memberState.strokeColor;
|
|
1385
1345
|
const disabled = !writable;
|
|
1386
|
-
return
|
|
1346
|
+
return /* @__PURE__ */ import_react48.default.createElement("div", {
|
|
1387
1347
|
className: (0, import_clsx5.default)("fastboard-toolbar-color-box", theme)
|
|
1388
|
-
}, colorKeys.map((key) =>
|
|
1348
|
+
}, colorKeys.map((key) => /* @__PURE__ */ import_react48.default.createElement("div", {
|
|
1389
1349
|
key,
|
|
1390
1350
|
className: (0, import_clsx5.default)("fastboard-toolbar-color-item", theme),
|
|
1391
1351
|
onClick: () => setStrokeColor(colors[key])
|
|
1392
|
-
},
|
|
1352
|
+
}, /* @__PURE__ */ import_react48.default.createElement("div", {
|
|
1393
1353
|
className: (0, import_clsx5.default)("fastboard-toolbar-color-border", theme, {
|
|
1394
1354
|
active: strokeColor && isEqualArray(strokeColor, colors[key])
|
|
1395
1355
|
})
|
|
1396
|
-
},
|
|
1356
|
+
}, /* @__PURE__ */ import_react48.default.createElement("button", {
|
|
1397
1357
|
className: (0, import_clsx5.default)("fastboard-toolbar-color-btn"),
|
|
1398
1358
|
style: { background: key },
|
|
1399
1359
|
disabled,
|
|
@@ -1406,10 +1366,10 @@ function ColorBox() {
|
|
|
1406
1366
|
|
|
1407
1367
|
// src/components/Toolbar/components/CutLine.tsx
|
|
1408
1368
|
var import_clsx6 = __toESM(require("clsx"));
|
|
1409
|
-
var
|
|
1369
|
+
var import_react49 = __toESM(require("react"));
|
|
1410
1370
|
function CutLine() {
|
|
1411
|
-
const { theme } = (0,
|
|
1412
|
-
return
|
|
1371
|
+
const { theme } = (0, import_react49.useContext)(ToolbarContext);
|
|
1372
|
+
return /* @__PURE__ */ import_react49.default.createElement("span", {
|
|
1413
1373
|
className: (0, import_clsx6.default)(`${name4}-cut-line`, theme)
|
|
1414
1374
|
});
|
|
1415
1375
|
}
|
|
@@ -1417,12 +1377,12 @@ function CutLine() {
|
|
|
1417
1377
|
// src/components/Toolbar/components/Slider.tsx
|
|
1418
1378
|
var import_clsx7 = __toESM(require("clsx"));
|
|
1419
1379
|
var import_rc_slider = __toESM(require("rc-slider"));
|
|
1420
|
-
var
|
|
1380
|
+
var import_react50 = __toESM(require("react"));
|
|
1421
1381
|
function Slider() {
|
|
1422
|
-
const { theme, writable, memberState, setStrokeWidth } = (0,
|
|
1382
|
+
const { theme, writable, memberState, setStrokeWidth } = (0, import_react50.useContext)(ToolbarContext);
|
|
1423
1383
|
const { activeColor } = themes[theme];
|
|
1424
1384
|
const strokeWidth = (memberState == null ? void 0 : memberState.strokeWidth) || 0;
|
|
1425
|
-
return
|
|
1385
|
+
return /* @__PURE__ */ import_react50.default.createElement(import_rc_slider.default, {
|
|
1426
1386
|
disabled: !writable,
|
|
1427
1387
|
className: (0, import_clsx7.default)("fastboard-toolbar-slider", theme),
|
|
1428
1388
|
trackStyle: { background: activeColor },
|
|
@@ -1438,17 +1398,17 @@ function Slider() {
|
|
|
1438
1398
|
function PencilButton() {
|
|
1439
1399
|
const app = useFastboardApp();
|
|
1440
1400
|
const { t } = useTranslation();
|
|
1441
|
-
const { theme, icons, writable, setAppliance, memberState } = (0,
|
|
1442
|
-
const changeAppliance = (0,
|
|
1401
|
+
const { theme, icons, writable, setAppliance, memberState } = (0, import_react52.useContext)(ToolbarContext);
|
|
1402
|
+
const changeAppliance = (0, import_react52.useCallback)(() => {
|
|
1443
1403
|
setAppliance(import_white_web_sdk2.ApplianceNames.pencil);
|
|
1444
1404
|
}, [setAppliance]);
|
|
1445
1405
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1446
1406
|
const active = appliance === import_white_web_sdk2.ApplianceNames.pencil;
|
|
1447
1407
|
const disabled = !writable;
|
|
1448
1408
|
const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToPencil;
|
|
1449
|
-
return
|
|
1409
|
+
return /* @__PURE__ */ import_react52.default.createElement("span", {
|
|
1450
1410
|
className: "fastboard-toolbar-btn-interactive"
|
|
1451
|
-
},
|
|
1411
|
+
}, /* @__PURE__ */ import_react52.default.createElement(import_react51.default, {
|
|
1452
1412
|
className: "fastboard-tip",
|
|
1453
1413
|
content: renderPencilButtonContent(),
|
|
1454
1414
|
theme,
|
|
@@ -1457,30 +1417,30 @@ function PencilButton() {
|
|
|
1457
1417
|
offset: RightOffset,
|
|
1458
1418
|
arrow: false,
|
|
1459
1419
|
interactive: true
|
|
1460
|
-
},
|
|
1420
|
+
}, /* @__PURE__ */ import_react52.default.createElement(Button, {
|
|
1461
1421
|
content: renderToolTip(t("pencil"), shortcut),
|
|
1462
1422
|
active,
|
|
1463
1423
|
onClick: changeAppliance
|
|
1464
|
-
},
|
|
1465
|
-
fallback:
|
|
1424
|
+
}, /* @__PURE__ */ import_react52.default.createElement(Icon, {
|
|
1425
|
+
fallback: /* @__PURE__ */ import_react52.default.createElement(Icons.Pencil, {
|
|
1466
1426
|
theme,
|
|
1467
1427
|
active
|
|
1468
1428
|
}),
|
|
1469
1429
|
src: disabled ? icons == null ? void 0 : icons.pencilIconDisable : icons == null ? void 0 : icons.pencilIcon,
|
|
1470
1430
|
alt: "[pencil]"
|
|
1471
|
-
}),
|
|
1431
|
+
}), /* @__PURE__ */ import_react52.default.createElement("span", {
|
|
1472
1432
|
className: "fastboard-toolbar-triangle"
|
|
1473
1433
|
}))));
|
|
1474
1434
|
}
|
|
1475
1435
|
function renderPencilButtonContent() {
|
|
1476
|
-
return
|
|
1436
|
+
return /* @__PURE__ */ import_react52.default.createElement("div", {
|
|
1477
1437
|
className: "fastboard-toolbar-panel pencil"
|
|
1478
|
-
},
|
|
1438
|
+
}, /* @__PURE__ */ import_react52.default.createElement(Slider, null), /* @__PURE__ */ import_react52.default.createElement(CutLine, null), /* @__PURE__ */ import_react52.default.createElement(ColorBox, null));
|
|
1479
1439
|
}
|
|
1480
1440
|
|
|
1481
1441
|
// src/components/Toolbar/components/ShapesButton.tsx
|
|
1482
|
-
var
|
|
1483
|
-
var
|
|
1442
|
+
var import_react53 = __toESM(require("@tippyjs/react"));
|
|
1443
|
+
var import_react54 = __toESM(require("react"));
|
|
1484
1444
|
var import_white_web_sdk4 = require("white-web-sdk");
|
|
1485
1445
|
|
|
1486
1446
|
// src/components/Toolbar/const.ts
|
|
@@ -1516,15 +1476,15 @@ var MinHeight = ItemHeight * 2 - 4;
|
|
|
1516
1476
|
var ShapeTypes = /* @__PURE__ */ new Set([...ApplianceShapes, ...Shapes]);
|
|
1517
1477
|
function ShapesButton() {
|
|
1518
1478
|
const { t } = useTranslation();
|
|
1519
|
-
const { theme, memberState } = (0,
|
|
1479
|
+
const { theme, memberState } = (0, import_react54.useContext)(ToolbarContext);
|
|
1520
1480
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1521
1481
|
const shape = memberState == null ? void 0 : memberState.shapeType;
|
|
1522
1482
|
const key = appliance === import_white_web_sdk4.ApplianceNames.shape ? shape : appliance;
|
|
1523
1483
|
const active = ShapeTypes.has(key);
|
|
1524
1484
|
const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
|
|
1525
|
-
return
|
|
1485
|
+
return /* @__PURE__ */ import_react54.default.createElement("span", {
|
|
1526
1486
|
className: "fastboard-toolbar-btn-interactive"
|
|
1527
|
-
},
|
|
1487
|
+
}, /* @__PURE__ */ import_react54.default.createElement(import_react53.default, {
|
|
1528
1488
|
className: "fastboard-tip",
|
|
1529
1489
|
content: renderShapesButtonContent(),
|
|
1530
1490
|
theme,
|
|
@@ -1533,31 +1493,31 @@ function ShapesButton() {
|
|
|
1533
1493
|
offset: RightOffset,
|
|
1534
1494
|
arrow: false,
|
|
1535
1495
|
interactive: true
|
|
1536
|
-
},
|
|
1496
|
+
}, /* @__PURE__ */ import_react54.default.createElement(Button, {
|
|
1537
1497
|
content: t("shape"),
|
|
1538
1498
|
active
|
|
1539
|
-
},
|
|
1499
|
+
}, /* @__PURE__ */ import_react54.default.createElement(CurrentIcon, {
|
|
1540
1500
|
theme,
|
|
1541
1501
|
active
|
|
1542
|
-
}),
|
|
1502
|
+
}), /* @__PURE__ */ import_react54.default.createElement("span", {
|
|
1543
1503
|
className: "fastboard-toolbar-triangle"
|
|
1544
1504
|
}))));
|
|
1545
1505
|
}
|
|
1546
1506
|
function renderShapesButtonContent() {
|
|
1547
|
-
return
|
|
1507
|
+
return /* @__PURE__ */ import_react54.default.createElement("div", {
|
|
1548
1508
|
className: "fastboard-toolbar-panel shapes"
|
|
1549
|
-
},
|
|
1509
|
+
}, /* @__PURE__ */ import_react54.default.createElement(ShapesBox, null), /* @__PURE__ */ import_react54.default.createElement(CutLine, null), /* @__PURE__ */ import_react54.default.createElement(Slider, null), /* @__PURE__ */ import_react54.default.createElement(CutLine, null), /* @__PURE__ */ import_react54.default.createElement(ColorBox, null));
|
|
1550
1510
|
}
|
|
1551
1511
|
function ShapesBox() {
|
|
1552
1512
|
const { t } = useTranslation();
|
|
1553
|
-
return
|
|
1513
|
+
return /* @__PURE__ */ import_react54.default.createElement("div", {
|
|
1554
1514
|
className: "fastboard-toolbar-shapes"
|
|
1555
|
-
}, ApplianceShapes.map((Appliance) =>
|
|
1515
|
+
}, ApplianceShapes.map((Appliance) => /* @__PURE__ */ import_react54.default.createElement(ApplianceShapeButton, {
|
|
1556
1516
|
key: Appliance,
|
|
1557
1517
|
content: t(Appliance),
|
|
1558
1518
|
Appliance,
|
|
1559
1519
|
Icon: ShapesMap[Appliance]
|
|
1560
|
-
})), Shapes.map((shape) =>
|
|
1520
|
+
})), Shapes.map((shape) => /* @__PURE__ */ import_react54.default.createElement(ShapeShapeButton, {
|
|
1561
1521
|
key: shape,
|
|
1562
1522
|
content: t(shape),
|
|
1563
1523
|
shape,
|
|
@@ -1565,53 +1525,53 @@ function ShapesBox() {
|
|
|
1565
1525
|
})));
|
|
1566
1526
|
}
|
|
1567
1527
|
function ApplianceShapeButton({ content, Appliance, Icon: Icon2 }) {
|
|
1568
|
-
const { theme, writable, setAppliance, memberState } = (0,
|
|
1528
|
+
const { theme, writable, setAppliance, memberState } = (0, import_react54.useContext)(ToolbarContext);
|
|
1569
1529
|
const current = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1570
1530
|
const disabled = !writable;
|
|
1571
|
-
return
|
|
1531
|
+
return /* @__PURE__ */ import_react54.default.createElement(Button, {
|
|
1572
1532
|
content,
|
|
1573
1533
|
disabled,
|
|
1574
1534
|
placement: "top",
|
|
1575
1535
|
onClick: () => setAppliance(Appliance)
|
|
1576
|
-
},
|
|
1536
|
+
}, /* @__PURE__ */ import_react54.default.createElement(Icon2, {
|
|
1577
1537
|
theme,
|
|
1578
1538
|
active: current === Appliance
|
|
1579
1539
|
}));
|
|
1580
1540
|
}
|
|
1581
1541
|
function ShapeShapeButton({ content, shape, Icon: Icon2 }) {
|
|
1582
|
-
const { theme, writable, setAppliance, memberState } = (0,
|
|
1542
|
+
const { theme, writable, setAppliance, memberState } = (0, import_react54.useContext)(ToolbarContext);
|
|
1583
1543
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1584
1544
|
const current = appliance === import_white_web_sdk4.ApplianceNames.shape && (memberState == null ? void 0 : memberState.shapeType);
|
|
1585
1545
|
const disabled = !writable;
|
|
1586
|
-
return
|
|
1546
|
+
return /* @__PURE__ */ import_react54.default.createElement(Button, {
|
|
1587
1547
|
content,
|
|
1588
1548
|
disabled,
|
|
1589
1549
|
placement: "top",
|
|
1590
1550
|
onClick: () => setAppliance(import_white_web_sdk4.ApplianceNames.shape, shape)
|
|
1591
|
-
},
|
|
1551
|
+
}, /* @__PURE__ */ import_react54.default.createElement(Icon2, {
|
|
1592
1552
|
theme,
|
|
1593
1553
|
active: current === shape
|
|
1594
1554
|
}));
|
|
1595
1555
|
}
|
|
1596
1556
|
|
|
1597
1557
|
// src/components/Toolbar/components/TextButton.tsx
|
|
1598
|
-
var
|
|
1599
|
-
var
|
|
1558
|
+
var import_react55 = __toESM(require("@tippyjs/react"));
|
|
1559
|
+
var import_react56 = __toESM(require("react"));
|
|
1600
1560
|
var import_white_web_sdk5 = require("white-web-sdk");
|
|
1601
1561
|
function TextButton() {
|
|
1602
1562
|
const app = useFastboardApp();
|
|
1603
1563
|
const { t } = useTranslation();
|
|
1604
|
-
const { theme, icons, writable, setAppliance, memberState } = (0,
|
|
1605
|
-
const changeAppliance = (0,
|
|
1564
|
+
const { theme, icons, writable, setAppliance, memberState } = (0, import_react56.useContext)(ToolbarContext);
|
|
1565
|
+
const changeAppliance = (0, import_react56.useCallback)(() => {
|
|
1606
1566
|
setAppliance(import_white_web_sdk5.ApplianceNames.text);
|
|
1607
1567
|
}, [setAppliance]);
|
|
1608
1568
|
const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
|
|
1609
1569
|
const active = appliance === import_white_web_sdk5.ApplianceNames.text;
|
|
1610
1570
|
const disabled = !writable;
|
|
1611
1571
|
const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToText;
|
|
1612
|
-
return
|
|
1572
|
+
return /* @__PURE__ */ import_react56.default.createElement("span", {
|
|
1613
1573
|
className: "fastboard-toolbar-btn-interactive"
|
|
1614
|
-
},
|
|
1574
|
+
}, /* @__PURE__ */ import_react56.default.createElement(import_react55.default, {
|
|
1615
1575
|
className: "fastboard-tip",
|
|
1616
1576
|
content: renderTextButtonContent(),
|
|
1617
1577
|
theme,
|
|
@@ -1620,53 +1580,53 @@ function TextButton() {
|
|
|
1620
1580
|
offset: RightOffset,
|
|
1621
1581
|
arrow: false,
|
|
1622
1582
|
interactive: true
|
|
1623
|
-
},
|
|
1583
|
+
}, /* @__PURE__ */ import_react56.default.createElement(Button, {
|
|
1624
1584
|
content: renderToolTip(t("text"), shortcut),
|
|
1625
1585
|
active,
|
|
1626
1586
|
onClick: changeAppliance
|
|
1627
|
-
},
|
|
1628
|
-
fallback:
|
|
1587
|
+
}, /* @__PURE__ */ import_react56.default.createElement(Icon, {
|
|
1588
|
+
fallback: /* @__PURE__ */ import_react56.default.createElement(Icons.Text, {
|
|
1629
1589
|
theme,
|
|
1630
1590
|
active
|
|
1631
1591
|
}),
|
|
1632
1592
|
src: disabled ? icons == null ? void 0 : icons.textIconDisable : icons == null ? void 0 : icons.textIcon,
|
|
1633
1593
|
alt: "[text]"
|
|
1634
|
-
}),
|
|
1594
|
+
}), /* @__PURE__ */ import_react56.default.createElement("span", {
|
|
1635
1595
|
className: "fastboard-toolbar-triangle"
|
|
1636
1596
|
}))));
|
|
1637
1597
|
}
|
|
1638
1598
|
function renderTextButtonContent() {
|
|
1639
|
-
return
|
|
1599
|
+
return /* @__PURE__ */ import_react56.default.createElement("div", {
|
|
1640
1600
|
className: "fastboard-toolbar-panel text"
|
|
1641
|
-
},
|
|
1601
|
+
}, /* @__PURE__ */ import_react56.default.createElement(ColorBox, null));
|
|
1642
1602
|
}
|
|
1643
1603
|
|
|
1644
1604
|
// src/components/Toolbar/components/UpDownButtons.tsx
|
|
1645
|
-
var
|
|
1605
|
+
var import_react57 = __toESM(require("react"));
|
|
1646
1606
|
function UpButton({ disabled, scrollTo }) {
|
|
1647
|
-
const { theme, icons } = (0,
|
|
1648
|
-
const scrollUp = (0,
|
|
1649
|
-
return
|
|
1607
|
+
const { theme, icons } = (0, import_react57.useContext)(ToolbarContext);
|
|
1608
|
+
const scrollUp = (0, import_react57.useCallback)(() => scrollTo(-ItemHeight), [scrollTo]);
|
|
1609
|
+
return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(Button, {
|
|
1650
1610
|
content: "Up",
|
|
1651
1611
|
disabled,
|
|
1652
1612
|
onClick: scrollUp
|
|
1653
|
-
},
|
|
1654
|
-
fallback:
|
|
1613
|
+
}, /* @__PURE__ */ import_react57.default.createElement(Icon, {
|
|
1614
|
+
fallback: /* @__PURE__ */ import_react57.default.createElement(Icons.Up, {
|
|
1655
1615
|
theme
|
|
1656
1616
|
}),
|
|
1657
1617
|
src: disabled ? icons == null ? void 0 : icons.upIconDisable : icons == null ? void 0 : icons.upIcon,
|
|
1658
1618
|
alt: "[up]"
|
|
1659
|
-
})),
|
|
1619
|
+
})), /* @__PURE__ */ import_react57.default.createElement(CutLine, null));
|
|
1660
1620
|
}
|
|
1661
1621
|
function DownButton({ disabled, scrollTo }) {
|
|
1662
|
-
const { theme, icons } = (0,
|
|
1663
|
-
const scrollDown = (0,
|
|
1664
|
-
return
|
|
1622
|
+
const { theme, icons } = (0, import_react57.useContext)(ToolbarContext);
|
|
1623
|
+
const scrollDown = (0, import_react57.useCallback)(() => scrollTo(ItemHeight), [scrollTo]);
|
|
1624
|
+
return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(CutLine, null), /* @__PURE__ */ import_react57.default.createElement(Button, {
|
|
1665
1625
|
content: "Down",
|
|
1666
1626
|
disabled,
|
|
1667
1627
|
onClick: scrollDown
|
|
1668
|
-
},
|
|
1669
|
-
fallback:
|
|
1628
|
+
}, /* @__PURE__ */ import_react57.default.createElement(Icon, {
|
|
1629
|
+
fallback: /* @__PURE__ */ import_react57.default.createElement(Icons.Down, {
|
|
1670
1630
|
theme
|
|
1671
1631
|
}),
|
|
1672
1632
|
src: disabled ? icons == null ? void 0 : icons.downIconDisable : icons == null ? void 0 : icons.downIcon,
|
|
@@ -1674,25 +1634,30 @@ function DownButton({ disabled, scrollTo }) {
|
|
|
1674
1634
|
})));
|
|
1675
1635
|
}
|
|
1676
1636
|
|
|
1637
|
+
// src/components/Toolbar/components/assets/collapsed.png
|
|
1638
|
+
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";
|
|
1639
|
+
|
|
1677
1640
|
// src/components/Toolbar/Content.tsx
|
|
1678
|
-
|
|
1679
|
-
const
|
|
1680
|
-
const
|
|
1681
|
-
const [
|
|
1641
|
+
function Content({ onCollapse }) {
|
|
1642
|
+
const { theme, icons, writable } = (0, import_react58.useContext)(ToolbarContext);
|
|
1643
|
+
const ref = (0, import_react58.useRef)(null);
|
|
1644
|
+
const [scrollTop, setScrollTop] = (0, import_react58.useState)(0);
|
|
1645
|
+
const [parentHeight, setParentHeight] = (0, import_react58.useState)(0);
|
|
1646
|
+
const disabled = !writable;
|
|
1682
1647
|
const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
|
|
1683
1648
|
const sectionHeight = clamp(parentHeight - 48 * (needScroll ? 3 : 1), MinHeight, MaxHeight);
|
|
1684
1649
|
const scrollBuffer = Math.max(parentHeight - sectionHeight - 1, 0);
|
|
1685
1650
|
const disableScrollUp = scrollTop === 0;
|
|
1686
1651
|
const disableScrollDown = scrollTop === scrollBuffer;
|
|
1687
|
-
const scrollTo = (0,
|
|
1652
|
+
const scrollTo = (0, import_react58.useCallback)((height) => {
|
|
1688
1653
|
setScrollTop(clamp(scrollTop + height, 0, scrollBuffer));
|
|
1689
1654
|
}, [scrollBuffer, scrollTop]);
|
|
1690
|
-
(0,
|
|
1655
|
+
(0, import_react58.useEffect)(() => {
|
|
1691
1656
|
if (ref.current) {
|
|
1692
1657
|
ref.current.scrollTop = scrollTop;
|
|
1693
1658
|
}
|
|
1694
1659
|
}, [scrollTop]);
|
|
1695
|
-
(0,
|
|
1660
|
+
(0, import_react58.useEffect)(() => {
|
|
1696
1661
|
var _a, _b;
|
|
1697
1662
|
const container = (_b = (_a = ref.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
|
|
1698
1663
|
if (container) {
|
|
@@ -1705,95 +1670,82 @@ var Content = import_react59.default.memo(() => {
|
|
|
1705
1670
|
return () => resizeObserver.disconnect();
|
|
1706
1671
|
}
|
|
1707
1672
|
}, []);
|
|
1708
|
-
return
|
|
1673
|
+
return /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, needScroll && /* @__PURE__ */ import_react58.default.createElement(UpButton, {
|
|
1709
1674
|
scrollTo,
|
|
1710
1675
|
disabled: disableScrollUp
|
|
1711
|
-
}),
|
|
1676
|
+
}), /* @__PURE__ */ import_react58.default.createElement("div", {
|
|
1712
1677
|
ref,
|
|
1713
1678
|
className: (0, import_clsx8.default)(`${name4}-section`),
|
|
1714
1679
|
style: {
|
|
1715
1680
|
height: `${sectionHeight}px`,
|
|
1716
1681
|
overflow: needScroll ? "hidden" : "visible"
|
|
1717
1682
|
}
|
|
1718
|
-
},
|
|
1683
|
+
}, /* @__PURE__ */ import_react58.default.createElement(ClickerButton, null), /* @__PURE__ */ import_react58.default.createElement(SelectorButton, null), /* @__PURE__ */ import_react58.default.createElement(PencilButton, null), /* @__PURE__ */ import_react58.default.createElement(TextButton, null), /* @__PURE__ */ import_react58.default.createElement(ShapesButton, null), /* @__PURE__ */ import_react58.default.createElement(EraserButton, null), /* @__PURE__ */ import_react58.default.createElement(CleanButton, null), /* @__PURE__ */ import_react58.default.createElement(AppsButton, null)), needScroll && /* @__PURE__ */ import_react58.default.createElement(DownButton, {
|
|
1719
1684
|
scrollTo,
|
|
1720
1685
|
disabled: disableScrollDown
|
|
1721
|
-
})
|
|
1722
|
-
|
|
1686
|
+
}), /* @__PURE__ */ import_react58.default.createElement("div", {
|
|
1687
|
+
className: (0, import_clsx8.default)("fastboard-toolbar-mask", theme),
|
|
1688
|
+
onClick: onCollapse
|
|
1689
|
+
}, /* @__PURE__ */ import_react58.default.createElement(Icon, {
|
|
1690
|
+
fallback: /* @__PURE__ */ import_react58.default.createElement("img", {
|
|
1691
|
+
draggable: false,
|
|
1692
|
+
className: (0, import_clsx8.default)(`${name4}-mask-btn`, theme),
|
|
1693
|
+
src: collapsed_default
|
|
1694
|
+
}),
|
|
1695
|
+
src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
|
|
1696
|
+
})));
|
|
1697
|
+
}
|
|
1723
1698
|
|
|
1724
1699
|
// src/components/Toolbar/Toolbar.tsx
|
|
1725
|
-
var ToolbarContext = (0,
|
|
1700
|
+
var ToolbarContext = (0, import_react59.createContext)(__spreadValues({
|
|
1726
1701
|
theme: "light"
|
|
1727
1702
|
}, EmptyToolbarHook));
|
|
1728
1703
|
var name4 = "fastboard-toolbar";
|
|
1729
|
-
|
|
1704
|
+
function Toolbar({ theme, icons }) {
|
|
1730
1705
|
theme = useTheme(theme);
|
|
1731
1706
|
const hook = useToolbar();
|
|
1732
|
-
const [expanded, setExpanded] = (0,
|
|
1733
|
-
const [
|
|
1734
|
-
const [onHover, setOnHover] = (0, import_react60.useState)(false);
|
|
1735
|
-
const [delayedOnHover, setDelayedOnHover] = (0, import_react60.useState)(false);
|
|
1736
|
-
const [pointEvents, setPointEvents] = (0, import_react60.useState)(true);
|
|
1707
|
+
const [expanded, setExpanded] = (0, import_react59.useState)(true);
|
|
1708
|
+
const [pointerEvents, setPointerEvents] = (0, import_react59.useState)("auto");
|
|
1737
1709
|
const disabled = !hook.writable;
|
|
1738
|
-
|
|
1739
|
-
setExpanded((e) => !e);
|
|
1740
|
-
}, []);
|
|
1741
|
-
(0, import_react60.useEffect)(() => {
|
|
1742
|
-
const timer = setTimeout(() => {
|
|
1743
|
-
setDelayedOnHover(onHover);
|
|
1744
|
-
}, 400);
|
|
1745
|
-
return () => clearTimeout(timer);
|
|
1746
|
-
}, [onHover]);
|
|
1747
|
-
return import_react60.default.createElement(ToolbarContext.Provider, {
|
|
1710
|
+
return /* @__PURE__ */ import_react59.default.createElement(ToolbarContext.Provider, {
|
|
1748
1711
|
value: __spreadValues({ theme, icons }, hook)
|
|
1749
|
-
},
|
|
1750
|
-
initial: { x: -100 },
|
|
1751
|
-
animate: { x: 0, transition: { duration: 0.5 } },
|
|
1712
|
+
}, /* @__PURE__ */ import_react59.default.createElement(import_framer_motion.AnimatePresence, null, expanded ? /* @__PURE__ */ import_react59.default.createElement(import_framer_motion.motion.div, {
|
|
1752
1713
|
key: "toolbar",
|
|
1753
|
-
ref: toolbarRef,
|
|
1754
1714
|
className: (0, import_clsx9.default)(name4, theme),
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
},
|
|
1758
|
-
onMouseLeave: () => setOnHover(false),
|
|
1715
|
+
initial: { x: -100 },
|
|
1716
|
+
animate: { x: 0, transition: { duration: 0.5 } },
|
|
1759
1717
|
exit: { x: -100, transition: { duration: 0.5 } },
|
|
1760
|
-
onAnimationStart: () =>
|
|
1761
|
-
onAnimationComplete: () =>
|
|
1762
|
-
style: { pointerEvents
|
|
1763
|
-
},
|
|
1764
|
-
|
|
1765
|
-
}
|
|
1766
|
-
onClick: toggle
|
|
1767
|
-
}, import_react60.default.createElement("img", {
|
|
1768
|
-
draggable: false,
|
|
1769
|
-
className: (0, import_clsx9.default)(`${name4}-mask-btn`, theme),
|
|
1770
|
-
src: collapsed_default
|
|
1771
|
-
})))) : import_react60.default.createElement(import_framer_motion.motion.div, {
|
|
1718
|
+
onAnimationStart: () => setPointerEvents("none"),
|
|
1719
|
+
onAnimationComplete: () => setPointerEvents("auto"),
|
|
1720
|
+
style: { pointerEvents }
|
|
1721
|
+
}, /* @__PURE__ */ import_react59.default.createElement(Content, {
|
|
1722
|
+
onCollapse: () => setExpanded(false)
|
|
1723
|
+
})) : /* @__PURE__ */ import_react59.default.createElement(import_framer_motion.motion.div, {
|
|
1772
1724
|
className: (0, import_clsx9.default)(`${name4}-expand-btn`, theme),
|
|
1773
1725
|
key: "expand",
|
|
1774
|
-
onClick:
|
|
1726
|
+
onClick: () => setExpanded(true),
|
|
1775
1727
|
initial: { x: -100 },
|
|
1776
1728
|
animate: { x: 0, transition: { duration: 0.5 } }
|
|
1777
|
-
},
|
|
1778
|
-
fallback:
|
|
1729
|
+
}, /* @__PURE__ */ import_react59.default.createElement(Icon, {
|
|
1730
|
+
fallback: /* @__PURE__ */ import_react59.default.createElement("img", {
|
|
1779
1731
|
draggable: false,
|
|
1780
1732
|
src: expanded_default,
|
|
1781
1733
|
className: (0, import_clsx9.default)(`${name4}-mask-btn`, theme)
|
|
1782
1734
|
}),
|
|
1783
1735
|
src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
|
|
1784
1736
|
}))));
|
|
1785
|
-
}
|
|
1737
|
+
}
|
|
1786
1738
|
|
|
1787
1739
|
// src/components/PlayerControl/hooks.ts
|
|
1788
|
-
var
|
|
1740
|
+
var import_react60 = require("react");
|
|
1789
1741
|
var import_white_web_sdk6 = require("white-web-sdk");
|
|
1790
1742
|
var EMPTY_ARRAY = [];
|
|
1791
1743
|
function useForceUpdate2() {
|
|
1792
|
-
const [, forceUpdate_] = (0,
|
|
1793
|
-
return (0,
|
|
1744
|
+
const [, forceUpdate_] = (0, import_react60.useState)({});
|
|
1745
|
+
return (0, import_react60.useCallback)(() => forceUpdate_({}), EMPTY_ARRAY);
|
|
1794
1746
|
}
|
|
1795
1747
|
function usePlayerControl(player) {
|
|
1796
|
-
const togglePlay = (0,
|
|
1748
|
+
const togglePlay = (0, import_react60.useCallback)(() => {
|
|
1797
1749
|
if (player) {
|
|
1798
1750
|
switch (player.phase) {
|
|
1799
1751
|
case import_white_web_sdk6.PlayerPhase.WaitingFirstFrame:
|
|
@@ -1809,25 +1761,25 @@ function usePlayerControl(player) {
|
|
|
1809
1761
|
}
|
|
1810
1762
|
}
|
|
1811
1763
|
}, [player]);
|
|
1812
|
-
const seekToProgressTime = (0,
|
|
1764
|
+
const seekToProgressTime = (0, import_react60.useCallback)((time) => {
|
|
1813
1765
|
if (player) {
|
|
1814
1766
|
player.seekToProgressTime(time);
|
|
1815
1767
|
}
|
|
1816
1768
|
}, [player]);
|
|
1817
1769
|
const lastPlayer = useLastValue(player);
|
|
1818
1770
|
const forceUpdate = useForceUpdate2();
|
|
1819
|
-
const setSpeed = (0,
|
|
1771
|
+
const setSpeed = (0, import_react60.useCallback)((speed2) => {
|
|
1820
1772
|
if (player) {
|
|
1821
1773
|
player.playbackSpeed = speed2;
|
|
1822
1774
|
forceUpdate();
|
|
1823
1775
|
}
|
|
1824
1776
|
}, [forceUpdate, player]);
|
|
1825
|
-
(0,
|
|
1777
|
+
(0, import_react60.useEffect)(() => {
|
|
1826
1778
|
if (!lastPlayer && player) {
|
|
1827
1779
|
forceUpdate();
|
|
1828
1780
|
}
|
|
1829
1781
|
}, [forceUpdate, lastPlayer, player]);
|
|
1830
|
-
(0,
|
|
1782
|
+
(0, import_react60.useEffect)(() => {
|
|
1831
1783
|
if (player) {
|
|
1832
1784
|
player.callbacks.on("onPhaseChanged", forceUpdate);
|
|
1833
1785
|
player.callbacks.on("onProgressTimeChanged", forceUpdate);
|
|
@@ -1853,19 +1805,19 @@ function usePlayerControl(player) {
|
|
|
1853
1805
|
}
|
|
1854
1806
|
|
|
1855
1807
|
// src/components/PlayerControl/PlayerControl.tsx
|
|
1856
|
-
var
|
|
1808
|
+
var import_react67 = __toESM(require("@tippyjs/react"));
|
|
1857
1809
|
var import_clsx11 = __toESM(require("clsx"));
|
|
1858
1810
|
var import_rc_slider2 = __toESM(require("rc-slider"));
|
|
1859
|
-
var
|
|
1811
|
+
var import_react68 = __toESM(require("react"));
|
|
1860
1812
|
var import_white_web_sdk7 = require("white-web-sdk");
|
|
1861
1813
|
|
|
1862
1814
|
// src/components/PlayerControl/components/Button.tsx
|
|
1863
1815
|
var import_clsx10 = __toESM(require("clsx"));
|
|
1864
|
-
var
|
|
1865
|
-
var
|
|
1866
|
-
var Button2 = (0,
|
|
1816
|
+
var import_react61 = __toESM(require("react"));
|
|
1817
|
+
var import_react62 = __toESM(require("@tippyjs/react"));
|
|
1818
|
+
var Button2 = (0, import_react61.forwardRef)((props, ref) => {
|
|
1867
1819
|
const { theme, content, disabled, active, onClick, interactive, placement = "top", children } = props;
|
|
1868
|
-
return
|
|
1820
|
+
return /* @__PURE__ */ import_react61.default.createElement(import_react62.default, {
|
|
1869
1821
|
className: "fastboard-tip",
|
|
1870
1822
|
content,
|
|
1871
1823
|
interactive,
|
|
@@ -1875,7 +1827,7 @@ var Button2 = (0, import_react62.forwardRef)((props, ref) => {
|
|
|
1875
1827
|
offset: TopOffset,
|
|
1876
1828
|
delay: [1e3, 400],
|
|
1877
1829
|
duration: 300
|
|
1878
|
-
},
|
|
1830
|
+
}, /* @__PURE__ */ import_react61.default.createElement("button", {
|
|
1879
1831
|
ref,
|
|
1880
1832
|
className: (0, import_clsx10.default)("fastboard-player-control-btn", theme, { active }),
|
|
1881
1833
|
onClick,
|
|
@@ -1884,39 +1836,39 @@ var Button2 = (0, import_react62.forwardRef)((props, ref) => {
|
|
|
1884
1836
|
});
|
|
1885
1837
|
|
|
1886
1838
|
// src/components/PlayerControl/icons/index.ts
|
|
1887
|
-
var
|
|
1839
|
+
var import_react66 = require("react");
|
|
1888
1840
|
|
|
1889
1841
|
// src/components/PlayerControl/icons/Loading.tsx
|
|
1890
|
-
var
|
|
1842
|
+
var import_react63 = __toESM(require("react"));
|
|
1891
1843
|
var Loading = (props) => {
|
|
1892
1844
|
const stroke = getStroke(props);
|
|
1893
|
-
return
|
|
1845
|
+
return /* @__PURE__ */ import_react63.default.createElement("svg", {
|
|
1894
1846
|
viewBox: "0 0 24 24"
|
|
1895
|
-
},
|
|
1847
|
+
}, /* @__PURE__ */ import_react63.default.createElement("path", {
|
|
1896
1848
|
d: "M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z",
|
|
1897
1849
|
fill: stroke
|
|
1898
1850
|
}));
|
|
1899
1851
|
};
|
|
1900
1852
|
|
|
1901
1853
|
// src/components/PlayerControl/icons/Pause.tsx
|
|
1902
|
-
var
|
|
1854
|
+
var import_react64 = __toESM(require("react"));
|
|
1903
1855
|
var Pause = (props) => {
|
|
1904
1856
|
const stroke = getStroke(props);
|
|
1905
|
-
return
|
|
1857
|
+
return /* @__PURE__ */ import_react64.default.createElement("svg", {
|
|
1906
1858
|
viewBox: "0 0 24 24"
|
|
1907
|
-
},
|
|
1859
|
+
}, /* @__PURE__ */ import_react64.default.createElement("path", {
|
|
1908
1860
|
d: "M14 19h4V5h-4M6 19h4V5H6v14z",
|
|
1909
1861
|
fill: stroke
|
|
1910
1862
|
}));
|
|
1911
1863
|
};
|
|
1912
1864
|
|
|
1913
1865
|
// src/components/PlayerControl/icons/Play.tsx
|
|
1914
|
-
var
|
|
1866
|
+
var import_react65 = __toESM(require("react"));
|
|
1915
1867
|
var Play = (props) => {
|
|
1916
1868
|
const stroke = getStroke(props);
|
|
1917
|
-
return
|
|
1869
|
+
return /* @__PURE__ */ import_react65.default.createElement("svg", {
|
|
1918
1870
|
viewBox: "0 0 24 24"
|
|
1919
|
-
},
|
|
1871
|
+
}, /* @__PURE__ */ import_react65.default.createElement("path", {
|
|
1920
1872
|
d: "M8 5.14v14l11-7l-11-7z",
|
|
1921
1873
|
fill: stroke
|
|
1922
1874
|
}));
|
|
@@ -1924,9 +1876,9 @@ var Play = (props) => {
|
|
|
1924
1876
|
|
|
1925
1877
|
// src/components/PlayerControl/icons/index.ts
|
|
1926
1878
|
var Icons2 = {
|
|
1927
|
-
Play: (0,
|
|
1928
|
-
Pause: (0,
|
|
1929
|
-
Loading: (0,
|
|
1879
|
+
Play: (0, import_react66.memo)(Play),
|
|
1880
|
+
Pause: (0, import_react66.memo)(Pause),
|
|
1881
|
+
Loading: (0, import_react66.memo)(Loading)
|
|
1930
1882
|
};
|
|
1931
1883
|
|
|
1932
1884
|
// src/components/PlayerControl/PlayerControl.tsx
|
|
@@ -1935,12 +1887,12 @@ function PlayerControl(_a) {
|
|
|
1935
1887
|
var _b = _a, { theme, autoHide = false, player: player_ } = _b, icons = __objRest(_b, ["theme", "autoHide", "player"]);
|
|
1936
1888
|
theme = useTheme(theme);
|
|
1937
1889
|
const { t } = useTranslation();
|
|
1938
|
-
const [currentTime, setCurrentTime] = (0,
|
|
1890
|
+
const [currentTime, setCurrentTime] = (0, import_react68.useState)(0);
|
|
1939
1891
|
const player = usePlayerControl(player_);
|
|
1940
|
-
(0,
|
|
1892
|
+
(0, import_react68.useEffect)(() => {
|
|
1941
1893
|
setCurrentTime(player.currentTime);
|
|
1942
1894
|
}, [player.currentTime]);
|
|
1943
|
-
(0,
|
|
1895
|
+
(0, import_react68.useEffect)(() => {
|
|
1944
1896
|
if (player.currentTime !== currentTime) {
|
|
1945
1897
|
player.seekToProgressTime(currentTime);
|
|
1946
1898
|
}
|
|
@@ -1948,25 +1900,25 @@ function PlayerControl(_a) {
|
|
|
1948
1900
|
const isLoading = player.phase === import_white_web_sdk7.PlayerPhase.WaitingFirstFrame || player.phase === import_white_web_sdk7.PlayerPhase.Buffering;
|
|
1949
1901
|
const isPlaying = player.phase === import_white_web_sdk7.PlayerPhase.Playing;
|
|
1950
1902
|
const { activeColor } = themes[theme];
|
|
1951
|
-
return
|
|
1903
|
+
return /* @__PURE__ */ import_react68.default.createElement("div", {
|
|
1952
1904
|
className: (0, import_clsx11.default)(name5, theme, { "auto-hide": autoHide })
|
|
1953
|
-
},
|
|
1905
|
+
}, /* @__PURE__ */ import_react68.default.createElement("button", {
|
|
1954
1906
|
className: (0, import_clsx11.default)(`${name5}-btn`, isLoading ? "loading" : isPlaying ? "pause" : "play", theme),
|
|
1955
1907
|
disabled: isLoading,
|
|
1956
1908
|
onClick: player.togglePlay
|
|
1957
|
-
},
|
|
1958
|
-
fallback: isLoading ?
|
|
1909
|
+
}, /* @__PURE__ */ import_react68.default.createElement(Icon, {
|
|
1910
|
+
fallback: isLoading ? /* @__PURE__ */ import_react68.default.createElement(Icons2.Loading, {
|
|
1959
1911
|
theme
|
|
1960
|
-
}) : isPlaying ?
|
|
1912
|
+
}) : isPlaying ? /* @__PURE__ */ import_react68.default.createElement(Icons2.Pause, {
|
|
1961
1913
|
theme
|
|
1962
|
-
}) :
|
|
1914
|
+
}) : /* @__PURE__ */ import_react68.default.createElement(Icons2.Play, {
|
|
1963
1915
|
theme
|
|
1964
1916
|
}),
|
|
1965
1917
|
src: isLoading ? icons.loadingIcon : isPlaying ? icons.pauseIcon : icons.playIcon,
|
|
1966
1918
|
alt: isLoading ? "[loading]" : isPlaying ? "[pause]" : "[play]"
|
|
1967
|
-
})),
|
|
1919
|
+
})), /* @__PURE__ */ import_react68.default.createElement("span", {
|
|
1968
1920
|
className: (0, import_clsx11.default)(`${name5}-slider`, { loading: isLoading }, theme)
|
|
1969
|
-
},
|
|
1921
|
+
}, /* @__PURE__ */ import_react68.default.createElement(import_rc_slider2.default, {
|
|
1970
1922
|
disabled: isLoading,
|
|
1971
1923
|
trackStyle: { background: activeColor },
|
|
1972
1924
|
handleStyle: { border: `1px solid ${activeColor}` },
|
|
@@ -1975,15 +1927,15 @@ function PlayerControl(_a) {
|
|
|
1975
1927
|
min: 0,
|
|
1976
1928
|
max: player.totalTime,
|
|
1977
1929
|
step: 100
|
|
1978
|
-
})),
|
|
1930
|
+
})), /* @__PURE__ */ import_react68.default.createElement("span", {
|
|
1979
1931
|
className: (0, import_clsx11.default)(`${name5}-current`, theme)
|
|
1980
|
-
}, renderTime(player.currentTime)),
|
|
1932
|
+
}, renderTime(player.currentTime)), /* @__PURE__ */ import_react68.default.createElement("span", {
|
|
1981
1933
|
className: (0, import_clsx11.default)(`${name5}-slash`, theme)
|
|
1982
|
-
}, "/"),
|
|
1934
|
+
}, "/"), /* @__PURE__ */ import_react68.default.createElement("span", {
|
|
1983
1935
|
className: (0, import_clsx11.default)(`${name5}-total`, theme)
|
|
1984
|
-
}, renderTime(player.totalTime)),
|
|
1936
|
+
}, renderTime(player.totalTime)), /* @__PURE__ */ import_react68.default.createElement("span", {
|
|
1985
1937
|
className: `${name5}-btn-interactive`
|
|
1986
|
-
},
|
|
1938
|
+
}, /* @__PURE__ */ import_react68.default.createElement(import_react67.default, {
|
|
1987
1939
|
className: "fastboard-tip",
|
|
1988
1940
|
content: renderSpeeds(player),
|
|
1989
1941
|
theme,
|
|
@@ -1992,11 +1944,11 @@ function PlayerControl(_a) {
|
|
|
1992
1944
|
offset: TopOffset,
|
|
1993
1945
|
arrow: false,
|
|
1994
1946
|
interactive: true
|
|
1995
|
-
},
|
|
1947
|
+
}, /* @__PURE__ */ import_react68.default.createElement(Button2, {
|
|
1996
1948
|
content: t("speed"),
|
|
1997
1949
|
theme,
|
|
1998
1950
|
disabled: isLoading
|
|
1999
|
-
},
|
|
1951
|
+
}, /* @__PURE__ */ import_react68.default.createElement("span", {
|
|
2000
1952
|
className: (0, import_clsx11.default)(`${name5}-speed-text`, theme)
|
|
2001
1953
|
}, player.speed, "x")))));
|
|
2002
1954
|
}
|
|
@@ -2008,9 +1960,9 @@ function renderTime(ms) {
|
|
|
2008
1960
|
}
|
|
2009
1961
|
var Speeds = [2, 1.5, 1.25, 1, 0.75, 0.5];
|
|
2010
1962
|
function renderSpeeds({ speed: current, setSpeed }) {
|
|
2011
|
-
return
|
|
1963
|
+
return /* @__PURE__ */ import_react68.default.createElement("div", {
|
|
2012
1964
|
className: (0, import_clsx11.default)(`${name5}-panel`, "speed")
|
|
2013
|
-
}, Speeds.map((speed) =>
|
|
1965
|
+
}, Speeds.map((speed) => /* @__PURE__ */ import_react68.default.createElement("button", {
|
|
2014
1966
|
className: (0, import_clsx11.default)(`${name5}-btn`, "speed", {
|
|
2015
1967
|
active: speed === current
|
|
2016
1968
|
}),
|
|
@@ -2020,18 +1972,18 @@ function renderSpeeds({ speed: current, setSpeed }) {
|
|
|
2020
1972
|
}
|
|
2021
1973
|
|
|
2022
1974
|
// src/components/Fastboard.tsx
|
|
2023
|
-
var
|
|
2024
|
-
var Fastboard = (0,
|
|
1975
|
+
var import_react69 = __toESM(require("react"));
|
|
1976
|
+
var Fastboard = /* @__PURE__ */ (0, import_react69.forwardRef)(function Fastboard2(_a, ref) {
|
|
2025
1977
|
var _b = _a, { app, theme, layout, language } = _b, restProps = __objRest(_b, ["app", "theme", "layout", "language"]);
|
|
2026
1978
|
if (!app) {
|
|
2027
|
-
return
|
|
1979
|
+
return /* @__PURE__ */ import_react69.default.createElement("div", __spreadValues({
|
|
2028
1980
|
className: "fastboard-root",
|
|
2029
1981
|
ref
|
|
2030
1982
|
}, restProps));
|
|
2031
1983
|
}
|
|
2032
|
-
return
|
|
1984
|
+
return /* @__PURE__ */ import_react69.default.createElement(FastboardAppContext.Provider, {
|
|
2033
1985
|
value: app
|
|
2034
|
-
},
|
|
1986
|
+
}, /* @__PURE__ */ import_react69.default.createElement(FastboardInternal, __spreadValues(__spreadValues({
|
|
2035
1987
|
forwardedRef: ref
|
|
2036
1988
|
}, { theme, layout, language }), restProps)));
|
|
2037
1989
|
});
|
|
@@ -2052,15 +2004,15 @@ function FastboardInternal(_a) {
|
|
|
2052
2004
|
const app = useFastboardApp();
|
|
2053
2005
|
const forceUpdate = useForceUpdate();
|
|
2054
2006
|
const i18n = useAsyncValue(() => createI18n({ language }));
|
|
2055
|
-
(0,
|
|
2007
|
+
(0, import_react69.useEffect)(() => {
|
|
2056
2008
|
if (i18n)
|
|
2057
2009
|
i18n.changeLanguage(language);
|
|
2058
2010
|
forceUpdate();
|
|
2059
2011
|
}, [forceUpdate, i18n, language]);
|
|
2060
|
-
(0,
|
|
2012
|
+
(0, import_react69.useEffect)(() => {
|
|
2061
2013
|
app.manager.setPrefersColorScheme(theme);
|
|
2062
2014
|
}, [app, theme]);
|
|
2063
|
-
const useWhiteboard = (0,
|
|
2015
|
+
const useWhiteboard = (0, import_react69.useCallback)((container) => {
|
|
2064
2016
|
if (container && app)
|
|
2065
2017
|
app.manager.bindContainer(container);
|
|
2066
2018
|
}, [app]);
|
|
@@ -2072,23 +2024,33 @@ function FastboardInternal(_a) {
|
|
|
2072
2024
|
ZoomControl: zoom_control = showControls,
|
|
2073
2025
|
PageControl: page_control = showControls
|
|
2074
2026
|
} = layout;
|
|
2075
|
-
return
|
|
2027
|
+
return /* @__PURE__ */ import_react69.default.createElement(ThemeContext.Provider, {
|
|
2076
2028
|
value: theme
|
|
2077
|
-
},
|
|
2029
|
+
}, /* @__PURE__ */ import_react69.default.createElement(I18nContext.Provider, {
|
|
2078
2030
|
value: i18n
|
|
2079
|
-
},
|
|
2031
|
+
}, /* @__PURE__ */ import_react69.default.createElement("div", __spreadProps(__spreadValues({}, restProps), {
|
|
2080
2032
|
className: "fastboard-root",
|
|
2081
2033
|
ref: forwardedRef
|
|
2082
|
-
}),
|
|
2034
|
+
}), /* @__PURE__ */ import_react69.default.createElement("div", {
|
|
2083
2035
|
className: "fastboard-view",
|
|
2084
2036
|
ref: useWhiteboard
|
|
2085
|
-
}), children ? children :
|
|
2037
|
+
}), children ? children : /* @__PURE__ */ import_react69.default.createElement(import_react69.default.Fragment, null, toolbar && /* @__PURE__ */ import_react69.default.createElement("div", {
|
|
2086
2038
|
className: "fastboard-left"
|
|
2087
|
-
},
|
|
2039
|
+
}, /* @__PURE__ */ import_react69.default.createElement(Toolbar, null)), (redo_undo || zoom_control) && /* @__PURE__ */ import_react69.default.createElement("div", {
|
|
2088
2040
|
className: "fastboard-bottom-left"
|
|
2089
|
-
}, redo_undo &&
|
|
2041
|
+
}, redo_undo && /* @__PURE__ */ import_react69.default.createElement(RedoUndo, null), zoom_control && /* @__PURE__ */ import_react69.default.createElement(ZoomControl, null)), page_control && /* @__PURE__ */ import_react69.default.createElement("div", {
|
|
2090
2042
|
className: "fastboard-bottom-right"
|
|
2091
|
-
},
|
|
2043
|
+
}, /* @__PURE__ */ import_react69.default.createElement(PageControl, null))))));
|
|
2044
|
+
}
|
|
2045
|
+
|
|
2046
|
+
// src/vanilla/index.tsx
|
|
2047
|
+
var import_react70 = __toESM(require("react"));
|
|
2048
|
+
var import_react_dom = __toESM(require("react-dom"));
|
|
2049
|
+
function mount(app, dom, props) {
|
|
2050
|
+
import_react_dom.default.render(/* @__PURE__ */ import_react70.default.createElement(Fastboard, __spreadValues({
|
|
2051
|
+
app
|
|
2052
|
+
}, props)), dom);
|
|
2053
|
+
return () => import_react_dom.default.unmountComponentAtNode(dom);
|
|
2092
2054
|
}
|
|
2093
2055
|
module.exports = __toCommonJS(src_exports);
|
|
2094
2056
|
//# sourceMappingURL=index.js.map
|