本文整理匯總了TypeScript中@cycle/dom.svg.tspan方法的典型用法代碼示例。如果您正苦於以下問題：TypeScript svg.tspan方法的具體用法？TypeScript svg.tspan怎麽用？TypeScript svg.tspan使用的例子？那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在類@cycle/dom.svg的用法示例。
在下文中一共展示了svg.tspan方法的3個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。
示例1: renderSourceOrSinkNode
function renderSourceOrSinkNode(node: StreamGraphNode, zaps: Array<Zap>) {
const index = zaps.map(zap => zap.id).indexOf(node.id);
const zap = index === -1 ? null : zaps[index];
const P = 5; // text padding
const hook = {
insert(vnode: VNode) {
const gElem = vnode.elm as Element;
const rectElem = gElem.childNodes[0] as Element;
const textElem = gElem.childNodes[1] as Element;
const tspanElem = textElem.childNodes[0] as Element;
tspanElem.setAttribute('x',
String(DIAGRAM_PADDING_H + node.x - textElem.clientWidth * 0.5 - P * 0.4),
);
tspanElem.setAttribute('y',
String(DIAGRAM_PADDING_V + node.y + textElem.clientHeight * 0.5 - P * 0.5),
);
rectElem.setAttribute('x',
String(DIAGRAM_PADDING_H + node.x - textElem.clientWidth * 0.5 - P),
);
rectElem.setAttribute('y',
String(DIAGRAM_PADDING_V + node.y - textElem.clientHeight * 0.5 - P),
);
rectElem.setAttribute('width', String(textElem.clientWidth + 2 * P));
rectElem.setAttribute('height', String(textElem.clientHeight + 2 * P));
},
};
return svg.g({ hook }, [
svg.rect({
class: {
[styles.sourceOrSinkNodeStyle]: !zap,
[styles.nodeZapNextStyle]: zap && zap.type === 'next',
[styles.nodeZapErrorStyle]: zap && zap.type === 'error',
[styles.nodeZapCompleteStyle]: zap && zap.type === 'complete',
},
attrs: {
x: node.x - node.width * 0.5 + DIAGRAM_PADDING_H,
y: node.y - node.height * 0.5 + DIAGRAM_PADDING_V,
rx: 9,
ry: 9,
width: node.width,
height: node.height,
},
}),
svg.text({ class: { [styles.sourceOrSinkNodeNameStyle]: true } }, [
svg.tspan(String(node.label)),
]),
renderNodeLabel(node, zap, styles.sourceOrSinkNodeLabelStyle),
]);
}示例2: renderNodeLabel
function renderNodeLabel(node: StreamGraphNode, zap: Zap | null, style: string): VNode {
let label = '';
if (zap) {
// MUTATION!
if (Array.isArray(zap.value)) {
const cappedArr = (zap.value as Array<any>).slice(0, 4).map(() => '\u25A1');
if (typeof cappedArr[3] !== 'undefined') {
cappedArr[3] = '\u22EF';
}
label = `[${cappedArr.join(',')}]`;
} else if (typeof zap.value === 'object' && zap.value !== null) {
label = '{...}';
} else if (zap.value === null) {
label = 'null';
} else if (typeof zap.value === 'string') {
label = `"${zap.value}"`;
} else {
label = String(zap.value);
}
}
function setTSpanContent(vnode: VNode) {
const textElem = vnode.elm as Element;
const tspanElem = textElem.childNodes[0] as Element;
if (label && !(zap && zap.type === 'complete')) {
tspanElem.innerHTML = label;
}
}
return svg.text({
class: {
[style]: !zap || (zap && zap.type === 'complete'),
[styles.nodeLabelZapNextStyle]: zap && zap.type === 'next',
[styles.nodeLabelZapErrorStyle]: zap && zap.type === 'error',
},
attrs: {
x: DIAGRAM_PADDING_H + node.x + node.width * 0.5 + 10,
y: DIAGRAM_PADDING_V + node.y + 5,
},
hook: {
insert(vnode: VNode) { setTSpanContent(vnode); },
update(oldVNode: VNode, newVNode: VNode) { setTSpanContent(newVNode); },
},
}, [
svg.tspan(''),
]);
}示例3: renderOperatorNode
function renderOperatorNode(node: StreamGraphNode) {
const hook = {
insert(vnode: VNode) {
const textElem = vnode.elm as Element;
const tspanElem = textElem.childNodes[0] as Element;
tspanElem.setAttribute('x',
String(DIAGRAM_PADDING_H + node.x - textElem.clientWidth * 0.5),
);
tspanElem.setAttribute('y',
String(DIAGRAM_PADDING_V + node.y + textElem.clientHeight * 0.5 - 4),
);
},
};
return svg.text({ hook, class: {[styles.operatorNodeStyle]: true} }, [
svg.tspan(String(node.label)),
]);
}