cione-comp-lib/es/packages/co-novnc-std/main.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { toRefs, getCurrentInstance, ref, watch, onMounted, resolveComponent, openBlock, createElementBlock, createBlock, withCtx, createVNode, Fragment, withDirectives, vShow, createCommentVNode, createElementVNode, normalizeClass } from "vue";
import { localStorageSettings } from "./utils/config.mjs";
import { diffObject } from "./utils/primitives.mjs";
import { useWindowTitle } from "./composables/windowTitle.mjs";
import { useFullscreen } from "./composables/fullscreen.mjs";
import { useRFB } from "./composables/rfb.mjs";
import { state, assignCapabilities, updateClipboard, toggleLogin, connectionActivated, assignSettings, connectionDeactivated, connectionDeactivate, togglePower, toggleKeys, toggleClipboard, toggleTouchKeyboard, toggleKey, removeMessage, togglePanelOpen, toggleSettings, toggleDragging, connectionActivate, toggleFullscreen } from "./store.mjs";
import config from "./config.mjs";
import Panel from "./layout/Panel.mjs";
import Controls from "./layout/Controls.mjs";
import Power from "./layout/Power.mjs";
import Keys from "./layout/Keys.mjs";
import Clipboard from "./layout/Clipboard.mjs";
import Settings from "./layout/Settings.mjs";
import Login from "./layout/Login.mjs";
import Messages from "./layout/Messages.mjs";
import Logo from "./layout/Logo.mjs";
import TouchKeyboard from "./layout/TouchKeyboard.mjs";
import "./main.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import style1 from "./main.vue_used_vue_type_style_index_1_lang.module.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = {
  name: "novnc",
  components: {
    Panel,
    Controls,
    Power,
    Keys,
    Clipboard,
    Settings,
    Login,
    Messages,
    Logo,
    TouchKeyboard
  },
  props: {
    setConfig: {
      type: Object,
      require: true
    }
  },
  emits: ["fullScreen"],
  setup(props) {
    const { setConfig } = toRefs(props);
    const { proxy } = getCurrentInstance();
    const _this = proxy;
    const view = ref(null);
    const { windowTitle } = useWindowTitle(config.title);
    const { rfb, bell, connect, reconnect, disconnect } = useRFB({
      root: view,
      bellSound: config.bell
    });
    const { requestFullscreen, exitFullscreen } = useFullscreen(
      (v) => toggleFullscreen(v)
    );
    const onSettingsToggle = () => {
      toggleSettings();
    };
    const onDragToggle = () => {
      toggleDragging()(this).rfb.applySettings(this.settings, {
        dragging: this.dragging
      });
    };
    const onConnectRequest = () => {
      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
      connectionActivate(state.reconnecting);
      _this.onUpdateSettings({ key: "viewOnly", value: (_a = setConfig.value) == null ? void 0 : _a.viewOnly });
      _this.onUpdateSettings({ key: "hostname", value: (_b = setConfig.value) == null ? void 0 : _b.hostname });
      _this.onUpdateSettings({ key: "port", value: (_c = setConfig.value) == null ? void 0 : _c.port });
      _this.onUpdateSettings({ key: "path", value: (_d = setConfig.value) == null ? void 0 : _d.path });
      _this.onUpdateSettings({ key: "scalingMode", value: (_e = setConfig.value) == null ? void 0 : _e.scalingMode });
      _this.onUpdateSettings({ key: "quality", value: (_f = setConfig.value) == null ? void 0 : _f.quality });
      _this.onUpdateSettings({ key: "compression", value: (_g = setConfig.value) == null ? void 0 : _g.compression });
      _this.onUpdateSettings({ key: "reconnect", value: (_h = setConfig.value) == null ? void 0 : _h.reconnect });
      ((_i = setConfig.value) == null ? void 0 : _i.reconnect) && _this.onUpdateSettings({ key: "reconnectDelay", value: (_j = setConfig.value) == null ? void 0 : _j.reconnectDelay });
      _this.onUpdateSettings({ key: "password", value: (_k = setConfig.value) == null ? void 0 : _k.password });
      _this.onUpdateSettings({ key: "dotCursor", value: true });
      _this.connect(_this.settings, {
        disconnect: _this.onDisconnected,
        connect: _this.onConnected,
        credentialsrequired: _this.onCredentialsRequired,
        securityfailure: _this.onSecurityFailure,
        desktopname: _this.onDesktopName,
        bell: _this.onBell,
        capabilities: _this.onCapabilities,
        clipboard: _this.onClipboard
      });
    };
    watch(
      () => props.setConfig,
      () => {
        onConnectRequest();
      },
      {
        deep: true
      }
    );
    onMounted(() => {
      onConnectRequest();
    });
    return {
      onSettingsToggle,
      onDragToggle,
      onConnectRequest,
      config,
      bell,
      view,
      rfb,
      connect,
      disconnect,
      reconnect,
      windowTitle,
      requestFullscreen,
      exitFullscreen
    };
  },
  data() {
    return state;
  },
  mounted() {
    if (this.settings.autoconnect) {
      this.onConnectRequest();
    }
  },
  methods: {
    onError(message) {
      console.info("\u8FDC\u7A0B\u684C\u9762\u7EC4\u4EF6 --> \u9519\u8BEF", message);
    },
    onBell() {
      if (this.settings.bell) {
        this.bell.play();
      }
    },
    onSecurityFailure(ev) {
      console.info("\u8FDC\u7A0B\u684C\u9762\u7EC4\u4EF6 --> \u8FDE\u63A5\u5B89\u5168\u6545\u969C\u8BE6\u60C5", ev.detail);
    },
    onDesktopName(ev) {
      this.windowTitle = ev.detail.name;
    },
    onCapabilities() {
      assignCapabilities({
        power: this.rfb.hasPowerCapabilities()
      });
    },
    onClipboard(e) {
      updateClipboard(e.detail.text);
    },
    onClipboardClear() {
      this.rfb.clipboardPasteFrom("");
      updateClipboard("");
    },
    onClipboardUpdate(text) {
      this.rfb.clipboardPasteFrom(text);
      updateClipboard(text);
    },
    onCredentialsRequired() {
      console.info("\u8FDC\u7A0B\u684C\u9762\u7EC4\u4EF6 --> \u8BC1\u4E66\u8BF7\u6C42");
      toggleLogin(true);
    },
    onConnected() {
      console.info("\u8FDC\u7A0B\u684C\u9762\u7EC4\u4EF6 --> \u8FDE\u63A5\u6210\u529F");
      connectionActivated();
      this.rfb.focus();
    },
    onUpdateSettings({ key, value }) {
      const oldSettings = { ...this.settings };
      const newSettings = assignSettings({
        [key]: value
      });
      if (this.connected) {
        this.rfb.applySettings(this.settings, {
          dragging: this.dragging
        });
      }
      if (config.localStorageBlacklist.includes(key)) {
        return;
      }
      localStorageSettings.assign(diffObject(oldSettings, newSettings));
    },
    onDisconnected(e) {
      this.windowTitle = "";
      if (e.detail.clean) {
        console.info("\u8FDC\u7A0B\u684C\u9762\u7EC4\u4EF6 --> \u65AD\u5F00\u8FDE\u63A5");
      } else {
        if (state.connected) {
          console.info("\u8FDC\u7A0B\u684C\u9762\u7EC4\u4EF6 --> \u8FDE\u63A5\u4E22\u5931");
        } else {
          console.info("\u8FDC\u7A0B\u684C\u9762\u7EC4\u4EF6 --> \u8FDE\u63A5\u5931\u8D25");
        }
      }
      const reconnect = this.connected || this.connecting ? this.settings.reconnect : false;
      connectionDeactivated(reconnect);
      if (reconnect) {
        const delay = this.settings.reconnectDelay;
        console.info("messages.connectionFailure");
        this.reconnect(delay, () => this.onConnectRequest());
      }
    },
    onDisconnectRequest() {
      connectionDeactivate();
      this.disconnect();
    },
    onMaximize() {
      this.requestFullscreen();
      this.$emit("fullScreen", true);
    },
    onMinimize() {
      this.exitFullscreen();
      this.$emit("fullScreen", false);
    },
    onPower() {
      togglePower();
    },
    onToggleKeys() {
      toggleKeys();
    },
    onToggleClipboard() {
      toggleClipboard();
    },
    onToggleTouchKeyboard() {
      toggleTouchKeyboard();
    },
    onPowerShutdown() {
      this.rfb.machineShutdown();
    },
    onPowerReboot() {
      this.rfb.machineReboot();
    },
    onPowerReset() {
      this.rfb.machineReset();
    },
    onKeyToggle(key) {
      const toggle = toggleKey(key);
      this.rfb.sendKeyCommand(key, toggle);
      this.rfb.focus();
    },
    onKeySend(key) {
      if (key === "cad") {
        this.rfb.sendCtrlAltDel();
      } else {
        this.rfb.sendKeyCommand(key);
      }
      this.rfb.focus();
    },
    onMouseOut() {
      if (this.connected) {
        this.rfb.focus();
      }
    },
    onSubmitCredentials(creds) {
      assignSettings(creds);
      this.rfb.sendCredentials(creds);
    },
    onMessageClick(ev, { key }) {
      removeMessage(key);
    },
    onTouchKeyboardFocus() {
      this.rfb.focusOnClick = true;
    },
    onTouchKeyboardBlur() {
      this.rfb.focusOnClick = false;
    },
    onTouchKeyboardHide() {
      toggleTouchKeyboard(false);
    },
    onTouchKeyboardInput(key) {
      this.rfb.sendKeyCommand(key, void 0);
    },
    onTogglePanel(event, panelOpen) {
      console.log("event", event);
      console.log("this", this);
      console.log("panelOpen", panelOpen);
      togglePanelOpen();
      setTimeout(() => {
        if (document.activeElement) {
          document.activeElement.blur();
        }
      }, 1);
    }
  }
};
const _hoisted_1 = {
  class: "novnc-std",
  style: { "color": "#fff", "width": "100%", "height": "100%", "position": "relative" }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_Controls = resolveComponent("Controls");
  const _component_Settings = resolveComponent("Settings");
  const _component_Panel = resolveComponent("Panel");
  const _component_Messages = resolveComponent("Messages");
  const _component_TouchKeyboard = resolveComponent("TouchKeyboard");
  return openBlock(), createElementBlock("div", _hoisted_1, [
    $setup.config.features.panel ? (openBlock(), createBlock(_component_Panel, {
      key: 0,
      visible: _ctx.panelOpen,
      fullscreen: _ctx.fullscreen,
      onMouseout: $options.onMouseOut
    }, {
      default: withCtx(() => [
        createVNode(_component_Controls, {
          connected: _ctx.connected,
          connecting: _ctx.connecting,
          reconnecting: _ctx.reconnecting,
          fullscreen: _ctx.fullscreen,
          power: _ctx.capabilities.power,
          "view-only": _ctx.settings.viewOnly,
          "clip-to-window": _ctx.settings.clipToWindow,
          features: $setup.config.features,
          dragging: _ctx.dragging,
          "touch-keyboard": _ctx.touchKeyboard,
          "panel-open": _ctx.panelOpen,
          onSettings: $setup.onSettingsToggle,
          onDrag: $setup.onDragToggle,
          onConnect: $setup.onConnectRequest,
          onDisconnect: $options.onDisconnectRequest,
          onMaximize: $options.onMaximize,
          onMinimize: $options.onMinimize,
          onPower: $options.onPower,
          onToggleKeys: $options.onToggleKeys,
          onToggleClipboard: $options.onToggleClipboard,
          onToggleTouchKeyboard: $options.onToggleTouchKeyboard,
          onTogglePanel: $options.onTogglePanel
        }, null, 8, ["connected", "connecting", "reconnecting", "fullscreen", "power", "view-only", "clip-to-window", "features", "dragging", "touch-keyboard", "panel-open", "onSettings", "onDrag", "onConnect", "onDisconnect", "onMaximize", "onMinimize", "onPower", "onToggleKeys", "onToggleClipboard", "onToggleTouchKeyboard", "onTogglePanel"]),
        _ctx.panelOpen ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
          $setup.config.features.settings ? withDirectives((openBlock(), createBlock(_component_Settings, {
            key: 0,
            disabled: _ctx.connected || _ctx.connecting,
            settings: _ctx.settings,
            onUpdate: $options.onUpdateSettings,
            onSubmit: $setup.onConnectRequest
          }, null, 8, ["disabled", "settings", "onUpdate", "onSubmit"])), [
            [vShow, _ctx.showSettings]
          ]) : createCommentVNode("", true)
        ], 64)) : createCommentVNode("", true)
      ]),
      _: 1
    }, 8, ["visible", "fullscreen", "onMouseout"])) : createCommentVNode("", true),
    withDirectives(createElementVNode("div", {
      ref: "view",
      class: normalizeClass(_ctx.$style.vnc)
    }, null, 2), [
      [vShow, _ctx.connected]
    ]),
    createVNode(_component_Messages, {
      messages: _ctx.messages,
      onClick: $options.onMessageClick
    }, null, 8, ["messages", "onClick"]),
    $setup.config.features.touchKeyboard && _ctx.touchKeyboard ? (openBlock(), createBlock(_component_TouchKeyboard, {
      key: 1,
      onFocus: $options.onTouchKeyboardFocus,
      onBlur: $options.onTouchKeyboardBlur,
      onHide: $options.onTouchKeyboardHide,
      onInput: $options.onTouchKeyboardInput
    }, null, 8, ["onFocus", "onBlur", "onHide", "onInput"])) : createCommentVNode("", true)
  ]);
}
const cssModules = {
  "$style": style1
};
var Main = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__cssModules", cssModules], ["__scopeId", "data-v-eabb9f12"]]);
export { Main as default };