Skip to content

Commit

Permalink
Support Undo/Redo for object.set and object.remove operations (#658)
Browse files Browse the repository at this point in the history 
1. Define reverse operations of Object.Set Object.Remove:
   1.1 Modified the set operation to compare `executedAt` with
       `getPositionedAt()` during value setting, addressing issues
       during undo.
   1.2 Set `movedAt` when the value is reassigned during undo.

2. Handle edge cases:
   When the target element is deleted by other peers
   Implemented handling to skip execution of reverse operations
   during undo and redo if the element has been deleted.

3. Add whiteboard example:
   3.1. Feature Introduction - Added a whiteboard example for testing
        undo redo operations.
   3.2. Variables Added for Displaying Yorkie Data - Added
        `CRDTRoot.opsForTest` and `CRDTElement.toJSForTest`.
   3.3. Additional Features to Apply (Todo) - Planned features include
        implementing history pause/resume, subscribing to history
        changes, and applying reverse operations for `array.add` and `array.remove`.

4. TODOs
  4.1. Set nested objects (yorkie-team/yorkie#663)
        - Modified set operation to handle nested objects.
  4.2. When the target element is garbage-collected (yorkie-team/yorkie#664)
        - Considering elements referenced by operations in the
          undo/redo stack during garbage collection.

---------

Co-authored-by: Youngteac Hong <[email protected]>
  • Loading branch information
@chacha912 @hackerwins
chacha912 and hackerwins authored Nov 15, 2023
1 parent 01ddd1a commit 859c019
Show file tree
Hide file tree
Showing 33 changed files with 1,758 additions and 190 deletions.
147 changes: 147 additions & 0 deletions public/devtool/object.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
.devtool-root-holder,
.devtool-ops-holder {
display: flex;
flex-direction: column;
height: 100%;
overflow-y: scroll;
font-size: 14px;
font-weight: 400;
}

.devtool-root-holder .object-content {
margin-left: 24px;
}

.devtool-root-holder .object-key-val,
.devtool-root-holder .object-val {
position: relative;
}

.devtool-root-holder .object-key-val:not(:last-of-type):before,
.devtool-root-holder .object-val:not(:last-of-type):before {
border: 1px dashed #ddd;
border-width: 0 0 0 1px;
content: '';
position: absolute;
bottom: -12px;
left: -18px;
top: 12px;
}

.devtool-root-holder .object-key-val:after,
.devtool-root-holder .object-val:after {
border-bottom: 1px dashed #ddd;
border-left: 1px dashed #ddd;
border-radius: 0 0 0 4px;
border-right: 0 dashed #ddd;
border-top: 0 dashed #ddd;
content: '';
height: 16px;
position: absolute;
top: 0;
width: 16px;
height: 32px;
top: -16px;
left: -18px;
}

.devtool-root-holder > .object-key-val:after,
.devtool-root-holder > .object-val:after {
content: none;
}

.devtool-root-holder .object-val > span,
.devtool-root-holder .object-key-val > span,
.devtool-root-holder .object-val label,
.devtool-root-holder .object-key-val label {
border: 1px solid #ddd;
border-radius: 4px;
display: inline-block;
font-size: 14px;
font-weight: 500;
letter-spacing: 0 !important;
line-height: 1.72;
margin-bottom: 16px;
padding: 6px 8px;
}

.devtool-root-holder label {
cursor: pointer;
}

.devtool-root-holder .object-key-val label:before {
content: '▾';
margin-right: 4px;
}

.devtool-root-holder input[type='checkbox']:checked + label:before {
content: '▸';
}

.devtool-root-holder input[type='checkbox']:checked ~ .object-content {
display: none;
}

.devtool-root-holder input[type='checkbox'] {
display: none;
}

.devtool-root-holder .timeticket,
.devtool-ops-holder .timeticket {
border-radius: 4px;
background: #f1f2f3;
font-size: 12px;
font-weight: 400;
padding: 2px 6px;
margin-left: 4px;
letter-spacing: 1px;
}

.devtool-ops-holder .change {
display: flex;
margin-bottom: 3px;
border-top: 1px solid #ddd;
word-break: break-all;
}
.devtool-ops-holder label {
position: relative;
overflow: hidden;
padding-left: 24px;
cursor: pointer;
line-height: 1.6;
}
.devtool-ops-holder input[type='checkbox']:checked + label {
height: 22px;
}
.devtool-ops-holder input[type='checkbox'] {
display: none;
}
.devtool-ops-holder .count {
position: absolute;
left: 0px;
display: flex;
justify-content: center;
width: 20px;
height: 20px;
font-size: 13px;
}
.devtool-ops-holder .op {
display: block;
}
.devtool-ops-holder .op:first-child {
display: inline-block;
}
.devtool-ops-holder .op .type {
padding: 0 4px;
border-radius: 4px;
background: #e6e6fa;
}
.devtool-ops-holder .op .type.set {
background: #cff7cf;
}
.devtool-ops-holder .op .type.remove {
background: #f9c0c8;
}
.devtool-ops-holder .op .type.add {
background: #add8e6;
}
121 changes: 121 additions & 0 deletions public/devtool/object.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
const objectDevtool = (
doc,
{ rootHolder, opsHolder, undoOpsHolder, redoOpsHolder },
) => {
const displayRootObject = () => {
const rootObj = doc.getRoot().toJSForTest();
rootHolder.innerHTML = `
<div class="devtool-root-holder">
${renderContainer(rootObj)}
</div>
`;
};

const renderContainer = ({ key, value, id }) => {
const valueHTML = Object.values(value)
.map((v) => {
return v.type === 'YORKIE_OBJECT' || v.type === 'YORKIE_ARRAY'
? renderContainer(v)
: renderValue(v);
})
.join('');
if (key === undefined) key = 'root';
return `
<div class="object-key-val">
${renderKey({ key, id })}
<div class="object-content">
${valueHTML}
</div>
</div>
`;
};

const renderKey = ({ key, id }) => {
return `
<input type="checkbox" id="${id}" />
<label for="${id}">${key}
<span class="timeticket">${id}</span>
</label>
`;
};

const renderValue = ({ key, value, id }) => {
return `
<div class="object-val">
<span>${key} : ${JSON.stringify(value)}
<span class="timeticket">${id}</span>
</span>
</div>
`;
};

const displayOps = () => {
opsHolder.innerHTML = `
<div class="devtool-ops-holder">
${renderOpsHolder(doc.getOpsForTest(), 'op')}
</div>
`;
};

const displayUndoOps = () => {
undoOpsHolder.innerHTML = `
<div class="devtool-ops-holder">
${renderOpsHolder(doc.getUndoStackForTest(), 'undo')}
</div>
`;
};

const displayRedoOps = () => {
redoOpsHolder.innerHTML = `
<div class="devtool-ops-holder">
${renderOpsHolder(doc.getRedoStackForTest(), 'redo')}
</div>
`;
};

const renderOpsHolder = (changes, idPrefix) => {
return changes
.map((ops, i) => {
const opsStr = ops
.map((op) => {
if (op.type === 'presence') {
return `<span class="op"><span class="type presence">presence</span>${JSON.stringify(
op.value,
)}</span>`;
}
const opType = op.toTestString().split('.')[1];
try {
const id = op.getExecutedAt()?.toTestString();
return `
<span class="op">
<span class="type ${opType.toLowerCase()}">${opType}</span>
${`<span class="timeticket">${id}</span>`}${op.toTestString()}
</span>`;
} catch (e) {
// operation in the undo/redo stack does not yet have "executedAt" set.
return `
<span class="op">
<span class="type ${opType.toLowerCase()}">${opType}</span>
${op.toTestString()}
</span>`;
}
})
.join('\n');
return `
<div class="change">
<input type="checkbox" id="${idPrefix}-${i}" />
<label for="${idPrefix}-${i}">
<span class="count">${ops.length}</span>
<span class="ops">${opsStr}</span>
</label>
</div>
`;
})
.reverse()
.join('');
};

return { displayRootObject, displayOps, displayUndoOps, displayRedoOps };
};

export default objectDevtool;
119 changes: 119 additions & 0 deletions public/whiteboard.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
.whiteboard-example {
display: flex;
flex-direction: column;
height: 100vh;
}

.dev-log-wrap {
display: flex;
flex-direction: column;
height: calc(100vh - 350px);
}
.dev-log {
display: flex;
flex: 1;
overflow: hidden;
}
.dev-log .log-holders {
padding: 10px;
}
.dev-log .log-holders,
.dev-log .log-holder-wrap,
.dev-log .log-holder {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
}
.log-holder-wrap h2 {
margin: 10px 0;
}
.log-holder-wrap .stack-count {
font-weight: normal;
font-size: 14px;
}
.dev-log-wrap .network {
margin-top: 10px;
}

.canvas {
position: relative;
width: 100%;
height: 350px;
}
.canvas .toolbar {
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
.toolbar button {
margin: 2px;
padding: 4px 6px;
color: #666;
}
.canvas .shapes {
position: absolute;
width: 100%;
height: 100%;
background: #eee;
overflow: hidden;
}
.canvas .shape {
position: absolute;
width: 50px;
height: 50px;
border-style: solid;
border-width: 2px;
}
.selection-tools {
display: none;
position: absolute;
z-index: 1;
top: 4px;
right: 4px;
background: #fff;
padding: 6px;
border-radius: 4px;
justify-content: center;
gap: 4px;
}
.selection-tools .color-picker {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 120px;
}
.selection-tools .color {
width: 20px;
height: 20px;
border-radius: 50%;
border: none;
margin: 4px;
border: 1px solid #ddd;
}
.selection-tools .color:nth-child(1) {
background: orangered;
}
.selection-tools .color:nth-child(2) {
background: gold;
}
.selection-tools .color:nth-child(3) {
background: limegreen;
}
.selection-tools .color:nth-child(4) {
background: dodgerblue;
}
.selection-tools .color:nth-child(5) {
background: darkviolet;
}
.selection-tools .color:nth-child(6) {
background: darkorange;
}
.selection-tools .color:nth-child(7) {
background: dimgray;
}
.selection-tools .color:nth-child(8) {
background: white;
}
Loading

0 comments on commit 859c019

Please sign in to comment.