Compare commits
16 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
2650338b4b | ||
|
|
919dfb5e16 | ||
|
|
3b8e148d8f | ||
|
|
a77eb39218 | ||
|
|
9902da470b | ||
|
|
0ec83aa431 | ||
|
|
ff006c92d7 | ||
|
|
15a472df44 | ||
|
|
4cb0f2b5b9 | ||
|
|
ab6a193ec6 | ||
|
|
f18a6ee151 | ||
|
|
8ba1e4ce27 | ||
|
|
625a64635a | ||
|
|
b32c2e4ed6 | ||
|
|
96f8f77dc4 | ||
|
|
08f0702fcd |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,5 +1,5 @@
|
||||
node_modules
|
||||
Examples/bower_components
|
||||
bower_components
|
||||
.directory
|
||||
.codio
|
||||
.settings
|
||||
|
||||
18
Examples/Chat/index.html
Normal file
18
Examples/Chat/index.html
Normal 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
75
Examples/Chat/index.js
Normal 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
|
||||
}
|
||||
})
|
||||
@@ -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>
|
||||
|
||||
@@ -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
145
Examples/Quill/index.html
Normal 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.es6"></script>
|
||||
<script src="./index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
32
Examples/Quill/index.js
Normal file
32
Examples/Quill/index.js
Normal file
@@ -0,0 +1,32 @@
|
||||
/* global Y, Quill */
|
||||
|
||||
// initialize a shared object. This function call returns a promise!
|
||||
|
||||
Y({
|
||||
db: {
|
||||
name: 'memory'
|
||||
},
|
||||
connector: {
|
||||
name: 'websockets-client',
|
||||
room: 'richtext-example18',
|
||||
debug: true
|
||||
//url: 'http://127.0.0.1:2345'
|
||||
},
|
||||
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)
|
||||
})
|
||||
@@ -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>
|
||||
|
||||
@@ -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: {
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ You can create you own shared types easily. Therefore, you can take matters into
|
||||
|
||||
| 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|
|
||||
@@ -121,7 +121,7 @@ There are some friendly people on [! 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 +144,4 @@ Yjs is licensed under the [MIT License](./LICENSE.txt).
|
||||
|
||||
[ShareJs]: https://github.com/share/ShareJS
|
||||
[OpenCoweb]: https://github.com/opencoweb/coweb/wiki
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "yjs",
|
||||
"version": "0.6.42",
|
||||
"version": "0.8.6",
|
||||
"homepage": "y-js.org",
|
||||
"authors": [
|
||||
"Kevin Jahns <kevin.jahns@rwth-aachen.de>"
|
||||
|
||||
76
package.json
76
package.json
@@ -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"
|
||||
}
|
||||
}
|
||||
292
y.es6
292
y.es6
@@ -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,8 +65,12 @@ 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)
|
||||
@@ -163,6 +168,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 +256,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 +285,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 +1191,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 +1265,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 +1407,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 +1425,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 +1702,7 @@ module.exports = function (Y/* :any */) {
|
||||
if (i.right == null) {
|
||||
break
|
||||
} else {
|
||||
ids.push(i.id)
|
||||
i = yield* this.getOperation(i.right)
|
||||
}
|
||||
}
|
||||
@@ -1775,10 +1827,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 +1863,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 +1875,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 +1925,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 +1961,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 +2070,7 @@ module.exports = function (Y/* :any */) {
|
||||
op.left = op.origin
|
||||
return op
|
||||
}
|
||||
*/
|
||||
}
|
||||
Y.Transaction = TransactionInterface
|
||||
}
|
||||
@@ -2131,8 +2238,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 +2247,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 +2319,7 @@ require('./Connectors/Test.js')(Y)
|
||||
var requiringModules = {}
|
||||
|
||||
module.exports = Y
|
||||
Y.requiringModules = requiringModules
|
||||
|
||||
Y.extend = function (name, value) {
|
||||
Y[name] = value
|
||||
@@ -2223,30 +2334,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 +2401,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 +2420,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)
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user