Coder Social home page Coder Social logo

sanichkotikov / pinch-zoom-pan Goto Github PK

View Code? Open in Web Editor NEW
5.0 2.0 4.0 93 KB

A simple module that add pinch-zoom and pan to your HTML element

Home Page: https://sanichkotikov.github.io/react-family-tree-example/

License: MIT License

TypeScript 100.00%
pinch zoom pan npm-package npm-module nativejs

pinch-zoom-pan's People

Contributors

sanichkotikov avatar

Stargazers

avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

jdanil denislebedinsky emedgene laszlo1337

pinch-zoom-pan's Issues

Doesn't seem to work with Svelte

Hello.

Using svelte 4 I cannot make this library work, here's the error I'm getting:

D:\project-sveltekit\node_modules\pinch-zoom-pan\lib\index.js:1
import { DEFAULT_STATE, MAX_ZOOM, MIN_ZOOM } from './constants';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)

here's how it's set up:
ImageZoom.svelte

<script>
	import { create } from 'pinch-zoom-pan'
	import { onMount } from 'svelte'

	export let image

	let rootElement

	onMount(() => {
		const canvas = create({
			element: rootElement,
			minZoom: 0.5,
			maxZoom: 2,
			captureWheel: true,
		})

		return canvas.destroy
	})
</script>

<div bind:this={rootElement} class="root">
	<div class="point">
		<div class="canvas">
			<svelte:component this={image} />
		</div>
	</div>
</div>

<style>
	.root {
		position: relative;
		transform: translateZ(0);
		overflow: hidden;
	}

	.point {
		position: absolute;
		width: 0;
		height: 0;
		transform: translate(0, 0) scale(1);
		transform-origin: center;
		will-change: transform;
	}

	.canvas {
		position: absolute;
		transform: translate(-50%, -50%);
	}
</style>

Onclick focus target on canvas

Hello,
I am working with this component and I was wondering if it supports the ability to focus on an element within the canvas.

For example, If I click a button I would like to change position of the canvas so that an element will be centered on the canvas.

Please let me know if this is possible, thanks.

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.