VisioPageContent

VisioPageContent gives access to all instances of VisioShapes and VisioConnects present on the given page, as well exposes an API useful in converting page contents to JointJS Cells using pageContent.toGraphCells([,opt]) method.

To work with page content, modifying shapes etc., loading VisioPageContent is always the first step. Provided API allows fetching any kind of entity that is part of the page content.

Methods

getConnect()

visioPageContent.getConnect(shapeId: number): VisioConnect | null;

Return a VisioConnect associated with the provided shapeId. If no such shape exists, return undefined.

As VisioConnect contains connection metadata, it always points to the actual VisioShape that is a visual representation of the connection.

getConnects()

visioPageContent.getConnects(): VisioConnect[];

Return all VisioConnects present in the page content.

getElementShapes()

visioPageContent.getElementShapes(): VisioShape[];

Return all VisioShape's that would be identified as Element in JointJS.

getFonts()

visioPageContent.getFonts(): string[];

Return an array of fonts used by shapes on the page. If no fonts are defined, return an empty array.

getForeignShape()

visioPageContent.getForeignShape(archivePath: string): VisioShape | null;

Return VisioShape considered foreign (i.e. image), with the given path within the VisioArchive document. If there is no shape for the given path, method will return undefined

getForeignShapes()

visioPageContent.getForeignShapes(): VisioShape[];

Return all VisioShapes considered foreign (i.e. images) from the page content.

getLinkShapes()

visioPageContent.getLinkShapes(): VisioShape[];

Return all VisioShape's that would be identified as Link in JointJS.

getRootShape()

visioPageContent.getRootShape(id: number): VisioShape | null;

Return a top-level VisioShape with the given id from the page content. Return undefined if shape does not exist or is not a root shape.

getRootShapes()

visioPageContent.getRootShapes(): VisioShape[];

Return all top-level VisioShape instances from the page content. Omit all the sub-shapes.

getShape()

visioPageContent.getShape(id: number): VisioShape | null;

Return a VisioShape with the given id.

getShapes()

visioPageContent.getShapes(): VisioShape[];

Return all VisioShape instances from the page content.

getUnsupportedFonts()

visioPageContent.getUnsupportedFonts(): string[];

Return an array of fonts that are used by shapes on the page, however are not supported by the application. If all fonts are supported, return an empty array.

toGraphCells()

visioPageContent.toGraphCells(options?: VisioPageContent.ToGraphCellsAttributes): dia.Cell[];

Method used to convert contents of a Visio project page to JointJS Graph Cells. Its main usage is in the import process of a vsdx file into a JointJS application.

The toGraphCells([,opt]) method takes an object opt with the following parameters:

interface ToGraphCellsAttributes {
    ignoreNonPrinting?: boolean;
    ignoreSubShapeConnects?: boolean;
    scalable?: boolean;
    importShape?: (shape: VisioShape) => dia.Element | null;
    importConnect?: (connect: VisioConnect, sourceElement: dia.Element, targetElement: dia.Element) => dia.Link | null;
    importLabels?: (shape: VisioShape, link: dia.Link) => dia.Element[] | void;
    importImage?: (shape: VisioShape, element: dia.Element, image: VisioImageObject) => any[] | void;
    onImagesLoad?: (images: any[]) => void;
}

ignoreNonPrinting

Control if shapes marked in Visio project as nonPrinting should be taken into account during import or not. It defaults to true.

ignoreSubShapeConnects

Control if connections originating from or targeting nested shapes should be imported or not. It defaults to true.

importShape

For each:

importShape: (vsdShape) => {
    let element;
    // .. perform logic creating an Element
    // using the vsdShape as the source of information

    return element;
}

importConnect

importConnect: (vsdConnect, sourceElement, targetElement) => {
    let link;
    // .. perform logic creating a Link from vsdConnect

    return link;
}

importLabels

If VisioShape identified as a connection contains a text, it is considered a label for that connection. If this function is not used, the default converter will be used to create link labels.

Labels can be handled using importLabels function, which is passed vsdShape and link, and expects an array of label dia.Elements to be returned. If no new elements are being created for the links (i.e. we append labels to link directly), the function does not have to return anything.

importLabels: (vsdShape, link) => {
    const data = vsdShape.getSection(VisioSectionType.Property);
    const name = data.getProperty('BpmnName');
    if (name) {
        link.appendLabel({
            attrs: {
                body: {
                    fill: '#F4F7F6'
                },
                label: {
                    text: name,
                    fontWeight: 'bold',
                    fontSize: 10
                }
            },
            position: 0.5
        });
    }
}

importImage

Foreign shapes, i.e. images, can be handled separately with importImage function. The function is passed vsdShape, element, vsdImage. Function can be used i.e. to set xlinkHref attribute on an element.

importImage: (vsdShape, element, image) => {
    element.attr('image/xlinkHref', image.base64);
}

onImagesLoad

Although toGraphCells is run synchronously, images take time to load. To catch the moment where all images are ready, onImageLoad callback can be used. Callback function is passed the images collection.

onImagesLoad: (images) => {
    // i.e. finish preloading
}

A full example of usage can be found in the Visio BPMN import application.

scalable

Control if shapes should be imported with scalable selector, which allows shapes to be resized using JointJS api. Note, that this resizing is uniform across all parts of the shape including text. It defaults to false.

Types

ToGraphCellsAttributes

interface ToGraphCellsAttributes {
    ignoreNonPrinting?: boolean;
    ignoreSubShapeConnects?: boolean;
    importShape?: (shape: VisioShape) => dia.Element | null;
    importConnect?: (connect: VisioConnect, sourceElement: dia.Element, targetElement: dia.Element) => dia.Link | null;
    importLabels?: (shape: VisioShape, link: dia.Link) => dia.Element[] | void;
    importImage?: (shape: VisioShape, element: dia.Element, image: VisioImageObject) => any[] | void;
    onImagesLoad?: (images: any[]) => void;
}