Skip to content

Commit

Permalink
Merge pull request #36 from NoteSpaceTeam/render
Browse files Browse the repository at this point in the history
Merge Pull Request
  • Loading branch information
R1c4rdCo5t4 authored Jun 24, 2024
2 parents c9491bb + eb8fdcf commit a10b54f
Show file tree
Hide file tree
Showing 10 changed files with 18 additions and 236 deletions.
1 change: 0 additions & 1 deletion code/client/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ const firebaseConfig = {
};

const app = initializeApp(firebaseConfig);

const auth = getAuth(app);
const googleAuthProvider = new GoogleAuthProvider();
const githubAuthProvider = new GithubAuthProvider();
Expand Down
67 changes: 9 additions & 58 deletions code/client/src/domain/editor/fugue/Fugue.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import {
InlineStyleOperation,
InsertOperation,
Operation,
ReviveOperation,
} from '@notespace/shared/src/document/types/operations';

/**
Expand Down Expand Up @@ -44,9 +43,6 @@ export class Fugue {
case 'block-style':
this.updateBlockStyleRemote(operation);
break;
case 'revive':
this.reviveRemote(operation);
break;
default:
throw new Error('Invalid operation type');
}
Expand Down Expand Up @@ -94,7 +90,6 @@ export class Fugue {
parent,
side: isEmpty(leftOrigin.rightChildren) ? 'R' : 'L',
styles,
cursor,
};
}

Expand All @@ -107,9 +102,8 @@ export class Fugue {
* @param side
* @param styles
*/
private addNode = ({ cursor, id, value, parent, side, styles }: InsertOperation) => {
if (value === '\n') this.tree.addLineRoot(cursor.line || 0, id, parent, side, styles);
else this.tree.addNode(id, value, parent, side, styles || []);
private addNode = ({ id, value, parent, side, styles }: InsertOperation) => {
this.tree.addNode(id, value, parent, side, styles || []);
};

/**
Expand All @@ -126,7 +120,7 @@ export class Fugue {
} else {
cursor.column++;
}
return this.removeNode(node.id, cursor);
return this.removeNode(node.id);
});
}

Expand All @@ -136,16 +130,15 @@ export class Fugue {
*/
deleteLocalByCursor(cursor: Cursor) {
const node = this.getNodeByCursor(cursor);
if (node) return this.deleteLocalById(cursor, node.id);
if (node) return this.deleteLocalById(node.id);
}

/**
* Deletes the node based on the given operation
* @param cursor
* @param ids
*/
deleteLocalById = ({ line, column }: Cursor, ...ids: Id[]): DeleteOperation[] => {
return ids.map(id => this.removeNode(id, { line, column: column++ }));
deleteLocalById = (...ids: Id[]): DeleteOperation[] => {
return ids.map(id => this.removeNode(id));
};

/**
Expand All @@ -157,54 +150,12 @@ export class Fugue {
/**
* Deletes the node based on the given node id
* @param id
* @param cursor
*/
private removeNode(id: Id, cursor: Cursor): DeleteOperation {
private removeNode(id: Id): DeleteOperation {
this.tree.deleteNode(id);
return { type: 'delete', id, cursor };
}

/**
* Relives the nodes from the given start index and given length.
* @param selection
*/
reviveLocal(selection: Selection): ReviveOperation[] {
const nodes = Array.from(this.traverseBySelection(selection, true));
return nodes.map(node => {
if (node.value === '\n') {
selection.start.line++;
selection.start.column = 0;
} else selection.start.column++;

return this.reviveNode(node.id, selection.start);
});
}

/**
* Revives the node at the given cursor
* @param cursor
*/
reviveLocalByCursor(cursor: Cursor) {
const node = this.getNodeByCursor(cursor);
if (node) return this.reviveNode(node.id, cursor);
}

/**
* Revives a node based on the given id
* @param id
* @param cursor
*/
reviveNode(id: Id, cursor: Cursor): ReviveOperation {
this.tree.reviveNode(id);
return { type: 'revive', id, cursor };
return { type: 'delete', id };
}

/**
* Revives a node based on the given operation
* @param operation
*/
reviveRemote = (operation: ReviveOperation) => this.tree.reviveNode(operation.id);

/**
* Updates the style of the nodes by the given selection
* @param selection
Expand Down Expand Up @@ -339,7 +290,7 @@ export class Fugue {
const iterator = this.traverseBySeparator(' ', cursor, reverse);
const nodes: FugueNode[] = iterator.next().value;
if (!nodes) return;
return this.deleteLocalById(cursor, ...nodes.map(node => node.id));
return this.deleteLocalById(...nodes.map(node => node.id));
}

/**
Expand Down
9 changes: 0 additions & 9 deletions code/client/src/domain/editor/fugue/FugueTree.ts
Original file line number Diff line number Diff line change
Expand Up @@ -101,15 +101,6 @@ export class FugueTree<T> {
}
}

/**
* Re-enables the node with the given id.
* @param id
*/
reviveNode(id: Id) {
const node = this.getById(id);
if (node.isDeleted) node.isDeleted = false;
}

/**
* Updates the depth of the ancestors of the given node by delta.
* @param node the node whose ancestors' depths are to be updated.
Expand Down
43 changes: 0 additions & 43 deletions code/client/src/domain/editor/slate/utils/selection.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Editor, Node, Path, Point, Range, Text } from 'slate';
import { Cursor, emptyCursor, emptySelection, Selection } from '@domain/editor/cursor';
import { first, isEqual } from 'lodash';
import { CustomElement } from '@domain/editor/slate/types';

/**
* Checks if the current selection is active
Expand Down Expand Up @@ -61,48 +60,6 @@ export function pointToCursor(editor: Editor, point: Point): Cursor {
return cursor;
}

export const cursorToPoint = (editor: Editor, cursor: Cursor): Point => {
const { line, column } = cursor;
let offset = column;

// Get the path to the line node
const linePath = [line];

// Check if the path exists in the editor
if (!Editor.hasPath(editor, linePath)) {
throw new Error(`Cannot find a node at line ${line}`);
}

// Get the node at the line path
const lineNode = Node.get(editor, linePath);

// Check if the node is a valid block or container node
if (!Editor.isBlock(editor, lineNode as CustomElement)) {
throw new Error(`Node at line ${line} is not a block node`);
}

// Traverse the children of the line node to find the correct text node
for (const [node, nodePath] of Node.children(editor, linePath)) {
if (Text.isText(node)) {
if (offset <= node.text.length) {
return { path: nodePath, offset };
}
offset -= node.text.length;
}
}

// If the offset is not found, return the end of the line node
const lastTextNode = Node.last(editor, linePath);
if (lastTextNode) {
const [lastNode, lastPath] = lastTextNode;
if (Text.isText(lastNode)) {
return { path: lastPath, offset: lastNode.text.length };
}
}

throw new Error('Cursor position is out of bounds');
};

/**
* Returns the selection by range
* @param editor
Expand Down
Original file line number Diff line number Diff line change
@@ -1,44 +1,15 @@
import useSocketListeners from '@services/communication/socket/useSocketListeners';
import { type Operation } from '@notespace/shared/src/document/types/operations';
import { Editor, Transforms, Location } from 'slate';
import { Cursor } from '@domain/editor/cursor';
import { cursorToPoint, getSelection } from '@domain/editor/slate/utils/selection';
import { isEqual } from 'lodash';
import { ServiceConnector } from '@domain/editor/connectors/service/connector';

/**
* Hook client socket listeners to events
* @param editor
* @param connector
* @param onDone
*/
function useEvents(editor: Editor, connector: ServiceConnector, onDone: () => void) {
function useEvents(connector: ServiceConnector, onDone: () => void) {
function onOperation(operations: Operation[]) {
connector.applyFugueOperations(operations);
const { start: selectionStart, end: selectionEnd } = getSelection(editor);

operations.forEach((op: Operation) => {
if (['insert', 'delete', 'revive'].includes(op.type)) {
const { cursor } = op as Operation & { cursor: Cursor };

if (cursor.line !== selectionEnd.line) return;
if (cursor.column > selectionEnd.column) return;

// update the cursor position
const delta = ['insert', 'revive'].includes(op.type) ? 1 : -1;

// move start and end cursor if the selection is collapsed or inserting or reviving
if (delta > 0 || isEqual(selectionStart, selectionEnd)) {
selectionStart.column += delta;
}
selectionEnd.column += delta;
}
const newSelection: Location = {
anchor: cursorToPoint(editor, selectionStart),
focus: cursorToPoint(editor, selectionEnd),
};
Transforms.select(editor, newSelection);
});
onDone();
}
connector.on('operations', onOperation);
Expand Down
74 changes: 0 additions & 74 deletions code/client/tests/editor/fugue/fugue.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ describe('Fugue', () => {
value: 'a',
parent: { sender: 'root', counter: 0 },
side: 'R',
cursor: { line: 0, column: 0 },
};

// when
Expand Down Expand Up @@ -89,12 +88,10 @@ describe('Fugue', () => {
value: 'x',
parent: { sender: 'root', counter: 0 },
side: 'R',
cursor: { line: 0, column: 0 },
};
const deleteOperation: DeleteOperation = {
type: 'delete',
id: { sender: 'A', counter: 0 },
cursor: { line: 0, column: 0 },
};

// when
Expand Down Expand Up @@ -129,7 +126,6 @@ describe('Fugue', () => {
value: 'x',
parent: { sender: 'root', counter: 0 },
side: 'R',
cursor: { line: 0, column: 0 },
};
const styleOperation: InlineStyleOperation = {
type: 'inline-style',
Expand Down Expand Up @@ -262,76 +258,6 @@ describe('Fugue', () => {
expect(fugue.toString()).toEqual(' ');
});

// test('should revive nodes locally', () => {
// // given
// const cursor: Cursor = { line: 0, column: 0 };
// const selection: Selection = { start: { line: 0, column: 1 }, end: { line: 0, column: 3 } };
// const selection2: Selection = { start: { line: 0, column: 0 }, end: { line: 1, column: 2 } };
//
// // when
// fugue.insertLocal(cursor, 'a', 'b', 'c');
// fugue.deleteLocal(selection);
//
// // then
// expect(fugue.toString()).toEqual('a');
//
// // when
// const operations = fugue.insertLocal(selection.start, 'b', 'c');
//
// // then
// expect(operations).toHaveLength(2);
// expect(fugue.toString()).toEqual('abc');
//
// // when
// fugue.insertLocal({ line: 0, column: 3 }, '\n', 'd', 'e', 'f');
//
// // then
// expect(fugue.toString()).toEqual('abc\ndef');
//
// // when
// fugue.deleteLocal(selection2);
//
// // then
// expect(fugue.toString()).toEqual('f');
//
// const operations2 = fugue.reviveLocal(selection2);
//
// // then
// expect(operations2).toHaveLength(6);
// expect(fugue.toString()).toEqual('abc\ndef');
// });
//
// test('should revive nodes remotely', () => {
// // given
// const insertOperation: InsertOperation = {
// type: 'insert',
// id: { sender: 'A', counter: 0 },
// value: 'a',
// parent: { sender: 'root', counter: 0 },
// side: 'R',
// };
// const deleteOperation: DeleteOperation = {
// type: 'delete',
// id: { sender: 'A', counter: 0 },
// };
//
// // when
// fugue.insertRemote(insertOperation);
// fugue.deleteRemote(deleteOperation);
//
// // then
// expect(fugue.toString()).toEqual('');
//
// // when
// const reviveOperation: ReviveOperation = { type: 'revive', id: insertOperation.id };
//
// // when
// fugue.reviveRemote(reviveOperation);
//
// // then
// expect(fugue.toString()).toEqual('a');
// });

test('should delete a line by cursor', () => {
// given
const cursor1: Cursor = { line: 0, column: 0 };
Expand Down
9 changes: 3 additions & 6 deletions code/server/src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,14 @@ config();

const SERVER_PORT = parseInt(process.env.PORT || '8080');
const CLIENT_PORT = parseInt(process.env.CLIENT_PORT || '5173');
const HOST_IP = process.env.HOST_IP;
const ORIGIN = [`http://localhost:${CLIENT_PORT}`, 'http://localhost:8080'];
const SERVER_IP = HOST_IP || 'localhost';

if (HOST_IP) ORIGIN.push(`http://${HOST_IP}:${CLIENT_PORT}`, `http://${HOST_IP}:8080`);
const ORIGIN = ['http://localhost:5173'];

const SERVER_OPTIONS = {
cors: {
origin: ORIGIN,
credentials: true, // allow credentials (cookies, authorization headers, etc.)
allowedMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
allowedHeaders: ['Authorization', 'Content-Type'],
},
connectionStateRecovery: {},
};
Expand All @@ -23,6 +21,5 @@ export default {
SERVER_PORT,
CLIENT_PORT,
ORIGIN,
SERVER_IP,
SERVER_OPTIONS,
};
Loading

0 comments on commit a10b54f

Please sign in to comment.