bm-core-ui 2.7.0

package/build/BMViewLayoutEditor/BMLayoutEditorConstraintSettings.js

@@ -0,0 +1,417 @@
+// @ts-check
+import {YES, NO, BMExtend} from '../Core/BMCoreUI'
+import {__BMVelocityAnimate} from '../Core/BMAnimationContext'
+import {BMLayoutAttribute, BMLayoutConstraintKind, BMLayoutConstraintRelation} from '../BMView/BMLayoutConstraint_v2.5'
+import {BMMenuItem} from '../BMView/BMMenu'
+import { _BMLayoutEditorCollectionSettingsPanel, BMLayoutEditorSettingsTab, _BMLayoutEditorSettingsPanel, _BMURLOfImageAtPath, BMLayoutEditorSettingKind, BMLayoutEditorSettingsSection, BMLayoutEditorSetting, BMLayoutEditorEnumSetting } from './BMLayoutEditorSettings'
+
+
+// @type _BMLayoutEditorConstraintSettingsPanel
+
+/**
+ * A class that controls the settings for a view.
+ */
+export function _BMLayoutEditorConstraintSettingsPanel() {} // <constructor>
+
+_BMLayoutEditorConstraintSettingsPanel.prototype = BMExtend(Object.create(_BMLayoutEditorCollectionSettingsPanel.prototype), {
+    constructor: _BMLayoutEditorConstraintSettingsPanel,
+
+    /**
+     * The view whose settings are displayed.
+     */
+    _displayedConstraint: undefined, // <BMLayoutConstraint>
+
+    /**
+     * The view from which this constraint settings panel was opened.
+     */
+    _referenceView: undefined, // <BMView>
+
+    /**
+     * The visual attributes tab.
+     */
+    _attributesTab: undefined, // <BMLayoutEditorSettingsTab>
+
+    /**
+     * Designated initializer. Initializes this settings panel with the given settings view.
+     * @param view <_BMLayoutSettingsView>          The settings view.
+     * @return <_BMLayoutEditorSettingsPanel>       This setttings panel.
+     */
+    initWithSettingsView(settingsView, {forConstraint: constraint, withReferenceView: view}) {
+        _BMLayoutEditorSettingsPanel.prototype.initWithSettingsView.call(this, settingsView);
+
+        this._displayedConstraint = constraint;
+        this._referenceView = view;
+
+        // Create the default tabs
+        this._attributesTab = BMLayoutEditorSettingsTab.tabWithName('Attributes', {icon: _BMURLOfImageAtPath('images/Properties.png')});
+        this._attributesTab._settingsPanel = this;
+
+        this._currentTab = this._attributesTab;
+
+        this._tabs = [this._attributesTab];
+
+        this.title = 'Constraint';
+
+        if (this.layoutEditor.delegate && this.layoutEditor.delegate.layoutEditorAdditionalSettingTabsForConstraint) {
+            const additionalTabs = this.layoutEditor.delegate.layoutEditorAdditionalSettingTabsForConstraint(this.layoutEditor, constraint);
+            this._tabs = this._tabs.concat(additionalTabs);
+        }
+
+        for (const tab of this._tabs) {
+            tab._settingsPanel = this;
+            tab._constraint = constraint;
+            tab.updateSettings();
+        }
+
+        // TODO: Custom tabs
+
+        return this;
+    },
+
+
+    /**
+     * Invoked by tabs when their settings have been invalidated and should be updated.
+     * @param tab <BMLayoutEditorSettingsTab>       The tab whose settings have been invalidated.
+     */
+    _updateSettingsForTab(tab) {
+        if (tab == this._attributesTab) {
+            tab._settingSections.length = 0;
+
+            const constraint = this._displayedConstraint;
+            
+            // Prepare the menu options
+            const attributeOptions = [];
+            if (!constraint.isConstraintCollection) if (constraint._kind == BMLayoutConstraintKind.Horizontal) {
+                if (constraint._sourceViewAttribute === BMLayoutAttribute.Width) {
+                    attributeOptions.push(BMMenuItem.menuItemWithName(constraint._sourceViewAttribute, {userInfo: constraint._sourceViewAttribute}));
+                }
+                else {
+                    attributeOptions.push(BMMenuItem.menuItemWithName(BMLayoutAttribute.Leading, {userInfo: BMLayoutAttribute.Leading}));
+                    attributeOptions.push(BMMenuItem.menuItemWithName(BMLayoutAttribute.CenterX, {userInfo: BMLayoutAttribute.CenterX}));
+                    attributeOptions.push(BMMenuItem.menuItemWithName(BMLayoutAttribute.Trailing, {userInfo: BMLayoutAttribute.Trailing}));
+                    attributeOptions.push(BMMenuItem.menuItemWithName(BMLayoutAttribute.Left, {userInfo: BMLayoutAttribute.Left}));
+                    attributeOptions.push(BMMenuItem.menuItemWithName(BMLayoutAttribute.Right, {userInfo: BMLayoutAttribute.Right}));
+                }
+            }
+            else {
+                if (constraint._sourceViewAttribute === BMLayoutAttribute.Height) {
+                    attributeOptions.push(BMMenuItem.menuItemWithName(constraint._sourceViewAttribute, {userInfo: constraint._sourceViewAttribute}));
+                }
+                else {
+                    attributeOptions.push(BMMenuItem.menuItemWithName(BMLayoutAttribute.Top, {userInfo: BMLayoutAttribute.Top}));
+                    attributeOptions.push(BMMenuItem.menuItemWithName(BMLayoutAttribute.CenterY, {userInfo: BMLayoutAttribute.CenterY}));
+                    attributeOptions.push(BMMenuItem.menuItemWithName(BMLayoutAttribute.Bottom, {userInfo: BMLayoutAttribute.Bottom}));
+                }
+            }
+    
+            if (constraint.isConstraintCollection) {
+                if (constraint._hasEditableConstant) {
+                    const constant = BMLayoutEditorSettingsSection.section();
+                    constant._settings[0] = BMLayoutEditorSetting.settingWithName('Constant', {kind: BMLayoutEditorSettingKind.Constant, target: constraint, variations: YES, property: 'constant'});
+                    constant._settings[0].automaticallyExpandsVariations = YES;
+                    this._attributesTab._settingSections.push(constant);
+                }
+    
+                const affectedViews = BMLayoutEditorSettingsSection.section();
+                affectedViews.title = 'Affected Views';
+                let index = 1;
+                for (const view of constraint._views) {
+                    affectedViews._settings.push(BMLayoutEditorSetting.settingWithName('View ' + index, {kind: BMLayoutEditorSettingKind.View, target: constraint._views, property: index - 1}));
+                    index++;
+                }
+                this._attributesTab._settingSections.push(affectedViews);
+            }
+            else {
+                const firstView = BMLayoutEditorSettingsSection.section();
+                firstView._settings[0] = BMLayoutEditorSetting.settingWithName('First View', {kind: BMLayoutEditorSettingKind.View, target: constraint, property: '_sourceView'});
+                firstView._settings[1] = BMLayoutEditorEnumSetting.settingWithName('Attribute', {kind: BMLayoutEditorSettingKind.Enum, target: constraint, property: '_sourceViewAttribute'});
+                firstView._settings[1].options = attributeOptions;
+                this._attributesTab._settingSections.push(firstView);
+        
+                const relation = BMLayoutEditorSettingsSection.section();
+                relation._settings[0] = BMLayoutEditorEnumSetting.settingWithName('Relation', {kind: BMLayoutEditorSettingKind.Enum, target: constraint, property: '_relation'});
+                relation._settings[0].options = [
+                    BMMenuItem.menuItemWithName('=', {userInfo: BMLayoutConstraintRelation.Equals}),
+                    BMMenuItem.menuItemWithName('\u2265', {userInfo: BMLayoutConstraintRelation.GreaterThanOrEquals}),
+                    BMMenuItem.menuItemWithName('\u2264', {userInfo: BMLayoutConstraintRelation.LessThanOrEquals})
+                ];
+                this._attributesTab._settingSections.push(relation);
+        
+                const secondView = BMLayoutEditorSettingsSection.section();
+                if (constraint._targetView) {
+                    secondView._settings[0] = BMLayoutEditorSetting.settingWithName('Multiplier', {kind: BMLayoutEditorSettingKind.Number, target: constraint, property: '_multiplier'});
+                    secondView._settings[1] = BMLayoutEditorSetting.settingWithName('Second View', {kind: BMLayoutEditorSettingKind.View, target: constraint, property: '_targetView'});
+                    secondView._settings[2] = BMLayoutEditorEnumSetting.settingWithName('Attribute', {kind: BMLayoutEditorSettingKind.Enum, target: constraint, property: '_targetViewAttribute'});
+                    secondView._settings[2].options = attributeOptions;
+                }
+                let constantSetting;
+                secondView._settings[secondView._settings.length] = constantSetting = BMLayoutEditorSetting.settingWithName('Constant', {kind: BMLayoutEditorSettingKind.Constant, target: constraint, variations: YES, property: 'constant'});
+                constantSetting.automaticallyExpandsVariations = YES;
+                this._attributesTab._settingSections.push(secondView);
+            }
+    
+            const priority = BMLayoutEditorSettingsSection.section();
+            priority._settings[0] = BMLayoutEditorSetting.settingWithName('Priority', {kind: BMLayoutEditorSettingKind.Number, target: constraint, variations: YES, property: 'priority'});
+            priority._settings[1] = BMLayoutEditorSetting.settingWithName('Active', {kind: BMLayoutEditorSettingKind.Boolean, target: constraint, variations: YES, property: 'isActive'});
+            priority._settings[1].automaticallyExpandsVariations = YES;
+            this._attributesTab._settingSections.push(priority);
+
+            if (this.layoutEditor.delegate && this.layoutEditor.delegate.layoutEditorAdditionalSettingSectionsForTab) {
+                for (const section of this.layoutEditor.delegate.layoutEditorAdditionalSettingSectionsForTab(this.layoutEditor, tab)) {
+                    tab._settingSections.push(section);
+                }
+            }
+    
+            const deleteSection = BMLayoutEditorSettingsSection.section();
+            deleteSection._settings[0] = BMLayoutEditorSetting.settingWithName('Delete', {kind: BMLayoutEditorSettingKind.DeleteConstraintButton, target: constraint, variations: NO});
+            this._attributesTab._settingSections.push(deleteSection);
+        }
+        else {
+            tab._settingSections.length = 0;
+
+            if (this.layoutEditor.delegate && this.layoutEditor.delegate.layoutEditorAdditionalSettingSectionsForTab) {
+                for (const section of this.layoutEditor.delegate.layoutEditorAdditionalSettingSectionsForTab(this.layoutEditor, tab)) {
+                    tab._settingSections.push(section);
+                }
+            }
+        }
+    },
+
+    // @override - BMLayoutEditorSettingsPanel
+    async settingsPanelWillAppear(animated) {
+        this.layoutEditor.selectConstraint(this._displayedConstraint, {withReferenceView: this._referenceView});
+        
+        await 0;
+
+        // Focus the relevant constraint box
+        const setting = BMLayoutEditorSetting.settingWithName('Constant', {kind: BMLayoutEditorSettingKind.Constant, target: this._displayedConstraint, variations: YES, property: 'constant'});
+        setting._sizeClass = this.layoutEditor.activeSizeClass;
+
+        const indexPath = this._attributesTab.indexPathForObject(setting);
+        const cell = indexPath && this._attributesTab._collectionView.cellAtIndexPath(indexPath);
+        if (cell) {
+            cell._delaysSuggestionsDropdown = YES;
+            cell._inputView.node.focus();
+        }
+    },
+
+    // @override - BMLayoutEditorSettingsPanel
+    settingsPanelDidAppear(animated) {
+    },
+
+    // @override - BMLayoutEditorSettingsPanel
+    settingsPanelWillDisappear(animated) {
+
+    },
+
+    // @override - BMLayoutEditorSettingsPanel
+    settingsPanelDidDisappear(animated) {
+
+    },
+});
+
+// @endtype
+
+// @type _BMLayoutEditorConstraintSettingsTab
+
+/**
+ * A specialized settings tab used for displaying view layout settings.
+ */
+function _BMLayoutEditorConstraintSettingsTab() {} // <constructor>
+
+_BMLayoutEditorConstraintSettingsTab.prototype = BMExtend(Object.create(BMLayoutEditorSettingsTab.prototype), {
+    constructor: _BMLayoutEditorConstraintSettingsTab,
+
+    /**
+     * The view whose constraints are displayed.
+     */
+    _displayedView: undefined, // <BMView>
+
+    /**
+     * Controls whether subview constraints are displayed.
+     */
+    _showsSubviewConstraints: NO, // <Boolean>
+
+    /**
+     * The categories of the view's own constraints.
+     */
+    _constraintCategories: undefined, // <Object<String, [BMLayoutConstraint]>
+
+    /**
+     * Initializes this view layout tab for the specified view.
+     * @param view <BMView>     The view whose constraints will be displayed.
+     */
+    initWithView(view) {
+        BMLayoutEditorSettingsTab.prototype.initWithName.call(this, 'Layout', {icon: _BMURLOfImageAtPath('images/Layout.png')});
+
+        return this;
+    },
+
+    updateSettings() {
+        this._updateSettings();
+    },
+
+    /**
+     * Updates the visible constraints.
+     * If this tab is visible, it also updates the displayed constraints.
+     */
+    _updateSettings() {
+        const view = this._displayedView;
+
+        this.beginUpdates();
+
+        this._settingSections.length = 0;
+
+        if (this._intrinsicResistanceSection) {
+            this._settingSections.push(this._intrinsicResistanceSection);
+        }
+        else {
+            const intrinsicResistanceSection = BMLayoutEditorSettingsSection.section();
+            this._intrinsicResistanceSection = intrinsicResistanceSection;
+            intrinsicResistanceSection._settings[0] = BMLayoutEditorSetting.settingWithName('Compression Resistance', {kind: BMLayoutEditorSettingKind.Integer, target: view, property: 'compressionResistance'});
+            intrinsicResistanceSection._settings[1] = BMLayoutEditorSetting.settingWithName('Expansion Resistance', {kind: BMLayoutEditorSettingKind.Integer, target: view, property: 'expansionResistance'});
+            this._settingSections.push(intrinsicResistanceSection);
+        }
+
+        if (this._intrinsicSizeSection) {
+            this._settingSections.push(this._intrinsicSizeSection);
+        }
+        else {
+            const intrinsicSizeSection = BMLayoutEditorSettingsSection.section();
+            this._intrinsicSizeSection = intrinsicSizeSection;
+            intrinsicSizeSection._settings[0] = BMLayoutEditorSetting.settingWithName('Intrinsic Size', {kind: BMLayoutEditorSettingKind.Info, target: view, property: 'supportsIntrinsicSize'});
+            this._settingSections.push(intrinsicSizeSection);
+        }
+
+        const constraintViewPicker = this._constraintViewPickerSection || BMLayoutEditorSettingsSection.section();
+        this._constraintViewPickerSection = constraintViewPicker;
+        constraintViewPicker.name = 'Show';
+        constraintViewPicker._settings[0] = BMLayoutEditorEnumSetting.settingWithName('Show', {kind: BMLayoutEditorSettingKind.Segment, target: this, property: '_displayMode'});
+        constraintViewPicker._settings[0].options = [
+            BMMenuItem.menuItemWithName('Own Constraints', {icon: _BMURLOfImageAtPath('images/OwnConstraints.png'), userInfo: 'own'}),
+            BMMenuItem.menuItemWithName('Subview Constraints', {icon: _BMURLOfImageAtPath('images/SubviewConstraints.png'), userInfo: 'subview'}),
+            BMMenuItem.menuItemWithName('Inactive Constraints', {icon: _BMURLOfImageAtPath('images/InactiveConstraints.png'), userInfo: 'inactive'}),
+            BMMenuItem.menuItemWithName('All Constraints', {icon: _BMURLOfImageAtPath('images/AllConstraints.png'), userInfo: 'all'})
+        ];
+        this._settingSections.push(constraintViewPicker);
+
+
+        // View constraints will be split into four groups:
+        //
+        // 1. Visible by default and non-collapsible will be the constraints that directly affect the view,
+        // or link the view to its siblings or ancestors
+        //
+        // 2. A second, collapsed by default group, will show the constraints that link the view to its descendants
+        //
+        // 3. A third, collapsed by default group, will show the inactive constraints
+        //
+        // 4. A final group shows the view's internal constraints in a read-only mode
+        let constraintCategoryMap = {};
+        let subviewConstraintCategoryMap = {};
+        let inactiveConstraintsMap = {};
+        let hasSubviewConstraints = NO;
+        let hasInactiveConstraints = NO;
+
+        // Split up the constraints into the various categories
+        view.localConstraints.forEach(constraint => {
+            let category = constraint.categoryKind;
+
+            if (!constraint._configuration.isActive) {
+                hasInactiveConstraints = YES;
+                inactiveConstraintsMap[category] = inactiveConstraintsMap[category] || [];
+                inactiveConstraintsMap[category].push(constraint);
+                return;
+            }
+
+            if (!constraint.isConstraintCollection) {
+                // Push subview constraints into their own categories
+                if (constraint._sourceView == view && constraint._targetView && constraint._targetView.isDescendantOfView(view)) {
+                    subviewConstraintCategoryMap[category] = subviewConstraintCategoryMap[category] || [];
+                    subviewConstraintCategoryMap[category].push(constraint);
+                    hasSubviewConstraints = YES;
+                    return;
+                }
+                if (constraint._targetView == view && constraint._sourceView.isDescendantOfView(view)) {
+                    subviewConstraintCategoryMap[category] = subviewConstraintCategoryMap[category] || [];
+                    subviewConstraintCategoryMap[category].push(constraint);
+                    hasSubviewConstraints = YES;
+                    return;
+                }
+            }
+
+            constraintCategoryMap[category] = constraintCategoryMap[category] || [];
+            constraintCategoryMap[category].push(constraint);
+        });
+
+        for (const category of Object.keys(constraintCategoryMap).sort()) {
+            const section = this[`_${category}`] || BMLayoutEditorSettingsSection.section();
+            this[`_${category}`] = section;
+            section.length = 0;
+            section.name = category + ' Constraints';
+            section._settings = constraintCategoryMap[category].map(constraint => BMLayoutEditorSetting.settingWithName(constraint.toString(), {kind: BMLayoutEditorSettingKind.Constraint, target: constraint}));
+
+            this._settingSections.push(section);
+        }
+
+        this._constraintCategories = constraintCategoryMap;
+
+        //---------------------------------------------------------------------------------------------------------
+        if (hasSubviewConstraints && this._showsSubviewConstraints) {
+            for (const category of Object.keys(subviewConstraintCategoryMap).sort()) {
+                const categoryName = '_subview' + category;
+                const section = this[categoryName] || BMLayoutEditorSettingsSection.section();
+                this[categoryName] = section;
+                section.length = 0;
+                section.name = 'Subview ' + category + ' Constraints';
+                section._settings = subviewConstraintCategoryMap[category].map(constraint => BMLayoutEditorSetting.settingWithName(constraint.toString(), {kind: BMLayoutEditorSettingKind.Constraint, target: constraint}));
+    
+                this._settingSections.push(section);
+            }
+        }
+
+        //---------------------------------------------------------------------------------------------------------
+        if (hasInactiveConstraints && this._showsInactiveConstraints) {
+            for (const category of Object.keys(inactiveConstraintsMap).sort()) {
+                const categoryName = '_inactive' + category;
+                const section = this[category] || BMLayoutEditorSettingsSection.section();
+                this[category] = section;
+                section.length = 0;
+                section.name = 'Inactive ' + category + ' Constraints';
+                section._settings = inactiveConstraintsMap[category].map(constraint => BMLayoutEditorSetting.settingWithName(constraint.toString(), {kind: BMLayoutEditorSettingKind.Constraint, target: constraint}));
+    
+                this._settingSections.push(section);
+            }
+        }
+
+        //---------------------------------------------------------------------------------------------------------
+        let internalConstraints = view.internalConstraints();
+        if (internalConstraints.length) {
+            const section = this._internalConstraintsSection || BMLayoutEditorSettingsSection.section();
+            this._internalConstraintsSection = section;
+            section.length = 0;
+            section.name = 'Internal Constraints';
+            section._settings = internalConstraints.map(constraint => BMLayoutEditorSetting.settingWithName(constraint.toString(), {kind: BMLayoutEditorSettingKind.Constraint, target: constraint}));
+
+            this._settingSections.push(section);
+        }
+
+        if (this.layoutEditor) this.layoutEditor._drawConstraintsForView(this._displayedView, {includesInactiveConstraints: this._showsInactiveConstraints, includesSubviewConstraints: this._showsSubviewConstraints});
+
+        const deactivateConstraintsSection = BMLayoutEditorSettingsSection.section();
+        deactivateConstraintsSection._settings[0] = BMLayoutEditorSetting.settingWithName('Deactivate Constraints', {kind: BMLayoutEditorSettingKind.DeactivateConstraintsButton, target: this});
+        this._settingSections.push(deactivateConstraintsSection);
+
+        this.commitUpdates();
+    }
+});
+
+/**
+ * Constructs and returns a view layout settings tab for the given view.
+ * @param view <BMView>                                 The view whose constraints will be displayed.
+ * @return <_BMLayoutEditorConstraintSettingsTab>       A view layout settings tab.
+ */
+_BMLayoutEditorConstraintSettingsTab.viewLayoutTabForView = function (view) {
+    return (new _BMLayoutEditorConstraintSettingsTab).initWithView(view);
+}
+
+// @endtype

package/build/BMViewLayoutEditor/BMLayoutEditorDelegate.js

@@ -0,0 +1,59 @@
+// @type interface BMLayoutEditorDelegate extends BMWindowDelegate
+
+/**
+ * The specification for a `BMLayoutEditorDelegate` object, which is used to provide information to the layout editor regarding additional settings and can
+ * receive various lifecycle callbacks from it.
+ */
+function BMLayoutEditorDelegate() {} // <constructor>
+
+BMLayoutEditorDelegate.prototype = {
+
+    /**
+     * Invoked by the layout editor to obtain an optional list of additional tabs to use when creating the settings
+     * panel for a view.
+     * 
+     * Delegates that implement this method should return an array of additional tabs that will be added to the panel.
+     * 
+     * It is not required to add the actual settings to the tabs from this method. Instead, the layout editor will invoke
+     * the `layoutEditorAdditionalSettingSectionsForTab(_, _)` method to obtain the settings to add after this method returns.
+     * @param editor <BMLayoutEditor>           The layout editor invoking this method.
+     * @param view <BMView>                     The view for which to add additional tabs.
+     * @return <[BMLayoutEditorSettingsTab]>    An array of settings tabs.
+     */
+    layoutEditorAdditionalSettingTabsForView(editor, view) {
+
+    },
+
+    /**
+     * Invoked by the layout editor to obtain an optional list of additional tabs to use when creating the settings
+     * panel for a constraint.
+     * 
+     * Delegates that implement this method should return an array of additional tabs that will be added to the panel.
+     * 
+     * It is not required to add the actual settings to the tabs from this method. Instead, the layout editor will invoke
+     * the `layoutEditorAdditionalSettingSectionsForTab(_, _)` method to obtain the settings to add after this method returns.
+     * @param editor <BMLayoutEditor>           The layout editor invoking this method.
+     * @param constraint <BMLayoutConstraint>   The view for which to add additional tabs.
+     * @return <[BMLayoutEditorSettingsTab]>    An array of settings tabs.
+     */
+    layoutEditorAdditionalSettingTabsForConstraint(editor, constraint) {
+
+    },
+
+    /**
+     * Invoked by the layout editor to obtain an optional list of additional setting sections to add to the given tab when
+     * creating the settings panel for a selected object. This method will also be invoked whenever the settings for the given
+     * tab have been invalidated.
+     * 
+     * Delegates that implement this method should return an array of additional sesctions that will be added to the panel.
+     * @param editor <BMLayoutEditor>               The layout editor invoking this method.
+     * @param tab <BMLayoutEditorSettingsTab>       The tab for which to add additional settings.
+     * @return <[BMLayoutEditorSettingsSection]>    An array of settings ssections.
+     */
+    layoutEditorAdditionalSettingSectionsForTab(editor, tab) {
+
+    }
+
+};
+
+// @endtype