my-dataentry
Version:
通用详情页功能组件
1,710 lines (1,643 loc) • 172 kB
JavaScript
"use strict";
import t_xml from "./t_xml";
import { Color } from "../colz";
import * as JSZip from 'jszip'
const zip = new JSZip.default ? new JSZip.default() : new JSZip()
function base64ArrayBuffer(arrayBuff) {
const buff = new Uint8Array(arrayBuff);
let text = "";
for (let i = 0; i < buff.byteLength; i++) {
text += String.fromCharCode(buff[i]);
}
return btoa(text);
}
function extractFileExtension(filename) {
const dot = filename.lastIndexOf(".");
if (dot === 0 || dot === -1) return "";
return filename.substr(filename.lastIndexOf(".") + 1);
}
/*
function escapeHtml (text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
'\'': '''
}
return text.replace(/[&<>"']/g, m => map[m])
}
*/
export default function processPptx(setOnMessage = () => {}, postMessage) {
const charts = [];
let chartID = 0;
let themeContent = null;
let slideLayoutClrOvride = "";
const styleTable = {};
let tableStyles;
// 设置postMessage方法
setOnMessage(async (e) => {
switch (e.type) {
case "processPPTX": {
try {
await processPPTX(e.data);
} catch (e) {
console.error("AN ERROR HAPPENED DURING processPPTX", e);
postMessage({
type: "ERROR",
data: e.toString(),
});
}
break;
}
default:
}
});
async function processPPTX(data) {
const zip = await JSZip.loadAsync(data);
const dateBefore = new Date();
if (zip.file("docProps/thumbnail.jpeg") !== null) {
const pptxThumbImg = await zip
.file("docProps/thumbnail.jpeg")
.async("base64");
postMessage({
type: "pptx-thumb",
data: pptxThumbImg,
});
}
const filesInfo = await getContentTypes(zip);
const slideSize = await getSlideSize(zip);
themeContent = await loadTheme(zip);
tableStyles = await readXmlFile(zip, "ppt/tableStyles.xml");
postMessage({
type: "slideSize",
data: slideSize,
});
const numOfSlides = filesInfo["slides"].length;
for (let i = 0; i < numOfSlides; i++) {
const filename = filesInfo["slides"][i];
const slideHtml = await processSingleSlide(zip, filename, i, slideSize);
postMessage({
type: "slide",
data: slideHtml,
});
postMessage({
type: "progress-update",
data: ((i + 1) * 100) / numOfSlides,
});
}
postMessage({
type: "globalCSS",
data: genGlobalCSS(),
});
const dateAfter = new Date();
postMessage({
type: "Done",
data: {
time: dateAfter - dateBefore,
charts,
},
});
}
async function readXmlFile(zip, filename) {
return t_xml(await zip.file(filename).async("text"));
}
async function getContentTypes(zip) {
const ContentTypesJson = await readXmlFile(zip, "[Content_Types].xml");
// console.log('CONTENT TYPES JSON', ContentTypesJson)
const subObj = ContentTypesJson["Types"]["Override"];
const slidesLocArray = [];
const slideLayoutsLocArray = [];
for (let i = 0; i < subObj.length; i++) {
switch (subObj[i]["attrs"]["ContentType"]) {
case "application/vnd.openxmlformats-officedocument.presentationml.slide+xml":
slidesLocArray.push(subObj[i]["attrs"]["PartName"].substr(1));
break;
case "application/vnd.openxmlformats-officedocument.presentationml.slideLayout+xml":
slideLayoutsLocArray.push(subObj[i]["attrs"]["PartName"].substr(1));
break;
default:
}
}
return {
slides: slidesLocArray,
slideLayouts: slideLayoutsLocArray,
};
}
async function getSlideSize(zip) {
// Pixel = EMUs * Resolution / 914400; (Resolution = 96)
const content = await readXmlFile(zip, "ppt/presentation.xml");
const sldSzAttrs = content["p:presentation"]["p:sldSz"]["attrs"];
return {
width: (parseInt(sldSzAttrs["cx"]) * 96) / 914400,
height: (parseInt(sldSzAttrs["cy"]) * 96) / 914400,
};
}
async function loadTheme(zip) {
const preResContent = await readXmlFile(
zip,
"ppt/_rels/presentation.xml.rels"
);
const relationshipArray = preResContent["Relationships"]["Relationship"];
let themeURI;
if (relationshipArray.constructor === Array) {
for (let i = 0; i < relationshipArray.length; i++) {
if (
relationshipArray[i]["attrs"]["Type"] ===
"http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme"
) {
themeURI = relationshipArray[i]["attrs"]["Target"];
break;
}
}
} else if (
relationshipArray["attrs"]["Type"] ===
"http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme"
) {
themeURI = relationshipArray["attrs"]["Target"];
}
if (themeURI === undefined) {
throw Error("Can't open theme file.");
}
return readXmlFile(zip, "ppt/" + themeURI);
}
async function processSingleSlide(zip, sldFileName, index, slideSize) {
postMessage({
type: "INFO",
data: "Processing slide" + (index + 1),
});
// =====< Step 1 >=====
// Read relationship filename of the slide (Get slideLayoutXX.xml)
// @sldFileName: ppt/slides/slide1.xml
// @resName: ppt/slides/_rels/slide1.xml.rels
const resName =
sldFileName.replace("slides/slide", "slides/_rels/slide") + ".rels";
const resContent = await readXmlFile(zip, resName);
let RelationshipArray = resContent["Relationships"]["Relationship"];
let layoutFilename = "";
const slideResObj = {};
if (RelationshipArray.constructor === Array) {
for (let i = 0; i < RelationshipArray.length; i++) {
switch (RelationshipArray[i]["attrs"]["Type"]) {
case "http://schemas.openxmlformats.org/officeDocument/2006/relationships/slideLayout":
layoutFilename = RelationshipArray[i]["attrs"]["Target"].replace(
"../",
"ppt/"
);
break;
case "http://schemas.openxmlformats.org/officeDocument/2006/relationships/notesSlide":
case "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image":
case "http://schemas.openxmlformats.org/officeDocument/2006/relationships/chart":
case "http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink":
default: {
slideResObj[RelationshipArray[i]["attrs"]["Id"]] = {
type: RelationshipArray[i]["attrs"]["Type"].replace(
"http://schemas.openxmlformats.org/officeDocument/2006/relationships/",
""
),
target: RelationshipArray[i]["attrs"]["Target"].replace(
"../",
"ppt/"
),
};
}
}
}
} else {
layoutFilename = RelationshipArray["attrs"]["Target"].replace(
"../",
"ppt/"
);
}
// console.log(slideResObj);
// Open slideLayoutXX.xml
const slideLayoutContent = await readXmlFile(zip, layoutFilename);
const slideLayoutTables = indexNodes(slideLayoutContent);
const sldLayoutClrOvr =
slideLayoutContent["p:sldLayout"]["p:clrMapOvr"]["a:overrideClrMapping"];
// console.log(slideLayoutClrOvride);
if (sldLayoutClrOvr !== undefined) {
slideLayoutClrOvride = sldLayoutClrOvr["attrs"];
}
// =====< Step 2 >=====
// Read slide master filename of the slidelayout (Get slideMasterXX.xml)
// @resName: ppt/slideLayouts/slideLayout1.xml
// @masterName: ppt/slideLayouts/_rels/slideLayout1.xml.rels
const slideLayoutResFilename =
layoutFilename.replace(
"slideLayouts/slideLayout",
"slideLayouts/_rels/slideLayout"
) + ".rels";
const slideLayoutResContent = await readXmlFile(
zip,
slideLayoutResFilename
);
RelationshipArray = slideLayoutResContent["Relationships"]["Relationship"];
let masterFilename = "";
const layoutResObj = {};
if (RelationshipArray.constructor === Array) {
for (let i = 0; i < RelationshipArray.length; i++) {
switch (RelationshipArray[i]["attrs"]["Type"]) {
case "http://schemas.openxmlformats.org/officeDocument/2006/relationships/slideMaster":
masterFilename = RelationshipArray[i]["attrs"]["Target"].replace(
"../",
"ppt/"
);
break;
default:
layoutResObj[RelationshipArray[i]["attrs"]["Id"]] = {
type: RelationshipArray[i]["attrs"]["Type"].replace(
"http://schemas.openxmlformats.org/officeDocument/2006/relationships/",
""
),
target: RelationshipArray[i]["attrs"]["Target"].replace(
"../",
"ppt/"
),
};
}
}
} else {
masterFilename = RelationshipArray["attrs"]["Target"].replace(
"../",
"ppt/"
);
}
// Open slideMasterXX.xml
const slideMasterContent = await readXmlFile(zip, masterFilename);
const slideMasterTextStyles = getTextByPathList(slideMasterContent, [
"p:sldMaster",
"p:txStyles",
]);
const slideMasterTables = indexNodes(slideMasterContent);
// ///////////////Amir/////////////
// Open slideMasterXX.xml.rels
const slideMasterResFilename =
masterFilename.replace(
"slideMasters/slideMaster",
"slideMasters/_rels/slideMaster"
) + ".rels";
const slideMasterResContent = await readXmlFile(
zip,
slideMasterResFilename
);
RelationshipArray = slideMasterResContent["Relationships"]["Relationship"];
let themeFilename = "";
const masterResObj = {};
if (RelationshipArray.constructor === Array) {
for (let i = 0; i < RelationshipArray.length; i++) {
switch (RelationshipArray[i]["attrs"]["Type"]) {
case "http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme":
themeFilename = RelationshipArray[i]["attrs"]["Target"].replace(
"../",
"ppt/"
);
break;
default:
masterResObj[RelationshipArray[i]["attrs"]["Id"]] = {
type: RelationshipArray[i]["attrs"]["Type"].replace(
"http://schemas.openxmlformats.org/officeDocument/2006/relationships/",
""
),
target: RelationshipArray[i]["attrs"]["Target"].replace(
"../",
"ppt/"
),
};
}
}
} else {
themeFilename = RelationshipArray["attrs"]["Target"].replace(
"../",
"ppt/"
);
}
// console.log(themeFilename)
// Load Theme file
if (themeFilename !== undefined) {
themeContent = await readXmlFile(zip, themeFilename);
}
// =====< Step 3 >=====
const slideContent = await readXmlFile(zip, sldFileName);
const nodes = slideContent["p:sld"]["p:cSld"]["p:spTree"];
const warpObj = {
zip: zip,
slideLayoutTables: slideLayoutTables,
slideMasterTables: slideMasterTables,
slideResObj: slideResObj,
slideMasterTextStyles: slideMasterTextStyles,
layoutResObj: layoutResObj,
masterResObj: masterResObj,
};
const bgColor = await getSlideBackgroundFill(
slideContent,
slideLayoutContent,
slideMasterContent,
warpObj
);
let result =
"<section style='width:" +
slideSize.width +
"px; height:" +
slideSize.height +
"px;" +
bgColor +
"'>";
for (let nodeKey in nodes) {
if (nodes[nodeKey].constructor === Array) {
for (let i = 0; i < nodes[nodeKey].length; i++) {
result += await processNodesInSlide(
nodeKey,
nodes[nodeKey][i],
warpObj
);
}
} else {
result += await processNodesInSlide(nodeKey, nodes[nodeKey], warpObj);
}
}
return result + "</section>";
}
function indexNodes(content) {
const keys = Object.keys(content);
const spTreeNode = content[keys[0]]["p:cSld"]["p:spTree"];
const idTable = {};
const idxTable = {};
const typeTable = {};
for (let key in spTreeNode) {
if (key === "p:nvGrpSpPr" || key === "p:grpSpPr") {
continue;
}
const targetNode = spTreeNode[key];
if (targetNode.constructor === Array) {
for (let i = 0; i < targetNode.length; i++) {
const nvSpPrNode = targetNode[i]["p:nvSpPr"];
const id = getTextByPathList(nvSpPrNode, ["p:cNvPr", "attrs", "id"]);
const idx = getTextByPathList(nvSpPrNode, [
"p:nvPr",
"p:ph",
"attrs",
"idx",
]);
const type = getTextByPathList(nvSpPrNode, [
"p:nvPr",
"p:ph",
"attrs",
"type",
]);
if (id !== undefined) {
idTable[id] = targetNode[i];
}
if (idx !== undefined) {
idxTable[idx] = targetNode[i];
}
if (type !== undefined) {
typeTable[type] = targetNode[i];
}
}
} else {
const nvSpPrNode = targetNode["p:nvSpPr"];
const id = getTextByPathList(nvSpPrNode, ["p:cNvPr", "attrs", "id"]);
const idx = getTextByPathList(nvSpPrNode, [
"p:nvPr",
"p:ph",
"attrs",
"idx",
]);
const type = getTextByPathList(nvSpPrNode, [
"p:nvPr",
"p:ph",
"attrs",
"type",
]);
if (id !== undefined) {
idTable[id] = targetNode;
}
if (idx !== undefined) {
idxTable[idx] = targetNode;
}
if (type !== undefined) {
typeTable[type] = targetNode;
}
}
}
return { idTable: idTable, idxTable: idxTable, typeTable: typeTable };
}
async function processNodesInSlide(nodeKey, nodeValue, warpObj) {
let result = "";
switch (nodeKey) {
case "p:sp": // Shape, Text
result = await processSpNode(nodeValue, warpObj);
break;
case "p:cxnSp": // Shape, Text (with connection)
result = await processCxnSpNode(nodeValue, warpObj);
break;
case "p:pic": // Picture
result = await processPicNode(nodeValue, warpObj);
break;
case "p:graphicFrame": // Chart, Diagram, Table
result = await processGraphicFrameNode(nodeValue, warpObj);
break;
case "p:grpSp": // 群組
result = await processGroupSpNode(nodeValue, warpObj);
break;
default:
}
return result;
}
async function processGroupSpNode(node, warpObj) {
const factor = 96 / 914400;
const xfrmNode = node["p:grpSpPr"]["a:xfrm"];
const x = parseInt(xfrmNode["a:off"]["attrs"]["x"]) * factor;
const y = parseInt(xfrmNode["a:off"]["attrs"]["y"]) * factor;
const chx = parseInt(xfrmNode["a:chOff"]["attrs"]["x"]) * factor;
const chy = parseInt(xfrmNode["a:chOff"]["attrs"]["y"]) * factor;
const cx = parseInt(xfrmNode["a:ext"]["attrs"]["cx"]) * factor;
const cy = parseInt(xfrmNode["a:ext"]["attrs"]["cy"]) * factor;
const chcx = parseInt(xfrmNode["a:chExt"]["attrs"]["cx"]) * factor;
const chcy = parseInt(xfrmNode["a:chExt"]["attrs"]["cy"]) * factor;
const order = node["attrs"]["order"];
let result =
"<div class='block group' style='z-index: " +
order +
"; top: " +
(y - chy) +
"px; left: " +
(x - chx) +
"px; width: " +
(cx - chcx) +
"px; height: " +
(cy - chcy) +
"px;'>";
// Procsee all child nodes
for (let nodeKey in node) {
if (node[nodeKey].constructor === Array) {
for (let i = 0; i < node[nodeKey].length; i++) {
result += await processNodesInSlide(
nodeKey,
node[nodeKey][i],
warpObj
);
}
} else {
result += await processNodesInSlide(nodeKey, node[nodeKey], warpObj);
}
}
result += "</div>";
return result;
}
async function processSpNode(node, warpObj) {
/*
* 958 <xsd:complexType name="CT_GvmlShape">
* 959 <xsd:sequence>
* 960 <xsd:element name="nvSpPr" type="CT_GvmlShapeNonVisual" minOccurs="1" maxOccurs="1"/>
* 961 <xsd:element name="spPr" type="CT_ShapeProperties" minOccurs="1" maxOccurs="1"/>
* 962 <xsd:element name="txSp" type="CT_GvmlTextShape" minOccurs="0" maxOccurs="1"/>
* 963 <xsd:element name="style" type="CT_ShapeStyle" minOccurs="0" maxOccurs="1"/>
* 964 <xsd:element name="extLst" type="CT_OfficeArtExtensionList" minOccurs="0" maxOccurs="1"/>
* 965 </xsd:sequence>
* 966 </xsd:complexType>
*/
const id = node["p:nvSpPr"]["p:cNvPr"]["attrs"]["id"];
const name = node["p:nvSpPr"]["p:cNvPr"]["attrs"]["name"];
const idx =
node["p:nvSpPr"]["p:nvPr"]["p:ph"] === undefined
? undefined
: node["p:nvSpPr"]["p:nvPr"]["p:ph"]["attrs"]["idx"];
let type =
node["p:nvSpPr"]["p:nvPr"]["p:ph"] === undefined
? undefined
: node["p:nvSpPr"]["p:nvPr"]["p:ph"]["attrs"]["type"];
const order = node["attrs"]["order"];
let slideLayoutSpNode;
let slideMasterSpNode;
if (type !== undefined) {
if (idx !== undefined) {
slideLayoutSpNode = warpObj["slideLayoutTables"]["typeTable"][type];
slideMasterSpNode = warpObj["slideMasterTables"]["typeTable"][type];
} else {
slideLayoutSpNode = warpObj["slideLayoutTables"]["typeTable"][type];
slideMasterSpNode = warpObj["slideMasterTables"]["typeTable"][type];
}
} else {
if (idx !== undefined) {
slideLayoutSpNode = warpObj["slideLayoutTables"]["idxTable"][idx];
slideMasterSpNode = warpObj["slideMasterTables"]["idxTable"][idx];
} else {
// Nothing
}
}
if (type === undefined) {
type = getTextByPathList(slideLayoutSpNode, [
"p:nvSpPr",
"p:nvPr",
"p:ph",
"attrs",
"type",
]);
if (type === undefined) {
type = getTextByPathList(slideMasterSpNode, [
"p:nvSpPr",
"p:nvPr",
"p:ph",
"attrs",
"type",
]);
}
}
return await genShape(
node,
slideLayoutSpNode,
slideMasterSpNode,
id,
name,
idx,
type,
order,
warpObj
);
}
async function processCxnSpNode(node, warpObj) {
const id = node["p:nvCxnSpPr"]["p:cNvPr"]["attrs"]["id"];
const name = node["p:nvCxnSpPr"]["p:cNvPr"]["attrs"]["name"];
// const idx = (node["p:nvCxnSpPr"]["p:nvPr"]["p:ph"] === undefined) ? undefined : node["p:nvSpPr"]["p:nvPr"]["p:ph"]["attrs"]["idx"];
// const type = (node["p:nvCxnSpPr"]["p:nvPr"]["p:ph"] === undefined) ? undefined : node["p:nvSpPr"]["p:nvPr"]["p:ph"]["attrs"]["type"];
// <p:cNvCxnSpPr>(<p:cNvCxnSpPr>, <a:endCxn>)
const order = node["attrs"]["order"];
return await genShape(
node,
undefined,
undefined,
id,
name,
undefined,
undefined,
order,
warpObj
);
}
async function genShape(
node,
slideLayoutSpNode,
slideMasterSpNode,
id,
name,
idx,
type,
order,
warpObj
) {
const xfrmList = ["p:spPr", "a:xfrm"];
const slideXfrmNode = getTextByPathList(node, xfrmList);
const slideLayoutXfrmNode = getTextByPathList(slideLayoutSpNode, xfrmList);
const slideMasterXfrmNode = getTextByPathList(slideMasterSpNode, xfrmList);
let result = "";
const shpId = getTextByPathList(node, ["attrs", "order"]);
// console.log("shpId: ",shpId)
const shapType = getTextByPathList(node, [
"p:spPr",
"a:prstGeom",
"attrs",
"prst",
]);
// custGeom - Amir
const custShapType = getTextByPathList(node, ["p:spPr", "a:custGeom"]);
let isFlipV = false;
if (
getTextByPathList(slideXfrmNode, ["attrs", "flipV"]) === "1" ||
getTextByPathList(slideXfrmNode, ["attrs", "flipH"]) === "1"
) {
isFlipV = true;
}
// ///////////////////////Amir////////////////////////
// rotate
const rotate = angleToDegrees(
getTextByPathList(slideXfrmNode, ["attrs", "rot"])
);
// console.log("rotate: "+rotate);
// ////////////////////////////////////////////////
let w;
let h;
let border;
let headEndNodeAttrs;
let tailEndNodeAttrs;
let fillColor;
let grndFillFlg = false;
let imgFillFlg = false;
if (shapType !== undefined || custShapType !== undefined) {
// const off = getTextByPathList(slideXfrmNode, ['a:off', 'attrs'])
// const x = parseInt(off['x']) * 96 / 914400
// const y = parseInt(off['y']) * 96 / 914400
const ext = getTextByPathList(slideXfrmNode, ["a:ext", "attrs"]);
w = (parseInt(ext["cx"]) * 96) / 914400;
h = (parseInt(ext["cy"]) * 96) / 914400;
result +=
"<svg class='drawing' _id='" +
id +
"' _idx='" +
idx +
"' _type='" +
type +
"' Name='" +
name +
"' style='" +
getPosition(slideXfrmNode, undefined, undefined) +
getSize(slideXfrmNode, undefined, undefined) +
" z-index: " +
order +
";" +
"transform: rotate(" +
rotate +
"deg);" +
"'>";
result += "<defs>";
// Fill Color
fillColor = await getShapeFill(node, true, warpObj);
const clrFillType = getFillType(getTextByPathList(node, ["p:spPr"]));
// ///////////////////////////////////////
if (clrFillType === "GRADIENT_FILL") {
grndFillFlg = true;
const colorArray = fillColor.color;
const angl = fillColor.rot;
const svgGrdnt = getSvgGradient(w, h, angl, colorArray, shpId);
// fill="url(#linGrd)"
result += svgGrdnt;
} else if (clrFillType === "PIC_FILL") {
imgFillFlg = true;
const svgBgImg = getSvgImagePattern(fillColor, shpId);
// fill="url(#imgPtrn)"
// console.log(svgBgImg)
result += svgBgImg;
}
// Border Color
border = getBorder(node, true);
headEndNodeAttrs = getTextByPathList(node, [
"p:spPr",
"a:ln",
"a:headEnd",
"attrs",
]);
tailEndNodeAttrs = getTextByPathList(node, [
"p:spPr",
"a:ln",
"a:tailEnd",
"attrs",
]);
// type: none, triangle, stealth, diamond, oval, arrow
if (
(headEndNodeAttrs !== undefined &&
(headEndNodeAttrs["type"] === "triangle" ||
headEndNodeAttrs["type"] === "arrow")) ||
(tailEndNodeAttrs !== undefined &&
(tailEndNodeAttrs["type"] === "triangle" ||
tailEndNodeAttrs["type"] === "arrow"))
) {
const triangleMarker =
"<marker id='markerTriangle_" +
shpId +
"' viewBox='0 0 10 10' refX='1' refY='5' markerWidth='5' markerHeight='5' stroke='" +
border.color +
"' fill='" +
border.color +
"' orient='auto-start-reverse' markerUnits='strokeWidth'><path d='M 0 0 L 10 5 L 0 10 z' /></marker>";
result += triangleMarker;
}
result += "</defs>";
}
if (shapType !== undefined && custShapType === undefined) {
switch (shapType) {
case "accentBorderCallout1":
case "accentBorderCallout2":
case "accentBorderCallout3":
case "accentCallout1":
case "accentCallout2":
case "accentCallout3":
case "actionButtonBackPrevious":
case "actionButtonBeginning":
case "actionButtonBlank":
case "actionButtonDocument":
case "actionButtonEnd":
case "actionButtonForwardNext":
case "actionButtonHelp":
case "actionButtonHome":
case "actionButtonInformation":
case "actionButtonMovie":
case "actionButtonReturn":
case "actionButtonSound":
case "arc":
case "bevel":
case "blockArc":
case "borderCallout1":
case "borderCallout2":
case "borderCallout3":
case "bracePair":
case "bracketPair":
case "callout1":
case "callout2":
case "callout3":
case "can":
case "chartPlus":
case "chartStar":
case "chartX":
case "chevron":
case "chord":
case "cloud":
case "cloudCallout":
case "corner":
case "cornerTabs":
case "cube":
case "diagStripe":
case "donut":
case "doubleWave":
case "downArrowCallout":
case "ellipseRibbon":
case "ellipseRibbon2":
case "flowChartAlternateProcess":
case "flowChartCollate":
case "flowChartConnector":
case "flowChartDecision":
case "flowChartDelay":
case "flowChartDisplay":
case "flowChartDocument":
case "flowChartExtract":
case "flowChartInputOutput":
case "flowChartInternalStorage":
case "flowChartMagneticDisk":
case "flowChartMagneticDrum":
case "flowChartMagneticTape":
case "flowChartManualInput":
case "flowChartManualOperation":
case "flowChartMerge":
case "flowChartMultidocument":
case "flowChartOfflineStorage":
case "flowChartOffpageConnector":
case "flowChartOnlineStorage":
case "flowChartOr":
case "flowChartPredefinedProcess":
case "flowChartPreparation":
case "flowChartProcess":
case "flowChartPunchedCard":
case "flowChartPunchedTape":
case "flowChartSort":
case "flowChartSummingJunction":
case "flowChartTerminator":
case "folderCorner":
case "frame":
case "funnel":
case "gear6":
case "gear9":
case "halfFrame":
case "heart":
case "homePlate":
case "horizontalScroll":
case "irregularSeal1":
case "irregularSeal2":
case "leftArrowCallout":
case "leftBrace":
case "leftBracket":
case "leftRightArrowCallout":
case "leftRightRibbon":
case "lightningBolt":
case "lineInv":
case "mathDivide":
case "mathEqual":
case "mathMinus":
case "mathMultiply":
case "mathNotEqual":
case "mathPlus":
case "moon":
case "nonIsoscelesTrapezoid":
case "noSmoking":
case "pie":
case "pieWedge":
case "plaque":
case "plaqueTabs":
case "quadArrowCallout":
case "rect":
case "ribbon":
case "ribbon2":
case "rightArrowCallout":
case "rightBrace":
case "rightBracket":
case "round1Rect":
case "round2DiagRect":
case "round2SameRect":
case "smileyFace":
case "snip1Rect":
case "snip2DiagRect":
case "snip2SameRect":
case "snipRoundRect":
case "squareTabs":
case "star10":
case "star12":
case "star16":
case "star24":
case "star32":
case "star4":
case "star5":
case "star6":
case "star7":
case "star8":
case "sun":
case "teardrop":
case "upArrowCallout":
case "upDownArrowCallout":
case "verticalScroll":
case "wave":
case "wedgeEllipseCallout":
case "wedgeRectCallout":
case "wedgeRoundRectCallout": {
result +=
"<rect x='0' y='0' width='" +
w +
"' height='" +
h +
"' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "ellipse": {
result +=
"<ellipse cx='" +
w / 2 +
"' cy='" +
h / 2 +
"' rx='" +
w / 2 +
"' ry='" +
h / 2 +
"' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "roundRect": {
result +=
"<rect x='0' y='0' width='" +
w +
"' height='" +
h +
"' rx='7' ry='7' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "bentConnector2": {
// 直角 (path)
let d;
if (isFlipV) {
d = "M 0 " + w + " L " + h + " " + w + " L " + h + " 0";
} else {
d = "M " + w + " 0 L " + w + " " + h + " L 0 " + h;
}
result +=
"<path d='" +
d +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' fill='none' ";
if (
headEndNodeAttrs !== undefined &&
(headEndNodeAttrs["type"] === "triangle" ||
headEndNodeAttrs["type"] === "arrow")
) {
result += "marker-start='url(#markerTriangle_" + shpId + ")' ";
}
if (
tailEndNodeAttrs !== undefined &&
(tailEndNodeAttrs["type"] === "triangle" ||
tailEndNodeAttrs["type"] === "arrow")
) {
result += "marker-end='url(#markerTriangle_" + shpId + ")' ";
}
result += "/>";
break;
}
case "rtTriangle": {
result +=
" <polygon points='0 0,0 " +
h +
"," +
w +
" " +
h +
"' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "triangle": {
const shapAdjst = getTextByPathList(node, [
"p:spPr",
"a:prstGeom",
"a:avLst",
"a:gd",
"attrs",
"fmla",
]);
let shapAdjstVal = 0.5;
if (shapAdjst !== undefined) {
shapAdjstVal = (parseInt(shapAdjst.substr(4)) * 96) / 9144000;
// console.log("w: "+w+"\nh: "+h+"\nshapAdjst: "+shapAdjst+"\nshapAdjstVal: "+shapAdjstVal);
}
result +=
" <polygon points='" +
w * shapAdjstVal +
" 0,0 " +
h +
"," +
w +
" " +
h +
"' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "diamond": {
result +=
" <polygon points='" +
w / 2 +
" 0,0 " +
h / 2 +
"," +
w / 2 +
" " +
h +
"," +
w +
" " +
h / 2 +
"' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "trapezoid": {
const shapAdjst = getTextByPathList(node, [
"p:spPr",
"a:prstGeom",
"a:avLst",
"a:gd",
"attrs",
"fmla",
]);
let adjstVal = 0.25;
const maxAdjConst = 0.7407;
if (shapAdjst !== undefined) {
const adjst = (parseInt(shapAdjst.substr(4)) * 96) / 9144000;
adjstVal = (adjst * 0.5) / maxAdjConst;
// console.log("w: "+w+"\nh: "+h+"\nshapAdjst: "+shapAdjst+"\nadjstVal: "+adjstVal);
}
result +=
" <polygon points='" +
w * adjstVal +
" 0,0 " +
h +
"," +
w +
" " +
h +
"," +
(1 - adjstVal) * w +
" 0' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "parallelogram": {
const shapAdjst = getTextByPathList(node, [
"p:spPr",
"a:prstGeom",
"a:avLst",
"a:gd",
"attrs",
"fmla",
]);
let adjstVal = 0.25;
let maxAdjConst;
if (w > h) {
maxAdjConst = w / h;
} else {
maxAdjConst = h / w;
}
if (shapAdjst !== undefined) {
const adjst = parseInt(shapAdjst.substr(4)) / 100000;
adjstVal = adjst / maxAdjConst;
// console.log("w: "+w+"\nh: "+h+"\nadjst: "+adjstVal+"\nmaxAdjConst: "+maxAdjConst);
}
result +=
" <polygon points='" +
adjstVal * w +
" 0,0 " +
h +
"," +
(1 - adjstVal) * w +
" " +
h +
"," +
w +
" 0' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "pentagon": {
result +=
" <polygon points='" +
0.5 * w +
" 0,0 " +
0.375 * h +
"," +
0.15 * w +
" " +
h +
"," +
0.85 * w +
" " +
h +
"," +
w +
" " +
0.375 * h +
"' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "hexagon": {
const shapAdjstArray =
getTextByPathList(node, [
"p:spPr",
"a:prstGeom",
"a:avLst",
"a:gd",
]) || [];
let shapAdjst;
for (let i = 0; i < shapAdjstArray.length; i++) {
if (
getTextByPathList(shapAdjstArray[i], ["attrs", "name"]) === "adj"
) {
shapAdjst = getTextByPathList(shapAdjstArray[i], [
"attrs",
"fmla",
]);
}
}
let adjstVal = 0.25;
const maxAdjConst = 0.62211;
if (shapAdjst !== undefined) {
const adjst = (parseInt(shapAdjst.substr(4)) * 96) / 9144000;
adjstVal = (adjst * 0.5) / maxAdjConst;
// console.log("w: "+w+"\nh: "+h+"\nadjst: "+adjstVal);
}
result +=
" <polygon points='" +
w * adjstVal +
" 0,0 " +
h / 2 +
"," +
w * adjstVal +
" " +
h +
"," +
(1 - adjstVal) * w +
" " +
h +
"," +
w +
" " +
h / 2 +
"," +
(1 - adjstVal) * w +
" 0' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "heptagon": {
result +=
" <polygon points='" +
0.5 * w +
" 0," +
w / 8 +
" " +
h / 4 +
",0 " +
(5 / 8) * h +
"," +
w / 4 +
" " +
h +
"," +
(3 / 4) * w +
" " +
h +
"," +
w +
" " +
(5 / 8) * h +
"," +
(7 / 8) * w +
" " +
h / 4 +
"' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "octagon": {
const shapAdjst = getTextByPathList(node, [
"p:spPr",
"a:prstGeom",
"a:avLst",
"a:gd",
"attrs",
"fmla",
]);
let adj1 = 0.25;
if (shapAdjst !== undefined) {
adj1 = parseInt(shapAdjst.substr(4)) / 100000;
}
const adj2 = 1 - adj1;
// console.log("adj1: "+adj1+"\nadj2: "+adj2);
result +=
" <polygon points='" +
adj1 * w +
" 0,0 " +
adj1 * h +
",0 " +
adj2 * h +
"," +
adj1 * w +
" " +
h +
"," +
adj2 * w +
" " +
h +
"," +
w +
" " +
adj2 * h +
"," +
w +
" " +
adj1 * h +
"," +
adj2 * w +
" 0' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "decagon": {
result +=
" <polygon points='" +
(3 / 8) * w +
" 0," +
w / 8 +
" " +
h / 8 +
",0 " +
h / 2 +
"," +
w / 8 +
" " +
(7 / 8) * h +
"," +
(3 / 8) * w +
" " +
h +
"," +
(5 / 8) * w +
" " +
h +
"," +
(7 / 8) * w +
" " +
(7 / 8) * h +
"," +
w +
" " +
h / 2 +
"," +
(7 / 8) * w +
" " +
h / 8 +
"," +
(5 / 8) * w +
" 0' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "dodecagon": {
result +=
" <polygon points='" +
(3 / 8) * w +
" 0," +
w / 8 +
" " +
h / 8 +
",0 " +
(3 / 8) * h +
",0 " +
(5 / 8) * h +
"," +
w / 8 +
" " +
(7 / 8) * h +
"," +
(3 / 8) * w +
" " +
h +
"," +
(5 / 8) * w +
" " +
h +
"," +
(7 / 8) * w +
" " +
(7 / 8) * h +
"," +
w +
" " +
(5 / 8) * h +
"," +
w +
" " +
(3 / 8) * h +
"," +
(7 / 8) * w +
" " +
h / 8 +
"," +
(5 / 8) * w +
" 0' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
break;
}
case "bentConnector3": {
const shapAdjst = getTextByPathList(node, [
"p:spPr",
"a:prstGeom",
"a:avLst",
"a:gd",
"attrs",
"fmla",
]);
// console.log("isFlipV: "+String(isFlipV)+"\nshapAdjst: "+shapAdjst)
let shapAdjstVal = 0.5;
if (shapAdjst !== undefined) {
shapAdjstVal = parseInt(shapAdjst.substr(4)) / 100000;
// console.log("isFlipV: "+String(isFlipV)+"\nshapAdjst: "+shapAdjst+"\nshapAdjstVal: "+shapAdjstVal);
if (isFlipV) {
result +=
" <polyline points='" +
w +
" 0," +
(1 - shapAdjstVal) * w +
" 0," +
(1 - shapAdjstVal) * w +
" " +
h +
",0 " +
h +
"' fill='transparent'" +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' ";
} else {
result +=
" <polyline points='0 0," +
shapAdjstVal * w +
" 0," +
shapAdjstVal * w +
" " +
h +
"," +
w +
" " +
h +
"' fill='transparent'" +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' ";
}
if (
headEndNodeAttrs !== undefined &&
(headEndNodeAttrs["type"] === "triangle" ||
headEndNodeAttrs["type"] === "arrow")
) {
result += "marker-start='url(#markerTriangle_" + shpId + ")' ";
}
if (
tailEndNodeAttrs !== undefined &&
(tailEndNodeAttrs["type"] === "triangle" ||
tailEndNodeAttrs["type"] === "arrow")
) {
result += "marker-end='url(#markerTriangle_" + shpId + ")' ";
}
result += "/>";
}
break;
}
case "plus": {
const shapAdjst = getTextByPathList(node, [
"p:spPr",
"a:prstGeom",
"a:avLst",
"a:gd",
"attrs",
"fmla",
]);
let adj1 = 0.25;
if (shapAdjst !== undefined) {
adj1 = parseInt(shapAdjst.substr(4)) / 100000;
}
const adj2 = 1 - adj1;
result +=
" <polygon points='" +
adj1 * w +
" 0," +
adj1 * w +
" " +
adj1 * h +
",0 " +
adj1 * h +
",0 " +
adj2 * h +
"," +
adj1 * w +
" " +
adj2 * h +
"," +
adj1 * w +
" " +
h +
"," +
adj2 * w +
" " +
h +
"," +
adj2 * w +
" " +
adj2 * h +
"," +
w +
" " +
adj2 * h +
"," +
+w +
" " +
adj1 * h +
"," +
adj2 * w +
" " +
adj1 * h +
"," +
adj2 * w +
" 0' fill='" +
(!imgFillFlg
? grndFillFlg
? "url(#linGrd_" + shpId + ")"
: fillColor
: "url(#imgPtrn_" + shpId + ")") +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' />";
// console.log((!imgFillFlg?(grndFillFlg?"url(#linGrd_"+shpId+")":fillColor):"url(#imgPtrn_"+shpId+")"))
break;
}
case "line":
case "straightConnector1":
case "bentConnector4":
case "bentConnector5":
case "curvedConnector2":
case "curvedConnector3":
case "curvedConnector4":
case "curvedConnector5": {
if (isFlipV) {
result +=
"<line x1='" +
w +
"' y1='0' x2='0' y2='" +
h +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' ";
} else {
result +=
"<line x1='0' y1='0' x2='" +
w +
"' y2='" +
h +
"' stroke='" +
border.color +
"' stroke-width='" +
border.width +
"' stroke-dasharray='" +
border.strokeDasharray +
"' ";
}
if (
headEndNodeAttrs !== undefined &&
(headEndNodeAttrs["type"] === "triangle" ||
headEndNodeAttrs["type"] === "arrow")
) {
result += "marker-start='url(#markerTriangle_" + shpId + ")' ";
}
if (
tailEndNodeAttrs !== undefined &&
(tailEndNodeAttrs["type"] === "triangle" ||
tailEndNodeAttrs["type"] === "arrow")
) {
result += "marker-end='url(#markerTriangle_" + shpId + ")' ";
}
result += "/>";
break;
}
case "rightArrow": {
const shapAdjstArray = getTextByPathList(node, [
"p:spPr",
"a:prstGeom",
"a:avLst",
"a:gd",
]);
let sAdj1;
let sAdj1Val = 0.5;
let sAdj2;
let sAdj2Val = 0.5;
const maxSAdj2Const = w / h;
if (shapAdjstArray !== undefined) {
for (let i = 0; i < shapAdjstArray.length; i++) {
const sAdjName = getTextByPathList(shapAdjstArray[i], [
"attrs",
"name",
]);
if (sAdjName === "adj1") {
sAdj1 = getTextByPathList(shapAdjstArray[i], ["attrs", "fmla"]);
sAdj1Val = 0.5 - parseInt(sAdj1.substr(4)) / 200000;