Skip to main content

SKYDRAWING

This library handles exportable drawings like PDF or DXF.

Drawing

Drawings are defined as a collection of pages containing layouts.

How To Create A Drawing

Create a drawing as:

const drawing = new SKYDRAWING.Drawing({
frame: 'Grid', // alternatives: 'Minimal' & 'None'
margin: 10
pageHeight: 297
pageWidth: 420
})

Below we have listed the most common page sizes:

FormatWidth (mm)Height (mm)
A1841594
A2594420
A3420297
A4297210

Pages

A drawing requires pages, which are used to add the content (as layouts). Add pages to your drawing as the examples below show:

drawing.addPage(1, { frame: 'Minimal',  margin: 30, height: 420, width: 594 })
drawing.addPage(2, { margin: 'None' })
drawing.addPage(3)

Optional arguments, that are not defined, take the value of the drawing's as default.

Add Content To Page

Add a layout to a page as:

drawing.addContent(1, myLayoutA, { anchor: 'bottom-left', scale: 1, showScale: false })
drawing.addContent(2, myLayoutB, { scale: 2, showScale: true, position: new SKYMATH.Vector2D(10, -35) })

Keep in mind that defining an anchor overrides the position.

A header is presented as a table converted into a layout. Create a simple version of it as:

const dateString = (new Date()).toISOString().split('T')[0] // simplified date
const headerLayout = SKYDRAWING.generateSimpleHeader({
date: dateString,
pageNr: '1 of 1',
projectId: 'Project Docs',
quotationId: 'Q14-0198',
scale: '1 : 20',
width: 30
})

This simple version is a layout already, so all the functionalities of the layouts can be used here, such as headerLayout.scaleContent(0.75) and others.

However, you might want to create your own table. To do so, create a header as a table first and then convert it into a layout. As an example wrapped in a function:

function getHeaderLayout() {
const dateString = (new Date()).toISOString().split('T')[0] // simplified date
const table = new SKYCAD.Table({ defaultTextSize: 3 })
table.addText('1 : 1', 0, 0, { label: 'Scale' })
table.addText('My coaster', 1, 0, { label: 'Project id' })
table.addText(dateString, 2, 0, { label: 'Date' })
table.addText('1 of 1', 3, 0, { label: 'Page' })
const headerLayout = table.generateLayout()
return headerLayout
}

Add Header To Page

drawing.setHeader(1, headerLayout, { anchor: 'bottom-right' })
drawing.setHeader(2, headerLayout, { anchor: 'top-right' })

Only one header can be added to a page. If more tables (ex. BOM or manufacturing lists) are to be added, these should be done through drawing.addContent() instead.

Example

Below a simple example of a coaster using a circular pattern is presented:

Drawing Example

function generateDrawing(component) {
const drawing = new SKYDRAWING.Drawing()

// Page
const firstPage = 1
drawing.addPage(firstPage, { pageHeight: 210, pageWidth: 297, frame: 'Grid' }) // A4 size

// Content
const layout = component.getLayoutForDrawing()
const dimensionLayout = component.getSketch()
layout.addLayout(dimensionLayout)
drawing.addContent(firstPage, layout, { scale: 1, anchor: 'center' })

// Header
const dateString = (new Date()).toISOString().split('T')[0] // simplified date
const headerLayout = SKYDRAWING.generateSimpleHeader({
date: dateString,
pageNr: '1 of 1',
projectId: 'My coaster',
scale: '1 : 1'
})
headerLayout.scaleContent(0.5)
drawing.setHeader(firstPage, headerLayout, { anchor: 'bottom-right' })

return drawing
}

Export

The drawing can be exported as either PDF or DXF, but the raw data can be extracted directly from the function generateDrawing() used in the DrawingMaker (DRAWING). For example, if the drawing is meant to be used and downloaded in the app, then the drawing could be easily extracted by exporting the component COASTERDRAWING into the app and use the function like:

const drawing = COASTERDRAWING.generateDrawing()

If you want to download the PDF or DXF files, you can check this section