Compare commits

..

19 Commits

Author SHA1 Message Date
Kevin Jahns
e58f633115 Deploy 0.8.8 2016-01-18 15:40:31 +01:00
Kevin Jahns
65ea42481e Deploy 0.8.7 2016-01-16 01:45:53 +01:00
Kevin Jahns
a220b06ad9 Deploy 0.8.6 2016-01-16 01:41:55 +01:00
Kevin Jahns
2650338b4b Deploy 0.8.5 2016-01-15 18:09:41 +01:00
Kevin Jahns
919dfb5e16 Deploy 0.8.4 2016-01-15 17:58:01 +01:00
Kevin Jahns
3b8e148d8f Deploy 0.8.3 2016-01-15 03:46:51 +01:00
Kevin Jahns
a77eb39218 Deploy 0.8.2 2016-01-15 03:10:52 +01:00
Kevin Jahns
9902da470b Deploy 0.8.1 2016-01-15 00:03:37 +01:00
Kevin Jahns
0ec83aa431 Deploy 0.8.0 2016-01-15 00:01:56 +01:00
Kevin Jahns
ff006c92d7 Deploy 0.7.6 2016-01-11 15:48:06 +01:00
Kevin Jahns
15a472df44 Deploy 0.7.5 2016-01-11 15:47:19 +01:00
Kevin Jahns
4cb0f2b5b9 publish v0.7.3 2016-01-09 21:07:04 +01:00
Kevin Jahns
ab6a193ec6 added safety to setUserId (when called twice) 2015-12-30 16:34:39 +01:00
Kevin Jahns
f18a6ee151 added quill example 2015-12-27 14:57:23 +01:00
Kevin Jahns
8ba1e4ce27 update 2015-12-18 16:34:00 +01:00
Kevin Jahns
625a64635a added another example, updated readme 2015-12-09 18:39:09 +01:00
Kevin Jahns
b32c2e4ed6 publish 0.7 - with (hopefully) stable API 2015-12-09 10:10:43 +01:00
Kevin Jahns
96f8f77dc4 update 2015-12-03 18:02:37 +01:00
Kevin Jahns
08f0702fcd update port 2015-12-02 20:04:11 +01:00
17 changed files with 573 additions and 5221 deletions

2
.gitignore vendored
View File

@@ -1,5 +1,5 @@
node_modules
Examples/bower_components
bower_components
.directory
.codio
.settings

18
Examples/Chat/index.html Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<body>
<style>
#chat p span {
color: blue;
}
</style>
<div id="chat"></div>
<form id="chatform">
<input name="username" type="text" style="width:15%;">
<input name="message" type="text" style="width:60%;">
<input type="submit" value="Send">
</form>
<script src="../bower_components/yjs/y.js"></script>
<script src="./index.js"></script>
</body>
</html>

75
Examples/Chat/index.js Normal file
View File

@@ -0,0 +1,75 @@
/* @flow */
/* global Y */
// initialize a shared object. This function call returns a promise!
Y({
db: {
name: 'memory'
},
connector: {
name: 'websockets-client',
room: 'chat-example'
// debug: true,
// url: 'http://127.0.0.1:2345'
},
sourceDir: '/bower_components',
share: {
chat: 'Array'
}
}).then(function (y) {
window.y = y
// This functions inserts a message at the specified position in the DOM
function appendMessage(message, position) {
var p = document.createElement('p')
var uname = document.createElement('span')
uname.appendChild(document.createTextNode(message.username + ": "))
p.appendChild(uname)
p.appendChild(document.createTextNode(message.message))
document.querySelector('#chat').insertBefore(p, chat.children[position] || null)
}
// This function makes sure that only 7 messages exist in the chat history.
// The rest is deleted
function cleanupChat () {
var len
while ((len = y.share.chat.length) > 7) {
y.share.chat.delete(0)
}
}
// Insert the initial content
y.share.chat.toArray().forEach(appendMessage)
cleanupChat()
// whenever content changes, make sure to reflect the changes in the DOM
y.share.chat.observe(function (events) {
for (var i = 0; i < events.length; i++) {
if (events[i].type === 'insert') {
appendMessage(events[i].value, events[i].index)
} else if (events[i].type === 'delete') {
chat.children[events[i].index].remove()
}
}
// concurrent insertions may result in a history > 7, so cleanup here
cleanupChat()
})
document.querySelector('#chatform').onsubmit = function (event) {
// the form is submitted
var message = {
username: this.querySelector("[name=username]").value,
message: this.querySelector("[name=message]").value
}
if (message.username.length > 0 && message.message.length > 0) {
if (y.share.chat.length > 6) {
// If we are goint to insert the 8th element, make sure to delete first.
y.share.chat.delete(0)
}
// Here we insert a message in the shared chat type.
// This will call the observe function (see line 40)
// and reflect the change in the DOM
y.share.chat.push([message])
this.querySelector("[name=message]").value = ""
}
// Do not send this form!
event.preventDefault()
return false
}
})

View File

@@ -16,8 +16,7 @@
<path d="M 325.63989,452.69678 C 317.92163,423.11035 287.36353,445.9126 268.64673,447.82227 C 250.27417,449.69727 239.77563,436.57373 239.77563,419.32568 C 239.77563,402.07812 254.02368,395.70361 265.27222,394.5791 C 276.52075,393.4541 282.14526,396.45361 297.89331,407.32715 C 313.64136,418.20117 326.3894,399.45313 327.8894,392.7041 C 329.3894,385.95508 320.76538,342.83545 320.01538,330.46191 C 319.75855,326.2207 320.56372,321.21484 321.58911,315.6377 C 315.92114,317.13525 309.58862,318.82715 302.39282,320.71338 C 263.77222,330.83691 232.27661,318.46338 221.40259,308.71484 C 210.52905,298.96582 229.27661,284.71777 234.90112,279.09326 C 240.52563,273.46924 243.90015,262.59521 239.77563,247.22217 C 235.65112,231.84912 201.90503,222.10059 179.03296,239.34814 C 156.16089,256.59619 180.90796,285.09277 188.40698,293.3418 C 195.90601,301.59033 186.15698,312.08936 170.03442,313.58887 C 160.60962,314.46582 119.15894,313.67676 86.340576,312.87012 C 85.573975,347.74561 84.581299,386.15088 83.794922,402.07812 C 82.295166,432.44922 109.29175,422.32568 115.66577,420.82568 C 122.04028,419.32568 126.16479,409.57715 143.03735,408.45215 C 185.9231,405.59326 186.09985,466.69629 144.16235,467.69482 C 128.41431,468.06982 113.79126,451.19678 108.16675,447.44727 C 102.54272,443.69775 87.919433,442.94775 83.794922,457.9458 C 82.01709,464.41113 78.118652,481.65137 78.098144,496.18994 C 78.071045,515.38037 82.295166,531.81201 82.295166,531.81201 C 82.295166,531.81201 105.54224,526.5625 149.41187,526.5625 C 193.28149,526.5625 199.65552,547.93506 194.78101,558.80859 C 189.90649,569.68213 181.28296,568.93213 179.40796,583.18066 C 172.7063,634.11133 253.34106,631.08203 249.14917,584.68018 C 247.96948,571.62354 237.16528,571.66699 232.27661,557.68359 C 222.17944,528.80273 244.64966,523.56299 257.39819,524.68799 C 263.59351,525.23437 290.95679,529.73389 320.75757,531.21582 C 321.22437,531.23877 321.69312,531.25928 322.16089,531.28125 C 326.09985,518.06592 329.95825,503.87646 330.1394,498.44092 C 330.51392,487.19238 330.1394,469.94434 325.63989,452.69678 z " style="fill:#d3ea9d;stroke:#000000" id="path2508"/>
</g>
</svg>
<script src="../bower_components/yjs/y.es6"></script>
<script src="../bower_components/yjs/y.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="./index.js"></script>
</body>

View File

@@ -7,10 +7,10 @@ Y({
name: 'memory'
},
connector: {
url: 'http://127.0.0.1:1234',
name: 'websockets-client',
room: 'Puzzle-example2',
debug: true
room: 'Puzzle-example2'
// debug: true,
// url: 'http://127.0.0.1:2345'
},
sourceDir: '/bower_components',
share: {
@@ -43,7 +43,7 @@ Y({
var mouse = d3.mouse(this.parentNode)
var x = mouse[0] - origin.x
var y = mouse[1] - origin.y
piece.set('translation', {x, y})
piece.set('translation', {x: x, y: y})
})
var data = [y.share.piece1, y.share.piece2, y.share.piece3, y.share.piece4]

145
Examples/Quill/index.html Normal file
View File

@@ -0,0 +1,145 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../bower_components/quill/dist/quill.snow.css" />
<style>
#quill {
border: 1px solid gray;
box-shadow: 0px 0px 10px gray;
}
#toolbar {
border-bottom: 1px solid gray;
}
</style>
</head>
<body>
<div id="quill">
<!-- Create the toolbar container -->
<div id="toolbar" class="toolbar">
<span class="ql-format-group">
<select title="Font" class="ql-font">
<option value="sans-serif" selected="">Sans Serif</option>
<option value="serif">Serif</option>
<option value="monospace">Monospace</option>
</select>
<select title="Size" class="ql-size">
<option value="10px">Small</option>
<option value="13px" selected="">Normal</option>
<option value="18px">Large</option>
<option value="32px">Huge</option>
</select>
</span>
<span class="ql-format-group">
<span title="Bold" class="ql-format-button ql-bold"></span>
<span class="ql-format-separator"></span>
<span title="Italic" class="ql-format-button ql-italic"></span>
<span class="ql-format-separator"></span>
<span title="Underline" class="ql-format-button ql-underline"></span>
<span class="ql-format-separator"></span>
<span title="Strikethrough" class="ql-format-button ql-strike"></span>
</span>
<span class="ql-format-group">
<select title="Text Color" class="ql-color">
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)" selected=""></option>
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
<option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)"></option>
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
</select>
<span class="ql-format-separator"></span>
<select title="Background Color" class="ql-background">
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"></option>
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
<option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)" selected=""></option>
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
</select>
</span>
<span class="ql-format-group">
<span title="List" class="ql-format-button ql-list"></span>
<span class="ql-format-separator"></span>
<span title="Bullet" class="ql-format-button ql-bullet"></span>
<span class="ql-format-separator"></span>
<select title="Text Alignment" class="ql-align">
<option value="left" label="Left" selected=""></option>
<option value="center" label="Center"></option>
<option value="right" label="Right"></option>
<option value="justify" label="Justify"></option>
</select>
</span>
<span class="ql-format-group">
<span title="Link" class="ql-format-button ql-link"></span>
</span>
</div>
<!-- Create the editor container -->
<div id="editor">
</div>
</div>
<!-- Include the Quill library -->
<script src="../bower_components/quill/dist/quill.js"></script>
<script src="../bower_components/yjs/y.js"></script>
<script src="./index.js"></script>
</body>
</html>

52
Examples/Quill/index.js Normal file
View File

@@ -0,0 +1,52 @@
/* global Y, Quill */
// initialize a shared object. This function call returns a promise!
Y({
db: {
name: 'memory',
namespace: 'richtext-example20'
},
connector: {
name: 'websockets-client',
room: 'richtext-example20',
debug: true,
url: 'http://127.0.0.1:1234'
},
sourceDir: '/bower_components',
share: {
richtext: 'Richtext' // y.share.richtext is of type Y.Richtext
}
}).then(function (y) {
window.yquill = y
// create quill element
window.quill = new Quill('#editor', {
modules: {
'toolbar': { container: '#toolbar' },
'link-tooltip': true
},
theme: 'snow'
})
// bind quill to richtext type
y.share.richtext.bind(window.quill)
})
Y({
db: {
name: 'memory',
namespace: 'richtext-example220'
},
connector: {
name: 'websockets-client',
room: 'richtext-example22'
// debug: true,
// url: 'http://127.0.0.1:1234'
},
sourceDir: '/bower_components',
share: {
richtext: 'Richtext' // y.share.richtext is of type Y.Richtext
}
}).then(function (y) {
window.y = y
})

View File

@@ -1,9 +1,8 @@
<!DOCTYPE html>
<html>
<body>
<textarea style="width:80%;" rows=40 id="textfield"></textarea>
<script src="../bower_components/yjs/y.es6"></script>
<textarea style="width:80%;" rows=40 id="textfield" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
<script src="../bower_components/yjs/y.js"></script>
<script src="./index.js"></script>
</body>
</html>

View File

@@ -7,7 +7,9 @@ Y({
},
connector: {
name: 'websockets-client',
room: 'Textarea-example'
room: 'Textarea-example-dev'
// debug: true
// url: 'http://127.0.0.1:2345'
},
sourceDir: '/bower_components',
share: {

View File

@@ -9,6 +9,15 @@
"license": "MIT",
"ignore": [],
"dependencies": {
"yjs": "../"
"yjs": "~0.7.6",
"y-array": "~0.7.5",
"y-map": "~0.7.2",
"y-memory": "~0.7.0",
"y-richtext": "~0.7.5",
"y-webrtc": "~0.7.1",
"y-websockets-client": "~0.7.10",
"y-text": "~0.7.1",
"y-indexeddb": "~0.7.1",
"quill": "~0.20.1"
}
}

View File

@@ -1,17 +1,16 @@
# ![Yjs](http://y-js.org/images/yjs.png)
Yjs is a framework for optimistic concurrency control and automatic conflict resolution on shared data types. The framework implements a new OT-like concurrency algorithm and provides similar functionality as [ShareJs] and [OpenCoweb]. Yjs was designed to handle concurrent actions on arbitrary complex data types like Text, Json, and XML. We provide a tutorial and some applications for this framework on our [homepage](http://y-js.org/).
Yjs is a framework for optimistic concurrency control and automatic conflict resolution on shared data. The framework provides similar functionality as [ShareJs] and [OpenCoweb], but it implements a new algorithm that also support peer-to-peer communication protocols. Yjs was designed to handle concurrent actions on arbitrary data types like Text, Json, and XML. We also provide support for storing and manipulating your shared data offline. For more information and demo applications visit our [homepage](http://y-js.org/).
**NOTE** This project is currently migrating. So there may exist some information that is not true anymore..
You can create you own shared types easily. Therefore, you can take matters into your own hand by defining the meaning of the shared types and ensure that it is valid, while Yjs ensures data consistency (everyone will eventually end up with the same data). We already provide data types for
You can create you own shared types easily. Therefore, you can take matters into your own hand by defining the meaning of the shared types, and ensure that it is valid, while Yjs ensures data consistency (everyone will eventually end up with the same data). We already provide data types for
| Name | Description |
|----------|-------------------|
| map | Add, update, and remove properties of an object. Included in Yjs|
|[map](https://github.com/y-js/y-map) | Add, update, and remove properties of an object. Included in Yjs|
|[array](https://github.com/y-js/y-array) | A shared linked list implementation |
|[selections](https://github.com/y-js/y-selections) | Manages selections on types that use linear structures (e.g. the y-array type). Select a range of elements, and assign meaning to them.|
|[xml](https://github.com/y-js/y-xml) | An implementation of the DOM. You can create a two way binding to Browser DOM objects|
|[text](https://github.com/y-js/y-text) | Collaborate on text. Supports two way binding to textareas, input elements, or HTML elements (e.g. *h1*, or *p*)|
|[richtext](https://github.com/y-js/y-richtext) | Collaborate on rich text. Supports two way binding to several editors|
@@ -24,26 +23,30 @@ We support several communication protocols as so called *Connectors*. You can cr
|----------------|-----------------------------------|
|[xmpp](https://github.com/y-js/y-xmpp) | Propagate updates in a XMPP multi-user-chat room ([XEP-0045](http://xmpp.org/extensions/xep-0045.html))|
|[webrtc](https://github.com/y-js/y-webrtc) | Propagate updates Browser2Browser via WebRTC|
|[websockets](https://github.com/y-js/y-websockets-client) | Exchange updates efficiently in the classical client-server model |
|[test](https://github.com/y-js/y-test) | A Connector for testing purposes. It is designed to simulate delays that happen in worst case scenarios|
You are not limited to use a specific database to store the shared data. We provide the following database adapters:
|Name | Description |
|----------------|-----------------------------------|
|[memory](https://github.com/y-js/y-memory) | In-memory storage. |
|[IndexedDb](https://github.com/y-js/y-indexeddb) | Offline storage for the browser |
You can use Yjs client-, and server- side. You can get it as via npm, and bower. We even provide polymer elements for Yjs!
The advantages over similar frameworks are support for
* .. P2P message propagation and arbitrary communication protocols
* .. arbitrary complex data types
* .. offline editing: Changes are stored persistently and only relevant changes are propagated on rejoin
* .. AnyUndo: Undo *any* action that was executed in constant time (coming..)
* .. offline support: Changes are stored persistently and only relevant changes are propagated on rejoin
* .. Intention Preservation: When working on Text, the intention of your changes are preserved. This is particularily important when working offline. Every type has a notion on how we define Intention Preservation on it.
## Use it!
You can find a tutorial, and examples on the [website](http://y-js.org). Furthermore, the [github wiki](https://github.com/y-js/yjs/wiki) offers more information about how you can use Yjs in your application.
Either clone this git repository, install it with [bower](http://bower.io/), or install it with [npm](https://www.npmjs.org/package/yjs).
Install yjs and its modules with [bower](http://bower.io/), or with [npm](https://www.npmjs.org/package/yjs).
### Bower
```
bower install y-js/yjs
bower install yjs
```
Then you include the libraries directly from the installation folder.
```
@@ -60,58 +63,30 @@ And use it like this with *npm*:
Y = require("yjs");
```
# Y()
In order to create an instance of Y, you need to have a connection object (instance of a Connector). Then, you can create a shared data type like this:
# Text editing example
```
var y = new Y(connector);
Y({
db: {
name: 'memory' // store in memory.
// name: 'indexeddb'
},
connector: {
name: 'websockets-client', // choose the websockets connector
// name: 'webrtc'
// name: 'xmpp'
room: 'Textarea-example-dev'
},
sourceDir: '/bower_components', // location of the y-* modules
share: {
textarea: 'Text' // y.share.textarea is of type Y.Text
}
// modules: ['Richtext', 'Array'] // optional list of modules you want to import
}).then(function (y) {
// bind the textarea to a shared text element
y.share.textarea.bind(document.getElementById('textfield'))
}
```
# Y.Map
Yjs includes only one type by default - the Y.Map type. It mimics the behaviour of a javascript Object. You can create, update, and remove properies on the Y.Map type. Furthermore, you can observe changes on this type as you can observe changes on Javascript Objects with [Object.observe](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/observe) - an ECMAScript 7 proposal which is likely to become accepted by the committee. Until then, we have our own implementation.
##### Reference
* Create
```
var map = y.set("new_map", Y.Map).then(function(map){
map // is my map type
});
```
* Every instance of Y is an Y.Map
```
var y = new Y(options);
```
* .get(name)
* Retrieve the value of a property. If the value is a type, `.get(name)` returns a promise
* .set(name, value)
* Set/update a property. `value` may be a primitive type, or a custom type definition (e.g. `Y.Map`)
* .delete(name)
* Delete a property
* .observe(observer)
* The `observer` is called whenever something on this object changes. Throws *add*, *update*, and *delete* events
* .observePath(path, observer)
* `path` is an array of property names. `observer` is called when the property under `path` is set, deleted, or updated
* .unobserve(f)
* Delete an observer
# A note on intention preservation
When users create/update/delete the same property concurrently, only one change will prevail. Changes on different properties do not conflict with each other.
# A note on time complexities
* .get(name)
* O(1)
* .set(name, value)
* O(1)
* .delete(name)
* O(1)
* Apply a delete operation from another user
* O(1)
* Apply an update operation from another user (set/update a property)
* Yjs does not transform against operations that do not conflict with each other.
* An operation conflicts with another operation if it changes the same property.
* Overall worst case complexety: O(|conflicts|!)
# Status
Yjs is a work in progress. Different versions of the *y-* repositories may not work together. Just drop me a line if you run into troubles.
@@ -121,7 +96,7 @@ There are some friendly people on [![Gitter](https://badges.gitter.im/Join%20Cha
Please report _any_ issues to the [Github issue page](https://github.com/y-js/yjs/issues)! I try to fix them very soon, if possible.
## Changelog
### 1.0
### 1.0.0
This is a complete rewrite of the 0.5 version of Yjs. Since Yjs 1.0 it is possible to work asynchronously on a persistent database, which enables offline support.
* Switched to semver versioning
* Requires a promise implementation in environment (es6 promises suffice, included in all the major browsers). Otherwise you have to include a polyfill
@@ -144,3 +119,4 @@ Yjs is licensed under the [MIT License](./LICENSE.txt).
[ShareJs]: https://github.com/share/ShareJS
[OpenCoweb]: https://github.com/opencoweb/coweb/wiki

View File

@@ -1,6 +1,6 @@
{
"name": "yjs",
"version": "0.6.42",
"version": "0.8.9",
"homepage": "y-js.org",
"authors": [
"Kevin Jahns <kevin.jahns@rwth-aachen.de>"

View File

@@ -1,76 +0,0 @@
{
"name": "yjs",
"version": "0.6.42",
"description": "A framework for real-time p2p shared editing on arbitrary complex data types",
"main": "y.js",
"scripts": {
"test": "node --harmony ./node_modules/.bin/gulp test",
"lint": "./node_modules/.bin/standard"
},
"pre-commit": [
"lint",
"test"
],
"standard": {
"parser": "babel-eslint",
"ignore": [
"build/**",
"dist/**",
"declarations/**",
"./y.js",
"./y.js.map"
]
},
"repository": {
"type": "git",
"url": "https://github.com/y-js/yjs.git"
},
"keywords": [
"OT",
"Operational Transformation",
"collaboration",
"synchronization",
"ShareJs",
"OpenCoweb",
"concurrency"
],
"author": "Kevin Jahns",
"email": "kevin.jahns@rwth-aachen.de",
"license": "MIT",
"bugs": {
"url": "https://github.com/y-js/yjs/issues"
},
"homepage": "http://y-js.org",
"devDependencies": {
"babel-plugin-transform-runtime": "^6.1.18",
"babel-preset-es2015": "^6.1.18",
"babelify": "^7.2.0",
"browserify": "^12.0.1",
"eslint": "^1.10.2",
"gulp": "^3.9.0",
"gulp-bump": "^1.0.0",
"gulp-concat": "^2.6.0",
"gulp-filter": "^3.0.1",
"gulp-git": "^1.6.0",
"gulp-if": "^2.0.0",
"gulp-jasmine": "^2.0.1",
"gulp-jasmine-browser": "^0.2.3",
"gulp-load-plugins": "^1.0.0",
"gulp-prompt": "^0.1.2",
"gulp-rename": "^1.2.2",
"gulp-serve": "^1.2.0",
"gulp-shell": "^0.5.1",
"gulp-sourcemaps": "^1.5.2",
"gulp-tag-version": "^1.3.0",
"gulp-uglify": "^1.5.1",
"gulp-util": "^3.0.6",
"gulp-watch": "^4.3.5",
"minimist": "^1.2.0",
"pre-commit": "^1.1.1",
"regenerator": "^0.8.42",
"run-sequence": "^1.1.4",
"standard": "^5.2.2",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
}
}

318
y.es6
View File

@@ -51,6 +51,7 @@ module.exports = function (Y/* :any */) {
this.debug = opts.debug === true
this.broadcastedHB = false
this.syncStep2 = Promise.resolve()
this.broadcastOpBuffer = []
}
reconnect () {
}
@@ -64,26 +65,32 @@ module.exports = function (Y/* :any */) {
return this.y.db.stopGarbageCollector()
}
setUserId (userId) {
this.userId = userId
return this.y.db.setUserId(userId)
if (this.userId == null) {
this.userId = userId
return this.y.db.setUserId(userId)
} else {
return null
}
}
onUserEvent (f) {
this.userEventListeners.push(f)
}
userLeft (user) {
delete this.connections[user]
if (user === this.currentSyncTarget) {
this.currentSyncTarget = null
this.findNextSyncTarget()
}
this.syncingClients = this.syncingClients.filter(function (cli) {
return cli !== user
})
for (var f of this.userEventListeners) {
f({
action: 'userLeft',
user: user
if (this.connections[user] != null) {
delete this.connections[user]
if (user === this.currentSyncTarget) {
this.currentSyncTarget = null
this.findNextSyncTarget()
}
this.syncingClients = this.syncingClients.filter(function (cli) {
return cli !== user
})
for (var f of this.userEventListeners) {
f({
action: 'userLeft',
user: user
})
}
}
}
userJoined (user, role) {
@@ -163,6 +170,34 @@ module.exports = function (Y/* :any */) {
console.log(`send ${this.userId} -> ${uid}: ${message.type}`, message) // eslint-disable-line
}
}
/*
Buffer operations, and broadcast them when ready.
*/
broadcastOps (ops) {
ops = ops.map(function (op) {
return Y.Struct[op.struct].encode(op)
})
var self = this
function broadcastOperations () {
if (self.broadcastOpBuffer.length > 0) {
self.broadcast({
type: 'update',
ops: self.broadcastOpBuffer
})
self.broadcastOpBuffer = []
}
}
if (this.broadcastOpBuffer.length === 0) {
this.broadcastOpBuffer = ops
if (this.y.db.transactionInProgress) {
this.y.db.whenTransactionsFinished().then(broadcastOperations)
} else {
setTimeout(broadcastOperations, 0)
}
} else {
this.broadcastOpBuffer = this.broadcastOpBuffer.concat(ops)
}
}
/*
You received a raw message, and you know that it is intended for Yjs. Then call this function.
*/
@@ -223,15 +258,14 @@ module.exports = function (Y/* :any */) {
db.requestTransaction(function * () {
var ops = yield* this.getOperations(m.stateSet)
if (ops.length > 0) {
var update /* :MessageUpdate */ = {
type: 'update',
ops: ops
}
if (!broadcastHB) { // TODO: consider to broadcast here..
conn.send(sender, update)
conn.send(sender, {
type: 'update',
ops: ops
})
} else {
// broadcast only once!
conn.broadcast(update)
conn.broadcastOps(ops)
}
}
defer.resolve()
@@ -253,10 +287,7 @@ module.exports = function (Y/* :any */) {
return o.struct === 'Delete'
})
if (delops.length > 0) {
this.broadcast({
type: 'update',
ops: delops
})
this.broadcastOps(delops)
}
}
this.y.db.apply(message.ops)
@@ -1162,6 +1193,14 @@ module.exports = function (Y/* :any */) {
id: this.os.getNextOpId()
}
*/
create: function (id) {
return {
start: null,
end: null,
struct: 'List',
id: id
}
},
encode: function (op) {
return {
struct: 'List',
@@ -1228,6 +1267,13 @@ module.exports = function (Y/* :any */) {
id: this.os.getNextOpId()
}
*/
create: function (id) {
return {
id: id,
map: {},
struct: 'Map'
}
},
encode: function (op) {
return {
struct: 'Map',
@@ -1363,6 +1409,14 @@ module.exports = function (Y/* :any */) {
}
return t
}
* createType (typedefinition) {
var structname = typedefinition.struct
var id = this.store.getNextOpId()
var op = Y.Struct[structname].create(id)
op.type = typedefinition.name
yield* this.applyCreatedOperations([op])
return yield* this.getType(id)
}
/*
Apply operations that this user created (no remote ones!)
* does not check for Struct.*.requiredOps()
@@ -1373,14 +1427,13 @@ module.exports = function (Y/* :any */) {
for (var i = 0; i < ops.length; i++) {
var op = ops[i]
yield* this.store.tryExecute.call(this, op)
send.push(Y.Struct[op.struct].encode(op))
if (op.id == null || op.id[0] !== '_') {
send.push(Y.Struct[op.struct].encode(op))
}
}
if (!this.store.y.connector.isDisconnected()) { // TODO: && !this.store.forwardAppliedOperations (but then i don't send delete ops)
if (!this.store.y.connector.isDisconnected() && send.length > 0) { // TODO: && !this.store.forwardAppliedOperations (but then i don't send delete ops)
// is connected, and this is not going to be send in addOperation
this.store.y.connector.broadcast({
type: 'update',
ops: send
})
this.store.y.connector.broadcastOps(send)
}
}
@@ -1651,6 +1704,7 @@ module.exports = function (Y/* :any */) {
if (i.right == null) {
break
} else {
ids.push(i.id)
i = yield* this.getOperation(i.right)
}
}
@@ -1775,10 +1829,7 @@ module.exports = function (Y/* :any */) {
var ops = deletions.map(function (d) {
return {struct: 'Delete', target: [d[0], d[1]]}
})
this.store.y.connector.broadcast({
type: 'update',
ops: ops
})
this.store.y.connector.broadcastOps(ops)
}
}
* isGarbageCollected (id) {
@@ -1814,12 +1865,9 @@ module.exports = function (Y/* :any */) {
}
* addOperation (op) {
yield* this.os.put(op)
if (!this.store.y.connector.isDisconnected() && this.store.forwardAppliedOperations) {
if (!this.store.y.connector.isDisconnected() && this.store.forwardAppliedOperations && op.id[0] !== '_') {
// is connected, and this is not going to be send in addOperation
this.store.y.connector.broadcast({
type: 'update',
ops: [op]
})
this.store.y.connector.broadcastOps([op])
}
}
* getOperation (id/* :any */)/* :Transaction<any> */ {
@@ -1829,11 +1877,12 @@ module.exports = function (Y/* :any */) {
} else {
// need to generate this operation
if (this.store._nextUserId == null) {
var typename = id[1].split('_')[0]
this.store._nextUserId = id
yield* Y[typename].createType.call(this)
delete this.store._nextUserId
return yield* this.os.find(id)
var struct = id[1].split('_')[0]
// this.store._nextUserId = id
var op = Y.Struct[struct].create(id)
yield* this.setOperation(op)
// delete this.store._nextUserId
return op
} else {
// Can only generate one operation at a time
return null
@@ -1878,34 +1927,8 @@ module.exports = function (Y/* :any */) {
})
return ss
}
* getOperations (startSS) {
// TODO: use bounds here!
if (startSS == null) {
startSS = {}
}
var ops = []
var endSV = yield* this.getStateVector()
for (var endState of endSV) {
var user = endState.user
if (user === '_') {
continue
}
var startPos = startSS[user] || 0
yield* this.os.iterate(this, [user, startPos], [user, Number.MAX_VALUE], function * (op) {
ops.push(op)
})
}
var res = []
for (var op of ops) {
var o = yield* this.makeOperationReady(startSS, op)
res.push(o)
}
return res
}
/*
Here, we make op executable for the receiving user.
Here, we make all missing operations executable for the receiving user.
Notes:
startSS: denotes to the SV that the remote user sent
@@ -1940,7 +1963,92 @@ module.exports = function (Y/* :any */) {
(startSS or currSS.. ?)
-> Could be necessary when I turn GC again.
-> Is a bad(ish) idea because it requires more computation
What we do:
* Iterate over all missing operations.
* When there is an operation, where the right op is known, send this op all missing ops to the left to the user
* I explained above what we have to do with each operation. Here is how we do it efficiently:
1. Go to the left until you find either op.origin, or a known operation (let o denote current operation in the iteration)
2. Found a known operation -> set op.left = o, and send it to the user. stop
3. Found o = op.origin -> set op.left = op.origin, and send it to the user. start again from 1. (set op = o)
4. Found some o -> set o.right = op, o.left = o.origin, send it to the user, continue
*/
* getOperations (startSS) {
// TODO: use bounds here!
if (startSS == null) {
startSS = {}
}
var send = []
var endSV = yield* this.getStateVector()
for (var endState of endSV) {
var user = endState.user
if (user === '_') {
continue
}
var startPos = startSS[user] || 0
yield* this.os.iterate(this, [user, startPos], [user, Number.MAX_VALUE], function * (op) {
op = Y.Struct[op.struct].encode(op)
if (op.struct !== 'Insert') {
send.push(op)
} else if (op.right == null || op.right[1] < (startSS[op.right[0]] || 0)) {
// case 1. op.right is known
var o = op
// Remember: ?
// -> set op.right
// 1. to the first operation that is known (according to startSS)
// 2. or to the first operation that has an origin that is not to the
// right of op.
// For this we maintain a list of ops which origins are not found yet.
var missing_origins = [op]
var newright = op.right
while (true) {
if (o.left == null) {
op.left = null
send.push(op)
if (!Y.utils.compareIds(o.id, op.id)) {
o = Y.Struct[op.struct].encode(o)
o.right = missing_origins[missing_origins.length - 1].id
send.push(o)
}
break
}
o = yield* this.getOperation(o.left)
// we set another o, check if we can reduce $missing_origins
while (missing_origins.length > 0 && Y.utils.compareIds(missing_origins[missing_origins.length - 1].origin, o.id)) {
missing_origins.pop()
}
if (o.id[1] < (startSS[o.id[0]] || 0)) {
// case 2. o is known
op.left = o.id
send.push(op)
break
} else if (Y.utils.compareIds(o.id, op.origin)) {
// case 3. o is op.origin
op.left = op.origin
send.push(op)
op = Y.Struct[op.struct].encode(o)
op.right = newright
if (missing_origins.length > 0) {
console.log('This should not happen .. :( please report this')
}
missing_origins = [op]
} else {
// case 4. send o, continue to find op.origin
var s = Y.Struct[op.struct].encode(o)
s.right = missing_origins[missing_origins.length - 1].id
s.left = s.origin
send.push(s)
missing_origins.push(o)
}
}
}
})
}
return send.reverse()
}
/* this is what we used before.. use this as a reference..
* makeOperationReady (startSS, op) {
op = Y.Struct[op.struct].encode(op)
op = Y.utils.copyObject(op)
@@ -1964,6 +2072,7 @@ module.exports = function (Y/* :any */) {
op.left = op.origin
return op
}
*/
}
Y.Transaction = TransactionInterface
}
@@ -2131,8 +2240,8 @@ module.exports = function (Y /* : any*/) {
A wrapper for the definition of a custom type.
Every custom type must have three properties:
* createType
- Defines the model of a newly created custom type and returns the type
* struct
- Structname of this type
* initType
- Given a model, creates a custom type
* class
@@ -2140,20 +2249,23 @@ module.exports = function (Y /* : any*/) {
*/
class CustomType { // eslint-disable-line
/* ::
createType: any;
struct: any;
initType: any;
class: Function;
name: String;
*/
constructor (def) {
if (def.createType == null ||
if (def.struct == null ||
def.initType == null ||
def.class == null
def.class == null ||
def.name == null
) {
throw new Error('Custom type was not initialized correctly!')
}
this.createType = def.createType
this.struct = def.struct
this.initType = def.initType
this.class = def.class
this.name = def.name
}
}
Y.utils.CustomType = CustomType
@@ -2209,6 +2321,7 @@ require('./Connectors/Test.js')(Y)
var requiringModules = {}
module.exports = Y
Y.requiringModules = requiringModules
Y.extend = function (name, value) {
Y[name] = value
@@ -2223,30 +2336,26 @@ function requestModules (modules) {
// determine if this module was compiled for es5 or es6 (y.js vs. y.es6)
// if Insert.execute is a Function, then it isnt a generator..
// then load the es5(.js) files..
var extention = Y.Struct.Insert.execute.constructor === Function ? '.js' : '.es6'
var extention = typeof regeneratorRuntime !== 'undefined' ? '.js' : '.es6'
var promises = []
for (var i = 0; i < modules.length; i++) {
var modulename = 'y-' + modules[i].toLowerCase()
if (Y[modules[i]] == null) {
if (requiringModules[modules[i]] == null) {
try {
require(modulename)(Y)
} catch (e) {
// module does not exist
if (typeof window !== 'undefined') {
var imported = document.createElement('script')
imported.src = Y.sourceDir + '/' + modulename + '/' + modulename + extention
document.head.appendChild(imported)
// module does not exist
if (typeof window !== 'undefined' && window.Y !== 'undefined') {
var imported = document.createElement('script')
imported.src = Y.sourceDir + '/' + modulename + '/' + modulename + extention
document.head.appendChild(imported)
let requireModule = {}
requiringModules[modules[i]] = requireModule
requireModule.promise = new Promise(function (resolve) {
requireModule.resolve = resolve
})
promises.push(requireModule.promise)
} else {
throw e
}
let requireModule = {}
requiringModules[modules[i]] = requireModule
requireModule.promise = new Promise(function (resolve) {
requireModule.resolve = resolve
})
promises.push(requireModule.promise)
} else {
require(modulename)(Y)
}
} else {
promises.push(requiringModules[modules[i]].promise)
@@ -2294,8 +2403,9 @@ function Y (opts/* :YOptions */) /* :Promise<YConfig> */ {
Y.sourceDir = opts.sourceDir
return Y.requestModules(modules).then(function () {
return new Promise(function (resolve) {
var yconfig = new YConfig(opts, function () {
yconfig.db.whenUserIdSet(function () {
var yconfig = new YConfig(opts)
yconfig.db.whenUserIdSet(function () {
yconfig.init(function () {
resolve(yconfig)
})
})
@@ -2312,12 +2422,24 @@ class YConfig {
constructor (opts, callback) {
this.db = new Y[opts.db.name](this, opts.db)
this.connector = new Y[opts.connector.name](this, opts.connector)
this.options = opts
}
init (callback) {
var opts = this.options
var share = {}
this.share = share
this.db.requestTransaction(function * requestTransaction () {
// create shared object
for (var propertyname in opts.share) {
share[propertyname] = yield* this.getType(['_', opts.share[propertyname] + '_' + propertyname])
var typename = opts.share[propertyname]
var id = ['_', Y[typename].struct + '_' + propertyname]
var op = yield* this.getOperation(id)
if (op.type !== typename) {
// not already in the db
op.type = typename
yield* this.setOperation(op)
}
share[propertyname] = yield* this.getType(id)
}
setTimeout(callback, 0)
})

File diff suppressed because one or more lines are too long

4975
y.js

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long