skottie/modules/lottie-annotations/annotations-demo.js

import './annotations.scss'

import { setupListeners, onUserEdit, reannotate} from './annotations.js'

const JSONEditor = require('jsoneditor/dist/jsoneditor-minimalist.js');
// gear.json from https://www.lottiefiles.com/2314-gear
let INPUT_JSON = {'v':'5.1.20','fr':60,'ip':0,'op':300,'w':128,'h':128,'nm':'Comp 1','ddd':0,'assets':[],'layers':[{'ddd':0,'ind':1,'ty':4,'nm':'GearHollowAltWeb Outlines','sr':1,'ks':{'o':{'a':0,'k':100,'ix':11},'r':{'a':1,'k':[{'i':{'x':[0.833],'y':[0.833]},'o':{'x':[0.167],'y':[0.167]},'n':['0p833_0p833_0p167_0p167'],'t':0,'s':[0],'e':[360]},{'t':299}],'ix':10},'p':{'a':0,'k':[64,64,0],'ix':2},'a':{'a':0,'k':[320,320,0],'ix':1},'s':{'a':0,'k':[11.562,11.562,100],'ix':6}},'ao':0,'shapes':[{'ty':'gr','it':[{'ind':0,'ty':'sh','ix':1,'ks':{'a':0,'k':{'i':[[8.101,-15.5],[10.699,0],[0,-52.9],[-3.5,-10.1],[16.699,-5.2],[36.1,0],[16.4,-31.2],[15.5,8.1],[0,10.699],[52.9,0],[10.1,-3.5],[5.2,16.699],[0,36.099],[31.1,16.4],[-8.1,15.5],[-10.7,0],[0,52.9],[3.5,10.1],[-16.7,5.2],[-36.1,0],[-16.4,31.2],[-15.5,-8.1],[0,-10.7],[-52.9,0],[-10.101,3.5],[-5.1,-16.6],[0,-36.1],[-31.1,-16.4]],'o':[[-10,-3.5],[-52.901,0],[0,10.699],[-15.5,8.1],[-16.301,-31.2],[-36,0],[-16.7,-5.101],[3.5,-10],[0,-52.9],[-10.7,0],[-8.1,-15.5],[31.2,-16.301],[0,-36.1],[5.1,-16.7],[10,3.5],[52.9,0],[0,-10.7],[15.5,-8.1],[16.3,31.2],[36.1,0],[16.6,5.1],[-3.5,10],[0,52.9],[10.7,0],[8.099,15.5],[-31.2,16.4],[0,36],[-5.1,16.7]],'v':[[255.3,133.25],[223.901,127.95],[127.901,223.95],[133.2,255.35],[84.901,275.25],[0,223.95],[-84.9,275.25],[-133.3,255.35],[-128,223.95],[-224,127.95],[-255.4,133.25],[-275.3,84.95],[-224,0.05],[-275.2,-84.95],[-255.3,-133.25],[-223.9,-127.95],[-127.9,-223.95],[-133.2,-255.35],[-84.9,-275.25],[0,-223.95],[85,-275.25],[133.3,-255.35],[128,-223.95],[224,-127.95],[255.401,-133.25],[275.3,-84.95],[224,0.05],[275.2,84.85]],'c':true},'ix':2},'nm':'Path 1','mn':'ADBE Vector Shape - Group','hd':false},{'ind':1,'ty':'sh','ix':2,'ks':{'a':0,'k':{'i':[[7.9,2.701],[0,27.5],[-26.1,8.8],[2.1,8.1],[15.1,25.8],[5.5,0],[2.4,-1.4],[10.7,0],[0,35.3],[-5.1,9.3],[7.399,4.4],[28.8,7.4],[1.3,0],[2.201,-6.7],[27.5,0],[8.7,26.1],[6.7,0],[1.4,-0.3],[25.8,-15.1],[-4.2,-7.6],[0,-10.7],[35.3,0],[9.3,5.1],[2.6,0],[3,-5],[7.4,-28.8],[-7.9,-2.6],[0,-27.5],[26.1,-8.699],[-2.1,-8.101],[-15.1,-25.8],[-5.5,0],[-2.4,1.399],[-10.7,0],[0,-35.301],[5.1,-9.3],[-7.4,-4.401],[-28.8,-7.4],[-1.3,0],[-2.3,6.599],[-27.5,0],[-8.699,-26.1],[-6.7,0],[-1.4,0.3],[-25.8,15.099],[4.201,7.599],[0,10.699],[-35.301,0],[-9.3,-5.101],[-2.6,0],[-3,5],[-7.401,28.8]],'o':[[-26.1,-8.799],[0,-27.5],[7.9,-2.7],[-7.4,-28.7],[-3,-5.1],[-2.6,0],[-9.3,5.1],[-35.3,0],[0,-10.7],[4.101,-7.6],[-25.701,-15.1],[-1.3,-0.3],[-6.7,0],[-8.799,26.1],[-27.5,0],[-2.3,-6.6],[-1.3,0],[-28.7,7.4],[-7.5,4.4],[5.1,9.3],[0,35.3],[-10.7,0],[-2.4,-1.3],[-5.5,0],[-15.1,25.7],[-2.1,8.1],[26,8.8],[0,27.5],[-7.9,2.701],[7.4,28.7],[3,5.1],[2.6,0],[9.3,-5.101],[35.3,0],[0,10.699],[-4.1,7.599],[25.7,15.099],[1.3,0.3],[6.7,0],[8.8,-26.1],[27.5,0],[2.301,6.599],[1.3,0],[28.701,-7.4],[7.5,-4.401],[-5.1,-9.3],[0,-35.301],[10.699,0],[2.401,1.3],[5.5,0],[15.1,-25.701],[2.099,-8]],'v':[[299.6,60.649],[256,0.05],[299.6,-60.65],[310,-79.75],[276.1,-161.85],[262.3,-169.75],[254.6,-167.75],[224,-159.95],[160,-223.95],[167.8,-254.55],[161.901,-276.05],[79.8,-309.95],[75.8,-310.45],[60.7,-299.55],[0,-255.95],[-60.6,-299.55],[-75.7,-310.45],[-79.7,-309.95],[-161.8,-276.05],[-167.7,-254.55],[-159.9,-223.95],[-223.9,-159.95],[-254.5,-167.75],[-262.2,-169.65],[-276,-161.85],[-309.9,-79.75],[-299.5,-60.65],[-256,0.05],[-299.6,60.649],[-310,79.75],[-276.1,161.85],[-262.3,169.75],[-254.6,167.75],[-224,159.95],[-160,223.95],[-167.8,254.55],[-161.9,276.05],[-79.8,309.95],[-75.8,310.45],[-60.6,299.55],[0,255.95],[60.6,299.55],[75.7,310.45],[79.7,309.95],[161.8,276.05],[167.7,254.55],[159.901,223.95],[223.901,159.95],[254.5,167.75],[262.2,169.649],[276,161.85],[309.901,79.75]],'c':true},'ix':2},'nm':'Path 2','mn':'ADBE Vector Shape - Group','hd':false},{'ty':'mm','mm':1,'nm':'Merge Paths 1','mn':'ADBE Vector Filter - Merge','hd':false},{'ty':'fl','c':{'a':0,'k':[0,0,0,1],'ix':4},'o':{'a':0,'k':100,'ix':5},'r':1,'nm':'Fill 1','mn':'ADBE Vector Graphic - Fill','hd':false},{'ty':'tr','p':{'a':0,'k':[320,319.95],'ix':2},'a':{'a':0,'k':[0,0],'ix':1},'s':{'a':0,'k':[100,100],'ix':3},'r':{'a':0,'k':0,'ix':6},'o':{'a':0,'k':100,'ix':7},'sk':{'a':0,'k':0,'ix':4},'sa':{'a':0,'k':0,'ix':5},'nm':'Transform'}],'nm':'Group 1','np':4,'cix':2,'ix':1,'mn':'ADBE Vector Group','hd':false},{'ty':'gr','it':[{'ind':0,'ty':'sh','ix':1,'ks':{'a':0,'k':{'i':[[52.9,0],[0,52.9],[-52.9,0],[0,-52.9]],'o':[[-52.9,0],[0,-52.9],[52.9,0],[0,52.9]],'v':[[0,96],[-96,0],[0,-96],[96,0]],'c':true},'ix':2},'nm':'Path 1','mn':'ADBE Vector Shape - Group','hd':false},{'ind':1,'ty':'sh','ix':2,'ks':{'a':0,'k':{'i':[[70.6,0],[0,-70.6],[-70.6,0],[0,70.6]],'o':[[-70.6,0],[0,70.6],[70.6,0],[0,-70.6]],'v':[[0,-128],[-128,0],[0,128],[128,0]],'c':true},'ix':2},'nm':'Path 2','mn':'ADBE Vector Shape - Group','hd':false},{'ty':'mm','mm':1,'nm':'Merge Paths 1','mn':'ADBE Vector Filter - Merge','hd':false},{'ty':'fl','c':{'a':0,'k':[0,0,0,1],'ix':4},'o':{'a':0,'k':100,'ix':5},'r':1,'nm':'Fill 1','mn':'ADBE Vector Graphic - Fill','hd':false},{'ty':'tr','p':{'a':0,'k':[320,320],'ix':2},'a':{'a':0,'k':[0,0],'ix':1},'s':{'a':0,'k':[100,100],'ix':3},'r':{'a':0,'k':0,'ix':6},'o':{'a':0,'k':100,'ix':7},'sk':{'a':0,'k':0,'ix':4},'sa':{'a':0,'k':0,'ix':5},'nm':'Transform'}],'nm':'Group 2','np':4,'cix':2,'ix':2,'mn':'ADBE Vector Group','hd':false}],'ip':0,'op':300,'st':0,'bm':0}],'markers':[]};


const container = document.getElementById('jsoneditor');
let initialRender = false;

const options = {
  sortObjectKeys: true,
  // There are sometimes a few onChange events that happen
  // during the initial .set(), so we have a safety variable
  // initialRender to prevent unnecessary re-renderings.
  onChange: () => {
    if (!initialRender) {
      return;
    }
    onUserEdit(container, editor.get());
  }
};

const editor = new JSONEditor(container, options);
setupListeners(container);
editor.set(INPUT_JSON);
reannotate(container, INPUT_JSON);
initialRender = true;