p5tools

common tools for p5

demo for basic usage, click here
cowork with openseadragon, click hear

install

yarn add p5tools

usage

const textTool = new P5ToolsManager.TextTool()
const toolsManager = new P5ToolsManager()
toolsManager.useTool(textTool)
toolsManager.usePlugin(new P5ToolsManager.ScalePlugin([textTool]))

new P5((sk: P5) => {
    sk.preload = () => {
        toolsManager.preload(sk)
    }
    sk.setup = () => {
        const viewerSize = {
            x: 1200,
            y: 600
        }
        sk.createCanvas(viewerSize.x, viewerSize.y)
        toolsManager.setup(sk)
    }
    sk.touchStarted = (event) => {
        if (event.target.nodeName === 'CANVAS') {
            toolsManager.touchStarted(sk, event)
        }
    }
    sk.touchMoved = (event: any) => {
        toolsManager.touchMoved(sk)
    }
    sk.touchEnded = () => {
        toolsManager.touchEnded(sk)
        toolsManager.quitTool()
    }

    toolsManager.setToolEnabled(P5ToolsManager.TextTool.toolName, {
        strokeColor: 'blue'
    })
}, document.getElementById('p5-div'))