mirror of https://github.com/artf/grapesjs.git
IhorKaleniuk666
4 months ago
8 changed files with 876 additions and 75 deletions
@ -0,0 +1,39 @@ |
|||
import EditorModel from '../editor/model/Editor'; |
|||
import { AddOptions, Collection, Model, RemoveOptions } from '../common'; |
|||
import PatchManager from './index'; |
|||
|
|||
export interface CollectionWithPatchesOptions extends AddOptions { |
|||
em?: EditorModel; |
|||
patchObjectType?: string; |
|||
} |
|||
|
|||
const isValidPatchUid = (uid: any): uid is string | number => { |
|||
if (typeof uid === 'string') return uid !== ''; |
|||
return typeof uid === 'number'; |
|||
}; |
|||
|
|||
export default class CollectionWithPatches<T extends Model = Model> extends Collection<T> { |
|||
em?: EditorModel; |
|||
patchObjectType?: string; |
|||
|
|||
constructor(models?: any, options: CollectionWithPatchesOptions = {}) { |
|||
super(models, options); |
|||
this.em = options.em; |
|||
this.patchObjectType = options.patchObjectType; |
|||
} |
|||
|
|||
protected get patchManager(): PatchManager | undefined { |
|||
const pm = (this.em as any)?.Patches as PatchManager | undefined; |
|||
return pm?.isEnabled && this.patchObjectType ? pm : undefined; |
|||
} |
|||
|
|||
protected getModelUid(model: T): string | number | undefined { |
|||
const uid = (model as any)?.get?.('uid'); |
|||
return isValidPatchUid(uid) ? uid : undefined; |
|||
} |
|||
|
|||
protected shouldHandleRemoval(_model: T, opts?: RemoveOptions): boolean { |
|||
return !(opts as any)?.temporary; |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,222 @@ |
|||
// Based on rocicorp/fractional-indexing (CC0)
|
|||
|
|||
export const BASE_62_DIGITS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; |
|||
|
|||
function midpoint(a: string, b: string | null | undefined, digits: string): string { |
|||
const zero = digits[0]; |
|||
if (b != null && a >= b) { |
|||
throw new Error(`${a} >= ${b}`); |
|||
} |
|||
if (a.slice(-1) === zero || (b && b.slice(-1) === zero)) { |
|||
throw new Error('trailing zero'); |
|||
} |
|||
if (b) { |
|||
let n = 0; |
|||
while ((a[n] || zero) === b[n]) { |
|||
n++; |
|||
} |
|||
if (n > 0) { |
|||
return b.slice(0, n) + midpoint(a.slice(n), b.slice(n), digits); |
|||
} |
|||
} |
|||
const digitA = a ? digits.indexOf(a[0]) : 0; |
|||
const digitB = b != null ? digits.indexOf(b[0]) : digits.length; |
|||
if (digitB - digitA > 1) { |
|||
const midDigit = Math.round(0.5 * (digitA + digitB)); |
|||
return digits[midDigit]; |
|||
} else { |
|||
if (b && b.length > 1) { |
|||
return b.slice(0, 1); |
|||
} else { |
|||
return digits[digitA] + midpoint(a.slice(1), null, digits); |
|||
} |
|||
} |
|||
} |
|||
|
|||
function getIntegerLength(head: string): number { |
|||
if (head >= 'a' && head <= 'z') { |
|||
return head.charCodeAt(0) - 'a'.charCodeAt(0) + 2; |
|||
} else if (head >= 'A' && head <= 'Z') { |
|||
return 'Z'.charCodeAt(0) - head.charCodeAt(0) + 2; |
|||
} |
|||
throw new Error(`invalid order key head: ${head}`); |
|||
} |
|||
|
|||
function validateInteger(int: string): void { |
|||
if (int.length !== getIntegerLength(int[0])) { |
|||
throw new Error(`invalid integer part of order key: ${int}`); |
|||
} |
|||
} |
|||
|
|||
function getIntegerPart(key: string): string { |
|||
const integerPartLength = getIntegerLength(key[0]); |
|||
if (integerPartLength > key.length) { |
|||
throw new Error(`invalid order key: ${key}`); |
|||
} |
|||
return key.slice(0, integerPartLength); |
|||
} |
|||
|
|||
function validateOrderKey(key: string, digits: string): void { |
|||
if (key === `A${digits[0].repeat(26)}`) { |
|||
throw new Error(`invalid order key: ${key}`); |
|||
} |
|||
const i = getIntegerPart(key); |
|||
const f = key.slice(i.length); |
|||
if (f.slice(-1) === digits[0]) { |
|||
throw new Error(`invalid order key: ${key}`); |
|||
} |
|||
} |
|||
|
|||
function incrementInteger(x: string, digits: string): string | null { |
|||
validateInteger(x); |
|||
const [head, ...digs] = x.split(''); |
|||
let carry = true; |
|||
for (let i = digs.length - 1; carry && i >= 0; i--) { |
|||
const d = digits.indexOf(digs[i]) + 1; |
|||
if (d === digits.length) { |
|||
digs[i] = digits[0]; |
|||
} else { |
|||
digs[i] = digits[d]; |
|||
carry = false; |
|||
} |
|||
} |
|||
if (carry) { |
|||
if (head === 'Z') { |
|||
return `a${digits[0]}`; |
|||
} |
|||
if (head === 'z') { |
|||
return null; |
|||
} |
|||
const h = String.fromCharCode(head.charCodeAt(0) + 1); |
|||
if (h > 'a') { |
|||
digs.push(digits[0]); |
|||
} else { |
|||
digs.pop(); |
|||
} |
|||
return h + digs.join(''); |
|||
} |
|||
return head + digs.join(''); |
|||
} |
|||
|
|||
function decrementInteger(x: string, digits: string): string | null { |
|||
validateInteger(x); |
|||
const [head, ...digs] = x.split(''); |
|||
let borrow = true; |
|||
for (let i = digs.length - 1; borrow && i >= 0; i--) { |
|||
const d = digits.indexOf(digs[i]) - 1; |
|||
if (d === -1) { |
|||
digs[i] = digits.slice(-1); |
|||
} else { |
|||
digs[i] = digits[d]; |
|||
borrow = false; |
|||
} |
|||
} |
|||
if (borrow) { |
|||
if (head === 'a') { |
|||
return `Z${digits.slice(-1)}`; |
|||
} |
|||
if (head === 'A') { |
|||
return null; |
|||
} |
|||
const h = String.fromCharCode(head.charCodeAt(0) - 1); |
|||
if (h < 'Z') { |
|||
digs.push(digits.slice(-1)); |
|||
} else { |
|||
digs.pop(); |
|||
} |
|||
return h + digs.join(''); |
|||
} |
|||
return head + digs.join(''); |
|||
} |
|||
|
|||
export function generateKeyBetween( |
|||
a: string | null | undefined, |
|||
b: string | null | undefined, |
|||
digits = BASE_62_DIGITS, |
|||
): string { |
|||
if (a != null) { |
|||
validateOrderKey(a, digits); |
|||
} |
|||
if (b != null) { |
|||
validateOrderKey(b, digits); |
|||
} |
|||
if (a != null && b != null && a >= b) { |
|||
throw new Error(`${a} >= ${b}`); |
|||
} |
|||
if (a == null) { |
|||
if (b == null) { |
|||
return `a${digits[0]}`; |
|||
} |
|||
const ib = getIntegerPart(b); |
|||
const fb = b.slice(ib.length); |
|||
if (ib === `A${digits[0].repeat(26)}`) { |
|||
return ib + midpoint('', fb, digits); |
|||
} |
|||
if (ib < b) { |
|||
return ib; |
|||
} |
|||
const res = decrementInteger(ib, digits); |
|||
if (res == null) { |
|||
throw new Error('cannot decrement any more'); |
|||
} |
|||
return res; |
|||
} |
|||
if (b == null) { |
|||
const ia = getIntegerPart(a); |
|||
const fa = a.slice(ia.length); |
|||
const i = incrementInteger(ia, digits); |
|||
return i == null ? `${ia}${midpoint(fa, null, digits)}` : i; |
|||
} |
|||
const ia = getIntegerPart(a); |
|||
const fa = a.slice(ia.length); |
|||
const ib = getIntegerPart(b); |
|||
const fb = b.slice(ib.length); |
|||
if (ia === ib) { |
|||
return `${ia}${midpoint(fa, fb, digits)}`; |
|||
} |
|||
const i = incrementInteger(ia, digits); |
|||
if (i == null) { |
|||
throw new Error('cannot increment any more'); |
|||
} |
|||
if (i < b) { |
|||
return i; |
|||
} |
|||
return `${ia}${midpoint(fa, null, digits)}`; |
|||
} |
|||
|
|||
export function generateNKeysBetween( |
|||
a: string | null | undefined, |
|||
b: string | null | undefined, |
|||
n: number, |
|||
digits = BASE_62_DIGITS, |
|||
): string[] { |
|||
if (n === 0) { |
|||
return []; |
|||
} |
|||
if (n === 1) { |
|||
return [generateKeyBetween(a, b, digits)]; |
|||
} |
|||
if (b == null) { |
|||
let c = generateKeyBetween(a, b, digits); |
|||
const result = [c]; |
|||
for (let i = 0; i < n - 1; i++) { |
|||
c = generateKeyBetween(c, b, digits); |
|||
result.push(c); |
|||
} |
|||
return result; |
|||
} |
|||
if (a == null) { |
|||
let c = generateKeyBetween(a, b, digits); |
|||
const result = [c]; |
|||
for (let i = 0; i < n - 1; i++) { |
|||
c = generateKeyBetween(a, c, digits); |
|||
result.push(c); |
|||
} |
|||
result.reverse(); |
|||
return result; |
|||
} |
|||
const mid = Math.floor(n / 2); |
|||
const c = generateKeyBetween(a, b, digits); |
|||
return [...generateNKeysBetween(a, c, mid, digits), c, ...generateNKeysBetween(c, b, n - mid - 1, digits)]; |
|||
} |
|||
|
|||
@ -0,0 +1,252 @@ |
|||
import { applyPatches } from 'immer'; |
|||
import Component from 'dom_components/model/Component'; |
|||
import Editor from 'editor/model/Editor'; |
|||
import PatchManager from 'patch_manager'; |
|||
import { generateKeyBetween, generateNKeysBetween } from 'utils/fractionalIndex'; |
|||
import { serialize } from 'utils/mixins'; |
|||
|
|||
const flush = () => Promise.resolve(); |
|||
|
|||
const getUpdatePatches = (events) => events.filter((e) => e.event === 'patch:update').map((e) => e.payload); |
|||
|
|||
const initState = (models) => ({ |
|||
components: Object.fromEntries( |
|||
models.map((model) => { |
|||
const attributes = serialize(model.toJSON()); |
|||
delete attributes.components; |
|||
return [model.get('uid'), { attributes }]; |
|||
}), |
|||
), |
|||
}); |
|||
|
|||
describe('Patch tracking: nested Components order', () => { |
|||
let em; |
|||
let compOpts; |
|||
|
|||
beforeEach(() => { |
|||
em = new Editor({ avoidDefaults: true, avoidInlineStyle: true }); |
|||
em.Pages.onLoad(); |
|||
const domc = em.Components; |
|||
compOpts = { em, componentTypes: domc.componentTypes, domc }; |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
em.destroyAll(); |
|||
}); |
|||
|
|||
test('Does not create patches for non-storable props (toolbar/traits/status)', async () => { |
|||
const events = []; |
|||
const pm = new PatchManager({ |
|||
enabled: true, |
|||
emitter: { trigger: (event, payload) => events.push({ event, payload }) }, |
|||
}); |
|||
const cmp = new Component({}, compOpts); |
|||
em.Patches = pm; |
|||
events.length = 0; |
|||
|
|||
cmp.set('toolbar', [{ command: 'tlb-move' }]); |
|||
cmp.set('traits', [{ type: 'text', name: 'title' }]); |
|||
cmp.set('status', 'selected'); |
|||
|
|||
await flush(); |
|||
|
|||
expect(getUpdatePatches(events)).toHaveLength(0); |
|||
}); |
|||
|
|||
test('Add child: records component add + order-map add patches', async () => { |
|||
const events = []; |
|||
const pm = new PatchManager({ |
|||
enabled: true, |
|||
emitter: { trigger: (event, payload) => events.push({ event, payload }) }, |
|||
}); |
|||
pm.createId = () => 'child-1'; |
|||
|
|||
const parent = new Component({}, compOpts); |
|||
parent.set('uid', 'parent'); |
|||
em.Patches = pm; |
|||
parent.components().setParent(parent); |
|||
events.length = 0; |
|||
|
|||
parent.append({ tagName: 'div' }); |
|||
await flush(); |
|||
|
|||
const patches = getUpdatePatches(events); |
|||
expect(patches).toHaveLength(1); |
|||
|
|||
const patch = patches[0]; |
|||
expect(patch.changes).toHaveLength(2); |
|||
expect(patch.reverseChanges).toHaveLength(2); |
|||
|
|||
expect(patch.changes[0]).toMatchObject({ |
|||
op: 'add', |
|||
path: ['components', 'child-1'], |
|||
}); |
|||
expect(patch.changes[0].value.attributes.uid).toBe('child-1'); |
|||
|
|||
expect(patch.changes[1]).toEqual({ |
|||
op: 'add', |
|||
path: ['components', 'parent', 'attributes', 'componentsOrder', generateKeyBetween(null, null)], |
|||
value: 'child-1', |
|||
}); |
|||
|
|||
// Undo order must remove map entry first, then the component object.
|
|||
expect(patch.reverseChanges[0]).toEqual({ |
|||
op: 'remove', |
|||
path: ['components', 'parent', 'attributes', 'componentsOrder', generateKeyBetween(null, null)], |
|||
}); |
|||
expect(patch.reverseChanges[1]).toEqual({ |
|||
op: 'remove', |
|||
path: ['components', 'child-1'], |
|||
}); |
|||
}); |
|||
|
|||
test('Remove child: records order-map remove + component remove patches', async () => { |
|||
const events = []; |
|||
const pm = new PatchManager({ |
|||
enabled: true, |
|||
emitter: { trigger: (event, payload) => events.push({ event, payload }) }, |
|||
}); |
|||
pm.createId = () => 'child-1'; |
|||
|
|||
const parent = new Component({}, compOpts); |
|||
parent.set('uid', 'parent'); |
|||
em.Patches = pm; |
|||
parent.components().setParent(parent); |
|||
|
|||
const [child] = parent.append({ tagName: 'div' }); |
|||
await flush(); |
|||
events.length = 0; |
|||
|
|||
parent.components().remove(child); |
|||
await flush(); |
|||
|
|||
const patches = getUpdatePatches(events); |
|||
expect(patches).toHaveLength(1); |
|||
|
|||
const patch = patches[0]; |
|||
expect(patch.changes).toHaveLength(2); |
|||
expect(patch.reverseChanges).toHaveLength(2); |
|||
|
|||
const orderKey = generateKeyBetween(null, null); |
|||
expect(patch.changes[0]).toEqual({ |
|||
op: 'remove', |
|||
path: ['components', 'parent', 'attributes', 'componentsOrder', orderKey], |
|||
}); |
|||
expect(patch.changes[1]).toEqual({ |
|||
op: 'remove', |
|||
path: ['components', 'child-1'], |
|||
}); |
|||
|
|||
// Undo order must re-add the component object first, then restore the order map.
|
|||
expect(patch.reverseChanges[0]).toMatchObject({ |
|||
op: 'add', |
|||
path: ['components', 'child-1'], |
|||
}); |
|||
expect(patch.reverseChanges[0].value.attributes.uid).toBe('child-1'); |
|||
expect(patch.reverseChanges[1]).toEqual({ |
|||
op: 'add', |
|||
path: ['components', 'parent', 'attributes', 'componentsOrder', orderKey], |
|||
value: 'child-1', |
|||
}); |
|||
}); |
|||
|
|||
test('Reorder within same parent updates only componentsOrder (no array index moves)', async () => { |
|||
const events = []; |
|||
const pm = new PatchManager({ |
|||
enabled: true, |
|||
emitter: { trigger: (event, payload) => events.push({ event, payload }) }, |
|||
}); |
|||
|
|||
const parent = new Component({}, compOpts); |
|||
parent.set('uid', 'parent'); |
|||
|
|||
const [c1, c2, c3] = parent.append([{ tagName: 'div' }, { tagName: 'span' }, { tagName: 'p' }]); |
|||
c1.set('uid', 'c1'); |
|||
c2.set('uid', 'c2'); |
|||
c3.set('uid', 'c3'); |
|||
|
|||
em.Patches = pm; |
|||
parent.components().setParent(parent); |
|||
events.length = 0; |
|||
|
|||
// Move c1 to the end (temporary remove + re-add).
|
|||
parent.components().remove(c1, { temporary: true }); |
|||
parent.components().add(c1, { at: 2 }); |
|||
await flush(); |
|||
|
|||
const patches = getUpdatePatches(events); |
|||
expect(patches).toHaveLength(1); |
|||
|
|||
const patch = patches[0]; |
|||
expect(patch.changes).toHaveLength(2); |
|||
expect(patch.reverseChanges).toHaveLength(2); |
|||
|
|||
const [k1, k2, k3] = generateNKeysBetween(null, null, 3); |
|||
const newKey = generateKeyBetween(k3, null); |
|||
|
|||
expect(patch.changes[0]).toEqual({ |
|||
op: 'remove', |
|||
path: ['components', 'parent', 'attributes', 'componentsOrder', k1], |
|||
}); |
|||
expect(patch.changes[1]).toEqual({ |
|||
op: 'add', |
|||
path: ['components', 'parent', 'attributes', 'componentsOrder', newKey], |
|||
value: 'c1', |
|||
}); |
|||
|
|||
// Regression: no patches for `attributes.components` array indices.
|
|||
const hasComponentsArrayPatch = patch.changes.some((ch) => { |
|||
const p = ch.path || []; |
|||
for (let i = 0; i < p.length - 1; i++) { |
|||
if (p[i] === 'attributes' && p[i + 1] === 'components') return true; |
|||
} |
|||
return false; |
|||
}); |
|||
expect(hasComponentsArrayPatch).toBe(false); |
|||
}); |
|||
|
|||
test('Move between parents updates order maps and is undo/redo deterministic', async () => { |
|||
const events = []; |
|||
let state; |
|||
const pm = new PatchManager({ |
|||
enabled: true, |
|||
emitter: { trigger: (event, payload) => events.push({ event, payload }) }, |
|||
applyPatch: (changes) => { |
|||
state = applyPatches(state, changes); |
|||
}, |
|||
}); |
|||
|
|||
const parentA = new Component({}, compOpts); |
|||
const parentB = new Component({}, compOpts); |
|||
parentA.set('uid', 'parentA'); |
|||
parentB.set('uid', 'parentB'); |
|||
|
|||
const [child] = parentA.append({ tagName: 'div' }); |
|||
child.set('uid', 'c1'); |
|||
|
|||
em.Patches = pm; |
|||
parentA.components().setParent(parentA); |
|||
parentB.components().setParent(parentB); |
|||
|
|||
state = initState([parentA, parentB, child]); |
|||
const before = JSON.parse(JSON.stringify(state)); |
|||
events.length = 0; |
|||
|
|||
parentA.components().remove(child, { temporary: true }); |
|||
parentB.components().add(child, { at: 0 }); |
|||
await flush(); |
|||
|
|||
const patches = getUpdatePatches(events); |
|||
expect(patches).toHaveLength(1); |
|||
|
|||
const patch = patches[0]; |
|||
state = applyPatches(state, patch.changes); |
|||
const after = JSON.parse(JSON.stringify(state)); |
|||
|
|||
pm.undo(); |
|||
expect(state).toEqual(before); |
|||
|
|||
pm.redo(); |
|||
expect(state).toEqual(after); |
|||
}); |
|||
}); |
|||
Loading…
Reference in new issue