Skip to content

Commit

Permalink
feat(react-native-tex): remove ai animation feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@mym0404
mym0404 committed Sep 24, 2024
1 parent d916819 commit 486fe3a
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 412 deletions.
206 changes: 1 addition & 205 deletions packages/react-native-tex/src/html/LaTexHtml.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,47 +51,10 @@
background-color: white;
width: 100%;
}

#shadow-animation-container {
visibility: hidden;
}

@keyframes fade-in {
to {
opacity: 1;
}
from {
opacity: 0;
}
}

@keyframes cursor-blink {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

.typewriter-cursor {
border-radius: 1px;
width: 1.5px;
height: 14px;
/*border: 1px solid black;*/
background: black;
visibility: hidden;
position: absolute;
}
</style>
</head>
<body>
<div id="container" onmousedown="return false;"></div>
<div id="shadow-animation-container" onmousedown="return false;" aria-hidden="true"></div>
<div class="typewriter-cursor"></div>
<script>
const CONTENT_FRAME_CLASS = "_cms_content-frame";

Expand Down Expand Up @@ -252,13 +215,10 @@
isPhantomBoxClickable,
paddingBottom,
paddingTop,
isAiAnimationEnable
}) => {
const container = document.getElementById("container");
const shadowContainer = document.getElementById("shadow-animation-container");

let delayHandler;

function setPaddingForContentFrame (element) {
if (element instanceof HTMLElement) {
const paddingStyle =
Expand All @@ -279,7 +239,6 @@
container.innerHTML = html;
container.style.visibility = "visible";
shadowContainer.innerHTML = "";
clearTimeout(delayHandler);
setPaddingForContentFrame(container.querySelector("." + CONTENT_FRAME_CLASS));
setTimeout(function() {
relayout();
Expand All @@ -288,176 +247,13 @@
onRenderSuccess();
}

function onAiAnimationRenderFailed () {
clearTimeout(delayHandler);
shadowContainer.innerHTML = "";
/** @type {HTMLDivElement} */
const cursor = document.querySelector(".typewriter-cursor");
if (cursor) {
cursor.style.visibility = "hidden";
}
renderContainer();
}

function renderContainerWithAiAnimation () {
try {
container.innerHTML = "";
const mockedContentFrame = document.createElement("div");
mockedContentFrame.className = CONTENT_FRAME_CLASS;
setPaddingForContentFrame(mockedContentFrame);
container.appendChild(mockedContentFrame);
shadowContainer.innerHTML = html;
const root = shadowContainer.querySelector("." + CONTENT_FRAME_CLASS);
if (root) {
root.style.visibility = "hidden";
/** @type {Node[]} */
const replacedElements = [];
/** @type {HTMLElement[]} */
const animatedElements = [];

for (let node = root.firstChild; node; node = node.nextSibling) {
if (node.nodeType === 3 /* text */ && typeof node.textContent === "string" && node.textContent.trim()) {
for (let i = 0; i < node.textContent.length; i++) {
/** @type {HTMLSpanElement} */
const newSpan = document.createElement("span");
newSpan.textContent = node.textContent.charAt(i);
newSpan.style.visibility = "hidden";
newSpan.className += " splitted-text";
animatedElements.push(newSpan);
replacedElements.push(newSpan);
}
} else if (
node.firstChild &&
node.firstChild.firstChild &&
node.firstChild.firstChild.classList.contains("base")
) {
/** @type {HTMLElement} */
const katexHtml = node.firstChild;
for (let i = 0; i < katexHtml.children.length; i++) {
/** @type {HTMLElement} */
const baseElement = katexHtml.children[i];
if (baseElement.classList.contains("base")) {
baseElement.style.visibility = "hidden";
animatedElements.push(baseElement);
}
}
replacedElements.push(node);
} else {
if (node.nodeType === 1 /* element */) {
node.style.visibility = "hidden";
animatedElements.push(node);
}
replacedElements.push(node);
}
}
root.innerHTML = "";
for (const el of replacedElements) {
root.appendChild(el);
}

// 구성된 root를 contianer에 넣어준다.
mockedContentFrame.appendChild(root);
shadowContainer.innerHTML = "";

/** @type {number[]} */
const durations = [];
for (let i = 0, j = 0, k = 0; i < animatedElements.length; i++) {
const el = animatedElements[i];
if (el.className && el.className.includes("splitted-text")) {
k++;
if (el.textContent === " " && k % 10 === 0 && Math.random() < 0.5) {
durations.push(400 + Math.random() * 200 - 200);
} else {
durations.push(20 + Math.random() * 10 - 10);
}
} else {
j++;
if (j % 20 === 0 && Math.random() < 0.5) {
durations.push(250);
} else {
durations.push(80 + Math.random() * 40 - 40);
}
}
}
const runAnimation = (index) => {
if (animatedElements.length <= index || animatedElements.length !== durations.length) {
// setContainerVisible(false);
// clearTimeout(delayHandler.current);
onAiAnimationRenderFailed();
return;
}
const el = animatedElements[index];

el.style.visibility = "visible";
if (el.tagName === "IMG") {
el.style.animation = ".5s fade-in ease-in";
}

/** @type {HTMLDivElement} */
const cursor = document.querySelector(".typewriter-cursor");
if (cursor && el.tagName === "SPAN") {
cursor.style.visibility = "visible";
const rect = el.getBoundingClientRect();
cursor.style.top = rect.y + (rect.height - 14) / 2 + "px";
cursor.style.left = rect.right + 4 + "px";
}

if (index === durations.length - 1) {
// 애니메이션 종료
clearTimeout(delayHandler);
if (cursor) {
const anim = cursor.animate([{ opacity: 0 }, { opacity: 1 }], {
duration: 500,
iterations: Infinity,
direction: "alternate-reverse",
easing: "ease-in-out"
});
delayHandler = setTimeout(() => {
anim.cancel();
cursor.style.visibility = "hidden";
cursor.style.animation = "";
}, 1500);
}
} else {
// 다음 요소 애니메이션
delayHandler = setTimeout(() => {
runAnimation(index + 1);
}, durations[index]);
}
};
runAnimation(0);
} else {
onAiAnimationRenderFailed();
}
} catch (e) {
onAiAnimationRenderFailed();
}
}

try {
if (isAiAnimationEnable) {
renderContainerWithAiAnimation();
} else {
renderContainer();
}
renderContainer();
} catch (e) {
reportErrorWithSlackWebhook(e);
onRenderFailed();
}
};

function reportErrorWithSlackWebhook (e) {
fetch("https://hooks.slack.com/services/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", {
method: "POST",
headers: {
"Content-type": "application/json"
},
body: JSON.stringify({
text: "*Tex Rendering Issue*\`\`\`" + ("" + e) + "\n\`\`\`"
})
});
}

const MessageTypes = ["render_tex", "set_phantom_boxes_visibility", "scroll_to_top"];

const checkIsValidArgument = (type) => {
Expand Down
Loading

0 comments on commit 486fe3a

Please sign in to comment.