wip - add selectto marquee

softmarshmallow · softmarshmallow · commit faec643732cb · 2022-11-23T08:24:51.000+09:00
diff --git a/editor-packages/editor-dashboard/components/dashboard-item-card-folder.tsx b/editor-packages/editor-dashboard/components/dashboard-item-card-folder.tsx
@@ -47,6 +47,7 @@ export const FolderCard = React.forwardRef(function (
   return (
     <DashboardItemCard
       ref={ref}
+      id={props.id}
       {...props}
       label={name}
       icon={<SquareIcon color="white" />}
diff --git a/editor-packages/editor-dashboard/components/dashboard-item-card-scene.tsx b/editor-packages/editor-dashboard/components/dashboard-item-card-scene.tsx
@@ -1,5 +1,4 @@
 import React, { useRef } from "react";
-import type { ReflectSceneNode } from "@design-sdk/figma-node";
 import { FigmaNodeBitmapView } from "@code-editor/canvas-renderer-bitmap";
 import { SceneNodeIcon } from "@code-editor/node-icons";
 import { useInViewport } from "react-in-viewport";
@@ -76,6 +75,7 @@ export const SceneCard = React.forwardRef(function (
   return (
     <DashboardItemCard
       ref={ref}
+      id={props.id}
       {...props}
       label={scene.name}
       icon={<SceneNodeIcon type={scene.type} color="white" />}
diff --git a/editor-packages/editor-dashboard/components/dashboard-item-card.tsx b/editor-packages/editor-dashboard/components/dashboard-item-card.tsx
@@ -2,7 +2,13 @@ import React from "react";
 import styled from "@emotion/styled";
 import Highlighter from "react-highlight-words";
 
+const DASHBOARD_ITEM_CARD_CLASSNAME = "dashboard-item-card";
+export const DASHBOARD_ITEM_CARD_SELECTOR = "." + DASHBOARD_ITEM_CARD_CLASSNAME;
+export const DASHBOARD_ITEM_PATH_ATTRIBUTE = "data-path";
+
 export interface DashboardItemCardProps {
+  id?: string;
+  path: string;
   selected?: boolean;
   onClick?: (e) => void;
   onDoubleClick?: () => void;
@@ -19,8 +25,10 @@ export interface DashboardItemCardProps {
 
 export const DashboardItemCard = React.forwardRef(function (
   {
+    id,
     onClick,
     onDoubleClick,
+    path,
     selected,
     isOver,
     style = {},
@@ -31,9 +39,17 @@ export const DashboardItemCard = React.forwardRef(function (
   }: DashboardItemCardProps,
   ref: React.Ref<HTMLDivElement>
 ) {
+  const _p = {
+    // the data-path works as a unique identifier of the item for drag selection ev listeners
+    id: id,
+    className: DASHBOARD_ITEM_CARD_CLASSNAME,
+    [DASHBOARD_ITEM_PATH_ATTRIBUTE]: path,
+  };
+
   return (
     <Card
       ref={ref}
+      {..._p}
       onClick={onClick}
       onDoubleClick={onDoubleClick}
       data-selected={selected}
diff --git a/editor-packages/editor-dashboard/core/provider.tsx b/editor-packages/editor-dashboard/core/provider.tsx
@@ -74,7 +74,7 @@ export function useDashboard() {
   const [state, dispatch] = useDashboardState();
 
   const selectNode = useCallback(
-    (node: string) => {
+    (node: string | string[]) => {
       editordispatch({
         type: "select-node",
         node,
diff --git a/editor-packages/editor-dashboard/package.json b/editor-packages/editor-dashboard/package.json
@@ -14,6 +14,7 @@
     "react-dnd": "16.0.1"
   },
   "dependencies": {
-    "@radix-ui/react-collapsible": "^1.0.1"
+    "@radix-ui/react-collapsible": "^1.0.1",
+    "react-selecto": "^1.20.2"
   }
 }
diff --git a/editor-packages/editor-dashboard/scaffold/editor-dashboard.tsx b/editor-packages/editor-dashboard/scaffold/editor-dashboard.tsx
@@ -6,6 +6,8 @@ import {
   SectionHeaderAction,
   SectionHeader,
   DashboardItemCardProps,
+  DASHBOARD_ITEM_CARD_SELECTOR,
+  DASHBOARD_ITEM_PATH_ATTRIBUTE,
 } from "../components";
 import { EditorHomeHeader } from "./editor-dashboard-header";
 import { DndProvider, useDrag, useDrop } from "react-dnd";
@@ -21,6 +23,7 @@ import {
   DashboardFolderItem,
   SceneItem,
 } from "../core";
+import Selecto from "react-selecto";
 
 export function Dashboard() {
   const {
@@ -63,6 +66,7 @@ export function Dashboard() {
       <EditorHomeHeader onQueryChange={handleQuery} />
 
       <div
+        id={"selection-container"}
         style={{
           marginTop: 80,
           padding: 40,
@@ -107,6 +111,35 @@ export function Dashboard() {
           onEnter={enterNode}
           headerActions={headerActions}
         />
+        <Selecto
+          container={document.querySelector("#selection-container")}
+          dragContainer={document.querySelector("#selection-container")}
+          selectableTargets={[DASHBOARD_ITEM_CARD_SELECTOR]}
+          selectByClick={true}
+          selectFromInside={true}
+          continueSelect={true}
+          toggleContinueSelect={"shift"}
+          keyContainer={window}
+          hitRate={0}
+          scrollOptions={{
+            container: document.querySelector(
+              "#selection-container"
+            ) as HTMLDivElement,
+          }}
+          onSelect={(e) => {
+            // TODO: incomplete
+            e.added.forEach((el) => {
+              const id = el.id;
+              // const path = el.getAttribute(DASHBOARD_ITEM_PATH_ATTRIBUTE);
+              selectNode([...selection, id]);
+            });
+            e.removed.forEach((el) => {
+              const id = el.id;
+              // const path = el.getAttribute(DASHBOARD_ITEM_PATH_ATTRIBUTE);
+              selectNode(selection.filter((p) => p !== id));
+            });
+          }}
+        />
       </div>
     </Providers>
   );
diff --git a/yarn.lock b/yarn.lock
@@ -1290,6 +1290,13 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@cfcs/core@^0.0.6":
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/@cfcs/core/-/core-0.0.6.tgz#9f8499dcd2ad29fd96d8fa72055411cd4a249121"
+  integrity sha512-FxfJMwoLB8MEMConeXUCqtMGqxdtePQxRBOiGip9ULcYYam3WfCgoY6xdnMaSkYvRvmosp5iuG+TiPofm65+Pw==
+  dependencies:
+    "@egjs/component" "^3.0.2"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1412,6 +1419,16 @@
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
   integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
 
+"@daybrush/utils@1.6.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@daybrush/utils/-/utils-1.6.0.tgz#0dfd2c360764f63380df4ec0d44e176c69f7bbc3"
+  integrity sha512-9MjMoOLl1U+l8lXByN3BbLZXf+mktoLyeb6t78Jz2WZ7LRldK0FNg8oW//9giO2hHCUyxS7LX6jS1hToGIfRWA==
+
+"@daybrush/utils@^1.0.0", "@daybrush/utils@^1.1.1", "@daybrush/utils@^1.3.1", "@daybrush/utils@^1.4.0", "@daybrush/utils@^1.7.1":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@daybrush/utils/-/utils-1.10.0.tgz#2a2235269b960b7ffaf05ca2e75379ea1fb58204"
+  integrity sha512-IDT0DWAGcjxb2+WMr8pHrVTkHVKdilBumX1SubXJUlowN4rMSLphwDxvMNfv+vQOrdCPXSoPVZ3mhfrHsQ9Xow==
+
 "@design-sdk/asset-repository@^0.0.43":
   version "0.0.43"
   resolved "https://registry.yarnpkg.com/@design-sdk/asset-repository/-/asset-repository-0.0.43.tgz#7afc704da2b642474980a51be884215a2631780e"
@@ -1656,6 +1673,23 @@
   dependencies:
     tslib "^2.0.0"
 
+"@egjs/children-differ@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@egjs/children-differ/-/children-differ-1.0.1.tgz#5465fa80671d5ca3564ebe912f48b05b3e8a14fd"
+  integrity sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==
+  dependencies:
+    "@egjs/list-differ" "^1.0.0"
+
+"@egjs/component@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@egjs/component/-/component-3.0.2.tgz#c56794fcf1b2cb2768d09b021444779e54d0de1b"
+  integrity sha512-Mze3mwEE19+dERrimg0JVLtpOHG4AC+LOuKqvF4qGZjn0k23ZbNI7b/gy1LFR63LigC2b8k70aDjy8xoT+WNPA==
+
+"@egjs/list-differ@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@egjs/list-differ/-/list-differ-1.0.0.tgz#2277aff52e3e4bd9318d5c30ffc3ba3b6216f05e"
+  integrity sha512-HsbMKc0ZAQH+EUeCmI/2PvTYSybmkaWwakU8QGDYYgMVIg9BQ5sM0A0Nnombjxo2+JzXHxmH+jw//yGX+y6GYw==
+
 "@emotion-icons/bootstrap@3.27.0":
   version "3.27.0"
   resolved "https://registry.yarnpkg.com/@emotion-icons/bootstrap/-/bootstrap-3.27.0.tgz#53cde4cc341e0aa79f9a717ee78f2502c9bc1ae5"
@@ -5982,6 +6016,28 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@scena/dragscroll@^1.2.1":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@scena/dragscroll/-/dragscroll-1.3.0.tgz#3a9f30a4153eeb2d25df22004ddf602db6d55583"
+  integrity sha512-UlK/g9IX8fJ8+YczqfUT7WDjx/5KKQMU2/uZLYLXV8FWuzWS2WWpt2u1G6KCIF65380oCnCYOs7nOrYpedsOaQ==
+  dependencies:
+    "@daybrush/utils" "1.6.0"
+    "@scena/event-emitter" "^1.0.2"
+
+"@scena/event-emitter@^1.0.2", "@scena/event-emitter@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@scena/event-emitter/-/event-emitter-1.0.5.tgz#047e3acef93cf238d7ce3a8cc5a12ec6bd9c3bb1"
+  integrity sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==
+  dependencies:
+    "@daybrush/utils" "^1.1.1"
+
+"@scena/matrix@^1.0.0":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@scena/matrix/-/matrix-1.1.1.tgz#5297f71825c72e2c2c8f802f924f482ed200c43c"
+  integrity sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==
+  dependencies:
+    "@daybrush/utils" "^1.4.0"
+
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.51.tgz#645f33fe4e02defe26f2f5c0410e1c094eac7f5f"
@@ -10317,6 +10373,22 @@ css-selector-tokenizer@^0.7.0:
     cssesc "^3.0.0"
     fastparse "^1.1.2"
 
+css-styled@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/css-styled/-/css-styled-1.0.1.tgz#803dc2bf615954805a56679cc500065c756ad525"
+  integrity sha512-psJCbNDPPusDBWH/gszP6BetPh577QaqpvaysTNPitxX0nxdGiTgELiOCus0gZ0yXk3gvjShBrFP07nvn58/TQ==
+  dependencies:
+    "@daybrush/utils" "^1.0.0"
+    string-hash "^1.1.3"
+
+css-to-mat@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/css-to-mat/-/css-to-mat-1.0.3.tgz#5c0d9b572b68b57fa8ba0b1a4c572c18ce3b2b60"
+  integrity sha512-HADRhVqPc8wFqEp6ClK+uuPYg+FMBinNo2ReLyI/KQCncmHPJ60o5zldyJG7NjsTqXWbdfGJO51jnoxfMvWJiA==
+  dependencies:
+    "@daybrush/utils" "^1.3.1"
+    "@scena/matrix" "^1.0.0"
+
 css-what@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
@@ -12072,6 +12144,11 @@ framesync@6.0.1:
   dependencies:
     tslib "^2.1.0"
 
+framework-utils@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/framework-utils/-/framework-utils-1.1.0.tgz#a3b528bce838dfd623148847dc92371b09d0da2d"
+  integrity sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg==
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -12262,6 +12339,14 @@ gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
+gesto@^1.13.1:
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/gesto/-/gesto-1.13.4.tgz#5f53608dfac589e21acd2b905f51fb259f15a77f"
+  integrity sha512-TkXGgv8nC/IIjOO2dMrgCNovSnuRfPTJybmtwponzGihCje8QgLEdMf+h/RERu6O+wq8FZTSJ6ihIO9ytt4/Qg==
+  dependencies:
+    "@daybrush/utils" "^1.7.1"
+    "@scena/event-emitter" "^1.0.2"
+
 get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
@@ -14699,6 +14784,21 @@ just-diff@^5.0.1:
   resolved "https://registry.yarnpkg.com/just-diff/-/just-diff-5.1.1.tgz#8da6414342a5ed6d02ccd64f5586cbbed3146202"
   integrity sha512-u8HXJ3HlNrTzY7zrYYKjNEfBlyjqhdBkoyTVdjtn7p02RJD5NvR8rIClzeGA7t+UYP1/7eAkWNLU0+P3QrEqKQ==
 
+keycode@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.1.tgz#09c23b2be0611d26117ea2501c2c391a01f39eff"
+  integrity sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==
+
+keycon@^1.2.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/keycon/-/keycon-1.3.2.tgz#4def6e13ee450b22d3d6a8eaf7215dda8ecbde97"
+  integrity sha512-rNdi3Izqkp4r2P+f55Nrk8uCdEFS+eiMoUVNuIJOQ/qsTM0xuMvk3sv5E41pjfrClCGlC+T72MpXf6O+k9UXuA==
+  dependencies:
+    "@cfcs/core" "^0.0.6"
+    "@daybrush/utils" "^1.7.1"
+    "@scena/event-emitter" "^1.0.2"
+    keycode "^2.2.0"
+
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
@@ -16775,6 +16875,13 @@ otplib@^12.0.1:
     "@otplib/preset-default" "^12.0.1"
     "@otplib/preset-v11" "^12.0.1"
 
+overlap-area@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/overlap-area/-/overlap-area-1.1.0.tgz#1fcaa21bdb9cb1ace973d9aa299ae6b56557a4c2"
+  integrity sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==
+  dependencies:
+    "@daybrush/utils" "^1.7.1"
+
 p-all@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-all/-/p-all-2.1.0.tgz#91419be56b7dee8fe4c5db875d55e0da084244a0"
@@ -18448,6 +18555,13 @@ react-resizable@^3.0.1, react-resizable@^3.0.4:
     prop-types "15.x"
     react-draggable "^4.0.3"
 
+react-selecto@^1.20.2:
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/react-selecto/-/react-selecto-1.20.2.tgz#494bd4e47d9881a9871a91d8693300f9c5b16414"
+  integrity sha512-fLE3fAymw9Kz9Y5gB2+DqtJ59YssS+gnalJ1EptWbwINJK3DwPj9e3lw8O76s2ctbZ92TtrjaLXWbfU+MiaT1A==
+  dependencies:
+    selecto "~1.20.2"
+
 react-spring@^9.3.2:
   version "9.5.5"
   resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.5.5.tgz#314009a65efc04d0ef157d3d60590dbb9de65f3c"
@@ -19299,6 +19413,22 @@ screen-size-specs@0.0.1:
   resolved "https://registry.yarnpkg.com/screen-size-specs/-/screen-size-specs-0.0.1.tgz#b2ca8884a4be9379d9162b0ecf68e9e4ce7aaf62"
   integrity sha512-AkY740td9TAAQOacmsjfwCGg8yWvs4NzPZxibQczfcBy5S1oZh/dYX9a2uBPAE+0fQa2pJS8SUCkPTnfvmtwbg==
 
+selecto@~1.20.2:
+  version "1.20.2"
+  resolved "https://registry.yarnpkg.com/selecto/-/selecto-1.20.2.tgz#196e7876f72675858ff814747701cd482b57e187"
+  integrity sha512-nhsBUvONr8DtRmoxIEzAYTLJm8U8XVT2KK6HWiAEjUfz/Bd2c8MJBilGJ34ra8/UDpSZnXYQkn3DH/GaTXZTQQ==
+  dependencies:
+    "@daybrush/utils" "^1.7.1"
+    "@egjs/children-differ" "^1.0.1"
+    "@scena/dragscroll" "^1.2.1"
+    "@scena/event-emitter" "^1.0.5"
+    css-styled "^1.0.0"
+    css-to-mat "^1.0.3"
+    framework-utils "^1.1.0"
+    gesto "^1.13.1"
+    keycon "^1.2.0"
+    overlap-area "^1.1.0"
+
 selenium-webdriver@4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-4.5.0.tgz#7e20d0fc038177970dad81159950c12f7411ac0d"
@@ -19929,6 +20059,11 @@ strict-uri-encode@^2.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==
 
+string-hash@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
+  integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
+
 string-length@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@`
`14`	`14`	`"react-dnd": "16.0.1"`
`15`	`15`	`},`
`16`	`16`	`"dependencies": {`
`17`		`- "@radix-ui/react-collapsible": "^1.0.1"`
	`17`	`+ "@radix-ui/react-collapsible": "^1.0.1",`
	`18`	`+ "react-selecto": "^1.20.2"`
`18`	`19`	`}`
`19`	`20`	`}`