Multiple select areas in one image (Plugin Vuejs)

Overview

Multi Select Areas Image

Codecov Coverage All Contributors npm download npm download per month GitHub open issues GitHub open issues


Live Demos

https://demo-multi-select-areas-image.herokuapp.com

Installation

With npm or yarn

yarn add multi-select-areas-image

npm i multi-select-areas-image

For Vue.js 2.0

Use multi-select-areas-image component:

Typical use:

// main.js
import MultiSelectAreasImage from 'multi-select-areas-image'
...
Vue.use(MultiSelectAreasImage)

.vue file:

<template>
  <div>
    <multi-select-areas-image :cropUrl="url" :width="500" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        url:
          'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
      };
    },
  };
</script>

Props

cropUrl

Type: String
Required: true
Default: null

Input Url image into the box

width

Type: Number
Required: false
Default: 1000

Set width image area

opacityOutline

Type: Number
Required: false
Default: 0.5

Set opacity outline border box select area

opacityOverlay

Type: Number
Required: false
Default: 0.5

Set opacity overlay on image

$emit

<template>
  <div>
    <multi-select-areas-image v-on:getListAreas="getListAreas" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        areas: [],
      };
    },
    methods: {
      getListAreas(value) {
        // console.log(value)
        this.areas = value;
      },
    },
  };
</script>

getListAreas

Params: Null
Return: Array

Contributors

Thanks goes to these wonderful people (emoji key):

quanghung97
quanghung97

💻 📖
vunt-0906
vunt-0906

📖

This project follows the all-contributors specification. Contributions of any kind welcome!

Comments
  • #19: fix positioning error inside relative element with margin `:pos-correction=

    #19: fix positioning error inside relative element with margin `:pos-correction="false"` for component plased inside element with `position: relative` and margins

    #19: :pos-correction="false" for component plased inside element with position: relative and margins

    #17: Demo image url expired #18: mouseDown event: code duplication

    opened by d9k 1
  • positioning error inside relative element with margin

    positioning error inside relative element with margin

    Screenshot from 2021-01-11 20-03-04

    <template>
      <div class="demo">
          <multi-select-areas-image />
      </div>
    </template>
    
    <script>
    import MultiSelectAreasImage from '@/components/MultiSelectAreasImage'
    
    export default {
      components: {
        MultiSelectAreasImage
      }
    }
    </script>
    
    <style lang="scss">
    .demo {
      position: relative;
      margin-top: 60px;
      margin-left: 24px;
    }
    </style>
    
    opened by d9k 1
  • mouseDown event: code duplication

    mouseDown event: code duplication

    At mouseDown event

    https://github.com/sun-asterisk-research/multi-select-areas-image/blob/master/src/components/MultiSelectAreasImage.vue#L220-L242

            if (idArea) {
              this.areas.push({
                id: idArea + 1,
                x: e.pageX - this.posImg.left,
                y: e.pageY - this.posImg.top,
                width: 0,
                height: 0,
                z: 0,
                resizable: false
              })
              this.temp = idArea + 1
            }
          } else {
            this.areas.push({
              id: 1,
              x: e.pageX - this.posImg.left,
              y: e.pageY - this.posImg.top,
              width: 0,
              height: 0,
              z: 0,
              resizable: false
            })
            this.temp = 1
          }
    

    Just new object id and this.temp differs.

    opened by d9k 1
  • Bump node-sass from 4.12.0 to 4.13.1

    Bump node-sass from 4.12.0 to 4.13.1

    Bumps node-sass from 4.12.0 to 4.13.1.

    Release notes

    Sourced from node-sass's releases.

    v4.13.1

    Community

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    OSX x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    Linux* x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8**, 9**, 10**^, 11**^, 12**^, 13**^
    Alpine Linux x64 6, 8, 10, 11, 12, 13
    FreeBSD i386 amd64 8, 10, 12, 13

    *Linux support refers to Ubuntu, Debian, and CentOS 5+ ** Not available on CentOS 5 ^ Only available on x64

    v4.13.0

    Features

    Community

    Dependencies

    Supported Environments

    OS Architecture Node
    Windows x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    OSX x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
    Linux* x86 & x64 0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8**, 9**, 10**^, 11**^, 12**^, 13**^
    Alpine Linux x64 6, 8, 10, 11, 12, 13
    FreeBSD i386 amd64 6, 8, 10, 12, 13

    *Linux support refers to Ubuntu, Debian, and CentOS 5+

    Changelog

    Sourced from node-sass's changelog.

    v4.13.1

    https://github.com/sass/node-sass/releases/tag/v4.13.1

    v4.13.0

    https://github.com/sass/node-sass/releases/tag/v4.13.0

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Bump lodash from 4.17.15 to 4.17.19

    Bump lodash from 4.17.15 to 4.17.19

    Bumps lodash from 4.17.15 to 4.17.19.

    Release notes

    Sourced from lodash's releases.

    4.17.16

    Commits
    Maintainer changes

    This version was pushed to npm by mathias, a new releaser for lodash since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • #19: fix positioning error inside relative element with margin +#17, +#18

    #19: fix positioning error inside relative element with margin +#17, +#18

    #19: :pos-correction="false" for component plased inside element with position: relative and margins

    #17: Demo image url expired #18: mouseDown event: code duplication

    opened by d9k 0
  • Demo image url expired

    Demo image url expired

    https://github.com/sun-asterisk-research/multi-select-areas-image/blob/master/src/components/MultiSelectAreasImage.vue#L133

    https://scontent.fhan2-3.fna.fbcdn.net/v/t1.0-9/45585072_925043081015026_6599956628924006400_o.jpg?_nc_cat=108&_nc_oc=AQlJUcFj4S_wGeX016thVhmgINU5wDV4xPBNSCIcYSti9Sm5WEPBDYO_kxK4aRP0Emo&_nc_ht=scontent.fhan2-3.fna&oh=052bb05956a1460d014205754da5a15b&oe=5DCC1053

    Error: URL signature expired

    opened by d9k 0
  • New logo

    New logo

    Hi,

    had some time to spare while waiting for my train, so here you go :)

    The figma link for the logo and some alternative versions: https://www.figma.com/file/VA5icdQv6Wd1Y0o77pqHsQ/multi-select-areas-image-logo?node-id=0%3A1

    If you want the edit link to change colors or something, just mail me.

    The Logo I added:

    Preview the README https://github.com/sun-asterisk-research/multi-select-areas-image/blob/c7eae6cdc939f9aef40548a9d5666d5f1259c051/README.md

    hacktoberfest 
    opened by KaindlJulian 0
  • Add all-contributors

    Add all-contributors

    Let's recognize the contributors by following the https://github.com/all-contributors/all-contributors specifications.

    Contributors to this repo should be seen in the README.md file

    documentation hacktoberfest 
    opened by quanghung97 0
  • Supporting Two-Way Data Binding for areas element

    Supporting Two-Way Data Binding for areas element

    Hello,

    This issue is to request a new feature for this library. I would like to use this library but need to have the functionality of two-way data binding. I want to be able to update the areas data of the Multi-Select-Areas-Image component from the parent component and have that reflect in the child. I have created a pull request https://github.com/sun-asterisk-research/multi-select-areas-image/pull/15 with the proposed solution to this.

    Please let me know if there are any comments/questions or any edits that need to be made to my proposed code.

    Thank you very much.

    opened by lucianoplaynext 0
  • Supporting Two-Way Data Binding for Areas

    Supporting Two-Way Data Binding for Areas

    I would like to be able to update the areas data object of the Multi-Select-Areas-Image component from the parent component as I have a requirement to allow the user to edit the data of the select area bounds through a text field rather than using the libraries resizing options.

    Pull Request contents:

    • Switched areas from a data element to a property with default value
    • Added a selected property to the area box so users can tell which box is currently selected
    • Updated the read.me to reflect changes
    opened by lucianoplaynext 1
Releases(0.1.4)
Owner
Sun* Research
R&D Unit from Sun* Inc.
Sun* Research
Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices

This entire repo is very much in an alpha state, and should currently be used only within internal Politico projects, as props / events / classes remain fluid. However, we are working towards a 1.0.0 release, and want to capture our relevant bugs fixed during that process.

POLITICO 11 Mar 14, 2022
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

@desislavsd/vue-select Lightweight and mighty select component like Chosen and Select 2 done the Vue way. Demos & Docs License MIT License Copyright (

null 25 Sep 12, 2022
A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

vue-dynamic-select A VueJS plugin that provides a searchable and reactive select list component with no dependencies. View Online Demos Here Installat

Silas Montgomery 17 Sep 18, 2022
This component gives you a multi/single select with the power of Vuejs components.

This component gives you a multi/single select with the power of Vuejs components. Demo and doc site vue-multi-select https://github.com/IneoO/vue-mul

Valère 95 Apr 20, 2022
Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Please note that this package is still under active development. We encourage everyone to try it and give feedback. ss-select Searchable stylable sele

Miras Mustimov 26 Sep 19, 2022
Dynamic select box for vuejs - allows configuration of remote / local object fields to be collected

VueFieldSelect vue-field-select Side note - similar / related projects vue-autocompletion vue-field-select (this) Installation via NPM First Install v

Vahid Hedayati 0 Dec 12, 2019
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.4k Nov 30, 2022
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 25, 2022
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Fangzhou Li 2.6k Nov 26, 2022
A better way to display select boxes when using `v-for` on objects.

vue-dropdowns A better way to handle v-for on objects. No special dependencies, no jquery, no bootstrap, just VueJS and CSS goodness. Demo Demo - http

Mike Rodham 93 Nov 16, 2022
Select with autocomplete, slots, bootstrap and material design themes.

The current version is 3.x, if you are looking for 2.x, you can find it here (also, see breaking changes). Flexible select Demo + Documentation Featur

Илья 239 Nov 18, 2022
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

ENA 15 Nov 24, 2022
A vue version of bootstrap select

@alfsnd/vue-bootstrap-select A vue version of bootstrap select Demo Install npm install @alfsnd/vue-bootstrap-select --save Usage import VSelect from

Luis Sandoval 47 Apr 6, 2022
A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

JungJoo Seo 347 Aug 31, 2022
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 39 Jul 10, 2022
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Júlio Rosseti 71 Nov 11, 2022
Vue 3 multiselect component with single select, multiselect and tagging options.

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

Vueform 541 Nov 21, 2022
Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

?? _Fireselect_ Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Ch

Firework 51 Jul 23, 2020
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Nov 26, 2022