@eclipse-glsp/client 0.9.0-next.d0112315 → 0.9.0-next.f12e3d87

package/src/features/tool-feedback/change-bounds-tool-feedback.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { inject, injectable } from 'inversify';
-import { VNode } from 'snabbdom/vnode';
+import { VNode } from 'snabbdom';
 import {
     Action,
     CommandExecutionContext,
@@ -27,23 +27,24 @@ import {
     MouseListener,
     MoveAction,
     Point,
+    SChildElement,
     SModelElement,
     SModelRoot,
     TYPES
 } from 'sprotty';
-
 import { isNotUndefined } from '../../utils/smodel-util';
 import { addResizeHandles, isResizable, removeResizeHandles, SResizeHandle } from '../change-bounds/model';
 import { createMovementRestrictionFeedback, removeMovementRestrictionFeedback } from '../change-bounds/movement-restrictor';
+import { CursorCSS, cursorFeedbackAction } from '../tool-feedback/css-feedback';
 import { ChangeBoundsTool } from '../tools/change-bounds-tool';
 import { FeedbackCommand } from './model';
 
 export class ShowChangeBoundsToolResizeFeedbackAction implements Action {
-    constructor(readonly elementId?: string, public readonly kind: string = ShowChangeBoundsToolResizeFeedbackCommand.KIND) { }
+    constructor(readonly elementId?: string, public readonly kind: string = ShowChangeBoundsToolResizeFeedbackCommand.KIND) {}
 }
 
 export class HideChangeBoundsToolResizeFeedbackAction implements Action {
-    constructor(public readonly kind: string = HideChangeBoundsToolResizeFeedbackCommand.KIND) { }
+    constructor(public readonly kind: string = HideChangeBoundsToolResizeFeedbackCommand.KIND) {}
 }
 
 @injectable()
@@ -54,10 +55,7 @@ export class ShowChangeBoundsToolResizeFeedbackCommand extends FeedbackCommand {
 
     execute(context: CommandExecutionContext): CommandReturn {
         const index = context.root.index;
-        index
-            .all()
-            .filter(isResizable)
-            .forEach(removeResizeHandles);
+        index.all().filter(isResizable).forEach(removeResizeHandles);
 
         if (isNotUndefined(this.action.elementId)) {
             const resizeElement = index.getById(this.action.elementId);
@@ -77,10 +75,7 @@ export class HideChangeBoundsToolResizeFeedbackCommand extends FeedbackCommand {
 
     execute(context: CommandExecutionContext): CommandReturn {
         const index = context.root.index;
-        index
-            .all()
-            .filter(isResizable)
-            .forEach(removeResizeHandles);
+        index.all().filter(isResizable).forEach(removeResizeHandles);
         return context.root;
     }
 }
@@ -126,15 +121,19 @@ export class FeedbackMoveMouseListener extends MouseListener {
             const moveAction = this.getElementMoves(target, event, false);
             if (moveAction) {
                 result.push(moveAction);
+                result.push(cursorFeedbackAction(CursorCSS.MOVE));
             }
         }
         return result;
     }
 
     protected collectStartPositions(root: SModelRoot): void {
-        root.index
+        const selectedElements = root.index
             .all()
-            .filter(element => isSelectable(element) && element.selected)
+            .filter(element => isSelectable(element) && element.selected);
+        const elementsSet = new Set(selectedElements);
+        selectedElements
+            .filter(element => !this.isChildOfSelected(elementsSet, element))
             .forEach(element => {
                 if (isMoveable(element)) {
                     this.elementId2startPos.set(element.id, element.position);
@@ -142,6 +141,16 @@ export class FeedbackMoveMouseListener extends MouseListener {
             });
     }
 
+    protected isChildOfSelected(selectedElements: Set<SModelElement>, element: SModelElement): boolean {
+        while (element instanceof SChildElement) {
+            element = element.parent;
+            if (selectedElements.has(element)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     protected getElementMoves(target: SModelElement, event: MouseEvent, isFinished: boolean): MoveAction | undefined {
         if (!this.startDragPosition) {
             return undefined;
@@ -214,7 +223,7 @@ export class FeedbackMoveMouseListener extends MouseListener {
     }
 
     mouseEnter(target: SModelElement, event: MouseEvent): Action[] {
-        if (target instanceof SModelRoot && event.buttons === 0) {
+        if (target instanceof SModelRoot && event.buttons === 0 && !this.startDragPosition) {
             this.mouseUp(target, event);
         }
         return [];
@@ -230,7 +239,7 @@ export class FeedbackMoveMouseListener extends MouseListener {
             if (this.tool.movementRestrictor) {
                 this.tool.deregisterFeedback([removeMovementRestrictionFeedback(target, this.tool.movementRestrictor)], this);
             }
-
+            result.push(cursorFeedbackAction(CursorCSS.DEFAULT));
         }
         this.hasDragged = false;
         this.startDragPosition = undefined;

package/src/features/tool-feedback/creation-tool-feedback.ts

@@ -49,7 +49,8 @@ export class DrawFeedbackEdgeAction implements Action {
         public readonly elementTypeId: string,
         public readonly sourceId: string,
         public readonly edgeSchema?: SEdgeSchema,
-        public readonly kind: string = DrawFeedbackEdgeCommand.KIND) { }
+        public readonly kind: string = DrawFeedbackEdgeCommand.KIND
+    ) {}
 }
 
 @injectable()
@@ -68,7 +69,7 @@ export class DrawFeedbackEdgeCommand extends FeedbackCommand {
 }
 
 export class RemoveFeedbackEdgeAction implements Action {
-    constructor(public readonly kind: string = RemoveFeedbackEdgeCommand.KIND) { }
+    constructor(public readonly kind: string = RemoveFeedbackEdgeCommand.KIND) {}
 }
 
 @injectable()
@@ -83,10 +84,12 @@ export class RemoveFeedbackEdgeCommand extends FeedbackCommand {
 
 export class FeedbackEdgeEnd extends SDanglingAnchor {
     static readonly TYPE = 'feedback-edge-end';
-    constructor(readonly sourceId: string,
+    constructor(
+        readonly sourceId: string,
         readonly elementTypeId: string,
         public feedbackEdge: SRoutableElement | undefined = undefined,
-        public readonly type: string = FeedbackEdgeEnd.TYPE) {
+        public readonly type: string = FeedbackEdgeEnd.TYPE
+    ) {
         super();
     }
 }
@@ -105,8 +108,9 @@ export class FeedbackEdgeEndMovingMouseListener extends MouseListener {
 
         const edge = edgeEnd.feedbackEdge;
         const position = getAbsolutePosition(edgeEnd, event);
-        const endAtMousePosition = findChildrenAtPosition(target.root, position)
-            .find(element => isConnectable(element) && element.canConnect(edge, 'target'));
+        const endAtMousePosition = findChildrenAtPosition(target.root, position).find(
+            element => isConnectable(element) && element.canConnect(edge, 'target')
+        );
 
         if (endAtMousePosition instanceof SConnectableElement && edge.source && isBoundsAware(edge.source)) {
             const anchor = this.computeAbsoluteAnchor(endAtMousePosition, center(edge.source.bounds));
@@ -149,7 +153,12 @@ export const defaultFeedbackEdgeSchema: SEdgeSchema = {
     opacity: 0.3
 } as SEdgeSchema;
 
-export function drawFeedbackEdge(context: CommandExecutionContext, sourceId: string, elementTypeId: string, feedbackEdgeSchema: SEdgeSchema): void {
+export function drawFeedbackEdge(
+    context: CommandExecutionContext,
+    sourceId: string,
+    elementTypeId: string,
+    feedbackEdgeSchema: SEdgeSchema
+): void {
     const root = context.root;
     const sourceChild = root.index.getById(sourceId);
     if (!sourceChild) {

package/src/features/tool-feedback/css-feedback.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -15,7 +15,6 @@
  ********************************************************************************/
 import { inject, injectable } from 'inversify';
 import { Action, CommandExecutionContext, SModelElement, SModelRoot, TYPES } from 'sprotty';
-
 import { isStringArray } from '../../utils/array-utils';
 import { addCssClasses, removeCssClasses } from '../../utils/smodel-util';
 import { FeedbackCommand } from './model';
@@ -27,7 +26,8 @@ export class ModifyCSSFeedbackAction implements Action {
         public readonly input?: string[] | SModelElement[],
         public readonly addClasses?: string[],
         public readonly removeClasses?: string[],
-        public kind = ModifyCssFeedbackCommand.KIND) {
+        public kind = ModifyCssFeedbackCommand.KIND
+    ) {
         if (input) {
             this.elementIds = isStringArray(input) ? input : input.map(element => element.id);
         }
@@ -68,6 +68,7 @@ function exists(elt?: SModelElement): elt is SModelElement {
     return elt !== undefined;
 }
 
+// eslint-disable-next-line no-shadow
 export enum CursorCSS {
     DEFAULT = 'default-mode',
     OVERLAP_FORBIDDEN = 'overlap-forbidden-mode',
@@ -77,7 +78,9 @@ export enum CursorCSS {
     EDGE_RECONNECT = 'edge-reconnect-select-target-mode',
     OPERATION_NOT_ALLOWED = 'edge-modification-not-allowed-mode',
     ELEMENT_DELETION = 'element-deletion-mode',
-    RESIZE = 'resize-mode',
+    RESIZE_NESW = 'resize-nesw-mode',
+    RESIZE_NWSE = 'resize-nwse-mode',
+    MOVE = 'move-mode',
     MARQUEE = 'marquee-mode'
 }
 

package/src/features/tool-feedback/di.config.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -18,10 +18,7 @@ import { configureCommand, configureView, LocationPostprocessor, MoveCommand, TY
 
 import { GLSP_TYPES } from '../../base/types';
 import { SResizeHandle } from '../change-bounds/model';
-import {
-    HideChangeBoundsToolResizeFeedbackCommand,
-    ShowChangeBoundsToolResizeFeedbackCommand
-} from './change-bounds-tool-feedback';
+import { HideChangeBoundsToolResizeFeedbackCommand, ShowChangeBoundsToolResizeFeedbackCommand } from './change-bounds-tool-feedback';
 import { DrawFeedbackEdgeCommand, FeedbackEdgeEnd, RemoveFeedbackEdgeCommand } from './creation-tool-feedback';
 import { ModifyCssFeedbackCommand } from './css-feedback';
 import {

package/src/features/tool-feedback/edge-edit-tool-feedback.ts

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { inject, injectable } from 'inversify';
-import { VNode } from 'snabbdom/vnode';
+import { VNode } from 'snabbdom';
 import {
     Action,
     add,
@@ -47,12 +47,7 @@ import {
 import { isNotUndefined, isRoutable, isRoutingHandle } from '../../utils/smodel-util';
 import { getAbsolutePosition, toAbsoluteBounds } from '../../utils/viewpoint-util';
 import { addReconnectHandles, removeReconnectHandles } from '../reconnect/model';
-import {
-    FeedbackEdgeEnd,
-    feedbackEdgeEndId,
-    FeedbackEdgeEndMovingMouseListener,
-    feedbackEdgeId
-} from './creation-tool-feedback';
+import { FeedbackEdgeEnd, feedbackEdgeEndId, FeedbackEdgeEndMovingMouseListener, feedbackEdgeId } from './creation-tool-feedback';
 import { FeedbackCommand } from './model';
 
 /**
@@ -60,11 +55,11 @@ import { FeedbackCommand } from './model';
  */
 
 export class ShowEdgeReconnectHandlesFeedbackAction implements Action {
-    constructor(readonly elementId?: string, public readonly kind: string = ShowEdgeReconnectHandlesFeedbackCommand.KIND) { }
+    constructor(readonly elementId?: string, public readonly kind: string = ShowEdgeReconnectHandlesFeedbackCommand.KIND) {}
 }
 
 export class HideEdgeReconnectHandlesFeedbackAction implements Action {
-    constructor(public readonly kind: string = HideEdgeReconnectHandlesFeedbackCommand.KIND) { }
+    constructor(public readonly kind: string = HideEdgeReconnectHandlesFeedbackCommand.KIND) {}
 }
 
 @injectable()
@@ -108,9 +103,11 @@ export class HideEdgeReconnectHandlesFeedbackCommand extends FeedbackCommand {
  */
 
 export class SwitchRoutingModeAction extends SwitchEditModeAction {
-    constructor(public readonly elementsToActivate: string[] = [],
+    constructor(
+        public readonly elementsToActivate: string[] = [],
         public readonly elementsToDeactivate: string[] = [],
-        public readonly kind: string = SwitchRoutingModeCommand.KIND) {
+        public readonly kind: string = SwitchRoutingModeCommand.KIND
+    ) {
         super(elementsToActivate, elementsToDeactivate);
     }
 }
@@ -128,7 +125,11 @@ export class SwitchRoutingModeCommand extends SwitchEditModeCommand {
  */
 
 export class DrawFeedbackEdgeSourceAction implements Action {
-    constructor(readonly elementTypeId: string, readonly targetId: string, public readonly kind: string = DrawFeedbackEdgeSourceCommand.KIND) { }
+    constructor(
+        readonly elementTypeId: string,
+        readonly targetId: string,
+        public readonly kind: string = DrawFeedbackEdgeSourceCommand.KIND
+    ) {}
 }
 
 @injectable()
@@ -169,8 +170,9 @@ export class FeedbackEdgeSourceMovingMouseListener extends MouseListener {
 
         const edge = edgeEnd.feedbackEdge;
         const position = getAbsolutePosition(edgeEnd, event);
-        const endAtMousePosition = findChildrenAtPosition(target.root, position)
-            .find(e => isConnectable(e) && e.canConnect(edge, 'source'));
+        const endAtMousePosition = findChildrenAtPosition(target.root, position).find(
+            e => isConnectable(e) && e.canConnect(edge, 'source')
+        );
 
         if (endAtMousePosition instanceof SConnectableElement && edge.target && isBoundsAware(edge.target)) {
             const anchor = this.computeAbsoluteAnchor(endAtMousePosition, center(edge.target.bounds));
@@ -234,7 +236,8 @@ export class FeedbackEdgeRouteMovingMouseListener extends MouseListener {
             const dx = (event.pageX - this.lastDragPosition.x) / zoom;
             const dy = (event.pageY - this.lastDragPosition.y) / zoom;
             const handleMoves: ElementMove[] = [];
-            target.root.index.all()
+            target.root.index
+                .all()
                 .filter(element => isSelected(element))
                 .forEach(element => {
                     if (isRoutingHandle(element)) {

package/src/features/tool-feedback/feedback-action-dispatcher.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -16,7 +16,7 @@
 import { inject, injectable } from 'inversify';
 import { Action, IActionDispatcher, ILogger, TYPES } from 'sprotty';
 
-export interface IFeedbackEmitter { }
+export interface IFeedbackEmitter {}
 
 /**
  * Dispatcher for actions that are meant to show visual feedback on
@@ -52,14 +52,14 @@ export interface IFeedbackActionDispatcher {
     deregisterFeedback(feedbackEmitter: IFeedbackEmitter, actions: Action[]): void;
 
     /**
-    * Retrieve all `actions` sent out by currently registered `feedbackEmitter`.
-    */
+     * Retrieve all `actions` sent out by currently registered `feedbackEmitter`.
+     */
     getRegisteredFeedback(): Action[];
 }
 
 @injectable()
 export class FeedbackActionDispatcher implements IFeedbackActionDispatcher {
-    protected feedbackEmitters: Map<IFeedbackEmitter, Action[]> = new Map;
+    protected feedbackEmitters: Map<IFeedbackEmitter, Action[]> = new Map();
 
     @inject(TYPES.IActionDispatcherProvider) protected actionDispatcher: () => Promise<IActionDispatcher>;
     @inject(TYPES.ILogger) protected logger: ILogger;
@@ -93,9 +93,7 @@ export class FeedbackActionDispatcher implements IFeedbackActionDispatcher {
             if (value.find(a => a === action)) {
                 result.push(key);
             }
-        }
-        );
+        });
         return result;
     }
-
 }

package/src/features/tool-feedback/marquee-tool-feedback.ts

@@ -33,7 +33,8 @@ export class DrawMarqueeAction implements Action {
     constructor(
         public readonly startPoint: Point,
         public readonly endPoint: Point,
-        public readonly kind: string = DrawMarqueeCommand.KIND) { }
+        public readonly kind: string = DrawMarqueeCommand.KIND
+    ) {}
 }
 
 @injectable()
@@ -51,7 +52,7 @@ export class DrawMarqueeCommand extends FeedbackCommand {
 }
 
 export class RemoveMarqueeAction implements Action {
-    constructor(public readonly kind: string = RemoveMarqueeCommand.KIND) { }
+    constructor(public readonly kind: string = RemoveMarqueeCommand.KIND) {}
 }
 
 @injectable()

package/src/features/tool-feedback/model.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -29,4 +29,3 @@ export abstract class FeedbackCommand extends Command {
         return context.root;
     }
 }
-

package/src/features/tool-feedback/view.tsx

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -14,19 +14,18 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { injectable } from 'inversify';
-import * as snabbdom from 'snabbdom-jsx';
-import { VNode } from 'snabbdom/vnode';
-import { IView, ORIGIN_POINT, Point, RenderingContext, setAttr, SModelElement } from 'sprotty';
+import { VNode } from 'snabbdom';
+import { IView, ORIGIN_POINT, Point, RenderingContext, setAttr, SModelElement, svg } from 'sprotty';
 
 import { isResizable, ResizeHandleLocation, SResizeHandle } from '../change-bounds/model';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const JSX = { createElement: snabbdom.svg };
+const JSX = { createElement: svg };
 
 /**
-* This view is used for the invisible end of the feedback edge.
-* A feedback edge is shown as a visual feedback when creating edges.
-*/
+ * This view is used for the invisible end of the feedback edge.
+ * A feedback edge is shown as a visual feedback when creating edges.
+ */
 @injectable()
 export class FeedbackEdgeEndView implements IView {
     render(model: Readonly<SModelElement>, context: RenderingContext): VNode {
@@ -40,8 +39,15 @@ export class SResizeHandleView implements IView {
     render(handle: SResizeHandle, context: RenderingContext): VNode {
         const position = this.getPosition(handle);
         if (position !== undefined) {
-            const node = <circle class-sprotty-resize-handle={true} class-mouseover={handle.hoverFeedback}
-                cx={position.x} cy={position.y} r={this.getRadius()} />;
+            const node = (
+                <circle
+                    class-sprotty-resize-handle={true}
+                    class-mouseover={handle.hoverFeedback}
+                    cx={position.x}
+                    cy={position.y}
+                    r={this.getRadius()}
+                />
+            );
             setAttr(node, 'data-kind', handle.location);
             return node;
         }

package/src/features/tool-palette/di.config.ts

@@ -20,7 +20,7 @@ import { configureActionHandler, EnableDefaultToolsAction, TYPES } from 'sprotty
 
 import { EnableToolPaletteAction, ToolPalette } from './tool-palette';
 
-const toolPaletteModule = new ContainerModule((bind, _unbind, isBound) => {
+const toolPaletteModule = new ContainerModule((bind, _unbind, isBound, rebind) => {
     bind(ToolPalette).toSelf().inSingletonScope();
     bind(TYPES.IUIExtension).toService(ToolPalette);
     configureActionHandler({ bind, isBound }, EnableToolPaletteAction.KIND, ToolPalette);

package/src/features/tool-palette/palette-item.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020 EclipseSource and others.
+ * Copyright (c) 2020-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -30,11 +30,11 @@ export function isPaletteItem(object?: any): object is PaletteItem {
 export namespace PaletteItem {
     export function getTriggerAction(item?: PaletteItem): TriggerElementCreationAction | undefined {
         if (item) {
-            const initiAction = item.actions.filter(a => isTriggerElementTypeCreationAction(a))
+            const initiAction = item.actions
+                .filter(a => isTriggerElementTypeCreationAction(a))
                 .map(action => action as TriggerElementCreationAction);
             return initiAction.length > 0 ? initiAction[0] : undefined;
         }
         return undefined;
     }
 }
-

package/src/features/tool-palette/tool-palette.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019 EclipseSource and others.
+ * Copyright (c) 2019-2021 EclipseSource and others.
  *
  * This program and the accompanying materials are made available under the
  * terms of the Eclipse Public License v. 2.0 which is available at
@@ -135,16 +135,15 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         const bodyDiv = document.createElement('div');
         bodyDiv.classList.add('palette-body');
         let tabIndex = 0;
-        this.paletteItems.sort(compare)
-            .forEach(item => {
-                if (item.children) {
-                    const group = createToolGroup(item);
-                    item.children.sort(compare).forEach(child => group.appendChild(this.createToolButton(child, tabIndex++)));
-                    bodyDiv.appendChild(group);
-                } else {
-                    bodyDiv.appendChild(this.createToolButton(item, tabIndex++));
-                }
-            });
+        this.paletteItems.sort(compare).forEach(item => {
+            if (item.children) {
+                const group = createToolGroup(item);
+                item.children.sort(compare).forEach(child => group.appendChild(this.createToolButton(child, tabIndex++)));
+                bodyDiv.appendChild(group);
+            } else {
+                bodyDiv.appendChild(this.createToolButton(item, tabIndex++));
+            }
+        });
         if (this.paletteItems.length === 0) {
             const noResultsDiv = document.createElement('div');
             noResultsDiv.innerText = 'No results found.';
@@ -165,7 +164,7 @@ export class ToolPalette extends AbstractUIExtension implements IActionHandler,
         headerCompartment.classList.add('palette-header');
         headerCompartment.append(this.createHeaderTitle());
         headerCompartment.appendChild(this.createHeaderTools());
-        headerCompartment.appendChild(this.searchField = this.createHeaderSearchField());
+        headerCompartment.appendChild((this.searchField = this.createHeaderSearchField()));
         this.containerElement.appendChild(headerCompartment);
     }
 
@@ -411,6 +410,5 @@ export function createToolGroup(item: PaletteItem): HTMLElement {
 }
 
 export function changeCSSClass(element: Element, css: string): void {
-    element.classList.contains(css) ? element.classList.remove(css) :
-        element.classList.add(css);
+    element.classList.contains(css) ? element.classList.remove(css) : element.classList.add(css);
 }