Merge pull request #926 from sketch-hq/release/2025.1-dfea066b

Update with `release/2025.1-dfea066b`

Author: SheffieldKevin

.eslintrc

@@ -30,7 +30,6 @@
     "NSArray": "readonly",
     "NSMakePoint": "readonly",
     "CGRectMake": "readonly",
-    "MSArtboardGroup": "readonly",
     "MSPage": "readonly",
     "BCSketchInfo": "readonly",
     "log": "readonly",
@@ -51,6 +50,7 @@
     "MSDefaultStyle": "readonly",
     "MSLayer": "readonly",
     "MSDocumentData": "readonly",
+    "MSDetachedSymbol": "readonly",
     "MSSymbolMaster": "readonly",
     "MSSymbolInstance": "readonly",
     "MSOverridePoint": "readonly",
@@ -72,7 +72,6 @@
     "MSForeignSymbolProvider": "readonly",
     "MSForeignObjectCollector": "readonly",
     "MSStyleShadow": "readonly",
-    "MSStyleInnerShadow": "readonly",
     "MSGradientStop": "readonly",
     "MSImmutableGradientStop": "readonly",
     "MSGradient": "readonly",
@@ -95,7 +94,6 @@
     "MSSharedStyle": "readonly",
     "MSStyle": "readonly",
     "MSDataOverride": "readonly",
-    "MSImmutableArtboardGroup": "readonly",
     "MSImmutableLayerGroup": "readonly",
     "MSImmutableHotspotLayer": "readonly",
     "MSImmutableBitmapLayer": "readonly",
@@ -104,6 +102,7 @@
     "MSImmutableShapeGroup": "readonly",
     "MSStyledLayer": "readonly",
     "MSImmutableStyledLayer": "readonly",
+    "MSImmutableDetachedSymbol": "readonly",
     "MSImmutableSymbolInstance": "readonly",
     "MSImmutableSymbolMaster": "readonly",
     "MSImmutableTextLayer": "readonly",
@@ -185,6 +184,6 @@
     "NSUUID": "readonly",
     "NSError": "readonly",
     "NSMapTable": "readonly",
-    "MSTextAlignmentConverter": "readonly",
+    "MSTextAlignmentConverter": "readonly"
   }
 }

Source/dom/Factory.js

@@ -1,5 +1,6 @@
 export const Factory = {
   _typeToBox: {},
+  _typeAliases: {},
   _nativeToBox: {},
   _typeToNative: {},
   registerClass(boxedClass, nativeClass) {
@@ -11,12 +12,17 @@ export const Factory = {
     }
     this._nativeToBox[String(nativeClass.class())] = boxedClass
   },
+  registerAlias(boxedClass, otherBoxedClass) {
+    this._typeToBox[boxedClass.type] = boxedClass
+    this._typeAliases[boxedClass.type] = otherBoxedClass
+  },
   create(type, props) {
     const _type = type && type.type ? type.type : type
     const BoxedClass = this._typeToBox[_type]
     if (BoxedClass) {
       return new BoxedClass(props)
     }
+
     return undefined
   },
   createNative(type) {

Source/dom/__tests__/find.test.js

@@ -1,18 +1,42 @@
 /* globals expect, test */
 import { find, Rectangle } from '..'
 
-test('should find by type', (_context, document) => {
+test('should find Artboard by type', (_context, document) => {
   // eslint-disable-next-line no-param-reassign
   document.pages = [
     {
-      layers: [{ type: 'Artboard' }, { type: 'Shape' }],
+      layers: [
+        { type: 'Artboard' },
+        { type: 'Shape' }, 
+        { type: 'Group', layers: { type: 'Text' } }
+      ]
     },
   ]
+  // expect to find only one artboard
   expect(find('Artboard', document).map((x) => x.id)).toEqual([
     document.pages[0].layers[0].id,
   ])
 })
 
+test('should find Group by type', (_context, document) => {
+  document.pages = [
+    {
+      layers: [
+        { type: 'Artboard', layers: [
+          { type: 'Group', layers: { type: 'Text' } } 
+        ]},
+        { type: 'Shape' }, 
+        { type: 'Group', layers: { type: 'Text' } }
+      ]
+    },
+  ]
+  // expect to find only multiple groups including nested
+  expect(find('Group', document).map((x) => x.id)).toEqual([
+    document.pages[0].layers[0].layers[0].id, // nested group on artboard
+    document.pages[0].layers[2].id, // regular group on page
+  ])
+})
+
 test('should find by name', (_context, document) => {
   // eslint-disable-next-line no-param-reassign
   document.pages = [

Source/dom/__tests__/globalAssets.test.js

@@ -22,7 +22,7 @@ test('should reset global colors', () => {
 })
 
 test('should append global colors', () => {
-  globalAssets.colors = ['000000']
+  globalAssets.colors = ['#000000']
   globalAssets.colors.push('#FFFFFF')
   expect(globalAssets.colors.length).toEqual(2)
   expect(globalAssets.colors[1].color).toEqual('#ffffffff')

Source/dom/__tests__/import.test.js

@@ -15,7 +15,7 @@ test('should create Group from an SVG', () => {
   expect(group.layers[0].frame.height).toEqual(100)
 })
 
-test('should create group from a PDF', (_context, document) => {
+test('should create shape from a PDF', (_context, document) => {
   const layer = new Shape({
     parent: document.selectedPage,
     frame: new Rectangle(0, 0, 200, 100),
@@ -31,10 +31,10 @@ test('should create group from a PDF', (_context, document) => {
     formats: 'pdf',
     output: null,
   })
-  const page = createLayerFromData(buffer, 'pdf')
-  expect(page.type).toEqual('Group')
-  expect(page.frame.width).toEqual(200)
-  expect(page.frame.height).toEqual(100)
+  const imported = createLayerFromData(buffer, 'pdf')
+  expect(imported.type).toEqual('ShapePath')
+  expect(imported.frame.width).toEqual(200)
+  expect(imported.frame.height).toEqual(100)
 })
 
 test('should create Image from a bitmap', (_context, document) => {

Source/dom/assets/__tests__/ColorAsset.test.js

@@ -6,7 +6,7 @@ test('should create color asset from hex', (_context, document) => {
 
   const asset = document.colors[0]
   expect(asset.color).toBe('#ffffffff')
-  expect(asset.name).toBe(null)
+  expect(asset.name).toBe('')
 })
 
 test('should create color asset from MSColor', (_context, document) => {

Source/dom/assets/__tests__/GradientAsset.test.js

@@ -6,7 +6,7 @@ test('should create gradient asset from dictionary', (_context, document) => {
 
   const asset = document.gradients[0]
   expect(asset.gradient.type).toBe('Gradient')
-  expect(asset.name).toBe(null)
+  expect(asset.name).toBe('')
 })
 
 test('should create gradient asset from MSGradientAsset', (_context, document) => {

Source/dom/find.js

@@ -33,7 +33,10 @@ const attributesMap = {
       operator = '='
     }
     const predicate = []
-    const nativeClasses = Factory._typeToNative[value]
+    const nativeClasses =
+      Factory._typeToNative[
+        value in Factory._typeAliases ? Factory._typeAliases[value].type : value
+      ]
     if (!nativeClasses) {
       throw new Error(`Unknown layer type ${value}`)
     }
@@ -139,6 +142,14 @@ export function find(predicate, root) {
     },
   }
 
+  const FilterStragegy = Object.freeze({
+    None: 'none',
+    Artboard: 'artboard',
+    Group: 'group',
+  })
+
+  let filterStragegy = FilterStragegy.None
+
   predicateParts.forEach((part) => {
     const matched = Object.keys(matchExpr).some((k) => {
       const match = matchExpr[k].exec(part)
@@ -152,10 +163,18 @@ export function find(predicate, root) {
       }
 
       if (k === 'TYPE') {
-        if (match[1] === '*') {
-          nativePredicateParts.push('TRUEPREDICATE')
-        } else {
-          attributesMap.type('=', match[1], mutations)
+        switch (match[1]) {
+          case '*':
+            nativePredicateParts.push('TRUEPREDICATE')
+            break
+          // Artboards no longer exist as a dedicated type. All artboards are now layer
+          // groups with frame behaviour.
+          case 'Artboard':
+          case 'Group':
+            filterStragegy = FilterStragegy[match[1]] // set filter strategy and fallthrough
+          default:
+            attributesMap.type('=', match[1], mutations)
+            break
         }
       }
 
@@ -200,7 +219,47 @@ export function find(predicate, root) {
         }, NSMutableArray.new())
       : root.sketchObject.childrenIncludingSelf(false)
 
-  const matches = children.filteredArrayUsingPredicate(nativePredicate)
+  // Different filter strategies are used for backwards compatibility with plugins and
+  // scripts that work on the concept of artboards.
+  // Artboards no longer exist. Instead everything is a group with different behaviours:
+  // - Regular group: implicit size based on its contents
+  // - Frames: explicit size, independent of its contents, frames can exist on the canvas
+  //   or inside groups. Its contents resize based on the frame size and resizing
+  //   constraints.
+  // - Graphics: explicit size, independent of its contents, graphics can exist on the
+  //   canvas or inside groups. Its contents scale based on the group size.
+  var cb = (s) => {
+    // By default, return all children
+    if (s == FilterStragegy.None) {
+      return () => true
+    }
+
+    // The closest to artboards are canvas frames. These may be a frame or a graphic but
+    // cannot be a regular group.
+    const canvasFrames =
+      root.type == Types.Document
+        ? root.sketchObject.pages().reduce((prev, page) => {
+            prev.addObjectsFromArray(page.canvasFrames())
+            return prev
+          }, NSMutableArray.new())
+        : root.type == Types.Page
+        ? root.sketchObject.canvasFrames()
+        : []
+
+    switch (s) {
+      // Only include anything that is a canvas frame
+      case FilterStragegy.Artboard:
+        return (v) => canvasFrames.includes(v)
+      // Only include anything that is not a canvas frame, i.e. a regular group
+      case FilterStragegy.Group:
+        return (v) => !canvasFrames.includes(v)
+      // Should never happen, caught earlier
+      default:
+        return () => true
+    }
+  }
 
-  return toArray(matches).map((x) => wrapObject(x))
+  return toArray(children.filteredArrayUsingPredicate(nativePredicate))
+    .filter(cb(filterStragegy))
+    .map((x) => wrapObject(x))
 }

Source/dom/index.js

@@ -18,7 +18,8 @@ const { SmartLayout } = require('./models/SmartLayout')
 const { Style } = require('./style/Style')
 
 const { Layer } = require('./layers/Layer')
-const { Group } = require('./layers/Group')
+const { Pin, FlexSizing } = require('./layers/Layer')
+const { Group, GroupBehavior } = require('./layers/Group')
 const { Text } = require('./layers/Text')
 const { Image } = require('./layers/Image')
 const { Shape } = require('./layers/Shape')
@@ -60,7 +61,10 @@ const DOM = {
   Rectangle,
   Style,
   Layer,
+  FlexSizing,
+  Pin,
   Group,
+  GroupBehavior,
   Text,
   Image,
   Shape,

Source/dom/layers/Artboard.js

@@ -1,5 +1,5 @@
 import { DefinedPropertiesKey } from '../WrappedObject'
-import { Group } from './Group'
+import { Group, GroupBehavior } from './Group'
 import { Rectangle } from '../models/Rectangle'
 import { Types } from '../enums'
 import { Factory } from '../Factory'
@@ -19,11 +19,18 @@ export class Artboard extends Group {
   constructor(artboard = {}) {
     if (!artboard.sketchObject) {
       // eslint-disable-next-line no-param-reassign
-      artboard.sketchObject = Factory.createNative(Artboard)
+      artboard.sketchObject = Factory.createNative(Group)
         .alloc()
-        .initWithFrame(new Rectangle(0, 0, 100, 100).asCGRect())
+        .initWithFrame_behavior(
+          new Rectangle(0, 0, 100, 100).asCGRect(),
+          GroupBehavior.Frame
+        )
     }
     super(artboard)
+    // Mimics behaviour implemented at the controller level where they call
+    // `MSLayer.adjustAfterInsert()` which will apply the default styling.
+    this.background.enabled = true
+    // eslint-enable no-param-reassign
   }
 
   /**
@@ -43,11 +50,9 @@ export class Artboard extends Group {
 
 Artboard.type = Types.Artboard
 Artboard[DefinedPropertiesKey] = { ...Group[DefinedPropertiesKey] }
-Factory.registerClass(Artboard, MSArtboardGroup)
-Factory.registerClass(Artboard, MSImmutableArtboardGroup)
+Factory.registerAlias(Artboard, Group)
 
 delete Artboard[DefinedPropertiesKey].flow
-delete Artboard[DefinedPropertiesKey].style
 delete Artboard[DefinedPropertiesKey].locked
 delete Artboard[DefinedPropertiesKey].hidden
 delete Artboard[DefinedPropertiesKey].transform
@@ -68,13 +73,30 @@ Artboard.define('flowStartPoint', {
 Artboard.defineObject('background', {
   enabled: {
     get() {
-      return Boolean(Number(this._object.hasBackgroundColor()))
+      return (
+        this._object.style &&
+        this._object.style().fills &&
+        this._object.style().fills().length > 0
+      )
     },
     set(enabled) {
       if (this._parent.isImmutable()) {
         return
       }
-      this._object.setHasBackgroundColor(enabled)
+      const style = this._object.style ? this._object.style() : undefined
+      if (!style) {
+        return
+      }
+      if (enabled) {
+        const numFills = style.fills ? style.fills().length : 0
+        if (numFills === 0) {
+          // Create a default fill if enabling and no fills exist
+          style.addStylePartOfType(0) // 0 is for fills
+        }
+      } else {
+        // Remove all fills if disabling
+        style.removeAllStyleFills()
+      }
     },
   },
   includedInExport: {
@@ -90,13 +112,26 @@ Artboard.defineObject('background', {
   },
   color: {
     get() {
-      return colorToString(this._object.backgroundColor())
+      const firstFill = this._object.style
+        ? this._object.style().firstEnabledFill()
+        : undefined
+      return firstFill ? colorToString(firstFill.color()) : '#00000000'
     },
     set(color) {
       if (this._parent.isImmutable()) {
         return
       }
-      this._object.setBackgroundColor(Color.from(color).toMSColor())
+      if (!this._object.style) {
+        return
+      }
+      if (
+        !this._object.style().fills ||
+        this._object.style().fills().length === 0
+      ) {
+        this._object.style().addStylePartOfType(0) // Add a fill if none exists
+      }
+      const firstFill = this._object.style().firstEnabledFill()
+      firstFill.color = Color.from(color).toMSColor()
     },
   },
 })