@dao42/d42paas-front 0.4.8 → 0.4.9

package/src/helpers/monaco/monaco-ot-adapter.tsx

@@ -1,476 +0,0 @@
-import * as ot from 'ot';
-import * as monaco from 'monaco-editor';
-
-class MonacoAdapter {
-  public myEditor: monaco.editor.IStandaloneCodeEditor;
-
-  constructor(MonacoEditor: monaco.editor.IStandaloneCodeEditor) {
-    // need to closure:
-    // content change event
-    // keyUp / keyDown events
-    // focus event
-    // blur event
-    // any cursour change event
-    this.myEditor = MonacoEditor;
-    this.myEditor.onDidChangeModelContent(this.onContentChange);
-    this.myEditor.onDidChangeCursorPosition(this.onCursorPositionChange);
-  }
-
-  onContentChange(e: monaco.editor.IModelContentChangedEvent) {
-    // console.log(`on model content change`, e);
-    // if (!this.ignoreNextChange) {
-    //   const pair = CodeMirrorAdapter.operationFromCodeMirrorChanges(
-    //     changes,
-    //     this.cm,
-    //   );
-    //   this.trigger('change', pair[0], pair[1]);
-    // }
-    // if (this.selectionChanged) {
-    //   this.trigger('selectionChange');
-    // }
-    // this.changeInProgress = false;
-    // this.ignoreNextChange = false;
-  }
-
-  onCursorPositionChange() {}
-}
-
-const CodeMirrorAdapter = (function (global) {
-  'use strict';
-
-  const TextOperation = ot.TextOperation;
-  const Selection = ot.Selection;
-
-  // Bind a method to an object, so it doesn't matter whether you call
-  // object.method() directly or pass object.method as a reference to another
-  // function.
-  function bind(obj, method) {
-    const fn = obj[method];
-    obj[method] = function () {
-      fn.apply(obj, arguments);
-    };
-  }
-
-  function CodeMirrorAdapter(cm) {
-    this.cm = cm;
-    this.ignoreNextChange = false;
-    this.changeInProgress = false;
-    this.selectionChanged = false;
-
-    bind(this, 'onChanges');
-    bind(this, 'onChange');
-    bind(this, 'onCursorActivity');
-    bind(this, 'onFocus');
-    bind(this, 'onBlur');
-
-    cm.on('changes', this.onChanges);
-    cm.on('change', this.onChange);
-    cm.on('cursorActivity', this.onCursorActivity);
-    cm.on('focus', this.onFocus);
-    cm.on('blur', this.onBlur);
-  }
-
-  // Removes all event listeners from the CodeMirror instance.
-  CodeMirrorAdapter.prototype.detach = function () {
-    this.cm.off('changes', this.onChanges);
-    this.cm.off('change', this.onChange);
-    this.cm.off('cursorActivity', this.onCursorActivity);
-    this.cm.off('focus', this.onFocus);
-    this.cm.off('blur', this.onBlur);
-  };
-
-  function cmpPos(a, b) {
-    if (a.line < b.line) {
-      return -1;
-    }
-    if (a.line > b.line) {
-      return 1;
-    }
-    if (a.ch < b.ch) {
-      return -1;
-    }
-    if (a.ch > b.ch) {
-      return 1;
-    }
-    return 0;
-  }
-  function posEq(a, b) {
-    return cmpPos(a, b) === 0;
-  }
-  function posLe(a, b) {
-    return cmpPos(a, b) <= 0;
-  }
-
-  function minPos(a, b) {
-    return posLe(a, b) ? a : b;
-  }
-  function maxPos(a, b) {
-    return posLe(a, b) ? b : a;
-  }
-
-  function codemirrorDocLength(doc) {
-    return (
-      doc.indexFromPos({ line: doc.lastLine(), ch: 0 }) +
-      doc.getLine(doc.lastLine()).length
-    );
-  }
-
-  // Converts a CodeMirror change array (as obtained from the 'changes' event
-  // in CodeMirror v4) or single change or linked list of changes (as returned
-  // by the 'change' event in CodeMirror prior to version 4) into a
-  // TextOperation and its inverse and returns them as a two-element array.
-  CodeMirrorAdapter.operationFromCodeMirrorChanges = function (changes, doc) {
-    // Approach: Replay the changes, beginning with the most recent one, and
-    // construct the operation and its inverse. We have to convert the position
-    // in the pre-change coordinate system to an index. We have a method to
-    // convert a position in the coordinate system after all changes to an index,
-    // namely CodeMirror's `indexFromPos` method. We can use the information of
-    // a single change object to convert a post-change coordinate system to a
-    // pre-change coordinate system. We can now proceed inductively to get a
-    // pre-change coordinate system for all changes in the linked list.
-    // A disadvantage of this approach is its complexity `O(n^2)` in the length
-    // of the linked list of changes.
-
-    let docEndLength = codemirrorDocLength(doc);
-    let operation = new TextOperation().retain(docEndLength);
-    let inverse = new TextOperation().retain(docEndLength);
-
-    let indexFromPos = function (pos) {
-      return doc.indexFromPos(pos);
-    };
-
-    function last(arr) {
-      return arr[arr.length - 1];
-    }
-
-    function sumLengths(strArr) {
-      if (strArr.length === 0) {
-        return 0;
-      }
-      let sum = 0;
-      for (let i = 0; i < strArr.length; i++) {
-        sum += strArr[i].length;
-      }
-      return sum + strArr.length - 1;
-    }
-
-    function updateIndexFromPos(indexFromPos, change) {
-      return function (pos) {
-        if (posLe(pos, change.from)) {
-          return indexFromPos(pos);
-        }
-        if (posLe(change.to, pos)) {
-          return (
-            indexFromPos({
-              line:
-                pos.line +
-                change.text.length -
-                1 -
-                (change.to.line - change.from.line),
-              ch:
-                change.to.line < pos.line
-                  ? pos.ch
-                  : change.text.length <= 1
-                  ? pos.ch -
-                    (change.to.ch - change.from.ch) +
-                    sumLengths(change.text)
-                  : pos.ch - change.to.ch + last(change.text).length,
-            }) +
-            sumLengths(change.removed) -
-            sumLengths(change.text)
-          );
-        }
-        if (change.from.line === pos.line) {
-          return indexFromPos(change.from) + pos.ch - change.from.ch;
-        }
-        return (
-          indexFromPos(change.from) +
-          sumLengths(change.removed.slice(0, pos.line - change.from.line)) +
-          1 +
-          pos.ch
-        );
-      };
-    }
-
-    for (let i = changes.length - 1; i >= 0; i--) {
-      const change = changes[i];
-      indexFromPos = updateIndexFromPos(indexFromPos, change);
-
-      const fromIndex = indexFromPos(change.from);
-      const restLength = docEndLength - fromIndex - sumLengths(change.text);
-
-      operation = new TextOperation()
-        .retain(fromIndex)
-        ['delete'](sumLengths(change.removed))
-        .insert(change.text.join('\n'))
-        .retain(restLength)
-        .compose(operation);
-
-      inverse = inverse.compose(
-        new TextOperation()
-          .retain(fromIndex)
-          ['delete'](sumLengths(change.text))
-          .insert(change.removed.join('\n'))
-          .retain(restLength),
-      );
-
-      docEndLength += sumLengths(change.removed) - sumLengths(change.text);
-    }
-
-    return [operation, inverse];
-  };
-
-  // Singular form for backwards compatibility.
-  CodeMirrorAdapter.operationFromCodeMirrorChange =
-    CodeMirrorAdapter.operationFromCodeMirrorChanges;
-
-  // Apply an operation to a CodeMirror instance.
-  CodeMirrorAdapter.applyOperationToCodeMirror = function (
-    operation,
-    cm,
-    focusFlag,
-  ) {
-    return cm.operation(function () {
-      let lastUpdatedLine = null;
-      const ops = operation.ops;
-      let index = 0; // holds the current index into CodeMirror's content
-      for (let i = 0, l = ops.length; i < l; i++) {
-        const op = ops[i];
-        let line = 0;
-        if (TextOperation.isRetain(op)) {
-          index += op;
-          continue;
-        } else if (TextOperation.isInsert(op)) {
-          cm.replaceRange(op, cm.posFromIndex(index));
-          line = cm.posFromIndex(index).line;
-          index += op.length;
-        } else if (TextOperation.isDelete(op)) {
-          const from = cm.posFromIndex(index);
-          const to = cm.posFromIndex(index - op);
-          line = from.line;
-          cm.replaceRange('', from, to);
-        }
-        if (focusFlag) {
-          cm.scrollIntoView({ line: line, ch: 0 }, 200);
-        }
-        lastUpdatedLine = line;
-      }
-      return lastUpdatedLine;
-    });
-  };
-
-  CodeMirrorAdapter.prototype.registerCallbacks = function (cb) {
-    this.callbacks = cb;
-  };
-
-  CodeMirrorAdapter.prototype.onChange = function () {
-    // By default, CodeMirror's event order is the following:
-    // 1. 'change', 2. 'cursorActivity', 3. 'changes'.
-    // We want to fire the 'selectionChange' event after the 'change' event,
-    // but need the information from the 'changes' event. Therefore, we detect
-    // when a change is in progress by listening to the change event, setting
-    // a flag that makes this adapter defer all 'cursorActivity' events.
-    this.changeInProgress = true;
-  };
-
-  CodeMirrorAdapter.prototype.onChanges = function (_, changes) {
-    if (!this.ignoreNextChange) {
-      const pair = CodeMirrorAdapter.operationFromCodeMirrorChanges(
-        changes,
-        this.cm,
-      );
-      this.trigger('change', pair[0], pair[1]);
-    }
-    if (this.selectionChanged) {
-      this.trigger('selectionChange');
-    }
-    this.changeInProgress = false;
-    this.ignoreNextChange = false;
-  };
-
-  CodeMirrorAdapter.prototype.onCursorActivity =
-    CodeMirrorAdapter.prototype.onFocus = function () {
-      if (this.changeInProgress) {
-        this.selectionChanged = true;
-      } else {
-        this.trigger('selectionChange');
-      }
-    };
-
-  CodeMirrorAdapter.prototype.onBlur = function () {
-    if (!this.cm.somethingSelected()) {
-      this.trigger('blur');
-    }
-  };
-
-  CodeMirrorAdapter.prototype.getValue = function () {
-    return this.cm.getValue();
-  };
-
-  CodeMirrorAdapter.prototype.getSelection = function () {
-    const cm = this.cm;
-
-    const selectionList = cm.listSelections();
-    const ranges = [];
-    for (let i = 0; i < selectionList.length; i++) {
-      ranges[i] = new Selection.Range(
-        cm.indexFromPos(selectionList[i].anchor),
-        cm.indexFromPos(selectionList[i].head),
-      );
-    }
-
-    return new Selection();
-  };
-
-  CodeMirrorAdapter.prototype.setSelection = function (selection) {
-    const ranges = [];
-    for (let i = 0; i < selection.ranges.length; i++) {
-      const range = selection.ranges[i];
-      ranges[i] = {
-        anchor: this.cm.posFromIndex(range.anchor),
-        head: this.cm.posFromIndex(range.head),
-      };
-    }
-    this.cm.setSelections(ranges);
-  };
-
-  const addStyleRule = (function () {
-    const added = {};
-    const styleElement = document.createElement('style');
-    document.documentElement
-      .getElementsByTagName('head')[0]
-      .appendChild(styleElement);
-    const styleSheet = styleElement.sheet;
-
-    return function (css) {
-      if (added[css]) {
-        return;
-      }
-      added[css] = true;
-      styleSheet.insertRule(
-        css,
-        (styleSheet.cssRules || styleSheet.rules).length,
-      );
-    };
-  })();
-
-  CodeMirrorAdapter.prototype.setOtherCursor = function (
-    position,
-    color,
-    clientId,
-  ) {
-    const cursorPos = this.cm.posFromIndex(position);
-    const cursorCoords = this.cm.cursorCoords(cursorPos);
-    const cursorEl = document.createElement('span');
-    cursorEl.className = 'other-client';
-    cursorEl.style.borderLeftColor = color;
-    cursorEl.setAttribute('data-clientid', clientId);
-    return this.cm.setBookmark(cursorPos, {
-      widget: cursorEl,
-      insertLeft: true,
-    });
-  };
-
-  CodeMirrorAdapter.prototype.setOtherSelectionRange = function (
-    range,
-    color,
-    clientId,
-  ) {
-    const match = /^#([0-9a-fA-F]{6})$/.exec(color);
-    if (!match) {
-      throw new Error('only six-digit hex colors are allowed.');
-    }
-    const selectionClassName = 'selection-' + match[1];
-    const rule = '.' + selectionClassName + ' { background: ' + color + '; }';
-    addStyleRule(rule);
-
-    const anchorPos = this.cm.posFromIndex(range.anchor);
-    const headPos = this.cm.posFromIndex(range.head);
-
-    return this.cm.markText(
-      minPos(anchorPos, headPos),
-      maxPos(anchorPos, headPos),
-      { className: selectionClassName },
-    );
-  };
-
-  CodeMirrorAdapter.prototype.setOtherSelection = function (
-    selection,
-    color,
-    clientId,
-  ) {
-    const selectionObjects = [];
-    for (let i = 0; i < selection.ranges.length; i++) {
-      const range = selection.ranges[i];
-      if (range.isEmpty()) {
-        selectionObjects[i] = this.setOtherCursor(range.head, color, clientId);
-      } else {
-        selectionObjects[i] = this.setOtherSelectionRange(
-          range,
-          color,
-          clientId,
-        );
-      }
-    }
-    return {
-      clear: function () {
-        for (let i = 0; i < selectionObjects.length; i++) {
-          selectionObjects[i].clear();
-        }
-      },
-    };
-  };
-
-  CodeMirrorAdapter.prototype.isSelectionAtEnd = function (selection) {
-    if (selection.ranges.length > 1) {
-      return false;
-    }
-
-    const range = selection.ranges[0];
-    if (!range.isEmpty()) {
-      return false;
-    }
-
-    if (range.head < this.cm.getValue().length) {
-      return false;
-    }
-
-    return true;
-  };
-
-  CodeMirrorAdapter.prototype.trigger = function (event) {
-    const args = Array.prototype.slice.call(arguments, 1);
-    const action = this.callbacks && this.callbacks[event];
-    if (action) {
-      action.apply(this, args);
-    }
-  };
-
-  CodeMirrorAdapter.prototype.applyOperation = function (operation, focusFlag) {
-    this.ignoreNextChange = true;
-    return CodeMirrorAdapter.applyOperationToCodeMirror(
-      operation,
-      this.cm,
-      focusFlag,
-    );
-  };
-
-  CodeMirrorAdapter.prototype.registerUndo = function (undoFn) {
-    this.cm.undo = undoFn;
-  };
-
-  CodeMirrorAdapter.prototype.registerRedo = function (redoFn) {
-    this.cm.redo = redoFn;
-  };
-
-  // Throws an error if the first argument is falsy. Useful for debugging.
-  function assert(b, msg) {
-    if (!b) {
-      throw new Error(msg || 'assertion error');
-    }
-  }
-
-  return CodeMirrorAdapter;
-})(this);
-
-export { MonacoAdapter };

package/src/hooks/collections/useOT.tsx

@@ -1,39 +0,0 @@
-import { io } from 'socket.io-client';
-import create from 'zustand';
-import { oTStore } from '~/stores';
-import { userStore } from '~/stores/oTStore';
-
-const [host, port] = [
-  process.env.LOCAL_IP_HOST,
-  process.env.SOCKET_INSTANCE_CLIENT_PORT,
-];
-
-// const SOCKET_INSTANCE = `${host}:${port}`;
-// console.log(process.env.NODE_ENV);
-const SOCKET_INSTANCE =
-  process.env.NODE_ENV === 'production' ? '' : `${host}:4001`;
-
-type UseSocketType = {
-  socket?: D42_FrontType.SocketType['Socket'];
-  setSocket: (arg: D42_FrontType.SocketType['Socket']) => void;
-};
-
-// Socket Store Logic Center
-export const useOT = create<UseSocketType>((set) => ({
-  socket: undefined,
-  setSocket: (arg) => set(() => ({ socket: arg })),
-}));
-
-export class sockerIO {
-  constructor(obj: { [key: string]: string; }) {
-    // | ((cb: (data: object) => void) => void) | undefined
-    // return io(SOCKET_INSTANCE || obj.ioPath, {
-    return io(SOCKET_INSTANCE || obj.ioPath, {
-      transports: ['websocket'],
-      auth: {
-        ...obj,
-        uuid: obj.userId,
-      },
-    });
-  }
-}

package/src/hooks/index.tsx

@@ -1 +0,0 @@
-export { useOT } from './collections/useOT';

package/src/index.html

@@ -1,49 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DaoPaaS</title>
-    <style>
-        main {
-            width: 100%;
-            height: 100vh;
-            overflow: hidden;
-        }
-        .edit-container {
-            height: 100%;
-        }
-    </style>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.14.0/devicon.min.css" crossorigin="anonymous" />
-    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
-    <!-- <link rel="stylesheet" href="./style.css" crossorigin="anonymous" /> -->
-</head>
-<body>
-    <main>
-        <div class="edit-container"></div>
-    </main>
-    <!-- <script src="/dist/daoPaaS.js"></script> -->
-    <script type="module" src="/app.tsx"></script>
-<!--
-    <script>
-      window.onload = () => {
-        var qs = new URLSearchParams(document.location.search.substring(1));
-        window.daopaas = new DaoPaaS({
-          ticket: qs.get('ticket'),
-          playgroundId: qs.get('playgroundId'),
-          userId: qs.get('userId'),
-          tenantId: qs.get('tenantId'),
-          username: qs.get('username')
-        });
-        daopaas.Page({
-            container: document.querySelector('main'),
-                // props: {
-                //     playgroundId: search,
-                // }
-            }
-        )
-      }
-    </script> -->
-</body>
-</html>