From 5d129229c362fd534920d0c34641caed83dfd94b Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 3 Jan 2023 16:58:19 +0100
Subject: [PATCH] Rework DropList to use Material library
The native browser-drag-and-drop does not work in tablets. Therefore
back to Material which works.
Features are moved over with the exception of replacing items.
- Copy-Lists now always allow putting items back.
- Renew example files
- Update versions and notes
---
docs/release-notes-editor.md | 7 +
docs/release-notes-player.md | 2 +-
example_data/droplist/dnd1.json | 1 -
example_data/droplist/dnd2.json | 1 -
example_data/droplist/dnd3.json | 1 -
example_data/droplist/dnd4.json | 1 -
example_data/droplist/export.json | 1 +
example_data/droplist/sortierlisten.json | 1 -
package.json | 4 +-
.../cloze/cloze.component.ts | 12 +-
.../cloze/compound-child-overlay.component.ts | 3 +-
.../input-elements/drop-list.component.ts | 417 +++++-------------
.../elements/compound-elements/cloze/cloze.ts | 2 +-
.../elements/input-elements/drop-list.ts | 8 +-
projects/common/shared.module.ts | 8 +-
.../canvas/overlays/canvas-element-overlay.ts | 8 +-
.../drop-list-properties.component.ts | 6 -
projects/editor/src/assets/i18n/de.json | 1 -
projects/player/src/styles.css | 8 +
19 files changed, 140 insertions(+), 352 deletions(-)
delete mode 100644 example_data/droplist/dnd1.json
delete mode 100644 example_data/droplist/dnd2.json
delete mode 100644 example_data/droplist/dnd3.json
delete mode 100644 example_data/droplist/dnd4.json
create mode 100644 example_data/droplist/export.json
delete mode 100644 example_data/droplist/sortierlisten.json
diff --git a/docs/release-notes-editor.md b/docs/release-notes-editor.md
index 57b3ffdaf..f4a62292c 100644
--- a/docs/release-notes-editor.md
+++ b/docs/release-notes-editor.md
@@ -1,5 +1,12 @@
Editor
======
+## 1.37.0-beta
+### Verbesserungen
+- Erneute Ãœberarbeitung von Ablegelisten
+ - Unterscheidung zwische Sortierlisten und normalen Ablegelisten existiert nicht mehr.
+ Alle Listen lassen Umsortieren zu.
+ - Zurücklegen in Listen mit kopierenden Elementen ist nun standardmäßiges, unabänderliches Verhalten.
+
## 1.36.2
- Setzt für Eingabe- und Optionsfelder in Lückentexten den voreingestellten Wert für die Zeilenhöhe auf 100%
diff --git a/docs/release-notes-player.md b/docs/release-notes-player.md
index 2d282f8bb..e8afd4f9d 100644
--- a/docs/release-notes-player.md
+++ b/docs/release-notes-player.md
@@ -1,6 +1,6 @@
Player
======
-## Next
+## 1.30.0-beta
### Fehlerbehebungen
- Behebt Probleme bei Lückentexten mit Knopfelementen
Bei Lückentexte mit mehreren Elementen und mindestens einem Knopfelement,
diff --git a/example_data/droplist/dnd1.json b/example_data/droplist/dnd1.json
deleted file mode 100644
index 075844082..000000000
--- a/example_data/droplist/dnd1.json
+++ /dev/null
@@ -1 +0,0 @@
-{"type":"aspect-unit-definition","pages":[{"sections":[{"elements":[{"width":180,"height":98,"type":"text","id":"text_1","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Normale Liste</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_1","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_1"},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_2"},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_3"}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"isSortList":false,"connectedTo":["drop-list_2","drop-list_3","drop-list_4"],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":true,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":98,"type":"text","id":"text_2","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Liste 2</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_2","label":"Beschriftung","value":[{"text":"ddd","imgSrc":null,"imgPosition":"above","id":"value_4"},{"text":"eee","imgSrc":null,"imgPosition":"above","id":"value_5"},{"text":"fff","imgSrc":null,"imgPosition":"above","id":"value_6"}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"sorting":false,"connectedTo":["drop-list_1","drop-list_3"],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":true,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":98,"type":"text","id":"text_3","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Leere Liste</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_3","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"sorting":false,"connectedTo":["drop-list_1","drop-list_2"],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null},{"elements":[{"width":180,"height":200,"type":"cloze","id":"cloze_1","document":{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":"left","indent":null,"indentSize":20,"hangingIndent":false,"margin":0},"content":[{"type":"text","text":"Lorem Ipsum"},{"type":"ToggleButton","attrs":{"model":{"width":100,"height":25,"type":"toggle-button","id":"toggle-button_1","label":"Beschriftung","value":null,"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"options":[],"strikeOtherOptions":false,"strikeSelectedOption":false,"verticalOrientation":false,"dynamicWidth":true,"styling":{"lineHeight":135,"selectionColor":"#c7f3d0","backgroundColor":"transparent","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}}},{"type":"DropList","attrs":{"model":{"width":150,"height":30,"type":"drop-list","id":"drop-list_4","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"sorting":false,"connectedTo":["drop-list_1"],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}}}]}]},"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"lineHeight":150,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50}],"version":"3.8.0"}
diff --git a/example_data/droplist/dnd2.json b/example_data/droplist/dnd2.json
deleted file mode 100644
index c740cdceb..000000000
--- a/example_data/droplist/dnd2.json
+++ /dev/null
@@ -1 +0,0 @@
-{"type":"aspect-unit-definition","pages":[{"sections":[{"elements":[{"width":180,"height":98,"type":"text","id":"text_1","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Sortierliste 1</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_1","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_5"},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_6"},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_7"},{"text":"ddd","imgSrc":null,"imgPosition":"above","id":"value_8"}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"isSortList":true,"connectedTo":[],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null},{"elements":[{"width":180,"height":98,"type":"text","id":"text_2","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indent=\"0\" indentsize=\"20\">Sortierliste 2</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":false,"xPosition":10,"yPosition":10,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":865,"height":367,"type":"drop-list","id":"drop-list_2","label":"Beschriftung","value":[{"text":"eee","imgSrc":null,"id":"value_1"},{"text":"fff","imgSrc":null,"id":"value_2"},{"text":"ggg","imgSrc":null,"id":"value_3"},{"text":"hhh","imgSrc":null,"id":"value_4"}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"sorting":true,"connectedTo":[],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":false,"xPosition":10,"yPosition":10,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":false,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50}],"version":"3.8.0"}
diff --git a/example_data/droplist/dnd3.json b/example_data/droplist/dnd3.json
deleted file mode 100644
index ce6a8b62e..000000000
--- a/example_data/droplist/dnd3.json
+++ /dev/null
@@ -1 +0,0 @@
-{"type":"aspect-unit-definition","pages":[{"sections":[{"elements":[{"width":180,"height":98,"type":"text","id":"text_1","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Sortierliste 1</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_1","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_5"},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_6"},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_7"},{"text":"ddd","imgSrc":null,"imgPosition":"above","id":"value_8"}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"isSortList":true,"connectedTo":[],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null},{"elements":[{"width":180,"height":98,"type":"text","id":"text_2","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indent=\"0\" indentsize=\"20\">Sortierliste 2</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":false,"xPosition":10,"yPosition":10,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":865,"height":367,"type":"drop-list","id":"drop-list_2","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"sorting":true,"connectedTo":[],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":false,"xPosition":10,"yPosition":10,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":false,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50}],"version":"3.8.0"}
diff --git a/example_data/droplist/dnd4.json b/example_data/droplist/dnd4.json
deleted file mode 100644
index 0c20918be..000000000
--- a/example_data/droplist/dnd4.json
+++ /dev/null
@@ -1 +0,0 @@
-{"type":"aspect-unit-definition","pages":[{"sections":[{"elements":[{"width":180,"height":100,"type":"drop-list","id":"drop-list_1","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_1"},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_2"},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_3"}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"isSortList":false,"connectedTo":["drop-list_2"],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":200,"type":"cloze","id":"cloze_1","document":{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":"left","indent":null,"indentSize":20,"hangingIndent":false,"margin":0},"content":[{"type":"text","text":"Lorem Ipsum"},{"type":"DropList","attrs":{"model":{"width":150,"height":30,"type":"drop-list","id":"drop-list_2","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"sorting":false,"connectedTo":["drop-list_1"],"copyOnDrop":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}}}]}]},"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"lineHeight":150,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50}],"version":"3.8.0"}
diff --git a/example_data/droplist/export.json b/example_data/droplist/export.json
new file mode 100644
index 000000000..3707bb35b
--- /dev/null
+++ b/example_data/droplist/export.json
@@ -0,0 +1 @@
+{"type":"aspect-unit-definition","pages":[{"sections":[{"elements":[{"width":180,"height":100,"type":"drop-list","id":"drop-list_1","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_1","returnToOriginOnReplacement":false},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_2","returnToOriginOnReplacement":false},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_3","returnToOriginOnReplacement":false}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_2","drop-list_3"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":60,"type":"button","id":"button_1","label":"Knopf","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_2","label":"Beschriftung","value":[{"text":"ddd","imgSrc":null,"imgPosition":"above","id":"value_4","returnToOriginOnReplacement":false}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_1","drop-list_3"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":60,"type":"button","id":"button_2","label":"Knopf","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_3","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_1","drop-list_2"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":98,"type":"text","id":"text_1","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Alle Listen sind verbunden; keine weiteren Besonderheiten</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null,"activeAfterIdDelay":0}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50},{"sections":[{"elements":[{"width":180,"height":100,"type":"drop-list","id":"drop-list_8","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_20","returnToOriginOnReplacement":false},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_21","returnToOriginOnReplacement":false},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_22","returnToOriginOnReplacement":false}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_13","drop-list_14"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":true,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":60,"type":"button","id":"button_8","label":"Knopf","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_13","label":"Beschriftung","value":[{"text":"ddd","imgSrc":null,"imgPosition":"above","id":"value_23","returnToOriginOnReplacement":false}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_8","drop-list_14"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":true,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":60,"type":"button","id":"button_9","label":"Nur ein Element","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_14","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":true,"connectedTo":["drop-list_8","drop-list_13"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":98,"type":"text","id":"text_5","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indent=\"0\" indentsize=\"20\">Alle Listen sind verbunden; Hervorhebung aktiv bei den ersten beiden Listen</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null,"activeAfterIdDelay":0}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50},{"sections":[{"elements":[{"width":180,"height":100,"type":"drop-list","id":"drop-list_4","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_5","returnToOriginOnReplacement":false},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_24","returnToOriginOnReplacement":false},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_7","returnToOriginOnReplacement":false}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_5"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":true,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":60,"type":"button","id":"button_3","label":"Nur ein Element erlaubt","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_5","label":"Beschriftung","value":[{"text":"ddd","imgSrc":null,"imgPosition":"above","id":"value_8","returnToOriginOnReplacement":false}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":true,"connectedTo":["drop-list_4"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":60,"type":"button","id":"button_4","label":"Nicht verbunden","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_6","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":[],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":98,"type":"text","id":"text_2","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indent=\"0\" indentsize=\"20\">Alle Listen sind verbunden; keine weiteren Besonderheiten; Hervorhebung bei der ersten</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null,"activeAfterIdDelay":0}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50},{"sections":[{"elements":[{"width":180,"height":98,"type":"text","id":"text_3","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Lückentext</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_7","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_9","returnToOriginOnReplacement":false},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_10","returnToOriginOnReplacement":false}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_9"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":60,"type":"button","id":"button_5","label":"Knopf","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":200,"type":"cloze","id":"cloze_1","document":{"type":"doc","content":[{"type":"paragraph","attrs":{"textAlign":"left","indent":null,"indentSize":20,"hangingIndent":false,"margin":0},"content":[{"type":"text","text":"Textfield"},{"type":"TextField","attrs":{"model":{"width":150,"height":30,"type":"text-field-simple","id":"text-field-simple_1","label":"Beschriftung","value":null,"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"inputAssistancePreset":null,"inputAssistanceCustomKeys":"","inputAssistancePosition":"floating","inputAssistanceFloatingStartPosition":"startBottom","restrictedToInputAssistanceChars":true,"hasArrowKeys":false,"showSoftwareKeyboard":false,"softwareKeyboardShowFrench":false,"minLength":null,"minLengthWarnMessage":"Eingabe zu kurz","maxLength":null,"maxLengthWarnMessage":"Eingabe zu lang","isLimitedToMaxLength":false,"pattern":null,"patternWarnMessage":"Eingabe entspricht nicht der Vorgabe","clearable":false,"styling":{"lineHeight":100,"backgroundColor":"transparent","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}}},{"type":"text","text":"Toggle"},{"type":"ToggleButton","attrs":{"model":{"width":180,"height":30,"type":"toggle-button","id":"toggle-button_1","label":"Beschriftung","value":null,"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"options":[],"strikeOtherOptions":false,"strikeSelectedOption":false,"verticalOrientation":false,"dynamicWidth":true,"styling":{"lineHeight":100,"selectionColor":"#c7f3d0","backgroundColor":"transparent","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}}},{"type":"text","text":"Dnd"},{"type":"DropList","attrs":{"model":{"width":150,"height":30,"type":"drop-list","id":"drop-list_9","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_7"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}}}]}]},"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"lineHeight":150,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null,"activeAfterIdDelay":0}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50},{"sections":[{"elements":[{"width":180,"height":98,"type":"text","id":"text_4","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Anordnung</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_10","label":"Beschriftung","value":[{"text":"aaaa","imgSrc":null,"imgPosition":"above","id":"value_11","returnToOriginOnReplacement":false},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_12","returnToOriginOnReplacement":false},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_13","returnToOriginOnReplacement":false}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_11","drop-list_12"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":60,"type":"button","id":"button_6","label":"Knopf","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_11","label":"Beschriftung","value":[{"text":"ddd","imgSrc":null,"imgPosition":"above","id":"value_14","returnToOriginOnReplacement":false},{"text":"eee","imgSrc":null,"imgPosition":"above","id":"value_15","returnToOriginOnReplacement":false},{"text":"fff","imgSrc":null,"imgPosition":"above","id":"value_16","returnToOriginOnReplacement":false}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_10","drop-list_12"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"horizontal","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":60,"type":"button","id":"button_7","label":"Knopf","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_12","label":"Beschriftung","value":[{"text":"ggg","imgSrc":null,"imgPosition":"above","id":"value_17","returnToOriginOnReplacement":false},{"text":"hhh","imgSrc":null,"imgPosition":"above","id":"value_18","returnToOriginOnReplacement":false},{"text":"iii","imgSrc":null,"imgPosition":"above","id":"value_19","returnToOriginOnReplacement":false}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_10","drop-list_11"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"flex","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null,"activeAfterIdDelay":0}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50},{"sections":[{"elements":[{"width":180,"height":100,"type":"drop-list","id":"drop-list_15","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_25","returnToOriginOnReplacement":false},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_26","returnToOriginOnReplacement":false},{"text":"ccc","imgSrc":null,"imgPosition":"above","id":"value_27","returnToOriginOnReplacement":false}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_16","drop-list_17"],"copyOnDrop":true,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":98,"type":"text","id":"text_6","text":"<p style=\"padding-left: 0px; text-indent: 0px; margin-bottom: 0px; margin-top: 0\" indentsize=\"20\">Copy</p>","highlightableOrange":false,"highlightableTurquoise":false,"highlightableYellow":false,"hasSelectionPopup":true,"columnCount":1,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":1,"gridColumnRange":1,"gridRow":1,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"transparent","lineHeight":135,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":60,"type":"button","id":"button_10","label":"Knopf","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_16","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"connectedTo":["drop-list_15","drop-list_17"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":60,"type":"button","id":"button_11","label":"onlyOne","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_17","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":true,"connectedTo":["drop-list_15","drop-list_16"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#ededed","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null,"activeAfterIdDelay":0}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50}],"version":"3.9.0"}
\ No newline at end of file
diff --git a/example_data/droplist/sortierlisten.json b/example_data/droplist/sortierlisten.json
deleted file mode 100644
index ab5acbc40..000000000
--- a/example_data/droplist/sortierlisten.json
+++ /dev/null
@@ -1 +0,0 @@
-{"type":"aspect-unit-definition","pages":[{"sections":[{"elements":[{"width":180,"height":100,"type":"drop-list","id":"drop-list_1","label":"Beschriftung","value":[{"text":"aaa","imgSrc":null,"imgPosition":"above","id":"value_1","returnToOriginOnReplacement":false},{"text":"bbb","imgSrc":null,"imgPosition":"above","id":"value_2","returnToOriginOnReplacement":false},{"text":"allow replace","imgSrc":null,"id":"value_3","returnToOriginOnReplacement":true,"originListID":"drop-list_1","originListIndex":2}],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"isSortList":true,"connectedTo":["drop-list_2"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}},{"width":180,"height":60,"type":"button","id":"button_1","label":"only one","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_2","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":true,"isSortList":true,"connectedTo":["drop-list_1","drop-list_3"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null,"activeAfterIdDelay":0},{"elements":[{"width":180,"height":60,"type":"button","id":"button_2","label":"Navigationsknopf","imageSrc":null,"asLink":false,"action":null,"actionParam":null,"position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":false,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"borderRadius":0,"fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false,"backgroundColor":"#d3d3d3"}},{"width":180,"height":100,"type":"drop-list","id":"drop-list_3","label":"Beschriftung","value":[],"required":false,"requiredWarnMessage":"Eingabe erforderlich","readOnly":false,"onlyOneItem":false,"isSortList":true,"connectedTo":["drop-list_1","drop-list_2"],"copyOnDrop":false,"deleteDroppedItemWithSameID":false,"orientation":"vertical","highlightReceivingDropList":false,"highlightReceivingDropListColor":"#006064","position":{"fixedSize":false,"dynamicPositioning":true,"xPosition":0,"yPosition":0,"useMinHeight":true,"gridColumn":null,"gridColumnRange":1,"gridRow":null,"gridRowRange":1,"marginLeft":0,"marginRight":0,"marginTop":0,"marginBottom":0,"zIndex":0},"styling":{"backgroundColor":"#f4f4f2","itemBackgroundColor":"#c9e0e0","fontColor":"#000000","font":"Roboto","fontSize":20,"bold":false,"italic":false,"underline":false}}],"height":400,"backgroundColor":"#ffffff","dynamicPositioning":true,"autoColumnSize":true,"autoRowSize":true,"gridColumnSizes":"1fr 1fr","gridRowSizes":"1fr","activeAfterID":null,"activeAfterIdDelay":0}],"hasMaxWidth":false,"maxWidth":900,"margin":30,"backgroundColor":"#ffffff","alwaysVisible":false,"alwaysVisiblePagePosition":"left","alwaysVisibleAspectRatio":50}],"version":"3.8.0"}
\ No newline at end of file
diff --git a/package.json b/package.json
index bbe5f292f..e737910a0 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
{
"name": "verona-modules-aspect",
"config": {
- "player_version": "1.29.3",
- "editor_version": "1.36.2",
+ "player_version": "1.30.0-beta",
+ "editor_version": "1.37.0-beta",
"unit_definition_version": "3.9.0"
},
"scripts": {
diff --git a/projects/common/components/compound-elements/cloze/cloze.component.ts b/projects/common/components/compound-elements/cloze/cloze.component.ts
index d8ebcd693..0b934f07a 100644
--- a/projects/common/components/compound-elements/cloze/cloze.component.ts
+++ b/projects/common/components/compound-elements/cloze/cloze.component.ts
@@ -158,10 +158,11 @@ import { ClozeElement } from 'common/models/elements/compound-elements/cloze/clo
<aspect-compound-child-overlay
*ngIf="['ToggleButton', 'DropList', 'TextField', 'Button'] | arrayIncludes:subPart.type"
[style.display]="'inline-block'"
- [parentForm]="parentForm"
- [element]="$any(subPart).attrs.model"
- [editorMode]="editorMode"
- (elementSelected)="childElementSelected.emit($event)">
+ [class.droplist-child]="subPart.type == 'DropList'"
+ [parentForm]="parentForm"
+ [element]="$any(subPart).attrs.model"
+ [editorMode]="editorMode"
+ (elementSelected)="childElementSelected.emit($event)">
</aspect-compound-child-overlay>
</ng-container>
</ng-template>
@@ -174,7 +175,8 @@ import { ClozeElement } from 'common/models/elements/compound-elements/cloze/clo
':host ::ng-deep p strong {letter-spacing: 0.04em; font-weight: 600;}', // bold less bold
':host ::ng-deep p:empty::after {content: "\\00A0"}', // render empty p
'p span {font-size: inherit}',
- 'sup, sub {line-height: 0;}'
+ 'sup, sub {line-height: 0;}',
+ '.droplist-child {vertical-align: middle;}'
]
})
export class ClozeComponent extends CompoundElementComponent {
diff --git a/projects/common/components/compound-elements/cloze/compound-child-overlay.component.ts b/projects/common/components/compound-elements/cloze/compound-child-overlay.component.ts
index 286fa77a2..a43d0a28c 100644
--- a/projects/common/components/compound-elements/cloze/compound-child-overlay.component.ts
+++ b/projects/common/components/compound-elements/cloze/compound-child-overlay.component.ts
@@ -9,6 +9,7 @@ import {
TextFieldSimpleElement
} from 'common/models/elements/compound-elements/cloze/cloze-child-elements/text-field-simple';
import { ValueChangeElement } from 'common/models/elements/element';
+import { DropListElement } from 'common/models/elements/input-elements/drop-list';
@Component({
selector: 'aspect-compound-child-overlay',
@@ -51,7 +52,7 @@ import { ValueChangeElement } from 'common/models/elements/element';
]
})
export class CompoundChildOverlayComponent { // TODO rename to ClozeChildOverlay
- @Input() element!: ToggleButtonElement | TextFieldSimpleElement;
+ @Input() element!: ToggleButtonElement | TextFieldSimpleElement | DropListElement;
@Input() parentForm!: FormGroup;
@Input() editorMode: boolean = false;
@Input() lineHeight!: number;
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index 9d48f1fc7..bad09ad6f 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -1,8 +1,9 @@
-// eslint-disable-next-line max-classes-per-file
import {
- AfterViewInit,
- Component, ElementRef, Input, OnDestroy, OnInit, Pipe, PipeTransform, ViewChild
+ Component, Input
} from '@angular/core';
+import {
+ CdkDrag, CdkDragDrop, CdkDragStart, CdkDropList, moveItemInArray, transferArrayItem
+} from '@angular/cdk/drag-drop';
import { DropListElement } from 'common/models/elements/input-elements/drop-list';
import { DragNDropValueObject } from 'common/models/elements/element';
import { FormElementComponent } from '../../directives/form-element-component.directive';
@@ -10,14 +11,20 @@ import { FormElementComponent } from '../../directives/form-element-component.di
@Component({
selector: 'aspect-drop-list',
template: `
+ <!-- [style.min-height.px]="elementModel.position?.useMinHeight || clozeContext ? elementModel.height : undefined"-->
<div class="list" [id]="elementModel.id"
- [fxLayout]="elementModel.orientation | droplistLayout"
- [fxLayoutAlign]="elementModel.orientation | droplistLayoutAlign"
+ tabindex="0"
+ [class.cloze-context]="clozeContext"
[class.vertical-orientation]="elementModel.orientation === 'vertical'"
[class.horizontal-orientation]="elementModel.orientation === 'horizontal'"
- [class.cloze-context]="clozeContext"
+ [class.floating-orientation]="elementModel.orientation === 'flex'"
[class.only-one-item]="elementModel.onlyOneItem"
- [style.min-height.px]="elementModel.position?.useMinHeight || clozeContext ? elementModel.height : undefined"
+ [class.highlight-receiver]="classReference.highlightReceivingDropList"
+ cdkDropList
+ [cdkDropListData]="this" [cdkDropListConnectedTo]="elementModel.connectedTo"
+ [cdkDropListOrientation]="elementModel.orientation === 'vertical' ? 'vertical' : 'horizontal'"
+ [cdkDropListEnterPredicate]="validDropPredicate"
+ (cdkDropListDropped)="drop($event)"
[style.color]="elementModel.styling.fontColor"
[style.font-family]="elementModel.styling.font"
[style.font-size.px]="elementModel.styling.fontSize"
@@ -25,46 +32,34 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[style.font-style]="elementModel.styling.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
[style.backgroundColor]="elementModel.styling.backgroundColor"
- [class.errors]="elementFormControl.errors && elementFormControl.touched"
[style.border-color]="elementModel.highlightReceivingDropListColor"
- [class.highlight-valid-drop]="highlightValidDrop"
- [class.highlight-as-receiver]="highlightAsReceiver"
- tabindex="0"
- (focusout)="elementFormControl.markAsTouched()"
- (drop)="drop($event)" (dragenter)="dragEnterList($event)" (dragleave)="dragLeaveList($event)"
- (dragover)="setDropEffect($event)">
- <!--Add dummy div - otherwise the empty list in cloze context will not be in one line-->
- <div *ngIf="viewModel.length === 0"
- [style.min-height.px]="elementModel.height - 4"
- [style.pointer-events]="'none'"
- fxLayout="row"
- [fxLayoutAlign]="'center center'">
- <span> </span>
- </div>
- <ng-container *ngFor="let dropListValueElement of viewModel let index = index;">
+ [class.errors]="elementFormControl.errors && elementFormControl.touched"
+ (focusout)="elementFormControl.markAsTouched()">
+ <ng-container *ngFor="let dropListValueElement of
+ parentForm ? elementFormControl.value : elementModel.value; let index = index;">
<div *ngIf="!dropListValueElement.imgSrc"
class="list-item"
- fxLayout="row"
- [fxLayoutAlign]="elementModel.onlyOneItem ? (clozeContext ? 'center center' : 'start center') : 'none'"
- draggable="true"
- (dragstart)="dragStart($event, dropListValueElement, index)" (dragend)="dragEnd($event)"
- (dragenter)="dragEnterItem($event)"
- [class.show-as-placeholder]="showAsPlaceholder && placeHolderIndex === index"
- [class.show-as-hidden]="hidePlaceholder && placeHolderIndex === index"
- [style.pointer-events]="dragging && elementModel.isSortList === false ? 'none' : ''"
+ cdkDrag [cdkDragData]="dropListValueElement"
+ (cdkDragStarted)="dragStart($event)"
+ (cdkDragEnded)="dragEnd()"
[style.background-color]="elementModel.styling.itemBackgroundColor">
<span>{{dropListValueElement.text}}</span>
+ <div *cdkDragPlaceholder></div>
+ <ng-template cdkDragPreview>
+ <div [style.color]="elementModel.styling.fontColor"
+ [style.font-family]="elementModel.styling.font"
+ [style.font-size.px]="elementModel.styling.fontSize"
+ [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
+ [style.background-color]="elementModel.styling.itemBackgroundColor">
+ <span>{{dropListValueElement.text}}</span>
+ </div>
+ </ng-template>
</div>
<img *ngIf="dropListValueElement.imgSrc"
- class="list-item"
- [src]="dropListValueElement.imgSrc | safeResourceUrl" alt="Image Placeholder"
- [id]="dropListValueElement.id"
- draggable="true"
- (dragstart)="dragStart($event, dropListValueElement, index)" (dragend)="dragEnd($event)"
- (dragenter)="dragEnterItem($event)"
- [class.show-as-placeholder]="showAsPlaceholder && placeHolderIndex === index"
- [class.show-as-hidden]="hidePlaceholder && placeHolderIndex === index"
- [style.pointer-events]="dragging && elementModel.isSortList === false ? 'none' : ''">
+ class="list-item" cdkDrag
+ [src]="dropListValueElement.imgSrc | safeResourceUrl" alt="Image Placeholder">
</ng-container>
</div>
<mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
@@ -75,313 +70,111 @@ import { FormElementComponent } from '../../directives/form-element-component.di
`,
styles: [
'.list {width: 100%; height: 100%; background-color: rgb(244, 244, 242); border-radius: 5px;}',
- '.list {padding: 2px;}',
+ '.list {display: flex; gap: 5px; box-sizing: border-box; padding: 5px}',
+ '.list.vertical-orientation {flex-direction: column;}',
+ '.list.horizontal-orientation {flex-direction: row;}',
+ '.list.floating-orientation {place-content: center space-around; align-items: center; flex-flow: row wrap;}',
+ '.cloze-context.list {padding: 0;}',
'.list-item {border-radius: 5px;}',
':not(.cloze-context) .list-item {padding: 10px;}',
- '.cloze-context .list-item {padding: 0 5px; line-height: 1.2;}',
- '.only-one-item.cloze-context .list-item {padding: 0;}',
- '.only-one-item:not(.cloze-context) .list-item {padding: 0 10px;}',
- '.only-one-item .list-item {height: 100%; min-height: 100%; min-width: 100%; width: 100%; line-height: 1.2;}',
- 'img.list-item {align-self: start; padding: 2px !important;}',
- '.vertical-orientation .list-item:not(:last-child) {margin-bottom: 5px;}',
- '.horizontal-orientation .list-item:not(:last-child) {margin-right: 5px;}',
+ '.cloze-context .list-item {padding: 0 5px;}',
+ '.cloze-context .list-item span {margin-bottom: 3px;}',
+ '.only-one-item .list-item {height: 100%; display: flex; align-items: center; justify-content: center;}',
+ 'img.list-item {align-self: start;}',
'.errors {border: 2px solid #f44336 !important;}',
'.error-message {font-size: 75%; margin-top: 10px; margin-left: 5px; position: absolute; pointer-events: none;}',
'.cloze-context-error-message {padding: 0 !important;}',
- '.list-item {cursor: grab;}',
'.list-item:active {cursor: grabbing;}',
- '.show-as-placeholder {opacity: 0.5 !important; pointer-events: none;}',
- '.highlight-valid-drop {background-color: #ccc !important;}',
- '.highlight-as-receiver {padding: 0; border: 2px solid;}',
- '.show-as-hidden {visibility: hidden;}'
+ '.cdk-drag-preview {border-radius: 5px; box-shadow: 2px 2px 5px black; padding: 10px;}',
+ '.cdk-drop-list-dragging .cdk-drag {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
+ '.highlight-receiver.cdk-drop-list-receiving {padding: 3px; border: 2px solid;}',
+ '.cdk-drag-placeholder {background: #ccc; border: dotted 3px #999; min-height: 25px; min-width: 25px;}',
+ '.cdk-drag-placeholder {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}'
]
})
-export class DropListComponent extends FormElementComponent implements OnInit, AfterViewInit, OnDestroy {
+export class DropListComponent extends FormElementComponent {
@Input() elementModel!: DropListElement;
@Input() clozeContext: boolean = false;
- @ViewChild('placeholder') placeholder!: ElementRef<HTMLElement>;
- static dragAndDropComponents: { [id: string]: DropListComponent } = {};
-
- viewModel: DragNDropValueObject[] = [];
- placeHolderIndex?: number;
- highlightAsReceiver = false;
-
- dragging = false;
-
- showAsPlaceholder = false;
- hidePlaceholder = false;
- highlightValidDrop = false;
-
- static draggedElement?: DragNDropValueObject;
- static sourceList?: DropListComponent;
-
- ngOnInit() {
- super.ngOnInit();
- this.viewModel = [...this.elementFormControl.value];
- }
- ngAfterViewInit() {
- DropListComponent.dragAndDropComponents[this.elementModel.id] = this;
- // Prevent 'forbidden' cursor outside of drop lists
- document.addEventListener('dragover', (event => event.preventDefault()));
- }
-
- // TODO method names
- // TODO elemente flackern manchmal beim aufnehmen; iwas stimmt mit highlightAsReceiver nicht
- dragStart(dragEvent: DragEvent,
- dropListValueElement: DragNDropValueObject,
- sourceListIndex: number) {
- if (dragEvent.dataTransfer) {
- dragEvent.dataTransfer.effectAllowed = 'copyMove';
- dragEvent.dataTransfer.setDragImage(
- this.createDragImage(dragEvent.target as HTMLElement, dropListValueElement.id), 0, 0);
- }
-
- // Timeout is necessary for Chrome, which does not allow DOM manipulation on dragstart
- setTimeout(() => {
- DropListComponent.draggedElement = dropListValueElement;
- DropListComponent.sourceList = this;
- this.placeHolderIndex = sourceListIndex;
- if (this.elementModel.isSortList) {
- this.showAsPlaceholder = true;
- } else {
- if (!this.elementModel.copyOnDrop) this.hidePlaceholder = true;
- this.highlightValidDrop = true;
- }
+ classReference = DropListComponent;
+ static highlightReceivingDropList = false;
- /* Let all droplists know when drag is going on, so they can potentially disable their pointer effects.
- * This is to prevent unwanted dragOver events of list items. */
- Object.entries(DropListComponent.dragAndDropComponents)
- .forEach(([, value]) => {
- value.dragging = true;
- });
-
- if (this.elementModel.highlightReceivingDropList) {
- this.highlightReceiverLists();
- }
- });
+ dragStart(event: CdkDragStart) {
+ DropListComponent.setHighlighting(event.source.dropContainer.data.elementModel.highlightReceivingDropList);
+ document.body.classList.add('dragging-active');
}
- highlightReceiverLists(): void {
- this.highlightAsReceiver = true;
- this.elementModel.connectedTo.forEach(connectedDropListID => {
- DropListComponent.dragAndDropComponents[connectedDropListID].highlightAsReceiver = true;
- });
+ dragEnd() {
+ DropListComponent.setHighlighting(false);
+ document.body.classList.remove('dragging-active');
}
- createDragImage(baseElement: HTMLElement, baseID: string): HTMLElement {
- const dragImage: HTMLElement = baseElement.cloneNode(true) as HTMLElement;
- dragImage.id = `${baseID}-dragimage`;
- dragImage.style.display = 'inline-block';
- dragImage.style.maxWidth = `${(baseElement as HTMLElement).offsetWidth + 20}px`;
- dragImage.style.fontSize = `${this.elementModel.styling.fontSize}px`;
- dragImage.style.borderRadius = '5px';
- dragImage.style.padding = '10px 20px'; // Leave space for cursor
- document.body.appendChild(dragImage);
- return dragImage;
+ static setHighlighting(showHighlight: boolean) {
+ DropListComponent.highlightReceivingDropList = showHighlight;
}
- dragEnterItem(event: DragEvent) {
- event.preventDefault();
- if (this.elementModel.isSortList && DropListComponent.sourceList === this) {
- this.moveListItem(
- this.placeHolderIndex as number,
- Array.from((event.target as any).parentNode.children).indexOf(event.target)
+ drop(event: CdkDragDrop<any>) {
+ if (DropListComponent.isReorderDrop(event)) {
+ moveItemInArray(event.container.data.elementFormControl.value, event.previousIndex, event.currentIndex);
+ event.container.data.updateFormvalue();
+ } else if (DropListComponent.isCopyDrop(event)) {
+ event.container.data.elementFormControl.value.push(
+ event.previousContainer.data.elementFormControl.value[event.previousIndex]);
+ event.container.data.updateFormvalue();
+ } else if (DropListComponent.isPutBack(event)) {
+ event.previousContainer.data.elementFormControl.value.splice(event.previousIndex, 1);
+ event.previousContainer.data.updateFormvalue();
+ } else {
+ transferArrayItem(
+ event.previousContainer.data.elementFormControl.value,
+ event.container.data.elementFormControl.value,
+ event.previousIndex,
+ event.currentIndex
);
+ event.previousContainer.data.updateFormvalue();
+ event.container.data.updateFormvalue();
}
}
- moveListItem(sourceIndex: number, targetIndex: number): void {
- const removedElement = this.viewModel.splice(sourceIndex, 1)[0];
- this.viewModel.splice(targetIndex, 0, removedElement);
- this.placeHolderIndex = targetIndex;
+ /* Move element within the same list to a new index position. */
+ static isReorderDrop(event: CdkDragDrop<any>): boolean {
+ return event.previousContainer === event.container;
}
- setDropEffect(event: DragEvent) {
- event.preventDefault();
- if (!event.dataTransfer) return;
- if (this.isDropAllowed()) {
- if ((DropListComponent.sourceList as DropListComponent).elementModel.copyOnDrop) {
- event.dataTransfer.dropEffect = 'copy';
- } else {
- event.dataTransfer.dropEffect = 'move';
- }
- } else {
- event.dataTransfer.dropEffect = 'none';
- }
+ static isCopyDrop(event: CdkDragDrop<any>): boolean {
+ return event.previousContainer.data.elementModel.copyOnDrop;
}
- dragEnterList(event: DragEvent) {
- event.preventDefault();
- if (!this.isDropAllowed()) return;
- if (!this.elementModel.isSortList) {
- this.highlightValidDrop = true;
- } else if (DropListComponent.sourceList !== this) {
- this.viewModel.push(DropListComponent.draggedElement as DragNDropValueObject);
- const sourceList = DropListComponent.sourceList as DropListComponent;
- DropListComponent.removeElementFromList(sourceList, sourceList.placeHolderIndex as number);
- sourceList.placeHolderIndex = undefined;
- DropListComponent.sourceList = this;
- this.placeHolderIndex = this.viewModel.length > 0 ? this.viewModel.length - 1 : 0;
- }
+ /* Put a copied element back to the source list. */
+ static isPutBack(event: CdkDragDrop<any>): boolean {
+ return event.container.data.elementModel.copyOnDrop &&
+ DropListComponent.isItemIDAlreadyPresent(event.item.data.id, event.container.data.elementFormControl.value);
}
- dragLeaveList(event: DragEvent) {
- event.preventDefault();
- this.highlightValidDrop = false;
+ updateFormvalue(): void {
+ this.elementFormControl.setValue(this.elementFormControl.value);
}
- drop(event: DragEvent): void {
- event.preventDefault();
+ validDropPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => {
+ return (!drop.data.elementModel.onlyOneItem || drop.data.elementFormControl.value.length < 1);// &&
+ // (!DropListComponent.isItemIDAlreadyPresent(drag.data.id, drop.data.value));
+ };
- if (DropListComponent.sourceList === this) {
- // SortList viewModel already gets manipulated while dragging. Just set the value.
- if (this.elementModel.isSortList) this.elementFormControl.setValue(this.viewModel);
- this.dragEnd();
- return;
- }
-
- // if drop is allowed that means item transfer between non-sort lists
- if (this.isDropAllowed()) {
- if (!DropListComponent.isItemIDAlreadyPresent(DropListComponent.draggedElement?.id as string, this.elementFormControl.value) &&
- !(this.elementModel.onlyOneItem && this.viewModel.length > 0)) { // normal drop
- if (!DropListComponent.sourceList?.elementModel.copyOnDrop) { // remove source item if not copy
- DropListComponent.removeElementFromList(DropListComponent.sourceList as DropListComponent,
- DropListComponent.sourceList?.placeHolderIndex as number);
- }
- DropListComponent.addElementToList(this, DropListComponent.draggedElement as DragNDropValueObject);
- } else if (DropListComponent.isItemIDAlreadyPresent(DropListComponent.draggedElement?.id as string, this.elementFormControl.value) &&
- this.elementModel.deleteDroppedItemWithSameID) { // put back (return) item
- DropListComponent.removeElementFromList(DropListComponent.sourceList as DropListComponent,
- DropListComponent.sourceList?.placeHolderIndex as number);
- } else if (this.elementModel.onlyOneItem && this.viewModel.length > 0 &&
- this.viewModel[0].returnToOriginOnReplacement) { // replace
- const originListComponent = DropListComponent.dragAndDropComponents[this.viewModel[0].originListID as string];
- const isItemIDAlreadyPresent =
- DropListComponent.isItemIDAlreadyPresent(this.viewModel[0].id, originListComponent.elementFormControl.value);
- if (!(isItemIDAlreadyPresent && originListComponent.elementModel.deleteDroppedItemWithSameID)) { // dont add to origin if dupe
- DropListComponent.addElementToList(originListComponent, this.viewModel[0]);
- }
- DropListComponent.removeElementFromList(this, 0);
- DropListComponent.addElementToList(this, DropListComponent.draggedElement as DragNDropValueObject);
- if (!DropListComponent.sourceList?.elementModel.copyOnDrop) { // remove source item if not copy
- DropListComponent.removeElementFromList(DropListComponent.sourceList as DropListComponent,
- DropListComponent.sourceList?.placeHolderIndex as number);
- }
- } else {
- console.warn('Valid drop but no handler found. This is most likely a bug!');
- }
- }
- this.dragEnd();
- }
-
- /* When
- - same list
- - connected list
- - onlyOneItem && itemcount = 0 ||
- onlyOneItem && itemcount = 1 && this.viewModel[0].returnToOriginOnReplacement) // verdraengen
- - (! id already present) || id already present && deleteDroppedItemWithSameID // zuruecklegen
- */
- isDropAllowed(): boolean {
- if (!DropListComponent.sourceList) return false;
- const sameList = DropListComponent.sourceList === this;
- const connectedDropLists = (DropListComponent.sourceList as DropListComponent).elementModel.connectedTo;
- const isConnectedList = (connectedDropLists as string[]).includes(this.elementModel.id);
- return (sameList) || (isConnectedList &&
- !this.isOnlyOneItemAndNoReplacingOrReturning() &&
- !this.isIDPresentAndNoReturning());
- }
-
- isIDPresentAndNoReturning(): boolean {
- return DropListComponent.isItemIDAlreadyPresent(DropListComponent.draggedElement?.id as string, this.elementFormControl.value) &&
- !(this.elementModel.deleteDroppedItemWithSameID);
- }
-
- /* No replacement in sort lists: operation should only move the placeholder
- until the actual drop. By allowing elements to transfer while dragging we create
- all kinds of problems and unwanted behaviour, like having all touched lists generate change events.
- */
- isOnlyOneItemAndNoReplacingOrReturning(): boolean {
- return this.elementModel.onlyOneItem && this.viewModel.length > 0 &&
- !((this.viewModel[0].returnToOriginOnReplacement && !this.elementModel.isSortList) ||
- (this.elementModel.deleteDroppedItemWithSameID &&
- DropListComponent.draggedElement?.id === this.viewModel[0].id));
- }
+ // isIDPresentAndNoReturning(): boolean {
+ // return DropListComponent.isItemIDAlreadyPresent(DropListComponent.draggedElement?.id as string, this.elementFormControl.value) &&
+ // !(this.elementModel.deleteDroppedItemWithSameID);
+ // }
+ //
+ // isOnlyOneItemAndNoReplacingOrReturning(): boolean {
+ // return this.elementModel.onlyOneItem && this.viewModel.length > 0 &&
+ // !((this.viewModel[0].returnToOriginOnReplacement && !this.elementModel.isSortList) ||
+ // (this.elementModel.deleteDroppedItemWithSameID &&
+ // DropListComponent.draggedElement?.id === this.viewModel[0].id));
+ // }
static isItemIDAlreadyPresent(itemID: string, valueList: DragNDropValueObject[]): boolean {
const listValueIDs = valueList.map((valueValue: DragNDropValueObject) => valueValue.id);
return listValueIDs.includes(itemID);
}
-
- static addElementToList(listComponent: DropListComponent, element: DragNDropValueObject, targetIndex?: number): void {
- if (targetIndex) {
- listComponent.viewModel.splice(
- Math.min(listComponent.viewModel.length, element.originListIndex || 0),
- 0,
- element
- );
- } else {
- listComponent.viewModel.push(element);
- }
- listComponent.elementFormControl.setValue(listComponent.viewModel);
- }
-
- static removeElementFromList(listComponent: DropListComponent, index: number): void {
- listComponent.viewModel.splice(index, 1);
- listComponent.elementFormControl.setValue(listComponent.viewModel);
- }
-
- dragEnd(event?: DragEvent): void {
- event?.preventDefault();
-
- Object.entries(DropListComponent.dragAndDropComponents)
- .forEach(([, value]) => {
- value.highlightAsReceiver = false;
- value.dragging = false;
- value.highlightValidDrop = false;
- });
- if (DropListComponent.sourceList) DropListComponent.sourceList.placeHolderIndex = undefined;
- this.placeHolderIndex = undefined;
-
- document.getElementById(`${DropListComponent.draggedElement?.id}-dragimage`)?.remove();
- }
-
- ngOnDestroy(): void {
- delete DropListComponent.dragAndDropComponents[this.elementModel.id];
- }
}
-@Pipe({
- name: 'droplistLayout'
-})
-export class DropListLayoutPipe implements PipeTransform {
- transform(orientation: string): string {
- switch (orientation) {
- case 'horizontal':
- return 'row';
- case 'vertical':
- return 'column';
- case 'flex':
- return 'row wrap';
- default:
- throw Error(`droplist orientation invalid: ${orientation}`);
- }
- }
-}
-
-@Pipe({
- name: 'droplistLayoutAlign'
-})
-export class DropListLayoutAlignPipe implements PipeTransform {
- transform(orientation: string): string {
- switch (orientation) {
- case 'horizontal':
- case 'vertical':
- return 'start stretch';
- case 'flex':
- return 'space-around center';
- default:
- throw Error(`droplist orientation invalid: ${orientation}`);
- }
- }
-}
diff --git a/projects/common/models/elements/compound-elements/cloze/cloze.ts b/projects/common/models/elements/compound-elements/cloze/cloze.ts
index eaa8a05bc..984684796 100644
--- a/projects/common/models/elements/compound-elements/cloze/cloze.ts
+++ b/projects/common/models/elements/compound-elements/cloze/cloze.ts
@@ -145,7 +145,7 @@ export class ClozeElement extends CompoundElement implements PositionedUIElement
break;
case 'drop-list':
case 'drop-list-simple' as UIElementType: // keep here for compatibility
- newElement = new DropListElement({ ...elementModel as DropListElement, type: 'drop-list' });
+ newElement = new DropListElement(elementModel as DropListElement);
break;
case 'toggle-button':
newElement = new ToggleButtonElement(elementModel as ToggleButtonElement);
diff --git a/projects/common/models/elements/input-elements/drop-list.ts b/projects/common/models/elements/input-elements/drop-list.ts
index 25290fca6..7d025ed3e 100644
--- a/projects/common/models/elements/input-elements/drop-list.ts
+++ b/projects/common/models/elements/input-elements/drop-list.ts
@@ -11,11 +11,9 @@ import { DropListComponent } from 'common/components/input-elements/drop-list.co
export class DropListElement extends InputElement {
value: DragNDropValueObject[];
onlyOneItem: boolean = false;
- isSortList: boolean = false;
connectedTo: string[] = [];
copyOnDrop: boolean = false;
- deleteDroppedItemWithSameID: boolean = false;
- orientation: 'vertical' | 'horizontal' | 'flex' = 'vertical';
+ orientation: 'vertical' | 'horizontal' | 'flex' = 'vertical'; // TODO besser floating
highlightReceivingDropList: boolean = false;
highlightReceivingDropListColor: string = '#006064';
position: PositionProperties | undefined;
@@ -29,12 +27,8 @@ export class DropListElement extends InputElement {
element.value.map(val => ({ ...val })) :
[];
if (element.onlyOneItem) this.onlyOneItem = element.onlyOneItem;
- if (element.isSortList !== undefined) this.isSortList = element.isSortList;
if (element.connectedTo) this.connectedTo = [...element.connectedTo];
if (element.copyOnDrop !== undefined) this.copyOnDrop = element.copyOnDrop;
- if (element.deleteDroppedItemWithSameID !== undefined) {
- this.deleteDroppedItemWithSameID = element.deleteDroppedItemWithSameID;
- }
if (element.orientation) this.orientation = element.orientation;
if (element.highlightReceivingDropList) this.highlightReceivingDropList = element.highlightReceivingDropList;
if (element.highlightReceivingDropListColor) {
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index d1b8888cc..ffd85fbbf 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -52,11 +52,7 @@ import {
} from './components/compound-elements/likert/likert-radio-button-group.component';
import { ImageMagnifierComponent } from './components/media-elements/image-magnifier.component';
import { RadioGroupImagesComponent } from './components/input-elements/radio-group-images.component';
-import {
- DropListComponent,
- DropListLayoutAlignPipe,
- DropListLayoutPipe
-} from './components/input-elements/drop-list.component';
+import { DropListComponent } from './components/input-elements/drop-list.component';
import { ClozeComponent } from './components/compound-elements/cloze/cloze.component';
import { SliderComponent } from './components/input-elements/slider.component';
import { SpellCorrectComponent } from './components/input-elements/spell-correct.component';
@@ -142,8 +138,6 @@ import { GetValuePipe, MathFieldComponent } from './components/input-elements/ma
ArrayIncludesPipe,
UpdateTextareaRowsPipe,
SpinnerComponent,
- DropListLayoutPipe,
- DropListLayoutAlignPipe,
GetValuePipe,
MathFieldComponent
],
diff --git a/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts b/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts
index afdd9ee11..79f8910f0 100644
--- a/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts
+++ b/projects/editor/src/app/components/canvas/overlays/canvas-element-overlay.ts
@@ -47,16 +47,16 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
}
// DropList keeps a special viewModel variable, which needs to be updated
- if (this.childComponent.instance instanceof DropListComponent) {
- (this.childComponent.instance as DropListComponent).viewModel = this.element.value as DragNDropValueObject[];
- }
+ // if (this.childComponent.instance instanceof DropListComponent) {
+ // (this.childComponent.instance as DropListComponent).viewModel = this.element.value as DragNDropValueObject[];
+ // }
// Make children not clickable. This way the only relevant events are managed by the overlay.
this.childComponent.location.nativeElement.style.pointerEvents = 'none';
if (this.childComponent.instance instanceof ClozeComponent) {
- // make cloze element children clickable to access child elements
this.childComponent.instance.editorMode = true;
+ // make cloze element children clickable to access child elements
this.childComponent.location.nativeElement.style.pointerEvents = 'unset';
this.childComponent.instance.childElementSelected
.pipe(takeUntil(this.ngUnsubscribe))
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component.ts
index debf12382..34f3d5f0f 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/drop-list-properties.component.ts
@@ -50,12 +50,6 @@ import { DialogService } from '../../../../services/dialog.service';
</mat-select>
</mat-form-field>
- <mat-checkbox *ngIf="combinedProperties.isSortList !== undefined"
- [checked]="$any(combinedProperties.isSortList)"
- (change)="updateModel.emit({ property: 'isSortList', value: $event.checked })">
- {{'propertiesPanel.isSortList' | translate }}
- </mat-checkbox>
-
<mat-checkbox *ngIf="combinedProperties.onlyOneItem !== undefined"
[checked]="$any(combinedProperties.onlyOneItem)"
(change)="updateModel.emit({ property: 'onlyOneItem', value: $event.checked })">
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index af2a25819..69ebe6be5 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -192,7 +192,6 @@
"newHotspot": "Neuer Bereich",
"hasDynamicRowCount": "Dynamische Zeilen",
"expectedCharactersCount": "Erwartete Zeichenanzahl",
- "isSortList": "Sortierliste",
"deleteDroppedItemWithSameID": "Zurücklegen erlauben",
"deleteDroppedItemWithSameIDTooltip": "Elemente mit gleicher ID werden beim Zurücklegen gelöscht.",
"setElementInteractionEnabled": "Elementinteraktion erlauben",
diff --git a/projects/player/src/styles.css b/projects/player/src/styles.css
index fe207b591..69bc96298 100644
--- a/projects/player/src/styles.css
+++ b/projects/player/src/styles.css
@@ -30,3 +30,11 @@ body {
aspect-anchor:not(.active-anchor):not(.active-nested-anchor) {
background-color: unset !important;
}
+
+.dragging-active {
+ cursor: grabbing;
+}
+
+.dragging-active * {
+ cursor: inherit !important;
+}
--
GitLab