zotica 1.0.0

data/source/zotica/resource/script/fence.js

@@ -0,0 +1,163 @@
+//
+
+
+class FenceModifier extends Modifier {
+
+  modify(element) {
+    let contentElements = this.findChildren(element, "math-cont");
+    let leftElement = this.findChild(element, "math-left");
+    let rightElement = this.findChild(element, "math-right");
+    let centerElement = this.findChild(element, "math-center");
+    let parentElements = [leftElement, rightElement, centerElement];
+    let kinds = this.calcKinds(element);
+    for (let position of [0, 1, 2]) {
+      let parentElement = parentElements[position];
+      let kind = kinds[position];
+      if (position == 2) {
+        position = 0;
+      }
+      if (parentElement && kind != "none") {
+        let stretchLevel = this.calcStretchLevel(contentElements, kind, position);
+        if (stretchLevel != null) {
+          this.modifyStretch(contentElements, parentElement, kind, stretchLevel, position);
+        } else {
+          this.appendStretch(contentElements, parentElement, kind, position);
+        }
+      }
+    }
+  }
+
+  modifyStretch(contentElements, parentElement, kind, stretchLevel, position) {
+    let symbolElement = parentElement.children[0];
+    let shift = this.calcShift(contentElements, stretchLevel);
+    symbolElement.textContent = DATA["fence"][kind][position][stretchLevel];
+    parentElement.style.verticalAlign = "" + shift + "em";
+  }
+
+  appendStretch(contentElements, parentElement, kind, position) {
+    let stretchElement = document.createElement("math-vstretch");
+    let hasStart = !!DATA["fence"][kind][position]["start"];
+    let hasEnd = !!DATA["fence"][kind][position]["end"];
+    let hasMiddle = !!DATA["fence"][kind][position]["middle"];
+    let startElement = null;
+    let endElement = null;
+    let middleElement = null;
+    if (hasStart) {
+      startElement = document.createElement("math-start");
+      startElement.textContent = DATA["fence"][kind][position]["start"];
+      stretchElement.append(startElement);
+    }
+    if (hasMiddle) {
+      middleElement = document.createElement("math-middle");
+      middleElement.textContent = DATA["fence"][kind][position]["middle"];
+      stretchElement.append(middleElement);
+    }
+    if (hasEnd) {
+      endElement = document.createElement("math-end");
+      endElement.textContent = DATA["fence"][kind][position]["end"];
+      stretchElement.append(endElement);
+    }
+    parentElement.removeChild(parentElement.children[0]);
+    parentElement.appendChild(stretchElement);
+    let barSize = (hasMiddle) ? 2 : 1;
+    let barHeight = this.calcBarHeight(contentElements, startElement, endElement, middleElement);
+    let stretchShift = this.calcStretchShift(contentElements);
+    for (let i = 0 ; i < barSize ; i ++) { 
+      let barWrapperElement = document.createElement("math-barwrap");
+      let barElement = document.createElement("math-bar");
+      barElement.textContent = DATA["fence"][kind][position]["bar"];
+      barWrapperElement.style.height = "" + barHeight + "em";
+      barWrapperElement.append(barElement);
+      if (i == 0) {
+        stretchElement.insertBefore(barWrapperElement, stretchElement.children[(hasStart) ? 1 : 0]);
+      } else {
+        stretchElement.insertBefore(barWrapperElement, stretchElement.children[(hasStart) ? 3 : 2]);
+      }
+    }
+    stretchElement.style.verticalAlign = "" + stretchShift + "em";
+  }
+
+  calcKinds(element) {
+    let leftKind = "paren";
+    let rightKind = "paren";
+    let centerKind = "vert";
+    if (element.getAttribute("data-left")) {
+      leftKind = element.getAttribute("data-left");
+    }
+    if (element.getAttribute("data-right")) {
+      rightKind = element.getAttribute("data-right");
+    }
+    if (element.getAttribute("data-center")) {
+      centerKind = element.getAttribute("data-center");
+    }
+    return [leftKind, rightKind, centerKind];
+  }
+
+  calcMaxStretchLevel(kind, position) {
+    let keys = Object.keys(DATA["fence"][kind][position]);
+    let maxStretchLevel = 0;
+    for (let key of keys) {
+      if (key.match(/^\d+$/) && parseInt(key) > maxStretchLevel) {
+        maxStretchLevel = parseInt(key);
+      }
+    }
+    return maxStretchLevel;
+  }
+
+  calcWholeHeight(elements) {
+    let upperHeights = [];
+    let lowerHeights = [];
+    for (let element of elements) {
+      upperHeights.push(this.getUpperHeight(element));
+      lowerHeights.push(this.getLowerHeight(element));
+    }
+    let maxUpperHeight = Math.max(...upperHeights);
+    let maxLowerHeight = Math.max(...lowerHeights);
+    return maxUpperHeight + maxLowerHeight;
+  }
+
+  calcStretchLevel(elements, kind, position) {
+    let heightAbs = this.calcWholeHeight(elements) * 1000;
+    let maxStretchLevel = this.calcMaxStretchLevel(kind, position);
+    let stretchLevel = null;
+    for (let i = 0 ; i <= maxStretchLevel ; i ++) {
+      if (heightAbs <= 1059 + 242 * i) {
+        stretchLevel = i;
+        break;
+      }
+    }
+    if (stretchLevel == null && !DATA["fence"][kind][position]["bar"]) {
+      stretchLevel = maxStretchLevel;
+    }
+    return stretchLevel;
+  }
+
+  calcShift(elements, stretchLevel) {
+    let shift = this.calcWholeHeight(elements) / 2 - Math.max(...elements.map((element) => this.getLowerHeight(element)));
+    if (stretchLevel == 0) {
+      shift = 0;
+    }
+    return shift;
+  }
+
+  calcBarHeight(elements, startElement, endElement, middleElement) {
+    let wholeHeight = this.calcWholeHeight(elements);
+    let startHeight = (startElement) ? this.getHeight(startElement) : 0;
+    let endHeight = (endElement) ? this.getHeight(endElement) : 0;
+    let middleHeight = (middleElement) ? this.getHeight(middleElement) : 0;
+    let height = wholeHeight - startHeight - endHeight - middleHeight;
+    if (middleElement) {
+      height = height / 2;
+    }
+    if (height < 0) {
+      height = 0;
+    }
+    return height;
+  }
+
+  calcStretchShift(elements) {
+    let shift = Math.max(...elements.map((element) => this.getUpperHeight(element))) - 0.95;
+    return shift;
+  }
+
+}

data/source/zotica/resource/script/main.js

@@ -0,0 +1,172 @@
+//
+
+
+class Modifier {
+
+  modify() {
+    console.info("[Zotica] Start");
+    let startDate = new Date();
+    let elements = [];
+    elements.push(...document.querySelectorAll("math-subsup"));
+    elements.push(...document.querySelectorAll("math-underover"));
+    elements.push(...document.querySelectorAll("math-rad.mod"));
+    elements.push(...document.querySelectorAll("math-fence.mod"));
+    elements.push(...document.querySelectorAll("math-diagram"));
+    elements.push(...document.querySelectorAll("math-step"));
+    elements = elements.sort((first, second) => {
+      return this.getDepth(second) - this.getDepth(first);
+    });
+    elements.forEach((element) => {
+      let name = element.localName;
+      if (name == "math-subsup") {
+        SubsuperModifier.execute(element);
+      } else if (name == "math-underover") {
+        UnderoverModifier.execute(element);
+        if (element.classList.contains("wid") && element.classList.contains("mod")) {
+          WideModifier.execute(element);
+        }
+      } else if (name == "math-rad") {
+        RadicalModifier.execute(element);
+      } else if (name == "math-fence") {
+        FenceModifier.execute(element);
+      } else if (name == "math-diagram") {
+        DiagramModifier.execute(element);
+      } else if (name == "math-step") {
+        TreeModifier.execute(element);
+      }
+    });
+    let finishDate = new Date();
+    let elapsedTime = ((finishDate - startDate) / 1000).toFixed(4);
+    console.info("[Zotica] Finish (" + elements.length + " elements, " + elapsedTime + " seconds)");
+  }
+
+  modifyDebug() {
+    document.querySelectorAll("debug").forEach((element) => {
+      let modifier = new Modifier();
+      modifier.renderDebug(element);
+    });
+  }
+
+  getFontSize(element) {
+    let fontSizeString = window.getComputedStyle(element).fontSize;
+    let fontSize = parseFloat(fontSizeString);
+    return fontSize;
+  }
+
+  getWidthPx(element) {
+    let width = element.getBoundingClientRect().width;
+    return width;
+  }
+
+  getWidth(element, fontElement) {
+    let width = this.getWidthPx(element) / this.getFontSize(fontElement || element);
+    return width;
+  }
+
+  getHeightPx(element) {
+    let height = element.getBoundingClientRect().height;
+    return height;
+  }
+
+  getHeight(element, fontElement) {
+    let height = this.getHeightPx(element) / this.getFontSize(fontElement || element);
+    return height;
+  }
+
+  getLowerHeightPx(element) {
+    let bottom = element.getBoundingClientRect().bottom + window.pageYOffset;
+    let locator = document.createElement("math-sys-locator");
+    element.appendChild(locator);
+    locator.style.verticalAlign = "baseline";
+    let baselineBottom = locator.getBoundingClientRect().bottom + window.pageYOffset;
+    let height = bottom - baselineBottom + this.getFontSize(element) * 0.3;
+    element.removeChild(locator);
+    return height;
+  }
+
+  getLowerHeight(element, fontElement) {
+    let height = this.getLowerHeightPx(element) / this.getFontSize(fontElement || element);
+    return height;
+  }
+
+  getUpperHeightPx(element) {
+    let height = this.getHeightPx(element) - this.getLowerHeightPx(element);
+    return height;
+  }
+
+  getUpperHeight(element, fontElement) {
+    let height = this.getHeight(element, fontElement) - this.getLowerHeight(element, fontElement);
+    return height;
+  }
+
+  getOffsetLeft(element, fontElement) {
+    let offset = element.offsetLeft / this.getFontSize(fontElement || element);
+    return offset;
+  }
+
+  getOffsetRight(element, fontElement) {
+    let offset = (element.offsetParent.offsetWidth - element.offsetLeft - element.offsetWidth) / this.getFontSize(fontElement || element);
+    return offset;
+  }
+
+  getDepth(element) {
+    let depth = 0;
+    if (element.zoticaDepth != undefined) {
+      depth = element.zoticaDepth;
+    } else {
+      let parent = element.parentNode;
+      if (parent) {
+        depth = this.getDepth(parent) + 1;
+      } else {
+        depth = 0;
+      }
+    }
+    element.zoticaDepth = depth;
+    return depth;
+  }  
+
+  findChild(element, name) {
+    return Array.from(element.children).find((child) => child.localName == name);
+  }
+
+  findChildren(element, name) {
+    return Array.from(element.children).filter((child) => child.localName == name);
+  }
+
+  renderDebug(element) {
+    let clientRect = element.getBoundingClientRect();
+    let scrollOffset = window.pageYOffset;
+    let lowerHeight = this.getLowerHeightPx(element);
+    let upperHeight = this.getUpperHeightPx(element);
+    let line = document.createElement("div");
+    let upperBox = document.createElement("div");
+    let lowerBox = document.createElement("div");
+    line.style.position = "absolute";
+    line.style.borderTop = "1px #FF000088 solid";
+    line.style.width = "" + clientRect.width + "px";
+    line.style.height = "1px";
+    line.style.top = "" + (clientRect.bottom - lowerHeight + scrollOffset) + "px";
+    line.style.left = "" + clientRect.left + "px";
+    lowerBox.style.position = "absolute";
+    lowerBox.style.backgroundColor = "#FFFF0033";
+    lowerBox.style.width = "" + clientRect.width + "px";
+    lowerBox.style.height = "" + lowerHeight + "px";
+    lowerBox.style.top = "" + (clientRect.top + upperHeight + scrollOffset) + "px";
+    lowerBox.style.left = "" + clientRect.left + "px";
+    upperBox.style.position = "absolute";
+    upperBox.style.backgroundColor = "#FF000033";
+    upperBox.style.width = "" + clientRect.width + "px";
+    upperBox.style.height = "" + upperHeight + "px";
+    upperBox.style.top = "" + (clientRect.top + scrollOffset) + "px";
+    upperBox.style.left = "" + clientRect.left + "px";
+    document.body.appendChild(line);
+    document.body.appendChild(lowerBox);
+    document.body.appendChild(upperBox);
+  }
+
+  static execute(element) {
+    let modifier = new this();
+    modifier.modify(element);
+  }
+
+}

data/source/zotica/resource/script/radical.js

@@ -0,0 +1,43 @@
+//
+
+
+class RadicalModifier extends Modifier {
+
+  modify(element) {
+    let squareElement = this.findChild(element, "math-sqrt");
+    let indexElement = this.findChild(element, "math-index");
+    let surdElement = this.findChild(squareElement, "math-surd");
+    let contentElement = this.findChild(squareElement, "math-cont");
+    let surdSymbolElement = surdElement.children[0];
+    let stretchLevel = this.calcStretchLevel(contentElement);
+    surdSymbolElement.textContent = DATA["radical"][stretchLevel];
+    if (indexElement) {
+      this.modifyIndex(element, indexElement);
+    }
+  }
+
+  modifyIndex(element, indexElement) {
+    let width = this.getWidth(indexElement);
+    let fontRatio = this.getFontSize(element) / this.getFontSize(indexElement);
+    if (width / fontRatio < 0.5) {
+      let margin = 0.5 * fontRatio - width;
+      indexElement.style.marginLeft = "" + margin + "em";
+    }
+  }
+
+  calcStretchLevel(element) {
+    let heightAbs = this.getHeight(element) * 1000;
+    let stretchLevel = null;
+    for (let i = 0 ; i <= 3 ; i ++) {
+      if (heightAbs <= DATA["radical"]["height"][i]) {
+        stretchLevel = i;
+        break;
+      }
+    }
+    if (stretchLevel == null) {
+      stretchLevel = 3;
+    }
+    return stretchLevel;
+  }
+
+}

data/source/zotica/resource/script/subsuper.js

@@ -0,0 +1,90 @@
+//
+
+
+class SubsuperModifier extends Modifier {
+
+  modify(element) {
+    let baseElement = this.findChild(element, "math-base");
+    let subElement = this.findChild(element, "math-sub");
+    let superElement = this.findChild(element, "math-sup");
+    let leftSubElement = this.findChild(element, "math-lsub");
+    let leftSuperElement = this.findChild(element, "math-lsup");
+    this.modifySide(element, baseElement, subElement, superElement, "right");
+    this.modifySide(element, baseElement, leftSubElement, leftSuperElement, "left");
+  }
+
+  modifySide(element, baseElement, subElement, superElement, side) {
+    let bothShifts = this.calcBothShifts(baseElement, subElement, superElement);
+    let subShift = bothShifts.sub;
+    let superShift = bothShifts.super;
+    let subMargin = 0;
+    let superMargin = (subElement) ? -this.getWidth(subElement) : 0;
+    let subWidth = (subElement) ? this.getWidth(subElement) : 0;
+    let superWidth = (superElement) ? this.getWidth(superElement) : 0;
+    if (side == "right" && element.classList.contains("int")) {
+      let slope = (element.classList.contains("inl")) ? 0.3 : 0.6
+      subWidth -= slope;
+      subMargin -= slope;
+      if (subElement) {
+        superMargin += slope;
+      }
+    }
+    if (subElement) {
+      subElement.style.verticalAlign = "" + subShift + "em";
+      subElement.style.marginLeft = "" + subMargin + "em";
+    }
+    if (superElement) {
+      superElement.style.verticalAlign = "" + superShift + "em";
+      superElement.style.marginLeft = "" + superMargin + "em";
+    }
+    if (side == "right" && superElement && subWidth > superWidth) {
+      superElement.style.width = "" + subWidth + "em";
+    }
+    if (side == "left" && subElement && superWidth > subWidth) {
+      subElement.style.width = "" + superWidth + "em";
+    }
+  }
+
+  calcBothShifts(baseElement, subElement, superElement) {
+    let subShift = (subElement) ? this.calcSubShift(baseElement, subElement) : 0;
+    let superShift = (superElement) ? this.calcSuperShift(baseElement, superElement) : 0;
+    if (subElement && superElement) {
+      let subHeight = this.getHeight(subElement);
+      let gap = -subShift + superShift - subHeight;
+      if (gap < 0.2) {
+        subShift -= (0.2 - gap) / 2;
+        superShift += (0.2 - gap) / 2;
+      }
+    }
+    return {sub: subShift, super: superShift};
+  }
+
+  calcSubShift(baseElement, subElement) {
+    let fontRatio = this.getFontSize(baseElement) / this.getFontSize(subElement);
+    let height = this.getLowerHeight(baseElement);
+    if (height < 0.4875) {
+      height = 0.4875;
+    }
+    let shiftConst = -0.25;
+    if (baseElement.parentNode.classList.contains("int") && !baseElement.parentNode.classList.contains("inl")) {
+      shiftConst = -0.15;
+    }
+    let shift = (height + shiftConst) * fontRatio;
+    return -shift;
+  }
+
+  calcSuperShift(baseElement, superElement) {
+    let fontRatio = this.getFontSize(baseElement) / this.getFontSize(superElement);
+    let height = this.getUpperHeight(baseElement);
+    if (height < 0.5125) {
+      height = 0.5125;
+    }
+    let shiftConst = -0.2;
+    if (baseElement.parentNode.classList.contains("int") && !baseElement.parentNode.classList.contains("inl")) {
+      shiftConst = -0.1;
+    }
+    let shift = (height + shiftConst) * fontRatio;
+    return shift;
+  }
+
+}