scompiler / red-zoom-angular Goto Github PK

Version 0.4.0 not installing styles

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--14-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--14-3!./node_modules/sass-loader/dist/cjs.js??ref--14-4!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
12 │ @import '~ngx-red-zoom/styles/base.scss';

Here you can see the whole styles dir is totally missing

ls -1F node_modules/ngx-red-zoom/
bundles/
esm2015/
fesm2015/
lib/
ngx-red-zoom.d.ts
ngx-red-zoom.metadata.json
package.json
public-api.d.ts
README.md

Version 0.3.0 works as expected.

Currently this project will look for a file name for the input, if there was an option such as "useBase64" it could just read the data directly and allow for use of base64 string.

Is it possible to get a "freezing" feature on desktop?
I mean the possibility to stick with the lens in a fixed position, being free to move the cursor around the page, scroll, etc.
At the moment on mobile it already suites my needs because, lacking gesture management, lens gets stuck on the position you tap on. Accidentally perfect. :-D
For desktop, it would be nice if you can click on a position, and get the lens fixed on that detail.

Trying to install with angular 14 i get the error below:

ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^13.1.0" from [email protected]

Is it planned any upgrade?

Steps to reproduction:

1. Generate the images page (with buttons or thumbnails)
2. Click on the image in the middle, so that the cursor is placed over the opened image
   (there is a MatDialog component with the image with zooming feature, so the cursor will be placed over the image in the mat-dialog).

There are the wrong thumbSize values during component initialization (there is an opening animation).

Hi,

It would be great if there was support for onError event if [redZoom] source fails to load. Currently its possible to set error message, but what if you want to do something after it failed ?

There is an (error) event on IMG, what about a (redZoomError) to ?

Angular 12.1
Typescript 4.3.5

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($loader-size, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
12 │     left: calc(50% - #{$loader-size / 2});
   │                        ^^^^^^^^^^^^^^^^
   ╵
    node_modules/ngx-red-zoom/styles/mixins/_common.scss 12:24           red-zoom-loader()
    node_modules/ngx-red-zoom/styles/mixins/_style-magnifier.scss 31:13  red-zoom-style-magnifier()
    node_modules/ngx-red-zoom/styles/_style-magnifier.scss 5:5           @import
    ...

When I use a URL for 'src' and 'redZoom' property, it works fine. But if I use a base64 image, then on page load the lens height and width is equal to the image due to which on hover, the complete image is displayed in the result window. I have to manually resize the lens to get a magnified view.

Hi @4Bos , I am not able to change the red background color on the image hover, could you please help me figure out the solution, not able to debug from where exactly red color is getting applied on the class