Compare commits

...

11 Commits

Author SHA1 Message Date
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
13 changed files with 333 additions and 5166 deletions

2
.gitignore vendored
View File

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

View File

@@ -66,7 +66,7 @@ Y({
// This will call the observe function (see line 40)
// and reflect the change in the DOM
y.share.chat.push([message])
this.reset()
this.querySelector("[name=message]").value = ""
}
// Do not send this form!
event.preventDefault()

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.es6"></script>
<script src="./index.js"></script>
</body>
</html>

32
Examples/Quill/index.js Normal file
View 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)
})

View File

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

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

@@ -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

View File

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

View File

@@ -1,76 +0,0 @@
{
"name": "yjs",
"version": "0.7.1",
"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"
}
}

189
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,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,31 @@ 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) {
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 +253,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 +282,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)
@@ -1402,10 +1428,7 @@ module.exports = function (Y/* :any */) {
}
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)
}
}
@@ -1676,6 +1699,7 @@ module.exports = function (Y/* :any */) {
if (i.right == null) {
break
} else {
ids.push(i.id)
i = yield* this.getOperation(i.right)
}
}
@@ -1800,10 +1824,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) {
@@ -1841,10 +1862,7 @@ module.exports = function (Y/* :any */) {
yield* this.os.put(op)
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> */ {
@@ -1904,34 +1922,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
@@ -1966,7 +1958,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)
@@ -1990,6 +2067,7 @@ module.exports = function (Y/* :any */) {
op.left = op.origin
return op
}
*/
}
Y.Transaction = TransactionInterface
}
@@ -2320,8 +2398,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)
})
})
@@ -2338,6 +2417,10 @@ 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 () {

File diff suppressed because one or more lines are too long

5033
y.js

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long