@godscene/playground-electron 1.7.11
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/LICENSE +21 -0
- package/README.md +4 -0
- package/dist/es/DeviceInteractionLayer.mjs +383 -0
- package/dist/es/PlaygroundApp.css +207 -0
- package/dist/es/PlaygroundApp.mjs +776 -0
- package/dist/es/PlaygroundPreview.mjs +29 -0
- package/dist/es/PlaygroundThemeProvider.mjs +10 -0
- package/dist/es/PreviewRenderer.mjs +270 -0
- package/dist/es/ScrcpyPanel.mjs +390 -0
- package/dist/es/SessionSetupPanel.css +299 -0
- package/dist/es/SessionSetupPanel.mjs +169 -0
- package/dist/es/components/Header/index.css +19 -0
- package/dist/es/components/Header/index.mjs +37 -0
- package/dist/es/components/Nav/index.css +15 -0
- package/dist/es/components/Nav/index.mjs +93 -0
- package/dist/es/components/WinControlTool/index.css +5 -0
- package/dist/es/components/WinControlTool/index.mjs +76 -0
- package/dist/es/controller/ai-config.mjs +40 -0
- package/dist/es/controller/auto-create.mjs +19 -0
- package/dist/es/controller/selectors.mjs +78 -0
- package/dist/es/controller/single-flight.mjs +13 -0
- package/dist/es/controller/types.mjs +0 -0
- package/dist/es/controller/usePlaygroundController.mjs +400 -0
- package/dist/es/icons/dropdown-chevron.mjs +61 -0
- package/dist/es/icons/midscene-logo.mjs +247 -0
- package/dist/es/icons/server-offline-background.mjs +102 -0
- package/dist/es/icons/server-offline-foreground.mjs +200 -0
- package/dist/es/index.mjs +7 -0
- package/dist/es/manual-interaction.mjs +56 -0
- package/dist/es/panels/PlaygroundConversationPanel.css +20 -0
- package/dist/es/panels/PlaygroundConversationPanel.mjs +140 -0
- package/dist/es/runtime-info.mjs +128 -0
- package/dist/es/scrcpy-preview.mjs +30 -0
- package/dist/es/scrcpy-stream.mjs +53 -0
- package/dist/es/session-setup.mjs +13 -0
- package/dist/es/session-state.mjs +32 -0
- package/dist/es/useServerStatus.mjs +120 -0
- package/dist/lib/DeviceInteractionLayer.js +434 -0
- package/dist/lib/PlaygroundApp.css +207 -0
- package/dist/lib/PlaygroundApp.js +821 -0
- package/dist/lib/PlaygroundPreview.js +63 -0
- package/dist/lib/PlaygroundThemeProvider.js +44 -0
- package/dist/lib/PreviewRenderer.js +304 -0
- package/dist/lib/ScrcpyPanel.js +424 -0
- package/dist/lib/SessionSetupPanel.css +299 -0
- package/dist/lib/SessionSetupPanel.js +217 -0
- package/dist/lib/components/Header/index.css +19 -0
- package/dist/lib/components/Header/index.js +81 -0
- package/dist/lib/components/Nav/index.css +15 -0
- package/dist/lib/components/Nav/index.js +127 -0
- package/dist/lib/components/WinControlTool/index.css +5 -0
- package/dist/lib/components/WinControlTool/index.js +110 -0
- package/dist/lib/controller/ai-config.js +80 -0
- package/dist/lib/controller/auto-create.js +59 -0
- package/dist/lib/controller/selectors.js +115 -0
- package/dist/lib/controller/single-flight.js +47 -0
- package/dist/lib/controller/types.js +18 -0
- package/dist/lib/controller/usePlaygroundController.js +434 -0
- package/dist/lib/icons/dropdown-chevron.js +95 -0
- package/dist/lib/icons/midscene-logo.js +281 -0
- package/dist/lib/icons/server-offline-background.js +136 -0
- package/dist/lib/icons/server-offline-foreground.js +234 -0
- package/dist/lib/index.js +56 -0
- package/dist/lib/manual-interaction.js +90 -0
- package/dist/lib/panels/PlaygroundConversationPanel.css +20 -0
- package/dist/lib/panels/PlaygroundConversationPanel.js +174 -0
- package/dist/lib/runtime-info.js +174 -0
- package/dist/lib/scrcpy-preview.js +79 -0
- package/dist/lib/scrcpy-stream.js +87 -0
- package/dist/lib/session-setup.js +47 -0
- package/dist/lib/session-state.js +69 -0
- package/dist/lib/useServerStatus.js +154 -0
- package/dist/types/DeviceInteractionLayer.d.ts +50 -0
- package/dist/types/PlaygroundApp.d.ts +14 -0
- package/dist/types/PlaygroundPreview.d.ts +22 -0
- package/dist/types/PlaygroundThemeProvider.d.ts +2 -0
- package/dist/types/PreviewRenderer.d.ts +27 -0
- package/dist/types/ScrcpyPanel.d.ts +21 -0
- package/dist/types/SessionSetupPanel.d.ts +16 -0
- package/dist/types/components/Header/index.d.ts +3 -0
- package/dist/types/components/Nav/index.d.ts +3 -0
- package/dist/types/components/WinControlTool/index.d.ts +3 -0
- package/dist/types/controller/ai-config.d.ts +5 -0
- package/dist/types/controller/auto-create.d.ts +15 -0
- package/dist/types/controller/selectors.d.ts +5 -0
- package/dist/types/controller/single-flight.d.ts +3 -0
- package/dist/types/controller/types.d.ts +36 -0
- package/dist/types/controller/usePlaygroundController.d.ts +16 -0
- package/dist/types/index.d.ts +13 -0
- package/dist/types/manual-interaction.d.ts +21 -0
- package/dist/types/panels/PlaygroundConversationPanel.d.ts +25 -0
- package/dist/types/runtime-info.d.ts +22 -0
- package/dist/types/scrcpy-preview.d.ts +11 -0
- package/dist/types/scrcpy-stream.d.ts +16 -0
- package/dist/types/session-setup.d.ts +2 -0
- package/dist/types/session-state.d.ts +9 -0
- package/dist/types/useServerStatus.d.ts +12 -0
- package/package.json +69 -0
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
function resolveSessionViewState(runtimeInfo) {
|
|
2
|
+
const metadata = (null == runtimeInfo ? void 0 : runtimeInfo.metadata) || {};
|
|
3
|
+
const rawSetupState = metadata.setupState;
|
|
4
|
+
const setupState = 'blocked' === rawSetupState || 'ready' === rawSetupState || 'required' === rawSetupState ? rawSetupState : 'ready';
|
|
5
|
+
return {
|
|
6
|
+
connected: Boolean(metadata.sessionConnected),
|
|
7
|
+
displayName: 'string' == typeof metadata.sessionDisplayName ? metadata.sessionDisplayName : void 0,
|
|
8
|
+
setupState,
|
|
9
|
+
setupBlockingReason: 'string' == typeof metadata.setupBlockingReason ? metadata.setupBlockingReason : void 0
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
function buildSessionInitialValues(setup, existingValues = {}) {
|
|
13
|
+
if (!setup) return {};
|
|
14
|
+
return Object.fromEntries(setup.fields.map((field)=>[
|
|
15
|
+
field.key,
|
|
16
|
+
resolveSessionFieldValue(field, existingValues[field.key])
|
|
17
|
+
]));
|
|
18
|
+
}
|
|
19
|
+
function hasSessionFieldValue(value) {
|
|
20
|
+
return null != value && '' !== value;
|
|
21
|
+
}
|
|
22
|
+
function resolveSessionFieldValue(field, existingValue) {
|
|
23
|
+
var _ref;
|
|
24
|
+
if (hasSessionFieldValue(existingValue)) return existingValue;
|
|
25
|
+
if ('select' === field.type) {
|
|
26
|
+
var _ref1, _field_defaultValue;
|
|
27
|
+
var _field_options_, _field_options;
|
|
28
|
+
return null != (_ref1 = null != (_field_defaultValue = field.defaultValue) ? _field_defaultValue : null == (_field_options = field.options) ? void 0 : null == (_field_options_ = _field_options[0]) ? void 0 : _field_options_.value) ? _ref1 : '';
|
|
29
|
+
}
|
|
30
|
+
return null != (_ref = null != existingValue ? existingValue : field.defaultValue) ? _ref : '';
|
|
31
|
+
}
|
|
32
|
+
export { buildSessionInitialValues, resolveSessionViewState };
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
2
|
+
import { buildFallbackRuntimeInfo, filterValidExecutionUxHints, normalizeRuntimeDeviceType } from "./runtime-info.mjs";
|
|
3
|
+
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
|
|
4
|
+
try {
|
|
5
|
+
var info = gen[key](arg);
|
|
6
|
+
var value = info.value;
|
|
7
|
+
} catch (error) {
|
|
8
|
+
reject(error);
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
if (info.done) resolve(value);
|
|
12
|
+
else Promise.resolve(value).then(_next, _throw);
|
|
13
|
+
}
|
|
14
|
+
function _async_to_generator(fn) {
|
|
15
|
+
return function() {
|
|
16
|
+
var self = this, args = arguments;
|
|
17
|
+
return new Promise(function(resolve, reject) {
|
|
18
|
+
var gen = fn.apply(self, args);
|
|
19
|
+
function _next(value) {
|
|
20
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
|
|
21
|
+
}
|
|
22
|
+
function _throw(err) {
|
|
23
|
+
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
|
|
24
|
+
}
|
|
25
|
+
_next(void 0);
|
|
26
|
+
});
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
function useServerStatus(playgroundSDK, defaultDeviceType, pollIntervalMs) {
|
|
30
|
+
const [serverOnline, setServerOnline] = useState(false);
|
|
31
|
+
const [isUserOperating, setIsUserOperating] = useState(false);
|
|
32
|
+
const [deviceType, setDeviceType] = useState(defaultDeviceType);
|
|
33
|
+
const [runtimeInfo, setRuntimeInfo] = useState(null);
|
|
34
|
+
const [executionUxHints, setExecutionUxHints] = useState([]);
|
|
35
|
+
const runtimeInfoRef = useRef(null);
|
|
36
|
+
const mountedRef = useRef(true);
|
|
37
|
+
useEffect(()=>{
|
|
38
|
+
mountedRef.current = true;
|
|
39
|
+
return ()=>{
|
|
40
|
+
mountedRef.current = false;
|
|
41
|
+
};
|
|
42
|
+
}, []);
|
|
43
|
+
useEffect(()=>{
|
|
44
|
+
runtimeInfoRef.current = runtimeInfo;
|
|
45
|
+
}, [
|
|
46
|
+
runtimeInfo
|
|
47
|
+
]);
|
|
48
|
+
useEffect(()=>{
|
|
49
|
+
playgroundSDK.onProgressUpdate((tip)=>{
|
|
50
|
+
setIsUserOperating(Boolean(tip));
|
|
51
|
+
});
|
|
52
|
+
}, [
|
|
53
|
+
playgroundSDK
|
|
54
|
+
]);
|
|
55
|
+
const refreshServerState = useCallback(()=>_async_to_generator(function*() {
|
|
56
|
+
try {
|
|
57
|
+
const online = yield playgroundSDK.checkStatus();
|
|
58
|
+
if (!mountedRef.current) return;
|
|
59
|
+
setServerOnline(online);
|
|
60
|
+
if (!online) {
|
|
61
|
+
runtimeInfoRef.current = null;
|
|
62
|
+
setRuntimeInfo(null);
|
|
63
|
+
setExecutionUxHints([]);
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
try {
|
|
67
|
+
const nextRuntimeInfo = yield playgroundSDK.getRuntimeInfo();
|
|
68
|
+
if (!mountedRef.current) return;
|
|
69
|
+
if (nextRuntimeInfo) {
|
|
70
|
+
runtimeInfoRef.current = nextRuntimeInfo;
|
|
71
|
+
setRuntimeInfo(nextRuntimeInfo);
|
|
72
|
+
setDeviceType(normalizeRuntimeDeviceType(nextRuntimeInfo, defaultDeviceType));
|
|
73
|
+
setExecutionUxHints(filterValidExecutionUxHints(nextRuntimeInfo));
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
} catch (error) {
|
|
77
|
+
console.warn('Failed to get runtime info:', error);
|
|
78
|
+
}
|
|
79
|
+
try {
|
|
80
|
+
const interfaceInfo = yield playgroundSDK.getInterfaceInfo();
|
|
81
|
+
if (!mountedRef.current || !(null == interfaceInfo ? void 0 : interfaceInfo.type)) return;
|
|
82
|
+
const fallbackRuntimeInfo = buildFallbackRuntimeInfo(runtimeInfoRef.current, interfaceInfo);
|
|
83
|
+
runtimeInfoRef.current = fallbackRuntimeInfo;
|
|
84
|
+
setRuntimeInfo(fallbackRuntimeInfo);
|
|
85
|
+
setDeviceType(normalizeRuntimeDeviceType(fallbackRuntimeInfo, defaultDeviceType));
|
|
86
|
+
setExecutionUxHints(filterValidExecutionUxHints(fallbackRuntimeInfo));
|
|
87
|
+
} catch (error) {
|
|
88
|
+
console.warn('Failed to get interface info:', error);
|
|
89
|
+
}
|
|
90
|
+
} catch (error) {
|
|
91
|
+
if (!mountedRef.current) return;
|
|
92
|
+
console.error('Failed to check server status:', error);
|
|
93
|
+
setServerOnline(false);
|
|
94
|
+
}
|
|
95
|
+
})(), [
|
|
96
|
+
defaultDeviceType,
|
|
97
|
+
playgroundSDK
|
|
98
|
+
]);
|
|
99
|
+
useEffect(()=>{
|
|
100
|
+
refreshServerState();
|
|
101
|
+
const interval = window.setInterval(()=>{
|
|
102
|
+
refreshServerState();
|
|
103
|
+
}, pollIntervalMs);
|
|
104
|
+
return ()=>{
|
|
105
|
+
window.clearInterval(interval);
|
|
106
|
+
};
|
|
107
|
+
}, [
|
|
108
|
+
pollIntervalMs,
|
|
109
|
+
refreshServerState
|
|
110
|
+
]);
|
|
111
|
+
return {
|
|
112
|
+
serverOnline,
|
|
113
|
+
isUserOperating,
|
|
114
|
+
deviceType,
|
|
115
|
+
runtimeInfo,
|
|
116
|
+
executionUxHints,
|
|
117
|
+
refreshServerState
|
|
118
|
+
};
|
|
119
|
+
}
|
|
120
|
+
export { useServerStatus };
|
|
@@ -0,0 +1,434 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.n = (module)=>{
|
|
5
|
+
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
|
|
6
|
+
__webpack_require__.d(getter, {
|
|
7
|
+
a: getter
|
|
8
|
+
});
|
|
9
|
+
return getter;
|
|
10
|
+
};
|
|
11
|
+
})();
|
|
12
|
+
(()=>{
|
|
13
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
14
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: definition[key]
|
|
17
|
+
});
|
|
18
|
+
};
|
|
19
|
+
})();
|
|
20
|
+
(()=>{
|
|
21
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
22
|
+
})();
|
|
23
|
+
(()=>{
|
|
24
|
+
__webpack_require__.r = (exports1)=>{
|
|
25
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
26
|
+
value: 'Module'
|
|
27
|
+
});
|
|
28
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
29
|
+
value: true
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
})();
|
|
33
|
+
var __webpack_exports__ = {};
|
|
34
|
+
__webpack_require__.r(__webpack_exports__);
|
|
35
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
36
|
+
keyNameForKeyboardEvent: ()=>keyNameForKeyboardEvent,
|
|
37
|
+
inscribedContentRect: ()=>inscribedContentRect,
|
|
38
|
+
DeviceInteractionLayer: ()=>DeviceInteractionLayer
|
|
39
|
+
});
|
|
40
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
41
|
+
const external_react_namespaceObject = require("react");
|
|
42
|
+
var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
|
|
43
|
+
function _define_property(obj, key, value) {
|
|
44
|
+
if (key in obj) Object.defineProperty(obj, key, {
|
|
45
|
+
value: value,
|
|
46
|
+
enumerable: true,
|
|
47
|
+
configurable: true,
|
|
48
|
+
writable: true
|
|
49
|
+
});
|
|
50
|
+
else obj[key] = value;
|
|
51
|
+
return obj;
|
|
52
|
+
}
|
|
53
|
+
function _object_spread(target) {
|
|
54
|
+
for(var i = 1; i < arguments.length; i++){
|
|
55
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
|
56
|
+
var ownKeys = Object.keys(source);
|
|
57
|
+
if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
|
|
58
|
+
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
|
|
59
|
+
}));
|
|
60
|
+
ownKeys.forEach(function(key) {
|
|
61
|
+
_define_property(target, key, source[key]);
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
return target;
|
|
65
|
+
}
|
|
66
|
+
external_react_default();
|
|
67
|
+
const keyboardControlKeys = new Set([
|
|
68
|
+
'Backspace',
|
|
69
|
+
'Delete',
|
|
70
|
+
'Enter',
|
|
71
|
+
'Tab',
|
|
72
|
+
'Escape',
|
|
73
|
+
'ArrowLeft',
|
|
74
|
+
'ArrowRight',
|
|
75
|
+
'ArrowUp',
|
|
76
|
+
'ArrowDown',
|
|
77
|
+
'Home',
|
|
78
|
+
'End',
|
|
79
|
+
'PageUp',
|
|
80
|
+
'PageDown'
|
|
81
|
+
]);
|
|
82
|
+
const pureModifierKeys = new Set([
|
|
83
|
+
'Alt',
|
|
84
|
+
'Control',
|
|
85
|
+
'Meta',
|
|
86
|
+
'Shift'
|
|
87
|
+
]);
|
|
88
|
+
function isHostCopyShortcut(event) {
|
|
89
|
+
return !event.altKey && (event.metaKey || event.ctrlKey) && 'c' === event.key.toLowerCase();
|
|
90
|
+
}
|
|
91
|
+
function isHostReservedShortcut(event) {
|
|
92
|
+
if ('F5' === event.key || 'F11' === event.key || 'F12' === event.key) return true;
|
|
93
|
+
const hasPrimaryModifier = event.metaKey || event.ctrlKey;
|
|
94
|
+
if (!hasPrimaryModifier) return false;
|
|
95
|
+
const lowerKey = event.key.toLowerCase();
|
|
96
|
+
if (event.altKey && 'i' === lowerKey) return true;
|
|
97
|
+
if (event.shiftKey && ('i' === lowerKey || 'j' === lowerKey)) return true;
|
|
98
|
+
const hostReservedKeys = new Set([
|
|
99
|
+
'r',
|
|
100
|
+
'q',
|
|
101
|
+
'w',
|
|
102
|
+
'm',
|
|
103
|
+
'h',
|
|
104
|
+
'n',
|
|
105
|
+
't',
|
|
106
|
+
'+',
|
|
107
|
+
'=',
|
|
108
|
+
'-',
|
|
109
|
+
'_',
|
|
110
|
+
'0'
|
|
111
|
+
]);
|
|
112
|
+
return hostReservedKeys.has(lowerKey);
|
|
113
|
+
}
|
|
114
|
+
function hasHostSelectionOutsideOverlay(overlay) {
|
|
115
|
+
const selection = window.getSelection();
|
|
116
|
+
if (!selection || selection.isCollapsed || !overlay) return false;
|
|
117
|
+
const { anchorNode, focusNode } = selection;
|
|
118
|
+
if (!anchorNode || !focusNode) return false;
|
|
119
|
+
return !overlay.contains(anchorNode) && !overlay.contains(focusNode);
|
|
120
|
+
}
|
|
121
|
+
function keyNameForKeyboardEvent(event) {
|
|
122
|
+
if (pureModifierKeys.has(event.key)) return null;
|
|
123
|
+
const parts = [];
|
|
124
|
+
if (event.ctrlKey) parts.push('Control');
|
|
125
|
+
if (event.metaKey) parts.push('Meta');
|
|
126
|
+
if (event.altKey) parts.push('Alt');
|
|
127
|
+
if (event.shiftKey && 'Shift' !== event.key) parts.push('Shift');
|
|
128
|
+
parts.push(' ' === event.key ? 'Space' : event.key);
|
|
129
|
+
return parts.join('+');
|
|
130
|
+
}
|
|
131
|
+
function inscribedContentRect(panel, deviceSize) {
|
|
132
|
+
const aspect = deviceSize.width / deviceSize.height;
|
|
133
|
+
if (panel.height <= 0 || panel.width <= 0) return panel;
|
|
134
|
+
if (panel.width / panel.height > aspect) {
|
|
135
|
+
const renderedWidth = panel.height * aspect;
|
|
136
|
+
return {
|
|
137
|
+
left: panel.left + (panel.width - renderedWidth) / 2,
|
|
138
|
+
top: panel.top,
|
|
139
|
+
width: renderedWidth,
|
|
140
|
+
height: panel.height
|
|
141
|
+
};
|
|
142
|
+
}
|
|
143
|
+
const renderedHeight = panel.width / aspect;
|
|
144
|
+
return {
|
|
145
|
+
left: panel.left,
|
|
146
|
+
top: panel.top + (panel.height - renderedHeight) / 2,
|
|
147
|
+
width: panel.width,
|
|
148
|
+
height: renderedHeight
|
|
149
|
+
};
|
|
150
|
+
}
|
|
151
|
+
function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, keyboardEnabled = false, onTextInput, onKeyboardPress, tapMaxDistance = 8, tapMaxDurationMs = 250, style }) {
|
|
152
|
+
const overlayRef = (0, external_react_namespaceObject.useRef)(null);
|
|
153
|
+
const keyboardSinkRef = (0, external_react_namespaceObject.useRef)(null);
|
|
154
|
+
const activePointer = (0, external_react_namespaceObject.useRef)(null);
|
|
155
|
+
const composingRef = (0, external_react_namespaceObject.useRef)(false);
|
|
156
|
+
const keyboardArmedRef = (0, external_react_namespaceObject.useRef)(false);
|
|
157
|
+
const lastKeyboardPointRef = (0, external_react_namespaceObject.useRef)(null);
|
|
158
|
+
const focusKeyboardSink = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
159
|
+
if (keyboardEnabled) {
|
|
160
|
+
var _keyboardSinkRef_current;
|
|
161
|
+
keyboardArmedRef.current = true;
|
|
162
|
+
null == (_keyboardSinkRef_current = keyboardSinkRef.current) || _keyboardSinkRef_current.focus({
|
|
163
|
+
preventScroll: true
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
}, [
|
|
167
|
+
keyboardEnabled
|
|
168
|
+
]);
|
|
169
|
+
const positionKeyboardSink = (0, external_react_namespaceObject.useCallback)((clientX, clientY)=>{
|
|
170
|
+
const overlay = overlayRef.current;
|
|
171
|
+
const sink = keyboardSinkRef.current;
|
|
172
|
+
if (!overlay || !sink) return;
|
|
173
|
+
const rect = overlay.getBoundingClientRect();
|
|
174
|
+
sink.style.left = `${Math.max(0, clientX - rect.left)}px`;
|
|
175
|
+
sink.style.top = `${Math.max(0, clientY - rect.top)}px`;
|
|
176
|
+
}, []);
|
|
177
|
+
const projectToDevice = (0, external_react_namespaceObject.useCallback)((clientX, clientY, contentRect)=>{
|
|
178
|
+
if (!deviceSize) return null;
|
|
179
|
+
const ratioX = (clientX - contentRect.left) / contentRect.width;
|
|
180
|
+
const ratioY = (clientY - contentRect.top) / contentRect.height;
|
|
181
|
+
const x = Math.max(0, Math.min(deviceSize.width - 1, Math.round(ratioX * deviceSize.width)));
|
|
182
|
+
const y = Math.max(0, Math.min(deviceSize.height - 1, Math.round(ratioY * deviceSize.height)));
|
|
183
|
+
return {
|
|
184
|
+
x,
|
|
185
|
+
y
|
|
186
|
+
};
|
|
187
|
+
}, [
|
|
188
|
+
deviceSize
|
|
189
|
+
]);
|
|
190
|
+
const handlePointerDown = (0, external_react_namespaceObject.useCallback)((event)=>{
|
|
191
|
+
if (!enabled || !deviceSize || !overlayRef.current) return;
|
|
192
|
+
if (0 !== event.button && 'mouse' === event.pointerType) return;
|
|
193
|
+
const panelRect = overlayRef.current.getBoundingClientRect();
|
|
194
|
+
const contentRect = inscribedContentRect(panelRect, deviceSize);
|
|
195
|
+
if (event.clientX < contentRect.left || event.clientX > contentRect.left + contentRect.width || event.clientY < contentRect.top || event.clientY > contentRect.top + contentRect.height) {
|
|
196
|
+
keyboardArmedRef.current = false;
|
|
197
|
+
return;
|
|
198
|
+
}
|
|
199
|
+
positionKeyboardSink(event.clientX, event.clientY);
|
|
200
|
+
focusKeyboardSink();
|
|
201
|
+
try {
|
|
202
|
+
overlayRef.current.setPointerCapture(event.pointerId);
|
|
203
|
+
} catch (unused) {}
|
|
204
|
+
activePointer.current = {
|
|
205
|
+
startX: event.clientX,
|
|
206
|
+
startY: event.clientY,
|
|
207
|
+
startTime: performance.now(),
|
|
208
|
+
contentRect
|
|
209
|
+
};
|
|
210
|
+
event.preventDefault();
|
|
211
|
+
}, [
|
|
212
|
+
enabled,
|
|
213
|
+
deviceSize,
|
|
214
|
+
focusKeyboardSink,
|
|
215
|
+
positionKeyboardSink
|
|
216
|
+
]);
|
|
217
|
+
const finishPointer = (0, external_react_namespaceObject.useCallback)((event, cancelled)=>{
|
|
218
|
+
const active = activePointer.current;
|
|
219
|
+
activePointer.current = null;
|
|
220
|
+
if (!active) return;
|
|
221
|
+
try {
|
|
222
|
+
var _overlayRef_current;
|
|
223
|
+
null == (_overlayRef_current = overlayRef.current) || _overlayRef_current.releasePointerCapture(event.pointerId);
|
|
224
|
+
} catch (unused) {}
|
|
225
|
+
if (cancelled) return;
|
|
226
|
+
const dx = event.clientX - active.startX;
|
|
227
|
+
const dy = event.clientY - active.startY;
|
|
228
|
+
const distance = Math.sqrt(dx * dx + dy * dy);
|
|
229
|
+
const duration = Math.max(0, performance.now() - active.startTime);
|
|
230
|
+
const startPoint = projectToDevice(active.startX, active.startY, active.contentRect);
|
|
231
|
+
const endPoint = projectToDevice(event.clientX, event.clientY, active.contentRect);
|
|
232
|
+
if (!startPoint || !endPoint) return;
|
|
233
|
+
lastKeyboardPointRef.current = endPoint;
|
|
234
|
+
if (distance <= tapMaxDistance && duration <= tapMaxDurationMs) null == onTap || onTap(startPoint);
|
|
235
|
+
else null == onSwipe || onSwipe(startPoint, endPoint, Math.round(duration));
|
|
236
|
+
}, [
|
|
237
|
+
onTap,
|
|
238
|
+
onSwipe,
|
|
239
|
+
projectToDevice,
|
|
240
|
+
tapMaxDistance,
|
|
241
|
+
tapMaxDurationMs
|
|
242
|
+
]);
|
|
243
|
+
const handlePointerUp = (0, external_react_namespaceObject.useCallback)((event)=>finishPointer(event, false), [
|
|
244
|
+
finishPointer
|
|
245
|
+
]);
|
|
246
|
+
const handlePointerCancel = (0, external_react_namespaceObject.useCallback)((event)=>finishPointer(event, true), [
|
|
247
|
+
finishPointer
|
|
248
|
+
]);
|
|
249
|
+
const clearLocalEditableText = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
250
|
+
var _keyboardSinkRef_current;
|
|
251
|
+
if (null == (_keyboardSinkRef_current = keyboardSinkRef.current) ? void 0 : _keyboardSinkRef_current.value) keyboardSinkRef.current.value = '';
|
|
252
|
+
}, []);
|
|
253
|
+
const handleKeyboardEvent = (0, external_react_namespaceObject.useCallback)((event)=>{
|
|
254
|
+
if (!keyboardEnabled || !keyboardArmedRef.current) return;
|
|
255
|
+
if (isHostCopyShortcut(event) && hasHostSelectionOutsideOverlay(overlayRef.current)) {
|
|
256
|
+
keyboardArmedRef.current = false;
|
|
257
|
+
return;
|
|
258
|
+
}
|
|
259
|
+
if (composingRef.current || event.isComposing) return;
|
|
260
|
+
if (isHostReservedShortcut(event)) return;
|
|
261
|
+
if (keyboardControlKeys.has(event.key) || event.altKey || event.ctrlKey || event.metaKey) {
|
|
262
|
+
var _lastKeyboardPointRef_current;
|
|
263
|
+
const keyName = keyNameForKeyboardEvent(event);
|
|
264
|
+
if (!keyName) return;
|
|
265
|
+
event.preventDefault();
|
|
266
|
+
event.stopPropagation();
|
|
267
|
+
null == onKeyboardPress || onKeyboardPress(keyName, null != (_lastKeyboardPointRef_current = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current : void 0);
|
|
268
|
+
}
|
|
269
|
+
}, [
|
|
270
|
+
keyboardEnabled,
|
|
271
|
+
onKeyboardPress
|
|
272
|
+
]);
|
|
273
|
+
const handlePaste = (0, external_react_namespaceObject.useCallback)((event)=>{
|
|
274
|
+
var _lastKeyboardPointRef_current;
|
|
275
|
+
if (!keyboardEnabled || !keyboardArmedRef.current) return;
|
|
276
|
+
const text = event.clipboardData.getData('text');
|
|
277
|
+
if (!text) return;
|
|
278
|
+
event.preventDefault();
|
|
279
|
+
event.stopPropagation();
|
|
280
|
+
null == onTextInput || onTextInput(text, null != (_lastKeyboardPointRef_current = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current : void 0);
|
|
281
|
+
}, [
|
|
282
|
+
keyboardEnabled,
|
|
283
|
+
onTextInput
|
|
284
|
+
]);
|
|
285
|
+
const handleEditableInput = (0, external_react_namespaceObject.useCallback)((event)=>{
|
|
286
|
+
var _lastKeyboardPointRef_current;
|
|
287
|
+
var _keyboardSinkRef_current;
|
|
288
|
+
if (!keyboardEnabled || !keyboardArmedRef.current) {
|
|
289
|
+
if (!composingRef.current) clearLocalEditableText();
|
|
290
|
+
return;
|
|
291
|
+
}
|
|
292
|
+
if (composingRef.current) return;
|
|
293
|
+
const nativeEvent = event.nativeEvent;
|
|
294
|
+
if ('insertLineBreak' === nativeEvent.inputType) {
|
|
295
|
+
var _lastKeyboardPointRef_current1;
|
|
296
|
+
clearLocalEditableText();
|
|
297
|
+
event.preventDefault();
|
|
298
|
+
event.stopPropagation();
|
|
299
|
+
null == onKeyboardPress || onKeyboardPress('Enter', null != (_lastKeyboardPointRef_current1 = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current1 : void 0);
|
|
300
|
+
return;
|
|
301
|
+
}
|
|
302
|
+
if ('deleteContentBackward' === nativeEvent.inputType) {
|
|
303
|
+
var _lastKeyboardPointRef_current2;
|
|
304
|
+
clearLocalEditableText();
|
|
305
|
+
event.preventDefault();
|
|
306
|
+
event.stopPropagation();
|
|
307
|
+
null == onKeyboardPress || onKeyboardPress('Backspace', null != (_lastKeyboardPointRef_current2 = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current2 : void 0);
|
|
308
|
+
return;
|
|
309
|
+
}
|
|
310
|
+
if ('deleteContentForward' === nativeEvent.inputType) {
|
|
311
|
+
var _lastKeyboardPointRef_current3;
|
|
312
|
+
clearLocalEditableText();
|
|
313
|
+
event.preventDefault();
|
|
314
|
+
event.stopPropagation();
|
|
315
|
+
null == onKeyboardPress || onKeyboardPress('Delete', null != (_lastKeyboardPointRef_current3 = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current3 : void 0);
|
|
316
|
+
return;
|
|
317
|
+
}
|
|
318
|
+
const text = nativeEvent.data || (null == (_keyboardSinkRef_current = keyboardSinkRef.current) ? void 0 : _keyboardSinkRef_current.value) || '';
|
|
319
|
+
clearLocalEditableText();
|
|
320
|
+
if (!text) return;
|
|
321
|
+
event.preventDefault();
|
|
322
|
+
event.stopPropagation();
|
|
323
|
+
null == onTextInput || onTextInput(text, null != (_lastKeyboardPointRef_current = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current : void 0);
|
|
324
|
+
}, [
|
|
325
|
+
clearLocalEditableText,
|
|
326
|
+
keyboardEnabled,
|
|
327
|
+
onKeyboardPress,
|
|
328
|
+
onTextInput
|
|
329
|
+
]);
|
|
330
|
+
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
331
|
+
if (!enabled) {
|
|
332
|
+
activePointer.current = null;
|
|
333
|
+
composingRef.current = false;
|
|
334
|
+
keyboardArmedRef.current = false;
|
|
335
|
+
lastKeyboardPointRef.current = null;
|
|
336
|
+
}
|
|
337
|
+
}, [
|
|
338
|
+
enabled
|
|
339
|
+
]);
|
|
340
|
+
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
341
|
+
if (!enabled || !keyboardEnabled) {
|
|
342
|
+
keyboardArmedRef.current = false;
|
|
343
|
+
return;
|
|
344
|
+
}
|
|
345
|
+
const handleDocumentPointerDown = (event)=>{
|
|
346
|
+
const overlay = overlayRef.current;
|
|
347
|
+
if (overlay && event.target instanceof Node && overlay.contains(event.target)) return;
|
|
348
|
+
keyboardArmedRef.current = false;
|
|
349
|
+
};
|
|
350
|
+
window.addEventListener('keydown', handleKeyboardEvent, true);
|
|
351
|
+
window.addEventListener('pointerdown', handleDocumentPointerDown, true);
|
|
352
|
+
return ()=>{
|
|
353
|
+
window.removeEventListener('keydown', handleKeyboardEvent, true);
|
|
354
|
+
window.removeEventListener('pointerdown', handleDocumentPointerDown, true);
|
|
355
|
+
};
|
|
356
|
+
}, [
|
|
357
|
+
enabled,
|
|
358
|
+
handleKeyboardEvent,
|
|
359
|
+
keyboardEnabled
|
|
360
|
+
]);
|
|
361
|
+
if (!enabled || !deviceSize) return null;
|
|
362
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
363
|
+
ref: overlayRef,
|
|
364
|
+
onPointerDown: handlePointerDown,
|
|
365
|
+
onPointerUp: handlePointerUp,
|
|
366
|
+
onPointerCancel: handlePointerCancel,
|
|
367
|
+
onContextMenu: (e)=>e.preventDefault(),
|
|
368
|
+
"data-midscene-device-interaction-layer": "true",
|
|
369
|
+
style: _object_spread({
|
|
370
|
+
position: 'absolute',
|
|
371
|
+
inset: 0,
|
|
372
|
+
zIndex: 5,
|
|
373
|
+
cursor: keyboardEnabled ? 'default' : 'crosshair',
|
|
374
|
+
outline: 'none',
|
|
375
|
+
color: 'transparent',
|
|
376
|
+
caretColor: 'transparent',
|
|
377
|
+
touchAction: 'none',
|
|
378
|
+
userSelect: 'none'
|
|
379
|
+
}, style),
|
|
380
|
+
children: keyboardEnabled ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
|
|
381
|
+
ref: keyboardSinkRef,
|
|
382
|
+
"data-midscene-keyboard-sink": "true",
|
|
383
|
+
tabIndex: -1,
|
|
384
|
+
onPaste: handlePaste,
|
|
385
|
+
onCompositionStart: ()=>{
|
|
386
|
+
keyboardArmedRef.current = true;
|
|
387
|
+
composingRef.current = true;
|
|
388
|
+
},
|
|
389
|
+
onCompositionEnd: (event)=>{
|
|
390
|
+
var _keyboardSinkRef_current;
|
|
391
|
+
if (!keyboardEnabled || !keyboardArmedRef.current) return;
|
|
392
|
+
composingRef.current = false;
|
|
393
|
+
const text = event.data || (null == (_keyboardSinkRef_current = keyboardSinkRef.current) ? void 0 : _keyboardSinkRef_current.value) || '';
|
|
394
|
+
clearLocalEditableText();
|
|
395
|
+
if (text) {
|
|
396
|
+
var _lastKeyboardPointRef_current;
|
|
397
|
+
null == onTextInput || onTextInput(text, null != (_lastKeyboardPointRef_current = lastKeyboardPointRef.current) ? _lastKeyboardPointRef_current : void 0);
|
|
398
|
+
}
|
|
399
|
+
},
|
|
400
|
+
onInput: handleEditableInput,
|
|
401
|
+
style: {
|
|
402
|
+
position: 'absolute',
|
|
403
|
+
left: 0,
|
|
404
|
+
top: 0,
|
|
405
|
+
width: 32,
|
|
406
|
+
height: 24,
|
|
407
|
+
opacity: 0.01,
|
|
408
|
+
pointerEvents: 'none',
|
|
409
|
+
resize: 'none',
|
|
410
|
+
border: 0,
|
|
411
|
+
padding: 0,
|
|
412
|
+
margin: 0,
|
|
413
|
+
outline: 'none',
|
|
414
|
+
background: 'transparent',
|
|
415
|
+
color: 'transparent',
|
|
416
|
+
caretColor: 'transparent',
|
|
417
|
+
fontSize: 16,
|
|
418
|
+
lineHeight: '20px',
|
|
419
|
+
transform: 'translate(-50%, -50%)'
|
|
420
|
+
}
|
|
421
|
+
}) : null
|
|
422
|
+
});
|
|
423
|
+
}
|
|
424
|
+
exports.DeviceInteractionLayer = __webpack_exports__.DeviceInteractionLayer;
|
|
425
|
+
exports.inscribedContentRect = __webpack_exports__.inscribedContentRect;
|
|
426
|
+
exports.keyNameForKeyboardEvent = __webpack_exports__.keyNameForKeyboardEvent;
|
|
427
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
428
|
+
"DeviceInteractionLayer",
|
|
429
|
+
"inscribedContentRect",
|
|
430
|
+
"keyNameForKeyboardEvent"
|
|
431
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
432
|
+
Object.defineProperty(exports, '__esModule', {
|
|
433
|
+
value: true
|
|
434
|
+
});
|