feat: include default css and images in the npm package (#225)

Providing these resources simplify the `maxGraph` integration.

Use the default CSS in ts-example to illustrate how to override defaults
Initiate a documentation to start guiding users.

README.md

@@ -111,6 +111,8 @@ You will see something like in the following _maxGraph panning_ demo:
 
 For more details, have a look at the [storybook stories](packages/html/stories).
 
+Notice that some elements produced by `maxGraph` require to use [CSS and images](./packages/docs/css-and-images.md) provided in the npm package.
+
 
 ## TypeScript support
 

packages/core/package.json

@@ -14,7 +14,9 @@
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "files": [
-    "dist"
+    "css",
+    "dist",
+    "images"
   ],
   "homepage": "https://github.com/maxGraph/maxGraph",
   "repository": {

packages/docs/css-and-images.md

@@ -0,0 +1,41 @@
+# CSS and Images
+
+## CSS
+
+Some features of `maxGraph` create elements in the DOM to let interact with the `Graph`.
+For instance, it happens hen using _Rubberband_, _Tooltip_, _MaxWindow_, _Editor_ and _Toolbar_.
+
+These elements require the application to provide CSS rules for correct display.
+
+`maxGraph` provides a default CSS file that can be used in the application like in the following:
+```js
+import '@maxgraph/core/css/common.css';
+```
+
+It is possible to customize the defaults by providing new CSS rules.
+
+For example, create a `custom.css` file:
+```css
+/* For rubber band selection, override maxGraph defaults */
+div.mxRubberband {
+  border-color: #b18426;
+  background: #db9b0b;
+}
+```
+Then, import it in the application: 
+```js
+import '@maxgraph/core/css/common.css';
+import './custom.css'
+```
+
+## Images
+
+The `@maxgraph/core` npm package includes images that are required by some features.
+
+When using these features, the images must be available in the application. `maxGraph` currently requires to configure the path to the images,
+using `Client.setImageBasePath`.
+
+This configuration is inherited from `mxGraph` and may be simplified in the future. 
+
+
+**TODO: list some features requiring images**

packages/ts-example/src/main.ts

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import '@maxgraph/core/css/common.css';
 import './style.css';
 import {
   Client,

packages/ts-example/src/style.css

@@ -40,12 +40,8 @@ footer {
   overflow: hidden;
 }
 
-/* For rubber band selection as we don't have access to the maxGraph CSS files in the project */
+/* For rubber band selection, override maxGraph defaults */
 div.mxRubberband {
-  position: absolute;
-  overflow: hidden;
-  border-style: solid;
-  border-width: 2px;
   border-color: #b18426;
   background: #db9b0b;
 }