Code Monkey home page Code Monkey logo

kirby-annotator's People

Contributors

bvdputte avatar s1syphos avatar sija avatar sylvainjule avatar werbschaft avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

kirby-annotator's Issues

this.load is not a function in Kirby 3.6.1

After updating to Kirby 3.6.1 I got the following error, when visiting the panel with an annotator field:

this.$store.state.languages ? this.$store.state.languages.current : this.$language

This is referring to this line in src/annotator.vue.

Switching back to 3.6.0 I got rid of the error. Unfortunately I have no idea what this.load() is for, otherwise I would happily create a PR. 😉

image not scaling to full width of mappable area

(great work, exactly what I have been looking for!)

If your window width is much greater than the size of the map image (which is resized to 800px)
then the mappable area/block is larger than the image itself.

image

I think the simple fix is to

.imageannotator-ctn-img {
  display: inline-block
}

Equally, you could make the image full width

.imageannotator-img { width: 100% } 

But I think that might be a bit large in most circumstances.

Allow src to be a Kirby query

I would like to annotate an image that is set in a parent page. Would you be open to extending the storage src field to support arbitrary queries?

Percentages decimal points in French

When having french as a site language, decimal points for the markers values get converted to commas (and then aren't valid CSS). I was able to circumvent this with a simple str_replace:
<?php echo str_replace(',', '.', markerStyle($marker)) ?> but thought you'd like to know.

Not saving markerid

This one's a bit more serious though :(

Currently, if i create a new spot, the markerid number is not being saved.
there's no javascript error - i can see the an ID being generated. Not quite sure how/whether it relates to the entry-id?

If I change the markerid type to number, I can assign a unique number, which is a workaround.
If I change the type to readonly, instead of hidden, I get the message
'The readonly field is missing. Please add it to your installed fields or remove it from your blueprint'

"the section-type is not valid"

Hej Sylivain 👋🏼,
first of all, thanks for your work on this plugin, that I'd like to support.

It seems like there is something broken in Kirby 3.8.1.1.
The section type "annotator" is available, but no matter what I do, i get the note "Der Bereichstyp "annotator" ist nicht gültig" which translates to "the section-type is not valid".

Am I missing something here?

Using:
"getkirby/cms": "^3.8.1.1"
"sylvainjule/annotator": "^1.0.5"

Screenshot 2022-11-04 at 11 59 16

Screenshot 2022-11-04 at 12 04 24

SVG size issue

Heya, first of all: Thanks for this fantastic plugin.

While trying it out with the editor, I realized some SVGs cause scaling problems in the annotator preview:

Screenshot 2021-01-20 at 16 42 41

The editor used an svg export from illustrator. A simple map.

The head of the SVG with the viewbox looks like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 419.95 498.3">

Now when I gave the SVG some height in the Inspector, it worked again:

Screenshot 2021-01-20 at 16 42 52

So of course this could be solved with changed properties inside the SVG, but since this file might be changed or updated from time to time by the editors, I tried to find a css-only solution. This is where I am right now:
All elements inside the annotator inherit width: 100% apart from .annotator-ctn .image-ctn, which only has:

 {
    max-width: 100%;
}

If I change this to width instead of max-width, the image scales to visibility But due to its dimensions ("Portrait mode" so to say), the values max-height: calc(100vh - 12rem); are keeping it cropped. If i remove it, the image is of course huge, but seem to work fine.

Screenshot 2021-01-21 at 10 36 15

I can imagine the max-heights are there for a reason, but so far that was my try on tackling this issue.

Cheers and thanks,
Fritz

4.0 Compatibility

Tested on 4.0.0-beta.1 and the plugin doesn't working correctly. Tools on image are can't be clicked.

screen-capture-1611-Test - Mægazine-localhost

Zoom function for large images

It would be cool if there would be an image zoom function. with this you could zoom in/out on the image and set the markers even more precisely.

Cannot read property 'current' of undefined in the Panel

Hi,

I have an "Cannot read property 'current' of undefined" exception in the Panel when using the Annotator field. I think this was introduced in Kirby 3.3.0 and could be, from what I read, related to the refactoring of the Vuex form store module?

Thank you,
Georg

this.$store.state.content is undefined

Hello,

Your plugin look great and I wanted to give it a try.
I tried the given exemple but when I load the panel page I'm getting this error :
this.$store.state.content is undefined
And annotator is not working.

Do you know how to fix it ?

Thanks !

Switchable double-click

If I accidentally can't hit the pin, it adds a pin immediately. The ability to optionally switch to double-click to avoid this would be great.

Bug with Positions

Bildschirmfoto 2020-10-16 um 14 56 01

On Refresh, all markers get on the left top. There's no way to get them back to the right Position. Also no resize or similar. Setup is done in the file blueprint as I want to use it with the builder field and there aren't sections possible.

Edit: I have found a solution, the values aren't saved in the structure field with a point, they are saved with a comma. Changing the fields to number format does the trick. In config.php we have set the correct local but without any changes.

Seems like this is similar to this: #13

I created a pull request, hope it's ok. I don't have many experience with github ...

Min/Max annotation

it would be great if it were possible to limit the number of annotations. In my case, I only need 1 annotation and want to prevent multiple annotations from being added. Unfortunately I can't set this with "min" or "max". When I click on the image, unlimited annotation is added, even i add min or max to the structure fields in the marker section.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.