bm-core-ui 2.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +1624 -0
- package/LICENSE +21 -0
- package/README.md +145 -0
- package/build/@types/index.d.ts +14078 -0
- package/build/BMCodeEditor/BMCodeEditor.js +707 -0
- package/build/BMCollectionView/BMCollectionView.js +5861 -0
- package/build/BMCollectionView/BMCollectionViewCell.js +688 -0
- package/build/BMCollectionView/BMCollectionViewFlowLayout.js +4467 -0
- package/build/BMCollectionView/BMCollectionViewLayout.js +830 -0
- package/build/BMCollectionView/BMCollectionViewLayoutAttributes.js +673 -0
- package/build/BMCollectionView/BMCollectionViewMasonryLayout.js +491 -0
- package/build/BMCollectionView/BMCollectionViewStackLayout.js +634 -0
- package/build/BMCollectionView/BMCollectionViewTileLayout.js +1121 -0
- package/build/BMCoreUI.css +2833 -0
- package/build/BMView/BMAttributedLabelView.js +310 -0
- package/build/BMView/BMLayoutConstraint_v2.5.js +1813 -0
- package/build/BMView/BMLayoutGuide.js +192 -0
- package/build/BMView/BMLayoutSizeClass.js +466 -0
- package/build/BMView/BMMenu.js +574 -0
- package/build/BMView/BMScrollView.js +247 -0
- package/build/BMView/BMTextField.js +512 -0
- package/build/BMView/BMTextFieldDelegate.js +71 -0
- package/build/BMView/BMView_v2.5.js +3572 -0
- package/build/BMView/BMViewport.js +221 -0
- package/build/BMViewLayoutEditor/BMLayoutEditor.js +6117 -0
- package/build/BMViewLayoutEditor/BMLayoutEditorConstraintSettings.js +417 -0
- package/build/BMViewLayoutEditor/BMLayoutEditorDelegate.js +59 -0
- package/build/BMViewLayoutEditor/BMLayoutEditorSettingCells.js +1653 -0
- package/build/BMViewLayoutEditor/BMLayoutEditorSettings.js +1480 -0
- package/build/BMViewLayoutEditor/BMLayoutEditorSettingsComplexCells.js +431 -0
- package/build/BMViewLayoutEditor/BMLayoutEditorSettingsDelegate.js +46 -0
- package/build/BMViewLayoutEditor/BMLayoutEditorVariablesController.js +460 -0
- package/build/BMViewLayoutEditor/BMLayoutEditorViewGroupSettings.js +293 -0
- package/build/BMViewLayoutEditor/BMLayoutEditorViewSettings.js +382 -0
- package/build/BMViewLayoutEditor/BMLayoutVariableProvider.js +202 -0
- package/build/BMWindow/BMConfirmationPopup.js +477 -0
- package/build/BMWindow/BMKeyboardShortcut.js +151 -0
- package/build/BMWindow/BMPopover/BMPopover.js +492 -0
- package/build/BMWindow/BMToolWindow.js +71 -0
- package/build/BMWindow/BMWindow.js +2000 -0
- package/build/Core/BMAnimationContext.js +1181 -0
- package/build/Core/BMColor.js +991 -0
- package/build/Core/BMCoreUI.js +470 -0
- package/build/Core/BMFunctionCollection.js +110 -0
- package/build/Core/BMIndexPath.js +165 -0
- package/build/Core/BMInset.js +138 -0
- package/build/Core/BMKeyPath.js +100 -0
- package/build/Core/BMPoint.js +291 -0
- package/build/Core/BMRect.js +556 -0
- package/build/Core/BMSize.js +137 -0
- package/build/iScroll/LICENSE +22 -0
- package/build/iScroll/iscroll-probe.js +2154 -0
- package/build/images/AlignBottom.png +0 -0
- package/build/images/AlignCenterX.png +0 -0
- package/build/images/AlignCenterY.png +0 -0
- package/build/images/AlignLeading.png +0 -0
- package/build/images/AlignTop.png +0 -0
- package/build/images/AlignTrailing.png +0 -0
- package/build/images/AllConstraints.png +0 -0
- package/build/images/BottomConstraint.png +0 -0
- package/build/images/CenterXConstraint.png +0 -0
- package/build/images/CenterYConstraint.png +0 -0
- package/build/images/CoreUI2.png +0 -0
- package/build/images/CoreUI2@2x.png +0 -0
- package/build/images/Desktop.png +0 -0
- package/build/images/DesktopMini.png +0 -0
- package/build/images/EqualHeight.png +0 -0
- package/build/images/EqualHorizontalSpacing.png +0 -0
- package/build/images/EqualHorizontalSpacingInSuperview.png +0 -0
- package/build/images/EqualVerticalSpacing.png +0 -0
- package/build/images/EqualVerticalSpacingInSuperview.png +0 -0
- package/build/images/EqualWidth.png +0 -0
- package/build/images/HeightConstraint.png +0 -0
- package/build/images/InactiveConstraints.png +0 -0
- package/build/images/Layout.png +0 -0
- package/build/images/LayoutVariables.png +0 -0
- package/build/images/LeftConstraint.png +0 -0
- package/build/images/OwnConstraints.png +0 -0
- package/build/images/Phone.png +0 -0
- package/build/images/PhoneLandscape.png +0 -0
- package/build/images/PhoneLandscapeMini.png +0 -0
- package/build/images/PhoneMini.png +0 -0
- package/build/images/PhonePortrait.png +0 -0
- package/build/images/PhonePortraitMini.png +0 -0
- package/build/images/Properties.png +0 -0
- package/build/images/RightConstraint.png +0 -0
- package/build/images/SubviewConstraints.png +0 -0
- package/build/images/Tablet.png +0 -0
- package/build/images/TabletLandscape.png +0 -0
- package/build/images/TabletLandscapeMini.png +0 -0
- package/build/images/TabletMini.png +0 -0
- package/build/images/TabletPortrait.png +0 -0
- package/build/images/TabletPortraitMini.png +0 -0
- package/build/images/TopConstraint.png +0 -0
- package/build/images/WidthConstraint.png +0 -0
- package/build/index.js +40 -0
- package/lib/@types/BMCoreUI.min.d.ts +14078 -0
- package/lib/BMCoreUI.min.js +1 -0
- package/package.json +58 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2019 ptc-iot-sharing
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
🛑 **Note: If you are planning to use this widget in Thingworx 8.5 or newer, strongly consider using [Core UI Widgets](https://github.com/ptc-iot-sharing/BMCoreUIWidgets) instead.**
|
|
2
|
+
|
|
3
|
+
This repository contains the standalone development version of the `BMCoreUI` widget library and is the source from which the widget is merged into core ui widgets.
|
|
4
|
+
|
|
5
|
+
# 1. Introduction
|
|
6
|
+
|
|
7
|
+
CoreUI is a javascript library that contains various reusable types and functions that may be used either as building blocks forming the basis of UI elements or as helpers for various UI-related tasks.
|
|
8
|
+
|
|
9
|
+
As a Thingworx extension, on its own, Core UI doesn't do anything, but it provides the functionality required by other extensions such as `BMCollectionView`, `BMCodeHost`, `BMUpdater` or `BMView`.
|
|
10
|
+
|
|
11
|
+
# 2. Index
|
|
12
|
+
|
|
13
|
+
- [About](#about)
|
|
14
|
+
- [Usage](#usage)
|
|
15
|
+
- [Development](#development)
|
|
16
|
+
- [Pre-Requisites](#pre-requisites)
|
|
17
|
+
- [Development Environment](#development-environment)
|
|
18
|
+
- [File Structure](#file-structure)
|
|
19
|
+
- [Build](#build)
|
|
20
|
+
- [Deployment](#deployment)
|
|
21
|
+
- [Credit/Acknowledgment](#creditacknowledgment)
|
|
22
|
+
- [License](#license)
|
|
23
|
+
|
|
24
|
+
# 3. About
|
|
25
|
+
|
|
26
|
+
CoreUI includes the following main "packages":
|
|
27
|
+
- `BMCoreUI` contains types that are extensively used by all other components. These include:
|
|
28
|
+
- `BMPoint` - Represents a 2D point.
|
|
29
|
+
- `BMSize` - Represents a 2D size.
|
|
30
|
+
- `BMRect` - Represents a 2D rectangle.
|
|
31
|
+
- `BMInset` - Represents a set of insets that can be applied to each edge of a rectangle.
|
|
32
|
+
- `BMIndexPath` - Represents sequence of indexes that can be followed to reach an object in a series of nested arrays.
|
|
33
|
+
- `BMKeyPath` - Represents a sequence of key names that can be followed to reach an object in a series of nested objects.
|
|
34
|
+
- `BMColor` - Enables working with CSS colors from javascript.
|
|
35
|
+
- `BMAnimationContext` and related classes - The CoreUI animation engine.
|
|
36
|
+
- `BMView` is a CoreUI extension to a DOM node through which additional functionality is added. This contains, among others the following important classes:
|
|
37
|
+
- `BMView` - Primarily used for building constraint-based layouts
|
|
38
|
+
- `BMLayoutConstraint` - Represents a constraint that should be satisfied between two views or a single view and a constant value
|
|
39
|
+
- `BMLayoutEditor` - A visual editor for layout constraints.
|
|
40
|
+
- `BMViewport` and `BMLayoutSizeClass` - Used for responsive layouts.
|
|
41
|
+
- `BMWindow` is a subclass of `BMView` that creates a floating view that can be dragged and resized.
|
|
42
|
+
- `BMCollectionView` is a sublcass of `BMView` that is a scrolling container that can display an arbitrary number of items whose position and size are controlled by a separate layout manager. It uses the following classes:
|
|
43
|
+
- `BMCollectionViewCell` - A subclass of `BMView` that represents a single item displayed by a collection view. Its use typically involves creating and registering a subclass.
|
|
44
|
+
- `BMCollectionViewLayout` - An object that manages the position and size of cells. It uses `BMCollectionViewLayoutAttributes` objects to declare those attributes.
|
|
45
|
+
- `BMCollectionViewDataSet` - An interface that communicates the contents that a collection view should display.
|
|
46
|
+
|
|
47
|
+
# 4. Usage
|
|
48
|
+
|
|
49
|
+
## 4.1. With Thingworx
|
|
50
|
+
|
|
51
|
+
To install CoreUI on Thingworx, you can download one of the release packages and directly import it as an extension.
|
|
52
|
+
|
|
53
|
+
Alternatively, you can clone this repo and build the extension from it.
|
|
54
|
+
|
|
55
|
+
## 4.2. In other projects
|
|
56
|
+
|
|
57
|
+
CoreUI can be included as a javascript dependency with npm. Run `npm install bm-core-ui` in the root of your javascript project.
|
|
58
|
+
|
|
59
|
+
Alternatively, you can clone this repo and build the library from it.
|
|
60
|
+
|
|
61
|
+
Both approaches will contain two versions of the library in these folders:
|
|
62
|
+
* `build` - Contains an unminified version of CoreUI that preserves the individual modules and can be used with a bundler like webpack e.g.:
|
|
63
|
+
```ts
|
|
64
|
+
// index.ts
|
|
65
|
+
import {BMRectMakeWithX} from 'bm-core-ui'
|
|
66
|
+
|
|
67
|
+
let myRect: BMRect = BMRectMakeWithX(50, {y: 50, width: 100, height: 100});
|
|
68
|
+
```
|
|
69
|
+
* `lib` - Contains a minified version of CoreUI where symbols are exported globally. This can be included directly as a script tag and symbols can be used directly e.g.:
|
|
70
|
+
```html
|
|
71
|
+
<!-- index.html -->
|
|
72
|
+
<script type="text/javascript" src="BMCoreUI.min.js"></script>
|
|
73
|
+
<script type="text/javascript">
|
|
74
|
+
let myRect = BMRectMakeWithX(50, {y: 50, width: 100, height: 100});
|
|
75
|
+
</script>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
# 5. Development
|
|
80
|
+
|
|
81
|
+
### 5.1. Pre-Requisites
|
|
82
|
+
|
|
83
|
+
The following software is required:
|
|
84
|
+
|
|
85
|
+
* [NodeJS](https://nodejs.org/en/): needs to be installed and added to the `PATH`. You should use the LTS version.
|
|
86
|
+
* [gulp command line utility](https://gulpjs.com/docs/en/getting-started/quick-start): is needed to run the build script.
|
|
87
|
+
|
|
88
|
+
The following software is recommended:
|
|
89
|
+
|
|
90
|
+
* [Visual Studio Code](https://code.visualstudio.com/): An integrated developer enviroment with great javascript and typescript support. You can also use any IDE of your liking, it just that most of the testing was done using VSCode.
|
|
91
|
+
|
|
92
|
+
### 5.2. Development Environment
|
|
93
|
+
In order to develop CoreUI you need to do the following:
|
|
94
|
+
1. Clone this repository
|
|
95
|
+
2. Open `package.json` and configure the `thingworxServer`, `thingworxUser` and `thingworxPassword` as needed.
|
|
96
|
+
3. Run `npm install`. This will install the development dependencies for the project.
|
|
97
|
+
4. Start working on the extension.
|
|
98
|
+
|
|
99
|
+
Note that whenever you add a new file to the extension, you should also declare it in `metadata.xml` in order for it to be included in the Thingworx extension. Additionally, if the files include comments from which additional definitions should be added to the Typescript definition file, they should be added in the build script in the `DTSFiles` array at the beginning of the script.
|
|
100
|
+
|
|
101
|
+
If the order of files is important, they will be combined in the order specified in `metadata.xml`.
|
|
102
|
+
|
|
103
|
+
### 5.3. File Structure
|
|
104
|
+
```
|
|
105
|
+
BMCoreUI
|
|
106
|
+
│ README.md // this file
|
|
107
|
+
│ package.json // here you specify Thingworx connection details
|
|
108
|
+
│ metadata.xml // thingworx metadata file for this widget. This is automatically updated based on your package.json and build settings
|
|
109
|
+
│ LICENSE // license file
|
|
110
|
+
│ Gulpfile.js // build script
|
|
111
|
+
│ DTSGen.js // a script that generates a Typescript definition file from the comments in CoreUI files
|
|
112
|
+
└───src // main folder where your developement will take place
|
|
113
|
+
│ │ file1.js // CoreUI javascript file
|
|
114
|
+
| | ...
|
|
115
|
+
│ └───images // folder for image resources you are included in the widget
|
|
116
|
+
└───build // temporary folder used during compilation
|
|
117
|
+
└───zip // location of the built extension
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### 5.4. Build
|
|
121
|
+
To build the extension, run `gulp` in the root of the project. This will generate an extension .zip file in the zip folder in the root of the project.
|
|
122
|
+
|
|
123
|
+
To build the extension and upload it to Thingworx, run `gulp upload` in the root of the project. The details of the Thingworx server to which the script will upload the extension are declared in the project's `package.json` file. These are:
|
|
124
|
+
* `thingworxServer` - The server to which the extension will be uploaded.
|
|
125
|
+
* `thingworxUser` and `thingworxPassword` - The credentials used for uploading. This should be a user that has permission to install extensions.
|
|
126
|
+
|
|
127
|
+
Both of the build tasks can optionally take the `--p` parameter. When this is specified, the build script will generate a production build. Unlike development builds, files in the production build will be combined and minified.
|
|
128
|
+
|
|
129
|
+
To build CoreUI as a library run `gulp --l`. This will create the following directories:
|
|
130
|
+
* `build` - Contains an un-minified version of CoreUI that preserves the individual modules and can be used with a bundler like webpack.
|
|
131
|
+
* `lib` - Contains a minified version of CoreUI where symbols are exported globally. This can be included as a script tag.
|
|
132
|
+
|
|
133
|
+
### 5.5. Deployment
|
|
134
|
+
|
|
135
|
+
Deployment to Thingworx is part of the build process as explained above. Alternatively, you can manually install the extension that is generated in the zip folder in the root of the project.
|
|
136
|
+
|
|
137
|
+
# 6. Credit/Acknowledgment
|
|
138
|
+
CoreUI uses the following the libraries:
|
|
139
|
+
* [Velocity.js](http://velocityjs.org): Used as the animation engine powering `BMAnimationContext` and as a fallback for when web animations are not supported or can't fully model requested animations.
|
|
140
|
+
* [kiwi.js](https://github.com/IjzerenHein/kiwi.js/): Used to solve the layout constraint equations for `BMView` layouts.
|
|
141
|
+
* [iScroll](https://github.com/cubiq/iscroll): Used in `BMScrollView` and `BMCollectionView` to handle scrolling in cases where it is required to map element positions to scroll offsets in ways that cannot be expressed purely in CSS. CoreUI uses a slightly modified version that is compatible with recent versions of Android.
|
|
142
|
+
|
|
143
|
+
# 7. License
|
|
144
|
+
|
|
145
|
+
[MIT License](LICENSE)
|