aktualizacja paczki selection-js

kartofelek007 · Apr 10, 2021 · de0b1f0 · de0b1f0
1 parent 44c2812
commit de0b1f0
Show file tree

Hide file tree

Showing 3 changed files with 488 additions and 28 deletions.
diff --git a/css/palette.css b/css/palette.css
@@ -4,6 +4,7 @@
     grid-gap: 6px;
 }
 .palette-element {
+    user-select: none;
     border-radius: 2px;
     height:50px;
     display: flex;

diff --git a/js/palette.js b/js/palette.js
@@ -4,6 +4,7 @@ import { colorBright } from "./utils/colors.js";
 import { DragDrop } from "./utils/dragDrop.js";
 import pubsub from "./pubsub.js";
 import globalState from "./globalState.js";
+const Selection = require("@simonwep/selection-js");
 
 class Palette {
     constructor() {
@@ -57,45 +58,52 @@ class Palette {
         //https://github.com/Simonwep/selection
         //FIXME: na razie nie aktualizowac do v2.3 bo ma problemy z zaznaczaniem
         //https://github.com/Simonwep/selection/issues/103
-        const Selection = require("@simonwep/selection-js");
+
         const selection = new Selection({
             class: 'selection',
-            frame: document,
             startThreshold: 10,
-            disableTouch: false,
-            mode: 'touch',
-            tapMode: 'native',
-            singleClick: true,
+
+            singleTap: {
+                allow: true,
+                intersect: 'touch'
+            },
+
+            allowTouch: false,
+            overlap: 'invert',
             selectables: [
                 ".palette-element"
             ],
             startareas: ['html'],
             boundaries: ['html'],
-            selectionAreaContainer: 'body',
-            scrollSpeedDivider: 10,
-            manualScrollSpeed: 750
+
+            scrolling: {
+                speedDivider: 10,
+                manualSpeed: 750
+            }
         })
-        .on('start', ({inst, selected, oe}) => {
-            if (!oe.ctrlKey && !oe.metaKey) {
-                for (const el of selected) {
-                    el.classList.remove('selected');
-                    inst.removeFromSelection(el);
-                }
-                inst.clearSelection();
+
+        selection.on('start', ({event, store}) => {
+            if (!event.ctrlKey && !event.metaKey) {
+                [...paletteElement.querySelectorAll(".selected")].forEach(el => el.classList.remove("selected"));
+                selection.clearSelection();
             }
         })
-        .on('move', ({changed: {removed, added}}) => {
-            for (const el of added) {
+
+        selection.on('move', ({event, store}) => {
+            for (const el of store.changed.added) {
                 el.classList.add('selected');
             }
-            for (const el of removed) {
+            for (const el of store.changed.removed) {
                 el.classList.remove('selected');
             }
             globalState.colors = [...paletteElement.querySelectorAll(".selected")].map(el => el.dataset.color);
             pubsub.emit("colorsSelected");
         })
-        .on('stop', ({inst}) => {
-            inst.keepSelection();
+
+        selection.on('stop', ({event, store}) => {
+            globalState.colors = [...paletteElement.querySelectorAll(".selected")].map(el => el.dataset.color);
+            pubsub.emit("colorsSelected");
+            selection.keepSelection();
         });
 
         const paletteElement = this.paletteElement;