From 46f19eeb6d9dff0518187e42cc9ff75b5383b737 Mon Sep 17 00:00:00 2001 From: Chris Vanderloo Date: Fri, 3 Apr 2020 11:41:29 -0400 Subject: [PATCH] initial window, animations, load canvas --- ExistentialGraphs.studio | Bin 8957 -> 10617 bytes public/assets/back-caret.svg | 3 + src/App.js | 66 ++++++++--------- src/App.scss | 5 ++ src/Canvas.js | 1 - src/CreateNew.js | 59 --------------- src/CreateNew.scss | 22 ------ src/Draggable.js | 45 ------------ src/Popup.js | 38 ---------- src/Popup.scss | 45 ------------ src/converters.js | 48 +++++++++++-- src/intro/CreateNew.js | 134 +++++++++++++++++++++++++++++++++++ src/intro/CreateNew.scss | 47 ++++++++++++ src/intro/IntroWindow.js | 70 +++++++++++------- src/intro/intro.scss | 25 ++++++- src/operators.json | 8 +++ src/sidebar/Sidebar.js | 56 --------------- src/sidebar/Sidebar.scss | 110 ---------------------------- src/verifySentence.js | 16 +++-- 19 files changed, 351 insertions(+), 447 deletions(-) create mode 100644 public/assets/back-caret.svg delete mode 100644 src/CreateNew.js delete mode 100644 src/CreateNew.scss delete mode 100644 src/Draggable.js delete mode 100644 src/Popup.js delete mode 100644 src/Popup.scss create mode 100644 src/intro/CreateNew.js create mode 100644 src/intro/CreateNew.scss delete mode 100644 src/sidebar/Sidebar.js delete mode 100644 src/sidebar/Sidebar.scss diff --git a/ExistentialGraphs.studio b/ExistentialGraphs.studio index 323a01ae5c04924f4bf59eadf245629db880b66a..db38dadbeff1ca28ab593a45e235ad818178f51b 100644 GIT binary patch literal 10617 zcmWIWW@Zs#VBp|jSiie5V3Lu?kroC9hP4a~47>~s47sT#i7AOCiF#SZ`FXzG2e}Rz z2)NX{e!J6>b9>9e`U~CS3+Fvfo7!QfxU8w;e_n{oOv}CI#qBc=P1Nk?V{s6=Fr+vwCjh#;Rewg64$?-d1`ZRa{a@rYWnBcD|WxMW}UKi zV#JF_-|TOl+7&YAN5V_BtM2)e&(Ha{PQ&}bM;27)ntXZic)BtJ!%}ueuyc#^5(|nm z@=L(ZeOnt{ob2BBEI#l>runs%4sjD^ewcl`w%Db-|9aW^H*Z?xKSdqQow`C`WzkiO zSNrt~JUZQlT!W^CBt@=SA)x&MPd-#*zAw`KF=_5WXAKU!|) z^h&WRHOcJM)oCF)99m7?Qmfu=`+l{&ZvMS3%4gRkk{{KcRKX3m&f6?5@o9}HqIeYu(-~P%IHsABVrT_eL_fPZZ&vj#$Y`*kF z`1Hr~_m)}xZMC1YT)r;G=Kn8=zAg6u3!XIo*HEt4zxU*ey-Cg1AN=b7>gD?P{ha^* z&%6FV8{?zGmcLBeu|B;0UsZL-%OX43`fv7Szm`tkTvQc#yFC4VyvffeAFqGzKK6{7$^HA5u ze$(>HlJOM+24df(RxIi|=K6G3r`EDNQ&f*M8J5U4zQ6GGg5I+IXSVU5Jt=xW=G^nQ zkN$1$xpTVQ#&z=Mv!A}dkiXgV?dZ!jt9lpB*`>v`ZiUcRzBLJ&tTO*S_C0vId$Z~O z&t7p{=hgO?`F~M9JNeJ430f`JSelspRaruAS_d2p*D+KH){v|JHS_70+TAafUylE0 zxAs%^&#N^-mtICO6s?u^Um~iK`}5k@HA&~=N^{Ppy$Cxl820aH$*D*6-=4j&S4-#i z-8b#U%cnm-_Ab<4Qg8J8_Le`ZuU_@9EH>MlQSZOGK6Za;_MY_1o4+QktiF21dS$>$ z&FK?ET*5=04-4OoHMqC7%_Lv`+3Jb!O}2eL`THeNTOtrpI`B^33tociWm$bpX(;vHEa?Dy6_h-KJ`hTB~t^RMl zXV%7)4zJA&=gvjX{I76a?1R~FbD>+tq95?^`^QcPvx!XCa$tP!YCG5Ghb#u>BiO{mfg)GhdrtaBJkNTHibg$pL z@Rosw8BY~&b6EDgId-9IU!Iz0@o!)JwEMMtY&KQ=?LS?9Jf3~R z%BP((r(CrC_c&!*gz>sO>;4~e)_#}X*=~R8%^cmj;L6kQ#n_H~oLy}8d9&T#itU%~ zK76P5{(I)@;)5Y}-MwG0|3B(x`$xy1bk>jKA13^-jJsT8P$76wnn$gv<8frAcKKDV z0{-G=t1D8q!7Gm~nxpotRJWPwaK{O^byKtABYmdGEQ2BO6uS2rHkHwLdx9=@o zToU%QW%KLx6~<4m=e)SLN7n8{eDJNDGLyINn_s^CeYEuU?#YY)$IP?$em{GU>F#|? zYM#C<`L%xWnK>Ud&bIT*%-!@OevXaADg_mJ<=wm&+1j+`Z}FPd^XWydqekTO4T7tB zTyb>#Dx_p9C0GCf}R77v!v(NmWH>*oMp1WJatETXpUY$p2k!8m! z5BvME^O{@NoVaW=_x$qrV&~g6qjq?9bJtY=<(98do?##DW2?EL^>4ex%_ARLRtep> zSN_RX;qBbS&H|wmZbB!y8I$fDbT|K{BGug{W9@dY^{m_R8NyQkxo7(daGyEIc6R!# zPYEXZf$dkK!#Jh17bkx=jh;RwTX#~vW%;4A8T-CywjbY9bBFQ5S=)wv+N^u!pZ_(R zvwi;TZn1d^-=5_^*mbwz)fq$0gdJ|B`5n7jgl=xx#2v>F;&-CHNKIbyU8%A5f*lEs zPfyR;CK_eXAh-6BtA3m8tsk-%n6~d&TF5Pz@psn8hOf^{mfYVeJlQCz@7Y97$4_yp zTUPMg47njR`E#ABm5)Zdz{7}xrn?*uZtd@0A$V(PQ#Zr&m#(?ui@D3bC0%S_Ik555 z{H%}^cF(O$=aSnQ4&K}QAgJKWTJPJf(bhK4o<0_eKIb2t`CjaVx#eu%R|(0NfA)Xw zH)=l46PBd+|9(kP+1G2kJ2MvEIbuKeZopUGE{V15-#I3Ic=qZ95; z?oL{pw(6P5eXYeCpKb}dnXfO!|3v=n^ySL-yFUp%Uh8`-RkTXHiEW9|M-is9o&$@w zGk))%-Xc8Bir0?obnolC_jmg^vp+wm_dn{+A)hy#J^v&3OLjdHNUYu(uw{{&&N2Qp zHNEV~o3^gnK4s=ikr2b{YpT|$s&g-FuS!rmf57LAT3XVUUgi4Bi}>E0Gc;DbEAe(~ zsHaovlI+df(i&{Kdfyux-(=OlVAnO%B|Y9)=1!8@wOLPAsiwMajh*~7J$lb6#nf-M zIjuHITm29C)bzUUzHsxh+VM?NH`XkC%I);w*p&?9TF)~o5f>f?o_UgaSW&tu6t|5{j!TZB?cn&V0YwEdIsEN0!+eBkh-#yKKG{C26>rOLxOs z<+Rp|zgO+aUovyL$n{U>7G*wiGC3Qh{p6#h%jZ)pR|LG1U#&V3TIMHw|N5QoU|Yjp zow*vOd-Ie3|KyWWj9!~?QFFeK=JnhF&+PRJZu6L_bZxya#FH%k!59?xMH?1t>$&_m zc7FQnd_xZvx3cJ_vu4##AE#A6Wp6GkKiVC1cIO7&_Cr73tXfksS$IcIUp!e#Wz3MeP?uBg7MlHhhN;8S8cPghx^ za=%@iq+F}Vx8tVTIzGF&CT6%@xT%_mHf7l8*_JXpZ}L+01DFi^LM|f z?tgzSR;49Bb1U1a;=o=_H_>?728KjHSjwGnOP-YHq%8u|c@f`H;0yjQ0!7{ws!m*dH%q5N))4%VA+|zD0^WVL@B? zG(I%2c8c9l_FK|&Z8Miw*XqVaPE4|~jn{4$FK%e#$(R(Xc2uEp`vM`g#WlLO)F)?c zeA&QsJj7;Nn&Z)B;R`8A(J7clG)R-1CmBHdPiM_Z9ykm*VZ*H=X;q{8O_ubkIq!;baG2=D-E6TtL=dPSApXd zZ#5RIb)77{>d5z&k5V(Z13sTBix19dHBH!(u}wYGtKX5q?DfHo;U0C|3=`}(-fMJz zG&}8$qSA)w6(5$H&GwEw`#s3?^8*LPYi?HTtDV%+KHQin8{)qzsH5ZBs|Np=L*FOO z^vdI3)HYjaYF;zz`S#CZle%uG{G7DPtF<#Mc~y?Ec9`aV{|yq?CYm?0KH{9r)lnn) z+_aTB>P?#%vzN?XbAGn2dnK(gvyJ}v?>yjFpSFK$ulTP;!dF>-GKlzdh)BP#%YW!% z;I{cV>niJ{pous3cZl8C&#;!aI_;X!9=|yk-W~aUg8#wZ$FsMq-u&1g>^i%=CTKxXHecAH$uYOm(4boeyU_GsJ_MS!0CS6)~GwZ-ln=h|! z2XKF$F3xCM+~UrM`cbm7gk#x(ZX z3P#hGY+mBMlx0cGOE=ZvwMIu@-H4N=Km0DwHC<IAvW9scMa(aQFm$3aE&3LOt-E(J3*zEYe z)Nomqm*c|8e4L)_&yL;IJkztt?&-9<9n$YFzWO?$Wm~V(3tb+?7TuYzqxQc$aq;ad zDd&yKi#fw=BiDAx%-&c|ka3s(yDe_wJ^PwH9xTveIX)87TJT=8Uf zm>848g1n12uSWdeBy;Jx%tChY+1Wb3kGfrB(q#E4DDv`z-p=)t^0$|3GuKU@%CL8- zPe^-itV6tM!g{B__S=3cv~PF*^ImQ1ytwvx*S}h2sH@Y4-4{16UF*tmP_`f`J?VLA z7U!ZgU;el^o)cVc&9pd|Y))IhvUgSPdzWK+juSK=Tr6WrBGzK1*-tn%2xjcNY!V(|34#{l-@8q_u`E%;Do9;3$ zvjbvN>(;CntN9*je6rt9s>m|s@svt~tqqzlHl5D>uJC@d_RkG}tKl!bio^Mrl zYQD>Z+gWQnPoy)v-c}$f#*pgwL-+9>QSsv}b_+E(AA2e+Rj~C_>DybGhd&$t%5QuB zWc`u@b!I}W{0>jVrr& zF^zSaV5QxP1!oN{U*D?T^*<=<{q;2FJGWk?L{};2tejDIH*5c;(vwLxQd=G_T($0I zhmmoiSJZb6cHNEt1(#mhH06cQiFNtss_j@T<<|Tv?0z*naC+sdtJy8b%HqCRa)<8P zXPBE;|FzBHSn^!CD;K?z<{X+M8JWU=EM|q)Gybp{Hf8&()32xJJ61Mlo1gsJ z{47L&(zHv9->mb94D2vF)^w)f+qTc?*SDo{#u+Y{T-2NC)Usr%qj=LvD?O=O@1Ned zsjR=#>;DY4NlOwX-!OUW7W-?qoMNc+{r=FFx6ScNLT}{PQ!7=sOjz|Pw3|77%a>D* zPnkcS|GM)>N?&}1_=;;*Ox8cVj%#tM#9f;#td+)c%>2l`cGdppw|NuSZ);jKLwQ#s zqsOThWqSgvs&2ZnjSbvgm(Oi~I&huvN(^q~cw|TFwUFGJxtNPa8el+V@ zt?IJ#dtEaU4Z^)%*7Kpii?r zp4VzB-kOzaUb^|svOGRb#eQGTpRacCdQSXbrpIKXmcw{5lBqRr(yc0Ko*fgbIGY2w zKJVODGU4Bub#9ZQt*ZY&Yny-m{0;S=fn{rC+RASJescJu*LAm2cRfd@$GcwL+)%q! zM^)3)yE{tJ`Qq89e{cI9d$(on-RAB6H#gb*T6MQ8w8L>zwY*HM#<6K4or0RIiY0a{ zmlTJ(F5-SNqnD5O&ij779HxcNJD=p=JaH~KA^1t+R)y7j%eNY?=UjGzN%F+2DcxMT zULv)rTqdh7-D-cE6sFiHo58>Cq1$7phKlbWmT4__-g+h@GgNBl=J1tS=4UD!YJDTW zOuDRHO7li8ER%Wkhrtliqf*%ljhbMe`Y#jBHprrhk>*)%t*IqmYS4aeSBY@ZPt z#(MS875&u>HNi1wX8k<8VKJX6*Ul$NUp80eS-)R@yK;eVlct!~?isr_cuqJG@^+_+ zxZz{DHK}Wq8QXhbe{1RbldLGhzgTHyYuA&R3F+sv9?lKstO`h2yv#>3sa$&H3Gp4p zcjpBQdiJ?@1-&kAecvm%Z{~^xN*?k5*BAu^hW#>{aQ5u>9q}P4my?brKHqizglox} zX|7AOb5rZDq|9EF60yJd@>Zk3mphhb{&6l}_xfU{S(=uqrmcbLiWkh9x;>HG!i%fE zyEfft7O(8JzW%gLGxhYk+zGw6gr%pZt@*?kds$BAN{RQWYo&D+ujam1X-e-~BfGHvj#C zz#==>mpKu0-qePgtUTi86PfbsVdL|*Q|H!QnA>_vKj*nsw72$D)r;mvZ)Qh)yFVxY zR13pK)0_T+=22grCojIg+pzwSn!BG_dzZ6yU|UL-?^3<0pdkL`ifpCDI>q-Vty(tCynLdyiRG`@#joEkeWk_2 zvbp5oIw9>fT8s6CBoAuL-f3}*Z6bemQA$m3gw&?|E1q|%_AOZF8L4nL+MVb1wogBq zX3MNS73j=oC%rakTD;HH6!o`dewzFJ&#ZlQbG8?AO5{$+ z(>!s%$)b6htd-2(oc6`9r@6)7mAhVauU**w?F|)o{g~$4D{N25M`g;Th4?x)3Gdou zsNt9Te$R4|jo-f=-EO_=sE|m?rKd;EwjN2-|FWd!(%S0tQQ~K&-+#9v>)2zBza3h? z5B1g0>@u6&HFJr=87t-epPsjGwO%yk;La6OzjyjFczmCcvXpD5+FP#@yS}h@aVA@H zr<=z8-f(4`Lv+!}nQz`1$M4v6f4=7QJtew2@e57j%3BsJy5=K3D~XUQ4B{@=kiSM{N3zacHGf6wdnTW z=r?z~G;dFuvCX#dY@WC0?oEN;1H~3ys!f~Rcu8;S+vGG4gEP?vR=kSFnmX$xgceyk z99m&GWvi27$Y)he@inRZi_%18CdbGoZA$Z9^l!6+lW)Y<)xJ*;l-w>ooOFBR$|J(p zvR;OL|DAl7-Qxxar)BDGo|3Cl6;Fjev+mpOxOGnK!80mKSFZDLGBesc9C8Y)Y2@(< zHuO3xQn`51>DY~-WxKW=aY^*{KBC^tvflUnQL}9+eToM+drx5U6i%PbBht2}pnk_g z22N?kgOy=_1eV5^e%-{oD9vcbVkHjN-29b21)q z^h4q4|JOeju8dSvF@^FGq*NyH>NvQo$WgQRK{@cB)!>ouAkzfkKNjl@3p_~>^Cuk zoR?O@h2C7#_$xMD&pY@$xVke)p7rL+;KR*=2Ywt_b_m`Q_gO?l5S**I2VVRP&+iyaO;397!5$j0@8#y;_nz}K2 z+nG8SFSTE1dg8xzp7CWd3Cm17{KVvnlhl^iUsQG`pWl0KN0i%}tFzYZ{-hwyo0g#N zR=&1oLKLTbu4H@M{uuU}r-k+_Bu+n$vwkq&n)%ijxtdFFzLjMfOiW#^UDCxBF?Yk3 z3mKbt*~ZSfm-f0lacAzO->PO)Z0c?nZQPV zQgV4#o+sD;Ri{E`@-9g3zkDm|x0G4IftFYUMX$8|=Yupukge8WBYV^Vaot54)oIiuT?F9~clyEpB83+F6H zjp&rjx0{Mry{VgFTp7Ce{kEG8JKLGnY&e9Me3#fXnQwu6tctd2a8>Zds`FP2B$u_7 zYOMOWENrES{Mzg9QpG*LNtB=5b1x`Ja@*Us#*d-9MY4lm|6OHvuD|Q?lb=dk@2$_= zJ-=PAW#`JcCA^HMm*kk~dc8Z?Y&_w%RQw;oy^4D_My^^d;_-FH<+#-v-3{A3$|v(& zTRL}g&)H3Kmvvqno?RjL`RD96&MwlNcXt`}_)L4BdR}YM6j`w|T?_$V72YPa-cH<6 zDt~=yqD0`bLP@th%ek1}tvs}&P3-<`Z;z-_FPjAu0tGjFhsOF{+-SAc@bDh<%Rg_Q z?&jVZ-S1Our((H(kxF_Nr$W|RffR2RHnFM7ja#mM*(Dh{XOX`BNz2*yCLBETJTB#} zuhedfwUfNpdZlgHy|eJ`^qEi2e4erK^qtI`*}4mZ&v;JyU9;l?}W-(?i zzrK3Qq1Iy;j<|U$N-~>Xn|5q%n%O(fZ$-CxGjC-E8{D{*bL>^_+s%Kq<4?pm*Ibyh zW)+vX{<;(AA6;$wcjEJImX1YRHwK2R^f32pSQl|`*QqzRGCKEu*|Ajd=wj(6wNqQm z!Wb@RJy-l-QPi-iXzP>3=Pv!M5BDmW?ph;fBx2Ik$E>^mQ+&0VTUUUjmdXwp37+hU zeAgF>?%TR{m*C@w-8?@dzx+J)^oApLIjGXihHF zTy3NxvG7f@_qtWH4yL}Zy0$~@%!ehbGPJfZt?6PF)=Iyz;Pk(`H?oms6LOARD$mRP zr?jeKZJlNsm!9X#2}g3Ww&sN16z7~Gv~Xo3<2%;Ljqf&{*M3x7{_@~G%ja$9IGZaQ z&MmCF8h9*J>%w>blmBOv?a6E= z36Y!UJaGy^aPMk{(^|>)Z-&vEe}=_X<=ncVVQZW!d_-jCv>j}#oQq8*I_!?t zZkYMqCKf@C%Tf_=dBV6 z_?c3&>D(1B{S5o-YNy_9YF&I+sA{|OrgLh47dx~4RY?B-Tk%`5po&xWtSjFaPZzK* zTfbt;f{1f7`j)QPn0IbL{Cc_H$-Uq8i_4t<*|@%4EUCLcG-=-&?ch3P(JPAKqBr-f z_ItDH+nWQ=Cw~1~6kNu4^;`e;-I~f$Hx1WHh9#s&1-_9H6W!&OnG;rXV^jZ`Widb6 z^)6VS*ml~haPovTlb6}1%y6qJc`>^Mn4dh=iEuc?7U(;Y7#Eti)^ zuFRgii~ZPJHldY$XAizt+W$SE_uAHr>KA=d&&9QI zP1o8?@rx!W*b{!dJrE$sz4g?N?iowVlY=b7)KYH#2ry}V;Wl}%{KaPHzki?i$l2`q zXBS!Kn9R@R9babPw{>$#XxdW4NwI5uWnaCIU-d6ee1+Plo{Y6iqvfsJo>)y@>oSG= z*p#yxTR#R={C>6NznJn1med!Pr_V4%F7yp{k)853NqL6!lTzD_a)A}IbxYgl{nTvu zq1L4EWO0_LQ1tRef%YetJ)Xbz!?jlexx(L%34G3%ib_rjJbII7*R3fDBHw=${rtZ0 z!#7P1i_5XHy&|(`t8}mSscdC*zkBjWlJ-vB(s%yh72a1x=g#Kx4STy~`o49?RwmfK z4t#BQaiR3R{H6DfTKi9$8I{t$@`PMCm#((Q+E;J1gFM$u3iGvYf1EK_*FowA3;*m_ z)4H^h-kb{h6x5r~vu34R<-9|;b2eWO2;seSV{2Gif54VaqA}O@hFxh-`g1?3=YG{& z3D1R&hix3WUN2Hi^)fYc^|#$u!tg(!Vz>Sb22=JPvG%uJQ$I&;%bfUU-2(4-dQRri z-|klITDLQT`}dzW;t~lvTW^JW@rHgh^uA(B#7c)hFESb06leKldx3 zcazZMqOFpdL9VMNus2;uio2ft#9MpM+qnw^Z#`DmKE3`=&Bk?(H;)MHdNcD&C0Bm? z_VbbdmKV9_>zw@LlE^IDG{xD=Hzh|Pq*J!Et!v{k!QVT6wJEOuZnHP@K5x8}N9?cP zvu3oPOp(5ta-2P(oqg52vKxsH-+qbxofdie_uZzHEb#IVozg#+*|#63&APkV zRxx+XV}) zy1i(n^foOK!<`wMUp{q>ba|uxzGBk!^4LY64hPFUdZ`k>q`SX+!N1+b`y3B%)ZS^n zkzrE!#w$mbxK`~~dmj0tw9xM4w&KHL+gHCjJ>UN0^i5knS=9aAGUdUSeSb|Vw}%+} z-wWK3VgI)tbp_9tKCSL$j0_Bc%nS^C3=9m31qHgrC5a`e;3YgugHHEdHW2wMzW(*8 zvOi~p*aDV@t$o44R_0f8S0c#TD`;xa*ZYObUNwaDvK->}{?^)( zlTG+_&+Mhdqj$MohSOz&Wb%IL-%#R&R!H-tx z?{PQ2^7O}g&9~tj{QqVayXeld7#YWKulW}S7h8*fYO&TF`J&A;%)Yq8HY zg3tDSZLi%vseAk9m-{B|G2;{t-l(x`X~`MQqmi0|E+1!Xb=kFke){Ee(RCGdj^|SO zto0N!MT(>{6Zrc*l*{#Nb9dz1@_ZNWx$U)fxgoRXk4r1`cRuOSRy*7LL0dBHP|de< z|K9W+S#kfj#lb7dv4`c_cTX4mRvEYdKtQ3~jNBjo#bGu5TWx)RFiZ@Pe7#QgShu7} z{ft{ux28p%mKR;V%jfpW^{3bW=sBENvt;e`AN%ZX&-oVLx4Ao$b86Dc&$GVrZ`tD7 z_5Awlo8s@47j*SSdLDeSK!jPp;gV+LlSh*ZKi*yB-+ErZc7|DDU)rJollYR^-o4Yg z?t01ecXO+FZ#l(!uIQVH$d40E+A}538&U&bWHq&U*Y5R3XBKZ3z!An<|`cfCF~;cRZwZmX0D>dxXCiII};5#e$AZP zx+2-r@0B*kDH-K^S`)vmacMDD`I9{T(Z$vj+2CVtUQ9OJY`U9Mg53lcoqNWWG*|fA zJ*|hY*0`)NZaHm!;{D_J0B=SnduH704jG_eOCyMZvI-GhEBYEhkOmOm(zu?1fdOSj zAi7rc!Uv=cgts&ns-PD|=z7tUIY=J}Z)tQ^V_-l@^a0+iY#=EX1{Q|53=9lq8Xz73 D;F+2^ literal 8957 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 X5eIm)vVo*n7+4tIGB7awQUvh;gSTwZ diff --git a/public/assets/back-caret.svg b/public/assets/back-caret.svg new file mode 100644 index 0000000..5352d27 --- /dev/null +++ b/public/assets/back-caret.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/App.js b/src/App.js index d013e70..7ee7f3d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,6 @@ import React from 'react'; import './App.scss'; -import Sidebar from './sidebar/Sidebar'; import Canvas from './Canvas'; -import Popup from './Popup'; -import CreateNew from './CreateNew'; import IntroWindow from './intro/IntroWindow'; class App extends React.Component { @@ -11,23 +8,40 @@ class App extends React.Component { super(props); this.createNewProof = this.createNewProof.bind(this); + this.setupProof = this.setupProof.bind(this); + this.openCanvas = this.openCanvas.bind(this); + this.introWindow = React.createRef(); this.state = { + initialCSS: 'initial', canvasOpen: false, popupOpen: false, proof: { - premises: { - - }, - conclusion: { - - }, - steps: { - - } + premises: [], + conclusion: '', + steps: [] } }; } + setupProof(premises, conclusion, steps) { + this.setState({ + proof: { + premises: premises, + conclusion: conclusion, + steps: steps + }, + initialCSS: 'initial whiteBG' + }); + this.introWindow.current.animateAway(); + setTimeout(this.openCanvas, 1000); + } + + openCanvas() { + this.setState({ + canvasOpen: true + }); + } + createNewProof() { this.setState({ popupOpen: true }) } @@ -37,30 +51,16 @@ class App extends React.Component { return (
-
); } - // return ( - //
- //

Existential Graphs

- //

Using this tool, you can initialize proofs - // in the existential graph schema and then you - // can go through the process of solving them. You - // can save these proofs and look back at them later.

- //
- // - // - // this.setState({ popupOpen: false })}> - // - // - //
- // ); - return (
); + return ( +
+ +
+ ); } } diff --git a/src/App.scss b/src/App.scss index f2f093a..2939f5e 100644 --- a/src/App.scss +++ b/src/App.scss @@ -6,10 +6,15 @@ html, body, .App { overflow: hidden; } +.whiteBG { + background-color: #FFFFFF !important; +} + .initial { background-color: #F0F0F0; height: 100vh; width: 100vw; + transition: background-color 1s; } button { diff --git a/src/Canvas.js b/src/Canvas.js index 442d370..44d56b7 100644 --- a/src/Canvas.js +++ b/src/Canvas.js @@ -1,7 +1,6 @@ import React from 'react'; import InfiniteCanvas from 'infinite-canvas'; import { Stage, Shape, Ticker, Bitmap } from "@createjs/easeljs"; -import html2canvas from 'html2canvas'; class Canvas extends React.Component { constructor(props) { diff --git a/src/CreateNew.js b/src/CreateNew.js deleted file mode 100644 index f2668f3..0000000 --- a/src/CreateNew.js +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import { convertToTeX, convertToEG } from './converters'; -// KATEX -import 'katex/dist/katex.min.css'; -import TeX from '@matejmazur/react-katex'; -import './CreateNew.scss'; - -class CreateNew extends React.Component { - constructor(props) { - super(props); - - this.state = { - premises: [ - 'P&Q' - ], - conclusion: '' - }; - } - - componentDidMount() { - } - - getFormulaCell(formula, i) { - let tex = convertToTeX(formula); - let eg = convertToEG(formula); - let formulaInput = ; - return ( - - - {formulaInput} - - - {tex && } - - - {eg && } - - - ); - } - - render() { - let { premises, conclusion } = this.state; - return ( -
-

Premises

- - {premises.map((formula,i) => this.getFormulaCell(formula,i))} -
-

Conclusion

- - {this.getFormulaCell(conclusion)} -
-
- ); - } -} - -export default CreateNew; \ No newline at end of file diff --git a/src/CreateNew.scss b/src/CreateNew.scss deleted file mode 100644 index 68d558a..0000000 --- a/src/CreateNew.scss +++ /dev/null @@ -1,22 +0,0 @@ -@import 'colors'; - -.formulaTable { - table-layout: fixed; - width: 100%; - border-collapse: collapse; - tr { - border: 1px solid #DDD; - height: 40px; - } - td { - vertical-align: middle; - padding: 5px; - height: 25px; - background-color: #F5F5F5; - input { - height: 25px; - width: 100%; - padding: 15px; - } - } -} \ No newline at end of file diff --git a/src/Draggable.js b/src/Draggable.js deleted file mode 100644 index 8c448b3..0000000 --- a/src/Draggable.js +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import './Canvas.scss'; -import html2canvas from 'html2canvas'; - -const nanoid = require('nanoid') - -class Draggable extends React.Component { - constructor(props) { - super(props); - - this.updateRender = this.updateRender.bind(this); - this.element = React.createRef(); - this.state = { - enabled: false - }; - } - - updateRender() { - html2canvas(this.element.current, {logging: false}).then(bitmap => { - this.bitmap = bitmap.toDataURL(); - }); - } - - componentDidMount() { - this.id = nanoid(); - this.setState({ enabled: true }); - window.addEventListener("dragstart", (e) => { - e.dataTransfer.setData("bm", this.bitmap); - }); - this.updateRender() - } - - render() { - if (this.bitmap && this.element.current) { - this.updateRender(); - } - return ( - - {this.props.children} - - ); - } -} - -export default Draggable; \ No newline at end of file diff --git a/src/Popup.js b/src/Popup.js deleted file mode 100644 index df59b01..0000000 --- a/src/Popup.js +++ /dev/null @@ -1,38 +0,0 @@ -import React from 'react'; -import './Popup.scss'; - -class Popup extends React.Component { - constructor(props) { - super(props); - - this.bg = React.createRef() - this.state = { - }; - } - - componentDidMount() { - let that = this - this.bg.current.addEventListener('click', function(e) { - if (e.target !== this) - return; - that.props.onClose() - }); - } - - render() { - return ( -
-
-
-

{this.props.title}

-
-
- {this.props.children} -
-
-
- ); - } -} - -export default Popup; \ No newline at end of file diff --git a/src/Popup.scss b/src/Popup.scss deleted file mode 100644 index 543dbb9..0000000 --- a/src/Popup.scss +++ /dev/null @@ -1,45 +0,0 @@ -@import 'colors'; - -.popup-bg { - position: absolute; - top: 0; - left: 0; - bottom: 0; - height: 100vh; - width: 100vw; - background-color: rgba(0,0,0,0.6); - backdrop-filter: blur(3px); - overflow: scroll; -} - -.popup { - position: absolute; - margin-left: auto; - margin-right: auto; - left: 0; - right: 0; - width: 50%; - min-width: 500px; - max-width: 1100px; - height: 70%; - min-height: 600px; - top: 50%; - -ms-transform: translateY(-50%); - transform: translateY(-50%); - border-radius: 15px; - overflow: hidden; - background-color: white; - box-shadow: 0 0px 15px rgba(0,0,0,0.18), 0 2px 9px rgba(0,0,0,0.25); - .header { - height: 70px; - background-color: $tan; - h1 { - margin: 0; - line-height: 70px; - padding-left: 20px; - } - } - .body { - margin: 20px; - } -} \ No newline at end of file diff --git a/src/converters.js b/src/converters.js index 8ab364c..7efca71 100644 --- a/src/converters.js +++ b/src/converters.js @@ -1,4 +1,8 @@ -import verifySentence from './verifySentence'; +import verifySentence, { + parenthesisRegex, + binaryRegex, + atomicRegex +} from './verifySentence'; const operators = require('./operators.json') @@ -9,7 +13,7 @@ function escapeRegExp(string) { const binaryOperators = operators.binary let keys = Object.keys(binaryOperators); keys = keys.map(el => escapeRegExp(el)); -const binaryRegex = new RegExp('(?:' + keys.join('|') + ')', 'g') +const binarySymbReplace = new RegExp('(?:' + keys.join('|') + ')', 'g') const unaryOperators = operators.unary @@ -19,7 +23,7 @@ const convertToTeX = (formula) => { formula = formula.replace(/\s/g, '') let symbol // replace all binary operators - while ((symbol = binaryRegex.exec(formula)) !== null) { + while ((symbol = binarySymbReplace.exec(formula)) !== null) { formula = formula.substr(0,symbol['index']) + binaryOperators[symbol[0]] + ' ' + formula.substr(symbol['index'] + symbol[0].length); @@ -36,9 +40,45 @@ const convertToTeX = (formula) => { else return "" } +function countUnary(statement) { + const matchesList = (val) => (op) => op === val; + let c = 0; + for (c in statement.split("")) + if (!Object.keys(unaryOperators).some(matchesList(statement.charAt(c)))) + break; + return c; +} + +const stripUnary = (s, convertStatement) => { + if (convertStatement == null) + convertStatement = true; + let c = countUnary(s); + let statement = s.substr(c) + console.log(statement) + if (convertStatement) statement = convertToEG(statement) + return "(".repeat(c) + statement + ")".repeat(c) +} + const convertToEG = (formula) => { if ((typeof formula === 'string' || formula instanceof String) && verifySentence(formula)) { - + // filter out spaces + formula = formula.replace(/\s/g, '') + let binary = binaryRegex.exec(formula) + let parenthesis = parenthesisRegex.exec(formula) + let unary = atomicRegex.exec(formula) + if (binary) { + let left = convertToEG(binary[1]) + let right = convertToEG(binary[4]) + let symConversion = operators.eg[binary[3]]; + return symConversion.replace(/\$1/g, left).replace(/\$2/g, right) + } else if (parenthesis) { + if (countUnary(formula) != 0) { + return stripUnary(formula) + } + return convertToEG(parenthesis[1]); + } else if (unary) { + return stripUnary(formula, false); + } else return null; } else return null; } diff --git a/src/intro/CreateNew.js b/src/intro/CreateNew.js new file mode 100644 index 0000000..15a10d4 --- /dev/null +++ b/src/intro/CreateNew.js @@ -0,0 +1,134 @@ +import React from 'react'; +import verify from '../verifySentence'; +import { convertToTeX, convertToEG } from '../converters'; +// KATEX +import 'katex/dist/katex.min.css'; +import TeX from '@matejmazur/react-katex'; +import './CreateNew.scss'; + +class CreateNew extends React.Component { + constructor(props) { + super(props); + + this.state = { + premises: [ + '' + ], + conclusion: '' + }; + + this.handleChange.bind(this) + this.removePremise.bind(this) + this.verify = this.verify.bind(this) + this.create = this.create.bind(this) + } + + componentDidMount() { + + } + + handleChange(e, i) { + if (i != null) { + let { premises } = this.state; + premises[i] = e.target.value; + this.setState({ premises: premises }) + } + else this.setState({ conclusion: e.target.value }) + } + + removePremise(index) { + let { premises } = this.state; + premises.splice(index, 1); + this.setState({ premises: premises }) + } + + verify() { + let { premises, conclusion } = this.state; + for (let i in premises) { + if (premises[i] === '' || !premises[i]) + return false; + } + if (conclusion === '' || !conclusion) + return false; + return true; + } + + create() { + console.log("Creating...") + console.log("Verification concluded " + this.verify()) + if (this.verify()) { + let { premises, conclusion } = this.state; + this.props.setupFunc(premises, conclusion) + } + } + + getFormulaCell(formula, i) { + let tex, eg + if (verify(formula)) { + tex = convertToTeX(formula); + eg = convertToEG(formula); + } + let closeBtn = this.removePremise(i)}> + ✕ + ; + let formulaInput = this.handleChange(e,i) } />; + if (i == null) { + formulaInput = this.handleChange(e) } />; + closeBtn = ; + } + if (i === 0) + closeBtn = ; + return ( + + + {formulaInput} + + + {tex && } + + + {eg && } + + { closeBtn } + + ); + } + + render() { + let { premises, conclusion } = this.state; + return ( +
+

Create New

+

File Name

+ + + +
+

Premises

+ + + + + {premises.map((formula,i) => this.getFormulaCell(formula, i))} + + + +
+ Formula + TeX notationEG notation +
this.setState({ premises: premises.concat(['']) }) }> + Add New Premise + +
+

Conclusion

+ + {this.getFormulaCell(conclusion)} +
+
+ ); + } +} + +export default CreateNew; \ No newline at end of file diff --git a/src/intro/CreateNew.scss b/src/intro/CreateNew.scss new file mode 100644 index 0000000..3eefa80 --- /dev/null +++ b/src/intro/CreateNew.scss @@ -0,0 +1,47 @@ +@import '../colors'; + +.formulaTable { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + .plus { + &:before { + content: '+'; + } + padding-right: 5px; + padding-left: 3px; + } + tr { + border: 1px solid #DDD; + height: 40px; + } + td { + vertical-align: middle; + padding: 5px; + height: 25px; + background-color: #FAFAFA; + } + td.interactive { + cursor: pointer; + color: #848484; + &:hover { + color: #545454; + } + } + td.close { + width: 30px; + } +} + +h2 { + padding-top: 15px; +} + +input { + height: 25px; + width: 100%; + padding: 15px; + border-radius: 4px; + border: 1px solid #DDD; + max-width: 375px; +} \ No newline at end of file diff --git a/src/intro/IntroWindow.js b/src/intro/IntroWindow.js index 9450e5b..25739c3 100644 --- a/src/intro/IntroWindow.js +++ b/src/intro/IntroWindow.js @@ -1,5 +1,5 @@ import React from 'react'; -import Fade from 'react-reveal/Fade'; +import CreateNew from './CreateNew'; import './intro.scss'; const IntroContent = () => ( @@ -17,44 +17,60 @@ const IntroContent = () => ( ); -const CreateContent = () => ( -
-

Create New

-
-); - class IntroWindow extends React.Component { constructor(props) { super(props); - + this.createView = React.createRef(); + this.callCreate = this.callCreate.bind(this); + this.animateAway = this.animateAway.bind(this); this.state = { - createShown: false + createShown: false, + floatingWindowCSS: 'floating-window shown' }; } componentDidMount() { } + animateAway() { + this.setState({ floatingWindowCSS: 'floating-window' }) + } + + callCreate() { + this.createView.current.create(); + } + render() { - const { createShown } = this.state; + const { createShown, floatingWindowCSS } = this.state; return ( -
- - -
- - - - -
+
+ {!createShown && } + {createShown && } + {!createShown && ( +
+ + +
+ )} + {createShown && ( +
+ + +
+ )}
); } diff --git a/src/intro/intro.scss b/src/intro/intro.scss index 39ab23d..063bf13 100644 --- a/src/intro/intro.scss +++ b/src/intro/intro.scss @@ -1,9 +1,14 @@ +.floating-window.shown { + top: 50% !important; +} + .floating-window { + transition: top 1s; position: absolute; height: 720px; width: 980px; border-radius: 25px; - top: 50%; + top: -50%; left: 50%; transform: translate(-50%, -50%); background-color: white; @@ -20,6 +25,17 @@ flex-direction: row-reverse; padding: 6px; padding-right: 20px; + .svg { + padding-right: 10px; + } + .back { + position: absolute; + top: 8px; + left: 20px; + background: none; + color: #848484; + box-shadow: none !important; + } button { width: 126px; border-radius: 15px; @@ -39,9 +55,13 @@ } } } + .full-width { + padding: 40px 60px !important; + } .content { padding: 20px; height: 720px; + overflow: auto; p { font-size: 18px; line-height: 25px; @@ -53,8 +73,9 @@ } &:after { content: ""; - display: table; + display: block; clear: both; + height: 80px; } .divider { position: absolute; diff --git a/src/operators.json b/src/operators.json index 0ce2a2b..d34ca1c 100644 --- a/src/operators.json +++ b/src/operators.json @@ -10,5 +10,13 @@ "unary": { "~": "\\lnot", "!": "\\lnot" + }, + "eg": { + "<->": "($1($2))(($1)$2)", + "%": "($1($2))(($1)$2)", + "->": "(($1)$2)", + "$": "(($1)$2)", + "&": "$1$2", + "|": "(($1)($2))" } } \ No newline at end of file diff --git a/src/sidebar/Sidebar.js b/src/sidebar/Sidebar.js deleted file mode 100644 index b9b47c6..0000000 --- a/src/sidebar/Sidebar.js +++ /dev/null @@ -1,56 +0,0 @@ -import React from 'react'; -import './Sidebar.scss'; -import Draggable from '../Draggable'; -import { convertToTeX, verifySentence } from '../converters'; - -// KATEX -import 'katex/dist/katex.min.css'; -import TeX from '@matejmazur/react-katex'; - -class Sidebar extends React.Component { - constructor(props) { - super(props); - - this.formulaInput = React.createRef(); - this.state = { - eq: "", - expandedPreview: false, - isValid: false - }; - } - - componentDidMount() { - this.formulaInput.current.addEventListener('input', (t) => { - let s = convertToTeX(t.target.value) - if (s !== null) { - this.setState({ eq: s, isValid: verifySentence(t.target.value) }); - if (s === "") { - this.setState({ expandedPreview: false }) - } - else { - this.setState({ expandedPreview: true }) - } - } - }); - } - - render() { - return ( -
-

Initialize Proof

-
-

Create Premises

- -
- - - - -
-
-
- ); - } -} - -export default Sidebar; \ No newline at end of file diff --git a/src/sidebar/Sidebar.scss b/src/sidebar/Sidebar.scss deleted file mode 100644 index 16a9176..0000000 --- a/src/sidebar/Sidebar.scss +++ /dev/null @@ -1,110 +0,0 @@ -@import '../colors'; - -.sidepanel { - overflow: hidden; - display: block; - height: calc(100vh - 50px); - width: 300px; - border-radius: 20px; - top: 0; - right: 0; - position: absolute; - background-color: $tan; - margin: 25px; - box-shadow: 0 0px 10px rgba(0,0,0,0.16), 0 2px 3px rgba(0,0,0,0.24); - h1,h2,h3,h4,h5,h6,p { - margin-left: 20px; - margin-right: 20px; - } -} - -.white-bg { - display: block; - padding-top: 1px; - background-color: white; - height: 100%; -} - -.listitem { - border-top: 1px solid #DEDEDE; - padding: 10px 5px 10px 20px; - &:hover { - background-color: $tan; - } - cursor: pointer; -} - -input { - display:inline-block; - width: 300px; - font-size: 1.2em; - caret-color: #e2dbbe; - margin: 0; - padding: 10px; - padding-left: 25px; - border-width: 0; - border-top: #DDD solid 1px; - border-bottom: #DDD solid 1px; - &:focus { - outline: none; - } -} - -.tex-preview { - position: relative; - width: 100%; - div { - overflow: scroll; - position: absolute; - opacity: 1; - top: 0px; - background-color: #F2F2F2; - padding: 10px; - left: 15px; - border-radius: 0px 0px 10px 10px; - transition: 0.3s ease-in-out; - width: calc(100% - 70px); - } - .disabled { - pointer-events: none; - opacity: 0 !important; - } - .add-btn { - display: block; - position: absolute; - right: 15px; - opacity: 1; - width: 30px; - height: 30px; - top: 5px; - background-color: $tan; - transition: 0.4s ease; - border-radius: 4px; - &::before { - display: inline-block; - width: 30px; - text-align: center; - line-height: 30px; - content: "+"; - } - &:hover { - background-color: #c2bb9e; - } - } -} - -.hide { - div { - opacity: 0; - } - span { - opacity: 0 !important; - } -} - -.separator { - display: block; - width: 100%; - height: 1px; - background-color: #F2F2F2; -} \ No newline at end of file diff --git a/src/verifySentence.js b/src/verifySentence.js index 1d2f675..7749dbc 100644 --- a/src/verifySentence.js +++ b/src/verifySentence.js @@ -18,7 +18,7 @@ function arrToRegex(arr) { } const uReg = arrToRegex(Object.keys(unary)); -const regexStr = `^(?:${uReg}*[A-Za-z]+|${uReg}*\\((.*)\\))${arrToRegex(Object.keys(binary))}(?:${uReg}*[A-Za-z]+|${uReg}*\\((.*)\\))$` +const regexStr = `^(${uReg}*[A-Za-z]+|${uReg}*\\((.*)\\))(${arrToRegex(Object.keys(binary))})(${uReg}*[A-Za-z]+|${uReg}*\\((.*)\\))$` let binaryRegex = new RegExp(regexStr) // eslint-disable-line let atomicRegex = new RegExp(`^${uReg}*[A-Za-z]+$`) let parenthesisRegex = new RegExp(`^${uReg}*\\((.*)\\)$`) @@ -31,16 +31,22 @@ function verifyRecursive(sentence) { else { let res = binaryRegex.exec(sentence); if (res == null) return false; - if (res[1] && res[2]) - return verifyRecursive(res[1]) && verifyRecursive(res[2]); - else if (res[1]) - return verifyRecursive(res[1]); + if (res[2] && res[5]) + return verifyRecursive(res[2]) && verifyRecursive(res[5]); else if (res[2]) return verifyRecursive(res[2]); + else if (res[5]) + return verifyRecursive(res[5]); else return true; } } +export { + binaryRegex, + atomicRegex, + parenthesisRegex +} + export default (sentence) => { // filter out spaces sentence = sentence.replace(/\s/g, '') -- 2.51.2