Toggling multiple tools on Paper.js - paperjs

Question

Can someone show me a working example (JSFiddle or otherwise) of how to have two tools on Paper.js that a user can click on to draw different shapes, say one for circles and one for squares?
Thanks!

Answer 1

You've got at least a couple of options here,
1. Activate Tool from paper.tools
Paper.js allows you to activate a Tool by calling tool.activate(), which causes only that particular Tool to receive Tool events, such as mousedown, mousedrag etc ...
When you create a new Tool via new paper.Tool(), that Tool is added in paper.tools so you can lookup for the Tool within that Array and call tool.activate() on it.
An example:
window.onload = () => {
// Setup Paper
paper.setup(document.querySelector('canvas'))
// Find a Tool in `paper.tools` and activate it
const activateTool = name => {
const tool = paper.tools.find(tool => tool.name === name)
tool.activate()
}
// Tool Path, draws paths on mouse-drag.
// Note: Wrap each Tool in an IIFE to avoid polluting the
// global scope with variables related with that Tool.
;(() => {
const tool = new paper.Tool()
tool.name = 'toolPath'
let path
tool.onMouseDown = function(event) {
path = new paper.Path()
path.strokeColor = '#424242'
path.strokeWidth = 4
path.add(event.point)
}
tool.onMouseDrag = function(event) {
path.add(event.point)
}
})()
// Tool Circle, draws a 30px circle on mousedown
;(() => {
const tool = new paper.Tool()
tool.name = 'toolCircle'
let path
tool.onMouseDown = function(event) {
path = new paper.Path.Circle({
center: event.point,
radius: 30,
fillColor: '#9C27B0'
})
}
})()
// Attach click handlers for Tool activation on all
// DOM buttons with class '.tool-button'
document.querySelectorAll('.tool-button').forEach(toolBtn => {
toolBtn.addEventListener('click', e => {
activateTool(e.target.getAttribute('data-tool-name'))
})
})
}
html,
body,
canvas {
width: 100%;
height: 100%;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.js"></script>
<button
class="tool-button"
data-tool-name="toolPath">
Draw Paths
</button>
<button
class="tool-button"
data-tool-name="toolCircle">
Stamp Circles
</button>
<canvas resize></canvas>
2. Create a ToolStack Class
However, I find it far more practical to create a ToolStack Class since it allows me to add additional methods later on, i.e isToolActive(), onToolSelect() (for adding is-active classes to DOM tool buttons) etc..
The ToolStack should then implement various methods for handling your Tools, the first and foremost being an activateTool method, that will lookup for a Tool by name and call it's tool.activate() method.
An example:
window.onload = () => {
// Setup Paper
paper.setup(document.querySelector('canvas'))
// Toolstack
class ToolStack {
constructor(tools) {
this.tools = tools.map(tool => tool())
}
activateTool(name) {
const tool = this.tools.find(tool => tool.name === name)
tool.activate()
}
// add more methods here as you see fit ...
}
// Tool Path, draws paths on mouse-drag
const toolPath = () => {
const tool = new paper.Tool()
tool.name = 'toolPath'
let path
tool.onMouseDown = function(event) {
path = new paper.Path()
path.strokeColor = '#424242'
path.strokeWidth = 4
path.add(event.point)
}
tool.onMouseDrag = function(event) {
path.add(event.point)
}
return tool
}
// Tool Circle, draws a 30px circle on mousedown
const toolCircle = () => {
const tool = new paper.Tool()
tool.name = 'toolCircle'
let path
tool.onMouseDown = function(event) {
path = new paper.Path.Circle({
center: event.point,
radius: 30,
fillColor: '#9C27B0'
})
}
return tool
}
// Construct a Toolstack, passing your Tools
const toolStack = new ToolStack([toolPath, toolCircle])
// Activate a certain Tool
toolStack.activateTool('toolPath')
// Attach click handlers for Tool activation on all
// DOM buttons with class '.tool-button'
document.querySelectorAll('.tool-button').forEach(toolBtn => {
toolBtn.addEventListener('click', e => {
toolStack.activateTool(e.target.getAttribute('data-tool-name'))
})
})
}
html,
body,
canvas {
width: 100%;
height: 100%;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.js"></script>
<button
class="tool-button"
data-tool-name="toolPath">
Draw Paths
</button>
<button
class="tool-button"
data-tool-name="toolCircle">
Stamp Circles
</button>
<canvas resize></canvas>