扩展 SVG.Element 的更好方法，让 vscode 知道已进行更改并提供文档

Question

我正在使用 SVG.js and the documentation 描述了一种在库中扩展 classes 的方法，以便为扩展 class 的所有对象添加额外的功能。

我想出了这个例子来为继承自 SVG.Element 的任何对象提供一个红色边界框。

import * as SVG from '@svgdotjs/svg.js';

SVG.extend(SVG.Element, {
    bounding_box: function(margin) {
        var bbox = this.bbox()
        return this.parent().rect({
            x: bbox.x - margin/2,
            y: bbox.y - margin/2,
            width: bbox.width + margin,
            height: bbox.height + margin
        })
        .stroke("red")
        .attr("fill-opacity", 0)
    }
})

然而，尽管这可行，但由于这种情况发生在运行时，因此 vscode 无法为继承自 SVG.Element 的对象提供此功能的智能建议。同样，我无法向任何使用此功能的人提供此功能的文档。

我试图更改 node_modules/@svgdotjs/svg.js/dist/svg.node.js 文件以及 node_modules/@svgdotjs/svg.js/src/elements/Element.js 元素正文 class 以包含我的功能，但是在尝试使用它时我收到一条错误消息，指出该功能不存在。

我更愿意为 open source project on github 做出贡献，但在我弄清楚这些该死的文件以及真正有用的东西之前，恐怕我将毫无用处。

我需要更改哪个文件才能将新功能写入库的 SVG.Element class？我是否需要克隆存储库并进行重建？

我以前从未做过开源，所以这对我来说是第一次。干杯。

Answer 1

IntelliSense 使用 JSDoc syntax to enhance code completion. Unfortunately, the documentation of what works or not is patchy. This page makes a lot of promises, but here 的一个子集，有效的列表要小得多。

描述这种 class 扩展的正确 JSDoc 方法是对用作 SVG.extend() 参数的对象文字使用 @mixin MyExtension 注释，然后注释 class 与 @mixes MyExtension。这在 VSCode v1.48.

中不起作用

相反，虽然 @memberof 注释的使用被列为“错误”，但它似乎有点工作。你要mixin的方法必须和对象字面量分开写：

//mockup for the purpose of testing
const SVG = {};

SVG.Element = class {
    bbox () {
        return {x:0, y:0, width:1, height:1}
    }
    parent () {
        return this;
    }
}

/** 
 * @memberof SVG.Element
 * @param {number} margin
 */
function bounding_box (margin) {
    var bbox = this.bbox()
    return this.parent().rect({
        x: bbox.x - margin/2,
        y: bbox.y - margin/2,
        width: bbox.width + margin,
        height: bbox.height + margin
    })
    .stroke("red")
    .attr("fill-opacity", 0)
}

SVG.extend(SVG.Element, {bounding_box});

然后 bounding_box 函数中的 this 被正确识别为 SVG.Element 类型。写作时

const el = SVG.Element();
el.bounding_box()

.bounding_box 未在提示中列为方法，但 margin 参数输入正确。

在边栏中，大纲将 .bounding_box 显示为 SVG.Element 的成员，但显示为属性，而不是方法。

扩展 SVG.Element 的更好方法，让 vscode 知道已进行更改并提供文档

Better way to extend SVG.Element that lets vscode know the change has been made and provides documentation

javascript

svg

node.js

svg.js