Example-Automerge-App/src/docManager.js

87 lines
1.9 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// docManager.js (Automerge 2.x style)
import { Repo } from "@automerge/automerge-repo"
// For IndexedDB storage
import { IndexedDBStorageAdapter } from '@automerge/automerge-repo-storage-indexeddb'
import { BrowserWebSocketClientAdapter } from "@automerge/automerge-repo-network-websocket"
let handle
export function initRepo() {
const repo = new Repo({
// Choose a network adapter or omit if youre doing pure local
network: [new BrowserWebSocketClientAdapter("wss://automerge.rheinheim.fraction.ch")],
// Use IndexedDB instead of localStorage
storage: new IndexedDBStorageAdapter({
// optionally specify a database name (defaults to "automerge")
databaseName: "myAutomergeDB"
})
})
// Now create or open a document
handle = repo.create()
// Listen for 'change' events
handle.on("change", ({doc}) => {
console.log("Document changed!")
// The up-to-date document is accessible via handle.doc
console.log("Current doc state:", doc)
})
// Initialize the doc with some data
handle.change(doc => {
doc.shapes = []
})
return handle
}
/**
* Add a new circle to the document
*/
export function addCircle(x, y, radius) {
handle.change(doc => {
doc.shapes.push({
id: Date.now(),
type: "circle",
x,
y,
radius,
color: "red"
})
})
}
/**
* Fügt dem Dokument ein Dreieck hinzu
*/
export function addTriangle(x1, y1, x2, y2, x3, y3) {
handle.change(doc => {
doc.shapes.push({
id: Date.now(),
type: "triangle",
coordinates: [
{ x: x1, y: y1 },
{ x: x2, y: y2 },
{ x: x3, y: y3 },
],
color: "blue"
});
});
}
/**
* Move a shape in the document
*/
export function moveShape(shapeId, newX, newY) {
handle.change(doc => {
const shape = doc.shapes.find(s => s.id === shapeId)
if (shape) {
shape.x = newX
shape.y = newY
}
})
}