Initial commit: igny8 project

This commit is contained in:
igny8
2025-11-09 10:27:02 +00:00
commit 60b8188111
27265 changed files with 4360521 additions and 0 deletions

View File

@@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (c) 2018 Ulrich-Matthias
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,152 @@
# svg.draggable.js
A plugin for the [svgdotjs.github.io](https://svgdotjs.github.io/) library to make elements draggable.
svg.draggable.js is licensed under the terms of the MIT License.
## Usage
Install the plugin:
```sh
npm install @svgdotjs/svg.js @svgdotjs/svg.draggable.js
```
Include this plugin after including the svg.js library in your html document.
```html
<script src="node_modules/@svgdotjs/svg.js/dist/svg.js"></script>
<script src="node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.js"></script>
```
Or for esm just require it:
```js
import { SVG } from '@svgdotjs/svg.js'
import '@svgdotjs/svg.draggable.js'
```
To make an element draggable just call `draggable()` on the element
```javascript
var draw = SVG().addTo('#canvas').size(400, 400)
var rect = draw.rect(100, 100)
rect.draggable()
```
Yes indeed, that's it! Now the `rect` is draggable.
## Events
The Plugin fires 4 different events
- beforedrag (cancelable)
- dragstart
- dragmove (cancelable)
- dragend
You can bind/unbind listeners to this events:
```javascript
// bind
rect.on('dragstart.namespace', function (event) {
// event.detail.event hold the given data explained below
// this == rect
})
// unbind
rect.off('dragstart.namespace')
```
### event.detail
`beforedrag`, `dragstart`, `dragmove` and `dragend` gives you the mouse / touch `event` and the `handler` which calculates the drag. The `dragmove` event also gives you the `dx` and `dy` values for your convenience.
Except for `beforedrag` the events also give you `detail.box` which holds the initial or new bbox of the element before or after the drag.
You can use this property to implement custom drag behavior as seen below.
Please note that the bounding box is not what you would expect for nested svgs because those calculate their bbox based on their content and not their x, y, width and height values. Therefore stuff like constraints needs to be implemented a bit differently.
### Cancelable Events
You can prevent the default action of `beforedrag` and `dragmove` with a call to `event.preventDefault()` in the callback function.
The shape won't be dragged in this case. That is helpfull if you want to implement your own drag handling.
```javascript
rect.draggable().on('beforedrag', (e) => {
e.preventDefault()
// no other events are bound
// drag was completely prevented
})
rect.draggable().on('dragmove', (e) => {
e.preventDefault()
e.detail.handler.move(100, 200)
// events are still bound e.g. dragend will fire anyway
})
```
### Custom Drag Behavior
#### Constraints
```js
// Some constraints (x, y, width, height)
const constraints = new SVG.Box(100, 100, 400, 400)
rect.on('dragmove.namespace', (e) => {
const { handler, box } = e.detail
e.preventDefault()
let { x, y } = box
// In case your dragged element is a nested element,
// you are better off using the rbox() instead of bbox()
if (x < constraints.x) {
x = constraints.x
}
if (y < constraints.y) {
y = constraints.y
}
if (box.x2 > constraints.x2) {
x = constraints.x2 - box.w
}
if (box.y2 > constraints.y2) {
y = constraints.y2 - box.h
}
handler.move(x - (x % 50), y - (y % 50))
})
```
#### Snap to grid
```js
rect.on('dragmove.namespace', (e) => {
const { handler, box } = e.detail
e.preventDefault()
handler.move(box.x - (box.x % 50), box.y - (box.y % 50))
})
```
## Remove
The draggable functionality can be removed calling draggable again with false as argument:
```javascript
rect.draggable(false)
```
## Restrictions
- If your root-svg is transformed this plugin won't work properly in Firefox. Viewbox however is not affected.
## Dependencies
This module requires svg.js >= v3.0.10

View File

@@ -0,0 +1,11 @@
(function(e,o){typeof exports=="object"&&typeof module<"u"?o(require("@svgdotjs/svg.js")):typeof define=="function"&&define.amd?define(["@svgdotjs/svg.js"],o):(e=typeof globalThis<"u"?globalThis:e||self,o(e.SVG))})(this,function(e){"use strict";/*!
* @svgdotjs/svg.draggable.js - An extension for svg.js which allows to drag elements with your mouse
* @version 3.0.6
* https://github.com/svgdotjs/svg.draggable.js
*
* @copyright Wout Fierens
* @license MIT
*
* BUILT: Sat Feb 08 2025 09:31:06 GMT+0100 (Central European Standard Time)
*/const o=s=>(s.changedTouches&&(s=s.changedTouches[0]),{x:s.clientX,y:s.clientY});class f{constructor(t){t.remember("_draggable",this),this.el=t,this.drag=this.drag.bind(this),this.startDrag=this.startDrag.bind(this),this.endDrag=this.endDrag.bind(this)}init(t){t?(this.el.on("mousedown.drag",this.startDrag),this.el.on("touchstart.drag",this.startDrag,{passive:!1})):(this.el.off("mousedown.drag"),this.el.off("touchstart.drag"))}startDrag(t){const i=!t.type.indexOf("mouse");if(i&&t.which!==1&&t.buttons!==0||this.el.dispatch("beforedrag",{event:t,handler:this}).defaultPrevented)return;t.preventDefault(),t.stopPropagation(),this.init(!1),this.box=this.el.bbox(),this.lastClick=this.el.point(o(t));const r=(i?"mousemove":"touchmove")+".drag",n=(i?"mouseup":"touchend")+".drag";e.on(window,r,this.drag,this,{passive:!1}),e.on(window,n,this.endDrag,this,{passive:!1}),this.el.fire("dragstart",{event:t,handler:this,box:this.box})}drag(t){const{box:i,lastClick:r}=this,n=this.el.point(o(t)),d=n.x-r.x,a=n.y-r.y;if(!d&&!a)return i;const h=i.x+d,l=i.y+a;this.box=new e.Box(h,l,i.w,i.h),this.lastClick=n,!this.el.dispatch("dragmove",{event:t,handler:this,box:this.box,dx:d,dy:a}).defaultPrevented&&this.move(h,l)}move(t,i){this.el.type==="svg"?e.G.prototype.move.call(this.el,t,i):this.el.move(t,i)}endDrag(t){this.drag(t),this.el.fire("dragend",{event:t,handler:this,box:this.box}),e.off(window,"mousemove.drag"),e.off(window,"touchmove.drag"),e.off(window,"mouseup.drag"),e.off(window,"touchend.drag"),this.init(!0)}}e.extend(e.Element,{draggable(s=!0){return(this.remember("_draggable")||new f(this)).init(s),this}})});
//# sourceMappingURL=svg.draggable.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,72 @@
{
"name": "@svgdotjs/svg.draggable.js",
"version": "3.0.6",
"description": "An extension for svg.js which allows to drag elements with your mouse",
"type": "module",
"main": "dist/svg.draggable.js",
"module": "src/svg.draggable.js",
"exports": {
".": {
"import": {
"types": "./svg.draggable.js.d.ts",
"default": "./src/svg.draggable.js"
},
"require": {
"types": "./svg.draggable.js.d.cts",
"default": "./src/svg.draggable.js"
},
"browser": {
"types": "./svg.draggable.js.d.ts",
"default": "./src/svg.draggable.js"
}
}
},
"unpkg": "dist/svg.draggable.js",
"jsdelivr": "dist/svg.draggable.js",
"files": [
"/dist",
"/src",
"/svg.draggable.js.d.ts",
"/svg.draggable.js.d.cts"
],
"keywords": [
"svg.js",
"draggable",
"mouse"
],
"bugs": "https://github.com/svgdotjs/svg.draggable.js/issues",
"license": "MIT",
"typings": "./svg.draggable.js.d.ts",
"author": {
"name": "Wout Fierens"
},
"contributors": [
{
"name": "Wout Fierens"
},
{
"name": "Ulrich-Matthias Schäfer"
}
],
"homepage": "https://github.com/svgdotjs/svg.draggable.js",
"repository": {
"type": "git",
"url": "git+https://github.com/svgdotjs/svg.draggable.js.git"
},
"scripts": {
"build": "npm run fix && vite build",
"fix": "npx eslint --fix",
"prepublishOnly": "rm -rf ./dist && npm run build"
},
"devDependencies": {
"eslint": "^8.36.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-config-prettier": "^8.8.0",
"prettier": "^2.8.5",
"typescript": "^5.0.2",
"vite": "^4.2.1"
},
"peerDependencies": {
"@svgdotjs/svg.js": "^3.2.4"
}
}

View File

@@ -0,0 +1,138 @@
import { Box, Element, G, extend, off, on } from '@svgdotjs/svg.js'
const getCoordsFromEvent = (ev) => {
if (ev.changedTouches) {
ev = ev.changedTouches[0]
}
return { x: ev.clientX, y: ev.clientY }
}
// Creates handler, saves it
class DragHandler {
constructor(el) {
el.remember('_draggable', this)
this.el = el
this.drag = this.drag.bind(this)
this.startDrag = this.startDrag.bind(this)
this.endDrag = this.endDrag.bind(this)
}
// Enables or disabled drag based on input
init(enabled) {
if (enabled) {
this.el.on('mousedown.drag', this.startDrag)
this.el.on('touchstart.drag', this.startDrag, { passive: false })
} else {
this.el.off('mousedown.drag')
this.el.off('touchstart.drag')
}
}
// Start dragging
startDrag(ev) {
const isMouse = !ev.type.indexOf('mouse')
// Check for left button
if (isMouse && ev.which !== 1 && ev.buttons !== 0) {
return
}
// Fire beforedrag event
if (
this.el.dispatch('beforedrag', { event: ev, handler: this })
.defaultPrevented
) {
return
}
// Prevent browser drag behavior as soon as possible
ev.preventDefault()
// Prevent propagation to a parent that might also have dragging enabled
ev.stopPropagation()
// Make sure that start events are unbound so that one element
// is only dragged by one input only
this.init(false)
this.box = this.el.bbox()
this.lastClick = this.el.point(getCoordsFromEvent(ev))
const eventMove = (isMouse ? 'mousemove' : 'touchmove') + '.drag'
const eventEnd = (isMouse ? 'mouseup' : 'touchend') + '.drag'
// Bind drag and end events to window
on(window, eventMove, this.drag, this, { passive: false })
on(window, eventEnd, this.endDrag, this, { passive: false })
// Fire dragstart event
this.el.fire('dragstart', { event: ev, handler: this, box: this.box })
}
// While dragging
drag(ev) {
const { box, lastClick } = this
const currentClick = this.el.point(getCoordsFromEvent(ev))
const dx = currentClick.x - lastClick.x
const dy = currentClick.y - lastClick.y
if (!dx && !dy) return box
const x = box.x + dx
const y = box.y + dy
this.box = new Box(x, y, box.w, box.h)
this.lastClick = currentClick
if (
this.el.dispatch('dragmove', {
event: ev,
handler: this,
box: this.box,
dx,
dy,
}).defaultPrevented
) {
return
}
this.move(x, y)
}
move(x, y) {
// Svg elements bbox depends on their content even though they have
// x, y, width and height - strange!
// Thats why we handle them the same as groups
if (this.el.type === 'svg') {
G.prototype.move.call(this.el, x, y)
} else {
this.el.move(x, y)
}
}
endDrag(ev) {
// final drag
this.drag(ev)
// fire dragend event
this.el.fire('dragend', { event: ev, handler: this, box: this.box })
// unbind events
off(window, 'mousemove.drag')
off(window, 'touchmove.drag')
off(window, 'mouseup.drag')
off(window, 'touchend.drag')
// Rebind initial Events
this.init(true)
}
}
extend(Element, {
draggable(enable = true) {
const dragHandler = this.remember('_draggable') || new DragHandler(this)
dragHandler.init(enable)
return this
},
})

View File

@@ -0,0 +1,7 @@
import { Element } from '@svgdotjs/svg.js'
declare module '@svgdotjs/svg.js' {
interface Element {
draggable(enable?: boolean): this
}
}

View File

@@ -0,0 +1,7 @@
import { Element } from '@svgdotjs/svg.js'
declare module '@svgdotjs/svg.js' {
interface Element {
draggable(enable?: boolean): this
}
}