daybrush

<div class="label"></div>
<div class="page main">
  <div class="container">
    <div class="moveable"><span>Moveable</span></div>
    <div class="buttons able">
      <a href="#" data-able="scalable" [class]="scalable ? 'selected' : ''" (click)="clickScalable()" >Scalable</a>
      <a href="#" data-able="resizable" [class]="resizable ? 'selected' : ''" (click)="clickResizable()">Resizable</a>
      <a href="#" data-able="warpable" [class]="warpable ? 'selected' : ''" (click)="clickWarpable()">Warpable</a>
    </div>
    <p align="middle">Moveable is Draggable, Resizable, Scalable, Rotatable, Warpable, Pinchable</p>

daybrush

import ChildrenDiffer, { ChildrenDiffResult } from "@egjs/react-children-differ";

class Flicking {
  public render() {
    return (
      <ChildrenDiffer onUpdate={this.onUpdate}>
        {this.renderPanels()}
      </ChildrenDiffer>
    );
  }

daybrush

function sync(result) {
  const { maintained, removed, added, list } = result;
  const prevItems = this.items;
  const newItems = [];
  
  maintained.forEach(([beforeIndex, afterIndex]) => {
    newItems[afterIndex] = prevItems[beforeIndex];
  });
  added.forEach(i => {
    newItems[i] = new Item(list[i]);

daybrush

React Moveable

A React Component that create Moveable, Draggable, Resizable, Rotatable.

daybrush

import ListDiffer from "@egjs/list-differ";

const listDiffer = new ListDiffer([1, 2, 3, 4, 5, 6, 7], v => v);
const result = listDiffer.update([4, 3, 8, 2, 1, 7]);

// [[3, 0], [3, 1], [3, 2]]
console.log(result.ordered);
// [[3, 0], [2, 1], [1, 3]]
console.log(result.pureChanged);

daybrush

import ListDiffer from "@egjs/list-differ";

const listDiffer = new ListDiffer([1, 2, 3, 4, 5, 6, 7], v => v);
const result = listDiffer.update([4, 3, 8, 2, 1, 7]);

// [2]
console.log(result.added);
// [5, 4]
console.log(result.removed);
// [[3, 0], [2, 1], [1, 3], [0, 4], [6, 5]]

daybrush

import ListDiffer from "@egjs/list-differ";
import ChildrenDiffer from "@egjs/children-differ";

// Indicates the callback function that finds the key for that data.
// And only numbers or strings are allowed.
const listDiffer = new ListDiffer([], v => v);

const childrenDiffer = new childrenDiffer(document.body.children);

document.body.appendChild(document.createElement("div"));

daybrush

export function invert3x2(a: number[]) {
    // 00 01 02
    // 10 11 12
    // 20 21 22
    const [
        a00,
        a10,
        a01,
        a11,
        a02,

daybrush

function sync(result) {
  const { maintained, removed, added, list } = result;
  const prevItems = this.items;
  const newItems = [];

  maintained.forEach(([beforeIdx, afterIdx]) => {
    newItems[afterIndex] = prevItems[beforeIdx];
  });
  added.forEach(i => {
    newItems[i] = new Item(list[i]);

daybrush

const { removed, added, ordered, pureChanged, list } = result;

removed.forEach(index => {
  inst.remove(index);
});
ordered.forEach(([from, to], i) => {
  inst.remove(from);
  inst.insert(to, list[pureChanged[i][1]]);
});
added.forEach(index => {