Add copy to clipboard button for position/rotation/scale properties

src/components/components/PropertyRow.js

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import { faRotateLeft } from '@fortawesome/free-solid-svg-icons';
 
 import { AwesomeIcon } from '../AwesomeIcon';
+import CopyToClipboardButton from '../CopyToClipboardButton';
 import BooleanWidget from '../widgets/BooleanWidget';
 import ColorWidget from '../widgets/ColorWidget';
 import InputWidget from '../widgets/InputWidget';
@@ -16,6 +17,9 @@ import Vec3Widget from '../widgets/Vec3Widget';
 import Vec2Widget from '../widgets/Vec2Widget';
 import { updateEntity } from '../../lib/entity';
 import { equal } from '../../lib/utils';
+import { getComponentClipboardRepresentation } from '../../lib/entity';
+
+const COPYABLE_COMPONENTS = ['position', 'rotation', 'scale'];
 
 export default class PropertyRow extends React.Component {
   static propTypes = {
@@ -212,10 +216,28 @@ export default class PropertyRow extends React.Component {
           {props.name}
         </label>
         {this.getWidget()}
-        {isPropertyExplicitlySet && type !== 'map' && (
+        <div className="propertyRow-actions">
+          {type === 'vec3' &&
+            COPYABLE_COMPONENTS.includes(props.componentname) && (
+              <CopyToClipboardButton
+                title="Copy to clipboard"
+                message="Copied to clipboard"
+                text={() =>
+                  getComponentClipboardRepresentation(
+                    props.entity,
+                    props.componentname
+                  )
+                }
+              />
+            )}
           <button
             className="reset-button"
             title="Reset"
+            style={
+              !(isPropertyExplicitlySet && type !== 'map')
+                ? { visibility: 'hidden' }
+                : null
+            }
             onClick={() => {
               updateEntity(
                 props.entity,
@@ -227,7 +249,7 @@ export default class PropertyRow extends React.Component {
           >
             <AwesomeIcon icon={faRotateLeft} />
           </button>
-        )}
+        </div>
       </div>
     );
   }

src/style/components.styl

@@ -117,7 +117,7 @@
   input.string
     box-sizing border-box
     padding-left 8px
-    width 150px
+    width 142px
 
   input[type="text"]:focus,
   input.string:focus
@@ -131,6 +131,12 @@
     margin 0 0 0 5px
     width 68px
 
+.commonComponents .propertyRow
+  padding-right 45px
+
+  .text
+    width 90px
+
 .propertyRowDefined .text
   color var(--color-property-defined)
   font-weight 600
@@ -139,20 +145,26 @@
   font-style italic
   font-weight 600
 
+.propertyRow .propertyRow-actions
+  align-items baseline
+  display flex
+  gap 4px
+  position absolute
+  right 8px
+
+.propertyRow .propertyRow-actions a.button
+  font-size 13px
+  line-height 1
+
 .propertyRow .reset-button
   background none
   border none
   color var(--color-base-content)
   cursor pointer
-  opacity 0.6
   padding 2px
-  position absolute
-  right 8px
-  top 50%
-  transform translateY(-50%)
 
   &:hover
-    opacity 1
+    color var(--color-primary)
 
 #addComponentContainer
   align-items center