diff --git a/package-lock.json b/package-lock.json index e70f151..38fe0b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@jalik/observer": "github:jalik/js-observer", + "@thisbeyond/solid-dnd": "^0.7.4", "babel-preset-solid": "^1.7.7", "solid-js": "^1.7.11" }, @@ -1309,6 +1310,14 @@ "@svgr/core": "^6.0.0" } }, + "node_modules/@thisbeyond/solid-dnd": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@thisbeyond/solid-dnd/-/solid-dnd-0.7.4.tgz", + "integrity": "sha512-jgV9EtR3gAtVsILG8p1OAGrhHIgnK4W04YxpyLgJRCDKEFYQWuDrMdUe8F5Kc6pcVXlC4IMXr4cB8fS2Ut3/Ow==", + "peerDependencies": { + "solid-js": "^1.5" + } + }, "node_modules/@types/codemirror": { "version": "5.60.8", "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-5.60.8.tgz", diff --git a/package.json b/package.json index 71e570a..d1cf5c1 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,7 @@ }, "dependencies": { "@jalik/observer": "github:jalik/js-observer", + "@thisbeyond/solid-dnd": "^0.7.4", "babel-preset-solid": "^1.7.7", "solid-js": "^1.7.11" } diff --git a/src/Globals.d.ts b/src/Globals.d.ts index d92ca48..21f6e92 100644 --- a/src/Globals.d.ts +++ b/src/Globals.d.ts @@ -9,6 +9,9 @@ declare module "solid-js" { interface Directives { // use:clickOutside clickOutside: ()=>void; + + draggable: boolean; + sortable: boolean; } } } diff --git a/src/Views/components/GridView.tsx b/src/Views/components/GridView.tsx index d3f757f..f9e6d7a 100644 --- a/src/Views/components/GridView.tsx +++ b/src/Views/components/GridView.tsx @@ -5,6 +5,8 @@ import { ObjectData } from "src/Data/ObjectData"; import { Cell } from "./Cell"; import { Header } from "./Header"; import { useGrid } from "./GridProvider"; +import { DragDropProvider, DragDropSensors } from "@thisbeyond/solid-dnd"; +import HeaderRow from "./HeaderRow"; // TODO: use https://github.com/minht11/solid-virtual-container @@ -29,14 +31,9 @@ const GridView: Component<{ data: ObjectData[], attributes: AttributeDefinition[ return
-
- { - (attribute, i) =>
- } - - - -
+ + +
{(item, i) => @@ -53,3 +50,6 @@ const GridView: Component<{ data: ObjectData[], attributes: AttributeDefinition[ } export default GridView; + + + diff --git a/src/Views/components/Header.tsx b/src/Views/components/Header.tsx index 18ecac0..9925d30 100644 --- a/src/Views/components/Header.tsx +++ b/src/Views/components/Header.tsx @@ -1,9 +1,14 @@ import { Component } from "solid-js"; import { useGrid } from "./GridProvider"; +import { + + createSortable, +} from "@thisbeyond/solid-dnd"; export const Header: Component<{ name: string; key: string; }> = (props) => { const gridContext = useGrid(); const { state, onHover, onExit, shift } = gridContext!; + const sortable = createSortable(props.key); const onMouseOver = (e) => { if (gridContext !== undefined) { @@ -21,48 +26,24 @@ export const Header: Component<{ name: string; key: string; }> = (props) => { const isHovering = () => { return state?.().hovering === props.key; } - const drag = (e:DragEvent) => { - if(e.dataTransfer){ - e.dataTransfer.setData("text", props.key); - - } - - } - const dragover = (e:DragEvent) => { - if(e.dataTransfer){ - e.dataTransfer.dropEffect = "move"; - const data = e.dataTransfer?.getData("text"); - if(data !== props.key){ - e.preventDefault(); - } else { - console.log(data, props.key) - } - } - - - } - const drop = (e:DragEvent) => { - const data = e.dataTransfer?.getData("text"); - e.preventDefault(); - data && shift(data, props.key) - } + return ( - return (
-
-
{props.name}
-
-
-
); +
+
+
{props.name}
+
+
+
+ ); }; diff --git a/src/Views/components/HeaderRow.tsx b/src/Views/components/HeaderRow.tsx new file mode 100644 index 0000000..d930a5b --- /dev/null +++ b/src/Views/components/HeaderRow.tsx @@ -0,0 +1,66 @@ +import { Component, For, createSignal } from "solid-js"; +import { Header } from "./Header"; +import { AttributeDefinition } from "src/Data/AttributeDefinition"; +import { DragDropProvider, DragDropSensors, DragOverlay,SortableProvider,closestCenter + } from "@thisbeyond/solid-dnd"; + + +const HeaderRow:Component<{colSizes: string, attributes: AttributeDefinition[]}> = (props) => { + const [activeItem, setActiveItem] = createSignal(null); + + const onDragStart = ({ draggable }) => { + + // console.log(`dragStart`, draggable); + setActiveItem(draggable.id); + } + + const onDragEnd = ({ draggable, droppable }) => { + if (draggable && droppable) { + const currentItems = props.attributes; + const fromIndex = currentItems.indexOf(draggable.id); + const toIndex = currentItems.indexOf(droppable.id); + console.log(`reorder`,draggable, droppable); + if (fromIndex !== toIndex) { + // const updatedItems = currentItems.slice(); + // updatedItems.splice(toIndex, 0, ...updatedItems.splice(fromIndex, 1)); + // setItems(updatedItems); + } + } + setActiveItem(null); + }; + + const activeHeader = () => { + const activeKey = activeItem(); + const attr = props.attributes.find(attr => attr.key === activeKey); + return attr?.displayName() + } + + const ids = () => props.attributes.map(at => at.key) + + return ( + + +
+ + {(attribute, i) =>
} + + + + {/*
*/} + {/*
{activeItem()}
*/} +
+ +
{activeHeader()}
+
+ +
+ + + ); +} + +export default HeaderRow; \ No newline at end of file diff --git a/styles.scss b/styles.scss index 0ee0ec3..d4bde4d 100644 --- a/styles.scss +++ b/styles.scss @@ -3,6 +3,15 @@ box-shadow: initial; } +.sets-header-draggable { + text-align: center; + background-color: var(--background-modifier-hover); + height: 36px; + font-family: var(--font-text); + line-height: var(--line-height-normal); + font-size: var(--font-text-size); +} + .sets-codeblock { padding: 12px; user-select: none; @@ -31,14 +40,12 @@ margin-left: 16px; margin-right: 16px; + + .sets-header-cell { text-align: center; cursor: grab; - // margin-left: 2px; - - &:first-child { - // margin-left: 2px; - } + &.hovered { background-color: var(--background-modifier-hover);