@alekstar79/draggable-resizable-container 1.0.7 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -41
- package/dist/README.md +27 -41
- package/dist/package.json +3 -2
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -41,7 +41,7 @@ yarn add @alekstar79/draggable-resizable-container
|
|
|
41
41
|
You also need to import the base styles for the library to work correctly.
|
|
42
42
|
|
|
43
43
|
```javascript
|
|
44
|
-
import '@alekstar79/draggable-resizable-container/styles'
|
|
44
|
+
import '@alekstar79/draggable-resizable-container/styles.css'
|
|
45
45
|
```
|
|
46
46
|
|
|
47
47
|
## Quick Start
|
|
@@ -51,38 +51,25 @@ Here's a simple example of how to create a draggable and resizable container.
|
|
|
51
51
|
**HTML:**
|
|
52
52
|
|
|
53
53
|
```html
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
</
|
|
54
|
+
<!doctype html>
|
|
55
|
+
<html lang="en">
|
|
56
|
+
<head>
|
|
57
|
+
<meta charset="UTF-8">
|
|
58
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
59
|
+
<title>Draggable and Resizable Container</title>
|
|
60
|
+
<link
|
|
61
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
|
|
62
|
+
rel="stylesheet"
|
|
63
|
+
>
|
|
64
|
+
<script src="src/index.ts" type="module"></script>
|
|
65
|
+
</head>
|
|
66
|
+
<body></body>
|
|
67
|
+
</html>
|
|
60
68
|
```
|
|
61
69
|
|
|
62
70
|
**TypeScript:**
|
|
63
71
|
|
|
64
|
-
|
|
65
|
-
import { ContainerManager } from '@alekstar79/draggable-resizable-container';
|
|
66
|
-
import '@alekstar79/draggable-resizable-container/styles';
|
|
67
|
-
|
|
68
|
-
const containerElement = document.getElementById('my-container');
|
|
69
|
-
|
|
70
|
-
if (containerElement) {
|
|
71
|
-
const manager = new ContainerManager(containerElement, {
|
|
72
|
-
// Optional configuration
|
|
73
|
-
constrainToViewport: true,
|
|
74
|
-
resize: {
|
|
75
|
-
enabled: true,
|
|
76
|
-
directions: ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'],
|
|
77
|
-
},
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
// Listen to events
|
|
81
|
-
manager.on('dragEnd', (event) => {
|
|
82
|
-
console.log('Drag ended at:', event.state);
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
```
|
|
72
|
+
- See code from the [example](example)
|
|
86
73
|
|
|
87
74
|
## `ContainerManager` API
|
|
88
75
|
|
|
@@ -137,8 +124,7 @@ The library has a powerful plugin system that allows you to extend its functiona
|
|
|
137
124
|
To use a plugin, simply import it and pass it to the `use` method of your `ContainerManager` instance.
|
|
138
125
|
|
|
139
126
|
```typescript
|
|
140
|
-
import { ContainerManager } from '@alekstar79/draggable-resizable-container'
|
|
141
|
-
import { SnappingPlugin } from '@alekstar79/draggable-resizable-container/plugins';
|
|
127
|
+
import { ContainerManager, SnappingPlugin } from '@alekstar79/draggable-resizable-container'
|
|
142
128
|
|
|
143
129
|
const manager = new ContainerManager(containerElement);
|
|
144
130
|
|
|
@@ -191,11 +177,11 @@ Saves the state of containers to `localStorage` and restores it on page load.
|
|
|
191
177
|
**Example:**
|
|
192
178
|
|
|
193
179
|
```typescript
|
|
194
|
-
import { StatePersistencePlugin } from '@alekstar79/draggable-resizable-container
|
|
180
|
+
import { StatePersistencePlugin } from '@alekstar79/draggable-resizable-container'
|
|
195
181
|
|
|
196
182
|
manager.use(new StatePersistencePlugin({
|
|
197
183
|
containerId: 'my-unique-container-id',
|
|
198
|
-
}))
|
|
184
|
+
}))
|
|
199
185
|
```
|
|
200
186
|
|
|
201
187
|
## Utilities
|
|
@@ -207,10 +193,10 @@ The library also exports several utility classes that you can use.
|
|
|
207
193
|
A simple utility for creating a container element.
|
|
208
194
|
|
|
209
195
|
```typescript
|
|
210
|
-
import { ContainerInitializer } from '@alekstar79/draggable-resizable-container'
|
|
196
|
+
import { ContainerInitializer } from '@alekstar79/draggable-resizable-container'
|
|
211
197
|
|
|
212
|
-
const newContainer = ContainerInitializer.createContainerElement(400, 250, 100, 100)
|
|
213
|
-
document.body.appendChild(newContainer)
|
|
198
|
+
const newContainer = ContainerInitializer.createContainerElement(400, 250, 100, 100)
|
|
199
|
+
document.body.appendChild(newContainer)
|
|
214
200
|
```
|
|
215
201
|
|
|
216
202
|
### `ContentCreator` and `TemplateLoader`
|
|
@@ -218,16 +204,16 @@ document.body.appendChild(newContainer);
|
|
|
218
204
|
These utilities help with managing the content of your containers, including loading HTML templates.
|
|
219
205
|
|
|
220
206
|
```typescript
|
|
221
|
-
import { ContentCreator, getTemplateLoader, initializeTemplateSystem } from '@alekstar79/draggable-resizable-container'
|
|
207
|
+
import { ContentCreator, getTemplateLoader, initializeTemplateSystem } from '@alekstar79/draggable-resizable-container'
|
|
222
208
|
|
|
223
209
|
// Initialize the template system once in your app
|
|
224
|
-
await initializeTemplateSystem()
|
|
210
|
+
await initializeTemplateSystem()
|
|
225
211
|
|
|
226
|
-
const templateLoader = getTemplateLoader()
|
|
227
|
-
const contentCreator = new ContentCreator(templateLoader)
|
|
212
|
+
const templateLoader = getTemplateLoader()
|
|
213
|
+
const contentCreator = new ContentCreator(templateLoader)
|
|
228
214
|
|
|
229
215
|
// Load content from a template
|
|
230
|
-
await contentCreator.createContent({ template: 'my-template-name' }, containerElement)
|
|
216
|
+
await contentCreator.createContent({ template: 'my-template-name' }, containerElement)
|
|
231
217
|
```
|
|
232
218
|
|
|
233
219
|
## Development
|
package/dist/README.md
CHANGED
|
@@ -41,7 +41,7 @@ yarn add @alekstar79/draggable-resizable-container
|
|
|
41
41
|
You also need to import the base styles for the library to work correctly.
|
|
42
42
|
|
|
43
43
|
```javascript
|
|
44
|
-
import '@alekstar79/draggable-resizable-container/styles'
|
|
44
|
+
import '@alekstar79/draggable-resizable-container/styles.css'
|
|
45
45
|
```
|
|
46
46
|
|
|
47
47
|
## Quick Start
|
|
@@ -51,38 +51,25 @@ Here's a simple example of how to create a draggable and resizable container.
|
|
|
51
51
|
**HTML:**
|
|
52
52
|
|
|
53
53
|
```html
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
</
|
|
54
|
+
<!doctype html>
|
|
55
|
+
<html lang="en">
|
|
56
|
+
<head>
|
|
57
|
+
<meta charset="UTF-8">
|
|
58
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
59
|
+
<title>Draggable and Resizable Container</title>
|
|
60
|
+
<link
|
|
61
|
+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
|
|
62
|
+
rel="stylesheet"
|
|
63
|
+
>
|
|
64
|
+
<script src="src/index.ts" type="module"></script>
|
|
65
|
+
</head>
|
|
66
|
+
<body></body>
|
|
67
|
+
</html>
|
|
60
68
|
```
|
|
61
69
|
|
|
62
70
|
**TypeScript:**
|
|
63
71
|
|
|
64
|
-
|
|
65
|
-
import { ContainerManager } from '@alekstar79/draggable-resizable-container';
|
|
66
|
-
import '@alekstar79/draggable-resizable-container/styles';
|
|
67
|
-
|
|
68
|
-
const containerElement = document.getElementById('my-container');
|
|
69
|
-
|
|
70
|
-
if (containerElement) {
|
|
71
|
-
const manager = new ContainerManager(containerElement, {
|
|
72
|
-
// Optional configuration
|
|
73
|
-
constrainToViewport: true,
|
|
74
|
-
resize: {
|
|
75
|
-
enabled: true,
|
|
76
|
-
directions: ['n', 's', 'e', 'w', 'ne', 'nw', 'se', 'sw'],
|
|
77
|
-
},
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
// Listen to events
|
|
81
|
-
manager.on('dragEnd', (event) => {
|
|
82
|
-
console.log('Drag ended at:', event.state);
|
|
83
|
-
});
|
|
84
|
-
}
|
|
85
|
-
```
|
|
72
|
+
- See code from the [example](example)
|
|
86
73
|
|
|
87
74
|
## `ContainerManager` API
|
|
88
75
|
|
|
@@ -137,8 +124,7 @@ The library has a powerful plugin system that allows you to extend its functiona
|
|
|
137
124
|
To use a plugin, simply import it and pass it to the `use` method of your `ContainerManager` instance.
|
|
138
125
|
|
|
139
126
|
```typescript
|
|
140
|
-
import { ContainerManager } from '@alekstar79/draggable-resizable-container'
|
|
141
|
-
import { SnappingPlugin } from '@alekstar79/draggable-resizable-container/plugins';
|
|
127
|
+
import { ContainerManager, SnappingPlugin } from '@alekstar79/draggable-resizable-container'
|
|
142
128
|
|
|
143
129
|
const manager = new ContainerManager(containerElement);
|
|
144
130
|
|
|
@@ -191,11 +177,11 @@ Saves the state of containers to `localStorage` and restores it on page load.
|
|
|
191
177
|
**Example:**
|
|
192
178
|
|
|
193
179
|
```typescript
|
|
194
|
-
import { StatePersistencePlugin } from '@alekstar79/draggable-resizable-container
|
|
180
|
+
import { StatePersistencePlugin } from '@alekstar79/draggable-resizable-container'
|
|
195
181
|
|
|
196
182
|
manager.use(new StatePersistencePlugin({
|
|
197
183
|
containerId: 'my-unique-container-id',
|
|
198
|
-
}))
|
|
184
|
+
}))
|
|
199
185
|
```
|
|
200
186
|
|
|
201
187
|
## Utilities
|
|
@@ -207,10 +193,10 @@ The library also exports several utility classes that you can use.
|
|
|
207
193
|
A simple utility for creating a container element.
|
|
208
194
|
|
|
209
195
|
```typescript
|
|
210
|
-
import { ContainerInitializer } from '@alekstar79/draggable-resizable-container'
|
|
196
|
+
import { ContainerInitializer } from '@alekstar79/draggable-resizable-container'
|
|
211
197
|
|
|
212
|
-
const newContainer = ContainerInitializer.createContainerElement(400, 250, 100, 100)
|
|
213
|
-
document.body.appendChild(newContainer)
|
|
198
|
+
const newContainer = ContainerInitializer.createContainerElement(400, 250, 100, 100)
|
|
199
|
+
document.body.appendChild(newContainer)
|
|
214
200
|
```
|
|
215
201
|
|
|
216
202
|
### `ContentCreator` and `TemplateLoader`
|
|
@@ -218,16 +204,16 @@ document.body.appendChild(newContainer);
|
|
|
218
204
|
These utilities help with managing the content of your containers, including loading HTML templates.
|
|
219
205
|
|
|
220
206
|
```typescript
|
|
221
|
-
import { ContentCreator, getTemplateLoader, initializeTemplateSystem } from '@alekstar79/draggable-resizable-container'
|
|
207
|
+
import { ContentCreator, getTemplateLoader, initializeTemplateSystem } from '@alekstar79/draggable-resizable-container'
|
|
222
208
|
|
|
223
209
|
// Initialize the template system once in your app
|
|
224
|
-
await initializeTemplateSystem()
|
|
210
|
+
await initializeTemplateSystem()
|
|
225
211
|
|
|
226
|
-
const templateLoader = getTemplateLoader()
|
|
227
|
-
const contentCreator = new ContentCreator(templateLoader)
|
|
212
|
+
const templateLoader = getTemplateLoader()
|
|
213
|
+
const contentCreator = new ContentCreator(templateLoader)
|
|
228
214
|
|
|
229
215
|
// Load content from a template
|
|
230
|
-
await contentCreator.createContent({ template: 'my-template-name' }, containerElement)
|
|
216
|
+
await contentCreator.createContent({ template: 'my-template-name' }, containerElement)
|
|
231
217
|
```
|
|
232
218
|
|
|
233
219
|
## Development
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alekstar79/draggable-resizable-container",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "A modern TypeScript library for managing draggable and resizable containers",
|
|
5
5
|
"author": "Aleksey Tarasenko <alekstar79@yandex.ru>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
"./styles": {
|
|
18
18
|
"import": "./dist/index.css",
|
|
19
19
|
"require": "./dist/index.css"
|
|
20
|
-
}
|
|
20
|
+
},
|
|
21
|
+
"./style.css": "./dist/index.css"
|
|
21
22
|
},
|
|
22
23
|
"files": [
|
|
23
24
|
"dist",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alekstar79/draggable-resizable-container",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.9",
|
|
4
4
|
"description": "A modern TypeScript library for managing draggable and resizable containers",
|
|
5
5
|
"author": "Aleksey Tarasenko <alekstar79@yandex.ru>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
"./styles": {
|
|
18
18
|
"import": "./dist/index.css",
|
|
19
19
|
"require": "./dist/index.css"
|
|
20
|
-
}
|
|
20
|
+
},
|
|
21
|
+
"./style.css": "./dist/index.css"
|
|
21
22
|
},
|
|
22
23
|
"files": [
|
|
23
24
|
"dist",
|