From 0308cf30f1780a7c1da80f9041e68dfc14a4d11d Mon Sep 17 00:00:00 2001
From: Adrian Silva <adrianfsf10@gmail.com>
Date: Mon, 17 Oct 2022 20:46:09 -0300
Subject: [PATCH 1/2] Added: hover-freeze mode

---
 .../example-n04/example-n04.component.html    |   6 +-
 .../demo/src/scss/library/_style-freezer.scss |   6 ++
 .../scss/library/mixins/_style-freezer.scss   | 100 ++++++++++++++++++
 projects/demo/src/styles.scss                 |   1 +
 .../src/lib/red-zoom.directive.ts             |  42 +++++++-
 5 files changed, 153 insertions(+), 2 deletions(-)
 create mode 100644 projects/demo/src/scss/library/_style-freezer.scss
 create mode 100644 projects/demo/src/scss/library/mixins/_style-freezer.scss

diff --git a/projects/demo/src/app/example-n04/example-n04.component.html b/projects/demo/src/app/example-n04/example-n04.component.html
index 3f96dfb..a5324e1 100644
--- a/projects/demo/src/app/example-n04/example-n04.component.html
+++ b/projects/demo/src/app/example-n04/example-n04.component.html
@@ -6,7 +6,7 @@
             width="320"
             redZoom="./assets/image-3-full.jpg"
             [redZoomLazy]="false"
-            redZoomClass="red-zoom--style--window"
+            redZoomClass="red-zoom--style--freezer"
             [redZoomBehavior]="behavior.value"
             [style.cursor]="behavior.value === 'hover' ? 'crosshair' : 'zoom-in'"
             class="zoom">
@@ -24,6 +24,10 @@ <h2>Behavior And Activation Event</h2>
                     <input type="radio" [formControl]="behavior" name="behavior" value="grab">
                     <span>Grab</span>
                 </label>
+                <label>
+                    <input type="radio" [formControl]="behavior" name="behavior" value="hoverFreeze">
+                    <span>Hover-Freeze</span>
+                </label>
                 <label>
                     <input type="radio" [formControl]="behavior" name="behavior" value="click">
                     <span>Click</span>
diff --git a/projects/demo/src/scss/library/_style-freezer.scss b/projects/demo/src/scss/library/_style-freezer.scss
new file mode 100644
index 0000000..afa005d
--- /dev/null
+++ b/projects/demo/src/scss/library/_style-freezer.scss
@@ -0,0 +1,6 @@
+@import './mixins/style-freezer';
+
+
+.red-zoom--style--freezer {
+    @include red-zoom-style-freezer();
+}
diff --git a/projects/demo/src/scss/library/mixins/_style-freezer.scss b/projects/demo/src/scss/library/mixins/_style-freezer.scss
new file mode 100644
index 0000000..a1e5840
--- /dev/null
+++ b/projects/demo/src/scss/library/mixins/_style-freezer.scss
@@ -0,0 +1,100 @@
+@use 'sass:math';
+
+@import 'common';
+
+
+@mixin red-zoom-style-freezer(
+    $transition-duration:   .5s,
+    $overlay-color:         rgba(#fff, .3),
+    $loader-color:          #fff,
+    $loader-size:           40px,
+    // lens
+    $lens-clip:             true,
+    $lens-size:             160px,
+    $lens-border-radius:    none,
+    $lens-shadow:           none,
+    $lens-border-width:     2px,
+    $lens-border-color:     #f00,
+    $lens-border-position:  inside,
+    // error
+    $error-overlay-color:   rgba(#f00, .7),
+    $error-font-color:      #fff
+) {
+    visibility: hidden;
+    transition: visibility 0s $transition-duration;
+
+    .red-zoom__overlay {
+        opacity: 0;
+        transition: opacity $transition-duration;
+        z-index: 1;
+        background: $overlay-color;
+
+        &:before {
+            @include red-zoom-loader(
+                $loader-color: $loader-color,
+                $loader-size: $loader-size
+            );
+        }
+    }
+    .red-zoom__frame {
+        display: none;
+    }
+    .red-zoom__lens {
+        position: absolute;
+        display: block;
+        left: var(--red-zoom-thumb-x);
+        top: var(--red-zoom-thumb-y);
+        width: var(--red-zoom-thumb-w);
+        height: var(--red-zoom-thumb-h);
+        z-index: 9999;
+        opacity: 0;
+        transition: opacity $transition-duration;
+
+        @if ($lens-clip) {
+            overflow: hidden;
+        }
+
+        &:after {
+            position: absolute;
+            content: '';
+            box-shadow: $lens-shadow;
+            border: $lens-border-width solid $lens-border-color;
+            opacity: .5;
+
+            $local-border-width: 0px;
+
+            @if ($lens-border-position == outside) {
+                $local-border-width: $lens-border-width;
+            } @else if ($lens-border-position == center) {
+                $local-border-width: math.div($lens-border-width, 2);
+            }
+
+            border-radius: $lens-border-radius + $local-border-width;
+            left: calc(var(--red-zoom-mouse-x, 0px) - #{math.div($lens-size, 2) + $local-border-width} - var(--red-zoom-thumb-x));
+            top: calc(var(--red-zoom-mouse-y, 0px) - #{math.div($lens-size, 2) + $local-border-width} - var(--red-zoom-thumb-y));
+            width: $lens-size + $local-border-width * 2;
+            height: $lens-size + $local-border-width * 2;
+        }
+    }
+    .red-zoom__lens-body {
+        border-radius: $lens-border-radius;
+        left: calc(var(--red-zoom-mouse-x, 0px) - #{math.div($lens-size, 2)} - var(--red-zoom-thumb-x));
+        top: calc(var(--red-zoom-mouse-y, 0px) - #{math.div($lens-size, 2)} - var(--red-zoom-thumb-y));
+        width: $lens-size;
+        height: $lens-size;
+    }
+    .red-zoom__lens-image {
+        --red-zoom-lens-image-x: calc(
+            var(--red-zoom-lens-image-base-x, 0px) +
+            var(--red-zoom-lens-image-center-offset-x, 0px) +
+            var(--red-zoom-lens-image-frame-offset-x, 0px)
+        );
+        --red-zoom-lens-image-y: calc(
+            var(--red-zoom-lens-image-base-y, 0px) +
+            var(--red-zoom-lens-image-center-offset-y, 0px) +
+            var(--red-zoom-lens-image-frame-offset-y, 0px)
+        );
+    }
+
+    @include red-zoom-states($transition-duration, $error-overlay-color, $error-font-color);
+}
diff --git a/projects/demo/src/styles.scss b/projects/demo/src/styles.scss
index aacfe47..2276386 100644
--- a/projects/demo/src/styles.scss
+++ b/projects/demo/src/styles.scss
@@ -20,6 +20,7 @@
 @import 'scss/library/style-window';
 @import 'scss/library/style-magnifier';
 @import 'scss/library/style-overlay';
+@import 'scss/library/style-freezer';
 
 // Limit scale factor.
 @include red-zoom-min-scale-factor(1, 'thumb');
diff --git a/projects/ngx-red-zoom/src/lib/red-zoom.directive.ts b/projects/ngx-red-zoom/src/lib/red-zoom.directive.ts
index e266763..97b31d8 100644
--- a/projects/ngx-red-zoom/src/lib/red-zoom.directive.ts
+++ b/projects/ngx-red-zoom/src/lib/red-zoom.directive.ts
@@ -46,7 +46,7 @@ export class RedZoomDirective implements AfterContentInit, OnChanges, OnDestroy
 
     @Input('redZoomClass') classes = '';
 
-    @Input('redZoomBehavior') behavior: 'hover' | 'grab' | 'click' = 'hover';
+    @Input('redZoomBehavior') behavior: 'hover' | 'grab' | 'hoverFreeze' | 'click' = 'hover';
 
     @Input('redZoomMouseWheel') wheel = true;
 
@@ -60,6 +60,8 @@ export class RedZoomDirective implements AfterContentInit, OnChanges, OnDestroy
     scaleFactor = 1;
     session: Session|null = null;
     requestAnimationFrameId = 0;
+    isHovering = false;
+    count = 0;
 
     get isImage(): boolean {
         if (!(this.element.nativeElement instanceof Element)) {
@@ -113,6 +115,7 @@ export class RedZoomDirective implements AfterContentInit, OnChanges, OnDestroy
         const startEventName = {
             hover: 'mouseenter',
             grab: 'mousedown',
+            hoverFreeze: 'mousedown',
             click: 'mousedown',
         }[this.behavior];
 
@@ -292,6 +295,22 @@ export class RedZoomDirective implements AfterContentInit, OnChanges, OnDestroy
             unListenWheel();
         };
 
+        const onHoverOut = () => {
+            unListenMove();
+            unListenWheel();
+        };
+
+        const onHoverLeave = () => {
+            this.template.detach();
+            unListenMove();
+            unListenLeave();
+            unListenWheel();
+        };
+
+        const counterHover = () => {
+            this.count += 1;
+        };
+
         let unListenMove: () => void;
         let unListenLeave: () => void;
         const unListenWheel = this.renderer.listen(this.element.nativeElement, 'wheel', onWheel);
@@ -308,6 +327,27 @@ export class RedZoomDirective implements AfterContentInit, OnChanges, OnDestroy
                     onLeave();
                 }
             });
+        } else if (this.behavior === 'hoverFreeze') {
+            const element = this.element.nativeElement as Element;
+            counterHover();
+            this.isHovering = !this.isHovering;
+            if (this.isHovering && this.count < 3) {
+                unListenMove = this.renderer.listen(document, 'mousemove', onMove);
+            } else {
+                unListenMove = () => {};
+                unListenLeave = this.renderer.listen(document, 'mousedown', () => {
+                    onHoverOut();
+                    return;
+                });
+            };
+            unListenLeave = this.renderer.listen(document, 'mousedown', (downEvent: MouseEvent) => {
+                if (!element.contains(downEvent.target as Node) || this.count === 3) {
+                    this.isHovering = false;
+                    this.count = 0;
+                    onHoverLeave();
+                    return;
+                }
+            });
         } else {
             unListenMove = this.renderer.listen(document, 'mousemove', onMove);
             unListenLeave = this.renderer.listen(document, 'mouseup', onLeave);

From a8088324f3abb8ac215b06292fa06c4c5045fad0 Mon Sep 17 00:00:00 2001
From: Adrian Silva <adrianfsf10@gmail.com>
Date: Mon, 17 Oct 2022 21:01:56 -0300
Subject: [PATCH 2/2] updated descriptions

---
 .../demo/src/app/documentation/documentation.component.html   | 2 +-
 projects/demo/src/app/example-n03/example-n03.component.html  | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/projects/demo/src/app/documentation/documentation.component.html b/projects/demo/src/app/documentation/documentation.component.html
index 2f13e1c..f5863c6 100644
--- a/projects/demo/src/app/documentation/documentation.component.html
+++ b/projects/demo/src/app/documentation/documentation.component.html
@@ -42,7 +42,7 @@ <h3>Inputs</h3>
             <td>string</td>
             <td>
                 Activation event. (default: 'hover')<br>
-                Possible values: <code>'hover'</code>, <code>'grab'</code>, <code>'click'</code>.
+                Possible values: <code>'hover'</code>, <code>'grab'</code>, <code>'click'</code>, <code>'hoverFreeze'</code>.
             </td>
         </tr>
         <tr>
diff --git a/projects/demo/src/app/example-n03/example-n03.component.html b/projects/demo/src/app/example-n03/example-n03.component.html
index 1226aa3..a9e081a 100644
--- a/projects/demo/src/app/example-n03/example-n03.component.html
+++ b/projects/demo/src/app/example-n03/example-n03.component.html
@@ -26,6 +26,10 @@ <h2>Customization And Styles</h2>
                     <input type="radio" [formControl]="style" name="style" value="overlay">
                     <span>Overlay</span>
                 </label>
+                <label>
+                    <input type="radio" [formControl]="style" name="style" value="freezer">
+                    <span>Freezer</span>
+                </label>
             </div>
 
             <p>