From e106d6efd9f3aa9f7140687e5ba8f6e9b565a68c Mon Sep 17 00:00:00 2001 From: lviguier Date: Fri, 2 Feb 2024 11:34:03 +0100 Subject: [PATCH] preview drop while dragging line in cdb --- bin/cdb.css | 44 +++++++++++++++++++++++++++++++++++ bin/cdb.less | 53 +++++++++++++++++++++++++++++++++++++++++- bin/style.css | 38 ------------------------------ bin/style.less | 45 ----------------------------------- hide/comp/cdb/Table.hx | 23 ++++++++++++++++++ 5 files changed, 119 insertions(+), 84 deletions(-) diff --git a/bin/cdb.css b/bin/cdb.css index 387ef5de8..5aeeafd76 100644 --- a/bin/cdb.css +++ b/bin/cdb.css @@ -425,6 +425,50 @@ min-width: 500px; min-height: 500px; } +.cdb .cdb-sheet .cdb-types { + position: absolute; + padding: 2px 2px 2px 2px; + display: flex; + background-color: #333333; + border-style: solid; + border-width: 1px; + border-color: #474747; + cursor: pointer; +} +.cdb .cdb-sheet .cdb-types select { + cursor: pointer; + min-width: 100px; + width: auto!important; +} +.cdb .cdb-sheet .cdb-types #dropdown-custom-type { + width: fit-content; +} +.cdb .cdb-sheet .cdb-types #parameters { + display: flex; +} +.cdb .cdb-sheet .cdb-types input { + cursor: pointer; + width: 50px; +} +.cdb .cdb-sheet .cdb-types input[type="checkbox"] { + width: auto; + height: auto; + margin: 0px 0px 0px 0px; + margin-top: 2px; + margin-bottom: 2px; +} +.cdb .cdb-sheet .cdb-types p { + margin-top: 2px; + margin-bottom: 2px; + padding-left: 2px; + padding-right: 2px; +} +.cdb .cdb-sheet .cdb-preview-drag { + position: absolute; + width: 100%; + height: 5px; + background-color: #54FF85; +} .cdb.cdb-obj-editor:not(.cdb-large .cdb.cdb-obj-editor) { margin-top: 10px; } diff --git a/bin/cdb.less b/bin/cdb.less index 4dddd6971..52d9e1aa9 100644 --- a/bin/cdb.less +++ b/bin/cdb.less @@ -55,7 +55,7 @@ } } - + .cdb-sheet { width : 100%; @@ -477,6 +477,57 @@ } } + .cdb-types { + position: absolute; + padding: 2px 2px 2px 2px; + display: flex; + background-color: #333333; + border-style: solid; + border-width: 1px; + border-color: #474747; + cursor:pointer; + + select { + cursor:pointer; + min-width: 100px; + width: auto!important; + } + + #dropdown-custom-type { + width:fit-content; + } + + #parameters { + display: flex; + } + + input { + cursor:pointer; + width: 50px; + } + + input[type="checkbox"] { + width: auto; + height: auto; + margin: 0px 0px 0px 0px; + margin-top: 2px; + margin-bottom: 2px; + } + + p { + margin-top: 2px; + margin-bottom: 2px; + padding-left: 2px; + padding-right: 2px; + } + } + + .cdb-preview-drag { + position: absolute; + width: 100%; + height: 5px; + background-color: #54FF85; + } } &.cdb-obj-editor { diff --git a/bin/style.css b/bin/style.css index 30ab2c379..c83cd6d77 100644 --- a/bin/style.css +++ b/bin/style.css @@ -1296,44 +1296,6 @@ input[type=checkbox]:checked:after { .identifiers :nth-child(2) { right: 20px; } -.cdb-types { - position: absolute; - padding: 2px 2px 2px 2px; - display: flex; - background-color: #333333; - border-style: solid; - border-width: 1px; - border-color: #474747; - cursor: pointer; -} -.cdb-types select { - cursor: pointer; - min-width: 100px; - width: auto!important; -} -.cdb-types #dropdown-custom-type { - width: fit-content; -} -.cdb-types #parameters { - display: flex; -} -.cdb-types input { - cursor: pointer; - width: 50px; -} -.cdb-types input[type="checkbox"] { - width: auto; - height: auto; - margin: 0px 0px 0px 0px; - margin-top: 2px; - margin-bottom: 2px; -} -.cdb-types p { - margin-top: 2px; - margin-bottom: 2px; - padding-left: 2px; - padding-right: 2px; -} /* Curve editor */ .hide-curve-editor { position: relative; diff --git a/bin/style.less b/bin/style.less index 7e8f0768e..296a7b001 100644 --- a/bin/style.less +++ b/bin/style.less @@ -1416,51 +1416,6 @@ input[type=checkbox] { } } -.cdb-types { - position: absolute; - padding: 2px 2px 2px 2px; - display: flex; - background-color: #333333; - border-style: solid; - border-width: 1px; - border-color: #474747; - cursor:pointer; - - select { - cursor:pointer; - min-width: 100px; - width: auto!important; - } - - #dropdown-custom-type { - width:fit-content; - } - - #parameters { - display: flex; - } - - input { - cursor:pointer; - width: 50px; - } - - input[type="checkbox"] { - width: auto; - height: auto; - margin: 0px 0px 0px 0px; - margin-top: 2px; - margin-bottom: 2px; - } - - p { - margin-top: 2px; - margin-bottom: 2px; - padding-left: 2px; - padding-right: 2px; - } -} - /* Curve editor */ @timelineHeight: 20px; .hide-curve-editor { diff --git a/hide/comp/cdb/Table.hx b/hide/comp/cdb/Table.hx index 872b3b5d1..21d6e8f13 100644 --- a/hide/comp/cdb/Table.hx +++ b/hide/comp/cdb/Table.hx @@ -22,6 +22,7 @@ class Table extends Component { public var view : cdb.DiffFile.SheetView; var separators : Array; + var previewDrop : Element; public var nestedIndex : Int = 0; @@ -53,6 +54,10 @@ class Table extends Component { } } refresh(); + + previewDrop = new Element('
'); + previewDrop.appendTo(root); + previewDrop.hide(); } public function getRealSheet() { @@ -185,15 +190,33 @@ class Table extends Component { } ide.registerUpdate(updateDrag); e.dataTransfer.effectAllowed = "move"; + previewDrop.show(); } headEl.ondrag = function(e:js.html.DragEvent) { if (hxd.Key.isDown(hxd.Key.ESCAPE)) { e.dataTransfer.dropEffect = "none"; e.preventDefault(); } + + // Update preview of where the line while be dropped + var pickedEl = js.Browser.document.elementFromPoint(e.clientX, e.clientY); + var pickedLine = null; + var parentEl = pickedEl; + while (parentEl != null) { + if (lines.filter((otherLine) -> otherLine.element.get()[0] == parentEl).length > 0) { + pickedLine = lines.filter((otherLine) -> otherLine.element.get()[0] == parentEl)[0]; + break; + } + parentEl = parentEl.parentElement; + } + if (pickedLine != null) { + var lineEl = editor.getLine(line.table.sheet, pickedLine.index).element; + previewDrop.css("top",'${pickedLine.index > line.index ? lineEl.position().top + lineEl.height() : lineEl.position().top}px'); + } } headEl.ondragend = function(e:js.html.DragEvent) { ide.unregisterUpdate(updateDrag); + previewDrop.hide(); if (e.dataTransfer.dropEffect == "none") return false; var pickedEl = js.Browser.document.elementFromPoint(e.clientX, e.clientY); var pickedLine = null;