feat(): Added Movable.inscribe()

src/components/Movable/Movable.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import {shallow, mount} from 'enzyme';
 import {expect} from 'chai';
 import sinon from 'sinon';
-import {Movable} from './Movable.jsx';
+import Movable from './';
 
 describe('<Movable/>', () => {
 
@@ -95,4 +95,14 @@ describe('<Movable/>', () => {
             expect(event.dy).to.eql(10);
         });
     });
+
+    describe('Utils', () => {
+        it('Movable.inscribe', () => {
+            const r = (x, y, w, h) => ({left: x, top: y, width: w, height: h});
+            expect(Movable.inscribe(r(0, 0, 10, 10), r(0, 0, 20, 20))).to.eql(r(0, 0, 10, 10));
+            expect(Movable.inscribe(r(20, 20, 10, 10), r(0, 0, 20, 20))).to.eql(r(10, 10, 10, 10));
+            expect(Movable.inscribe(r(-20, -20, 10, 10), r(0, 0, 20, 20))).to.eql(r(0, 0, 10, 10));
+            expect(Movable.inscribe(r(0, 0, 20, 20), r(0, 0, 20, 20))).to.eql(r(0, 0, 20, 20));
+        });
+    });
 });

src/components/Movable/Movable.utils.js

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2020, Amdocs Corp.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {clamp, toCSS} from 'utility/rect';
+
+/**
+ *
+ * @param rect {{top: number, left: number, width: number, height: number}}
+ * @param container {{top: number, left: number, width: number, height: number}}
+ * @return {{top: number, left: number, width: number, height: number}}
+ */
+export const inscribe = (rect, container) => toCSS(clamp(
+    rect,
+    {...rect, left: container.left + container.width - rect.width, top: container.top + container.height - rect.height},
+    {...rect, left: container.left, top: container.top}
+));

src/components/Movable/index.js

@@ -15,5 +15,8 @@
  */
 
 import Movable from './Movable';
+import {inscribe} from './Movable.utils';
+
+Movable.inscribe = inscribe;
 
 export default Movable;

src/components/Resizable/Resizable.utils.js

@@ -16,6 +16,13 @@
 
 import {clamp, add, toCSS} from 'utility/rect';
 
+/**
+ *
+ * @param initial {{top: number, left: number, width: number, height: number}}
+ * @param delta {{top: number, left: number, width: number, height: number}}
+ * @param max {{top: number, left: number, width: number, height: number}}
+ * @return {{top: number, left: number, width: number, height: number}}
+ */
 export const inscribe = (initial, delta, max) => {
     const rect = add(initial, delta);
     return toCSS(clamp(