drawio/composite/composite-cdk.drawio.svg

<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="730px" height="401px" viewBox="-0.5 -0.5 730 401" content="&lt;mxfile pages=&quot;2&quot;&gt;&lt;diagram id=&quot;C5RBs43oDa-KdzZeNtuy&quot; name=&quot;cdk&quot;&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(255, 255, 255);">
    <defs/>
    <g>
        <path d="M 474 270 L 474 230 L 674 230 L 674 270" fill="#cce5ff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"/>
        <path d="M 474 270 L 474 330 L 674 330 L 674 270" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 474 270 L 674 270" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" font-style="italic" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="573.5" y="247.5">
                &lt;&lt;abstract&gt;&gt;
            </text>
            <text x="573.5" y="261.5">
                Resource
            </text>
        </g>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 190px; height: 1px; padding-top: 277px; margin-left: 480px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 22px; overflow: hidden;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                + node: Node
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="480" y="289" fill="#000000" font-family="Helvetica" font-size="12px">
                    + node: Node
                </text>
            </switch>
        </g>
        <path d="M 474 300 L 674 300" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 190px; height: 1px; padding-top: 311px; margin-left: 480px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 22px; overflow: hidden;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                <u>
                                    + isResource(construct: IConstruct)
                                </u>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="480" y="323" fill="#000000" font-family="Helvetica" font-size="12px">
                    + isResource(construct: IConstru...
                </text>
            </switch>
        </g>
        <path d="M 494 100 L 494 80 L 654 80 L 654 100" fill="#cce5ff" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 494 100 L 494 160 L 654 160 L 654 100" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 494 100 L 654 100" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="573.5" y="97.5">
                Construct
            </text>
        </g>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 150px; height: 1px; padding-top: 107px; margin-left: 500px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 22px; overflow: hidden;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                + node: Node
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="500" y="119" fill="#000000" font-family="Helvetica" font-size="12px">
                    + node: Node
                </text>
            </switch>
        </g>
        <path d="M 494 130 L 654 130" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 150px; height: 1px; padding-top: 141px; margin-left: 500px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 22px; overflow: hidden;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                <u>
                                    + isConstruct(x: any)
                                </u>
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="500" y="153" fill="#000000" font-family="Helvetica" font-size="12px">
                    + isConstruct(x: any)
                </text>
            </switch>
        </g>
        <path d="M 34 282 L 34 262 L 194 262 L 194 282" fill="#cce5ff" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 34 282 L 34 298 L 194 298 L 194 282" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 34 282 L 194 282" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" font-style="italic" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="113.5" y="279.5">
                IResource
            </text>
        </g>
        <path d="M 34 286 L 194 286" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 34 113 L 34 93 L 194 93 L 194 113" fill="#cce5ff" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 34 113 L 34 147 L 194 147 L 194 113" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 34 113 L 194 113" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <g fill="#000000" font-family="Helvetica" font-style="italic" pointer-events="none" text-anchor="middle" font-size="12px">
            <text x="113.5" y="110.5">
                IConstruct
            </text>
        </g>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 150px; height: 1px; padding-top: 120px; margin-left: 40px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left; max-height: 22px; overflow: hidden;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                + node: Node
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="40" y="132" fill="#000000" font-family="Helvetica" font-size="12px">
                    + node: Node
                </text>
            </switch>
        </g>
        <path d="M 34 143 L 194 143" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 494 120 L 208.12 120" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/>
        <path d="M 195.12 120 L 208.12 113.5 L 208.12 126.5 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 574 230 L 574 178.12" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 574 161.12 L 582.5 178.12 L 565.5 178.12 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 474 280 L 208.12 280" fill="none" stroke="#000000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/>
        <path d="M 195.12 280 L 208.12 273.5 L 208.12 286.5 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 114 262 L 114 165.12" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 114 148.12 L 122.5 165.12 L 105.5 165.12 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <rect x="419.13" y="340" width="309.75" height="60" fill="#fff2cc" stroke="#000000" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 308px; height: 1px; padding-top: 370px; margin-left: 420px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                Strictly saying, Resource also has node.children, but it is a CDK internal element that users do not need to be aware of. Therefore, it is assumed to be empty and no aggregation line is used.
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="574" y="374" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Strictly saying, Resource also has node.children, b...
                </text>
            </switch>
        </g>
        <rect x="243" y="169" width="267" height="51" fill="#fff2cc" stroke="#000000" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 265px; height: 1px; padding-top: 195px; margin-left: 244px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                TypeScript's property is inherited by interface implementations, so node is added to the concrete class as well.
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="377" y="198" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    TypeScript's property is inherited by interf...
                </text>
            </switch>
        </g>
        <path d="M 574 64.01 L 574 60 L 573 60 L 573 50 L 113 50 L 113 90.76" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 574 79.01 L 569.59 71.51 L 574 64.01 L 578.41 71.51 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <path d="M 106.5 78.88 L 113 91.88 L 119.5 78.88" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-end; justify-content: unsafe flex-start; width: 1px; height: 1px; padding-top: 67px; margin-left: 319px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
                            <div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: nowrap;">
                                node.children
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="319" y="67" fill="#000000" font-family="Helvetica" font-size="11px">
                    node.children
                </text>
            </switch>
        </g>
        <rect x="0.25" y="320" width="227.5" height="30" fill="#fff2cc" stroke="#000000" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 226px; height: 1px; padding-top: 335px; margin-left: 1px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                TypeScript can extend interfaces
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="114" y="339" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    TypeScript can extend interfaces
                </text>
            </switch>
        </g>
        <rect x="113" y="0" width="70" height="30" fill="#ffff88" stroke="#000000" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 15px; margin-left: 114px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                My own Class
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="148" y="19" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    My own Class
                </text>
            </switch>
        </g>
        <rect x="23" y="0" width="70" height="30" fill="#cce5ff" stroke="#000000" pointer-events="none"/>
        <g transform="translate(-0.5 -0.5)">
            <switch>
                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 68px; height: 1px; padding-top: 15px; margin-left: 24px;">
                        <div data-drawio-colors="color: #000000; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: none; white-space: normal; overflow-wrap: normal;">
                                Provided by CDK
                            </div>
                        </div>
                    </div>
                </foreignObject>
                <text x="58" y="19" fill="#000000" font-family="Helvetica" font-size="12px" text-anchor="middle">
                    Provided by...
                </text>
            </switch>
        </g>
    </g>
    <switch>
        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
                Text is not SVG - cannot display
            </text>
        </a>
    </switch>
</svg>