Support Undo/Redo for object.set and object.remove operations

public/devtool/object.css

@@ -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;
+}

public/devtool/object.js

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

public/whiteboard.css

@@ -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;
+}