Skip to content

Latest commit

 

History

History
105 lines (79 loc) · 2.76 KB

README.md

File metadata and controls

105 lines (79 loc) · 2.76 KB
Raw

svg.select.js

An extension of svg.js which allows to select elements with mouse

Demo

For a demo see http://svgjs.dev/svg.resize.js/

Get Started

  • Install svg.js and svg.select.js using npm:

    npm i @svgdotjs/svg.js @svgdotjs/svg.select.js

  • Or get it from a cnd:

    <script src="https://unpkg.com/@svgdotjs/svg.js"></script>
<script src="https://unpkg.com/@svgdotjs/svg.select.js"></script>

  • Select a rectangle using this simple piece of code:

    var canvas = new SVG().addTo('body').size(500, 500)
canvas.rect(50, 50).fill('red').select()

Usage

Select

var canvas = SVG().addTo('body')
var rect = canvas.rect(100, 100)
var polygon = canvas.polygon([
  [100, 100],
  [200, 100],
  [200, 200],
  [100, 200],
])
rect.select()
polygon.pointSelect()

// both also works
polygon.select().pointSelect()

Unselect

rect.select(false)

Adaptation

Sometimes, the default shape is not to your liking. Therefore, you can create your own handles by passing in a create and update function:

rect.select({
  createHandle: (group, p, index, pointArr, handleName) => group.circle(10).css({ stroke: '#666', fill: 'blue' }),
  updateHandle: (group, p, index, pointArr, handleName) => group.center(p[0], p[1]),
  createRot: (group) => group.circle(10).css({ stroke: '#666', fill: 'blue' }),
  updateRot: (group, rotPoint, handlePoints) => group.center(p[0], p[1]),
})

polygon.pointSelect({
  createHandle: (group, p, index, pointArr, handleName) => group.circle(10).css({ stroke: '#666', fill: 'blue' }),
  updateHandle: (group, p, index, pointArr, handleName) => group.center(p[0], p[1]),
})

You can style the selection with the classes

  • svg_select_shape - normal selection
  • svg_select_shape_pointSelection - point selection
  • svg_select_handle- any normal selection handles
  • svg_select_handle_lt - left top
  • svg_select_handle_rt - right top
  • svg_select_handle_rb - right bottom
  • svg_select_handle_lb - left bottom
  • svg_select_handle_t - top
  • svg_select_handle_r - right
  • svg_select_handle_b - bottom
  • svg_select_handle_l - left
  • svg_select_handle_rot - rotation point
  • svg_select_handle_point - point select point

Contributing

git clone https://github.com/svgdotjs/svg.select.js.git
cd svg.select.js
npm install
npm run dev

Migration from svg.js v2

  • The css classes changed. In case you used your own styling, you'll need to adapt
  • A lot of options got dropped in favor of the create and update functions
    • In case you want to hide certain handles, just create an element without any size and pass a noop to update
  • the deepSelect option was moved to its own function and renamed to pointSelect