How to use the @sketch-hq/sketch-file-format-ts.FileFormat1.BorderPosition function in @sketch-hq/sketch-file-format-ts

To help you get started, we’ve selected a few @sketch-hq/sketch-file-format-ts examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github airbnb / react-sketchapp / src / jsonUtils / borders.ts View on Github external
export const createUniformBorder = (
  width: number,
  color: string,
  style: BorderStyle = 'solid',
  position: FileFormat.BorderPosition = FileFormat.BorderPosition.Center,
  lineCapStyle: FileFormat.LineCapStyle = FileFormat.LineCapStyle.Butt,
  lineJoinStyle: FileFormat.LineJoinStyle = FileFormat.LineJoinStyle.Miter,
): { borderOptions: FileFormat.BorderOptions; borders: FileFormat.Border[] } => {
  const borderOptions = makeBorderOptions(style, width, lineCapStyle, lineJoinStyle);

  const borders: FileFormat.Border[] = [
    {
      _class: 'border',
      isEnabled: true,
      color: makeColorFromCSS(color),
      fillType: FileFormat.FillType.Color,
      position,
      thickness: width,
      contextSettings: {
        _class: 'graphicsContextSettings',
        blendMode: FileFormat.BlendMode.Normal,
github airbnb / react-sketchapp / src / jsonUtils / nodeImpl / makeSvgLayer.ts View on Github external
const viewStyle: ViewStyle = {};

  if (style.fill) {
    viewStyle.backgroundColor = style.fill;
  }

  const shapeGroup = makeShapeGroup(shapeGroupFrame, shapePaths, viewStyle);

  if (style.stroke) {
    const lineCap = makeLineCapStyle(style.strokeLineCap);
    const borderStyle = createUniformBorder(
      style.strokeWidth * scale,
      style.stroke,
      'solid',
      FileFormat.BorderPosition.Center,
      lineCap,
      lineCap,
    );
    shapeGroup.style = { ...shapeGroup.style, ...borderStyle };
  }

  return shapeGroup;
}
github airbnb / react-sketchapp / src / jsonUtils / shapeLayers.ts View on Github external
y: number,
  length: number,
  thickness: number,
  color: Color,
): FileFormat.ShapeGroup => {
  const frame = makeRect(x, y, thickness, length);
  const shapeFrame = makeRect(0, 0, thickness, length);
  const shapePath = makeShapePath(shapeFrame, makeVerticalPath());
  const content = makeShapeGroup(frame, [shapePath]);
  content.style.borders = [
    {
      _class: 'border',
      isEnabled: true,
      color: makeColorFromCSS(color),
      fillType: FileFormat.FillType.Color,
      position: FileFormat.BorderPosition.Center,
      thickness,
      contextSettings: {
        _class: 'graphicsContextSettings',
        blendMode: FileFormat.BlendMode.Normal,
        opacity: 1,
      },
      gradient: emptyGradient,
    },
  ];
  return content;
};