Fix dd

CHANGES.md

@@ -1,5 +1,11 @@
 # Changes
 
+## clinguin 2.2.0
+
+  * Additions
+    * Drag and Drop
+
+
 ## clinguin 2.1.1
 
   * Bug fix

angular_frontend/package.json

@@ -37,7 +37,7 @@
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.1",
+    "karma-jasmine-html-reporter": "~2.2.0",
     "typescript": "~5.1.3"
   }
 }

angular_frontend/src/styles.scss

@@ -36,8 +36,10 @@ $light: #F4F5F7;
 }
 
 .my-drop-valid-target {
-    border-style: dashed;
-    border-color: black;
+    border-style: dashed !important;
+    ;
+    border-color: black !important;
+    border-width: thin !important;
 }
 
 

clinguin/client/presentation/frontends/angular_frontend/clinguin_angular_frontend/index.html

@@ -8,7 +8,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-<style>@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0052CC;--bs-secondary:#6554C0;--bs-success:#36B37E;--bs-info:#B3BAC5;--bs-warning:#FFAB00;--bs-danger:#FF5630;--bs-light:#F4F5F7;--bs-dark:#212529;--bs-primary-rgb:0, 82, 204;--bs-secondary-rgb:101, 84, 192;--bs-success-rgb:54, 179, 126;--bs-info-rgb:179, 186, 197;--bs-warning-rgb:255, 171, 0;--bs-danger-rgb:255, 86, 48;--bs-light-rgb:244, 245, 247;--bs-dark-rgb:33, 37, 41;--bs-primary-text-emphasis:#002152;--bs-secondary-text-emphasis:#28224d;--bs-success-text-emphasis:#164832;--bs-info-text-emphasis:#484a4f;--bs-warning-text-emphasis:#664400;--bs-danger-text-emphasis:#662213;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#ccdcf5;--bs-secondary-bg-subtle:#e0ddf2;--bs-success-bg-subtle:#d7f0e5;--bs-info-bg-subtle:#f0f1f3;--bs-warning-bg-subtle:#ffeecc;--bs-danger-bg-subtle:#ffddd6;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#99baeb;--bs-secondary-border-subtle:#c1bbe6;--bs-success-border-subtle:#afe1cb;--bs-info-border-subtle:#e1e3e8;--bs-warning-border-subtle:#ffdd99;--bs-danger-border-subtle:#ffbbac;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255, 255, 255;--bs-black-rgb:0, 0, 0;--bs-font-sans-serif:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33, 37, 41;--bs-body-bg:#fff;--bs-body-bg-rgb:255, 255, 255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0, 0, 0;--bs-secondary-color:rgba(33, 37, 41, .75);--bs-secondary-color-rgb:33, 37, 41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233, 236, 239;--bs-tertiary-color:rgba(33, 37, 41, .5);--bs-tertiary-color-rgb:33, 37, 41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248, 249, 250;--bs-heading-color:inherit;--bs-link-color:#0052CC;--bs-link-color-rgb:0, 82, 204;--bs-link-decoration:underline;--bs-link-hover-color:#0042a3;--bs-link-hover-color-rgb:0, 66, 163;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;--bs-border-radius-lg:.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 .5rem 1rem rgba(0, 0, 0, .15);--bs-box-shadow-sm:0 .125rem .25rem rgba(0, 0, 0, .075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, .175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, .075);--bs-focus-ring-width:.25rem;--bs-focus-ring-opacity:.25;--bs-focus-ring-color:rgba(0, 82, 204, .25);--bs-form-valid-color:#36B37E;--bs-form-valid-border-color:#36B37E;--bs-form-invalid-color:#FF5630;--bs-form-invalid-border-color:#FF5630}*,*:before,*:after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}</style><link rel="stylesheet" href="styles.75027fefeb92a87f.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.75027fefeb92a87f.css"></noscript></head>
+<style>@charset "UTF-8";:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0052CC;--bs-secondary:#6554C0;--bs-success:#36B37E;--bs-info:#B3BAC5;--bs-warning:#FFAB00;--bs-danger:#FF5630;--bs-light:#F4F5F7;--bs-dark:#212529;--bs-primary-rgb:0, 82, 204;--bs-secondary-rgb:101, 84, 192;--bs-success-rgb:54, 179, 126;--bs-info-rgb:179, 186, 197;--bs-warning-rgb:255, 171, 0;--bs-danger-rgb:255, 86, 48;--bs-light-rgb:244, 245, 247;--bs-dark-rgb:33, 37, 41;--bs-primary-text-emphasis:#002152;--bs-secondary-text-emphasis:#28224d;--bs-success-text-emphasis:#164832;--bs-info-text-emphasis:#484a4f;--bs-warning-text-emphasis:#664400;--bs-danger-text-emphasis:#662213;--bs-light-text-emphasis:#495057;--bs-dark-text-emphasis:#495057;--bs-primary-bg-subtle:#ccdcf5;--bs-secondary-bg-subtle:#e0ddf2;--bs-success-bg-subtle:#d7f0e5;--bs-info-bg-subtle:#f0f1f3;--bs-warning-bg-subtle:#ffeecc;--bs-danger-bg-subtle:#ffddd6;--bs-light-bg-subtle:#fcfcfd;--bs-dark-bg-subtle:#ced4da;--bs-primary-border-subtle:#99baeb;--bs-secondary-border-subtle:#c1bbe6;--bs-success-border-subtle:#afe1cb;--bs-info-border-subtle:#e1e3e8;--bs-warning-border-subtle:#ffdd99;--bs-danger-border-subtle:#ffbbac;--bs-light-border-subtle:#e9ecef;--bs-dark-border-subtle:#adb5bd;--bs-white-rgb:255, 255, 255;--bs-black-rgb:0, 0, 0;--bs-font-sans-serif:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--bs-font-monospace:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-color-rgb:33, 37, 41;--bs-body-bg:#fff;--bs-body-bg-rgb:255, 255, 255;--bs-emphasis-color:#000;--bs-emphasis-color-rgb:0, 0, 0;--bs-secondary-color:rgba(33, 37, 41, .75);--bs-secondary-color-rgb:33, 37, 41;--bs-secondary-bg:#e9ecef;--bs-secondary-bg-rgb:233, 236, 239;--bs-tertiary-color:rgba(33, 37, 41, .5);--bs-tertiary-color-rgb:33, 37, 41;--bs-tertiary-bg:#f8f9fa;--bs-tertiary-bg-rgb:248, 249, 250;--bs-heading-color:inherit;--bs-link-color:#0052CC;--bs-link-color-rgb:0, 82, 204;--bs-link-decoration:underline;--bs-link-hover-color:#0042a3;--bs-link-hover-color-rgb:0, 66, 163;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:.375rem;--bs-border-radius-sm:.25rem;--bs-border-radius-lg:.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:2rem;--bs-border-radius-2xl:var(--bs-border-radius-xxl);--bs-border-radius-pill:50rem;--bs-box-shadow:0 .5rem 1rem rgba(0, 0, 0, .15);--bs-box-shadow-sm:0 .125rem .25rem rgba(0, 0, 0, .075);--bs-box-shadow-lg:0 1rem 3rem rgba(0, 0, 0, .175);--bs-box-shadow-inset:inset 0 1px 2px rgba(0, 0, 0, .075);--bs-focus-ring-width:.25rem;--bs-focus-ring-opacity:.25;--bs-focus-ring-color:rgba(0, 82, 204, .25);--bs-form-valid-color:#36B37E;--bs-form-valid-border-color:#36B37E;--bs-form-invalid-color:#FF5630;--bs-form-invalid-border-color:#FF5630}*,*:before,*:after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}:root{--bs-breakpoint-xs:0;--bs-breakpoint-sm:576px;--bs-breakpoint-md:768px;--bs-breakpoint-lg:992px;--bs-breakpoint-xl:1200px;--bs-breakpoint-xxl:1400px}</style><link rel="stylesheet" href="styles.f34b6b2d1a28ca36.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.f34b6b2d1a28ca36.css"></noscript></head>
 <body>
   <app-root></app-root>
 <script src="runtime.496fedc6e58b1167.js" type="module"></script><script src="polyfills.26316270d5c34064.js" type="module"></script><script src="main.f6f91f11388a1123.js" type="module"></script></body>

docs/clinguin/frontends/AngularFrontend.rst

@@ -669,3 +669,48 @@ Drag and Drop
         when(b, drop, call, add_assumption(use(_dragged),true)).
         when(c, drop, call, add_assumption(use(_dragged),false)).
 
+
+.. admonition:: **Calculating dragging targets**
+    :class: important
+
+    In some cases, the possible targets for a draggable elements want to be obtained from ``_any/2``.
+    These atoms, however, might not be available because of the restrictions imposed by previous selections (assumptions).
+    When this is the case. An intermediate call can be made to remove the assumptions and get the available targets using the ``_any/2`` predicate.
+    This means one can add a lock/unlock button to the draggable elements which will remove the previous assumption to obtain the options while storing in the context the previous selection.
+
+    .. admonition:: Example
+
+        This example extends the Knapsack problem and with the following code:
+
+        Make sure the line ``attr(object(O), draggable_as, O):-object(O, _).`` is commented out.
+
+        .. code-block:: prolog
+
+            % ---- Unlock to drag an object
+            % This allows an intermediate call that will remove assumptions to get available destination using the _any/2 predicate
+
+
+            % Unlocked objects will appear in the original column
+            object(O, X):- object(O), _clinguin_context(unlocked(O),X).
+
+            % Unlocked objects are draggable and stand out
+            attr(object(O), filter, "opacity(0.8)"):-object(O), not _clinguin_context(unlocked(O),_).
+            attr(object(O), "box-shadow", "0 2px 2px 2px #00000070" ):- object(O), _clinguin_context(unlocked(O),_).
+            attr(object(O), draggable_as, O):-object(O, _), _clinguin_context(unlocked(O),_).
+
+            % Button to lock and unlock objects
+            elem(object_move(O), button, object(O)):-object(O,_).
+            attr(object_move(O), icon, "fa-lock"):-object(O,_), not _clinguin_context(unlocked(O),_).
+            attr(object_move(O), icon, "fa-lock-open"):-_clinguin_context(unlocked(O),_).
+            attr(object_move(O), class, ("btn-sm";"btn-outline-primary";"border"; "border-0")):-object(O,_).
+            % When unlocking the assumption is removed and the context is updated
+            when(object_move(O), click, call, remove_assumption(take(O))):-object(O, _), not _clinguin_context(unlocked(O),_).
+            when(object_move(O), click, context, (unlocked(O),X)):-object(O, X), not _clinguin_context(unlocked(O),_).
+
+            % Dummy event for locking an object
+            when(object_move(O), click, call, get):-_clinguin_context(unlocked(O),_).
+
+            % Any action, if something was unlocked then it is put back
+            when(O', E, call, get):- when(O', E, call, _), E!=drop, _clinguin_context(unlocked(O),available).
+            when(O', E, call, add_assumption(take(O),true)):- when(O', E, call, _), E!=drop, _clinguin_context(unlocked(O),taken).
+            when(O', E, call, add_assumption(take(O),false)):- when(O', E, call, _), E!=drop, _clinguin_context(unlocked(O),not_available).

docs/conf.py

@@ -41,7 +41,7 @@
 author = "Susana Hahn, Alexander Beiser"
 
 # The full version, including alpha/beta/rc tags
-release = "2.1.1"
+release = "2.2.0"
 
 # -- General configuration ---------------------------------------------------
 

examples/angular/knapsack/README.md

@@ -3,6 +3,7 @@
 Solves the [Knapsack problem](https://en.wikipedia.org/wiki/Knapsack_problem).
 By doing so, it showcases the use of optimal consequences and false assumptions as well as drag and drop.
 
+For a version with the option to lock and unlock drag and drop, check the commented code.
 
 ## Usage
 

examples/angular/knapsack/ui.lp

@@ -75,9 +75,10 @@ object(O, available):- object(O), not object(O, taken), not object(O, not_availa
 elem(object(O), container, category_objects_c(C)):-object(O, C).
 attr(object(O), class, ("m-1";"p-1";"bg-primary";"border-primary";"rounded";"d-flex";"flex-row";"justify-content-between";"bg-opacity-50";"border";"border-1")):-object(O).
 
-% Drag and drop
+% --- Drag and drop
+
 attr(object(O), draggable_as, O):-object(O, _).
-attr(object(O), drop_target, category(taken)):-object(O, available), _any(take(O)).
+attr(object(O), drop_target, category(taken)):-object(O, _), _any(take(O)).
 attr(object(O), drop_target, category(not_available)):-object(O).
 attr(object(O), drop_target, category(available)):-object(O,T), T!=available.
 when(category(taken), drop, call, (remove_assumption(take(_dragged)),add_assumption(take(_dragged),true))).
@@ -106,6 +107,37 @@ when(category(available), drop, call, remove_assumption(take(_dragged))).
     attr(object_star(O), class, ("disabled";"border"; "border-0")):-object(O,available), _any_opt(take(O)).
 
 
+        % ---- Unlock to drag an object
+        % This allows an intermediate call that will remove assumptions to get available destination using the _any/2 predicate
+        % Make sure the line `attr(object(O), draggable_as, O):-object(O, _).` above is removed
+
+
+        % % Unlocked objects will appear in the original column
+        % object(O, X):- object(O), _clinguin_context(unlocked(O),X).
+
+        % % Unlocked objects are draggable and stand out
+        % attr(object(O), filter, "opacity(0.8)"):-object(O), not _clinguin_context(unlocked(O),_).
+        % attr(object(O), "box-shadow", "0 2px 2px 2px #00000070" ):- object(O), _clinguin_context(unlocked(O),_).
+        % attr(object(O), draggable_as, O):-object(O, _), _clinguin_context(unlocked(O),_).
+
+        % % Button to lock and unlock objects
+        % elem(object_move(O), button, object(O)):-object(O,_).
+        % attr(object_move(O), icon, "fa-lock"):-object(O,_), not _clinguin_context(unlocked(O),_).
+        % attr(object_move(O), icon, "fa-lock-open"):-_clinguin_context(unlocked(O),_).
+        % attr(object_move(O), class, ("btn-sm";"btn-outline-primary";"border"; "border-0")):-object(O,_).
+        % % When unlocking the assumption is removed and the context is updated
+        % when(object_move(O), click, call, remove_assumption(take(O))):-object(O, _), not _clinguin_context(unlocked(O),_).
+        % when(object_move(O), click, context, (unlocked(O),X)):-object(O, X), not _clinguin_context(unlocked(O),_).
+
+        % % Dummy event for locking an object
+        % when(object_move(O), click, call, get):-_clinguin_context(unlocked(O),_).
+
+        % % Any action, if something was unlocked then it is put back
+        % when(O', E, call, get):- when(O', E, call, _), E!=drop, _clinguin_context(unlocked(O),available).
+        % when(O', E, call, add_assumption(take(O),true)):- when(O', E, call, _), E!=drop, _clinguin_context(unlocked(O),taken).
+        % when(O', E, call, add_assumption(take(O),false)):- when(O', E, call, _), E!=drop, _clinguin_context(unlocked(O),not_available).
+
+
 %%%%%%%%%%%%%%%%%%%%%%%%
 % Menu bar
 %%%%%%%%%%%%%%%%%%%%%%%%

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name = clinguin
-version = 2.1.1
+version = 2.2.0
 author = Alexander Beiser, Susana Hahn (Potassco)
 author_email = [email protected], [email protected]
 description = An interactive visualizer for clingo

tests/reference_json_output/health.py

@@ -6,7 +6,7 @@ class Health:
     def get_reference_json(cls):
         json_dict = {
             "name": "clinguin",
-            "version": "2.1.1",
+            "version": "2.2.0",
             "description": "An interactive visualizer for clingo",
         }