mirror of
https://github.com/kunkundi/crossdesk.git
synced 2026-10-28 00:33:06 +08:00
371 lines
26 KiB
Plaintext
371 lines
26 KiB
Plaintext
import { MobileController, MobileState } from './MobileController';
|
||
import { RemoteViewport, MouseInput, TouchInput, TouchPoint, clamp, NetworkStatistics, Traffic, asciiKey } from './ControllerModels';
|
||
import { MobileTheme, MobileSegment, MobileIcon, MobileIconButton } from './MobileWidgets';
|
||
|
||
interface KeyRow { keys: string[]; }
|
||
@Component
|
||
export struct MobileRemoteView {
|
||
@ObjectLink @Watch('stateChanged') state: MobileState;
|
||
controller?: MobileController;
|
||
@State private viewWidth: number = 1;
|
||
@State private viewHeight: number = 1;
|
||
@State private videoWidth: number = 1;
|
||
@State private videoHeight: number = 1;
|
||
@State private videoLeft: number = 0;
|
||
@State private videoTop: number = 0;
|
||
@State private zoom: number = 1;
|
||
@State private cursorX: number = 0;
|
||
@State private cursorY: number = 0;
|
||
@State private orbX: number = 12;
|
||
@State private orbY: number = 100;
|
||
@State private menu: string = '';
|
||
@State private menuHeight: number = 390;
|
||
@State private keyboardHeight: number = 220;
|
||
private orbPositioned: boolean = false;
|
||
@State private keyboard: boolean = false;
|
||
@State private computerKeyboard: boolean = false;
|
||
@State private shift: boolean = false;
|
||
@State private modifiers: number[] = [];
|
||
@State private keyboardX: number = 8;
|
||
@State private keyboardY: number = 150;
|
||
@State private mouseVisible: boolean = false;
|
||
@State private leftHeld: boolean = false;
|
||
@State private rightHeld: boolean = false;
|
||
@State private wheelOffset: number = 0;
|
||
private surface: XComponentController = new XComponentController();
|
||
private viewport: RemoteViewport = new RemoteViewport();
|
||
private mouse: MouseInput = new MouseInput((x: number, y: number, flag: number, scroll: number) => {
|
||
this.controller?.pointer(x, y, flag, scroll); this.updateCursor();
|
||
});
|
||
private touches: TouchInput = new TouchInput(this.viewport, this.mouse);
|
||
private longTimer: number = -1;
|
||
private lastReset: number = -1;
|
||
private lastWidth: number = 0;
|
||
private lastHeight: number = 0;
|
||
private lastRelative: boolean = true;
|
||
private orbStartX: number = 0;
|
||
private orbStartY: number = 0;
|
||
private originX: number = 0;
|
||
private originY: number = 0;
|
||
private orbMoved: boolean = false;
|
||
private barX: number = 0;
|
||
private barY: number = 0;
|
||
private wheelY: number = 0;
|
||
private wheelLast: number = 0;
|
||
private keyboardOriginX: number = 0;
|
||
private keyboardOriginY: number = 0;
|
||
aboutToAppear(): void { if (this.controller) this.controller.releaseInput = () => this.release(); this.stateChanged(); }
|
||
aboutToDisappear(): void { this.release(); if (this.controller) this.controller.releaseInput = () => {}; this.controller?.surface('0'); }
|
||
private stateChanged(): void {
|
||
if (this.lastReset !== this.state.viewportReset || this.lastRelative !== this.state.relative) {
|
||
this.release();
|
||
if (this.lastReset !== this.state.viewportReset) { this.viewport.reset(); this.applyViewport(); }
|
||
this.lastReset = this.state.viewportReset; this.lastRelative = this.state.relative;
|
||
}
|
||
this.touches.relative = this.state.relative;
|
||
if (this.lastWidth !== this.state.width || this.lastHeight !== this.state.height) {
|
||
this.lastWidth = this.state.width; this.lastHeight = this.state.height; this.fit();
|
||
}
|
||
}
|
||
private release(): void {
|
||
this.touches.cancel(); this.leftHeld = this.rightHeld = false; this.modifiers = []; this.wheelOffset = 0;
|
||
if (this.longTimer >= 0) clearTimeout(this.longTimer); this.longTimer = -1;
|
||
}
|
||
private fit(): void { this.viewport.fit(this.viewWidth, this.viewHeight, this.state.width, this.state.height); this.applyViewport(); }
|
||
private applyViewport(): void {
|
||
this.videoWidth = this.viewport.baseWidth; this.videoHeight = this.viewport.baseHeight; this.zoom = this.viewport.scale;
|
||
this.videoLeft = this.viewport.baseLeft + this.viewport.offsetX; this.videoTop = this.viewport.baseTop + this.viewport.offsetY; this.updateCursor();
|
||
}
|
||
private updateCursor(): void {
|
||
this.cursorX = this.viewport.left() + this.mouse.x * this.viewport.width(); this.cursorY = this.viewport.top() + this.mouse.y * this.viewport.height();
|
||
}
|
||
private touch(event: TouchEvent): void {
|
||
if (event.source === SourceType.Mouse) return;
|
||
const kind = event.type === TouchType.Down ? 'down' : event.type === TouchType.Move ? 'move' : event.type === TouchType.Up ? 'up' : 'cancel';
|
||
if (kind === 'down') {
|
||
this.touches.begin(); if (this.longTimer >= 0) clearTimeout(this.longTimer);
|
||
if (event.touches.length === 1) this.longTimer = setTimeout(() => this.touches.hold(), 500);
|
||
}
|
||
if (kind === 'up' || kind === 'cancel' || event.touches.length > 1) { if (this.longTimer >= 0) clearTimeout(this.longTimer); this.longTimer = -1; }
|
||
this.touches.touch(event.touches.map((t: TouchObject): TouchPoint => ({ x: t.x, y: t.y })), kind); this.applyViewport();
|
||
}
|
||
private physicalMouse(event: MouseEvent): void {
|
||
if (!this.viewport.contains(event.x, event.y) && event.action !== MouseAction.Release) return;
|
||
this.mouse.move(this.viewport.x(event.x), this.viewport.y(event.y));
|
||
const button = event.button === MouseButton.Left ? 0 : event.button === MouseButton.Right ? 1 : event.button === MouseButton.Middle ? 2 : -1;
|
||
if (button >= 0 && (event.action === MouseAction.Press || event.action === MouseAction.Release))
|
||
this.controller?.pointer(this.mouse.x, this.mouse.y, (event.action === MouseAction.Press ? 1 : 2) + button * 2, 0);
|
||
}
|
||
private orbTouch(event: TouchEvent): void {
|
||
const p = event.changedTouches[0]; if (!p) return;
|
||
if (event.type === TouchType.Down) { this.release(); this.orbStartX = p.screenX; this.orbStartY = p.screenY; this.originX = this.orbX; this.originY = this.orbY; this.orbMoved = false; }
|
||
if (event.type === TouchType.Move) {
|
||
const dx = p.screenX - this.orbStartX, dy = p.screenY - this.orbStartY;
|
||
if (Math.hypot(dx, dy) > 4) { this.orbMoved = true; this.menu = ''; }
|
||
if (this.orbMoved) { this.orbX = clamp(this.originX + dx, 8, this.viewWidth - 62); this.orbY = clamp(this.originY + dy, 8, this.viewHeight - 62); }
|
||
}
|
||
if (event.type === TouchType.Up && !this.orbMoved) this.menu = this.menu ? '' : 'controls';
|
||
}
|
||
private barTouch(event: TouchEvent, button: number): void {
|
||
const p = event.changedTouches[0]; if (!p) return;
|
||
if (event.type === TouchType.Down) {
|
||
this.barX = p.screenX; this.barY = this.wheelY = this.wheelLast = p.screenY;
|
||
if (button !== 1) this.mouse.button(button === 0, true);
|
||
} else if (event.type === TouchType.Move) {
|
||
if (button === 1) {
|
||
const delta = p.screenY - this.wheelY; this.wheelOffset = ((p.screenY - this.wheelLast) % 8 + 8) % 8;
|
||
if (Math.abs(delta) > 8) { this.mouse.scroll(delta); this.wheelY = p.screenY; }
|
||
} else this.mouse.drag(p.screenX - this.barX, p.screenY - this.barY, this.viewport.width(), this.viewport.height());
|
||
this.barX = p.screenX; this.barY = p.screenY;
|
||
} else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
|
||
if (button !== 1) this.mouse.button(button === 0, false); this.wheelOffset = 0;
|
||
}
|
||
this.leftHeld = this.mouse.left; this.rightHeld = this.mouse.right;
|
||
}
|
||
private action(index: number): void {
|
||
if (index === 0) { this.keyboard = !this.keyboard; this.menu = ''; this.modifiers = []; if (this.keyboard) { this.keyboardX = (this.viewWidth - this.keyboardWidth()) / 2; this.keyboardY = Math.max(8, this.viewHeight - this.keyboardHeight - 20); } }
|
||
if (index === 1) this.controller?.setRelative(!this.state.relative);
|
||
if (index === 2) { this.release(); this.mouseVisible = !this.mouseVisible; this.menu = ''; }
|
||
if (index === 3) { this.state.modal = 'displays'; this.menu = ''; }
|
||
if (index === 4) this.menu = 'video';
|
||
if (index === 5) this.controller?.mute();
|
||
if (index === 6) this.controller?.chooseFile();
|
||
if (index === 7) this.menu = 'network';
|
||
if (index === 8) this.controller?.sas();
|
||
if (index === 9) { this.state.modal = 'clipboard'; this.menu = ''; }
|
||
if (index === 10) this.controller?.togglePrivacy();
|
||
}
|
||
private labels(): string[] {
|
||
return ['键盘', this.state.relative ? '相对鼠标' : '绝对鼠标', this.mouseVisible ? '收起鼠标' : '虚拟鼠标', '显示器', '画面设置', this.state.muted ? '静音' : '声音', '发送文件', '网络状态', 'Ctrl+Alt+Del', '剪贴板', this.state.privacyButtonTitle];
|
||
}
|
||
private controlIds(): number[] {
|
||
return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].filter((index: number) =>
|
||
(index !== 8 || this.state.platform === 'windows') && (index !== 10 || this.state.privacyVisible));
|
||
}
|
||
private icons(): string[] { return ['keyboard', 'mouse', 'mouse', 'display', 'sliders', this.state.muted ? 'muted' : 'audio', 'folder', 'chart', 'lock', 'clipboard', this.state.privacyEnabled ? 'eye_off' : 'eye']; }
|
||
private columns(): number { return this.viewHeight < 400 && this.viewWidth >= 400 ? 4 : 3; }
|
||
private menuWidth(): number { return Math.max(1, Math.min(this.viewWidth - 16, this.columns() === 4 ? 380 : Math.max(280, Math.min(340, this.viewWidth - 160)))); }
|
||
private menuX(): number { return clamp(this.orbX > this.viewWidth / 2 ? this.orbX - this.menuWidth() - 12 : this.orbX + 66, 8, this.viewWidth - this.menuWidth() - 8); }
|
||
private mousePosition(): Position {
|
||
let x = this.orbX >= 154 ? this.orbX - 146 : this.orbX + 60, y = this.orbY + 3;
|
||
if (x + 140 > this.viewWidth - 8) { x = this.orbX; y = this.orbY + 60; if (y + 48 > this.viewHeight - 8) y = this.orbY - 54; }
|
||
if (this.keyboard && x < this.keyboardX + this.keyboardWidth() && x + 140 > this.keyboardX && y < this.keyboardY + this.keyboardHeight && y + 48 > this.keyboardY) {
|
||
y = this.keyboardY - 54; if (y < 8) y = this.keyboardY + this.keyboardHeight + 6;
|
||
}
|
||
return { x: clamp(x, 8, this.viewWidth - 148), y: clamp(y, 8, this.viewHeight - 56) };
|
||
}
|
||
private keyboardWidth(): number { return Math.max(1, Math.min(this.computerKeyboard ? 520 : 440, this.viewWidth - 16)); }
|
||
private keyboardRows(): KeyRow[] {
|
||
return this.computerKeyboard ? [
|
||
{ keys: ['Esc', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6'] }, { keys: ['Tab', 'Ctrl', 'Alt', 'Win', '↑', '⌫'] },
|
||
{ keys: ['复制', '粘贴', '全选', '←', '↓', '→'] }, { keys: ['ABC', '空格', 'Enter'] }
|
||
] : [{ keys: ['1','2','3','4','5','6','7','8','9','0'] }, { keys: ['q','w','e','r','t','y','u','i','o','p'] },
|
||
{ keys: ['a','s','d','f','g','h','j','k','l'] }, { keys: ['⇧','z','x','c','v','b','n','m','⌫'] },
|
||
{ keys: ['电脑','剪贴板','空格','.','Enter'] }];
|
||
}
|
||
private keyboardKey(value: string): void {
|
||
if (value === '⇧') { this.shift = !this.shift; return; }
|
||
if (value === '电脑' || value === 'ABC') { this.computerKeyboard = value === '电脑'; return; }
|
||
if (value === '剪贴板') { this.state.modal = 'clipboard'; return; }
|
||
const modifier = value === 'Ctrl' ? 17 : value === 'Alt' ? 18 : value === 'Win' ? 91 : 0;
|
||
if (modifier) { this.modifiers = this.modifiers.includes(modifier) ? this.modifiers.filter((m: number) => m !== modifier) : [...this.modifiers, modifier]; return; }
|
||
if (value === '复制' || value === '粘贴' || value === '全选') { this.controller?.shortcut(value === '复制' ? 67 : value === '粘贴' ? 86 : 65); return; }
|
||
const names = ['空格','⌫','Enter','Esc','Tab','↑','↓','←','→']; const codes = [32,8,13,27,9,38,40,37,39];
|
||
let code = names.includes(value) ? codes[names.indexOf(value)] : /^F[1-6]$/.test(value) ? 111 + Number(value.substring(1)) : 0;
|
||
if (!code && this.modifiers.length) { const key = asciiKey(this.shift ? value.toUpperCase() : value); code = key & 255; if (key & 256) this.modifiers = [...this.modifiers, 16]; }
|
||
if (code) { this.controller?.chord(code, this.modifiers); this.modifiers = []; }
|
||
else this.controller?.text(this.shift ? value.toUpperCase() : value);
|
||
}
|
||
private keyboardDrag(event: GestureEvent): void {
|
||
this.keyboardX = clamp(this.keyboardOriginX + event.offsetX, 8, this.viewWidth - this.keyboardWidth() - 8);
|
||
this.keyboardY = clamp(this.keyboardOriginY + event.offsetY, 8, Math.max(8, this.viewHeight - this.keyboardHeight - 8));
|
||
}
|
||
@Builder
|
||
NetworkRow(title: string, traffic: Traffic | undefined) {
|
||
Row({ space: 4 }) {
|
||
Text(title).fontSize(11).fontWeight(title === '合计' ? 600 : 400).fontColor(MobileTheme.ink).width(28)
|
||
Text(NetworkStatistics.rate(traffic?.inbound ?? -1)).fontSize(11).minFontSize(8).maxLines(1).layoutWeight(1).textAlign(TextAlign.End)
|
||
Text(NetworkStatistics.rate(traffic?.outbound ?? -1)).fontSize(11).minFontSize(8).maxLines(1).layoutWeight(1).textAlign(TextAlign.End)
|
||
Text(NetworkStatistics.loss(traffic?.loss ?? -1)).fontSize(11).width(46).textAlign(TextAlign.End)
|
||
}.padding({ left: 4, right: 4 }).height(26).width('100%').borderRadius(5).backgroundColor(title === '合计' ? '#122E7ADB' : Color.Transparent)
|
||
}
|
||
@Builder
|
||
NetworkDetail(label: string, value: string, encrypted: boolean = false) {
|
||
Row({ space: 4 }) {
|
||
Text(label).fontSize(12).fontColor(MobileTheme.secondary).layoutWeight(1)
|
||
if (encrypted) { MobileIcon({ name: 'lock', iconExtent: 14, color: MobileTheme.green }) }
|
||
Text(value).fontSize(12).fontColor(encrypted ? MobileTheme.green : MobileTheme.ink).textAlign(TextAlign.End)
|
||
}.width('100%').constraintSize({ minHeight: 21 })
|
||
}
|
||
@Builder
|
||
NetworkCodec(label: string, value: string) {
|
||
Row({ space: 8 }) {
|
||
Text(label).fontSize(12).fontColor(MobileTheme.secondary).maxLines(1)
|
||
Text(value).fontSize(12).fontColor(MobileTheme.ink).textAlign(TextAlign.End).layoutWeight(1)
|
||
.maxLines(1).textOverflow({ overflow: TextOverflow.MARQUEE })
|
||
.marqueeOptions({ start: true, step: 0.5, loop: -1, fromStart: true })
|
||
}.width('100%').constraintSize({ minHeight: 21 })
|
||
}
|
||
@Builder
|
||
Menu() {
|
||
Column({ space: 10 }) {
|
||
Row({ space: 6 }) {
|
||
if (this.menu !== 'controls') { MobileIconButton({ icon: 'back', label: '返回控制栏', iconExtent: 30, iconSize: 19, action: () => this.menu = 'controls' }) }
|
||
Row({ space: 6 }) {
|
||
if (this.menu === 'controls') { Row() {}.width(6).height(6).borderRadius(3).backgroundColor(MobileTheme.green) }
|
||
Text(this.menu === 'controls' ? '已连接' : this.menu === 'video' ? '画面设置' : '网络状态').fontSize(14).fontWeight(600).fontColor(MobileTheme.ink)
|
||
}.layoutWeight(1)
|
||
MobileIconButton({ icon: 'close', label: '关闭控制栏', iconExtent: 30, iconSize: 20, action: () => this.menu = '' })
|
||
}.width('100%')
|
||
Scroll() {
|
||
Column({ space: 8 }) {
|
||
if (this.menu === 'controls') {
|
||
GridRow({ columns: this.columns(), gutter: 7 }) {
|
||
ForEach(this.controlIds(), (index: number) => {
|
||
GridCol() {
|
||
Column({ space: 4 }) {
|
||
MobileIcon({ name: this.icons()[index], iconExtent: 19 })
|
||
Text(this.labels()[index]).fontSize(10).fontColor(MobileTheme.ink).maxLines(1)
|
||
}
|
||
.height(52).width('100%').justifyContent(FlexAlign.Center)
|
||
.backgroundColor('#F0F0F2').borderRadius(10)
|
||
.enabled(index !== 10 || this.state.ready && this.state.privacyCanToggle)
|
||
.opacity(index === 10 && (!this.state.ready || !this.state.privacyCanToggle) ? 0.45 : 1)
|
||
.accessibilitySelected(index === 10 && this.state.privacyEnabled)
|
||
.accessibilityText(index === 10 ? `${this.labels()[index]}，${this.state.privacyStatus}` : this.labels()[index]).accessibilityLevel('yes').onClick(() => this.action(index))
|
||
}
|
||
}, (index: number) => index.toString())
|
||
}
|
||
if (this.state.privacyFeedback) { Text(this.state.privacyFeedback).fontSize(11).fontColor(MobileTheme.secondary).width('100%') }
|
||
if (this.state.transfer) { Text(this.state.transfer).fontSize(11).fontColor(MobileTheme.secondary).width('100%') }
|
||
if (this.state.receivedPath) { Button('保存收到的文件', { type: ButtonType.Normal }).fontSize(14).fontColor(MobileTheme.blue).backgroundColor(Color.White).height(42).width('100%').onClick(() => this.controller?.saveFile()) }
|
||
} else if (this.menu === 'video') {
|
||
Text(this.state.videoFeedback).fontSize(12).fontColor(MobileTheme.secondary).width('100%')
|
||
Text('画面质量').fontSize(12).width('100%')
|
||
MobileSegment({ labels: ['低', '中', '高'], selection: this.state.videoQuality,
|
||
available: this.state.videoSupported, changed: (i: number) => this.controller?.updateVideo(0, i) })
|
||
Text('画面采集帧率').fontSize(12).width('100%')
|
||
MobileSegment({ labels: ['30 fps', '60 fps'], selection: this.state.videoRate === 60 ? 1 : 0,
|
||
available: this.state.videoSupported, changed: (i: number) => this.controller?.updateVideo(1, i ? 60 : 30) })
|
||
Text('画面偏好').fontSize(12).width('100%')
|
||
MobileSegment({ labels: ['帧率优先', '画质优先', '平衡'], selection: this.state.videoSelectedPreference,
|
||
available: this.state.videoSupported, changed: (i: number) => this.controller?.updateVideo(2, i) })
|
||
} else {
|
||
Row({ space: 4 }) {
|
||
Text('').width(28)
|
||
Text('接收').fontSize(11).fontColor(MobileTheme.secondary).layoutWeight(1).textAlign(TextAlign.End)
|
||
Text('发送').fontSize(11).fontColor(MobileTheme.secondary).layoutWeight(1).textAlign(TextAlign.End)
|
||
Text('丢包率').fontSize(11).fontColor(MobileTheme.secondary).width(46).textAlign(TextAlign.End)
|
||
}.padding({ left: 4, right: 4 }).height(24).width('100%')
|
||
Column() {
|
||
this.NetworkRow('视频', this.controller?.network.current(this.state.networkTime)?.video)
|
||
this.NetworkRow('音频', this.controller?.network.current(this.state.networkTime)?.audio)
|
||
this.NetworkRow('数据', this.controller?.network.current(this.state.networkTime)?.data)
|
||
this.NetworkRow('合计', this.controller?.network.current(this.state.networkTime)?.total)
|
||
}.width('100%')
|
||
Divider().strokeWidth(0.5).color(MobileTheme.line).margin({ top: 2, bottom: 2 })
|
||
this.NetworkDetail('帧率', `${this.controller?.network.fps(this.state.networkTime) ?? '—'} FPS`)
|
||
this.NetworkDetail('分辨率', this.state.hasFrame ? `${this.state.width} × ${this.state.height}` : '—')
|
||
this.NetworkDetail('画面延时', NetworkStatistics.delay(this.controller?.network.latency(this.state.networkTime) ?? -1))
|
||
this.NetworkDetail('连接延时（RTT）', NetworkStatistics.delay(this.state.networkTime - (this.controller?.network.rttTime ?? 0) < 3000 ? this.controller?.network.rtt ?? -1 : -1))
|
||
this.NetworkDetail('连接方式', this.controller?.network.mode(this.state.networkTime) ?? '—')
|
||
this.NetworkDetail('媒体加密', this.controller?.network.current(this.state.networkTime) === undefined ? '—' : this.controller?.network.report?.srtp ? 'SRTP 已启用' : '未启用', this.controller?.network.current(this.state.networkTime)?.srtp === true)
|
||
this.NetworkCodec('被控端编码器', this.controller?.network.remoteEncoder || '—')
|
||
this.NetworkCodec('控制端解码器', this.controller?.network.report?.decoder || '—')
|
||
}
|
||
}.width('100%')
|
||
}.constraintSize({ maxHeight: Math.max(48, this.viewHeight - 132) }).width('100%').scrollBar(BarState.Off)
|
||
Button('断开连接', { type: ButtonType.Normal }).fontSize(14).fontColor(Color.White).width('100%').height(34).borderRadius(8).backgroundColor(MobileTheme.red)
|
||
.onClick(() => { this.release(); this.state.modal = 'disconnect'; this.menu = ''; this.keyboard = false; })
|
||
}.padding(12).width(this.menuWidth()).backgroundColor(Color.White).borderRadius(18)
|
||
.border({ width: 0.5, color: MobileTheme.line }).shadow({ radius: 24, color: '#33000000', offsetY: 6 })
|
||
.onAreaChange((_old: Area, next: Area) => this.menuHeight = Number(next.height))
|
||
.position({ x: this.menuX(), y: clamp(this.orbY, 8, Math.max(8, this.viewHeight - this.menuHeight - 8)) })
|
||
}
|
||
@Builder
|
||
Keyboard() {
|
||
Column({ space: 3 }) {
|
||
Row() {
|
||
Stack() { Row() {}.width(32).height(4).backgroundColor(MobileTheme.secondary).borderRadius(2) }.layoutWeight(1).height(28).accessibilityText('拖动键盘')
|
||
.gesture(PanGesture().onActionStart(() => { this.keyboardOriginX = this.keyboardX; this.keyboardOriginY = this.keyboardY; })
|
||
.onActionUpdate((e: GestureEvent) => this.keyboardDrag(e)))
|
||
MobileIconButton({ icon: 'close', label: '收起键盘', iconExtent: 28, iconSize: 18, action: () => { this.keyboard = false; this.modifiers = []; } })
|
||
}.width('100%')
|
||
Scroll() {
|
||
Column({ space: 3 }) {
|
||
ForEach(this.keyboardRows(), (row: KeyRow) => {
|
||
Row({ space: 3 }) {
|
||
ForEach(row.keys, (key: string) => {
|
||
Text(this.shift && key.length === 1 ? key.toUpperCase() : key).fontSize(key.length > 2 ? 11 : 14)
|
||
.height(31).layoutWeight(key === '空格' ? 3 : 1).textAlign(TextAlign.Center).borderRadius(5).fontColor(MobileTheme.ink)
|
||
.shadow({ radius: 0.5, color: '#33000000', offsetY: 1 })
|
||
.backgroundColor((key === '⇧' && this.shift) || this.modifiers.includes(key === 'Ctrl' ? 17 : key === 'Alt' ? 18 : key === 'Win' ? 91 : -1) ? '#9BC7F7' : key.length > 1 || key === '⇧' ? '#AFB8C5' : '#FFFFFF')
|
||
.accessibilityText(key).accessibilityLevel('yes').onClick(() => this.keyboardKey(key))
|
||
}, (key: string) => key)
|
||
}.width('100%')
|
||
})
|
||
}.width('100%')
|
||
}.width('100%').constraintSize({ maxHeight: Math.max(31, this.viewHeight - 60) }).scrollBar(BarState.Off)
|
||
}.padding(5).width(this.keyboardWidth()).backgroundColor('#D1D6DE').borderRadius(12)
|
||
.shadow({ radius: 20, color: '#33000000', offsetY: 5 }).onAreaChange((_old: Area, next: Area) => this.keyboardHeight = Number(next.height))
|
||
.position({ x: clamp(this.keyboardX, 8, this.viewWidth - this.keyboardWidth() - 8), y: clamp(this.keyboardY, 8, Math.max(8, this.viewHeight - this.keyboardHeight - 8)) })
|
||
}
|
||
@Builder
|
||
MouseBar() {
|
||
Row({ space: 2 }) {
|
||
ForEach([0, 1, 2], (button: number) => {
|
||
Stack() {
|
||
if (button === 1) {
|
||
Stack() {
|
||
Column({ space: 4 }) {
|
||
ForEach([0, 1, 2, 3, 4, 5, 6], (line: number) => { Row() {}.height(3).width(14).backgroundColor('#737378') })
|
||
}.translate({ y: this.wheelOffset - 8 })
|
||
}.width(18).height(30).clip(true)
|
||
} else { MobileIcon({ name: button === 0 ? 'mouse_left' : 'mouse_right', iconExtent: 22 }) }
|
||
}.width(44).height(44).borderRadius(7).clip(true)
|
||
.backgroundColor(button === 0 && this.leftHeld || button === 2 && this.rightHeld ? '#9BC7F7' : '#E9E9EE')
|
||
.accessibilityText(button === 0 ? '鼠标左键，按住拖动' : button === 1 ? '滚轮，上下滑动' : '鼠标右键，按住拖动')
|
||
.onTouch((event: TouchEvent) => this.barTouch(event, button))
|
||
})
|
||
}.padding(2).width(140).height(48).backgroundColor('#FFFFFF').borderRadius(10)
|
||
.border({ width: 0.5, color: MobileTheme.line }).shadow({ radius: 12, color: '#33000000', offsetY: 4 }).position(this.mousePosition())
|
||
}
|
||
build() {
|
||
Stack({ alignContent: Alignment.TopStart }) {
|
||
XComponent({ id: 'mobileVideo', type: XComponentType.SURFACE, controller: this.surface })
|
||
.width(this.videoWidth).height(this.videoHeight).position({ x: this.videoLeft, y: this.videoTop })
|
||
.scale({ x: this.zoom, y: this.zoom }).onLoad(() => this.controller?.surface(this.surface.getXComponentSurfaceId(), this.surface))
|
||
.onDestroy(() => this.controller?.surface('0'))
|
||
if (!this.state.hasFrame) {
|
||
Column({ space: 12 }) {
|
||
LoadingProgress().width(32).height(32).color(Color.White)
|
||
Text('等待远端画面…').fontSize(14).fontColor(Color.White)
|
||
}.padding(20).constraintSize({ minWidth: 200 }).backgroundColor('#B0202024').borderRadius(14)
|
||
.position({ x: (this.viewWidth - 200) / 2, y: (this.viewHeight - 104) / 2 }).hitTestBehavior(HitTestMode.None)
|
||
}
|
||
Column() {}.width('100%').height('100%').focusable(true).defaultFocus(true)
|
||
.onTouch((e: TouchEvent) => this.touch(e)).onMouse((e: MouseEvent) => this.physicalMouse(e))
|
||
.onAxisEvent((event: AxisEvent) => { const delta = event.getVerticalAxisValue(); if (delta) this.mouse.scroll(-delta); })
|
||
.onKeyEvent((e: KeyEvent) => { if (e.type === KeyType.Down || e.type === KeyType.Up) { this.controller?.physicalKey(e.keyCode, e.type === KeyType.Down); return true; } return false; })
|
||
.onBlur(() => this.controller?.release())
|
||
.accessibilityText('远程桌面：轻触点击、长按右键、双指捏合缩放、放大后双指拖动画面，原始比例下双指滚动')
|
||
MobileIcon({ name: 'cursor', iconExtent: 24, color: '#000000' })
|
||
.position({ x: this.cursorX - 1, y: this.cursorY - 1 }).hitTestBehavior(HitTestMode.None)
|
||
if (this.menu) { Column() {}.width('100%').height('100%').onClick(() => this.menu = ''); this.Menu() }
|
||
if (this.keyboard) { this.Keyboard() }
|
||
if (this.mouseVisible && !this.menu && this.state.hasFrame) { this.MouseBar() }
|
||
Stack() {
|
||
Image($r('app.media.mobile_brand')).width(46).height(46).objectFit(ImageFit.Cover).borderRadius(23).draggable(false).hitTestBehavior(HitTestMode.None)
|
||
}.width(54).height(54).backgroundColor('#F5F5F7').borderRadius(27).shadow({ radius: 14, color: '#33000000', offsetY: 4 })
|
||
.position({ x: this.orbX, y: this.orbY }).accessibilityText('远程控制菜单，拖动可移动').accessibilityLevel('yes')
|
||
.onTouch((e: TouchEvent) => this.orbTouch(e))
|
||
}.width('100%').height('100%').backgroundColor(Color.Black).clip(true)
|
||
.onAreaChange((_old: Area, next: Area) => {
|
||
this.release(); this.viewWidth = Number(next.width); this.viewHeight = Number(next.height); this.fit();
|
||
if (!this.orbPositioned && this.viewWidth > 100) { this.orbX = this.viewWidth - 66; this.orbY = 17; this.orbPositioned = true; }
|
||
this.orbX = clamp(this.orbX, 8, this.viewWidth - 62); this.orbY = clamp(this.orbY, 8, this.viewHeight - 62);
|
||
this.keyboardX = clamp(this.keyboardX, 8, this.viewWidth - this.keyboardWidth() - 8);
|
||
})
|
||
}
|
||
}
|