Tutorial: Customization

By default, tag views allow users to select individual lines. To disable this functionality, you can use the setSelectionEnabled method.

// Disallow user selection
view.setSelectionEnabled(false);

By default, side 2 of two-side views displays the tag image for single-side tags. You can instead configure it to be automatically hidden when a single-side tag is shown:

twoSideView.setAutoHideSide2(true);

Rulers

By default, tag views show the top and left rulers on side 1, and the top and right rulers on side 2. Instead, you can specify explicitly which rulers to show and which to hide.

sideView.setVisibleRulers({ bottom: true });

twoSideView.setVisibleRulers({
    side1: { right: true, top: true },
    side2: { left: true, top: true }
});

Units of measurement

By default, rulers show metric units (centimeters) and allow users to switch to imperial units (inches). You can also switch units programmatically:

view.showImperialUnits(true);

The unit switcher (cm/in) is by default displayed in one corner on each side at ruler intersections, depending on available rulers (if rulers are also left with default positions, units are displayed in the top left corner for side 1 and the top right corner for side 2). This default can be overridden like this:

sideView.setVisibleUnits({ bottomLeft: true });

twoSideView.setVisibleUnits({
    side1: { topLeft: true, bottomLeft: true },
    side2: { topRight: true, bottomRight: true }
});

If you would like to restore the default positioning logic for the unit switcher, call resetVisibleUnits:

view.resetVisibleUnits();

Mouse wheel

By default, the mouse wheel zooms the tag view in and out if the browser supports it. You can override this behavior by replacing the default mouse wheel handler with your own:

view.setOnWheel(function(event) {
    // handle the event
});

Here the event parameter is the jQuery event object for the wheel event.

Event handlers

If you want to receive a notification when the user selects or deselects engraving lines, use addSelectionChangeListener:

view.addSelectionListener(function(selectedLines) {
    // handle selection change
});

Here the selectedLines parameter is an array with zero-based indexes of selected lines. For example, if the user selected the first and third line, selectedLines will be [0, 2].

For two-side views, the event handler accepts two extra optional parameters representing the side on which the selection changed, and the other side.

view.addSelectionListener(function(selectedLines, side, otherSide) {
    if (side === view.getSide1()) {
        // handle selection change on side 1
    } else {
        // handle selection change on side 2
    }
});

To receive notifications about engraving lines that exceed the tag bounds, use addOutOfBoundsChangeListener. The parameters are the same, except the first argument of the event handler function is the array of indexes of engraving lines that lie fully or partially outside the tag bounds.

Colors and fonts

By default, a tag view uses colors and fonts set on its canvas element via CSS rules, which usually results in black on white if canvas CSS was not customized. For example, the following CSS rule can be applied to customize a tag view:

canvas.tag-side {
    font-family: Helvetica;
    font-size: 16px;
    background-color: #f0f0f0;
    color: #303030;
}

Guide line and selection border colors are automatically derived from the CSS foreground color.

Colors derived from CSS can be overridden via HTML data attributes on the canvas tag, whose value can be any color specification valid in CSS. For example, the following HTML definition changes colors used by the framework to various shades of green (and red for error conditions):

<canvas
    data-rulers-color="green"
    data-outlines-color="darkgreen"
    data-guidelines-color="darkseagreen"
    data-text-color="seagreen"
    data-selection-color="mediumseagreen"
    data-outlines-collision-color="red"
    data-guidelines-collision-color="red"
    data-invalid-color="darkred"
    data-rules-center-color="#fe3939"
    data-rules-selection-color="#fe3939"
    data-guidelines-center-color="#eeeeee"
    data-selection-center-color="#909090"
></canvas>

All data-*-color attributes are optional.

If you change colors and fonts by programmatically manipulating the DOM tree and CSS, it is advised to call the repaint() method on the tag view so the changes are applied immediately.