Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed bug with toolbox background change. #27

Merged
merged 1 commit into from
Sep 17, 2023
Merged

Fixed bug with toolbox background change. #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/Editor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,9 +214,9 @@ export class Editor {
setStyleFromObj(newStyle: CSSObj): void {
const rootNode = document.getElementById(this.editorDivId) as Node;
const selAdj = getAdjSelection(true, rootNode);

if (!selAdj || !newStyle || !selAdj.startNode) {return;}
newStyle = this.setAlignment(selAdj, newStyle);
if (!newStyle || Object.keys(newStyle).length === 0) {return;}
if (!newStyle || Object.keys(newStyle).length === 0) {return;}
if (selAdj && selAdj.startNode && !selAdj.isEmpty) {
this.updateStyleAndOptimize(rootNode, selAdj, newStyle);
} else {
Expand Down Expand Up @@ -264,6 +264,7 @@ export class Editor {
* @param newStyle - New style which should be applied on selection area.
*/
updateStyleAndOptimize(rootNode: Node, sel: SelectionAdj, newStyle: CSSObj): void {
newStyle = this.setAlignment(sel, newStyle);
setStyle(sel, newStyle);
if (!rootNode.textContent) {return;}
// Optimize DOM structure after style update
Expand All @@ -290,6 +291,7 @@ export class Editor {
* @param newStyle - New style which should be applied on selection area.
*/
setCursorStyle(selAdj: SelectionAdj, newStyle: CSSObj): void {
newStyle = this.setAlignment(selAdj, newStyle);
let cursorNd = selAdj.startNode;
if (cursorNd.textContent !== "\u200b") {
cursorNd = this.insertEmptySpan(selAdj.startNode, selAdj.startOffset);
Expand Down
7 changes: 5 additions & 2 deletions src/SelectionAdj.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,17 @@ export function getAdjSelection(splitNodes: boolean, rootNode: Node): SelectionA
const sel = window.getSelection();
if (!sel || !sel.anchorNode || !sel.anchorNode.parentNode || !sel.focusNode || !rootNode) {return;}

const anchorHierarchy = getNodeHierarchy(sel.anchorNode, rootNode);
const focusHierarchy = getNodeHierarchy(sel.focusNode, rootNode);
if (!anchorHierarchy.includes(rootNode) || !focusHierarchy.includes(rootNode)) {return;}

const selIsOneNode = sel.anchorNode.isSameNode(sel.focusNode);

let commonNode: Node = sel.anchorNode.parentNode;
let reverseSelection = sel.anchorOffset < sel.focusOffset || !selIsOneNode ? false : true;

if (!selIsOneNode) {
const anchorHierarchy = getNodeHierarchy(sel.anchorNode, rootNode);
const focusHierarchy = getNodeHierarchy(sel.focusNode, rootNode);

commonNode = getCommonNode(anchorHierarchy, focusHierarchy);
reverseSelection = isReverseSelection(anchorHierarchy, focusHierarchy, commonNode);
}
Expand Down
17 changes: 15 additions & 2 deletions src/ToolsPanel/Inputs/DropDownButton.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,18 @@ const buttonStyle: CSSObj = {
'background': 'transparent',
}

/**
* Styles for button when pressed(active).
*/
const unselectableStyle: CSSObj = {
selector: ".unselectable > *",
"-moz-user-select": "-moz-none",
"-khtml-user-select": "none",
"-webkit-user-select": "none",
"-ms-user-select": "none",
"user-select": "none",
}

/**
* Styles for button when pressed(active).
*/
Expand All @@ -26,7 +38,7 @@ const buttonStyleActive: CSSObj = {
* Node with button styles.
* Yes I know ,I can use css. It's just more fun to work with DOM directly.
*/
const buttonStyleNode = buildStyleNode(buttonStyle, buttonStyleActive);
const buttonStyleNode = buildStyleNode(buttonStyle, buttonStyleActive, unselectableStyle);

/**
* Implementation of base class for dropdown button
Expand All @@ -44,8 +56,10 @@ export class DropDownButton {
this.button = this.buildButton();

this.dropDownArrow = new DropDownArrow(() => {});
this.Element.appendChild(buttonStyleNode);
this.Element.appendChild(this.button);
this.Element.appendChild(this.dropDownArrow.Element);
this.Element.classList.add("unselectable");

this.connectEventHandlers();
}
Expand Down Expand Up @@ -87,7 +101,6 @@ export class DropDownButton {
button.style.flexDirection = "column";
button.style.justifyContent = "center";
button.style.alignItems = "center";
button.appendChild(buttonStyleNode);
button.classList.add("buttonStyle");
return button;
}
Expand Down
27 changes: 0 additions & 27 deletions tests/Editor.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,33 +525,6 @@ describe('Testing setStyleFromObj', () => {
expect(updateStyleAndOptimizeMock.mock.calls[0][1]).toEqual(sel);
expect(updateStyleAndOptimizeMock.mock.calls[0][2]).toEqual(style);
});

test('only set alignment', () => {
const {editor, editorDiv, editorP, txtNd} = buildEditor();
const updateStyleAndOptimizeMock = jest.fn();
const setCursorStyleMock = jest.fn();
const setAlignmentMock = jest.fn();

const sel: SelectionAdj = {
startNode: txtNd,
startOffset: 1,
endNode: txtNd,
endOffset: 5,
commonNode: editorP,
isEmpty: false
};
getAdjSelectionMock.mockReturnValue(sel);
setAlignmentMock.mockReturnValue({});

editor.updateStyleAndOptimize = updateStyleAndOptimizeMock;
editor.setCursorStyle = setCursorStyleMock;

const style = {"text-align": "left"} as CSSObj;
editor.setStyleFromObj(style);

expect(setCursorStyleMock.mock.calls).toHaveLength(0);
expect(updateStyleAndOptimizeMock.mock.calls).toHaveLength(0);
});
});

describe('Testing setAlignment', () => {
Expand Down