Sut i Weithredu Dadwneud mewn Cymhwysiad React + Redux

Sut i Weithredu Dadwneud mewn Cymhwysiad React + Redux 1

Mae pob peiriannydd yn Kapwing wedi bod trwy’r canlynol: Rydyn ni’n dweud wrth ffrind ein bod ni’n grymuso gweithwyr proffesiynol creadigol i wneud fideos a delweddau cymhleth gyda golygydd hynod reddfol, seiliedig ar borwr. Maent yn agor eu gliniadur i edrych, ychwanegu fideo, ychwanegu testun, animeiddio’r testun, ychwanegu sain. Maen nhw’n anochel yn gwneud golygiad nad ydyn nhw’n ei hoffi, felly maen nhw’n clicio CTRL-Z ( neu yn San Francisco CMD-Z ), a does dim byd yn digwydd… “Na dadwneud?” Ouch.

Wel, digon yw digon. Rydym yn falch o gyhoeddi bod Kapwing bellach wedi dadwneud! Yn yr erthygl hon, byddwn yn esbonio sut y gwnaethom ddylunio a gweithredu dadwneud. Gobeithio y byddwn yn helpu datblygwyr gwe eraill sydd am ddod â swyddogaethau dadwneud i’w app gwe.

Cefndir

Ap gwe yw Kapwing sydd wedi’i adeiladu ar stac MERN modern sy’n cefnogi gwneud a golygu prosiectau amlgyfrwng gyda fideos, testun, delweddau, sain, isdeitlau a siapiau. Cyfeirir at yr holl bethau hyn fel ‘haenau’ O dan y cwfl mae pob fideo yn rhestr o olygfeydd, ac mae pob golygfa ei hun yn rhestr o haenau.

Dadwneud Cyhoeddiad ymlaen Twitter

Ystyriaethau Dylunio

Mae gweithredu dadwneud yn gofyn am bentwr dadwneud: arae a pwyntydd. Mae clicio dadwneud yn lleihau’r pwyntydd, a chlicio ar ail-wneud yn cynyddu’r pwyntydd. Mae cyflawni gweithred na ellir ei wneud yn ychwanegu cofnod at yr arae, a phan nad yw’r pwyntydd ar ben y pentwr dylai hefyd gael gwared ar bob cofnod uwchben y pwyntydd, gan nad oes modd eu hailwneud mwyach.

Mae enghraifft o bentwr dadwneud gyda phwyntydd i’w gweld isod:

Dadwneud/Ail-wneud animeiddiad stacDadwneud/Ail-wneud Stack

Yn gyffredinol, mae dau ddull o storio cofnodion y pentwr dadwneud:

  1. Storio ciplun o gyflwr y cais
  2. Storio dwy swyddogaeth: dadwneud ac ail-wneud

Ar yr olwg gyntaf, Dull #1 yn ymddangos yn symlach, gan fod ein cyflwr eisoes ar yr adeg y cyflawnir y weithred. Gall cymhwysiad sy’n caniatáu golygu picsel llun, er enghraifft, ddefnyddio’r dull hwn ar ffurf URLau gwrthrych i’r llun ar adeg y weithred. Dull #2 yn mynnu ein bod yn codio swyddogaeth dadwneud ac ail-wneud ar gyfer pob gweithred. Ar gyfer Kapwing, fodd bynnag, Dull #1 mae ganddo ychydig o anfanteision:

  1. Mae cyflwr ein app yn fawr. Mae rhai o’n fideos yn cynnwys dwsinau o olygfeydd a channoedd o haenau. Byddai pentwr dadwneud 100 dwfn a weithredir fel hyn yn hwb cof ofnadwy
  2. Gellir newid cyflwr ein app trwy chwarae fideo, llywio, a thasgau cefndir (llwytho ffeiliau i fyny, cynhyrchu mân-luniau ac ati). Nid ydym am i’r cyflwr hwn gael ei effeithio gan ddadwneud/ail-wneud.
  3. Mae ein app yn cefnogi cydweithredu cydamserol ar draws llawer o ddyfeisiau. Gallai’r cyflwr ddiweddaru oherwydd gweithredoedd cydweithiwr, ond mae caniatáu i ddefnyddiwr ddadwneud gweithredoedd defnyddiwr arall yn ymddangos yn anreddfol ac yn ddryslyd.

Ac felly fe benderfynon ni yn y pen draw i fynd gyda Dull #2. Byddai pob mynediad pentwr yn wrthrych gyda 2 meysydd: dadwneud ac ail-wneud.

Er mwyn deall cymhlethdod y dull hwn, byddaf yn amlinellu ychydig o bethau am reolaeth y wladwriaeth yn ein app ac yn y rhan fwyaf o gymwysiadau gwe React/Redux modern:

  1. Mae ein cyflwr byd-eang yn cael ei reoli gan redux. Mae gan Kapwing gydweithio cydamserol ac arbed awtomatig, sy’n golygu bod y rhan fwyaf o alwadau i redux hefyd yn cael eu hanfon dros y rhwydwaith i’n db. O ganlyniad, mae galwadau i redux braidd yn ddrud.
  2. Nid yw gweithred defnyddiwr o reidrwydd yn mapio i weithred redux. Er mwyn lleihau gweithredoedd redux drud a grybwyllir uchod, rydym yn aml yn dibynnu ar gyflwr cydran lleol ac nid ydym yn diweddaru’r cyflwr byd-eang tan ar ôl i’r defnyddiwr gadarnhau ei opsiynau. Mae’r gosodiad yn aml yn cael ei ddiweddaru gan y wladwriaeth gydrannol leol, nid y wladwriaeth redux fyd-eang.
  3. Gall gweithred defnyddiwr fapio i weithrediadau redux lluosog a diweddariadau cyflwr lleol lluosog. Er enghraifft, gall ychwanegu, tynnu, neu docio fideo newid hyd y prosiect cyfan yn ogystal â newid priodweddau’r haen honno. Mae amseru is-deitl yn achosi chwarae i neidio i’r amser cychwyn newydd. Rhaid i’r holl sgîl-effeithiau hyn ddigwydd hefyd wrth ddadwneud / ail-wneud.

O ystyried yr ystyriaethau uchod, penderfynwyd mabwysiadu agwedd hyblyg lle gall dadwneud/ail-wneud fod yn wrthrychau neu’n swyddogaethau. Os ydyn nhw’n wrthrychau, yna bydd y gwrthrych yn cael ei anfon i’n lleihäwr. Os ydynt yn swyddogaethau, yna bydd y swyddogaeth hon yn cael ei chyflawni ar ddadwneud/ail-wneud. Yn y ddau achos, mae’r pwyntydd yn cael ei ddiweddaru yn unol â hynny.

Baner na ellir ei wneud

Pan fydd rhaglennydd yn anfon gweithred yr hoffai iddo fod yn undoable, rhaid iddo drosglwyddo’r ddadl undoable=gwir. Mae angen y faner na ellir ei gwneud am ychydig o resymau:

  1. Ni ddylai Perfformio Dadwneud/Ailwneud ei hun newid y pentwr dadwneud. Yn syml, dylai berfformio gweithredoedd a chynyddiad/gostyngiad ar bwyntydd y pentwr. Felly mae gan bob gweithred sy’n cael ei anfon drwy ddadwneud/ail-wneud undoable=ffug.
  2. Mae llawer o weithredoedd redux yn cael eu hanfon yn y cefndir, ac ni all y defnyddiwr ddadwneud y gweithredoedd hyn. Er enghraifft, pan fydd fideo yn gorffen llwytho i fyny, rydym yn diweddaru’r ffynhonnell / url yn y cefndir, ond ni ddylai’r defnyddiwr allu dychwelyd y diweddariad haen hwnnw. Felly nid yw’r diweddariad haen hwn yn amhosibl ei wneud.
  3. Pan fydd gweithred defnyddiwr yn mapio i weithrediadau redux lluosog / diweddariadau cyflwr lleol, bydd y meysydd dadwneud / ail-wneud yn swyddogaethau yn hytrach na gwrthrychau i’w hanfon. Felly mae’n rhaid atodi’r pentwr dadwneud mewn cydran leol, nid y lleihäwr byd-eang.
  4. Mae gan rai cydrannau eisoes ddadwneud/ail-wneud brodorol, megis cydrannau y gellir eu golygu cynnwys, felly gellir eu heithrio o’r pentwr dadwneud.

Enghreifftiau Gweithredu

Amlinellaf ddwy enghraifft o sut y gwnaethom weithredu dadwneud ar Kapwing. Mae un yn hynod o syml; rydym yn gweithredu dadwneud yn y lleihäwr, sy’n gwthio gwrthrychau y gellir eu hanfon i’r pentwr heb fawr o god ychwanegol. Mae’r llall yn fwy cymhleth; rhaid i ddatblygwyr cydrannau ychwanegu swyddogaethau at y pentwr dadwneud eu hunain er mwyn diweddaru cyflwr lleol yn iawn.

Syml: Lliw cefndir

Dewisydd Lliw CefndirDewisydd Lliw Cefndir

Mae lliw cefndir yn cael ei bennu naill ai gan ddewislen o fotymau neu fewnbwn testun hecs. Nid yw’r dewis yn cael unrhyw effaith ar chwarae yn ôl, hyd y prosiect, nac unrhyw faes arall. Felly gall y lleihäwr ymdrin yn gyfan gwbl â’r rhesymeg dros wneud hyn yn annioddefol:

case "SET_BACKGROUND_COLOR":
    if (action.undoable) {
     undoStack.add(
       {
         undo: {
           type: "SET_BACKGROUND_COLOR",
           color: state.color,
         },
         redo: {
           type: "SET_BACKGROUND_COLOR",
           color: action.color,
         },
       },
     );
    }
	return { ...state, color: action.color }

Yn syml, mae’n rhaid i raglennydd sy’n ychwanegu dewisydd lliw cefndir newydd osod undoable=gwir wrth anfon y weithred hon.

Mwy cymhleth: Trimmer is-deitl

Sut i Weithredu Dadwneud mewn Cymhwysiad React + Redux 2Golygfa Isdeitl ar Kapwing

Yng ngolwg Is-deitl Kapwing, mae defnyddwyr yn newid amseroedd cychwyn a gorffen is-deitl gyda llithrydd. Wrth i chi lusgo’r llithrydd, mae’r rhagolwg fideo yn diweddaru fel y gallwch chi ddod o hyd i’r union ffrâm yn hawdd lle rydych chi am i’ch is-deitl ddechrau / gorffen. Pan fyddwch chi’n dad-wneud trim, nid ydych chi eisiau dadwneud bob tro y bydd y triniwr llusgo yn tanio – byddai hynny’n golygu llawer iawn o CTRL-Zs i ddadwneud un llusgo!

Yr allwedd yw arbed y cyflwr cychwynnol ar ddechrau’r sleid a diweddaru redux / undoStack ar y diwedd. Yn ystod y ‘sleid’, dim ond y wladwriaeth leol yr ydym yn ei ddiweddaru. Gwneir hyn trwy gofrestru’r trinwyr hyn:

    slider.on("start", (startTime, endTime) => {
      this.slideStartValues = { startTime, endTime };
    });
 
    slider.noUiSlider.on("slide", (startTime, endTime) =>
      this.handleLocalSlider({startTime, endTime})
    );
 
    slider.on("end", (startTime, endTime) =>
      this.onSubtitleTrimEnd(startTime, endTime)
    );

Pan ddaw’r sleid i ben, rydym yn diweddaru’r cyflwr byd-eang ac yn ychwanegu swyddogaethau at y pentwr dadwneud:

onSubtitleTrimEnd = (startTime, endTime) => {
  const func = () => updateSubtitle({ startTime, endTime });
  const undoFunc = () => updateSubtitle(this.sliderStartValues);

  func();

  undoStack.add({
    undo: () => {
      if (this.mounted) {
        this.handleLocalSlider(this.sliderStartValues);
      }
      undoFunc();
    },
    redo: () => {
      if (this.mounted) {
        this.handleLocalSlider({startTime, endTime});
      }
      func();
    },
  });
};

UpdateSubtitle yn anfon gweithred sy’n diweddaru ein cyflwr redux byd-eang. Mae’r swyddogaeth dadwneud yn defnyddio’r newidyn enghraifft sliderStartValues ​​sydd wedi’i storio yn ein cyflwr cychwynnol.

Note bod y swyddogaethau dadwneud/ail-wneud ond yn galw handleLocalSlider pan fydd y moddol is-deitlau wedi’i osod. Mae hyn yn diweddaru’r chwarae lleol i adlewyrchu amser cychwyn newydd y capsiwn.

Felly, pan fydd yr Is-deitl View wedi’i osod, bydd dadwneud trim yn addasu cyflwr byd-eang a hefyd yn diweddaru’r rhagolwg fideo lleol. Pan na fydd yr Is-deitl View wedi’i osod, bydd yn diweddaru cyflwr byd-eang yn syml.

Ystyriaethau eraill

Gwelededd

Os yw’r cynllun yn newid, a all y defnyddiwr barhau i ddadwneud y camau a gymerodd mewn golwg flaenorol? Nid ydym am ddadwneud arwain at lywio, felly rydym yn atal y pwyntydd pentwr dadwneud rhag lleihau islaw pan fydd y golwg gyfredol wedi’i osod. Mae’r amodau lleol hyn yn ychwanegu rhywfaint o gymhlethdod at y rhesymeg dadwneud.

Sut i Weithredu Dadwneud mewn Cymhwysiad React + Redux 3Wrth ychwanegu sain, ni all defnyddwyr ddadwneud golygiad mewn offeryn gwahanol fel y Trimmer view

Uwchlwytho Ail-wneud

Mae Kapwing yn caniatáu i ddefnyddwyr gael mynediad ar unwaith i’w ffeiliau wedi’u llwytho i fyny trwy ddefnyddio smotiau lleol nes bod y llwytho i fyny wedi’i gwblhau. Pan fydd y llwythiad wedi’i gwblhau, caiff yr haen ei haddasu gyda’r url newydd. Dyma’r math o ‘weithredu cefndir na ellir ei wneud’ a drafodwyd yn gynharach. Beth sy’n digwydd wedyn os caiff uwchlwythiad ei ddadwneud a’i ail-wneud? A ddylai dadwneud uwchlwythiad ganslo’r uwchlwythiad? Rydym yn gwneud y canlynol:

  1. Nid ydym yn canslo uwchlwytho wrth ddadwneud, ond rydym yn dileu’r haen gyfatebol.
  2. Mae’r haen yn cael ei thaflu mewn geiriadur haenau wedi’u dileu yn redux.
  3. Pan fydd y llwythiad wedi’i gwblhau, mae’r haen yn y geiriadur haenau sydd wedi’u dileu yn cael ei diweddaru gyda’r url newydd.
  4. Bydd ail-wneud y weithred nawr yn ychwanegu’r haen yn ôl gyda’i url o bell wedi’i ddiweddaru.

Golygu testun

Mae Kapwing yn boblogaidd ar gyfer ychwanegu is-deitlau a thestun at fideo, felly, fel rhaglenni gwe eraill, mae gennym ni lawer o bodlon divs ar ein tudalennau. Bodlonadwy mae gan divs eu dadwneud brodorol eu hunain sy’n ymateb i ddadwneud gweithredoedd tra bod y blwch yn cael ei ddewis.

Sut i Weithredu Dadwneud mewn Cymhwysiad React + Redux 4Mewnbwn testun ar gyfer is-deitl unigol

Ond beth am ddadwneud gweithredoedd a gyflawnir ar ôl i’r testun gael ei ddad-ddethol? Rydyn ni’n trin hyn mewn ffordd debyg i’r ffordd rydyn ni’n trin y trimiwr is-deitl:

  1. Pan ddewisir y blwch testun, caiff cyflwr cychwynnol y testun ei gadw mewn cyflwr lleol
  2. Mae’r newidiadau testun sy’n digwydd wrth i’r defnyddiwr yn teipio yn cael eu hanfon i redux gyda gweithredoedd na ellir eu gwneud
  3. Pan fydd y defnyddiwr yn dad-ddewis, mae’r pentwr dadwneud yn cael ei boblogi gan ddefnyddio’r cyflwr cychwynnol ar gyfer dadwneud a’r cyflwr terfynol ar gyfer ail-wneud.

Mae’r cynllun hwn yn caniatáu dadwneud brodorol wrth deipio ac ar gyfer dadwneud newidiadau testun yn gyflym ar ôl i’r testun gael ei gyflwyno.

Crynodeb

Ar gyfer cymwysiadau sy’n seiliedig ar borwr, mae dadwneud yn rhoi rheolaeth fwy manwl gywir i ddefnyddwyr, yn galluogi tasgau ffurf hirach, ac yn annog mwy o arbrofi oherwydd gall defnyddwyr roi cynnig ar agweddau ar y UI heb golli eu gwaith. Mae gweithredu dadwneud/ail-wneud mewn ap gwe modern yn dasg heriol. Gall hanfodion pentwr dadwneud fod yn syml, ond mae’r cymhlethdod yn codi pan fyddwn yn ceisio mapio gweithredoedd defnyddwyr i 0,1 neu lawer o ddiweddariadau cyflwr byd-eang/lleol, ac i wneud hynny mewn ffordd reddfol a gweladwy.

Rwy’n gobeithio bod yr erthygl hon yn helpu datblygwyr sy’n cynllunio prosiect dadwneud i bensaernïaeth eu datrysiad yn llwyddiannus. Mae gweithrediad llwyddiannus yn rhoi mynediad i ddefnyddwyr at ddisgwyliad safonol ar gyfer meddalwedd cynhyrchiant heb arafu datblygwyr.